CipherPad

Een cipher-vertaler is een van die zoekopdrachten die iemand met een heel concrete vraag stelt. Een kind dat een geheimschrift wil maken, een radioamateur die morse controleert, een student die een Caesar-opgave moet nakijken, iemand die zich afvraagt wat de Zodiac-brieven nu eigenlijk zeggen. Het volume is er ook: het keywordcontract dat we voor de bouw vastlegden noemt "morse code" met ruim een miljoen zoekopdrachten wereldwijd en "morse code translator" met bijna zeshonderdduizend, met daaronder een lange staart van braille, binair, Caesar, Vigenere, pigpen en Pig Latin.

Wat in die niche vooral ontbreekt is samenhang. Veel resultaten zijn losse pagina's die één code vertalen, met een invoerveld en een alinea eromheen die verder niets verklaart. Dat is ook precies het uitgangspunt dat we in de broncode van de contentlaag hebben vastgelegd: intro's, secties en FAQ's moeten per pagina specifiek zijn, geen templateparagrafen met verwisselde variabelen. Dat is bewerkelijker, maar het is wat een pagina zelfstandig waarde geeft in plaats van een invulformulier met tekst eromheen.

Even belangrijk was wat we níét wilden bedienen. Datzelfde strategiedocument houdt een lijst uitgesloten ruis bij, met daarin "bill cipher" en de bijbehorende Gravity Falls-varianten, naast Honkai Star Rail, cipher-aandelen en een hele reeks VIN-decoders. Dat zijn mensen die een tekenfilmpersonage, een game of een auto zoeken en niets aan een vertaler hebben. Ook de developer-kant is bewust weggelaten: url-decoders en JWT-decoders horen bij een andere site in het netwerk. Base64 is het randgeval dat wél bleef, maar dan als tekstvertaler voor wie wil zien hoe encoding werkt, nadrukkelijk weggehouden van de "base64 decoder"-SERP waar developers landen. Een site die op alles mikt haalt misschien kliks binnen, maar bouwt geen positie op waar het ertoe doet.

CipherPad heeft een eigen design-systeem. Geen thema, geen UI-kit, geen CSS-framework: de runtime-dependencies in package.json zijn next, react en react-dom, en verder niets. De vormgeving staat in handgeschreven CSS, opgebouwd rond een set custom properties: een stylesheet voor de site zelf en een kleine, aparte voor de insluitbare widget, die immers zonder header en footer in een iframe van iemand anders leeft. Dat is een bewuste keuze, want een tool-site die snelheid en privacy belooft kan slecht een halve megabyte aan framework-CSS meesturen om dat te zeggen.

De visuele richting is de terminal. De donkere modus is de standaard: een diep houtskoolzwart (#0b0e0d) met een nauwelijks zichtbaar raster van 28 pixels over de achtergrond, één amberkleurig signaalaccent (#ffb000) voor wat aandacht vraagt, en monospace-panelen voor in- en uitvoer. Op de homepage staat boven de titel een regel morse in punten en streepjes, puur als sfeerelement. Het onderwerp is codes, en codes horen thuis op een scherm dat eruitziet alsof er iets ontcijferd wordt.

De lichte modus is geen omgekeerde donkere. Die kreeg een eigen palet met een warme papierkleur (#f5f3ec) en een dieper, gebrand amber (#b26a00) dat op licht wél contrast houdt. Ook de lettertypen zijn ingehouden: geen externe font-CDN, alleen system- en monospace-stacks. Dat scheelt een verbinding met een derde partij bij het laden van een pagina, wat op een site die belooft dat je invoer nergens heen gaat geen detail meer is maar een principe.

De site is statisch. Next.js 16 met de App Router genereert de routes vooraf via generateStaticParams, en op de dynamische routes staat dynamicParams op false, zodat een pad dat niet uit de data volgt geen pagina oplevert maar een 404. React 19 en TypeScript in strict mode eronder, en een next.config.ts die op een opmerking na leeg is. Er is geen backend, geen database en geen CMS.

De vertaallogica zit in één engine in vanilla TypeScript, van tekst naar morse en braille tot Playfair, rail fence en de affiene cipher met zijn twaalf geldige waarden voor a, de getallen die copriem zijn met 26. De Translator-component koppelt elke cipher aan zijn engine, bepaalt of de richting omkeerbaar is en welke besturing erbij hoort: een shift, een sleutel, een aantal rails. De morse-weergave gebruikt de Web Audio API en genereert de toon met een oscillator in de browser zelf, zonder audiobestand dat opgehaald moet worden.

Wat dat de bezoeker oplevert is simpel uit te leggen. De pagina komt kant-en-klaar van de CDN, de vertaling verschijnt terwijl je typt omdat er niets heen en weer hoeft, en de tekst die je in een vertaler zet gaat tijdens het vertalen nergens naartoe. Het contactformulier is de uitzondering: dat post wel naar een endpoint, en dat is ook precies wat je van een contactformulier verwacht. Voor iemand die een privébericht, een wachtwoordhint of een oud dagboekfragment door een vertaler haalt is dat onderscheid geen bijzaak. Het is de reden om deze site te kiezen boven een die je invoer naar een server stuurt.

De architectuur volgt de zoekintentie. Onder /translate/[cipher] staan de tools: eenentwintig pagina's, gedreven door de CIPHERS-registry, waarin per cipher niet alleen de engine-koppeling staat maar ook de title, de metadescription, de H1, het primaire keyword en de groep waarin hij hoort. Onder /learn/[topic] staan twintig referentiepagina's die de informatieve kant bedienen: wat is morse code, het braille-alfabet, SOS, de Playfair-cipher uitgelegd, de Zodiac-brieven.

Die scheiding lost het kannibalisatieprobleem op. "morse code translator" en "what is morse code" zijn verschillende vragen en krijgen verschillende pagina's, die naar elkaar linken in plaats van met elkaar te concurreren. De registry legt dat kruisverband vast als data en niet als handwerk: een cipher noemt de learn-slugs die erbij horen, een learn-topic noemt de bijbehorende tool en verwante topics. Het is geen strak één-op-één-raster, en dat is opzet. Pig Latin en leetspeak zijn speelcodes zonder eigen referentiepagina, en "what is a cipher" en de Zodiac-brieven zijn juist topics zonder één vertaler die er precies bij past. Waar de koppeling ontbreekt is het veld leeg, in plaats van dat er een link naar een pagina met de verkeerde intentie wordt verzonnen.

De inhoud zelf is handgeschreven, per pagina. Geschiedenis, uitleg, voorbeelden en honderd FAQ-items, verdeeld over de tool- en referentiepagina's, elk toegesneden op de vraag waarmee iemand op die pagina landt. Op de homepage staan de eenentwintig vertalers gegroepeerd in vier categorieën (Codes, Classic ciphers, Alphabets, For fun) met de morse-vertaler direct speelbaar erboven, zodat de bezoeker die op de startpagina landt niet eerst hoeft door te klikken om iets te kunnen doen.

De pagina's hebben eigen metadata met een canonical, en JSON-LD die per paginatype klopt: WebApplication op de tools, Article op de referentie, FAQPage waar er een echte FAQ staat, met de BreadcrumbList ernaast samengevoegd in één @graph. De sitemap bouwt zichzelf uit dezelfde slugs als de routes, wat neerkomt op 52 URL's. Voor de lastModified gebruiken we bewust een vaste constante in plaats van new Date(), met de reden erbij in het commentaar: een timestamp die bij elke deploy opschuift doet alsof er nieuwe inhoud is, en dat is een signaal dat je niet vals wilt afgeven.

De OpenGraph-kaarten worden gegenereerd met next/og. De vertalers en de referentietopics krijgen elk een eigen kaart met de H1 van die pagina op hetzelfde donkere raster als de site, zodat een link die op Reddit of in een forum belandt de specifieke tool laat zien in plaats van een generieke huisstijlplaat. De vaste pagina's zoals /about en /privacy vallen terug op de standaardkaart, want daar valt weinig eigens te tonen. Er staat ook een llms.txt in public die de site en de vertalers met hun paden beschrijft, voor de kant van het zoeklandschap die niet meer via tien blauwe links loopt.

Wat we daarnaast bouwden zijn twee controles die meedraaien met het werk. Het crawl-script leest de geprerenderde HTML, bouwt de verwachte routeset op uit de brondata en meldt gebroken interne links en pagina's die vanaf de homepage niet bereikbaar zijn. Het schema-script parseert de JSON-LD van de gerenderde pagina's en controleert of de vereiste velden per type aanwezig zijn, tot en met de vraag of een FAQ-item wel een vraag en een antwoord heeft. Bij tientallen programmatische pagina's is dat het verschil tussen aannemen dat het klopt en het zien.

Naast de tools en de referentiepagina's staan er drie dingen die er vooral zijn om aanleiding te geven naar de site te linken. Er is de mega-referentie op /reference die de codes met hun charts in één pagina met inhoudsopgave verzamelt. Er is een gratis statische JSON-API met zeven bestanden, zonder sleutel en zonder registratie, die een prebuild-script uit de vertaaltabellen wegschrijft naar public/api, zodat hij als platte bestanden van de CDN komt. En er is een widget die andere sites met één regel HTML kunnen insluiten, met een eigen root layout zonder site-chrome, bewust op noindex en buiten de sitemap gehouden omdat hij alleen bestaat om in een iframe te leven.

Het strategiedocument zet autoriteit opbouwen op één, linkbaar zijn door ontwerp op twee en organisch verkeer op drie, in die volgorde. Dat is een geduldig plan voor een domein dat in juli 2026 live ging, en we behandelen het ook zo. De site heeft huisregels die we niet oprekken (Engelse copy, alleen fictieve voorbeeldnamen, geen AI-features, geen em-dashes) en een changelog die bijhoudt wat er verandert. Op de lijst voor de volgende ronde staat het API-script zelf: dat houdt zijn eigen kopie van de morse- en braille-tabellen aan in plaats van die uit de engine te lezen. Vandaag komen ze overeen, maar het zijn twee bronnen voor dezelfde waarheid, en die duplicatie willen we eruit hebben voordat ze ooit uit elkaar lopen.

Voor wie ons werk beoordeelt is CipherPad vooral een bewijsstuk. Het laat zien dat we een niche kiezen op data en niet op onderbuik, er een merk omheen ontwerpen dat bij het onderwerp past in plaats van een template op te tuigen, het bouwen in een stack die we tot in de laatste dependency verantwoorden, en de vindbaarheid inrichten als onderdeel van de architectuur in plaats van als iets dat er achteraf overheen gaat. Dit is werk dat we zelf bouwen, zelf onderhouden en zelf blijven verbeteren.