Show HN: AI Taught Me JavaScript
For the past four or five years, I've played a hacky trivia game with family and friends where I play a song, and they have to guess the movie that features the song; Guess the Needle Drop. After many passionate debates and over-the-top celebrations fueled by my generation’s nostalgia for popular classic songs and films, people often told me that I needed to “build an app for this.”
I started doodling in Figma before quickly starting to build the website in Node, and then read somewhere that it's a better approach to learn vanilla javascript before trying to benefit from frameworks like React, etc. So I started again with a static vanilla website and, piece by piece, built out each chunk of functionality I’d envisioned. My mind was consistently blown at how helpful ChatGPT was–far beyond my lofty expectations, even with all the AI hype. It was like having a 24/7 personal tutor for free. I rarely had to google console errors hoping that a Stack Overflow discussion catered to my exact scenario. With enough information, ChatGPT always knew what was wrong and explained in terms I could understand.
The workflow went like this: I would describe the desired user experience, parse the code GPT suggested, copy it to my editor, and paste back any errors I came across along the way. The errors were abundant at the beginning, but I got better over time at anticipating issues. Perhaps my biggest takeaway was that I had to learn how to converse with ChatGPT: sometimes I would spend 10 minutes crafting a prompt, forcing me to fully understand and articulate my own line of thinking about what I was trying to achieve .
Using ChatGPT to make a static local website is fairly trivial, but the deployment and automation stage is where I fully realised the scope of what I could achieve. As a product designer, I’ve had the luxury of listening to engineers discuss solutions without personally having to sweat the execution. Working solo I couldn’t stay in the periphery anymore. I kinda knew AWS was a whole thing. That git was non-negotiable. That having a staging server is sensible and that APIs could do a lot of the heavy lifting for me. I would sanity-check with ChatGPT whether I understood these tools correctly and whether it was appropriate to use them for what I was building. A few of the things that initially intimidated me but I ended up working out:
- GitHub Actions workflows
- AWS hosting and CloudFront
- Route 53 DNS hosting
- SSL certificates
- Implementing fuzzy search
- LocalStorage and JSON manipulation
- Even some basic python to scrub data
It’s a fairly basic game, and for anyone sneaking a look with the inspector, it’s a dog’s div soup breakfast served with a side of spaghetti logic. But it still goes to show how much AI seems like a learning steroid.
[1]: https://developers.cloudflare.com/r2/
Yes, usually called rubberducking. Trying to explain a problem to someone else can lead you to the answer. Many times I've found the answer to something while trying to write the question in StackOverflow.
Fun concept.
Doesn't make it any less frustrating when it doesn't accept a technically correct answer though.
I felt like if I didn't know in the first 5 seconds, I wasn't going to know, and there wasn't anything to do but listen to another 2 minutes of music or close it.
https://www.youtube.com/watch?v=eSAOKuO5W8E
Why wouldn't they just accept any of the three?
It's worth noting AI's current limitation for sites: pretty poor accessibility. Consider adding some "screen reader hidden" text for the menu link, and try using the interface with your keyboard (tabbing around). Happy to go into more detail if you want, or email in bio.
Edit: it's actually in several movies. At least 4. All quite iconic imo.
One of the problems my colleague ran into is that once things don't work as expected, debugging is really hard. When you build a system yourself you have a knowledge foundation, and a process that you repeat over and over. They are intrinsic to your development process. They allow you to quickly debug problems. But not so much when dealing with this kind of generated code. Much more often did we have to resort in peeling back the layers and realize something a couple of layers down was wrong.
One example is that the generated code does not contain take age of the code into account. So all of the sudden you're mixing ESM and non-ESM packages and you get the weirdest errors.
> sometimes I would spend 10 minutes crafting a prompt, forcing me to fully understand and articulate my own line of thinking about what I was trying to achieve .
The reality is that this is one of the reasons why I actually love coding. As someone who has many times unconsciously said the wrong things and pissed off people (sorry!), using a limited grammar to express my wants feels so much safer. The grammar is limited. It is extremely explicit. There is no ambiguity. And bar a few esoteric languages, there are no emojis, and there is no need for me to be polite or offer a tip.
How did you like using vanilla JS? What sort of build tool did you use?
JavaScript has a reputation for being quirky but I'm assuming it has come a long way in the last 10 years (or maybe not) but very quickly I became comfortable with it in an obviously limited way. Next project I'd be more interested in a framework but I'm glad I cut my teeth trying to understand the basics first
When AI answers your question (and only your question), that's great for that specific instance, but it feels to me like it's lacking in breadth. I wonder if that results in the user becoming really, really reliant on said AI as they don't fully grasp the interconnectedness of coding? Just a thought.
I think the main apprehension people (/devs) have about this, is how the new generation of full time coders will be. Will they blow our socks away, with their AI-enhancements? Or will they never have learned the core concepts, but just jump from issue to issue like a junior for ever?
The song is played in its entirety during the opening credits instead of being used for like 15 seconds.
And it is an incorrect answer.
BTW, War is still touring. I saw them in concert a few weeks ago. And yes, they played "Low rider", last song, place went nuts. There were rumors that George Lopez owned the rights to the song, as part of his TV show, so the band couldn't perform it anymore.
There exist dbs of what songs are in what movies, it should probably accept any of them as alt answers IMO.
https://www.imdb.com/list/ls072864571/
I guessed "dazed and confused" and was told that was incorrect. From the hint it would appear as though they were looking for "gone in 60 seconds"
Two suggestion for improvements:
- Add a skip button. If I don't have a clue which film it might be, I need to write some nonsense answer to get a clue, a skip button would be nicer. - Play the song immediately when I click the play button. I was wondering why it doesn't start, even though I clicked the Play button!
Sidenote: I spoiled myself because Imagus showed me the movie pictures in the archive ;) Not your fault of course, but I found it funny
I was on my last go when the screenshot gave it away for me. There were two options available in the search, but it seems I guessed correctly!
There's no reason you can't do both. Consider how there's a lot of YouTube comments with "who's here because of" type comments where people are looking for something heard in a movie/game/etc.
Other than that, lovely idea and implementation!
I would definitely like some sort of “decade” option if at all possible so you can stick to films of a certain era. Some of the older ones I had no ability to guess (which is fine, just would like to weed those out for my own fun).
Also as others stated, some made for the movie tracks would be nice!
I’d think something like percentage of song played before correct with total number of guessed would cover it.