You are here

Frontend United 2019

Frontend United 2019
Corporate

Elk jaar, omstreeks mei, maken front-end ontwikkelaars zich warm voor een nieuwe editie van Frontend United. Het Walhalla van de nieuwste ontwikkelingen op vlak van HTML, CSS & JS, en het gebruik daarvan.

Ondertussen al 10 lentes jong, maar nog stevig in groei. Deze editie telde meer bezoekers dan de vorige en werd uitgebreid met aan aantal zeer wijze workshops. Bovendien werd alles live uitgezonden in 14 locaties verspreid over de ganse aardbol.

Kinepolis Jaarbeurs

Drie dagen lang werd de front-end community in de watten gelegd in het zonnige Utrecht. Venue? Kinepolis Jaarbeurs!
Uiteraard kon Calibrate niet ontbreken. We stuurden enkele van onze front-enders naar ginds.

Kan jij ze vinden in de groepsfoto?

Workshop: Front-End + Interface Design Bootcamp

Al vroeg stond een delegatie Calibrators klaar aan De Witte Vosch voor een workshop Front-end & Interface design. De workshop werd geleid door Vitaly Friedman. Hij deed zijn uiterste best om de nieuwste trends en best-practices uit de front-end wereld te overlopen.

Daarnaast werd ook ingegaan op de toekomst van e-mail development. Een werkende check-out flow of een dynamische Twitter-feed rechtstreeks in je mailbox? Het kan nu reeds met handige hacks. In de toekomst zal AMP van Google echter voor een grotere waaier van mogelijkheden zorgen.

Eens de theorie gepasseerd, was het tijd voor praktijk. Vitaly schotelde ons een webapplicatie voor, waarvan we in sneltempo een gepaste mobiele oplossing dienden uit te werken via schetsen. Deze schetsen werden dan via peer reviews door de deelnemers geëvalueerd. Deze reviews werden dan uitvoerig besproken.

Een veel voorkomend probleem was het weergeven van een grote dataset. Op mobiele toestellen heb je echter weinig schermruimte om mee te werken, en de data moet nog steeds overzichtelijk en bruikbaar weergegeven worden. Er werden allerhande oplossingen voorgesteld en besproken, en Vitaly stuurde bij.

De rest van de namiddag werd gevuld met gelijkaardige oefeningen, waarbij de focus steeds op andere features lag. Zo bekeken we tools voor productvergelijking en configurators voor auto’s.

Door de korte, gevarieerde opdrachten kwamen er veel uiteenlopende meningen en visies naar boven. De ideale manier om eens wat andere inzichten te bekomen. Wij vonden het alvast een heel interessante dag.

Calibrators met een goed bevonden UX design voor een auto configurator

Highlights sessies

Met 22 sessies was er veel te zien: Keuzes maken was de opdracht!

Hieronder alvast de sessies die ons het beste zijn bijgebleven.

Houdini's place in the browser-feature-stack

Houdini CSS Rocks - Una Kravets

Het is alweer even geleden sinds de Frontend community zo warm staat voor een nieuwe feature. Dat moet dan wel iets spectaculair zijn?

Wel, dat is het ook! Op zich brengt Houdini niks nieuws met zich mee. Het is voornamelijk de manier hoe Houdini werkt, dat het zo aantrekkelijk maakt.

CSS Houdini, c’est quoi ça? 

Houdini laat developers toe om rechtstreeks de CSS variabelen aan te spreken via het CSS Object Model (CSSOM). Zo kan je via JavaScript de lijn-dikte, opaciteit, kleuren, etc. rechtstreeks aanpassen.

Maar dat kunnen we toch al?

Wel, niet helemaal. Het is inderdaad mogelijk om via JavaScript CSS mee aan te sturen, maar dat is dan vaak met inline-css of via html classes. Dat wil zeggen dat de browser die aanpassingen steeds volledig moet renderen: Parse -> Cascade -> Layout -> Paint -> Composite. Dat is vrij duur voor de performantie van je browser.

Houdini maakt het mogelijk om in al die stappen rechtstreeks in te grijpen. Zo kan je dus een stukje JS schrijven dat bijvoorbeeld enkel de paint-operatie beïnvloedt.

Bovendien maakt Houdini het eenvoudig om meer te werken met losse componenten. Je kan dus een kleine functie maken en deze gemakkelijk hergebruiken in een ander project. Je moet enkel de bestanden kopiëren en de juiste functie aanroepen via je CSS.

Houdini example

Echter zal het nog even duren eer we dit effectief kunnen gebruiken. De browser support is momenteel nog zeer beperkt.

De presentatie van Una Kravets kan je terugvinden in blogvorm (de slides  zelf vonden we helaas niet terug). Als alternatief kan je ook zeker eens kijken naar de presentatie CSS Houdini - More than magic! van Vincent De Oliveira.

Enkele coole demo's:

SVG is HOT

Je zou bijna spreken over SVG United door de 3 sessies over SVG's.

SVGs beyond mere shapes - Nadieh Brenner

Visual Cinnamon, zo gaat Nadieh Brenner door het (web)leven. Haar passie? Het maken van aantrekkelijke datavisualisaties. Nadieh krijgt datasets aangeleverd, die zij dan omtovert tot unieke visualisaties. Interactiviteit is hierbij een belangrijk aspect.

In deze talk werden er heel wat tips & tricks meegedeeld over het maken van zo'n datavisualisaties. Waar let je best op bij het animeren? Wat werkt goed?

Lees zeker de slides eens na of laat je inspireren op de website van Nadieh.

Visual Cinnamon example work
SVG The web design cheat code

The web design cheat code: Using SVG to bridge CSS’ gaps - Lea Verou

Wie is er geen fan van de SVG? Wijzelf gebruiken SVG's al jaren in al onze projecten.  Maar dat er nog zo veel te leren viel daar stonden we van versteld.

Lea Verou kent SVG's als geen ander. Ze doet niets liever dan zelf handmatig SVG's op te bouwen. Dat brengt haar tot rust. Zij was dan ook de ideale persoon om wat extra inzichten te geven in het medium.

Centraal in de sessie was het gebruik van SVG's om de tekortkomingen van CSS op te vangen. Wist je bijvoorbeeld dat je SVG code kan embedden in een data-64 base encoded string? Of dat het via CSS & SVG mogelijk is om als achtergrond dansende eenhoorntjes te tonen?

In deze slides vind je alle technieken terug.

Webfonts in 2019: Everything changes - Chris Lilley

Webfonts zijn een zeer waardevolle toevoeging voor het internet zoals we het kennen, maar werken helaas vaak niet zo performant. Dat heeft voornamelijk technische redenen.

Niemand minder dan de technisch directeur van World Wide Web Consortium (W3C), Chris Lilley (@SVGeesus), kwam ons meer vertellen over wat de huidige pijnpunten zijn en welke nieuwe toepassingen er mogelijk zijn in CSS4.

So what's the problem?

Een font bestaat meestal uit verschillende bestanden. Elk bestand bevat dan 1 specifieke variant van het font. Als je dus gebruik wil maken van hetzelfde font in een Normal, Bold en Light variant, dan moet je als gebruiker 3 bestanden downloaden.

Variable Fonts bieden hier een oplossing. Deze Variable Fonts bevatten alle mogelijke variaties die je kan bedenken. In dit type font-file wordt namelijk alle informatie voorzien zodat de browser zelf het font kan aanpassen naar de gewenste stijl.

Dit gaat echter veel verder dan enkel het verschil tussen Normal en Bold. Je kan praktische alle aspecten van het font aanpassen: het gewicht, italics of oblique, met of zonder schreven (serifs), de dikte van de stroke

Kortom: performantere fonts, met meer mogelijkheden. Kijk zeker eens naar de grassy text demo voor een goed voorbeeld van de kracht van deze Variable Fonts.

Grassy text demo

Social event

Zoals steeds hoort er bij een conferentie een Social Event. We werden verwacht in TivoliVredeburg voor het Park 6 by Night feest. Als echte Belgen mochten we uiteraard niet ontbreken.

Enkele DJ's verzorgden de beats, de organisatoren voor de drank en wij voor het plezier. Je kon er rustig een babbeltje slaan met de co(ncu)llega's, een dansje plaatsen of een spelletje Twister spelen.

Voor ons wat het alvast weer een geslaagde, leerrijke editie. We can't wait to go back!