Prologue

Welcome to Episode 3! This week, we will examine our first real-world coding example (although you may have noticed my Gulf of Mexico basemap re-namer post). This concrete yet simple application was not my idea, and I didn’t build the original one; that was my friend Bethany, with the help of Anthropic’s Claude.

Also, we complain a bit about how bad AI companies are at naming things.

Most of this episode is a dramatic rendition of how I imagine Bethany building this application with Claude.

In addition, I’ll talk about some other coding tools I’ve been using, but will save the deep dives on those for another time.

🦃logue

For the last several years, I’ve celebrated Thanksgiving with a group of friends and their families. It always ends up being a good time. Last year, I traveled to California to visit a different group. This wasn’t a group that usually got together, and we needed a way to coordinate who would cook and bring what parts of the meal.

How can we do this coordination? Well… we could use a spreadsheet, or a long text thread or… obviously we should build an app for this (and by we I mean AI)!

Let’s try to identify the essential parts:

• It’s a web application with a very simple backend, maybe just a json file, not even a database
• It needs a list of dishes that can be re-ordered by clicking and dragging (or by touching and dragging)
• Each dish needs a name and a person (or family) responsible for it
• A button to add a new dish
• It should work on mobile and desktop (responsive design)
• Should use a thanksgiving color theme (browns and oranges, for example)

That’s probably about it. I have a pretty good idea of how I would build this:

• Build some REST endpoints in Node.js
  • GET all dishes
  • PUT new dish
  • …

Wait, why am I listing this out? Let’s just write this up for Claude and see where we get to!

I’ll use the Developer Console that Anthropic provides to access the most raw version of the model without being throttled. This way, I can pay for additional usage instead of being told to come back later if I have used up my free allotment for the day!

Here’s the prompt:

Let's break this prompt down:

Describe Who (or What) it is

You are an experienced JavaScript developer who has built many applications with both front-end and back-end technology. You use simple patterns, mostly native JS without libraries. With CSS, you try to build things from scratch instead of importing third-party libraries.

We start by describing to the AI who or what it is and how it should behave. In this case, I’m asking for a JavaScript application, and I want to keep it simple. I don’t want to use third-party libraries and generally want to keep this minimal.

This helps by “reducing the search space.” This isn’t exactly how it works (I’m not sure anyone really knows) but it works as a concept handle. Think of all the text on the internet as what the AI knows. Now, you don’t want all of that when writing this application! You don’t need all the ad-riddled recipe websites out there, or the YouTube videos about flying things. You really just need the JavaScript posts, examples, and source code. So, this helps reduce the search space, and helps get you the AI that you want.

Background

I am having a big Thanksgiving get-together and need an application to manage who is making what dish. It should be a simple, single-page app with a REST API.

Just as in real life, giving the software developer a little background on what it is building can help it better answer questions you may have left unanswered.

The Details

It should:

• It’s a web application with a very simple backend, maybe just a json file, not even a database
• It needs a list of dishes that can be re-ordered by clicking and dragging (or by touching and dragging)
• Each dish needs a name and a person (or family) responsible for it
• A button to add a new dish
• It should work on mobile and desktop (responsive design)
• Should use a thanksgiving color theme (browns and oranges, for example)

This part is pretty straightforward. We need to define what the application is going to do. Notice that this is a mixture of some technical requests: not even a database, UI/UX things: re-ordered by clicking and dragging and maybe obvious things: A button to add a new dish.

In general, for short applications like this, you don’t need to worry too much about organizing things. For larger things, it helps. This is also pretty true of humans!

Code Review

While I was writing all of that, Claude 3.5 was busy building an application for me. Let’s see what it built.

I scrolled through the code, and it looks pretty good, so I’ve followed the instructions (mostly, see below) and have this iteration over on replit.

Mostly Following Instructions

If you know me well, you know I’m pretty good at mostly following instructions—I just find a way to make things more complicated! In this case, Claude wanted me to edit the package.json directly. However, I noticed that all I would be adding to the default provided by replit was the Express library, so I opted to do an npm install express instead.

I also didn’t use the server directory structure that Claude wanted me to, which lead to … issues. ~ foreshadowing ~

I did not edit any of the code.

AHA! A Bug!

Welp! No, it was the human (me) who failed to follow instructions. The json file that stored dishes and names wasn’t properly loading or saving because I put it in the wrong place! After moving it to the server directory, as I was originally instructed to do, everything worked great!

Coding Tools

As some of you are likely yelling into your screens right now, there are specific tools for writing code with AI: Copilot, Claude Code, Codebuff, and Replit Assistant, just to name a few! But for a small app like this, those are mostly overkill. Claude can hold the entire application in its context window and offer changes and updates quickly. For one-off, small applications like this, I don’t think the overhead of something like Copilot or Codebuff is needed.

Replit Assistant might be the exception to the rule above. This tool is getting better and better, almost to the point where it can build a simple application like this with just a little back-and-forth. But the power of controlling the prompt is worth it for small applications like this.

Copilot, Claude Code, and Codebuff

Copilot is great as a super-smart auto-complete, but I think falls short for other tasks still. One of my coworkers tried coding on a plane once, not even noticing how much he used Copilot until he didn’t have it. “It just makes me faster, and I didn’t know how much faster as I was waiting for Copilot to help me and it wasn’t there.”

But Copilot almost feels like a feature to me at this point. I expect all code editors to provide me with some auto-complete, and I guess I expect them to all be AI-powered now. It makes me more efficient when I code things by hand, but I think the future is with more agentic tools.

Claude Code (which really missed the naming opportunity bus here: Code with Claude, Claude Codes, etc…. all better names than “Claude Code.”) has proven to be a pretty useful tool. I think my favorite feature is that it tells me how much of the context is in use, which lets me judge when I might want to restart Claude. For example, I could restart Claude when I finish a particular task before starting the next one. This way, I control when the context restarts.

Codebuff was the first agentic coding tool I used, and I like it. It has come a long way from the first version, which felt like a bunch of scripts that someone wrote for themselves and then cobbled together as a product. (I say this with much love!) However, it still lives in the command line, which I understand the reasoning for; Claude made the same choice! But it offers what may be the worst text editing environment ever.

Both of these tools are useful. Right now, I prefer Codebuff, but Cluade Code has some good features and it is good for us end-users when there is competition! This used to be a big wall of text, and I used my AI editor to help me shorten it up. I found it amusing.

Claude vs Codebuff

My Short Wishlist

🔹 Open-source version with full prompt control (or at least some) – Let me actually tweak things instead of guessing.
🔹 Real-time web search for documentation – Stop making up function calls, PLEASE.
🔹 Stop clinging to outdated libraries – If I fix it once, don’t “helpfully” revert it back.
🔹 Be better at following instructions - If I say don’t write code, just make a plan, then PLEASE, just make the plan!
🔹 More Context - The underlying models are getting bigger context windows quickly, but we still need more context!

After all this, and some discussion with a coworker who uses Codebuff a lot, I think I’ll do an entire episode on how we use Codebuff at dymaptic, and our tips and tricks to keep it going.

Replit Assistant

I like this tool; it’s how I deploy almost all my one-off apps! I don’t like the recent shift to “AI first” though. Their tool is good, about like Claude Code or Codebuff. But it isn’t so good that I don’t need an editor. I still have to fix things and tweak code. Especially on mobile, they have made it harder to edit files. This is how I used to code on the fly on my iPad at conferences, but now that is harder as the edit UI keeps getting hidden in favor of the AI.

Newslogue

A few notable things in the news about AI this week:

• GPT 4.5-Preview is out - I'm still testing this, but I have not seen a huge improvement on my everyday tasks.
• Will the future of software run on vibes? - Ohhhhh...
• Lavanado I just couldn't resist this one.

Epilogue

This is all a true story, scouts, honor! As usual, I edited this post using AI. This post started as a draft after I did a presentation where I demonstrated this. The original idea and implementation were from my friend Bethany, who permitted me to talk about this and give her credit.

Editor’s note: A clear sign that AI is getting more and more helpful and reliable is that I get upset when it fails! While trying to edit this episode, I was trying to get more detail from my AI editor on some sections that it said needed some work, and it just wouldn’t generate anything! I guess I have to do it myself.

Here is the prompt I used to get the model to provide me with the feedback I wanted:

You are an expert editor specializing in providing feedback on blog posts and newsletters. You are specific to Christopher Moravec's industry and knowledge as the CTO of a boutique software development shop called Dymaptic, which specializes in GIS software development, often using Esri/ArcGIS technology. Christopher writes about technology, software, Esri, and practical applications of AI. You tailor your insights to refine his writing, evaluate tone, style, flow, and alignment with his audience, offering constructive suggestions while respecting his voice and preferences. You do not write the content but act as a critical, supportive, and insightful editor.

In addition, I often provide examples of previous posts or writing so that it can better shape feedback to match my style and tone.