Skip to content

Code & design review component

Koop Reynders edited this page Sep 28, 2026 · 1 revision

Don't Repeat Yourself - Component Library

Code & Design review - Component

Jullie zijn voor de website van de opdrachtgever een component library aan het ontwerpen en maken. Een component library zorgt voor herbruikbaarheid, consistentie en schaalbaarheid binnen projecten.

Deze sprint ben je begonnen met het ontwerpen en bouwen van het eerste component.

Aanpak

Vandaag ga je in een groepje van 3 naar elkaars component kijken. Als je feedback hebt gekregen kan je deze verwerken en verder met een volgend component.

Maak een groepje van 3 met studenten uit een ander team. Ga dit keer samenwerken met studenten waar je niet vaak mee samenwerkt, daar leer je van ...

Bespreek eerst hoe je verschillende User preference media features hebt ontworpen en in code gemaakt en laat daarna zien hoe je de container queries hebt toegepast.

User preference media features

Jullie presenteren om de beurt het ontwerp en de code en geven elkaar feedback:

  1. Presenteer aan de hand van het issue dat je woensdag hebt gemaakt je ontwerp voor prefers-reduced-motion, prefers-contrast, prefers-color-scheme en inverted-colors.
  2. Laat je Figma ontwerp zien met de variaties en breakdown
  3. Bespreek de code voor de User preference media features en test het in de browser. Schrijf tips en tops in het issue.

Container queries (en meer)

Laat om de beurt je ontwerp en de code zien voor het responsive ontwerp dat je hebt gemaakt met container queries.

  1. Presenteer aan de hand van het issue het repsonsive ontwerp van je component.
  2. Laat het ontwerp in Figma zien, met de breakdownschets en breakpoints.
  3. Bespreek (en test) de container queries en code van het component. Schrijf feedback in het issue.

Hoe nu verder?

Verwerk de feedback die je hebt gekregen in issues. Check in hoeverre de feedback overeenkomt met de FDND Agency conventions.

Als je de feedback hebt verwerkt voor het eerste component, kun je verder werken aan het volgende component. Je werkt met je team aan een component library voor de opdrachtgever met meerdere waardevolle componenten.

Clone this wiki locally