Blog - Joost Locher

Weekly Nerd

Kilian Valkhof

  • Samenvatting

    "Use the least powerful language suitable for a given purpose" oftewel: gebruik de minst krachtige oplossing die nog steeds werkt. Begin altijd met HTML, voeg alleen CSS toe als dat nodig is, en gebruik JavaScript pas als laatste redmiddel.

    Minder krachtige oplossingen zijn vaak beter leesbaar, toegankelijker voor screenreaders, eenvoudiger te onderhouden én beter voor de prestaties.

    Voorbeelden: gebruik een a-element in plaats van een button met JavaScript voor navigatie. Gebruik standaard form-elementen met appearance: none om ze visueel aan te passen, zonder hun functie te verliezen.

    Handige technieken die langskwamen: - accent-color voor het stijlen van checkboxes en radio's
    - scroll-margin-top om ruimte boven anchor targets te houden
    - :target om automatisch een highlight toe te voegen aan het aangeklikte onderdeel
    - @starting-style om het beginpunt van een animatie te bepalen
    - :has() als een soort if-statement in CSS (bijvoorbeeld: een form met een checked input krijgt een andere stijl)
    - ::picker() om select-dropdowns zelf te stylen (alleen in Chrome)

    De boodschap: denk na over wat je écht nodig hebt — en begin altijd met de eenvoudigste oplossing.

    Mening

    Dit was de eerste Weekly Nerd die we hadden. Hij begon met veel dingen die we al kenden, waardoor het in het begin een beetje saai was. Maar al snel kwamen er nieuwe technieken uit de CSS-wereld aan bod. Ik heb hier uiteindelijk veel van geleerd, en technieken zoals :has() heb ik daarna ook regelmatig toegepast tijdens de vakken.

  • kilian valkhof

  • The rule of least power

Roel Nienkens

  • Samenvatting

    Een font is het digitale bestand dat bepaalt hoe letters eruitzien; een typeface is het ontwerp van een letterfamilie, zoals Helvetica.

    Een glyph is de visuele vorm van een karakter — eenn letter kan meerdere glyphs hebben. Ligatures verbeteren de visuele samenhang. Kerning regelt de afstand tussen specifieke letterparen voor betere balans.

    OpenType-features voegen extra typografische functies toe, zoals fractions (½), stylistic sets, tabular en oldstyle figures, small caps en swashes.

    OpenType wordt breed ondersteund in browsers en maakt typografie krachtiger. Variable fonts combineren meerdere stijlen (gewicht, breedte, schuinte) in één bestand, wat zorgt voor snellere laadtijd en meer flexibiliteit in responsief ontwerp.

    Roel Nieskens site voor var-fonts: https://wakamaifondue.com/

    Mening

    Wat fonts allemaal kunnen doen, was interessant om te zien — vooral hoeveel je met CSS kunt aanpassen, zeker bij het gebruik van variable fonts. Tijdens het vak CSS had ik ook een les van hem gevolgd waarin we leerden hoe we dit konden toepassen op ons project. Het zou goed zijn als er in de toekomst meer variable fonts beschikbaar komen en er meer kennis over gedeeld wordt. Ik wil hier in ieder geval verder naar gaan kijken en het toepassen in toekomstige projecten waar mogelijk.

  • roel nieskens

  • Typography

Cassie Evans

  • Samenvatting

    GSAP is een krachtige JavaScript-animatiebibliotheek waarmee je alles kunt animeren op het web.

    Basis: tween = één animatie, timeline = meerdere na elkaar.

    Plugins: ScrollTrigger (scroll-animaties), ScrollSmoother (vloeiend scrollen), MotionPathHelper (bewegingspaden).

    Utils: random (willekeurige waarde), wrap (herhalen), mapRange (waarden vertalen), pipe (functies koppelen), snap (afronden).

    Efficiëntie: quickSetter & quickTo voor snelle updates zoals cursor-volgers.

    Responsief: matchMedia voor animaties per schermformaat.

    Controle: play, pause, reverse, restart en addPause voor interactiemomenten.

    Toegankelijkheid: houd rekening met motion-reduction, gebruik ease: rough voor alternatief yoyo-effect.

    Cassie's tip: quick hover animatie klaarzetten, pas starten bij interactie.

    Mening

    Het was leuk om te zien wat je allemaal kunt doen met een JavaScript-library zoals GSAP voor animaties. Zelf had ik hier nog nooit mee gewerkt en ik ben sowieso niet zo van de JavaScript. Deze Weekly Nerd viel ook samen met het vak CSS, waar dit juist een beetje tegenover staat. Toch denk ik dat ik hier in de toekomst zeker nog eens mee wil experimenteren in een apart project, om mijn skills te verbreden.

  • cassie evans

  • GSAP - Beyond tweening

Nils Binder

  • Samenvatting

    Front-end designer uit Duitsland, werkzaam bij 9elements. Achtergrond in communicatieontwerp, productontwikkeling en CSS-architectuur. Zoekt de balans tussen design en development, stuurt een team aan binnen een digitaal bureau.

    Werkt flexibel en schaalbaar, geen pixel-perfect ontwerp. Gebruik van moderne CSS-functies: min(), max(), clamp(), margin-inline. Voorbeeld: width: min(100% - 3rem, 75rem); met automatische centrering via margin-inline: auto.

    Figma als tool: sluit goed aan bij CSS-denken door gebruik van px, %, rem. Consistent gebruik van eenheden verbetert samenwerking tussen ontwerp en code.

    Responsieve eenheden: vw, vh, vmin, vmax (viewport) en qi, qb, qmin, qmax (containers). Maakt layouts adaptief voor elk schermformaat.

    Whitespace is essentieel: niet verspild, maar functioneel voor rust en leesbaarheid. Flexibel ontwerpen = ontwerpen voor verandering.

    Mening

    Sommige dingen die hij vertelde kende ik al, zonder er echt bij stil te staan. Maar Nils maakte goed duidelijk waarom deze technieken zo waardevol zijn. Ik heb tijdens de vakken af en toe al gebruikgemaakt van functies zoals clamp, maar ik zou dit vaker kunnen toepassen — bijvoorbeeld ook met qi, qmin en qmax voor containers.

  • nils binder

  • Design for Flexibility

Jeremy Keith

  • Samenvatting

    Imperative programming beschrijft stap voor stap wat er moet gebeuren, zoals in JavaScript. Dit geeft veel controle, maar is foutgevoeliger. Declarative programming richt zich op wat je wilt bereiken, zoals in HTML en CSS, waarbij de browser de uitvoering regelt.

    Gebruik JavaScript alleen moet waar het echt nodig is. Bijvoorbeeld: gebruik een echte button, geen div met JS.

    In design draait declaratief denken om systemen en regels, zoals een hoverkleur die altijd iets donkerder is. Imperatief denken focust op precieze uitkomsten.

    Tools zoals utopia.fyi en every-layout.dev ondersteunen een declaratieve aanpak. CSS-functies als clamp(), calc() en padding-inline-start helpen bij flexibele, schaalbare ontwerpen.

    Tot slot: denk na over hoe je denkt. In- en uitzoomen (analytisch en systeemdenken) zijn beide nodig in design en development.

    Mening

    Hij liet me goed nadenken over wat voor persoon ik zelf ben en wat voor soort bedrijf ik later moet gaan zoeken. Zelf neig ik meer naar de declaratieve kant, maar het is soms ook juist goed om imperatief te werk te gaan om meer controle te hebben en de code duidelijker te maken. Ik moet dit echter eerst op de werkvloer ervaren voordat ik hier definitief een keuze in kan maken.

  • jeremy keith

  • Imperative vs. Declarative Design

Julia Miocene

  • Samenvatting

    UX Engineer bij GitLab, actief in het UX Paper Cuts-team. Google Developer Expert en Women Techmakers Ambassador. Bekend om complexe animaties en illustraties met alleen CSS — populair op CodePen.

    Laat zien dat CSS meer is dan alleen styling: tekenen en animeren zonder JS of SVG. Alles opgebouwd uit divs of andere elementen voor de delen van een lichaam. Werkt met parent-child-structuren en gebruikt pseudo-elementen ::before en ::after.

    Position relative en absolute voor nauwkeurige plaatsing van onderdelen. Transform, rotate, scale, translate voor beweging en vorm. Transform-origin bepaalt het draaipunt van animaties, bijvoorbeeld bottom center voor armen.

    Clip-path, border-radius en gradients voor vormen en effecten. Maakt gebruik van CSS-hacks zoals driehoeken met borders en schaduwen voor diepte.

    Toonde tijdens de presentatie verschillende voorbeelden van haar werk inclusief de bijbehorende code. Website bevat handige tips en inspiratie voor creatieve toepassingen van CSS.

    Mening

    Ik vond Julia's werk heel tof! Toevallig had ik voor de Weekly Nerd al een video van haar gezien op YouTube, die ze ook in haar presentatie had verwerkt. Later heb ik een andere video van haar kunnen gebruiken voor het vak CSS, waarmee ik mijn console in 3D kon stijlen.

  • julia miocene

  • CSS Character Animations

Rosa Schuurmans

  • Samenvatting

    Oud CMD-student met een technische en creatieve hacker-mentaliteit, gericht op onafhankelijk werken en zelf dingen maken.

    DIY-benadering staat centraal: zelf onderzoeken, bouwen, slopen en leren zonder afhankelijk te zijn van grote platformen.

    Werkt platform-agnostisch, dus zonder voorkeur voor merken of systemen. Bouwt eigen CMS, draait eigen servers en kiest bewust voor open source tools.

    Gebruikt Bash voor automatisering en bewerking via de terminal, en ImageMagick als alternatief voor Photoshop.

    Focust op projecten rond e-waste, audiohacking, livesets en workshops. Experimenteert bewust met rauwe en ongebruikelijke geluiden via kabels en mixers.

    Haar manier van leren is praktisch: “Keep It Simple, Stupid” en “Learn by Trying” zijn leidende principes.

    Mening

    Zelf had ik niet heel veel met dit onderwerp. Voor CMD heb ik een jaar Product Design gedaan, waar je vaak producten uit elkaar haalt en onderzoekt waar ze uit bestaan en hoe je die kennis kunt toepassen. Toch heb ik zelf niet zoveel met fysieke ontwerpen en de techniek daarachter. Wel zie ik dat je deze aanpak ook op code kunt toepassen, door goed te kijken waar onderdelen uit bestaan en hoe je ze kunt hergebruiken.

  • rosa schuurmans

  • Circuit Bending

Nienke de Keijzer

  • Samenvatting

    Nienke de Keijzer onderzocht tijdens haar afstudeerproject de toegankelijkheid van de GVB-app. Ze ontdekte dat de app voor veel mensen met een beperking niet goed bruikbaar was.

    In plaats van alleen te kijken naar regels, legde ze de focus op echte gebruikerservaringen. Ze betrok mensen met beperkingen actief bij het ontwerp- en testproces, wat leidde tot waardevolle inzichten.

    Met kleine aanpassingen, zoals beter kleurcontrast, duidelijke navigatie en leesbare tekstgroottes, maakte ze de app een stuk gebruiksvriendelijker. Dit resulteerde in een toegankelijker herontwerp.

    Haar aanpak maakte indruk: GVB nam haar aanbevelingen over en bood haar uiteindelijk een baan aan. Dit laat zien dat toegankelijk ontwerpen niet alleen om regels gaat, maar vooral om échte bruikbaarheid voor iedereen.

    Toegankelijkheid begint bij het ontwerp. Denk vanaf het begin na over gebruiksgemak, test met diverse gebruikers en maak gebruik van semantische HTML. Kleine stappen maken al een groot verschil.

    Mening

    Dit was wel even schrikken: hoe weinig tot niets een groot bedrijf als GVB in accessibility investeert. Zeker als het een bedrijf is dat juist voor iedereen toegankelijk zou moeten zijn. Nienke maakte ook duidelijk dat veel testen echt een must is en dat daar veel nieuwe inzichten uit komen. Dit heb ik zelf ook ervaren bij HCD.

  • nienke de keijzer

  • Accessibility for GVB

Erik Kroes

  • Samenvatting

    Toegankelijkheid gaat over ervoor zorgen dat iedereen je website kan gebruiken, ook mensen met een beperking. Kleine aanpassingen kunnen al veel verschil maken.

    Goede HTML is de basis. Gebruik semantische elementen zoals button, a, nav en vermijd het gebruiken van divs voor interactieve elementen.

    Voor de keyboard zijn veelvoorkomende problemen: geen skip link, foutieve focus states, lage kleurcontrasten en onduidelijke placeholders. Labels horen boven inputvelden te staan.

    Contrast is belangrijk, zeker in fel licht. Voor gewone tekst is minimaal 4.5:1 nodig, voor grote tekst 3:1.

    Alternatieven zoals captions, transcripts en goede alt-teksten maken content toegankelijker. Let ook op afbeeldingen in buttons en video’s zonder ondertiteling.

    Test niet alleen met tools, maar ook met het toetsenbord en een screenreader. Zorg dat je site werkt op kleine schermen en dat tekst schaalbaar is.

    Je kunt veel bereiken zonder JavaScript, als je HTML en CSS slim inzet.

    Mening

    Heel veel van deze informatie die hij had vertelde wist ik al, wat natuurlijk heel goed is dat wij dat al hebben geleerd en kunnen toepassen. Maar er zijn nogsteeds veel mensen die hiervan kunnen leren, en altijd goed bij elk project hier wat tijd in te steken. Ik hoop dit dan ook voor de Meesterproef te doen.

  • erik kroes

  • WCAG - Accessibility Fixes

Dave Bitter

  • Samenvatting

    Dave Bitter (iO) liet zien hoe je spraakherkenning en AI combineert tot toegankelijke voice-interfaces in het project PresiParrot.

    Hij toonde hoe de Web Speech API en Speech Synthesis API samen met ChatGPT en ElevenLabs zorgen voor een AI die live spraak omzet naar tekst én terugpraat. Door audio te splitsen en data slim op te halen, wordt de interactie sneller en realistischer.

    Tools zoals useSpeechRecognition en useSpeechSynthesis maken het bouwen eenvoudiger. Animaties (zoals “luistert” of “praat”) geven extra feedback en persoonlijkheid aan de interface.

    Belangrijke boodschap: spraak is een natuurlijke manier van interactie en AI is meer dan een gimmick, het is een bruikbare datastructuur. Gewoon bouwen dus, en niet blijven hangen in alleen ideeën.

    Mening

    Het was tof om te zien hoe je "vrij simple" met een Web Speech API en AI samen een spraak bot kan neerzetten. Tijdens de vakken door ben ik er ook achter gekomen wat Web API zijn en hoe je deze ook goed en leuk kan toepassen. Dit wil ik dan ook zeker meenemen en hier vaker naar te kijken.

  • dave bitter

  • The Rise of AI-Powered Voice Interfaces

Steve Jonk

  • Samenvatting

    Steve Jonk liet zien hoe hij een Twitter-follow-bot bouwde voor een OnlyFans-klant, met als doel automatisch relevante accounts te volgen en zo bereik te vergroten.

    Omdat de Twitter API veel beperkingen heeft (zoals een actie per 10 minuten en beperkte toegang tot data), koos hij voor een alternatieve aanpak: scraping via Puppeteer. Daarmee simuleerde hij het gedrag van een echte gebruiker inclusief inloggen, scrollen en klikken.

    Om dit goed te laten werken gebruikte hij een combinatie van tools:
    – Puppeteer voor browserautomatisering
    – n8n voor workflow-automatisering
    – PostgreSQL voor dataopslag
    – Docker en Ubuntu als serveromgeving (met Xvfb voor headless interface)

    Het systeem hield rekening met "menselijk gedrag" door random pauzes en foutafhandeling in te bouwen. Bij API-fouten wachtte de bot een willekeurige tijd en probeerde het opnieuw.

    Hoewel het project technisch sterk in elkaar zat, kwam ook de ethische kant aan bod. Scraping is effectief, maar brengt risico's met zich mee op het gebied van privacy en platformregels. Toch maakte Steve vooral duidelijk hoeveel je kunt bereiken met slimme automatisering, zelfs als officiële API's je beperken.

    Mening

    Op ethische gebied was ik het nou niet helemaal met hem eens wat hij deed, maar ik vond het toch leuk om te zien hoe je dit soort functies kan automatiseren. Ook de manier hoe hij de website onderzocht in inspecteer modes inspireerde mij.

  • steve jonk

  • Twitter Follow Bot

Clarke Verdel

  • Samenvatting

    Clarke Verdel (Werkend voor Miele) deelde zijn aanpak voor gestructureerd testen van front-end code, gebaseerd op het “Testing Trophy” model. Hij benadrukte dat testen verder gaat dan alleen checken of iets werkt. Het gaat om vertrouwen in je interface, op elk apparaat, in elke taal en voor elk type gebruiker.

    De testingstrategie bestaat uit vier lagen: static tooling (zoals ESLint en TypeScript), component en unit tests (met tools als Vitest), integratietests en end to end tests (bv. met Cypress of Playwright). Hoe hoger in de piramide, hoe realistischer de test, maar ook duurder en trager.

    Testen moet slim ingezet worden: lichte checks voor simpele componenten, uitgebreidere testen voor complexe interacties. Denk aan responsiviteit, toegankelijkheid, performance en browsercompatibiliteit. Alles draait om het simuleren van echte gebruikerservaring — testen zoals je gebruikers gebruiken.

    Mening

    Het was een interessant inzicht hoe het testen van code werkt op een meer professioneele manier werkte. Hier had ik zelf nog niet zo bij stil gestaan dat dit zo uitgebreid kan en moet zijn.

  • clarke verdel

  • Slim Testen

Johan Huijkman

  • Samenvatting

    Q42 is een “nerdagency” die werkt aan inclusieve digitale producten zoals de websites van het Rijksmuseum en HEMA. Toegankelijkheid is voor hen standaard. Ze testen met echte gebruikers en bereiden zich voor op WCAG 2.1 en de Europese toegankelijkheidswet.

    In samenwerking met Visio ontwikkelden ze SenseMath, een app waarmee blinde leerlingen wiskunde leren via geluid. Grafieken worden hoorbaar gemaakt door toonhoogtes. Ook maakten ze een speciaal wiskundetoetsenbord met swipebediening. Hun boodschap: ontwerp vanaf het begin voor iedereen.

    Mening

    Q42 vond ik een erg leuke Weekly Nerd. De projecten die ze lieten zien, maar ook zeker de creatieve manier waarop zij projecten aanpakken, spraken me erg aan. Ik had hiervoor al eerder van Q42 gehoord, maar het was leuk om te zien hoe de sfeer daar op de werkvloer is.

  • johan huijkman

  • Q42 "nerd-agency"

Marvin Sernee

  • Samenvatting

    Oculi Mundi is een online 3D-kunstcollectie van Sunderland, gemaakt zonder gebruik van WebGL. In plaats daarvan is er slim gebruikgemaakt van HTML en CSS, met technieken als transform-style: preserve-3d voor diepte en beweging. Beelden zijn haarscherp dankzij de integratie van Micl.io, waarmee gebruikers tot op detailniveau kunnen inzoomen op kunstwerken.

    Wat het project bijzonder maakt, is dat het ondanks de visuele complexiteit volledig toegankelijk is. Er is ondersteuning voor tabnavigatie, en er is rekening gehouden met prefers-reduced-motion voor gebruikers die bewegende elementen willen beperken. Een goed voorbeeld van hoe 3D en toegankelijkheid hand in hand kunnen gaan, zonder zware technologieën zoals WebGL.

    Mening

    Q42 vond ik een erg leuke Weekly Nerd. De projecten die ze lieten zien, maar ook zeker de creatieve manier waarop zij projecten aanpakken, spraken me erg aan. Ik had hiervoor al eerder van Q42 gehoord, maar het was leuk om te zien hoe de sfeer daar op de werkvloer is.

  • marvin sernee

  • Q42 "nerd-agency"

Marieke de Hoop

  • Samenvatting

    Toegankelijkheid gaat verder dan alleen permanente beperkingen. Marieke de Hoop liet zien dat ook tijdelijke of situationele beperkingen — zoals een gebroken arm of fel zonlicht — invloed hebben op hoe mensen digitale producten gebruiken. Iedereen kan dus te maken krijgen met ontoegankelijke interfaces.

    Ze gaf een inkijk in haar werk als toegankelijkheidsexpert, waaronder audits volgens WCAG-richtlijnen, adviestrajecten en trainingen voor organisaties als ASR. Tools zoals Stylus, Colour Contrast Checker en Stark helpen bij het opsporen van toegankelijkheidsproblemen.

    Belangrijk onderdeel van haar talk was de aankomende European Accessibility Act (EAA), die op 28 juni 2025 ingaat. Bedrijven die aan consumenten in de EU leveren, moeten dan voldoen aan digitale toegankelijkheidsrichtlijnen. Uitzonderingen gelden alleen voor kleine ondernemingen. Toezicht ligt bij instanties als de ACM en AFM, en boetes kunnen oplopen tot 20 miljoen euro.

    De boodschap was duidelijk: toegankelijkheid is geen extraatje, maar een fundamenteel onderdeel van goed ontwerp én wettelijk verplicht.

    Mening

    Dit was weer een Weekly Nerd over toegankelijkheid, dus ik wist al veel van wat zij vertelde. Toch werd het me extra duidelijk dat hier tijdens en na mijn opleiding al veel meer aandacht naartoe gaat dan voorheen.

  • marieke de hoop

  • Digitale Toegankelijkheid

Miriam Suzanne

  • Samenvatting

    Miriam sprak over hoe het web ooit begon als een platform voor tekst en publiek onderzoek, bedoeld voor openheid en kennisdeling. Tegenwoordig is het veel visueler, interactiever en commercieel ingesteld. Ze zette aan tot nadenken: voor wie is het web eigenlijk gemaakt?

    Ze legde uit dat webdesign nooit af is. De gebruiker blijft altijd invloed houden, bijvoorbeeld via voorkeuren of instellingen. Daarbij benadrukte ze dat je niet moet ontwerpen voor "de gemiddelde gebruiker", maar juist rekening moet houden met diversiteit.

    De cascade in CSS werd besproken als een krachtig principe dat flexibiliteit mogelijk maakt in plaats van rigide controle. Ze riep op om het web te zien als een gedeeld platform dat de gebruiker centraal stelt, niet de ontwerper.

    Ook benoemde ze dat technologie nooit neutraal is. Elke tool draagt ideeën en keuzes met zich mee. Daarom is het belangrijk om je bewust te zijn van de maatschappelijke impact van hoe en wat we bouwen op het web.

    Mening

    Om eerlijk te zijn vond ik dit een van de minder goede Weekly Nerds, omdat ze in een rap tempo van het een naar het ander gingen, waardoor er geen duidelijk verhaal ontstond. Daardoor heb ik, ook omdat ik die dag wat gaar was, alles moeilijk kunnen volgen.

  • miriam suzanne

  • Pre CSS Day

Leerdoelen

- Gestructureerd en professioneel werken

Ik wil tijdens het project overzichtelijk en netjes te werk gaan, zodat de samenwerking met het team beter verloopt en de code begrijpelijk blijft.

Aanpak:
  • Duidelijke afspraken maken over code opbouw en structuur. (codeconventions)
  • Github gebruiken voor planning via Projects en Issues.
  • Branches per features, met duidelijke commit messages.
  • Regelmatig overleggen met het team of alles nog goed verloopt.

- JavaScript beter begrijpen en bewust gebruiken

Ik gebruik nu regelmatig AI voor JavaScript, maar wil daar minder afhankelijk van worden. Door zelf code te schrijven en te begrijpen wat ik doe, wil ik leren om mijn code eenvoudiger, overzichtelijker en doelgerichter te houden.

Aanpak:
  • Eerst zelf schrijven, zonder AI.
  • Bij elke regel nagaan of die echt nodig is of eenvoudiger kan.
  • AI alleen inzetten als laatste stap, of voor gerichte uitleg/hulp.
  • Korte notities toevoegen om te checken of ik het zelf begrijp.

- Animeren met GSAP

Ik wil GSAP graag leren en kijken of ik het op een goede manier kan toepassen in mijn meesterproef. Als dat niet lukt, verwerk ik het in mijn Weekly Nerd om er toch mee te oefenen.

Aanpak:
  • Oefenen met verschillende GSAP-features.
  • Bij elke animatie nagaan of het ook met CSS kan, en dit bijhouden in een documentje.
  • Rekening houden met performance en interactie.
  • Animaties gestructureerd opbouwen en overzichtelijk houden.

Hackathon

Women's World Wide Web is een lofuiting aan alle vrouwen in de tech. Samen met Lisa en Lauren heb ik in drie dagen een mooi eindproduct neergezet. We hebben hiervoor een wereldbol gemaakt met daarin CodePens van het werk van deze vrouwen. Rondom de wereld draaien afbeeldingen van hen in een animatie. Die animatie heb ik gemaakt met behulp van keyframes en transform: translate. Ik had ook geprobeerd om via de sibling index een delay tussen de afbeeldingen toe te passen, maar dat is niet gelukt.

Het teamwork verliep zeer goed: we konden elkaar versterken, goed helpen en het was duidelijk wie welke taak had. We verdeelden het werk efficiënt.

Ik ben erg trots op wat we in drie dagen hebben kunnen neerzetten, zeker met alle nieuwe technieken die we hebben geleerd en toegepast, zoals customizable selects, anchor positioning en carousel snap.

Reflectie

Hoe gaat het tot nu toe

Tijdens de minor ben ik tot nu toe al enorm gegroeid. Ik zie veel vooruitgang in hoe snel ik nieuwe technieken oppak en deze kan toepassen in mijn projecten. Zo heb ik mijn doel om 3D in web development toe te passen op meerdere manieren kunnen realiseren. Ook heb ik meer inzicht gekregen in waar ik nu sta en welke vaardigheden ik inmiddels beheers.

Mijn leermomenten

Mijn grootste leermoment was hoe goed samenwerking kan verlopen als je vanaf het begin georganiseerd werkt. Door snel taken te verdelen en helder te communiceren konden we tegelijk aan dezelfde code werken en dit makkelijk samenvoegen.

Daarnaast verbaasde het me hoeveel je kunt bereiken zonder JavaScript. Door de technieken die we bij verschillende vakken hebben geleerd, kan ik nu al behoorlijk wat (interactieve) onderdelen bouwen, puur met HTML en CSS.

Tot slot merk ik hoe snel je nieuwe technieken oppikt en inziet waar je die allemaal voor kunt gebruiken.

Reflectie Meesterproef

Terugkijkend op dit project ben ik over het algemeen tevreden over hoe het is verlopen. Hoewel ik niet op elk leerdoel zoveel focus heb kunnen leggen als ik had gewild (door tijdsdruk of mijn rol binnen het team) heb ik wel mijn best gedaan om het eindproduct van ons team voorop te stellen. De samenwerking verliep over het algemeen prettig. We wisten goed te communiceren en stemden onderling af wie wat oppakte. Het eindproduct is niet perfect, maar ik ben toch enigzins trots op wat we samen hebben neergezet, zeker omdat de opdracht niet altijd even duidelijk was.

Leerdoelen

Gestructureerd en professioneel werken

Dit leerdoel heb ik grotendeels behaald. In het begin stelde ik voor om GitHub Projects te gebruiken voor de planning en stelde ik duidelijke codeconventies op, waarmee we gestructureerd konden starten. Hoewel GitHub Projects al in week 2 verwaterde doordat we dagelijks op het whiteboard de taakverdeling voor die dag of week noteerden, verliep de samenwerking op deze manier alsnog goed. Wat betreft de variabelen en conventies merkte ik dat dit deels werd opgepakt, maar niet altijd consistent werd toegepast. Daar had ik misschien meer op kunnen aandringen, al hielp het ook niet dat we regelmatig van ontwerp wisselden. Voor mijzelf hielp het in ieder geval om overzicht te houden in mijn eigen werk.

JavaScript beter begrijpen en bewust gebruiken

Ook al heb ik bij dit project niet veel gebruik gemaakt van JavaScript (als je GSAP niet mee telt), omdat dat niet specifiek onder mijn verantwoordelijkheden viel (op een kleine CodePen met de Geolocation web API na) heb ik wel een duidelijke groei gemaakt. Ik heb tijdens dit project vrijwel geen AI gebruikt voor het schrijven van mijn code, en ben bewust zelf aan de slag gegaan. Hierdoor begreep ik mijn code beter en kon ik hierna ook beter mijn teamgenoten helpen met gsap.

Animeren met GSAP

Dit leerdoel vind ik zelf het sterkst behaald. Door de workshops, het opzoeken van extra bronnen en vooral door veel zelf te experimenteren in CodePen, heb ik veel geleerd over GSAP. Ik ben tevreden met hoe ik GSAP heb kunnen inzetten voor de animaties. Al ben ik er, mede door de feedback van docenten, ook achter gekomen dat GSAP zeker niet altijd de beste keuze is. In de toekomst zou ik eerder kiezen voor een CSS-first aanpak en GSAP alleen gebruiken voor specifieke technieken zoals morphing, wanneer dat niet goed met CSS te behalen is.

Reflectie Vakken

WAFS

"WAFS was voor mij weer een goede opfrisser voor coderen. Een van mijn doelen was om te werken met 3D in webdesign. Daarom heb ik me meteen in het diepe gegooid door aan de slag te gaan met Three.js en een zelfgemaakt model in te laden en ermee te interacteren. Ik vind dat dit goed gelukt is en kijk positief terug op dit introductievak.

CSS

Dit vak vond ik erg leuk en interessant. Ik heb enorm veel geleerd over allerlei nieuwe technieken, hoe je die oppakt en op een creatieve manier kunt gebruiken. Ook heeft het me doen beseffen dat je veel meer met CSS kunt dan je in eerste instantie denkt. Toch vond ik het vak vrij kort en had ik hier graag langer mee door willen gaan.

Browser Technologies

BT heeft mij veel geleerd over hoe waardevol een goede HTML-basis is en wat je daar eigenlijk al allemaal mee kunt. Het heeft me ook veel laten nadenken over allerlei interacties en structuren, en hoe diep je daarin kunt duiken. Zelf vond ik het niet het meest interessante vak, mede omdat het tegelijk met CSS werd gegeven en ik daar toen mijn tijd in had gestoken. Maar achteraf heb ik er wel enorm veel van geleerd.

API

Ik vond API een lastig vak, omdat er eigenlijk weinig werd uitgelegd en de docenten vaak in gesprek waren met andere leerlingen. Daardoor heb ik in eerste instantie veel gebruikgemaakt van AI voor mijn code, waardoor ik er toen niet heel veel van heb geleerd. Voor de herkansing moest ik mijn code echter aanpassen en ben ik er vooral zelf goed in gedoken om het echt te begrijpen. Hierdoor heb ik toch veel geleerd over hoe je data uit een API haalt en heb ik uiteindelijk een leuk eindresultaat kunnen realiseren.

Human Centered Design

Voor HCD vond ik dat we eigenlijk te weinig tijd kregen om ons echt goed te verdiepen in accessibility. Soms had je maar een weekend tussen de testen door, waardoor je uiteindelijk een half afgerond product moest opleveren waarin ik geen aandacht aan de details kon besteden. Toch vond ik het erg leuk om een product te maken voor één specifiek persoon en dit ook te testen in hun eigen omgeving. Ik heb daar veel van geleerd, vooral dat de gebruikerservaring voor anderen heel anders kan zijn dan je zelf verwacht.