thinking of making my blog into a single page app
as clarification, it will be one page and all of the blog posts will be on that one page and all of the links will be anchor links
what could go wrong
56 replies
@zachleat may i suggest ordering by random too?
@raymondcamden yes you may—also I would note that this blog comes with ⌘+F search for free
@zachleat Sounds like a case for `content-visibility`: https://web.dev/content-visibility/.
@tomayac I am extremely online, what content-visibility value is that
@zachleat @tomayac http203 had an episode on that: https://youtu.be/FFA-v-CIxJQ
@zachleat Got any good tools for ensuring anchor links don't change / are suitably redirected? Plenty of that kind of thing for standard links, but haven't seen much for anchor links
@stucox yeah! https://www.npmjs.com/package/check-html-links does anchor links
-
@mattdsteele this meme is missing a third image? 😅
@zachleat @mattdsteele SINGLE PAGES 👍
@sarajw @zachleat @mattdsteele now I’m just imagining “All the single pages”
@rob @sarajw @mattdsteele if you like it put a webring on it
@zachleat @rob @mattdsteele GAH you beat me to it
@sarajw @rob @mattdsteele we are both great minds and we are thinking similarly
@rob @zachleat @mattdsteele Hahahah!
Cause if you liked it then you should have put webrings on it
If you liked it then you shoulda put webrings on it
Don't be mad that you just have to scroll to it
If you liked it then you shoulda put webrings on it
Oh, oh, oh, oh, oh, oh, oh, oh-pen source@sarajw @zachleat @mattdsteele hahaha yessss!! So good 😂
@zachleat .blogpost { display: none; } .blogpost:target, blogpost:has(:target){ display: initial; } for maximum tomfoolery
@lewisdaleuk your head is in the right place
@zachleat sounds good. Most folks create a static blog only to make 2 posts about how they created the static blog 😂
@falcon …I should make the eleventy-base-blog include a boilerplate post about how the blog was built 😅
@zachleat infinite scroll
@zachleat base64 encode and inline all the pics, video, etc. for maximum single file archivability.
@ardouglass well, now we’re talking—now I’m curious how to lazy load an inlined image 😅
@zachleat I think this just has the not loaded/loaded state for the entire site. Maybe http streams can do something magical to load the file in chunks and the browser will still render it, idk.
@ardouglass noscript progressive enhancement with a service worker maybe 😅 (JS-only though)
@zachleat maybe turbolinks was actually good
@zachleat it will still be smaller than the header image
@reconbot the “one fewer image” chants are still echoing!
@zachleat Can I design the loading animation? I recommend a Zombo.com callback with the five-minute voiceover.
"Welcome to zachleat.com. You can do anything at zachleat.com. Welcome to you who has visited zachleat.com..."@ericcarlisle Severance vibes 😅
@zachleat will it have a continually updating single entry rss feed?
@dmc absolutely
@zachleat doesn’t matter how tall it is when your markup is <div id=“app”>
@zachleat I believe this is called a "book"
@kylealden @zachleat wouldn’t scroll be more accurate for a single page?
@aluhrs @kylealden (this is very good Andy)
@zachleat I want this! I want this!
@kupfers are you sure?
[eyes the monkey paw]
@zachleat sounds like my site 😁
@argyleink ha!
[squints eyes]
@zachleat what, like https://www.kryogenix.org/days/archives/ ? 🙂
-
@eric eric no
-
@zachleat the reduction in HTTP requests will be <chefs-kiss>