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.
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 worth it. …
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 any part of your site to inject a nested navigation menu. For example, you may want to add the nested nav into a sidebar that’s revealed when a hamburger is clicked. …
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:
First, a note regarding in which situations this module will prove handy:
At the moment, and for the foreseeable future, CSS Grid Guides are only meant to be used by sites that handle grids in the same way they are handled in applications like Sketch or Figma. That is to say, this library assumes you’re using a CSS grid property called grid-template-columns
and repeating X amount of columns with an equal gap between them. As an example, this is what a typical 12 column grid looks like that will play very nicely with this…
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.
Use the NYT text-balancer where appropriate
…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 occupies its own line. …
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.
In A-Frame, “primitives” are basic shapes that come with the framework. For example, a sphere, cylinder, plane, box, etc. Using these basic shapes, we can build almost any structure. To build this simulation, for instance, we’ll be using just two: The sphere and the plane. The sphere will be used for the mound and the baseball and the plane for everything else: bases, infield, and outfield. To illustrate, let’s look at how the ball is…
The case for using one CSS grid for your entire website
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.
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?
About