Flagdex

De vragen in deze niche zijn kort en feitelijk. Wat is de hoofdstad van Bolivia, welk landnummer is +255, waar hoort de vlag met de rode cirkel bij. Het antwoord past in een regel. Toch is het patroon dat we bij de rondgang door deze niche tegenkwamen steeds hetzelfde: eerst een cookiemuur, dan een advertentieblok, dan scrollen voordat die ene regel in beeld komt. Dat is geen inhoudelijk probleem maar een respectprobleem. Het antwoord bestaat al, het wordt alleen achter iets anders gezet.

Het tweede probleem is visueel. 250 vlaggen zijn 250 ontwerpen, met eigen verhoudingen en eigen regels. De gangbare snelkoppeling is ze allemaal in dezelfde rechthoek te tonen en het overschot weg te snijden. Zwitserland is vierkant, Nepal is een dubbele wimpel, en op een site die overal bijsnijdt staan die twee dus botweg verkeerd. Mensen die vlaggen opzoeken merken dat. Wij hebben de omgekeerde regel als merkregel vastgelegd: de vlaggen worden nooit bijgesneden maar geletterboxed, waarbij elke SVG zijn eigen verhouding meebrengt en het beeld zich daarnaar voegt in plaats van andersom.

Daar kwam een derde observatie bij. Dit onderwerp is geen naslagwerk dat je één keer raadpleegt, het is iets waar mensen in blijven hangen. Je zoekt één hoofdstad op en je zit tien minuten later naar de vlag van Kiribati te kijken. Dat maakt het een niche waar een goede site niet alleen het antwoord kan geven, maar ook een reden om terug te komen. Die twee doelen, snel antwoord en langer blijven, hebben we in één ontwerp opgelost in plaats van in twee losse producten.

Het merkidee is één zin: Flagdex is het museum van vlaggen. Een collectie, gecatalogiseerd, met de precisie die een vexilloloog verwacht. Dat idee stuurt de visuele beslissingen, want een museum toont de collectie en niet zichzelf. De site is daarom donker en monochroom: houtskoolgrijs voor de wand (#131316), papierwit voor de tekst, en één accentkleur, een staalgrijs (#c2c7d1) voor catalogusnummers, plaquette-labels, links en de primaire actie. De neutralen zijn bewust niet zuiver zwart of wit: het houtskool is koel getint, het papierwit warm. Verder komt de kleur van de vlaggen.

Die discipline is de hele truc, en discipline blijkt vooral uit hoe je met de uitzonderingen omgaat. Zodra je één blauwe knop of één groene bevestiging toelaat, concurreert de chrome met de vlaggen en valt het museum om. Een geslaagde kopieeractie is daarom staal in plaats van groen. De semantische kleuren bestaan wel, sterk ontzadigd, maar zijn in quarantaine gezet op het contactformulier en de toast, weg van de galeriewand. En het kleurenfilter toont gevulde stippen in echte kleur, want een filter dat je op kleur laat kiezen moet die kleur laten zien om bruikbaar te zijn. Dat zijn afwegingen die we hebben genomen en in het merkdocument hebben opgeschreven, met reden erbij, in plaats van gaten die vanzelf zijn ontstaan.

Er zit geen template en geen CSS-framework onder. De runtime-dependencies zijn next, react en react-dom; wat er verder in het project zit is gereedschap voor onszelf, zoals TypeScript en Playwright, dat niet bij de bezoeker terechtkomt. De styling staat in eigen CSS, met tokens.css als bron van waarheid voor kleur, type, radius en timing, zodat een kleurwijziging op één plek gebeurt en de contrastcontrole er iets over kan zeggen. Typografie is self-hosted in woff2 zonder Google CDN: Space Grotesk voor koppen, Instrument Sans voor lopende tekst en Spline Sans Mono voor codes, catalogusnummers en statistieken, met tabellarische cijfers zodat kolommen uitlijnen. Het logo is een pennant-F, een vlag aan een mast die als letter F leest, geconstrueerd op een grid van 32 eenheden.

Technisch is Flagdex een Next.js 16-site op de App Router met React 19 en TypeScript in strict mode, statisch gegenereerd. De hele dataset zit als één JSON-bestand in de repo, samen met de 250 vlag-SVG's. Er is geen database en geen backend die de inhoud serveert: de referentiepagina's staan compleet in de HTML voordat een bezoeker ze opvraagt. De scripts die het netwerk raken zijn de datavernieuwing en de IndexNow-ping na een deploy, en dat zijn allebei handmatige onderhoudstaken die losstaan van de build. Wat wél automatisch voor de build draait, zijn drie generatoren die uitsluitend de dataset in de repo lezen. Daardoor is de build offline en reproduceerbaar: dezelfde commit levert dezelfde site.

Voor de bezoeker vertaalt dat zich naar drie dingen. De pagina is er meteen, want er wordt niets opgehaald om het antwoord te tonen. Er valt weinig te tracken, want er staat geen analytics- of advertentiescript in de code; de advertentie- en consent-componenten bestaan wel, maar renderen niets zolang de bijbehorende omgevingsvariabele uit staat, en die staat uit. En wat je doet blijft op je apparaat: de collectie die je opbouwt, je recente opzoekingen en je quizvoortgang staan in localStorage, zonder account en zonder server. De plek waar de browser alsnog iets naar buiten stuurt is het contactformulier, en dat gebeurt pas als je zelf op verzenden drukt.

Dat statische fundament maakte ook de terugkeer-mechaniek mogelijk zonder er een platform van te maken. Je verzamelt vlaggen, de voortgangsplaquette telt mee (No. 042 / 250), en er is een dagelijkse vlaggenquiz waarin je in zes pogingen het land raadt, met afstand- en richting-hints na elke misser. Het puzzelnummer wordt uit een vast startpunt en de kalenderdatum berekend, dus wie op dezelfde dag speelt krijgt dezelfde vlag. Dat vraagt geen serverstate en geen account, alleen de datum en de dataset die er al staat.

Eén dataset van 250 landen en gebieden bevat meer vraagoppervlak dan 250 pagina's. Mensen zoeken niet alleen op een land, ze zoeken op een landnummer (+255), op een topleveldomein (.se), op een valutacode, op een hoofdstad, op een groep (Scandinavische landen, landlocked landen, eurolanden) of op een ranglijst (grootste landen, meeste buurlanden). Elk van die ingangen is een eigen zoekintentie met een eigen antwoord, en dus een eigen pagina. We hebben negen routefamilies programmatisch opgebouwd met generateStaticParams, allemaal gevoed door dezelfde bron, plus een handvol vaste pagina's eromheen.

Samen levert dat ruim duizend URL's in de sitemap op. De verhoudingen daarbinnen vertellen zelf iets over de data: er zijn 250 landprofielen en 250 domeinextensies, maar minder hoofdstadpagina's, want van die 250 entries zijn er 194 een soevereine VN-lidstaat met een eigen hoofdstad en is de rest gebied of afhankelijkheid. Dat verschil is precies het soort detail dat een referentiesite moet durven tonen in plaats van gladstrijken. De kleurdata voor de kleurfilters wordt bij de build uit de vlagbestanden zelf berekend, dus "vlaggen met geel erin" is geen handmatig bijgehouden lijst maar een afgeleide van de bron.

Programmatisch betekent niet dun. De gegenereerde pagina's krijgen eigen metadata met canonical, eigen JSON-LD via gedeelde helpers, en OG-kaarten die via next/og in het eigen font worden gerenderd. De sitemap declareert bij elk land de vlag als image, zodat die kan meedoen in de image pack voor "X flag"-queries. En de lastModified komt uit de datumstempel van de dataset in plaats van uit de buildtijd, zodat een deploy niet de hele sitemap vals als gewijzigd aanmerkt. Waar redactie nodig was hebben we die met de hand geschreven: 43 vlagbetekenissen, per stuk teruggelezen naar een bron, en waar geen gedocumenteerde betekenis bestaat staat er niets in plaats van verzonnen symboliek.

Een jonge site in een gevestigde niche wint niet op pagina-optimalisatie alleen. Daarom hebben we een deel van het werk besteed aan dingen die iemand anders een reden geven om te linken. De eerste is een gratis JSON-API: statische bestanden zonder sleutel en zonder registratie, met de volledige dataset, een compacte variant, een metabestand en 250 losse landbestanden, plus de vlaggen als publiek-domein-SVG. Er zijn docs op /api-docs. De bestanden worden bij de build opnieuw uit de dataset gegenereerd, dus ze volgen de bron in plaats van een tweede versie van de waarheid te worden die je apart moet bijhouden.

De tweede is materiaal om te printen. Er is een zelfstandige wereldvlaggen-poster als SVG, en er zijn zes printbare vlaggen-quizbladen: één per werelddeel voor Afrika, Amerika, Azië, Europa en Oceanië, plus een wereldeditie met alle soevereine staten. Elk blad heeft een genummerd raster, schrijfregels en een ingebouwde antwoordsleutel. Er ligt print-styling onder die de donkere museumsite omzet naar schoon zwart-op-wit A4, zonder chrome en zonder watermerk, zodat het uit de printer komt zoals je hoopt. Dat is bruikbaar lesmateriaal, geen leadmagneet: er zit geen aanmelding voor en er staat geen logo overheen.

De bronnen zijn open verantwoord. Ze staan met licentie op een eigen /data-pagina: mledoze/countries onder ODbL 1.0, wereldbevolking van de Wereldbank (indicator SP.POP.TOTL) onder CC BY 4.0, en vlaggen uit het publieke domein. Bij de bevolkingscijfers staat de vintage erbij, inclusief de datum waarop de Wereldbank die dataset voor het laatst bijwerkte, want een bevolkingsgetal zonder jaartal is een half getal. Dat is deels netheid tegenover de bronnen en deels het punt van de site zelf: als je claimt de schone, snelle referentie te zijn, moet controleerbaar zijn waar je cijfers vandaan komen.

Flagdex is live op flagdex.net en wordt doorontwikkeld sinds de eerste commit op 2 juli 2026. Het is eigen werk, geen opdracht, en dat is precies waarom het bruikbaar is als bewijs: er zat niemand tussen die de scope kon oprekken of het merk kon afzwakken. De site is dark-only, monochroom, advertentievrij en zonder trackingscript gebleven, ook op de momenten dat de makkelijke variant dichterbij lag.

De kwaliteit zit vast in gereedschap in plaats van in goede voornemens. Na een wijziging draait steeds dezelfde reeks: de build die de routes genereert, een crawler die de gebouwde HTML nakijkt op gebroken links en verweesde pagina's, een validator die over de voorgerenderde pagina's loopt en controleert of de JSON-LD er staat, parseert en de vereiste velden draagt, een contrastcontrole die de kleurparen die de UI daadwerkelijk gebruikt afzet tegen een minimum per rol, en een SEO-baseline-diff. Die laatste is er omdat verkeer heilig is: een merkwijziging mag veranderen wat een bezoeker ziet, maar niet wat een crawler leest. Routes, canonicals, titels, kopteksten en hun volgorde, interne linkdoelen en de JSON-LD-semantiek liggen vast in een baseline. Tijdens de merktransformatie heeft die guardrail twee keer ingegrepen: een herordening van de related lists liet interne links vallen, en een raster van negen naar acht trimmen sloopte een h3 plus een link. Allebei hersteld voordat het live ging.

Het ontwerp zelf is door een kritiekronde gehaald met verse beoordelaars die de context niet kenden. De tweede ronde gaf een nee, en dat heeft drie rondes werk opgeleverd: een leesbreedte-systeem voor de tekstpagina's dat de lege rechterhelft wegnam, een lijsttemplate dat als exhibitiecatalogus is herbouwd, en een mobiele hiërarchie waarin de tabel herstapelt naar kaarten in plaats van kolommen af te snijden. Daarna scoorde de finale ronde groen voor mobiel en desktop. Wat een opdrachtgever hieraan kan aflezen is dus niet dat we een vlaggensite kunnen maken. Het is dat we een merk kunnen bedenken en het vervolgens in code kunnen afdwingen, dat we ruim duizend pagina's uit één bron kunnen genereren zonder ze dun te maken, en dat we een site die live staat durven te herontwerpen zonder de vindbaarheid in gevaar te brengen.