Front-End Developer Theme Builder UI

Functieomschrijving

Voor ICTU zoeken wij een Front-End Developer Theme Builder UI. Je werkt aan een betere digitale overheid door samen met andere overheidsorganisaties te bouwen aan robuuste websites en webapplicaties.

Met de NL Design System aanpak verzamel je richtlijnen, componenten en voorbeelden om begrijpelijke, gebruiksvriendelijke en toegankelijke onlinedienstverlening voor de overheid mogelijk te maken. Als onderdeel van een multidisciplinair team draag je bij aan het NL Design System Kernteam en het Expertteam Digitale Toegankelijkheid.

Componenten en richtlijnen van het NL Design System zijn open source beschikbaar op GitHub en Figma. Zo zorg je ervoor dat iedereen deze kan inzetten voor toegankelijke websites en webapplicaties bij de overheid.

Samen met het Expertteam Digitale Toegankelijkheid bouw je concrete oplossingen die het voor overheidsorganisaties eenvoudiger maken om toegankelijke weboplossingen te realiseren.

Jouw opdracht is het ontwikkelen van een moderne front-end voor een gebruiksvriendelijke webapplicatie, waarmee overheidsorganisaties eenvoudig een toegankelijke huisstijl kunnen vastleggen en inzetten met het NL Design System.

Je draagt bij aan de verdere ontwikkeling van het NL Design System als overheidsbreed open source white-label design system en helpt zo de toegankelijkheid in Nederland te verbeteren met de tools die het expertteam ontwikkelt.

Jouw verantwoordelijkheden

• Ontwikkelen van de front-end van een webapplicatie waarin het visueel ontwerp van design system componenten aangepast kan worden via design tokens, waarbij gebruikers in real time het resultaat zien.
• Ontwikkelen van een interactieve stijlgids op basis van Design Tokens JSON, zodat ontwerpbeslissingen voor meerdere huisstijlen vastgelegd en gedeeld kunnen worden.
• Ontwikkelen van herbruikbare front-end webcomponenten volgens de NL Design System architectuur.
• Ontwikkelen van zeer complexe front-end webcomponenten zoals Combobox, dialogen met formulieren, Color Pickers voor diverse CSS kleuren, en een Color Picker op basis van screenshots van bestaande websites.
• Ontwikkelen van een gebruiksvriendelijke applicatie met “Undo” en “Redo”-functionaliteit, waarbij wijzigingen van de gebruiker via browser API’s worden opgeslagen.
• Ontwikkelen van validatieregels om de toegankelijkheid van een huisstijl te meten en de gebruiker hierbij te ondersteunen, evenals het controleren van de resultaten achteraf.
• Ontwikkelen van templates en patronen om te illustreren hoe alle design tokens samenwerken binnen een huisstijl.
• Ontwikkelen van een gebruiksvriendelijke user interface om design tokens uit een bestaande website te gebruiken via een REST API voor de Web Scraper.
• Verbeteren van de software op basis van feedback van toegankelijkheidsspecialisten, het NL Design System-kernteam en gebruikersonderzoek.
• Issues aanmaken voor kansen tot verbetering en Technical Debt in de Backlog van het project.
• Het in overleg met andere professionals bedenken en begeleiden van (online) workshops over het ontwikkelen van een toegankelijke huisstijl.
• Implementeren van automatische toegankelijkheidstests in Unit tests met Vitest, Playwright en Testing Library.
• Maandelijks up-to-date houden van code dependencies voor veilige en actuele templates.

In overleg met professionals uit het Expertteam Digitale Toegankelijkheid voer je activiteiten uit om templates, patronen en documentatie te valideren en uit te breiden door middel van:

• Tweewekelijkse sprint planningen.
• Indien nodig: refinements in een privé Slack Huddle van het Expertteam Digitale Toegankelijkheid.
• Indien nodig: Pull Requests van andere experts reviewen om vanuit je eigen expertise vroegtijdig feedback te geven.
• Voortgang delen in het privé Slackkanaal van het Expertteam Digitale Toegankelijkheid en de NL Design System Heartbeat.
• Publieke Slack Huddles om nieuwe aanpakken voor templates, patronen of componenten van NL Design System te bepalen.

Beoogde deelresultaten

• Templates en patronen opleveren per component om de verschillende verschijningsvormen van een huisstijl te testen.
• Geautomatiseerde tests ontwikkelen om de kwaliteit van de software te waarborgen.
• Publiceren van een open source npm package met herbruikbare webcomponenten om design tokens te implementeren of te demonstreren.
• Gefaseerde opleveringen van de website, beginnend met een minimum viable product (MVP), gevolgd door milestones zoals vastgelegd in de product backlog.

Eindresultaten

• Opleveren van een website met wizard om de huisstijl te documenteren en beschikbaar te maken voor NL Design System, startend bij een web scraper en eindigend met een stijlgids.
• Documentatie aanleveren waarmee het beheer van de website kan worden overgedragen.

De opdracht wordt afgerond wanneer de opdrachtgever de opgeleverde resultaten heeft geaccepteerd en een inhoudelijke decharge heeft verleend. Dit is het geval wanneer de klant een landingsplaats heeft voor alle activiteiten en instrumenten van het Expertteam Digitale Toegankelijkheid, alles is overgedragen aan de betreffende beheerpartij en nazorg is uitgevoerd.

Jouw profiel

• Je hebt ervaring met het toepassen van herbruikbare componenten uit Design Systems of Component Libraries.
• Je hebt ervaring met het ontwikkelen van complexe front-end componenten, zoals Combobox, Date Picker, Color Picker.
• Je bent pragmatisch en kunt werk opdelen in kleine stappen en fases.
• Je kunt zonder code-duplicatie onderdelen hergebruiken, zodat verbeteringen zowel in bestaande als nieuwe websites gebruikt kunnen worden.
• Je hebt uitgebreide ervaring met HTML, bijvoorbeeld met landmark roles, document order, semantische HTML, tabellen, formulieren, links en buttons, video, autocomplete, details/summary, custom elements, role, live regions, aria-labelledby, aria-describedby, aria-required, aria-invalid, aria-controls, aria-haspopup, aria-hidden, aria-current, aria-pressed, aria-sort, aria-activedescendant en aria-selected.
• Je hebt ervaring met het maken van Web Components en kunt daarbij goed kiezen tussen Shadow DOM en Light DOM.
• Je hebt veel ervaring met CSS, bijvoorbeeld met layouts via Grid en Flexbox, CSS logical properties, custom properties, variabelen, calc() voor fluid font sizes en container queries.
• Je hebt ruime ervaring met moderne JavaScript (ECMAScript), zoals ES Modules, import(), URL, async/await, Map, Set, map/filter/reduce, nullish coalescing, class, import.meta, Promises, Object.entries, destructuring.
• Je hebt ervaring met het gebruik van npm packages, monorepositories en het publiceren van npm packages.
• Je hebt ervaring met het werken met REST APIs om data te laden voor pagina’s.
• Je hebt ervaring met unit tests en end-to-end tests voor front-end code, bijvoorbeeld met Jest, Vitest, Cypress of Playwright.
• Je beschikt over goede mondelinge en schriftelijke communicatieve vaardigheden.
• Je werkt zelfstandig en bewaakt je voortgang als onderdeel van de scrum planning.
• Je bent accuraat, werkt gedisciplineerd, kunt diversiteit aan werkzaamheden ordenen en prioriteren, en stemt hierover af met de Product Manager.
• Je hebt ervaring met open source werken en vindt het vanzelfsprekend om alles, inclusief het proces, open en transparant te delen.