I think I would think it shouldn’t, do normal CS and then learn AI after. There’s a reason you get those fundamentals, even when most jobs involve tying to API’s together. Prompting AI is probably the easy part? Or involves more about understanding the business domain then the skill itself, similar to how almost every CS graduate can be a newb to actual on the job skills, but that’s not what a CS degree should teach you, it should teach you the basics so when you get stuck in vibe coding you understand why.
How to come up with the next prompt and how to judge if your AI did it right or not. Pairing with someone that has built an app via vibing does it all over again with the same prompts slowly, teaching the student why and how each prompt occured to them.
Example problems from project I just did:
this is a brand new project. Use react and node and sqlite.
Start with a splash page with login and regsiter buttons.
Use vite or esbuild.
Give me a test user username "andrewarrow" password "testing".
Once logged in have a logout button. Use tailwindcss."
change all typescript to just plain javascript.
remove all typescript from build process.
on the logged in Welcome to XVibe page, add a textfield.
The user can enter any youtube url and the server should launch
an external process to the program "yt-dlp" with that url as the cli param.
Store the file in a directory called "videos".
Name it a random uuid and the extension of the video type.
Use websockets to tell the frontend when the video is down downloading.",
now capture the stderr and stdout of the running yt-dlp processs for
"[download] 23.5% of 8.23MiB at 2.35MiB/s ETA 00:15",
add your first database migration for a new table called videos with a user_id.
Make logged in homepage display a list of all the users previous downloads.
add the file extension to the list of videos.
Make a button to run ffmpeg to convert a format to mp4 and
also capture stdout err for this and show the progress.
make each row in "Your Video Downloads" clickable and goto a
"video detail page" with a button for "get key frames".
This button should use ffmpeg to get just the key frame jpgs.
In the videos directory have a uuid as a directory and all the files
for one video inside that directory.
On the video detail page as the keyframes as ready display them.
add a button to video detail page for "get text"
change how "get text" button works to run
yt-dlp --skip-download --write-auto-sub --sub-lang en
https://www.youtube.com/watch?v=VIDEO_ID
and save the captions in a file
add a new button "parse captions" to video detail page.
It should open the captions.vtt and match up the text with the times
so that the display of keyframes can include the text below each keyframe image.
It's ok if it doesn't line up perfectly. Just in a nice big font under
each keyframe jpg try and have the text.
the parsing caption logic has artifacts like
"and but only<00:20:09.480><c" fix that",
when I click on a keyframe in the video detail page and it selects that's great.
But when I select another keyframe I want that 2nd keyframe
(and all the keyframes between) to highlight as well.
Have a new button for "extract clip" that makes a new video and
computes the starting point and ending points based on the selected frames.
I think I would think it shouldn’t, do normal CS and then learn AI after. There’s a reason you get those fundamentals, even when most jobs involve tying to API’s together. Prompting AI is probably the easy part? Or involves more about understanding the business domain then the skill itself, similar to how almost every CS graduate can be a newb to actual on the job skills, but that’s not what a CS degree should teach you, it should teach you the basics so when you get stuck in vibe coding you understand why.
How to come up with the next prompt and how to judge if your AI did it right or not. Pairing with someone that has built an app via vibing does it all over again with the same prompts slowly, teaching the student why and how each prompt occured to them.
Example problems from project I just did:
this is a brand new project. Use react and node and sqlite. Start with a splash page with login and regsiter buttons. Use vite or esbuild. Give me a test user username "andrewarrow" password "testing". Once logged in have a logout button. Use tailwindcss." change all typescript to just plain javascript. remove all typescript from build process. on the logged in Welcome to XVibe page, add a textfield. The user can enter any youtube url and the server should launch an external process to the program "yt-dlp" with that url as the cli param. Store the file in a directory called "videos". Name it a random uuid and the extension of the video type. Use websockets to tell the frontend when the video is down downloading.", now capture the stderr and stdout of the running yt-dlp processs for "[download] 23.5% of 8.23MiB at 2.35MiB/s ETA 00:15", add your first database migration for a new table called videos with a user_id. Make logged in homepage display a list of all the users previous downloads. add the file extension to the list of videos. Make a button to run ffmpeg to convert a format to mp4 and also capture stdout err for this and show the progress. make each row in "Your Video Downloads" clickable and goto a "video detail page" with a button for "get key frames". This button should use ffmpeg to get just the key frame jpgs. In the videos directory have a uuid as a directory and all the files for one video inside that directory. On the video detail page as the keyframes as ready display them. add a button to video detail page for "get text" change how "get text" button works to run yt-dlp --skip-download --write-auto-sub --sub-lang en https://www.youtube.com/watch?v=VIDEO_ID and save the captions in a file add a new button "parse captions" to video detail page. It should open the captions.vtt and match up the text with the times so that the display of keyframes can include the text below each keyframe image. It's ok if it doesn't line up perfectly. Just in a nice big font under each keyframe jpg try and have the text. the parsing caption logic has artifacts like "and but only<00:20:09.480><c" fix that", when I click on a keyframe in the video detail page and it selects that's great. But when I select another keyframe I want that 2nd keyframe (and all the keyframes between) to highlight as well. Have a new button for "extract clip" that makes a new video and computes the starting point and ending points based on the selected frames.
Whoosh, there goes yer context windys :)
hehe that was not all one prompt. I paused between sections to make sure it was done right.
Heh, phew...