Ik kreeg onlangs een uitnodiging om eens te gaan ‘vibe coden’. Vibe coding is een manier van softwareontwikkeling waarin je een AI chatbot vraagt voor jou te programmeren. Jij geeft als gebruiker de chatbot instructies en de chatbot geeft je de code die je kunt uitvoeren. Deze manier van softwareontwikkeling gaat meer om de ‘vibe’ en minder om het hard programmeren. Vibe coding geeft amateurs de mogelijkheid om software te ontwikkelen zonder zelf veel kennis van programmeren te hebben.
Ik wilde het proces wel eens een keer doorlopen om te zien hoe moeilijk of makkelijk het is om software te ontwikkelen zonder zelf te kunnen programmeren. Ik ben zelf niet helemaal onbekend met programmeer- en opmaakcodes. Ik bouwde mijn eigen websites in de begindagen van het internet in HTML (goede oude tijd van Geocities). Ook heb ik op het HBO de basis van Java geleerd. Ik heb daarna zelf nog een beetje gevogeld met JavaScript, PHP, en CSS waarna ik het wel voor gezien hield. Ik ben echter niet in staat om zelf te programmeren. Ik kan het een beetje lezen, maar dat is het wel dan wel.
Dit artikel bestaat uit drie delen. In het eerste gedeelte beschrijf ik mijn vibe coding proces. Dit zal voor sommigen misschien wat technisch zijn, maar je krijgt hopelijk een redelijk beeld van het concept vibe coding, wat ik heb gedaan, en waar ik tegenaan liep. In het tweede gedeelte geef ik een reflectie op mijn evaringen en in het derde gedeelte kijk ik naar de mogelijkheden voor het onderwijs.
Prompten, Prutsen, Pomodoro
achtergrond en model
Ik wilde voor dit experiment een simpele, goed omsloten opdracht bedenken met eventueel een praktisch nut voor mijn leerlingen. Aangezien mijn eigen programmeerervaring in websites zit, wilde ik iets (laten) maken dat je in je browser kan draaien. Ik wilde iets offline hebben dat geen server nodig heeft (ik heb ervaring met XAMPP, maar dat zou het project onnodig complexer maken en minder bruikbaar voor mijn leerlingen). Uiteindelijk kwam ik op een pomodoro planner in HTML, CSS, en JavaScript.
Met de pomodoromethode leer in je in sessies met korte pauzes. Vaak zijn dit sessies van 25 minuten met 5 minuten pauze of 50 minuten met 10 minuten pauze. Ik wil leerlingen de mogelijkheid geven zelf hun sessies en pauzes te bepalen en een beetje persoonlijkheid te geven via eigen kleuren of een achtergrond afbeelding. Er zijn al veel websites en zelfs YouTube video’s die pomodoro’s aanbieden. Baanbrekend zal het niet zijn, maar dat was ook niet het doel.
De Pomodoro Planner
Grote timer bovenaan met de tijd voor iedere sessie.
Kleinere timer voor de totale tijd.
Tijdlijn om de sessie te volgen.
De standaardwaarde is 25 minuten studietijd, 5 minuten pauze. Wanneer je studiesessies van 50 minuten of meer opgeeft, wordt de pauze automatisch 10 minuten.
Er gaat een belletje aan het begin en einde van een sessie zodat je niet naar het scherm hoeft te kijken of je studiesessie al voorbij is.
Start/Pause knop (pause voor als iets of iemand je stoort).
Reset knop om opnieuw te beginnen.
Opties om te personaliseren:
Aanpassen van de kleuren in de tijdlijn.
Aanpassen van de achtergrondkleur.
Aanpassen van de tekstkleur.
Achtergrondafbeelding kiezen (aparte code voor Chrome en voor FireFox).
Reset/Default knoppen om naar standaardwaarden terug te gaan.
Wat ik heb geprobeerd maar niet (snel genoeg) is gelukt:
Automatisch aanpassen van de tekstkleur naar aanleiding van de achtergrondafbeelding.
Default knoppen meer naast de ‘color pickers’ zetten.
Als je met je muis over iets heen beweegt, krijg je meer uitleg over de functie (‘hover’).
De Pomodora Planner webapp kan je hieronder downloaden. Download het zipbestand, pak de map “Pomodoro Planner” uit en plaats het op een voor jou logische plek op je computer. Open het bestand “Pomodoro Planner.html”
Ik wilde met drie bestanden werken. Een HTML-pagina voor de presentatie, een CSS bestand voor de opmaak, en een JavaScript bestand voor de berekeningen. Je kan in principe JavaScript in HTML draaien, maar omdat AI nog wel eens in de war raakt van langere stukken complexe code, leek het mij verstandig een apart JavaScript bestand te hebben. Zo hield ik meer controle op de output.
Ik gebruik als Generatieve AI ChatGPT 5. Ik weet dat er meer gespecialiseerde AI modellen zijn voor programmeren, maar aangezien ik gewend ben aan ChatGPT en ik geen hele ingewikkelde code vraag, zag ik geen reden om te investeren in andere modellen. Het doel is ‘viben’.
De opdracht
Ik heb geen computational thinking benadering gebruikt of ander ontwerpmodel. Ik ben vrij eigenwijs en eigenzinnig en bepaal vaak de benadering afhankelijk van wat ik wil en wat voor gereedschap ik gebruik. Ook zou dat niet helemaal passen in het idee van vibe coding. Ik moet ook toegeven dat ik voor de deze vibe code veel gestructureerder aan de slag ben gegaan dan dat eigenlijk de bedoeling is.
Wanneer je complexe opdrachten vraagt van Generatieve AI, is het belangrijk een duidelijke structuur te hebben, niet alleen voor het model, maar ook om voor jezelf het proces goed te volgen. Begin met de kern van je project en bouw daarna uit. Voior webdesign (UI/UX) helpt het enorm een tekening te maken van waar je de verschillende elementen zou willen plaatsen. Dit voorkomt eindeloos prutswerk in de latere fase van het project (iets waar ik de meeste tijd in heb moeten stoppen).
De volgorde was als volgt:
Het doel omschrijven
De rolverdeling geven
De techniek omschrijven (web app; HTML; CSS; JavaScript bestand)
Een overzicht van de basisfunctionaliteiten geven
Eventuele extra’s benoemen zodat hier al rekening mee kan worden gehouden
Vragen of er beperkingen zijn.
Aangeven dat de AI nog niet moet beginnen. Eerst moet de opdracht helder zijn. Deze rem op de AI is belangrijk.
Daarnaast helpt het de AI te vragen om commentaar in de programmeercode te zetten zodat je als leek enigzins met de code kunt meelezen.
Ik communiceer in het Engels omdat de programmeercode ook in het Engels is en ik meer vibe in deze taal. Ik controleer niet op grammatica- en spellingfouten. Generatieve AI kan goed overweg met fouten en het is een verspilling van tijd je tekst perfect te hebben (en verbreekt natuurlijk de ‘vibe’). Echter, te slordig taalgebruik kan uiteindelijk wel invloed hebben op de uitkomsten.
Vibe coding
Na mijn eerste prompt gaf de AI een overzicht met een paar punten van aandacht. Na wat verfijning (zoals bijvoorbeeld voor welke browsers ik de webapp wilde gebruiken), gaf ChatGPT een genummerd overzicht van alle stappen die we zouden doorlopen:
Core timing engine (MVP)
Sessions & auto 5-min breaks
Segmented progress bar + clock
Preset buttons + custom input
Timing robustness
Background images (folder picker)
Auto contrast text
Polish and QoL [quality of life]
Ik verzocht een ZIP-bestand met de bestanden omdat dat mij minder tijd zou kosten dan code kopiëren en plakken in de bestanden. Aanpassingen doe ik uiteindelijk voor een deel zelf. Hiervoor gebruik ik Notepad++. Dit is een handig kladblok dat met programmercode kleuren toekent aan verschillende functies en automatisch regelnummers weergeeft.
En toen begon het vibe coden. Het hele project heeft 6,5 uur geduurd over 5 verschillende chatkanalen. Hier zijn een aantal interacties om de ‘vibe’ weer te geven.
Een aantal correcties zonder zelf iets te programmeren.
Hier doe ik een suggestie gebaseerd op eigen programmeerervaring uit een ver verleden. ChatGPT geeft aan dat de ‘image picker’ verschillend werkt in verschillende browsers. Welke methodiek zou ik willen toepassen? Ik deed mijn eigen suggestie: een code die controleert in welke browser we zitten en aan de hand daarvan de juiste code uitvoeren.
Eerste tekenen dat de chat te lang wordt en ChatGPT steeds meer fouten maakt.
Interessante uitwisseling. Ik kan geen ZIP-bestanden meer laten genereren. De chat pusht mij naar een nieuwe chat, al kan ik, volgens ChatGPT, ook wachten totdat dit tijdelijke probleem is opgelost.
Ondertussen was ik in een nieuwe chat begonnen. Na een uur stelde ik deze vraag in de oude chat.
Nu werd het een principezaak.
En toen kwam de aap uit de mouw.
“Soften the experience'“, die ga ik onthouden.
Overhevelen van informatie naar een nieuwe chat. Zip-bestand met de drie bestanden en overzicht die de vorige chat had gemaakt voor deze chat.
Uiteindelijk gaf ook deze chat fouten. De grootste was de volgende. Op een gegeven moment werkte niets meer en probeerde ik met de bot een oplossing te ‘viben’. Toen dacht ik, laat ik eens zelf in het js-bestand kijken. Wat bleek? Honderden regels code waren verwijderd. Alsof 75% van de motor uit je auto was verwijderd. Dan rijdt hij niet meer, maar bot draait heftig aan het stuur en de versnellingpoke om het probleem op te lossen.
Op gegeven moment startte ik wederom een nieuwe chat omdat ik alleen nog wat lay-out aanpassingen wilde hebben en bang was dat de vorige chat te veel ‘geschiedenis’ mee zou nemen in de lay-out wijzigingen.
Aan het einde wilde ik steeds meer zelf de kleine wijzigen aanbrengen. Dat ging sneller dan via ‘vibe coding’ en gaf minder risico’s op fouten.
Wanneer de bot weer de weg kwijt was, gebruikte ik een back-up om opnieuw te beginnen.
Lay-out aangeven in tekstvorm
Meer eigen inbreng om het project af te ronden.
En na 6,5 uur had ik mijn Pomodoro Planner (en was ik er wel een beetje klaar mee).
Reflectie
Is het mogelijk (simpele) programmeeropdrachten te geven aan Generatieve AI? Zeker. Het geeft mij een mogelijkheid om sofware te maken waarvan ik in het verleden het had opgegeven omdat een dag maar uit 24 uur bestaat en ik andere prioriteiten had.
Ook kennis over Generatieve AI helpt. AI confabuleert (hallucineert), zeker na langere gesprekken. Je weet nooit zeker of de bot de dingen doet die hij zegt te doen. Wanneer verzint hij tekst en wanneer geeft hij weer wat er daadwerkelijk gebeurt? Zo vroeg ik voor aanpassingen in de code zonder een ZIP-bestand te genereren, maar op te slaan voor een toekomstige ZIP. In dat toekomstige bestand waren de veranderingen niet aangebracht. Ook heb je hierboven kunnen lezen dat de bot op een gegeven moment het JavaScript bestand halveerde zonder dit te ‘beseffen’.
Vibe coden is als een balletje door een doolhof begeleiden. Je kunt het balletje niet aanraken maar moet het constant bijsturen. Dat werkt tot op zekere hoogte, maar wanneer je langer in een project zit en meer in detail gaat treden, gaat een beetje kennis over programmeren een grote meerwaarde hebben. Als ik meer over JavaScript zou hebben geweten, had ik waarschijnlijk de ‘vibe tijd’ kunnen halveren. Heb je totaal geen kennis, dan is de kans vrij groot dat je met bugs blijft zitten en je project na veel frustratie moet opgeven.
Vibe coden is daarom niet echt efficiënt. De ‘vibe’ kan al vrij snel omslaan naar frustratie omdat je iets niet werkend krijgt. Voor kleine projecten lukt het je waarschijnlijk wel om iets te produceren, maar zodra je kritisch en perfectionistisch wordt, kost het behoorlijk wat tijd. Echter, wil je echt iets hebben (zoals een pomodoro voor je leerlingen) dat biedt ‘vibe coding’ een optie om te overwegen.
Probleem is wel dat ‘vibe coding’ veel servercapaciteit vraagt (met de bijkomende problematiek van energieconsumptie en watergebruik). Ik heb mij twee avonden vermaakt, maar ik denk dat ik op eenzelfde manier had kunnen ‘viben’ op mijn (lokale) Minecraft server met maken van mooie gebouwen. Muziekje. Toetsenbord. Muis. Gaan.
Voor mensen die wel programmeerkennis hebben is ‘vibe coden’ ook niet echt aan te raden voor het echte werk. AI kan zeker helpen met genereren van (standaard)code, maar dan geef je de AI gerichte vragen met gerichte problemen en houd je constant vinger aan de pols. Maar dit is dan geen ‘vibe coden’ meer. Uiteindelijk gaat het complexe programmeerwerk sneller als je het zelf doet, mits je de kennis hebt.
De bedenker van de term vibe coding, Andrej Karpathy, geeft zelf ook aan dat hij in zijn laatste project alles zelf weer doet en geen AI heeft gebruikt: “Het is eigenlijk volledig met de hand geschreven (met tab-autocompletion) … Ik heb een paar keer geprobeerd om Claude/Codex-agenten te gebruiken, maar ze werkten gewoon helemaal niet goed genoeg en waren per saldo niet behulpzaam.” (Gizmodo)
Er komen ook steeds meer geluiden op dat Generatieve AI programmeurs juist vertraagt in hun werk. De reden is dat programmeurs nu tijd kwijt zijn aan goede prompts schrijven, met wachten wanneer de AI bezig is, met lezen van de output, en bovenal, met fouten herstellen. In een artikel van Arstechnica bericht men over een onderzoek van METR. Zij concludeerden na een onderzoek dat de productiviteit van de deelnemende programmeurs met 19% omlaag ging wanneer zij AI gebruikten voor hun programmeerwerk.
Nut voor onderwijs
Is vibe coding dan nutteloos voor het onderwijs? Nee. Ik denk dat vibe coding een rol kan spelen in verschillende leerprocessen. Maar het hangt van je leerdoel af of het echt een meerwaarde kan zijn. Welk residu wil je dat achterblijft bij studenten of leerlingen?
Ik zie domeinkennis als cruciaal in een leerproces. Je kunt alleen de wereld kritisch benaderen als je er weet van hebt. Er zijn geen sluiproutes naar beheersing. Leren doet ‘pijn’ en je zult er echt werk voor moeten verzetten. Daarom zal vibe coding geen programmeur van je maken. Toch zie ik een (bescheiden) rol in specifieke leerprocessen. Hier volgen twee ideeën voor vibe coding in het onderwijs (mits via lokale, open source modellen) die wel meerwaarde kunnen hebben.
Kennismaking met en aanbieden van variatie in programmeren
Vibe coding kan een mooie introductie zijn voor programmeren. We weten allemaal dat het na onze eerste ‘Hello World!’ tekst zwoegen is om een aan te leren programmertaal werkend te krijgen. Met vibe coding (in combinatie met een programma als Notepad++) kan je sneller een indruk krijgen wat er allemaal kan en tastbare dingen maken. Het kan motiverend werken met een taal echt aan de slag te gaan. Je kunt de code bestuderen en begrijpen hoe het samenhangt. Daarnaast kan je proberen zelf bugs eruit te vissen in plaats van te vragen of de AI dat voor je kan doen. Het is een nieuw, afwisselend element naast het handmatig leren programmeren.
Als het doel ‘leren programmeren’ is, heeft vibe coding een bescheiden rol. Uiteindelijk gaat het erom dat je je gereedschap beheerst en daardoor kritisch kunt toepassen. Net als dat een schilder zijn penselen en verf moet leren kennen, moet een programmeur zijn of haar <if> <then> <else> beheersen.
Computational thinking
Computational thinking is vaak een wat vaag begrip voor het onderwijs. Alhoewel vibe coding in zijn eerste opzet losser was bedoeld, kan je het wel inzetten om computational thinking te oefenen.
Computational thinking is probleemoplossende methodiek voor problemen in informatica. Het kent vier aspecten: decompositie (het opdelen van een probleem in kleine stukjes), patroonherkenning (dezelfde problemen herkennen om ze sneller op te lossen), abstractie (tot de kern komen), en algoritmisch denken (procedures bedenken om tot een oplossing te komen).
Vibe coding kan een middel zijn om het leerdoel (computational thinking) te beheersen. Het geeft een praktische en zichtbare manier om iets abstracts zoals computational thinking in de praktijk te brengen. Je ziet direct het resultaat van je prompts en kan reflecteren op je denk- en procesfouten, zeker in groepsopdrachten.
Conclusie
Vibe coding is inefficiënt maar interessant om te doen. Het kan software opleveren waar je zelf behoefte aan hebt en je niet makkelijk kunt krijgen, maar frustratie ligt op de loer. De vraag is dan ook, vanaf hoeveel domeinkennis gaat het echt leuk worden? En wanneer levert het daadwerkelijk iets waardevols op? Voor het onderwijs is het belangrijk duidelijk je leerdoel(en) te formuleren en hoe je denkt dat vibe coding daar een bijdrage in kan leveren. Voor mijzelf is het goed te weten wat ik met dit stuk gereedschap kan, mocht ik dat nodig hebben. Echter, mijn vibe ligt meer in videogames dan in lexicaal botsautootje spelen met een bot.