News Articles svelte

Writing Chrome Extensions Using Svelte-Kit and Manifest v3

Svelte-Kit has been an amazing tool to create great responsive and reactive websites. But with its roots as a compiler, I wondered how I could use it to create a Chrome Extension, and as it turns out… it’s really simple. Today, we’re going to see how we can build a simple extension with Svelte-kit and […]

How to Build Your First Custom Svelte Transition

The Svelte transition API provides a first-class way to animate your components when they enter or leave the document, including custom Svelte transitions. By default, the transition directive uses CSS animations, which generally offer better performance and allow the browser’s main thread to remain unblocked. The API is as simple as this: <element transition:transitionFunction />. […]

Add storybook.js to a sveltekit project

First Create a sveltekit project and initialize storybook.js 1. npm init [email protected] sb-svelte 2. cd sb-svelte 3. npm install 4. npx [email protected] init 5. npm run storybook Running storybook at this moment should give you error. Here are the steps for the fix: change “type”: “commonjs” in package.json rename svelte.config.js to svelte.config.mjs replace your .storybook/main.js […]

Build a video call app with Svelte in an afternoon

Daily’s JavaScript library, daily-js, is compatible with any frontend framework, which means choosing your stack is really up to you. Today we’ll be looking at one of our favourite frameworks at Daily… Svelte! 🎉 In today’s tutorial, we’ll rebuild our Daily Prebuilt demo, already built in React and Vue, but this time with Svelte! ✨ […]

How to Make a Component That Supports Multiple Frameworks in a Monorepo

Your mission — should you decide to accept it — is to build a Button component in four frameworks, but, only use one button.css file! This idea is very important to me. I’ve been working on a component library called AgnosticUI where the purpose is building UI components that aren’t tied to any one particular […]

How to handle in forms in Svelte?

Forms! Forms! Forms! Forms are an integral part of any web application. We can’t imagine an application without forms. Generally, we use forms for User registration User login Subscription Contact Form Adding/Updating/Removing any kind data to or from the database In this article, we learn how to create an HTML form. And we also go […]

⚡⚡Learn Svelte & WebRTC before you enter 2022 ⚡⚡

Hi everyone, thanks for checking out this blog . In my previous blog post I shared my first open source project written in Svelte and WebRTC. The project is in its early stage and I’m basically looking for any help with code. So far I created a demo SvelteKit web app which you can demo […]

Using WebRTC and Svelte

Hello everyone kindly check out this github repo which hosts the code for my tutorial on how to use Svelte and Google’s WebRTC. What is WebRTC? WebRTC is a protocol used for having real time communications in the web. With WebRTC, you can add real-time communication capabilities to your application that works on top of […]

highsea : color range generator for tailwindcss

If you like using tailwindcss, every now and then you find yourself in the position of wanting to use a specific shade, but no default color in the tailwindcss range does fit the bill, it’s too greenish or to reddish or too whatnot – it just doesn’t work. From there, either you build your own […]

Preloading images in Svelte

Let’s say you are building a dynamic image slider and would like to preload images that aren’t shown yet in the background. Svelte and the link tags preload functionality makes this a breeze. First we generate a list of URLs – this will depend on your implementation. Second we insert <link rel=”preload”… tags into the […]

Setting up a new Rails 7 app with Vite, Inertia, and Svelte

Rails 7 has been released and Webpacker is being phased out. If you’re like me and prefer to use component frameworks over DHH’s new Hotwire thing, you might want to look for alternatives now. I’m happy to say that I found vite_ruby to be a more than capable replacement. So here is a quick guide […]

Per-user global stores in Sveltekit

Svelte is really nice with stores. You can have a separate folder like this with named global stores: // stores/user.ts import { writable } from “svelte/store”; export const user = writable<User | null>(null); // stores/products.ts import { writable, get as $ } from “svelte/store”; import { user } from “../user”; export const products = writable<Product[] […]

Reactive variables are not working – svelte

Reactive variables are not working in my svelte application. When I log them on my console they are undefined. I have in App.svelte the following relevant code <script> let polls = [ { question: "JavaScript or Python?", answerA: "JavaScript", answerB: "Python", votesA: 16, votesB: 4 } ] const handleVote = e => {/* increase vote […]

The many meanings of $ in Svelte

If you’re writing Svelte code, you’ll notice that $ can have multiple different meanings, depending on the context. For example, look at this code snippet — $ is used in three different ways! If you’re new to Svelte, or to JavaScript in general, it can be confusing to keep them all straight. $: console.log(`Total: ${$count}`); […]

The future of Svelte

In this 45-minute interview, hear Rich Harris talk about its plans for the future. Source: Hey, designer!

Why does the width of my web page extend beyond my viewport?

I have this web page. All the content of the web page is within the size of my desktop’s view port. However, the width of the page still goes beyond the view port. I even tried putting margin and padding at 0 but nothing worked. It also looks especially awkward in mobile view. How do […]

My Django-Svelte setup for fullstack development

My Django-Svelte workflow for fullstack development Motivation About this post The app Prerequisites Setup Code: Django – Code: Svelte Code: Django – spa view Test it Adding Authentication Rest API Building for Production Conclusions Motivation I recently discovered Svelte and became my first choice for personal projects and MVP/POCs. As a backend developer, I […]

How to create an Electron application with Vite

Note: Cet article est disponible en français ici To be able to create a software with Electron is not so complicated. Lots of boilerplates exist, documentation is everywhere on the internet…. However, none of the boilerplates really explain how to create an Electron project with Vite. Let me explain in a few steps how to […]

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.