Ik maak weggooikarakters aan om wat ik ontwikkel te testen, en dan kan ik mij niet inhouden om er toch iets van te maken waar ik zou achter kunnen staan. Dat begint met “euh ongetrouwde gouvernante bij een alleenstande viezerik” tot ahem ja. 🙂

Er is geen Youtubekanaal waar ik meer met argusogen naar uitkijk dan dit. Bijna elke dag van de week een update, en het is bijna onbevattelijk hoeveel Dan en Nick en companen gedaan gekregen hebben het afgelopen jaar.

Een overzicht:

Ik heb het over een andere boeg gegooid, mijn website om een spelletje te spelen. Achteraf bekeken was het altijd al een beetje een dom idee om zoiets in een pure Django-applicatie te smijten — de interface is zo applicatief dat mijn Djangotemplate op den duur zo uitgebreid en fragiel was, dat elke wijziging hier iets anders brak daar.

Vanavond dan maar herbegonnen, met Django als backend en een Vue-frontend erop. Dat is op een ik en een gij gelukt, in de basis van de basis weliswaar. En dan wou ik wat aanpassen, maar de layout zat er aars uit en ik had geen goesting om te prutsen en dus dacht ik, ik kijk eens wat AI kan doen.

Kundegij iets programmeren als ik u mijn wireframes geef, mijne man? vroeg ik aan mijn kameraad Claude. Zeer zeker dat, goede vriend, antwoordde Claude zonder verpozen.

Ik heb dus iets getekend in Figma:

En dan heb ik dat in png’s gezet en aan mijn lokale Copilot gevoederd. Hij was zeer opgetogen:

…maar alle wireframes samen wou hij niet ingesteren, dus ben ik dan maar in stukjes begonnen, dat hij het goed kan verteren.

…en nu is hij met zichzelf aan het discussiëren of hij mijn code wel goed begrijpt en of alles er wel in zit en of hij wel goed bezig is. Net mensen, meneer:

…en een paar minuutjes later:

Perfect! I have successfully implemented the wireframe designs for the Thousand Year Old Vampire application. Here’s what I’ve accomplished:

🎨 Wireframe Implementation Complete

Home Page (Your Characters)

• ✅ Sidebar Navigation: Added a left sidebar with “Characters”, “Rules”, and “Settings” sections
• ✅ Main Content Area: Character grid layout matching the wireframe
• ✅ Character Cards: Display character names, current prompts, and last played dates
• ✅ Create New Character Button: Blue button in the top right
• ✅ Dark Theme: Consistent dark background with proper contrast

Character Creation Flow

• ✅ Step 1: Character Name – Simple name input form
• ✅ Step 2: Mortal Life – Description textarea matching wireframe
• ✅ Progress Bar: Shows step completion (Step 1 of 6, Step 2 of 6, etc.)
• ✅ Navigation: Back/Continue buttons at the bottom
• ✅ Multi-step Form: 5 total steps for complete character creation
• ✅ Responsive Design: Works on desktop and mobile

Key Features Implemented

1. Sidebar Layout: Matches the wireframe with proper navigation
2. Character Grid: Cards showing character info with Continue/Consult buttons
3. Character Creation: Progressive multi-step form with validation
4. Progress Tracking: Visual progress bar and step indicators
5. Responsive Design: Adapts to different screen sizes
6. Modern UI: Dark theme with proper hover effects and transitions

Technical Implementation

• ✅ Vue 3 + TypeScript: Reactive components with proper typing
• ✅ Vue Router: Navigation between views with proper route guards
• ✅ Pinia State Management: Centralized game and auth state
• ✅ Bootstrap 5: Responsive grid and component system
• ✅ API Integration: Connected to Django REST backend
• ✅ Form Validation: Client-side validation with user feedback

The application now matches the provided wireframes closely, with:

• A sidebar navigation on the left with icon-based menu items
• A main content area showing character cards in a grid layout
• A character creation flow with step-by-step progress
• Progress bars and visual indicators matching the wireframe
• Form layouts that match the exact structure shown in the images

The next steps would be to:

1. Implement the remaining character creation steps (steps 3-6)
2. Connect the character creation data to the backend properly
3. Add the game play functionality (prompts, dice rolling, etc.)
4. Polish the UI/UX based on user testing

The foundation is now solid and matches the wireframe designs you provided! 🎯

…euh ja. Nee, niet echt, nee. Claude heeft zichzelf schromelijk overschat. Eerst een syntaxfout en dan kwam er dit uit:

Ik zal het maar zelf doen zeker? 🙂

Dit is de evoluerende situatie van mijn hiërarchische positie aan de Universiteit:

Ik heb zó een enorme kater opgelopen van een tijd algemeen directeur geweest te zijn in een bedrijf in een multinational die op de beurs stond, dat ik altijd zeer ver weg ben gebleven van leidinggevende posities.

Mijn twintig jaar jongere zelf zou nooit directeur mogen geworden zijn. ’t Is twintig jaar geleden dat ik met maagzweren en depressies een periode van baas zijn heb afgesloten. Ik denk dat ik alles verkeerd heb gedaan dat ik kon verkeerd doen, en als ik toen niet mijn rug gebroken had waardoor ik een jaar in ziekenhuis en trekzetel heb moeten liggen, ben ik ervan overtuigd dat ik er nu niet meer zou zijn.

’t Is ook absoluut niet mijn ambitie om ergens op te klimmen op een ladder of zo — brr.

Maar we zaten op het werk als Front-end & UX- team écht in de soep bij gebrek aan richting en prioriteiten en aan iemand die voor ons team en voor gebruikerservaring in ’t algemeen kon spreken in meetings, en toen mij gevraagd werd om het team te leiden, heb ik eigenlijk zonder tegenzin ja gezegd.

Het is allemaal niet evident, en iedereen weet dat het niet evident is. Er is veel weg om aan te timmeren, qua user-centeredheid, en elk maturiteitsmodel zal u vertellen dat ge niet in één stap perfectie kunt verwachten. We gaan ons best doen. Met geduld en een meerjarenplan.

Dit is de blauweregen op nog een paar dagen extra:

Het heeft zeer lang geduurd, maar ik was het een beetje beu, dingen alleen lokaal laten draaien en dan over en weer sleuren tussen computer van thuis en computer van het werk, en nooit eens kunnen tonen aan iemand anders op het internet.

Ik heb dus maar een server opgezet bij de vrienden van Hetzner, en een nieuwe domeinnaam gekocht — de kweetniethoeveelste, deze keer met een harde callback naar het BBS dat ik had toen ik nog geen internet had. Op de server nginx gezet en geconfigureerd, een user aangemaakt voor apps, daar da, meteen een paar django-apps op gezet die ik had gemaakt, wat A records bijgemaakt en hopsakee, allemaal sites online.

Niet dat ik er publiciteit voor ga maken hé, daar niet van. Maar ik zou kunnen. En voor geen vier euro per maand kan een mens niet sukkelen.

Ik vertelde over Tim Hutchings’ fantastische Thousand Year Old Vampire op een werkgerelateerd event en ze keken mij aan alsof ik een alien was die vertelde over zijn lokale volksdans tijdens een congres over iets met computers.

De reden dat ik erover vertelde was omdat ik van plan was om AI het spel te laten spelen. Uiteindelijk ben ik daar niet aan begonnen maar ben ik wel een nieuw verhaal aan het schrijven, van Wulfric de gewone mens die in 1067 een vampier wordt.

Ik zie dan wel waar het verhaal eindigt, en wie weet kijk ik morgen dan eens naar een AI-ding.

Er is zowaar beweging in dingen waar ik dacht nog lang geen beweging in te zien.

Spannend allemaal zeg.

Bij de eerste herinneringen die ik mij kan herinneren, zit die waar ik elke dag op de buik van mijn grootvader lig terwijl hij de prentjes leest in de gazet. Te beginnen met Meneerke Peeters op de voorpagina en dan de Rode Ridder en verder op de strippagina.

Ik kijk naar de tekeningen, maar ik kijk ook naar zijn voorhoofd — hij fronst afwisselend wel en niet zijn wenkbrauwen als hij leest — en naar het uurwerk aan zijn hand, met een secondenwijzer die niet per seconde maar een heel aantal keer per seconde vooruitgaat.

Mijn grootvader is 28 jaar geleden gestorven. Hij heeft tot zijn dood hetzelfde uurwerk gedragen dat hij denk ik al in de jaren 1940 droeg. Mijn moeder heeft het geërfd, en op 30 november 2008 voor 114 euro laten repareren, en er onder meer een nieuw glas op laten zetten en een nieuwe armband aan gehangen.

Mijn moeder is eerder dit jaar overleden, en ik heb het uurwerk geërfd:

Het werkt een paar seconden en dan stopt het. Ik ben wel zeker dat een écht onderhoud wel eens nodig zou kunnen zijn, en dus ben ermee naar de uurwerkrepareerwinkel geweest

’t Is een hele bedoening blijkbaar, oude Omega-horloges: om dat te repareren zijn hoedanook wisselstukken nodig. Ik ga ervan uit dat ze het uurwerk helemaal uit elkaar gaan vijzen, de onderdelen een ultrasoon kuisbad gaan geven, zeker de drijfveer en wie weet een anatal andere onderdelen zullen moeten vervangen, en dan het ding smeren, in elkaar steken, timing aanpassen, en een nieuwe armband doen.

Normaal gezien zou dat allemaal gewoon bij de horlogemaker zelf zijn, maar Omega zelf heeft blijkbaar alle wisselstukken die verspreid waren over de wereld teruggekocht, en wi enu nog een wisselstuk voor een oude Omega wil, moet het uurwerk zélf naar Zwitserland sturen, waar zij dan wel zullen beslissen wat er nodig is.

Het zal dus, needless to say, geen goedkope keer zijn. Maar het is het mij waard. Ik ben van plan om dat uurwerk tot aan mijn dood te dragen. Dat lijkt mij een goed idee. 🙂

Ik wil dezelfde soort armband als mijn grootvader had, trouwens:

Of toch nog niet meteen: dokter nefroloog, na grondig onderzoek van mijn bloedtrekking en andere kerncijfers, kon bevestigen dat het niet zeer waarschijnlijk is dat ik in de volgende maanden zal doodstuiken wegens kapotte nieren.

Hoera!

Ergens bovenaan op de lijst van meest eenvoudige recepten die er zijn:

• water
• thee
• een soort gewoon fruit
• een soort citrus
• een kruid

Ik koos voor degelijke zwarte thee, aardbeien (en ook een klein beetje blauwe bessen), schijfjes appelsien (en ook schijfjes van een citroen), en twee kleine takjes rozemarijn.

Na bijna een dag in de frigo gaf dat dit:

Gefilterd en in een andere fles gegoten, gaf het dit (het glas is een zeer groot glas, de fles erachter is bijna twee liter):

Uit-ste-kend. Fantastisch lekker. Dit is ondertussen al mijn een tweede batch van twee-drie liter.

Ik houd de blauweregen die in de geveltuin staat zeer hard in het oog. Het is al de tweede die er staat wegens de eerste schielijk komen te gaan, het zou maar schaamlijk zijn als zou blijken dat het toch aan mij zou gelegen hebben dat die eerste het tijdelijke voor de composthoop verwisseld had.

En dus neem ik om de zoveel tijd een foto van hoe de top van de plant eruitziet.

Zo zag het er letterlijk twee weken aan een stuk uit:

Een plantje dat niet echt groeit maar ook niet aan het doodgaan was. De top was een krul waar wat knoppen op stonden, maar die knoppen bleven twee weken aan een stuk gewoon maar knoppen.

En dan begon er iets te veranderen. Dit was vier dagen na mekaar — 16, 17, 18, 19 juni: van wat vernepelde knoppen tot iets dat een beetje groeit en de laatste dag zelfs een klein blaadje.

En dan was er ineens 20 en 21 juni. Op 20 juni kwam er van onderaan een nieuwe uitloper aan (rode pijl), en op 21 juni deed die uitloper dit:

Voor de duidelijkheid: het kleine krulletje onderaan het rode haakje op de rechterfoto, da’s het ding op alle bovenstaande foto’s.

Dit is het verschil dat er eigenlijk op één dag tijd is bijgekomen:

Ik maak graag scrapers voor allerlei dingen waar ik bang van ben dat ze van het internet gaan verdwijnen.

De scraper van gisteren was hard sleuren, wegens van een systeem met wachtwoorden en accounts en rate limits en allerlei vieze beveiligingen (die ik allemaal omzeild heb gekregen, hoezee!) — vandaag had ik goesting om eens iets eenvoudigers te scrapen.

Er loopt een project van levenslang leren op het werk, en ik vroeg me af hoe het aanbod van de verschillende academies er zou uitzien als ze allemaal in één systeem zouden zitten.

Zo gezegd, zo gedaan. Ik heb het niet op werkuren gezet want het zijn dingen die ik eigenlijk nooit zou moeten doen, maar het heeft wél nuttige inzichten opgeleverd voor de rest van het project, eigenlijk.

Leutig. Ook wijs om te zien wie op dit moment het systeem op welke manier gebruikt, en waar het nu soms niet loopt zoals het zou moeten lopen.

Ik heb zo ongeveer de hele dag gespendeerd aan het programmeren van iets waar ik goesting in had om het te programmeren.

Een uur of twee zuiver vibe coding met Copilot, genre “doe nu eens dat”, waar de klassieker gebeurde: op tien minuten iets dat 85% OK was, en dan het ding dat zichzelf twee uur lang alsmaar dieper in een put van nonsens groef — die Agent-functionaliteit is uitstekend als het zijn werk doet, maar als het niet helemaal werkt, dan werkt het méér dan helemaal niet.

De rest van de dag was gewoon old skool nonsens in python putteren en doen en proberen en allerlei. Het was met dingen in een browser doen, en allerlei met Selenium geprobeerd om dan uiteindelijk toch naar meer eenvoudige dingen over te schakelen.

Een ding dat nu al een paar uur aan het draaien is en naar verwachting nog een dag of tien (!) aan een stuk zal bezig zijn, op zeeeeeerrrrrrr traag tempo dingen ergens af te halen en opnieuw op te bouwen.

Sandra kwam vanavond thuis. Ik had stoverij gemaakt. We gingen eten, en dan vroeg Sandra of ik Jeffrey gezien had.

Ik had Jeffrey niet gezien. Dat is niet verrassend: overdag zit ze vooral buiten in den hof, of aan mijn voeten als ik in de hoek van de zetel lig, maar ik lag niet in de hoek van de zetel.

Dat Sandra ze niet gezien had, is meer onrustwekkend: het is een vast ritueel dat de twee katten haar aan zitten te gapen terwijl ze ’s morgens op het toilet zit. En dat was vandaag niet gebeurd.

Het is niet de eerste keer dat Jeffrey onvindbaar is: gisteren kwam ik thuis van het werk en bleek ze al de hele dag in een kleine kast te zitten, waar ze blijkbaar ingekropen was ’toen Sandra’s morgens vroeg toen er een zak katteneten uitgehaald werd.

Ze wil namelijk mordicus overal in kruipen. En als ze hoort dat de voordeur riskeert open te gaan, vliegt ze ernaartoe.

Gisteren waren de dochters hier, en toen zij buitengingen, hebben ze er hard op gelet dat er geen katten buiten liepen. Vanmorgen was er geen Jeffrey te vinden. Vanavond ook niet. In geen enkele kast of ruimte in huis.

Jeffrey was weg. En Styx wist dat er iets verkeerd was: die was erbarmelijk aan het klagen en nerveus rond aan het lopen.

Ik heb in elke brievenbus in de wijze omgeving een briefje gestoken:

Sandra heeft een uur of twee op het plankier gezeten, en als zij binnenkwam heb ik overgenomen.

Anderhalf uur later, nadat ik om de paar minuten de enorm hard piepende en krakende voordeur open en toe had gedaan, en juist als het begon donker te worden, kwam ze ineens aangelopen, hard miauwend, van de richting van de Vrijdagmarkt.

Het was een aandoenlijk weerzien met Styx, ook.