The Fastest Way I’ve Found to Build a Solid UI Without a Designer
The experience-based workflow I use to turn product requirements into a polished, usable interface quickly when design support is limited.
Thoughts on software engineering
Writing about building software and the technical, product, and human sides of the work.
How to write fewer tests but find more bugs in your React components
It's not always obvious which tests we should be writing for our React components. One way to solve this problem is to use a combination of Input Space Partitioning and Whitebox testing to guide us during the process.
Guideline from the 70's on how to split your React components
It's not always obvious how to decompose a React component. This article explains a guideline you can use to validate a decomposition.
Testing and developing with React and TS: Data structures (part 1)
Learn about: testing, relying on TypeScript to improve correctness, and modeling data-structures while building a multilevel-list React component. In this part, we'll focus on modeling the underlying data structure to support the multilevel-list component.
Unsure of what tests to write? Here's what that might mean.
When we're uncertain of what tests to write for an application, we might have more significant problems than we're aware. Here's what to do about it.
5 steps to deal with bugs on your React applications
In this article, we'll go over a process to deal with bugs in our React applications. This process seeks to not only fix current bugs but also to prevent future ones.
12 recipes for testing React applications using Testing Library
If you're not sure how to test a specific part of your React application, this article might be useful to you.
How to test React components that depend on route changes
In this article we'll go over a solution to test React components that exhibit some behavior when the current route changes.
How important is testing for a React developer?
A common question to have when we're starting to learn React is how important it is to know how to write automated tests. This article answers that question.
Thought process for testing a React application.
In this article, we'll go over the thought process for testing a React application that fetches and displays data.
Don't know what to test on your React App? Learn how to make a test list.
If you're not sure what tests you should write for a feature in your React app, knowing how to make a test list can show you how to get started.
How to have different mock responses for multiple tests using Jest and React
In this article we go over an alternative to mocking modules with Jest, that easily allows for different mock responses on a test per test basis.
How to test a React application index.js
If you've started a project with Create React App, index.js will probably make your test coverage fail. Here's how to solve that.
How to get started testing React applications
If you don't have experience writing tests, getting started can be daunting. Especially if you're trying to test code that interacts with a framework/library like it is when you're testing a React application. In this article we'll go over the usual tools to test a React application, how to get unstuck when we don't know how to test a piece of code, and also a basic testing methodology that allows us to get started right away.
7 questions to find out corner cases when fetching data from an API in a React application.
Fetching data from APIs is something that almost all React applications do. However, this doesn't mean doing it correctly is simple. While it's easy to fetch data an show it on the screen, it's not trivial to get all the corner cases right. The first step to handle those corner cases is to be aware of them. So in this article, we'll go over questions we can make to help us find out corner cases when fetching data from an API.
How to implement infinite scroll using React, Hooks and Intersection Observers
When we want to add an infinite scroll to a React app, we can try to find a library that already does it for us, or we can implement our version from scratch. Since building things is one of the best ways to improve as a software developer, in this article, we'll go over how to develop an infinite scroll.
A common misconception with useMemo and useCallback
A common misconception with useMemo and useCallback is that they can be used to preserve the identity of values across React components renders. However, what they have been designed for, is performance optimization. And not being aware of the difference, may be a source of bugs.
How to fix CORS errors on the development environment of a React application
Whenever we're developing a React application that has to communicate with an API, we'll probably run into Cross-Origin Resource Sharing (CORS) errors. In this article, we'll go over how to fix those errors.
4 resources to learn React under the hood
One of the best ways to improve as a developer is to understand how the tools we use work. If you've been working with React for a while, and you are pretty comfortable working with its API, it's time to find out it works under the hood. In this article you'll find a compilation of resources that will help you understand how React does what it does.
Understanding the value of software can help us code better
Decision-making is always present during software development. However, it's not always that clear which decision we should make. When in doubt, it's always useful to have in mind what will make our software valuable, so that with every decision we can take a step forward into that direction.
How to be more confident about the quality of the code of our React applications
We sometimes get insecure about the quality of the code of our React applications, even thought it does what it should. In this article I'm sharing mental models and a strategy we can use to get more confident about the code we make.
How to animate an image in React when it changes
Animating an image when it changes in React requires an understanding of how React works and what it does under the hood. In this blog post we'll explore a way to animate an image when it changes, while keeping in mind what is happening at a DOM level.
How to pass state between components
Sometimes the best approach to passing state between multiple components, is to not have multiple components at all.
Why use useState functional update even when everything seems to work
An explanation on why we should use React useState hook functional update, even when it seems unnecessary.
5 steps to perform a search when user stops typing using React + Hooks in a controlled component
A guide to implement and understand a solution to perform a search when user stops typing, in a controlled component, using React and hooks.
How to persist state after a page refresh in React using local storage
How to persist state after a page refresh in React using local storage