Understanding What AI just Created in the 500mph Landscape

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. 🤣