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!

🤷‍♂️

¹ kitten.small-web.org
² catalyst.small-web.org
³ kitten.small-web.org/tutorials…
⁴ codeberg.org/project-catalyst/…
⁵ pixelsnap.com

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