Het begon eigenlijk heel onschuldig. Een groene WhatsApp-knop rechtsonder in beeld, met een zacht ademend pulsje. Klik erop, WhatsApp opent en klaar. Niets bijzonders. Precies zoals je die op duizenden websites ziet.
De eerste keer dat de knop iets méér werd, was 's avonds. Een felgroene knop die om middernacht nog vrolijk staat te pulsen alsof ik gewoon bereikbaar ben, voelde niet logisch. Daarom kreeg de knop een nachtstand. Hij verkleurde naar donker, het WhatsApp-logo maakte plaats voor een maan en daaromheen verschenen vijf gouden sterren die om de beurt zachtjes fonkelen.
Dat fonkelen leverde meteen het eerste technische gevecht op. De sterren bleven namelijk "spoken". Resten van de animatie verdwenen niet netjes als de knop overdag weer groen werd. Uiteindelijk bleek de oplossing simpel, maar wel precies: de sterren met !important forceren en de animatie via JavaScript aanzetten en weer verwijderen. Sindsdien fonkelen ze alleen wanneer ze moeten.
Toen dacht ik: kan de knop niet meebewegen met het daglicht?
Ik besloot dat wél te doen, maar niet tijdens mijn openingstijden. Van 09:00 tot 19:00 blijft de knop gewoon groen. Groen betekent: ik ben bereikbaar. Pas na 19:00 zakt hij langzaam en realtime richting de nacht en vóór 09:00 kruipt hij weer terug naar groen. Eerlijk, duidelijk en zonder verwarrende kleurtjes terwijl ik gewoon aan het werk ben.
En toen kwam het idee dat alles veranderde.
Waarom niet een warme gloed tijdens zonsondergang? Net zoals de eerste zonnestralen in de ochtend een zachte gloed geven die langzaam verdwijnt. Met daarachter die bekende opmerking van mezelf: "Waarom doe ik dit?", omdat ik eigenlijk ook wel wist dat ik iets bedacht wat totaal niet nodig was.
Maar juist dát maakte het leuk. Niet alleen de kleur verandert, ook de knop krijgt een warme gloed die langzaam opkomt rond zonsondergang en daarna weer verdwijnt in de nacht. 's Ochtends gebeurt precies het tegenovergestelde. Vrijwel niemand zal het bewust opmerken, maar onbewust voelt het gewoon goed.
Toen werd het pas echt interessant.
"Rond zonsondergang" zegt eigenlijk niets als je niet weet wanneer de zon daadwerkelijk ondergaat. In juni is dat in Schagen immers heel anders dan in december.
Daarom heb ik niet een weer-API gebruikt en ook geen externe dienst. In de knop zit nu een astronomische berekening die aan de hand van de datum en de coördinaten van Schagen (52.79, 4.80) zelf uitrekent wanneer de zon opkomt en ondergaat. Elke keer dat iemand mijn website bezoekt 😉
Het mooiste vind ik dat alles automatisch rekening houdt met de seizoenen én met zomer en wintertijd. In de zomer komt de zon vroeg op, in de winter veel later. En als de klok wordt verzet, schuift de knop vanzelf mee. Ik hoef er nooit meer naar om te kijken. De knop kijkt als het ware naar de echte hemel boven Schagen.
Alleen een zonsopkomst en zonsondergang vond ik uiteindelijk niet genoeg.
Daarom kwamen er twee schemer icoontjes bij, als elkaars spiegelbeeld. Dezelfde horizon, dezelfde halve zon en dezelfde schuine zonnestralen. Alleen de pijl verschilt. Omhoog voor de ochtendschemer in koelblauw en omlaag voor de avondschemer in warm roodbruin.
Zo ontstond een compleet systeem van vier fasen: nacht, ochtendschemer, zonsopkomst en dag. En 's avonds precies dezelfde reis terug.
Daarna begon het eigenlijk een beetje uit de hand te lopen.
Tussen 12:30 en 13:00 verandert de knop in een vork en mes met de tekst "Zo terug". Ook ik moet tenslotte af en toe even eten.
En tijdens werktijd zwaait de knop af en toe even naar bezoekers. Gewoon een handje dat eens in de paar minuten verschijnt. Niet omdat het moet, maar omdat het een klein vriendelijk detail is.
Op een gegeven moment wilde ik ook dat contact opnemen nóg makkelijker werd.
Als iemand nu op de knop klikt, klapt er een net menu open met drie verschillende opties. Elke keuze vult alvast een passend WhatsApp-bericht in, zodat bezoekers veel sneller hun vraag kunnen stellen.
Een van de slimste toevoegingen vind ik misschien wel deze.
Wanneer iemand een productpagina bekijkt, weet de knop precies over welk product het gaat. In het menu verschijnt dan automatisch een vierde optie. Kiest een bezoeker daarvoor, dan wordt het WhatsApp-bericht alvast aangevuld met de naam van het product én de link naar die pagina. Daarna hoeft de klant alleen zijn eigen vraag nog te typen. Daardoor zie ik direct over welke laptop of pc het gaat en hoef ik niet eerst uit te zoeken welk product iemand bedoelt. Dat scheelt tijd voor mij én maakt het makkelijker voor de klant.
Natuurlijk ging niet alles in één keer goed.
Op mobiele telefoons verscheen er soms een vreemd "ei" achter het icoon. Eerst dacht ik dat het door de schaduw kwam, maar die bleek prima in orde. Uiteindelijk zat de boosdoener in een witte rand rondom het ronde icoon. Op een witte achtergrond viel die niet op, maar op mijn blauwgroene achtergrond veranderde die in een lichte ovale ring.
Toen ik eenmaal wist waar het vandaan kwam, was het gelukkig snel opgelost. En laten we het maar niet hebben over de vele andere bugs die onderweg voorbij zijn gekomen.
Ook de sterren boven de maan vroegen meer werk dan je zou verwachten.
Die moest ik echt op een telefoon controleren, want in een browser zien ze er anders uit dan in je hand. De ene ster een paar pixels naar links, de volgende iets omhoog, weer een andere een fractie opzij. Net zo lang schuiven tot alle vijf netjes vrij van de ronde rand stonden.
Een typisch voorbeeld van iets waar bijna niemand ooit op let, maar waar stiekem best veel tijd in is gaan zitten.
Tijdens het bouwen heb ik misschien wel het vaakst de woorden gehoord: "Dat kan niet."
De browser kon iets niet. CSS liep vast. JavaScript werkte niet mee. Of een bepaalde oplossing zou simpelweg onmogelijk zijn.
Dat soort antwoorden werken bij mij eigenlijk averechts.
Niet omdat ik per se mijn zin wil doordrijven, maar omdat "het kan niet" voor mij meestal betekent dat we de juiste route nog niet hebben gevonden. Dan begint het echte puzzelen. Een stap terug, vanuit een andere hoek kijken, bestaande technieken combineren of het probleem helemaal omdraaien. Net zo lang tot het wél werkt.
Dat ging lang niet altijd zonder frustratie. Er zijn momenten geweest waarop ik dacht: laat maar. Om vervolgens een uur later alsnog de oplossing te vinden via een compleet andere aanpak. Achteraf bleken juist die momenten vaak de basis voor de leukste toevoegingen.
Als ik nu naar die knop kijk, zie ik niet alleen een stukje code. Ik zie tientallen momenten waarop "nee" uiteindelijk toch "ja" werd. Niet door koppig tegen dezelfde muur te blijven lopen, maar door eromheen te denken.
Wat begon als een simpele groene WhatsApp-knop is uitgegroeid tot een klein onderdeel van mijn website dat met de dag meeleeft.
's Ochtends warmt hij langzaam op, overdag is hij groen en bereikbaar, tijdens de lunch eet hij even mee, 's avonds verdwijnt hij in een warme gloed en 's nachts staat hij rustig onder een maan met vijf fonkelende sterren.
Alles gebaseerd op de echte zon boven Schagen. Helemaal automatisch, zonder dat ik er ooit nog iets aan hoef te doen.
Niet omdat het moest.
Maar omdat het kon.
En omdat ik het gewoon leuk vond om te maken.