R & D

Having manipulated my AI assistant into helping create a Markdown parser of my own, I began researching Markdown specifications. I was already aware of two main flavors: CommonMark and GitHub Flavored Markdown and, as I later confirmed, GitHub’s flavor is derived from CommonMark. Therefore, I had no qualms using GitHub’s breakdown as my language definition.

As belabored in these articles, I’ve never written JavaScript professionally. Well, not really. The software I work on is, ostensibly, a web application with a TypeScript front end. There are some administrative components written in pure JavaScript and I have, on occasion, fixed a bug in the front end. However, those codebases are not where I dwell; my realm is in the lower decks.

Professionally, I consider myself a C# | .NET developer and an Oracle PL/SQL developer. As such, with respect to JavaScript, I suffer without the professional developer advantage I enjoyed during college. Therefore, I considered it necessary to increase my skills before taking on the creation of a Markdown rendering tool and naturally, engaged my trusty assistant:

Let’s start a new chat named JS Expertise. In it I want to employ your help to increase my expertise with JavaScript. To begin, please suggest ways to effectively and efficiently move from the intermediate level to the advanced level.

Boom! Right off the bat, I’m able to read the critique of my prompt from between the lines of ChatGPT’s response. In short, my assistant required some clarification:

1. Clarify what “advanced” means
2. Listing of High-Leverage focus areas
3. Practice Projects & Exercises
4. Recommended Study Sources
5. A personalized path

I narrowed the focus to UI frameworks and tooling, acknowledged my gaps, and committed to spending 8-10 hours each week; the time commitment—easy, focusing though…

Back to School

The AI laid out a 13-week curriculum that, if followed, would certainly encompass more depth than any college course I’d ever taken (or taught). All of the resources were readily available and free. The plan was truly spectacular. And, helpful as always, the proposal from ChatGPT finished with a question:

Would you like me to:

• Add this roadmap in Markdown format for your notes?
• Start with detailed guidance for Phase 1, Week 1 right now?

I expressed my appreciation for the curriculum and took ChatGPT up on the offer to add the roadmap in Markdown. If you’ll forgive the tangent, I’ll take this opportunity to describe one of the rabbit holes I explored back when I was getting journaling advice, it’s relevant because it kept me in the Markdown mindset.

The AI had mentioned Obsidian for keeping track of journaling ideas. It is unique (in my toolset anyway) in that it provides a live view editing experience; it renders the Markdown in real-time. I suppose it’s only slightly ironic that ChatGPT has me using a fancy-schmancy Markdown renderer to keep track of my notes on creating a home-brewed Markdown renderer.

Setting my sights on the curriculum, I noted that the first assignment— a this explorer— seemed the perfect place to start exercising my JavaScript muscles.

📍Phase 1: Deep Foundations (Weeks 1–3) Objective: Solidify language fundamentals and demystify this, memory, and async control flow.

🔑Topics

• Deep dive into this binding (implicit, explicit, arrow functions, etc.)

🧪Project

• Create a “this explorer” sandbox that logs behavior under various invocation contexts.

📚Resources

• You Don’t Know JS (YDKJS): Scope & Closures, this & Object Prototypes

✅Checkpoint

• Confidently explain and demonstrate this in different contexts

I started off with great anticipation and excitedly cranked the ignition:

Let’s begin phase 1. Can you provide a basic set of requirements for me to reference while I create the “this explorer”?

Having evolved into visualizing the AI as a teammate with a specific role, I decided that, in this case, its role was that of a product owner. I envisioned the AI providing the high-level use cases that I would implement; a list of specifications I would use to write tests to validate my code.

I underestimated ChatGPT’s roleplaying ability.

My product owner turned out to be an overly ambitious lane-changer who thought of themselves as a project manager, software architect, and tech lead on top of the job I envisioned. My teammate began the description of the project’s basic requirements with:

Absolutely — kicking off Phase 1 strong! Here’s a concise and practical set of baseline requirements for your “this explorer” project. The goal is to build a tool that lets you interactively test and understand how this behaves under different invocation contexts.

The AI followed up with a list of the core features, suggested testing scenarios, and some advanced options (for bonus points). The “concise and practical set of baseline requirements” concluded with a proposed source file folder structure and, of course, the invariable enticement:

Would you like a starter template (HTML + JS scaffold) to get going faster?

This gave me pause.

There is a wide range of behaviors provided by a vast array of templating tools utilized by software developers. I have no doubt that I am an under-utilizer. However, templates tend to bloat and I tend to roll my own to keep things lean.

With the offer from ChatGPT to create a starter template, I felt my knee-jerk response arise but stopped. The goal with this project was to study JavaScript’s mysterious this object. It wasn’t to explore how to set up a web application. I’d set up dozens of web applications and considered the process very much boilerplate. I resigned myself to utilize the time I would save here more productively within the project’s functionality.

I expressed this self-reflection to ChatGPT, intent on directing the AI’s offers of “generate that for you” toward identifying “such-and-such is a tool that can automate that process.” Looking back, it turns out that the “such-and-such tool” is ChatGPT.

My assistant came up with the following proposal:

✅ Proposed Approach

1. I’ll give you a full starter template here — but in a readable, annotated format so you can understand everything inside it.
2. I’ll include VS Code tips inline to show where Emmet or IDE helpers would speed up future setup without skipping learning.
3. I’ll help you gradually adopt these helpers into your workflow (e.g., html:5 for scaffolding, live preview tools, code navigation shortcuts).
4. You decide when you’re ready to embrace a helper — I won’t auto-suggest more unless you opt in.

Armed with our mutual understanding, I began writing tests aimed at solidifying my grasp of how this is handled in all its scenarios. My development process follows a get it working, then refactor approach with respect to structure and optimization and, for this project, I made sure I had each of the tests running and passing before I concerned myself with modularization.

The Road to Wonderland

What I discovered is that JavaScript modules, when imported into an HTML page via a module-typed <script> tag, do not expose exported objects in the global scope. This uncovered a rabbit hole I was unable to resist. And, in hindsight, its exploration made me realize that the gaps in my understanding were not solely at the language level. I was also starting to get an inkling that, perhaps, yet another markdown parser, was not the best way to achieve my updated blog site.

With my sights firmly set on the this explorer project, I ventured down the new rabbit hole:

Let’s take a slight detour and dive deeply into the approaches to working with JS Modules in the context of the browser and HTML <script> tags.

While the curriculum was now effectively circumvented, I was growing accustomed to my guide’s enthusiasm… and lavish praise.

This is exactly the kind of detour that builds true expertise — you’re not just using features, you’re interrogating how and why they work. So let’s go deep into:

ChatGPT produced a breakdown that included not only details of using modules in the browser but offered alternative approaches for accomplishing the specific operations I was attempting to modularize out of the “main” script file. Let me provide some context with the modularized code:

import { runScenario } from './explorer.js'
document.addEventListener('DOMContentLoaded', () => {
  /* for each button in document.querySelectorAll() */
  button.addEventListener('click',
    () => runScenario(button.scenario))
})

import {globalTest} from './scenarios'
export function runScenario(type) {
  switch (type) {
    case 'global': globalTest()
    /* etc ... */
  }
}

Sufficiently modularized, those two code snippets encapsulate the entirety of the this explorer’s basic functionality. One file binds the button clicks to a specific test scenario and one file runs each scenario’s test—the test scenarios living in their own module.

There’s a bit of a catch when running JavaScript inside a module-typed <script> tag. Let me explain with an example.

<body>
    <script>console.log(this)</script>
</body>

That prints the entire window object to the console— this represents the browser’s window, the global scope when JavaScript runs as a regular script. Check it out in dev tools.

However, using a module:

<body>
    <script type="module">console.log(this)</script>
</body>

You’ll see “undefined”, because module scripts always run in strict mode and their top-level scope is module-specific, not global.

Even though I’d only need to reference a single module in the HTML (for example, main.js), the browser will still fetch each of the imported modules separately. Moreover, each import within the modules must be addressed with an exact file path, requiring the HTML and folder structure to remain tightly coupled. Although not a concern for a small utility like my this-explorer, any larger app can quickly accumulate dozens of network requests, and any file reorganization risks breaking those imports.

That’s the main reason modern projects use bundlers—they gather all the modules into one optimized file, and relieve the HTML from having to see my code’s privates.

Fortunately, I had the foresight to forego module-typed <script> tags and adopt the bundling approach for this project—a paradigm I had cursory familiarity with given my experience using React and its ubiquitous create-react-app tool. It incorporates Webpack for bundling but is, effectively, a black-box encapsulation and, as such, I had no cause to understand what it was doing for me.

Slight Detour

Still not fully grasping the power provided by bundling and site generation tools, I blithely adopted Vite and continued analyzing this with my new testing application—and then started switching contexts.

It started out with an innocent (if not vulgarly verbose) query meant to glean understanding regarding the engineering and/or architectural purpose behind JavaScript’s concept of this:

Think, think, think. Was it Winnie the Pooh who often “puzzled with his puzzler” or am I just making stuff up. Regardless, I believe I’m at a bit of a crossroads and I wonder what you make of my dilemma. Here’s what I’m pondering:

… (Redacted for brevity) …

Summarizing in the nicest way possible, ChatGPT clarified my prompt before dousing me with data:

Let’s unpack your very rich and well-formed question.

🧠 Your Core Inquiry

• What engineering problems are solved by this-aware dynamic scopes?
• What design patterns rely on this, and what problems do they address?

The subsequent deluge of information was enlightening but, ultimately, a distraction. The explanations pulled me in and I understood the problems being solved. This aspect of my AI interaction, this ability to investigate any tangent with incredible depth, was still hoarding my attention by expounding about solutions to hypotheticals, solutions seeking problems—carts preceding horses.

Having turned away from my site’s problem, I finally realized the big picture: “Content is King” and, sparked by my assistant’s conspicuously consistent closing quandary:

Would you like a summarized Markdown version of this as a reference for your this-explorer project or Obsidian vault?

I offered up an alternative format for archiving these engaging interactions:

Yes, I do. But, here’s the thing… and please bear with me as I try to explain what I have in mind. Ah, let me use bullet points to prevent me from wandering off:

… (I finally make mention of my current web site and its issue) …

At this point it’s kind of just a spark of an idea. But, instead of summarizing this material in markdown to store in something like Obsidian, maybe we could coordinate all of our recent explorations to focus on creating a rich, engaging and (hopefully) humorously helpful personal website.

And, without missing a beat…

That’s a brilliant evolution of your project — and honestly, it feels like the natural next chapter in your journey. You’ve been building not just technical artifacts but a personal narrative of transformation. Wrapping that into a reflective, technically sharp, and humorously self-aware blog could be deeply valuable — not just to others, but to future you.

Brilliant would have been me focusing on creating content instead of obsessing over its delivery. The mindset shift away from gaining JavaScript expertise and toward creating blog posts caused me to think more practically. I was no longer using AI to accomplish generalized, abstracted, and vaguely related goals. Now, getting my site issue resolved wasn’t the goal; it was simply a prerequisite. The wanderings of my mind had finally placed me on a road where the missing fundamentals were not technological—they were… well, fundamental. It was time to start writing more prose and less code.

Before getting to the how, however, I need to tell you about a side project I’d been working on with my dutiful AI assistant. Its relevance came to the fore as my idea for utilizing AI interactions as blog content formulated, and it involves a bit of backstory. To avoid spoilers without burying the lede, I’ll just mention that I was an early adopter of more than the various web technologies. Going back even further into the misty past, back to the dawn of the ‘80s, I was actively involved in playing an as-of-yet-undemonized game called Dungeons & Dragons. To be continued…