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).| Geoff Rich
SVG sprites are a great way to manage a lot of SVG icons. Create a sprite sheet with your different icons defined as symbols…| Geoff Rich
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.| Geoff Rich
How SvelteKit 2.4's new read function simplifies things| Geoff Rich
I returned to the Svelte Radio podcast a couple weeks ago to talk all about View Transitions and Svelte! We talked about:| Geoff Rich
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:| Geoff Rich
In just a few hours I'm giving a talk on SvelteKit at THAT Conference WI. Here's the talk title and abstract:| Geoff Rich
Tonight I'll be giving an introductory talk on SvelteKit at SeattleJS. Here's the talk title and abstract:| Geoff Rich
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:| Geoff Rich
This is just a quick TIL about updating your feature branch with changes from main without switching between branches.| Geoff Rich
Generate custom og:images on-demand using Vercel’s Satori library| Geoff Rich
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:| Geoff Rich
I was on Teach Kelvin Your Thing to teach Kelvin Svelte! I had a great time — thanks again to Kelvin for having me on.| Geoff Rich
My meetup talk on native page transitions in SvelteKit.| Geoff Rich
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.| Geoff Rich
A few techniques for giving Svelte style props a default value.| Geoff Rich
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 accessibility issues and how to respect user motion preferences when using them.| Geoff Rich
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.| Geoff Rich
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.| Geoff Rich
Or, alliteratively: Settling Svelte's style scoping specificity wars with :where| Geoff Rich
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.| Geoff Rich
Preventing loading flickers and serving users without JavaScript| Geoff Rich
Svelte 4 is here, and I guested on two shows talking about it!| Geoff Rich
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 built-in flip and crossfade animations with view transitions, as well as the pros of cons of each approach.| Geoff Rich
Adding animation to Svelte apps using an experimental browser API.| Geoff Rich
Using SvelteKit, form.requestSubmit, and Zod to build a robust Marvel Comics search experience.| Geoff Rich
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.| Geoff Rich
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.| Geoff Rich
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.| Geoff Rich
Conditional wrappers, native page transitions, an action to detect focus leaving, and a recursive action.| Geoff Rich
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!| Geoff Rich
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.| Geoff Rich
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.| Geoff Rich
Writing more maintainable and optimized dynamic styles with the style directive.| Geoff Rich
Well, not exactly anywhere. But it's more than just inside components!| Geoff Rich
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.| Geoff 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.| Geoff Rich
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.| Geoff Rich
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.| Geoff Rich
Update 11/2021: this post was adapted into a lightning talk I recorded for the Fall 2021 Svelte Summit.| Geoff Rich
The prefers-reduced-motion media query is used to detect if the user has requested that animation and motion be minimized. Website animation may trigger motion sickness for those with vestibular disorders, and it is important to disable non-essential animations for these users. prefers-reduced-motion is often used in a CSS stylesheet to disable certain animations, though it can also be used to modify animations applied with JavaScript.| Geoff Rich
I had a great time solving the latest challenge from Andy Bell's Front-End Challenges Club! I'm looking forward to see how he implemented it, but here's my solution and some notes on my approach.| Geoff Rich
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.| Geoff Rich
Applying forms and progressive enhancement to daily holiday UI challenges.| Geoff Rich
position: sticky is a CSS property that lets you "stick" an element to the top of the screen when it would normally be scrolled away. However, there is no native way to change the element's styling when it becomes stuck. In this article, I will show you how to detect and style a "stuck" element using an underused feature of the Svelte API: actions.| Geoff Rich
Using a new browser API to create slick, animated page transitions.| Geoff Rich