Friday, May 8, 2026
7 min read
claude-code

How far, really?

I remember right at the start of the 2026 Iran/US war the BBC coverage had this little graphic (first used in 2020) showing the ranges of their various missiles and capabilities. The graphic caught my attention, it was simple and powerful. I also noticed the subtle distortion in the rings thanks to our good old friend the Mercator projection.

Comparison of missile ranges from Iran — Source: BBC News © BBC

Because the BBC focused on the hit on the Akrotiri military base in Cyprus, my wife got concerned about them being able to hit the UK. Putting NATO air defence systems aside, I thought this was a really good question and realised I needed a globe to show her how far away we were from the Middle East.

This got me wondering if there was an opportunity to use current events to highlight something else we’ve all been blind to (unless we had a great geography teacher, or a good run on YouTube), and so the idea for “How far, really?” was born. Iran aside, there are other powerful arsenals out there, including North Korea. I was also fascinated to learn that India had built up quite a defensive capability, and so I thought I’d roll them out first. Showing this to a friend, they were curious about British or European missile capabilities, so I brought in France in a later iteration.

Screenshot of the How far, really? app

It also includes a simple visualisation for drawing a circle with a 500km-10,000km radius centred on some of the biggest cities in the world (at least one city per country) to highlight the distortion the further away from the equator you go.

I chose to build this with Clojure and ClojureScript, and for the UI I knew I wanted to try out UIx (which I haven’t tried before). I did all of this through Claude Code, for two reasons really: I’m a parent with a full time job, and I wanted to focus on polish and delivery rather than fiddling with code (as much as I love fiddling with code). I found it really useful because I could share it with some friends and family very quickly and get useful feedback, including “it looks a bit bland, what if it looks more like Command & Conquer” <3.

Aside: Command & Conquer

Command & Conquer is a real-time strategy game first released in 1995. The Red Alert series, which I played in high school, was set in the 1950s and has these strong Cold War parallels in the gameplay.

The journey was interesting. I took all the lessons learned from working with Claude Code nearly exclusively at work this year and tried to see what works outside of work and what doesn’t, and also what lessons I could bring back.

First takes

At first I thought I’d want to try using Leaflet to render the maps. Knowing I needed to deal with the distortions, I found the leaflet.geodesic plugin as well. I didn’t know what the state of the art was for rendering 3D globes so I went with what Claude suggested, which was Globe.gl.

It worked, the globe looked beautiful but the maps were horrible, at least aesthetically, and the globe and the map looked very different.

Then I remembered that D3 is pretty good at maps and I guided Claude to that instead. We did some work and swapped over the map rendering to use TopoJSON and the Natural Earth 1:110m Cultural Vectors dataset. We worked on the maps and rendering the ranges and it went smoothly from there. In browsing through the various D3 examples I also saw several interactive globes, which meant I made that my next target and we replaced Globe.gl with D3 maps as well. Suddenly we had a unified way of reasoning about topographical data and how we render it, and for users it is all the more consistent.

Good foundations

One thing I wanted right from the start was an evolving AGENTS.md file, but without writing an entire thesis upfront. I started with the opening paragraph from the UIx repo, and added some guidance that the app should always be mobile first but respond well on desktops, and should always support light & dark mode (which is still there if you disable the C&C theme).

To keep capturing the evolution of the project I added this section:

## Session plans

- After completing significant work, save a plan document to `docs/plans/` summarizing what was done and key decisions made
- Use zero-padded numbering: `001-name.md`, `002-name.md`, etc. — check existing files to determine the next number
- Each plan should include: context (why), what was done, key decisions/trade-offs, and relevant commits
- These serve as a project changelog for future sessions to understand the evolution of the codebase

The above, combined with the Claude.md management plugin made for a great way to continuously refine the AGENTS.md file and ended up capturing 24 plan/session docs as we went along.

I also found the Google Chrome Developer Tools MCP to be priceless as I can let Claude just get on with figuring out issues and testing changes.

I only learned about what Metabase was doing with custom subagents and skills when the project was practically done, so I’ll apply those to my next experiment. It definitely looks promising.

The costs

With all things AI there are huge costs, either directly (tokens) or indirectly. The only direct cost I had was my Claude Pro subscription. Whenever I ran into their session limits I simply walked away. I don’t see the value in paying for extra usage, especially for a little joyful side project like this. The breaks do well to stem the otherwise addictive flow of praise and affirmation…

Searching for sovereignty

I was looking for very basic traffic analytics, and particularly something that cared about people’s privacy. I want to know what people are doing on the site, and I simply do not need to know every last bit of detail about them. I knew I wanted to get this service from a provider that cared about that too. I discovered and went with Umami which is an open-source, privacy focused analytics platform. I’m using their cloud version (and I’m using it here on the blog as well).

I was also looking for an alternative to Sentry and found Dutch-based Bugsink. It’s 100% API-compatible with Sentry, so you just swap the DSN and you’re off to the races.

There is still lots to do in this area to move away from the tight grip of Silicon Valley. And the irony of paying Anthropic is not lost on me.

What’s next

As for How far, really?, I think it is probably done for the time being. There is a niggle or two I’d like to sort out, but that will come in time. If people have suggestions for improving it, or requests for additional arsenals, I will consider it and see if it is worth the effort. Just because it was made with Claude doesn’t mean making changes is free or easy.

For now I have to focus on the harder part, and that is getting the word out about it. That means stepping out of my comfort zone and sharing the project more widely in different spaces with different people.

Beyond this I still have plenty of things I want to play with, both with Claude and without. I’m trying to find out how to strike the balance where I can have Claude just deal with the stuff I don’t technically care about and free myself up for the joyful bits of programming and still remain connected to my craft. I’m looking for more EU alternatives to Silicon Valley incumbents, and excuses to use them and write about them.

Sources

The data sources for the missile ranges come from the CSIS Missile Threat site and the Missile Defence Advocacy Alliance, links below:

Natural Earth 1:110m Cultural Vectors are used for drawing the map and the globe, it is packaged up in Mike Bostock’s world-atlas NPM package.

The list of cities is based on the capitals of ~225 countries, and additionally includes some of the most populous cities in the world. It’s hand-rolled, no single public data source.

D3 features specifically leaned on: d3-geo, d3-drag, d3-zoom, d3-selection, d3-transition and topojson-client.

Back

Open Sourcery