Front-end developer – Theme Builder UI

Opdracht

Omschrijving: Ontwikkel een moderne front-end voor een gebruiksvriendelijke webapplicatie waarmee overheidsorganisaties eenvoudig een toegankelijke huisstijl kunnen vastleggen en gebruiken met het NL Design System. Je draagt bij aan hulpmiddelen van het Expertteam Digitale Toegankelijkheid en de doorontwikkeling van NL Design System als open source white‑label design system.

Taken en verantwoordelijkheden

Belangrijkste werkzaamheden:

• Ontwikkelen van de front-end van een webapplicatie waarin visueel ontwerp van design system componenten kan worden aangepast via design tokens met realtime resultaat.
• Ontwikkelen van een interactieve stijlgids op basis van Design Tokens (JSON) om meerdere huisstijlen vast te leggen en te delen.
• Ontwikkelen van herbruikbare front-end web componenten volgens de NL Design System architectuur.
• Ontwikkelen van complexe front-end componenten (bijv. Combobox, dialogen met formulieren, Color Pickers, Color Picker op basis van screenshots).
• Implementeren van “Undo” en “Redo” functionaliteit; wijzigingen opslaan via browser API’s.
• Ontwikkelen van validatieregels om de toegankelijkheid van een huisstijl te meten en te controleren.
• Ontwikkelen van templates en patronen die tonen hoe design tokens werken in combinatie met een huisstijl.
• Ontwikkelen van een gebruiksvriendelijke UI om design tokens uit bestaande websites te gebruiken (beschikbaar via een REST API voor de Web Scraper).
• Verbeteren van de software op basis van feedback van toegankelijkheidsspecialisten, het kernteam en gebruikersonderzoek.
• Signaleren van verbeterkansen en technical debt door issues aan te maken voor de backlog.
• Meedenken en begeleiden van (online) workshops over het ontwikkelen van toegankelijke huisstijlen.
• Implementeren van automatische toegankelijkheidstests in unit tests met Vitest, Playwright en Testing Library.
• Maandelijks dependencies updaten om templates veilig en actueel te houden.

Werkwijze en samenwerking

• Samenwerken met professionals uit het Expertteam Digitale Toegankelijkheid.
• Deelname aan sprintplanningen (één keer in de 2 weken) en indien nodig refinements en reviews.
• Voortgang delen en afstemmen via Slack (privé en publiek) en deelnemen aan relevante huddles.
• Reviewen van pull requests van andere experts om vroegtijdig feedback te geven.

Te behalen deelresultaten

• Templates en patronen per component om verschillende verschijningsvormen van een huisstijl te testen.
• Geautomatiseerde tests om de kwaliteit van de software te meten.
• Publicatie van een open source npm package met herbruikbare web componenten om design tokens in te voeren of te demonstreren.
• Gefaseerde opleveringen van de website: begin met een MVP, daarna per milestone uit de product backlog.

Eindresultaten

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

Opdrachtafronding

De opdracht is afgerond wanneer de opdrachtgever de opgeleverde resultaten heeft geaccepteerd en er een inhoudelijke decharge is verleend, en wanneer activiteiten, instrumenten en nazorg zijn overgedragen aan de betreffende beheerpartij.

Vereiste kennis en ervaring

Specialistische kennis: Er is specialistische kennis over Design Systems en Component Libraries noodzakelijk.

• Ervaring met toepassen van herbruikbare componenten uit Design Systems of Component Libraries.
• Ervaring met ontwikkelen van complexe front-end componenten (bijv. Combobox, Date Picker, Color Picker).
• Pragmatisch, kan werk opdelen in kleine stappen en fases.
• Kan componenten hergebruiken zonder code-duplicatie.
• Uitgebreide ervaring met HTML (landmark roles, document order, semantische HTML, tabellen, formulieren, links, buttons, video, autocomplete, details/summary, custom elements, role, live regions en ARIA‑attributen zoals aria-labelledby, aria-describedby, aria-required, aria-invalid, aria-controls, aria-haspopup, aria-hidden, aria-current, aria-pressed, aria-sort, aria-activedescendant, aria-selected).
• Ervaring met het maken van Web Components en afwegingen tussen Shadow DOM en Light DOM.
• Uitgebreide ervaring met CSS (Grid, Flexbox, logical properties, custom properties/variables, calc(), container queries).
• Uitgebreide ervaring met moderne JavaScript (ES Modules, import(), URL, async/await, Map, Set, map/filter/reduce, nullish coalescing, class, import.meta, Promises, Object.entries, destructuring).
• Ervaring met het gebruiken van npm packages, monorepositories en publiceren van npm packages.
• Ervaring met gebruik van REST APIs om data te laden.
• Ervaring met unit tests en end‑to‑end tests voor front-end code (bijv. Jest, Vitest, Cypress, Playwright).
• Goede mondelinge en schriftelijke communicatieve vaardigheden.
• Kan zelfstandig werken, bewaakt eigen voortgang binnen scrum planning, is accuraat en kan werkzaamheden prioriteren en afstemmen met de Product Manager.
• Ervaring met open source werken en bereidheid om werk en proces open en transparant te delen.

Eisen

• Minimaal 5 jaar ervaring met HTML en CSS-technieken
• Minimaal 5 jaar ervaring met moderne JavaScript (ECMAScript)
• Minimaal 3 jaar ervaring met GitHub of vergelijkbaar, waaronder merge/pull
  requests maken en het geven van code reviews
• Minimaal 3 jaar ervaring met TypeScript
• Minmaall 3 jaar ervaring met Node.js en server-side rendering
• Minimaal 1 jaar ervaring met unittesten en end-to-end testen van front-end
  software
• Aantoonbare ervaring met websites maken die toegankelijk zijn volgens
  recente versies van WCAG
• De kandidaat over een goede schriftelijke beheersing van de Nederlandse
  taal beschikt
• De kandidaat goed mondeling kan samenwerken tijdens online en fysieke
  bijeenkomsten
• De kandidaat over een goede schriftelijke beheersing van de Engelse taal
  beschikt
• De kandidaat bij wil dragen aan het NL Design System
• Per wens het aantal jaar/projecten concrete ervaring dat de professional
  per wens heeft opgedaan in de context van deze aanvraag

Wensen

• Aantoonbare ervaring in de afgelopen 5 jaar met ontwikkelen en onderhouden
  van open source projecten met npm
• Aantoonbare ervaring in de afgelopen 5 jaar met toegankelijke
  webcomponenten, voor formulieren en met Shadow DOM
• Aantoonbare, ervaring met het ontwikkelen van een design system en design
  system documentatie, in de afgelopen 5 jaar
• Aantoonbare ervaring met end-to-end tests voor pagina’s met webcomponenten,
  op basis van de accessibility tree
• Ervaring met NL Design System, wat blijkt uit ervaring met het toepassen
  van design tokens JSON, documenteren van componenten in Storybook,
  aanwezigheid op Slack en hergebruik van community componenten
• De kandidaat toont aan over een pragmatische en oplossingsgerichte
  werkwijze te beschikken.De weging wordt ook meegenomen in het gesprek. De
  kandidaat toont aan accuraat te werken om tot een toegankelijk en
  onderhoudbaar resultaat te komen. De weging wordt ook meegenomen in het
  gesprek

Vul je gegevens hieronder in, dan nemen we binnen 2 uur contact met je op om samen te kijken of er een match is. Heb je nog vragen? Bel ons op 030-249 66 96 of stuur een e-mail naar info@greenpepper.nl We helpen je graag verder!