Gesprek 2

Sprint 0 was de kickstart van de minor en meteen een goede manier om te snappen wat we de komende maanden gingen doen. Mijn inbreng was een portfolio met horizontale scroll, twee thema's en een typewriter-animatie voor de introductietekst. Ik heb de klasgenoten ingeladen via de API van de minor.

Wat ik nieuw heb geleerd: clamp() voor responsive design zonder media queries. Ik was verbaasd hoe elegant dat werkt en gebruik het nu overal. Ook de Fetch API heb ik voor het eerst echt gebruikt.

Nieuw inzicht: ik ben te laat begonnen met testen op andere schermformaten. De horizontale scroll werkte niet overal goed. Voortaan ga ik dat eerder checken.

Dit was het vak waarbij mijn manier van denken het meest is verschoven. Progressive enhancement betekent: begin met wat altijd werkt (HTML) en voeg daarna verbeteringen toe. Ik had altijd andersom gedacht.

Mijn inbreng: een meerstaps erfenisformulier in NS-huisstijl dat ook zonder JavaScript werkt. Progressive disclosure zodat velden pas zichtbaar worden als ze relevant zijn, en de startViewTransition API voor vloeiende overgangen tussen stappen.

Nieuw inzicht: HTML5 constraint validation is krachtiger dan ik dacht. En toegankelijkheid is geen extraatje, het is gewoon de basis. Dat is een mindset-shift die ik de rest van de minor heb meegenomen.

Dit project was het meest verrassend voor mij. Ik dacht dat CSS een vrij simpele taal was, maar na 2.500+ regels en 16 uitgewerkte combinaties denk ik daar anders over. Geen JavaScript, geen classes, geen ID's. Alleen HTML-elementen en slimme CSS.

Mijn inbreng: een ster met lange benen die een silly walk doet als eerbetoon aan Monty Python. Vier knoppen met elk een eigen stijl en animatie, gecombineerd via container style queries. Ik heb me ook verdiept in Monty Python quotes om de teksten per state aan te passen.

Nieuw inzicht: @layer maakt je code veel overzichtelijker als je veel CSS schrijft. Container style queries zijn ongelofelijk handig voor combinaties van states. En animaties die elkaar overschrijven is een veelvoorkomend probleem waar ik een spreadsheet voor moest maken.

Vier dagen, een opdrachtgever, een team van vier. Dat was de Meesterschap Hackaton. We bouwden een website voor NEBULA, een satelliet die in 2030 de ruimte in wil. Mijn inbreng was het animatiewerk en de theming: een scroll-animatie waarbij de satelliet om de aarde draait, en twee thema's (aurora en black hole).

We hebben ook easter eggs ingebouwd: een hidden Space Invaders minigame en een nyan cat animatie. Dat soort details maken een website gedenkwaardig.

Nieuw inzicht: samenwerken onder tijdsdruk vereist vertrouwen in elkaars code. Je kunt niet alles zelf willen controleren. Snel beslissen wat er wel en niet in gaat is een vaardigheid op zich. En: een scroll-gebaseerde animatie is complexer dan het eruitziet, maar ook super bevredigend als het klopt.

Voor dit vak heb ik een Sudoku-app gebouwd met twee APIs: een Sudoku API voor de puzzels en de icanhazdadjoke API voor een grap bij het oplossen. De moeilijkheidsgraad past zich aan op basis van hoe snel je een puzzel oplost. Afgeronde puzzels en statistieken worden bijgehouden in localStorage.

Mijn inbreng: de Drag & Drop API zodat je cijfers kunt slepen in plaats van typen, confetti bij het voltooien en een overzichtspagina met statistieken.

Nieuw inzicht: een weekjournaal bijhouden helpt echt om structuur te houden en terug te blikken. Ik heb ook geleerd hoe touch events werken naast de standaard drag events, wat voor mobiel noodzakelijk is. En: twee APIs combineren is niet ingewikkeld als je de structuur snapt.

Dit vak was het meest leerzaam op menselijk niveau. Ik heb een webprototype gebouwd voor Ihab, een blinde gebruiker. Een popup met drie tabs (Quick Scan, Detail en Sfeer) die via de Web Speech API de essentie van een pagina voorleest.

Mijn inbreng: de keuze om te werken met het <dialog> element en showModal() zodat de focus automatisch goed staat voor de screenreader. De Sfeer-tab als speelse toevoeging voor recreatief gebruik, wat Ihab het interessantst vond.

Nieuw inzicht: ontwerpen voor één specifieke persoon leert je meer dan generieke richtlijnen lezen. Elke testsessie met Ihab gaf feedback die ik nooit had bedacht. Het verschil tussen wat jij denkt dat iemand nodig heeft en wat hij daadwerkelijk mist is groot. De Exclusive Design Principles zijn een goed kader om die blinde vlekken kleiner te maken.

Ik wil mijn JavaScript netter schrijven. Op dit moment werkt mijn code, maar ik merk dat ik soms te veel in één bestand gooi of functies schrijf die te lang zijn. Ik wil leren hoe ik code beter kan opdelen en leesbaar kan houden voor iemand anders.

Hoe ik hieraan ga werken: per feature een aparte functie of bestand, variabelen en functies duidelijk benoemen en tussendoor code reviewen door het hardop te lezen. Ik wil ook kijken naar hoe andere mensen hun JS structureren in projecten die ik op GitHub tegenkom.

Bij de meeste projecten heb ik toegankelijkheid er achteraf bijgedaan. Ik wil het omdraaien: beginnen met semantische HTML, labels, focus management en contrast als basis, en pas daarna het visuele design eroverheen leggen.

Hoe ik hieraan ga werken: een checklist bijhouden van basale toegankelijkheidspunten (alt-teksten, labels, tabvolgorde, kleurcontrast) die ik aan het begin van elk component doorloop. En minimaal één keer per project door het ontwerp heen met alleen het toetsenbord.

Ik heb de neiging om ideeën steeds groter te maken dan de tijd toelaat. Dan loop ik aan het einde van een project tegen dingen aan die ik niet meer af krijg, of ik geef een feature minder aandacht dan hij verdient. Ik wil leren om een realistisch plan te maken en me daar ook aan te houden.

Hoe ik hieraan ga werken: aan het begin van de meesterproef een prioriteitenlijst opstellen met een must-have en een nice-to-have. De must-haves komen eerst af, en de nice-to-haves alleen als er tijd over is. Ik ga ook wekelijks checken of ik nog op schema lig.