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!
Latest blogs
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 animate:flip.
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.
Native Page Transitions in SvelteKit - Geoff Rich
Taking the experimental view transition API for a spin.
Finally, I wrote another post for the Upstash blog on using their messaging solution, QStash, to refresh stale data in a SvelteKit app.
Reading list
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.
Until next time! As always, you can find me on Mastodon, Twitter, and my personal site.