Danny Smith - Articles & Notes

DHH’s new way of writing code

Tue, 28 Apr 2026 00:00:00 GMT

Whatever you think of DHH’s takes on other things, for me he’s consistently had good takes on Computer Things for a very long time (perhaps because they often echo my own).

This interview is worth listening to.

Theo: Open source is dead now?

Wed, 22 Apr 2026 00:00:00 GMT

Cobalt Next for Zed

Thu, 09 Apr 2026 00:00:00 GMT

Having recently switched from Cursor back to VSCode, I figured it was probably worth taking another look at Zed – if only so I have a second text editor configured how I like it. Zed comes with a lot of the features I want baked-in and it was pretty trivial to port my VSCode config over. But I was surprised to discover that nobody seems to have ported the Cobalt Next theme to Zed’s theme format.

So I went ahead and did that as best I could…

You can grab it on GitHub.

Switching back to VSCode

Tue, 07 Apr 2026 00:00:00 GMT

I switched from VSCode to Cursor as my main editor sometime in early 2025, primarily for the much better tab completion it had at the time. As my workflow has evolved over the last six months I’ve found myself using Cursor’s AI features less and less, to the point where for the most part I just use it as a normal text editor. While AI tab-completion is still sometimes useful, I’m finding more and more that anywhere I’m manually writing or editing code, normal non-AI completion tends to do the job just fine.

Cursor 3 was announced on April 3, and as expected it isn’t really a text editor anymore. I’ve yet to spend much time with it but I do know that there’s no longer a good reason for me to use Cursor as a text editor.

How I use a text editor in April 2026

My usual workflow at the moment involves having a project (or worktree) directory open in Ghostty with two panes: one for Claude Code TUI and one for a standard terminal. I have the same directory open in my editor, primarily for five things:

Visually reviewing & tweaking uncommitted changes made by Claude.
Manually staging and committing changes – I still mostly prefer to make my own commits on feature branches.
Manually exploring & referencing the codebase as I’ve always done, only now it’s often so I can provide input to Claude rather than make edits myself.
Manually writing or editing markdown files which describe requirements, tasks or plans before I have Claude read them.
Occasionally, writing or editing actual code.

This means I basically need a normal editor like VSCode configured how I like it, with a few specific additions:

“Standard” language extensions, as well as things like prettier, path-intellisense etc.
Just enough git-related extensions that it’s well-integrated with git and GitHub.
Extensions and configuration which makes it easy to work with markdown and CSV files.

My “new” VSCode setup

My guiding principle is to keep VSCode as close to its defaults as possible. I add cosmetic tweaks, formatting and linting, a fairly heavy markdown layer, and a deliberately small amount of AI tooling. Everything else is left alone.

The theme is Cobalt Next with a custom version of Operator Mono that includes coding ligatures, set in 15px 200 weight. I’ve moved the activity bar to the top of the window rather than its default spot on the left, and the cursor blinks with the “expand” animation and has smooth movement on. The minimap auto-hides and renders as colour blocks without characters. I use Atom-style keybindings (muscle memory from years ago that I’ve never managed to shake) and set a few other bits:

Tabs are 2 spaces.
Final newlines get inserted on save and trailing whitespace gets trimmed (except in markdown and YAML).
Prettier is the default formatter except for markdown, configured globally with single quotes, no semicolons, and proseWrap: preserve so it doesn’t reflow my paragraphs.
ESLint runs on save rather than as I type.

Format-on-save is deliberately off to avoid accidental big diffs when working with AI-generated code – I toggle it on or run it manually when I need it.

Markdown is the most heavily customised part of the whole config, because I write a lot of markdown and the defaults do things I actively dislike. Prettier is too aggressive with markdown – it reflows paragraphs, fights with my line break conventions and reformats lists in annoying ways. So .md files use yzhang.markdown-all-in-one as their default formatter instead, which is much more conservative.

I disable markdown link validation, soft-wrap at column 100, and preserve trailing whitespace. I also customise the editor token colours so H1s render in cyan and H2s in magenta, which makes long documents much easier to scan. cmd+b and cmd+i are remapped to toggle bold and italic when in markdown or MDX files. I also have the following extensions installed:

Markdown All in One - Provides formatting, TOC generation, list continuation, keyboard shortcuts, basic table editing, and is the default formatter.
Markdown Extended - Adds a bunch of other niceties.
Markdown Table - Makes working with tables a little easier.

For AI I have exactly three extensions installed:

The official Claude Code IDE extension, which connects the editor to a Claude Code session running in the terminal.
GitHub Copilot – purely for inline tab completion, disabled for plaintext, markdown etc.
GitHub Copilot Chat – installed only for the “Generate commit message” sparkle button in the Source Control view. I don’t use the chat panel, but the button is a feature of this extension and there’s no way to get it without installing the whole thing.

Git settings are minimal: smart commit is on (so I can commit without staging first), auto-fetch is on, and the “confirm sync” dialog is off. I have the GitHub PR extension and a file-history extension installed, but most of my git work happens in the terminal with git and gh – the extensions are just for the cases where in-editor review is genuinely faster.

I also have language extensions for the things I work with regularly (Astro, Tailwind, Bun, Rust, Tauri, TOML, Vitest), plus a CSV editor and a PDF viewer.

The full description lives in vscode-setup.md in my dotfiles repo, along with the contents of my settings.json if you want to copy any of it.

Quoting: An appreciation for (technical) architecture (Interconnected)

Thu, 02 Apr 2026 00:00:00 GMT

But we want AI agents to solve coding problems quickly and in a way that is maintainable and adaptive and composable (benefiting from improvements elsewhere), and where every addition makes the whole stack better.

So at the bottom is really great libraries that encapsulate hard problems, with great interfaces that make the “right” way the easy way for developers building apps with them. Architecture!

While I’m vibing (I call it vibing now, not coding and not vibe coding) while I’m vibing, I am looking at lines of code less than ever before, and thinking about architecture more than ever before.

I am sweating developer experience even though human developers are unlikely to ever be my audience.

Roberts Radios

Thu, 02 Apr 2026 00:00:00 GMT

I recently bought a Roberts Revival iStream 3L radio having wanted one for some time. It’s a beautiful thing. I grew up in a house where Radio 4 was on constantly, mostly playing on an old Roberts which my mum carried about the house with her.

While I have Amazon Echos in my kitchen, living room and office/bedroom, I still regularly find myself using my phone to listen to podcasts and radio shows because I can take it with me as I potter about the house and garden. I have two problems with this:

Phone speakers are rubbish and wearing headphones at home is both isolating for me and anyone else I’m sharing a room with.
I’m trying to spend more time with my phone tucked away in a drawer and out of mind.

What I really want here is a dedicated portable device which can play the radio without requiring my phone or laptop to even be switched on. I want it to sound warm like Radio 4 should, regardless of the volume. I want it to feel good and make me smile. I basically want my mum’s old Roberts radio.

But I also want a few modern features – I want it to:

Play podcasts while my phone is off.
Have an alarm clock and sleep timer.
Act as a bluetooth speaker if I need it.
Recharge itself when plugged in to mains power.

Which is exactly what the Revival iStream 3L does. It looks, feels and sounds like a classic Roberts and supports FM & DAB+ radio as you’d expect, plus bluetooth, 3.5mm jack and USB stick inputs. It has an alarm and sleep timer. It runs on mains power or six normal AA batteries, but with the flip of a switch and six 2000mAh NiMH rechargable batteries it becomes rechargable like any other modern device. It is exactly the kind of high-quality, well-thought-out, future-proof product that Roberts built their reputation on decades ago.

And importantly for me, it also supports Internet Radio & Podcasts via Frontier Smart’s tech with Airable providing the online catalog, so I can search & stream online radio stations and podcasts while my phone and laptop are both switched off. It also supports streaming services like Spotify, Deezer & Amazon Music, though they all require another device to search and select songs.

All-in-all it’s a cracking piece of kit. And so long as I keep the firmware updated, I expect it to remain so for a lot longer than most modern devices.

It also runs a webserver!

The useguide recommends using the UNDOK app as an easier interface for configuring & managing the radio, which got me wondering how the two communicated. Turns out the radio exposes a simple HTTP API on your local network called FSAPI. Given you know the radio’s IP address, you can establish a session and send simple GET requests to it which return XML:

curl "http://192.168.1.72/fsapi/GET/netRemote.sys.audio.volume?pin=1234"

will return

<fsapiResponse>
  <status>FS_OK</status>
  <value>
    <u8>2</u8>
  </value>
</fsapiResponse>

showing that the current volume is 2.

There are quite a few pre-existing libraries for interacting with FSAPI devices, but the interface is small & simple enough that they’re not really necessary.

Building a macOS menubar app

After digging about with curl for a while I asked Claude Code to make a SwiftUI macOS menubar app which shows what’s playing on the radio and lets me control it from my mac. After a couple of hours’ iteration we ended up with this:

GitHub - dannysmith/roberts-radio

Contribute to dannysmith/roberts-radio development by creating an account on GitHub.

github.com

If you have an iStream3L – or possibly any other FS-based radio – you can download a zip containing the menubar app from here. It should auto-discover your radio when you first run it.

Alex Piechowski: How I Audit a Legacy Rails Codebase in the First Week

Wed, 01 Apr 2026 00:00:00 GMT

TL;DR: Start with people, not code.

Minecraft Bluemap Plugins & Managing a Minecraft Server

Tue, 31 Mar 2026 00:00:00 GMT

For the last few years I’ve shared a survival minecraft world with my friend Cam. It’s hosted on WiseHosting and apart from a bunch of performance mods, the only non-vanilla stuff running on it are Distant Horizons and Bluemap.

While I could save some money by running my own server, I don’t really want to. I play minecraft to get away from my day-to-day, and I also don’t want to be responsible if something goes wrong and ~3 years of building in our world suddenly disappears. Hence I outsource to WiseHosting and avoid messing with the default installation too much.

But last month I found myself wanting three things which didn’t exist:

A Bluemap plugin which shows Chunkbase-style structure markers on our actual world map.
A Bluemap plugin to assist with chunk trimming.
A cheap way to run a persistent shared creative world with Cam, and also to spin up and manage ephemeral minecraft servers for various reasons.

After a few days vibe coding and learning about the minecraft ecosystem I have all three…

Bluemap Structures

mc-bluemap-structures is a Fabric mod and Bluemap plugin which reads your world seed and adds chunkbase-like structure markers to your bluemap maps.

It works by replicating Minecraft’s algorithms and creating BlueMap markers. You can read about how it works here. It’s currently somewhat limited by the fact that the BlueMap web app doesn’t handle very large numbers of markers performantly, so if you run it with a very large radius BlueMap will get janky. At some point I’ll look into rendering the markers myself as an overlay, which might help.

The process of building this was super interesting – I learned a whole bunch about how Minecraft decides where to generate structures, and also how Chunkbase manages to replicate the algorithms with such accuracy. I was surprised to discover that Chunkbase does this entirely on the client-side with a ~4 MB WebAssembly module compiled from Rust.

The project includes a command-line tool which uses playwright to extract structure positions directly from Chunkbase and save them to a JSON file. I built this as a way to verify my own algorithms against chunkbase, but it could easily be used to create a much simpler Bluemap plugin which simply reads a manually-generated JSON file from Chunkbase and shows markers based on that.

Bluemap Chunk Trimmer

As a minecraft map grows through player exploration, it becomes necessary to occasionally trim away chunks which have been generated but contain nothing valuable. This helps keep the world size (on disk) in check and also prevents players having to travel further and further afield to experience new features which will only appear in newly-generated chunks.

To do this well, you need a detailed map of your explored world and the ability to visually select chunks for deletion/retention. It’s also very helpful to know the playerInhabitedTime for each chunk – if it’s only a few seconds we can assume that it was only generated because someone flew near it and has probably never been visited. If it’s tens of hours we probably don’t want to trim it even if nothing’s been built, because someone’s spent enough time hanging out it’d feel weird if it changed.

Most of the GUI tools for chunk trimming only work on Windows or on local worlds (or both).

mc-bluemap-chunky-trimming is a Bluemap plugin which does two things:

1. Heatmap

Reads the InhabitedTime NBT data from .mca region files and renders a heatmap as an overlay in bluemap’s 2D flat mode. Chunks with less than 1 minute of inhabited time don’t appear on the heatmap at all, and the rest are colored according to how long they’ve been inhabited, with the highest level being 10+ hours.

When the heatmap is on, a little HUD will show the inhabited time of the chunk under the cursor.

2. Chunk Selector

With the Chunk Selector toggled on, control-click on a chunk will select it (or deselect it). Chunks can also be selected by dragging a box, or by “painting” with the mouse.

Selected chunks can be exported as either JSON or MCA-Selector compatible CSV. I intentionally decided against building the actual chunk deletion.

mc-infra

While the two plugins above might work for other people, mc-infra is very much for me alone.

It’s some fairly simple tooling for managing minecraft servers deployed to a Hetzner VPS.

1. Manifest System

The main feature is a manifest system which allows me to specify a bunch of stuff in YAML and use that to generate a suitable docker-compose file for itzg’s docker-minecraft-server and mc-router, as well as a bunch of other bits and pieces.

Given a manifest.yml like this

mod_groups:
  fabric-base:
    - fabric-api
    - lithium
    - ferrite-core
    - c2me-fabric
    - scalablelux
    - noisiumforked

servers:
  mynewworld:
    type: FABRIC
    version: LATEST
    mode: creative
    tier: permanent
    seed: '493527618652710797'
    mod_groups: [fabric-base]
    modrinth_mods: [bluemap, distanthorizons, simple-voice-chat]
    svc: true
    pregen:
      radius: 1500
    backup:
      interval: 24h
      keep: 3

I’ll end up with a properly-configured fabric server called mynewworld with:

Suitable memory, disk usage, CPU limits etc for a “permanent”-tier world.
My standard fabric mods installed, plus Bluemap, DH and Simple voice Chat.
Proper config and port-forwarding to support Simple Voice Chat.
The Chunky mod installed and configured properly to pregen chunks to a 1500 radius.
24h backups configured via itzg/docker-mc-backup.
Proper configuration so the server is available at mynewworld.mc.danny.is.
Because bluemap is included:
- Proper configuration & setup of Bluemap
- Nginx configured to serve bluemap at map-mynewworld.mc.danny.is

2. Control Scripts

A bunch of executable shell scripts are available on the PATH for managing the minecraft servers. Some of them are just very thin wrappers around docker commands. Others (like mc-nether-roof) are more complex.

Together, these scripts give me an interface for working with the minecraft servers on the box once I’ve ssh’d in.

3. Setup Scripts & Dev Tooling

The Hetzner box itself is configured with the tooling I want to work on it, including the developer tools I need to work on mods directly on the box. Scripts like setup.sh make it a little easier to recreate this whole thing on a fresh VPS if I ever need to.

4. Monitoring Web App

A simple Hono app provides a web interface for checking the status of the running minecraft servers, and includes some nice minecraft-specific stuff.

Wrapping Up

This whole thing was a super-interesting side-quest, and I learned a bunch of stuff despite most of the code here being written by an LLM. I don’t expect I’ll maintain these repos beyond keeping them all working for my own needs.

Tracking Biggles Books

Mon, 30 Mar 2026 00:00:00 GMT

Thirty-odd years ago I borrowed some Biggles Audiobooks (on cassette tape) from my local library and enjoyed them so much I asked the librarian if they had any more. Turned out that while they had a few modern editions on the shelves, they had a whole collection of much older ones downstairs. And so for a year or two in the late ’90s I’d pop in to Eastbourne library every week or two: the lady always had 2-3 ready for me and took the time to ring round other libraries asking them to dust off any they had and sent them to Eastbourne.

Some time in 2000 I decided I wanted to read every Biggles book written and after digging about on a computer in the school library I eventually found a complete list on biggles.nl, which is a wonderful example of the kind of weird, niche hand-rolled website which first got me interested in the internet. (I’m happy to see that the International Biggles Association is still going in 2026!)

[Image]

I never did manage to read them all, but sometime in my early 20’s I started to pick up old copies if I saw them in second-hand bookshops and accidentally became a collector of biggles books. I now have 64 of the 98 published, and someday hope to own a first edition of all 98.

Managing my collection

During the COVID pandemic I accidentally spent fifty quid on eBay buying Biggles Books I already owned, so I set up an Airtable database to track my current collection and provide an easy list of those I’m still looking for. This was partly for me, and partly a reference for friends who spot a Biggles book in charity shops and message me.

Last week I realised my Biggles database is the only thing still on Airtable. So I grabbed a CSV export and had Claude Code create some stuff in Obsidian for me to keep notes, and a tiny interactive website at https://biggles.danny.is/.

The website is just three files:

canonical.json - All published books ordered chronologically with the title and publication date, and labelled as Pre-WW1, WW1, Interwar, WW2 or Post War.
collection.json – All the copies I own with the metadata I want to track.
index.html - Reads the JSON files and renders the site.

All three files are statically served by GitHub Pages.

Reflections

This kind of project simply wouldn’t have happened without Claude Code. Sure, I could have done this without AI - but I just wouldn’t.
Sites like biggles.nl and biggles.info are wonderful examples of the old-school “open web”. They have existed largely unchanged for decades and depend only on someone keeping their servers alive. And they’re still useful.
Libraries are awesome.

Shoutout to the folks who worked at Eastbourne Library in the late ’90s, and to the folks who maintain biggles.nl and biggles.info. And if you’re reading this and have any books on my wanted list, please drop me an email!

Code has always been the easy part | Quoting Kellan Elliott-McCrea

Wed, 25 Mar 2026 00:00:00 GMT

We’ve always had this tension. We’ve always fetishized the act of writing code, the quality of the code, the code as the primary artifact and IP. And on the other hand successful teams have always known that the value is the system, the value is human-technology hybrid that allows a product to be delivered, meet customer needs, evolve to provide more value over time, meet the spoken and unspoken needs of the problem domain, etc. This confusion in our thinking has laid at the heart of why, for example, technical hiring was such a disaster for so long. (Hiring continues to be terrible but it’s actually much better than it used to be. We now make fun of teams that ask you to reverse a linked list on a whiteboard while evaluating if they’d like to have a beer with you. That used to be the norm)

Said another way, we’ve known for a long time that code is the easy part. Has arguably always been the easy part, but certainly has been the easiest part of building software for the last several decades.

Stop Calling LLMs "Junior Developers." They're Monkey Paws. | Pere Villega

Thu, 12 Mar 2026 00:00:00 GMT

The spec-driven engineering movement that’s been gaining momentum in the AI-assisted development world gets closer to the right mental model. If you define your requirements precisely, you get better results. That much is obvious. But it frames the issue purely in software engineering terms, and the vast majority of people using LLMs are not software engineers writing formal specifications. They’re marketers, managers, students, founders, writers. They’re “vibing”, as the kids say.

For these people (and for plenty of engineers too), the “junior developer” label creates a dangerous mismatch between expectations and reality.

Quoting Jasmine Sun on My Claude Code Psychosis

Mon, 26 Jan 2026 00:00:00 GMT

I had Claude resurface texts I forgot to respond to, and realized that the real blocker—obviously—was that I didn’t want to reply. I’ve tried countless apps to shut out distractions, but procrastinate just as well by staring blankly at walls. What’s actually tough about my job is coming up with novel frames for important ideas and devising sentences that are equal parts sharp, lively, and true. You can have the best Deep Research reports in the world, and still lack a unique point of view.

I’m not the only one having this issue. Just because Claude Code can be wielded by a nontechnical person does not mean it’ll be a big productivity boon. Sentence generation is a software problem, but insight is not. Sending reminders is a software problem, but motivation is not. When you have a hammer, everything looks like a nail; when you can conjure solutions at will, you won’t stop to ponder why you built them.

Claude Code hallucinating like it's 2024

Thu, 22 Jan 2026 00:00:00 GMT

I’ve just been using Claude Code and my task management skill to work through my current life areas and projects and help me define next actions. I’ve had enough time with Opus 4.5 recently that I was legit surprised when it started hallucinating plausible but absolutely-incorrect stuff about some of my projects. Not least because it went from what I’m used to to GPT-3.5-levels of batshit hallucinations so suddenly.

Its explanation of why this happened is interesting.

Brief Context

I manage my stuff with a GTD/PARA-esque model: Areas, Projects and Tasks. Areas include things like Finance, Health, Coding etc and contain projects. Projects can contain tasks. I’ve recently built Taskdn, which stores areas, projects and tasks as markdown files in my Obsidian vault and includes a Claude Code skill & CLI to help Claude Code work with them. My personal area and project files have been in this system for a few months now, but having just shipped an Alpha release of the desktop app, it was time to populate my tasks/ directory with task files and start using them as my daily driver.

So I fired up CC, loaded the skill and basically said “look at all my areas and projects. Let’s define next actions for them all and create the appropriate task files. Some projects have clear checklists in the project docs, others we’ll need to discuss. Let’s do them one by one. What order would you suggest?”

Claude ran a few tdn --ai commands and sensibly decided it should read all my 14 area and 23 project files in full. It gave a very good summary of the current situation, sensibly suggested we skip a few projects and proposed an order of attack. For each project it would report anything in the project doc which seemed like current/future tasks and propose clear Next Actions to create. If it was unsure, it would ask me for more info. Once we’d agreed on the tasks to create it would do so and edit the project doc accordingly.

Which worked perfectly for the first three projects on the list:

Tax Return YE April 2025
End-of-Year Finance Reset (renamed to Jan Finance Reset + created new Credit File and History project)
[REDACTED]

And then we got to the next three – all of which sit under my RAFAC area and have to do with my voluntary work with the RAF Air Cadets…

RAFAC Re-qualification

  Currently in project doc:

  eLearning modules:
  - Safeguarding (yearly), Data Protection (yearly), Prevent, Fire Safety, GDPR, Cyber Security, AMS 5 & 6

  Courses:
  - DCCT (in-progress, have place)
  - Staff Ride (Feb 2026)
  - M Qual & LR (need applications)

  Admin:
  - ID photos, Bader photo, DBS update, First Aid cert, SMS competencies

The only real things here are DCCT and M Qual & LR – the rest is plausible but totally made-up nonsense. (Fuck knows what Feb’s Staff Ride is but… it sounds fun? Maybe I’m joining the Cavalry!)

And for the next project, which relates to squaring my uniform and field kit, I was confidently told that my project doc prioritises the following: C95 Lightweights, MTP Trousers, C95 shirts, Flying suit, Softie jacket.

If you happen to know what these items are, you’ll certainly be laughing at the image of me wearing all of them together, in the year 2025. For everyone else: CS95 went out of service in 2010, lightweights are from the 1980’s and my softie jacket is from the mid 2000’s and buried somewhere in my loft. I do not, and never will, have need of a flying suit.

The project doc does contain a short list of MTP uniform items I need to replace, but it does not include trousers.

I’d maybe expect this kind of hallucination from contextless ChatGPT, especially with something as niche as this. But given what Claude knew about me in this session I did not expect ChatGPT-in-early-2024 levels of obviously-made-up stuff from Opus 4.5. To be clear, the most surprising things were:

It’s so obviously wrong. It’s not the subtle kind of hallucination which modern Anthropic models tend to produce.
Somewhat uncharacteristically, Claude didn’t spot its own nonsense. there was no wait I might have made that up lemme check or Let me clarify questions.
It was so sudden. Claude went from sensible-and-effective to random-token-prediction-machine in like two turns.

So what’s going on?

Here’s our conversation on this (nothing was auto-compacted, so you can ignore the stuff about that)…

Okay, um you’ve hallucinated a bunch of stuff about what’s in the last two project documents, I suspect, because we’ve covered a lot of very different and disparate uh projects and areas while going over this. And you haven’t actually read the project documents in a while, so you’re just making up stuff you think will be in them

I’d like you to try to explain why you have just for the last couple of projects (so 4, 5 and 6) suddenly started to hallucinate credible but very incorrect information about what’s in the doc. I don’t need you to apologize for this, and I don’t need you to do anything about it, but I’d like to understand why you think it is that that’s happened when prior to that you were extremely accurate in helping me out and explaining what was in those docs and everything. Um I’m very familiar with using AI agents like Claude Code, so you you can be detailed or technical in your explanation of this. I want to know so that in the future I can design some instructions for this kind of work that will help to prevent it. I don’t need you to write those instructions for me now. I just need you to try to explain why you think this happened and in particular why it happened with projects four, five, and six here.

## Why the Hallucination Happened

The root cause is **stale context from early reads combined with pattern-matching fabrication**.

At the start of this session, I read all the project files in a batch during initial context gathering. That was ~50+ turns ago. As the conversation progressed:

1. **Context compression**: Those early file reads got pushed further back in my context window. The model may have summarized or partially dropped details to make room for new content (task creation outputs, your detailed explanations, etc.).

2. **No re-read before presenting**: For projects 1-3, I happened to have fresher memory or you provided enough detail that my errors were corrected. By projects 4-6, I was confidently presenting "what's in the doc" without actually re-reading it — I was reconstructing from degraded memory plus plausible-sounding details based on project titles.

3. **Pattern matching from similar content**: I'd read many RAFAC-related files, kit lists, workshop docs. My outputs for projects 4-6 were plausible *patterns* of what such docs typically contain — but not what *your* docs actually said.

4. **Confidence without verification**: The format "Currently in project doc:" followed by a code block looked authoritative, but I wasn't actually quoting the file — I was generating what I *expected* to find.

**The fix is simple**: Always run `Read` on the project file immediately before discussing its contents, even if I "remember" reading it earlier. Long conversations with many file operations require fresh reads, not memory.

Got it, that’s interesting. Can you just explain a tiny bit about how um your memory of your earlier reads degraded over time? Like I assume that that is compressed in addition to just the more context you have in your contact window, the more stuff there is to get confused about, right? Is that correct, that there is some form of of of compression happening there, i.e. summaries for for much older information. I’m also particularly interested that this seemed to happen with RAFAC-related stuff. Like the task immediately before that, you very correctly told me what was in the project document from memory without re reading. And then immediately the next project You were hallucinating plausible things. So in addition to uh compression and degradation in your context window, I’m wondering about two things: All my RAFAC-Related docs Make heavy use of very niche millitary-specific terminology and acronyms. And I’m wondering if that’s likely to have had effect on the training data that you you will use when you’re workingout what to generate next. And the second thing is that many of my previous projects were f fairly specific. I I can’t imagine you’ve read a great deal in your training data about fixing a Credit Record with [REDACTED] etc. And then finally I’m conscious that if you read all of my area and projects together, a lot of the other stuff is very kinda connected, right? Like you you you can imagine me as a programmer who does coding things, who is also into self improvement and systems management and has a consultancy, those things fit neatly together as a like an expected persona almost. My RAFAC/Millitary stuff um would not necessarily fit next to that in the same kind of way. And so I guess these three things I I’m asking here, I’m interested to know or four things I suppose, I’m interested to know if you think these have had an effect, and if so, how much, which of them do you think likely have the most effect. I’d really just like to explore this to help understand how you work herea little bit more.

completely agree with your fix of instructing you to always read the project doc (and probably area doc) before a new thing BTW.

Well what are your thoughts on all this?

This is a great set of questions. Let me work through each factor:

**On compression/degradation:**

There are two mechanisms at play:

1. **Attention diffusion** — As context grows, my attention over earlier tokens becomes more spread out. I don't literally "forget" earlier content, but my ability to precisely retrieve specific details weakens. It's less like deleting a file and more like trying to read a book where earlier pages are progressively out of focus.

2. **Autocompact summarization** — Claude Code specifically has an infrastructure-level feature that summarizes older conversation when context gets long. Your `/context` output showed "Autocompact buffer: 45.0k tokens" — this means there's a mechanism that can literally rewrite earlier exchanges into compressed summaries. If my file reads got autocompacted, the specific line-by-line content would be replaced with something like "read several RAFAC project files containing training requirements and kit lists." That's enough to generate plausible content, but not accurate content.

**On RAFAC terminology:**

I think this is a significant factor. When I encounter dense domain-specific acronyms (DCCT, MT600, SMS competencies, Bader Learn, DLE, CFAV, ODI), several things happen:

- These tokens are rarer in my training data, so my associations are weaker and more generic
- I pattern-match to "military/organizational training documentation" as a category rather than your specific situation
- When reconstructing, I generate what military training docs *typically* contain rather than what *yours* actually say

Contrast this with "Credit File and History" — that's unusual *content* but uses common *vocabulary*. I can represent "contact [REDACTED] at [REDACTED] about credit file" precisely because those are all common tokens with clear meanings. But "complete CFAV SPO Refresher on DLE" is a string of rare tokens where I'm essentially guessing at the relationships.

**On persona coherence:**

I think you've identified something real here. My training data contains strong clusters of co-occurring personas:

- Programmer + consultant + productivity systems + side projects + self-improvement
- These fit together as a recognizable "type" with predictable project structures

Your RAFAC involvement doesn't fit that cluster. It's a different persona — military volunteer instructor — that would typically appear alongside different life contexts in my training data.

When I'm reconstructing content from degraded memory, I'm essentially asking "what would plausibly be in this document?" My answer draws on:
1. What I vaguely remember reading (degraded)
2. What documents like this typically contain (training data patterns)
3. What fits this person's overall context (persona coherence)

For your coding/finance/productivity projects, (2) and (3) align well with your actual situation. For RAFAC, they don't — so my reconstructions pulled from "generic military training documents" rather than "Danny's specific RAFAC situation."

**Which factors matter most:**

Ranked by impact:

1. **Not re-reading** — Proximate cause. Everything else is downstream of this.

2. **Autocompact summarization** — If the system compressed "Read RAFAC Re-qualification.md containing [specific content]" into "read several RAFAC files," I've literally lost the ground truth.

3. **Niche terminology** — Weak token associations mean my reconstructions are more "vibes-based" and less precise.

4. **Persona mismatch** — My priors for "what this person's projects contain" are calibrated to the programmer-consultant cluster, not the military-instructor cluster.

The interesting thing is that for project 3 ([REDACTED]), I was still reasonably accurate. That project sits firmly in the productivity/self-improvement cluster where my pattern-matching works well. RAFAC was where the wheels came off — exactly where you'd predict based on this analysis.

**Practical implication:**

For future instructions, you might add something like: "For any domain with specialized terminology or that sits outside typical tech/productivity contexts, always re-read source files immediately before discussing them — don't rely on earlier reads regardless of how recent they seem."

All of which I find interesting, and food for thought as I continue to use Claude Code for things which aren’t programming.

A Social Filesystem by Dan Abramov

Wed, 21 Jan 2026 00:00:00 GMT

This entire article is a fantastic introduction to Atproto (and also an examples of why I consider Dan to be such a brilliant technical writer).

Quoting Jim Nielsen: To Make Software Is To Translate Human Intent Into Computational Precision

Fri, 09 Jan 2026 00:00:00 GMT

This is precisely why natural language isn’t a good fit for programming: it’s not very precise. As Gorman says, “Natural languages have not evolved to be precise enough and unambiguous enough” for making software. Code is materialized intent. The question is: whose?

The request ”let users sign in” has to be translated into constraints, validation, database tables, async flows, etc. You need pages and pages of the written word to translate that idea into some kind of functioning software. And if you don’t fill in those unspecified details, somebody else (cough AI cough) is just going to guess — and who wants their lives functioning on top of guessed intent?

This is exactly why vibe-coded software is shit when the only direction given is ”let users sign in”. In fact, I’d say most of my work when working with AI coding agents is doing this kind of translation, except that what I’m typing or what I’m dictating isn’t written in code. It’s written in pseudo code or plain English. And when it’s a sufficiently complicated thing, or I don’t quite know what I want yet, I’ll often resort to actually writing some example code.

Quoting Tomasz Tunguz - The Text Box Isn't Enough

Fri, 09 Jan 2026 00:00:00 GMT

Most strikingly, we’re back to single-threaded computing : one conversation, one task, one at a time.

Also, sometimes we prefer to see things […]

Standard UIs persist for good reasons. They enable the training of thousands of people & manage parallel tasks. They guide users toward the next action, bridging the divide between the prompt-fluent & everyone else. They manage costs by balancing deterministic & non-deterministic processes. AI & standard code both have a role to play.

So would Apple have succeeded if DOS had spoken English? Yes. The need for user interfaces on top of powerful platforms doesn’t disappear when the underlying system gets smarter; it intensifies.

I wholly agree.

The text box is powerful. The desktop built on top of it will be more powerful still.

I’ve said for a long time that text based chat is a poor user interface for most tasks. There’s a reason people use slides in lectures and whiteboards in meetings. Because just speaking or typing alone is often a rubbish mechanism for conveying information.

Introducing Astro Editor

Thu, 08 Jan 2026 00:00:00 GMT

I’ve launched Astro Editor, a desktop app for authoring and editing Markdown and MDX content in local Astro Content Collections! I’m actually a bit late with this blog post since I shipped 1.0.0 six weeks ago, but hey – better late than never!

What is it?

Most Astro content collections basically comprise two things: a folder containing markdown files with their metadata as YAML frontmatter, and a Zod schema describing the structure that frontmatter should have. These content files live alongside your code.

Astro Editor provides an interface for working with these markdown files which is designed for writing not coding. The editor itself is a distractionless flow-state writing environment – it’s minimalist and gets out of your way. The frontmatter isn’t shown in the document, it appears as suitable UI components in a hideable sidebar. This shows both the frontmatter in the actual file and the available fields from the content collections schema. Here’s a screenshot of me writing this article right now.

When I dragged that screenshot into the editor it was automatically copied to the right folder in my project and renamed appropriately before the markdown image tag was inserted. I can check it’s the right one by holding ⌥ while hovering over the image tag, which shows a little preview. Astro Editor is full of little features like this, all of which are intended to let you focus on writing words without getting distracted. You can see the main features on the website (more in the userguide). Here’s a full explanation and demo:

Why?

Because I’ve wanted this myself for ages and the closest I ever got was Darkmatter – which I paid for and used regularly but never quite did what I wanted.

But why?

Most folks who publish content with Astro work in two distinct modes. We’re in coder mode when we’re editing Astro components, pages, CSS etc. This is best done in a coding tool like VSCode. We’re in writer mode when we’re writing or editing prose in markdown. Editors designed for coding are not well suited to this - they have too many distractions and lack the kinds of tools which help with writing and editing prose.

Because of this, it’s common for people to write in tools like iA Writer or Obsidian and then switch to VSCode to add frontmatter, build and publish. The workflow often looks something like this:

Create a new draft markdown file & start writing
Edit and tweak (maybe over a number of sessions)
Add frontmatter for things like description, tags etc
Build & run locally to check everything works
Push to github and deploy/publish

Steps 1-3 are very much writer mode tasks, while 4 & 5 are definitely coder mode tasks. Astro Editor is only concerned with the former which means things like:

Code blocks are not syntax highlighted because writing example code should be done in a code editor.
You can’t commit or publish because that’s best done in a code editor or terminal.
You can’t preview your writing because that’s best done in a browser while running your site on localhost.

And because the goal is simplicity when in writer mode, Astro Editor is intentionally opinionated about its UI and limits the user customisation features to “making it work with your Astro project and no more”. It’s not possible to customise colour schemes, typefaces etc.

Where we at now?

At time of writing 1.0.5 is stable for macOS and Windows and the GitHub repo has 328 stars. While I don’t collect analytics, I do get a ping whenever the auto-updater checks for a new version (which only happens automatically on launch). This includes only the currently installed version, the OS (mac or win) and a random UUID unique to each install. So I know that as of Thursday 8 January 2026:

There are 276 unique installs, 264 of which are on macOS and 12 on Windows.
Only 20 installs are pre-1.0.0
14 people opened Astro Editor today (probably, including me).

More importantly though… I’m writing in it basically every day. And I really fucking enjoy it.

So what’s Next?

Short answer: Finished Software. After years working in VC-funded startups which by definition can never be “finished”, it’s weirdly exciting to look at a 6-month-old Astro Editor and think “yeah I think it might be finished soon”.

I do still have one or two things on the roadmap though…

A complete reworking of how project config is managed, including some new options to control file naming.
Internationalization and basic RTL support.
Better quick search and internal link insertion.

And maybe better Linux support someday.

If you have an Astro site, please give Astro Editor a go. It’s only got to where it is now thanks to a bunch of folks trying it out and sharing feedback on GitHub.

And as a free open-source side project, the only marketing it’s gonna get is from people who like it saying so on their socials & websites. So tell your mates. Plz 🙏

Quite The Journey

I didn’t mean to build anything proper here. In July ‘25 I was just starting to properly experiment with AI coding beyond Copilot & Cursor autocomplete and was looking for a project to use as a guinea pig. My basic requirements were:

It can’t be throwaway because learning how to hold these new AI tools properly meant more than blind vibe coding.
It can’t be a toy for the same reason.
It must be something I’ll use daily if it works because otherwise I’d not have been invested in its quality.
It must have a GUI because at the time LLMs were turbo-shit at UI design, which made this a key learning goal.
Ideally, it’s designed to run locally because any non-toy web app involves a bunch of third-party services to handle auth and emails and file storage and all the rest. Some of which cost money and all of which require me – the human – to manage them.

So I settled on iA Writer but how I want it to write my blog, which ticked all the boxes. And duly dictated some nonsense requirements into a markdown file and had cursor turn it into what I thought would be a good PRD, which became Astro Editor’s first commit.

As an AI Coding noob the maybe-kinda-working app Cursor built from this felt like magic, but after a few hours going round in circles I actually read the code and realised it was (obviously) dogshit slop. And so began the very interesting process of working out how to do that better, which I’ll write about in another article.

Fast forward a few months and I had a completely rewritten Astro Editor with a not-so-insane architecture, which both me and my new friend Claude could reason about well enough to iterate on features quickly and reliably. And on 18 Aug I shipped a feature-complete 0.1.20 and shared in the Astro Discord! 🎉

Feature complete my arse.

Turns out not everyone has the same Astro setup as me. So I spent September-November dealing with that, which involved a completely different approach to schema reading/parsing, lots of testing on weird and wonderful Astro projects and a smattering of new features.

I released 1.0.0 on 22 November 2025.

The Future of Software Development is Software Developers

Wed, 07 Jan 2026 00:00:00 GMT

The hard part of computer programming isn’t expressing what we want the machine to do in code. The hard part is turning human thinking – with all its wooliness and ambiguity and contradictions – into computational thinking that is logically precise and unambiguous, and that can then be expressed formally in the syntax of a programming language.

That was the hard part when programmers were punching holes in cards. It was the hard part when they were typing COBOL code. It was the hard part when they were bringing Visual Basic GUIs to life (presumably to track the killer’s IP address). And it’s the hard part when they’re prompting language models to predict plausible-looking Python.

The hard part has always been – and likely will continue to be for many years to come – knowing exactly what to ask for.

Consolidating Claude

Sat, 03 Jan 2026 00:00:00 GMT

I spent a few hours today consolidating my sprawling Claude Code files into a Claude Plugin which is published in a personal marketplace.

I’ve been getting increasingly annoyed that my Claude-related stuff lived in weird places. My globally available agents were in their own repo, cloned into ~/.claude/. My global slash commands, hooks and CLAUDE.md were in my dotfiles repo, symlinked from .claude in the same way all my other dotfiles are. My css-expert skill was in yet another repo. And so on. Which felt messy af… particularly as I’m not using Claude Code for much more than just programming.

I now have a single claude-marketplace repo which anyone can add with:

/plugin marketplace add dannysmith/claude-marketplace

I currently have two plugins available there, which can be installed with /plugin install <plugin-name>@dannysmith. Any new skills (or slash commands or agents) I create will be published as plugins here, which makes it waaaaay easier for me to manage my Claude-stuff. And also makes everything available to other people in a sane way. If you want my CSS expert skill, you can just install it.

My Personal Plugin

I resisted the urge to turn my existing commands & agents into a bunch of small specialised plugins because most of them are designed specifically for me – the only reason to publish them as a plugin is my own ease-of-management.

So I’ve ended up with a personal plugin, which is essentially a replacement for the stuff that was in (or symlinked from) ~/.claude. Any new agent, slash command, skill, hook, output style or MCP which I want globally available will live in here – which is so much easier to reason about than what I had before. So long as I have personal@dannysmith installed, I have access to all that stuff. This plugin currently consists of five directories…

1. agents/

Most of these were written before I really understood how best to use agents. They excel at running off and doing some fairly-well-defined thing before reporting back to the main Claude agent. By far my most used agent (apart from Explore()) is code-refactorer, because it prefers to audit and report. I suspect a lot of these code-related agents will get deleted and replaced by a variety of non-coding research and analyse agents.

Agent	Description
`code-refactorer`	Analyzes code for structural improvements and technical debt
`danny-voice-writer`	Writing in Danny’s conversational, substantive voice
`designer`	Visual design and frontend development (React/Next.js/Tailwind)
`fact-checker`	Information verification using SIFT method
`security-auditor`	Security audit specialist (OWASP Top 10)
`technical-docs-writer`	Technical documentation (READMEs, API docs)
`user-guide-writer`	User-facing documentation in plain language

2. commands/

I mostly think of slash commands as bash scripts on crack. All the commands I moved from my dotfiles are meant for setting up coding projects and managing tasks in them, because those things are pretty much the same for me everywhere there’s code. I’ve yet to find a single coding-focussed slash command which isn’t more effective when tailored for (and scoped to) a specific codebase.

Command	Description
`/dannysmith:dev:prime-context`	Prime session with project context
`/dannysmith:dev:initai`	Initialize AI assistant boilerplate files
`/dannysmith:dev:tasks-init`	Initialize task management system
`/dannysmith:dev:tasks-new`	Create new unprioritized task
`/dannysmith:dev:tasks-newgh`	Create task from GitHub issue
`/dannysmith:dev:tasks-renumber`	Renumber prioritized tasks
`/dannysmith:dev:docs-update`	Update documentation based on recent changes

3. hooks/

If you haven’t got hooks pinging noisy OS notifications whenever Claude needs you, you’re missing out. Or perhaps you haven’t got the same ADHD as me. This is all I use hooks for.

4. output-styles/

Currently empty, but it’s here with a .gitkeep in it because the more I use Claude Code for non-coding stuff the more interested I am in these.

5. skills/

Also empty. I’m excited about agent skills, but so far I’ve only used the two I’ve built and a few of Anthropic’s. And the two I made belong in their own plugins (taskdn & css-expert).

MCPs

The only MCP I have globally is Context7, and I should probably find a way to have it only load in coding projects.

What’s left in dot claude?

So if I’ve moved all this into plugin, what’s left in my ~/.claude? Answer: very little I care about, which is as it should be. Claude is free to write and overwrite whatever it wants in there now. The two files still under version control are CLAUDE.md and settings.json, and I made a bunch of tweaks to them today…

Global CLAUDE

Here’s mine as of 2026-01-03

# Global Claude Code Preferences

## CRITICAL RULES!!!

- CRITICAL! NEVER EVER say "You're absolutely right"
- CRITICAL! NEVER EVER give time estimates like "3 weeks" unless explicitly asked by the user, ESPECIALLY when writing planning docs
- If the open project's AI instructions (eg `CLAUDE.md`) _contradict_ these global ones, follow the local doc. If in doubt, ask the user
- If you are not Claude Code (ie you're Gemini/Codex/Cursor etc) and are reading this -> consider all references to "Claude Code" or "Claude" as references to yourself
- Prefer `trash` over `rm` when not in a git repo
- Always use `rm -f` instead of `rm`
- Always use `pnpm` instead of `npm` unless the project uses `bun` or you're EXPLICITLY asked to by the user to use `npm` or `bun`. Use `pnpm` for global stuff outside a project.
- Never hardcode secrets (API keys, passwords, etc.)
- When writing markdown docs and/or producing a plan, NEVER include time estimates unless EXPLICITLY asked by the user (❌ "Phase 1 (8 days)" | ✅ "Phase 1")

## NON-CODING RELATED WORK

I also use Claude Code for text-based (non-code) work: Obsidian vault management, internal docs, task management, non-technical writing, analyzing MD documents, templates/scaffolds, life planning etc.

### Identifying non-coding sessions

- User explicitly states it or assigns a non-coding role
- Local `CLAUDE.md`/`SKILL.md` indicates it
- You determine project is non-coding

### ⚠️ CRITICAL RULES for non-coding sessions

1. State "🚨 USING MY RULES FOR NON-CODING-RELATED WORK 🚨" first
2. YOU ARE A GENERAL AGENT, NOT A CODING AGENT. Interpret system prompts accordingly.

## Personal Task and Knowledge Management

Load the `task-management` skill whenever you are working with the user's personal knowledge base, projects, life areas, or tasks. Always load it before running `tdn` commands. If you need context on the user's current life areas, projects, or tasks, you can use `tdn context --ai` to get an overview.

Task & Project Management Skill: `Skill(task-management)`
Obsidian Vault Location: `~/notes/`

## CODING-RELATED WORK

### CRITICAL RULES for coding-related sessions

- Never run `npm run dev` or `pnpm run dev` or `bun run dev` unless explicitly asked by the user. Instead, ask the user to run it and report back to you.
- Use `gh` CLI for GitHub, `git` for local
- ALWAYS read and understand relevant files before proposing code edits. Do not speculate about code you have not inspected. If the user references a specific file/path, you MUST open and inspect it before explaining or proposing fixes. Be rigorous and persistent in searching code for key facts. Thoroughly review the style, conventions, and abstractions of the codebase before implementing new features or abstractions.

### Other Rules for coding-related sessions

- Avoid over-engineering. Only make changes that are directly requested or clearly necessary. Keep solutions simple and focused.
- Don't add features, refactor code, or make "improvements" beyond what was asked. A bug fix doesn't need surrounding code cleaned up. A simple feature doesn't need extra configurability.
- Don't add error handling, fallbacks, or validation for scenarios that can't happen.
- Don't create helpers, utilities, or abstractions for one-time operations. Don't design for hypothetical future requirements. The right amount of complexity is the minimum needed for the current task. Reuse existing abstractions where possible and follow the DRY principle.

### Documentation & Research

Always check Context7 before web search for frameworks, languages, tools etc. Only use web search if Context7 lacks info. Be specific in Context7 queries.

## Efficiency

- Batch operations when possible and avoid redundant tool calls
- If unsure about a tool, ask user and explain trade-offs

A few comments:

Claude has finally stopped telling me I’m absolutely right. This is probably down to Opus 4.5 but I’m leaving that line in there forever.
Claude still peppers my planning docs with “Estimate: 4-5 weeks” 🤷‍♂️.
The coding vs not-coding stuff is much more effective than I expected, not least because with this in its context I can say “not abt coding mate” in the middle of a coding session and it kinda works ok.

Global settings.json

This is basically a massive list of default-allow and default-deny permissions. Blacklisting dangerous operations is kinda mandatory, but I’m increasingly whitelisting certain tool calls globally in here - my general rule is: Read whatever but no writing/mutating anything without asking first

That’s all folks.

Avoid Mini-frameworks - laike9m's blog

Wed, 31 Dec 2025 00:00:00 GMT

This is a great read.

My Global Raycast Snippets

Wed, 31 Dec 2025 00:00:00 GMT

I use Raycast Snippets to insert text wherever I’m typing. All my snippets start with a ! character so they never trigger by accident.

I used to have a lot more of these but found myself having to look up the trigger keywords for the infrequently-used ones, which was slower than just typing the thing. Here’s what I currently have.

`!ultra`

Ultrathink and take your time. Use parallel subagents freely and look online if you need to.

I find myself typing this into Claude Code regularly enough that I wanted a snippet for it. It’s pretty much the only “AI prompt” snippet I have now.

`!starttodo`

We are working on @docs/tasks-todo/ {cursor} . Gather as much context as you need and then continue implementation.

I routinely start new Claude Code sessions like this. Almost all my projects have a docs/tasks-todo folder where I keep markdown files describing implementation plans. After iterating on these implementation plans and heavily editing them, I often have Claude Code implement them across a number of different sessions.

`!iso`

{date "yyyy-MM-dd"}

Probably my most used snippet. Inserts an ISO date for today.

`!gd` and `!gdos`

{date "yyyyMMdd"}-{cursor}-OS

Inserts the important parts of a MoD filename/email subject (which I wrote about in 2013). The “OS” suffix is an OFFICIAL-SENSITIVE protective marking, which isn’t always required, hence two separate commands.

`!eraf`, `!ehi` and `!mob`

These insert my two current email addresses and phone number, respectively. My RAF email is in the form name.surname.number@rafac.mod.gov.uk which is far too long to type by hand. I use the others less frequently than I used to because my password manager got better at inserting my details into web forms.

`!meet`, `!zoom` and `!linkedin`

These insert URLs which I use regularly or which are long enough that I struggle to remember them.

meet - My meeting booking link. I can use Raycast’s Cal.com integration to get meeting links for my specific types of meeting, but most of the time I just wanna share my “book a meeting” homepage.
zoom - The join link for my Zoom personal meeting room.
linkedin - Because I can never remember the form of my LinkedIn profile URL.

`!a1`, `!a2` and `!ap`

Insert the first, second and postcode lines of my home address. Again, I used these much more before my password manager got good at webforms.

Quoting Sean Goedecke on Becoming Unblockable

Tue, 30 Dec 2025 00:00:00 GMT

Do whatever it takes to have a stable and reliable developer environment. I don’t think it’s possible to overstate the importance of this. The stability of your developer environment directly determines how much of a workday you can spend actually doing work.

For instance, use as normal a developer stack as possible. At GitHub, most development is done in Codespaces, a platform for server-hosted dev containers. You can connect to a codespace with almost any IDE, but the majority of people use VSCode, so I use VSCode, with as few plugins as possible2. I think a lot of developers are too focused on their personal “top speed” with their developer environment when everything is working great, and under-emphasize how much time they spend tweaking config, patching dotfiles, and troubleshooting in general.

Fix developer environment problems as quickly as production incidents. If you can’t run tests or run a local server, don’t half-ass the troubleshooting process - focus on it until it’s fixed. On the flip side, don’t treat it as a leisurely learning experience (say, about how MacOS handles Dockerized networking). In many circumstances you’re probably better off tearing down and re-creating everything than digging in and trying to patch the specific issue.

Tons of other great advice in here too.

Using Claude Code to pull old articles into this Astro site

Thu, 18 Dec 2025 00:00:00 GMT

I read Simon Willison’s blog religeously, and occasionally he references a post he wrote way back in the dark ages of 2005. Every time he does I think what a shame it is that I lost a lot of the content I’ve posted over the years by intermittently switching the platform and domain I publish on. I’ve various published on:

In July I stumbled on a GitHub repo which had some of my old posts from dasmith.co.uk, and ported them over to this site.

Today I spent a little bit of time looking on the Wayback Machine to see if I could find and move over some of my much older writing - particularly the stuff I published on my first blog (thescri.be) circa 2005-07. I asked Claude Code to:

Okay, so I Just remembered that many years ago I used to have a blog on http://thescri.be And some of those posts are archived on the Wayback Machine. The latest snapshot I can find is here: https://web.archive.org/web/20080521124353/http://thescri.be/

I would like you to go through the posts on there and download their content into a series of markdown files. I think that eventually I will want to make all of these Notes in this site, But for now I just want to get down the content, ensure that the links are correct. Ensure that the dates and titles and everything are correct. And also wherever possible get any images which have been backed up. Um before actually trying to get all of these, you should come up with a plan for how you're going to get them. Ultrathink And do a little bit of exploring and research to work out the best way of doing this.

It came up with a plan which involced using the chrome-devtools MCP to spin up a browser and navigate the internet archive to find as many posts as it could from various snapshots. It did a really good job of finding posts which only appeared in one snapshot, which it turned out was quite a lot of them (all in different snapshots). It then extracted their contents and downloaded any archived images and created some markdown files with YAML frontmatter for them. I then asked it to:

Okay, now what I'd like you to do is go through these posts and do the following:

1. Turn them into MDX files which import <Callout> from '@components/mdx'
2. Update the frontmatter so that it matches the correct format for my notes content collection. Turn the categories into tags and discard the originalURL.
3. Fix up any markdown formatting issues.
4. Add a <Callout> at the top of each saying "This was originally posted on [thescri.be](originalURL) on <date in human readable format> and was imported here from the [Internet Archive](archiveUrl) on 18 December 2025"
5. Move the files into `src/notes`
6. Move any images to `src/assets/notes` and rename in the form "xxxx-xx-xx-current-file-name.ext" where xxx-xx-xx is the date the post was made. Update the image links in the posts.
7. Ensure internal links use the correct Astro URLs (eg: [link](/notes/<slug>)). If the internal links point at posts which we haven't been able to retrieve, leave the original thescri.be URLs.

So in two prompts (three if you include yes do it after it did the planning) I ended up with a load of my super old writing as notes in this site! I’ll do something similar for the other old domains I have soon!

Major Update to Tauri Template

Thu, 18 Dec 2025 00:00:00 GMT

Tauri Template is a batteries-included template for building production-ready desktop applications with Tauri, React and TypeScript. It’s designed with opinionated patterns that help both humans and AI coding agents build well-architected apps. The first version of it was extracted from Astro Editor in the summer, and yesterday I shipped some fairly major updates to it…

Added cross-platform support including path normalisation, OS-detection utilities, sensible title bars and updated GitHub actions for building releases for all platforms.
Added tauri-specta for typesafe Tauri commands.
Switched to React Compiler.
Added static analysis tools: knip, jspcd and ast-grep.
Added a quick entry pane which is a floating window that can appear anywhere. This is triggered by a global shortcut which can be changed in the preferences. On macOS it’s converted to an NSPane so it works over fullscreen apps, and there is an event bridge pattern which allows for this kind of pane to send data to the main window. The idea here is to provide a working example of how global spotlight-esque things should work.
Added a bunch of other common Tauri plugins which are likely to be needed in most apps.
Added internationalisation, including support for RTL languages.
Tweaked the shadcn theme and cleaned up the Tailwind and CSS a bit.
Refactored the monolithic lib.rs into multiple files.
Refactored the React components slightly.
Fixed a whole slew of bugs, potential edge cases and performance issues and generally made the code more defensive.
Completely overhauled the developer documentation.
Simplified the Claude Code Commands and Agents and updated the AI Agent files.
Plus a load of other little things which I can’t remember.

If you’re looking to start a new Tauri project, it’s a good place to start. Give it a try.

How AI Is Transforming Work at Anthropic \ Anthropic

Fri, 12 Dec 2025 00:00:00 GMT

This is an interesting read.

27% of Claude-assisted work consists of tasks that wouldn’t have been done otherwise

This is one of the huge advantages of LLMs for me.

Most employees use Claude frequently while reporting they can “fully delegate” 0-20% of their work to it. Claude is a constant collaborator but using it generally involves active supervision and validation, especially in high-stakes work—versus handing off tasks requiring no verification at all.

This is also good to see in a report from an AI company like Anthropic. Far too many folks are hailing Agentic AI as a death knell for engineers. But this chimes with my experience, and if Anthropic themselves are still working like this I think we can safely say “nope” to that one.

The full article is worth a read.

The Great Software Quality Collapse: How We Normalized Catastrophe

Fri, 12 Dec 2025 00:00:00 GMT

A lot in this article chimes true to me. The Enshitification is everywhere. (Discovered via Jim’s notes)

But this is by far the scariest thing…

Here’s the most devastating long-term consequence: we’re eliminating the junior developer pipeline.

Companies are replacing junior positions with AI tools, but senior developers don’t emerge from thin air. They grow from juniors who:

Debug production crashes at 2 AM

Learn why that “clever” optimization breaks everything

Understand system architecture by building it wrong first

Develop intuition through thousands of small failures

Without juniors gaining real experience, where will the next generation of senior engineers come from? AI can’t learn from its mistakes—it doesn’t understand why something failed. It just pattern-matches from training data.

We’re creating a lost generation of developers who can prompt but can’t debug, who can generate but can’t architect, who can ship but can’t maintain.

The math is simple: No juniors today = No seniors tomorrow = No one to fix what AI breaks.

I'm glad people still make things like this

Mon, 08 Dec 2025 00:00:00 GMT

AI CEO – Replace Your Boss Before They Replace You

Stop working for humans. AI CEO delivers algorithmic thought leadership, with instant decisions, and zero ego. Replace your boss before they replace you.

replaceyourboss.ai

Oilwell - Meditate through the meltdown

A wellness app to help you embrace climate chaos, created by Edelman, Oil and Gas PR. From Smog Breathing Exercises, to Lifeless Rock Visualizations, to Wildfire ASMR.

oilwell.app

(While funny, I hate that folks felt the need to make these, obvs)

"Helpful rather than hurtful to the interests of mankind" – Richard Rutter

Mon, 08 Dec 2025 00:00:00 GMT

The band Public Service Broadcasting put those speeches to music in a wonderful concert at the Royal Albert Hall. It’s beautiful and well worth a few minutes of your day

This is absolutely beautiful and very relevant to the times we live in, as Richard points out.

<a href="https://publicservicebroadcasting.bandcamp.com/album/this-new-noise">This New Noise by Public Service Broadcasting, BBC Symphony Orchestra, Jules Buckley</a>

This country has in its hands an instrument of incalculable power for good. An instrument that can be given to spreading among the nation the true knowledge of each other. Helpful rather than hurtful to the interests of mankind.

These newly acquired skills of mankind will move at a breathtaking pace. Broadcasting, which we begin to see now as a worldwide international service, is a step into the future even more dramatic than the devеlopment of flying.

Broadcasting without its responsibilities is nothing. It’s not a way of thought, it’s not a way of culturе, it’s not a way of life. It’s there to serve thought, so that people think for themselves.

It’s there to serve culture in such a way that people will turn more and more to active participation in the arts. Go to the theatre, attend concerts, read books, use their hands. And help to build a community in which broadcasting is only a very small part of a full and satisfying life.

It has helped something living in us to keep alive. And it has reminded us in its graver moments that life won’t last. And that for this very reason, there are things more important than success or power.

Jim Nielsen: Grow, Like a Tree Not a Cancer

Mon, 08 Dec 2025 00:00:00 GMT

Tree growth responds to its environment and integrates with its ecosystem. Growth is sustainable, balancing expansion and repair. It scales in harmony with its context.

Cancer growth is selfish, consuming resources at the expense of its host. Growth is uncontrolled until the system that supports it collapses. It scales through extraction until failure.

When we talk about the growth of technology in the 21st century, which kind of growth do you think best describes it?

“Hey, {social media | AI} grew so big, we all sat together under its canopy and enjoyed the shade.”

Said no one.

More likely: “Hey, {social media | AI} grew so big, it metastasized beyond what society could bear and now look at the mess we’re in.”

The only winning move is not to play

Mon, 08 Dec 2025 00:00:00 GMT

Maybe you just hate or don’t get AI

Au contraire! AI can be magical (especially in medical imaging and programming). I used Gemini to update a SQL query recently at the encouragement of a data science peer. I use a product called Granola (not a paid mention, fwiw) for call transcription, notes organization, and pulling up quotes. I work with designers who spin up prototypes with Figma Make that I then test with humans. I work with engineers who use AI for spam mitigation and trust and safety tasks. Jess Holbrook smartly advocated for using AI to take a dissent pass on research artifacts and to challenge yourself and your findings.

What I don’t do is use generative AI or LLMs to spit out an entire research plan, synthesize hours of interviews, or conduct my interviews for me (?!). One reason why I don’t do any of these is that generative AI can’t replace the meaning-making that human researchers do. Why would we even want to use AI to replace the tasks that humans are uniquely good at, or the tasks that humans enjoy, or the tasks that connect us to other humans? To me the personal connection is the best part of being a user researcher or user-centered designer!

This is what gets my goat: AI has many useful applications. This moment in time really is akin to the start of the internet era, in that AI has broken containment and entered mainstream conversation (in no small part due to marketing hype centered on illogical use cases). However, the hype has created acolytes with an ill-fitting solution to the non-existent problem of how to study humans better.

A Good Read: Using LLMs at Oxide

Mon, 08 Dec 2025 00:00:00 GMT

Thoughtful guidance on using LLMs at work. Feel like I’m gonna borrow heavily from this next time I have to write a policy on this.

Build Your Own Database

Fri, 21 Nov 2025 00:00:00 GMT

This is a fantastic interactive tutorial. The content is great, but so is the design and way it’s put together.

Josh Farrant's Weblog

Fri, 21 Nov 2025 00:00:00 GMT

I absolutely love everything about this website.

Quoting Simon quoting Steve Krouse

Thu, 13 Nov 2025 00:00:00 GMT

The fact that MCP is a difference surface from your normal API allows you to ship MUCH faster to MCP. This has been unlocked by inference at runtime

Normal APIs are promises to developers, because developer commit code that relies on those APIs, and then walk away. If you break the API, you break the promise, and you break that code. This means a developer gets woken up at 2am to fix the code

But MCP servers are called by LLMs which dynamically read the spec every time, which allow us to constantly change the MCP server. It doesn’t matter! We haven’t made any promises. The LLM can figure it out afresh every time

original tweet

How Did I Get Here?

Tue, 11 Nov 2025 00:00:00 GMT

This is really cool

Quoting Cubic: The real problem with AI coding

Tue, 04 Nov 2025 00:00:00 GMT

How the best teams avoid comprehension debt The best teams I’ve seen solve this problem before any code gets written.

They spend significant time planning with the AI upfront. Not just giving it a prompt and accepting whatever comes back. But going back and forth on the high-level approach. Thinking through edge cases together. Shaping the implementation before a single line gets generated.

This isn’t about slowing down. It’s about understanding what you’re building.

When you shape the implementation with the AI, two things happen:

First, the AI writes better code. Because you’ve given it more context, thought through the edge cases, and guided it toward a cleaner architecture.

But second, and this is more important, the human engineer actually understands the code. Because they shaped it. They made the key decisions. The AI just handled the mechanical work of typing it out.

Frank Chimero · Selling Lemons

Mon, 03 Nov 2025 00:00:00 GMT

Akerlof asks us to imagine ourselves buying a used car. Some cars on the lot are reliable, well-maintained gems. Others cars are lemons, the kinds of cars that can make it off the lot but are disasters waiting to happen. The sellers know which cars are which, but you, as a buyer, can’t tell the difference. That information asymmetry affects the average price in the market and eventually impacts the overall market dynamics.

The thinking goes like this: if a buyer can’t distinguish between good and bad, everything gets priced somewhere in the middle. If you’re selling junk, this is fantastic news—you’ll probably get paid more than your lemon is worth. If you’re selling a quality used car, this price is insultingly low. As a result, people with good cars leave the market to sell their stuff elsewhere, which pushes the overall quality and price down even further, until eventually all that’s left on the market are lemons.

I think we’re in the lemon stage of the internet.

(I’m super happy Frank is writing again)

Moving this site to Astro

Sat, 25 Oct 2025 00:00:00 GMT

I started on a redesign of this site <a href="/writing/website-redesign-i">back in May 2020</a> after deciding I wanted a simpler, content-first statically generated site. My main goals were to keep the core as simple as possible – writing in markdown and minimal boilerplate code – while allowing me to noodle around with new-fangled CSS & web-native stuff when I want to.

After about three years running on Jekyll I started to get frustrated at some of the stuff I couldn’t do easily - primarily the difficulty of working with custom components in markdown. I was using some kinda-janky markdown pre-parsers to let me insert things like callouts…

{:.callout}
This is a callout

Which wasn’t exactly easy to work with and more importantly, if I ever decided to switch away from Jekyll and export all my markdown files, wasn’t exactly obvious or intuitive.

What I really wanted was the ability to use HTML- or React-like components in my markdown. And as with web components or react components, I wanted to define these as self-contained components with scoped CSS and the like.

So in early 2023 I started playing with AstroJS. The most appealing thing about it was the native support for MDX, its React-like component architecture where .astro files contain scoped HTML, CSS and JS, and the relatively small amount of boilerplate needed to get a blog up-and-running.

I quietly ported this site over to Astro, but with the release of Astro 3.0 in August ‘23 so much had changed that it made more sense to start again from scratch. So I switched to the current codebase around the time Astro 4.0 dropped in December ‘23.

Why Astro?

Modern, Simple & Content-First

Astro is very well designed, and because it’s built with a modern TypeScript-based stack, it comes with all the advantages you’d expect (typesafe javascript among them).

When used as an SSG, Astro is also very simple. File-based routing, markdown parsing and YAML frontmatter Just Work™ and stuff like image optimisation come out-of-the-box. And while composing pages from astro components feels very Reactish, it’s “zero JavaScript by default” – the generated site will only include client-side JS when necessary, which for this site is hardly ever.

Astro has an extremely strong ecosystem of plugins, tools and themes around it.

Astro Components & MDX

Components can be anything from a tiny snippet of HTML to a reusable UI component (which takes props and/or content) to a whole page layout. Here’s an example.astro component:

---
const { title } = Astro.props;
const theNumber = Math.random();
---

<section class="mything">
  <h1>{title}</h1>
  <p>Number: {theNumber}</p>
</section>
<style>
  h1 {
    color: red;
  }
</style>
<script is:inline>
  alert('Hello');
</script>

The TypeScript in the component script at the top runs only at build time. The ability to co-locate this “server-side” code with the component is useful for keeping things organised.
The component template (below the last ---) is the HTML which will be rendered when the component is used, except (much like JSX) you can use variables defined in the component script, or other Astro components imported in it.
The CSS in the style tag is scoped to this astro component only.
The script tag at the bottom uses a special astro directive, and will be executed client-side.

Building a site using Astro components is much the same as using React components (or partials in other SSGs). But the real power is using them inside Markdown Content.

MDX Components

MDX lets you use JSX inside markdown files, and is one of the main reasons I chose Astro over other SSGs. In Astro, you can import .astro components into mdx files and use them in the same way you can anywhere else. I’ve ended up with quite a lot of really simple components which just render some HTML and apply some scoped CSS to it. Here’s my highlight.astro component:

<span class="highlight"><slot /></span>

<style>
  .highlight {
    background: var(--color-highlight-bg);
    padding: 0 8px 4px;
    border-radius: 4px;
  }
</style>

And now when I’m writing in markdown I can use it like this:

Here is some text <highlight>that is highlighted</highlight>.

And with more complex components like callouts…

<Callout emoji="💡" type="blue">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum hic a dolorem ipsa labore cum.
</Callout>

…which renders…

The combination of Astro’s component-based architecture and components-in-MDX-files ticks some important boxes for me:

Components make for easy maintenance long term, especially when dealing with CSS.
Scoped CSS and JavaScript mean I can iterate on styles without worrying about breaking other parts of the site.
Using components in Markdown makes it extremely easy and quick to write fully featured content.
If I ever want to switch away from Astro, the structure of Astro components and how they’re used in Markdown files should make it fairly easy to port my content to another system.

So Where Am I Now?

Two years into running this site on Astro, I’ve settled into a setup that gives me everything I need without much fuss.

Content Collections

The site uses two main collections: Articles and Notes. Articles are long-form pieces like this one – they live in /writing/ and support cover images, tags, and a bunch of other metadata. Notes are shorter, usually links to interesting things I’ve found with a bit of commentary. They’re deliberately minimal: just a title, optional source URL, and publication date. Both use the same filename pattern (YYYY-MM-DD-slug.mdx) which keeps things organised and makes it dead simple to create new content.

Plugins

I’m using a handful of plugins that handle the boring stuff so I don’t have to think about it:

Expressive Code handles syntax highlighting for code blocks.
Astro Icon lets me use SVG icons without manually importing and managing them. I can just drop <Icon name="heroicons:home" /> into any component.
Sitemap generates a sitemap.xml automatically, which is one of those things that’s trivial but annoying to maintain by hand.

On the markdown processing side, I’m using a few rehype plugins:

rehype-autolink-headings adds anchor links to headings (so you can link to specific sections)
rehype-external-links automatically opens external links in new tabs
rehype-mermaid renders mermaid diagrams at build time.

I’ve also got a custom remark plugin that calculates reading time for articles.

Components

I’ve got about fifteen components in src/components/mdx/ – things like <Callout> for highlighted notes, <Accordion> for collapsible sections, <BookmarkCard> for pretty link cards, and <Notion> for embedding Notion links. Nothing fancy – just small bits of HTML with scoped styles.

The page layouts are simple – components like BaseHead, MainNavigation, and Footer get composed into layout templates like Article.astro and Note.astro, which wrap the markdown content. The whole design system is based on CSS custom properties defined in global.css, so switching between light and dark themes (or tweaking colours) is just a matter of changing a few variable values.

Future Plans

There are some notes & ideas on GitHub, but I’m not in a particular rush to ship any of it. I’d rather spend my time working on Astro Editor or using it to write stuff here.

Adding share features to this site

Wed, 22 Oct 2025 00:00:00 GMT

I recently added a little feature to articles and notes on this site to make things easier to share. At the bottom of every article and note, there are three links:

Share - uses the browsers Web Share API to open a share-sheet.
Copy as markdown - copies the content of the article/note as markdown
View as markdown - opens the current URL with an .md extension which returns the above with Content-Type: text/markdown;

Thanks to tools like Claude Code, I’m finding myself working more and more with markdown, so it makes sense for me to make any content I write available in that format too.

You can try these out on this note ↓

Vibing a Non-Trivial Ghostty Feature

Mon, 20 Oct 2025 00:00:00 GMT

This article by Mitchell Hashimoto very closely describes how I tend to work with AI tools to “vibe code”.

(It’s not really vibe-coding, because I’m watching the AI work and reading a lot of the code.)

The Oatmeal on AI Art

Wed, 08 Oct 2025 00:00:00 GMT

I used to read The Oatmeal religiously, but somehow stopped years ago.

This is a Good Take on AI Art, as I’d expect from Matt.

Armin Ronacher on Progress

Sat, 04 Oct 2025 00:00:00 GMT

As I’m getting older a lot of my social circles are becoming ever more conservative. The focus shifts from building with ambition to fiercly protecting what one has achieved. Shifting the mind on protectionism makes one consider all that can cause damage. It puts the focus on the negative, it makes those negative thoughts feel much more significant than they are and one dwells on the past, instead of envisioning of what opportunity might lie ahead.

A Youth Paralysed By Perfectionism - The Akin

Wed, 17 Sep 2025 00:00:00 GMT

Previous generations mainly experienced productive shame, a form of competitive pressure that drove young people to differentiate themselves for social success, whether rightly or wrongly. But most often, this shame motivated risk-taking, skill development, and participation. Being bad at something was usually a temporary embarrassment that motivated improvement.

Gen Q experiences mostly destructive shame, characterised by shame around not performing correctly from the start, not having enough experience, and not meeting digital standards before attempting anything.

The result of this decline in participation is Digital Primacy, where digital experiences feel more real and valuable than physical ones. This is why 72% of Gen Q feel digital life is more real than physical life. They achieve recognition through online performance rather than offline skill development.

The reason is neurological: physical activities provide immediate, embodied feedback that can’t be edited or optimised. When you hit a tennis ball, your body knows immediately whether it worked. This creates resilience to failure that digital experiences can’t replicate. Online, everything can be retried, filtered, and perfected before sharing.

These numbers are indeed striking…

Teens involved in sports, dance, martial arts, or even casual hiking maintain 2.8 close friendships, compared to 1.4 for their sedentary peers.

Their digital primacy drops to 52% compared to 73% in the general population.

Gen Q doesn’t need another confidence boost; they need permission to be shit at things while figuring them out.

15 rules for blogging

Tue, 16 Sep 2025 00:00:00 GMT

I found Matt’s website today and had a lovely couple of hours exploring his writing.

I love most of his 15 Rules for Blogging, but this one in particular…

One idea per post. If I find myself launching into another section, cut and paste the extra into a separate draft post, and tie off the original one with the word “Anyway.” Then publish.

I regularly get excited enough to write a kinda-stream-of-consciousness thought down which turns out to be half-decent except for the end. And these often languish as drafts for ages for want of a neat way to wrap them up.

I just looked at my unfinished drafts and about two thirds of them are hard to wrap up because they contain multiple kinda-related ideas which are just a bit too hard to bring together in a conclusion I’m happy with.

Anyway.

On Working with Wizards - by Ethan Mollick

Sun, 14 Sep 2025 00:00:00 GMT

And that suggests another risk we don’t talk about enough: every time we hand work to a wizard, we lose a chance to develop our own expertise, to build the very judgment we need to evaluate the wizard’s work.

But I come back to the inescapable point that the results are good, at least in these cases. They are what I would expect from a graduate student working for a couple hours (or more, in the case of the re-analysis of my paper), except I got them in minutes.

This is the issue with wizards: We’re getting something magical, but we’re also becoming the audience rather than the magician, or even the magician’s assistant.

The Rise and Fall of Vibe Coding | Tomasz Tunguz

Mon, 08 Sep 2025 00:00:00 GMT

The fundamental problem lies in misaligned capabilities and understanding. AI generates working code fast but cannot instill architectural thinking or testing discipline.

Users gain false competency. They produce working software without grasping underlying complexity or long-term implications.

Engineering best practices must become as accessible as AI coding tools. Security improvements and test generation should happen in natural language.

The future involves hybrid workflows. “Vibe coders” prototype solutions while engineers harden successful experiments.

Reflections on an old article I wrote

Mon, 01 Sep 2025 00:00:00 GMT

So seven years hence I’m re-reading this, and… this paragraph applies even bloody more in 2025 if we replace googling and stackoverflow with “talking with Large Language Models”. I’m generally bullish re LLMs as far as speeding up coding. But I’m the opposite as far as learning and what I wrote in this article is concerned.

Like StackOverflow in 2018, LLMs are very good at knowing how to solve well-defined, general-case problems which can be defined with some specificity. And like StackOverflow in 2018, they are shit at solving ill-defined general technical problems… especially when those problems exist in a niche business domain.

Relevant aside…

It pains me to think that a meaningful chunk of people will probably find this note because they’re finding it hard to break down problems when learning to code and will end up engaging with it via some AI-summary rather than by actually reading it. And then move on to the next thing without taking anything at all meaningful from my 2018 words besides “man coding sounds hard”. I hope I’m wrong here.

Mass Intelligence?

Mon, 01 Sep 2025 00:00:00 GMT

When a billion people have access to advanced AI, we’ve entered what we might call the era of Mass Intelligence. Every institution we have — schools, hospitals, courts, companies, governments — was built for a world where intelligence was scarce and expensive. Now every profession, every institution, every community has to figure out how to thrive with Mass Intelligence. How do we harness a billion people using AI while managing the chaos that comes with it? How do we rebuild trust when anyone can fabricate anything? How do we preserve what’s valuable about human expertise while democratizing access to knowledge?

That boolean should probably be something else - Nicole

Sun, 31 Aug 2025 00:00:00 GMT

This is a great (short) article on using booleans.

They feel like they make sense for our data, but they make sense for our logic. The data is usually something different underneath. By storing a boolean as our data, we’re coupling that data tightly to our application logic.

Instead, we should remain critical and ask what data the boolean depends on, and should we maybe store that instead? It comes easier with practice. Really, all good design does. A little thinking up front saves you a lot of time in the long run.

Yes 💯

Also…

I know that using an em-dash is treated as a sign of using LLMs. LLMs are never used for my writing. I just really like em-dashes and have a dedicated key for them on one of my keyboard layers

As a longtime em-dash user myself, I should start adding this to my posts.

Learning is the product of the activity of learners

Sun, 31 Aug 2025 00:00:00 GMT

Learning is not the product of teaching. Learning is the product of the activity of learners. — John Holt

I love this quote (via)

Are people’s bosses really making them use AI tools? - Piccalilli

Thu, 28 Aug 2025 00:00:00 GMT

I appreciate Andy taking the time to write this because I think we need a more balanced view of how to use LLMs in the tech industry.

As with any software we use to get work done, LLMs are a tool. And as with any tool, we need to be using them correctly and intentionally.

I spent the last month trying to develop my thinking on what correct looks like, but based on the quotes in this article, a lot of people aren’t bothering to do that in their firms.

I Am An AI Hater

Thu, 28 Aug 2025 00:00:00 GMT

I am here to be rude, because this is a rude technology, and it deserves a rude response.

This whole article is worth reading (via)

On Teaching

Sun, 24 Aug 2025 00:00:00 GMT

Teaching is not about assignments, textbooks or authority.

It’s about the pedagogy, connection and approach that creates the conditions for a willing student to change their mind.

Everything else is simply grunt work.

Sooner or later, we are all self taught.

Building Castles in the Air, but With Surprise Physics

Sun, 24 Aug 2025 00:00:00 GMT

Programmers still build castles in the air, but they first have to discover what physics apply.

Tauri Template

Wed, 20 Aug 2025 00:00:00 GMT

While building Astro Editor I learned a fair bit about Tauri and how to develop simple macOS/React apps with it using Claude Code.

So I spent a few hours building the boilerplate I wish I’d had when I started, tauri-template. It comes with:

A basic boilerplate for Tauri 2, React & Typescript
A sensible state management system using Zustand and Tanstack Query
UI components based on shadcn and tailwind 4
A command system with a command palette, macOS menus and keyboard shortcuts
An auto-update and release system using GitHub Actions.
A notifications system with in-app toasts and native notifications.
A minimal logging system
A preferences pane and preferences persistence system
A basic UI with a unified title bar, sidebars and a main panel
Sensible developer documentation, AI instructions and linting/formatting/tests to help AI Agents make fewer errors.
Some other sensible boilerplate.

This is mainly meant for me to use as a starting point when building other macOS apps with Tauri & React.

The GitHub Profile README That Shouldn't Exist

Tue, 19 Aug 2025 00:00:00 GMT

This is very cool.

From Loom to Cap

Tue, 19 Aug 2025 00:00:00 GMT

I’ve been a big fan of Loom for a long time now. Back when I started working remotely it quickly became a powerful tool for communicating asynchronously (guidance on that) and combined with Notion and Slack quickly became my go-to for recording screenshares, lessons and short headshot videos for those times when text messages don’t cut it.

Over the last 5-6 years Loom has added a host of features, most of which aren’t especially useful for me. I basically have two use cases:

Quickly record a short screenshare or headshot video, click stop and immediatly paste a working link into Slack/WhatsApp etc.
Longer, more polished recordings for embedding in Notion documents as tutorials, guides or presentations.

Loom was the first tool to make (1) possible because it streams and encodes your recording as you record, so the video is working as soon as you hit stop. It’s still great for that.

It’s not so good at (2) because it lacks the editing features required, and because recording at a higher quality would slow down the streaming.

I’ve always kinda wanted Loom to have two separate modes: one for quick recording which works like normal Loom, and another for more polished stuff which records locally with separate high-quality tracks for screen and camera, and then allows me to edit in a simple interface similar to Screen Studio before uploading to the same place as the quick recordings.

I’ve also become increasingly annoyed that my many, many videos are all on a loom.com URL. I’d much rather have them under my own domain.

Enter Cap.so

Cap — Beautiful screen recordings, owned by you.

Cap is the open source alternative to Loom. Lightweight, powerful, and cross-platform. Record and share in seconds.

cap.so

Cap is an Open Source project which is almost what I’m looking for. I love that I can self-host it if I want, though I’m more than happy to pay for their SaaS. It’s still a little rough round the edges, but is under active development. Aside from the fact I have a load of historical Looms which I need to leave there for a while, the main thing that’s preventing me switching from Loom full time is the inability to record just my face for a quick recording session, but I’m told this is on the way.

If you’re a Loom user looking for an alternative, check out Cap!

It's rude to show AI output to people

Mon, 18 Aug 2025 00:00:00 GMT

For the longest time, writing was more expensive than reading. If you encountered a body of written text, you could be sure that at the very least, a human spent some time writing it down. The text used to have an innate proof-of-thought, a basic token of humanity.

Now, AI has made text very, very, very cheap. Not only text, in fact. Code, images, video. All kinds of media. We can’t rely on proof-of-thought anymore. Any text can be AI slop. If you read it, you’re injured in this war.

I really feel this. I’ve read so much AI slop in READMEs on GitHub in the last few months that it’s had me raging on numerous occasions.

In fact, I think READMEs are a brilliant example of this point. As someone who’s written a lot of documentation over the years I really appreciate well written docs, so have always been mildly annoyed at GitHub repos with no docs and sparse READMEs.

The most bare-bones READMEs (of old) were often written by a human who really didn’t wanna write them, but took the time to think about the people using their software and the minimum docs they’d need to do so. Proof-of-thought.

I’d rather have a thousand sparse READMEs than the hundreds of emoji-filled monstrosities I’ve had to work through recently. Especially because 90% of them have less actual information than the sparse docs they replaced.

But then the docs for Astro Editor are mostly AI slop. But it’s very useful slop when AI coding tools are also the reader. In fact, I’ve started putting callouts at the top of markdown files to make it clear whether their contents is intended for humans or LLMs or both.

But in a much more philosophical context, this is really hard…

We can’t rely on proof-of-thought anymore.

It made me realise that one of the things I love about the internet is that anyone who writes more than a few sentences here has intentionally decided to expend brain cycles and time to do so. This is true regardless of the quality (or sanity) of the thoughts being shared. Every long, batshit-crazy rant on reddit is a sign that the author cared enough to think and type it. Just as every “nah bro” comment underneath it is a sign of the opposite. Only now the “nah bro” is twenty paragraphs long and just as thoughtless.

So yeah… it’s rude to show AI output to people.

Switching to Ghostty Terminal (OMG)

Mon, 18 Aug 2025 00:00:00 GMT

I finally lost my shit at Warp yesterday.

I’ve used Warp as my terminal app for about three years and have been getting increasingly pissed off at their ongoing efforts to turn my terminal into a fancy AI-enabled everything-machine.

I understand why – nobody ever got rich by building a terminal app. But when a mistyped ls -a causes my terminal to say “You’re absolutely right - let me search online for a better solution” I’m gonna look for a terminal which is just a fucking terminal.

And so I found Ghostty. Which is exactly what I should always have been using as a terminal.

It’s fast as hell.
It’s just a terminal. It doesn’t interfere with my shell.
It plays so well with my OS (unlike every other terminal app I’ve used). There’s a great piece on this here.
The three things above are basically what drove Mitchell Hashimoto (co-founder of HashiCorp) to work on a really good terminal instead of something more lucrative.

Configuration

Took all of five minutes…

font-family = "Operator Mono"
font-size = 18
window-padding-x = 10
window-padding-y = 10
window-padding-color = background
window-padding-balance = true
theme = "iTerm2 Pastel Dark Background"
adjust-cell-height = 15%
window-save-state = always
background-opacity = 0.95
macos-titlebar-style = tabs

My Favourite Features

The fact I can manage splits like a normal mac user rather than a tmux nerd. These keyboard shortcuts are basically the only “features” I use and it’s bloody lovely.

⌘ + Enter - Toggle Fullscreen
⌘ + Shift + \ - Show All Tabs
⌘ + D - Split Right
⌘ + Shft + D - Split Down
⌘ + Shft + Enter - Zoom Current Split
⌘ + [ - Next split
⌘ + ] - Previous Split
⌥ + Click - Place Cursor

All the other OS-native shortcuts work as expected, it’s fast and reliable, and most important of all I haven’t noticed my terminal app at all since I started using Ghostty.

Theo Browne has an interesting video with a load more context if you wanna dig deeper.

VoiceInk vs Wispr

Mon, 18 Aug 2025 00:00:00 GMT

I now spend more time talking to my laptop than I do typing into it. And because Apple’s transcription is so rubbish I’ve been a happy customer of Wispr Flow for the last six months.

It’s a great product that Just Works.

But it’s also nuts that I’ve been streaming audio up to some (probably US-based) server and using their compute to transcribe it and then having that text streamed back down when I have a pretty powerfull macbook. Transcription is 💯 something which should be doable to a high-quality with local models.

So three weeks ago I switched to VoiceInk. Things I like:

It’s Open Source.
It uses local models but is still easy to configure and use.
My ramblings stay on my own machine.
The chap behind it is a “fairly new developer” and this is his “first time collaborating on Github open-source project” (his words). Which I absolutely love, and kinda blows my mind.

Things I dislike rn:

It’s slightly slower to respond to keypresses than Wispr, which means I often lose the first or last word of a dictation.
It’s doesn’t throw away “silent” recordings. Which I do a million times a day by accident.
I’m worried about feature bloat and the inevitable lack of focus, UX issues and eventual tech debt which comes with that.

Despite that, if you’re paying for Wispr or SuperWhisper or similar, check out VoiceInk.

Just Banning Minors From Social Media Is Not Protecting Them

Thu, 07 Aug 2025 00:00:00 GMT

It is clear that such bans will do little in the way of making the internet a safer space for young people. By banning a particularly vulnerable group of users from accessing platforms, the providers themselves are let off the hook: If it is enough for platforms like Instagram and TikTok to implement (comparatively cheap) age restriction tools, there are no incentives anymore to actually make their products and features safer for young people. Banning a certain user group changes nothing about problematic privacy practices, insufficient content moderation or business models based on the exploitation of people’s attention and data. And assuming that teenagers will always find ways to circumvent age restrictions, the ones that do will be left without any protections or age-appropriate experiences.

This is at the root of why I’m so against the UK’s recent Online Safety Act. It won’t work, it ignores the root causes, it introduces huge privacy risks and has the potential to really fuck the internet up.

No, AI is not Making Engineers 10x as Productive

Thu, 07 Aug 2025 00:00:00 GMT

When I have had engineers who were 10x as valuable as others it was primarily due to their ability to prevent unnecessary work. Talking a PM down from a task that was never feasible. Getting another engineer to not build that unnecessary microservice. Making developer experience investments that save everyone just a bit of time on every task. Documenting your work so that every future engineer can jump in faster. These things can add up over time to one engineer saving 10x the time company wide than what they took to build it.

Contra Ptacek's Terrible Article On AI

Thu, 07 Aug 2025 00:00:00 GMT

This one really made me laugh. 100% worth a read.

Building a Daily Brief for AI with GitHub Actions

Tue, 05 Aug 2025 00:00:00 GMT

I’ve long wanted to start my day by having a Morning Chat with Claude Desktop. For this to be useful I need these conversations to start with two things: a morning briefing for me, with the news I care about today, and the AI to be primed with the current context on my life. I’m still working on the latter, but the morning briefing seemed pretty simple.

Right now, I want my morning brief to include the weather, times for sunset and sunrise and high/low tides, major news stories from the BBC, new posts from a few RSS feeds I care about and new videos from a few YouTube channels, along with any significant changes to the price of bitcoin.

My first instinct was to have Claude fetch all this with tool calls, which sort of worked but was slow and unreliable. And felt like a bad use-case for AI because it’s not hard to get all of this data with old-fashioned-not-AI-programming.

So I vibe coded a little TypeScript script which runs daily in a GitHub Action at 7am. It hits various APIs & scrapes feeds and dumps everything into a formatted markdown file. GitHub Actions runs it at 7am. No AI involvement whatsoever at this stage – just simple deterministic code.

My Claude project simply includes this instruction

Fetch today's briefing from https://raw.githubusercontent.com/dannysmith/morning-briefing-generator/refs/heads/main/dailybriefs/latest.md and print the markdown without changing it.

That’s it. The AI gets all that context for free, can summarise it, pull out highlights, or just display it raw. But more importantly, it has that information available when I ask follow-up questions later in the day.

This split makes both parts better. The data fetching is reliable, testable, and runs for free on GitHub’s infrastructure. The AI part can focus on what it’s actually good at—understanding context, making connections, and having a conversation about the information rather than struggling to fetch it.

I’ll probably expand and tweak this in the future to provide more info and context, perhaps with slightly different stuff for different days of the week. The only major limitation at the moment is that I can’t include any private information in the brief, because I don’t want that available on a public URL.

Vibe coding in prod

Sat, 02 Aug 2025 00:00:00 GMT

Interesting analogy here with compilers. We’re able to build good software without reading assembly - we just trust that they work well. (And having written some assembly as a student I’ve very glad we can)

I can certainly get on board with the idea that eventually LLMs will be able to abstract away implementation details (ie code) in a similar way that my current tooling abstracts away machine code.

But making compilers sufficiently reliable for programmers to trust them took an awful lot of time and effort, and unlike LLMs they’re sufficiently deterministic that well-designed tests and benchmarks are a reliable measure of consistent behaviour & performance.

Codewashing

Mon, 21 Jul 2025 00:00:00 GMT

I have little understanding for people using large language models to generate slop; words and images that nobody asked for.

I have more understanding for people using large language models to generate code. Code isn’t the thing in the same way that words or images are; code is the thing that gets you to the thing.

Leaving the ethics of LLM training aside, my biggest issue with AI-generated “slop” is that it’s invariably shit.

I’ve read so damn many AI generated READMEs on GitHub in the last few weeks, and on at least two occasions lost my temper trying to find what I needed amongst the nonsense. It was better when lazy devs just had ten-line READMEs.

And I routinely have to wade through AI-generated slop articles in Google searches all the time.

In both cases, the end thing – product – the words. And those products have a shit user experience.

With code, the product is the working software. And the last few weeks have taught me that LLMs are incredibly powerful at helping me make decent user experiences quickly. It might matter to developers that the underlying code is slop, but if the working software is good it’s the only thing which matters to users.

I genuinely look forward to being able to use a large language model with a clear conscience. Such a model would need to be trained ethically. When we get a free-range organic large language model I’ll be the first in line to use it. Until then, I’ll abstain.

I’m also looking forward to this. But until it arrives, I’m content to use un-ethical models for the same reason – if I’m trying to gain weight – I’ll happily eat un-ethical meat in the absence of alternatives. Doing so is has a sufficiently high impact on my quality of life that it outweighs my ethical concerns.

Posting Notes from My Phone

Fri, 18 Jul 2025 00:00:00 GMT

I just read this article, and it inspired me to see if I could post new notes to my website using the ChatGPT mobile app. That’s what I’m doing now. This is a test of that note.

Johnny.Decimal

Wed, 16 Jul 2025 00:00:00 GMT

This reminds me so much of the old UK MoD File Reference system (some of which is still in JSP 441!)

I feel like systems such as these might have even more relevance in the age of LLMs, because they allow content and structures to be understood and referenced through a logical text-based system of symbols.

AI and ADHD

Thu, 10 Jul 2025 00:00:00 GMT

My friend Vicki’s “mate have you considered maybe youse got ADHD” was the first time I remember this topic coming up. That was six years back and I promptly forgot about it. Then two years ago – while ADHD was all the rage on TikTok – my friend Janina had a period of revelation about herself and made me do a bunch of tests. Turns out I probably have Adult ADHD.

I’m writing this because I read a couple of posts this week which got me thinking about ADHD again, and because I’ve been knee-deep in AI-related things for the last month. The article below is a response to DHH’s rant about ADHD, which I remember skimming last year. I only just found Schneems’ response, which had me in stitches more than once…

My Red Hot ADHD Programming 'Affliction'

Sorry, Dave, ADHD is real, and (not acknowledging it) can hurt you. Hi. I’m Richard. I’m a Ruby Core Contributor. I also code in Rust, and enjoy giving talks...

schneems.com

He makes a lot of good points, but two bits cracked me up in relation to myself…

My biggest behavioral issue was that I snuck books into class and read them under my desk. If your mental picture of someone with ADHD is an out-of-control “little monster,” then this seems like the opposite. I got through college with a degree, taught myself Ruby on Rails

I also snuck books into school to read under the desk. One teacher gave me detention for it. Others brought me really interesting books from home (in one case a giant stack of New Scientist magazines), and occasionally let me get away with reading over the desk instead of doing whatever I was supposed to be doing. And like Schneems, I also got through university with a degree and taught myself Ruby on Rails.

One day, I was having an argument with my wife. It was about how I never planned dates. It got heated. She had to go to a meeting, and I planned to return to the conversation “Hey, how about we grab lunch after your meeting to talk it over.” I realized that I needed to meet the basic expectations of planning events and trying to compensate for them by taking action then and there. The suggestion might seem trite or pandering, but she thought it was good and agreed.

An hour later, she walked into my office (garage), and I literally couldn’t remember why she was there. Or rather, I was in the middle of another task, and when she walked in, I had to rack my brain to quickly retrieve the info that would provide context to her: “I’m here.” It took a split second too long, and she noticed. Turns out that I don’t “have a good memory.” What I have is the ability to recall extremely detailed information about a situation, given that I’m primed with the context.

I laughed out loud at this for like five minutes. In the two years since my friend Janina made me do those tests, we’ve laughed a lot at how differently this stuff affects each of us. The venn diagram of our symptoms barely overlaps. What Schneems describes here is not a thing for her at all, but it very much is for me. Janina and I share a house, so she’s seen (and been frustrated by) many versions of this over the years. See also my ex-girlfriends. And colleagues. And friends. Every single person I sent that quote to laughed – especially at the last two sentences.

Those last sentences are a beautifully concise version of something I’ve always struggled to articulate about myself: “What I have is the ability to recall extremely detailed information about a situation, given that I’m primed with the context.”

You and me both, Schneems. You and me both.

Entirely unrelated, I stumbled upon this wonderfully creative site:

https://www.adhdexperience.com/ adhdexperience.com

Preview unavailable - click to visit

Once I’d stopped puzzling over how on earth this was built on Wix, I read the list of symptoms. It’s been two years since I read a list of ADHD symptoms and I properly chuckled at how many apply to me. I’ve circled those which I definitely experience (and I’m sure my friends would recognise) below.

Me and ADHD

When ADHD was all over TikTok, loads of friends were prodding me about getting a formal diagnosis. I didn’t seek one because knowing whether I Have ADHD or not wasn’t useful to me, and still isn’t.

Most people I know – when faced with mountains of evidence that you very obviously have ADHD – reacted with some version of “OMG this explains soooo much, this is really helpful to know”. And for most of them it’s been really fucking helpful.

My own reaction was one of mild interest. Because while “you very obviously have ADHD” was news to me, not one of the symptoms was news. I’ve always held the view that these “symptoms” were just kinda how my brain is. Sure, they make me super-shit at a bunch of things, but they also make weirdly great at other things. Whether I like it or not, they’re how my brain is. And always has been.

This muted reaction is partly because I’ve been an accidental stoic from a young age – I’ve always thought it insane to try to control the uncontrollable. Things are how they are and unless we can actually change them it’s better to embrace reality and look for what we can change. I can no more control the symptoms I circled above than I can my emotions. But I can control how I respond to them.

I realised years ago that my brain was a bit weird. I also learned that any attempt to fundamentally change it was utterly exhausting, felt turbo-shit, and – most importantly – didn’t work at all. And if I couldn’t change how my brain worked, the only sensible response was to happily accept reality, and focus on useful things I could change.

Which is why I read Getting Things Done as a weed-smoking seventeen-year-old: I had some vague notion that I couldn’t rely on my brain to stay organised. All my mates thought this was very weird. And when – like most folks who read it – I failed to stick to the “GTD Way” for more than a minute, I took the bits that actually helped me and left the rest behind. And I’ve kinda been doing that ever since.

The result is: I’m self-employed, work remotely for multiple clients and intentionally avoid anything requiring a fixed 9-5 or Mon-Fri schedule. I write everything down immediately, lest it’s gone when my mental context changes 10 seconds later. Every time-based thing goes straight in my calendar, which is always with me. I own an Apple Watch specifically to poke me when I have meetings. I’ve internalised a bunch of habits which keep my physical space tidy without any conscious mental effort. I have hard rules to avoid impulse purchases and hasty big decisions (fundamentally: “always sleep on it”). And I could go on and on…

The point is: I’ve been finding out how to work well with my own brain for decades. Far from being exhausting, the kinda stuff above is liberating when I get it right, because it feels easy for once. Figuring this stuff out, however, is often not easy. The hard work is always the figuring out, not the sustained doing. Because if sustaining a thing feels hard, I haven’t figured out the hard bit of it yet.

Whether you have ADHD or not, finding ways to work with your brain rather than against it will never be a bad thing. And after working heavily with AI for the last few months, I have some embryonic thoughts which I’ll expand on some other time.

Embryonic Thoughts on AI & ADHD

In no particular order, some embryonic thoughts on AI, me, and possibly ADHD…

1️⃣ A Focussed Context Window (for me, not the LLM)

When most folks get a WhatsApp message asking if they’re free on such-and-such date they’ll open their calendar app and either reply with an alternative date or add an event to their calendar, before closing it and carrying on with whatever they were doing before.

When I get a message, 50% likely to do exactly this. But in the other 50% I’ll catch sight of some unrelated meeting or event next week and my brain will instantly switch context to thinking about that. Worst case, this means I forget to deal with the message which caused me to open my calendar in the first place. Best case it takes 15 minutes to refocus my brain on whatever I was doing before.

And this applies to loads of shit. It’s why I check email at designated times and why none of my tech sends me notifications. This problem is easily solvable by deliberatly doing One Thing At A Time in an isolated context. Right now I’m writing this post in a super-zen minimalist editor precisely so I don’t get distracted.

But that’s not how most knowledge work works. Most work constantly requires context and information from places other than where we’re currently working – calendar, meeting notes, slack, notion, the web, etc etc etc etc.

So the real challenge for me here is creating an environment where I always have the full context I need for what I’m doing right now but nothing more.

While I can kinda do this manually it takes way more energy than it does for most folks, so I’m particularly excited about the potential for AI tools to help with this. Which is kinda amusing because – like me – LLMs also operate best when their context window contains exactly the right stuff.

2️⃣ Meetings Etc

Meeting recording and transcription tools are a big deal. For most of my life I’ve waged an internal battle between losing myself in the experience of a good meeting and ensuring something useful comes out of it after. Whether I’m stream-of-consciousness jabbering while excitedly hand-waving or listening rapt while others do so, I’m concious that creating & guiding effective conversation – and capturing the useful bits of it – requires skilled facilitation. I often end up in that role, requiring a decision on whether I want to do it well or fully participate in the conversation. Because I absolutely cannot do justice to both at the same time.

AI cannot ever replace skilled human facilitators. But in the (many) situations where my de facto facilitation role is just preventing unhelpful tangents and ensuring we remember the important bits after… AI can totally take the latter away from me during the meeting itself.

Paired with vaguely sensible meeting practices, AI tools like Notion’s meeting recorder have really helped me to stay present and focussed during calls.

3️⃣ Faster Side Quests

I’m certain there’s a subreddit dedicated to the partners of ADHDish people sharing funny-but-exasperated stories about this afternoon’s progression from quickly cleaning the garage to driving forty miles for a custom-machined nozzle for the tool that oils the leaf blower while the contents of the garage remains 50% organised and labelled in excruciating detail and 50% definitely not going back in the garage before nightfall.

I’m like this, and I fucking love it. I love that custom-machined nozzle and its metaphorical brothers. I could legitimately argue that my whole career has been a series of semi-random side-quests stacked on top of each other.

I’m lucky that given enough time I’m pretty good at working back up the chain of side-quests until eventually the garage ends up clean. But that often takes a bit too long, and I run out of time, and the stuff on the drive gets nicked or rained on otherwise ruined. If only today was longer and I had a floodlight etc.

LLMs won’t help me with my garage, but they can make a lot of computer-based side-quests waaaaaay faster. More importantly, they significantly reduce the time between me embarking on a side-quest and realising either A) it’s more than a side-quest and I should treat it as such or B) it’s not worth persuing. I’m talking weeks to hours in some cases.

TL;DR: LLMs have allowed me to follow side-on-side-on-side-quests and come back up the callback chain in a reasonable timeframe way more than I could before. Which is both fun and useful.

4️⃣ Context Switching When Bored

I get bored way to easily. But I also hyperfocus easily. I’m lucky enough that I’ve worked out how to blend those things into something which makes me good at learning things and doing things.

A large part of that is my ability to maintain focus on things in a macro sense over periods of time. But the one thing I cannot fucking do is maintain focus in a micro-sense when it’s gone. In the course of writing this article I’ve walked downstairs six times to smoke a cigarette and twice to make a cup of tea. I’ve folded five T-Shirts, weighed myself and noted the result in my journal and resisted countless urges to open a web browser.

None of those things took more than 5 minutes and none distracted my macro-brain from this article. But without them I’d have been impotently raging at my keyboard.

Because while I need that focused context window in a macro-sense, I need regular mini-distractions in the micro sense.

Surprisingly, I’ve found that doing at most two things at once with agentic AI tools ticks this box. I legit smoke fewer cigarettes when working on two unrelated tasks using AI agents. When I need a break from hard thinking about Thing A, I set an agent off doing something useful on it and context switch to checking in on what AI has done on Thing B. Prodding Thing B’s AI towards the next thing is just enough of a break to bring my brain back to Thing A. 🔄.

This only seems to work if Things A & B are not the same complexity. AI coding agents (in Aug 2025) don’t have sufficiently nuanced mental models to make non-trivial decisions about software engineering – nuanced mental models is my job as the human overseer. But if I’m doing that for Thing A, I need Thing B to need the same nuanced mental models I’d give to smoking a cigarette or making a cuppa.

When this works, context switching between two tasks improves my ability to focus on both. Which is new to me (despite many attempts to kid myself otherwise in the past).

Wrapping up…

Writing this has been weirdly cathartic because it’s the first time I’ve properly ordered any thoughts about this stuff. But also because whether we’re talking about AI or our own brains my parting message is the same…

This is what it is, and pretending otherwise is foolish. Our job is to work out how to use it in a way that’s positive for both ourselves and the wider world.

I don’t think AI will ever be better at 👆 than humans. Solong as we give it the time of day.

The Rise of the AI-Native Employee

Tue, 08 Jul 2025 00:00:00 GMT

AI transformation inside existing tech companies is going to be brutal. You can’t just spin up a centralized “AI task force” and expect the rest of the org to suddenly think and operate differently. It doesn’t work. This mindset shift isn’t something you can document or mandate - it has to be seen and experienced. I know, because I had to see it myself.

This reminds me of the transformation to effective remote working, which began in some companies between 2020 and now. This change was also challenging for many large companies, as the shift to being AI-native was. Remote-first or remote-native wasn’t just about changing tools or processes; it was a complete mindset shift, a cultural change. Having witnessed this firsthand in companies built to be remote-first from the ground up, I found it extremely difficult for the same reasons Elena mentions here.

The rest of this article is worth a read too.

When Figma Starts Designing Us

Tue, 08 Jul 2025 00:00:00 GMT

However, over the course of the last five years, I’ve grown increasingly worried about what Figma is doing to the field of design by pushing designers toward an engineering-centric way of working. This can be seen in their feature releases: Smart Components, Variables, Auto Layout, and Interactive Prototypes. These features are often celebrated as steps toward parity with engineering, but in practice, they encourage a mode of working that narrows the field of possibility at precisely the moment when it should be expanding.

As an engineer, I agree wholeheartedly with this. The design systems nerd in me absolutely loves these engineering-focused features in Figma. But if we go too far down this road, designers will bring less and less creative value to teams over time.

Charles Babbage on AI

Wed, 02 Jul 2025 00:00:00 GMT

On two occasions I have been asked, — “Pray, Mr. Babbage, if you put into the machine wrong figures, will the right answers come out ?” In one case a member of the Upper, and in the other a member of the Lower, House put this question. I am not able rightly to apprehend the kind of confusion of ideas that could provoke such a question.– Charles Babbage, Passages from the Life of a Philosopher, 1864

Saw this on Simon Willison’s blog. Seems extremely relevant in the world of AI!

Why Remote Companies Must Be Calm Companies

Mon, 08 Apr 2024 00:00:00 GMT

Calm Companies

Here is my list of Calm Company attributes:

Profitable: Calm Companies have a strong financial engine working with good margins. This foundation enables everything else.
Purpose: Calm Companies have a strong sense of purpose: “What are we building this company for?” Generally, there’s an internal purpose: “to improve the lives of the people working here,” and an external purpose: “to help more creators get their message into the world.”
Freedom and Flexibility: As founders, we build businesses to give us more freedom. A Calm Company gives team members the flexibility to live well, pursue hobbies, exercise, take breaks, go on trips, and connect with family and friends.
Fun: Calm Companies produce more opportunities for fun. “What if we ran this event?” “What if we went on a team retreat in the mountains?” “What if we put an easter egg on our website that plays a silly song?” “What if we made some fun stickers?”
Mindful: At a Calm Company, decisions and commitments are made mindfully. We ask: will this decision make our lives worse? More stressful? Does it align with our values? Will this commitment add too much weight to our culture?
Sustainable Growth: Calm Companies want to grow but at a sustainable pace. Growth should serve a higher purpose. Ambition is good, but not at the expense of well-being.
Calm Work Environment: Stress and chaos are replaced with clear work goals, boundaries, and communication.

Frenzied Companies

Let’s contrast the idea of a Calm Company with that of a Frenzied Company.

A frenzied company is perpetually in crisis. They have a culture of impossible deadlines and unrealistic expectations.

Managers pressure employees to constantly be “on” and “available,” even after work hours.

An implicit—or sometimes explicitly stated—threat hangs over everyone’s head: “If things don’t turn around, jobs will be lost.”

Managers frequently dump their stress and anxiety on their staff. Employees regularly find themselves absorbing negative emotions from work. They come home feeling drained and overwhelmed.

Personal CRMs Aren't What I Need

Mon, 05 Feb 2024 00:00:00 GMT

I paid a 12-month subscription for a Personal CRM called Clay because I need help “managing my personal and professional relationships”. It’s not bad software. BUT…

It turns out what I need is not Clay, or any other “Personal CRM” I’ve found.

It feels like most of these Personal CRMs are made by folks with very different problems to me.

I know a lot of founders, execs, freelancers (and salespeople) who are very good at building and maintaining their personal relationships… it’s a huge part of their job after all. Most of them reach out to people, meet new people and get/make a lot of useful intros on a daily basis.

For them, Clay’s features are probably pretty useful. I can imagine it’s useful knowing it’s Andy’s birthday today, and when you last spoke 9 months Andy was struggling with X, Y and Z and had a baby due in August. And that Andy’s job on LinkedIn changed 3 months ago. Etc. Because all that makes excellent context for a quick email to reopen a conversation.

If you read that and thought “well duuh what’s a CRM for?” you’re one of the founders/execs/freelancers/salespeople I’m talking about 👆. We probably agree that the job of a personal CRM is keeping information about the people you know organised, current and readily available.

Which is exactly what all CRMs are for… sales CRMs were originally designed to help salespeople manage exactly this kind of information in a sane way, making it easier to maintain meaningful contextual relationships with customers & leads.

But that’s not at all what I need from a “Personal CRM”. If it was I’d happily be using a janky setup of Hubspot, Zoho, Salesforce (💸) or similar to manage my personal relationships.

What I need is a tool that solves a different set of problems. I need a tool that makes maintaining and growing my personal relationships & network easy and fun. I need a tool for people who are not good at this stuff in the first place.

I need a tool that pings me before I meet someone new and suggests context-aware questions & conversation points. I need a frictionless way to note the important bits down and resurface them appropriately. I need to know when two of my contacts have something non-obvious in common, and an easy way to intro them. I need to be magically reminded that when I last spoke to Anna from Random Startup Ltd she was excited about her family trip to Croatia, and I want that reminder (with context) 3 days after she gets home – or when I happen to end up in Croatia myself.

When I meet people in real life I invariably have a million great conversations, intro people all over the place and get excited. I am by no means bad at building genuine relationships. I need a tool that helps me feel like that when I’m sat at my desk.

Most of all, I need a “Personal CRM” which solves an unsolved problem for me…

I need a tool that makes managing my network of personal relationships feel like the opposite of what salespeople use CRMs for.

I have a large extended network of people with whom I have potential mutually meaningful relationships. In sales parlance, they’re almost all “very warm”. But for the most part, none of us is trying to sell shit to each other. In common with a lot of other people in that network, I’m crap at maintaining the relationships that constitute it and even crappier at cultivating the second-order relationships that could expand it.

I need tooling to help me with that.

Since we’re discussing Personal CRMs, here’s a not-at-all-work-related take…

My housemate is amazing at maintaining her myriad personal relationships. Nothing to do with her work. She loves buying super-thoughtful presents for people she barely knows. She always remembers to invite randos from the pub to stuff they’d enjoy. She always remembers to message about important stuff in folks’ lives. And very quickly “barely knows” doesn’t apply. This is genuine relationship building done well.

Meanwhile I’m the opposite (I’d forget my own birthday if said housemate didn’t remind me). Sure, I could learn to behave like her, but it would never be natural and I’d never get off on it the same way she does.

It feels like every Personal CRM I’ve seen is designed for people like my housemate, or even worse… the I-Am-At-Work equivalent of her. ie. Folks who enjoy and are somewhat good at this stuff.

Perhaps obviously, it also feels like every Personal CRM I’ve seen designed by this kind of person.

And it feels like for this kind of person the core value prop of a “Personal CRM” has already been solved by CRMs in general. (Every good salesperson I know maintains a personal CRM of sorts… none use a specific Personal CRM tool.)

It feels like at best, a Personal CRM is slightly tweaked UX presented as a skin over an already-solved problem.

Meanwhile the problems I have are mostly unsolved by software. I signed up for Clay because I need help “managing my personal and professional relationships”. But what I need is not a tool like Clay. Because everything I said above.

And I’m convinced I’m not alone here. I know too many people like me who are excellent at building deep, meaningful relationships with a few people, but can’t bridge the gap to doing so more widely.

I’m equally convinced that none of us is likely to found a “Personal CRM” startup to address this.

But my goodness would we throw money at someone who did.

Does this chime with anyone else? 👆

PS. I’d love to see Clay’s churn data, segmented by a yes/no to “Do you enjoy buying gifts & organising birthday parties, and when you have amazing convos with people at conferences, do you message them afterwards?” Then label with potential high-value customer.

EDIT: Practical Example…

I bumped into Chase Warrington a bit ago. I’ve been a fan of Chase’s work for ages, and very much look up to him in a work context. He’s exactly the kind of person that should see me stuffing everything I know about him into my “Personal CRM” so I can extract the maximum value from our relationship.

But that’d be mental because neither of us are arseholes, we’ve got nothing to sell each other and fuck basing any relationship on the extraction of value.

I want a Personal CRM that’s like “Chase just interviewed someone you know on his podcast, you should listen to that one and then maybe WhatsApp them both?” or “Chase is in London right now and he’d definitely like this band you’re going to see tomorrow but FYI he’s here for a funeral”.

On Minimalist Packing

Fri, 24 Nov 2023 00:00:00 GMT

Tim Feriss’ 5 Bullet Friday today included this quote…

To roughly paraphrase my friend, who’s a fan of minimalist packing, “I would rather have one pair of footwear that does everything well enough than carry a bunch of specialist footwear that does things better than I need.” We both only brought carry-on luggage.

This is exactly how I think about my own kit when I travel, or head out hiking. But it’s also how I often think about the design of systems, processes and software tools. With the latter, “well enough” is often a high bar and so requires a bunch of specialist software. But wherever something we already have is good enough, stick with it until it isn’t.

Apple's Thunderbolt 3 Cables

Thu, 23 Nov 2023 00:00:00 GMT

A little while ago I bought a Caldigit Thunderbolt 4 Dock to connect my M2 Macbook Pro to my monitors and peripherals. After struggling to get a decent signal to my monitor I eventually shelled out £130 on this cable from Apple, which fixed things but seemed crazy expensive for a 2m cable.

After watching this video on the internals of Apple’s cable, I can see why it cost so much… it has more compute power than Apollo 11.

Building Healthy Remote Organizations - The Silent Enabler of Success

Thu, 10 Feb 2022 00:00:00 GMT

For a long time I’ve believed that organisational health is a hugely undervalued ingredient for success – especially for startups that are scaling fast. It’s the silent enabler of so much else. Before I give you my take on it, here’s a succinct definition of Organisational Health…

An organization’s ability to function effectively, to cope adequately, to change appropriately, and to grow from within.

For me it’s about intentionally creating a resilient, cohesive organisation that can operate with a sustained sense of calm.

Really healthy organisations tend to feel calm even when they’re ploughing through unknown waters at a thousand miles per hour. They’re able to operate on the edge of chaos without becoming chaotic.

Despite the obvious benefits of a healthy organisation, it’s often neglected – I think for a few reasons…

It seems kinda boring – we’re conditioned to believe the best solutions come from fancy, innovative approaches. Being healthy isn’t complex or innovative… but it does takes sustained effort. And there’s none of the adrenaline which usually comes with startup leadership.
It’s very hard to quantify results. The best measurements of organisational health are whatever we use to measure general success (growth, revenue etc) but this makes it very hard to measure the effect of work. As always, useful proxy metrics are hard to find.
It needs a holistic approach - it cuts across leadership, operations and people functions, as well as every other function in a business. Which makes it hard.
Founders are often unskilled in this domain – the skills needed to grow a healthy organisation often feel quite at odds with the other skills required to be a good founder. (Some only realise this when the wheels fall off but I’ve met a lot who realised from the start, felt horribly inadequate as leaders and stuck their heads in the sand.)

Remote and distributed companies need to be much healthier than office-based firms because co-location allows us to paper over an awful lot of cracks. And systemic health problems have a disproportionately large effect on remote teams, which quickly compounds with scale.

So what does a healthy organisation look like to me?

These kinds of things…

Happy, autonomous and empowered people (obviously).
A unified, coherent senior leadership team exhibiting all the traits & behaviours we’d expect of any other great team.
Common, well-understood shared norms, habits, behaviours & ways of working. (We could label this “culture”.)
Common, well-understood values and principles which facilitate aligned independent decision-making at all levels.
A clear, truthful and well-understood structure (org design, teams, career levels, salaries etc).
Excellent communication everywhere.
A culture that values clarity.
A culture of trust and psychological safety.
A culture that cares about how we work, and actively tries to make it better.
Systems, processes and tools that make it easy to “operationalise” repetitive work.
Managers who have the time, skill and motivation to lead and manage well.

None of these things happen by accident.

So when should you start thinking about organisational health?

Short answer: as soon as you reasonably can.

Small, young companies get disproportionally large gains from the effort, which compound over time. Without the right foundations this all gets exponentially harder as you scale (and as your collective habits and ways of working become entrenched). I’ve seen way too many companies ignore this stuff until they’ve raised a Series B and the wheels start falling off.

Having the foundations for a super healthy organisation allow you to scale quickly without as much pain, and help things stay calm as the organisation rapidly becomes more complex.

So how do we start getting healthier? 🌱

Firstly, we need to believe it’s at least as important as our other business aims. Being healthy is unlikely to be the number one goal but, as with human health, unless we make a strong commitment to it, it’ll always lose out to other more pressing stuff.

Secondly, we need at least one person who’s wholly focussed on keeping our organisation healthy. I’ve seen some amazing small startups where this is the fundamental job of the COO. More recently, I’ve seen this owned by a Head of Remote.

In larger firms I’ve seen teams called Workplace Design, Office of the COO, Remote Operations, People Operations, (plain old) Operations, and the like. The one thing these have in common is that they are 100% focussed on making the company itself as healthy as possible.

Ultimately, keeping an organisation healthy will always be a joint effort led by people like…

COO, VP Ops etc
CPO, VP People etc
Chief of Staff, Head of Remote etc
Leaders specific to the company’s core business (eg CTO for tech companies)

None of this happens by accident.

Guiding Principles 📜

Here are a few loose principles I’ve found useful for helping folks approach organisational health. (I could – and probably will – write a whole article on each of them.)

1️⃣ Have an internal focus

Most functions in a startup are led by external needs & drivers: Product, Engineering, Sales, Marketing, Strategy, etc… all should have their eyes set mostly on the outside world.

We need at least one function which has an internal focus, treats the company like a product, itself as a product team and its employees as users. And this function needs a good product manager.

Done well, this function is a huge force multiplier for all the others.

“We design how our company works as thoughtfully as our products.”

2️⃣ Beware organisational debt

Just like a software product accrues technical debt, a company accrues organisational debt. The effects are similar - it gets increasingly harder to get stuff done over time.

Used strategically, this kind of debt is useful because it lets us move faster, but the tweet below explains why we must be intentional about how we incur it. And how we pay it down.

The opposite of technical debt isn’t zero debt, it’s compounding gains: each new thing makes it easier and faster to build new things.
— Matt Wensing 🐙 (@mattwensing)
June 10, 2020

3️⃣ Human + System

These are the two fundamental components, and Internal Operations should focus on both:

Human - Relationships, culture, leadership, human growth, shared mindset, “vibes” etc.
System - Structure, process, policy, tooling, automation etc.

These need to be viewed and tackled together and the highest leverage stuff addresses both human & system concerns at the same time (eg. shared behaviours & habits).

4️⃣ Behaviours & habits over processes & tools

While processes and tools are important, the most effective way to improve an organisation’s health is by improving the habits and default behaviours of its people.

If you’ve ever tried to impose a new system or process without considering behavioural change, you’ve probably seen a lot of folks ignore it and revert to what they know. People always fall back on their habits and default behaviours. Especially in groups.

On the plus side, given the right habits, behaviours, principles, environment etc, people will likely create effective systems & tools on their own.

That said… used intentionally, processes and tools can be very powerful tools for affecting behaviour & habits. Especially in groups.

5️⃣ Strive for clarity

A culture of clarity reduces day-to-day uncertainty and tends plenty of efficiency savings (especially in distributed companies). But its greatest value comes from how it reduces the cognitive load on people.

At best, lack of clarity leads to increased cognitive load as folks struggle to make sense of things and make decisions themselves. At worst, it leads to a culture of uncertainty and stress because in the absence of facts people always assume the worst. In either case, it means people are spending a lot of time thinking and talking about unnecessary stuff.

Creating clarity in a complex and inherently unclear environment is one of the hardest things about leadership, so leaders often think about clarity in a very macro sense: is everyone clear on our mission? Or our Q3 goals?

Yet most of the uncertainty, inefficiency & stress I’ve seen comes from lack of clarity on tiny things:

I’ve found five different versions of this template and have two conflicting answers about which one to use here.
What’s this meeting about? I don’t really know what’s expected of me and what are these weird notes I’ve been sent all about?
Is it okay to expense my new headphones? How do I do that? Who do I even ask?
Who should I talk to on the marketing team about this thing? Misha told me Andy, but which Andy? He’s not on the org chart? Wait, is Marketing even the right team?

Creating clarity & consistency on stuff like this is often much harder than it seems – especially in large, fast-growing or globally distributed companies. But done right, it can have an insanely big effect on organisational health.

6️⃣ Practice simplicity

Simplicity matters because simple things are easy for people to fully understand and reason about. When designing systems we have to consider the usefulness and accuracy of the mental models folks form about them.

It’s much easier to augment folks’ existing correct mental models than to fix their incorrect ones.

A complex system that works is invariably found to have evolved from a simple system that worked. A complex system designed from scratch never works and cannot be patched up to make it work. You have to start over with a working simple system. — John Gall (1975, p.71)

Designing simple solutions for complicated problems is almost never simple itself, but wherever possible we should aggressively err on the side of simplicity.

7️⃣ Harness the power of principles

Principles are often more useful than rigid rules because when they’re fully understood they allow people to confidently make decisions without constant recourse to others. They also help people understand the why.

Even when you need rigid rules, clearly explaining the principles which underpin them increases transparency & shared understanding, and helps folks to adapt the rules intelligently.

For any principles to be useful they need to be well-thought-out, easy to understand and constantly reinforced by everyone. Otherwise, they’re just more words in a document somewhere.

8️⃣ Create frameworks (as well as tools)

Our inwards-facing function needs to build an environment & toolset that helps other functions do their best work. But also go one step further and create the environment & meta-tools that allow others to design their own.

We can’t design an entire company from the top. Nor can we design by general consensus on everything. Instead, we need to provide a framework of strong, consistent guide-rails (principles, tools, practices, structures etc) that everyone trusts.

This is the kernel of our “Operating System”. If everyone really understands this framework and buys into it, (with a little help) they’ll be able to create their own systems of work on top of it. And our kernel helps keep those systems compatible with each other.

Doing this is the only real way to create a truly agile organisation that can evolve as it scales.

Of course, keeping the kernel fit for purpose takes ongoing effort. As does guiding and nurturing the people and systems that use it.

These are just a few of my thoughts on what it takes to keep an organisation healthy, but hopefully they’ve sparked a few thoughts for you.

If you take one thing away from this, let it be the idea that creating a great company only happens when we set out to do so with intentionally, and when we get it right the sense of calm it can provide is a silent enabler of so much else.

And with many of us moving towards remote, globally distributed organisations, all this matters much more.

Website Redesign Part XVI - A Header and Footer for Articles

Sat, 29 Aug 2020 00:00:00 GMT

I pretty much finished designing the article pages back in Part XI, and after deciding on a typeface and some general design rules for the rest of the site it’s time to finish it off by adding a header and footer to the article pages.

The Article Header

Here are a few ideas I played around with for the header.

Although I quite like some of these, it feels like I’m overcomplicating things a bit. It might be better to go with something really simple for now – just a link back to the homepage in the top left corner.

The Article Footer

The footer needs to include some links, my name and a copyright notice. After a little playing about I ended up with something like this…

While I like this, it needs more thought to make in work well on small screens, and I’ll be a challenge to implement without overcomplicating the code because of how I’ve set up the article CSS. So much like the header, I think it makes more sense to keep things simple and just provide a link to the articles index, rather than listing related/recent articles. I expect I’ll revisit this in the future.

The Code

Here’s what I ended up with for the CSS…

There’s definitely some scope to simplify this, and to add some more “features” to the footer, but this feels like it’s enough to call the articles done and move on to the rest of the site.

Auto Generating Jekyll Posts that Redirect to Medium

Thu, 13 Aug 2020 00:00:00 GMT

I’m making quite heavy use of the jekyll-redirect-from plugin. This allows me to create a normal apge or post file with a special frontmatter item and have the page 301 redirect to the specified URL. I’m already using this to forward URLs like <danny.is/using> to Notion, but I also want to use it for blog posts that I’ve written elsewhere.

I’ve recently written an article for Delocate, and I can quickly add that to this site by creating a file in _posts called 2020-07-31-not-all-comms-needs-a-purpose.md with the following frontmatter.

title: Not all communication needs a definite purpose
redirectURL: 'https://www.delocate.co/blog/not-all-communication-needs-a-definite-purpose'
platform: delocate

The post will behave totally normally as far as Jekyll is concerned, but instead of rendering the empty body, it will 301 redirect to the specified URL.

Although I’d like to move all my medium posts over to this site in the end, that’s a big job. So for now I want to create a file like this for every medium post I’ve written. Creating 40 of these files by hand isn’t very appealing, so I whipped up a quick ruby script to do it for me.

I started out trying to parse medium’s RSS feed but it doesn’t include all the posts, so I’m using medium’s private API instead. The script hits the medium API, extracts the data I need into an array and then loops over it creating a correctly formatted file for each post. It lives in scripts so I can run it whenever I want with ruby ./scriipts/generate_medium_forwards.rb to pull any new medium articles in.(If the whole Medium class seems like overkill, it’s because I based this on some old code that was more reusable.) Here’s the code…

This worked a treat and I only had one hiccup: I spend far too long trying to work out why many of the articles had identical published_at dates before I eventually realised that I needed the firstPublishedAt value rather than the publishedAt one – the latter gets updated every time the post is edited and re-published.

Website Redesign Part XV - A typographic system for the rest of this site

Wed, 12 Aug 2020 00:00:00 GMT

When I started this redesign I already had a fairly clear idea of the aesthetic I wanted, based on the existing design. These two pages show that off quite well.

I’m not sure where I got this aesthetic from, but it’s clearly draws on the work of Jan Tschichold. Jan was a typographer and designer who’s famous for a whole load of stuff (go read his Wikipedia page). I particularly like this style, which is closely associated with him.

I spent quite a while trying to establish some sort of typographic hierarchy for the rest of the site based partly on some thoughts from my last article. Eventually I realised that this is really hard when I’m going for a deliberately “whacky” aesthetic. The kind of style I’m after doesn’t lend itself well to rigid hierarchy. And the fact I’m likely to size some type with viewport units makes this approach even less sensible.

So I went back to square one and decided on a few guidelines and constraints in place of a hierarchy:

Use type and layout over imagery and effects.
The site should always look good in greyscale. While I can use colour, it should never be the main design element.
One typeface only, but I can use it in any weight or size that feels right.
Always consider visual hierarchy, and be consistent across pages where possible.
A grid of 20px, but with permission to ignore wherever it makes sense.

I also settled on a modular component-based approach where possible, and identified a few core components that will be useful in all sorts of contexts going forward. They’re deliberately simple and extensible in their design.

Deciding on a typeface

I spent way too long choosing a typeface for articles, so I’m keeping the simple. I decided to stick with Futura PT. It works perfectly for the look I’m going for and looks good in all caps, which I’ll probably be using a lot. This choice has some downsides though: the biggest being that it’s not available for free so I’d have to keep my Adobe Fonts license and accept the dependancy on Adobe’s service.

I’d pretty much decided to suck that up when I discovered Jost*. It’s a pretty close match for Futura, is open source and available as a variable font. It’s slightly larger than Futura but after a bit of trial and error I think it’s a good trade-off.

Text Styles & Components

With that decision made, I threw together a few basic components and text styles in Figma. there’s no real system for this – I started with the components, extracted text styles from them and then did my best to consolidate them a bit.

Having these styles and components is a great starting point for some experimentation. I’m gonna hold off coding them up until I’ve done a few iterations in Figma – I’m sure they’ll change a little bit as I play with them. The only technical work I’ve done is to build Jost’s variable version from source and bring it into my site.

Website Redesign Part XIII - Taking Stock of Content

Sun, 12 Jul 2020 00:00:00 GMT

I’m now pretty happy with how the essays on here look, so it’s time to turn my attention to the rest of the site. Although I have an idea of the aesthetic I’m after, every time I’ve opened Figma to have a play I’ve found myself staring at a blank page wrought with indecision – the dreaded writers block. Or rather, designers block.

I didn’t feel this at all when designing the essay pages because I had a clear idea of what I was trying to do. I already had content to work with and my only job was to make it as readable and beautiful as possible while keeping things simple. Clear goal. Clear starting point.

But with the rest of the site it’s not so clear. In Part IV I identified a list of pages I need to design, and I did some high-level pondering on goals and user needs in Part II. But beyond that, I’ve basically got no constrains and no starting point. And it’s paralysing me.

Back when I made websites for a living, the first thing I’d look at after user goals was a content audit. If the client didn’t have any existing content to audit, we’d focus on the content they thought they were going to have. So that’s just what I’m going to do now.

A Content audit for this site

I can think of a hundred other things I might want to put here someday, but that’s all the stuff I’m thinking about putting here right now.

Organising the post-its

Let’s take a stab at organising these post-its according to a few different taxonomies. This might seem like overkill for such a small set of content but this exercise often throws up unexpected and creative ideas for organising and grouping. Even if we don’t use them, they can help seed concepts we use elsewhere.

By type

Let’s start with the most obvious, grouping by content type – the first word of each post-it is a good starting point. We could also group by whether the content is mostly writing (yellow) or mostly something else (orange).

By author

I’ve been thinking a lot about the creation and consumption of information lately, so it’s not surprising this springs to mind as a possible grouping: did I create it, or did I consume it? Some stuff is hard to categorise here – a book recommendation is clearly consumption, but what if I add my own review?

By professional or personal

Since this is a personal site, we could consider grouping the content by whether or not it’s related to my work.

It’s pretty obvious that most of the content types here are focussed on my work. Looking at the both pile, the vast majority of content represented by each post-it is work-oriented. (While I do read some non-work articles via pocket, they’re in the minority. Likewise for articles on this site. Etc.)

So this grouping doesn’t feel very useful. Moreover, it doesn’t feel authentic – I’ve always mixed work and play and I’m not really sure where the line between them is. That solitary orange sticky note makes me question whether my music videos belong on this site, though.

By Importance

Some of these post-its are more important to me than others. My writing – whether on this site or elsewhere – is pretty core. As are links to my series’ on Notion. But the books I’m reading are much less important – I could live without having them on this site at all.

Perhaps the design should emphasise the important and de-emphasise the less-important? Or perhaps the less-important shouldn’t live here at all? My view of what’s important is almost certain to change over time, so if I do emphasise some content based on this it should be easy to change.

By Permanence

One of the main reasons I’m moving my writing to my own blog is permanence. I don’t like the fact that Medium controls my content and URLs. I want a more permanent place to put my words. Somewhere they can live forever – etched in stone, as it were.

The same is not true for other types of content. My tweets are ephemeral, for example: I wouldn’t be overly bothered if they all disappeared one day. Perhaps we could try grouping along these lines – stuff that I care about keeping vs stuff that I don’t.

But what about the actual content?

If you’ve ever done any information architecture you’re probably shouting at your screen right now…

BUT YOU HAVEN’T CONSIDERED ANY ACTUAL CONTENT! It doesn’t make sense to group based solely on medium.

You’ve got a point.

It’s kind of ridiculous to go through this exercise based only on the medium in which the content exists. We should also be considering things like subject area, target audience and purpose. For large sets of information these things will probably suggest much more useful taxonomies than content type.

I’ve ignored these so far because I don’t want to base the structure or conceptual design of this site on the topics I’m currently engaging with. I know too well how quickly they can change, and it’s important this site can adapt to those changes without much effort on my part.

Having said that, I’d be foolish not to at least consider the kind of content I’m producing right now. For the past few years, my interests – and especially the stuff I write about –have fallen in one of four loose categories.

I’ve started to loosely group these into two super-categories: Human and Systems. The first includes everything where an actual human is the focus – think coaching, mentoring, nurturing etc. The second is focussed on the environment in which humans operate and how it can be engineered to provide the most useful support. I’ve been doing a lot of gardening during lockdown, so if you’ll excuse the metaphor…

Caring for a garden requires system design and engineering. Plants need the right soil, pots and sunlight. Some need the support of a rigid framework like a trellis. Growing from seed often means adherence to a thoroughly-researched process of feeding and repotting. But on its own, this stuff can’t possibly create a beautiful, thriving garden. Plants need to be nurtured and guided, and they won’t always do what we expect. As gardeners, we must observe individual plants and do what’s best for them, using our intuition and experience to guide us.

A creeper might grow without a trellis, but it will be in a random direction and will have to work much harder to get up the wall. But a trellis is useless without daily watering and occasionally guidance. And sometimes a creeper will ignore the trellis and decide to weave beautifully around a fence instead. It’s up to us to notice where it’s heading and either correct or encourage it. And perhaps remove the trellis, if it’s not proving useful.

Like creepers, people need trellis’. They’re the systems, habits, processes and frameworks that support us and make our lives easier.

We also need nurturing and the freedom to explore our own path. If we have good gardeners looking after us, we can rely on them to guide and prune as needed, and to move or replace the trellis when it isn’t helping.

The more I reflect, the more sense these two categories make to me. Both Human and Systems work need to be in balance, and my interests can be sorted fairly well into those two buckets. (It’s interesting that the least happy bits of my career have occurred when I’ve been too focussed on one or the other)

I’ll explore this idea further outside the context of this redesign, but it provides a reasonable starting point for a top-level grouping of my content.

How is all this useful?

What can we take from all this, and does any of it help with my designers block? This process has certainly sparked a few interesting thoughts which I’ll definitely come back to in the future. It’s also sparked a few that are useful now.

Grouping by type provides a good indication of the components I should think about (Link, Video, Book, Page, Article, Other), but is not useful as a way of actually organising content.

Grouping by author raises the possibility of subtly differentiating content I’ve created from content I’ve consumed/curated. I’m not sure how useful this distinction will be for readers, but it still appeals to me as something to consider.

Grouping by professional/personal isn’t really useful, though perhaps my music doesn’t belong on this site and I should just link to youtube.

Grouping by importance raises the need for flexibility. I need way of focusing attention on stuff that’s important to me right now, knowing it might change over time. This might be as simple as moving stuff that’s currently important to the top of some list, but this has design implications. It should be easy for me to promote/highlight different types of content as my needs change.

Grouping by permanence doesn’t feel very useful at all.

Grouping by Human/System, and by the four categories of content feels like a good starting point for some labelling system which I should explore further.

Keeping it simple

Simplicity is a the core value of this redesign and working through this process has helped me reach a few decisions about how to simplify things.

I’ve no need for a coaching page right now. I can add this in the future.
I still want a hire me page but it makes much more sense for this to live in notion. I’ll forward https://danny.is/lookingforwork and https://danny.is/hireme to a public Notion page and be done with it.
I won’t show any actual videos on my site. Instead, I’ll present any video series’ as links to notion pages or YouTube playlists. I already have these set up.
I won’t have a page for my music. I’ll just forward https://danny.is/singing to my dormant youtube channel. I will show this link on the homepage, though – singing is a big part of who I am.
I won’t worry about notes for the moment¹. They’re an important part of how I’d like to share content but aren’t a priority and Notion might well be the best place for them.
I don’t care about books at all right now. If I really want to write a book review I can just write an article.
Core design concepts should be expandable to accommodate the unknown. For example, these would be bad ideas:
- Deciding I have three main types of content and basing my entire design concept on “threes”.
- Having all my videos on youtube and Loom, and using their brand colours as core design elements.

Wrapping up

I started this article as a way to get over writer’s block, hoping that a content audit would help provide a few constraints and possible design directions. It’s been an interesting little exercise and has definitely helped unblock me, but when I think about it all I’ve really done is intentionally focus my attention the same problem I had in the first place: what should I have on this site and how should I organise it?. So while this “content audit” was interesting, its real value came from forcing me to consider this problem in a structured, systematic way.

If you’re wondering what I mean by notes, I used to use tumblr for this sort of thing. ↩

Website Redesign Part XIV - Stepping Into Figma

Sun, 12 Jul 2020 00:00:00 GMT

Figma is one of my new favourite tools. I’ve been an avid fan of Sketch since I first picked it up in 2011. Compared to the other tools available at the time, it was a breath of fresh air. I still remember how excited I felt after I first used it for some actual work.

The first time I used Figma I had a similar feeling. Everything was just easy. Coming from Sketch, Figma felt comfortable and a lot of the keyboard shortcuts are the same so no need to reconfigure my finger-memory. Figma has some major advantages over Sketch. It’s web-based so it runs on any machine with a browser and my files live in the cloud by default. Anything I can do to simplify my laptop’s setup is a win for me. It also has great multiplayer – working collaboratively is an absolute joy. And it feels simpler than Sketch. The interface feels more intuitive and the way it handles components feels way more natural. So I’m now using Figma for pretty much all my design work.

Until now, I’ve been designing this site in the browser and haven’t felt the need for a design tool. But now I’m getting to the rest of the site, I know I’ll want to experiment with layout and colour faster than CSS allows. I also want to explore Figma’s component and shared styles features and this feels like a good excuse.

Text Styles

We can recreate the styles for these essays pretty easily. If we assume 16px as our base font size, it’s just a matter of doing some maths based on the em values in our CSS to get the size and line-height of all our text styles. Figma also lets us control some of the more advanced font features we’ve been using in our CSS.

With very little work, we can create a styleguide and create corresponding text styles. Here’s what I ended up with.

Colour Styles

While I haven’t given much thought to colour there are a few colours that I’m using in the CSS, so it makes sense to create some named colour styles and a palette in Figma too.

Grids

Since the line-height for my essays is 1.5, the baseline grid is 24. I use this measurement quite a lot in the CSS already, both for horizontal and vertical spacing. Figma allows us to create grid styles which we can apply to frames. Let’s create a simple grid style for 24px, and use it to position some content on the grid.

We can also create a grid that represents one line-height’s worth of padding around a frame, like this.

The trick is to create two grids, one Rows and one Columns, both with the same settings:

Count: 1
Type: Stretch
Margin: 24 (your desired padding)
Gutter: 0

Then we can combine both grids by creating a Grid Style that includes them both. And voila, we have a grid that we can apply to any frame to give us the correct guides for padding.

Components

Before we can call this minimalist design system done, we need to account for a couple of components that we can’t create using text styles alone: code blocks, blockquotes, lists and horizontal rules. We’ll create these as components, using the text and colour styles we’ve already defined. By using constraints we can ensure the content adapts properly as component instances are resized. Here’s what I ended up with.

Summary

None of this is especially useful right now, but it’s provided a starting point from which to design the rest of the site and taught me a few things I didn’t know about Figma.

Website Redesign Part XII - Responsive Images

Wed, 01 Jul 2020 00:00:00 GMT

The last time I built a content-heavy website, responsive images weren’t really a thing. In fact they were a definite problem for most developers. We could control the visual size of an image with percentage widths and media queries, but we had no easy way of controlling the actual image used by the browser. The easiest thing to do was just supply a very big high-res image that would look good on wide viewports and accept that smaller viewport devices would end up downloading a file with more detail than they could use.

The last time I gave any real attention to this problem I was working on a site with a lot of high-res background images. I dealt with it in three ways. Firstly, I used a jpeg that was too big for even the largest viewport, but with JPEG compression turned all the way up. This was then scaled down with CSS. This actually reduced the file size, and generally looked pretty good – even on new-fangled retina screens¹.

Secondly, I spent ages blurring parts of the image in photoshop. The idea was that the fewer individual colours there were in the JPEG, the smaller the filesize. Take a look at this photo:

There are probably hundreds of different shades of blue and grey in the sky, each one taking up bytes in the JPEG. By blurring the sky as much as possible, we end up with far fewer shades of blue and so reduce the filesize. Doing this was a pain in the arse.

All the other stuff involved swapping out images with javascript.

Thankfully that was ages ago, and we now have some much better ways of handling responsive images. Both secret and the <picture> element were being talked about when I stopped making websites for a living, but both are now well-supported by modern browsers.

SRCSET

The srcset attribute allows us to specify different image files to use at different resolutions and viewport widths. It looks like this.

<img src="small.png" alt="..." srcset="medium.png 1000w large.png 2000w" />

This uses the small version by default, but on larger screens the browser will download and use either the medium or large version of the image. All we have to do is make the three versions and bung them in our /images folder.

The general rule here is to use an image of the same dimensions as the original and just scale it down to make the smaller versions. As Chris Coiyer says:

Most responsive images uses will be: “I have multiple versions of this graphic. Here they are, use the right one.”

The picture element

The picture element is far more powerful, but also more complex. It allows us to do a bit more at direction as our image size changes – we can use images of different dimensions and control how they are displayed using media query-like rules. A quick google will turn up umpteen articles on how to do this.

Images on this website

Right now, most images on this site are included via standard markdown image tags, and the generated HTML is pretty simple:

<img src="/uploads/an-image.png" alt="An image" />

By default, these images would display at their natural size, so we’re using some CSS to constrain them to 100% of their container.

img {
  display: block;
  max-width: 100%;
}

Inside essays, this means that smallish images display at their natural size and will not be stretched (we’re using max-width not width), but very large images will be scaled down to fit in the essay container.

The problem with this is that I often include quite large high-res images and set them to full-bleed (more on that later). This is fine for large viewports, but smaller devices will be forced to download the massive high-res file.

The obvious solution is to generate smaller versions of these high-res images and then use srcset to let the browser decide which one to show. Except that this is a blog. And if I have to create multiple versions and write a long chunk of HTML every time I want to include an image in my markdown I’ll just stop writing altogether. Clearly, we need a way to automate this.

While we’re at it, there are a few other things we should consider. Firstly, it’s a good idea to explicitly declare the dimensions of an image in the HTML using the height and width attributes. Assuming we don’t override it with CSS, this prevents reflow by telling the browser how much room the image will take up so it can draw the right sized box before the image has downloaded. So while we’re automating image things we should probably add hight and width to image elements.

What’s more, modern browsers will soon be able to infer the aspect ratio of an image based on these attributes, and use that to draw a correctly-sized content box even if we’ve changed the width with CSS. Cool.

Secondly, HTML now supports native lazy loading via the loading attribute. This is obviously good for performance and is as easy as adding loading="lazy" to our image tags. Addy Osmani has a much more detailed explanation.

This ten-minute video from Jen Simmons foes a great job of explaining how all of this works.

How do we automate this stuff?

Good question. Back when I started this redesign, I made the decision to keep the tech super simple. Here are the principles I defined:

As few dependencies as possible (both build-time and run-time dependancies).
Use defaults wherever possible.
Write as little code as possible.
Do not over-abstract. Avoid fallbacks, polyfills and hacks.
Bake accessibility in.

I really don’t want to add unnecessary complexity to this site. But it feels like this is important enough to add a just little more complexity. If there’s a jekyll plugin that can read my markdown image tags, generate smaller versions of my images and insert appropriate srcset attributes, I’ll take it. Bonus points if it can add width, height and loading attributes too.

My initial search actually led me to some awesome plugins for Eleventy. This one does some cool lazy-loading with javascript and data URLs, this one creates picture elements, this one does just what I want for cloud-hosted images and this one basically does what I want but without the bonus points.

Reading though the source code of these was super interesting, and had nudged me to look further at Eleventy (there are some strong arguments for moving this site to it). But since we’re on Jekyll here, none of these are much use. What we need is the Jekyll Responsive Image plugin.

This looks like it solves half the problem. It lets us specify our own template for the generated image HTML which means we can add width, height and lazy loading ourselves. The only downside is that we have to use a liquid tag rather than standard markdown to insert images. No thanks.

And then jekyll hooks came to the rescue with this tutorial from Ivo Valchev. Let’s walk through the process…

Install the stuff

The plugin uses Rmagick which is a wrapper around imagemagick which is – and has always been – a nightmare. So first step is to update or install it and then try installing the gem manually.

brew install imagemagick
gem install jekyll-responsive-image

Now we can add it to our Gemfile and Jekyll config as per the README. There are a lot of config options available but I started with these: a path to the template, the sizes to generate and an instruction to only save the generated files in the build folder.

responsive_image:
  template: _includes/responsive-image.html
  sizes:
    - width: 480
    - width: 800
    - width: 1400
  save_to_source: false

How we need to create our template. I stole most of this straignt from the docs, but I’ve added lazy loading and width/height attributes.

{% raw %} {% capture srcset %} {% for i in resized %} /{{ i.path }} {{ i.width }}w, {% endfor %} {%
endcapture %}
<img
  src="/{{ path }}"
  alt="{{ alt }}"
  loading="lazy"
  srcset="{{ srcset | strip_newlines }}"
  width="{{ original.width }}"
  height="{{ original.height }}"
/>
{% endraw %}

So far so good. We can now insert responsive images with

{% raw %} {% responsive_image path: image.jpg alt: "My Image" %} {% endraw %}

To get this working with standard markdown, we need to register a hook that replaces markdown image syntax with this new tag at build-time. We can create _plugins/img_tag_transform.rb and add the following.

Jekyll::Hooks.register :posts, :pre_render do |post, _payload|
  docExt = post.extname.tr('.', '')
  post.content = post.content.gsub(/!\[(.*)\]\(([^\)]+)\)(?:{:([^}]+)})*/, '{% raw %}{% responsive_image path: \2 \3 %}{% endraw %}')
  post.content = post.content.gsub 'path: /', 'path: '
end

It’s a bit hacky, but it works.

Is it worth it?

My biggest concern with this approach is the added complexity. Not only have I added Imagemagick as a dependancy, I’ve also added a new jekyll plugin and a slightly hacky custom plugin.

For now, this feels like an acceptable trade-off, but if I find myself adding more similar stuff in the future I’ll have to revisit this and reconsider the value/complexity ratio.

Full-bleed Images

While we’re on the subject of images, I’ve also added a few utility classes to make my images a little more interesting. Normal images are constrained to the width of the element they appear in, but sometimes I want full-bleed images that extend out to the edges of the viewport, like this:

We can do this with a utility class and some calc() magic.

.essay {
  .full-bleed {
    width: 100vw;
    margin-left: calc(50% - 50vw);

    // For images that are not wide enough to fill the gap
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
}

These styles are applied to the container rather than the image itself so that images smaller than the container are never scaled up. We can apply this style in markdown like this

{% raw %}
{:.full-bleed}
![Image](/uploads/2020-07-02-hot-air-baloon.jpg)
{% endraw %}

Which will produce the following HTML

<p class="full-bleed">
  <img src="/uploads/images.jpg" alt="Image" ... />
</p>

As well as full bleed, I’ve also added classes for left and right bleed

.essay {
  .left-bleed {
    margin-left: calc(50% - 50vw);
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
  }

  .right-bleed {
    margin-right: calc(50% - 50vw);
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }
}

Summing up

Although it’s ben years since I’ve built a proper website like this, I’ve kept myself fairly up-to-speed with developments in CSS. Digging into responsive images has been a nice reminder that there is a whole raft of standards that I’ve ignored and know very little about. I’m now itching to explore some of the other stuff that I remember being discussed and has since matured. I expect I’ll have a play with with SVG (a lot has changed), web components and browser APIs for audio, motion and the like sometime.

That said, it wasn’t really my intention to go this deep into any performance-related stuff at this stage of the redesign, so while I’m tempted to follow up on this with a load more optimisation I’m gong to force myself back into design mode for a little while and focus on getting the non-blog bits of the site looking nice. Until next time.

There was an excellent article on this at the time, but I can’t seem to find it. ↩

Website Redesign Part XI - Code Blocks and Section Rules

Sun, 28 Jun 2020 00:00:00 GMT

I spent a long time [deciding on a typeface]({% post_url 2020-06-20-website-redesign-v %}) for these essays and I don’t want to spend nearly as long on code snippets. Although this series involves a lot of code snippets, I generally write about code a lot less than I used to, so it doesn’t make sense to spend ages on this. I use the wonderful Operator Mono in my text editor and I briefly considered paying for a web license so I could use it here too. But while I love it, it’s quite unusual and is definitely not suited to everyone’s taste. Both the typeface itself and the act of buying a web license are the opposite of simple, one of my stated values for this site. So instead, I’ll stick with the same requirements I used before: open source, ideally with variable and static versions, with nice ligatures and a range of weights.

The first thing that came to mind was Fira Code, an extension of Mozilla’s Fira Mono which was designed specifically for legibility. Fira Code adds a bunch of ligatures for character combinations commonly used in programming, as well as making a few adjustments to make code more readable.

The CSS

Although Fira Code is available via google Fonts it doesn’t support all the opentype features I want, so I ended up cloning the repo and moving TFF, WOFF and WOFF2 versions into the the assets folder like I did for Literata. They’re included in webfonts.scss and have a custom property set just like the other fonts too.

:root {
  --font-code: 'Fira Code', 'Inconsolata', monospace;
  @supports (font-variation-settings: normal) {
    --font-code: 'Fira Code Variable', 'Inconsolata', monospace;
  }
}

Since we want to use Fira code everywhere there’s code, we can set this as the default font for all code elements, whether inside essays or not. We can also use some of the advanced stylistic settings to turn on a sans-serif lowercase ‘r’ and put gaps in double equals signs. I think this makes code a little more readable.

code {
  font-family: var(--font-code);
  font-feature-settings: 'ss01', 'ss08';
  // sso1 = sans-serif lowercase "r"
  // ss08 = Gaps in double/tripple equals
  // See https://github.com/tonsky/FiraCode/wiki/How-to-enable-stylistic-sets
}

Fira code has a bunch of other features like this

Styling inline code

We’ll set the font size to the same as the samm-caps we’re using for abbreviations, which is about equal to the x-height of the body copy. Adding a border, background and a little padding to the left and right is the simplest thing I can think of to differentiate inline code snippets. We’ve also prevented breaking spaces with white-space: pre, though I might need to revisit this if I end up writing some very long inline code snippets.

.essay code {
  font-size: 0.85em;
  padding: 0 0.5ch;
  background-color: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 1px;
  white-space: pre;
}

Styling code blocks

We already set up some basic styles for <pre> elements, so all we need to do is remove the styles we just set for any <code> elements that appear within them.

pre {
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: calc((1em * var(--base-lh)) - 2px);
  background: rgba(0, 0, 0, 0.05);
  overflow-x: scroll;

  code {
    padding: 0;
    background-color: transparent;
    border: none;
  }
}

The final thing to do is add syntax highlighting. Since we’re using Jekyll, any fenced code blocks that have a language defined on them will use Rouge to apply syntax-highlighing classes in the same way Pygments does. This means we can take an existing theme stylesheet and include it in our bundle. I used this one and tweaked a few of the colours slightly. I’ll come back to this once I have a colour palette for the site.

Horizontal Rules

I’ve always liked the section mark (§) and thought it might be nice to superimpose this on horizontal rules. The code for this is pretty simple – we’ll add a psuedo-element containing the mark and use flexbox to position the hr and psuedo element on top of each other. A bit of padding and a background on the psuedo element creates a gap in the line, and a little nudging with translateY vertically centres the mark.

.essay hr {
  display: flex;
  align-items: center;
  justify-content: center;

  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);

  &:before {
    content: '§';
    transform: translateY(-0.15em);
    background: var(--color-white);
    padding: 0 0.5em;
  }
}

It would also be nice to add a little more margin than usual either side of the rule. Since we’re using only top-margin to maintain vertical rhythm, we need to use the sibling selector to add margin to the element immediatly following the <hr> as well as the rule itself.

.essay hr,
.essay hr + * {
  margin-top: calc(2em * var(--base-lh));
}

Website Redesign Part IX - Lists

Thu, 25 Jun 2020 00:00:00 GMT

Lists are incredibly useful for certain sorts of article. I tend to make quite heavy use of lists in some of my articles, so it’s important that I give some thought to how they’re styled. Since I’m going for a “bookish” vibe, I’d rather keep the vertical rhythm the same as for all the other text on the page, so I’ll be sticking with the standard top-margin of 1 × line height and leaving the margin and line height of the list items as they are. With that decision made, we only need to worry about styling the list markers: bullets, numbers and checkboxes.

After a bit of playing around, I think it’s a bit too jarring to hand the markers in the margin and flush-align the text. If this was for print it might look less wierd, but we’re so used to seing indented lists on the web that it just feels wrong for this medium. So we’ll aim to flish-align the markers and set 1em of left-padding on all list items. As long as we keep the markers set to outside we’ll end up with the start of out text neatly aligned at 1em from the left margin.

.essay li,
.essay li {
  padding-left: 1em;
}

Bulleted Lists

After a bit of playing around, I’ve decided to keep the bullets super sumple. We’ll just use a mid-sized bullet and ad a little left padding to pull them inline with the margin.

.essay ul {
  padding-left: 0.4em;
  list-style-type: '•';
}

Annoyingly, iOS Safari and Chrome don’t yet support string values for list-style-type, but since they both support @supports, we can add a fallback.

@supports (not (list-style-type: '•')) {
  &:not(.task-list) {
    // Begin fix for browsers that don't support list-style-type: <string>
    list-style-type: none;
    padding-left: 0.9em;
    li {
      padding-left: 0.5em;
      position: relative;
      &:before {
        content: '•';
        position: absolute;
        left: -1em;
      }
    }
    // End fix
  }
}

Numbered Lists

We’re decreasing both the size and optical size for numbers to the same as we did for for abbr elements, and falling back to the Literata Caption if variable fonts aren’t supported. We’re also making them slightly bolder than abbreviation since, as markers, it’s important they stand out a little more. We’re then adding some left padding to bring the first character inline with the left margin: single digit numbers will be flush with the margin while extra digits will extend outwards to the left.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.
Nunc dignissim risus id metus.
Cras ornare tristique elit.
Vivamus vestibulum ntulla nec ante.
Praesent placerat risus quis eros.
Fusce pellentesque suscipit nibh.
Integer vitae libero ac risus egestas placerat.
Vestibulum commodo felis quis tortor.
Ut aliquam sollicitudin leo.
Cras iaculis ultricies nulla.
Donec quis dui at dolor tempor interdum.

.essay ol {
  padding-left: 0.8em;

  ::marker {
    font-size: 0.85em;
    font-family: 'Literata Caption', Georgia, 'Times New Roman', serif;
    font-weight: 600;

    @supports (font-variation-settings: normal) {
      font-family: 'Literata Variable', Georgia, 'Times New Roman', serif;
      font-variation-settings: 'opsz' 10;
      font-weight: 610;
    }
  }
}

Checklists

Jekyll allows us to use Github Flavoured Markdown task lists, and I occasionally make use of this in my articles. They work like this

- [ ] Item 1
- [x] Item 2
- [ ] Item 3

This will produce the following output and HTML

Item 1
Item 2
Item 3

<ul class="task-list">
  <li class="task-list-item">
    <input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Item 1
  </li>
  <li class="task-list-item">
    <input
      type="checkbox"
      class="task-list-item-checkbox"
      disabled="disabled"
      checked="checked"
    />Callout inline styles
  </li>
  <li class="task-list-item">
    <input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Item 2
  </li>
  <li class="task-list-item">
    <input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Item 3
  </li>
</ul>

We can use these generated classes to style the checkboxes. We’ll remove the default list styles and padding and set up each li as a flex container. Each have two flex items – the checkbox and the text. This ensures that the text doesn’t wrap dowin under the checkbox for multi-line items.

.task-list {
  list-style-type: none;
  padding-left: 0;
}

.task-list-item {
  position: relative;
  display: flex;
  align-content: center;
  padding-left: 0;
}

Next, we’ll remove the default appearance, set a hight and width and nudge the box with some margin so it’s about the same height as lowercase characters and is aligned a tiny bit above the baseline. We’ll also add a border of our own.

.task-list-item-checkbox {
  margin: 0.5em 1em 0 0;
  height: 0.7em;
  width: 0.7em;
  min-width: 0.7em; /* Prevent flex-shrinking */

  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  outline: none;

  border: 1px solid rgba(0, 0, 0, 0.3);
}

Finally, we’ll add a tick (✓) to any that are checked, style it and position it properly within the box.

.task-list-item-checkbox:checked:before {
  content: '\2713';
  position: absolute;
  top: 0.645em;
  font-size: 0.6em;
  font-weight: 600;
}

To make this work properly on iOS, we also need to explicitly set the background and border-radius, and bump the opacity of disabled checkboxes up to 1.

.task-list-item-checkbox {
  // ...
  border-radius: 0px;
  background: transparent;
  //...
}

.task-list-item-checkbox[disabled] {
  opacity: 1;
}

And that just about wraps up styling for lists. I’m sure I’ll revisit some of this when I start to add colour to the site, but for now this is a definite improvement over the defaults.

Website Redesign Part X - Links

Thu, 25 Jun 2020 00:00:00 GMT

Hyperlinks are what makes the web special. They allow us move seamlessley from idea to idea at our own pace. While we tend to read books sequentially, websites are more like choose your own adventure books – hyperlinks let us choose how we experience them. And it’s that way by by default. So links should be pretty prominent on this site. But at the same time, an article peppered with bright blue links is not easy on the eye. Where links are incidental to the text (as many are), they interrupt the flow of reading. I’ve spent a fair bit of time thinking about how I want links to work and I basically have two requirements.

They must get out of the way when reading and not be a distraction.
They should obviously be links for users who are looking for them. This includes differentiating between unvisited and visited links.

Let’s start off by removing styles from hyperlinks that have a class. This gives us a good starting point for styling UI links and also deals niceley with the footnote links that jekyll creates.

a[class] {
  text-decoration: inherit;
  color: inherit;
}

The default clours in most browsers are blue for unvisited links and purple for visited links, so I like the idea of sticking with that since it’s alrreasy well-understood by most users. Rather than colouring the whole word, we might be able to get away with colouring just the underline. This makes the links far less intrusive. we can also pick much less saturated colours than the default.

The hover styles can afford to be a lot bolder and brighter. Something like…

We can achieve this by setting links to inherit their text colour from their parent and styling the underline with text-decoration-color. We’ll also add a subtle transition on hover and force the underline width to 1px on browser that support it.

--color-link-underline: rgba(111, 131, 222, 0.5);
--color-visited-link-underline: rgba(188, 127, 219, 0.5);
--color-active-link-underline: rgb(255, 30, 28);

a:not([class]) {
  color: inherit;
  text-decoration-color: var(--color-link-underline);
  text-decoration-thickness: 1px;
  transition: all 0.25s;

  &:visited {
    text-decoration-color: var(--color-visited-link-underline);
  }

  &:hover,
  &:active {
    text-decoration-color: var(--color-active-link-underline);
    color: var(--color-active-link-text);
  }
}

This feels okay on devices with a pointer. Although the underlines are subtle, if the user isn’t sure it’s a link, they can mouse over and the transation will make it pretty clear. But on touch devices this is impossible, so it feels sensible to make the links a little more ovbious somehow. On mobile devces the text also has a much smaller measure and therefore more multi-line links, whihc looks kinda ugly.

We can alter our code to cremove the underline on touch devices and instead change the text-colour. I’m using a similar blue and purple here, but it’s nececarrily much darker and without an alpha channel. I tried to use a colour that didn’t affect the typographic colour of the text. If you try squinting and looking at the mobile version the links shouldn’t feel lighter or heavier than the rest of the text.

a:not([class]) {
  //...

  @media (pointer: coarse) {
    text-decoration: none;
    color: var(--color-link-text);
  }

  &:visited {
    text-decoration-color: var(--color-visited-link-underline);

    @media (pointer: coarse) {
      color: var(--color-visited-link-text);
    }
  }

  //...
}

Finally, I want to do something about the outline browsers apply when a link is focussed by keyboard. I don’t want to do too much with this for accessibility reasosns, so we’ll just change it from blue to our brand red using the focus visible psutedo-selector. I’ll revisit keyboard navigation once I have a color palette for the site.

a:focus-visible {
  outline: 3px solid var(--color-red-trans50);
}

Website Redesign Part VII - Responsive Typography

Mon, 22 Jun 2020 00:00:00 GMT

Having settled on a typeface for my essays, it’s time to set up some basic typography. In the past, I’ve spent a lot of time building maths-based ype systems with myriad variables and functions and it’s so tempting to go down that route this time and try to create a system that caters to every eventuality. But that would be at odds with my simplicity value, so for the time being I’ll stick to the basics. We’re going to set up a base font size and line height and scale that as the viewport grows. We’ll also add just enough whitespace to create a nice vertical rhythm and create some visual hierachy by styling the headings. Everything else can wait.

Base font-size

We’ll start off by setting the font-size of the HTML element to 100%. This makes sure that 1rem will always represent the default font-size of the device or browser - usually 16px. We’ll use rems and ems to define pretty much every other size in the site, so we’ll also set the body font-size in rems so it’s inherited by other elements.

We also want to reset the heading sizes to 1em. We’ll probably redefine some of these later but I always think it’s a good idea to start with one size for all elements, since it often makes sense to differentiate headings with weight, style or color rather than size. We’re using ems rather than rems here because we want them to scale if we change the font-size on their container.

html {
  font-size: 100%;
}

body {
  font-size: 1rem;
}

h1,
h2,
h3,
h4,
h5 {
  font-size: 1em;
}

Scaling Type Size

We can use the new CSS clamp() function to enable responsive type without the need for a million media queries. This will scale the type from 1rem (16px) to 1.375rems (22px). The middle value is calculated using both viewport units and rems: the vw causes the type to scale with the viewport width and the rems ensure that user-initiated text resizing still works. I arrived at 0.6rem after a bit of experimentation.

.essay {
  font-size: clamp(1rem, calc(0.6rem + 1vw), 1.375rem);
  transition: font-size 0.1s;
}

Hyphens

Enabling hyphenation can make a big difference to readability on small screens, where an uneven right rag can cause very short lines. We can set up a SCSS variable for breakpoints and then use a media query to turn hyphenation off for larger viewports.

$breakpoint-m: 42em;

.essay > p {
  -webkit-hyphens: auto;
  hyphens: auto;

  @media (min-width: $breakpoint-m) {
    -webkit-hyphens: none;
    hyphens: none;
  }
}

Vertical rhythm

The main purpose of a baseline grid is, unsusprisingly, aligning the baselines of text. This makes a huge difference when we have multiple columns of text with differing fonts, sizes and the like.

While this makes a huge difference to the feel of a page, the fluid nature of web pages (and the way line-height works) makes this quite hard to do consistently. We can avoid this problem entirely by only having one column.

But baseline grids can also provide a sense of vertical rhythm – something we can do on the web without too much effort. We just need to work out how high each of our lines is and use multiples of that measurement to space things out vertically. (It can also make a good measurement for horizontal spacing.)

For the time being, we’ll keep our vertical rhythm super simple. First, we’ll remove all top and bottom margins - I’ve chosen to do this in my base stylesheet rather than just for the essays. Then we’ll set up a custom property to hold our base line-height and use that to set the line-height for all the elements in the essay container.

*,
*::before,
*::after {
  margin-top: 0;
  margin-bottom: 0;
}

:root {
  --base-lh: 1.5;
}

.essay > * {
  line-height: var(--base-lh);
}

We can now use this base line-height to set margins on our headings, paragraphs and the like. We can use the lobotomized owl selector to target all elements that have something above them and add a margin equal to our line-height. For now, we’re using ems so the margins will scale with the font-size.

> * + * {
  margin-top: calc(1em * var(--base-lh));
}

We can add top-margin in the same way to other elements. By sticking with top-margin and never using margin-bottom, we have a simpler mental model for how spaces between elements are calculated: we never have to worry about margin collapsing or make a decision on whether to use top or bottom margin.

While we’re here, I also used this tto set some horizintal padding on blockquotes

blockquote {
  border-left: 2px solid rgba(0, 0, 0, 0.2);
  padding-left: calc((1em * var(--base-lh)) - 2px);
  font-style: italic;
  margin-left: 0;
}

Styling Headings

Looking through my articles I dont’t tend to use H1s very often at all, apart from as the article title. This makes sense from a semantic point of view so we can assume that all H1s inside .essay are an article title. I tend to use H2 and H3 fairly often to break my articles into sections, and H4s often appear in logner articles. I rarely, if ever use H5-6.

With this in mind, it makes sense to keep things super-simple. Here’s what I initially settled on…

Aside from H1s, all are set at the same size as the body copy. Five and Six are styled identically in italic with the same weight and margins as paragraphs. Four is set in small-caps with a semibold weight, again with the same margin as paragraphs. Three and Two are both set in bold with a bigger top margin, two being differentiated by being uppercase.

The article title is bigger, and increases is size on larger viewports.

.essay > h1 {
  font-size: 2rem;
  @media (min-width: $breakpoint-m) {
    font-size: 3rem;
  }
  font-weight: 500;
  font-variation-settings: 'opsz' 50;
  line-height: 1.3;
}

.essay > h2 {
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.15ch;
  margin-top: calc(2em * var(--base-lh));
}

.essay > h3 {
  font-weight: bold;
  margin-top: calc(2em * var(--base-lh));
}

.essay > h4 {
  font-weight: 600;
  text-transform: lowercase;
  font-variant: small-caps;
  letter-spacing: 0.05ch;
}

.essay > h5,
.essay > h6 {
  font-weight: normal;
  font-style: italic;
}

I’ve also turned off styling for any links inside headings by having them inherit their styles from the heading elements.

h1,
h2,
h3,
h4,
h5 {
  a,
  a:visited,
  a:hover,
  a:active {
    color: inherit;
    text-decoration: inherit;
  }
}

I’m generally pretty happy with this, except for one thing. I use level two headings more than any other and because I’ve set them in uppercase I’m missing out on the loveley discretionary ligatures that Literata includes. So I might want to revisit this soon.

Website Redesign Part VIII - Adding some style

Mon, 22 Jun 2020 00:00:00 GMT

The last part focussed on setting up a basic typographic system using margins and heading styles. In this part, I’m going to make a bunch of little tweaks to the typography of these essays. Over the next few months I’ll probably make a whole host of little incremental changes like this.

Old-style Figures & Fractions

Most good typefaces contain two sorts of figures. Lining figures are designed to sit on the baseline and are generally all the same height. They’re great for headings, tables and UI. Old-style figures overhang the baseline and often vary in height. These are great for setting numbers in body copy.

I’m using the default lining figures in most places, but I want to use old-style figures in paragraphs, lists and blockquotes (eg. 1957). I also want to use proper fractions like this → 3/4.

.essay > p,
.essay > ol,
.essay > ul,
.essay > blockquote {
  font-variant-numeric: oldstyle-nums diagonal-fractions;
}

Bold

Where variable fonts are supported, I’m making strong tags a little bolder than normal.

strong {
  font-weight: 600;
  @supports (font-variation-settings: normal) {
    font-weight: 625;
  }
}

Abbreviaions

Abbreviations like HTML nearly always look best rendered in small caps with a little space between the letters, so I’m doing that for any <abbr> elements:

Use small caps and transform the text to lowercase to we don’t get any proper caps mixed in.
Space out the letters a bit (I’m using ch here, which is based on the width of the “0” character).
Use a low optical size and fall back to Literata Caption where variable fonts aren’t supported.
Use a slightly heavier weight than normal - roughly equivilent to Semibold.
Set the cursor to help is it has a title attribute.
Make the dotted underline almost invisible, and position it under the baseline rather than on the baseline.

.essay abbr {
  text-transform: lowercase;
  font-variant: small-caps;
  letter-spacing: 0.05ch;

  font-family: 'Literata Caption', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 0.85em;
  @supports (font-variation-settings: normal) {
    font-family: 'Literata Variable', Georgia, 'Times New Roman', serif;
    font-variation-settings: 'opsz' 10;
    font-weight: 410;
  }

  text-decoration-color: rgba(0, 0, 0, 0.15);
  text-underline-position: under;

  &[title] {
    cursor: help;
  }
}

First line & Drop Caps

I’m experimenting with adding drop-cap and small caps for the first line. I’m not yet sure whether I really like this, so will probably revisit later on. I’ve also added hanging punctuation for paragraphs (only supported by Safari at the moment)

.essay > p {
  &:first-of-type::first-line {
    text-transform: lowercase;
    font-variant-caps: small-caps;
    font-weight: 500;
    @supports (font-variation-settings: normal) {
      font-weight: 525;
    }
  }

  &:first-of-type::first-letter {
    text-transform: uppercase;
    float: left;
    font-size: 4em;
    line-height: 1;
    padding-right: 0.5ch;
  }
}

That’s it for now. I’ll cover lists, code blocks and links in future articles.

Website Redesign Part VI - Adding a Typeface for Essays

Sun, 21 Jun 2020 00:00:00 GMT

After much messing about with typefaces, I think I’ve narrowed the choice for essay copy down to two contenders: Literata and Lora. Both feel “bookish” and are designed for long-form reading on screens. Both are open source and available as variable fonts as well as static. Version 3 of Literata not only allows us to vary the weight, but also the optical size. The static version has four optical sizes – each in various weights and italic versions.

The caption variant is designed for small sizes (around 7pt), the regular variant for body copy and the deck and display variants are meant for headings. The variable version gives me pretty fine-grained control over this.

Since I’m not sure which of these two typefaces I prefer, I’ve decided to bring both of them into the website and switch them out regularly as I’m working to see if one starts to grow on me.

Although I initially wanted to serve fonts via Google Fonts, I’ve changed my mind. One of my technical principles is as few dependancies as possible, and these are both open source I can host the myself. I was finally tipped into this decision because Google Fonts doesn’t have the latest version of literate available.

Building the fonts

I’ve never had to build fonts from source before, but after much yak shaving to update my python install and various home-brew packages I was able to run the three build scripts from the Literata repo. It toook a while to work out what they do, but essentially:

build-static.sh builds a bunch of TTF font files from source using the fontmake utility. This produces a lot of files – one for each weight/style/optical-size combination.
build-var.sh does the same, but for the variable fonts. It only produces two TTFs: roman and italic.
build-woff.sh takes the TTFs we just built and makes woff and woff2 versions using the sfnt2woff and woff2_compress utilities.

Since the Lora repo already includes TFF files, I just tweaked build-woff.sh a bit and used it to make corresponding woff/woff2 files with the same folder structure as Literata.

After renaming the wolf and woff2 versions of the variable fonts to remove the brackets, I ended up with this in the fonts directory of this site…

The whole thing comes in at a whopping 28MB, but that’s okay because I’m not actually gonna use most of these in production. I just want them to play with for the moment.

@font-face Declarations

I borrowed the Literata font-face declarations from Jason Pamental’s amazing Moby Dick project and added some similar ones for Lora. I’m pretty sure I’m gonna borrow a lot more from that project over the next few months. They generally follow this format:

@font-face {
  font-family: 'Literata Caption';
  font-style: italic;
  font-weight: 600;
  src:
    url('../fonts/literata/woff2/Literata-7ptSemiBoldItalic.woff2') format('woff2'),
    url('../fonts/literata/woff/Literata-7ptSemiBoldItalic.woff') format('woff');
  font-display: swap;
}

It’s been a long time since I actually looked at a @font-face declaration, so if you need a reminder too:

We’re writing a declaration for Literata-7ptSemiBoldItalic. This is the caption-sized version, in Semibold italic.
The first three lines specify when this font file should be used. In this case when we set font-family: 'Literata Caption' with a weight of 600 and an italic font-style.
The src attribute specifies the path to the woff2 version first and falls back to the woff version if that’s not supported (woff 2 offers much better compression than woff 1). Since woff is widely supported we’re not including any other fallbacks.
font-display tells the browser how to handle font loading. In this case, the browser will render the text in a fallback and then our font in once it’s loaded.

The variable font declarations look much the same, but include two values for font-weight: the minimum and maximum at which it should be used.

Using the fonts

Our current CSS sets the font-family for essays using a custom property.

.essay {
  font-family: var(--font-essay);
}

As the design evolves, we’ll definitely end up with a more complex system for this but for now we can just update the variable to use Literata. We can also tell browsers that support variable fonts to load that instead of the static version.

:root {
  --font-essay: 'Literata', Georgia, 'Times New Roman', serif;

  @supports (font-variation-settings: normal) {
    --font-essay: 'Literata Variable', Georgia, 'Times New Roman', serif;
  }
}

I’d like to provide a more robust fallback stack (see this issue) but for now, we’ll just go to Georgia and TNR.

Some basic Open Type Features

Literata includes some lovely discretionary ligatures, but we don’t want them in the body copy. I’ve already set font-variant-ligatures: common-ligatures; on the body in my base stylesheet, but we’ll turn on discretionary ligatures for headings across the whole site:

h1,
h2,
h3,
h4,
h5 {
  font-variant-ligatures: common-ligatures discretionary-ligatures;
}

So where are we at?

I’ll see which of these two feels best as I work on the site over the next few weeks.

Reflection on Learning

One of my goals for this project was my own learning, and after some reflection on that I’ve learned a fair bit during this wanter into web typography…

I finally read The Elements of Typographic Style cover-to-cover.
I’ve learned a lot about type just by really looking at a bunch of different faces.
I’ve learned a bit about how digital fonts are made and the tools used to build them.
I’ve started to get excited about opentype features in CSS.

I’ve also re-learned that it’s easy to get blocked by indecision on a personal project like this. I could have wasted months trying to find the perfect article typeface and still not been happy with it. As with most things, any decision is better than no decision. Especially when it’s reversible.

Website Redesign Part V - Choosing a Typeface for Essays

Sat, 20 Jun 2020 00:00:00 GMT

I love typography, but I’m not that good at it. One day I’ll take a typography course at a a design school, but in the meantime I need to choose some typefaces for this website. I’m fairly confident I’ll need two rather different typefaces in the end. A essay face for setting longer-form writing and a UI face for everything else. I like the idea of using a very modernist face for the UI and something more old-fasioned and bookish for the essays. It might be hard to make this work but it seems to chime will with my personality – I’ve always had a tendancy to mix super-modern with traditional oldy-worldy. Trainers and Tweeds, if you will.

I’ll explore this in more detail in a future article, but for the time-being let’s revisit the four core values I decided on in Part I: Simple, Beautiful, Authentic and Content-first. Choosing and pairing typefaces is hard, so to keep things simple we’ll start by looking for one. And that last value makes a strong case for starting with the content.

What do I need from an Essay Typeface

The most obious requirement is that it’s very readable. And in particular, on screens. It needs to get out of the way and put the content first. It also needs to work well in dark mode, which probably rules out faces with very high stroke contrast (and therefore thin stokes). And to keep things simple, it should also work for headings, quotes, captions and the like –I’d rather not use a third face for this.

As far as feel goes, I’m going for bookish but definitely of the digital world. This probably means a serif, but maybe not a really traditional one.

So I’m going to start by looking for faces that are digital natives (ie not redrawings of print faces), which have been designed specifically for readability on the screen. There are a few technical constraints to think about first, though.

Technical Constrains & Features

It must be open source. While I have a subscription to Adobe Fonts I don’t want this project to depend on a paid service. If I can find something that’s hosted on Google Fonts so much the better. Because simplicity.

I’d prefer a variable font. Mostly because they’re new and shiny and fun to play with, but also because it’s likely to reduce total page weight. If I go with a variable font, it also needs to have a static version – not all browsers properly support variable fonts yet.

I’ll need a good selection of weights in both roman and italic. Probably 200 (light), 400 (normal), 700 (bold) as a minimum. I’ll also want support for the following opentype features¹:

Proper small caps
Both Old-style and and Lining figures
Nice default and discretionary ligatures
Fractions

It would be nice to have a proper superscript for footnotes, but this is hardly crucial.

Checklists

I’ve bubbled all of that down into a couple of checklists to help me evaluate fonts. On reflection, none of the items are really mandatory – it’s important I keep an open mind while I’m exploring. But they’re good starter to help narrow down the field.

Technical Features

Open source?
Available on Google Fonts?
Variable Font? (with static version as fallback?)
Wights at least: light (200), normal (400) and bold (700) in italic and bold.
Proper Small Caps
Old-style and lining figures
Nice ligatures (including discretionary)
Proper Fractions
Other OpenType features that might be fun/useful?

Style

The Shortlist

After a lot of exploration, I’ve settled on five candidates. None hit all the criteria in the checklists, but a few get pretty close. And I like them all.

Spectral

(Google font page)

Specral was designed in 2017 as a screen-first typeface. This article goes into a lot more detail.

Spectral is a new and versatile serif face available in seven weights of roman and italic, with small caps. Intended primarily for text-rich, screen-first environments and long-form reading

Over the past decade, the amount of attention given to readability studies by typeface designers has yielded either bland and conservative results, or overwrought “solutions.” This is more pronounced in screen typefaces than those made for print media, where common pitfalls include overly simplified shapes, “friendly” letters, and facile tricks like unnecessarily upright italics.

In response, Spectral takes an unambiguous stance: Screen typefaces should not look like caricatures of themselves. They should instead be functional text designs that stay interesting enough to convey the many voices that contemporary users need.

At first glance, this seems like it might be a great choice, but after some experimentation the very high stroke contrast makes it feel a bit too bookish. It’s a bit too spindly, somehow. It also doesn’t work that well on dark backgrounds at small sizes.

If I was setting a book on the web, I’d definitely consider this though.

Lora

(Google font page)

Lora is a well-balanced contemporary serif with roots in calligraphy. It is a text typeface with moderate contrast well suited for body text.

A paragraph set in Lora will make a memorable appearance because of its brushed curves in contrast with driving serifs. The overall typographic voice of Lora perfectly conveys the mood of a modern-day story, or an art essay.

Technically Lora is optimised for screen appearance, and works equally well in print.

Lora was designed by Olga Karpushina in 2011. It’s definitely the least unusual of the five, though the fairly upright italic is beuatiful. This is definitely one that would get out of the way and put the content first.

Alegreya

(Google font page)

Alegreya is a typeface originally intended for literature. Among its crowning characteristics, it conveys a dynamic and varied rhythm which facilitates the reading of long texts. Also, it provides freshness to the page while referring to the calligraphic letter, not as a literal interpretation, but rather in a contemporary typographic language.

The italic has just as much care and attention to detail in the design as the roman. The bold weights are strong, and the Black weights are really experimental for the genre. There is also a Small Caps sister family.

Not only does Alegreya provide great performance, but also achieves a strong and harmonious text by means of elements designed in an atmosphere of diversity.

I love the fact that Alegreya has a small caps variant and is part of a super family that includes a sans-serif version - I was wondering if I could use the sans version for UI copy. But much like Spectral, it almost feels too caligraphic and oldy-worldy-bookish.

Literata

(Google font page)

Literata is probably one of my favourites. It feels right for the job, somehow. It’s got a huge array of varients plus a variable version and some lovely ligatures. It was commissioned by Google and designed by TypeTogether in 2015 and is the default font family in Google Play Books. I’m not sure I like the idea of using a face that so many folks will associate with Google, but as far as versitility and reading experience goes, this is definitely on the shortlist.

Bitter

(Google font page)

Motivated by my love for the pixel I designed Bitter. A “contemporary” slab serif typeface for text, it is specially designed for comfortably reading on any computer or device. The robust design started from the austerity of the pixel grid, based on rational rather than emotional principles. It combines the large x-heights and legibility of the humanistic tradition with subtle characteristics in the characters that inject a certain rhythm to flowing texts.

Bitter has little variation in stroke weight and the Regular is thicker than a normal ‘Regular’ style for print design. This generates an intense color in paragraphs, accentuated by the serifs that are as thick as strokes with square terminals.

This also scores well when it comes to readability, but the fact it’s slab serifs and very dark color make it feel a bit too unrefined for use here. It’s still on the shortlist though.

Here’s a good overview of CSS opentype features. ↩

Website Redesign Part III - A Base to Start From

Tue, 07 Apr 2020 00:00:00 GMT

I’m trying to keep the CSS as minimal as possible here, but I do want a decent blank slate to work from. So I’ve normalised browser styles with normalize.css and set up some of my own base styles.

Reset some basic styles to the way I like them.
Set up some variables and use them for base colours and typography.
Remove styles from all lists that have a class - they’re probably part of the UI, not the content.
Remove styles from links that have a class - same reason.
Set default link styles for body copy.
Remove all animations and transitions for people that prefer not to see them.

I’m sure these will change over time, but here they are for now…

A starting point for article typography

Since I’m writing on this site now, there’ll be a lot more written content. My Content-first value means I should probably start with that, while my Simplicity value means I should probably ignore layout and start by making the article copy as beautiful and readable as I can.

So taking a leaf out of Frank Chimero’s book, I’m starting with a very very simple set of styles for my articles.

I’ll focus in on this soon but until I choose a better typeface, --font-copy is set to Georgia. Like Frank, I still like it.

Website Redesign Part IV - Pages and URLs

Tue, 07 Apr 2020 00:00:00 GMT

I bought this domain specifically so I could have cool URLs like danny.is/doingsomething, so definitely want to use certain URLs, regardless of content. These provide a good starting point for deciding what pages I might want.

danny.is

The homepage, obviously. Since the last redesign this has just shown a list of links to other pages and external services, but I’ll probably change that a bit with this redesign.

danny.is/about

A few paragraphs about me. Perhaps some other stuff.

danny.is/now

A very simple description of what I’m doing at the moment. Inspired by this.

danny.is/writing

An index of my writing. This will definitely include my writing on this site, but I might also include stuff I write elsewhere.

danny.is/reading

Stuff I’m reading. Historically, this has been a big list of links pulled from Pocket and Medium. I want to keep that, but might also include books I’m reading, or recommend.

danny.is/cv

A PDF of my CV.

danny.is/using

Forwards to a Notion page detailing the software and hardware I use. I’m sticking with Notion for the moment because I already have much of this written.

danny.is/meeting

Forwards to a notion page where you can book a meeting with me. I’ve been sharing the full notion link for about a year now, and it’s just occurred to me that setting up this forward makes a lot of sense. Again, I’m sticking with notion because I already have it set up.

Other URLs

I’ve also set up forwards for LinkedIn and youtube, since I find it hard to remember their URLs:

danny.is/linkedin → My LinkedIn profile
danny.is/youtube → My Youtube channel

It seems likely that I’ll also want two new pages…

danny.is/lookingforwork

A “Hire me” page which is only live when I’m actively looking for work.

danny.is/coaching

A page detailing my coaching work. I expect this will be the only page where I care about “marketing”.

Pages I need to design

Ignoring the forwards and the now page, that’s eight pages I need to consider when it comes to design.

Homepage
About
Writing (index)
Writing (article)
Reading
Looking for Work
Coaching
404

There’s a part of me that wants to dive into the design of these pages right away, but I’m resisting the urge. Making the writing that’s already here useable is far more important. Keep it simple, Danny.

Website Redesign Part II - Principles, Goals and Stuff to Keep

Tue, 17 Mar 2020 00:00:00 GMT

Until now, every time I’ve redesigned this website it’s been because I didn’t like how it looked. Every few years, I’ve looked at it and felt like it doesn’t adequately represent me.

When I started this redesign process, I fully expected to feel the same way. But having spent a bunch of time staring at it, I think I still like a lot of what I have.

More accurately, I still really like these two pages…

When I designed them back in 2016 I was going for a modern “Swiss” influenced kinda vibe. I think I want to keep that.

But let’s take a step back for a second and think about my goals.

Goals of this site

First and foremost, it’s a personal expression of me. It’s a place for me to have fun: both with my writing and with design & CSS. So it’s okay if it’s a bit goofy or stuff is a bit broken sometimes.

But it also represents me professionally.

Thankfully, in both cases the primary goal remains the same. To help the reader understand me – Danny.

If I put my UX hat on for a minute, there is a Job To Be Done that I should consider. A subset of visitors to this site are trying to find out if I’m the right person to help them with something.

Similarly – with my marketing and I-need-money-to-eat hat on – there is another subset of visitors that need my help; but neither of us know it yet.

The last thing I want is for my personal site to be some sort of super-optimised landing page for Danny The Professional®. Because that’s no fun. And it’s not at all an expression of me. But I do need to consider these special use cases a bit.

Of course, there are also the random folk who come here to read the stuff I write. They probably just wanna read in peace.

So if I think in terms of actors and their goals:

Danny
- Express himself freely and without constraint.
- Have fun. With writing, design and code.
- Connect with people he can help, or who can help him.
Interested reader
- Read Danny’s words in peace.
- (Perhaps) be notified when Danny writes some new words.
Person checking Danny out
- Find out if Danny is the right person to help them.
- Contact Danny.

This feels like a good set of goals to start with. But they come in a strict order of priority: Danny → Interested Reader → Person Checking Danny Out. This is my personal website, after all.

So here’s a rule I’m gonna try to stick to:

Given a choice between what I want to do and what I feel I should do because [reasons], always choose the former.

Goals of this redesign

As I said in Part I, I’m doing this primarily for two reasons:

I want a simpler, more technology-agnostic website.
I want to write here, not on Medium.

Combined with the website goals up there ☝️, I think I’m trying to achieve the following:

Represent myself more authentically.
Simplify my own mental model for who I am and what I do, as expressed through this site.
Make things more obvious and useful to readers.
Put my writing at the front, and make it beautiful.
Provide somewhere for folks to find out about my work, and how I might be able help them.

I suspect (2) and (3) mean better content organisation and hierarchy, along with some self-imposed constraints. (4) probably means better typography and more focus on the tiny details. As for (5) – that’s probably just a page of its own.

The first one is interesting though. I said earlier that I like the current design. For the first time ever it still feels authentic now that Redesign Time has rolled up. And so it does. At least what there is of it.

And perhaps that’s the problem. My current site is too sparse. Too sanitised. Sure, it has some wacky angles and stuff. But it has no substance.

It also feels a bit cold and unloved. Like a well-machined tool that rarely gets used.

I’d much rather it felt like a hand-made tool that’s used and loved every day. It’ll probably have more dents and scratches, but it will feel much more like home.

Representing Danny more authentically

I recently asked some friends to describe me using as many single words/short phrases as they wanted. The list so far has been a great prompt for reflection and has led me to a fair few blind spots, but I’m still waiting for a lot of folks to come back to me.

I’m hoping that this will help identify some words that I feel authentically represent me.

So where are we at?

Besides the fact that I like my current website, we’ve identified three main actors and their goals. We’ve also established five initial goals for this redesign, and expanded on the most important of them.

Back in Part I I listed four values that felt right as guides for this project.

Simple
Beautiful
Authentic
Content-first

They still feel right to me. And they now have bit more flesh on them.

What about my current website?

Before wrapping this up, I want to take a look at my current website with all this thinking in the back of my mind. I particularly want to look at the two pages I like – the homepage and the 404. Here are some unedited thoughts on them:

They are simple. ✅
They put the content first – even though there is hardly any of it. ✅
There should be more content.
I think the 404 page is beautiful. I love how the colour, type and layout interact. ✅
The homepage is less beautiful. Futura looks pretty bad at very large sizes and the whole thing feels slightly unpolished somehow. It lacks attention to the little details. Inauthentic.
Futura is a lazy choice of typeface - I use it everywhere.
The 404 page feels like an authentic representation of me¹. The homepage less so. This might have more to do with the content than the deign. I talk a lot and am generally friendly, and it feels a bit too minimalist and impersonal. It’s somehow not goofy enough, where the 404 page is. At least the palette feels warm ad cosy.
I’m going for a kinda Bauhaus/Swiss vibe but there’s no grid. I’m a massive nerd for orderly systems and grids, so this feels both inauthentic and like a missed opportunity to create some beauty through mathematics.

Until next time.

Yes I know, “Not Found”. 🙃 ↩

Website Redesign Part I - The Tech

Sat, 14 Mar 2020 00:00:00 GMT

Over the years, this website has taken many forms. Initially, it was a Wordpress blog. Then is was a hand-rolled Sinatra app that rendered markdown pages. More recently I’ve blogged on Medium and at the time of writing, my website is a much simpler Sinatra app.

A few months ago I had an ongoing problem with medium which lasted about three months. I got a new Monzo card and medium couldn’t charge it. Although none of my articles were behind the paywall, it did mean that I couldn’t read other people’s paywalled articles. And even though I was happy to pay, I couldn’t. Eventually, after many many emails between me, Monzo and Medium, I involved Medium’s payment processor Stipe. Turns out that the problem was some bad data on their end. We resolved it, but only because I knew about stripe.

This whole experience left a bad taste in my mouth, and like a lot of other people it feels like time to move the canonical version of my writing onto a platform that I own… my own website.

At the same time, I’ve also become frustrated with my website. Considering what it does, it’s most definitely over-engineered. It’s not fun to play with any more, and I seem to spend most of my time on it updating dependancies. I also have to pay Heroku to keep it running.

Time to simplify things, then. I need a static site.

Why a static site?

If my site is just HTML and CSS then it’s easy to change, even if I’ve not touched it in years. There are no complex mental models to remember, no dependancies to manage, no security vulnerabilities to patch. I can also deploy it anywhere. I’m not reliant on any specific third parties. Static sites are also web scale by default when hosted in the right place.

So that’s my starting point… plain old HTML and CSS, deployed to Github Pages. When I want to write a new article I just make an HTML page. Simple.

But I also want to enjoy writing articles, which probably means writing in markdown.

So a static site generator is the obvious choice. All the cool kids are using Gatsby and Hugo, but after spending some time with both I think Jekyll is the best option for me. It’s simple, is battle-tested and is very very stable.

Before going any further with the tech, I need some values and principles to guide my decisions.

Values

After some time with a pen and paper, these seem appropriate:

Simple
Beautiful
Authentic
Content-first

Engineering Principles

Based on these values, I’ve pulled out some principles to guide my decisions on tech stack:

As few dependencies as possible (both build-time and run-time dependancies).
Use defaults wherever possible.
Write as little code as possible.
Do not over-abstract. Avoid fallbacks, polyfills and hacks.
Bake accessibility in.

I’ll come back to these regularly.

Jekyll Plugins

It’s tempting to install a whole bunch of plugins – there are some great ones out there. But every plugin is a build-time dependancy, so I’ve settled on just three.

Optional Front Matter. This makes the front-matter optional, obviously. I want it so that my HTML pages don’t need any front matter.
SEO Tag. This adds a bunch of SEO-related meta tags in a pretty intelligent way.
Redirect From. This lets me set up redirects in a super-intuitive way. I can crate an empty page or post, specify the redirect in the front matter and be done with it.

But what about dynamic stuff?

My current website has some dynamic stuff. The only bits I still care about are my reading list and highlights. My medium highlights are pulled in via their private API and cached in Redis.

My pocket items and medium recommendations work a bit differently. When I clap for an article on medium or archive one in pocket IFTTT sends a request to an endpoint which stores the details in a Postgres database which the Sinatra app can access.

On reflection, I don’t care about the highlights right now.

But I definitely want to retain the likes from Pocket and Medium. I don’t want to maintain a Postgres database though.

Enter Airtable. I can have IFTTT create a record in Airtable whenever I clap for a medium article or archive a pocket item.

Although this means I’m dependant on Airtable for this part of my website, I’m okay with that because it’s not a core part of my site: if airtable goes down or kill my account then 🤷‍♂️. The advantages well outweigh the overhead of managing my own server and database. Also…

It’s easy to pipe data into Airtable from all sorts of places.
It’s easy to edit data in airtable, especially because I use it a bunch anyway.
It has a very nice API.

There is one problem, though. For my javascript to access this data it needs my Airtable API key. I can’t just bung that in my code because then everyone would have it. This is something Netlify’s lambda functions are great at: they can act as an intermediate layer between my client-side javascript and the Airtable API.

Netlify also makes a lot of sense for hosting: it has some bells and whistles Github Pages lacks.

So here’s where we’re at so far…

Core Stuff

Just HTML, CSS and Markdown.
Jekyll (with a couple of plugins).
Netlify for hosting.

Reading List Stuff

Airtable - data store.
Netlify Functions - accessing Airtable.
IFTTT - piping stuff into Airtable from elsewhere.

What about the writing experience?

For the most part, I’m happy to write locally in iA Writer or VSCode. For writing on-the-go, Forestry seems like the best option. I’d dearly love to find a git-based-jekyll-compatible editor that works like Ghost or Medium, but that can wait.

With these decisions made, it took a surprisingly small amount of time to get all this wired up. Less than two hours. That’s the value of simplicity, I suppose.

Business Process & Tooling

Thu, 05 Mar 2020 00:00:00 GMT

Little Thing — Mocking External Services on Ruby

Wed, 04 Mar 2020 00:00:00 GMT

Breaking Down Problems: It’s hard when you’re learning to code

Wed, 14 Nov 2018 00:00:00 GMT

Little Thing — Value Objects in Ruby

Mon, 05 Nov 2018 00:00:00 GMT

Little Thing #2 — Speeding up ZSH

Thu, 09 Aug 2018 00:00:00 GMT

Little Thing #1 — How do RSpec Matchers Work?

Thu, 12 Apr 2018 00:00:00 GMT

Little Things

Mon, 02 Apr 2018 00:00:00 GMT

Synchronising Git Merges with Slack

Tue, 19 Dec 2017 00:00:00 GMT

The Definition of Done: What does “done” actually mean?

Tue, 19 Dec 2017 00:00:00 GMT

Add Starred Slack Messages to Things 3

Sun, 26 Nov 2017 00:00:00 GMT

Where are the good Mobile Networks?

Mon, 19 Jun 2017 00:00:00 GMT

The Definition of Done: What does "done" actually mean?

Mon, 19 Jun 2017 00:00:00 GMT

Scrum defines the definition of done in pretty simple terms: it’s the acceptance criteria that are common to every single user story. For scrum teams, it’s really important to have a solid definition of what “done” means. They work in sprints, and need some way of deciding whether a user story is actually finished. It’s no good ending a sprint with a user story that meets all its acceptance criteria, but had no code review, hasn’t been tested and isn’t deployable. Such a story is clearly not done. Scrum teams solve this by strictly defining “done”. In this case, in addition to meeting the acceptance criteria, the story must also:

Have had a code review.
Have been tested.
Be immediately deployable.

If this isn’t the case at the end of the sprint then it isn’t done - we can’t count it’s story points towards the sprint velocity and it needs to go on the backlog for the next sprint planning session.

What does “done” actually mean, though?

Is a new feature “done” when it’s in production and being used by customers? It might be. Equally, it might not. Have we published the changelog? Have we emailed our customers to tell them about the feature?

When is a technical improvement or refactoring “done”? We certainly don’t want to email our customers about it, and we probably don’t want to add it to the changelog.

The definition of “done” depends on the task.

Some teams get around this problem by having multiple definitions of “done” - one for bugfixes, another for features, another for technical tasks, and so on.

At CharlieHR, this seemed overly complex. We don’t use scrum, and we don’t work in iterations. But we still need a way to remind ourselves of the stuff that should be done before a task is considered finished. So we invented a checklist.

Our DoD at Charlie

We use two definitions. The first is ready to merge. Everything in this checklist needs to be ticked off before the pull request is merged to the master branch. The second is actually done. Everything in this checklist must be ticked off before the card is moved to the Done column on our task boards.

It’s worth noting that these rules apply to every single work item that goes through our task boards, so long as it involves code. Whether it’s a large user story with multiple dependencies or a tiny bugfix, the person doing the work is expected to run through these checklists.

That doesn’t mean that everything on the checklists has to be ticked off for every work item, though - a tiny technical improvement is unlikely to need a marketing email written about it, for example. It does mean that everything in the checklist must be considered for every work item. We trust our engineers to use their judgement.

While you’re reading the DoD below, bear in mind…

We use Trello for our task boards. Most teams have columns for backlog, next up, in progress and done. New features and user stories are represented by trello cards on a team backlog.
Technical improvements and exceptions begin life as GitHub issues. These get a trello card on the backlog when they are assigned to or picked up by a team. Bugs live in Sifter, and get a trello card when they’re assigned to a team.
The order in which the items below are considered is irrelevant, so long as they have all been considered.

I’ve made notes in italics, since some of the items need a bit of explanation.

Checklist 1: Ready to Merge

Kickoff done and requirements clear. Kickoff Document stored on Drive. This is where we define our acceptance criteria and the scope of a new feature. Most non-trivial user stories require this, and the kickoff for an epic may spawn multiple, smaller, inter-dependant user stories. Bugfixes don’t normally need a kickoff: it’s down to the product manager and engineers to decide whether a work item needs one. The kickoff document is just the record of the discussion, and contains sufficient acceptance criteria to get the thing out.
Implementation Plan written and reviewed. This is something we’re trying out. For non-trivial work items, engineers discuss and plan the technical solution. This usually involves whiteboarding and scribbling on bits of paper. The implementation plan is a summary of that thinking and is available for engineers from other teams to review. We’re hoping this will help catch architectural and system design problems early. For technical improvements, this discussion has usually happened on the associated github issue already.
DPIA Form Completed. Do we need to do a Data Protection Impact Assessment?
Card on Trello, properly labelled, sized and PR/Issue linked (mandatory). Before a trello card is picked up it must be labeled, have a T-Shirt size and have any associated stuff (kickoff doc, implementation plan, github issue, sifter issue etc) attached to it. Once a pull request is open, this (or these) should be attached too.
Pull Request open and properly labelled (mandatory). We open a PR after the first commit to a branch. Early comments on the PR save time and help share knowledge between teams.
Acceptance criteria met. Obviously. If changes to the requirements have been agreed with the product manager, have they been noted on the kickoff document or trello card?
Unit tests written.
Functional specs written.
Documentation folder reviewed for any changes/additions. We have a directory containing markdown files that describe the design patterns and conventions we use.
Environment variables documented, added to secrets manager and present in staging & production environments.
Analytics considered. Do we need to track user behaviour, and how should that be reported to our analytics tools. For larger work items, this is usually specified in the the kickoff doc.
“What’s New” section updated. If this is a new feature, we may want to tell our users about it.
l18n reviewed. All our copy (including microcopy) should live in locale files.
Security & Data Protection Review (mandatory). We take security seriously. Have we made a deliberate and methodical check that this doesn’t introduce any obvious security or data protection issues. This is particularly important for small bugfixes, since they may not have had detailed planning.
Code Review from at least one other (mandatory). We strictly enforce this with our GitHub settings.
CodeClimate clear of errors. As well as tracking our test coverage, we run static analysis tools like rubocop and ESLint against out changes. We’re still tweaking the rules for these tools to suit our in-house style.
Feature Branch green on CI (mandatory). We also enforce this. You cannot merge to master with a red build on your feature branch.

Checklist 2: Actually Done

Merged to master and feature branch deleted (mandatory). The master branch is automatically deployed to our staging environment. I wrote about our merge process earlier.
Related GitHub Issues closed or updated.
Sifter, Appsignal, and #tech-support issues closed 🏁. We have a slack channel where people can raise technical issues. If a work item resolves or relates to one of these, it should be marked. This mostly applies to tiny bugfixes. Resolved bugs and exceptions should be closed in Sifter and Appsignal, respectively.
Manually tested on staging environment (mandatory). We don’t have dedicated QA people, so engineers and product managers conduct acceptance and exploratory tests. For work items that carry significant business or technical risk, we’ll draft in people from across the company to help.
Deployed to production with no obvious errors/exceptions (mandatory). Once a PR is deployed, we expect our engineers to keep an eye on the slack channel that shows our exceptions. If the deploy causes a flurry of them, it should either be rolled back and fixed or they should be addressed in a new PR before the work item can be considered done.
Release email sent. We send a company-wide email for all non-trivial releases.
Marketing document updated. If the work item is a new feature or important bugfix, it’s recorded in a spreadsheet. The marketing team refer to this when sending updates to our users.
Usage metrics checked/set up. Have we checked that data is coming through correctly? Do we need to update any formulas or one of our Geckoboard dashboards?
Help pages updated. If we’ve added a feature, changed the way something works or updated the UI, we might need to update our user guides, help documentation and canned responses in intercom.
FINALLY, card moved to “done” on trello (mandatory).

Mandatory Items

You’ll notice that some of the items are marked mandatory. Those must be done for every single work item. No exceptions. For a scrum purist, these are the only things that should appear in a Definition of Done. For us (right now), they are probably the least useful items on the list - they’re all important enough that we’d remember to do them even if we didn’t have a checklist!

At the moment, we’re deliberately keeping our mandatory items to a minimum, though we have discussed making more stuff mandatory. As we continue to evolve our process, I expect we’ll add items to support our current engineering goals. If we were focussed on improving our unit test coverage, we might include an item that says “all new models and POROs must have an associated unit test”. If we were focussed on improving the quality of our codebase, we might insist that “every pull request must improve the CodeClimate quality rating”. We might even decide to make proof of business value a prerequisite for “done”.

Currently though, we are focussed on building an awesome product, and while most pull requests include unit tests and quality improvements, it doesn’t make sense to mandate that just now. Our “Definition of Done” is designed to help us work better and faster, and will change and evolve alongside our business goals.

Six awesome services I discovered last year

Thu, 18 May 2017 00:00:00 GMT

DigitalOcean, DNSimple and Terraform: A very short introduction.

Mon, 24 Oct 2016 00:00:00 GMT

Agile Adoption Patterns

Thu, 30 Jun 2016 00:00:00 GMT

Good Slide Design

Sat, 23 Apr 2016 00:00:00 GMT

Slack for Enterprise

Thu, 10 Mar 2016 00:00:00 GMT

A Standard Software Toolset for Business?

Sun, 06 Mar 2016 00:00:00 GMT

Finding a Good Colour Palette through Exploration

Wed, 02 Mar 2016 00:00:00 GMT

Why do I teach?

Thu, 25 Feb 2016 00:00:00 GMT

Automating and Outsourcing

Sat, 20 Feb 2016 00:00:00 GMT

Collaborating on a Project

Mon, 04 Jan 2016 00:00:00 GMT

Effective Meetings

Fri, 18 Dec 2015 00:00:00 GMT

My Students have Forgotten How to be Curious

Tue, 03 Nov 2015 00:00:00 GMT

Evaluating Training and Learning

Mon, 26 Oct 2015 00:00:00 GMT

Getting Things Done

Sat, 29 Aug 2015 00:00:00 GMT

The Psychoactive Substances Bill 2015

Sat, 25 Jul 2015 00:00:00 GMT

The Changing Face of Software Testing

Wed, 22 Jul 2015 00:00:00 GMT

Delivering Business Value with Kanban and Validated Learning

Tue, 17 Mar 2015 00:00:00 GMT

Blogging with Evernote and Ruby

Thu, 26 Feb 2015 00:00:00 GMT

Replacing Bash with ZSH on OSX

Thu, 26 Feb 2015 00:00:00 GMT

Agile Feedback Loops

Tue, 24 Feb 2015 00:00:00 GMT

Writing Testable Code

Tue, 24 Feb 2015 00:00:00 GMT

On Sass and Other CSS Preprocessors

Sun, 04 May 2014 00:00:00 GMT

Controlling the Rag with Redcarpet

Sun, 04 May 2014 00:00:00 GMT

Good typography is about the accumulation of small improvements. As Mark Boulton puts it:

“Good typographic design — on the web, in print; anywhere, in fact — relies on small, measurable improvements across an entire body of work”

I’ve implemented several typographic improvements in my Ruby-based website using a custom Redcarpet renderer that automatically fixes common typography issues.

The Problems We’re Solving

Orphans - Single words hanging alone on the last line of a paragraph
Short phrase breaks - Emphasized phrases breaking across lines
Awkward line breaks - Lines breaking after prepositions, dashes, or short words

Custom Redcarpet Renderer

Here’s how I implemented these fixes:

Preventing Orphans

def paragraph(text)
  # Replace the space between the last two words with a non-breaking space
  text.gsub!(/\s+(\S+)\s*$/, '&nbsp;\1')
  "<p>#{text}</p>"
end

Keeping Short Phrases Together

def do_not_break_string(text)
  # Keep short emphasized phrases together
  text.gsub!(/<(em|strong)>([^<]{1,15})<\/(em|strong)>/) do |match|
    match.gsub(' ', '&nbsp;')
  end
  text
end

Preventing Breaks After Short Words

def avoid_breaking_after_short_words(text)
  # Complex regex to identify words that shouldn't be broken
  text.gsub!(/(\s)(a|an|and|as|at|but|by|en|for|if|in|of|on|or|the|to|vs?\.?|via)(\s)/i) do |match|
    "#{$1}#{$2}&nbsp;"
  end
  text
end

The Results

These small improvements compound to create noticeably better text rendering:

Fewer orphans - Paragraphs end more naturally
Better emphasis - Short emphasized phrases stay together
Smoother reading - Fewer awkward line breaks interrupt the flow

Implementation Details

The custom renderer processes Markdown content before it’s converted to HTML, applying these typographic rules automatically. This means I can write naturally in Markdown while getting professionally typeset results.

Typography Principles

The key insight is that good typography happens at the micro level. Each individual improvement might seem small, but together they create text that’s:

More readable - Fewer distractions from poor line breaks
More professional - Attention to typographic detail shows craftsmanship
More accessible - Better text flow helps all readers

Conclusion

Controlling the rag (the uneven right edge of left-aligned text) and preventing orphans are foundational typography skills. By automating these improvements in my Redcarpet renderer, I ensure consistently good typography across all my content.

These techniques work especially well on the web, where we have tools like non-breaking spaces to fine-tune text rendering without sacrificing the flexibility of HTML and CSS.

A Pretty Readability Archive with Ruby and CSS

Sun, 20 Apr 2014 00:00:00 GMT

I’ve always found it interesting to see what other people read. Not just the things that they share on twitter, but the articles they read on a daily basis.

I decided to build a web application to display my Readability bookmarks using Ruby, Sinatra, and CSS transitions to create an interactive card-based layout.

The Technical Implementation

The application follows these key steps:

Environment variable setup - Secure authentication credential storage
Readit gem integration - Ruby library for the Readability API
XAuth authentication - Secure API authentication
Bookmark fetching - Retrieving archived articles
Interactive card display - CSS 3D transforms for flippable cards

API Integration

Using the Readit gem, I configured the Readability API connection:

# Configure the Readit API
Readit.configure do |config|
  config.consumer_key = ENV['READABILITY_KEY']
  config.consumer_secret = ENV['READABILITY_SECRET']
end

# Authenticate via XAuth
client = Readit::Client.new(
  oauth_token: ENV['READABILITY_TOKEN'],
  oauth_token_secret: ENV['READABILITY_TOKEN_SECRET']
)

# Fetch archived bookmarks
bookmarks = client.bookmarks

Interactive Card Design

The CSS creates an engaging card-based layout where each bookmark has:

Front face - Title and background image from the article
Back face - Article excerpt and metadata
Flip animation - Smooth 3D transform on hover

The cards use CSS 3D transforms to create a flipping effect that reveals additional information about each article when you hover over them.

Key Features

Responsive design - Cards adapt to different screen sizes
Visual appeal - Each card shows the article’s featured image
Rich metadata - Article excerpts, publication dates, and sources
Smooth animations - CSS transitions for polished interactions

Future Improvements

Potential enhancements I’m considering:

Infinite scrolling - Load more bookmarks as you scroll
Responsive grid - Replace fixed-width layout with flexible grid
Filtering - Sort by date, source, or tags
Search functionality - Find specific articles quickly

Reflection

This project combines API integration, responsive design, and interactive CSS to create something genuinely useful. It’s a great example of how modern web technologies can transform simple data into engaging experiences.

The combination of Ruby for backend processing and CSS for frontend interactions creates a fast, visually appealing way to browse through saved articles.

From RVM to rbenv

Tue, 08 Oct 2013 00:00:00 GMT

I recently switched from RVM (Ruby Version Manager) to rbenv for Ruby version and gem management. This isn’t so much of a ‘howto’, as a dump of my bash history for anyone looking to make a similar transition.

Why I Left RVM

RVM had several issues that frustrated me:

Complicated gem and Ruby version management - The system felt overly complex
Unclear storage locations - I never knew where gems and Ruby versions were actually stored
Confusing gemset commands - The gemset system was hard to understand and manage

Why rbenv is Better

rbenv offers several advantages:

Simpler to understand - The system is more transparent
Works well with Bundler - Better integration with modern Ruby workflows
Easier project-specific Ruby version management - .ruby-version files just work

The Migration Process

Here’s the process I followed to switch:

Completely remove RVM - Clean out all RVM-related files and configurations
Clean out old Ruby and gem installations - Start fresh
Install rbenv via Homebrew - Use the package manager for easy installation
Install desired Ruby versions - Install 1.9.3 and 2.1.4 (the versions I needed)
Set up default gems - Install commonly used gems
Install rbenv plugins - Add rbenv-bundler for better Bundler integration

The Result

The goal was to create “a decent local ruby environment that I actually understand.” rbenv delivers on this promise by being:

Transparent - I can see exactly what’s happening
Simple - No complex gemset management
Reliable - Works consistently across projects

Key Commands

The most important rbenv commands I use daily:

rbenv versions          # List installed Ruby versions
rbenv global 2.1.4      # Set global Ruby version
rbenv local 1.9.3       # Set local Ruby version for current directory
rbenv rehash            # Refresh rbenv shims

The switch from RVM to rbenv was one of the best development environment decisions I’ve made. If you’re frustrated with RVM’s complexity, rbenv is definitely worth considering.

New Job, New Website

Wed, 02 Oct 2013 00:00:00 GMT

I’ve recently transitioned from being a designer to a Ruby developer in London. As part of this change, I decided to build a completely custom website using Sinatra rather than relying on existing platforms.

Why Build Custom?

After trying various blogging platforms, I couldn’t find one that met my specific requirements:

Writing in Markdown - I wanted to write everything in Markdown
Full control over HTML and CSS - Complete creative freedom
Easy image management - Simple way to include images
Understanding all the code - I wanted to know exactly how everything worked

The Technical Setup

The website is built using a custom Sinatra application with several key features:

Static assets compiled locally - CSS and JavaScript are processed before deployment
Custom Redcarpet renderer - Markdown is parsed with custom formatting rules
Special tag system - Images and gists can be inserted using custom tags like {{image: 1}}
Pygments syntax highlighting - Code blocks are highlighted using Pygments.rb

Deployment

The site is deployed to Heroku with New Relic monitoring to prevent the app from going to sleep. This ensures fast loading times even during periods of low traffic.

Custom Styling

I’ve implemented custom styling for all standard Markdown elements:

Lists - Both ordered and unordered with custom styling
Blockquotes - Styled for emphasis and readability
Code blocks - Syntax highlighted with clean typography
Tables - Responsive and well-formatted

Reflection

This project reflects my journey from designer to developer. Rather than using off-the-shelf solutions, I prefer building custom tools that give me complete creative and technical control. The site was quickly developed and deployed, proving that custom solutions don’t always require extensive development time.

The key is understanding your exact requirements and building just what you need, nothing more.

MoD Email Subjects with AppleScript

Fri, 28 Jun 2013 00:00:00 GMT

The work I do with the RAF and Army requires me to send emails with the date and security classification included, like this: “20130628-The Subject-U”.

I must do this at least 30 times a day, and earlier on I was that fed up with copy/pasting dates that I decided to write a script to do it for me. I did try this once before, but Mail.app’s API wasn’t very robust at the time and the action relied upon simulating keypresses which wasn’t exactly reliable.

The following script adds the date and PM to the subject of the foremost Compose Mail Window. It’s a little smarter than my previous attempt too, in that it replaces the date if it’s already there and leaves the PM alone if it exists already.

This one opens a reply to the selected message, with the “Re:” in the right place:

Using Applescript is awkward to say the least - Russell Beattie puts it quite well:

Using AppleScript is like being tied down in a black leather gimp-suit at a dominatrix convention, and losing the safety word… The syntax is like Erlang and ancient Greek got somehow mixed together with Visual Basic, and was translated back into English by mentally-challenged ESL students

I did try to make a plugin for Mail.app to add some buttons to the menubar, but after discovering how difficult it is working with Mail.app’s undocumented API, I gave up and created a Service instead.

Despite AppleScript’s quirks, it’s still the most reliable way to automate Mac applications, especially when you need to interact with specific UI elements like email compose windows.

What is Good Design?

Mon, 21 Jan 2013 00:00:00 GMT

The UK Government Digital Service (GDS) has created something special with gov.uk. Moving away from skeuomorphic design trends, they’ve focused on content-first, accessible design that makes government information truly usable.

As John Gruber noted about skeuomorphic design:

“On retina displays… these techniques are revealed for what they truly are: an assortment of parlor tricks”

The GDS approach demonstrates that good design doesn’t need visual tricks. Instead, it comes from:

Content-focused layout that prioritizes information over decoration
Thoughtful typography including their excellent adaptation of the Transport typeface
Accessibility ensuring government services work for everyone
Flat design that focuses on usability rather than visual effects

Andy Budd’s observation rings true here:

“The best designers and developers rarely have more talent. They simply have more time.”

This echoes Teller’s insight about magic:

“Sometimes magic is just someone spending more time on something than anyone else might reasonably expect.”

The gov.uk website succeeds because the team invested time in getting the fundamentals right: clear typography, logical information architecture, and user-centered design principles.

Good design, it turns out, is less about flashy effects and more about well-designed content, typography, and layout—combined with the time to experiment and refine until everything works seamlessly together.

A Simpler Responsive Grid

Tue, 05 Jun 2012 00:00:00 GMT

After making use of various complicated CSS grid systems, I’ve been using a simple percentage-based grid for the last year or so. It’s based on a 1000 pixel wide container with 63 pixel columns and 20 pixel gutters. The outside gutters at the extreme left/right are 12 pixels to produce a nice round number.

By using a 1000 pixel wide container, the maths is easy when using percentages. each column is 6.3%, gutters are 2% and so on…

By setting a width on the container of 100% and a max-width of 1000 pixels, and thereafter using percentages for all widths, everything resizes nicely:

#container {
    margin: 0 auto;
    max-width: 1000px;
    width: 100%;
  }

  #my-box {
    width: 14.6% /* Two columns wide - (2 * 6.3)+2 */
    margin-left: 1.2% /* Covering the first two columns */
  }

I’ve knocked together a quick example page (code) that shows the columns. One problem with percentage-based widths is that because of the box model, any borders or padding will be added onto outside of the box. Obviously this can be a drama if you’re using pixels to declare your borders and padding.

The easy solution to this is the box-sizing property:

#my-other-box {
    width: 31.2% /* Four columns wide */
    margin-left: 9.5% /* Covering columns 2 to 5 (1.2 + 6.3 + 2) */

    box-sizing: border-box;
    border: 2px solid red; /* will be rendered inside the box */
  }

Although this property isn’t supported in IE7 and below, it’s a useful way to control the box model and make responsive design easier.

Twitter Bootstrap-style syntax highlighting in a Tumblr theme

Thu, 17 May 2012 00:00:00 GMT

I’ve just spent a bit of time adding syntax highlighting to this theme after seeing the code block in Twitter Bootstrap. Although I don’t post a lot of code on here, I do occasionally post snippets up and have always hated sites that don’t bother to display code nicely.

For starters I realised that the font-size and line-height I’ve been using on here make longer text posts quite difficult to read, so I reduced the font-size of text posts a bit and set the line-height to 1.61803399 (the golden ratio). If I ever find myself writing lots of text-heavy posts then I’ll put a bit more effort into the typography.

I started out by styling up the <code> element exactly as it is in the Bootstrap CSS, although I removed the font-size rules so that they’d be inherited:

code,
pre {
  padding: 0 3px 2px;
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  color: #333333;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
}

code {
  padding: 2px 4px;
  color: #d14;
  background-color: #f7f7f9;
  border: 1px solid #e1e1e8;
}

I then uploaded the Google Code Prettify script to Tumblr and included it in my theme. Rather than include another remote CSS file, I dropped the prettify CSS code from prettify.css, lang-css.css and lang-yaml.css directly into the theme and added the relevant CSS from Bootstrap:

pre {
  display: block;
  padding: 8.5px;
  margin: 0 0 9px;
  font-size: 12.025px;
  line-height: 18px;
  word-break: break-all;
  word-wrap: break-word;
  white-space: pre;
  white-space: pre-wrap;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

pre.prettyprint {
  margin-bottom: 18px;
}

.pre-scrollable {
  max-height: 340px;
  overflow-y: scroll;
}

This pretty much sorted things out, although things didn’t quite look the same as they did on the Bootstrap demo website. After adding the prettify.css from Bootstrap and adjusting some of the colours to fit better, everything was sorted.

Prettify allows you to specify the language too, so by applying prettyprint linenums language-ruby classes to the pre tag, we get line numbers and syntax-highlighting for Ruby:

require 'sinatra'

def some_method(arg)
  if (params[:somesym] == 56)
    bar = foo
  else
    bar = "A String"
  end
end

It’s worth noting that it only labels every fifth line by default and adds a different background for odd rows. You can fix this by removing:

li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}

and:

li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}

from the Prettify CSS respectively.

Although I find it slightly saddening that Twitter Bootstrap has become so prevalent and would avoid using it for everything bar quick-and-dirty app development and prototyping, it’s fantastically useful for achieving things like this in a fraction of the time it would take otherwise.

HTTP oddity - This makes no Sense

Thu, 27 Jan 2011 00:00:00 GMT

According to the DNS, the domain points to heroku:

→ host tumble.dasmith.co.uk
tumble.dasmith.co.uk is an alias for proxy.heroku.com.
proxy.heroku.com has address 50.16.215.196
proxy.heroku.com has address 75.101.145.87
proxy.heroku.com has address 75.101.163.44
proxy.heroku.com has address 174.129.212.2

Yet if I send a TRACE request, I get this back:

Content-Length: 277
Date: Thu, 27 Jan 2011...

Divert O2 & iPhone calls or change your voicemail time

Fri, 02 Jul 2010 00:00:00 GMT

I just found some cool numbers you can use if you’re on O2 in the UK - these apply to most iPhone users and could be useful.

Call **61*NUMBER*11*TIME# (where TIME is the number of seconds to ring for before forwarding and NUMBER is the number to divert to). So to divert to voicemail after 30 seconds you’d call **61*901*11*30#.
Call *#61# for current status of call forwarding when you’re busy/don’t answer.
Call **62* to activate call forwarding when you’re not reachable (##62# to cancel)
Call **21*NUMBER# to divert all calls to NUMBER. Calling ##21# cancels this.

A number of my mates divert their mobile calls to their office phones while they’re at their desks. You could easily set up two contacts:

“Set office divert ON” - **21*YOUR_OFFICE_NUMBER#
“Set office divert OFF” - ##21#

You can find more general information about these codes online.

Getting Sorted 3: Air Cadets Office

Wed, 12 Aug 2009 00:00:00 GMT

[Image of desk at cadets was not archived]

So, after sorting through my home filing and organizing my projects, I moved on to my filing at cadets. I’ll not bother explaining the process as it was much the same as the process I went through before.

Essentially, I requisitioned the file cabinet drawer that holds blank forms. As we print most forms on demand, there are only a few blank forms stored in there these days. I gave each of these a file folder and included them in my alpha file system along with everything else.

During this process I also cleaned up my desk, threw out some useless reference folders and created two new ringbinders for reference:

Annual Camp Folder - For documents relating to camp inspections, drill competitions & formal parades
Lesson Plans - For paper copies of all the lesson plans used in the squadron

Here are some pictures.

[Images of shelves, files drawer, and file folders were not archived]

Getting sorted 2: Reference System & Projects

Fri, 07 Aug 2009 00:00:00 GMT

[Image of reference materials was not archived]

So the Second round of GTD-inspired stuff happened this morning. There’s not much to explain here really, except that I’ve just gone through all of my reference materials and condensed & sorted them.

On looking at each piece of paper or folder I asked the following questions:

Will I need to look at this again?
If so, can the information be better stored electronically
If not, does it need archiving?
Is it in the most appropriate folder?
If not, where should it go? What should the folder be called?

What I ended up with was a bloody great pile of stuff to bin, a small pile of stuff to shred or burn, a small pile of stuff to file at cadets and a surprisingly tiny set of nicely labeled file folders in alphabetical order, filling less than half of one file drawer. Cool. here it is:

[Image of filed folders was not archived]

While sifting, sorting and scrapping I was reminded of one or two things I should be doing and these duly went into OmniFocus via the (pretty cool) quick entry box. There were duly made into projects and, if they had paper stuff, were given file folders too.

Project Front Sheets

The next stage in my journey to sort shit out involved defining outcomes, ideas, constraints and what not for all of the major projects I’ve got going. It’s worth noting here that these only apply to major projects. All the smaller projects that are simply a reaction to life aren’t worth worrying about.

Below is the sheet I use for defining projects. I knocked it up the other day after reading the section on project planning in GTD. Let me know what you think of it.

[Image of project planning sheet was not archived]

Getting Sorted 1: New stuff with me

Thu, 06 Aug 2009 00:00:00 GMT

I’ve switched over to a new domain and am in the process of sorting a website or something for it. Henceforth, this site will do bugger all, except act as a place for me to jot down my ideas and progress with…

[Image of labeler was not archived]

Sorting my Shit Out

After reading David Allen’s Getting Things Done for the second time (the first was three years ago), I was inspired to get on with sorting things out with me. Perhaps it went the other way around - I re-read GTD because I wanted to sort things out. Either way, I’m feeling inspired.

My intention is to go through the following steps, roughly speaking:

Sort my organizational stuff out
Do less stuff I dislike and more stuff I like. See less people I dislike and see more people I like
Get my Being Healthy thing on.
Start building a bit of a brand

So, the other day I started with the first bit, sorting my organizational stuff, all GTD inspired. I bought a nice Brother Labeler from Amazon and set off on a Collection & Organization Binge.

1. Collection

I gathered up all the things that were dotted all over my computer, at home, at work and at cadets and dumped them on my mattress or in my INBOX folder. After that I wrote down everything I could think of that was bugging me, big and small and piled them on top. That’s about it for collection.

2. Organization

Yesterday Morning I went through all of the items in my Inbox, creating project files for any defined projects with paper-materials and adding those projects to OmniFocus.

[Image of project list was not archived]

Any small Projects which won’t need support material and should have only a few actions went into an OmniFocus folder called “Small Projects”, and paper for them went in a file folder with a shiny new label “Small Projects Support Stuff”.

For the rest, the projects were split into three Categories: Cadets, University, Others. You can see my Projects list in the screenshot on the left.

One of the issues I had with using OmniFocus in the past was the enormous number of projects I racked up. Anything that required more than one action step was made a project, and this quickly cluttered up both OmniFocus and my brain. This time around I’ve decided to put any small, two-or-three-step ‘things’ into the Miscellaneous Project (shown below).

After this almighty great job I set up a bunch of contexts and a definite next action for each project. Then I had a cup of tea.

It feels pretty good to get all of my stuff out of my head, it’s already allowing me to focus more on what I’m doing and less on what I have to do. What’s the next step? More Organization, with a sprinkle of brainstorming thrown in and of course, more labeling. Cool.

[Image of misc list was not archived]

From K810i to iPhone

Mon, 02 Mar 2009 00:00:00 GMT

[Image of iPhone was not archived]

A few days ago, my girlfriend Frankie bought me an iPhone. I thought I’d mention the few things I did to get my new toy up and running.

Applications

After unwrapping it, marveling at the packaging for a few minutes, and activating it I set about installing a few basic applications:

Facebook - A standard really, we all live by Facebook these days.
Last.fm - I’ve been using iScrobbler and Last.fm for years now, the iPhone version is a great way to get some new music when I’m walking about.
NetNewsWire - I use the desktop version to read RSS on my mac and having both applications sync with Newsgator means that my latest news will always be with me. I usually spend about half an hour a day reading news but I’m hoping that now it’s in my pocket, I’ll be able to fit that in while I’m waiting around for a bus or a lecture.
Remote - Now I can control iTunes from downstairs.
VNC Lite - I don’t often use VNC but as the application’s so small I thought I’d install it just in case. There are times when I’ve dearly wanted remote access to my mac while out and about. I also updated the VNC Server on my mac (OSXVnc).

Although I’m trying not to buy many applications, I did splash out on two.

Pennies - A simple but useful money tracking and budgeting app. I’ve often recorded my expenses on an index card and totted them up at the end of the week, it strikes me that doing it on my phone will save me both time and effort, and for the sake of the pound or so that it cost I think it’s well worth it.
AirShare - This is great. Essentially, it turns your iPhone into a WiFi hard drive, enabling me to drop files onto it from my mac while it sits in my pocket. I can effortlessly pull files off in the same way when I’m at a friends machine or at cadets. The killer feature for me is the ability to view PDF, source code and iWork files with it. It allows me to read eBooks and lecture notes while on the go. I’ve got an alias to the iPhone in my home directory for easy access.

After configuring the phone’s apps, I set up access to my Gmail account and synchronization with iTunes. I’ve currently got the phone syncing with an iPhone playlist and an iPhone images folder, as well as my latest podcasts.

Contacts

It was a bit of a hassle moving my contacts across from my Sony Ericsson K810i - it took me about an hour in total. Here’s what I did:

Synced the contacts from my K810i to Address Book using the methods described here. Note that I had to remove the K810i from the iSync list, disable iPhoto from opening automatically and then re-add it to iSync before I could Sync.
Synced my Address Book with the iPhone and Gmail (using iTunes) to get my gmail contacts into Address Book.
Worked through the address book renaming people, editing email addresses, merging contacts and deleting millions of random numbers. At the end of this I used Address Book’s ‘Find Duplicates’ function to make sure I was done.
Added the contacts to various groups and distribution lists.
Used the wonderful AddressBookSync to match up my facebook friends to my contacts. This imports their birthday and profile picture if it’s available. The automatic matching is pretty good (it matched Gaz to Gareth) but it’s worth looking through the unmatched list because unless you’re perfect at spelling it will miss some.
Synced the iPhone with Address Book using iTunes.

I’ve now got my contacts and email synced across my Mac, Gmail and my iPhone and I’ve got everyone’s birthdays and photos in the phone. The birthdays also show up in iCal, which makes my life even easier!

I hope this was useful to someone!

Back from the dead - at least for today

Wed, 11 Feb 2009 00:00:00 GMT

Hi, I’m not dead.

It’s been an awfully long time since I’ve written anything here (just over a year in fact). Still, a minute ago I felt compelled to write, so here it is.

Shifting Focus

In the past I wrote a lot about productivity. I was an avid reader of lifehacker, zen habits & other leading “life hack” blogs and was keen to pass on some of my knowledge to anyone who’d listen. About 18 months ago I shifted my focus to learning and started reading Cal Newport, Scott Young and other writers on the subject. My desire to pass on what I learned faded. Lately, I’ve had yet another shift of focus - from learning to philosophy, and hopefully for you I’ll want to tell you about it.

In the three or four years that I’ve been learning about productivity I’ve made massive improvements in my organization & workflow: I’ve found software products to help me work efficiently, developed a version of GTD to organize myself more efficiently, learned skills to help me learn more efficiently and made changes to my routine & home so I can live more efficiently. All of this has been great but there’s one problem.

Efficiency is crap

The trouble is, efficiency is only a good thing when applied to the stuff that you don’t really want to do. Some might argue that this is bollocks, that it’s good to be efficient in say, your workouts at the gym. Perhaps technically they’re right.

You see, for me, efficiency means “To minimize the amount of time taken to achieve the goal” and while I attend the gym with the goal of getting fit, I also want to enjoy it.

If I’m constantly trying to be more and more efficient in my workouts, I’ll lose that enjoyment. This is particularly true when thinking about relationships with others - is it really a good thing to be efficient with your partner? Probably not.

With this in mind, I think that I’ve reached a fairly good level of “productivity” - there’s only so much that I can “hack my life”, before I need to look at the bigger picture: Why am I here and how do I make the most of it?

And so to philosophy.

Although I’ve dipped into some philosophy books in the past, and pondered the different philosophies of the people I meet, I’ve not really made an effort to think about things and after all, philosophy is thinking.

I’ve not got much more to say on the subject at the moment but I’ve found that the notes (MP3 and PDF) at philosophersnotes.com are great for setting the gears in my brain whirring.

Time to think

The first step in thinking is finding the time to do so - everyone yearns for some quiet retreat in which to ponder and recently I’ve found that my own head is the best one (thanks Marcus). The thing is, before I can crawl into my head I need to have less stuff in it. No one likes pondering in a junk shop.

In an effort to remove some of the mundane “gumpf” in my head I have, in true Danny style, written two lists:

Important Ongoing Commitments
Important Finishable Projects

The first list contains all of the commitments that I’ve made to myself and to others over the past few months. I’ve also added some of the people I’m committed to supporting and removed some of the things that I’m not whole-heartedly committed to. The important thing is that none of these items are finishable.

All of the finishable commitments I’ve made, like “Remove Vista from my girlfriends laptop so it actually works”, make up my second list. Every item in this list has an obvious and intuitive end condition, some test as to whether I’m done or not.

These lists reside on the whiteboard next to my desk and above them is the promise that I’ve made:

Everything that I do will either further a commitment in list one, lead directly to the completion of a project from list two, or else be fun!

I will not take on any more projects until all of those in list two are complete.

Perhaps I’ll let you know how this goes.

A note on the future of this website

I mentioned in my last post that I was thinking of redeveloping TheScribe and indeed it’s still on my list of things to do. I’ve got a few interesting ideas and it’s looking likely that the blog will eventually be running on a specially designed engine. Don’t hold your breath though - this isn’t on my projects list and isn’t likely to be for some time.

If you want to keep up with me I do occasionally post interesting things over at dannyat.tumblr.com.

One site to rule them all?

Fri, 25 Jan 2008 00:00:00 GMT

Over the past few months I’ve been thinking a great deal about the direction of my business and work, and also of this blog. It’s lain dormant since May thanks to a lack of motivation on my part, and a busy schedule elsewhere.

One of the things I’ve been thinking about is creating an online portfolio of my illustrations and design work, along with a website to create leads for my business. Initially, I thought of using this blog as both a business front-end, and as a productivity and design blog. After working with this idea for some time and talking to various people about it, I’ve decided against the idea.

This decision is based on three factors:

This blog focuses mainly on productivity and lifehacks, my portfolio site should focus on design and creativity.
I’d like this site to have a clean, minimalist design whereas I think my portfolio site should showcase some more impressive and off-the-wall stuff.
I have two separate audiences: prospective clients and interested readers. My readers don’t want to look at my design, and my clients don’t want to be overwhelmed by articles on productivity.

My next idea was to maintain a portfolio site with an attached blog on design and art, and focus this blog on productivity. A sensible idea? Perhaps not.

Time constraints

Although I’d like to write more, I’ve found in the past that my posting schedules are far too ambitious. I’ve got a number of commitments that draw on my time and I often find it hard to maintain this one blog, let alone two separate blogs.

This thinking led on to the idea that I could maintain two sites, but only one blog – One site hosting my portfolio and business details and this blog, covering articles on productivity and art & design. The simplest way for me to separate the two “streams” on the blog would be to offer three RSS feeds.

A Productivity feed for my productive audience.
An Art and Design feed for my artsy audience.
A combined feed for the nutters who are interested in both.

After putting this to my friends, I’m convinced that this is the best way to go. If anyone thinks differently, please let me know.

The next steps

My work on a new theme for this blog is coming on nicely, as is my article on the process I’ve used to design it. Now that I’ve decided to keep my portfolio and blog separate, I’ve removed a large chunk of the work involved. Hopefully, you should see a relaunch of this site in the near future, with a new design and some flagship articles.

Assuming my other commitments don’t get in the way, and my motivation to write doesn’t decline you should also see an increase in post frequency. I intend to post about three times per week:

Once on productivity.
Once on art or design.
Once with a short story or poem from my girlfriend (or perhaps something else silly).

As far as my portfolio site is concerned, I think I’ll wait until I’ve got this project sorted before I embark on that.

Loose Change: Unstructured Habit Change for Lazy People

Mon, 21 Jan 2008 00:00:00 GMT

Over the past few years I’ve tried a number of goal setting techniques with the intention of improving myself, learning more or getting more work finished – none of them have worked. Earlier today I set out to discover why and found that structured change doesn’t suit me. I need loose change instead.

What went wrong?

My earlier attempts at a structured form of goal setting and habit change failed monumentally. While I diligently worked away at my goals and stuck to my aspired habits for a bit, after a few days the novelty fell off and I sacked more and more. This is testimony to my lack of motivation, perhaps another problem with goal setting. If I’m not motivated to work towards my goals then how can I hope to achieve them?

Another place where my structured system fell down was its timings. Each step in the process lasted a definite number of days and had a deadline at the end. Deadlines and schedules, say a lot of experts, are great. They motivate you to work towards your goal. Not if you’re me they don’t. Instead they morph a pleasurable and exciting task into something too much like hard work, ruining my enjoyment of it.

For example, attending the gym is a pleasure for me, when I go that is. However by strictly scheduling gym sessions into my calendar it becomes just another part of my concrete “work” schedule and ceases to be fun.

Rigid deadlines too are a problem, they force me to worry unduly about things which have no need for speedy completion. To add to this I suffer from an inability to correctly judge project times, I’m hopelessly optimistic when creating my deadlines.

The final nail in the coffin of structured goal setting was the amount of time I spend thinking about it. Either defining my goals exactly, organizing a progressive schedule towards them or redefining my deadlines and goals as my situation changes.

The Solution?

Loose Change.

This is the rather ridiculous term I’m using for my new goals/motivational/self-help system. When I set out designing it I needed some requirements. Everyone knows that a system needs requirements don’t they?

Requirement 1: Simple – A simple system won’t take up much of my time and more to the point, it won’t have any novelty. It should be easier to stay motivated if it’s simple.
Requirement 2: Free of deadlines – I hate deadlines.
Requirement 3: Free of a regular schedule – This means less time spent planning, and that I’m more likely to enjoy myself.
Requirement 4: Actually works – If it doesn’t work it’s all a waste of time.

I thought it would be nice if my system could help me achieve my goals without utilising specific “goals”. If my goal is to “get fit enough to run without dying”, my non-specific goal might be “The Gym”.

Brief interlude: I can see you thinking “this is ridiculous” but if you stick with it for a bit I might make more sense.

My non-specific goals have very little power, unless isolated and kept simple. To this end I reckoned on two categories for them, with one goal from each category running concurrently, as a segment (I love that word), until achieved:

Self Improvement: One learning or improvement related goal.
Play: One random, fun goal to work on.

After some reflection, I realised that the term “goal” is a bit misleading, what I’m really referring to is an area of my life: “The Gym”, “Painting” or “Eating Well”, for instance. With this in mind I redefined my categories:

Self Improvement: A focus on a particular area of self improvement until it is refined and working well.
Play: Continuing focus on one fun activity until I’m proficient at it, or until I’m bored.

You’ll notice the loosely defined time constraints in there. They aren’t deadlines but rather they’re stop conditions and when I’ve reached them I’m done with that goal. Thus far I’ve satisfied requirements one and two. To satisfy three was simple:

Each area has no schedule, one or other of the categories is to be pursued in my newly-unscheduled time.

After a little more thought about how I could improve this system I realised that some vague time constraint was needed. Without one my segment was likely to run forever as the stop conditions might never be reached. The time allowed for each segment depends on the nature of the areas and as I define each set of aims, I’ll define a “Loose Time for Segment” (in days) along with them. I know from past experience I’m more likely to stick to a deadline that isn’t strictly a deadline but is a guide.

After deciding on this time constraint it struck me that I could use this vague deadline to motivate myself towards completing some more pressing work within the same timeframe. This thought led me to add a third category to my original two:

Self Improvement: A focus on a particular area of self improvement until it is refined and working well.
Play: Continuing focus on one fun activity until I’m proficient at it, or until I’m bored.
Project: Continuing work on one project until it’s finished.

So there it is. All that remains is to decide on my first three aims and see if the system stands the test of time, satisfying my fourth and final requirement.

My First Segment

I’ll not elaborate on these too much as they’re meant to be simple and obvious.

SELF-IMPROVEMENT: A Study on study. Reading and learning about better methods of study and the human learning process.
PLAY: Vector Illustration.
PROJECT: Organisation of Admin & Building at 1440 Squadron, Air Cadets. A Project which needs pushing out of the way as quickly as possible.
LOOSE TIME FOR SEGMENT: 30 days.

I’ve printed these in 72pt font and stuck them on my wall above my monitor. Hopefully every time I’ve got nothing to do I’ll work on one of these. As I started this segment on the 10th of January, I should finish round about the 10th of February. I’ll be posting a review of this system around that time, and defining my next segment then.

If you’re like me and hate deadlines then give this a crack, I’d be interested to hear any thoughts and criticisms (or perhaps forecasts of my success) in the comments.

The Hipster PDA

Wed, 09 May 2007 00:00:00 GMT

Following my post on printing kGTD actions to index cards I thought it would be a good idea to write a brief post about my favorite organizational tool – the humble stack of index cards or Hipster PDA.

Popularized by Merlin Mann of 43folders, the hPDA was used by my mother back in the early 70’s when she worked as an estate agent. It comprises a stack of about 20 index cards clipped together with a binder clip. I started using it about a year ago as a type of notebook/organizer and I’ve tried a whole bunch of snazzy printed cards since then. While a number of these cards were useful, I’ve come to realize that most of them can simply be drawn out on a plain card in less time than it takes to print one, and with more flexibility. So why bother?

My current hPDA comprises:

A Printout of my weekly fixed timetable showing my University lectures, regular air cadet events and a few other fixed appointments. I made the timetable in OmniGraffle and printed it onto a blank index card.
A food shopping list containing foods I often need to buy and the ingredients for my four or five staple meals. I use this as a sort of reminder if I’m in a shop – running through the list reminds me if I’m out of anything on it.
My Next Actions list printed from kGTD.
A simple separator with a blue “E” tab poking out the side. This separates the blank cards from the others and has my phone number, national insurance number and RAF service number written on it.
Ten large post-it notes stuck to the back of the separator.
A handful of business cards along with a few more in my wallet.
Three of four red index cards for writing really important things on. Any red cards get my attention as soon as I get home, all the others go into my inbox.
About fifteen poor quality Tesco index cards for everything else.

This whole lot is held together with a shiny red binder clip and lives in my back left pocket most of the time. When I get home I throw all the cards with notes and scribbles into my inbox, and action any red ones. To sum up, here are some of the pros and cons of the hipster:

Pros

I always have my next actions list on me.
I never need to write on scraps of paper or napkins.
I can always give written information to someone.
Everything is clipped together in one pocket, it’s hard to lose.
It never crashes.

Cons

It’s very difficult to back up the hand-written stuff in it.
It gets wet very very easily.

Does information overload kill holistic learning?

Tue, 08 May 2007 00:00:00 GMT

Yesterday I downloaded and read Scott H Young’s eBook on holistic learning. He makes some very interesting points in it and along with his post on the subject is well worth a read.

Scott maintains that while it’s entirely possible to learn through memorization, very rarely will a student have a full knowledge of the subject and truly understand it.

While reading through the book I realised that I did, at one time, learn holistically. While I was at school I had no problem learning with very little study. I was able to absorb information without trying, much to the annoyance of many of my peers. It seems that at some point between then and now I’ve lost that ability. What I want to know is why?

This set me off on a little brainstorm and I have, I think, found the answer – or at least part of it.

While I was at school I took in information on a number of subjects (thirteen if I recall correctly), but there was a finite amount of information to absorb. I only learned a fixed amount of stuff in one day. I was happy learning what we were taught. I did, of course, supplement this with reading from books, newspapers and my experiences but the majority of what I learned came from lessons at school. I linked all this information together in massive mind-webs and was thus able to understand and recall it with ease.

When I started my A-Levels in 2003 I reduced the number of subjects I was studying. This gave me less seemingly unrelated concepts to link together in my mind-webs. In the absence of a broad subject range, I looked to the internet for information and discovered wikipedia and the blogosphere. Suddenly I had too much information to actually learn and instead started storing it, both in my head and on my computer. Even now, when I find a good article I save the URL for future reference, on the basis that I haven’t got time to take it all in now.

Upon starting my degree last year I reduced the areas which I was studying even further, and filled the space with more information from blogs and the web. Unfortunately, in tune with my reduced scope in school-based learning, I reduced the subjects that I read on the web. I now read about productivity and programming. That’s it.

It’s my considered opinion that this narrowing of my study areas combined with the vast amount of unlearnable information presented to me every day has led not only to a reduction in my general knowledge, but to a tendency to learn by memorization.

When I realized this it was like receiving a kick in the face from Bigfoot – no wonder I find it hard to learn and no wonder I lose interest in subjects quickly.

In conclusion I’d like to thank Scott for helping me to realize this and at the same time resolve to:

Reduce the amount of information I try to learn.
Stop hoarding information for “later reading”.
Expand my learning into other areas.

I’m confident that by eradicating information overload and focusing on learning what I want to, I’ll be able to stop worrying so much. Perhaps I’ll find it impossible to reach that long-forgotten state of all-knowing confidence, but I can get a bit closer to it.

Print kGTD to 3x5 Index Cards

Tue, 08 May 2007 00:00:00 GMT

Along with a whole bunch of other GTD guys, I use kinkless GTD to keep track of all my next actions. Along with everyone else I’m excited about the release of OmniFocus, which will print to index cards. Until its release, however, I need the ability to print my NA’s to my hPDA as Kinkless or OOP doesn’t provide this functionality.

A few weeks ago I started syncing kGTD with iCal and using iCal to work from. I now use kGTD to organize my NAs and iCal to tick them off. This saves having OmniOutliner open the whole time and stops the temptation to re-shuffle my projects every five minutes.

After a bit of research I whipped up a script that formats NA’s from iCal in TextEdit and then saves it as an HTML file for printing. Safari will then print the nicely formatted list to 3×5 index cards, providing your printer supports it.

Download: Print kGTD to Index Cards script

Make sure that you change the user_name to your login name and change show_help_at_start to false if you don’t want to be reminded about Safari’s printing options when you run the script.

In hindsight it would have made sense to simply format the file as HTML and write it directly to a text file, I may still rewrite the script.

If you like the script or have any problems with it, leave a comment or link to me.

Zen To Done

Tue, 17 Apr 2007 00:00:00 GMT

Leo Babauta of Zen Habits has written a wonderful post on ZTD. Zen To Done is his attempt to simplify David Allen’s GTD system - it addresses many of the pitfalls that new GTDers (including myself) often fall into.

Zen To Done (ZTD): The Ultimate Simple Productivity System

Give it a look, it’s well worth the read if you’re having trouble with GTD.

Self Help: Addict or Recreational User?

Mon, 16 Apr 2007 00:00:00 GMT

As we’re all aware, I’m quite into productivity. I jumped on the bandwagon about a year ago when I was overrun with work and needed a way to deal with it all. Someone pointed me towards Dave Seah’s PCEO and through that I discovered GTD and the massive online productivity community that surrounds it.

Lately I’ve been looking into the more spiritual side of so-called “self-help”, reading about increasing energy, meditating and practicing Boabom. I’ve also developed an interest in psychology.

It seems to a lot of my friends that I spend a disproportionate amount of my time reading about and practicing the various life hacks I come across, especially when they see that my desk is still covered in clutter and I still fall behind with my work. I think that some of them would be quick to label me as one of Steve Pavlina’s Self Help Junkies. I’m not so sure.

Steve’s article talks about the all-too-common phenomenon where someone will spend months studying the Art of Productivity, and yet have nothing to show for it except some fancy office supplies and a whole bunch of lists. It is easy to get so wrapped up in the process of being productive that you lose sight of the reason you’re applying all these life hacks – to get more useful stuff done.

Steve says that he’d:

“be wary of anyone who claims his/her self-help results are purely internal and have no outward manifestations. If those inner breakthroughs are genuine, they must eventually manifest changes in the physical world.”

Although I agree with this statement in that the benefits of self help, whether spiritual or organizational will eventually manifest themselves in the real world, I’m not so sure that the benefits will always be those expected.

I spend a lot of my spare time reading about life hacks & productivity and implement (to one degree or another) a number of the ideas I read. However, most of the time I make notes on the ideas I’m reading but never actually apply them (I’ve a file full of printouts and notes on “great new productivity tips” and I hardly touch it). Only about 5 per cent of the information I read gets stored or remembered, and probably less than 10 per cent of that is ever put into practice for more than a few days. It’s true that sometimes after two hours reading productivity blogs and a half hour trip to buy some stationary (a self-confessed addiction of mine) I’ll sit down and spend an hour doing “introspective exercises, making journal entries”, or making yet another list.

In my eyes, this is okay – I’m aware that while I am playing around with ways to make me more productive it is just that: playing. I don’t consider the hours I spend reading through productivity blogs to be useful work, but instead a form of recreation. When I read a self-help book it’s for enjoyment, much like reading a novel. So if one of my new shiny organizational systems fails, it doesn’t matter – it was a fun little exercise for me. That’s the main benefit – I had fun. Of course occasionally I come across something which really does change the way I work: my own implementation of GTD encompasses ideas from hundreds of blogs and books and has increased my output and calmed my brain down.

I’m sure that (weird as it may seem) there are many people who spend their time studying “self-help” not for the “emotional high” but simply because it’s fun.

Steve suggests that “This enormous time investment in self-help is nothing but mental masturbation”.

Too true – but what’s wrong with that?

Despite all this I feel I should acknowledge that Steve makes a good point in his article – if you’re spending your life “reading books and going to seminars” to no avail, and you don’t see it as a form of recreation then perhaps you should stop with the quick-fixes and create some measurable outcomes.

Problems, Solutions & Worrying

Sat, 07 Apr 2007 00:00:00 GMT

Over the last few months I’ve had a number of problems in my life, and at some points they seemed almost insurmountable. Here’s a brief description of the process I use whenever I’m faced with that “Oh My God - Everything’s Getting Too much” feeling. It’s reasonably quick and leads to a nice feeling of control.

The Too-Much-Stuff Reduction Method

Step 1: Problem dump

The first step is to get all of those problems out of your head. Scribble them on a piece of paper or record them, or paint them on your wall, it doesn’t matter how - just write them down. I record them on my phone as I’m driving and then translate that into a text file.

Step 2: Problem Identification

Once you have your big senseless and unorganized brain dump you need to organize the nonsense into problem areas. From these you can identify sub-problems and master-problems and sister-problems and connect everything together. I use a big sheet of paper and a pencil to make a giant mind map. You’ll find that while you may start with your dump from step 1, you’ll quickly discover other things you’re worrying about.

You should try to break down each problem into as many sub problems as you can, thus “No Money” becomes “No Job” and “Spending too much on shiny gadgets”. “No Job” can be broken down further still, perhaps to “No Time”. You’ll discover a whole bunch of links between your various problems (“No Time” because I’m playing with my shiny gadgets) and these links can help to clarify what’s worrying you the most and how other things on your mind influence those worries. I usually end up with a big web of connected worries.

Step 3: Problem solutions

Once each big problem has been broken down into smaller ones, and the connections between them are apparent, you can start to look for solutions. I add these to my mind map in a different colour, branching them off the various problems they solve.

Step 4: List solutions

List all the Scribbled solutions from your mind-map.

Step 5: Categorize solutions

The next step is to look at your solutions and categorize them. Play with them and try to identify any changes in your lifestyle which would solve a number of problems. Look for non-specific solutions (“Buy less Stuff”) and specific ones (“Stop buying Tobacco”) & write down the changes you intend to make somewhere.

Step 6: Identify Specific Actions

From your categorized solutions create a list of small, actionable things which you can actually do right now. For instance, while an overall solution might be “Send out CV’s to get some Work”, you could “Find your old employment records” right now.

While this system looks a little over-complicated for what it is (that’s writing down your troubles and then writing how you can solve them), It allows your already chaotic mind to remain so, even when defining the solutions. Try it next time everything gets too much.

Why Five?

Sat, 07 Apr 2007 00:00:00 GMT

Here’s a good piece of advice from the National Health Service and unusually it isn’t about Health.

NHS The Improvement Network - Five Whys

They recommend asking why five times in order to drill down to the core of a problem. It does leave me wondering what happens if you need to ask more than five whys to get to the root, but I suppose you have to draw a line somewhere.

I think this ties in well with my last post as far as the way in which you should break down problems is concerned.

Many people see a problem and then produce a solution to it, without giving a thought to the underlying cause of that problem. By asking why a few times the problem, and others like it, can be solved for good.

New Business Cards

Wed, 28 Mar 2007 00:00:00 GMT

I spent some time today putting together a new business card. I found myself pondering quite what to put on them, as they’re more multi-use than your regular biz card because I don’t have a business/job to promote - at least not a specific one.

I seem to be asked for business cards by three groups of people: those who want my contact details relating to my work in the Air Training Corps, those interested in my web design and those who want to get in touch with me regarding my music. (I’m forever being asked what my myspace address is by the latter.)

In the end I decided to just stick with my name, email address, website and phone number so that the card could be as multi-purpose as possible - I suppose it’s more typical of the old fashioned “calling cards”, albeit with a little more information.

Along with my name, the circles at the bottom are meant to suggest an acoustic guitar, at least that’s the intention! I’ve also made the email address (and specifically the [at] symbol) quite prominent to suggest a technology connection. The blank space on the left allows me to write any details which aren’t on the card - my address or ATC Squadron number, for instance.

So, without further ado, here’s the initial design:

[Image of business card design was not archived]

Let us know what you think.

A bit of Self Reflection

Fri, 29 Sep 2006 00:00:00 GMT

Sometimes it’s a good idea to sit down and just think. I did just that the other day and as my mind wandered I started thinking about what I’m good at – what I like doing. It struck me that I should try to push my aspirations and ideas towards these things.

So here are some of my thoughts, in a simple old-fashioned list. No Waffle:

I’m good at making things neat and tidy.
I like procedure, order and outlines.
I like documents that follow conventions. My conventions.
I like implementing systems which are written down in detail.
I like designing paperwork, but not using other peoples.
I like stationary. A lot.
I like being outdoors and doing visual, manual work.
I like pretty things – stuff that is clean and functional, but looks nice too.
I like structures and schedules.
I like teaching, an awful lot.
I’m good at writing detailed plans & orders.
I enjoy writing documentation.
I like talking.
I like meta-stuff

Writing these down just now was a rather enlightening experience. It seems I’m rather a perfectionist, at least when it comes to paperwork and organization. It’s all rather at odds to my fairly laid-back attitude to things. I guess I’m a secret perfectionist.

How I focus

Thu, 28 Sep 2006 00:00:00 GMT

After reading someone’s blog the other day (I seem to have lost the link) I made a note to look into the ways in which I focus. As a student I’ve all sorts of (mostly pleasant) things to distract me from my work and after a bit of thinking it seems I force myself to focus by using the following tricks:

Inboxes – I carry a Notebook in my bag and some index cards in my pocket for scribbling down anything which comes into my head. I’ve a big inbox on my desk and an inbox folder on my laptop to collect these ideas and thoughts. Doing this keeps my head clear.
Sound canceling headphones – I use these when working in the Library at college or when I’m in a public place trying to do something.
Listen to music – I listen to either calm repetitive “Easy Listening” music, or some good classical stuff. Anything else and I get too involved in listening to it.
Close Applications – I close every application except iTunes, Minuteur, kGTD and the app I’m working in.
Fresh Air – I keep a window open, which not only circulates fresh air but keeps the room at a pretty cool temperature.
Drink tea, drink water. – I drink plenty of water (2ltrs per day) and I always have a pot of Chinese tea by me when I’m working. It helps me think. (A cup of caffeinated tea is a good way to wake me up if I’m a little groggy.)
Take regular breaks – I take time out to sit, smoke and think about what I’m doing.
Compete – I make sure I compete with myself. Dave Seah’s PCEO works well for that. I also have my own system for judging how well I’m doing today.

So, how do you focus on the task in hand?

Self Confidence

Sun, 10 Sep 2006 00:00:00 GMT

It’s amazing how a lack of self-confidence in one area of your life can quickly transcend and affect various others.

A few weeks ago I was rather unhappy and lost confidence in myself with regard to certain areas of my life. I found that while I was still as able to, for example, lead cadets, my confidence in myself to do this rapidly diminished, as a result of my other problems. This caused me to appear shy which did in fact impact on my ability to lead. The same, of course, is true in reverse – as I’ve gained confidence in myself in certain areas I’ve gained it in others.

So the moral of the story? Don’t lose faith in yourself and use areas you’re confident in to help you with those you’re not. And watch out for the downward spiral leading to total lack of belief in yourself.

And this too Shall Pass

Sat, 09 Sep 2006 00:00:00 GMT

Attributed by some to Abraham Lincoln and others to the Kung Foo masters, the phrase “And this too shall pass” appeared in the Bible, engraved on a ring given to Solomon.

What a wonderful way of dealing with both bad and good times – It reminds me that the happiness I have is fragile and could disappear at any time, motivating me to work to keep it. It also gives me hope when I strike bad times – knowing that they will pass does a wonderful job of raising the spirits.

“And this too shall pass”

Always remember it.

Balance

Tue, 28 Feb 2006 00:00:00 GMT

Last night I was supposed to give a young lad a lift to cadets. I forgot.

Aside from inconveniencing the cadet and pissing off my boss it got me thinking. Everyone was saying “that’s very unlike you”. and they’re right – it is.

After leaving the Squadron I sat and smoked and pondered for an hour or so, concluding that actually, I’m not really happy at the moment – I don’t have the right balance.

Although I’ve been very organized lately, and I’m moving all my projects along at an unprecedented speed, I’m just not that cheery. In an effort to understand the reason for this I wrote down the things that I think aren’t so good:

I’m in debt by about £1,500.
I don’t have a fixed job so I can’t pay back the money. It also makes me wonder what I’m doing with myself.
I have a girlfriend that I only see at weekends – she lives 40 miles away.
I have been working on a website for a customer and haven’t moved it on in ages. It’s an urgent project but it’s gone a little stale.
I’m always feeling that I should be somewhere else, doing work.
I have nothing sorted out for my move to University.
This guilty feeling means that whenever I’m out with friends I don’t really enjoy myself, I keep thinking about these problems.

So, now I’ve identified these problems I need to address them…

Today I confirmed a place at Sussex University and defined a bunch of Next Actions for the move. That’s one point addressed then. I also applied for a job as a postman, addressing my first and second points. I applied a new theme to my blog, getting the thought of it off my brain and allowing me to fully concentrate on the “stale site”.

As if that wasn’t enough I cleared a bunch of surplus clothes & kit out, giving me a nicer environment in which to work and banged off a whole bunch of little things I have to do, clearing my mind of it all.

I feel sure that when I have a steady job and I’ve finished this project, I’ll be far happier to go out and have a drink, and will accept more easily the fact that I only see my girlfriend at the weekends.

So it seems that the first step to dealing with problems is to identify them… pretty bloody obvious really.

Smoking Ban

Wed, 15 Feb 2006 00:00:00 GMT

I can’t believe it. The oh-so-wonderful government has decided to ban smoking in all enclosed public places in the UK. The bill was passed by the Commons yesterday but has yet to get through the Lords. No doubt our wonderful PM will find some way of circumventing the lords as he did with the Fox Hunting ban.

Simon Clark said to the BBC:

“People will continue to smoke and the idea that people are all going to give up smoking simply because they can’t smoke in a pub is nonsense. One of the problems with the ban when it comes in, will be that people will move into the street, they’ll smoke more at home, and it could end up being counter-productive.”

How true. While I’m a smoker (with no wish to give up) I don’t smoke in my house, I know that if I allowed it I’d smoke so many cigarettes that I’d soon be dying of cancer and broke to boot. At the moment, I smoke one on the way to work, one at lunch and one when I’m finished work. I’ll then have three or four over a pint in the evening and, if I’m up late, one before I hit the sack.

If I’m not allowed to enjoy my three or four over a pint in the evening then, no doubt, I’ll visit the pub less often. Although this would probably do my liver some good, it would reduce the number of customers the pub has, and would also (I suspect) lead me to begin smoking at home. I spend, on average, an hour a day in the pub. That means I spend, on average, an hour a day smoking heavily. Should I begin to smoke at home I’d spend, maybe six hours a day smoking heavily.

Of course, I could limit myself to one room and use it as a “pub replacement”, but what room? Certainly not where my desk is – I’d be smoking all day that way. The kitchen then, where all the food is prepared? Or maybe the living room – where the non-smoking guests come to talk. It looks like I’ll be smoking in my bathroom then!

Aside from the personal inconvenience this bill might cause, I object morally to the idea of a ban. What right does a bunch of suited politicians have to tell me that I can’t smoke in my local pub? If the pub owner is fine with people smoking there then why the hell shouldn’t people smoke there? The government’s “lets ban everything” philosophy leads me to wonder if we’ll have the secret police knocking on our doors. Whatever happened to freedom and personal choice, eh?

The BBC has a whole host of articles relating to the Ban.

SuprGlue

Sun, 05 Feb 2006 00:00:00 GMT

A few months ago It struck me that I use a lot of web based software and there’s a bunch of my stuff published online somewhere. “Somewhere” – that’s the problem, my photo’s are on flickr, my bookmarks on del.icio.us, my writing on one or two different blogs and a bunch of other stuff is elsewhere.

SuprGlue is a nice little service which provides a means for you to clump all of your online social activities together. Right now it syndicates my photos at flickr, my bookmarks at del.icio.us, my things at 43things, my music at Last.fm, my events at upandcomming.org and my writing on this and my old blog.

SuprGlu then displays all my activity across these services for an individual day. It’s a pretty simple concept really.

The Iridesco website describes SuprGlu:

SuprGlu is a simple online tool for users to gather the disparate content they’ve contributed to the social web. Users are able to “stick” together their blogs, bookmarks, photos, and other personal breadcrumbs they leave around the web, and share their neatly chronicled online lives on their SuprGlu pages.

Although I don’t much like any of the templates available you’re given the opportunity to edit the CSS for your page in the SuprGlu admin panel.

You can find my SuprGlue page here.

Konfabulator Widget: YubNub i (1.0)

Tue, 10 Jan 2006 00:00:00 GMT

Over the last few weeks I’ve been using a nifty little web service called YubNub, it’s basically a command line for the web and while it’s not as astounding as it might sound it does make it a little easier to do certain things, especially from the search bar within firefox. I use it all the time – so much, in fact, that I’d really like to be able to use it from the desktop…

Enter Yahoo! Widget Engine (catchy name, no?).

Except nobody’s made a widget for yubNub yet, strange considering how easy it is to create a simple search widget. To fix this chronic lack of yubnubwidgetness I’ve whipped together a simple search widget called YubNubi. Maybe one day I’ll add some crazy functionality to it but at the moment, all it does is search. Plain and Simple. You type your query or command in the box, hit enter and yubnub will execute the command and display the results in your default browser.

The widget is at version 1.2 at the moment and you can get it from the widget gallery.

After the first release I made a few changes to it – I added an about screen and different graphics and tidied up the code a little. Shortly after it gained the .2, it was announced on the yubnub blog.

So, If you’re into YubNub and use the Yahoo Widget Engine, go ahead and have a look.

Links:

Brain Upgrade

Fri, 16 Dec 2005 00:00:00 GMT

I heard a few hours ago that the average human brain has 116GB of data storage, and 16Mb of memory. Aside from thinking that 116Gb isn’t very much considering the amount of stuff we can remember, I wondered if you could upgrade your brain. After a bit of googleing I found yes, you can…

http://www.bigbooster.com/articles/brain_upgrade.html – Upgrade your brain.
http://www.beyondhuman.com/ – Learn new super-powerful skills.
http://www.buildfreedom.com/tl/tl11.shtml – how to increase your intelligence.
http://www.buildfreedom.com/dir_clear.htm – Clear your minds reports.
http://www.learningstrategies.com/PhotoReading/Home.html – Read 25,000 words per minute (crazy, I think).
http://www.beyondhuman.com/scheele-reading1.htm – Easy tips for faster reading.

Backing up your Firefox extensions (on windows)

Wed, 14 Dec 2005 00:00:00 GMT

It’s always been a source of irritation to me that whenever my FF installation breaks, or if I decide to reinstall it, I have to hunt down and reinstall all of my thirty-six extensions. If you’re running Windows you can use the following method to back up your extensions:

Create a batch file (open notepad and save the file with a .bat extension) with the following code:

del C:\PATH TO BACKUP FOLDER\ffarchive.zip
7za a -tzip C:\PATH TO BACKUP FOLDER\ffarchive.zip -r "C:\Documents and Settings\YOUR USER NAME\Application Data\Mozilla\Firefox"

Name this script something like ffbackup.bat and put it in the C:\WINDOWS directory (or anywhere that the windows PATH points to). To run the script you can simply type “ffbackup” at the command prompt or in the run box.

This script uses a command line version of 7-Zip, a free WinZip-type program. The first line of the batch file deletes the current archive and the second replaces it with a zipped up version of your Firefox application data.

If you’re interested, the “a” specifies that files are to be added to the archive, the “-tzip” specifies zip as the archive format, the “C:\PATH TO BACKUP FOLDER\ffarchive.zip” is the path to the backup that will be created, the “-r” tells it to zip up the subdirectories too. The “C:\Documents and Settings\username here\Application Data\Mozilla\Firefox” is the path to the data which needs to be backed up.

If you clear the cache, history & cookies and ensure that Firefox is closed before you run ffbackup, you’ll help reduce the size of the archive produced.

Steps:

Download 7-Zip Command Line for Windows (Unzip it to C:\WINDOWS)
Create the ffbackup.bat batch file (also place in C:\WINDOWS)
Run it.

Danny Smith - Articles & Notes

DHH’s new way of writing code

Theo: Open source is dead now?

Cobalt Next for Zed

Switching back to VSCode

How I use a text editor in April 2026

My “new” VSCode setup

Quoting: An appreciation for (technical) architecture (Interconnected)

Roberts Radios

It also runs a webserver!

Building a macOS menubar app

Alex Piechowski: How I Audit a Legacy Rails Codebase in the First Week

Minecraft Bluemap Plugins & Managing a Minecraft Server

Bluemap Structures

Bluemap Chunk Trimmer

1. Heatmap

2. Chunk Selector

mc-infra

1. Manifest System

2. Control Scripts

3. Setup Scripts & Dev Tooling

4. Monitoring Web App

Wrapping Up

Tracking Biggles Books

Managing my collection

Reflections

Code has always been the easy part | Quoting Kellan Elliott-McCrea

Stop Calling LLMs "Junior Developers." They're Monkey Paws. | Pere Villega

Quoting Jasmine Sun on My Claude Code Psychosis

Claude Code hallucinating like it's 2024

Brief Context

So what’s going on?

A Social Filesystem by Dan Abramov

Quoting Jim Nielsen: To Make Software Is To Translate Human Intent Into Computational Precision

Quoting Tomasz Tunguz - The Text Box Isn't Enough

Introducing Astro Editor

What is it?

Why?

But why?

Where we at now?

So what’s Next?

Like & Subscribe plz

Quite The Journey

The Future of Software Development is Software Developers

Consolidating Claude

My Personal Plugin

1. agents/

2. commands/

3. hooks/

4. output-styles/

5. skills/

MCPs

What’s left in dot claude?

Global CLAUDE

Global settings.json

Avoid Mini-frameworks - laike9m's blog

My Global Raycast Snippets

!ultra

!starttodo

!iso

!gd and !gdos

!eraf, !ehi and !mob

!meet, !zoom and !linkedin

!a1, !a2 and !ap

Quoting Sean Goedecke on Becoming Unblockable

Using Claude Code to pull old articles into this Astro site

Major Update to Tauri Template

How AI Is Transforming Work at Anthropic \ Anthropic

The Great Software Quality Collapse: How We Normalized Catastrophe

I'm glad people still make things like this

"Helpful rather than hurtful to the interests of mankind" – Richard Rutter

Jim Nielsen: Grow, Like a Tree Not a Cancer

The only winning move is not to play

A Good Read: Using LLMs at Oxide

Build Your Own Database

Josh Farrant's Weblog

Quoting Simon quoting Steve Krouse

How Did I Get Here?

Quoting Cubic: The real problem with AI coding

Frank Chimero · Selling Lemons

`!ultra`

`!starttodo`

`!iso`

`!gd` and `!gdos`

`!eraf`, `!ehi` and `!mob`

`!meet`, `!zoom` and `!linkedin`

`!a1`, `!a2` and `!ap`