So, what happens when you give a hyperfixating developer a few free hours and a website that’s been nagging at them? You get three significant updates that completely transform the user experience, apparently.
It’s been quite the productive evening, actually. Between feeling rough with a cold and the general September malaise, I found myself in one of those rare states of hyperfocus that developers know well – where everything just clicks into place and you find yourself making changes you’ve been meaning to implement for months. The result? Some fairly significant improvements to how my website handles blog content, a proper cleanup of some legacy components, and what I’d consider a genuinely useful quality-of-life enhancement for readers.
The Big One: Table of Contents
The centrepiece of this update is something I’ve been wanting to implement for ages – a proper Table of Contents system for blog posts. Anyone who’s read my longer pieces (and let’s be honest, I do tend to ramble) will appreciate having a way to navigate through the content without endless scrolling.
How It Works
The implementation turned out to be more interesting than I initially anticipated. When a blog post loads, the system parses the HTML content to extract all headings (h1 through h6), generates stable IDs for each, and builds a navigational tree structure. But here’s where it gets clever – the TOC isn’t just a static list of links.
As you scroll through the post, the system tracks which heading is currently in view and highlights it in the table of contents. There’s something deeply satisfying about watching the active section indicator move as you read through a post. It provides that sense of progress and context that makes longer reads feel more manageable.
Responsive Design Considerations
The desktop experience shows the TOC as a sticky sidebar that follows you down the page, complete with a progress bar that fills as you read. But mobile needed a different approach entirely – screen real estate is precious, and a persistent sidebar would be intrusive.
For mobile users, I implemented a floating action button that appears when you’re within the content area. Tap it, and a drawer slides in from the right with the full table of contents. The beauty is that it only shows when it’s relevant – if you’re reading the introduction or have scrolled past the conclusion, the button gracefully fades away.
The sliding drawer includes a subtle fade effect at the bottom to indicate scrollable content, and tapping any heading automatically closes the drawer and scrolls you to the relevant section. It’s the kind of interaction that feels natural and unobtrusive.
Technical Implementation
Under the hood, this required some careful state management. The system needs to track scroll position, calculate which headings are currently visible, manage the mobile drawer state, and handle the intersection observer for highlighting active sections – all while maintaining smooth performance.
The Trio: Latest Blog Posts on Display
The second major change addresses something that’s been bugging me about the homepage for months – it was only showing the single most recent blog post. For someone who writes as much as I do, this felt like a waste of prime real estate.
From One to Three
The update transforms that lonely single post into a proper grid of the three most recent entries. But this isn’t just about showing more content – it’s about creating a better first impression for visitors discovering the site.
The implementation uses a responsive grid with auto-fill and minmax(260px, 1fr) to ensure the cards flow naturally across different screen sizes. On desktop, you get a neat three-column layout. On tablet, it adapts to two columns. On mobile, it stacks into a single column that remains perfectly readable.
Staggered Animations
Here’s where I couldn’t resist adding a bit of polish – each post card animates in with both a slide and fade transition, but they’re staggered so they appear in sequence rather than all at once. It’s a subtle effect that adds just enough dynamism without being overwhelming.
The animation uses Svelte’s built-in transitions with carefully tuned delays: the first post appears at 200ms, the second at 350ms, and the third at 500ms. Combined with the slide effect, it creates this nice ripple of content appearing as the page loads.
Validation and Edge Cases
The system includes proper validation to ensure posts have all required fields before displaying them – title, creation date, and content. If a post is missing any of these, it’s filtered out gracefully. The loading placeholders also match the new grid layout, so there’s no jarring shift when content loads.
The Cleanup: Farewell to TidClock
The third change was more about digital hygiene than new features – removing the TidClock component that had been lurking in the footer for months.
What TidClock Was
For those who never encountered it, TidClock generated and displayed Timestamp IDentifiers (TIDs) in real time – those base32-sortable strings that the AT Protocol uses for record keys. You could click on the displayed TID to copy it to your clipboard, which was... admittedly quite niche functionality.
Why It Had to Go
The reality is that TidClock was a solution looking for a problem. While TIDs are fascinating from a technical perspective (they’re basically timestamp-based identifiers that remain sortable while providing reasonable collision resistance), displaying a constantly updating one in the footer served no practical purpose for site visitors.
More importantly, it was adding unnecessary JavaScript execution for something that 99.9% of users would never interact with. In an era where we’re all trying to be more mindful about performance and user experience, it felt like digital clutter.
The Removal Process
The cleanup was surprisingly straightforward – remove the component import, delete the component files, and tidy up the footer spacing. But it’s always satisfying to delete code that’s no longer serving a purpose. There’s something almost therapeutic about simplifying your codebase.
The Process: A Few Hours Well Spent
What strikes me about this particular development session is how everything seemed to flow together naturally. Usually, implementing something like the Table of Contents would be a weekend project involving multiple iterations and lots of debugging. Instead, it came together in about three hours of focused work.
I think there’s something to be said for tackling projects when you’re in the right headspace, even if that headspace happens to be “fighting off a cold and procrastinating on other responsibilities.” Sometimes the best development happens when you’re not trying too hard.
Hyperfocus and Development
There’s this particular state of mind that neurodivergent developers know well – where time seems to disappear and you find yourself three hours deep in code with barely any memory of how you got there. It’s simultaneously the most productive and most dangerous state for a developer to be in.
Productive because you can accomplish in one session what might normally take weeks of stop-start progress. Dangerous because you can easily lose sight of everything else that’s supposed to be happening in your life. In this case, I think I struck the right balance – meaningful improvements without going completely down the rabbit hole.
What’s Next?
These updates feel like a natural stepping stone towards larger improvements I’ve been considering. The Table of Contents system could be extended to support nested hierarchies for more complex posts. The blog post grid could incorporate filtering or categorisation. And with TidClock gone, there’s space to consider what actually useful information should live in the footer.
But for now, I’m content with the improvements. The site feels more polished and user-friendly, and the Table of Contents in particular addresses a genuine usability issue that’s been bothering me for months.
Sometimes the best updates are the ones that make you wonder why you didn’t implement them sooner.
If you’re reading this and notice any issues with the new features, or if you have suggestions for improvements, I’d love to hear about them. The beauty of having your own website is that everything is always a work in progress