Inspiratie en innovatie voor front-end developers

Samen nemen wij (team dev) je mee in onze grootste takeaways van de CSS Days. Zo hopen we je een informatief en compleet beeld te geven over wat dit evenement inhoudt. Bij elke takeaway staat wie de bevinding heeft opgedaan en welke gastspreker hen geïnspireerd heeft.

Takeaways Kris:

Grid Layouts

Als het gaat om het opdoen van (nieuwe) CSS kennis kan ik altijd wel genieten van de filmpjes van Kevin Powell. Dat maakte het extra leuk om er achter te komen dat hij een presentatie gaf tijdens CSS day. 

Tijdens zijn presentatie gaf hij een demo over de technieken om zogenaamde “layout breakouts” te maken, wat hij demonstreerde is een van mijn favoriete technieken van de afgelopen tijd. Ik heb deze eerder zelf ook al toegepast op de website van het CIBV, dit werkte fantastisch. Door gebruik te maken van dit stukje techniek verklein je de kans op een horizontale scrollbalk op je website aanzienlijk.

Op mijn codepen heb ik hier een uitgewerkte versie van geplaatst op basis van Ryan Mulligan zijn voorbeeld om een middenlijn toe te voegen. Dit heb ik gedaan als demo voor mijn collega’s.

Kleine takeaways van CSS Day

• Container queries worden door meer dan 90% van de browsers ondersteund. Als dit percentage tussen de 93% -95% komt te liggen, wordt het interessant om te gebruiken bij projecten voor onze klanten.
• Als ik nieuwe inzichten wil over accessibility kijk ik weleens eens naar Sara Soueidan. Tijdens haar praatje  gaf ze aan dat `opacity: 0;` de beste manier is om een custom checkbox / radio button te maken. Op die manier is hij ook op mobiel goed te gebruiken
• Het lijkt me interessant om meer aandacht te besteden aan de wiskundige functies in css, zoals sin() en cos(
• Je kan de calc() functie gebruiken in media queries.

Takeaway Stephan:

Variabele fonts

Variabele fonts is een onderwerp dat mij als front-end developer aanspreekt. Tijdens CSS Days werd dit onderwerp besproken door Roel Nieskens. Het concept variabele fonts is een relatief nieuwe ontwikkeling binnen het domein webtypografie. Dit houdt in dat het niet meer nodig is om meerdere bestanden met lettertype in te laden voor verschillende stijlen (vet, cursief, licht enz.). Een variabel font kan dus meerdere stijlen bevatten. 

Voordelen hiervan zijn:

• Soepeler laden van pagina’s.
• Lettertypes zijn volledig dynamisch, je kunt deze dus afstellen naar eigen wens.
• Het helpt bij het maken van mooie animaties in CSS.

Om te controleren of jouw font variabel is heeft Roel Nieskens een handige tool gemaakt. 

Takeaways Rutger:

Hot potato

Het concept van “Hot Potato” bevordert nauwe samenwerking tussen ontwerpers en ontwikkelaars gedurende het hele ontwikkelproces. In plaats van geïsoleerd te werken, werken beide disciplines continu samen, wat zorgt voor een vloeiende workflow en snellere iteraties. Door direct overleg kunnen technische beperkingen en ontwerpeisen vroegtijdig worden besproken en opgelost, wat leidt tot efficiëntere en innovatieve oplossingen. Deze aanpak resulteert in hogere kwaliteit eindproducten en een beter wederzijds begrip tussen ontwerp en ontwikkeling.

Animation-Timeline: Scroll()

“Animation-Timeline: Scroll()” is een nieuwe CSS-functionaliteit waarmee ontwikkelaars native scroll-animaties kunnen creëren die door de GPU worden uitgevoerd, wat zorgt voor vloeiende prestaties zonder de browser te belasten. Dit vervangt complexe JavaScript-oplossingen die je website vertragen en maakt het mogelijk om scroll-gebaseerde animaties eenvoudig en efficiënt te definiëren. Deze technologie verbetert de gebruikerservaring door dynamische, responsieve webpagina’s te creëren die soepel reageren op de interacties van de gebruiker.

Samengevat

CSS days 2024 was weer een inspirerend en leerzaam evenement. Onze developers zijn weer met een bak aan nieuwe kennis en frisse inzichten teruggekeerd bij ons op kantoor. Sommige van deze concepten kun je misschien wel terug gaan zien binnen onze projecten. Het kan variëren van de nieuwste technieken in grid layouts en variabele fonts tot innovatieve samenwerkingstools zoals “Hot Potato” en geavanceerde animatie-methoden. We laten het graag aan je zien!