[HN Gopher] Show HN: NeedleDrop - Guess the movie from a song
___________________________________________________________________
Show HN: NeedleDrop - Guess the movie from a song
Backstory: I'm a product designer who's mostly worked for startups
and now big tech, and I haven't really touched html/css for nearly
a decade. I've worked closely with engineers my entire career but
never really rolled the sleeves up and dived into a scripting
language. I'd seen some engineers playing around with CodeGPT over
a year ago when it launched-we huddled around a screen and tried to
decide how quickly our jobs would be replaced by this new
technology. At the time, we weren't in any real danger, but I
caught a glimpse of how well it understood prompts and stubbed out
large amounts of code. 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.
Author : wernah
Score : 67 points
Date : 2024-03-05 14:59 UTC (8 hours ago)
(HTM) web link (www.needledrop.me)
(TXT) w3m dump (www.needledrop.me)
| erybodyknows wrote:
| Congrats on shipping. Do you have a write up with more detail on
| your approach to coding using ChatGPT?
| wernah wrote:
| Thank you! Not yet, it's definitely worth a talk or blog post
| IMO. I don't think it's well known how approachable learning
| how to code is with this kind of a tool. The way you're able to
| interrogate a response or ask it to clarify more simply what it
| is doing- I had so many 'a ha' moments with certain topics that
| felt overwhelming at first.
| AdamTReineke wrote:
| Make sure you know the cost to serve that 2MB MP3, especially if
| you're go viral.
| wernah wrote:
| I quickly learned to set up AWS billing alerts, is there
| anything else I should keep an eye on?
| 7moritz7 wrote:
| There doesn't seem to be a ratelimit on your most expensive
| ressource, the mp3 files on AWS. I checked with cURL, you can
| do the same. For this web app you should ratelimit the
| ressource aggressively because of how the game works.
| wernah wrote:
| Thanks for this! I'm gonna check this out
| aabhay wrote:
| What do you think is the realistic ceiling of using an AI agent
| helper? Like when do you feel like you would "graduate" from the
| agent and just have enough skills to want to read documentation
| yourself, etc.? Or would you always imagine yourself using AI as
| a permanent coding tool?
| wernah wrote:
| I don't really know. I posted this link in the r/webdev
| subreddit and there was some pushback that this isn't code that
| is fit to charge clients for and that it shouldn't be trusted
| for serious engineering. The point was completely missed- I
| think an AI agent can supplement your understanding if the
| documentation is usually targeted at professionals. It's also
| perhaps a more engaging medium for some learners.
| groggo wrote:
| AI helper has taken me pretty far. I use rails day to day, but
| I've been using AI to help me build a few quick mini apps with
| React+Firebase. In rails I'm pretty comfortable, but I'd still
| use AI for quickly spitting out FE stuff or writing specs (It's
| much quicker than trying to remember how CSS grids work and
| which tailwind classes to use). But on the React+Firebase side,
| it's really critical to be productive. Maybe I'll eventually
| get to where I am with Rails, where I'd only ask it for
| specific types of tasks. But there's so much out there in the
| JS ecosystem. It's fun to be able to try out different tools
| and be productive without starting from 0. So - I don't really
| think there is a ceiling. Even if I was 100% fluent in
| whichever tools and frameworks I was using, it'd be useful for
| (interactive) rubber ducking, repetitive things like specs, and
| quickly prototyping UIs.
| hiccuphippo wrote:
| > 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
|
| 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.
| wernah wrote:
| Ha just googled this and realized this is exactly it. Makes a
| lot of sense as a forcing function to better understand your
| messy thoughts
| WesleyJohnson wrote:
| Congrats on shipping! I enjoyed today's puzzle; love that movie.
| I found myself wanting to stop the song while I typed my answer,
| because it was a bit distracting. But I guess that's part of the
| game, right? If you stopped the song, you could "think on it" for
| minutes before typing your answer.
|
| Fun concept.
| wernah wrote:
| I originally had the default 'pause' functionality up until
| yesterday but a lot of friends had given the feedback that it
| can exploited and that a running clock adds to the gametime
| pressure.
| kfichter wrote:
| A few different movies have this song in it, would be cool to
| accept any of the correct answers, depending on how easy that is.
| farleykr wrote:
| I was going to mention the same issue. Not sure how the site
| decides which is the correct answer, especially considering
| both possible answers were available in the autocomplete
| selections.
| rez9x wrote:
| My first thought was Dazed and Confused. I'm not sure if it's
| more iconic in Gone in 60 Seconds, as I've never seen it.
| steezeburger wrote:
| Up In Smoke, Dazed and Confused, and Gone in 60 Seconds are
| all quite iconic.
|
| Why wouldn't they just accept any of the three?
| wernah wrote:
| I considered this, but given the way the clues are revealed i
| think I had to commit to a single answer per needledrop. I
| mentioned in the 'how to play' disclaimer the subjective nature
| of the curated list: We've selected what we believe to be the
| first or most iconic instance of each Needle Drop.
|
| Doesn't make it any less frustrating when it doesn't accept a
| technically correct answer though.
| seandavidfisher wrote:
| For instances of this that the system knows about, you could
| add a response that says, "technically correct but not what
| I'm looking for." Similar to how one would do it in real
| life.
| hammond wrote:
| Indeed, my guess was Cheech & Chong:
|
| https://www.youtube.com/watch?v=eSAOKuO5W8E
| lelandfe wrote:
| Congrats - works and looks good.
|
| 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.
| wernah wrote:
| I hadn't considered that at all. Will address!
| gknoy wrote:
| I have no comments on the JS, but this is a neat idea for a game,
| and fun to play. Thank you for making and sharing it! :)
| gknoy wrote:
| One thing that would be convenient would be a link to the
| previous / next song in the game. I found myself linking the
| archive page to friends, and while convenient, that isn't as
| compelling as your clear call to action on the normal play page.
| :)
| wernah wrote:
| Ok that's shooting right up the list! Back and forward arrows
| to allow you to hammer through the back catalogue
| steezeburger wrote:
| Today's song is in 2 movies, and I technically got it correct the
| first time, but the app counted it wrong.
|
| Edit: it's actually in several movies. At least 4. All quite
| iconic imo.
| wallawe wrote:
| Same - here's the scene from the first movie I guessed
| https://www.youtube.com/watch?v=Alyx4QeRRdg which was marked as
| incorrect
| steezeburger wrote:
| This is the movie I picked first as well!
| WirelessGigabit wrote:
| I worked with a colleague who didn't write JS for a long while.
| My colleague purposefully tried to build the project with the
| output of ChatGPT.
|
| 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.
| wernah wrote:
| I found this to be the case as well. My out productivity
| declined as the project became more unwieldy. I wasn't using
| ES6 so would very much like to modularize things and use
| imports/exports next time. "Working code is working code" but
| I'd dread the idea of someone collaborating on top of my
| spaghetti. Lot of lessons learned in that respect. Having to
| reset ChatGPT's understanding of the latest code was tiresome.
| groggo wrote:
| Wappalyzer extension says it's using Firebase, are you? If so,
| why mixing it with all the AWS stuff? I've been using Firebase
| for quick mini-projects and it's fun and quick it is for
| prototyping. If you use it for hosting, no worries about
| Cloudfront, routing, SSL, or anything... it even automates the
| github CI/CD.
|
| How did you like using vanilla JS? What sort of build tool did
| you use?
| wernah wrote:
| ChatGPT actually suggested firebase for some very basic JSON
| event logging output I wanted to produce but I'm just realising
| AWS has something called amplify?
|
| 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
| krumpet wrote:
| I've always considered Stack Overflow research to be very
| valuable. Less for the answer to my question and more for the
| related topics, edge cases, and other details that frequently are
| included in thorough answers / comments / discussions.
|
| 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.
| wernah wrote:
| That's a fair take. I can't overstate Stack Overflow has been
| in the past, I think I often had that experience that it
| usually caters to common but specific scenarios, or I'm just
| impatient and lurk instead of asking a question and waiting for
| a response. Interesting I could paste Stack overflow
| discussions into ChatGPT to ask if this insight is related to
| my issue and it was usually open to relating the new info and
| helping me
| matsemann wrote:
| I think it's great that GPTs make it possible for people to
| achieve things like this! And kudos to you for stepping out
| of your comfort zone and learning new stuff.
|
| 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?
| tudorw wrote:
| Claude 3 seems much better than GPT4 at Python as of
| yesterday'ish, it's better at longer contexts (pasted 900 lines
| for example) and just a little better at organising and planning
| code. so much fun! Also getting fast!
| xd1936 wrote:
| I know that "Beverly Hills Ninja" with Chris Farley features "Low
| Rider" by War, but it wasn't a correct answer :(
| gigonaut wrote:
| The list of films that use that song are (at least according to
| IMDB):
|
| 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"
| wernah wrote:
| I did not know IMDB offered this, thank you!
| jedberg wrote:
| Thank you! I also guessed Dazed and Confused and was confused
| when it wasn't right. Thank you for at least showing me I'm
| not crazy.
| speedgeek wrote:
| Yeah i guessed Up in Smoke which did use the tune so seems like
| it needs to accept any correct answer or provide something that
| narrows it to a specific movie. But I like the idea.
| snakeyjake wrote:
| I'm old enough that Cheech & Chong's Up In Smoke immediately
| and iconically came to mind.
|
| 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.
| djmips wrote:
| Yeah same here!
| apgwoz wrote:
| I guessed "Dazed and Confused," for that song, which was also
| wrong--sadly. I guess "School's Out" might have been a _better_
| pick for Dazed though.
| spillguard wrote:
| I tried to guess "A Gnome called Gnorm" but it wasn't even an
| available option :(
| xrd wrote:
| Another similar site is cinequote.net
| javier_e06 wrote:
| Arrgh. I suck at this. I was put against a bad movie from 2000.
| 24 Years ago with a song from 1975 that is way better than the
| movie. I watched the original at a the matinee. I love the car-
| wash scene. I'll watch the movie again tonight
| https://www.youtube.com/watch?v=Le_SnbrNaog
| turtlebits wrote:
| Great concept - please add keyboard control, especially on that
| typeahead/autocomplete dropdown and form submission. (super
| frustrating to have to click)
| wernah wrote:
| ah good callout, ill add it to the list
| halfmatthalfcat wrote:
| What does it say about me if I instantly thought of Anthony
| Fantano when reading the title?
| thundergolfer wrote:
| It says that you are familiar with Anthony Fantano's Youtube
| channel?
| halfmatthalfcat wrote:
| That would be accurate
| jihadjihad wrote:
| If you click and drag near the text under the clapperboard, you
| can see a frame from the film, which might help you guess the
| answer.
| wernah wrote:
| oh my! well spotted haha. Thank you
| seandavidfisher wrote:
| Love the idea and execution. The spinning record was fun and gave
| me something to watch while racking my brain. Have you considered
| adding an "I have no idea" button? I ended up just typing random
| movies, but having the UI guide the user in some way when they
| honestly can't think of a likely movie would be thoughtful.
| ericyd wrote:
| Totally agree with this, it would be really nice to be able to
| request clues without submitting an invalid guess. It could
| still count towards one of your four guesses but I think from a
| UX perspective it's nicer to be able to admit ignorance than
| being forced to guess incorrectly.
| wernah wrote:
| I'm going to add this to my backlog, definitely a great
| suggestion. Even when testing I would just mash answers
| looperhacks wrote:
| Congrats! The game is quite hard because there might be multiple
| correct solutions, but only one gets accepted. But I understand
| that this is a limitation of the game, maybe adding something
| like "Correct, but we're looking for something else" would be
| nice.
|
| 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
| ashfernandez wrote:
| Super cool.. will def be using it for fun.
| ashfernandez wrote:
| What editor were you using to compile code?
| derN3rd wrote:
| Reminds me of Bandle (bandle.app) where you are guessing the song
| by listening to parts of a song (drums, then drums+base etc)
| mr_sturd wrote:
| This is great. I used to play this sort of game with friends,
| with our phones on a Bluetooth speaker.
|
| 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!
| gardenhedge wrote:
| How does the description (on HN) not mention Wordle?
| wernah wrote:
| I credit wordle and framed.wtf in the about section. This
| formatting of games has exploded in the last couple years, it
| really is a great way to get people returning each day
| jay_kyburz wrote:
| I think if you are going to do this you need to do songs that
| were written for a movie. You can't play a Where is my Mind then
| ask somebody what movie its from. It's in _a lot_ of movies.
| dylan604 wrote:
| Let's check with the judges...yes, we while we were looking for
| ____, we'll also accept ____
|
| 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.
| LVB wrote:
| [delayed]
___________________________________________________________________
(page generated 2024-03-05 23:01 UTC)