All posts

Nick Scialli is a software engineer at the U.S. Digital Service.

Why you can't set state multiple times in a row in React

Nick Scialli • August 24, 2021 • 🚀 4 minute read

This seemingly strange behavior is well-explained by JavaScript fundamentals.

How to calculate REMs from pixels

Nick Scialli • August 20, 2021 • 🚀 1 minute read

Sizing things in CSS can be tricky. But REMs are probably easier than you think.

You probably shouldn't ignore react-hooks/exhaustive-deps linting warnings

Nick Scialli • August 03, 2021 • 🚀 3 minute read

It's tempting to ignore these warnings, but I highly recommend against it.

A notional modern SaaS app architecture

Nick Scialli • July 05, 2021 • 🚀🚀 9 minute read

Architecture is hard and there are more choices than ever.

How to preserve query parameters in React Router links

Nick Scialli • July 02, 2021 • 🚀 3 minute read

React Router makes front-end routing a breeze, but it's not always obvious how to handle query parameters.

Partially mocking imports in Jest

Nick Scialli • June 30, 2021 • 🚀 4 minute read

Testing is all about isolating what you want to test.

How to prevent useEffect from running on mount in React

Nick Scialli • June 28, 2021 • 🚀 3 minute read

Sometimes we don't want our effects to run right at the beginning.

How to set focus on an input field after rendering in React

Nick Scialli • June 24, 2021 • 🚀 3 minute read

When a component renders, you may need to automatically set focus on an input.

How to create a Map of more than 10 key-value pairs in Java

Nick Scialli • June 22, 2021 • 🚀 1 minute read

If you're trying to create a Map of more than 10 key/value pairs in Java, you may be having some trouble.

How to conditionally wrap JSX with a component in React

Nick Scialli • June 14, 2021 • 🚀 3 minute read

Sometimes we want to have content in React be wrapped in another component, and sometimes we don't.

How to update nested state in React

Nick Scialli • June 10, 2021 • 🚀🚀 7 minute read

State is a cornerstone of React components. In this post, we learn how to update nested state properties.

How does the useMemo hook work in React?

Nick Scialli • June 08, 2021 • 🚀🚀 7 minute read

The useMemo hook is one of my favorite hooks because it enables best practices. Let's see how it works.

How to serve a Gatsby app with Nginx in Docker

Nick Scialli • May 26, 2021 • 🚀 4 minute read

Let's create a website using Gatsby and learn how to serve it in a Docker container using nginx.

How to get a list of files in a directory using node.js

Nick Scialli • May 24, 2021 • 🚀 1 minute read

Automation is your friend. Let's use node.js to automatically get a list of files in a directory.

Redefining—and making a case for—resumé-driven development

Nick Scialli • May 22, 2021 • 🚀 1 minute read

RDD has become a term indicative of chasing new fad technologies, but it could mean so much more (in a good way).

How I use Github Actions to schedule Gatsby blog posts

Nick Scialli • May 19, 2021 • 🚀 3 minute read

Gatsby is great, but it doesn't provide much in the way of scheduling posts. Today, I'll show you how I schedule my blog posts using Github Actions.

How to use the useSelector Redux hook with Typescript

Nick Scialli • May 17, 2021 • 🚀 3 minute read

Redux offers the useSelector hook to get values from your store. Make sure you get the most out of it by typing it correctly.

How To Fix Undefined 'this.state' in React Class Components

Nick Scialli • May 14, 2021 • 🚀 4 minute read

If you're working with React class components, you may find yourself vexed by 'this.state' being undefined.

What is the Difference Between Promise.all and Promise.allSettled?

Nick Scialli • May 13, 2021 • 🚀 4 minute read

These are two potential ways to handle multiple Promises in JavaScript. Let's look at the differences between them.

Scheduling Recurring Netlify Builds Using Github Actions

Nick Scialli • May 11, 2021 • 🚀 4 minute read

If you find yourself needing to rebuild your Netlify app at a regular interval, Github actions may be right for you.

How to Bind Event Listeners to Dynamically-Created Elements in JavaScript

Nick Scialli • May 08, 2021 • 🚀 4 minute read

You may have noticed that new elements you dynamically create don't automatically have the event listeners that its peers have. Here's how to make sure they have those listeners.

Why is the React useState Set Function Not Reflecting Changes Immediately?

Nick Scialli • May 02, 2021 • 🚀 1 minute read

The React useState hook is handy for maintaining state in our functional components. Let's dig into why setState may not be behaving as you'd expect.

What Questions Should You Ask in a Software Engineer Interview?

Nick Scialli • April 30, 2021 • 🚀🚀 6 minute read

Often, we focus on acing the interview; however, we need to remember that the process is a two-way street.

A Quick Primer on Signed vs. Unsigned Integers

Nick Scialli • April 19, 2021 • 🚀 4 minute read

If you use high-level programming languages, you may have come across signed and unsigned integers. Here's a quick primer on what they are.

Mutability and Shadowing in Rust

Nick Scialli • April 19, 2021 • 🚀 3 minute read

Mutability and shadowing are foundational concepts for learing Rust. Let's review them and their use cases.

How to Use Pipe (the Pipeline Operator) in JavaScript

Nick Scialli • April 19, 2021 • 🚀 3 minute read

The pipeline operator is common in functional programming. There's no built-in JavaScript pipeline operator (yet), but we can easily roll our own.

Fix the "Maximum Update Depth Exceeded" Error in React

Nick Scialli • April 13, 2021 • 🚀🚀 6 minute read

React is an excellent framework, but it can have some tricky "gotchas." One of which is when you accidentally cause an infinite loop, often resulting in the cryptic "maximum update depth exceeded" error.

Creating a React Infinite Scroll Component

Nick Scialli • April 10, 2021 • 🚀🚀 6 minute read

Infinite scrolling content is a common way to deal with large collections of data.

How to Animate Items Out of an Array in React

Nick Scialli • March 28, 2021 • 🚀🚀 6 minute read

Animating items out of an array in React can be trickier than you'd think.

Using Session Storage in React with Hooks

Nick Scialli • March 28, 2021 • 🚀🚀 7 minute read

In React, one great way to persist user data in session storage is by using Hooks. Here's how to do it.

Making Every Object Property Nullable in Typescript

Nick Scialli • March 18, 2021 • 🚀 3 minute read

There is no built-in utility type to accomplish this, but we can roll our own.

Fix the "React Hook is Called Conditionally" Error in React

Nick Scialli • March 16, 2021 • 🚀 3 minute read

If you're new to React hooks, you might find yourself encountering this somewhat cryptic error.

How to Find an Object Deeply and Do Something with the Result in JavaScript

Nick Scialli • March 13, 2021 • 🚀 4 minute read

Sometimes we're in the unenviable position of having to search an object deeply in JavaScript. How can we do this and take some action with the result?

How to Not Lose Typescript Types When Using Custom React Components

Nick Scialli • March 12, 2021 • 🚀 4 minute read

If we're not careful, we can lose our Typescript types when implementing custom React components.

How to Serve a Static App with nginx in Docker

Nick Scialli • March 07, 2021 • 🚀 4 minute read

Let's create a static site and learn how to serve it in a Docker container using nginx.

How to Execute a Function After the User Stops Typing in JavaScript

Nick Scialli • March 04, 2021 • 🚀 4 minute read

Executing a function after the user stops typing is called debouncing. In this post, we learn how in JavaScript.

Your First Svelte Project: A Todo List App

Nick Scialli • March 02, 2021 • 🚀🚀🚀🚀🚀 21 minute read

Let's use the ubiquitous todo list app example to learn how to write Svelte apps.

How to Test Your React App Effectively with React Testing Library

Nick Scialli • March 01, 2021 • 🚀🚀🚀🚀 16 minute read

Frontend testing is hard. React Testing Library makes it a whole lot easier.

Some Good Interview Questions for Experienced Frontend Developers

Nick Scialli • February 24, 2021 • 🚀🚀 9 minute read

I think a lot about the state of interviewing in software and web development. Here are a few ideas I have for good, meaningful frontend developer interview questions.

Fix the "Uncaught TypeError: destroy is not a function" Error in React

Nick Scialli • February 21, 2021 • 🚀 1 minute read

This React error seems particularly cryptic, but ends up making a lot of sense when you get the hang of the useEffect hook.

Fix the "Cannot read property 'map' of undefined" Error in React

Nick Scialli • February 21, 2021 • 🚀 4 minute read

This is one of the more common errors you will run into when starting out with React. In this post, we'll learn how to fix it.

Adding Apollo GraphQL to Your React Project

Nick Scialli • February 18, 2021 • 🚀🚀 9 minute read

If you're integrating your React frontend with a GraphQL API, you may want to check out the Apollo client.

Mocking Apollo GraphQL Queries in React Testing

Nick Scialli • February 17, 2021 • 🚀🚀 7 minute read

When testing our frontend code, we might find ourselves needing to mock GraphQL query responses. Here's how to do it.

Setting Up a Svelte Project with Typescript

Nick Scialli • February 14, 2021 • 🚀 4 minute read

Svelte is awesome. Typescript is awesome. Let's create a project that combines the two!

How to Set Up a Svelte App with Rollup

Nick Scialli • February 10, 2021 • 🚀🚀🚀 15 minute read

This post gives the basics on how to build Svelte apps for development and production using Rollup.

How to Serve an Angular App with nginx in Docker

Nick Scialli • February 09, 2021 • 🚀 4 minute read

Let's create a website using the Angular framework and learn how to serve it in a Docker container using nginx.

How to Split an Array Into a Group of Arrays in JavaScript

Nick Scialli • January 24, 2021 • 🚀 1 minute read

Sometimes we have one array that we might want to split into multiple arrays. Here's a quick and easy way to do that.

Your First Node Express App with Typescript

Nick Scialli • January 18, 2021 • 🚀🚀🚀🚀🚀 24 minute read

Express is the most ubiquitous framework for nodejs. In this post, we learn how to add Typescript to the mix.

Is It Too Late To Be a Software Engineer?

Nick Scialli and Ross Jacobson (The Disciplined Rebel) • January 16, 2021 • 🚀 4 minute read

A lot of people ask me “is it too late to be a software engineer.” In this post, we are going to examine this question, and determine at what age it is too late to get into software development.

How to Perfectly Fit an SVG to its Contents Using JavaScript

Nick Scialli • January 15, 2021 • 🚀🚀🚀 13 minute read

Using the SVG tag on websites is handy, but its interface can be different than we're used to. Here's a handy way to fit the viewport of an SVG to its contents every time.

Generating Random Human-Readable Slugs in JavaScript

Nick Scialli • January 13, 2021 • 🚀🚀 6 minute read

How to generate random human-readable slugs (e.g., brave-purple-penguin) in JavaScript.

A useLocalStorage React Hook for JavaScript and Typescript

Nick Scialli • January 10, 2021 • 🚀 3 minute read

I have created and open-sourced a useLocalStorage hook I use under the npm module name, uselocalstorage.

Writing Your Own useFetch Hook in React

Nick Scialli • January 04, 2021 • 🚀🚀 7 minute read

React Hooks have been all the rage for a little over a year. Let's see how we can roll our own useFetch hook to abstract fetch request logic out of our components.

How to Capture Between Two Characters in JavaScript using Regular Expressions

Nick Scialli • January 01, 2021 • 🚀 3 minute read

Regular Expressions are extremely powerful but their syntax can be pretty opaque. Today we'll use regex to capture all content between two characters.

How to Add a Thousandths Place Comma (Every Three Digits) in JavaScript

Nick Scialli • December 29, 2020 • 🚀 1 minute read

Let's do some basic number formatting for really large numbers.

Turning a Callback Function Into a Promise

Nick Scialli • December 29, 2020 • 🚀 1 minute read

Many utilities in JavaScript are readily available as functions that take callbacks. How easy is it to turn these into promises?

Programming Languages and Frameworks to Learn in 2021

Nick Scialli • December 26, 2020 • 🚀🚀 7 minute read

A lot of these lists are based on hype, but I like to base this analysis on hard data.

How to Serve a Vue App with nginx in Docker

Nick Scialli • December 25, 2020 • 🚀 4 minute read

Let's create a website using the Vue framework and learn how to serve it in a Docker container using nginx.

How to Stop All Docker Containers

Nick Scialli • December 24, 2020 • 🚀 1 minute read

There are certain things I find myself googling over and over again. How to stop all Docker containers is one of those things!

What is The Difference Between Server Side Rendering (SSR) and React Server Components?

Nick Scialli • December 22, 2020 • 🚀 3 minute read

In December 2020, the React team introduced an experimental feature called React Server Components. This may leave you wondering how exactly these "server components" differ from SSR.

Creating a Recursive List Menu Any Number of Levels Deep in React

Nick Scialli • December 17, 2020 • 🚀 4 minute read

Recursion can be a tricky concept in programming. The challenge seem greater in a view library like React.

How to Abort Multiple Fetch Requests in JavaScript using AbortController

Nick Scialli • December 08, 2020 • 🚀 3 minute read

We might want to use AbortController to abort multiple fetch requests in JavaScript. How might we accomplish this?

Using Cookie-Based CSRF Tokens for Your Single Page Application

Nick Scialli • December 05, 2020 • 🚀🚀 9 minute read

The CSRF attack vector is often misunderstood. Today we'll gain a better understanding of CSRF and why cookie-based CSRF tokens are a good option for Single Page Applications.

Modernizing Your Application and Processes with Modernizing.dev

Nick Scialli • December 01, 2020 • 🚀 1 minute read

I'm excited to announce I have started working on a new project to help organizations embrace tech modernization!

How Does Async-Await Work in JavaScript

Nick Scialli • November 30, 2020 • 🚀 4 minute read

If you're familiar with callbacks and promises, you'll want to get familiar with async/await.

Why is My Recursive Function Returning Undefined in JavaScript?

Nick Scialli • November 13, 2020 • 🚀 1 minute read

One common frustration when getting the hang of recursion is not understanding why your recursive function is returning undefined.

How to Wait for Multiple Promises to Resolve in JavaScript Using Promise.all

Nick Scialli • November 11, 2020 • 🚀 3 minute read

After getting the hang of async programming in javascript, you might quickly find you need to wait for multiple async tasks to happen. Enter Promise.all!

How to Abort a Fetch Request in JavaScript using AbortController

Nick Scialli • November 10, 2020 • 🚀 3 minute read

Sometimes it's necessary to abort a fetch request. In this post, we explore how to quickly do so using AbortController!

How to Select or Omit Properties From an Object in JavaScript

Nick Scialli • October 18, 2020 • 🚀 1 minute read

Selecting or omitting properties from a JavaScript object is a fairly common problem without a built-in solution.

How to Serve a Node App in Docker

Nick Scialli • October 17, 2020 • 🚀 4 minute read

In this post, we'll serve a node application in a Docker container.

Creating Your Own DeepPartial Type in Typescript to Allow Any Subset of Object Properties Deeply

Nick Scialli • September 26, 2020 • 🚀 3 minute read

You may know of the Partial utility type in Typescript, but it turns out we can create our own DeepPartial type through some clever recursive typing.

How to Traverse an Object of Arbitrary Depth in JavaScript

Nick Scialli • September 21, 2020 • 🚀 3 minute read

Sometimes we find that we need to traverse an object and perform some operation on it at some arbitrary depth.

Writing Custom React Hooks with Typescript

Nick Scialli • September 19, 2020 • 🚀 4 minute read

Writing custom React hooks with Typescript isn't all that different from writing them in plain old JavaScript.

Learn the Basics of Redux by Writing Your Own Version in 30 Lines

Nick Scialli • September 12, 2020 • 🚀🚀 7 minute read

One of my favorite ways to learn how something works is to recreate it. Today, we're going to learn the basics of Redux by creating a simplistic version of it.

What is Debouncing?

Nick Scialli • September 07, 2020 • 🚀 1 minute read

Let's look at the concept of debouncing and create a sample debouncing scenario.

How to Serve a React App with nginx in Docker

Nick Scialli • September 06, 2020 • 🚀 4 minute read

Let's create a static site in React and learn how to serve it in a Docker container using nginx.

How to Remove a Specific Item From an Array in JavaScript

Nick Scialli • September 05, 2020 • 🚀 1 minute read

Let's remove an item from an array in JavaScript using a bunch of different approaches.

How to Make One Function Argument Dependent on Another in Typescript

Nick Scialli • September 05, 2020 • 🚀 3 minute read

Typescript can be incredibly helpful when we use some of its more advanced features. In this post, we specify the type of one function argument based on the type of another.

Using Local Storage in React with Your Own Custom useLocalStorage Hook

Nick Scialli • September 01, 2020 • 🚀🚀 6 minute read

One tool for storing data browser-side we might reach for is local storage. In this post, we'll use local storage in React by rolling our own useLocalStorage hook.

Using Jest Mocks to Prevent Non-Deterministic or Otherwise Changing Components from Continously Resulting in Snapshot Diffs

Nick Scialli • August 30, 2020 • 🚀 3 minute read

Snapshot testing is great until it's not. Today we'll overcome the common problem of seeing snapshot diffs for non-deterministic or frequently changing components.