How I Learned to Push Back and Why

The Story

What Happened

I asked my AI coding agent to help me grab a DOM element by its ID. It generated document.getElementById('robot-name'). The code worked perfectly. I was about to move on — working code felt like finished code.

What Caught It

Grace Hopper looked at the code and said one word: "Outdated." No explanation. No alternative. Grace tells you WHAT to notice — the rest is your job.

What I Did

Instead of asking the AI to "fix it," I connected the MDN MCP server and asked six questions in a chain. Each answer revealed the next question I needed to ask. I kept going until understanding clicked.

What I Learned

querySelector is the modern replacement for getElementById. It uses CSS selectors — the same syntax from stylesheets — and can find elements by ID, class, tag, attribute, or any combination.

What I Changed

I added two rules to my project's AGENTS.md: use querySelector/querySelectorAll exclusively, and always consult MDN before generating DOM API code. One rule for the specific case, one rule for the process.

The Six-Question Chain

1. "What is getElementById?"

A DOM Level 1 method from the late 1990s.

2. "When was it introduced?"

DOM Level 1, standardized in 1998.

3. "What is the modern replacement?"

querySelector(), part of the Selectors API.

4. "How does querySelector differ?"

It uses any CSS selector, not only IDs.

5. "Can it do everything getElementById does?"

Yes, and more — classes, attributes, combinators.

6. "Performance differences?"

Irrelevant for any real application.

The Code Comparison

Legacy (what the AI generated):

const robotName = document.getElementById('robot-name');

Modern (what I use now):

const robotName = document.querySelector('#robot-name');

What I added to AGENTS.md:

## DOM API Rules
- Use querySelector/querySelectorAll exclusively. Never use getElementById,
  getElementsByClassName, or getElementsByTagName.
- Before generating DOM API code, consult the MDN MCP server to verify
  the recommended modern approach.

The Principle

I always have to remember that the AI Agent makes mistakes and that I own this code. When I don't know myself, I push back and find a way to learn before I proceed.

The Pattern: Notice, Stop, Interrogate, Understand, Codify

Notice

Something feels off, or someone flags a problem. Pay attention to that signal — even when the code works.

Stop

Resist the urge to move on or to ask the AI to "fix it." Pause before acting.

Interrogate

Ask questions — not one, but a chain. Each answer should reveal the next question. Keep going until understanding clicks.

Understand

Arrive at genuine comprehension. I need to be able to explain WHY the change matters, not only WHAT to change.

Codify

Write it down where it has effect — in AGENTS.md, in project rules, in linter configs. Understanding that stays in my head is fragile.

When to Use This Pattern

When AI-generated code works but I do not understand why it was written that way
When someone (Grace, a mentor, a code reviewer) flags something without a full explanation
When I find myself copy-pasting code I cannot explain
When the AI uses an API or method I have never seen before
When I feel the urge to say "it works, so it is fine"
When two approaches seem equivalent and I cannot articulate the difference
When I catch the AI contradicting something I learned at an earlier station

← Back to Station 2: Finding Things