WhatFormat

De aanleiding is een van de saaiste vragen op internet: wat is dit voor bestand. Iemand krijgt een .dat als bijlage, downloadt een .heic van een iPhone, of erft een .dwg van een aannemer. De vraag is klein, het antwoord is kort, en toch is de weg ernaartoe onnodig lang. De pagina's die vandaag op dat soort zoekopdrachten ranken zijn vaak opgetuigd met advertentieblokken, cookiedialogen en een inleiding van vier alinea's voordat er iets nuttigs staat. Een deel van de resultaten is niet eens een antwoord, maar een converter die je vraagt je bestand te uploaden naar een server waar je niets van weet.

Wij zagen daar twee dingen in. Ten eerste een inhoudelijk gat: er is geen gebrek aan informatie over formaten, wel aan informatie die direct, betrouwbaar en per formaat verschillend is. Ten tweede een gedragsgat: de vraag stellen betekent meestal dat je het bestand al voor je hebt. Dan is de beste hulp niet een uitleg, maar herkenning. Laat de bezoeker het bestand neerzetten en zeg wat het is.

Dat is het uitgangspunt geworden van WhatFormat. De tagline in lib/site.ts vat het samen: de snelle, schone database van bestandsformaten en extensies, identificeer je bestand in je browser. Alles wat we daarna hebben besloten, van de dataset tot het kleurgebruik tot de bouwtechniek, is aan die zin getoetst. De zin staat op één plek in de code, zodat er ook maar één versie van de belofte bestaat.

Het inhoudelijke werk zit in 114 formaatrecords, met de hand geschreven en verdeeld over zeven databestanden. Die verdeling zegt iets over de niche: de grootste bak heet misc (39 records) en de kleinste is archives (5). De rommelcategorie is precies waar de vraag zit, want .dat, .tmp, .bak en .cache zijn de bestanden waar niemand raad mee weet. Het record heeft een vaste vorm, gedefinieerd in lib/formats-types.ts: canonieke extensie en aliassen, volledige naam, categorie, MIME-types, magic-byte signatures, een samenvatting, een langere uitleg, wat je nodig hebt om het te openen op Windows, macOS en Linux, verwante formaten, een veiligheidsalinea en FAQ's. De typedefinitie schrijft er expliciet bij dat de samenvatting handgeschreven is en per formaat uniek, zonder template. Dat is geen stijlvoorkeur maar de enige manier waarop een paar honderd programmatische pagina's het verdienen om te bestaan.

Betrouwbaarheid is geen bijzaak in deze niche, want een verkeerd antwoord over een bestandsformaat kost iemand een middag. Daarom heeft het record een sources-veld om feiten terug te leiden naar naslagwerk. Daar zijn we eerlijk over waar het staat: er liggen op dit moment 98 verwijzingen bij 90 van de 114 records, en het leeuwendeel daarvan zijn de formaat- en signaturelijsten van Wikipedia, aangevuld met RFC's, de IANA-registry, de registry van de Library of Congress en documentatie van leveranciers. Dat is een startpunt, geen eindpunt: het veld is optioneel, de dekking is nog niet rond, en dat is precies het soort werk dat een naslagwerk nooit af heeft. Wat het wel doet, is elk feit toetsbaar maken voor de volgende die het record aanraakt.

De dataset is ook streng tegen zichzelf. lib/formats.ts controleert bij het bouwen op dubbele canonieke extensies en gooit een error als die er zijn, zodat de build stopt in plaats van twee pagina's om dezelfde URL te laten vechten. De zoekindex die naar de client gaat is bewust uitgekleed tot vier velden (ext, name, fullName, aliases), met in de code de motivering erbij: hij zit in de payload van iedere pagina met een zoekbox, dus hij moet klein blijven. De records zijn samengesteld uit publieke bronnen en vendordocumentatie, en de dataset wordt onder CC BY 4.0 aangeboden.

WhatFormat heeft een eigen design-systeem, geen template en geen CSS-framework. In het project staat het onder de codenaam FRIENDLY EXPERT, en die twee woorden zijn de hele opdracht. Het onderwerp is technisch en de bezoeker is dat vaak niet. Een site die eruitziet als een terminal bevestigt het gevoel dat je iets niet snapt. Een site die eruitziet als een consumentenapp maakt niet waar dat de informatie klopt. We zochten het midden: het gezag van naslagwerk, de toon van iemand die het rustig uitlegt.

Concreet betekent dat een lichte, warme ondergrond (#fbfaf7, papier in plaats van wit) met een diep teal accent (#0e6e66) dat in de tokens expliciet is aangemerkt als bewust geen standaard blauw. Boven op dat neutrale papier ligt een spectrum van twaalf categoriekleuren, één per categorie, van het roodbruin van image (#bf4a33) tot het blauw van design (#3d6dcc). Het merksignaal is een omgevouwen hoek, de dogear, op de kaarten die als papier moeten lezen. De koppen staan in Bricolage, extensies en hex-waarden in JetBrains Mono met tabulaire cijfers zodat kolommen data netjes uitlijnen, en de bewegingen zijn kort en veerkrachtig in plaats van vloeiend. In donkere modus schuift het hele systeem mee naar een warm bijna-zwart, met een lichtere teal. Er staat één regel boven dat alles: geen rauwe kleur in een component, altijd een token. Dat maakt het systeem controleerbaar in plaats van bespreekbaar.

Het mooiste moment in het systeem is meteen ook het bewijs dat het merk ergens over gaat. Zodra de identifier een bestand herkent, neemt de hero-zone de categoriekleur van dat bestand aan: laat je een MP3 vallen, dan kleurt het scherm mee. Dat is in de code afgebakend tot .hero, met de reden erbij, zodat het vaste merkmeubilair (wordmark, navigatie, footer) teal blijft en de kleurwissel als antwoord leest, niet als thema. En omdat kleur hier betekenis draagt, laten we hem niet los: scripts/check-contrast.mjs leest app/tokens.css en faalt als een tekstdragende kleurrol onder WCAG 2.2 AA duikt, inclusief alle twaalf categoriekleuren als label op papier én op surface, in licht én in donker. Kleuren die met color-mix zijn opgebouwd slaat het script over, want die zijn decoratief en dragen geen tekst.

Technisch is WhatFormat een Next.js 16-site op de App Router met React 19 en TypeScript. De dependencylijst is drie regels lang: next, react en react-dom. Er is geen eigen backend en geen database. De hele site wordt bij het bouwen voorgerenderd en kan daarna overal staan waar statische bestanden geserveerd worden. Dat is geen minimalisme om het minimalisme, het is de directe vertaling van de belofte in de tagline naar de architectuur.

De identifier laat zien wat dat oplevert. Als je een bestand in de dropzone laat vallen, pakt de browser met file.slice(0, 4096) alleen de eerste vier kilobytes, leest die lokaal met een FileReader en legt de bytes naast 37 magic-byte signatures. Die tabel kan wildcards aan en is geordend zodat specifieke signatures vóór generieke komen: AVIF, HEIC, MOV en M4A hebben elk hun eigen ftyp-brand en staan bewust boven de kale ftyp-match van MP4, en de ZIP-familie staat achteraan omdat die ook docx, xlsx, pptx, epub en apk dekt. Die vier kilobyte is ook een grens die we hebben geaccepteerd in plaats van weggepoetst: signatures met een negatieve offset, die vanaf het einde van het bestand kijken, slaat de identifier over met de reden in de code erbij. De dataset kent er één, de koly-trailer van een DMG, en die zie je dus wel op de formaatpagina maar herkent de dropzone niet. De signaturemodule wordt pas via een dynamic import ingeladen op het moment dat er echt een bestand valt, zodat de homepage licht blijft. Herkent hij iets dat niet bij de bestandsnaam past, dan zegt hij dat er ook bij: de naam zegt .jpg, de bytes zeggen iets anders.

Het gevolg is dat we een privacybelofte kunnen doen die uit de bouw volgt en niet uit een tekst. Er is geen upload om te beloven te wissen, want in de identifier zit geen uploadpad: het lezen gebeurt in de browser. Dat wil niet zeggen dat de site helemaal zwijgt. Er is één formulier, op de contactpagina, dat naar een endpoint buiten deze site post, en de privacyverklaring anticipeert op advertenties en geaggregeerde statistieken, want de site wordt klaargemaakt voor display-advertenties. Er hangt al een consent-component in de layout, voorlopig een placeholder die niets rendert tot er echt advertenties draaien en die dan door een gecertificeerde CMP vervangen wordt. Wat daar ook komt te draaien, het raakt de inhoud van je bestand niet, want die check blijft lokaal. Voor ons scheelt de statische opzet bovendien een serverrekening, een verwerkersregister en een aanvalsoppervlak.

Eén vraag over bestandsformaten is niet één zoekopdracht. Iemand typt wat is een .heic bestand, iemand anders hoe open ik een .heic bestand, een derde heic vs jpg, en een ontwikkelaar zoekt op de MIME-type image/heic. Dat zijn vier verschillende intenties op hetzelfde onderwerp, en ze verdienen vier verschillende pagina's. Daarom kent de site naast de 114 formaatpagina's ook 12 categoriehubs, 56 how-to-open gidsen, 20 vergelijkingen en 132 MIME-pagina's, die laatste rechtstreeks afgeleid uit de mime-velden van de dataset. Samen met de homepage, de referentiepagina's en het kleine vaste menu komt de build uit op ruim driehonderd voorgerenderde contentpagina's.

Die pagina's zijn programmatisch gegenereerd maar niet leeg. De how-to-open gidsen putten uit dezelfde openWith- en FAQ-data als de formaatpagina's, wat in de code ook zo is opgeschreven: geen verzonnen content, geen verzonnen magic bytes. De 20 vergelijkingen zijn juist volledig handwerk, met een eigen intro, een verdict en een feitentabel per stuk. De MIME-pagina's tonen de echte extensies die dat type gebruiken, wat per pagina unieke data oplevert. De formaatpagina's leveren JSON-LD als één graph met TechArticle, FAQPage, HowTo en BreadcrumbList, plus een canonical, en er wordt per formaat, categorie, vergelijking en gids een eigen OG-afbeelding via next/og gerenderd, met daarnaast één site-brede afbeelding voor de rest.

De discipline zit in de details die niemand ziet. Op de vijf gegenereerde paginaroutes staat dynamicParams op false, zodat een onbekende extensie netjes een 404 geeft in plaats van een lege pagina te improviseren. De sitemap zet bewust geen lastModified, met de reden in het bestand erbij: als je bij elke deploy alle URL's stempelt met de buildtijd, leer je crawlers het signaal te negeren. En npm run verify draait vier stappen achter elkaar: de contrastgate, de build, een linkchecker en een JSON-LD-validator die FAQPage en BreadcrumbList op de pSEO-pagina's afdwingt. De linkchecker faalt op gebroken interne links en op weespagina's, met een korte, met naam genoemde uitzonderingslijst: /widget bijvoorbeeld is bedoeld om zelfstandig te staan en hoeft nergens vandaan gelinkt te worden.

De eerste commit staat op 2 juli 2026 en de site is daarna in korte tijd van idee naar volledige publicatie gegaan, in ongeveer dertig commits. Naast de leespagina's staan er een gratis statische JSON-API (114 endpoints, één per formaat, plus een index, samen 115 JSON-routes met een docspagina erbij), een insluitbare zoekwidget met eigen documentatie, en een sorteerbare magic-numbers-referentie waar de signaturetabel zelf leesbaar en linkbaar is. De site is onderdeel van een klein netwerk van statische tool-sites, en alle uitgaande netwerklinks wijzen naar één bestemming: imageconvert.tools. Die staat in de footer, in de voorwaarden onder het kopje over links van derden, en als call to action op formaatpagina's waar converteren daadwerkelijk zin heeft. Dat laatste is geen redactionele afweging per pagina maar een veld in de dataset.

WhatFormat is eigen werk. Niemand heeft dit besteld, wat betekent dat elke keuze erin een keuze van ons is en dat er geen budget of deadline achter zit om je achter te verschuilen. We hebben de niche gekozen, het merk bedacht, de dataset met de hand samengesteld, het design-systeem van tokens tot componenten geschreven, de build statisch gehouden en de controles eromheen zelf gebouwd. Het staat live en het wordt onderhouden: de laatste inhoudelijke uitbreidingen, waaronder het MIME-cluster, zijn van halverwege juli.

Dat laatste punt is meteen het eerlijkste. De verify-keten wordt door niets afgedwongen: er staat geen CI-workflow in de repo en geen git-hook, de host draait gewoon het build-script, en de afspraak dat contrast, links en JSON-LD groen zijn voor er iets de geschiedenis in gaat staat in AGENTS.md en verder nergens. Het is een zelfopgelegde stap, en dat is precies waarom hij hier staat. Een portfolio vol schermen zegt weinig over wat er onder zit. Een site van een paar honderd pagina's op drie dependencies, met een privacybelofte die uit de architectuur volgt in plaats van uit een tekst, een kleursysteem dat tegen WCAG 2.2 AA wordt getoetst, en een controle die weigert te slagen bij één gebroken interne link terwijl niemand het zou merken als we hem oversloegen, laat zien hoe wij werken als er niemand meekijkt.