Nick Scialli is a software engineer at the U.S. Digital Service.
Sometimes we want to have content in React be wrapped in another component, and sometimes we don't.
State is a cornerstone of React components. In this post, we learn how to update nested state properties.
The useMemo hook is one of my favorite hooks because it enables best practices. Let's see how it works.
Let's create a website using Gatsby and learn how to serve it in a Docker container using nginx.
Automation is your friend. Let's use node.js to automatically get a list of files in a directory.
RDD has become a term indicative of chasing new fad technologies, but it could mean so much more (in a good way).
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.
Redux offers the useSelector hook to get values from your store. Make sure you get the most out of it by typing it correctly.
If you're working with React class components, you may find yourself vexed by 'this.state' being undefined.
If you find yourself needing to rebuild your Netlify app at a regular interval, Github actions may be right for you.
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.
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.
Often, we focus on acing the interview; however, we need to remember that the process is a two-way street.
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 are foundational concepts for learing Rust. Let's review them and their use cases.
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.
Infinite scrolling content is a common way to deal with large collections of data.
Animating items out of an array in React can be trickier than you'd think.
In React, one great way to persist user data in session storage is by using Hooks. Here's how to do it.
There is no built-in utility type to accomplish this, but we can roll our own.
If you're new to React hooks, you might find yourself encountering this somewhat cryptic error.
If we're not careful, we can lose our Typescript types when implementing custom React components.
Let's create a static site and learn how to serve it in a Docker container using nginx.
Let's use the ubiquitous todo list app example to learn how to write Svelte apps.
Frontend testing is hard. React Testing Library makes it a whole lot easier.
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.
This React error seems particularly cryptic, but ends up making a lot of sense when you get the hang of the useEffect hook.
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.
If you're integrating your React frontend with a GraphQL API, you may want to check out the Apollo client.
When testing our frontend code, we might find ourselves needing to mock GraphQL query responses. Here's how to do it.
Svelte is awesome. Typescript is awesome. Let's create a project that combines the two!
This post gives the basics on how to build Svelte apps for development and production using Rollup.
Let's create a website using the Angular framework and learn how to serve it in a Docker container using nginx.
Sometimes we have one array that we might want to split into multiple arrays. Here's a quick and easy way to do that.
Express is the most ubiquitous framework for nodejs. In this post, we learn how to add Typescript to the mix.
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.
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.
I have created and open-sourced a useLocalStorage hook I use under the npm module name, uselocalstorage.
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.
Regular Expressions are extremely powerful but their syntax can be pretty opaque. Today we'll use regex to capture all content between two characters.
Let's do some basic number formatting for really large numbers.
A lot of these lists are based on hype, but I like to base this analysis on hard data.
Let's create a website using the Vue framework and learn how to serve it in a Docker container using nginx.
There are certain things I find myself googling over and over again. How to stop all Docker containers is one of those things!
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.
Recursion can be a tricky concept in programming. The challenge seem greater in a view library like React.
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.
I'm excited to announce I have started working on a new project to help organizations embrace tech modernization!
If you're familiar with callbacks and promises, you'll want to get familiar with async/await.
One common frustration when getting the hang of recursion is not understanding why your recursive function is returning undefined.
Sometimes it's necessary to abort a fetch request. In this post, we explore how to quickly do so using AbortController!
In this post, we'll serve a node application in a Docker container.
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.
Sometimes we find that we need to traverse an object and perform some operation on it at some arbitrary depth.
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.
Let's look at the concept of debouncing and create a sample debouncing scenario.
Let's create a static site in React and learn how to serve it in a Docker container using nginx.
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.
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 DiffsNick 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.
Today we look at schema-driven React development to see if we can streamline our development process a bit
One challenge we often face when creating apps is combinatoric complexity. Today, we're going to use a handy helper npm package I created to list all possible permutations of variables we're interested in.
After starting my dev email list about 6 months ago, I have been fortunate enough to get over 1000 signups! Here are some of the methods I have used.
There May Not Be a Better Way to Effortlessly Improve Code Quality than Using Prettier Code FormattingNick Scialli • June 06, 2020 • 🚀🚀 7 minute read
We all want higher-quality code. With Prettier, you can achieve this with minimal effort.
Using modern software development practices enable us to find and fix bugs faster and iterate. This post offers a primer into some of these modern practices.
As we explore the Deno ecosystem, we need to know where we can locate third party modules.
With React Router 5, you can programmatically navigate with using the useHistory hook!
As first adopters tinker with Deno, many people are trying to figure out tooling that parallels what they're used to in node.
In this post, we'll write a deep object change handler that both allows us to specify deep object types and satisfies the Typescript compiler..
If you're coming from a node background, it may not be obvious how to pin dependency versions in Deno.
Today we're going to write our first Deno API server in 60 lines.
Testing is supposed to validate that your app works. If you do some refactoring and your app still works but your tests are failing, are you really testing the right thing?
This post will walk you through writing a todo app in React with Typescript.
In React with Typescript, you may be tempted to roll individual change handlers for each field in a component. Let me show you an easier way!
One of the coolest parts about React Hooks is that you can create your own! In this post, we'll quickly roll our own useWindowSize hook.
While most operating systems ship with built-in screenshotting tools, it's often desired to grab pixel-perfect screenshots. In this post, I'll show you how to do so.
In this post, we roll our own immutable proxy function to prevent object mutation!
One type of programming concept I really like explaining is the type that has an intimidating name but, once you learn it, is actually a pretty simple concept. This is how I feel about memoization.
Thunk is one of those programming terms that sounds intimidating, but many of us are actually familiar with and have used them.
A basic setup for using Typescript with React and Redux.
Pure function is one of those terms that might be intimidating at first, but the concept is actually quite simple. In this post, I'll quickly define what pure functions are and why they're good.
The Symmetric Difference interview question is an interesting one because it can be relatively simple to solve if you can think to use the Set object, or, seemingly very challenging or inefficient otherwise.
An approach to migrating between different versions of a schema that may be foundational to your app.
Let's implement debouncing functionality using Redux middleware!
Context was always a great option for sharing app-wide state such as theming. With the useContext hook, it became even better!
Short-circuit evaluation offers a clean and simple way to conditionally assign variables and handle control flow.
Follow along as I write a custom useDebounce React hook with Typescript.
It may feel fancy to use them together, but can get quite expensive.
In this post, we build something useful (an object validator) using test-driven development!
Memoization is an optimization technique used in many programming languages to reduce the number of redundant, expensive function calls.
State management is challenging. We can make it less challenging by making sure we don’t store any redundant information in our state.
The two-sum interview question is interesting to explore because it has both a brute force logical, solution, as well as a more efficient solution that can demonstrate strong CS fundamentals.
There was recently a lot of excitement surrounding the TC39 Optional Chaining Proposal. This is why!
Learning how to fetch data the right way with React Hooks.
Expermenting with the relatively new React Hooks API to accomplish debounced list filtering.
In this article, I intend to pass along the best advice I ever received for going through a whiteboard interview.
This is a somewhat opinionated curriculum for learning front-end development during 100DaysOfCode.
One topic I have gotten more and more excited about throughout my software development career is quality!