Tutorials on Svelte

This article dives deep into the realm of micro-frontends, with a particular emphasis on the Qwik Framework. This article also explores why Qwik may be a superior choice for managing micro-frontends compared to its counterparts like React , Angular , Vue , and Svelte . Micro-frontends represent an innovative design approach where a frontend app is partitioned into small, independent, manageable units that operate cohesively. Each unit, known as a micro-frontend, is managed by a separate team, leading to highly efficient and scalable development processes for complex applications.

SEO is a critical element for any online platform's success. As SEO gained momentum, web development technologies like React , Angular , Vue , and Svelte had to integrate SEO into their core structure. However, there is a technology designed from scratch to incorporate SEO principles into its core structure — Qwik . This article will explore how Qwik promises superior SEO performance compared to other popular web development technologies.

In this article, we will create a data visualization that displays the ratio of Dunkin’ Donuts locations to Starbucks locations (by state) using D3 and Svelte. Which of America’s largest coffee chains keeps your state awake and ready for the 9-5 workday?

In this article, we will create a data visualization that animates the changes in the stargazer counts of popular front-end library/framework GitHub repositories over the past 15 years. Which front-end libraries/frameworks currently dominate the web development landscape? Which front-end libraries/frameworks used to dominate web development landscape?

In this article, we will create a data visualization that displays the frequency of words in the lyrics of a song under the Billboard Hot 100 list, Vampire, by Olivia Rodrigo, using D3 and Svelte. Which words do you think catapult a song to the Billboard Hot 100 list?

SvelteKit is a serverless-first framework for building high-performance, web applications with Svelte. Newcomers to Svelte can think of SvelteKit as Next.js or Nuxt.js, but for Svelte. First announced in October 2020 , SvelteKit entered public beta in March 2021 and is the successor of Sapper , a now deprecated Svelte-based framework. With the Svelte team abandoning sveltejs/template and sveltejs/sapper-template , SvelteKit became the de-facto framework for building any type of web application (of any size) with Svelte. SvelteKit inherits many of Sapper's functionality and features: However, the Svelte team designed SvelteKit to address Sapper's shortcomings: Although the road to v1.0 remains in progress, you can still build production-grade, SEO-friendly applications with the SvelteKit beta. The best part of SvelteKit is the ability to build Next.js-like applications with an amazing developer experience and with Svelte, which exceeds React in terms of performance and size. Svelte's compiler turns Svelte components (written with an intuitive, declarative API) into efficient JavaScript.

To get a better understanding of what Svelte brings us, it helps to step back and look at how we got here: Back in the 90s, in the original version of the web, there was only HTML. Browsers displayed static documents without any interactivity. The only way to get updated information, was by reloading the page, or navigating to a new page. In 1995, Netscape released JavaScript , making it possible to execute code on the end-user's machine.

Disclaimer - If you are unfamiliar with the Context API in Svelte applications, then please read this blog post before proceeding on. You must understand the limitations of the Context API to better understand stores and how they address those limitations. For components in a Svelte application to share data irregardless of the subtree they belong to in the component hierarchy, Svelte provides stores for handling global state via the svelte/store module. Unlike the Context API, which involved setting contexts directly in the