Vibe coding med VSCode + RooCode + LM Studio

Med Vibe coding ska du kunna programmera med vanliga beskrivningar.
1984/85, 40 år sedan var det VIC-20 och Commodore 64 som gällde i hemmen.
Jag kunde programmera och en vän kunde inte men han sa att han kunde, så jag tröttnade och frågade:

• Hur gör du för att skapa en gubbe som hoppar som du kan styra med tangentbordet?
• Då skriver jag det så blir det så.

Aldrig kunde jag ana att jag en dag skulle skriva att han hade rätt. Inte då men nu.

För att få ihop det här på en skapligt kraftfull dator så kör jag dessa verktyg:

• VSCode – Gratis kodredigerare från Microsoft
• Roo Code – Gratis tillägg till VSCode. Det är här du skriver vad du vill ha.
• LM Studio – Gratis. Kan köra stora språkmodeller på din dator.

Starta VSCode, installera tillägget Roo Code.
Starta LM Studio. Ladda ned modellen ”mistral-small-24b-instruct-2501”. I LM Studio gå till ”developer” och starta en server på post 1234.
Inne i Roo väljer du LM Studio och vilken modell du laddat in.
Du är nu reda för Vibe coding.

Inne i Roo kan du ställa in att Roo ska agera arkitekt.
Jag testar att använda den här beskrivningen:

Goal: animated figure that shows on screen. The user can steer the figure with the arrow keys. Jump with the enter key.
Language: Javascript, HTML, CSS
Library: PixiJS, https://pixijs.com/ 
Coding instructions: Do not use \n , instead use the newline character.

Efter en stund säger Roo att den är klar och det är dags att testa.

Det går att styra fyrkanten med piltangenterna. Det går smidigt. Hackigheten är videoinspelningen.
Enter gör att fyrkanten flyter uppåt och fastnar där.

Goal: Improve the code in the folder "jumping" so that pressing enter should make the figure jump like this: first move upwards as long as you hold enter. When you release enter the figure move downwards the same amount it moved upwards.
Language: Javascript, HTML, CSS
Library: PixiJS, https://pixijs.com/ 
Coding instructions: Do not use \n , instead use the newline character. If you fail to apply the code to the files then do not tray again. Instead report back to me and guide me to how I can resolve the problem for you.

Roo gör upp en plan och lägger till ändringarna. Nu fungerar det att hoppa.

Nu är vi nära. Figuren är tråkig och är ingen gubbe.

Goal: Improve the code in the folder "jumping" so that the figure is exchanged witn an animated man walking in the direction you steer left/right. And jumps when you press enter.
Language: Javascript, HTML, CSS
Library: PixiJS, https://pixijs.com/ 
Coding instructions: Do not use \n , instead use the newline character. If you fail to apply the code to the files then do not tray again. Instead report back to me and guide me to how I can resolve the problem for you.

Roo tänker och koden ser bra ut men det är ett fel. En fil saknas.

Goal: Assist in creating the /assets/walking-sprite-sheet.json or explain how I can create it.

Nu får jag instruktioner hur jag kan skapa filen. Jag laddar ned lite sprites och en editor.

När jag skapat filen går den inte att ladda in. Får ett felmeddelande.
Jag frågar Roo.

Goal: Solve error here
PIXI.Loader.shared.add('RUN', '/assets/walking-sprite-sheet.json').load(setup);

Error: Uncaught TypeError: Cannot read properties of undefined (reading 'shared')
    at script.js:8:13

Roo får rundgång och klarar inte att lösa detta.
Det känns som piloten har svimmat men att jag fortfarande har en fungerande radio.

En snabb sökning på nätet ger detta.

Nu börjar det gå utför. Jag kan programmera i Javascript men har ingen grundläggande förståelse för hur PixiJS fungerar.
Det gör att jag behöver förlita mig på Roo för alla ändringar.

Det här var väntat. Till slut behöver du förstå koden och ha tillräckliga kunskaper för att modifiera den.

Nu började jag undersöka koden och jämföra med de exempel som finns och ser att de skiljer sig ganska radikalt.

Jag har lärt mig en hel del. Inför nästa försök ska jag förbereda mig mer genom att sätta upp en webbserver och förbereda assets som Roo kan jobba med.
Och jag behöver läsa på mer om hur PixiJS fungerar.

Var hamnar då Vibe coding i det hela? Just nu är det en kul teknik men inte speciellt kul att använda.
Programmeringsglädjen tas bort. Men kanske kommer det bli så bra att skaparglädjen stimuleras istället.

Bilden kommer från Pexels och är CC0.