View Transition experiments and sheep
Hey, how’s it going?
Sending this one out a bit later than I meant to – I had a few busy weeks in there, and I just got back from a long-planned vacation to Iceland!
My blogging time lately was focused on the new View Transitions API, which just landed in stable Chrome (though I think the API is still somewhat experimental – at least, it’s only implemented by a single browser at the moment). This API was formerly known as “shared element transitions,” and if it’s new to you I highly recommend reading the explainer, linked above.
tl;dr: it’s a browser API that “makes it easy to change the DOM in a single step, while creating an animated transition between the two states.” It will make things like single-page-app page transitions a lot simpler to do in a browser-native way.
The API landing in a stable browser (previously it was only in Chrome Canary behind a flag) pushed me to update previous demos experimenting with the API in Svelte and SvelteKit. Check out the animations as you interact with these demos – they all use the View Transitions API instead of Svelte transitions or
Note that for now (and the foreseeable future), these demos will only work in Chrome 111 or later. If you open them in other browsers, you won’t get any animation.
I did a brief rundown on how these demos work and some pitfalls I ran into in my blog post “View Transition Experiments”.
I also took the opportunity to update a deeper-dive I wrote back in September on using this API for SvelteKit page transitions. The API has changed a lot since I first wrote the post and it’s getting a decent amount of Google traffic, so I figured it was worth getting it up to date.
Finally, I wrote another post for the Upstash blog on using their messaging solution, QStash, to refresh stale data in a SvelteKit app.
I really enjoyed “Why you should never use px to set font-size in CSS” from Josh Collinsworth, which covers why using px for font-size harms the accessibility of your websites.
We’ve also been busy over at the Svelte blog. I wrote a post covering some exiting SvelteKit improvements post-1.0 (streaming is game-changing!) and Simon a.k.a. dummdidumm wrote about how you don’t need to annotate the type of your SvelteKit
load functions anymore!
Cat Sheep update
Let’s do something a little different this time – here are some of the adorable sheep I met during my trip to Iceland.