The other day I was prototyping a new internal app at work in React using Next.js. To get it off the ground quickly I used Tailwind CSS. In my app I needed to create a simple dropdown menu and I looked at the Tailwind UI example on how they did it.
Svite has been on my radar for quite some time now and I finally found some time to play with it. I was surprised by the results.
While it's straight forward to integrate PostCSS and Tailwind into plain Svelte projects, Sapper is a totally different beast. There are many moving parts. Rollup configuration is super complex, code is generated. It can be hard to grasp what's going on.
The other day I received an email from a reader with a few interesting questions and I thought I would share my answer as a blog post. Hope you find it interesting as well. It's about Svelte, Sapper, SSR vs SPA and Svelte router recommendations. Raw and unedited.
Testing different bundlers for Svelte development is an odd hobby of mine. I like my development environments smooth as butter and my feedback loops tight.
This is a follow-up to my previous article on Firebase authentication. I was not satisfied with the binary solution and decided to enhance it with XState.
In my previous article on local Firebase setup I created a simple Todo app as an example. Today, I plan to take it further and create a full blown Todo app.
You have seen them everywhere. That little bell icon in the upper right corner with unread messages count. Learn to build one with the help of Svelte stores and Tailwind CSS.
You don't get a second chance to make a first impression. The person you meet makes a judgement of you in just a few seconds, if even that long. How can you make sure you nail it?
Setting up Firebase for local development is not too hard, but it's pretty tedious to connect everything together. I had to go through this for one of my side projects and documented the steps on the way. Read on to find out how to start local Firebase firestore and functions emulator together with Snowpack with just one command.
Form validation is hard. That's why there are so many different form handling libraries for the popular web frameworks. It's usually not something that is built-it, because everyone has a different need and there is no one-fit-all solution.
After seeing a little too many poor job applications recently I feel that I need to put my CTO hat on. Learn how you can increase your chances by 500% of getting the interview by following few simple tips.
I spent a few hours digging into Svelte's bind directive statement with focus on forms. Read on if you want to want to learn more!
The best way to learn something is to recreate it from scratch. Actually type out the code. This way you brain will have time to process and understand while your fingers move.
I like bundlers. Correction, I like fast bundlers. Bundlers that help me tighten the feedback loop and help me focus on the code. Not bundlers that make me doze off, waiting for the recompilation to finish, while my CPU fan sounds like an old hair dryer.
How do you pass data between Svelte components? How do you communicate between children and parents? For example, when you need to trigger some action or change state in the parent from a child component. A typical case is to toggle Svelte component's visibility from itself when the visibility state lives in the parent.
With the official Typescript support in Svelte in place we can finally have turtles all the way down! The only things required are proper tools and plugins. Read on to learn more.
Sometimes, when working with forms, you might want to style your checkboxes to something more fancy than browser defaults. In this article you will learn how to create a switch button in Svelte with the help of tailwind.css.
Welcome to the second and final part of the series of routing with page.js. In the first part we got the basic routing in place and in this part we will finish what we started. More specifically we will implement:
If Svelte and RxJS had a baby maybe she would grow up to become a React slayer one day. Because Svelte got the looks and elegance and RxJS got the brains. But first, let's see if the potential parents are a good match for each other.
Yep, you read correctly. Pathetic 66 lines of code. You think I am lying? Well, code analysis tools don't lie. Let's ask one.
I must admit that Rollup.js, that default Svelte projects use, never grew on me for some reason so I decided to give Parcel a try. Let's see how to setup a new Svelte project using it. While on it we will also include some other useful tools and plugins on the way.
Sometimes you have the need to go fullscreen, especially when building some fun internal dashboards. Because, you know, they are fun to build. Useful too. So why not build one in Svelte for a change? Let's see how easy it is to slap together a fullscreen component with this awesome framework.