Skip to main content

Joel M. Turner

Blog

x

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

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

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

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

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

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

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

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

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

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

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

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

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

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…

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…

© 2012-2020, Proudly built with Gatsby and Theme UI