A shorthand way with jest.mock() to auto-mock all functions in a JavaScript module yet use the real implementation of one function
How to configure semantic-release to release one-off test branches in an app in order to test dev code prior to merging a Pull Request
How to include test and other non-page files next to page components and API routes within the pages directory in a Next.js application
A journey explaining how digging into 3rd-party code helped provide clarity & find a workaround to a tricky problem
How to resolve the server mismatch error when hydrating a shared React component that can be used in client-side only or server-side rendered apps
How to create complex conditional generic type expressions in TypeScript that can even be recursive
Using type predicates to help TypeScript narrow an ambiguous variable to a specific type
5 categories of best practices for testing components with React Testing Library based on the ESLint plugin
A practical breakdown of when to use interfaces versus types when defining TypeScript object types such as React prop types
How to create a custom Link component that combines the Next's Link component with one from a UI component library like MUI
A deep dive into the various tools that an engineer sets up & configures while maintaining the web frontend infrastructure
Using TypeScript generic utilities to better understand constraints, conditional types and other generic type features
Reasons and steps to follow to create React custom Hooks by extracting component logic
Examples for when using the useCallback and useMemo React Hooks are helpful in reducing component re-renders
How to avoid the exhaustive deps ESLint error by properly using JavaScript async functions within the React useEffect Hook
8 operators that help us write more concise & accurate JavaScript code
How to add a gradient along an SVG circular arc path to create a loading spinner
8 different approaches in JavaScript for creating a shallow copy of an array
Learning how to use TypeScript generics by re-implementing common functions from lodash
How to properly type polymorphic React components using forwardRef in TypeScript
How to use environment variables to initialize the Firebase Admin Node SDK with the private key instead of using the JSON file
A look at common, non-destructive operations using the JavaScript Array API
Re-implement zip, keyBy, sum and other lodash functions in order to learn how Array reduce works
Learn the JavaScript Promise static methods like Promise.allSettled, Promise.any, and others through real-world use cases
How to use automated tooling to catch accessibility issues in a web application built with React, Vue or other JavaScript frameworks
How to configure Jest to fail tests on console warnings and errors
How to create a custom React Hook that allows components to be both controlled and uncontrolled just like form elements
Tips & tricks for reverse-engineering function, object & array TypeScript types from 3rd-party libraries that fail to export them
Explanations & advice on how to choose between advanced React UI patterns like polymorphic components, render props, compound components and others
How to use Next API routes to create an always up-to-date sitemap for user-generated dynamic routes
How to use vanilla JavaScript to loop within JSX of a React component
6 approaches for conditionally rendering JSX markup within a React component
Setting up Cypress end-to-end testing in Github Actions for Next.js apps using Firebase Local Emulator Suite
How to represent an imported function in TypeScript that has been replaced by a Jest mock
A collection of Visual Studio Code extensions package management, code editing, formatting & validating and more
How Next provides the best of static-site generation (SSG), client-side rendering (CSR) & server-side rendering (SSR) for React apps
Reducing our reliance on Lodash by leveraging ESNext APIs to transform objects and arrays
Use Promise.race to add timeout support to the Fetch API
A React custom Hook wrapping the Clipboard web API to enable a copy to clipboard UX
Surprisingly shorthand JavaScript code for converting an array into an object lookup
A helper to convert TypeScript types for a React component library into PropTypes for legacy JavaScript apps
How to create a React custom Hook that wraps useReducer to persist state to localStorage
How Mixins are surprisingly similar to custom Hooks for sharing stateful, non-visual logic
Suggestions for configurations to ESLint, Jest & TypeScript to prevent codebases from being riddled with warnings, errors or false positives
Implementations & explanations for custom React Hooks like usePrevious, useMedia, useDeepCompareEffect & more
How to integrate Prettier into ESLint so that you'll never have to think of code formatting again!
Four strategies for ensuring that React components don't update state after they've been unmounted
Cases where TypeScript const assertions help avoid type errors with union literals in objects and more
How the unknown type in TypeScript helps avoid using the any type for variables we don't know the type of
Four options for optimizing the useEffect Hook with object or array dependencies in React
How to avoid breaking Hooks rules when conditionally calling a custom React Hook that you can't modify
How to avoid using if statements when sorting arrays by multiple keys in JavaScript
The 10 most important modern JavaScript features that will take your React skills to the next level
How to avoid receiving the TypeScript any type from the Fetch API when retrieving JSON data
How TypeScript user-defined type guards can remove undefined or null types with Array.filter
How TypeScript discriminating unions provide type safety to the useReducer hook
How to use TypeScript generics to create data-agnostic React components
How to define strongly-typed React components that can inherit props from arbitrary HTML elements
Using TypeScript to only allow a React prop to be set when another has a specific value
How to use the kill-port package with npx to stop the process running on a given port
Four options for dealing with helper functions listed as dependencies in the useEffect hook
How making use of useState lazy initialization can speed up your React function component
Thoughts on how developers prioritize flexibility when using your JS component library
A way to successfully mock the locked Location object from jsdom in Jest
A small configuration you can add to Jest to reduce false positives for async tests
How to use Enzyme to test UI updates after asynchronous events in React components
The best way to learn React depends on how you learn best
A guide comparing React Prop Types to their equivalent TypeScript definitions
Code snippets on how to hook up Bugsnag into a Gatsby app and enrich the integration through Netlify
Analyzing a potential future feature of JavaScript that could make testing object contents much easier
A plan for new software engineering grads to focus on gaining depth in a single technical area to help grow their career
The rationale behind and explanation of my new venture to offer short, remote-only workshops called "minishops"
My opinion on the key pieces that make up a design system and high-level overview of how to go about building one
Why I decided to redesign benmvp.com from being a blog site to being a site that contains a blog
A quick look at how nested string interpolation within template literals is possible with ES6
How to create a screenshot of a DOM element in Chromium-based DevTools
How to use react-jsonschema-form to automatically render a form based on JSON schema
Some reasons why I choose React Testing Library over Enzyme for testing React components
A quick overview of the newly implemented useOpaqueIdentifier hook and when you would want to use it
I just found out that I've been accepted into the GDE program for Web Technologies!
This morning I received the email I’ve been waiting for. I received the 2019-2020 Microsoft Most Valuable Professional (MVP) award “in…
Nearly 3 years ago, I reinvented benmvp.com to be my professional-focused blog. For a while, I was writing a lot, mostly working on the…
A quick look at using ES6 to solve "common-ish" tasks in JavaScript
About 10 days after returning from speaking at Front Porch Austin 2016, I spoke on the Evolution of JavaScript IV panel at NodeSummit 201…
Back in July I was invited to speak at Front Porch Austin 2016 and gave a talk called “React + ES.next = ♥“. The main Front Porch conference…
I’m finally a truly international speaker! Last month I flew all the way to Oslo, Norway to speak at NDC Oslo 2016 on my talk entitled You…
Back in March, I had the pleasure of speaking at the NationJS Node Day Conference on my talk entitled Sweet ES6. It was adaptation of the…
I feel like all the articles in the Learning ES6 series have been leading up to generators. They really are the feature most JavaScript…
We’ve talked about the new operator and new collection APIs, so now we’re finally going to talk about iterators & iterables. We’ve been…
Now that we covered ES6 classes we should be through all of the syntactic sugar that ECMAScript 6 offers. We can now focus on the new…
At the end of our discussion of the new operator I mentioned that I would next talk about either the new collections or iterators…
It’s been a long time… I shouldn’t have left you… without a dope post to step to… It’s been nearly 2 months since I wrote the last article…
Last month on October 16th I had the opportunity to give my first technical talk in a public setting at the Little Rock Tech Fest 2015. My…
I’m just returning from speaking at Nodevember 2015, a community-driven Node and JavaScript conference in Nashville, TN. It was such a…
Like clockwork the Learning ES6 series continues on, looking at promises. It will be the first feature we’ve looked at in this series that…
Template literals and tagged templates comprise topic #6 in the Learning ES6 series. If you’re new to the series, we most recently covered…
Wow, we’re making some good progress covering ECMAScript 6 features in this Learning ES6 series. We just covered parameter handling, and…
This article is all about the new features added to JavaScript via ECMAScript 6 to improve the handling of function parameters. More…
After learning all about arrow functions and block-level scoping, let’s continue the syntactic sugar train in our Learning ES6 series with…
I have been invited to speak at Little Rock Tech Fest 2015 on October 16th! My talk is entitled Sugar & Spice and Everything nice about ES…
Coming off the heels of discussing arrow functions, let’s continue the Learning ES6 series talking about block-level scoping in ECMAScript…
After looking at the history of ECMAScript, the goals of ECMAScript 6 and using ES6 right now, the first actual feature we’ll look at in our…
Ah, good ol’ IE8. I’m taking a break from the Learning ES6 series to talk about how we should stop supporting the browser that everyone…
So can I use ECMAScript 6 functionality right now? That’s the question everyone is asking these days. Many times when there is new browser…
In this blog post, we’ll take a look at the goals and features of ECMAScript 6. If you haven’t read it already, be sure to check out the…
ECMAScript 6 is the new version of JavaScript making its way into the interpreters of our modern browsers and servers. I’m embarking on the…
Welcome to my newly resurrected blog! The old version of the blog hadn’t been touched since late 2011 and focused on my personal life. This…
