Implementing A Svelte Store In Rust

We’re going to build a Svelte store, written in Rust, and run it in an Electron app. This spun out of a video editor which I originally built in Swift. It turns out people on Windows want to edit videos too, so now I’m rewriting it with Rust, Electron, ... more

Attach VSCode Debugger to native Rust in an Electron app

I’ve been working on a video editor built on top of Electron and Rust, where Rust does the heavy lifting, and Electron (paired with Svelte) takes care of the UI. Debugging the JS is easy enough: pop open Electron’s devtools, set some breakpoints, and ... more

Example of Using napi-rs with Electron

You can improve the performance of your Electron apps quite a bit by offloading intensive tasks to Rust. There are 2 main libraries out there to help you do this: Neon and napi-rs. As it stands today, Neon is more popular, with over 5700 stars on Github, ... more

Using Forms in React

No matter what kind of app you’re writing, there’s a good chance you need at least one form. Forms in React are often a pain, filled with verbose and boilerplate-y code. Let’s look at how to make forms in React with less pain. In this article we’ll be ... more

How to Read React Errors (fix 'Cannot read property of undefined'!)

Got an error like this in your React component? Cannot read property `map` of undefined In this post we’ll talk about how to fix this one specifically, and along the way you’ll learn how to approach fixing errors in general. We’ll cover how to read a ... more

React State Management Libraries and How to Choose

The idea of state is one of the trickier things to nail down when you’re starting with React, and as your app grows, so do your state management needs. In this post I’ll give you the Grand Tour of state management options in React and help you decide ... more

State of the React Ecosystem in 2021

What’s the best way to build React apps in 2021? What has changed since 2016? What libraries is everyone using these days? This post is inspired by a now-deleted Reddit post from someone who had learned React in 2016, and was concerned about how to get ... more

Svelte with TypeScript and Jest (Starter Project)

In the summer of 2020, Svelte added TypeScript support. Turning it on is as simple as running a single script! But the default starter project doesn’t have Jest testing set up. I took the default Svelte starter with TypeScript and added Jest to it, along ... more

Do you need CSS-in-JS with React?

One of the confusions I see people have with React is the whole situation around CSS. Namely, whether you need to use CSS-in-JS libraries, or whether you need some kind of “React-compatible” styling solution. It shows up in comments like this: I tried ... more

Build A Confirmation Modal in React with State Machines

Ever needed to wire up a confirmation dialog in React? You know the ones: “Really delete this file? — Yes / Cancel” These dialogs tend to follow a consistent pattern: User tries to do dangerous/destructive action Modal pops up asking if they’re really ... more

Example of Reactively Destructuring Variables in Svelte

I had written a Svelte component that accepted a prop, and I wanted to destructure some variables from that prop. But I wanted this destructuring to be reactive , so that the variables would update if the prop updated. My code looked something like this: ... more

Linked Lists for JavaScript Developers

Data structures are the building blocks of the code we write every day. Whether you’ve written them yourself or not, you’re using them in one way or another: arrays, hash tables, trees, and more. There aren’t that many resources for learning data structures ... more

A Visual Guide to References in JavaScript

a.k.a. “pointers for JavaScript developers” Have you ever changed a variable, expecting that the change would be isolated to just that one variable… and it wasn’t? Have you noticed that changes to variables inside a function will sometimes be contained ... more

Smaller React Projects, with Parcel

Create React App is one of the easiest ways to spin up a React project, but it sure does install a lot of stuff. On my machine, a new starter project is sitting right around 252MB of node_modules. One of my readers was working through the exercises in ... more

Deploy a Project to Your Server with Git

So you’ve got a local git repository, and you want to deploy it to your own server. Maybe the repo is kept in GitHub, maybe not. Maybe your server is on DigitalOcean, or AWS, or in your basement. It doesn’t much matter. The goal: when you run git push ... more

Using Tailwind CSS with Create React App

I’ve been hearing a lot about Tailwind CSS lately and I wanted to give it a try, but I wanted to combine Tailwind with Create React App. In this post I’ll show you how to use Create React App with Tailwind CSS in just a couple quick minutes. I’ll show ... more

How I Learn New Things

Someone asked recently what my learning strategy was… how do I learn new things? I had to think about it for a bit. I think it varies depending on what I’m learning. This being a tech blog, and me writing mostly about tech stuff, I could just talk about ... more

What React Does (and Doesn't Do)

React doesn’t do a whole lot. Don’t get me wrong – it’s great at what it does! But the things React is actually responsible for, in a fully-functioning production app? That list is pretty small. The universe of things you might call “a React problem” ... more

Complete React Tutorial for Beginners (2020)

Learning React is tough. It seems there’s a lot to learn at once. You might even think that “learning React” means that you have to also learn about Redux, Webpack, React Router, CSS in JS, and a pile of other stuff. This article is designed for total ... more

React: Getting Started - The Complete Tutorial for 2020

Learning React is tough. It seems there’s a lot to learn at once. You might even think that “learning React” means that you have to also learn about Redux, Webpack, React Router, CSS in JS, and a pile of other stuff. This article is designed for total ... more

Why React has been Hard to Learn

The hardest thing about React? Well, it’s different for each person, but I daresay everyone struggles somewhere along the way. Being part of the React community for a while, you start to notice patterns. The common themes. The perennial struggles. There ... more

How I Learned React

Have you heard that old saying… “How do you eat an elephant?” … One bite at a time! … This article is off to a great start, I can tell. But really, though: breaking up big problems into tiny bite-sized ones is the only way to really get anything done ... more

React is Trending

React is all the rage these days. It has been for a while now, honestly. The other day I found this site that graphs NPM package downloads. It’s fun to play around with. Here’s a graph of the monthly NPM downloads of React, Vue, and Angular since 2017: ... more

Why I Got Into React

Back in 2014 (ye olden times) I got my first front end job. Up until then, I was mostly a back end developer. And when I say back end, I really mean C and C++. Pretty much the polar opposite of web development. It was a totally different world, with ... more

Use Svelte with SASS/SCSS in VSCode

If you’ve grown to love SASS/SCSS, you pretty much want to use it everywhere. The new Svelte framework, though exciting, doesn’t have SCSS support built in. But it’s simple to add! Follow these steps to get SASS support in your Svelte app, plus get SASS ... more

Introduction to Svelte

A few months ago, Svelte 3 was released. I tried it out, ran through their tutorial, and built a few small things. And I can honestly say that I think writing Svelte feels even faster and easier than React. Svelte gave me the same spark, the same feeling ... more

Write Custom Hooks to Clean Up Your Code

React hooks make it easy to add a single piece of state to a component. But it’s also a breeze to write your very own custom hooks , just by moving the hooks-related code into a function. Say you need a boolean true / false flag to keep track of whether ... more

Implementing a Mockup: CSS Layout Step by Step

Creating layouts is one of the hardest parts of front end development for a lot of people. You can spend hours trying random CSS properties, copying and pasting from Stack Overflow, and hoping to stumble upon that magical combination that will produce ... more

Redux Selectors: A Quick Tutorial

You might’ve run up against this concept in Redux called a “selector.” In this short tutorial I’ll explain what selectors are, why they’re useful, and when (and when not) to use them. What’s a Selector? A selector is a small function you write that can ... more

A Complete React Redux Tutorial for 2019

Trying to understand Redux, it’s really confusing how it all works. Especially as a beginner. So much terminology! Actions, reducers, action creators, middleware, pure functions, immutability, thunks… How does it all fit together with React to make a ... more