In this update, I've focused on refining the user experience of this blog and resolving some critical issues that were hindering usability. Here's a breakdown of the changes and the technical challenges I overcame.

1. Fixing the "Blank Screen" Issue

The Problem: Users were reporting that the blog content wasn't loading immediately, often resulting in a blank screen. This was caused by a "loading overlay" and a complex materialization animation that was intended to be a cool effect but ended up blocking content delivery.

The Solution: I decided to prioritize performance and immediate content visibility. I completely removed the loadingOverlay HTML element and its associated CSS animations and JavaScript logic. Now, the blog content renders instantly upon page load, providing a much snappier experience.

2. Collapsible Tag Filters

The Problem: As the number of tags grew, the "filter by tag" section on the homepage became cluttered and took up too much vertical space, pushing the actual blog posts down.

The Solution: I implemented a collapsible tag filter section.

  • Default State: The section is now compact (limited to 85px height) by default.
  • Interactivity: A "show more" button allows users to expand the full list of tags if they wish to explore.
  • Auto-Expansion: If you navigate to the blog with a specific tag selected (e.g., via a URL hash), the section automatically expands to show the active tag.

3. Debugging Critical Interactivity Bugs

The Problem: After implementing the collapsible tags, I encountered a frustrating issue where the "show more" button and the tag filters themselves were completely non-functional. The browser console was surprisingly quiet, showing no obvious errors.

The Debugging Process:

  1. Initial Investigation: I suspected the event listeners weren't attaching correctly. I tried moving the script placement and using DOMContentLoaded, but the issue persisted.
  2. Deep Dive: I added extensive console.log statements, but none of them appeared. This suggested the script wasn't executing at all.
  3. The Breakthrough: I inspected the generated HTML and found a syntax error in the injected data. The build script was replacing {{ allPostsData }} with the JSON data, but the regex was too strict and didn't account for the spaces I had added in the template for readability ({{ allPostsData }}). This resulted in invalid JavaScript syntax, crashing the entire script block.

The Fix: I updated the build script's regex to be more flexible:

.replace(/{{\s*allPostsData\s*}}/g, JSON.stringify(sortedPosts))

This simple change ensured the data was injected correctly, restoring all interactivity.

4. Restoring Animations and Sound

With the critical bugs squashed, I was able to re-enable the retro animations (like the "digital rain" effect) and the subtle sound effects that give this blog its unique cyberpunk aesthetic.

Conclusion

These updates highlight the importance of balancing aesthetic features with core usability. While animations are fun, they should never come at the cost of content accessibility. And sometimes, the trickiest bugs are hidden in the simplest places—like a few extra spaces in a template placeholder.