Blog

x

Animated SVG Water Pictorial Fraction in Svelte

Animated SVG Water Pictorial Fraction in Svelte

One of my favorite charts in data visualization is Pictorial Fraction . It's essentially a bar chart as a shape that can be partially…

Create a Single Line Chart in React with @vx

Create a Single Line Chart in React with @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…

Beginning Web Accessibility in React

Beginning Web Accessibility in React

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

Front-End Checklist for Ticket Completion

Front-End Checklist for Ticket Completion

On our dev team, we are assigned tickets that may be features or bug fixes. I fumbled through the lifecycle of a ticket a few times where I…

Productivity Practices for Front End Development

Productivity Practices for Front End Development

A big part of me getting things done are the systems that I have in place. Today I'll talk about a few of the systems that I'm currently…

Bar Chart in React with @vx

Bar Chart in React with @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…

Build an Inline Edit Text Input With React Hooks

Build an Inline Edit Text Input With React Hooks

A nice feature in many apps is to edit a title or other text inline without leaving the context that we're in. Here's what we'll be building…

React Hooks: useDims

React Hooks: useDims

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

My Favorite Layout Components in React

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 Hooks: useSlider

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

Build a React Gallery With CSS Grid

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

Quick Tip: GraphQL Fragments in Gatsby

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…

Create an Avatar Component in Gatsby with TypeScript Part 3: Adding Types

Create an Avatar Component in Gatsby with TypeScript Part 3: Adding Types

We left off with our avatar component working using Gatsby Image and still able to receive an image url. Now, let's look at what it would…

Create an Avatar Component in Gatsby with TypeScript Part 2: Gatsby Image

Create an Avatar Component in Gatsby with TypeScript Part 2: Gatsby Image

In Part 1 we put together a simple avatar component that can receive an image url and render it out as a round image. To get the full…

Create an Avatar Component in Gatsby with TypeScript Part 1

Create an Avatar Component in Gatsby with TypeScript Part 1

In this series we're going to take a look at creating a simple avatar component that is typed with TypeScript and has some special goodies…

Animated CSS Timer Icon

Animated CSS Timer Icon

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…

My Best Hand Lettering and Sketches of 2016

My Best Hand Lettering and Sketches of 2016

After my year of lettering I continued going with my hand lettering and sketches on a daily basis. Much of my practice was inspired by other…

Playing with Type

Playing with Type

For the past month and a half, I have played with hand lettering to help me practice more hands-on design. I have chosen to spend about half…

Post Modern Jukebox Art

Post Modern Jukebox Art

After seeing Scott Bradlee and Post Modern Jukebox live in Portland on their Eviction Tour, I was inspired to create some promo images. Post…

Getting Sassy With Sass: Nesting

Getting Sassy With Sass: Nesting

As I'm learning to use Sass I decided to jot down some of the basics for reference. Most of this is coming from Hampton Catlin 's Sass…

Choosing the Decisions We Make

Choosing the Decisions We Make

You know that feeling of being run down by the overwhelming weight of the decisions that you have to make on a regular basis? I definitely…

Creating a Daily Routine for Freedom

Creating a Daily Routine for Freedom

The more I explore myself, the more I realize that my "freedom" is not from not having anything to do but by doing things that give me…

The Doctor's Companions

The Doctor's Companions

In honor of the 50th Anniversary of Doctor Who, my wife and I decided to do a little tribute to the Doctor's companions in the series. This…