Understanding your client is important in any relationship. Now you also have to understand your server.

Let me tell you a story about a client.

This client was demanding. They wanted all the things, and they wanted them now.

Servers know this kind of client all too well. When the client comes in, asking for everything and the kitchen sink, a server just has to sigh.

“A lot of that is just going to go to waste, you know,” says the server, softly.

Their comments go unheeded.

Does this client sound familiar?

This client is your Single Page Application (SPA).

There’s a new client in town, though, and it only asks for what it needs.

This…


From servers to no servers to serverless, what’s the difference and how does it impact how the client gets data?

Pricess Bride Meme: You keep using the word “Serverless,” I do not think it means what you think it means.
Pricess Bride Meme: You keep using the word “Serverless,” I do not think it means what you think it means.

Servers to No Servers to Serverless

In the beginning, there were servers.

The servers roamed the wild, waiting for clients and their connections, and when a server received a connection it would pounce. The servers liked the connections and held on to them, guarding them closely.

Thus the traditional web app was born.

But the clients grew tired of the servers, which were needy and somehow both clingy and flakey.

“Give us back our connections!” cried the clients, “On our terms!”

“We will just stop by to grab all the things when we need them,” the clients went on, “that’s really all we need.”

Thus the…


A highly opinionated set of rules, based on Atomic Design principles, to make sure your components stay organized.

Confused penguins wondering where their component has gone.
Confused penguins wondering where their component has gone.

This is a quick reference guide to the rules I use for organizing components when building a React application. I have found that having a well-defined system helps not only with organization, but also helps better identify how components fit together and maximize reusability across the codebase.

Definitely check out the extended version of this article if you’re interested in example code, a sample repository, and more information on Atomic Design.

Contents

Application Structure

When I initially create a React application, I put…


A practical guide to developing component-based sites and apps around the Atomic Design methodology.

Organizing your application (or app/site, I’ll use these interchangeably) can seem easy. A folder for components, one for assets, another for utility methods. Maybe even a separate folder for pages! Don’t be fooled, it is almost never that easy.


A row of eleven red leaves evenly torn in half down the middle
A row of eleven red leaves evenly torn in half down the middle

This article is for anyone testing npm packages locally and who has struggled (or is struggling) to get to projects connected via npm link. It's also for myself, so that I have one place to refer back to all the notes I've made in various places when was trying to get it to work for one project or another.

Table of Contents

  1. Definitions and an Example
  2. What Is npm link
  3. What Does npm link Do
    - The Commands
    - Under the Hood
  4. If You Use NVM…
  5. If You Use React…
  6. To Undo Linking
  7. TL;DR — Things to Check
  8. Flowchart Graphic

Definitions and an Example

There are three…


Configuring authentication with Azure B2C in Next.js is not a particularly straight forward process. We’ll look at how to facilitate this using the NextAuth.js library.

Authentication with Azure B2C and Next.js

Authentication with Next.js is, at least for me, a bit of a nebulous problem, especially if development requirements are not 100% solidified. Since you have access to both the client and server(less) environments, you could handle authentication purely in the client, on the server, or with a mix of both.

Add in the task of configuring authentication with Azure B2C and complications are compounded. …


A comprehensive step-by-step guide to configuring Jest, React Testing Library, ESLint, and Path Aliases in a Next.js project.

Update: 06/28/21: Next.js v11 has some improvements when it comes to adding and using ESLint in a project, including some Next-specific linting rules. Some changes have been made to the original article based on the assumption that anyone reading new is going to be starting from Next.js v11+ rather than a previous version.

Next.js is amazing when it comes to installing, learning the framework, and jumping into the code. Its superb documentation & zero-config philosophy make this possible, and not having to think about configuration is wonderful…right up to the point when you want to add some additional configuration.

This…


Using Rollup, Babel, and React we’ll look at why & how you might abstract a third-party component library to create your own component library.

Component libraries are useful. They allow developers to add features quickly and with confidence that they will have consistent style & functionality. Libraries may be built in-house or by a third party. The former offers complete control over implementation but takes more time and resources to build; The latter can be implemented quickly, but relies on the existing implementation.

I like third party libraries, and have found that almost any limitations can be overcome by abstracting the library components on the side of the implementing application. When the library to implementing application ratio is 1 to 1, like in personal…


Expose your React Navigation navigators for simple state sharing between any child screens in React Native.

Update 1/7/2020:

Please note that this was written with Expo 32.x & React-Navigation 3.x. I believe the same general ideas apply, but due to changes (modularization in particular) in the packages the code as-written will not be exactly the same.

Update 6/14/2021:

React Native links updated to point to 3.x documentation.

I’ve been using React Navigation in my React Native projects lately and liking it a lot. It has all of the features I’ve needed and is relatively straight forward to work with out of the box. …

Ben Fox

Software developer currently working in healthcare.

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