MyGearCheck

Zoekopdrachten als "keyboard test", "mic test" of "dead pixel test" komen vrijwel altijd uit een moment van twijfel. Er is een toets die niet meer doet wat hij moet doen, een vergadering waarin niemand je hoort, een tweedehands monitor die net binnen is en waarvan je wilt weten of je hem moet houden. De zoeker heeft geen vraag over een product, maar over zijn eigen apparaat, en wil daar binnen een halve minuut uitsluitsel over. Dat maakt de intentie ongewoon scherp: er is in feite één taak, en alles wat tussen de bezoeker en die taak staat, is verlies.

We hebben MyGearCheck daarom vanaf de eerste regel om die ene taak heen gebouwd in plaats van om een merkverhaal. De positionering die we in seo-strategy.md hebben vastgelegd bestaat uit drie beloftes die door de copy heen terugkomen: geen download, geen account, en niets dat wordt geüpload. Dat zijn geen slogans maar randvoorwaarden, want ze bepalen welke technische keuzes daarna nog open staan. Wie belooft dat er niets wordt geüpload, sluit daarmee serverzijdige verwerking van wat de bezoeker invoert uit. Datzelfde document legt ook vast dat privacyclaims accuraat moeten blijven en dat de privacy-pagina meebeweegt als er ooit tracking bij komt.

Er zit ook een strategische reden achter de keuze voor hardware-diagnostiek specifiek. Het is een onderwerp waarin de browser inmiddels genoeg kan om een echte meting te doen, van toetsaanslagen tot audio-analyse tot controller-uitlezing, terwijl de zoekvraag stabiel en jaarrond is. Het is met andere woorden een niche waarin een goed gebouwde, snelle site het kan winnen van een site die alleen maar bestaat, en dat is precies het soort terrein waarop wij onze eigen tool-sites neerzetten.

Het ontwerp vertrekt vanuit één gedachte: dit is geen website over hardware, dit is een instrument. De site is donker (achtergrond #0a0e14, panelen #111823), met een cyaan accent (#22d3ee) dat door de interface loopt en een groene pass-kleur (#4ade80) voor alles wat goed gaat. Over de achtergrond ligt een fijn raster van twee gradient-lijnen op 44 pixels, met daarboven een radiale gloed die het beeld naar het midden trekt. Het effect is dat van een strak verlicht meetpaneel in een verder donkere ruimte, wat precies de aandacht geeft die een test nodig heeft.

De merktaal zit verder in de details. De tool-kaartjes dragen een korte statuscode in mono, van READY op de toetsenbord-, keycode- en muistest tot TPAD, MIC, CAM, SPKR, SCAN, PAD en INFO verderop, zodat het dashboard leest als een rij instrumenten die elk hun eigen kanaal bewaken. Daarnaast loopt er een vaste cyaan led door de chrome van de site: op de kaarten, in de eyebrow boven de H1 en in de footer. Die led houdt op die drie plekken dezelfde kleur, want hij is een merksignatuur en geen meting. Binnen de tools doet dezelfde indicator wel echt werk, want daar verschijnt hij naast een uitslag die klopt, zoals de melding dat de rollover goed is of dat er een toon op het gekozen kanaal speelt.

De typografie zet Inter tegenover JetBrains Mono, waarbij de mono-variant gereserveerd is voor alles wat als uitlezing of commando moet lezen: het logotype, de zoekbalk met haar prompt-teken, de kruimelpaden, de statuscodes en de call-to-action "run test ->". Zo krijgt de bezoeker het gevoel dat hij een apparaat bedient, zonder dat er een stap extra bij komt. Belangrijk voor ons is dat dit systeem met de hand is geschreven en niet uit een template komt. Er zit geen CSS-framework in, geen componentbibliotheek en geen thema. In plaats daarvan bestaat globals.css uit custom properties op :root en daaronder blokken per onderdeel, van de header en het dashboard tot de keyboard-tester, de gamepad-weergave, de fullscreen-modus en de prose. Dat kost meer werk aan de voorkant, maar het levert een merk op dat van niemand anders is en een bundel die niets meesleept wat de site niet gebruikt.

De suite bestaat uit elf tools, ondergebracht in vier categorieën: Input devices (toetsenbord, key code viewer, muis, touchpad, gamepad), Audio & video (microfoon, webcam, speakers), Display (dead pixel, monitor) en System (screen info). Die indeling is geen navigatietrucje, maar de structuur van de site zelf: elke categorie heeft een eigen pagina die uit dezelfde databron wordt gegenereerd, inclusief eigen beschrijving, eigen metadata en een eigen ItemList in de structured data.

Onder de tests zit een native browser-API en verder geen dienst van buiten. De toetsenbordtest luistert naar keydown en keyup en spiegelt die op een virtueel toetsenbord, waarmee ook n-key rollover te controleren is door meerdere toetsen tegelijk vast te houden. De microfoontest gebruikt getUserMedia met createMediaStreamSource en createAnalyser, dus de meter beweegt op een analyse die in het geheugen van de browser gebeurt zonder dat er iets wordt opgenomen. De speakertest bouwt een oscillator met een stereo-panner en zet de pan op -1, 0 of +1 om links, rechts en beide kanalen los te kunnen controleren.

De rest volgt hetzelfde patroon en gaat soms verrassend ver in detail. De gamepadtest pollt via requestAnimationFrame en markeert stick drift zodra een as meer dan 0.15 uitslaat terwijl je niets aanraakt, wat het verschil is tussen een vaag vermoeden en een meting. De dead-pixeltest schakelt naar fullscreen en loopt met de pijltjestoetsen door negen volvlakskleuren, van zwart en wit tot cyaan en magenta, waarbij Escape je er weer uit haalt. De screen info-pagina leest resolutie, viewport, kleurdiepte, device pixel ratio en oriëntatie uit wat het systeem rapporteert, en schat de refresh rate door een seconde lang frames te tellen. Die schatting presenteren we ook als schatting, want dat is wat de browser hier kan bieden.

Technisch is MyGearCheck een Next.js 16 App Router-project op React 19 met TypeScript in strict mode, waarvan de routes bij de build worden voorgerenderd. Er is geen backend, geen database en geen runtime waarop iets kan wachten. De contentlaag is één TypeScript-bestand, lib/tools.ts, waarin elke tool zijn slug, titel, categorie, intro, body-alinea's, how-to-stappen en FAQ's meedraagt. De kaarten op de homepage, de categoriepagina's, de kruimelpaden op de tools en het tool-deel van de sitemap komen uit die ene bron. Een tool toevoegen komt daardoor vooral neer op één object schrijven; de route zelf blijft een dun bestand dat de tool-component in de gedeelde shell hangt.

De privacybelofte zit in die architectuur ingebakken in plaats van dat hij eraan is toegevoegd. Een grep over de app- en componentenboom levert één fetch-call op, en die zit in het contactformulier, dat de bezoeker zelf invult en verstuurt. De elf tools doen geen netwerkverzoek, dus wat je typt, zegt of voor de camera houdt tijdens een test blijft in het geheugen van je browser. Dat is een eigenschap die je in de repo kunt nagaan in plaats van een zin die je op de privacypagina moet geloven. Voor de bezoeker vertaalt dat zich in twee dingen tegelijk: een test die begint zodra de pagina er staat, en een test die je zonder aarzeling kunt draaien vlak voor een tentamen, een sollicitatiegesprek of een stream.

Diezelfde discipline hebben we doorgetrokken naar de onderdelen die de site ooit zouden kunnen vertragen. Zowel de advertentieplek als de consent-banner staan in de code, maar renderen niets zolang de omgevingsvariabele NEXT_PUBLIC_ADS_ENABLED niet expliciet op "true" staat. Ze zijn dus inert: geen script, geen cookie, geen layout shift, en het commentaar erbij legt vast dat er een echte gecertificeerde CMP moet komen voordat er ook maar iets aan gaat. Op die manier is de site voorbereid op monetisatie zonder dat de bezoeker vandaag de rekening betaalt in laadtijd.

Omdat de routes bij de build tot HTML worden voorgerenderd, krijgt een crawler dezelfde volledig gerenderde pagina als een bezoeker. Daar bovenop ligt een metadata-laag die per route is ingevuld. De zestien vaste pagina's en de categorieroute zetten allemaal hun eigen canonical via alternates en hun eigen description, zodat geen enkele route stilzwijgend op het adres van een andere uitkomt. De titels lopen bewust wél via overerving: de root-layout houdt een template vast die de merknaam achter elke paginatitel plakt, met een default-titel die de homepage gebruikt. De categorieroute zet dynamicParams op false, waardoor een onbekende slug netjes een 404 geeft in plaats van dat er een lege pagina wordt gerenderd die vervolgens geïndexeerd kan raken.

De structured data is per paginatype opgebouwd in plaats van generiek uitgestrooid. Tool-pagina's krijgen een graph met FAQPage, HowTo en BreadcrumbList, gevoed door dezelfde FAQ's en stappen die de bezoeker ook op de pagina ziet staan, dus zonder discrepantie tussen markup en zichtbare inhoud. Categoriepagina's krijgen CollectionPage, ItemList en BreadcrumbList, de homepage krijgt WebSite en ItemList. De sitemap gebruikt bewust een vaste lastModified in plaats van new Date(), met het commentaar erbij dat een datum die bij elke build opnieuw stempelt als valse versheid leest.

De OpenGraph-velden lopen voor de tool- en categoriepagina's via één helper in lib/site.ts, zodat titel, beschrijving, URL en afbeelding daar in dezelfde vorm terechtkomen. De vijf contentpagina's (home, about, contact, privacy en terms) gaan nog buiten die helper om en erven het OpenGraph-object uit de root-layout, waardoor /privacy op dit moment de og:title en og:url van de homepage meekrijgt terwijl de eigen titel en canonical wel kloppen. Dat is een loose end en geen ontwerpkeuze: de helper ligt er, die vijf routes moeten er nog doorheen. Rond die basis zit verder een schil die vooral over snelheid van oppikken gaat. De OG-image wordt gegenereerd via next/og in de huisstijlkleuren, robots.ts wijst naar de sitemap, public/llms.txt beschrijft de suite en linkt de tools per categorie, en scripts/indexnow.mjs meldt de sitemap-URL's aan bij IndexNow, handmatig te draaien na een deploy. Het contentbeleid zelf staat in seo-strategy.md: keyword-targets per route, als richtgetal ongeveer 500 woorden unieke uitleg met drie tot vier FAQ's per tool. In de praktijk zit er inmiddels ruim zesduizend woorden unieke prose in de contentlaag, waarbij de kortste tool net boven dat richtgetal uitkomt en de langste er ruim overheen gaat.

De eerste commit staat op 3 juli 2026, de meest recente ronde heette "SEO: content expansion, Ahrefs audit fixes, monetization readiness". Daartussen zit onder meer een rebrand: het project begon als CheckMyGear en werd MyGearCheck om op het domein te vallen, waarna we in seo-strategy.md hebben vastgelegd dat de oude spelling niet terug mag komen. Ook de suite is in die periode gegroeid, en die groei heeft een zichtbare naloop achtergelaten. De touchpadtest en de speakertest staan wel in de contentlaag, maar nog niet in de keyword-tabel van seo-strategy.md en nog niet in public/llms.txt, dat nu negen van de elf tools noemt. Samen met de vijf routes die hun OpenGraph nog uit de layout erven vormt dat de lijst voor de volgende contentronde. We schrijven dat hier op omdat het bij het werk hoort: een site die je uitbreidt zodra een zoekvraag het rechtvaardigt, loopt nu eenmaal met de randen achter op het midden.

Vandaag staat er een site van twintig statische pagina's, elf tools in vier categorieën, gebouwd op drie runtime-dependencies. Wat er niet staat, is net zo bepalend: geen backend om te onderhouden, geen database om te beveiligen, geen CSS-framework dat bij een major-versie het ontwerp meesleept, geen advertentiescript dat vandaag al meelaadt. Dat is geen minimalisme om het minimalisme, maar een keuze die de site goedkoop en snel houdt terwijl de content eromheen kan blijven groeien.

Voor wie ons werk beoordeelt, is dit vooral een bewijsstuk. MyGearCheck is geen showcase die we voor een pitch hebben gemaakt, maar een site die we zelf hebben bedacht, gepositioneerd, ontworpen, gebouwd, geoptimaliseerd en blijven onderhouden, met onze eigen naam eraan en zonder iemand die het risico voor ons draagt. De keuzes die erin zitten, van een eigen designsysteem tot structured data die klopt met wat er op de pagina staat tot een privacybelofte die je in de code kunt controleren, zijn dezelfde keuzes die we in ons werk voor anderen maken. Het verschil is dat we ze hier op onszelf hebben toegepast, inclusief de lijst met dingen die nog niet af zijn.