Image for post
Image for post
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. …


Image for post
Image for post

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.

Image for post
Image for post
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…


CODEX

Image for post
Image for post
“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];
console.log(list.map(toReadableNumber));

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


Image for post
Image for post
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…


Image for post
Image for post
The AWS UI side navigation, breadcrumbs, and table components before and after the application of a custom theme.

The AWS UI component library offers a powerful, mobile responsive, and intuitive user interface. Leveraging Amazon’s research into customer experience, the customer-obsessed tech giant does not fall short. However, the UI library formally lacks one important feature: branding. This article will cover how to apply your own brand despite a lack of formal support.

The AWS UI team did an outstanding and admirable job of stripping Amazon’s trademark colors and fonts from their UI and open-sourcing the components for the community. This move will allow third parties to rapidly deliver new features. I was able to migrate my entire portfolio


Understanding your build system

Image for post
Image for post

As you migrate from legacy, vanilla code systems towards advanced build systems and single-page applications, you may notice some changes that don’t make immediate sense. There are additional steps that are a bit unintuitive, and it’s not clear what problem is being solved. One such difference is that <img src="./file.gif" /> no longer works. You now have to use import image from './file.gif';. Why?

With a build system like Webpack, your application is no longer running in the same directory as your HTML, e.g. your src directory. It goes through a "build" process that first optimizes the files before outputting…


An argument and solution for multiple global states

Image for post
Image for post
Encapsulate your global React state instances with react-capsule.

Preface: How did we get here? 👀

Having been primarily a React developer for 3 years now, I have thought about and written extensively on state management in React: everything from its performance to its design. In my original deep dive into developer experience, my “No-boilerplate global state management” article, I gathered as many data points as possible for my and other teams’ experiences with using Redux to manage their global state. Redux solves a lot of problems. It is well-designed for both handling these problems and extending support to other features and functionality as needed. …


Behavioral interviews can be hard, especially if you aren’t used to them. Open ended questions are nothing like college exams, and it usually feels like a trap to be vocally self-critical.

If your answer to the question, “What is your biggest weakness?” is “I’m a perfectionist” or “I’m too humble,” then you are likely answering that question poorly.

Image for post
Image for post

This article aims to serve as a guide to re-conceptualize open-ended questions from the perspective of the interviewer. For what are they looking in your answers, and how can you best answer them?

Tell me about yourself.

There is probably not a…


two businesswomen in a meeting
two businesswomen in a meeting

Your 1-on-1 conversations with your manager are some of the most important and productive opportunities for you to improve your career satisfaction and achieve career growth. It’s easy to struggle for a topic of conversation, especially when you are a recent hire and have yet to establish yourself among the team. In this article, I will share with you some tips for preparing for your meeting, the questions I ask during my meetings, and how to promote the most personal growth.

Preparation ✍

As your week is progressing, take notes of what you may want to ask or discuss with your manager…

Charles Stover

Senior front end engineer / charlesstover.com

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