Vasilas van Gemert

Vasilas van Gemert is docent CMD (Communication and Multimedia Design) en houdt van creatieve, speelse en gekke projecten. Zijn website, https://vasilis.nl, toont zijn werk, waarbij hij aanmoedigt om onzin en plezier te omarmen als iets nuttigs. Hij gelooft in de waarde van het maken van ongebruikelijke en interessante dingen. Bijvoorbeeld, de poppetjes op zijn website komen uit een door hem zelfontworpen lettertype. Op de pagina https://vasilis.nl/flipping-things/ toont hij de achterkant van een schilderij, een grappig concept geïnspireerd door een foto die hij van een Deens museum ontving. Daarnaast heeft hij een pagina over zijn liefde voor het maken van klokken, zoals op https://vasilis.nl/clocks, waar hij klokontwerpen deelt die bewegen, wat de kijker boeit door de dynamiek. Een ander creatieve en onconventionele website die hij noemt is https://sachavonbose.nl/tekeningen/, die haar kunst op een speelse en fantasierijke manier toont. Wat betreft toegankelijkheid benadrukt Vasilas het verschil tussen theoretische toegankelijkheid en echte toegankelijkheid. Hij benadrukt het belang van rekening houden met hoe screenreaders websites lezen. Dit betekent dat je sites moet ontwerpen met een goed begrip van toegankelijkheid voor mensen met visuele beperkingen, zodat alle elementen van een site bruikbaar zijn voor iedereen. Kortom, Vasilas moedigt aan om buiten de conventionele ontwerpgrenzen te denken en speelse, boeiende en toegankelijke werken te maken.

Nicolas Garnier

Nicolas Garnier is een onafhankelijke creatieve ontwikkelaar die in 2012 begon met ontwikkelen en in 2018 besloot te freelancen. Hij werkt voor bureaus, productbedrijven en start-ups. Als creatieve ontwikkelaar combineert hij technische vaardigheden met een oog voor creativiteit. Hij gebruikt verschillende tools om creatieve en technische uitdagingen op te lossen, zoals JavaScript, CSS, WebGL, Processing, Unity, GenAI en LLM. Zijn werk omvat websites, apps en installaties, waarbij de kern draait om code, design, beweging en interactiviteit. Volgens Nicolas kan creativiteit en interactiviteit helpen om beweging te creëren door: - Anticipatie te creëren - Het verhaal te ondersteunen en de sfeer te zetten - De gebruiker te betrekken - Een ontwerp- of technische uitdaging op te lossen Zijn portfolio bevat onder andere projecten zoals Vita Architecture, Lief Amsterdam, Lifeworld, Loer Architecten, FilaExplore en Alcest Music. Zijn conclusie is dat je animatie moet zien als een verlengstuk van de oorspronkelijke intentie. Hij benadrukt het belang van open-minded zijn, jezelf afvragen wat de animatie toevoegt, feedback vragen en bereid zijn om veel tijd te investeren.

Emiel van Betsbrugge

Emiel van Betsbrugge is WebGL Developer bij Active Theory en heeft 8 jaar ervaring in de industrie. Hij deelt zijn proces voor het ontwikkelen van projecten, van pitch tot productie, met de volgende stappen:

• 1. Pitch: Dit is de fase waarin de basis wordt gelegd voor het project, inclusief wie, hoe, wanneer, wat en voor hoeveel. Betrokkenen zijn producers, sales, design directors en tech leads. Het kan een intensieve ontwerpfase zijn, vaak tegen betaling en mogelijk tegen andere agencies.
• 2. Discovery: Hier worden de grootste vragen beantwoord die tijdens de build opkomen. Dit is vaak optioneel als de klant en het bureau nog niet zeker zijn over samenwerking.
• 3. Design & Early Dev: In deze fase wordt het Statement of Work (SOW) goedgekeurd, worden schattingen gemaakt, en vindt sprintplanning en scaffolding (basis setup) plaats.
• 4. Development: Emiel volgt een flow die begint met snelle, onvolledige iteraties, gevolgd door meerdere fixrondes en vervolgens polish. Dit is de langste periode, waar het belangrijkste is om je eigen stijl te volgen, inchecken met design, en te focussen op "low effort, big impact" voor snelle resultaten. Testen en kritisch blijven is essentieel, en het is belangrijk geen concessies te doen op kwaliteit.
• 5. QA (Quality Assurance): In deze fase wordt de functionaliteit en taal gecontroleerd, de build geaccepteerd en de laatste polish uitgevoerd. Vaak wordt dit door een externe partij gedaan, en voorbereiding is essentieel.
• 6. Go Live: De lancering gebeurt met een druk op de knop, maar vaak niet meteen na het einde van de build.
• 7. Retrospective: Hier reflecteer je op het proces. Wat moet je blijven doen, stoppen, of starten? Het is ook de tijd om de boilerplate aan te passen en het proces te verbeteren.

Justus

Justus gaf een *We Love Web*-sessie over *digital gardening* en het *indie web*. Hij benadrukte het belang van het bezitten van je eigen web, omdat als je dat niet doet, het web jouw bezit. Justus heeft al zijn werk op zijn eigen platform staan, met meerdere back-ups, zodat hij altijd toegang heeft tot zijn werk, zelfs als er iets uitvalt. Hoewel Justus het web geweldig vindt, merkt hij op dat het tegenwoordig anders aanvoelt, en niet op een positieve manier. Vroeger leek alles mogelijk, maar nu voelt het anders. Hij herinnert zich nog de tijd waarin hij begon te coderen met programma's zoals de command prompt. Voor Justus markeerden platforms zoals Hyves en Facebook het einde van het authentieke web. Alles begon hetzelfde aan te voelen, en mensen stopten met het maken van hun eigen webpagina's. Hij moedigde mensen aan om te beginnen met 'tuinieren' op het web. Het hoeft niet perfect te zijn of meteen af, maar het draait om het proces. Net als bij tuinieren kun je steeds iets toevoegen, bijsnoeien of zelfs verwijderen.

Dave Bitter

Dave Bitter presenteerde op 17 januari 2025 zijn app *Presi Parrot*, die gebruik maakt van spraakherkenningstechnologie om transcripties te genereren. Zijn interesse in spraak naar tekst begon zeven jaar geleden. De app is volledig gebaseerd op webtechnieken en maakt gebruik van moderne spraakherkenning via API’s. Spraakherkenning heeft een lange geschiedenis, van de jaren vijftig tot de opkomst van slimme systemen zoals Alexa en Siri in 2010. Tegen 2020 is het mogelijk om transcripties te genereren uit verschillende bronnen, zoals video's en spraak. De app werkt door te controleren of spraakherkenning wordt ondersteund door de browser of het apparaat, en maakt gebruik van ingebouwde browserfuncties om stemmen op te halen en aan te passen. Voor visuele ondersteuning wordt technologie zoals 3JS ingezet. Een belangrijke functie is het ophalen van stemmen via API’s zoals Eleven Labs, hoewel dit een vertraging kan veroorzaken door cloudverwerking. Dave benadrukte het belang van prestaties en een goede gebruikerservaring voor het succes van een app. Hij legde ook uit dat oudere technologieën een solide basis vormen voor moderne innovaties, en wees op nieuwe mogelijkheden zoals Google’s Project Fugu, die webtechnologieën verder uitbreiden voor de ontwikkeling van complexe webapplicaties.

Dion Pieters

Killian Valkhof

Het Verhaal van Kilian en de Ontwikkeling van Polypane. Vroege Begin en Ondernemerschap. Kilian begon al op jonge leeftijd met webontwikkeling. Op zijn 12e bouwde hij zijn eerste website met FrontPage 2000 en verdiende geld via advertentiebanners die 15 cent per klik opleverden. Dit was zijn eerste ervaring met online inkomsten. Op zijn 16e richtte hij zijn eigen bedrijf op, waarin hij websites bouwde voor anderen. Hij maakte honderden websites en leerde zo de webtechnieken van die tijd. In deze periode begon hij ook met het testen van websites op verschillende apparaten. Toen de iPhone werd geïntroduceerd, ontdekte hij het belang van responsive web design en verdiepte zich verder in het bouwen van websites die goed werkten op verschillende schermgroottes. Eerste Software en Tools. Naast websites bouwen, ontwikkelde Kilian verschillende tools om zijn werk efficiënter te maken: - Trimage: Een desktopapplicatie om afbeeldingen te comprimeren. - CSS-libraries: Herbruikbare stijlbibliotheken voor snellere websiteontwikkeling. - JavaScript-grafiektool: Een tool om visuele grafieken te genereren. - F.lux (Commandline tool in Python): Een tool die het scherm een warmere kleur geeft afhankelijk van het tijdstip van de dag, vergelijkbaar met de bekende F.lux-app. - FromScratch: Een notitie-app waarin alles automatisch wordt opgeslagen zonder dat de gebruiker op ‘opslaan’ hoeft te klikken. Door voortdurend kleine projecten te ontwikkelen en deze steeds complexer te maken, bleef hij zichzelf verbeteren. Het Ontstaan van Polypane. Voor het ontwerpen van websites gebruikte Kilian vroeger Sketch, een design-tool. Toen Sketch een functie introduceerde om pagina’s op verschillende schermgroottes te tonen, realiseerde hij zich hoe waardevol dit was voor ontwikkelaars. Dit idee leidde uiteindelijk tot Polypane. De eerste versie van Polypane was een persoonlijke tool die hij voor zichzelf maakte om zijn werk als webontwikkelaar makkelijker te maken. Al snel merkte hij dat het testen van websites efficiënter werd en dat het een waardevolle toevoeging kon zijn voor andere ontwikkelaars. Van Persoonlijk Project naar Professioneel Product. In 2019 was Kilian werkloos en besloot hij zijn tijd te besteden aan Polypane. Hij ontwikkelde het verder en op 14 mei 2019 lanceerde hij Polypane 1.0, niet langer als gratis tool maar als een commercieel product. Ondanks dat anderen probeerden om vergelijkbare browsers te ontwikkelen, stopten zij uiteindelijk, terwijl Polypane bleef groeien. Kilian voegde regelmatig nieuwe functies toe en gebruikte constant **feedback van gebruikers** om verbeteringen door te voeren. Innovaties en Kenmerken van Polypane. Een van de eerste feedbackpunten die hij ontving, was dat de vensters in Polypane niet gesynchroniseerd mee scrolden. Zelf gebruikte hij een tool die dit wel kon, maar veel andere ontwikkelaars hadden die niet. Daarom bouwde hij deze functie in, zodat alle vensters tegelijk konden scrollen. Elke maand werden nieuwe features toegevoegd. Enkele belangrijke kenmerken van Polypane zijn: - Dark mode - Toegankelijkheidscontroles - Focusvolgorde-analyse - Een ingebouwde element-inspector** (die onafhankelijk werkt van Chrome’s DevTools) - Een JSON-viewer - Ondersteuning voor browserextensies - Console.img-functionaliteit (voor het debuggen van afbeeldingen in de console) -Error messages die ontwikkelaars helpen bij debugging Technologieën achter Polypane. Om Polypane te ontwikkelen, maakte Kilian gebruik van verschillende technologieën: - Electron: Voor het bouwen van de desktopapplicatie. - React: Voor de interface van de browser. - JavaScript: Een groot deel van de browserfunctionaliteit moest hij zelf namaken. Daarnaast implementeerde hij complexe communicatieprocessen binnen de applicatie: - React state management - Inter Process Communication (IPC) - Message bus - Message ports - Chrome DevTools Protocol Andere Projecten. Naast Polypane heeft Kilian diverse side projects ontwikkeld, zoals: -SmashingMagazine Tool: Een tool om alle stijlen van een website op te halen, zoals kleuren, lettertypen, schaduwen en borders. - Fix Contrast: Een browserextensie die kleurcontrast verbetert. - Polypane Cloud: Een uitbreiding van Polypane. - Polypane voor iPad: Een nog in ontwikkeling zijnde versie van Polypane voor tablets. Het Belang van Side Projects. Kilian benadrukt dat het ontwikkelen van side projects essentieel is voor programmeurs. Dit helpt bij het verbeteren van vaardigheden en het opdoen van ervaring. Volgens hem is het belangrijk om uren te maken in code, omdat dit leidt tot meer kennis en uiteindelijk betere producten. Polypane Vandaag de Dag. Polypane bestaat inmiddels bijna 10 jaar en is een essentiële tool geworden voor webontwikkelaars wereldwijd. Kilian gebruikt geavanceerde analysetools om te zien welke schermen, knoppen en functies het meest worden gebruikt. Op basis van deze gegevens blijft hij de browser continu verbeteren. Zijn verhaal laat zien hoe een klein persoonlijk project kan uitgroeien tot een professioneel product dat wereldwijd wordt gebruikt. Met een combinatie van technische kennis, experimenteren, gebruikersfeedback en doorzettingsvermogen heeft hij Polypane ontwikkeld tot een krachtige tool voor webdesigners en ontwikkelaars.

Cassie Evans

GSAP (GreenSock Animation Platform) is een krachtige animatiebibliotheek waarmee je vrijwel alles kunt animeren op het web. Het is niet zomaar een tool, maar een creatief framework vol mogelijkheden. Cassie Evans presenteerde hoe je met GSAP verder kunt gaan dan eenvoudige tweens en echt indrukwekkende animaties kunt maken. De basis: Tweening en Timelines De kern van GSAP bestaat uit tweens, de basisbouwstenen van animaties. Een tween is een methode waarmee je een element (target) transformeert met een reeks parameters (vars). Wil je complexere animaties maken? Dan gebruik je timelines, waarmee je meerdere animaties achter elkaar kunt afspelen en synchroniseren. ScrollTriggers en Container Animations GSAP maakt het eenvoudig om animaties te koppelen aan scrollbewegingen met ScrollTrigger. Hiermee kun je bijvoorbeeld secties laten animeren terwijl de gebruiker scrollt. Een geavanceerde toepassing hiervan is Container Animation, waarbij je een scroll-trigger binnen een andere scroll-trigger plaatst. Dit opent de deur naar dynamische, interactieve layouts. Efficiënte animaties met QuickSetter en QuickTo Voor animaties die extreem vloeiend en performant moeten zijn, zoals cursorvolgers of bewegende objecten op basis van muisinput, biedt GSAP quickSetter en quickTo. Hiermee kun je waarde-updates optimaliseren en een soepele ervaring creëren zonder performanceproblemen. GSAP Utils: Handige hulpmiddelen GSAP bevat een verzameling handige functies onder GSAP Utils, zoals: • utils.random() – genereert willekeurige waarden binnen een bereik. • utils.mapRange() – schaalt een waarde van het ene bereik naar het andere. • utils.wrap() – maakt een reeks herhalende animaties of cyclische waarden. Deze utilities helpen bij het dynamisch genereren van animaties en interacties. Ease Visualizer en MatchMedia Om de perfecte timing en beweging te krijgen, heeft GSAP een Ease Visualizer, waarmee je easings kunt verkennen en aanpassen voor vloeiende overgangen. Daarnaast maakt matchMedia het mogelijk om responsieve animaties te maken die zich aanpassen aan verschillende schermformaten. Control Methods en Community Helpers Met control methods kun je de tijdlijn van een animatie beheren, zoals pauzeren, hervatten of terugspoelen. Bovendien biedt GSAP een reeks helperfuncties die vanuit de community zijn ontstaan, waardoor animaties nog flexibeler en efficiënter worden. Conclusie GSAP is veel meer dan alleen een eenvoudige animatiebibliotheek. Het biedt een complete toolkit waarmee je alles kunt animeren, van basisovergangen tot complexe interacties. Dankzij functies zoals ScrollTrigger, QuickSetter, GSAP Utils en MatchMedia is het een onmisbare tool voor moderne webanimaties. Wil je meer ontdekken? Check www.gsap.com en experimenteer zelf met de eindeloze mogelijkheden!

Niels leenheer

Niels Leenheer is al sinds 1994 actief op het web. Hij zet zich in voor het verbeteren van webstandaarden en werkt tegenwoordig bij een softwarebedrijf dat zich richt op kapsalons. Tijdens zijn lezing deelde hij zijn brede kennis over HTML, browsergedrag en het belang van veerkrachtige webontwikkeling.

Resilience in HTML vs JavaScript

Een belangrijk punt dat Niels maakte, is het verschil in fouttolerantie tussen HTML en JavaScript. HTML is ontworpen met veerkracht in gedachten. Je mag fouten maken in HTML – de browser probeert je fouten te herstellen. JavaScript daarentegen is veel strenger; fouten kunnen het uitvoeren van scripts direct stoppen.

Leren van anderen

Niels haalt inspiratie uit het werk van anderen. Hij kijkt regelmatig naar de broncode van websites om te leren hoe dingen gebouwd zijn en hoe technieken worden toegepast. Een simpele maar krachtige methode om jezelf als webontwikkelaar te blijven ontwikkelen.

Geschiedenis & Browsergedrag

Hij verwees naar Tim Berners-Lee, de grondlegger van het World Wide Web. Oorspronkelijk was het idee dat een browser niet alleen zou weergeven, maar ook zou bewerken — een combinatie van browser en editor in één.

Browsers gaan op een interessante manier om met HTML. Tags die ze niet herkennen, worden genegeerd qua functionaliteit, maar komen wel gewoon in de DOM terecht — alleen zonder betekenis of effect.

Een voorbeeld hiervan is de <blink>-tag, die inmiddels geblokkeerd is in moderne browsers. De <marquee>-tag wordt technisch gezien nog ondersteund, maar het gebruik ervan wordt afgeraden.

Hoe browsers HTML verwerken

Browsers analyseren HTML stap voor stap, token voor token. Daarbij letten ze op:

• De tagnaam
• De attributenamen
• De attribuutwaarden

HTML is behoorlijk vergevingsgezind: zolang je tag begint met een gewone letter, zal de browser het doorgaans accepteren.

<noscript>: Wat als JavaScript uitstaat?

Het <noscript>-element in HTML wordt gebruikt om content te tonen aan gebruikers bij wie JavaScript uitgeschakeld is, of wanneer de browser geen ondersteuning biedt voor JavaScript. Alles wat binnen <noscript> staat, wordt alleen weergegeven als JavaScript niet actief is. Voor browsers is de instructie: “negeer alles in dit element als JavaScript wél werkt.”

Kalok Yeung

Een emotional interface is gericht op het opbouwen van een gevoel en beleving bij de gebruiker. Het doel is niet alleen functioneel ontwerp, maar ook het creëren van een persoonlijke en emotionele connectie.

Binding met de gebruiker

De gebruiker moet zich aangesproken voelen, zonder dat er per se geprogrammeerd wordt. Design, interactie en sfeer staan centraal.

Soft UI

• Zachte vormen en ronde hoeken
• Elementen lijken uit één geheel te bestaan
• Zachte schaduwen en subtiele kleurovergangen

Motion

• Beweging moet iets toevoegen aan de ervaring
• Decoratie alleen als het past bij het merk
• Herbruik elementen en laat ze vloeiend in elkaar overgaan

Alles clean en esthetisch

De interface moet visueel rustig en consistent zijn. Geen overdaad, maar duidelijke vormen, kleuren en typografie.

Sound

• Geluid bij scrollen
• Effecten bij klikken op knoppen
• Alleen gebruiken als het functioneel en subtiel is

Content

• Teksten schrijven in de vorm van berichten (menselijke toon)
• Bezoekersvragen direct en helder beantwoorden
• Complexe informatie simpel en visueel maken