Play Video: Optimize for Vibes: Svelte 5 and the New Age of Svelte I gave a talk at CascadiaJS 2024 on what's new in Svelte 5. What follows is a full transcript of the talk. You can also grab the slides (Keynote and PDF available). I gave this talk before Svelte 5 was officially released , but it should still be largely applicable. Let's look at what's new in Svelte 5 and how it makes Svelte apps…
SVG sprites are a great way to manage a lot of SVG icons. Create a sprite sheet with your different icons defined as symbols… < svg xmlns = " http://www.w3.org/2000/svg " > < defs > < symbol id = " arrow-path " fill = " none " stroke = " currentColor " stroke-width = " 1.5 " viewBox = " 0 0 24 24 " > < path stroke-linecap = " round " stroke-linejoin = " round " d = " M16 9h5v0M3 20v-5m0 0h5m-5 0 3…
SvelteKit 2.4 brought a new read helper function to read an asset from the filesystem. This is a quick post on how this function simplifies some very hacky code I wrote for an old demo. Back in 2022 I wrote an extensive post on using Vercel's Satori library to create social sharing images using Svelte. I just went back and updated that post, so it should still be relevant for 2024. However, the…
I returned to the Svelte Radio podcast a couple weeks ago to talk all about View Transitions and Svelte! We talked about: how the browser can handle page transitions now using SvelteKit's onNavigate lifecycle hook to trigger a view transition how view transitions compare to Svelte's built-in transitions You can listen to the episode on all major podcasting platforms. Here are some relevant links…
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. // +page.server.js export async function load ( ) { const slowData = getSlowData ( ) ; return { nested : { slow : slowData } } ; } async function getSlowData…
Posted on Svelte:
Play Video: Mastering SvelteKit with Geoff Rich | JS Drops I recorded a 90 minute SvelteKit crash course with This Dot Labs where we build a music library app (which I named "Sveltunes"). My goal was to give a overview of everything that makes me excited about SvelteKit, so we cover a lot. Topics include: directory-based routing, layouts, parameterized routes, and nested routing loading data with…
In just a few hours I'm giving a talk on SvelteKit at THAT Conference WI . Here's the talk title and abstract: Building Efficient, Resilient Web Apps With SvelteKit Building web apps with all the modern best practices can be complicated. Not only do you want your app to be efficient and load data quickly and intelligently, you also want it to be resilient and stay upright > regardless of your…
Tonight I'll be giving an introductory talk on SvelteKit at SeattleJS . Here's the talk title and abstract: Web development, streamlined: an introduction to SvelteKit SvelteKit is an exciting new web framework that recently launched version 1.0. It combines the well-loved Svelte JavaScript framework with everything you need to build a modern web app: routing, type-safe data loading,…
Svelte 4 is here, and I guested on two shows talking about it! Svelte 4 is mostly a behind-the-scenes update, and breaking changes should be minimal for most users. However, it does have some exciting improvements around custom element generation, IDE autocomplete, and hydration performance. See the full announcement and migration guide for more. First, PodRocket had me on for an episode where I…
Posted on Ordergroove Engineering:
Play Video: Svelte Summit 2023 I spoke at the Spring 2023 Svelte Summit on Svelte and view transitions. The View Transitions API is an exciting new browser API that streamlines the process of animating between two page states. While the headline use case is page transitions, it can also be used for all sorts of animation in your Svelte app. In this talk, I show how you can replace Svelte’s…
Play Video: State of Svelte This Dot Labs hosted a "State of Svelte" livestream today with several folks from the Svelte team and community, including myself. If you’re curious about what’s happening with Svelte lately and where it’s going next, it's well worth a watch! Some of the topics include: how SvelteKit compares to the other server experiments in the ecosystem (Remix, Solid Start, React…
Posted on Upstash:
The View Transitions API (f.k.a. Shared Element Transitions) landed unflagged in Chrome 111 Beta , so I figured it was time to return to some of my demos using the API in Svelte and SvelteKit! If you’re not familiar with the API, the explainer linked above is well worth the read. tl;dr, it’s a browser API that “makes it easy to change the DOM in a single step, while creating an animated transition…
This is just a quick TIL about updating your feature branch with changes from main without switching between branches. The problem: you’re working on some changes in a separate branch and want to update your branch with new changes from the main branch. How do you do it? I used to take the long way round: git checkout main git pull git checkout feature git rebase main However, I recently learned…
Posted on Upstash:
Throughout December (and part of January) I did Advent of SvelteKit 2022 , where I took the Advent of Vue challenges and did them in SvelteKit. Not satisfied with simply recreating the challenge in vanilla Svelte, I had a few extra goals for my solutions: progressive enhancement: where possible, solutions should use native functionality ( <a> and <form> ) so they work without JavaScript and…
Marvel Unlimited By Year (a.k.a. MUBY) is a site I built to browse Marvel comics by release year. For example, this is all the comics released in 1982 that you can read on Marvel Unlimited. Each page has a set of inputs that let you filter which comics are shown. You can filter issues by title, release month, series, creator, and event, and sort them in various orders. These filters only worked on…
We'll get back to our regularly-scheduled webdev posts soon (🤞), but first I wanted to post about a non-dev side project I've been working on: a giant playlist surveying the video game music releases of 2022! This was very much inspired by the exhaustive Fluxblog survey playlists for pop music, though I didn't pay any attention to the sequencing of tracks. It focuses on breadth instead of depth -…
It's my first time doing one of these, but I wanted to take a little time to look back at the year that was. Writing I wrote 12 articles this year (excluding posts that were linking to other content), which feels good to me. I'd always like to write more, but I have more ideas than time and an average of 1 a month feels like a good pace. My favorite posts were the ones where I did a deep dive on…
I recently came across Advent of Vue , which looks like they'll have some fun front-end challenges for December. While they're Vue-focused, I assume any front-end tech should work. I'll be attempting them with Svelte & SvelteKit. They sent out an early challenge to recreate the game tic-tac-toe. Here's the solution I came up with. The code is on GitHub , and I'll briefly explain it below. While…
This post was updated in January 2024 to use SvelteKit's new read method to read font data on the server. When you share a blog post or site on social media, the first thing most people will see is a social card image, or "og:image". Adding one of these can massively increase the number of people who engage with your post. In the past, you either had to manually create these images or…
My webdev project last weekend: I got partial hydration working in a SvelteKit site using the <is-land> custom element from Eleventy ! This means it's possible to only download JS for specific components instead of the whole page. Here's what the integration currently looks like: < script > import Count from '$lib/islands/Count.svelte' ; import Island from '$lib/Island.svelte' ; </ script > < h2 >…
I got a new job in August, and I'm really enjoying the new problem space and all the great people I work with! However, like most companies, they write their frontend in React. This took some getting used to after writing Svelte for so long. Here are four things from Svelte that I deeply miss when writing React code. (Psst - this is not a React hate post. Different frameworks solve different…
Play Video: Learning Svelte from scratch with Geoff Rich: A Svelte tutorial I was on Teach Kelvin Your Thing to teach Kelvin Svelte! I had a great time — thanks again to Kelvin for having me on. We created a Star Wars watch order app. You can check out the live demo or view the source code on GitHub . We covered: What Svelte is Svelte component basics — script, template, style Reactivity in Svelte…
This post was updated in February 2023 to handle breaking changes in the view transitions API (previously called shared element transitions), and in September 2023 with a new SvelteKit lifecycle method that streamlines the setup process. Chrome now supports a new web API that will let you easily animate between two different pages, which is a long-desired feature in browsers. I’ve been…
Disclaimer: this presentation was about an API that has since been renamed and had some breaking changes. See the official explainer for the most up-to-date information. Play Video: Svelte London - August Meetup I'm presenting remotely at the Svelte London meetup today. I'll talk about using the new shared element transition API to enable page transitions in a SvelteKit app. Below are some…
Posted on Upstash: Building an app with SvelteKit, Upstash Redis, and Vercel Edge Functions.
Over the past couple months I’ve been posting some Svelte demos to Twitter. I’ve been meaning to turn some of them into full blog posts, but I’ve been quite busy so that hasn’t happened yet. Since Twitter is ephemeral, I wanted to write a quick post capturing these demos for future reference. No in-depth explanations here—I’ll be keeping it pretty short. However, some of these might be given a…
This week I had the pleasure of guesting on Svelte Radio , the best (and only?) Svelte-focused podcast on the web! We talked about what I do at Alaska Airlines, life so far as a Svelte core team member, and the recent Svelte Summit event. You can listen to the episode on all major podcasting platforms. Here are some relevant links from the conversation: Alaska Airlines' Auro Design System , built…
Svelte has a built-in solution for component theming using style props . So, you can use CSS custom properties in your component styles... < p > I have something important to say. </ p > < style > p { border : 2px solid var ( --line-color ) ; /* Decorative styles */ padding : 1rem ; max-width : 60ch ; } </ style > ...and easily set them from outside the component using style props. < TextBox…
I recently had my first podcast appearance on 20minJS , where I discussed Svelte and getting into open source with Fernando Doglio. I thought it was a great conversation and really appreciated the opportunity! I pulled some of my favorite portions of the interview below, though definitely check out the full episode for the rest of the conversation. It should be available on all major podcast…
I've helped a few devs at my company get started with Svelte, and I love seeing how easy it is for them to pick it up and start being productive. However, I've noticed a few areas where they write verbose code without realizing that Svelte has a cleaner way to do the same thing. Drawing on that experience, I've collected four ways to write cleaner and Svelte-ier component code. I think these will…
Style directives weren't the only new feature introduced in Svelte 3.46! Let's take a look at the other recent addition to Svelte: the @const tag . The problem Let's say you're displaying a list of boxes and calculating their areas, and also want to apply some styling when the area is a certain amount. You might think of doing something like this: < script > let boxes = [ { width : 1 , height : 2…
Svelte 3.46 released a new feature: style directives ! In this post I'll show you how to use them and the advantages they have over setting the style attribute directly. The style attribute A common strategy for writing dynamic styles in Svelte is to apply the styles directly as an attribute. For example, here's how you can make a box move around the screen with a couple of range sliders. < script…
If you're writing Svelte code, you'll notice that $ can have multiple different meanings, depending on the context. For example, look at this code snippet — $ is used in three different ways! If you're new to Svelte, or to JavaScript in general, it can be confusing to keep them all straight. $ : console . log ( ` Total: ${ $count } ` ) ; In this post, I'll show all the different meanings that $…
I don't think it's widely known that you can call the Svelte lifecycle methods (onMount, onDestroy, beforeUpdate, afterUpdate) outside of a component. It is mentioned in the Svelte docs and tutorial, though it's easy to gloss over. The onMount function schedules a callback to run as soon as the component has been mounted to the DOM. It must be called during the component's initialisation (but…
Posted on LogRocket: Svelte actions are a very powerful feature of Svelte. I break down two situations where an action makes your code simpler and more reusable.
Play Video: Geoff Rich - Svelte Transitions and Accessibility I spoke at the Fall 2021 Svelte Summit on Svelte Transitions and Accessibility. Svelte includes built-in animations that makes it easy to slide, scale, and fly elements in and out of the DOM. However, you need to be careful to not trigger motion sickness in your users. In my talk, I go over which Svelte transitions could cause…
Posted on Upstash: How to integrate Redis into a SvelteKit app.
Svelte's accessibility (often shortened to "a11y") warnings are one of the framework's standout features. Per Rich Harris , Svelte is an "a11y-first framework" that "will let you write non-accessible markup, but it won't respect you for it." Accessibility warnings in the compiler have been a part of the framework since version 1.38 , and are highlighted in the first section of the tutorial. When I…
This is a transcription of Rich Harris' talk at Jamstack Conf 2021 . I've also added links to related content or topics as appropriate. You can watch the recording on YouTube , and I highly recommend you do so—Rich is an engaging speaker, and there's some visual elements I couldn't capture in the text. I made this transcription to make the content easier to reference by myself and others. If Rich…
LogRocket's podcast PodRocket released a new episode with Rich Harris, the creator of Svelte , this morning. There were so many good insights in it that I wanted to pull out some choice quotes and take some notes to share this in a non-audio medium. I highly recommend listening to the full episode, especially if you're new to Svelte. Even if you're already familiar with Svelte, there are still…
tl;dr I launched a new site where you can see Marvel comics published in a given year and retrieve a random comic available on the Marvel Unlimited app. The code is open source on GitHub. On September 9, the Marvel Unlimited app (MU), which lets you read tens of thousands of Marvel's comics for a monthly fee, got a huge update. While it added some long awaited features such as unlimited downloads,…
Or, alliteratively: Settling Svelte's style scoping specificity wars with :where In my previous post on Svelte's style scoping , I lied to you. When talking about how Svelte's style scoping can unexpectedly increase CSS specificity, I said: Svelte needs to add something to the CSS rules to make sure they only apply to a single component, and that will increase the specificity. That's not entirely…
By default, any styles you write in a Svelte component are scoped to that component. This means that the p selector in the following code will only apply to <p> elements inside this component. < p > This is a paragraph with scoped styles. </ p > < style > /* I only affect elements in this component */ p { color : green ; } </ style > But how does this scoping actually work? In this post, I'll…
Posted on CSS-Tricks: What to look out for when using custom elements in a Svelte application.
The Tower of Hanoi is a classic mathematical puzzle that is often used as an introduction to recursion. We can express a solution to this problem only using Svelte's template syntax. What is the Tower of Hanoi? The Tower of Hanoi asks you to move a stack of disks from one rod to another. The disks have different diameters and begin with the largest disk on the bottom and the smallest disk on top.…
I recently had the pleasure of attending Deque's axe-con digital accessibility conference. Over the course of two days, I attended multiple sessions about many different facets of accessibility. I mainly focused on the developer track at the conference, though I sampled a few talks from other tracks. Here are some of the highlights and what I took away from the sessions I attended. I link the…