Skip to content

Code conventions

Jump to bottom
Mats edited this page May 19, 2026 · 8 revisions

Code conventions voor dit project

1. Algemeen

  • We schrijven duidelijke, leesbare code.
  • Namen zijn Engelstalig.
  • Comments leggen uit waarom iets gebeurt, alleen bij lastige code ook WAT er gebeurt.
  • Geen ongebruikte code of console.logs in de 'main.'

2. Bestandsstructuur

assets
js/
style/

3. Naamgeving

  • Bestanden: kebab-case.js
  • Functies: camelCase
  • Constants: UPPER_SNAKE_CASE

Voorbeelden:

const MAX_VISIBLE_FISH = 10;

function formatCountryName(countryCode) {}

class FishTimeline {}

4. JavaScript

  • Gebruikt const, tenzij de waarde verandert.
  • Gebruikt let alleen wanneer nodig
  • Geen var
  • Gebruik duidelijke functienamen
  • Houd functies klein en specifiek

5. Branches

Iedereen werkt in zijn eigen branch en we mergen uiteindelijk alles naar de dev-branch. De naam van je branch moet direct vertellen wat voor soort werk je doet en waar het over gaat.

Toegestane types voor branches Je kan het typen als type/korte-beschrijving. Types waar je uit kan kiezen:

  • feat/ : Dit gebruik je voor branches waar je een nieuwe feature in maakt.
  • bugfix/ : Dit gebruik je als je een stuk bestaande code moet fixen.
  • docs/ : Dit gebruik je als je wijzigingen gaat maken in de README of andere documentatie

Regels voor branches

  • Gebruik uitsluitend kleine lettertype
  • gebruik ' - ' i.p.v. spaties
  • Typ branch namen uitsluitend in het Engels

6. D3 Conventions

  • Data eerst opschonen voordat je visualiseert.
  • Elke chart moet passen bij de huisstijl.

7. CSS

  • Mobile-first design
  • Gebruik CSS custom properties
  • Geen inline styling tenzij dit echt moet

8. Accessibility

  • Elke visualisatie krijgt een titel en tekstuele samenvatting.
  • Interactieve onderdelen zijn met toetsenbord te gebruiken.
  • Kleur is niet de enige manier om informatie over te brengen.
  • Afbeeldingen krijgen goede alt-tekst.
  • Respecteer prefers-reduced-motion.

9. Performance

  • Alleen noodzakelijke libraries gebruiken.
  • Grote datasets eerst aggregeren.
  • Geen onnodige re-renders.
  • Afbeeldingen lazy-loaden.

10. Commits

Gebruik korte, maar duidelijke commit messages, zoals:

feat: add timeline chart

fix: correct date parsing

docs: add code conventions

style: update chart spacing

refactor: simplify CSV parser

11. Pull Requests

Elke PR bevat:

  • Korte beschrijving.
  • Eventueel screenshot bij visuele wijzigingen.
  • Eventuele issues

12. Reviews

  • Minimaal één teamlid reviewt.
  • Feedback concreet en vriendelijk :)
  • Grote aanpassingen altijd eerst bespreken.

Clone this wiki locally