Joel M. Turner

Illustration

Blog

Notes

x

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 using. Window…

Bar Chart in React with @VX

Data visualization is steadily becoming more valuable to companies as they try to understand all the data they have coming in. There are a lot of…

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. Let's…

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 this. Let's…

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 this site…

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 from Dan…

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’re going…

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 part of a…

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 take to type…

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 benefit of…

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 in Gatsby…

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 an…

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 hand…

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 an hour…

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 Modern…

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 Basics…

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 have, and I…

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 purpose…

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 post…