How to understand what AI wrote: For beginners!
Avoid lack of dopamine, mental atrophy, and other terrible things
You spin up a simple website quickly, and you want to understand what is actually happening, because you feel your sharpness drifting away in a sea of automation. What can be done? Here is one simple method I found that works for me: The simple comment.
Ask yourself some questions:
Can you go through the AI generated code line by line and understand what it is doing? Sure. But you have not really gone through it, have you? To really understand code, one must sit with it, digest it, and go on to the next part having the knowledge of what is happening so far. That investigative understanding is the part I feel many of us are missing. As a self proclaimed junior-ish developer, I miss the satisfaction of knowing I understand what just happened, and why it is working. I am certain developers of all experiences are feeling this now, based on the articles I have been reading.
๐๏ธ Anti-laziness movement
Now, I could have just committed the damn file, I knew it worked and was simple javascript. But this did not resonate well with me. Not this time. I went on a little side mission of commenting on every single line, explaining what each line was doing. I can tell you, I feel much better about it after doing so. Sure, it took 10 times as long. But who cares? I have a hamburger menu I can explain and share with others that are trying to learn. Do not auto-tab the comments or have AI write you comments that you are not going to read, that defeats the purpose. Type them out. Allow typos. Make mistakes. Above all... Learn!
Start with something simple
I dissected a simple hamburger menu, something that I am slightly obsessed with. Can we just appreciate the simple magnificence for one second?
=๏ฟฃฯ๏ฟฃ=
These have been around for ages and I am certain many of us use borrowed code or let AI do it. But what are we missing actually? I built a mockup website for a pretend business with simple HTML and CSS. Then I added javascript, admittedly my Achilles heel. An overwhelming amount of frameworks and cutting edge technologies leaves someone that is trying to learn in complete disarray. I had Claude write me up a hamburger menu that shows on small screens using vanilla javascript.
Pause before going forward
At this point I hit the breaks, and dissected the javascript. By slowing down and creating space for learning, a certain level of satisfaction and pride is returned to our work. Your coding experience does not always have to feel like: "Ahhhh! 500mph everything - new tech - no idea - must make work and do it fast!" This my friends, is the fast track to burnout, especially for those just beginning.
What it is actually doing:
For browsers that have javascript enabled, it creates the hamburger menu and a multi-select dropdown so users can select more than one event at a time. Small things like this, give us a real appreciation.
โจ Learning - Do not skip this part if you can find time
What I learned: does not support multi dropdown options, highlighting the use case of javascript here. What if I am a new user and want information on three events? Submitting 3 separate inquiries clogs up the whole user-support pipeline! Eww. However, it is good to know that in the edge case where users may have javascript disabled, they will still be able to select at least one option from the dropdown, allowing them to at least select something from the available options. That is a nice little built-in fall back feature! Here is the full javascript I used for the hamburger menu and navbar UI components. Of course you will need some CSS and HTML So Iโve stripped down the website to bare bones for demonstration purposes only. Been a minute since I used codepen! There are alot of comments, I reccommend going to codepen and making your screen super wide. ๐คฃ
Everyone is of course welcome to use my example. No need to ask. ๐พ The point of all of this is that the root of our satisfaction comes from knowing why things are working and understanding on a deep level. I have never had a project manager, but I would have to say I'd be better equipped to explain things to others in ways they can understand if I understand technically speaking, the whys and the wherefores of what is possible, or not.
Top comments (6)
The test I give myself with generated code is simple: can I break it on purpose and predict what happens? If I delete a line, change a value, or feed it an input the author never mentioned, and I cannot say what should happen before I run it, then I have not understood it, I have only read a confident explanation of it. Your manual-comments approach is the right discipline, because writing what each block does in my own words forces that gap into the open. When you dissected the hamburger menu, which part surprised you most when you actually traced it, the part the model had described as obvious but behaved differently in the browser?
The part that did stick out to me a little is that the menu is placed in between the logo and the links. I figured the button would sort of 'contain' the links as they are in the dropdown. But no, that's not how it works. ๐ The links always appear under the toggle, I guess I never put that deep of thought into it! Its not a button-container, its a button that drops down a menu under it.
I had the same container assumption at first, because a toggle sitting between the logo and the links reads like it should hold them. Once I saw the links always appear under the toggle instead, I started reading it as a trigger rather than a box, which fits the way the menu drops down below it. Did that placement change how you scan the header, or did it just register as a small layout quirk once you noticed it?
The "dopamine hit" of watching AI generate a working UI in five seconds is exactly what tricks us into becoming passengers in our own codebase. I love that you emphasized typing the comments yourself. Auto-generating comments with AI just annotates your own ignoranceโit completely defeats the purpose of the exercise.
Taking 10 times as long to actually digest a hamburger menu is infinitely more valuable than shipping 10 features you don't understand. Also, great catch on the JS-disabled fallback. Edge cases like that are exactly what beginners miss when they just copy-paste. This is a great reminder to slow down and actually learn the "whys."
Thank you for your comment @alexcodebytes ! I like how you phrased "AI just annotates your own ignorance." Epic ๐
Glad you liked!