2026-02-28 03:00:00
Dave Rupert articulated something in “Priority of idle hands” that’s been growing in my subconscious for years:
I had a small, intrusive realization the other day that computers and the internet are probably bad for me […] This is hard to accept because a lot of my work, hobbies, education, entertainment, news, communities, and curiosities are all on the internet. I love the internet, it’s a big part of who I am today
Hard same. I love computers and the internet. Always have. I feel lucky to have grown up in the late 90’s / early 00’s where I was exposed to the fascination, excitement, and imagination of PCs, the internet, and then “mobile”. What a time to make websites!
Simultaneously, I’ve seen how computers and the internet are a two-edged sword for me: I’ve cut out many great opportunities with them, but I’ve also cut myself a lot (and continue to).
Per Dave’s comments, I have this feeling somewhere inside of me that the internet and computers don’t necessarily align in support my own, personal perspective of what a life well lived is for me. My excitement and draw to them also often leave me with a feeling of “I took that too far.” I still haven’t figured out a completely healthy balance (but I’m also doing ok).
Dave comes up with a priority of constituencies to deal with his own realization. I like his. Might steal it. But I also think I need to adapt it, make it my own — but I don’t know what that looks like yet.
To be honest, I don't think I was ready to confront any of this but reading Dave’s blog forced it out of my subconscious and into the open, so now I gotta deal.
Thanks Dave.
2026-02-24 03:00:00
Over the years, I’ve used different icon sets on my blog. Right now I use Heroicons.
The recommended way to use them is to copy/paste the source from the website directly into your HTML. It’s a pretty straightforward process:
If you’re using React or Vue, there are also npm packages you can install so you can import the icons as components.
But I’m not using either of those frameworks, so I need the raw SVGs and there’s no npm i for those so I have to manually grab the ones I want.
In the past, my approach has been to copy the SVGs into individual files in my project, like:
src/
icons/
home.svg
about.svg
search.svg
Then I have a “component” for reading those icons from disk which I use in my template files to inline the SVGs in my HTML. For example:
// Some page template file
import { Icon } from './Icon.js'
const template = `<div>${Icon('search.svg')} Search</div>`
// Icon.js
import fs from 'fs'
import path from 'path'
const __dirname = /* Do the stuff to properly resolve the file path */;
export const Icon = (name) => fs.readFileSync(
path.join(__dirname, 'icons', name),
'utf8'
).toString();
It’s fine. It works. It’s a lot of node boilerplate to read files from disk.
But changing icons is a bit of a pain. I have to find new SVGs, overwrite my existing ones, re-commit them to source control, etc.
I suppose it would be nice if I could just npm i heroicons and get the raw SVGs installed into my node_modules folder and then I could read those. But that has its own set of trade-offs. For example:
search in one pack and magnifying-glass in another. So changing sets requires going through all your templates and updating references.npm i icon-pack might install hundreds or even thousands of icons I don’t need.So the project’s npm packages don’t provide the raw SVGs. The website does, but I want a more programatic way to easily grab the icons I want.
How can I do this?
I’m using Web Origami for my blog which makes it easy to map icons I use in my templates to Heroicons hosted on Github. It doesn’t require an npm install or a git submodule add. Here’s an snippet of my file:
{
home.svg: https://raw.githubusercontent.com/tailwindlabs/heroicons/refs/heads/master/optimized/24/outline/home.svg,
about.svg: https://raw.githubusercontent.com/tailwindlabs/heroicons/refs/heads/master/optimized/24/outline/question-mark-circle.svg,
search.svg: https://raw.githubusercontent.com/tailwindlabs/heroicons/refs/heads/master/optimized/24/outline/magnifying-glass.svg
}
As you can see, I name my icon (e.g. search) and then I point it to the SVG as hosted on Github via the Heroicons repo. Origami takes care of fetching the icons over the network and caching them in-memory.
Beautiful, isn’t it? It kind of reminds me of import maps where you can map a bare module specifier to a URL (and Deno’s semi-abandoned HTTP imports which were beautiful in their own right).
Origami makes file paths first-class citizens of the language — even “remote” file paths — so it’s very simple to create a single file that maps your icon names in a codebase to someone else’s icon names from a set, whether those are being installed on disk via npm or fetched over the internet.
To simplify my example earlier, I can have a file like icons.ori:
{
home.svg: https://example.com/path/to/home.svg
about.svg: https://example.com/path/to/information-circle.svg
search.svg: https://example.com/path/to/magnifying-glass.svg
}
Then I can reference those icons in my templates like this:
<div>${icons.ori/home.svg} Search</div>
Easy-peasy! And when I want to change icons, I simply update the entries in icons.ori to point somewhere else — at a remote or local path.
And if you really want to go the extra mile, you can use Origami’s caching feature:
Tree.cache(
{
home.svg: https://raw.github.com/path/to/home.svg
about.svg: https://raw.github.com/path/to/information-circle.svg
search.svg: https://raw.github.com/path/to/magnifying-glass.svg
},
Origami.projectRoot()/cache
)
Rather than just caching the files in memory, this will cache them to a local folder like this:
cache/
home.svg
about.svg
search.svg
Which is really cool because now when I run my site locally I have a folder of SVG files cached locally that I can look at and explore (useful for debugging, etc.)
This makes vendoring really easy if I want to put these in my project under source control. Just run the file once and boom, they’re on disk!
There’s something really appealing to me about this. I think it’s because it feels very “webby” — akin to the same reasons I liked HTTP imports in Deno. You declare your dependencies with URLs, then they’re fetched over the network and become available to the rest of your code. No package manager middleman introducing extra complexity like versioning, transitive dependencies, install bloat, etc.
What’s cool about Origami is that handling icons like this isn’t a “feature” of the language. It’s an outcome of the expressiveness of the language. In some frameworks, this kind of problem would require a special feature (that’s why you have special npm packages for implementations of Heroicons in frameworks like react and vue). But because of the way Origami is crafted as a tool, it sort of pushes you towards crafting solutions in the same manner as you would with web-based technologies (HTML/CSS/JS). It helps you speak “web platform” rather than some other abstraction on top of it. I like that.
2026-02-23 03:00:00
SITUATION: there are 14 competing AI labs.
“We can’t trust any of these people with super-intelligence. We need to build it ourselves to ensure it’s done right!"
“YEAH!”
SOON: there are 15 competing AI labs.
(See: xkcd on standards.)
The irony: “we’re the responsible ones” is each lab’s founding mythology as they spin out of each other.
2026-02-19 03:00:00
In this new AI world, “taste” is the thing everyone claims is the new supreme skill.
But I think “care” is the one I want to see in the products I buy.
Can you measure care?
Does scale drive out care?
If a product conversation is reduced to being arbitrated exclusively by numbers, is care lost?
The more I think about it, care seems antithetical to the reductive nature of quantification — “one death is a tragedy, one million is a statistic”.
Care considers useful, constructive systematic forces — rules, processes, etc. — but does not take them as law. Individual context and sensitivity are the primary considerations.
That’s why the professional answer to so many questions is: “it depends”.
“This is the law for everyone, everywhere, always” is not a system I want to live in.
Businesses exist to make money, so one would assume a business will always act in a way that maximizes the amount of money that can be made.
That’s where numbers take you. They let you measure who is gaining or losing the most quantifiable amount in any given transaction.
But there’s an unmeasurable, unquantifiable principle lurking behind all those numbers: it can be good for business to leave money on the table.
Why? Because you care. You are willing to provision room for something beyond just a quantity, a number, a dollar amount.
I don’t think numbers alone can bring you to care.
I mean, how silly is it to say:
“How much care did you put into the product this week?”
“Put me down for a 8 out of 10 this week.”
2026-02-12 03:00:00
This is one of those small things that drives me nuts.
Why? I don’t know. I think it has something to do with the fact that I have a computer that is faster than any computer I’ve ever used in my entire life — and yet, clicking on buttons results in slight but perceptible delays.
Let me explain.
Imagine a button that looks like this:
<Button
onClick={async () => {
const data = await getSessionUrlFromStripe(id);
window.location = data.url;
}
>Upgrade to Pro</Button>
For SPA apps, when the user clicks that button it takes a split second (even on a fast connection) for anything to happen because:
When clicking on that button, even on a fast connection, my brain glitches for a second, my thought process going something like:
Granted those thoughts occur in my brain in under a second, but I hate that pause of indetermination.
I clicked, I want (perceptibly) instant feedback. If something is happening, tell me!
For SPA apps, you could put some state in there, like:
const [isLoading, setIsLoading] = useState(false);
return (
<Button
onClick={async () => {
setIsLoading(true);
const data = await getSessionUrlFromStripe(id);
window.location = data.url;
}
>{isLoading ? 'Upgrading...' : 'Upgrade to Pro'}</Button>
)
This would provide more immediate feedback. But it also raises a whole set of other questions:
isLoading state in all those places too? What if the trigger in each place is slightly different? A button here, some text there, and icon over yonder? How do you handle all of those different interactions in a standard, immediate way?Oh boy, this is getting complicated isn’t it?
This is why, I assume, lots of apps just don’t deal with it.
They accept there will be a slight delay in the responsiveness of the UI (and that it might error, but the user can just click again) and justify that it’s really not that big of a deal if there’s a slight, almost imperceptible delay between clicking a button and seeing the UI respond.
“We’ve got bigger fish to fry.”
And it makes sense. I mean, a slight delay in UI responsiveness, is that why people will or won’t buy your thing? Seems like a small detail. Who’s got the time to spend on details like this?Who cares?
I care. That’s why I’m writing this post.
To my original point, every piece of hardware I currently own is the fastest version of that device I’ve ever had in my life. And yet, everywhere I go I encounter lag. Lag everywhere.
And I’m grumpy about it, hence this post.
2026-02-10 03:00:00
I recently updated my collection of macOS icons to include Apple’s new “Creator Studio” family of icons.
Doing this — in tandem with seeing funny things like this post on Mastodon — got me thinking about the history of these icons.
I built a feature on my icon gallery sites that’s useful for comparing icons over time. For example, here’s Keynote:
(Unfortunately, the newest Keynote isn’t part of that collection because I have them linked in my data by their App Store ID and it’s not the same ID anymore for the Creator Studio app — I’m going to have to look at addressing that somehow so they all show up together in my collection.)
That’s one useful way of looking at these icons. But I wanted to see them side-by-side, so I dug them all up.
Now, my collection of macOS icons isn’t complete. It doesn’t show every variant since the beginning of time, but it’s still interesting to see what’s changed within my own collection.
So, without further ado, I present the variants in my collection. The years labeled in the screenshots represent the year in which I added the to my collection (not necessarily the year that Apple changed them).
For convenience, I’ve included a link to the screenshot of icons as they exist in my collection (how I made that page, if you’re interested).
(Granted, Pixelmator wasn’t one of Apple’s own apps until recently but its changes follow the same pattern showing how Apple sets the tone for itself as well as the ecosystem.)
One last non-visual thing I noticed while looking through these icons in my archive. Apple used to call their own apps in the App Store by their name, e.g. “Keynote”. But now Apple seems to have latched on to what the ecosystem does by attaching a description to the name of the app, e.g. “Keynote: Design Presentations”.
