Gatsby 4x4: Four mini-talks about Gatsby 4

Written by Angelo Ashmore in Engineering on October 05,2021

Gatsby 4x4 is a collection of four mini-talks presented by Prismic at Jamstack Conf 2021. The talks cover topics you may not know about Gatsby: new features, TypeScript codegen, graphs, and social media card image generation.

Talk 1: Making use of Gatsby 4's new initialisms

Gatsby 4 is the latest iteration of the popular static site generator. The new version introduces two major features that change how you build your site and broadens its capabilities. In this talk, Nouha Chhih describes a few scenarios where Gatsby 4 resolves issues one may encounter when using the framework.

After watching the talk, check out this Twitch stream we hosted after the Gatsby 4 announcement. In the stream, we discuss Gatsby's announcements and demo features unique to Prismic's integration.

Talk 2: Don't be afraid to type your Gatsby projects

Gatsby and TypeScript go hand-in-hand thanks to Gatsby's novel use of GraphQL. In this talk, Nick Dejesus describes TypeScript's benefits and shows a simple setup to integrate it into Gatsby sites with minimal effort.

An example project with this setup is available on GitHub.

Talk 3: Graphs are our friends

Gatsby and its GraphQL API are sometimes seen as complex and overly difficult to use. Is it just an alternative way to query for data, or is there more to it? In this talk, Angelo Ashmore makes a case in favor of the API by describing some of its key benefits. Don't worry, you don't need to know graph theory to watch this one.

To learn more, check out Why Gatsby Uses GraphQL. Or for a more in-depth guide, see Gatsby's Customizing the GraphQL Schema documentation.

Talk 4: How to generate social media card images with React and Tailwind to look cool on Twitter and impress people you don't even know

You've probably seen fancy social media card images next to links posted on Twitter. You know, the ones where it has the page title, its author, and some snazzy graphics. In this talk, Lucie Haberer shows how you can generate them automatically with Gatsby using technologies you already know: React and Tailwind.

An example project, along with additional image demos, is available on GitHub.

Any questions or feedback?

If you have any questions, thoughts, or feedback, let us know! You can chat with us on the Prismic forum.

Angelo Ashmore

Developer Experience Engineer at Prismic focusing on Gatsby, React, and TypeScript, in no particular order.