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…
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:
React Nested Nav offers a React component called
NestedNav that you can easily add to…
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.
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…
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.
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
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?
Director of Technology @UseAllFive