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 TailwindIn 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 TailwindIf 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 AstroIn 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.jsIn this guide you should find everything you need to get started with CockroachDB, pg-promise and Ne...
My Cockroach Labs Interview AppHello 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 ReactHello. 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 GatsbyHey 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 SharpHey 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 SSRIn 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 GatsbyIn 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 PackagesHey, 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 ReactAhoy! 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 RendererIn this post I'll explain how I use the excellent {" "} Prism React Renderer by {" &q...
How to use Gatsby's Head API with MDXHi 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 AnalyticsIn this post I'll be explaining how to add Google's "new" Google Analytics Property (GA4) ...
Using a useLocalStorage hook and rehydrationRecently I ran into an issue using the useLocalStorage hook from useHooks.com -- which is brills by ...
Gatsby FuncJam 21Groovy Analytics, It's gonna be something to do with Google Analytics 🕺 Visit Groovy Analytics Go G...
How to "fix" Gatsby slow local build timesAhoy, 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 createSchemaCustomizationHi 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 sourceNodesIn 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 APIThey're here! Gatsby Serverless Functions are here! They're finally here! 💝 -- And I couldn't be mo...
Gatsby Plugin Image: withArtDirectionHello! If you're reading this you probably already know about Gatsby Plugin Image, but if not here's...
Sourcing local .json files with GatsbyHi 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.cssAhoy M'Hartys! ⚓ in this post i'm going to demonstrate how you can create Accessible Data visualiza...
Gatsby File System Route API: Multiple Source MDXIn this post I'm going to provide an example of how to use Gatsby's File System Route API to source ...
Understanding Theme UIIf 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 HacksIn this post i'm going to explain some of my Theme UI "hacks"... to be honest they're not ...
Understanding Theme UI: 5 - Media QueriesIn this post i'm going to explain how Theme UI's Responsive Values work and to get us started... Yo...
Understanding Theme UI: 4 - ScalesIn 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 - ComponentsIn 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 componentIn 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 PragmaIn 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 blogCharting 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 blogAfter 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 TweetsThis is a bit of a shameless plug but I was curious to see how my Twitter Analytics stacked up for t...
Silly Site ChallengeBumHub 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 blogApologies in advance for the rather long-winded blog title but as it suggests in this post i'm going...
Storybook - An alternative approachHiya 👋, if you like Storybook you've come to the right place. I loooooooove Storybook!! It is in my...
Gatsby SEO ComponentIn this post i'm going to explain how to create an Seo component for use in a Gatsby application or ...
Styled Components Responsive Array SyntaxIn 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.jsRecently I was creating a Shopify demo application and became a little underwhelmed with the Checkou...
Everything's a boxIn this post i'm going to introduce one of the concepts you can use when developing web pages/apps u...
React SVG Bubble SliderYou've probably seen reactions before on social media, Twitter, Instagram etc all have ways for user...
First Ever DonationI'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 CommentsAfter seeing the following Tweet by Fauna inviting users to take part in the Write With Fauna challe...
Gatsby CLI RecipesI recently posted about two new Gatsby Recipes i was working on to help automate the sometimes quite...
MDX Embed Intersection ObserverIf you're not familiar with my plugin gatsby-mdx-embed have a read of this post ... or to summarize....
gatsby-recipe-storybook-tsIn a recent post i introduced Gatsby recipes and talked about a new recipe i created that automates ...
gatsby-recipe-storybook-jsIf you haven't tried Gatsby Recipes yet you really should! You can read a bit more about them here w...
TypeScript Theme UI LinkIn 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 ImagesIn this post i'm going to show you how to use MDXRenderer to display embedded images in the body of ...
Gatsby or Theme UI LinkI know this has tripped me up on more than one occasion and if you're using Theme UI components in y...
SVG Icon SystemsIf you're doing this in your React project... just stop it! 🛑 // some-file.js import iconA from './...
Intersection ObserverRecently at work i was asked to create a scroll-jacking sticky nav and after trying out numerous ope...
100DaysOfGatsby - The RoundupFor the past 100 days i've posted every day about the work i've been doing in & around the Gatsb...
Skin UIThis has been a labour of love but www.skin-ui.com is now alive and kicking. If you're using Theme U...
gatsby-theme-terminalThis is my second attempt at creating a Gatsby theme and my approach to this build was very differen...
gatsby-plugin-prop-shopgatsby-plugin-prop-shop is my newest Gatsby Plugins and it's slightly different to my previous plugi...
gatsby-mdx-embedLet's back track for just a second... What is MDX? To quote the creators; MDX is an authorable form...
100DaysOfGatsbyDay 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-systemAt the time of writing this post gatsby-remark-grid-system is still very much experimental, it is fu...
gatsby-mdx-routesThis little plugin was as a result of seeing this tweet <Tweet id='https://twitter.com/FezVrasta/...
gatsby-remark-sticky-tableAt the time of writing this post gatsby-remark-sticky-table is still very much experimental, it is f...
gatsby-theme-gatstatsBoom! after months of work my theme is actually live! If you like data viz and want a blog that's a ...