Achter de schermen (Deel 2): Spoken in de Code 👻

Lieve haaksters,

Spoken in de Code. Je kent het wel: je bent bezig met een prachtig, ingewikkeld haakpatroon. Je telt braaf elke steek hardop mee, houdt je hoofd erbij, zet de tv uit voor de nodige concentratie en aan het einde van de toer... kom je tóch een steek tekort. Je telt nog een keer. En nog een keer. Je haalt de hele toer gefrustreerd uit (hallo uithaal-vros!), begint opnieuw, telt nóg strenger, en aan het einde klopt het wéér niet. Alles klopt op papier, maar je werk weigert simpelweg mee te werken.

Nou, trek die frustratie maar eens door naar de achterkant van een website. Dat is precies het digitale spookverhaal waar ik de afgelopen week in leefde. Pak er een extra grote kop koffie bij, want dit is het verhaal van hoe één klein, onschuldig lettertje me bijna tot complete waanzin dreef.

De jacht op de wekelijkse deken-delen - Spoken in de Code

Tijdens deze grote websiteverbouwing wilde ik één specifiek ding heel graag oplossen voor onze grote dekenprojecten (de Crochet-A-Longs, of CAL's). Als je momenteel op de website zoekt naar de Seaside Deken, wil je gewoon op de prachtige hoofdpagina van die deken terechtkomen. Een centrale plek waar alle informatie, de materiaaleisen en de algemene opzet overzichtelijk bij elkaar staan.

Wat je niet wilt, is dat je in het grote overzicht van alle haakpatronen direct 31 losse pagina’s om je oren krijgt: Seaside Deken Week 1, Week 2, Week 3... tot en met Week 31. Dat vult het scherm met tientallen dezelfde plaatjes, het is onoverzichtelijk voor jullie als bezoekers, en Google wordt er ook niet bepaald vrolijk van (die houdt namelijk niet van dertig pagina's die bijna hetzelfde zijn).

Mijn plan was achter de schermen heel simpel: ik maak een magisch, onzichtbaar vinkje in het systeem. Als ik dat vinkje bij een pagina aanzet, verdwijnen de losse weken netjes uit de algemene archieven en zoekresultaten, maar blijven ze natuurlijk wel gewoon perfect bereikbaar via de hoofdmap van de deken zelf. Klinkt logisch en eenvoudig, toch? Nou, de techniek dacht daar heel anders over.

Digitale Ghostbusters en zwaar geschut - Spoken in de Code

Ik zette vol goede moed het vinkje aan bij de eerste reeks weekpagina's, vernieuwde de website en... er gebeurde helemaal niets. De losse weken bleven onverstoorbaar op het scherm verschijnen, alsof ze me stonden uit te lachen.

Toen begon een dagenlange, uitputtende zoektocht. Samen met mijn slimme AI-hulpen kroop ik diep in de website-code om steeds zwaarder digitaal geschut te bouwen. We schreven ingewikkelde filters om de database te dwingen deze pagina's over te slaan. Toen dat niet werkte, werden we bijna wanhopig en bouwden we een zogenaamde MutationObserver in de code van de website.

Dat klinkt als een buitenaardse schurk uit een sciencefictionfilm, maar zie het als een soort digitale bouncer die 24 uur per dag in de browser van je computer of telefoon de wacht houdt. Zodra de website achter je rug om stiekem toch een verborgen weekdeel op het scherm probeerde te toveren, moest deze code dat element binnen een milliseconde herkennen en hardhandig uit de HTML wissen.

En het resultaat van al deze slapeloze nachten en ingewikkelde codes? Niets. Nul. Noppes. De website bleef zo koppig als een ezel. De editor crashte zelfs een paar keer met angstaanjagende, cryptische foutmeldingen. Ik stond op het punt om mijn laptop uit het raam te gooien of een digitale exorcist te bellen.

De ultieme programmeurs-facepalm 🤦‍♀️- Spoken in de Code

En toen kwam de ontknoping. Na urenlang turen naar honderden regels code, het voor de zoveelste keer leegmaken van de website-cache en heel diep zuchten, stuitten we ineens op de dader.

Achter de schermen van WordPress gebruik ik een prachtig systeem om die vinkjes aan te maken. Bij het inrichten van dat systeem had ik het vakje de naam verbergen_in_overzichten (meervoud, met een 'en' aan het einde) gegeven. Maar in de tientallen regels complexe code die we vervolgens hadden geschreven om de website aan te sturen, zochten we de hele tijd naar... verbergen_in_overzicht (enkelvoud).

Één. Sullig. Lettertje. Verschil. De website zocht al die dagen braaf naar een vinkje dat in de database simpelweg niet bestond, waardoor de lijst met te verbergen pagina's telkens leeg bleef!

Het was de ultieme programmeurs-facepalm. Het is alsof je een hypermoderne, onkraakbare kluisdeur in je huis laat bouwen, om er vervolgens achter te komen dat de sleutel die je in je hand hebt een millimeter te kort is waardoor hij niet omdraait.

Eind goed, al goed - Spoken in de Code

Gelukkig maakte de frustratie al snel plaats voor een enorme lach van opluchting. Het foutje werd hersteld, de 's' werd toegevoegd, het spook is uit de code en de website luistert weer als een zonnetje! Het mooie is dat al die zware, trage JavaScript-hacks nu direct overboord konden. De database filtert nu vlijmscherp op de achtergrond, precies zoals ik het in gedachten had.

Nu dit grote struikelblok is opgelost, kunnen de digitale verhuiswagens eindelijk gaan rijden. Want hoe zorg je ervoor dat áls een pagina achter de schermen naar een heel nieuw plekje verhuist, jullie (en jullie Pinterest-borden!) niet per ongeluk voor een dichte deur komen te staan? Dat geheim verklap ik je in deel 3!

Haakgroetjes, Iris

Dit is deel 2 van de serie Achter de Schermen. Deel 1: De Grote Digitale Verhuizing Volgende keer in deel 3: De Digitale Verhuiswagen