Best Bits 2020 ...

Date published: 5-Aug-2020
Date modified: 27-Oct-2020
3 min read / 715 words
Author: Paul Scanlon

React
Gatsby
Gatsby Cloud
JavaScript
TypeScript
Shopify
styled-components
Theme UI
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. 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

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

3. 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 180 stars on GitHub 🎉

View on GitHub

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

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


6. Successful Open-source

I've released a lot of Open-source projects this year, to some extent I'm almost drowning in them but gatsby-mdx-embed has really made it worth it. It's been adopted by a number of high profile users in the community, has received praise from number of Gatsby employees and once even earned me £9 on Ko-fi 🤑

View on GitHub

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

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

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

If you've enjoyed this post I'd love to hear from you: @PaulieScanlon