Hello #WebDev friends,

For those of you who have known me for a while, you’re aware I had launched a CSS course to kick off the Intuitive+ membership program some time ago. That course is now archived and available for free, and while I haven’t felt the imperative to attempt building out another full course, I have long thought about what I might do to bridge the gap between a large body of work such as a course, and the short one-off blog posts I typically publish for That HTML Blog.

That answer is the fresh arrival of the Intuitive+Learn series, kicking off with my first installment:

🔗 Cross-Document State Management (An In-Depth Tutorial)

As it says on the tin:

One of the immediate challenges which will come up as you push the boundaries of MPAs is how to manage the state of interactive elements on a page as you navigate through different pages. For example, if you have an expandable section of content on a sidebar, and then navigate to another page, it can be disconcerting if the expandable section has suddenly collapsed again. Or if you filter a large body of content items by some particular criteria, and click on one of the items, how do you get back to that filtered result set easily?

This is an issue which has come up again and again for me as I’ve been building interactive interfaces on top of static sites, and I realized that while the potential solutions are relatively straightforward, it’s a pattern which bears far more care & attention than it typically receives—as evidenced by the fact that even fancy-pants SPAs often get this stuff wrong.

So what can you expect from this tutorial, once you’ve unlocked it?

• A detailed explanation of how I built the retainedState API to solve several interlocking problems and offer elegant DX.

• Three working demos:

  1. An “art gallery” with multiple artist and category pages.

  2. An image grid with persisted filtering.

  3. An HTML game with view transitions which remembers “room” state.

• You’re encouraged to ask follow-up questions in the Human Web Collective Discord.

Intuitive+ is very affordable: it’s only $5 a month, or $25 every six months. Not only will you gain access to this new series (I’m already planning the second installment!), but you will support the continued publishing of the newsletter & blog for That HTML Blog as well as my other publications such as Cycles Hyped No More Newsletter and Vibe Coded Podcast.

And as I explained in the Discord, I'm not trying to get rich, I'm trying to keep food on my table. But if you really want to access this material and the price of membership is a hardship, DM me and we’ll work something out. 🤝

Thank you so much for sticking around all this time, and I’m very excited to be launching this new on-going educational series. If you have any feedback on this installment or ideas for what you’d like me to cover next, please write and let me know!

Once more, the link to this new tutorial:
Cross-Document State Management (An In-Depth Tutorial)

I hope you enjoy it!
Cheers,
Jared ✌️

🤔🌩️ Things that make you think: 💡😃

I love the fact that CSS is finally reclaiming control over visual interactions, taking charge of the styling, the animation, and the accessibility exactly as it should. Today, native browser capabilities allow us to move the heavy lifting away from the JavaScript main thread and closer to the GPU. By letting the browser’s engine optimize performance under the hood, we save energy and processing power while building code that is robust, accessible, and independent of external libraries that might deprecate tomorrow.

I want to clarify something: we shouldn’t move things just because we can.

Everything communicates, and our animations are no exception. We must take the time to design movements that support the message we want to convey in order to keep our intents tightly scoped without overdoing it.

–Mariana Beldi