Intro to React's useReducer Hook

We dive into React's useReducer hook and see how we can use it to manage complex state. We first compare useState and useReducer and slowly add on to our reducer function to make it more flexible. Key Takeaways From The Video: 2:50 - Implement a…

The Right Way To Add Tailwind CSS to Gatsby with Purge CSS

In this video, we look at the right way to add Tailwind CSS to a Gatsby site. First we install Tailwind CSS and make a button with its utility classes. During the and we view the page source to see that all the Tailwind CSS classes have been…

Podcasts To Inspire You About Web Development & Entrepreneurship

Here's a list of my favorite podcasts and episodes that I have discovered over the years. Most of these are interviews with various makers and founders because I find it very inspiring to hear their background stories. It's also a great way to get…

Gatsby.js Global State w/ React Context & useReducer

In this video, we'll explore Global State and how to make it persist between pages when working with a Gatsby.js website. We'll first create our global state using React's useReducer hook and Context API. I'll then show you how to incorporate our…

Exercises and Tips for More Advanced Web Development

This post is aimed towards the beginner web developer who is looking to take their dev skills to the next level. Maybe you've become pretty comfortable with the basics of HTML, CSS, and JavaScript and are looking for ways to advance your knowledge…

Gatsby.js Themes Introduction

When making a Gatsby.js site, there are two main ways to start. You could start from scratch by just installing and . Then, based on what your needs are, you would add in various Gatsby plugins and other npm packages for your project. Another…

Custom Gatsby.js Source Plugin

One of the greatest superpowers of Gatsby.js is its ability to use data and content from a variety of sources, such as Wordpress, Markdown files, or APIs. During the build process, Gatsby will query for the data and turn it into content for a static…

Fetching Dynamic Data with Gatsby.js

Gatsby.js is more than just an awesome static site generator, it can also fetch data dynamically like you would with Create React App. We explore what that dynamic data fetching looks like and peak at the compiled code to see the difference between…

Higher Order Reducers with React Hooks

When managing React state with the new hook, you may find that there are commonly repeated action types and logic in your reducer functions. Here is an easy way of using higher order functions to make your custom hooks and reducer logic more…

An Introduction To Using Gatsby Image & Gatsby.js V2

(Updated: Jun. 30, 2019)

** NEW Video tutorial on Gatsby Image available on YouTube! https://www.youtube.com/watch?v=kOrohVsq_kI ** Gatsby.js V2 was recently launched and there have been a few small changes to how Gatsby Image is implemented. Gatsby Image is a React…

Progressive Web Apps with React & Preact.js

Progressive Web Apps (PWA) have come onto the scene in a big way and with more mobile browsers supporting them, they might very well be the future of web applications. A PWA is actually pretty simple, and virtually any website or application can be…

Form Handling with Gatsby.js V2 and Netlify

(Updated: Aug. 12, 2019)

Having a working contact form is a basic requirement for many websites, but setting one up with a static site can be tricky. If you're hosting your website with Netlify (which you should be), you can utilize their awesome form handling feature for…

Gatsby.js with Contentful Content Management

One of the most magical aspects of Gatsby.js is its ability to pull in data from a wide variety of sources. Leveraging the power of GraphQL, you can populate a Gatsby website with local markdown files, a CSV file, a MongoDB database, or from a list…

Gatsby.js & Next.js Starters

View our collection of website templates for Gatsby.js and Next.js. Gatsby is a static site generator which uses modern web technologies such as React.js, Webpack, and GraphQL. Next.js is a framework for server side rendered React apps and also generates static websites.

Learn JavaScript and React

Here are some of my favorite courses for learning JavaScript and React. I have personally purchased each of these and found them extremely helpful when I was learning JavaScript and React. Check out the resources page for more.

About Code Bushi

Code Bushi aims to provide web development resources, techniques, and trends to help guide your coding journey. Modern web development is constantly changing and it can be a struggle trying to keep up with the latest standards and best practices. With Code Bushi, I hope to highlight some interesting tools and resources for the modern web.

Code Bushi was started by me, Hunter Chang, as a way to document and share my coding experiences. I've been a professional web developer and designer for over 10 years and I still love discovering and creating cool things on the web.

If you find the content on this site useful, please consider supporting my work!