sunbeam.city is one of the many independent Mastodon servers you can use to participate in the fediverse.
Sunbeam City is a anticapitalist, antifascist solarpunk instance that is run collectively.

Administered by:

Server stats:

105
active users

notplants

curious what the most minimal ssg or front-end framework is for client-side switching between pages without a full reload?

also not sure what the technical term for that is

i’ve a couple sites built with gastby such as canalswans.commoninternet.net but all of react feels like overkill

canalswans.commoninternet.netcanalswans.commoninternet.netan online-retail-conglomerate maintained by Max Fowler

@notplants like in my head, javascript code instructing links to just change the main part of the page and not the rest of it, seems like something one could do in a file or two

@notplants @decentral1se @j12i got a version working today using 87 lines of plain javascript codeberg.org/notplants/thimble

more optimizations could be possible via using gzip, or maybe storing prefetched pages using javascript variables would be faster than using the cache (?) but I kind of like that this could be subbed into any static site without making any other modifications to it

Codeberg.orgthimble-switcherthe world's most minimal single-page-application front-end framework

@notplants you'd need to have the "inner" part of the pages as separate files on the server. Then just catch the click event on internal links, load the file and replace the DOM part. + Call the history API. But I don't think this will save so much that it's worth the effort.

Frameworkwise I only found examples for transition animations, e.g. barba.js.org/docs/getstarted/m

barba.jsbarba.jsCreate badass, fluid and smooth transition between your website's pages.

@j12i @notplants thanks for the reply @j12i !

the part that would be “worth it” to me would be the faster page-switching without having to fetch new pages from the server

so i would imagine something similar to what you described, except instead of fetching the new part of the page from the server via ajax,

it would load the new page from some type of local data of all the pages of the website
— i think react sites built by gastby do something basically like this, but with extra stuff too

@notplants @j12i / might have misunderstood your comment because i don’t totally understand how the history api plays into it 🙃

@notplants no, the history api just generates a, let's call it synthetic, navigation event.

@notplants but you would have to load all that at some point, obviously.

In keeping with doing this in vanilla js, for the caching part you'd probably use the service worker api. (I'm not sure if that's going to be derprecated and if yes what's going to replace it.) The service worker is basically a js file/process that runs 'outside' of your site (the tab, say), but with the sw api you can communicate with it from inside.

@notplants so after the site visitor loads the first page, it would initialize the service worker, which would then fill its cache ('local data of all the pages'), just requesting the inner pages from the server (you could pack them together, but I think with keep-alive and gzip it doesn't matter much) and saving them in a variable. And when the js on the site catches a navigation event, it requests the respective content from the service worker, switches it out on the page, generates a history navigation, and last but not least, prevents default (the link click).

@notplants as an optimization, you could transform the html fragments to DOM fragments in the service worker right after it gets them, but I think this will take less than a millisecond on a normal website that's not really an app, so I'd just leave that to the js in the tab.

@notplants oh, and you'd need to catch the user using the browser history forward and back functionality, same as the link clicks.

@j12i @notplants I also just searched minimal SPA (maybe this is the term I was looking for) and found mithril.js.org , which looks pretty good, although I could imagine something perhaps even more focused…

mithril.js.orgIntroduction - Mithril.jsMithril.js is a modern, small, fast client-side Javascript framework for building Single Page Applications.

@notplants conceptually, this is still overkill, despite its small size. You don't really need a virtual DOM when all you ever want to do is switch out the same big chunk of content (and not that often).

@j12i the service worker approach you described sounds really beautiful

I haven’t looked through mithril, sling and hyper yet to see exactly how they work, but I could see first impression that it’s still conceptually overkill (although way less overkill than react)

… still curious if there is something out there already closer to what you described, or it needs to be made … the most minimal possible spa

@decentral1se @notplants this is interesting, thanks for sharing @decentral1se !

I appreciate the ergonomics of htmx (and this emphasis on locality htmx.org/essays/locality-of-be) and had coincidentally been thinking of trying to integrate something with hugo

although the main feature i’m interested in is client-side page switching without ajax requests, as discussed with @j12i, which from my first reading would require scripting on top of htmx and afaik not gain much from htmx built-ins

htmx.org</> htmx ~ Locality of Behaviour (LoB)htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext htmx is small (~14k min.gz’d), dependency-free, extendable, IE11 compatible & has reduced code base sizes by 67% when compared with react

@notplants @decentral1se @j12i

Very cool tbh 👀

line 84 (error handler) should probably do something to emulate clicking on the link and having it navigate normally. Because otherwise a missing cache entry on-click will result in a silent failure for the user.

@notplants @decentral1se @j12i

Might wanna do the same thing on line 81 as an `else` statement for `if (newMainContent) {`, to handle all cases.

Really don't wanna get into a situation where user clicks a link and nothing happens.

@notplants @decentral1se @j12i

Ideally you could delay calling `event.preventDefault();` until after you know that the quick-nav was successful. But due to the async nature of the cache and fetch mechanic, i don't think thats possible.

thanks for the code review @forestjohnson I appreciate it, and wouldn't have thought of those error conditions -- agreed having a link not do anything would suck, and emulating the default behavior when there was an error makes sense

also appreciating that because its a small piece of code, we actually have a decent chance of finding all possible bugs

when I was using gatsby often builds would get the most random and cryptic errors. a lot of clear the cache rm -r node_modules reinstall and then problem is gone