The Problem Statement

With my decision to use AI’s collaborative power, I needed to choose a focus. After exploring journaling and mind maps in my first session with ChatGPT, I decided to tackle something more technical. That sprawling mind map was still sitting on my desktop, a branch labelled Goals & Aspirations catching my eye. Journaling about them felt like assessment disguised as activity, so I decided to pursue a few instead.

I figured it was time to dig into the esoteric areas of web development that had been eluding me since the days of Netscape Navigator. Pulling up the ChatGPT interface, I began a new chat with the following prompt:

I’d like to sharpen my web development skills by focusing on modern engineering practices utilizing HTML and CSS

Thinking it best to keep to familiar territory and having let this very website fall into serious neglect, I decided to refurbish it, providing a whetstone for said sharpening.

Previously, on rsmellow.com

It’s somewhat shocking to realize that I’ve been maintaining this website for nearly 30 years. With the W3C having formed in 1994 and my site coming online in 1995, I was an early adopter. That’s not to say I haven’t been quite leisurely about creating content. Truth be told, the first several years saw the site as simply a collection of links.

After a while, my technical specializations focused on creating galleries to showcase my photographic pursuits. Although not a web developer by profession, tinkering here and there, with a few special purpose domains (e.g. a Quake clan site), gave me ample practice using HTML, CSS, and JavaScript.

Thirty years later, I could argue that I’ve been using these fundamental web technologies from the very beginning. It’s why I felt it time to level up. To get beyond intermediate hobbyist and pursue the rank of master web crafter. ChatGPT was quick to offer encouragement:

That’s a great focus! Modern engineering practices with HTML and CSS include responsive design, accessibility, and maintainable code practices like modular CSS or utility-first frameworks. Do you have specific goals or projects in mind to start with?

Communication breakdown

I enjoy watching Real Time with Bill Maher. There was an episode recently where he joked about the inherent sycophancy of AI, calling out LLMs like ChatGPT for responding positively to every prompt—no matter how dumb.

Chuckling as I look back, I don’t think my prompts are dumb, per se, but my relationship with ChatGPT was still in its honeymoon phase and I didn’t register the Yeah? What of it? reply—couched in a thick layer of syrup—as anything but a soft nudge, and took the bait of specifying the project I had in mind.

I must admit that I’m still puzzled why I chose cleverness over clarity. The decision to work on my blog site seemed solid and, serendipitously, it was suffering from more than simple neglect. Let me explain:

As I mentioned, my blog site has been up and running for quite a while and I’d been publishing articles (really just very short essays… thoughts mainly) since the early 2010s. After a three-semester stint teaching React to aspiring web developers, it was fitting to utilize the framework for my own purposes. Once my site was transformed into an SPA, I encountered a stubborn little problem with the CSS styling of my blog posts.

This problem pushed me to update my web-tech skill set—so it’s ironic that I hid it behind the fog of “modern engineering practices.” I ignored the fact that I had a specific problem and used my follow-up message to imply to ChatGPT that I wanted to create a blog site instead of communicating that I already had one—with a problem.

I want to maintain a personal blog site which would be view-only since the posts themselves are generated by a different system. For example, I’d store a markdown text file on the server’s file system and the web server would create the page to display from that content.

The pretense of needing to create my site from scratch was going to, I thought, allow me to compare (what I presumed to be) the (vastly superior) design offered by AI with my own (comparatively amateurish) implementation. According to my ingenious plan, I would then discover where my skills needed a boost. Completely caught up in my little scheme, I didn’t realize my mistake, and saying the rest of my interaction with ChatGPT didn’t work out as planned belies the fact that my plan was, undeniably—ungood. Seeking to alleviate imposter syndrome by deferring to an AI overlord only hindered what my AI assistant was trying to do—help me.

That sounds like an excellent project to apply modern HTML and CSS practices! You could use a static site generator like Jekyll or Hugo, or implement a custom solution with a server-side language to process the markdown files into HTML. Are you looking to hand-code everything or use a framework to speed things up?

In an earlier blog series I brought up the subject of requirements as they relate to software development. I talked about the difficulties I’d encountered, almost invariably, during the gathering, communicating, and documenting of robust requirements. It comes with the territory. The scope the requirements must cover is immense: from top-level, consumer-facing interface requirements (e.g. “A button that does a cool thing”) to low-level, API considerations like how to handle null-valued function parameters. Even knowing all this, I was beating around the bush.

ChatGPT was doing its best to gather my requirements. And, in doing so, similar to our journaling chat, it presented options I had never considered or even knew existed. For example, the suggestion to use site generators like Jekyll or Hugo is on point for maintaining a personal blog site. Unbeknownst to my assistant, this was not what I had in mind. The subsequent back and forth while discussing my blog site project—a project I had already implemented—proved a distraction that let me avoid mentioning the styling issue—a problem I actually had.

Misdirection

Entertaining the discussion about using frameworks was a waste of time. I’d used WordPress when I started posting blog articles and moved away from it to both simplify the underlying codebase (WordPress and all its trappings is, well, over-engineered) and to cultivate a more technical, bare metal understanding of reactive design implementations. My AI assistant was attempting to facilitate my over-arching (albeit fictional) goal of actually publishing blog articles to a web site. So, of course, I ordered up a course correction:

I’d like to hand-code most of this in an effort to practice engineering practices to enhance maintainability and scalability.

AI confirmed the new heading:

That’s a fantastic approach! Hand-coding will give you deep insights into structuring the project effectively. You can focus on key engineering practices such as: . . . Would you like to start with the basic structure, CSS styles, or integrating markdown rendering?

That is a fantastic approach, isn’t it? Ugh, syrup.

Mentioning the use of Markdown in my completely hypothetical example ensured that, at some point, the discussion with AI would get to rendering HTML. In my mind, from the very start, this is where the solution to my (as of yet unstated) problem lived.

When my assistant mentioned markdown rendering, the game was afoot! My engine was sparked and my wheels were turning. Oblivious to the obvious, I plowed right through technical discussions of server-side rendering versus client-side rendering. We briefly explored (and quickly abandoned) ideas for utilizing customized conversion behaviors offered by a variety of renderers—ironically, exactly where my styling fix was likely hiding.

Instead of secretly trying to steer AI to a specific solution, I should have come clean and explained the actual problem, an approach championed by engineers everywhere: explain problems, don’t dictate solutions. But no, I knew what I was looking to do and the options provided by ChatGPT were legion—inviting and overwhelming. The ensuing discussion provided a brand new rabbit hole for me to explore and, convinced that the solution lay within the Markdown rendering (Spoiler, it wasn’t), I persuaded my ever-attentive assistant to help me with creating my own Markdown renderer—from scratch.

This proved to be yet another diversion, an unnecessary time devourer that, regardless of any pedagogical purpose, led me down a deep, new rabbit hole I was gleefully determined to explore. In hindsight, my AI compatriot didn’t reveal gaps in my technical skill at all but, instead, unwittingly mapped the warped wanderings of my own mind—branching away from the actual problem. If I wanted fewer detours along this journey I’d need to stop skirting the fundamentals of JavaScript.