Meesterblog

Weekly nerd

In deze Weekly Nerd deel ik mijn ervaringen en inzichten over het werken met verschillende technologieën, tools en frameworks die ik tijdens mijn projecten en hackathons ben tegengekomen. Ik zal ook tips en best practices delen die ik heb geleerd tijdens mijn reis als webontwikkelaar.

Peter Paul Koch

Peter-Paul Koch gaf een presentatie over hoe browsers werken, waarom ze zich soms onvoorspelbaar gedragen en hoe je als ontwikkelaar hiermee moet omgaan. Zijn verhaal richtte zich op de onderliggende technologie van browsers, het belang van eenvoud, en het belang van betrouwbare ondersteuning tussen verschillende browsers engines.

Waar bestaat een browser uit:

  • Html
  • Css
  • Dom
  • Aom
  • Interface
  • Javascript engine: verschilt per browser

De layout van een pagina bepaald hoe de pagina eruit ziet. En veranderingen van een layout is juist het gene wat de browser veel moeite kost, dus als je dingen zoals media queries gebruikt is het goed om naar andere manieren te kijken dan de layout als eerste aan te passen. En niet alleen voor de browser, maar ook de gebruiker.

Core vs. DOM Core: maakt JavaScript een programmeertaal. DOM: zorgt ervoor dat JavaScript kan praten met HTML-elementen.

Backward compatibility. Browsers dragen een enorme last: alles dat ooit heeft gewerkt, moet blijven werken. Koch gaf als voorbeeld dat het weglaten van een DOCTYPE ervoor zorgt dat de browser terugvalt naar oude render-modi, vergelijkbaar met Internet Explorer 6.

Geschiedenis van het web: Www broswer (1990) - herbouwd in 2019, Mosaic 1993, Netacape 1994, Ie 1995 - gratis, Opera 1995 - tegenwordig niet meer gebruikelijk, Ie 5 mac 2000, Konqueror 2000, (tot nu toe belangrijskte) -> safari, 2003(met renderinf engine van konqueror), Firefox 2004 (zelfde als netscape4), Safari ios 2007 (eerste mobiele browser die serius werd genomen), Chrome 2008, Flow 2020, Ladybird 2024.

Kernboodschap
Hou het simpel, browsers verschillen veel van elkaar en in versies, eenvoudige oplossingen werken het betrouwbaarst en blijven het langst bruikbaar.

Nils Binder

Nils Binder sprak over creatieve mogelijkheden binnen CSS en hoe moderne technieken nieuwe manieren bieden om ontwerp en interactie te benaderen. Hij koppelde dit aan zijn ervaring bij 9-elements.

Design vs. webdesign

  • Vroeger kon Photoshop veel meer dan het web; nu loopt het web juist voorop in designmogelijkheden.
  • Denk niet in pixels, maar in relaties tussen elementen – zoals je ook in Figma werkt.

Ook heeft Nils wat van zijn eigen toepassingen laten zien, die interessant waren:

  • Stop-motion animatie met CSS (bijv. steps(31, end)): een lange strip afbeeldingen in plaats van video.
  • Blend modes zoals difference voor experimentele visuele effecten.
  • Subgrid voor complexere layoutstructuren.
  • First-line selector voor typografische accenten.

Gebruik van AI in Nils zijn design: AI werkt vooral met patronen uit het verleden. Innovatieve of experimentele CSS-technieken zijn daardoor vaak dingen waarbij AI minder goed kan helpen.

Robbert Broersma + Yolijn van der Kolk

Robbert en Yolijn gaven een presentatie over het NL Design System en de richtlijnen voor toegankelijke overheidssites. De nadruk lag op gebruiksvriendelijke, duidelijke en inclusieve formulieren.

Opbouw van een goed formulier

  • Begin met introductietekst.
  • Vraag alleen noodzakelijke informatie.
  • Laat gebruikers voor verzending hun gegevens controleren en wijzigen.
  • Toon na het verzenden een duidelijke bevestiging + overzicht van eventuele fouten.

Belangrijke toegankelijkheid principes

  • Gebruik heldere labels, altijd gekoppeld via for="".
  • Schrijf zichtbaar of een veld verplicht of optioneel is (niet alleen met een *).
  • Foutmeldingen moeten bij het betreffende veld staan.
  • Nooit alleen kleur gebruiken om fouten aan te geven.
  • Volgorde voor screenreaders: label → beschrijving → foutmelding → invoerveld.

Design Componenten

  • Voldoende kleurcontrast.
  • Componenten moeten groot genoeg zijn: 44 × 44 px.
  • Buttons staan voor aan het einde van een regel (dus links), niet helemaal rechts.

Validatie & feedback

  • Geef vooraf duidelijk aan welke invoerregels gelden.
  • Foutmeldingen onderbreken niet, maar worden wel automatisch voorgelezen.
  • Op de controlepagina moeten ingevoerde gegevens niet automatisch vertaald worden. Gebruik bijv. translate="no".

Kernboodschap
Een formulier moet voor iedereen en alles toegankelijk zijn. Hier komt meer bij kijken dan je eerst denk, maar met de guidelines die er nu zijn kom je een heel eind.

Rosa

Rosa gaf een inspirerende lezing over hacking als middel tegen planned obsolescence (geplande veroudering) en hoe je op een duurzame manier met technologie kunt omgaan.

  • Producten zijn zo ontworpen dat ze snel kapot gaan of niet te repareren zijn.
  • Dit vergroot de afhankelijkheid van consumenten.
  • Ook producenten én de overheid houden deze cyclus in stand.

  • Ze bouwde een travelling server met een Arduino en een zonnepaneel.
  • Een server is in essentie niet meer dan een computer + een router.

  • Oudere hardware dwingt je om efficiënter te denken.
  • Het zet vraagtekens bij de toekomstbestendigheid van moderne websites.
  • Staat je website er over tien jaar nog?

Kernboodschap
Ik denk dat Rose echt heeft laten zien dat je heel anders met technologie om kan gaan. En dat hacken misschien niet perse is zoals ik dacht dat het was, maar het gaat veel meer om experimenteren en om obstakels heen werken.