24letters

How I think about my automations like a pyramid

Thu, 27 Aug 2026 11:57:14 GMT

LLM agents make it possible to automate so much more than before. The reason for this is that they add a level of flexibility possible that wasn't possible before. The way I think about this is as a pyramid. When you want to automate a digital task, think about it in these levels:

Prompt
Skill
Product

First level: Prompt

When you first want to automate something, just ask the agent. Fire up Codex or Claude Code and ask it to do the thing you want. This is really useful for one-offs. For example, "I have this folder of documents, give them all titles based on the contents". I use that prompt after I scan paper documents I received. iOS names these "Scanned documents" and prompting is faster than thinking of a name. And the name isn't that important other than that it should be good enough to recognize what is in it. But this kind of document I probably only read once.

Second level: Skill

You reach this level when you notice yourself writing the same prompt over and over again. A great example of this is Matt Pocock's grilling skill. Instead of asking "Ask me questions about this", you invoke the skill with /grill-me and the result will be a little bit more rigorous and consistently formatted. You don't have to use his skill, you can make your own with your own preferred format. The main idea here is that you don't have to specify all your preferences every time.

Third level: Product

The moment you have a consistent process that needs to be handled deterministically, this is the place to go. Build your own private-first product. This is the level where you get nice UIs, good visualizations and consistency. The product will always work the same way, assuming you spend some time hammering out the bugs. Some of my own examples are: Checklister, an app I made to really quickly create repeatable checklist templates. 4Daagse tijden, an app to see at what time to spectate the 4Daagse. And OmniConverter, an app to quickly convert quantities. They are extremely personal products, but creating them is way cheaper than before LLMs.

Bringing it together

I've seen a lot of people intuitively navigate these levels already. But I've found the mental model helpful to categorise and structure my own thinking of how to automate digital processes. May it help you too.

How I use checklister

Thu, 29 Jan 2026 00:00:00 GMT

I've just published checklister, my app to create and execute repeatable checklists. It does nothing more, nothing less. I created it because I had my own need for it.

I used to handle these things in OmniFocus. When the script broke I used for creating new projects, I was in limbo for a while. Since AI agents it is much easier to create personal software. So I did that. I've been using this project for while, but wanted to polish it before publishing. That's done now, and you can use it for your repeatable checklists!

I use it for two things: Packing lists and my weekly review checklist.

Packing lists

I go on different kinds of trips. These trips usually have shared items and unique items. One thing everyone always needs are toiletries, so that's a shared item. That's why I created a composable list feature: packs. With packs you make a smaller list that you can then use within the main checklist template.

Packs look like this when editing a template:

When you create a checklist from this template, the items in the pack and other items in the template are combined into one coherent checklist. This makes for no-distractions checking off:

Weekly review

This is a much simpler checklist that handles my weekly review. Some of the tasks on there are: looking back, looking to my goals, and planning my week.

The weekly review checklist is inspired by the books Getting Things Done and GRIP. The review keeps me anchored to my goals and allows me to do all the tasks I set for myself.

If you start using checklister too and get some use out of it, let me know!

On the resonant computing manifesto

Fri, 12 Dec 2025 00:00:00 GMT

The Resonant Computing Manifesto lacks soul. The humanness it professes to want it itself actually lacks. When I read it I felt emptyness inside.

At first I only noticed superficial details. Why is it using Times New Roman? Why does the design feel lifeless? Why does the text feel corporate-y?

I started looking inward to see if the problem was me. So I decided I should look at a manifesto that I actually like, The Agile Manifesto. And my first reaction was, I think I know where they go their inspiration from.

And I think what bothers me about the resonant computing manifesto is that it lacks taste. I don't profess to be an amazing writer, but I also don't write a high-in-the-sky manifesto that aims to change the world.

One thing I love about the agile manifesto is this quote:

We are uncovering better ways of developing software by doing it and helping others do it.

This is a statement of the now. A vision is only valid if you live it. The resonant computing manifesto doesn't feel lived to me.

So I'm left with: Just do it. Instead of writing this manifesto, live it. A great example of a group of people that lives it are the people at 37signals ¹. They just released Fizzy and it feels thorougly "great human software" to me.

So built something that people actually want and is great tech!

Footnotes

I do want to distance myself from some of the politics surrounding some of the people. I disagree vehemently with some opinions. But oh do they make great human software. So on that specific area, they are a huge inspiration. ↩

The Power of Models

Thu, 04 Dec 2025 00:00:00 GMT

I used to be allergic to models. Driven by models such as MBTI that sometimes are like horoscopes, I developed a big skepticism toward models.

That started to change for me when I heard about the quote “Every model is wrong, but some are useful.” It didn’t land for me completely then. But the moment I realized every model is by necessity wrong is when it clicked.

The moment I realized the true weight of the first part: “Every model is wrong”. Even models that I hold in super high regard: The atomic models, the model for electricity (V, A and R), and even my own models for software.

They are all true on some level, but they are also all wrong. And that’s because of the other quote: “The map is not the territory”. Because if it were, it would be the territory by necessity. It can only be a map by omitting details. And that makes it wrong in some sense.

So thus, the next time you hear about models, think: “Every model is wrong, but some are useful.”

WordPress has earned its security reputation

Thu, 26 Jun 2025 00:00:00 GMT

I read a post recently about the security reputation of WordPress. In it, the author argues that WordPress mostly has a security reputation problem, not an actual security problem. I disagree, I would argue there are actual problems with the way WordPress is built technically.

My argument for that is simple:

Defaults matter
WordPress has insecure defaults.

Let's get into the details.

WordPress has insecure defaults

When a new WordPress developer writes a theme or plugin, they might write the following:

<h1><?php echo $post_custom_title ?></h1>
It's a natural piece of code to write. I want to put this on the page, echo puts thing on the page, I write echo. And now you've made insecure code. Through no fault of your own, you just didn't know of the existence of esc_html. The secure way to write the same code is this:
<h1><?php echo esc_html( $post_custom_title ) ?></h1>
Even if you know what the secure version looks like, it is easy to still write the insecure version. It is like walking in a minefield, any misstep will result in an insecure code path.
What does a secure default look like?
In React the naïve code looks like this:
<h1>{postCustomTitle}</h1>
That is secure by default. Because React escapes everything, any >, " in the content will become an HTML entity. The insecure version of the above example looks like this:
<h1 dangerouslySetInnerHTML={{ __html: postCustomTitle }} />
Everything about the above signals to the user that they should know what they are doing before endevour in this direction. dangerouslySetInnerHTML instantly signals that this is some kind of dangerous operation. Having to put __html as a key in a object, makes it hard to do accidently and the ergonomics of it are annoying. It is friction in the direction of doing the secure thing.
Another benefit of the signal is that the user is more likely to stumble on the educational materials on how to make dangerouslySetInnerHTML secure when you use it. The React docs have this paragraph at the top of the explanation for this prop:

This is dangerous. As with the underlying DOM innerHTML property, you must exercise extreme caution! Unless the markup is coming from a completely trusted source, it is trivial to introduce an XSS vulnerability this way.

It links out to the wikipedia article about XSS, so the developer has a chance to learn about this term and the dangers of it.
WordPress is full of these "insecure by default" paths. So it is no wonder that many plugins are insecure. Solving this by fixing security incidents is a game of whack-a-mole.
Defaults matter
Everyone starts out as a beginner. Literally, when you are born, you know nothing about anything. Gradually you learn about the world. The same is true for new WordPress developers.
Time and time again when companies publish statistics about settings, it turns out 90-95% of people left the setting in the default.
Combined with the above, for WordPress I imagine it to be something like the following picture. Taking the hard path is walking the stairs. The easy path is more akin to sliding down a slide. And when you are at insecure code, usually the only way to get to secure code is by climbing the "security incident" ladder.

For the more visually inclined people, I've asked an LLM to make an illustrated version.

What to do about it?
It's hard to know what to do about this. The WordPress code is vast and it is hard to change defaults now. Implementing something like Blade will alienate a ton of WordPress developers. What we shouldn't do is imply it's merely a reputational or perception problem. While the noise is likely overselling the security issues of WordPress, there are actually problems with WordPress's security hygiene.



Archived HTML5 RTS
Sat, 12 Apr 2025 00:00:00 GMT
Back in 2010, in highschool, I worked on trying to make an RTS in the browser. Canvas was fairly new and I was super excited about the potential there. "How do you draw a diagonal line in the browser?". Don't skip out on the intro video for Google IO 2009, it was great, a celebration of the web.
This is an archived log of some development blogs I wrote for the project. Newest first.
May 2, 2010 - HTML5 RTS
http://www.youtube.com/watch?v=Ir4xZa__FEY
This is a huge update in case you didn’t notice, the updates in a list:
Canvas goes full-browser, and when the browser goes full screen the canvas goes full screen.
A background, a scrollable map.
A minimap, easy to make. Nice to have.
Performance, performance, performance. Wow, I had some redundant code, can’t believe it.
If you have suggestions for me, add them in the comments of the YouTube video.
March 21, 2010 - HTML5 RTS
http://www.youtube.com/watch?v=b3m2-gF3xwI
I’m so happy, I figured out the problem that I had with the maths I did and now my formation system works. Yay.
March 16, 2010 - HTML5 test 3.14 (PI day) Turnings
http://www.youtube.com/watch?v=5OXKUWwKhBE
Been busy again, a task system is in place. I could do path finding, which is still above my head but it would be easy to make once I have an algorithm to calculate the path.
But now I use the task system to make the units turn and then move and then turn again.
March 14, 2010 - HTML5 RTS test infantry
https://www.youtube.com/watch?v=IaX_S1wmAUo
I have tested the extension of my GameObject object by making Infantry, now GameObject has a tank sprite but that will be a white box.
I have also added the basics of an arrow for the flag which will define what direction the units will stand.
March 13, 2010 - HTML RTS test 3
http://www.youtube.com/watch?v=cI6gCfJ0-VA
I added sprites now, NIIICEE
March 13, 2010 - HTML RTS test 2
I proceeded on the idea of the HTML5 and JavaScript RTS. I am surprised how clean the code is.
I had to think about my math skillz before I could make the objects turn and stuff but now I did it. I should add collision of sorts.
March 13, 2010 - HTML5 RTS test 1
http://www.youtube.com/watch?v=8hZgS5E4KvU


How to create a period selector, a comparison
Sat, 04 Jan 2025 00:00:00 GMT
As software builders we have tremendous choice in how to present our user inputs. I recently was talking about how I think Moneybird is a 9-9.5 as a product and Exact Online is a 6. I've written before about Exact breaking the browser back button. One of the UX examples I cited was the period selector. Let's start with showing you the Exact Online one:




It is super basic. You click the period and a dropdown opens. At least the dropdown only closes when you click somewhere else on the page.
If I had no point of comparison, I would say this is ok. I don't regularly think about period selectors, so one could assume this is the best software has to offer. Having said that, the problems start when you want to select multiple quarters. A basic bug is that the dropdown doesn't show the year when it is closed. More fundamentally, I have to consciously think fairly intensely about which quarters I want. Then I realize that I need to put in 1-4 in the text fields. I first tried to write "Q3" and "Q4", but good thing is that the fields are number fields.
Let's compare this to how Moneybird does this same task:

It is instantly clear to me that the current selection is Q1 of 2025. Because of the visual nature of the timeline I don't even have to think about which months are contained in a quarter. While using this selector, I have never had confusion about the period I have selected. It is always clear. The one thing I had to learn is how to change the years that are displayed. The green arrows next to year change the year, which was non-obvious to me when I first learned this selector:

The advantage of this setup is that it also makes arbitrary ranges possible.
Neither control offers support for arbitrary dates. This is expected, because in bookkeeping software reports you really never need arbitrary dates. Nearly all reporting is done on either a monthly, quarterly or yearly basis.
The one drawback I can immediately see of the Moneybird period selector is accessibility. It's exceedingly likely that that one is harder to make accessible. If it even is accessible. I would love to know whether it is accessible, or how an accessible period selector would work.


Context Unaware Notifications
Wed, 18 Dec 2024 00:00:00 GMT
I got the following notification: "🚨 DAILY DEAL: FREE HOTDOG Because you're a member, valid today!" Now, in general I am not a fan of random notifications to sell me stuff. Even though it's great for the bottom line of the company, it's horrible as a user experience.
I have a bigger issue with this notification though. I'm a vegetarian, so I will never be interested in a hotdog. As a food company, it shouldn't be too hard to glean my dietary preferences, given the amount of total lifetime orders I have.



Better Defaults
Wed, 11 Dec 2024 00:00:00 GMT
I've just been annoyed for the umpteenth time by Google Calendar's default to Sunday as the start of the week. When I started looking at the settings, I noticed it got the time & date format wrong too:

The vast majority of Dutch people use: day/month/year, 24:00 notation and Monday as the start of their week. It already knows I am in the Netherlands. How hard is it to default to these settings?


Podimo hates iOS apparently
Thu, 05 Dec 2024 00:00:00 GMT
When you walk around with your AirPods, Siri will announce your incoming messages. It's super useful, as I have a very strict notification policy. I curate my notifications to prevent unimportant ones. So every message that's announced is important.
Podimo has made the baffling choice to keep playing your Podcast while the announcement is happening. Allowing you to understand exactly zero of the two sounds that are being pumped in your ear.


Structure vs no-structure
Thu, 05 Dec 2024 00:00:00 GMT
I'm trying to use Cursor, as it is supposed to be awesome. Recently I had a simple request: Find the version of TypeScript I was using. So I opened the VSCode settings:

And searched for TypeScript:

Every time I try to do anything in the VSCode settings I become disoriented. The sheer amount of settings overwhelms me every time. Contrast this to the structure in the PyCharm (which includes WebStorm) settings:

As an extra bonus, it highlights the word that you searched. Making it super obvious why this is a result for the query:

I would love to use Cursor as a daily driver, but so far I've been struggling with the fact that it is VSCode in the end.


Exact Online Back button
Wed, 04 Dec 2024 00:00:00 GMT
In Exact Online, when you click the browser back button you do not end up at the screen you saw previously. This breaks a fundamental expectation of how browsers work. I regularly lose my place when trying to navigate within Exact Online.


The software metaphor
Wed, 01 Dec 2021 00:00:00 GMT
A good senior Software Engineer fullfills the roles of a writer, an engineer and a gardener. What are these metaphors and what do they speak of?
As a writer, they have to weigh every word, every sentence and every paragraph.
As an engineer, they have to consider the cost, the structure and the architecture.
And as a gardener, they need to consider the future prospects of the project, how the software grows and how much weed has grown over time.
I consider each of these perspectives equally valid metaphors for software. All have limitations, drawbacks and benefits. However, together they can speak loudly about how we should consider Software Development. So what are these metaphors and what do they speak to?
The writing metaphor
Write code for the reader, not the writer. You could easily replace code with another word and the advice could equally apply to a distinguished author. But it goes further. Being a writer comes with inherent tradeoffs.
software engineers are authors
Writing something elegant could deter from its accessibility. For example, consider the previous sentence. If you don’t know the words “elegant” or “accessibility”, it’s hard to read. So writing harder words makes the text harder to read.
The same goes for code: using an obscure language feature makes your code harder to read. However, jargon is good actually! It’s what DHH calls “Conceptual Compression”: Because you compress a complex system into one concept, it makes taking further steps simpler.
In that way, coding is like philosophy, which is mostly writing, which is mostly thinking clearly. You are modelling the world. As a writer with words, as a coder with code.
The engineer metaphor
Software engineers are engineers, that one is the easiest. I don’t have to make this point again, because other people make it very compellingly.
Cost vs Time vs Quality
The real of the standard engineering tradeoffs is: Costs vs Time vs Quality. We see this tradeoff in every engineering domain and software isn’t different. However, because software is so abstract to so many people, we can use this metaphor more often.
Instead of your issue becoming an abstract “programmer says no”, you can use the engineer metaphor to make a problem visceral. For example, I once used the description: “What you are asking me is to take a stone in the middle of the wall and put it on top.” The project manager in this case understood immediately.
The metaphor works equally as well when describing the “DIY vs professional”-tradeoff. DIY being do-it-yourself here. Nobody should object to a DIY shed in your garden. And everyone should object to a DIY skyscraper. The problem with some DIY sheds in software is that they turn into skyscrapers over time. If the underlying methodology doesn’t improve, you get very unstable buildings[1]. And as long as this isn’t acknowledged by leadership, you get very jaded engineers. Because those engineers can see the DIY mess for what it is.
The gardening metaphor
I’ve been familiar with the meme “boyscout principle”. Boyscout principle means that you leave the software better than you found it. The gardening metaphor works on more levels. The one difference from a real garden and a software garden is this: if software isn’t worked on, the garden is frozen.
With this in mind, the gardening metaphor works as follows:

Features of the garden are features in software.
Technical debt is like weeds in the garden.
Planned gardens will not work without maintenance, and it’s better to let them grow organically with a vision. (Agile)
Adding new features to a garden without ever weeding, will eventually make your garden a complete mess.
A small garden can do without signs, but a park needs maps. The same is true for software documentation.
The complexity grows exponentially with size and scope.
Beauty is in the eye of the beholder.
When you plant the first seed, you will never know what it will become.

I think the garden metaphor is especially useful for explaining agile. Agile was a giant breakthrough and it’s where software is distinct from other engineering disciplines.
Conclusion
These metaphors help you think and help explain software to a layperson. I believe we have a responsibility to make software accessible to everyone. And that begins by having language that bridges the gap between jargon and broader speech.


How to create a Trix custom toolbar
Wed, 05 May 2021 00:00:00 GMT
Trix
Trix is a WYSIWYG editor that seems to use the same architectural model as DraftJS. Instead of working around quirks in contenteditable they both have an internal model of content and apply transformations on this content. I’m currently working on a project in Rails and wanted to use idiomatic tools, so decided to use Trix for my WYSIWYG needs.
The default styling of Trix didn’t fit the styles I wanted and I also wanted to hide certain formatting tools and maybe add some. The obvious solution is to hide buttons with CSS, but this didn’t feel correct. I like my software to have internal quality. It also isn’t a solution for adding buttons. So what’s the solution instead?
Trix APIs
When solving such a problem you are always limited by the APIs provided by the library you’re using. In this case after searching for it I found a clarifying comment in the Trix issues:

Set the toolbar attribute to your own element and Trix will use it rather than providing its own: 

So I provided toolbar attribute and and copied the default toolbar HTML to my toolbar container. If you wrap all this in a trix-toolbar element you even get the styles that trix has built-in. So that would look like this:
\[Default Trix Toolbar HTML\]




You can then go ahead and modify this HTML any way you would like. For my use case I’ve removed all buttons except “Bold”, “Italic” and “Link”.
Underline
There are good arguments not to add an underline button. That’s why the Trix toolbar doesn’t come with an underline button. However, sometimes you have to do something which isn’t ideal. Adding an underline button is a two step process. The first step is registering a new text attribute:
import Trix from "trix";

Trix.config.textAttributes.underline = {
style: {
textDecoration: "underline",
},
inheritable: true,
parser: (element) => {
const style = window.getComputedStyle(element);

        return style.textDecoration === "underline" ||
            style.textDecorationLine === "underline";
    }
}

This will let Trix know how the underline text attribute is going to work. Then, you can add a new button to your toolbar with data-trix-attribute="underline" and it will work:


Concluding
Trix is a nice, simple editor that’s easy to style and make your own.


Cycle superhighways
Mon, 13 Nov 2017 00:00:00 GMT
I’m in London. As a dutchie I love my bicycle and riding it. So what do you do? You ride a bike in London.
The software of the renting poles can be improved qute a bit. I tried to rent 2 bikes. One for me and one for my girlfriend. Everytime I tried that the software crashed on me. Luckily renting one bike worked. then I used the app to rent another bike.
So we went on our merry way. The pricing is very fair. You rent one bike for 24 hours. This costs £2. Every trip with it within 30 minutes is free. Any longer and you pay £2 per 30 minutes. So as good tourists we kept all our trips within 30 minutes and could ride our bikes for £4 all day.
London isn’t Amsterdam. It feels really dangerous to step on a bike here, but it is getting better. There are now these things called cycle superhighways. In the Netherlands these ‘highways’ would be called regular bike paths. And the highways end fairly randomly and then you have no idea where you are going. It feels too much like an expedition. Which is a good for a tourist, bad for a commuter.
But while the tourist sees all the streets for the first time. The commuter can explore all roads and plan a safe route. Then biking becomes a real option. As an alternative to the hot London underground. But the best thing is to combine those two. The cycle superhighways have good signage where underground stations are.
I think cycling in London is here to stay. I really look forward to visiting London again in a few years to see how everything had improved. In the Netherlands we are spoiled, and it is really exciting to see other countries following the lead.