Weet je dat gevoel wanneer je weken ergens aan werkt en het dan ineens… klikt? Vandaag was zo’n dag.
Van chaos naar structuur
Ik begon deze sessie met één groot HTML-bestand van 2000+ regels. Hier schaam ik me een beetje voor, maar zo was het nu eenmaal gegroeid. Alles door elkaar: styling, logica, data.
Vier uur later? Netjes opgedeeld in ES Modules. Elk onderdeel in zijn eigen bestand. Zoals je kledingkast opruimen – je weet precies waar alles ligt.
npm run dev # En het werkt gewoon
PWA: makkelijker dan ik dacht
Service Workers klonken altijd eng. “Offline support” leek iets voor grote teams met veel tijd. Maar met Vite’s PWA plugin was het letterlijk één import:
import { VitePWA } from 'vite-plugin-pwa'
Dat was het. Nu werkt de app offline. Gebruikers kunnen hem installeren op hun telefoon. Het voelt als magie, maar het is gewoon goede tooling.
Van 51% naar 95% toegankelijkheid
Dit is waar ik trots op ben.
De app begon met emoji’s als iconen (🏃 voor beweging, 💧 voor water). Schattig, maar een screen reader leest ze voor als “running person” of helemaal niet. Nu zijn het echte SVG iconen met beschrijvende labels.
En die privacy modal die opsprong bij het eerste bezoek? Weg. Vervangen door een inline welkomstscherm. Modals zijn sowieso vervelend, maar voor screen reader gebruikers zijn ze een nachtmerrie.
Wat ik hiervan leerde
Modules zijn geen luxe. Ik dacht lang dat het “overkill” was voor een klein project. Fout. De refactor kostte tijd, maar nu kan ik eindelijk tests schrijven zonder gek te worden.
Toegankelijkheid maakt het beter voor iedereen. Die focus indicators die ik toevoegde voor keyboard navigatie? Blijken ook fijn als je gewoon met je laptop op de bank zit en geen muis wilt pakken.
Soms moet je durven opruimen. Acht issues gesloten vandaag. Niet door nieuwe features toe te voegen, maar door de fundering goed neer te zetten.
Phase 0: done. Nu begint het echte bouwen.