- "Publish your components" by Yusuf, Frontend engineer. - "Publikasi Komponen" oleh Yusuf, Frontend engineer.

Matthias tweeted a 20 line of code i18n library with Svelte and it went semi-viral: https://twitter.com/h_i_g_s_c_h/status/1344223132308164616

Damodar Lohani (from Nepal!) explains what he likes about Svelte!

"Svelte Compiler" by Li Hau Tan, Frontend engineer at Shopee Singapore.

Let's use mental models we already know to learn 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.

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.

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.

An Introduction to Svite and demonstration of its features: - easy setup with cli - ultra fast hot-module-reloading - optimized production build

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.

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.

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

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!

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!

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?

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'.

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

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.

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.

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.

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.

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

It's finally time. Let's all hunker down and watch 17 great Svelte talks. 00:11:23 - The Zen of Svelte (Morgan Williams) 00:17:20 - Prototyping Design with Svelte (Daniel Sandoval) 00:50:16 - How does Svelte's crossfade function work? (Nicolo Davis) 00:58:12 - Plenti (Jim Fisk) 01:17:04 - How you setup data visualization with Svelte (Matthias Stahl) 01:57:20 - Svelte at the Edge: Powering Svelte Apps with Cloudflare Workers (Luke Edwards) 02:34:59 - The Web á la Mode (Ron Au) 02:50:44 - Introduction to Svite (Dominik G.) 02:59:40 - Svelte Animations (Mark Volkmann) 03:30:00 - How to build a cat-themed streaming service with Svelte (Annie Taylor Chen) 03:38:55 - REPLicant (Peter Allen 🐧) 04:19:55 - Unlocking The Power of Svelte Actions (Kirill Vasiltsov) 04:35:45 - So you want to pick a router? (Alessandro Segala) 05:00:00 - Building SEO Friendly Sites with Svelte and Elder.js (Nick Reese) 05:36:10 - Modern Fetch in Svelte using Stores (Tim Raderschad) 05:54:58 - Demystifying Svelte Transitions (Tan Li Hau) 06:41:00 - Futuristic Web Development (Rich Harris)

Svelte a annoncé récemment le tant attendu support officiel de Typescript. Je vous propose un REX sur l'ajout de TS à ma petite application Svelte pour afficher ses stats Velib. Qu'est-ce qu'on y gagne? Est-ce que la peinture est sèche? Svelte recently announced its long-awaited official support for TypeScript. I'd like to share my experience adding TS to my small Svelte app that displays my Velib stats. What are the benefits? Is it ready for prime time?

J'ai testé Svelte et Sapper pour la première fois lors d'un projet libre pour mon école (Epitech). Il s'agit d'une application web permettant d’agréger des événements (concerts, meetups, etc...) de différentes plateformes en ligne (EventBrite, Meetup, Facebook Events). J'ai également utilisé un client GraphQL avec Svelte via Svelte-Apollo. I tried Svelte and Sapper for the first time during a personal project for my school (Epitech). It's a web application that aggregates events (concerts, meetups, etc.) from different online platforms (EventBrite, Meetup, Facebook Events). I also used a GraphQL client with Svelte via Svelte-Apollo.

Lorsque j'ai décidé de me plonger dans les tutoriels du site webglfundamentals.org, j’ai eu envie de créer une interface pour tester les exemples que je suivais. Par la même occasion, je me suis dit que ce serait tellement plus marrant de créer une boucle de retour avec des emojis, basée sur ce qui se passe lorsqu'on finit le tutoriel officiel de Svelte. Je vais vous montrer comment j’ai reconverti un POC fait en vanillaJS en une sorte de notebook personnel, en me servant de Svelte et Sapper, et en utilisant Cypress et Cucumber pour guider mon développement. When I decided to dive into the tutorials on webglfundamentals.org, I wanted to create an interface to test the examples I was following. While I was at it, I thought it would be way more fun to create an emoji feedback loop, based on what happens when you finish the official Svelte tutorial. I'm going to show you how I converted a vanilla JS proof-of-concept into a sort of personal notebook, using Svelte and Sapper, and using Cypress and Cucumber to guide my development.

Chez Schneider Electric nous avons choisi Svelte comme framework pour rassembler tous les composants web construits avec différentes technologies comme React, Angular et Stencil et nous aider à construire un set de composants d'interface utilisateur qui fonctionnent bien avec les API. Nous avons choisi Routify comme routeur et déployé notre application sur AWS Amplify, elle est en ligne depuis 3 mois avec environ 10 000 utilisateurs. L'application est censée accueillir 800 000 utilisateurs au début de l'année prochaine et nous sommes ravis de partager les leçons apprises jusqu'à présent avec la communauté. At Schneider Electric, we chose Svelte as the framework to bring together all the web components built with different technologies like React, Angular, and Stencil, and to help us build a set of UI components that work well with APIs. We chose Routify as our router and deployed our application on AWS Amplify; it has been live for 3 months with about 10,000 users. The application is expected to support 800,000 users by early next year, and we are excited to share the lessons we've learned so far with the community.

Chez AXA nous avons été confrontés à un problème : la visibilité de nos pull-requests entre les différentes feature teams. Pour y remédier, nous avons créé Skizzle une app desktop qui regroupe tous les projets et qui permet de recevoir toutes les pull-requests. Nous avons fait le choix radical de réécrire l'application et de passer de Angular à Svelte. Je vous montrerai en quoi Svelte a permis à ce projet de prendre une nouvelle dimension en termes de maintenabilité et de performances. At AXA, we faced a problem: the lack of visibility of our pull requests across different feature teams. To solve this, we created Skizzle, a desktop app that consolidates all projects and allows us to receive all pull requests. We made the radical decision to rewrite the application, switching from Angular to Svelte. I will show you how Svelte took this project to a new level in terms of maintainability and performance.

Les composants sans rendu (renderless components) sont des composants spéciaux qui ne contiennent aucun markup. En combinant slots, context API et stores, ils permettent d'encapsuler des comportements communs. Au travers de plusieurs exemples, je vous propose de découvrir ensemble comment ça fonctionne. Renderless components are special components that contain no markup. By combining slots, the context API, and stores, they allow you to encapsulate common behaviors. Through several examples, I invite you to discover with me how they work.

À l'heure où nos applications web sont de plus en plus complexes, lourdes, gourmandes, et mettent en péril la survie des bébés phoques, est-il possible de concevoir des applications plus éco-friendly ? Découvrons ensemble comment Svelte peut nous aider à construire un web plus léger, plus rapide et plus écolo. At a time when our web applications are becoming increasingly complex, heavy, resource-hungry, and are endangering the survival of baby seals, is it possible to design more eco-friendly applications? Let's discover together how Svelte can help us build a lighter, faster, and greener web.