Weekly Nerds

Stop Using JS for That

Kylian Valkhof |

Waarom gebruiken we nog JS?

Kylian Valkhof is de founder van Polypane een desktop browser speciaal ontwikkeld voor webontwikkelaars. The Rule of Least Power: Hij verteld over dit principe het betekent dat je altijd moet kiezen voor de minst complexe oplossing voor een probleem. Hij verteld over het verschil tussen declaratieve talen zoals HTML en CSS en imperatieve talen zoals JavaScript. Declaratieve talen geven aan wat het eindresultaat moet zijn en imperatieve talen zeggen stap voor stap wat er moet gebeuren. HTML en CSS laten de browsers het moeilijke werk doen waardoor er meer flexibiliteit en fouttolerantie wat resulteert in een soepelere werking van websites. Hierna geeft hij wat praktische voorbeelden van HTML en CSS technieken. Aangepaste checkboxes: deze kun je stylen zonder JS met bijvoorbeeld pseudo-element zoals ::before. :target om te animeren op scrollen, accordion in HTML, het gebruik van dialog ipv alerts, starting style om iets te animeren wat nog niet op de pagina is. The parent selector :has wat eigenlijk werkt als een if statement. Ook ging het nog over accesibility met bijvoorbeeld prefers-reduced motion.

Reflectie

Ik heb veel geleerd over de mogelijkheden van HTML en CSS en ik begrijp ook waarom het beter is om dingen zo simpel mogelijk op te lossen. Ook was dit de eerste keer dat ik over imperatieve en declaratieve talen had gehoord. Ik ben benieuwd wat ik met deze HTML functies kan doen en wil ze ook graag gaan toepassen

IO Digital 3, How do you automate testing your components like a real user?

Clarke Verdel |

How do you automate testing your components like a real user?

Clarke Verdel is een Senior Front-end engineer en hij vertelde over het automatisch testen van componenten die je hebt gemaakt. Static tooling is een manier om fouten op te vangen voordat je de app draait dit is bijvoorbeeld Typechecks door typescript of Javascript wanneer je bijvoorbeeld een string meegeeft waar een nummer verwacht is. Linting tools kunnen hier ook bij helpen. Vervolgens vertelde hij over verschillende testniveaus: Component/unit testing hierbij gaat het om kleine stukjes code of componenten. Integration testing hierbij kijk je of meerdere componenten goed samenwerken en tot slot End to End testing hierbij test je hoe de hele applicatie werkt in een echte browser dus niet op de localhost.

Reflectie

Dit was erg interessant omdat het wat meer inzicht gaf in hoe een developer zowaar te werk gaat. Testing is niet iets wat wij op school doen maar wat toch erg belangrijk is als je gaat werken en daarom ga ik me hier ook meer in verdiepen.

Q42

Q42 |

Q42

Deze weekly nerd was op bezoek bij Q42. Q42 maakt digitale producten die het leven van mensen leuker, slimmer en makkelijker maakt. Q42 is opgericht in 2000 en er zijn ondertussen 100 medewerkers waarvan 80+ developers ze zijn sinds 2022 lid van Eidra. Ze hebben een aantal grote klanten zoals Hema ,Rijksmuseum, Philips Hue, Wie is de Mol App, Hack te Planet. Er kwam een quote voorbij van Darice waarvoor ik tijdens de minor een project hebt gemaakt: Im not disabled, the world disables me. Ze lieten twee projecten zien namelijk Sensemath wat een project was waarbij ze grafieken lieten horen doormiddel van verschillende frequenties. Oculi Mundi was een speciale website over een collectie landkaarten. Hier hebben ze geavanceerde css technieken gebruikt maar ze hebben het toch voor elkaar gekregen om de website accesible te maken.

Reflectie

Weer een erg gaaf bedrijf waar de focus ligt op accesibility. Ik vond vooral Sensemath erg interessant hoe ze op zo een creative manier iets accesible hebben kunnen maken.

Geld verdienen met Project Fuga

Niels Leenheer |

Geld verdienen met Project Fuga

Niels Leenheer is mede oprichter van Salonhub dit zijn kapsalons en een reserveringssysteem. Hij vertelde over project Fuga dit is iets waarme je via het web kassa's en bonnenprinters kan aansturen. Hij liet een demo zien en het werkte allemaal erg goed. De bonnenprinters werkte via een API waar je de informatie heen moet sturen in een bijzondere taal die nog ouder is dan HTML. Ascii is de taal van printers.

Reflectie

Ik vond deze weekly nerd lastig om te volgen vanwege de hoeveelheid techniek maar wel interessant ik weet alleen niet of ik dit verder kan gebruiken in de minor

Hacken met e-waste

Rosa Schuurmans |

Hacken met e-waste

Rosa is een oud cmd student die nu werkt bij Hackers United waar ze zich bezig houdt met circuit bending en hardware hacking. Circuit bending houdt in dat je oude hardware kan hacken om het iets anders te laten doen. De apparaten van vroeger zijn een stuk makkelijker om te hacken apparaten van tegenwoordig zijn te goed beveiligd. DIY ethos. Ze was ook van van de 70e jaren punk movement dit pastte in de stijl van wat ze deed.

Reflectie

Ik vond het gaaf om te zien wat je allemaal kan doen met oude hardware ik heb zelf ook wel eens met oude computers gespeeld toen ik jonger was en door deze weekly nerd wil eigenlijk mijn oude computer weer uit de kast halen.

Digitale toegankelijkheid

Marieke de Hoop |

Digitale toegankelijkheid

Digitale toegankelijk is het bedrijf. 32% van de Nederlanders heeft een permanente beperking meer dan 5.5 miljoen mensen. Er zijn natuurlijk ook tijdelijke beperkingen. Situationele beperkingen ( Luide muziek volle armen zon op je scherm accent overprikkeld ). Ze liet een website zien waarop je kon testen hoe goed jij het verschil tussen groen en blauw kon zien deze website heette ismy.blue. Ze vertelden over wat je voor werk moet doen als je een WGAC auditor bent. Audits (onderzoeken ), Consultancy (advies), Project management ,Trainingen/cursussen ,Toegankelijk ontwikkelen ,Producten toegankelijk maken. Ook vertelde zo over een aantal tools om toegankelijkheid te testen. Stylus (aanpassen css), Colour Contrast Checker (contrast checken). Als laatste legde ze precies uit voor wie de nieuwe WCAG wetten gaan gelden. Wetgeving en handhaving. European Accessibility Act (EAA) 28juni 2025 gaat deze in. Dit geldt alleen voor nieuwe content dus alles wat daarna online komt Uitzonderingen :B2B, Kleiner dan 10 werknemers, Minder dan 2 miljoen omzet per jaar. Onevenredige last: Als de last te groot is dan hoeft het niet dus als het teveel moeite kost om dat op te zetten.

Reflectie

Veel van deze informatie hebben we al eerder tijdens de weekly nerds gehad toch zijn de tools die ze noemde erg handig voor accesibility en ook was het interessant om te horen voor wie de regels precies gaan gelden.

Pay the Web Forward with Web Monetization

Peter-Paul Koch |

Web Monetization

Peter-Paul Koch kwam vertellen over een nieuwe manier om online content te financieren. Hij vertelde dat het huidige systeem waarbij de content gratis is en websites afhankelijk zijn van advertenties niet goed werkt en dat het afkomstig is uit de jaren 90. Volgens hem is de content die er nu online staat laag van kwaliteit en is het ook moeilijk om mensen te motiveren om goede content te maken. Daarom heeft hij een oplossing bedacht in de vorm van een extension die mensen downloaden en waar de gebruiker dan zelf bepaald hoeveel hij wil betalen per uur of per maand voor web content. Vervolgens worden dan de websites die deelnemen automatisch kleine betalingen op basis van hoelang de gebruikers op hun website zijn. Daarna vertelde hij ook nog wat over de technische aspecten de extensie zou gebruik maken van een digitale portomonnee die dan weer communiceert met een bank. Ze waren al bezig met integratie in grote browsers zoals Firefox en mogelijk ook met Samsung en Microsoft. Het ging vervolgens ook over de privacy gevoeligheid omdat dit natuurlijk ook meespeelt de wallet moet dan natuurlijk weten op welke website je bent geweest en dit staat dan vervolgens ook gelinkt aan je bank waardoor dit allemaal openbaar is.

Reflectie

Ik snap het idee achter Web Monetization maar ik geloof er zelf niet in. Ik denk dat het onmogelijk is om gebruikers te laten betalen voor content die voorheen gratis was en ook het stukje privacy is denk ik voor veel mensen een te hoge drempel om overheen te gaan. Het is een leuk idee maar ik denk dat je alle huidige systemen zoals advertenties etc niet kunt vervangen.

GSAP animations

Cassie Evans |

GSAP

Deze weekly nerd ging over GSAP voorafgaand aan de weekly nerd had ik wel eens gehoord van GSAP maar heb ik mezelf er nog nooit in verdiept. Ik denk dat Cassie dacht dat wij allemaal al iets verstand hadden van GSAP want het ging erg snel. GSAP is een animation library die het dus makkelijker moet maken om dingen te animeren we moeten het zien als een soort gereedschapskist. Ze vertelde over verschillende soorten animaties: een tween wat een enkele animatie is en een timeline wat meerdere animaties achter elkaar zijn. Toen vertelde ze over wat handige hulpfuncties voor animaties: Gsap.utils, Utlis.mapRange, Utils.wrap, Utils.pipe. Daarna ging het over easers voor animaties dit bergeep ik iets beter omdat ik zelf aan video-editing doe en hierbij de animaties ook ease ze vertelde dat er een tool is om te kijken hoe verschillende eases eruitzien deze tool heet Ease Visualizer.

Reflectie

Helaas ging deze weekly nerd net wat te snel voor mij de combinatie van technieken die ik zelf nog nooit had gebruikt en de snelle uitleg waren iets te veel. Ik denk wel dat GSAP heel gaaf is en ik hoop het in de toekomst ook te gaan gebruiken in projecten want het kan echt een hele hoop toevoegen. Ik denk alleen dat ik daarvoor eerst moet ontdekken wat er allemaal mogelijk is in CSS zonder al naar GSAP te gaan.

Design for flexibility

Nils binder |

Design for flexibility

Nils was bij ons in de les als gastdocent en heeft ook een weekly nerd gegeven hierbij ging het over designen voor flexibiliteit. Hij had het hier over dat websites op alle vormen schermen mooi moeten zijn en dus niet altijd vanuit mobile first. Hij zei dat alle websites er tegenwoordig hetzelfde uitzien door de 12-koloms grid wat wordt gebruikt in design programm's zoals Figma dit zorgt op grotere schermen voor veel white-space. De oplossing hiervoor is bijvoorbeeld container-queries om de layout te veranderen op verschillende groottes schermen.

Reflectie

Ik vond de uitleg van Nils erg goed en het heeft me zeker aan het denken gezet. Het deed me ook beseffen dat het eigenlijk best raar is om op een groter scherm zoveel witte ruimte over te laten terwijl je er juist creative dingen mee kan doen. Ik ga in de toekomst bij het designen verder kijken dan wat altijd de standaard is.

Declarative Design

Jeremy Keith |

Declarative Design

Jeremy Keith kwam vertellen over de verschillen tussen declarative en imperative programmeren. Bij een eerdere weekly nerd is hier wat over verteld en dit vond ik erg interessant. Declarative programmeren is vertellen wat het eindresultaat is zonder precies te zeggen wat de tussenstappen moeten zijn zoals bijvoorbeeld bij CSS of SQL dit is makkelijk te lezen. Imperative progammeren is het precies beschrijven van elke stap om tot een resultaat te komen zoals bij JavaScript, C, C++ als er een fout is dan werkt alles niet meer. Maar bijvoorbeeld in CSS kan je ook onderscheid maken tussen deze manieren van coderen door bijvoorbeeld schalende waardes te gebruiken zoals calc en clamp. Hij vertelde dat het ook zo werkt bij organisaties waar je gaat werken en dat je daarom goed moet nadenken over hoe jij het liefste werkt omdat dit anders tot botsingen kan lijden. "Javascript should only do what Javascript can do" : dus je moet alles met html en css doen tot je iets echt niet kant doen en dan pas naar Javascript gaan.

Reflectie

Deze weekly nerd was erg interessant en ik ga zeker nadenken over hoe ik het liefst werk imperative of declarative. Ik heb naast de weekly nerd ook nog een goed gesprek gehad met Jeremy Keith in de les toen hij wat uitleg ging geven over Javascript

Practical fixes for common WCAG failures

Erik Kroes |

Practical fixes for common WCAG failures

Erik kwam vertellen over practische oplossingen voor problemen die zich vaak voordoen bij WCAG dit staat voor Web Content Accessibility Guidelines. Deze regels moeten bedrijven van 2025 gaan volgen en hij kwam veelvoorkomende problemen uitleggen en de oplossingen hiervoor geven. Hij werkt zelf bij IDEA11Y waar ze werken aan Inclusive design and accessibility. Accessibility = a accessible product that's usable by everyone, including people with disabilities. Keyboard = Pressing the tab key should take you to every interactive element in an intuitive order. Pressing Shift+Tab should take you the opposite way. If you can reach and use every bit of functionality, your of to a good start. Issues = No skip link(sommige dingen overslaan), Uncontrolled focus state(duidelijk aangeven waar je ben), div role="button" slechte html zorgt voor slechte accessibility. Contrast = Alles moet een goed contrast hebben zodat dingen zichtbaar zijn ook zodat je bijvoorbeeld in de zon dingen kan zien. How to test contrast = User interface components and states should have a contrast ratio of at least 3:1. Measure this ratio against their surrounding colors. The contrast ratio of large tekst(at least 24px, or at least 19px and bold) should be 3:1 or more. All other text should be at least 4:5:1. These are minimum requirements, not goals Common issues = Placeholders, Branding colours, States ( button disabled ) Alternatives = How to test for alternatives = offer captions for video. Offer a transcript for podcasts. For images, offer tekst alternatives. Text alternatives should convey the purpose of the image or content of the image. A decorative image needs no alternative Most common issues = - Images in buttons or links Sizing = How to test sizing Compare a mobile phone to a tablet, a laptop or a PC. No screen size is the same. Make sure that what you make offers the same content and functionality to all sizes. Let people experience it at whatever size they want or need. Issues = - Design not made for 320 pixel width External content

Reflectie

Ik begin steeds meer te begrijpen hoe belangrijk accesibility op het web eigenlijk is het komt tijdens meerdere weekly nerds naar voren en ook bij deze weekly nerd was het erg interessant. Ik moet toegeven dat het mij eerst niet veel interesseerde maar om nu bijvoorbeeld praktische oplossingen te zien is het al een stuk interessanter.

Thinking outside of the accessibility box

Nienke de Keijzer |

Thinking outside of the accessibility box

Deze weekly nerd ging ook over accesibility dit was een student die haar afstudeerproject bij GVB had gedaan en erachter kwam dat ze nog helemaal niet zo goed waren in accesibility. Ze vertelde over de verschillende regels van de WCAG en EU-wet en een nieuwe Nederlandse wet. Het denken over accesibility begint al in de design fase ga in gesprek met de gebruiker die je wil helpen. Test het product met mensen die zowaar blind zijn bijvoorbeeld op deze manier past het product veel beter bij de eindgebruiker.

Reflectie

Deze manier van designen is zeker iets wat ik ook wil gaan doen in de toekomst en het klinkt ook erg logisch. Tevens erg gaaf dat ze met haar afstudeerproject een nieuwe functie bij de GVB heeft gemaakt.

IO Digital 1

Dave Bitter |

IO digital

In deze weekly nerd vertelde Dave over het bedrijf waar we op bezoek waren IO Digital. IO digital is een blenden agency bestaand uit Designers, Marketing, Content en Technologie. Hij vertelde over de gebruikers van nu namelijk de always on gebruikers. Ze hebben veel grote opdrachtgevers zoals bijvoorbeeld Amnisty International maar ook Vans het schoenen merk. Hij vertelde ook over een interessant project Laika the worlds first teenager raised entirely by social media ( onderzoek naar de invloed van social media op een kind ) depressief zelfingenomen heel negatief. Daarna ging hij wat dieper in op een stukje technologie wat hij zelft had gemaakt: Voice recognition voor het eerst in 1950 -1960 in 1990 maakte het een grote sprong. 2000 kwam google met een software. -UseSpeechRecognition -Speechsynthesis(spraak door computer) -ChatGPT vertaalt het en geeft antwoord Use SpeechRecognition WEB API SpeechSynthesis WEB AOI Elevenlabs heeft een goede spraaksoftware maar het maakte het product slechter omdat er een extra Api werd er aan toegevoegd en dit duurde ff. Door de zinnen van de gebruiker op te breken in stukjes werd het sneller en dus beter. Hij liet een demo zien van dit project en dat zag er erg gaaf uit.

Reflectie

Ik vond deze weekly nerd erg gaaf het is een mooi bedrijf en als ik al geen stage had gevonden had ik hier zeker gesoliciteerd. De demo die hij liet zien was ook erg gaaf en de uitleg die hij gaf was erg duidelijk waardoor ik het idee kreeg dat ik zelf ook zo iets kon maken.

IO Digital 2, Twitter follow bot and follow scraper

Steve Jonk |

Twitter follow bot and follow scraper: a journey of ups-and-downs

Steve Jonk vertelde over een opdracht die hij had gemaakt waarin hij een follow bot en follow scraper moest maken. Hij ging dieper in op de technische aspecten: Deze bot volgt mensen en ontvolgt ze weer. Drie objectieven: Haal alle volgers op van een account, Sla die ID's op in een database, Volg random deze acounts. hiervoor gebruikt hij de volgende programma's: N8N workflow autimation, Puppeteer Browser animation, Twitter API, Postgress Database, Docker containerisation en Ubuntu Server. Tijdens het process liep hij tegen wat problemen aan namelijk twitter blokkeert het automatisch volgen en ontvolgen de API van twitter is erg simpel tenzij je heel veel geld betaald en als twitter door heeft waar je mee bezig bent wordt je snel gebanned.

Reflectie

Een erg technische weekly nerd maar wel interessant. Ik heb het redelijk kunnnen volgen en misschien dat ik verder ga kijken naar Docker dit is namelijk iets wat ik ook tijdens mijn stage voorbij heb horen komen.