Hand-drawn asset kit
Notebook marginalia, as components
Arrows, circled numbers, magnitude badges, boxes and numerals — scanned from the notebook, traced, and sliced into 153 named pieces. Each one renders inline and inherits currentColor, so it adapts to dark mode and sits in a sentence like a letter. Below: a few ways they could live in posts and across the design.
Footnote & sidenote markers
Swap the plain superscript ¹²³ in the sidenotes system for your own circled numbers — unmistakably yours.
Delete-driven development is the house style and the sidenotes plugin is only 75 lines because complexity is the enemy .
A marked-up draft
Point at the phrase, circle it, underline the word that matters. The red pen, used sparingly.
We moved the whole site to one node process under pm2 — a git pull and a reload, no containers, no orchestration. It is gloriously boring .
Inline annotation
Circle the thing that matters. Point at the next thing. The marks actually hug the words now.
When it hangs, delete code until it works — no clever fixes.
simple beats complex, working beats perfect
A number worth circling
A stat reads like it was written, not dashboarded — when only the number that matters gets the pen.
The blog has published 81,667 words , across 142 posts.
Numbered steps
Circled numbers as bullets turn a dry ordered list into something that reads like a marked-up page.
- Write in Obsidian with YAML frontmatter and tags.
- Process with yarn blog:process into structured JSON.
- Serve through dynamic routes that consume the JSON.
- Push to main — GitHub Actions builds and deploys.
A little flow diagram
Circled numbers and arrows compose into a hand-sketched pipeline — the kind you'd draw on a whiteboard.
Hand-drawn callout frames
A traced box around a pull-quote feels handmade in a way a CSS border never will.
“When the system hangs, delete code until it works. Simple beats complex. Working beats perfect.”
Hand-drawn unit charts
Your real notebook stipple dots, duped and rotated into a 10×10 grid. Fill as many as the number says — isotype, by hand.
Weaving them in
The point isn't a gallery — it's that they disappear into the writing, the UI, and the charts. Three hooks do that: an :hd{} directive for prose, automatic upgrades of existing markup (footnotes, dividers), and a <HandDrawnAnnotation> for dataviz.
Dataviz annotations
Point, circle, label — anchored to coordinates over any chart (SVG or canvas). The vocabulary of a marked-up printout.
Automatic — no new syntax
A client plugin upgrades existing markup inside posts: footnote markers become circled numbers, <hr> becomes a hand-drawn rule. Old posts get it for free.
Intentional — the :hd directive
Drop a specific mark exactly where you want it, right in the markdown. Mirrors your :prediction / ::gear directives.
The deploy is just pm2 reload :hd{name="arrow-right-long"}
then read the logs and move on.The deploy is just pm2 reload then read the logs and move on.
In the wild
Dropped into the kind of UI they'd actually live in. Every number, prediction, and changelog entry below is real — pulled straight from the site and the archive.
Stats dashboard
Analytics annotation
Prediction
AI-generated code tops 30% of commits in the 50 biggest GitHub repos.
Changelog
- Photo backupElectron + Chrome bloat a Tauri / Rust app
- systemd, the hard wayRestart=on-failure Restart=always
- Where I postTwitter Mastodon
- MCP meta-map4,096 dimensions 2
Straight from the archive
Not lorem ipsum — actual lines from real posts, marked up the way you might in the margin. Each one notes where it came from.
Last year I made a grand total of one video. This year I want to make 100.
Seeing my step count drop below 5,000 for days running is a clear sign I need to touch grass .
If you're going to spend half your life in a terminal, it might as well feel like a cyberpunk movie.
I built a network of 29,915 officer nodes and 159,671 relationships in Neo4j, then let the clusters surface .
Instead of avoiding hard work or hard problems, we should make hard work fun .
If you can reliably discover the magic words you need, you can teach yourself almost anything.
The complete kit, in use
Every mark in the set doing a real job — captioned with real numbers, projects, and lines from the archive. Repeats are fine; the point is that nothing's left sitting in the drawer.
Arrows · pointed the way they point
Numerals · real figures, hand-set
Number words · counts, spelled out
Circled · 11 tools shipped
- dockrune
- exif-printer
- git-status-dash
- ascii_webcam
- Dataproofer
- smallbot-mcp
- tv-station
- scrapbook-cli
- MorningRadio
- music-cli
- NBC Big Board
Bold circled · the changelog
- Flickr → Instagram → self-hosted photos
- Twitter → Mastodon
- 800-line sidenotes → 75-line plugin
- Docker → pm2, one node process
- Electron → Tauri for the backup tool
- CCRB: 29,915-node officer graph
- 1,554-screenshot embeddings atlas
- tv-station: public-access from Watch Later
- personal APIs → "touch grass" alerts
- the hand-drawn kit, 153 marks
- 100 videos — the goal for this year
Letters · labels, grades, nodes
Magnitudes & badges · real orders of magnitude
Frames · a real line in every box
Textures & marks · marginalia
We moved the whole site to one node process under pm2 — no containers no orchestration.
- Rip everything from Cloudinary's API
- Handle the rate limits without exploding
- Resume incomplete downloads after a hiccup
- Work while I'm three spliffs in on a beach
The library
Click any asset to copy its <HandDrawn> tag.