The Great Decoupling & Monorepo Standardisation

Sometimes you have to tear the house down to the studs before you can build the extension.

Today was a massive sprint focused entirely on paying down technical debt and standardising the frontend architecture across this monorepo. When you are building distinct applications like a clinical logic engine (TubeTutor) alongside a digital card inventory (PokéBinder), it is incredibly easy for the CSS and layout logic to drift.

I hit a point where inline styles were bloating the HTML, and the vertical alignment across the different apps was frustratingly inconsistent. It was time for a structural reset.

The Great Decoupling

The primary objective was separation of concerns. I ripped hundreds of lines of inline CSS and JavaScript out of the Hugo HTML templates and modularised them into clean, dedicated static assets.

By injecting the raw Hugo JSON data into secure window variables, the newly decoupled Vanilla JS files could still access the backend data seamlessly. Coupling this with strict cache-busting query parameters ensured the service workers immediately fetched the new architecture without trapping users in stale sessions.

Layout Standardisation

Hugo is fantastic, but its default blog templates can be aggressive. My master containers were fighting invisible margins and padding injected by legacy <main class="post"> tags.

I stripped out the legacy wrappers and enforced a strict, mathematically identical Flexbox and Grid layout across all three core apps. The result is that whether you are looking at the Library terminal or the PokéBinder, the UI sits at the exact same pixel height. It finally feels like a single, cohesive operating system.

The Glassmorphism Upgrade

With the architecture stabilised, I applied a unified visual language. I stripped the flat background colours out of TubeTutor and upgraded it to a premium glassmorphism aesthetic using backdrop-filter: blur(). To give the translucent dark glass depth, I engineered an ambient, breathing CSS gradient orb that sits fixed in the background.

The Reality of Development

If there is one messy reality to document from today, it is the CSS Specificity war.

I had an open issue to completely detox the codebase of !important tags. In reality, when you are wrestling a legacy framework into submission to force mathematically perfect Flexbox sizing, sometimes brute force is the most efficient path forward. I ended up adding a few more !important declarations to lock the layout in place.

Perfect code is a myth. Shipping robust, high-performance tools that solve real problems is the metric that matters. Today was a massive win for the latter.