Skip to content

Instantly share code, notes, and snippets.

@hoangitk
Forked from vedam/svelte-summit-2020-summary.md
Created November 26, 2020 09:06
Show Gist options
  • Save hoangitk/215f15df05d3ea072d2c31274dc5c583 to your computer and use it in GitHub Desktop.
Save hoangitk/215f15df05d3ea072d2c31274dc5c583 to your computer and use it in GitHub Desktop.
links and ressources from the svelte-summit-2020 talks

You'll find the talks here


Morgan Williams @mrgnw

The Zen of Svelte

Approaching frontend as a backend developer, Svelte feels surprisingly pythonic. Let's take a quick look at what's familiar, what's foreign, and how to explore the gap.

ressources | links:
https://mrgnw.dev/
https://github.com/mrgnw


Daniel E. Sandoval @d3sandoval

Prototyping Testing with Real Data Models using Svelte

Rapid prototyping and feedback is the best way to ensure that our products are solving real problems and meeting user needs. Tools like Figma and InVision let us mock up something quickly and get static prototypes in front of users without having to dive into the intricacies of building real software. These tools fall short, however, when our prototype relies on real data in order to test our assumptions in a user interview or usability test.

ressources | links:
https://d3sandoval.github.io/svelte-summit-example/


Nicolo Davis @nicolodavis

How does Svelte's crossfade function work?

Declarative programming is nice. However, actions performed on a web app are imperative. Svelte's crossfade function provides a way to bridge the gap seamlessly.

ressources | links:
https://nicolodavis.com/
https://boardgamelab.app/


Jim Fisk @jimafisk

Zero config Svelte websites with Plenti

Plenti is an open source static site generator (SSG) that uses Svelte to give developers a dead simple way to make dynamic and speedy websites. It takes a new approach by cutting out bundlers, hitting the compiler directly in V8, and building scaffolding in Go to give an extremely fast and consistent developer experience. We'll go over how the data source, content structure, layout, routing, and hydration are all connected to work out-of-the-box. You don't need any tools or configuration to get started — NodeJS and NPM are optional.

ressources | links:
https://plenti.co/


Matthias Stahl @h_i_g_s_c_h

How you setup data visualization with Svelte

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.

Lean back and I’ll show you the how and the wow!

ressources | links:
https://interference2020.org/
https://github.com/DFRLab/interference2020
Svelte and D3 talk: https://www.youtube.com/watch?v=bnd64ZrHC0U
https://www.higsch.com/


Luke Edwards @lukeed05

Svelte at the Edge: Powering Svelte Apps with Cloudflare Workers

Will Svelte run inside a Cloudflare Worker? What are the benefits? Are there trade-offs? Can we make this easier?

ressources | links:
https://github.com/lukeed/svelte-ssr-worker
https://github.com/lukeed/cfw
https://github.com/lukeed/freshie


Ron Au @ronvoluted

The Web à la Mode

The web is a mouthwatering platform, fashionably served with a side of sweet reactivity. Take a wild ride exploring what it has to offer you and how Svelte ties it all together.

ressources | links:
https://audioscape.vercel.app


Dominik G

Introduction to Svite

An Introduction to svite and demonstration of its features:

  • easy setup with cli
  • ultra fast hot-module-reloading
  • optimized production build

ressources | links:
https://github.com/dominikg/svite


R. Mark Volkmann @mark_volkmann

Svelte Animations - Builtin and Custom

This talk equips Svelte developers to add animations to their apps. First, builtin animations using the svelte/animate, svelte/motion, and svelte/transition packages will be described and demonstrated. Then we will venture into creating custom animations and show how they are based on CSS rather than JavaScript for best performance. The content is derived from my book 'Svelte and Sapper in Action'.

ressources | links:
https://github.com/mvolkmann/talks
https://www.manning.com/books/svelte-and-sapper-in-action


Annie Taylor Chen @annietaylorchen

How to build a cat-themed streaming service with Svelte

Have you heard of Meowflix, a Netflix but dedicated only to cat-themed movies, built by a group of diligent cats? Tune in for a brief walkthrough on how it was made.

ressources | links:
https://meowflix.annietaylorchen.com/
https://github.com/AnnieTaylorCHEN/meowflix
https://www.annietaylorchen.com/


Peter Allen @evilpingwin

REPLicant

A REPL, or online playground, is a great way to allow users to test-drive tools you have built without needing to install a thing, but they are also great for interactive tutorials, sharing snippets and reporting bugs!

The Svelte REPL has been a feature of the svelte ecosystem since time immemorial and while REPLs can be complex, the principles are simple when you know them.

We will take a dive into how the Svelte REPL works and build the simplest possible version. LIVE!

ressources | links:
https://github.com/pngwn/REPLicant


Kirill Vasiltsov @virtualkirill

Unlocking The Power of Svelte Actions

Learn how to make development easier with Svelte actions. Create custom events, extend DOM attributes, share animation logic and more.

ressources | links:
https://svelte.dev/repl/8b7d235f5d8d4042943c576107db12a9?version=3.29.0
https://svelte.dev/repl/fc3332d390ff4bbda09ce6836733acd5?version=3.29.0
https://svelte.dev/repl/ddffbe09e1b94ab990ed3fc61294d96d?version=3.29.0
https://svelte.dev/repl/42c9753e490d455793376947736abd7f?version=3.29.0
https://www.kirillvasiltsov.com


Alessandro Segala @ItalyPaleAle

So you want to pick a router?

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.

ressources | links:
https://github.com/ItalyPaleAle/svelte-spa-router
https://www.amazon.de/Svelte-Up-Running-practical-production-ready-ebook/dp/B08D6T6BKS#ace-g5838072839


Nick Reese @nickreese

Building SEO Friendly Sites with Svelte and Elder.js

Svelte makes interactivity a breeze but building SEO focused websites with Svelte isn't as easy as it seems.

In this talk we'll explore how you can use Svelte and Elder.js to build flagship SEO sites. We'll cover routing, partial hydration, hooks, and shortcodes so you can hit the ground running.

ressources | links:
live-demo: https://elderjs-svelte-summit.netlify.app/
https://github.com/nickreese/elderjs-svelte-summit
https://github.com/Elderjs/elderjs


Tim Raderschad @cstrnt

Modern fetch in svelte using stores

In this short talk we will take a look at using Svelte and their awesome stores to create a modified version of fetch which will make our UIs feel responsive and clean. At the end we will also sprinkle in a bit of caching to further improve the performance. We will also talk about Loading Spinners and how we can avoid bored users!

ressources | links:
https://cstrnt.dev/
https://github.com/cstrnt


Tan Li Hau @lihautan

Demystifying Svelte Transitions

It's unbelievably easy to create a cool slick transition in Svelte. Do you ever wonder how Svelte make it so simple? or how does Svelte make it performant and smooth?

In this talk, we are going to take a deep dive to look at the transition mechanism, how Svelte coordinates transitions across components, and what make them performant.

ressources | links:
https://svelte.dev/docs#svelte_transition
https://svelte.dev/examples#transition
https://lihautan.com/


Rich Harris @rich_harris

Futuristic Web Development

The front end development landscape has been transformed since we started building Svelte and Sapper. What would a reimagined, truly modern workflow look like?

ressources | links:
https://github.com/sveltejs/kit

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment