Ben Ilegbodu uses his many years of frontend development experience to provide quality content to help you become a better frontend engineer.
You give the Agent a prompt. It writes 200 lines of code. You review it. The architecture is wrong. You explain what you actually meant. It rewrites everything. Still not quite right. It misunderstood your data model. **10 or more iterations later**, you've got working code... and a lingering feeling that you could have just written it yourself faster. Sound familiar? Here's the thing: **the…
The AI hype cycle has convinced us that every app needs a conversational interface, a RAG pipeline, or an autonomous agent. Meanwhile, most of us are just trying to ship features, fix bugs, and (just) maybe reduce the amount of repetitive nonsense we do every day. The reality? **The highest ROI AI integration isn't a chatbot. It's the stuff users don't even notice.** I call it "Sneaky AI": using…
For decades, our industry has been obsessed with the "10x developer" -- that mythical engineer who's supposedly 10 times more productive than the rest of us. It's always been a bit of a loaded concept if you ask me, often rewarding behaviors that aren't necessarily great for teams or codebases. But with the arrival of powerful GenAI coding assistants, the "10x" conversation is back in full force.…
There are times in a Jest test when we have a module where the majority of the functions need to be mocked, but we have one (or two) that need to be left alone. Likely in this case most of the functions have side effects. But there are some that are normal input/output (aka "pure") functions that need to work when they are called during a test run. We can use a combination of…
I use [`semantic-release`](https://github.com/semantic-release/semantic-release) for both personal and work projects to automate version management and publishing of packages. It's nice because it takes care of the entire release flow, like figuring out the [next version](https://docs.npmjs.com/cli/v8/commands/npm-version) (using [Angular Commit Message…
When developing Next.js apps I want to be able to include other files within the `src/pages` directory besides the [page React components](https://nextjs.org/docs/basic-features/pages) or [API routes](https://nextjs.org/docs/api-routes/introduction). I'm perfectly fine putting components in `src/components` and helper functions in `src/utils`. But I like to co-locate other files with my pages and…
Recently when adding accessibility tests with [`jest-axe`](https://github.com/nickcolley/jest-axe) to a React component, I ran into the dreaded [`act()` warning](https://reactjs.org/link/wrap-tests-with-act): ```text {11-14} FAIL src/components/Link.test.tsx ✕ is accessible (70 ms) ● is accessible Expected test not to call console.error(). If the warning is expected, test for it explicitly by…
I was recently working on a React component in a shared component library. The component library up until recently had only been used in client-side rendered apps (think [Create React App](https://create-react-app.dev/)). However, once it started being used in server-sie rendered apps (think [Next.js](https://nextjs.org/)), I started getting the React server hydration mismatch error. For prop…
I was recently working on my latest project, which uses [Firestore](https://firebase.google.com/) as its NoSQL database. The way the data is stored in Firestore is _almost_ how I represent the data in app. The only difference is that Firestore has its own object for modeling dates that is different than the JavaScript…
Recently I was writing some TypeScript code where I needed to look at the user's preferred languages (using [`Navigator.languages`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/languages)) and compare it against my site's valid locales in order to determine which locale to display for internationalization (I18N). Here's what some of the implementation looked like: ```typescript const…
In my opinion, [ESLint](https://eslint.org/) is one of the best ways to communicate best practices for JavaScript code because it doesn't require everyone to read and follow a document or blog post. Instead it notifies the individual developer that they have broken a rule. A rule which itself typically has docs explaining the rule and how to fix it. **So without intervention from a senior…
The first lesson in my [TypeScript for React Developers minishop](/minishops/typescript-for-react-developers/) is how to define the type of the `props` object passed to React component functions. And usually there will be someone who's already dabbled in TypeScript who asks me why I choose to use an `interface` instead of a `type` alias for defining the props. The short answer is that **interfaces…
[Next.js](https://nextjs.org/) has a pretty snazzy file-system based [router](https://nextjs.org/docs/routing/introduction) that is built on the concept of [pages](https://nextjs.org/docs/basic-features/pages). The router allows us to do client-side route transitions between pages similar to a single-page application (aka SPA). Next exports a React component called…
I've written a number of _DivOps_-focused posts ([5 tips for a healthier DivOps setup](/blog/5-tips-healthier-divops-setup/), [50 shades of React rendering with Next.js](/blog/50-shades-react-rendering-nextjs/), and [Auto-generate React PropTypes from TypeScript components](/blog/auto-generate-react-prop-types-typescript-components/) just to name a few). But I've never actually explained what…
TypeScript's type system is very powerful because it allows us to express types in terms of other types. One way we do this is with [generics](https://www.typescriptlang.org/docs/handbook/2/generics.html), which are types that take parameters. A lot of times when we get started with generics, we actually use them directly within functions (see my previous post on [Understanding TypeScript generics…
[React custom Hooks](https://reactjs.org/docs/hooks-custom.html) are kind of like logic helpers for our React components, so that the components themselves can focus on rendering and user interactions. Commonly folks will extract component logic into a custom Hook when they need to reuse the logic in multiple components (such as…
I went a long while writing React with Hooks without using the [`useCallback()`](https://reactjs.org/docs/hooks-reference.html#usecallback) or [`useMemo()`](https://reactjs.org/docs/hooks-reference.html#usememo) Hooks. And even now I still hardly use `useMemo()`. So that's all to say that we can build perfectly fine React applications without knowing or using either Hook. However, I'm frequently…
JavaScript [async functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) making dealing with [promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) a bit simpler because it flattens out nested promises into sequential statements. But using async functions within React's…
JavaScript has been around for over 25 years, since May 1995 when [Brendan Eich](http://en.wikipedia.org/wiki/Brendan_Eich) supposedly created it in 10 days. I wrote a full [history of ECMAScript](/blog/learning-es6-history-of-ecmascript/) if you're interested in learning more. There's a lot of syntax and operators that has been added to JavaScript since its inception. Many we use regularly (like…
I recently got to work on a different type of project than I normally tackle. Instead of building a React component in TypeScript or configuring a new DivOps setup, I needed to create an SVG gradient loading spinner. It looked like: The spinner isn't a solid color, but has a gradient from 100% to 0% opacity. The design seemed simple enough, but the implementation ended up being way more…
Usually the rationale for shallow cloning an array is because we want to mutate it, but we need to leave the original unchanged. This practice of "defensive programming" is common in utility functions because we don't know if the caller will need to use the array for other purposes. **Mutating the array directly can cause hard-to-catch bugs.** So we copy it first, and then perform whatever…
JavaScript is a highly dynamic language, so generics are instrumental in helping us to add types to make our code type safe with TypeScript. [TypeScript Generics](https://www.typescriptlang.org/docs/handbook/2/generics.html) are super powerful, but also can be pretty complicated. As a result, we find lots of blog posts, YouTube videos, workshops, and courses on how to use generics in TypeScript.…
Late last year I wrote about how to develop [Polymorphic React Components in TypeScript](/blog/polymorphic-react-components-typescript/). Polymorphic components are one of the [React component patterns](/blog/picking-right-react-component-pattern/) that enable us to create reusable and extendable components without having to rewrite display/layout, visual look-and-feel, and/or UI logic. The…
The [Firebase Admin Node SDK](https://firebase.google.com/docs/admin/setup) is intended to run in a privileged environment. In my ([Next.js](https://nextjs.org/) React) web apps deployed on [Vercel](https://vercel.com/), I use the Admin SDK for scripts that import/export data as well as REST APIs that make read/write Firebase calls to accomplish a task. In order to initialize the Admin SDK, we…
In my previous post, we took a deep dive into the [`.reduce()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) method on the JavaScript Array API. This time I want to zoom out and take a look at all of the JavaScript array methods. Well, not all. I only want to focus on those methods that are non-destructive; those methods that don't change the…
The built-in [JavaScript `Array` object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) has lots of helpful methods that allow us to manipulate arrays. I use [`.map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) and…
[ECMAScript 2021](https://ui.dev/es2021/) introduced a new static method to the `Promise` object called [`Promise.any`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/any). In total there are now 6 static methods on the `Promise` object: - [`Promise.all`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all) -…
I've learned a lot about accessibility these last 2 years working at Stitch Fix. I don't know if it's because I've been working on our design system where I've had to make accessible components. Or if it's simply that the industry has raised its collective awareness of the needs for developing accessibility features. **While accessibility features are an absolute necessity for some to use our…
Two weeks ago I wrote about [picking the right React component pattern](/blog/picking-right-react-component-pattern/) for shared components that we build. One of the patterns I discussed was the controlled components pattern that makes our custom component act much like [controlled HTML form elements](https://fb.me/react-controlled-components). I showed this snippet of code for a `Pagination`…
A 3rd-party library written in TypeScript likely makes use of lots of internal types to support its API. Libraries typically export additional helper types that we may need in order to use the API. But sometimes the library forgets types or there are types that they did not expect we would need. So I want to share some TypeScript tips for extracting types trapped in functions, objects, and arrays.…
A few months ago I wrote about [React custom Hooks vs. Mixins](/blog/react-custom-hooks-mixins/) discussing how they were surprisingly similar patterns for sharing stateful, non-visual logic. It got me thinking about the other React component patterns. These patterns exist to create reusable and extendable components so that we don't have to rewrite **display/layout, visual look-and-feel, and/or…
Sitemaps for our apps, blogs or other sites are important because it allows search engines like Google to more intelligently crawl the site. Typically a search engine can discover the majority of a site if the pages are properly linked. But a sitemap is especially helpful if the site has pages that aren't well linked, is really large, or is pretty new (with few sites linking to it). Google has a…
Last week I talked about 6 different ways to [conditional render JSX markup within a React component](/blog/conditional-rendering-react/). Looping in JSX within a React component is another aspect that trips up newcomers to React. Based on other templating languages, we might expect to be able to loop in JSX like so: ```js // THIS DOESN'T WORK!!! 👎🏾👎🏾👎🏾 const Teams = ({ teams }) => { return…
Because React uses [JSX](https://reactjs.org/docs/introducing-jsx.html) for rendering component UI, and JSX is ["Just JavaScript"™](https://reactjs.org/docs/introducing-jsx.html#jsx-represents-objects) under the hood, there is no special template syntax for conditionals like we find in other JavaScript frameworks. While this may seem like a drawback (especially to newcomers), it allows us to use…
When running end-to-end (E2E) tests for an application that changes data, we need to have a separate environment in which we can run the tests. This way when the app creates new data or updates existing data, that test data isn't in our production app. I recently added end-to-end tests to [NBA Player Tiers](https://nbaplayertiers.com) (a [Next.js](https://nextjs.org/) React app) using…
Next week, April 29th will be [Visual Studio Code](https://code.visualstudio.com/)'s 6th birthday! 🎉 I can't remember exactly when I started using VS Code, but I believe it's been around 4 years. It started as a 2-week experiment, and I've never looked back. And I've also converted dozens of coworkers and others over to using it too. 😄 Between full-time work (in JavaScript), side projects (also…
I developed my first [Next.js](https://nextjs.org/) application last November while building [Rep Yo City](https://repyo.city). I enjoyed its developer ergonomics and used it again for my most recent project, [NBA Player Tiers](https://nbaplayertiers.com). After developing and launching these two projects, it's now my go-to framework for building React applications. There are several reasons why…
Last month I wrote a post on a [shorthand for converting a JavaScript array into an object lookup](/blog/create-object-lookup-array-javascript-objects/). I was able to write the code in a single statement: ```js const teamLookup = Object.fromEntries(teams.map((team) => [team.id, team])) ``` This exercise motivated me to investigate more single-statement data transformations we can use to limit our…
One of the reasons I enjoy writing React in TypeScript is using static types for component props. In addition to defining the [basic types](/blog/react-prop-types-with-typescript/), we can also define more complex situations like [conditional props](/blog/conditional-react-props-typescript/), [polymorphic components](/blog/polymorphic-react-components-typescript/), and [generic…
In my last post on [React custom Hooks vs. Mixins](/blog/react-custom-hooks-mixins/), I compared a custom Hook I recently wrote with its equivalent in Mixins form. In this post now, I want to share a [`useReducer`](https://reactjs.org/docs/hooks-reference.html#usereducer) + [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) custom Hook I needed to synchronize my…
The last couple of weeks, I've been working on my latest project, [NBA Player Tiers](https://nbaplayertiers.com/) (very much still in-progress). I wrote this custom Hook to retrieve NBA player information from a [Firestore](https://firebase.google.com/products/firestore) DB. It's composed of other custom Hooks and it just makes me giddy. ```js {15,22} import { useEffect, useState } from 'react'…
[DivOps](https://www.divops.dev/), probably more commonly known as Frontend Infrastructure, is all of the tooling needed to set up, maintain, and deploy a modern frontend application. So we're talking [Webpack](https://webpack.js.org/), [Babel](https://babeljs.io/), [PostCSS](https://postcss.org/), [Prettier](https://prettier.io/), [TypeScript](https://www.typescriptlang.org/),…
Custom React Hooks allow us to extract component logic into reusable functions. Custom Hooks look very much like normal helper functions, except they can maintain component state and perform effects. There are many common actions that we do in our React applications that can be wrapped up in a custom Hook. So let's take a look at the implementations of 8 different custom Hooks. Each implementation…