Blog posts
These days I'm mostly writing for the Cockroach Labs Blog, but every now and then I'll write about more general React or JavaScript topics. You can find those posts here.
![Getting Started With CockroachDB, pg-promise and Next.js]()
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…
![My Cockroach Labs Interview App]()
My Cockroach Labs Interview App
Hello there! In November 2022 I started a new role at Cockroach Labs . I'm now what we're currently…
![How to Create Custom Marketo Forms With React]()
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…
![How to use React's Context API with Gatsby]()
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"]()
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]()
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…
![How to use Serverless Functions with SSR]()
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]()
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…
![MDX 2 Breaking changes and gatsby-plugin-mdx v4 (Slug)]()
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…
![MDX 2 Breaking changes and gatsby-plugin-mdx v4 (Content)]()
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…
![MDX and ESM rehype Packages]()
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…
![How to use Utterances with React]()
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…
![Syntax highlighting with Gatsby, MDX, Tailwind and Prism React Renderer]()
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…
![How to use Gatsby's Head API with MDX]()
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…
![How to use Gatsby's Script API with Google Analytics]()
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…
![Using a useLocalStorage hook and rehydration]()
Using a useLocalStorage hook and rehydration
Recently I ran into an issue using the useLocalStorage hook from useHooks.com -- which is brills…
![Gatsby FuncJam 21]()
Gatsby FuncJam 21
Groovy Analytics, It's gonna be something to do with Google Analytics 🕺 Visit Groovy Analytics Go…
![How to "fix" Gatsby slow local build times]()
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…
![Modify Gatsby's GraphQL data types using createSchemaCustomization]()
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…
![Add data to Gatsby's Data layer using sourceNodes]()
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…
![Using Gatsby Serverless Functions as an abstracted API]()
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…
![Gatsby Plugin Image: withArtDirection]()
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]()
Sourcing local .json files with Gatsby
Hi all, I recently had a discussion with Rahul on Twitter regarding building a Gatsby blog using…
![MDX "fold it in"]()
MDX "fold it in"
In this post i'm going to discuss the term "Fold it in" which I think was first coined by spences…
![Gatsby File System Route API: Multiple Source MDX]()
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…
![Understanding Theme UI]()
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…
![Understanding Theme UI: 6 - The Hacks]()
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…
![Understanding Theme UI: 5 - Media Queries]()
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…
![Understanding Theme UI: 4 - Scales]()
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…
![Understanding Theme UI: 3 - Components]()
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…
![Understanding Theme UI: 2 - Styled component]()
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…
![Understanding Theme UI: 1 - Jsx Pragma]()
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…
![Create an SVG Doughnut Chart from scratch for your Gatsby blog]()
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]()
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…
![Best Bits 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…
![2020 Top Tweets]()
2020 Top Tweets
This is a bit of a shameless plug but I was curious to see how my Twitter Analytics stacked up for…
![Silly Site Challenge]()
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]()
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]()
Storybook - An alternative approach
Hiya 👋, if you like Storybook you've come to the right place. I loooooooove Storybook!! It is in…
![Gatsby SEO Component]()
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]()
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 Style Objects
Styled Components (https://Styled Components.com/) optionally supports writing CSS as JavaScript…
![Best Bits 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…
![React hooks and matter.js]()
React hooks and matter.js
Recently I was creating a Shopify demo application and became a little underwhelmed with the…
![Everything's a box]()
Everything's a box
In this post i'm going to introduce one of the concepts you can use when developing web pages/apps…
![React SVG Bubble Slider]()
React SVG Bubble Slider
You've probably seen reactions before on social media, Twitter, Instagram etc all have ways for…
![First Ever Donation]()
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…
![Roll Your Own Comments]()
Roll Your Own Comments
After seeing the following Tweet by Fauna inviting users to take part in the Write With Fauna…
![Gatsby CLI Recipes]()
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]()
MDX Embed Intersection Observer
If you're not familiar with my plugin gatsby-mdx-embed have a read of this post ... or to…
![gatsby-recipe-storybook-ts]()
gatsby-recipe-storybook-ts
In a recent post i introduced Gatsby recipes and talked about a new recipe i created that…
![gatsby-recipe-storybook-js]()
gatsby-recipe-storybook-js
If you haven't tried Gatsby Recipes yet you really should! You can read a bit more about them here…
![TypeScript Theme UI Link]()
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…
![Officially published]()
Officially published
🎉 My work on 100DaysOfGatsby caught the eye of the editorial team and now Gatsby have officially…
![MDX Embedded Images]()
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]()
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…
![SVG Icon Systems]()
SVG Icon Systems
If you're doing this in your React project... just stop it! 🛑 But why is that bad? As you're…
![Intersection Observer]()
Intersection Observer
Recently at work i was asked to create a scroll-jacking sticky nav and after trying out numerous…
![100DaysOfGatsby - The Roundup]()
100DaysOfGatsby - The Roundup
For the past 100 days i've posted every day about the work i've been doing in & around the…
![Skin UI]()
Skin UI
This has been a labour of love but www.skin-ui.com is now alive and kicking. If you're using Theme…
![gatsby-theme-terminal]()
gatsby-theme-terminal
This is my second attempt at creating a Gatsby theme and my approach to this build was very…
![gatsby-plugin-prop-shop]()
gatsby-plugin-prop-shop
gatsby-plugin-prop-shop is my newest Gatsby Plugins and it's slightly different to my previous…
![gatsby-mdx-embed]()
gatsby-mdx-embed
Let's back track for just a second... What is MDX ? To quote the creators; MDX is an authorable…
![100DaysOfGatsby]()
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…
![gatsby-remark-grid-system]()
gatsby-remark-grid-system
At the time of writing this post gatsby-remark-grid-system is still very much experimental, it is…
![gatsby-mdx-routes]()
gatsby-mdx-routes
This little plugin was as a result of seeing this tweet where Federico Zivolo was asking how to…
![gatsby-remark-sticky-table]()
gatsby-remark-sticky-table
At the time of writing this post gatsby-remark-sticky-table is still very much experimental, it is…
![gatsby-theme-gatstats]()
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…
