On a recent client project I had to implement basic search functionality. We needed something basic and good-enough, but we did not need Google level search optimization. This article walks you through building out a simpler search input using Next.js, Sanity, and the GROQ query language.
In an era defined by artificial intelligence, we are witnessing the rise of ideas-developers who blend creativity, technical knowledge, and human skills. While coding becomes more democratized through AI, the true value lies in context-aware thinking and innovative solutions.
Charts, graphs, and data visualizations are an important tool when presenting data or trying to explain a complex topic more clearly. They are widely used in websites, apps, and other digital media. But creating these charts is not always easy with lots of potential gotcha moments.
Automating the creation of custom open graph images opens up interesting business use cases from personalized conference tickets to shareable user profiles and more. undamentally automated OG images unlock personalized information sharing at scale and make it easier to have great SEO.
Next.js 12 introduced middleware for handling logic at the CDN level (sometimes called an edge function) before a page loads. This is very powerful and unlocks the potential for static pages to have limited server-side logic. A compelling use case is advanced internationalization and localization.
Gatsby is a popular static site generator that supports themes. Themes can save time, ensure consistency, and be customized to fit your needs. However, they have a learning curve, limited flexibility, and require maintenance if maintained by someone else.
If you're using Sanity as your content management system, you can use conditional fields to create better links for your website. By doing so, you can streamline your content creation process and make it easier for your team to manage your website. In this article, we'll show you how to use conditional fields in Sanity to create dynamic links that change based on the content of your website.
Changesets can help you manage your project's changelog more efficiently. With changesets, you can keep track of changes, maintain a clear changelog, and simplify your development process. In this article, we'll show you how to use changesets to manage your changelog and streamline your development workflow.
RedwoodJS is a popular full-stack JavaScript framework. While it has many benefits, it also has some limitations. In this article, we'll explore the pros and cons of using RedwoodJS and provide you with insights from an experienced developer's reflection on using it.
Setting up a staging website with Sanity can streamline your content creation process and help you test changes to your website before publishing them live. In this article, we'll show you how to set up a staging website with Sanity, a popular headless CMS.
CSS can be tricky to manage in a JavaScript world, but it's an important skill for frontend developers to master. In this article, we'll share our notes from the CSS for JS course and provide you with tips and tricks to improve your CSS skills and make your code more maintainable.
Adding global scripts and stylesheets to the head of your Gatsby website can improve website performance and make your code more maintainable. In this article, we'll show you how to add global scripts and stylesheets to your Gatsby website and provide you with best practices for optimizing website performance.
Advanced mapping with Gatsby and React Leaflet can add a new dimension to your website and make it more engaging for your users. In this article, we'll show you how to create advanced maps with Gatsby and React Leaflet, including adding markers, popups, and custom tiles to your maps.
Gatsby Theme Catalyst is a popular theme for Gatsby websites that can help you streamline your website development process and make your website more efficient and maintainable. In this article, we'll explore the latest updates and improvements to the theme in 2021 and show you how to use it effectively.
Adding a load more button and infinite scroll to your Gatsby website can improve website performance and provide a better user experience. In this article, we'll show you how to use React hooks and GraphQL queries to dynamically load data and add a load more button and infinite scroll to your Gatsby website.
Setting up form submission on your Gatsby website can be challenging, but it's essential for collecting user data and improving your website's functionality. In this article, we'll show you how to set up form submission using Sanity, Netlify, and React Hook Form and provide you with best practices for optimizing website performance and making your code more maintainable.
Setting up a Gatsby themes monorepo can streamline your theme development process and make managing multiple themes easier. In this article, we'll show you how to set up a Gatsby themes monorepo and provide you with best practices for organizing your code, sharing dependencies, and making updates more efficient.
Integrating geocoding into your Gatsby website can provide valuable location-based information to your users and make your website more interactive. In this article, we'll show you how to integrate geocoding into your Gatsby website using Sanity and the OpenCage Geocoder API. We'll also teach you how to use React Leaflet to display geocoded data and make your website more interactive.
Validation is a critical aspect of any content management system, and Sanity.io provides a robust set of tools for ensuring your content meets your project's standards. In this article, we'll show you some handy validation snippets for Sanity.io that will make it easier to validate your data and prevent errors. Learn how to use these snippets and make sure your content is always up to par.
Using consistent design elements across your Gatsby website can be challenging, but Theme UI variants make it easy. In this article, we'll explore how to use Theme UI variants to create consistent styles and design elements. We'll show you how to simplify your CSS and make it easier to maintain your website's design over time.
Creating a consistent design system across your RedwoodJS app can be challenging, but Theme UI can help. In this article, we'll explore how to use Theme UI with RedwoodJS to create a consistent design system. We'll show you how to configure Theme UI in your RedwoodJS app and use it to create reusable design components.
Are you considering using Theme UI in your Gatsby project, but not sure if it's worth it? In this article, we'll give you 10 reasons why you should use Theme UI for styling and design. We'll show you how Theme UI can make your Gatsby development experience more efficient and enjoyable.
Imposter syndrome is a common experience among many professionals, and it can be debilitating. But what if we thought about it differently? In this article, we'll explore how changing our perspective on imposter syndrome can help us embrace it and use it to our advantage.
Are you looking to add a sub-menu to your Gatsby website? In this tutorial, we'll walk you through step-by-step on how to create a dropdown menu using React hooks. We'll also show you how to make the sub-menu accessible and responsive.
Are you looking to use Theme UI with Sanity? In this tutorial, we'll show you how to set up Theme UI and Sanity, and how to use Theme UI to style your Sanity content. We'll also walk you through creating a custom Theme UI preset for your Sanity project.
Gatsby themes allow for flexible, customizable site development. In this article, we'll dive into options in Gatsby themes and explore how to use them to create flexible, configurable themes. We'll also provide several examples of using options in Gatsby themes and show you how to pass options to theme components.
Gatsby Theme Catalyst Writer is a powerful and flexible theme for building a blog or personal website. In this tutorial, we'll show you how to get started with the theme, including how to install and customize it to fit your needs. We'll also explore some of the key features of the theme and how to use them to create a stunning website.
Latent component shadowing is a powerful technique for modifying components in a Gatsby theme without needing to modify the theme's code directly. In this article, we'll explain what latent component shadowing is, how it works, and how to use it in your Gatsby themes. We'll also cover some best practices for using latent component shadowing effectively, and explore some common use cases.
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 are lucky, these will all look fine in dark mode but odds are they won’t.
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 accelerate the development process and have a modular approach for my freelance work. As a side benefit building this project has been a great way to learn exciting new technologies including React and GraphQL.