Een duik in de wereld van CSS en JavaScript

Nieuwe updates en releases zijn de normaalste zaak van de (digitale) wereld. Het is dus belangrijk om op de hoogte te blijven van trends en veranderingen in de branche. Vorige maand was het aan front-end developers Bram en Luuk om hun kennis op het gebied van CSS en JavaScript bij te spijkeren. Ze reisden af naar Berlijn en bezochten CssConf en JsConf. Bram deelt de hoogtepunten van de conferenties, maar ook hoe nieuwe technieken als 'OpenType Font Varations' en 'Progressive Web Apps' geïmplementeerd kunnen worden.

Dag 1: CssConf

Taal van de liefde

Bram: CssConf is dé conferentie waar inspiratie en informatie wordt gedeeld over de taal waarin de opmaak van een website wordt beschreven. Een bestandstype die vaak wordt gekoppeld aan een HTML bestand en die aangeeft hoe een website eruit moet zien. Kleuren, lettertypes, fontgrootte, noem het maar op. Het dagprogramma van de conferentie bestond uit presentaties van creatievelingen die de meest toegankelijke, best uitvoerende en mooiste apps en web ervaringen hebben gecreëerd.

Subgrid

Het is nieuw én spannend: subgrid! Wat het is? Subgrid is een aanvulling op CSS Grid, waarbij de items binnen het CSS Grid toegang krijgen tot de rij en kolom uitlijning van het bovenliggende grid. Dit zorgt voor een optimale uitlijning van elementen binnen een grid. We moeten helaas nog even geduld hebben... Deze technologie is op het moment van schrijven nog niet te gebruiken in de normale browsers, maar zeker iets om naar uit te kijken!

Typografie

Ooit gehoord van variabele fonts? Officieel worden ze ‘OpenType Font Variations’ genoemd. Waar elke lettertypestijl normaal gesproken uit een apart bestand bestaat, stopt deze techniek alle lettertypestijlen in 1 bestand. Dit kan een goede performancewinst opleveren voor de website. Vooral vanwege de winst in laadtijd onderzoeken we bij Perplex de mogelijkheden om variabele fonts op korte termijn toe te passen in nieuwe projecten.

CSS tests

Even als front-end developers onder elkaar... Jij hebt toch ook wel eens je CSS code verwijderd? De angst dat er iets stuk gaat, is vanaf nu verleden tijd! Het is namelijk mogelijk om tests te schrijven die bepaalde ‘visuele’ elementen checken. Dit werkt als volgt: een programma vergelijkt een screenshot van de huidige website met een vorig screenshot (een soort ‘master’) en geeft de front-end developer een melding wanneer daar afwijkingen in voorkomen. Handig!

Testen bij Perplex

Bij Perplex maken we momenteel al gebruik van een aantal tools om onze websites te testen. We gebruiken Browserstack: een tool om onze websites op echte fysieke apparaten te testen. Ook beschikken wij over een devicewall waarmee we een website in meerdere browsers, verdeeld over vier beeldschermen, tegelijk kunnen testen. Een visuele test tool zou daar eventueel aan toegevoegd kunnen worden.

Dag 2 & 3: JsConf

Actie, reactie

Na alles over CSS gehoord te hebben, was het tijd om in de wereld van JavaScript te duiken. JsConf is een conferentie waar de JavaScript gemeenschap uit Europa bij elkaar komt om alles over deze scripttaal te leren. Dé taal die websites interactief maakt. Bij deze interactiviteit kun je denken aan het reageren op muisklikken binnen een pagina. De gebruiker klikt op een knop, JavaScript pakt dit op en geeft een reactie. De reactie kan in dit geval het sluiten van een melding zijn of het openen van de navigatie.

Progressive Web Apps

Google Chrome maakt Progressive Web Apps (PWA) steeds belangrijker binnen de browser. Daarom is het handig om er meer van te weten. PWA’s zijn websites die als app 'geïnstalleerd' kunnen worden op de meeste smartphones. Ze hebben een aantal voordelen tegenover apps uit de App Store, namelijk:

  • een PWA neemt aanzienlijk minder ruimte in op je telefoon;
  • handmatig updaten is verleden tijd omdat de website altijd wijzigingen zichtbaar maakt voor gebruikers;
  • PWA’s hoeven - in tegenstelling tot een native app - niet apart ontwikkeld te worden.

PWA-waardig?

Voordat Google een website als PWA-waardig verklaart, moet aan twee voorwaarden worden voldaan. De Progressive Web App dient namelijk een zogeheten web manifest en service worker te gebruiken. In een web manifest staat onder andere de naam en het icoon van de site beschreven en een service worker regelt onder andere hoe de PWA zich moet gedragen wanneer er geen internetverbinding is.

Tip:
Om snel van start te gaan kun je gebruik maken van een speciale PWA tool. Deze tool geeft aan of een website PWA-waardig is en doet automatisch suggesties voor een web manifest of service worker.

Probeer het zelf

CSS Houdini

Houdini staat bekend als één van de grootste goochelaars ter wereld. Hij maakte dingen mogelijk die niet mogelijk leken. Dit geldt ook voor CSS Houdini... Een interessante ontwikkeling die het mogelijk maakt om CSS uit te breiden met JavaScript, waarbij CSS dezelfde snelheid behoud. Met deze techniek is het bijvoorbeeld mogelijk om een kleurverloop (gradient) te animeren wanneer je er met je muis overheen gaat.

Houdini bestaat uit meerdere modules. Op deze website zie je direct de implementatiestatus van verschillende modules in de browsers.

En verder...

werden we op de hoogte gehouden van trends die gespot worden bij NPM. NPM is een package manager die door developers gebruikt wordt om JavaScript libraries lokaal te installeren. Doordat veel mensen gebruik maken van NPM, is er veel data beschikbaar over welke libraries trending zijn, of welke juist niet.

We zagen bijvoorbeeld in de statistieken dat het gebruik van Angular en AngularJs (platformen voor het bouwen van webapplicaties) aan het dalen is, maar dat Vue.Js (een framework op basis van de scripttaal JavaScript) aan het stijgen is. 

Implementatie

Conclusie van onze trip naar Berlijn? Het was heel verfrissend om een paar dagen tussen ‘soortgenoten’ te zijn, geïnspireerd te worden en informatie op te doen over nieuwe technieken. 

Terug op kantoor is er vaak tijd om de interessantste presentaties nog eens te evalueren en enthousiast te experimenteren met de opgedane kennis. Zo hadden Luuk en ik binnen no-time onze Progessive Web App gemaakt, geëxperimenteerd met Houdini en hebben we ons goed vermaakt met Emoji Scavenger Hunt, gebaseerd op TensorFlow.Js.

Kennis delen

Na het voorbereiden van enkele demo’s deelden we onze nieuwe opgedane kennis in een lunchsessie met alle geïnteresseerde Perplex'ers. 

Wil jij aanschuiven bij onze volgende lunchmeeting?

Check onze vacatures

Over de auteur

Bram is front-end developer bij Perplex en verantwoordelijk voor het visuele deel aan de voorkant (front-end) van een website. Hij zorgt ervoor dat de schermontwerpen op de pixel nauwkeurig getransformeerd worden tot een interactieve, gebruiksvriendelijke en toegankelijke user interface.

Heb je vragen voor Bram of wil je graag iets delen over CSS of JavaScript? Neem contact op: bram@perplex.nl.