Weekly Nerds

De presentatie in 1 zin

Je kunt met CSS veel meer dan alleen dingen mooi maken, je kunt er ook echt interactie en logica mee bouwen.

Samenvatting

In de presentatie ging het over allemaal handige CSS-features die je kunt gebruiken om dingen als accordeons, pop-ups (dialogs) en zelfs animaties te maken. Je hoeft daarvoor niet altijd JavaScript te gebruiken. Dingen als :checked, :has() en appearance: none geven je best veel controle. Ook scrollen kun je smooth maken, en je kunt zelfs bepalen hoeveel ruimte er boven je content moet zitten als je ergens naartoe scrolt. Superveel kleine dingen die samen best krachtig zijn.

Wat neem ik mee

  • Met :has() en :checked kun je best slimme dingen doen zonder JS.
  • Accordeons en dialogs zijn eigenlijk supermakkelijk te maken met alleen HTML & CSS.
  • CSS is niet alleen voor styling — je kunt er echt interactieve elementen mee bouwen.

De presentatie in 1 zin

Waarom zijn websites eigenlijk nog steeds gratis — en wat als we daar eens mee stoppen?

Samenvatting

Peter-Paul vertelde dat hij gestopt is met zijn bekende site omdat hij er niks aan verdiende. Hij vindt dat het raar is dat we verwachten dat alles op het web gratis is. Als het gratis is, dan krijg je advertenties — en dan bepalen techbedrijven wat jij te zien krijgt. Hij wil juist dat we gaan betalen voor wat we écht waardevol vinden, bijvoorbeeld op basis van hoeveel tijd je ergens doorbrengt. Er zijn al gesprekken en projecten gaande om dit soort modellen te bouwen.

Wat neem ik mee

  • Als we niet zelf betalen voor content, dan bepalen anderen wat we zien.
  • Tijd is geld — letterlijk, volgens dit model.
  • Het web als 'gratis gewoonte' is eigenlijk een rare standaard geworden.

De presentatie in 1 zin

Een font is niet zomaar een lettertje — er zit veel meer slimme techniek en ontwerp achter dan je denkt.

Samenvatting

Roel legde uit wat fonts nou echt zijn: basically een bestand dat vertelt hoe een letter eruitziet. Het verschil tussen een typeface (het ontwerp) en een font (het bestand) kwam aan bod, net als glyphs (verschillende versies van een letter), ligatures (samengevoegde tekens) en kerning (slimme spatiëring). Daarna doken we in OpenType-features zoals alternatieve cijfers, small caps en stylistic sets. Ook variable fonts kwamen langs — één bestand dat meerdere stijlen aankan. Superhandig en modern.

Wat neem ik mee

  • OpenType-fonts kunnen veel meer dan alleen letters laten zien — fractions, alternates, swashes, you name it.
  • Variable fonts besparen gewicht én geven je als ontwerper veel meer controle.
  • Goed gebruik van typografie maakt tekst echt véél fijner om te lezen.

De presentatie in 1 zin

GSAP is een superkrachtige animatietoolkit waarmee je echt alles kunt animeren wat je maar wilt — vooral met scroll en interactie.

Samenvatting

Cassie nam ons mee in de wereld van animaties met GSAP (GreenSock Animation Platform). Ze liet verschillende scroll-driven animaties zien en gaf uitleg over handige utilities zoals gsap.utils.random() (voor natuurlijke variatie), mapRange, wrap en pipe(). Ook leerden we dat je animaties soepeler maakt met easing, en je kunt die eases zelfs visueel aanpassen. Yoyo laat animaties heen en weer gaan. Verder kwamen er helper functions en container animations voorbij, die je code overzichtelijker en herbruikbaarder maken. En met matchMedia() kun je responsive animaties maken.

Wat neem ik mee

  • GSAP is dé toolkit als je serieus aan de slag wilt met web-animaties.
  • gsap.utils zit vol slimme tools om animaties natuurlijker en dynamischer te maken.
  • Easing maakt echt het verschil — “let the ease do the work”.
  • Yoyo = animaties die netjes teruggaan naar het begin (superhandig).

De presentatie in 1 zin

Moderne webdesign draait om flexibiliteit: ontwerpen die meebewegen met inhoud, schermgrootte en context.

Samenvatting

In plaats van alles pixel-perfect vast te zetten, moeten we ontwerpen met verandering in gedachten. Dankzij moderne CSS kunnen we layouts bouwen die zich aanpassen aan verschillende schermformaten en content. Waar we vroeger werkten met vaste breedtes, gebruiken we nu functies als min(), max(), clamp() en margin-inline om flexibel te blijven. Ook is het belangrijk dat designers en developers dezelfde taal spreken. Figma en CSS delen veel units, maar CSS biedt ook extras zoals em, ch, vw en vh. Door consistent te werken met eenheden verbeter je samenwerking én het eindresultaat. En niet vergeten: whitespace is waardevol — het draagt bij aan rust, leesbaarheid en visuele hiërarchie. Tot slot kun je met viewport- en container-gebaseerde eenheden zoals vh, qi en qmax superschaalbare layouts maken.

Wat neem ik mee

  • Gebruik min(), max() en clamp() voor flexibele wrappers.
  • Whitespace = belangrijk design-element, geen verspilling.
  • Denk in responsive units in plaats van vaste pixels.
  • Figma gebruikt vergelijkbare units — spreek dezelfde taal als designer/dev.

De presentatie in 1 zin

Declaratief programmeren gaat over zeggen wat je wilt, imperatief over hoe je het wilt.

Samenvatting

Bij imperatief programmeren beschrijf je stap voor stap wat er moet gebeuren — zoals in JavaScript met loops en if/else. Declaratief programmeren laat juist de uitvoering over aan de browser of het systeem, zoals in HTML of CSS. Het vraagt een andere mindset: minder controle, maar meer flexibiliteit. In design-systemen werkt declaratief denken beter schaalbaar.

Wat neem ik mee

  • HTML en CSS zijn declaratief, JS is meestal imperatief.
  • Declaratief denken = meer vertrouwen op systemen, minder micromanagen.
  • Designsystemen profiteren van regels in plaats van losse elementen.

De presentatie in 1 zin

Met alleen CSS kun je complexe illustraties en animaties maken — geen JavaScript of SVG nodig.

Samenvatting

Julia laat zien dat CSS meer is dan opmaak: je kunt er complete tekeningen mee bouwen door alles op te bouwen uit div elementen en pseudo-elementen zoals ::before en ::after. Elk onderdeel wordt gepositioneerd met position: absolute binnen een relatief ouder-element. Voor beweging gebruik je transform en transform-origin als draaipunt. Door creatief om te gaan met dingen als clip-path, border-radius en gradients, ontstaan er echte illustraties en animaties.

Wat neem ik mee

  • Alles kan een zijn: hoofd, ogen, armen — het is lego met CSS.
  • transform-origin is superkrachtig voor animatie vanuit het juiste punt.
  • CSS pseudo-elementen en positionering zijn genoeg voor hele tekeningen.

De presentatie in 1 zin

Rosa werkt als technische maker met een echte hacker- en DIY-mentaliteit, waarbij ze alles zelf bedenkt én zelf bouwt.

Samenvatting

Rosa komt uit CMD, maar maakt inmiddels van alles zelf: livesets, installaties, systemen — noem het maar op. Ze vertrouwt niet op standaard tools of platforms, maar bouwt liever haar eigen CMS, draait haar eigen servers en maakt haar eigen geluid. Alles met een soort rauwe, eerlijke stijl. Ze gebruikt tools als ImageMagick en Bash gewoon in de terminal en doet veel met e-waste en audiohacking. Niks gelikt, juist bewust een beetje rommelig. Dat hoort bij haar werkwijze.

Wat neem ik mee

  • Je hoeft niet afhankelijk te zijn van bestaande tools: maak het zelf.

De presentatie in 1 zin

Receipt printers gebruiken oude, maar krachtige printertalen als ESC/POS of StarPRNT — en die kun je met moderne web APIs aansturen.

Samenvatting

Receipt printers (zoals je ziet bij kassas) gebruiken talen als ESC/POS of StarPRNT om tekst, stijlen, QR-codes of barcodes te printen. Niels maakte de ReceiptPrinterEncoder library, waarmee je ESC/POS- of StarPRNT-commandos kunt bouwen in de browser of via Node.js. Printen in de browser werkt via WebUSB, WebSerial of WebBluetooth — maar alleen in Chromium browsers, en netwerkprinters werken daar niet direct. Vanaf een Node-server heb je meer controle met bijv. NetworkReceiptPrinter.

Wat neem ik mee

  • Niels zijn tool maakt printen veel makkelijker.

De presentatie in 1 zin

Alternatieven missen of zijn niet goed genoeg, waardoor mensen met een beperking belangrijke informatie kunnen missen.

Samenvatting

Veel content mist goede tekstalternatieven, zoals ondertitels bij video’s, transcripties bij podcasts, of duidelijke alt-teksten bij afbeeldingen. Dit zorgt ervoor dat bijvoorbeeld slechthorenden, doven en slechtzienden niet volledig kunnen meedoen of de boodschap missen. Het is dus essentieel om altijd goede alternatieven te bieden zodat iedereen de inhoud kan volgen en gebruiken.

Wat neem ik mee

  • Alt-teksten bij afbeeldingen zijn vaak te kort, nietszeggend of zelfs helemaal afwezig.
  • Ondertiteling en transcripties voor video en audio worden regelmatig vergeten, waardoor de content ontoegankelijk wordt.

De presentatie in 1 zin

Nienke verbeterde de GVB-app door toegankelijkheid centraal te stellen, waardoor de app beter werkt voor mensen met een beperking.

Samenvatting

Tijdens haar afstudeerproject bij CMD ontdekte Nienke dat de GVB-app slecht toegankelijk was voor mensen met een beperking. Ze ontwierp een nieuwe, toegankelijkere versie die GVB zo goed vond dat ze haar aanbevelingen overnamen en haar zelfs aannamen. Dit laat zien dat echte toegankelijkheid meer is dan regels: het gaat om bruikbaarheid voor iedereen, met kleine aanpassingen die een groot verschil maken.

Wat neem ik mee

  • Betrek altijd gebruikers met beperkingen bij het ontwerp om waardevolle feedback te krijgen.
  • Begin met toegankelijkheid vanaf het begin en test met diverse gebruikersgroepen.

De presentatie in 1 zin

Tijdens deze weekly nerd werd er verteld over voice-gestuurde Ai's en een twitter-bot die gebruikt word door onlyfans.

Samenvatting

Dave Bitter, teammanager front-end bij agency iO, vertelde over hun aanpak waarbij ‘experience everything’ centraal staat. Van digitale nomaden gaan we naar always-on gebruikers, die via allerlei touchpoints en apparaten benaderd worden. Ze werken met real-time data en AI-oplossingen, zoals Laika, een AI-bot die scholen gebruiken voor social media interactie. Ook sprak hij over voice interfaces via web API’s en tools als ElevenLabs. Verder kwamen een Twitter follow-bot van Steve Jonk en testautomatisering bij Miele door Clarke Verdel aan bod.

Wat neem ik mee

  • Voice interfaces worden steeds belangrijker – natuurlijke interactie via AI en spraak-API’s.
  • Laika is een AI-socialbot die echt in gesprek gaat en al door scholen wordt ingezet.
  • Testen van componenten moet zoveel mogelijk lijken op hoe een echte gebruiker ermee omgaat (Clarke Verdel).

De presentatie in 1 zin

Q42 ontwikkelt technologie die werkt voor mensen, met toegankelijkheid, innovatie en gebruiksvriendelijkheid als vaste kernwaarden..

Samenvatting

Sinds 2000 werkt Q42 aan digitale producten die het dagelijks leven makkelijker en slimmer maken. Ze zijn betrokken bij impactvolle projecten zoals HEMA, het Rijksmuseum en Philips Hue, en zetten daarbij stevig in op toegankelijkheid. Toegankelijk denken zit diep in hun cultuur: ze stellen zichzelf steeds vier vragen die inspelen op beperkingen in zien, horen, bewegen of begrijpen. Vanuit hun overtuiging dat technologie voor iedereen moet werken, bereiden ze zich actief voor op de European Accessibility Act die vanaf 28 juni 2025 geldt. Hun werkwijze wordt versterkt door interne innovatieprogramma’s zoals WOOtcamp en passiedagen, waarin ruimte is om te experimenteren met nieuwe ideeën.

Wat neem ik mee

  • Q42 benadert toegankelijkheid structureel door zich steeds af te vragen: wat als iemand iets niet goed kan zien, horen, bewegen of begrijpen?
  • Met projecten als Sensemath en partners zoals Hack the Planet laten ze zien dat technologie ook maatschappelijke impact kan maken.

De presentatie in 1 zin

Marieke legt uit hoe belangrijk digitale toegankelijkheid is voor een grote groep mensen, wat ze in haar werk doet, en wat de gevolgen kunnen zijn als organisaties niet voldoen aan de regels.

Samenvatting

32% van de Nederlanders heeft een permanente beperking, en daarnaast zijn er ook tijdelijke en situationele beperkingen. Marieke helpt als expert met audits, advies en trainingen om digitale producten toegankelijker te maken. Vanaf 28 juni geldt de European Accessibility Act, met boetes tot €20 miljoen voor niet-naleving.

Wat neem ik mee

  • Veel mensen hebben beperkingen – 5,5 miljoen Nederlanders hebben een permanente beperking, en daarnaast spelen tijdelijke of situationele factoren (zoals zon op je scherm) ook een rol.
  • Nieuwe wetgeving – De European Accessibility Act verplicht toegankelijkheid voor o.a. webshops (met uitzonderingen), en niet-naleving kan hoge boetes opleveren.

De presentatie in 1 zin

Miriam benadrukt dat het web flexibel en gebruikersgericht moet zijn, waarbij de voorkeuren van de gebruiker altijd voorop staan.

Samenvatting

Het web is niet zoals print – we hebben minder controle, maar juist meer mogelijkheden. Gebruikers moeten zelf hun voorkeuren kunnen instellen, en bij conflicten in stijlen (zoals in de CSS-cascade) moet de gebruiker het laatste woord hebben.

Wat neem ik mee

  • Gebruikerscontrole boven alles – In tegenstelling tot print, moet het web aanpasbaar zijn, en gebruikers moeten hun eigen instellingen kunnen kiezen. rol.
  • Het web is voor iedereen – Flexibiliteit en aanpasbaarheid zijn cruciaal, zodat het web toegankelijk en bruikbaar blijft voor verschillende behoeften.