Blog Posts

Monday, March 24, 2025 How to Use Neon’s MCP Server With React Server Components

There's been a lot of talk about MCP Servers in the last few weeks, and if you're not sure what an MCP Server is, here's...

• JavaScript
• React
• Neon
• AI

Friday, March 14, 2025 How to Use Hugging Face Inference Endpoints with JavaScript

In this post, I'll walk you through using Hugging Face Inference Endpoints and the @huggingface/inference JavaScript SDK...

• JavaScript
• Node.js
• AI

Friday, February 21, 2025 How to Send email using Gmail and GitHub Actions

If you've found yourself here, you're probably looking for a way to send an email using GitHub Actions. Great—I needed t...

• JavaScript
• GitHub Actions
• Node.js

Thursday, July 4, 2024 How to Use PostgreSQL SSL certificates in GitHub Actions

If you've ever connected to a PostgreSQL database that required an SSL certificate, you'll have probably downloaded the ...

• PostgreSQL
• GitHub Actions

Tuesday, June 25, 2024 How to Use Google Application .json Credentials in Environment Variables

If you've ever tried to use one of Google's APIs you'll know at some point you're prompted to download the credentials a...

• Node.js
• JavaScript

Thursday, February 22, 2024 How to Build a Survey With KwesForms and Astro

In this post I'll explain how I built a survey form using KwesForms and Astro, complete with some fancy data viz to me h...

• Astro
• KwesForms
• JavaScript
• SVG

Tuesday, February 6, 2024 The Qwik, Astro, Audiofeed Experiment

This is an experimental blog post where i'll write a very brief 'How to...' guide for creating an Astro site and add Jac...

• Qwik
• Astro
• Audiofeed
• AI

Thursday, February 1, 2024 How to use Qwik's useVisibleTask$

In this post I'll be explaining how, and why I used Qwik's useVisibleTask$. I felt this needed explaining because, as yo...

• Qwik
• Astro
• JavaScript

Wednesday, November 22, 2023 A set of: "Sign In With Google" Buttons Made With Tailwind

In this post I'll provide several code snippets for the various types of "Sign in with Google" buttons that are availabl...

• Tailwind

Sunday, October 15, 2023 What Is a Proxy Redirect?

In this Post I'm going to describe an approach I've used in my last three jobs when creating Product Demos. It allows me...

• DevOps

Monday, October 2, 2023 How to Create an SVG Radar Chart using Astro and Tailwind

If you're familiar with Astro you'll likely know that a lot of effort has been made to ensure you ship less JavaScript t...

• Astro
• JavaScript
• SVG
• Tailwind

Wednesday, September 27, 2023 How to Create Excerpts With Astro

In this post I'll explain how I've created an excerpt from Markdown content. I've used this approach on my site, I'm not...

• Astro
• JavaScript
• Markdown

Friday, February 24, 2023 Getting Started With CockroachDB, pg-promise and Next.js

In this guide you should find everything you need to get started with CockroachDB, pg-promise and Next.js (API Routes). ...

• Next.js
• React
• pg-promise
• CockroachDB
• PostgreSQL

Thursday, February 9, 2023 My Cockroach Labs Interview App

Hello there! In November 2022 I started a new role at Cockroach Labs, and worked as a Technical Evangelist, and here's a...

• Next.js
• React
• three.js
• react-three-fiber
• React Query
• Tailwind
• NextAuth
• pg-promise
• CockroachDB
• PostgreSQL

Thursday, December 22, 2022 How to Create Custom Marketo Forms With React

Hello. It's been a little while, and I have a new job! I'm now at Cockroach Labs and in the coming months I'll be respon...

• Next.js
• React
• Marketo

Tuesday, November 1, 2022 How to use React's Context API with Gatsby

Hey there, in this post I'll be explaining how to use React's Context API with Gatsby to provide a "global state" variab...

• Gatsby
• React

Thursday, October 20, 2022 React hydration error 425 "Text content does not match server-rendered HTML"

If you're upgrading to React 18 and have run into the following error, this post should help explain what causes the err...

• Gatsby
• React

Monday, October 17, 2022 How to Create Image Slices Using Sharp

Hey there, ok, this is a failed experiment, but it's October, Halloween is on the way and my experiment into image slici...

• JavaScript
• Sharp

Tuesday, September 27, 2022 How to use Serverless Functions with SSR

In this post I'll explain how to abstract and reuse the same function logic across all sides of the Gatsby stack; Server...

• Gatsby
• Serverless Functions
• React
• JavaScript
• Tailwind
• Google Analytics

Thursday, September 8, 2022 How to use TanStack Query (react-query) with Gatsby

In this post I'll be discussing how to use TanStack Query, or more specifically @tanstack/react-query to replace the oft...

• Gatsby
• Serverless Functions
• React
• JavaScript
• React Query

Friday, September 2, 2022 MDX 2 Breaking changes and gatsby-plugin-mdx v4 (Slug)

If you're upgrading to v4 of gatsby-plugin-mdx you'll likely run into errors. Both MDX 2 and v4 of the plugin are major ...

• Gatsby
• MDX

Friday, August 26, 2022 MDX 2 Breaking changes and gatsby-plugin-mdx v4 (Content)

If you're upgrading to v4 of gatsby-plugin-mdx you'll likely run into errors. Both MDX 2 and v4 of the plugin are major ...

• Gatsby
• MDX

Thursday, August 18, 2022 MDX and ESM rehype Packages

Hey, in this post i'm going to show you how to use the latest ESM rehype packages with gatsby-plugin-mdx v3. Titus Worme...

• Gatsby
• MDX
• rehype

Wednesday, August 10, 2022 How to use Utterances with React

Ahoy! In this post I'll be explaining how I used the fantastic Utteranc.es 🔮 with React. On the below links you'll find...

• React
• JavaScript

Monday, August 8, 2022 Syntax highlighting with Gatsby, MDX, Tailwind and Prism React Renderer

In this post I'll explain how I use the excellent {" "} Prism React Renderer by {" "} Formiddable to add syntax highligh...

• Gatsby
• React
• JavaScript
• MDX
• Tailwind
• Prism

Friday, July 29, 2022 How to use Gatsby's Head API with MDX

Hi there! I'm excited, are you? Of course you are! In Gatsby 4.19.0 the team shipped the Gatsby Head API 🎉 But what doe...

• Gatsby
• React
• JavaScript
• MDX

Tuesday, July 26, 2022 How to use Gatsby's Script API with Google Analytics

In this post I'll be explaining how to add Google's "new" Google Analytics Property (GA4) to your Gatsby Site using the ...

• Gatsby
• React
• JavaScript
• Partytown
• Google Analytics

Sunday, January 2, 2022 Using a useLocalStorage hook and rehydration

Recently I ran into an issue using the useLocalStorage hook from useHooks.com -- which is brills by the way! The Problem...

• JavaScript
• React

Wednesday, August 18, 2021 Gatsby FuncJam 21

Groovy Analytics, It's gonna be something to do with Google Analytics 🕺 Visit Groovy Analytics Go Go Go Aug 18 2021 Her...

• Gatsby
• React
• TypeScript
• JavaScript
• Theme UI
• Serverless Functions
• Google Analytics

Wednesday, July 28, 2021 How to "fix" Gatsby slow local build times

Ahoy, as the title suggests in this post I'm going to explain one way to resolve the "slow local build time" issues I kn...

• React
• Gatsby
• JavaScript

Friday, July 2, 2021 Modify Gatsby's GraphQL data types using createSchemaCustomization

Hi friends, yesterday I published a little post about how to Add data to Gatsby's GraphQL layer using sourceNodes, this ...

• React
• Gatsby
• JavaScript
• GraphQL

Thursday, July 1, 2021 Add data to Gatsby's Data layer using sourceNodes

In this post i'm going to demonstrate how to source data from a NASA API and inject the response into Gatsby's GraphQL l...

• React
• Gatsby
• JavaScript

Friday, June 11, 2021 Using Gatsby Serverless Functions as an abstracted API

They're here! Gatsby Serverless Functions are here! They're finally here! 💝 -- And I couldn't be more excited! A little...

• React
• Gatsby
• Serverless Functions
• JavaScript
• Gatsby Plugins

Friday, April 9, 2021 Gatsby Plugin Image: withArtDirection

Hello! If you're reading this you probably already know about Gatsby Plugin Image, but if not here's a recap: Announcing...

• React
• Gatsby
• JavaScript
• Gatsby Plugins

Monday, April 5, 2021 Sourcing local .json files with Gatsby

Hi all, I recently had a discussion with Rahul on Twitter regarding building a Gatsby blog using only locally sourced .j...

• Node.js
• Gatsby
• JavaScript
• JSON

Monday, March 29, 2021 MDX "fold it in"

In this post i'm going to discuss the term "Fold it in" which I think was first coined by spences10 and it relates to a ...

• React
• Gatsby
• MDX

Saturday, March 27, 2021 Create Accessible Data Visualization for your Gatsby Blog with Charts.css

Ahoy M'Hartys! ‍⚓ in this post i'm going to demonstrate how you can create Accessible Data visualization using Charts.cs...

• React
• Gatsby
• JavaScript
• MDX
• Charts CSS

Tuesday, March 16, 2021 Gatsby File System Route API: Multiple Source MDX

In this post I'm going to provide an example of how to use Gatsby's File System Route API to source MDX files from multi...

• React
• Gatsby
• JavaScript
• MDX

Monday, March 8, 2021 Understanding Theme UI

If you're new to Theme UI or have ben thinking about getting started with CSS-in-Js Theme UI is a great choice. The docs...

• JavaScript
• React
• Theme UI

Tuesday, February 9, 2021 Understanding Theme UI: 6 - The Hacks

In this post i'm going to explain some of my Theme UI "hacks"... to be honest they're not really hacks but you won't nec...

• JavaScript
• React
• Theme UI

Wednesday, February 3, 2021 Understanding Theme UI: 5 - Media Queries

In this post i'm going to explain how Theme UI's Responsive Values work and to get us started... You don't need to writ...

• JavaScript
• React
• Theme UI

Thursday, January 21, 2021 Understanding Theme UI: 4 - Scales

In this post i'm going to explain how Theme UI's Theme Scales work. If you're new to Theme UI i'd suggest having a read ...

• JavaScript
• React
• Theme UI

Tuesday, January 19, 2021 Understanding Theme UI: 3 - Components

In this post i'm going to explain how to use Theme UI's built in components. If you're new to Theme UI i'd suggest havin...

• JavaScript
• React
• Theme UI

Monday, January 18, 2021 Understanding Theme UI: 2 - Styled component

In my last post I attempted to explain Theme UI's Jsx Pragma, if you missed that, here's the link again Understanding T...

• JavaScript
• React
• Theme UI

Tuesday, January 12, 2021 Understanding Theme UI: 1 - Jsx Pragma

In this post I'm going to try and explain Theme UI's Jsx Pragma. I hope to create a series of these posts that might hel...

• JavaScript
• React
• Theme UI

Monday, January 11, 2021 Create an SVG Doughnut Chart from scratch for your Gatsby blog

Charting libraries are great don't get me wrong but sometimes... you just need a bloody doughnut! 🍩 This post is largel...

• JavaScript
• React
• SVG
• Gatsby
• CSS

Wednesday, January 6, 2021 Use Netlify Functions and the GitHub REST API to add Data Visualization to your Gatsby blog

After a recent Twitter conversation with my good chum Scott we decided we'd run a little experiment that will attempt to...

• JavaScript
• React
• Gatsby
• SVG
• Netlify Functions
• GitHub REST

Friday, January 1, 2021 Best Bits 2021 ...

Oh hey there! 👋 Here's a byte-size round up of things i've done so far this year. This post is pinned and will be updat...

• React
• Gatsby
• Serverless Functions
• three.js
• react-three-fiber
• JavaScript
• TypeScript
• Theme UI
• GitHub REST

Thursday, December 24, 2020 2020 Top Tweets

This is a bit of a shameless plug but I was curious to see how my Twitter Analytics stacked up for this year so, here's ...

Friday, November 27, 2020 Silly Site Challenge

BumHub The cheekiest way to explore GitHub 🍑 Visit BumHub Go Go Go Nov 23 2020 I'm at it again 🕺 If you followed alon...

• Gatsby
• React
• TypeScript
• JavaScript
• Theme UI
• SVG
• Netlify Functions
• GitHub REST

Tuesday, November 17, 2020 Use Netlify Functions and the Twitter API v2 as a CMS for your Gatsby blog

Apologies in advance for the rather long-winded blog title but as it suggests in this post i'm going to explain how you ...

• JavaScript
• React
• Gatsby
• Netlify Functions
• Twitter API v2

Tuesday, October 27, 2020 Storybook - An alternative approach

Hiya 👋, if you like Storybook you've come to the right place. I loooooooove Storybook!! It is in my opinion the ONLY wa...

• Storybook
• JavaScript
• React

Monday, August 24, 2020 Gatsby SEO Component

In this post i'm going to explain how to create an Seo component for use in a Gatsby application or site, I seem to alwa...

• Gatsby
• JavaScript

Wednesday, August 19, 2020 styled-components Responsive Array Syntax

In this post I'm going to discuss a new approach I've adopted when using [styled-components](https://Styled Components.c...

• React
• JavaScript
• styled-components

Thursday, August 13, 2020 styled-components Style Objects

styled-components optionally supports writing CSS as JavaScript objects instead of strings. This is particularly useful ...

• React
• JavaScript
• styled-components

Wednesday, August 5, 2020 Best Bits 2020 ...

Oh hey there! 👋 Here's a byte-size round up of projects I've Open-sourced, posts and articles I've written and contract...

• React
• Gatsby
• Gatsby Cloud
• JavaScript
• TypeScript
• Shopify
• styled-components
• Storybook
• Jest
• Enzyme
• Testing Library

Monday, August 3, 2020 React hooks and matter.js

Recently I was creating a Shopify demo application and became a little underwhelmed with the Checkout experience and so ...

• React
• JavaScript
• matter.js

Monday, July 6, 2020 Everything's a box

In this post i'm going to introduce one of the concepts you can use when developing web pages/apps using Theme UI If you...

• React
• Theme UI

Tuesday, June 16, 2020 React SVG Bubble Slider

You've probably seen reactions before on social media, Twitter, Instagram etc all have ways for users to show their like...

• React
• GSAP
• SVG

Thursday, June 4, 2020 First Ever Donation

I've been at the Open Source thing for a while now and never really intended it to be a way to make a living but... On a...

• Gatsby
• Gatsby Plugins
• MDX

Thursday, May 21, 2020 Roll Your Own Comments

After seeing the following Tweet by Fauna inviting users to take part in the Write With Fauna challenge i decided i'd su...

• React
• JavaScript
• Gatsby
• Fauna
• Apollo
• GraphQL
• Netlify

Friday, May 8, 2020 Gatsby CLI Recipes

I recently posted about two new Gatsby Recipes i was working on to help automate the sometimes quite tricky process of i...

• Gatsby
• Gatsby Recipes
• Storybook
• JavaScript
• TypeScript

Thursday, May 7, 2020 MDX Embed Intersection Observer

If you're not familiar with my plugin gatsby-mdx-embed have a read of this post ... or to summarize.. Gatsby MDX Embed ...

• React
• JavaScript
• Gatsby
• Gatsby Plugins
• MDX

Monday, May 4, 2020 gatsby-recipe-storybook-ts

In a recent post i introduced Gatsby recipes and talked about a new recipe i created that automates the Storybook setup ...

• Gatsby
• Gatsby Recipes
• Storybook
• TypeScript

Sunday, April 26, 2020 gatsby-recipe-storybook-js

If you haven't tried Gatsby Recipes yet you really should! You can read a bit more about them here which will give you a...

• Gatsby
• Gatsby Recipes
• Storybook
• JavaScript

Friday, April 24, 2020 TypeScript Theme UI Link

In a previous post; gatsby-or-theme-ui-link i talked about how to cast a Theme UI Link as gatsby Link... and that will w...

• React
• Gatsby
• TypeScript
• Theme UI

Tuesday, April 21, 2020 Officially published

🎉 My work on 100DaysOfGatsby caught the eye of the editorial team and now Gatsby have officially published my 100 days ...

• Gatsby

Monday, April 20, 2020 MDX Embedded Images

In this post i'm going to show you how to use MDXRenderer to display embedded images in the body of your MDX by sourcing...

• React
• Gatsby
• JavaScript
• MDX

Friday, April 17, 2020 Gatsby or Theme UI Link

I know this has tripped me up on more than one occasion and if you're using Theme UI components in your Gatsby project i...

• React
• Gatsby
• JavaScript
• Theme UI

Friday, April 17, 2020 SVG Icon Systems

If you're doing this in your React project... just stop it! 🛑 // some-file.js import iconA from './icons/icon-a.svg'; i...

• React
• JavaScript
• SVG

Wednesday, April 15, 2020 Intersection Observer

Recently at work i was asked to create a scroll-jacking sticky nav and after trying out numerous open source projects re...

• React
• JavaScript

Thursday, April 9, 2020 100DaysOfGatsby - The Roundup

For the past 100 days i've posted every day about the work i've been doing in & around the Gatsby eco-system. If you...

• Gatsby

Wednesday, April 1, 2020 Skin UI

This has been a labour of love but www.skin-ui.com is now alive and kicking. If you're using Theme UI for your Gatsby pr...

• Gatsby
• Theme UI
• Fauna

Friday, February 28, 2020 gatsby-theme-terminal

This is my second attempt at creating a Gatsby theme and my approach to this build was very different to the first time ...

• Gatsby
• Gatsby Themes

Saturday, February 15, 2020 gatsby-plugin-prop-shop

gatsby-plugin-prop-shop is my newest Gatsby Plugins and it's slightly different to my previous plugins. The reason for t...

• Gatsby
• Gatsby Plugins
• React
• JavaScript

Monday, January 6, 2020 gatsby-mdx-embed

Let's back track for just a second... What is MDX? To quote the creators; MDX is an authorable format that lets you sea...

• Gatsby
• Gatsby Plugins
• MDX

Wednesday, January 1, 2020 100DaysOfGatsby

Day 100 Apr 9 2020 Stick a fork in me, i'm done! ✅ I can't quite believe it but for 100 days i've written code and updat...

• Gatsby

Friday, December 27, 2019 gatsby-remark-grid-system

At the time of writing this post gatsby-remark-grid-system is still very much experimental, it is functional and has had...

• Gatsby
• Gatsby Plugins

Tuesday, December 24, 2019 gatsby-mdx-routes

This little plugin was as a result of seeing this tweet <Tweet id='https://twitter.com/FezVrasta/status/1205904176171...

• Gatsby
• Gatsby Plugins
• MDX

Saturday, December 14, 2019 gatsby-remark-sticky-table

At the time of writing this post gatsby-remark-sticky-table is still very much experimental, it is functional and has ha...

• Gatsby
• Gatsby Plugins

Tuesday, November 12, 2019 gatsby-theme-gatstats

Boom! after months of work my theme is actually live! If you like data viz and want a blog that's a little bit different...

• Gatsby
• Gatsby Themes