Creating effective and unique data visualizations for news websites requires sophisticated tools. In fact, Svelte is currently becoming a gold standard tool to build interactive graphics for the world’s newsrooms. Why is that and what is so special about Svelte? Come and let’s go on a behind-the-scenes walk into the machine room of a modern interactive data visualization.
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.
Routify 3 preview and walkthrough — app creation via CLI, plugin usage (Index By Name), Pico CSS integration, page ordering, and route metadata concepts.
Build-time metadata generation, API data fetching (e.g., GitHub), Markdown-to-HTML conversion, dynamic routes and imports for SSR, navigation and multi-router features, and router state persistence.
If you are building a Single-Page App (SPA), you will likely need a router for your app. With the lack of an official router for Svelte 3, there's quite a few options, so which one should you pick?
In this talk, we'll look at the two different kinds of routers (based on the History API or based on the page's hash), how they differ, and when you should pick which. We'll also go through a demo of implementing routing for a Svelte 3 SPA using svelte-spa-router.
Svelte is not just a JavaScript compiler. It is a way of thinking to design complex data visualizations. Come with me on a journey through one of my recent Svelte data visualization works.
Join GHOST for our Second Svelte Sirens event as she shows you the magic of Routify in Svelte Kit. Take a look at the links below to find out more about Routify, Svelte Kit, Svelte Sirens, and GHOST!
A developer's journey with Svelte, showcasing the creation of Eleftable, a survey application for data visualization.
Visualization of candidate electability and likeability, with emphasis on technical implementation, user engagement goals, and potential expansion.
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
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