•
Blog
Running for developers
If you've got the best intentions to make running part of your life, here's everything I absorbed to go from 0-100 (miles)
I'm Simeon, Principal Educator @ Sanity.io, running content ops for Sanity Learn.
I made a Tailwind CSS Palette Generator that people like.
🇦🇺 in 🇬🇧
•
Blog
If you've got the best intentions to make running part of your life, here's everything I absorbed to go from 0-100 (miles)
Learn how anyone can use an AI-powered code editor to build a Sanity Studio with best-practice code and the front end of your choice. Complete this course on Sanity Learn for a shareable certificate https://www.sanity.io/learn/course/code-with-ai Download Cursor https://www.cursor.com/ Download Superwhisper https://superwhisper.com/ 00:00 Introduction 01:09 What makes a good prompt? 03:47 Cursor and other code editors 06:06 Prompting with Ask and Agent 10:44 Speaking prompts 11:45 Rules for enforcing best practices 16:05 Creating placeholder content 18:03 Prompting any front end 24:51 Closing thoughts
With its all-code configuration, AI tools make Sanity a perfect choice as a content backend, and developers of varying levels of experience—including those with none at all—greatly benefit from AI tooling. Do it the right way for the best results, take on more ambitious projects, lower the barrier to entry and create happier content authors.
The simplified example for useOptimistic in the React documentation is problematic in three ways. To better understand how the hook works, here’s how I'd move the demo into a Next.js 15 app, convert it to TypeScript, style it with Tailwind CSS, fix the UX problems, and store the submitted content in the Sanity Content Lake. 00:00 React docs example walkthrough 01:39 Create Next.js app 02:26 Convert example to TypeScript 06:55 Style with Tailwind CSS 08:42 Fix 1: Input maintains value 10:38 Fix 2: Filter out duplicate keys 16:01 Fix 3: Write messages to Sanity 16:37 Create Sanity Studio app 17:26 Create schema types 19:37 TypeGen, next-sanity, GROQ and Sanity Client 23:53 Dynamic routes for fetching Sanity content 27:21 Swap local state for Sanity Content 28:50 Write to Sanity from Next.js 34:10 Watching real-time mutations
YouTube
Write "comments" as Sanity documents from a Next.js 15 application into the Content Lake. Using the Tailwind UI Radiant Blog template and writing "optimistic" updates with React 19. This video shows writing text comments first and then configuring the Portable Text Editor on the front end to write rich text and block content to the Content Lake in Sanity. - Portable Text Editor: https://www.portabletext.org/ - Tailwind UI Radiant Blog: https://tailwindui.com/templates/radiant - useOptimistic: https://react.dev/reference/react/useOptimistic#optimistically-updating-with-forms 00:00 What we'll build 00:29 Introducing the Portable Text Editor 02:22 The stack we're using 03:15 Creating plain-text comments 11:17 Setup the Portable Text Editor 17:37 Updating the Form Action 20:26 Rendering Portable Text 22:05 The final product
I played the role of advisor on behalf of Sanity as the sponsor for this episode of Jason Lengstorf's Web Dev Challenge series.
YouTube
A quick demo of a component I created called FixedWidthConditional to make an element hold the width of its longest child, while switching the visibility. Similar to @WesBos's method shown here, but in React and Tailwind CSS https://www.youtube.com/watch?v=8327_1PINWI Blog post explaining this method of styling with Tailwind CSS https://www.simeongriggs.dev/tailwindcss-conditional-class-names-the-right-way
Blog
Letting people know what you have done for them is so much more impressive than how you did it.
A lightning version covering the history of rich text editing all the way through to structuring content in modern applications.
I wrote, produced and appeared in this talk about building applications that don't need the refresh button to render real-time updates at a massive scale.
Blog
Style elements based on the state of their DOM attributes—instead of template logic—for more easily debuggable styles.
Why it's best to use arrays over single references in your Sanity Studio schema types. Your content model might not need it now, but you're going to need an array eventually. Trust me, and your future self will thank you! Read the Opinionated Guide to Sanity Studio: https://www.sanity.io/guides/an-opinionated-guide-to-sanity-studio 00:00 Introduction 00:45 Reference Use Case 01:28 Schema Configuration 02:19 Validation Rules 03:21 GROQ Tips 05:06 Conclusion
A string field with predefined values can often be a far better choice for the future of your Sanity project than a single true/false switch. Learn from my real-life examples and see if you agree or have thoughts to share! 00:00 Introduction 00:44 Avoiding Booleans 01:38 Live Example 05:04 Boolean Issues 07:03 String Solution 10:14 Final Thoughts 13:24 Conclusion Read my opinionated guide to Sanity Studio: https://www.sanity.io/guides/an-opinionated-guide-to-sanity-studio
Blog
The job of a framework is to render HTML so it makes sense to optionally bundle a way to style it with CSS
Creating a high performance web application for fast loading depends on caching. Learn how to implement a caching strategy you can understand, debug and depend on.
The ultimate upgrade for content authors is to have absolute confidence in the impact of their work before they press publish – as well as the tools to rapidly find and update even the most minor pieces of content.
Combine Sanity and Next.js and deploy to Vercel via GitHub to get the fundamentals right. Powering a fast and collaborative development and content editing experience.
No matter where your content is, Sanity provides options to ensure its smooth transfer to the Content Lake. These are general strategies for developers migrating content.
Learn how to assemble the right team, preempt pitfalls, and move your legacy content to a modern, fast, and structured content platform to take the stress and risk out of even the most ambitious re-platforming project.
Blog
In any sufficiently crowded market, there is always the opportunity to be the absolute best at your thing.
Sanity Studio is an incredibly flexible tool with near limitless customisation. Here's how I use it.
•
A catalogue of products is only a small part of the story. Empower content creators to embellish product data with rich product display pages and dynamic collection filters that tell a complete picture of your offering.
•
Blog
A glimpse into the context through which I create educational content and tutorials.
Lay the perfect foundation for your team's first dip in the Content Lake. Assemble your team of subject matter experts and draw up plans to uncover your project's content model.
talk
Components-first thinking can trap content — but it doesn't have to be that way. Structured content can be composable and reusable, delivering more personalised experiences. In his speaker session at Future Commerce Finland, Simeon details how to embrace content-first flexibility and shift your thinking from components to content in the composable era.
Compose a powerful, reusable migration script to convert live data into Studio-ready structured content with references and assets. This module focuses on WordPress' REST API but could be adapted to any data source.
Blog
You might not need a library to query GraphQL in Remix
It can be useful for testing plugins, front ends, or other integrations to have a Sanity Studio populated with fake content.
•
talk
Photo by Eddie Jaoude
Setup "Live by Default" fetches and interactive live preview with Presentation in Sanity Studio
•
Make repetitive content creation tasks a breeze by supplying content creators with buttons to populate complex fields.
•
Summarise form progression by decorating the entire editing form for a document with a component loaded at the root level.
•
Object types use a preview property to display contextual information about an item when they are inside of an array; customizing the preview component can make them even more useful for content creators.
•
Save time going in-and-out of modals by moving some light interactivity to array items.
•
Delight your content creators with intelligent inputs for more complex data structures
•
Give content creators quick access to valid values by replacing the default number field input with a list of options.
•
Go beyond a plain radio list of inputs by giving authors more contextually useful buttons to select values from.
•
Take the guesswork out of creating fields with correct values and automate content creation for authors.
•
Go beyond the default configuration. Learn what separates an average Sanity Studio from a fully-configured, content creation powerhouse that authors will love.
In this guide, you’ll see how Sanity separates organizations, projects, datasets, and members by working through a hypothetical example of a growing company that can expand its content model as they grow – without needing a complete overhaul.
•
Blog
Creating individual meta images can be time-consuming work. Fortunately, creating on-brand and dynamic images for link previews has never been easier.
Blog
Vercel offers simple, privacy-focused analytics and web vitals data. These can be instantly set up on Next.js and other frameworks. It's a little extra work for your Remix app, but worth it.
Blog
In a content-editable website project, the people involved are two separate and yet equally important groups. The developers who build websites, and the authors that populate them with content. These are their stories.
Blog
I've rebuilt this blog with the same design almost half a dozen times. Here's what I learned doing it again.
talk
Go beyond writing data queries – filter, add functions, reshape and transform the responses. Get familiar with GROQ, the query language for Sanity data, webhooks and roles.
Get a top-level understanding of the Sanity Studio configuration API to embed a fully configured and near-infinitely customisable content editing interface into any React application. Then write a GROQ query and present data in a front-end.
•
Blog
Visually, components are unique, flexible units to compose complete layouts. For content, they can trap reusable data into single-use decorations.
•
Blog
We don’t have to sacrifice the awesomeness of GROQ for the safety of TypeScript. With Zod, we can have both.
talk
i18n isn't easy, but with careful planning of your content model I'll show you how to structure the setup, authoring, and querying of localized content. Covering whole-or-part translated documents, the difference between market and language-specific content, ways to author that in a CMS like Sanity, and ways to query for it on frontends like Next.js and Remix.
i18n isn't easy, but with careful planning of your content model I'll show you how to structure the setup, authoring, and querying of localized content. Covering whole-or-part translated documents, the difference between market and language-specific content, ways to author that in a CMS like Sanity, and ways to query for it on frontends like Next.js and Remix.
Blog
It can be tough to identify use cases for something like reduce() until you’re already comfortable using it. Consider this a gentle entry point on your path to advanced use of the Swiss Army Knife of Array Methods.
Create common taxonomy schemas like Categories and Tags with parent/child relationships
•
Blog
Almost all forms of communication are an "ask" of some kind. Even if you’re not asking for some "thing". At a minimum you're asking the other party for their time.
Years ago you could hit "publish" on your blog post and it would be instantly available online. For a while the developer community took a detour to SSG requiring a whole rebuild of the site to fix a typo. Remix is bringing the fast iteration back.
YouTube
Try it out! https://tailwind.simeongriggs.dev Read the blog: https://www.simeongriggs.dev/using-the-tailwind-css-palette-generator-and-api A walkthrough of why I created this Palette Generator and a basic guide on how to use it.
Blog
Creating hand-tooled 10-color Palettes can be tough. Get a head start by rapidly generating a full suite of Swatches from a single base value.
Blog
We're closing in on the end of 2021 and I'm as excited now about building websites as I've been in ~25 years.
Combine Sanity's blazing-fast CDN with Remix's cached at the edge pages.
•
Sometimes the content you need to reference lives outside of Sanity
•
talk
How to use incoming country headers on an incoming request to personalise a GROQ query and display localised content to visitors.
Setup interactive live preview with Presentation in a Next.js pages router application
•
Get the best of both worlds. Tailwind-styled typography and Portable Text's markup-and-components structure.
•
Blog
Hard coding document slugs in Sanity.io with validation rules can save you a lot of double-handling on both front and back end.
Blog
To a developer, recipes represent such a complex and delicious content model. So why do so many recipe websites leave a bad taste? Let's explore cooking up a more ideal version.
Blog
Headless CMS's are refreshingly "set and forget". But if the Risk Management Department needs to be satiated by having your own backup solution, it's easy to do.
Blog
If you're relatively new to React, Hooks aren't new, they simply exist. And to understand the useEffect() hook is to almost entirely understand React Components.
Blog
Publishing extensions is so much easier than copy/pasting project-to-project.
Blog
For the first time ever, WordPress has strong opinions about how your website is designed – making it a bad choice as a generic content management system.
Blog
Setting up the most popular content editing pattern for the component-based nature of front end frameworks and modern website design.
•
Blog
Gatsby Cloud-like live previewing for your Sanity website, but low cost with unlimited edits.