Skip to content

Documentatie Julius

Jump to bottom
julius edited this page Jun 18, 2026 · 11 revisions

Week 1 | Projectstart & eerste carousel opzet

Deze week ben ik bezig geweest met een carousel maken waarin je op de vis klikt en dan naar een detailpagina gaat waarin je informatie over de vis krijgt en hoe vaak die is gezien. Daarnaast kan je ook wat items vinden op de website en dan kan je een vis aankleden; de hoop is dat dit voor meer retention zorgt.

image image

Feedback opdrachtgever

Dit feedbackgesprek was met Cyd. Daaruit kwam dat mijn carousel en dan vooral het aankleden van de vis waarschijnlijk niet helemaal de bedoeling is, en het daarom ook niet verder uitwerken. Kijk of je de carousel wel verder uit kan werken.

Week 2 | Leren van React & toegankelijkheid

Deze week ben ik mijn carousel iets verder gaan uitwerken en heb ik het designsysteem omgezet naar een styleguide, zodat iedereen consistent de juiste kleuren gebruikt. Na een nuttig gesprek met Jad ben ik ook gaan kijken naar toegankelijkheid om te zien of mijn carousel helemaal tapbaar is. Naast deze gesprekken heb ik ook een paar cursussen gevolgd. Zelf vond ik de cursus van GSAP interessant - ik heb er wel een keer eerder mee gewerkt, maar er meer dingen mee maken en er meer over leren gaf me een paar ideeen over hoe ik het zou kunnen gebruiken binnen het project.

Deze week was ook de eerste keer dat we naar de opdrachtgever gingen, Studio MOAN. Dat was echt gaaf om te doen. Er kwam veel positiviteit en energie vanuit hun kant en dat was echt leuk om mee te maken.

Feedback

Het ontwerp bevat een creatief idee maar wordt in de praktijk als onbruikbaar ingeschat voor dit project. Het idee rondom vissen werd wel als interessant gezien en de styling werd positief ontvangen. De visseninformatie zou echter beter tot zijn recht komen in combinatie met de beschikbare data. Mochten vissen alsnog een rol spelen dan zou animatie via bijvoorbeeld Lottie goed in de smaak vallen.

Week 3 | Carousel omzetten naar React

Deze week ben ik mijn carousel gaan omzetten naar React. Ik heb Embla Carousel gebruikt als basis en mijn bestaande HTML opnieuw opgebouwd als losse componenten. De carousel laat vissoorten zien zoals de Baars, Snoek en Meerval en als je op een vis klikt opent er een dialog met wat statistieken over die soort, zoals hoe vaak die gemeld is, welk aandeel dat is van alle meldingen en welke positie die heeft in de ranglijst. Daarnaast kan je vissen aankruisen in een soort checklist zodat je kan bijhouden welke je al hebt gezien. Halverwege de week had ik het werkend en daarna heb ik de styling verder uitgewerkt zodat het beter aansluit bij de rest van de pagina.

image image

Feedback

Uit de feedback kwamen een aantal punten. Er was te veel ruimte tussen de Latijnse naam en de rest van de content in de dialog. Ook werd gezegd dat je wel kan aanvinken maar dat het niet echt iets doet, en dat de foto in de dialog hetzelfde plaatje is als in de carousel terwijl een mooiere of andere foto daar beter zou staan. Een algemeen punt was dat ik me beter moet afvragen wat ik nou precies wil vertellen met de carousel, dat was ook voor iedereen een aandachtspunt. Verder werd gezegd dat het meer een geheel moet zijn en dat het meer moet bieden dan alleen de slider die ze al hebben. Uit de feedback kwam ook dat het checklist systeem in de carousel iets is wat ze wel zouden willen zien uitgewerkt worden.

Week 4 | Clock component voor de timeline

Deze week ben ik bezig geweest met een klokelement dat laat zien op welke tijden er het meest gemeld wordt. Je ziet een klok en daaronder een tabel met de drukste uren zodat het wat overzichtelijker is dan alleen de klok. Ik heb ook wat bestanden opgeschoond en hernoemd want de namen klopten niet meer bij wat de bestanden eigenlijk deden.

Feedback

De visualisaties vereisen momenteel te veel scrollen. De voorkeur is dat gebruikers in een oogopslag kunnen zien wat de visualisatie toont en wat de betekenis ervan is, belangrijke informatie moet dus direct zichtbaar zijn zonder veel interactie of navigatie. Daarnaast is de tekst op sommige plekken te klein en mag groter voor betere leesbaarheid. De visualisaties mogen ook eerder in beeld verschijnen en de focus moet duidelijker liggen op de klok en de zonnebloem. Voor vragen kan altijd via e-mail contact worden opgenomen.

Week 5 - 15 t/m 16 juni | Afronding & footer

Deze week ben ik bezig geweest met het afronden. Ik heb comments door de code gezet en alles omgezet naar het Engels zodat het leesbaar is voor iedereen. De styling van de clock heb ik ook nog wat bijgewerkt naar meer een huisstyle en grotere afbeeldingen toegevoegd aan de tabel. Als laatste heb ik een footer gebouwd die onderaan de homepagina staat en de navigatie gerepareerd zodat alles goed werkt in de uiteindelijke versie.

image image

Bronnen — De klok ("Het ritme van de bel")

1. React — component, state en data laden

In de code Bron
useState(null) voor hours, period, pondWeek… — Clock.jsx:342 React — useState
useEffect(() => { … }, []) — data ophalen bij mount — Clock.jsx:352 React — useEffect
De let cancelled = false / cleanup-vlag tegen race-condities — Clock.jsx:355–369 React — Synchronizing with Effects (het "ignore"-patroon)

De cleanup-vlag is precies het patroon dat React beschrijft: zet een vlag op true in de cleanup zodat een laat binnenkomend fetch-antwoord genegeerd wordt en je geen setState op een ge-unmounte component doet.

2. JavaScript — de data verwerken

In de code Bron
fetch("/json/vis-data.json").then(r => r.json()) — Clock.jsx:356 MDN — Using the Fetch API · MDN — Response.json()
.then().then().catch() — beloftes aan elkaar knopen — Clock.jsx:357–366 MDN — Promise.prototype.then()
Object.fromEntries(fish.map(…)) — opzoektabel bouwen — Clock.jsx:21 MDN — Object.fromEntries()
list.reduce((sum, n) => sum + n, 0) — optellen — Clock.jsx:24 MDN — Array.prototype.reduce()
new Array(24).fill(0) — lege telling per uur — Clock.jsx:28 MDN — Array.prototype.fill()
averages.map((value, hour) => …) — omzetten naar uur-objecten — Clock.jsx:61 MDN — Array.prototype.map()
Object.entries(species).sort((a, b) => b[1] - a[1]) — soorten ranken — Clock.jsx:76 MDN — Object.entries() · MDN — Array.prototype.sort()
Math.max(...averages, 1) — drukste uur + deling-door-nul vermijden — Clock.jsx:57 MDN — Math.max()
String(hour).padStart(2, "0") — "7" → "07" — Clock.jsx:111 MDN — String.prototype.padStart()
`${…}:00` — template literals — Clock.jsx:111 MDN — Template literals
period?.label ?? "de periode" — optional chaining + nullish coalescing — Clock.jsx:400 MDN — Optional chaining ?. · MDN — Nullish coalescing ??

3. De tekening — SVG

In de code Bron
<svg viewBox="0 0 440 440"> — schaalbaar tekenvlak — Clock.jsx:411 MDN — SVG viewBox
<line> voor de 24 wijzers — Clock.jsx:430 MDN — SVG <line>
<circle> voor de hub en de stip — Clock.jsx:462 MDN — SVG <circle>
<text> voor de cijfers in de hub — Clock.jsx:468 MDN — SVG <text>
<image preserveAspectRatio="xMidYMid meet"> voor de vissen — Clock.jsx:196 MDN — SVG <image> · MDN — preserveAspectRatio
<g> om draad + stip + vis te groeperen — Clock.jsx:181 MDN — SVG <g>
style={{ "--i": block }} — CSS-variabele voor trapsgewijze animatie — Clock.jsx:210 MDN — CSS custom properties gebruiken

4. De wiskunde — punten op de klok

function pointOnClock(hour, distance) {
  const angle = (hour / 24) * 2 * Math.PI - Math.PI / 2; // -90° zet uur 0 bovenaan
  return { x: CLOCK_CENTER + distance * Math.cos(angle),
           y: CLOCK_CENTER + distance * Math.sin(angle) };
}

pointOnClock() (Clock.jsx:96) zet een uur + afstand om naar een x/y-punt met de standaardformule x = cx + r·cos θ, y = cy + r·sin θ. De −π/2 draait 0 uur naar boven in plaats van naar rechts.

5. Toegankelijkheid — ARIA en toetsenbord

In de code Bron
<svg role="img" aria-label="…"> — de tekening als één beschreven beeld — Clock.jsx:414 MDN — ARIA: img-rol · MDN — aria-label
role="button" + tabIndex={0} + onKeyDown (Enter/Spatie) op elke wijzer — Clock.jsx:439 W3C — WAI-ARIA APG: Button-patroon
className="clock__sr-only" <table> — dezelfde data voor schermlezers — Clock.jsx:513 WebAIM — Invisible Content Just for Screen Reader Users

Een <line> is van zichzelf geen knop, dus de toetsenbordbediening (focus + Enter/Spatie) moet ik zelf toevoegen — precies wat het APG Button-patroon voorschrijft. De sr-only-tabel geeft schermlezergebruikers dezelfde getallen die zienden uit de wijzers aflezen.

Volledige bronnenlijst

React

JavaScript (MDN Web Docs, Mozilla)

SVG & CSS (MDN Web Docs, Mozilla)

Wiskunde

Toegankelijkheid

Clone this wiki locally