I'm starting a new open source research notes area for this site. This section will serve as a journal of my ongoing research, thoughts, and discoveries in software development, AI, and system design.
The goal is to capture insights, document experiments, and track the evolution of ideas as they develop. Unlike blog posts, these notes will be more informal and focused on the research process itself.
Setting up the "Notes" section
Adding notes to the site requires some interesting structural changes. The old text logo is too big to allow a new top-level section, so moving to using an image instead. I don't want to add a hamburger menu for mobile unless I really need one.
As with most development work now, the initial work was done by AI (Claude Sonnet 4) using a Metaphor prompt. This turned into quite a complex implementation with Claude doing 12 distinct steps to complete the task. This was also done using a non-thinking version of Sonnet, which yet again demonstrates how the non-thinking/non-reasoning AI models tend to be able to do quite complex sequences of work just by virtue of each new tool-use triggering the LLM to respond to the newly-presented context.
It continues to feel like the thinking/reasoning models are simply leveraging this same latent ability.
Role:
You are a world-class typescript engineer, highly skilled at building accurate and performant software
Context:
This mindspace is for my blog site: davehudson.io
The source files are in the src directory
Action:
The current design of my blog site uses the text "davehudson.io" in the top left corner. I would like to
replace this with the icon src/icons/android-chrome-192x192.png.
I am also going to add a new top-level section to the site. This will be "Notes" and will appear first,
before "Blog". The Notes section will be a daily journal of my research notes. To start with it will
look the same as the blog section, but this will diverge over time so I want to copy the blog code and
have an identical duplicate where "blog" is replaced with "notes". I also want an initial notes post
creating for today (2025-08-07).
Please propose a design that will solve these problems. Before you code anything, I'd like to see a plan.Once I'd looked at the updates I rearranged some of the site structure so things consistently flowed from projects -> blog -> notes. This just feels more natural.
Improving code rendering
This site uses a custom virtual DOM implementation (DVDI) to render the site. This makes it easy for me to maintain as it doesn't need a ridiculously large framework to run. The VDOM supports components, but it had a pretty clunky implementation for code fragments.
I figured it was time to improve this so I set Claude Sonnet 4 the task of improving things. Here's the ridiculously vague Metaphor prompt I used:
Role:
You are a world-class typescript engineer, highly skilled at building accurate and performant software
Context:
This mindspace is for my blog site: davehudson.io
The source files are in the src directory
Action:
My blog site is a single page app. When I want to use code fragements in blog and notes posts this is quite
awkward because there's quite a lot of code setup involved. An example is in src/blog/2024-07-15.
Can you come up with a more elegant way to handle this?
Please propose a design that will solve these problems. Before you code anything, I'd like to see a plan.Claude ended up doing 11 tool calls to come up with a design concept. It didn't work first time as it didn't read the DVDI code and guessed at its behaviour from what it had seen. Once I had it read the code it fixed the 2 issues it spotted and everything "just worked". Fortunately I recognised a method hallucination must have been because it hadn't read the relevant code.
It does feel like there's a need to update the Metaphor prompt preamble to tell the LLM to carefully check the code it's working with rather than trying to infer how it works.
The new code fragment implementation is dramatically better and saves a huge amount of boilerplate code. It also supports inline code fragments, which is a nice bonus. Updating blog entries is now much easier.The new implementation has 329 lines of code, but reduced each code fragment to 6 lines of code instead of about 40!
The whole process took about 2 hours, hugely simplifies the blog posts, and has nicer styling too.
Adding a "text" syntax highlighter
The blog site syntax highlighter had support for a number of languages, but not one for raw text. Added this with a one-shot prompt to Claude:
Role:
You are a world-class typescript engineer, highly skilled at building accurate and performant software
Context:
This mindspace is for my blog site: davehudson.io
The source files are in the src directory
Action:
The code has a series of parsers for handling different programming languages, but doesn't have anything
that does a dummy parse for plain text files.
The parser code is in src/lib/syntax
I want you to create a TextParser class that simply returns each line of a file as a single "TEXT" token.
As this is a trivial class I don't want you to bother creating a TextLexer.
Please propose a design that will solve these problems. Before you code anything, I'd like to see a plan.Fixed up a few uses of this and deleted some now-unecessary CSS.
Updating all blog posts to use the new code formatting
Updated the 2 remaining blog posts:
Role:
You are a world-class typescript engineer, highly skilled at building accurate and performant software
Context:
This mindspace is for my blog site: davehudson.io
The source files are in the src directory.
My blog files are in src/blog
Action:
We have just added a new approach for syntax highlighting code fragments from files. An example is in
src/blog/2024-11-15.
Two other blog posts are using the old formatting. These are 2024-08-06 and 2025-04-24. I want you to update
both to use the new format.
Please propose a design that will solve these problems. Before you code anything, I'd like to see a plan.
Wrapping up
Diff stats for the day!
metaphor/update.m6r | 14 +++--
src/Makefile.mk | 4 +-
src/about/about.ts | 10 +++-
src/app.ts | 61 ++++++++++++++++-----
src/blog/2024-07-15/post.ts | 190 +++++++++++++--------------------------------------------------
src/blog/2024-08-06/post.ts | 169 +++++++-------------------------------------------------
src/blog/2024-11-15/post.ts | 184 +++++++++----------------------------------------------------
src/blog/2025-04-24/post.ts | 148 +++++++------------------------------------------
src/components/Makefile.mk | 10 +---
src/components/daveHudsonLogo.ts | 10 +++-
src/components/pageHeader.ts | 3 +-
src/css/style.css | 110 ++++++++++++++++++++++++++-----------
src/lib/Makefile.mk | 1 +
src/lib/code-fragments/CodeFragment.ts | 161 +++++++++++++++++++++++++++++++++++++++++++++++++++++
src/lib/code-fragments/CodeFragmentManager.ts | 164 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
src/lib/code-fragments/Makefile.mk | 4 ++
src/lib/code-fragments/index.ts | 10 ++++
src/lib/syntax.ts | 1 +
src/lib/syntax/HTMLLexer.ts | 1 -
src/lib/syntax/Lexer.ts | 1 +
src/lib/syntax/TextParser.ts | 78 ++++++++++++++++++++++++++
src/notes/2025-08-07/Makefile.mk | 8 +++
src/notes/2025-08-07/post.ts | 122 +++++++++++++++++++++++++++++++++++++++++
src/notes/2025-08-07/update1.m6r | 19 +++++++
src/notes/2025-08-07/update2.m6r | 15 +++++
src/notes/2025-08-07/update3.m6r | 18 ++++++
src/notes/2025-08-07/update4.m6r | 18 ++++++
src/notes/Makefile.mk | 1 +
src/notes/NotesPost.ts | 35 ++++++++++++
src/notes/notes.ts | 234 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
src/sitemap.xml | 6 ++
31 files changed, 1156 insertions(+), 654 deletions(-)
That's a pretty good amount of work for about 7 hours, including minor manual tweaks, reviewing and testing!