Weekly Nerds

Killian heeft Polypane gemaakt, een browser speciaal voor developers die je responsive werk makkelijker maakt. Het is gratis voor studenten en ik vond het interessant om te zien hoeveel je daarmee tegelijk kunt checken. Maar wat ik het meest bijgebleven is, was zijn kernboodschap: je hebt veel minder JavaScript nodig dan je denkt.

Hij gebruikte de zin "Choose the least powerful language suitable for a given purpose" en dat heeft echt iets bij me geklikt. JavaScript is breekbaar. Als er iets mis gaat, valt alles weg. CSS en HTML zijn dat veel minder. Dus waarom zou je iets bouwen in JS als het ook in CSS kan?

Wat ik interessant vond:

• Een checkbox als toggle switch zonder JS, puur met HTML. Werkt alleen in Safari voor nu, maar laat zien waar het naartoe gaat.
• Soepel scrollen op de pagina kan gewoon in CSS. Of in JS als je meer controle wilt.
• Reduced motion: in plaats van animaties uitzetten voor iedereen, zet je ze standaard uit en enhanced je voor mensen die het prima vinden. Dat vind ik een slimmere manier van denken.
• Scroll margin zodat een element niet achter een vaste header verdwijnt wanneer je ernaar linkt.
• Het target-element highlighten met :target zodat duidelijk is waar je naartoe gescrolld bent.
• Het <details> en <summary> element voor accordions, gewoon met HTML. Zoals deze dropdowns!

/* Smooth scroll alleen voor mensen zonder motion preference */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Scroll margin zodat content niet achter header verdwijnt */
#my-target {
    scroll-margin-top: 100px;
}

/* Element highlighten wanneer ernaar gescrolld wordt */
#my-target:target {
    outline: 10px solid deeppink;
    transition: 1s ease-in-out outline;
}

Peter Paul Koch (ppk) is een van de mensen die het web echt heeft gevormd. Hij beheerde jarenlang quirksmode.org, een site vol met documentatie over hoe verschillende browsers zich anders gedroegen. In een tijd dat IE6 de dienst uitmaakte en browsers nauwelijks overweg konden met elkaar, was dat een onmisbare bron voor elke developer.

Zijn talk ging over de geschiedenis van de browser: van Mosaic en Netscape naar de browser wars met Internet Explorer, en hoe Firefox en later Chrome het speelveld opnieuw hebben opengebroken. Het was interessant om te horen hoe lang het heeft geduurd voordat browsers het eens werden over web standards, en hoeveel werk er is gaan zitten in browser-compatibiliteit.

Wat ik interessant vond:

• Hoe de browser wars (IE vs Netscape) ervoor zorgden dat developers dezelfde site soms twee keer moesten bouwen.
• Dat ppk zelf lang bijhield welke CSS en JS features in welke browser werkten, omdat er gewoon geen andere betrouwbare bron was.
• Dat de opkomst van de smartphone de browser opnieuw door elkaar schudde: mobile browsers gedroegen zich weer heel anders.
• Hoe langzaam het gaat voordat iets een standaard wordt, en hoe snel dingen daarna opeens overal beschikbaar zijn.

Nils werkt bij 9elements in Bochum, Duitsland (ongeveer 2,5 uur rijden). Ze doen communication design, web development en product development. Wat me aansprak is dat hij zowel creatieve websites maakt als UX-werk doet, inclusief right-to-left design. Hij is dus niet alleen de CSS-nerd die coole animaties maakt maar denkt ook echt na over design als geheel.

Een punt dat me echt is bijgebleven: hij was op de CSS Day in 2023 en had daarna het gevoel dat de web development wereld verdeeld is in twee groepen. Mensen die creatief en experimenteel mogen bouwen op hun eigen projecten, en mensen die in een groot bedrijf zitten en alleen maar bezig zijn met boring geoptimaliseerde marketing-gedreven dingen. Dat hoeft niet zo te zijn, en hij liet zien hoe je ook in een agency context creatief kunt werken.

Wat ik interessant vond:

• De "holy triangle of boring": Figma, ChatGPT, Tailwind. Hij zei het een beetje grappig maar het zit er wel in: als je alleen die drie gebruikt, ziet alles er hetzelfde uit.
• Steps function in CSS animaties kende ik nog niet. Daarmee maak je animaties die niet vloeiend maar in stappen gaan, wat voor pixel-achtige effecten heel handig is.
• Zijn standpunt over video's op websites: liever animaties of iets anders, want video's zijn onhandig op telefoons en leveren veel werk op voor de client. Dat vind ik een interessante afweging.
• Dingen die AI niet kan vervangen: animeren, creatief denken, en niet alleen reusable components stapelen maar juist iets unieks maken. Wel dingen als view transitions gebruiken.
• 9elements is welkom en hebben een flat voor bezoekers.

Rijk is de CTO van Directus en heeft 10 jaar geleden ook de Web Dev Minor gedaan. Nu woont hij in Amerika. Zijn talk was een beetje anders dan de andere: minder technisch, meer een verhaal over hoe zijn carriere is gelopen en wat hij heeft meegemaakt.

Wat ik interessant vond:

• Immigreren naar Amerika is echt geen grapje. Er komt heel veel bij kijken en het is lang niet zo makkelijk als het soms lijkt.
• Een bedrijf runnen is ook iets waar veel bij komt kijken, dingen die je als buitenstaander niet ziet.
• Het was motiverend om te horen dat iemand die precies dezelfde minor heeft gedaan nu CTO is van een bekend open source project. Dat laat zien waar het naartoe kan gaan.

Robbert en Marjolein zijn de mensen achter Frameless en werken mee aan het NL Design System. Hun talk sloot precies aan bij mijn Browser Technologies project: een formulier bouwen dat goed werkt voor iedereen. Ze liepen door een soort checklist heen van wat een goed formulier maakt, van opbouw tot validatie tot toegankelijkheid voor screenreaders.

Wat ik interessant vond:

• Verplichte velden consequent markeren en uitleggen waarom je specifieke informatie vraagt. Bijv bij telefoonnummer: schrijf erbij dat iemand gebeld of gesms't kan worden, want voor een dove persoon is bellen geen optie.
• Fouten niet alleen met een rode rand aangeven maar ook met tekst en een icoon. Kleur alleen is niet genoeg.
• Knoppen zoals "Volgende" aan het begin van de regel zetten, niet aan het einde. Dat is beter voor mensen met tunnelvisie.
• Elk invoerveld heeft een zichtbaar label boven het veld. Alleen bij de zoekfunctie mag je eventueel alleen een placeholder gebruiken.
• Met aria-describedby koppel je beschrijvingen en foutmeldingen aan een veld zodat een screenreader ze voorleest.
• inline-start en block-start gebruiken in plaats van width en height, want dat werkt beter voor right-to-left talen.
• Voorkomen dat vertaalsoftware de ingevulde gegevens van de gebruiker vertaalt met <bdi translate="no">. Dat kende ik echt niet.
• Vermijd vermelden hoe lang het formulier duurt om in te vullen: veel mensen zijn daar niet blij mee.

Rosa heeft een master Experimental Publishing gedaan en bouwt zelf dingen, haalt printers uit elkaar en host het (un)repair-cafe in Rotterdam. Haar definitie van een hacker: iemand die skilled is in informatietechnologie en op een onstandaard manier dingen bereikt. Dat vind ik een mooie manier om het te omschrijven.

Haar talk ging over controle over je eigen digitale spullen: zelf een CMS bouwen, je eigen server hosten, een backend draaien op Google Sheets, en zo min mogelijk afhankelijk zijn van externe partijen.

Wat ik interessant vond:

• Planned obsolescence: fabrikanten bouwen hun producten zo dat je er steeds minder bij kan. Een Mercedes die harder rijdt als je meer betaalt, het oplaadsysteem van iPhone. Je wordt steeds afhankelijker zonder dat je het doorhebt.
• "De cloud" wordt altijd gepresenteerd als iets luchtig en fijns. Maar het is gewoon een saaie serverhal, ergens op een sciencepark. Dat framing vond ik grappig en ook wel terecht.
• Haar vraag "Bestaat mijn website nog wel over 10 jaar?" en "Kan mijn website bezocht worden door oude systemen?" zijn vragen die ik me daarvoor nooit had gesteld. Ze dwingen je na te denken over duurzaamheid van het web.
• Ze werkt aan prikbord.page en vindt het leuk om mensen een eerste hands-on ervaring te geven met zelf iets maken. DIY-cultuur toepassen op het web.
• Idee: een eigen server beginnen met de minor. Linux installeren, YunoHost, je eigen websites hosten. Klinkt als iets wat ik ooit wil proberen.

John heeft 16 jaar bij Q42 gewerkt en is recentelijk overgestapt naar Stichting Accessibility. Zijn talk sloot goed aan bij mijn HCD project: hij liet drie korte filmpjes zien van echte gebruikers die met toegankelijkheidsproblemen te maken hebben op het web.

Wat ik interessant vond:

• Martijn is slechtziend en moet altijd ver inzoomen. Veel websites zijn daarvoor niet gemaakt. Wat voor hem belangrijk is: schaalbaarheid, contrast, gerelateerde informatie bij elkaar, en een zichtbare focusrand.
• Naduah heeft mobiliteitsproblemen en is prikkelgevoelig en heeft last van migraine. Ze heeft haar laptop altijd op de laagste helderheid en haar telefoon altijd in dark mode. Veel informatie tegelijk, velle kleuren en animaties zijn voor haar vervelend. Dat geeft te denken over hoe je animaties en drukte op een pagina aanpakt.
• Gideo heeft autisme. Dingen die zijn bedoeld om aandacht te trekken zoals harde advertenties zorgen voor overlast. Hij heeft een rustige layout nodig.
• Wanneer een afbeelding puur decoratief is, moet je het alt-attribuut leeg laten maar wel aanwezig: <img src="" alt="">. Dat klinkt simpel maar ik deed het voorheen gewoon weg.
• Zijn drie vragen als hij iets maakt: Wat maakt het voor hem of haar moeilijk? Wat heeft hij of zij nodig? Hoe zou je het makkelijker kunnen maken? Dat is een goede manier om te starten met toegankelijk denken.
• Zijn aanpak: ervaar het zelf, laat anderen het ervaren, pas aan. Herhaal. Dat is eigenlijk precies wat we bij HCD ook deden met Ihab.