Visual Thinking
Een verouderde Svelte 4-applicatie ombouwen naar Svelte 5, met de focus op snelheid, toegankelijkheid en een koppeling met de Hygraph API.
De vraag
De website van Visual Thinking draaide op verouderde code en laadde traag. Ook ontbraken interactieve functies, zoals filteren zonder de pagina te herladen en een werkende like-knop.
Mijn rol
Ik werkte in een team als frontend developer. Ik was verantwoordelijk voor de overstap naar Svelte 5, het verbeteren van de laadsnelheid, het reviewen van code via pull requests op GitHub en het bouwen van de koppeling waarmee likes worden opgeslagen in Hygraph.
Ontwerp & ontwikkeling
We werkten volgens de Development Lifecycle, met een projectbord op GitHub, MoSCoW-prioritering en dagelijkse stand-ups.
Ik begon met een grote opruimslag: ik zette de code over van Svelte 4 naar Svelte 5, inclusief de nieuwe runes.
Bij een performance-audit met Lighthouse en WebPageTest ontdekte ik dat één font van Adobe de site vijf seconden vertraagde. In overleg met de opdrachtgever heb ik het vervangen door een snellere oplossing.
Voor de like-knop maakte ik eerst Crazy 8-schetsen in Procreate. Via een HTML-breakdown werkte ik die uit tot een wireframe in Figma, en daarna bouwde ik hem in de code.
Het resultaat
Een snelle, toegankelijke Svelte 5-applicatie met nette codeafspraken. Door het nieuwe font ging de PageSpeed-score van 74 naar 99. De like-knop werkt en praat met de Hygraph API via GraphQL.
Wat ik leerde
Verouderde code bijwerken en afhankelijkheden ontwarren bij een overstap naar een nieuwe versie kost veel uitzoekwerk. Maar als je ziet hoeveel sneller de site voor gebruikers wordt, is dat speurwerk het helemaal waard.