Human comprehension is still the bottleneck
All this talk about how AI can build a whole whatever with $120 of credits and a day is beside the point - the bottleneck is how fast we can understand things
Black Sheep Code
Modern web development - testability, extensibility, declarative APIs, declarative code from open specs and more.
Latest posts
Does this tool exist? A tool for comparing/testing the difference between LLM harnesses, models and prompts
All the talk in the world about certain prompting techniques, models, or workflow strategies isn't very useful unless you can actually measure it
Some problems only exist when you are new to the organisation
New people to the organisation have fresh eyes and can spot issues that old hats might well be used to. But those things don't necessarily need to be fixed.
Where are the prompts to stop humans going off the rails?
Humans are just as finicky as AI
The case for adding a 'this file was generated by AI' header
It helps not gaslight anyone reading the code
The case for clear code ownership
Clear code ownership = developers proud of their work, high quality code
Psychological pitfalls of using artificial intelligence - a heightened sense of urgency
AI can provide a lot of content very quickly, and we can feel the need to match its pace.
A shield or a cudgel?
A dynamic I frequently observe is that the project manager becomes a cudgel against their team members, rather than serving to protect them from the rest of the organisation.
Reasons to be a token miser
There is a school of thought that says 'Just throw money at the problem' - here's why you should be constantly optimising your token usage.
The time required to wait for a job to complete - changes the workflow for how you do it
There's a big difference between a job that takes one hour, vs a job that takes one minute vs a job that takes less than a second
Agentic AI - yak shaving on steroids
The prospect of having agentic AI do all the real work means that we now focus on tuning the AI, not delivering the work.
Advice for someone looking to get into software engineering
This is advice I have for someone who is either pivoting career or has finished high school and is looking at university options.
Encapsulate as much state as possible in your component
A common pattern I see is passing every bit of a component's state in as a prop. This just puts the responsibility of that component's actual useful logic on to the parent.
The nuance of React rendering behaviour as it relates to children
Components that are passed as props.children and components that are directly declared by a component have different rendering behaviour - yet they are both just called 'children'. The adoption of React 19's compiler might mean that this distinction does not matter.
Tools I like: @inquirer/prompts
@inquirer/prompts is a JavaScript library for creating interactive CLI prompt menus
I'm apprehensive about using too many AI-generated images in my blog.
I'm worried that the blog will look samey and like more-ai-slop-everywhere.
Reasons to not use GraphQL
GraphQL is one of the cool kids in modern web development - but I generally recommend against using it.
It is better to have the same meeting four times with four people each, than to have one large meeting with sixteen people.
If some idea or decision needs to be socialised amongst many people, it may be tempting to get everyone into one meeting and sort it out in one go.
Delete a range of commits
The --onto option of a git rebase can be used to delete a range of commits
Conference notes for Web Directions Code 2025 - The behaviour of browsers and their loading of resources.
Links to documentation and open issues.
How to add an experimental feature to your code, without having it in your main version control
You might have a really good idea, but its not practical to get it commited to version control. You can keep the feature around for local use with some shell aliases and git commands.
No, react context is not causing too many renders
A lot of people are under the impression that context shouldn't be used to store state, because it'll cause the entire application tree to re-render. This is a misnomer.
At least write one test.
The value of writing one test isn't in testing the code's correctness - it's in testing its consumability.
I'm going off MDX for blogging
I like standardised formats like markdown. MDX allows markdown, plus sprinkle in some React. However, I'm considering that maybe I'd be better off just using React.
Well designed code is easy to delete
The mark of some well designed code is that the act of replacing it is some what straight forward.
How to prevent further modification commits to a file with a pre-commit hook
Sometimes you want to prevent accidentally modifying sets of test fixtures etc. Use this simple pre-commit hook to prevent it.
Tools I Want: A VSCode plugin that highlights how often an error appears in Sentry, or other monitoring tools
I liberally throw errors defensively, often not expecting the error scenario to ever actually occur - it would be nice if I could see some real metrics about how often a thing is occurring, without having to leave the IDE.
The tool I want to exist - an API mocking tool that generates mock data by observing real world usage.
Mocking API calls, particularly multiple interlinked calls can be cumbersome. I want a tool to do it for me.
If I were building a start up from scratch, these are the things I would include (or have a plan to include).
The easiest time to include something in your application is at the start. On the other hand, you're likely time-poor and there's no point on burning all your runway on a gold-plated hello world! application.
Good idea: Loading screen tips for developers
Video games commonly show helpful hints and tips on loading screens. Developer tools should contain the same.
React testing patterns: When making a change to a leaf component breaks tests further up the tree
A common pain point in testing React applications is when we make a change to a component that exists down the component tree, and this change causes breaks in multiple components that directly or indirectly consume this component. Here we outline some strategies for mitigating this problem.
Module behaviour in browsers - loading waterfalls, module preloading, cache invalidation cascades and import maps.
Browsers now support ESM modules natively - meaning that we no longer need to bundle our modular code. However be aware that naive use of ESM modules may lead to unperformant loading waterfalls. Our options: bundle, use dynamic imports, or preload our modules.
How to create an imperative useConfirmationModal hook
Avoid a bunch of state hooks and handlers in your code for things like confirmation modals by encapsulating that kind of logic away in a hook.
Examples of tooling that do not play nicely with ESM
EcmaScript Modules (ESM) are well established - leading some to argue that we no longer need to provide CJS packages. However, is that really the case?
Two caching strategies
There are generally two strategies for caching, 'cache, but require validation' and 'trust what you've already got without caching'. The latter is well suited for caching static assets.
Assume the next developer will copy paste what they see you do. (That next developer might be you.)
It's not a criticism of developers to suggest that they'll copy paste what they already see in a codebase. Programming is complex and we'll use whatever hueristic we can to reduce what we need to think about.
The behaviour of browsers and loading resources - Scripts
JavaScript scripts cannot be evaluated until they have been completely loaded. By default they are parse blocking.
The behaviour of browsers and loading resources - HTML, images, and CSS
Browsers do not need to wait for an entire HTML document to be loaded before it can display it. CSS is render blocking. Images will start streaming as soon as the tag is encountered.
TypeScript - indexing into a mapped type
Indexing into a mapped type a powerful TypeScript technique to allow a collection of all different types, while retaining the type information.
TypeScript types are inferred in a forward direction
TypeScript's type inference is powerful, but it does have constraints. One constraint is that it can't retrospectively narrow types.
Using cookies in React Server Components to avoid a flash the incorrect content.
We make use of NextJS's `cookies` function to access the cookies on the server side.
How to create a responsive React hook to listen for changes to cookies
Your React components may wish to listen for changes to made to cookies, whether they were made by other React code, or HTTP requests or non-React JavaScript. The CookieStore API can help.
The natural state of software is chaos
The perfect codebase is a myth. Abondon the pursuit of it, and instead seek to contain the mess.
Migrating from Remix to NextJS
NextJS appears to well and truely established. These are the steps I followed to migrate from Remix 1.9.3 to Next 14.
An overview of configuring proxy behaviour in NodeJS applications
You may wish to proxy node requests via service like mitmproxy for the purpose of analysing the requests its making or generating test data. Here's a quick reference sheet for setting this behaviour up.
How to publish a React component package, using NextJS as the compiler
Although your component library may not be making use of React Server Components and the like, it can be helpful to see how the component behaves in a NextJS context.
How to configure NextJS to proxy its requests
We may wish to proxy the requests NextJS makes, for example through a tool like mitmproxy in order to analyse traffic or generate test data.
The problem of testability in React
It seems like there are no perfect solutions for testing in React.
Tools I like: git checkout interactive
gci is an interactive CLI utility to select a git branch with arrow keys.
Adding dark mode to a blog - how to avoid flashes of the wrong theme
I've added dark mode to this blog. Here's a few tricks I've learned.