Blog Posts
You'll find a mixed bag of content here. I'm mainly focussed on "How to" guides but every now and then I'll throw in a curve ball.
- 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&q...
- 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...
- 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 sh...
- 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...
- 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 Ne...
- My Cockroach Labs Interview App
Hello there! In November 2022 I started a new role at Cockroach Labs, and worked as a Technical Evan...
- 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 m...
- 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 &...
- 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...
- 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 experim...
- 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 ...
- 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-quer...
- 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 t...
- 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 t...
- 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...
- 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 bel...
- 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 {" &q...
- 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...
- 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) ...
- Using a useLocalStorage hook and rehydration
Recently I ran into an issue using the useLocalStorage hook from useHooks.com -- which is brills by ...
- Gatsby FuncJam 21
Groovy Analytics, It's gonna be something to do with Google Analytics 🕺 Visit Groovy Analytics Go G...
- 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 loca...
- 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 usin...
- 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 int...
- 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 mo...
- Gatsby Plugin Image: withArtDirection
Hello! If you're reading this you probably already know about Gatsby Plugin Image, but if not here's...
- Sourcing local .json files with Gatsby
Hi all, I recently had a discussion with Rahul on Twitter regarding building a Gatsby blog using onl...
- MDX "fold it in"
In this post i'm going to discuss the term "Fold it in" which I think was first coined by ...
- 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 visualiza...
- 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 ...
- 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 gr...
- 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 ...
- 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... Yo...
- 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 su...
- 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 ...
- 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 ag...
- 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 ...
- 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! 🍩...
- 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 ...
- 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 pinn...
- 2020 Top Tweets
This is a bit of a shameless plug but I was curious to see how my Twitter Analytics stacked up for t...
- Silly Site Challenge
BumHub The cheekiest way to explore GitHub 🍑 Visit BumHub Go Go Go Nov 23 2020 I'm at it again 🕺 ...
- 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...
- Storybook - An alternative approach
Hiya 👋, if you like Storybook you've come to the right place. I loooooooove Storybook!! It is in my...
- Gatsby SEO Component
In this post i'm going to explain how to create an Seo component for use in a Gatsby application or ...
- 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 Style Objects
[Styled Components](https://Styled Components.com/) optionally supports writing CSS as JavaScript ob...
- Best Bits 2020 ...
Oh hey there! 👋 Here's a byte-size round up of projects I've Open-sourced, posts and articles I've ...
- React hooks and matter.js
Recently I was creating a Shopify demo application and became a little underwhelmed with the Checkou...
- Everything's a box
In this post i'm going to introduce one of the concepts you can use when developing web pages/apps u...
- React SVG Bubble Slider
You've probably seen reactions before on social media, Twitter, Instagram etc all have ways for user...
- 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 ...
- Roll Your Own Comments
After seeing the following Tweet by Fauna inviting users to take part in the Write With Fauna challe...
- Gatsby CLI Recipes
I recently posted about two new Gatsby Recipes i was working on to help automate the sometimes quite...
- 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-recipe-storybook-ts
In a recent post i introduced Gatsby recipes and talked about a new recipe i created that automates ...
- gatsby-recipe-storybook-js
If you haven't tried Gatsby Recipes yet you really should! You can read a bit more about them here w...
- 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 Lin...
- Officially published
🎉 My work on 100DaysOfGatsby caught the eye of the editorial team and now Gatsby have officially pu...
- MDX Embedded Images
In this post i'm going to show you how to use MDXRenderer to display embedded images in the body of ...
- 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 y...
- SVG Icon Systems
If you're doing this in your React project... just stop it! 🛑 // some-file.js import iconA from './...
- Intersection Observer
Recently at work i was asked to create a scroll-jacking sticky nav and after trying out numerous ope...
- 100DaysOfGatsby - The Roundup
For the past 100 days i've posted every day about the work i've been doing in & around the Gatsb...
- Skin UI
This has been a labour of love but www.skin-ui.com is now alive and kicking. If you're using Theme U...
- gatsby-theme-terminal
This is my second attempt at creating a Gatsby theme and my approach to this build was very differen...
- gatsby-plugin-prop-shop
gatsby-plugin-prop-shop is my newest Gatsby Plugins and it's slightly different to my previous plugi...
- gatsby-mdx-embed
Let's back track for just a second... What is MDX? To quote the creators; MDX is an authorable form...
- 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 wr...
- gatsby-remark-grid-system
At the time of writing this post gatsby-remark-grid-system is still very much experimental, it is fu...
- gatsby-mdx-routes
This little plugin was as a result of seeing this tweet <Tweet id='https://twitter.com/FezVrasta/...
- gatsby-remark-sticky-table
At the time of writing this post gatsby-remark-sticky-table is still very much experimental, it is f...
- 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 ...