Cleaning up the mess I made building things I love
I’ve added many unique features to my website over time, and that’s by design. My website is my sandbox. It gives me a place to play with ideas I’m passionate about and put them somewhere real right away. This habit of quickly adding new, interesting things has allowed my site to evolve dramatically over time, despite no single change being very big on its own.
However, while this approach lets my website evolve in a way I’m happy with, it sometimes leaves me with tech debt that’s more trouble than it’s worth. Specifically, two features in particular had become hard to maintain. It was time for a little spring cleaning.
The first feature was how I displayed blog posts from the Atmosphere (a new social technology that powers things like Bluesky) alongside my regular blog posts on the homepage. When I first built the Atmosphere integration, it was simple and client-side. Post previews loaded directly in the browser via JavaScript, and they linked to the posts on their original pages. Later, I was getting more excited about AT Protocol (which powers the Atmosphere) and how easy it made building things off of it. Because of this, I got a bit ambitious and made posts from Leaflet (a blog platform on the Atmosphere) display as “native” content, styled exactly like the blog posts already living on my site.
It worked! And it worked pretty well. But there was a problem. I would have to update my site to support every type of content block Leaflet supports, with new content blocks being added frequently. Plus, I was now displaying posts from across the larger Atmosphere on my site — not just Leaflet. I didn’t want to add this for every one of them, and giving Leaflet special treatment felt a bit odd.
So I went back to a client-side version of this feature, like I had before. It still keeps the part I like most — all my posts showing up in one place — but is simple and uncomplicated.
The second feature I had to cut down was the read-along feature, which had been causing me issues for a while. This feature highlighted text line by line as you listened to my article read in my own voice. The feature was inspired by how Firefox handles its text-to-speech highlighting in reader mode. I thought, “Why couldn’t I do that on my website, but with my voice?” I still love the idea, but unlike text-to-speech, there’s no great way to track what is being said in each section of an audio file without a perfect captions file, so I had to improvise to create a different solution. I threw together a weird timing system (based on auto-generated approximate caption files that then had to sync up with the actual text) that was “good enough.” It was never good enough; it was a headache.
The feature was thousands of lines of code, took multiple complete rewrites, and kept breaking in new ways every few months. I would frequently notice a small bug while working on something completely different, tell myself I would just do a quick fix, and end up rewriting the whole system again. For a feature most people never used, it was taking up way too much of my time.
This spring cleaning wasn’t as exciting or thrilling as building something new, but it made me feel like a weight had been lifted off of me. I now have the space to play around with new features on my website.
“Move fast and break things” is a motto that has some truth to it, but breaking things still comes at a cost. If something you made while moving fast is so fragile that it constantly breaks, it’s not worth keeping around; it means you either always have something broken or you can no longer move fast trying to avoid breaking it again. Neither was worth it, so I’m glad I no longer have to worry.
Comments