Photo by Ferenc Almasi on Unsplash

Reddit user raks99832 asked, “How do you go about identifying and building reusable components in React?” I’ll discuss my learnings and strategies for tackling this common problem space.

The easiest identifier for a re-usable component is “whenever logic is being re-used.” If I’m using component logic in one place and am needing that same component logic in another place, I make it a reusable component. Similarly, If you are using logic in one place and in another, you make a function that handles that logic for you and just call that function in two places. …

A tutorial for the top task and ticket template

It’s easy, when backlogging your own product’s issues, to simply document the existence of the issue: “The app sometimes throws the error Cannot access property .includes of undefined.” It’s easy, when customers have the ability to open backlog items against your product, for them to do the same.

An actionable backlog item has a handful of important qualities. The problem with the above example is you and your team has nowhere to start. The issue isn’t reproducible; the root cause is unknown and undiscoverable. What happens when your team opens this item and simply cannot reproduce it? They wasted their…

An opinion piece and case study

Snapshot testing is great on paper. In my experience, it does not work as great in practice. The goal of snapshot testing is to prove that your logic changes did not cause output side effects, typically to the UI. When I add a feature, my existing features shouldn’t break. When I optimize or refactor, my UI shouldn’t become inaccessible. That’s great!

In practice, UI changes so frequently that developers habitually update snapshots without considering if they need to be or even checking that they are valid. Snapshot testing, unlike other automated processes, is subject to human error.

My team dropped…

Going from zero to power-user in one quick copy-paste

I recently setup VS Code Settings Sync; and after spending a significant amount of time dealing with merge conflicts, I questioned and re-affirmed the value of many of these settings. To account for VS Code not configuring these to my liking by default, I share this configuration here with its justification.

"editor.autoClosingBrackets": "never",
"editor.autoClosingQuotes": "never",
"html.autoClosingTags": false,
"javascript.autoClosingTags": false,
"typescript.autoClosingTags": false,

Code auto-completion is often heralded as God’s gift to programmers. The value of this setting likely depends on how fast of a typist you are.

Even when it feels impossible

In JavaScript, const affords a few benefits:

  1. It lets the team reviewing your code that the value is not going to change, improving confidence.
  2. It throws an error if you attempt to change that variable, preventing accidental re-assignment.
  3. It allows the engine to optimize for unchanging values.
  4. It avoids side effects caused by conflicting changes.
  5. It is more consistent with functional programming and immutable states.
  6. There are instances of better TypeScript inference.

It’s common practice to use const by default, denoting that a variable is constant and unchanging.

However, it can be confusing when you want a constant variable that…

Does this meme show my age?

In today’s episode of Enterprise Application Nightmares, I’ll tell you how mocking state broke our application and how the React context API could have saved us.

The Context API ⛅

The React context API does not get enough credit. When asked, “When would you use the context API?” the answer is frequently, “Whenever you don’t want prop-drilling.” Seeking rendering performance benefits or a simpler global state management system? Context API to the rescue!

The overlooked real value of the context API is dependency injection or inversion of control.

Mocking with jest.spyOn 🕵️‍♀️

My component wants some data from the internet. I can fetch it, then display it. …

Reddit user hogstfelttf recently asked the React subreddit, “As a React junior, which areas should I focus to advance my skill?” This article summarizes the top replies from experienced React developers.

  1. Understand why re-renders are happening. How did your component re-render? What caused it? For a highly-recommended in-depth analysis, check out “A (Mostly) Complete Guide to React Rendering Behavior” by Mark Erikson.
  2. Define your projects goals first, then achieve them. By establishing the definition of a minimally viable product (or MVP), you can focus on achieving important goals and prevent distractions. Spending too many hours obsessed with the vertical alignment…

Developers who have recently installed AWS’s new UI component library may quickly run into trouble with their unit tests. AWS UI is written in ECMAScript, and Jest cannot import it by default.

Jest encountered an unexpected token.

The full error will look something like this:

Test suite failed to runJest encountered an unexpected tokenThis usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".Here's what you can do:
* If you are trying to use ECMAScript…


“Do use functions as callbacks.” — Charles Stover

Jake’s argument against third-party library functions as callbacks boils down to the following, valid example:

A third party library may publish a function, e.g. toReadableNumber.

function toReadableNumber(n) {
return new Intl.NumberFormat('en-US').format(n);

This works great for converting 1000 (number) to '1,000' (string), so I may decide to use it on my list of numbers:

import { toReadableNumber } from 'some-library';
const list = [1000, 2000, 3000];

In this code sample, my list of three numbers have become a list of three, human-readable strings: ['1,000', '2,000', '3,000'].

This is all well and good… until some-library publishes an update to toReadableNumber

The AWS UI side navigation, breadcrumbs, and table components before and after the application of dark mode.

In How to apply your brand’s theme to AWS UI components, I wrote a guide to applying custom styles to the AWS UI component library. This was the foundation I needed to replicate dark mode for my portfolio when I migrated from Material UI to AWS UI.

Once I was able to modify the values of the AWS UI design tokens (CSS variables), it was just a matter of plugging in the dark mode alternatives as constants. You can see these values in the awsui-dark-mode open-source GitHub repository.

How do I enable dark mode? 🌚

A positive developer experience and intuitive API being top priority, enabling dark…

Charles Stover

Senior front end engineer /

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store