Weekly Nerds

Kilian Valkhof

Stop using JavaScript for that

Kilian Valkhof is een frontend developer en UX designer die zichzelf omschrijft als UX developer. Hij ziet het volledige plaatje van back-end tot visual design tot development. Kilian heeft Polypane gebouwd, een browser speciaal voor developers. Zijn talk heet "Stop using JavaScript for that: moving features from JS to CSS and HTML".

Interessante kennis & inzichten

Native HTML-elementen vervangen door JS-oplossingen. Forced colors en de outline-truc: in plaats van outline: none gebruik je outline-color: transparent. Scroll-driven animaties waarbij je CSS-animaties koppelt aan scrollposities.

Ideeën & connecties

Verbinding met performance: minder JavaScript betekent minder te downloaden. Dit sluit aan bij de bredere beweging van "less framework, more platform" in de webwereld. Ook een verbinding met accessibility, want native HTML-elementen zijn toegankelijker dan JavaScript-oplossingen die het vaak niet goed doen.

Peter Paul Koch

Geschiedenis van de browser, browser detect & support detection

Peter Paul Koch weet meer over browsers dan wie dan ook. Hij heeft jarenlang bijgehouden hoe browsers zich van elkaar onderscheiden, en veel van die kennis is uiteindelijk terechtgekomen op platformen zoals MDN en Can I Use. Zijn sessie ging over hoe browsers echt werken en waarom browsercompatibiliteit zo'n eigen wereld is.

Interessante kennis & inzichten

Ik had eigenlijk nooit nagedacht over wat een browser nou precies is. Het voelt als één ding maar onder de motorkap zitten er meerdere onderdelen in: een rendering engine, een JavaScript engine en een parser. Dat gaf me een heel ander beeld van iets wat ik dagelijks gebruik.

Het verschil tussen defer en async bij scripts was ook zo'n moment van eindelijk begrijpen. Ik had die attributen vaker gezien maar altijd genegeerd. Nu weet ik dat JavaScript zonder die attributen gewoon de hele pagina kan ophouden, en dat je dat dus bewust moet aanpakken.

Ideeën & connecties

Ik test altijd in Chrome en dat is eigenlijk gewoon lui. Na deze sessie wil ik dat veranderen en vaker in andere browsers kijken. En defer gebruik ik voortaan standaard als ik scripts inlaad.

Nils Binders

Creatief coderen vs. commercieel optimaliseren

Nils Binders is designer/developer bij 9elements, een bureau in Bochum dat zich bezighoudt met communication design, web development en product development. In 2023 was hij op CSS Day, waar hij zich realiseerde dat je in dit vak vaak voor een keuze staat: creatief en experimenteel bouwen, of werken in een groot bedrijf waar alles draait om marketing en SEO. Zijn boodschap was dat het niet zo saai hoeft te zijn. Hij ziet Figma, ChatGPT en Tailwind als de "Holy Triangle of Boring", tools die design steeds meer op elkaar laten lijken.

Interessante kennis & inzichten

Hij maakt onderscheid tussen creatief coderen en commercieel optimaliseren, en vindt dat die twee niet per se tegenstrijdig hoeven te zijn. Animeren en écht meedenken zijn dingen die AI nog niet kan overnemen. Bij right-to-left design zit de uitdaging niet in CSS maar in UX. Hij is geen fan van video's op landingspagina's vanwege mobiele problemen en de last voor de klant, hij geeft de voorkeur aan steps() en view transitions.

Ideeën & connecties

Zijn verhaal over CSS Day sluit aan bij de vraag hoe je creatief blijft binnen commerciële projecten. De discussie over video vs. animatie is relevant voor het Browser Tech project. steps() en view transitions zijn technieken om verder in te duiken.

Robbert Broersma & Yolijn van der Kolk

Toegankelijke formulieren met het NL Design System

Robbert en Yolijn werken bij Frameless en zijn allebei nauw betrokken bij het NL Design System. Hun sessie draaide om formulieren en niet als losstaand element, maar als een complete gebruikerservaring van begin tot eind.

Interessante kennis & inzichten

Wat me opviel is hoe veel details er komen kijken bij iets wat ogenschijnlijk simpel is. Een fieldset met legend klinkt basic, maar zonder die structuur weet een screenreader niet hoe velden bij elkaar horen. Hetzelfde geldt voor labels: die horen via for en id aan een input gekoppeld te zijn, niet als losse tekst ernaast.

Foutmeldingen zijn iets waar ik eerder te makkelijk over dacht. Rood kleuren is niet genoeg, je hebt ook tekst, een icoon én aria-describedby nodig zodat de foutmelding écht aan het veld gekoppeld is. En focus indicators: die mogen best schreeuwen. Een onzichtbare focusrand is voor toetsenbordgebruikers net zo vervelend als een knop zonder label.

Ideeën & connecties

Na deze sessie ben ik anders naar mijn Browser Tech formulier gaan kijken. Toetsenbord en screenreader testen is iets wat ik standaard in mijn proces wil opnemen, niet achteraf. De aria-describedby koppeling was precies het soort detail dat ik over het hoofd zou zien.

Rosa

Hacken, repareren en digitale duurzaamheid

Rosa heeft een master gedaan in MFA Experimental Publishing (geluid, DIY/DIWO, collectief onderzoek). Ze is bezig met een project in Rotterdam rondom een prikbord-pagina. Een hacker is iemand die verder gaat dan standaard tech-gebruik, Rosa wil mensen inspireren om zelf dingen te bouwen, zoals een eigen CMS of een POC in Keynote.

Interessante kennis & inzichten

Planned obsolescence: repareren wordt steeds moeilijker door producten die gemaakt zijn om stuk te gaan. Hacken en repareren werken daar actief tegen in.

De cloud: klinkt abstract maar is een enorm fysiek gebouw. Er is een groeiende afhankelijkheid van Amerikaanse big tech, als consument én als producent.

Eco-driven servers: Node9.org combineert technologie met ecologie: planten, een tuin en Arduino's aan elkaar gekoppeld.

Digitale duurzaamheid: bestaat mijn website nog over 10 jaar? Static site generators zoals 11ty hebben minder serverimpact, produceren leesbare code en hebben een grote community.

Johann Huijkman

Toegankelijkheid vanuit gebruikerservaring

Johann heeft 16 jaar bij Q42 gewerkt en is overgestapt naar Stichting Accessibility, waar hij werkt als toegankelijkheidsexpert. In zijn sessie liet hij zien hoe mensen met een beperking het web ervaren. Zijn kernboodschap: "Je hoort het pas, je ziet het pas als je doorhebt."

Interessante kennis & inzichten

WCAG basisprincipes: toegankelijkheid is gebouwd op vier pijlers: Perceivable, Operable, Understandable en Robust.

Alt-tekst: als een afbeelding belangrijk of relevant is, geef je het een beschrijvende alt-tekst. Elke afbeelding moet sowieso een alt-attribuut hebben, ook al is die leeg.

Gebruikerservaringen uit de praktijk: Johann liet drie video's zien: Martijn moet veel inzoomen en heeft schaalbaarheid, contrast en focusindicatoren nodig. Naduah is prikkelgevoelig en zet schermen op donker. Gideo wordt gestoord door drukke advertenties en wil snel en discreet zijn doel bereiken.

Ideeën & connecties

Door je in de gebruiker te verplaatsen ontdek je drempels die je zelf nooit zou opmerken. Kleine dingen zoals een ontbrekende alt-tekst of focusrand kunnen voor iemand anders het verschil maken.

The Web You Want dag 1

Zeven sprekers over de toekomst, waarden en grenzen van het web

Een dag vol sprekers over wat het web zou moeten zijn. Marleen Stikker zei dat regulatie geen rem is maar een manier om te bewaken wat het web waardevol maakt. Sanne 't Hooft liet studentenwerk zien waaronder mijn eigen Octodad-website, gek om dat voor een publiek te zien. Vasilis herhaalde steeds The web is for everyone maar elke keer met een andere betekenis: bouwen, gebruiken, publiceren. Hidde de Vries noemde terloops dat het internet als land de dertiende grootste CO₂-uitstoter ter wereld is. Dat bleef hangen. Niels Leenheer sloot af met DOOM in pure CSS. Zijn talk was de beste van de dag.

Interessante kennis & inzichten

Dat het web actief verdedigd moet worden, niet vanzelf goed blijft. En dat native HTML veel meer kan dan ik standaard gebruik.

Ideeën & connecties

Het CO₂-punt wil ik meenemen in hoe ik straks projecten bouw. Minder laden is niet alleen sneller, het is ook bewuster. En de quote van Niels: "If you can think it, you can build it" is iets om bij te houden.

Q42

Design systems, AI en toegankelijkheid

Q42 bouwt producten voor klanten zoals KLM, het Rijksmuseum en de Efteling. Ze kwamen langs met drie onderwerpen: design systems, AI en toegankelijkheid. Het sterkste inzicht was dat een design system geen eindproduct is maar een gesprek dat je blijft voeren. Over AI: gebruik het voor debugging, herhaaldelijk werk en documentatie, maar niet als je zelf niet weet wat er gebeurt. Over toegankelijkheid: verwijder elke smoes en koppel het aan de bedrijfsstrategie.

Interessante kennis & inzichten

Dat toegankelijkheid niet iets is wat je er achteraf bij doet maar gewoon in je proces zit. Peter plant standaard 20% extra tijd in per ticket en vertelt dat niet eens aan de klant.

Ideeën & connecties

De AI-tips zijn direct bruikbaar. Ik gebruik het nu ook al voor debugging en sparren, maar de grens bij creativiteit is een goede reminder.

Hans de Zwart

Privacy op het internet

Hans de Zwart was directeur van Bits of Freedom. Hij opende met "Ik heb niks te verbergen", een zin die genuanceerder is dan hij lijkt. Hij liet zien hoe snel het misgaat: een nieuw Chrome-account, nu.nl bezoeken en binnen een paar minuten al 183 verzoeken naar externe pagina's voor tracking.

Interessante kennis & inzichten

Het principe van doelbinding: data mag alleen gebruikt worden voor het doel waarvoor het verzameld is. En dat je als developer degene bent die die keuze maakt, niet het bedrijf.

Ideeën & connecties

Ik sta nog steeds achter de stelling dat ik niks te verbergen heb, maar je deelt soms meer dan je doorhebt. De acht strategieën voor privacyvriendelijk design wil ik meenemen: welke data vraag ik op en waarom?

De Voorhoede

Een kijkje in het dagelijks werk van een webbureau

De Voorhoede is een frontend bureau gespecialiseerd in Vue, React en Nuxt. Drie mensen kwamen vertellen over hun werk. Marleen over hoe het dagelijks werk eruitziet: niet alleen code schrijven maar ook communiceren, uitleggen en gifs sturen om interacties duidelijk te maken. Peter over toegankelijkheid, hij plant standaard 20% extra tijd per ticket in en vertelt dat niet aan de klant. Hij introduceerde ook design tokens, waarbij CSS-waarden los staan van de styling zelf. Bas over offline first: zijn app voor liftinspecties moet werken zonder signaal. Wijzigingen worden lokaal opgeslagen en later verstuurd.

Interessante kennis & inzichten

Offline first als principe had ik nog niet eerder gehoord. Niet nadenken over wat er gebeurt als een bestand niet laadt, maar wat er gebeurt als er helemaal geen verbinding is. Dat is een andere manier van denken.

Ideeën & connecties

Design tokens wil ik later zeker uitproberen. En gifs gebruiken bij klantcommunicatie is eigenlijk een heel slim idee, duidelijker dan screenshots met rode pijlen.

The Web You Want dag 2

Zeven sprekers over AI, animatie, sfeer, duurzaamheid en de geschiedenis van het web

Léonie Watson is blind en liet zien hoe AI voor haar echt onmisbaar is, ze vergeleek het met een vriend die met haar mee de winkelstraat ingaat. AI omschrijft producten soms beter dan de websites zelf, wat best gek is. Cyd Stumpel deed een workshop over animaties met alleen CSS, met <details> en <summary> als basis. Sara Joy liet zien dat alt-tekst ook sfeer kan overbrengen en dat je eigen website niet aan alle toegankelijkheidseisen hoeft te voldoen. Schepp bouwde de conferentiewebsite met alleen CSS en stijlde zelfs het <head>-element als menu. Jeremy Keith sloot af met de geschiedenis van het web van tekst tot responsive design.

Interessante kennis & inzichten

Dat AI de gaten dicht die developers open laten, gaten die er eigenlijk niet zouden moeten zijn. En dat <details> animeren in Chrome nog niet volledig werkt, iets om in de gaten te houden.

Ideeën & connecties

Schepp's <head>-truc inspireerde me direct, ik ben daarna de favicon gaan animeren met een karakter uit een game die ik eerder maakte. Jeremy's quote is er eentje om te bewaren: "If you have something wonderful, if you don't defend it, you will lose it."