Blog Posts

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

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

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

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

• Tailwind

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• JavaScript
• React

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
• Gatsby Serverless Functions
• Google Analytics

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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
• Gatsby Serverless Functions
• three.js
• react-three-fiber
• JavaScript
• TypeScript
• Theme UI
• GitHub REST

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 ...

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

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

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

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

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

[Styled Components](https://Styled Components.com/) optionally supports writing CSS as JavaScript objects instead of str...

• React
• JavaScript
• Styled Components

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

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

• React
• JavaScript
• matter.js

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

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

• React
• GSAP
• SVG

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

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

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

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

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

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

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

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

• Gatsby

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

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

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

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

• React
• JavaScript

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

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

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

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

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

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

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

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

• Gatsby
• Gatsby Plugins
• MDX

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

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