Recently I set about on a quest to get Next.js (v10) to work with Storybook. It seemed straightforward at first but it proved to be quite the gauntlet. Once I got it working, I decided to write this with the hope of helping the next poor fool who wonders down this path.

Why bother?

Good question. Should be your first question. Storybook might not always make sense for your project. Working on a small site or app without many components? Maybe it's not worth your time. Building a large website with a whole component system? Then yeah, I think it may be…

What are modular pages?

The term “modular pages” refers to pages that are constructed by stacking multiple modules on top of each other like building blocks. In Prismic, these modules are referred to as “slices”. By mixing and matching an array of slices, a content manager can create a nearly infinite amount of custom page layouts w/o requiring a developer/designer (d/d). For content-heavy sites, this approach saves a considerable amount of time for d/d. A d/d simply needs to build/design each slice as a standalone component rather than developing/designing every page of the site. …

Sites like Amazon and Aesop use nested navigation as a way to present a lot of information to users in a hierarchical way. Building navigation menus like this can be challenging, to say the least, but it seems clear that this UX pattern is effective since some of the largest companies in the world are utilizing it to structure their content.

In order to make this sort of pattern a bit simpler to develop, I’d like to introduce React Nested Nav:

Repo: https://github.com/UseAllFive/react-nested-nav
Demo: https://useallfive.github.io/react-nested-nav/

React Nested Nav offers a React component called NestedNav that you can easily add to…

Introduction

I’ve created a small JavaScript module that you can import into your projects to visualize CSS grids while developing. This is similar to how Sketch and other design tools allow designers to view/hide layout grids. The hope is that this will make our jobs a little easier, encourage the use of CSS grids, and ultimately lead to more beautiful websites. In the following post, I will:

1. Walk you through how to use the library
2. Drill into the code a bit to explain how it works

Getting Started

First, a note regarding in which situations this module will prove handy: At the moment…

Note: The word “orphan” and “widow” often get used interchangeably. For this article, “orphan” will be used but one can refer to them however they like.

TL;DR

Use the NYT text-balancer where appropriate

What’s an orphan?

…A word, part of a word, or very short line that appears by itself at the end of a paragraph. Mnemonically still “alone at the bottom”, just this time at the bottom of a paragraph. Orphans of this type give the impression of too much white space between paragraphs.*

To put it more succinctly, a typographic orphan refers to the last word(s) in a block of text, which…

Summary

In this article, I’ll walk you through a WebVR framework called A-Frame by building a 100 mph fastball simulation. I won’t bother going into the detail of every aspect of the experience but I will highlight a couple of aspects that I found educational. We’ll start by building a basic baseball field. Then, we’ll explore animating a baseball from the pitcher’s mound to home plate. This post is merely meant to augment the official docs. It’s highly recommended that you read through those docs before/after reading this for a more well-rounded explanation of the framework and all its features.

Primitives

In…

The case for using one CSS grid for your entire website

CSS Grid vs Flexbox

In the dark ages, we used table, a few years ago we used float and before today most of us used flex . Of course, these older technologies still serve a purpose but when it comes to good old fashioned layout, CSS grid is where it’s at.

Examples (JSX)

A simple three-column grid in flexbox with 20px gap and 30px of gutter on the left and right:

There are a few annoying things that we have to do to accomplish this. Do you see them?

1. Negative…