Best Bits 2020 ...

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

Oh hey there! 👋

Here’s a byte-size round up of projects I’ve Open-sourced, posts and articles I’ve written and contracts I’ve completed so far this year.

1. Hacker News Front Page and more…

I recently wrote this blog post: Use Netlify Functions and the Twitter API v2 as a CMS for your Gatsby blog which at the time didn’t think would be of much interest to anyone. I was just curious to explore Netlify Functions and wanted to solve a small problem I was having with my digital footprint. However, just for kicks I thought i’d try and promote this post. I’ve never posted on Hacker News before but a few hours after I posted a friend messaged me to say my post had made the front page. Not bad for a first timer!

Then… a couple of days later this happened

2. Successful Open-source

Following on from a pretty successful start with gatsby-mdx-embed the move to the mono repo setup has now really paid off. MDX Embed can be used in so many ways that tying it to just Gatsby does kind of sell it short of it’s full potential.

One such addition to the package restructure is the Storybook addon and i’m pleased to say MDX Embed now features in the Storybook addons catalog page

… and here’s a few other posts i’ve written that have ben published around the interwebs

• Storybook - Medium
• Gatsby - A More ‘Polite’ MDX Embed Plugin

3. First GitHub sponsor!

I’ve been slogging away with Open-source for a while and it’s taken around 10 Open-source projects for one of them to catch on.

MDX Embed really is my jewel in the crown and as of 19-12-200 i’ve picked up my first official GitHub sponsor. Probably not quite ready to go Yacht shopping but it’s good know that my work is becoming recognized, appreciated and now finally remunerated👇

4. SSR and Jamstack for the win!

Gatsby recently announced incremental builds and mono repo support so to put Gatsby Cloud through it’s paces I created a multi-site, multi-brand mono repo + Shopify demo application and accompanying article for Gatsby. The demo application uses gatsby-source-shopify to source Shopify data at build time and lets Gatsby Cloud handle the re-build via a Webhook. It is as you’d imagine still blazing fast ⚡

Read article

5. Add Playful Animated SVG Reactions to a Gatsby Blog

I recently Open-sourced react-svg-bubble-slider to provide a fun way to add reactions to Gatsby blog posts. It was one of the most difficult UI components I’ve ever created! A lot of effort went into making it fully keyboard accessible and joy of joys Jason Lengstorf at Netlify helped promote it by publishing an article I wrote on the Netlify blog 😊

Read article

6. A Zero Component Theme for Developers

I released gatsby-theme-terminal in early 2020, it was my second experiment with Gatsby themes and attempts to provide a fully theme-able component library… which zero components. Yeah, I know, get your head around that one! I feel this is an advanced approach to building themes and interest in the project has been steadily growing and it’s recently exceed 200 stars on GitHub 🎉

View on GitHub

7. Full Stack Gatsby App

I hear a lot of things about Gatsby being a tool to build blogs but it can also create full stack React applications. As a fan of Theme UI and being aware the barrier to entry can be quite high if you’re coming for CSS 🤢 I deiced to create Skin UI, a CSS-in-Js Theme UI editor which allows you to create, edit, save and share themes all from the browser! 💥 I don’t claim to be a designer but I’m rather proud of this one!

Visit Skin UI

8. First commercial Gatsby build

I have to be honest, I did struggle to blog every day for 100 days during the 100 Days Of Gatsby 100 Days Of Gatsby challenge but my constant Tweets and posts did catch the attention of the lead developer at Manscaped who got in touch and I was hired to help re-build manscaped.com (new site not live yet). It was great to finally use Gatsby and Theme UI in a commercial project and while the world was on lockdown I was crafting beautiful UI’s to increase sales of products to help men groom their testicles 😲

9. First article officially published

As mentioned above I blogged every day for 100 days, that’s over 27’000 words for the 100 Days Of Gatsby challenge and it was really brills to receive recognition by the Gatsby team who reached out and asked me to write up a “round up” article !

Read article

10. Published on CSS-Tricks

After the highs of writing for Gatsby I took on a second article, this time for Fauna. It was supposed to be a simple post about using GraphQL and Netlify functions but turned in to something much more complex. To demonstrate how it works I created a full stack demo application

to accompany the post with user authentication, a moderation queue and commenting system. Fauna liked it so much they used their sponsored account to post it on CSS-Tricks 🕺

Read article

11. Part of the CLI

As a Gatsby enthusiast as soon as Recipes launched I got stuck in and as much as I love Storybook and use it in all my personal and commercial projects (how else would you develop weapons grade UI’s 🤷‍♂️) it is a bit tricky to configure with Gatsby.

I’ve open-sourced two Recipes to solve the problems you’ll face when using Storybook with JavaScript and TypeScript and both have made it in to the official Gatsby CLI 💯. I also created another article for Gatsby discussing what Recipes are, how you can write your own and some musings I had about future workflows.

Read article