Category: dev
Chart Parts: Anatomy of a chart
When building charts and chart libraries it's nice to know how all the pieces work together. We take a quick look at how all the parts work together.
Quick Tip: VS Code Extension Folder Location
By relocating the folders that are created/updated by VS Code Extensions we can bypass the need to update a gitignore file.
Working on a New Feature as a Senior Frontend Developer
Some of the questions and thought processes I have as I work through a new feature ticket.
React One Time Password Input Component
One time password input component for React. Uses a separated input for the OTP read and write.
Gatsby Client-Side External Redirect
A client-side redirect for Gatsby when you don't have access to the CloudFront settings.
Instagram to Cloudinary
Setting up a GitHub Action to upload images to Cloudinary from Instagram. This solves some of the issues that I was having with getting Instagram images into Gatsby.
Sequential Interval React Hook
Create a React hook that can simulate a pulse-like cycle between animation states through different durations per animation state.
Animated SVG Water Pictorial Fraction in Svelte
Create a pictorial fraction of water in SVG using Svelte. Allows for percentage progress so the image looks like it's filling or draining.
Create a Single Line Chart in React with @vx
This is a simple example of a single line chart built with the @vx charting primitives. We can use this to as a base to add multiple lines to our chart.
Beginning Web Accessibility in React
Exploring the beginning stages of making a website accessible and why we would do so.
Bar Chart in React with @vx
Building a bar chart in React using the @vx library of charting primitives. This is one of the most widely used charts and gives a good base for building upon.
Build an Inline Edit Text Input With React Hooks
This is a simple example of how to build an inline edit text input with React Hooks.
React Hooks: useDims
Here's another helpful React hook. This one returns the dimensions of an element that's passed to it.
My Favorite Layout Components in React
React components for rapid layout and ease of use. These components are designed to be used as building blocks for your own layouts. They are not meant to be used as the only way to build a layout.
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 to use a simple grid that keeps the images the same size.
Quick Tip: GraphQL Fragments in Gatsby
A few quick tips about working with GraphQL fragments in Gatsby.
