👋 My Site
🤨 The Problem
I'm sure you've seen hundreds of developer sites, and thought:
Damn, I need to redesign my whole site. I've gotten sick of remaking my site countless times just to have my ambition fizzle out before I ship it. I didn't want to crush my desire to rebuild my site all the time. It's hard finding a cool idea you want to explore, but finding ways to make it work with your current site, or throw it out and start over.
🥅 The Goals
There are a couple things I'd like to be able to do: Allow my site to be flexible, Allow my ambition to be small, Persist old pages but most importantly, allow my site to evolve.
💡 The Idea!
It's a pretty dumb idea, but I hope it works as the site grows. Essentially, I'm going to build my site as a LONG scroll. Just one big ol' page in chronological order. I think normally this would be a disaster, but the web has changed, and so has my perception of it. Plus there are a bunch of great tools to assist me in this endeavor.
📐 The How
This whole concept hinges on a few web concepts.
The new CSS :where() psuedo selector
This new CSS psuedo selector can totally kill any specificity, and can scope without creating specificity issues with utility css and other more opinionated tools. If CSS is prefixed with a
:where(.namespace), there shouldn't be any CSS leaking between pages.
CSS Scroll Snap
This CSS rule is nice. Think how tik-tok is just 1 LONG page full of videos. Normally that would be CHAOS and a total nightmare. However, only one video can be in frame at once, so it doesn't feel like 1 page, full of hundreds of videos, but rather 1 video per page. I hope to create that UX with this website.
Perhaps I will use HTMX, perhaps I wont. Regardless, the perception shift HTMX created has influenced this idea. There are 3 parts where HTMX has inspired this: First, the idea of just using HTML over the wire. Second, the little on-event-attribute that fires when something rolls into view. SPA like behavior by pulling a full html document and combining it with the current html document.
Lol, Dumb. But the UI/UX for that app is pretty neat. ALL VIDEOS EXIST ON THE SAME PAGE WHICH IS INSANE. but the scroll snap makes that point far less obvious.
The Vue3 Composition API
I don't know what to call it, It's not a Vue only idea, but was largely popularized by it. Essentailly, you just write code where it'll live. Styles/HTML/Scripts. I call it a triple, but I'm not sure what it's called. Basically this pattern is ideal IMO. It's perfect for first page loads, and I find it really to reasona about. Everything lives on one file, no running from file to file, trying to understand what file, added to what build process, created the bundle output that's giving you trouble.
💫 Mix it up.
I think the scroll snapping will make multiple-pages on one scroll more approachable. :where() will give my triples, the ability to namespace without creating specificity headaches for my utilityCSS. HTMX will handle combining the individual HTML pages together client side. 11ty will take these raw triples I make, and combine them with a valid HTML template, and set up loading previous and next pages when a page is scrolled to.
It'll likely get messy. There will be mistakes I make. but I think I can keep nav elements sticky, and allow posts to exist within those nav eras. I think this is a pretty neat idea, I'm interested in exploring it, I'll keep this page updated with the progress I'm making or why I've decided to abandon it.