Hey, how's it going?
I've got two new blog posts to highlight for you this week: one on view transition support landing in SvelteKit, and another on conditionally streaming data. I also share out resources from the in-person talks I gave over the summer and link some interesting articles and tools I've found lately.
If you've been following me for a bit, you'll know I've done a lot of experimenting with the new view transitions API coming to browsers. This API streamlines the process of animating between two page states, which is especially useful for page transitions. If you haven't heard about this API before, the Chrome explainer is a good place to start.
While you could use them with SvelteKit, until recently hooking into the right place in SvelteKit's navigation lifecycle required a lot of workarounds and was prone to race conditions. It was also not a great experience, since you had to start the view transition before data loading had started, potentially freezing the page for several seconds on a slow API call.
The recently-released SvelteKit 1.24 adds a new
onNavigate lifecycle hook that was purpose-built for page transitions with view transitions. Specifically, it allows 1) starting a task after data loading has completed, but before the new page is rendered and 2) delaying the navigation until an asynchronous task has completed (in view transitions' case, when the page animation has finished playing).
If you want to know more and learn how you can get started with view transitions today, I've got the full rundown over on the Svelte blog. I've also updated my previous view transitions tutorial to cover the new API.
Then, for the first time in quite some months, I wrote a new tutorial on my own blog. Here's a bit from the intro:
If you return a nested promise from a SvelteKit load function, the result will be streamed to the browser as it resolves. This can be a great way to show the user the page as quickly as possible, and stream the slow data in as it’s available.
However, streaming data comes with its downsides.
Let’s see how we can resolve those issues by conditionally streaming data depending on the request.
This is a technique I've used quite a few times in my own side projects, so I was happy to finally write it up.
Last time I sent out this newsletter, I was still prepping for the multiple in-person talks I had this summer. They were a lot of fun to do, but I'm definitely glad it's over - it was a lot of work! I saw one estimate that every minute of your talk translates to about an hour of prep time, and I think that's right.
The talks weren't recorded, but I did post my slides, and some of the content might be repurposed into blog posts in the future.
I'd love to do more speaking, but I think once or twice a year is about my limit. I definitely loved being at a conference, though, especially when I got to meet other folks using Svelte and/or SvelteKit in production.
I mentioned in my last newsletter that I used the same demo app for both these talks, a music library app I called Sveltunes. I also recorded a 90-minute crash course from This Dot Labs' "JS Drops" series, where we build this app from (mostly) scratch. If you want to get more familiar with SvelteKit's essential features, this is a good way to do so!
At time of writing, it's the most-viewed JS Drop on their channel, which is pretty exciting to see.
Here are some articles I’ve enjoyed lately.
npm run devinside the debug terminal and you should be able to set and hit VS Code breakpoints.
These fellas will be such jerks to each other and then do this.
Highlight* of my summer was when Percy was at the vet all day for a tooth extraction, and then Oliver hissed and growled at him for a week until his smell got back to normal 😭
*not a highlight