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. I will go over which Svelte transitions could cause accessibility issues and how to respect user motion preferences when using them.
Custom stores can be used to wrap transforming data to and from storage mechanisms, either inside the browser or outside. Here we demonstrate a couple of fun transforms that have practical and real-world use.
Finite state machines provide an elegant, powerful approach for modeling complex behavior, and are ideally suited to many UI components. Alas, existing JavaScript FSM implementations feel verbose and bloated alongside Svelte's elegant, minimalist syntax. No more! svelte-fsm is the Svelte-esque FSM library. Discover the joy and benefits of using svelte-fsm to manage your components' state.
Domenik Reitzner had a dialog with his brave audience about the dialog element and how to integrate it with Svelte. He showed us the benefits of using the platform and what a11y(accessibility) benefits come out of the box, by using this HTML element.
The video explains skip links, which are used to improve web navigation efficiency. Skip links allow users to jump directly to the main content or other key sections of a webpage when using a keyboard or screen reader.
This is a short introduction of the talk2svelte library which provides voice recognition and voice synthesis for Svelte, thanks to the Web Speech API.
It allows to interact with a Svelte site by voice, like navigating or clicking on elements.
This week’s topics:
0:00 Introduction
0:21 Changelog - Svelte 4.0.2-4.0.5, SvelteKit 1.22.0-1.22.1
4:41 Quick facts - @const usage tips, form.requestSubmit()
12:26 Discussion - Svelte 5 wish list
19:51 Q&A - Using local storage with a custom store
23:42 Q&A - how to safely use setInterval()
27:01 Q&A - how to reuse code across multiple projects
31:59 Q&A - how to use markdown with SvelteKit
0:00 Introduction
0:20 Changelog - SvelteKit 1.22.6
1:59 Community Showcase - sveltekit-search-params by Paolo Ricciuti
22:32 Q&A - How to create accessible form error summaries
00:00 Introduction
00:30 Announcements - Svelte Summit
01:10 Runes Primer
13:17 Runes FAQ
19:20 Rune helpers and stores with Hunter
26:26 Runify demo and fine-grained reactivity with Paolo
35:00 The library maintainer’s perspective with Hunter
45:08 Poll: the kinds of applications we make
53:25 Paul proposes Runes be a compiler-based toolchain separated from Svelte, similar to RxJS
1:01:11 Everyone’s impressions of Runes
1:02:48 Tantei-Kun likes the $props Rune
1:07:32 Poll: everyone’s impression of Runes so far
When people hear metaframework, the first thing they think of is usually SSR. However, SvelteKit also supports other rendering strategies like CSR and prerender. As the recommended way to build any Svelte app, is it going to offer the best DX for all its use cases? In this talk I'll share my experience and tell you what's good, what's bad, and what's awesome about building SPAs with Sveltekit.
Do you find Svelte's a11y warnings get in your way? They're actually part of a greater mission shared by nations around the world to make the digital web universally accessible. In this talk, I will break down some of Svelte's a11y warnings, the user experiences they impact, and how to solve them.