Framing the Internet: A conversation with James Louis Smith (aka me)

https://copim.pub/framing-the-internet-a-conversation-with-james-louis-smith/

#ExperimentalPublishing #COPIM #OpenBookFutures #IIIF #IFrames

You know how you’re in the middle of a process and you refresh a web page and it loses state?

So that sucks.

With Kitten¹ – when using the new state-maintaining/class-based and event model-based component model – it’s easy to have flowing interfaces that animate between states, etc., that don’t lose state if you refresh the page (or open another tab).

What you can’t do on the Web, however, is restore the state of any cross-origin iframes. (As you have no visibility into their contents to take a snapshot, etc.)

This is something I ran into with the embedded Stripe component I’m using in Catalyst². Specifically, it has a success state that I want to restore so the interface, which uses selective disclosure and has animated to that step in the sign up process, doesn’t jump if you refresh it or look different if you open it in another tab.

So what do you do if you’re obsessed with making things work as well as possible?

Apparently, this:

1. You go and manually save the Stripe iframe’s HTML and relevant CSS

2. You notice that it is ~371KB in size and you sigh

3. You use a combination of automated and manual methods to whittle that down to a 4.2KB HTML/CSS snapshot of the state.

4. You make that into a Kitten component³ so you can set the bits that are dynamic⁴

5. You make sure that it matches the original exactly using PixelSnap 2 guides⁵ (see screenshot; and yes, I told you I’m obsessed) :)

6. Et voila!

🤷‍♂️

¹ https://kitten.small-web.org
² https://catalyst.small-web.org
³ https://kitten.small-web.org/tutorials/components-and-fragments/
⁴ https://codeberg.org/project-catalyst/app/src/commit/a3cf136f3670a9e2954a35d5b3aa227969f22eaf/sign-up/SuccessfulStripeSubscription.fragment.js
⁵ https://pixelsnap.com

#Catalyst #SmallWeb #design #Stripe #iframes #stateRestoration #web #dev

Hey #webDev folks!

I have a #static site created with #Hugo.

I would like to make it behave like a "one-page" web app, so that I can have a persistent audio player on the site that will not be interrupted by navigating the site.

I'm open to using #iFrames, #ssi (server side includes), #ajax - whatever gets the job done.

Any ideas welcome! Please BOOST for reach!

#Development #Approaches
Performance-optimized video embeds · Lazy-loading videos on interaction using only HTML/CSS https://ilo.im/16ac4f

_____
#Embedding #LazyLoading #Videos #HtmlDetails #iFrames #WebPerf #WebDev #Frontend #HTML #CSS

How Microfrontends Work: 3 Integration Strategies, by (not on Mastodon or Bluesky):

https://www.sitepoint.com/microfrontends-integration/

#microfrontends #strategies #routing #iframes #javascript #ai