July 20, 2020 • 2 Min
Geocoding is the process of turning a regular address into latitude and longtitude coordinates that can be used in a mapping application like Google Maps or LeafletJS . I am going to walk through setting up a SANITY.io schema, querying the SANITY.io API via gatsby-node.js , passing the query…
July 18, 2020 • 1 Min
A great feature of SANITY.io is the ability to add field validation to schema types. This can ensure data conforms to specific patterns, e.g. a ZIP code is actually a valid ZIP code or an email field is a valid email. This brief article covers just a few of the ways you can validate a field, I…
June 08, 2020 • 2 Min
I am a big fan of using Theme UI to style Gatsby projects. For me one of the standout features is the less well known - but very powerful - API called variants . Variants allow you, as a theme developer, to enable a happy path for users to customize their visual design without having to shadow…
May 21, 2020 • 1 Min
RedwoodJS is a new javascript framework bringing the frontend and the backend together in one incredible fullstack package. They have a great tutorial that gives you a good feel for what is possible with Redwood. While I was completing the tutorial I got curious about using Theme UI with…
April 27, 2020 • 1 Min
When building a Gatsby theme it is best practice to separate data queries from presentation components. This separation of concerns enables a happy path for component shadowing in the finished production site. Keep in mind that to do this you also need to control the page creation process in…
March 25, 2020 • 4 Min
Combining Theme UI with Gatsby has been a huge productivity win for me; design tokens, quick mobile styles, a robust component library and more. I am building every new project using Theme UI and here are 10 reasons I think you should consider it too. Consistent design system At the heart of…
March 06, 2020 • 3 Min
Before you read. I write from a place of significant social privilege and my experiences are not reflective of everyone's experiences. I work full time as a mental health therapist and have a Masters in Social Work degree. References are at the end. I was at a mental health training recently where…
February 24, 2020 • 3 Min
You have a great Gatsby site! You followed all the tutorials and it is blazing fast. But wait, you need a sub-menu (or dropdown menu) in your navigation? It is not as easy as it sounds if you want to keep a modern component architecture and use things like the javascript .map method. This is a…
February 08, 2020 • 1 Min
Gatsby, SANITY.io and Theme UI are quickly becoming my go-to stack of development tools. Gatsby on the frontend. SANITY on the backend. Theme UI as the design system interface. Combining these three tools has been fairly smooth, but it took me a while to realize I could link Theme UI design…
February 01, 2020 • 2 Min
The ability to define options for Gatsby themes unlocks a powerful set of development opportunities. You may have already used an option like contentPath before but there is so much more you can do! Before you go any further, you need to pause and read Chris Biscardi's excellent post about…
January 28, 2020 • 2 Min
This theme has been depreciated, instead use gatsby-theme-catalyst-hydrogen , which is an updated version of this theme with an improved API. There is a complete tutorial for this updated theme you can follow. This Gatsby theme is for freelance writers and journalists who want a fast, easy to…
January 12, 2020 • 2 Min
As I worked on building themes for Gatsby I went through a number of different iterations trying to find an approach that would allow for easy composition and clear separation of concerns. The lightbulb went off for me when I read John Otander’s blog post on the topic of latent component shadowing…
January 08, 2020 • 1 Min
Theme UI provides a great pattern for implementing dark mode on your Gatsby website. If your site is primarily text, this can be as straightforward as changing a few colors in your theme and off you go. Most websites are not so minimal and include images, icons, background patterns, etc. If you…
January 01, 2020 • 2 Min
Gatsby Theme Catalyst v1.0 has been launched along with a new website and docs . Some of the content in this post is outdated. Gatsby Theme Catalyst is my opinionated view of a modern tech stack relying on a combination of Gatsby , MDX , and Theme UI . I built this series of themes to…
