Feb. 08, 2021
Several months ago, I started writing a "book" about making websites with Gatsby.js. It has become obvious to me that I will probably never finish this book, due to several personal reasons (loss of interest, having a toddler is hard, burnout from…
Feb. 02, 2020
We take a look at the power of Next.js and how it handles fetching data using getInitialProps. We also cover some of the gotchas when working with server side rendering since the code runs on both the Node server as well as the Client/Browser. Key…
Nov. 16, 2019
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…
Nov. 13, 2019
Key Takeaways From The Video: 4:40 - When a Parent Component re-renders, all Child components will re-render as well. 5:30 - React.memo is a higher order component, used with functional components. React.memo will compare the previous props to the…
Oct. 26, 2019
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…
Oct. 12, 2019
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…
Oct. 05, 2019
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…
Sep. 28, 2019
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…
Sep. 21, 2019
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…
Aug. 24, 2019
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…
Jul. 13, 2019
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…
Jun. 22, 2019
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…
Mar. 09, 2019
With the recent release of React Hooks, I've switched over to using more and more functional components in my React code. While reading the React docs, I kept seeing mentions of being "more performant" than . I was unclear on why so I did a deep…
Sep. 20, 2018 (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…
Aug. 30, 2018
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…
Jul. 29, 2018
Recently I was asked to add some fancy charts and graphs to an existing Wordpress website. In the past, my weapon of choice would be either jQuery or Angular.js for a task such as this, but I decided to try the popular Vue.js. Vue.js is a progressive…
Apr. 22, 2018
For as long as I can remember, I've been hosting my Wordpress sites with Hostgator.com without any major issues. They were the most popular option for Wordpress hosting at the time and their prices were very reasonable. Recently a friend of mine…
Apr. 17, 2018
Many new APIs are moving away from REST and embracing the change to GraphQL. GitHub's API V4 is one example of this, and that's because GraphQL offers a lot more flexibility when querying for data. This tutorial will go over how to incorporate and…
Mar. 25, 2018 (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…
Mar. 11, 2018
So you've just put the finishing touches on your static website and it's time to share it with the world. The good news is, there are plenty of great hosting solutions out there to help simplify the process. Deploying a modern static site has become…
Feb. 24, 2018
If you're a web developer or someone who's looking to get into the field, having a digital portfolio can be extremely valuable. A personal website is a fantastic way to showcase your work and help you get noticed. Fortunately, getting a website up…
Jan. 20, 2018
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…
Dec. 11, 2017
The first time I saw a video background on a website, I became obsessed. I thought parallax backgrounds were cool, but this was on a different level! Most video backgrounds use the video tag, paired with a small video file that's optimized for the…
Nov. 24, 2017 (Updated: Apr. 08, 2018)
With Gatsby.js, it's pretty easy to get a static site up and running with one of their starter templates. The (https://github.com/gatsbyjs/gatsby-starter-blog) demonstrates how a Gatsby static site can function with blog posts written in markdown…
Nov. 19, 2017
This demo is for Gatsby.js V1. For a newer demo that's updated for Gatsby.js V2, please check out Using Gatsby Image V2. With the rise of mobile browsing, the optimization of images on a website is more important than ever. If a site is image heavy…
Nov. 11, 2017
For the past 8+ years, my go-to weapon of choice when developing a website has been WordPress. According to a recent statistic by W3Techs, about 29% of all websites on the internet are built using this popular CMS. That's a HUGE number, and for…
