Blog

x

Sequential Interval React Hook

React, React hooks, setTimeout, promise, animation

Create a React hook that can simulate a pulse-like cycle between animation states through different durations per animation state. tl;dr…

Create a Single Line Chart in React with @vx

React, @vx, TypeScript, Data Visualization

Update: October 2020 - @vx is now @visx and is at 1.0. You can read about the update from Airbnb Engineering . As of this update, the…

Beginning Web Accessibility in React

React, TypeScript, a11y, accessibility

I recently decided to dive into learning accessibility on the web. So many of the great developers that I follow on Twitter advocate for…

Bar Chart in React with @vx

Data Visualization, React, TypeScript, @vx

Update: October 2020 - @vx is now @visx and is at 1.0. You can read about the update from Airbnb Engineering . As of this update, the…

React Hooks: useDims

React, React hooks

Here's another helpful React hook. This one returns the dimensions of an element that's passed to it. It can be used in a component like…

My Favorite Layout Components in React

React, CSS, layout

There are a few components that I use almost every day in development. They are used for layouts and are made from flexbox and css grid. On…

React Hooks: useSlider

React, React hooks

We had a need for an auto advancing image slider in React. I chose to use hooks for this feature. This hook leverages a useInterval hook…

Build a React Gallery With CSS Grid

React, TypeScript, Gatsby, CSS

CSS Grid is super powerful and can be used to create some creative layouts which makes it a great way to create galleries. In this guide we…

Quick Tip: GraphQL Fragments in Gatsby

Gatsby, GraphQL, React, quick tip

GraphQL makes it easy to get exactly the data we need for a given component. There are many times when we end up using the same query or…

Animated CSS Timer Icon

CSS, React

I recently had a need for a timer/revert icon that can animate forward and backward. Pure CSS I wanted it to be a purely CSS and HTML versus…