July 2020 Summaries

Josh Comeau's blog post discusses the challenges and innovative solutions involved in building dynamic, interactive features on static sites, using the example of a Gatsby project called "Will it Build." This benchmarking service is designed to demonstrate how long it takes to build Gatsby sites with varying page counts and content sources. The team at Gatsby faced the problem of creating a dynamic filter without relying on a runtime API, which they resolved by using client-side navigation with Gatsby's Reach Router, maintaining a smooth user experience without the drawbacks of traditional route changes. By leveraging Gatsby's browser APIs, they preserved scroll positions and focus, and optimized URL structure to allow easy sharing of specific configurations. Comeau reflects on the trade-offs of their approach and suggests that as static sites gain popularity, more innovations in this area are expected, making web applications faster and easier to maintain.

Gatsby has announced the launch of gatsby-theme-i18n, a significant step in providing first-class internationalization (i18n) support, enabling the creation of multilingual sites using specialized React components and automating tasks for MDX-based websites. This theme addresses the growing demand for content in users' preferred languages and simplifies the previously complex process of adding i18n to Gatsby sites. It allows developers to use their preferred i18n libraries, with dedicated child themes available for react-intl, react-i18next, and Lingui. The initiative aims to enhance Gatsby's core by integrating i18n features, while also fostering community collaboration and feedback to refine the theme further. The focus is on making the web more accessible and inclusive, acknowledging that while the theme might not initially solve all challenges, it represents a foundational step toward comprehensive i18n support in Gatsby.

Gatsby Days, initially planned as a virtual event, was transformed into a content series to respect the focus on the Black Lives Matter movement, allowing the Gatsby community to engage with the material at their own pace. The series includes a video by Benedicte Raae, co-founder and senior developer at Lilly Labs, who discusses creating POW!, an encrypted menstrual cycle app. Concerned about data privacy in existing cycle tracker apps, Benedicte used Userbase for end-to-end encryption and Gatsby to build the app as a progressive web application (PWA). The video demonstrates how to integrate user authentication into a Gatsby site using Userbase, with the demo code available on GitHub. Gatsby Days is expected to return in October, with updates available on Twitter, and the community is encouraged to follow developments and participate.

Gatsby Recipes is a recently introduced feature designed to streamline and automate the setup process for Gatsby projects, addressing the challenges of managing numerous plugins and themes within the ecosystem. By providing over 25 official recipes and facilitating community contributions, Gatsby Recipes simplifies tasks like creating pages, installing plugins, and setting up tools such as TailwindCSS, which previously involved a cumbersome, multi-step manual process. Recipes, written in MDX, offer an interactive and automated approach that makes setup instructions easily understandable and executable directly from the command line, significantly reducing the time and effort required for configuration. This innovation allows users to maintain flexibility within their projects without disrupting ongoing work, thereby lowering the entry barrier for new users and enhancing the productivity of experienced developers.

Gatsby Days, originally planned as a virtual event, was transformed into a content series by the Gatsby team to respect the Black Lives Matter movement, allowing for the sharing of insights from scheduled speakers at a more suitable time. The series includes presentations like Trevor Blades' on Gatsby's plugin ecosystem, highlighting tools such as gatsby-plugin-ngrok-tunneling and the new gatsby-source-wordpress-experimental plugin, which enhance the local development experience by facilitating remote collaboration and providing new functionalities. Trevor Blades, a Senior Software Engineer at Apollo GraphQL, focuses on creating content to support developers using GraphQL, with all sites built using Gatsby due to its superior local development experience. His presentation and related resources, including slides and live coding sessions, are accessible online for further learning and engagement.

Little Caesars, the third-largest pizza chain globally, undertook a significant overhaul of its online presence to prepare for a major Super Bowl ad campaign in 2020, which marked the launch of their nationwide delivery initiative. The company opted for Gatsby, a React-based framework, to create a unified, scalable, and secure ordering platform that streamlined their previously disjointed site architecture. This change aimed to enhance customer experience and handle the anticipated surge in orders following the ad. Gatsby's static site generation and JAMStack approach provided robust security and performance benefits, allowing Little Caesars to manage an influx of simultaneous users without scaling infrastructure. By leveraging Gatsby Themes, the company efficiently updated and maintained its 20+ global websites, enabling swift adaptations to market demands, such as an urgent e-commerce upgrade for its Canadian site amidst the pandemic. The successful deployment of the new site just days before the Super Bowl helped Little Caesars achieve remarkable online traffic and engagement, reinforcing the efficacy of their digital transformation strategy.

Gatsby decided to transform their planned Virtual Gatsby Days into a content series to maintain focus on the Black Lives Matter movement while still sharing valuable insights from scheduled speakers. This approach allows the community to access the content at their convenience, with product and program announcements initially shared in a blog post, followed by a video series. A highlight is Adekunle Oduye's presentation on using Gatsby and Storybook to create dynamic design system documentation, emphasizing the importance of integrating documentation into the development process to ensure consistency, reusability, and scalability. By making documentation a living part of the code, it remains current and efficient, enhancing productivity. Adekunle, a Senior UX Engineer at Mailchimp, advocates for design systems and teaches programming skills to those affected by the justice system, sharing his expertise through presentations and on platforms like LinkedIn and Twitter.

Gatsby is working on developing an internationalization (i18n) theme to enhance the integration of multiple languages and cultural nuances into websites and applications, aiming to make Gatsby a first-class citizen in the realm of headless CMSs. The initiative seeks to address various challenges users face, such as the complexity of generating locale-specific pages, integrating non-local files, and dealing with SEO and right-to-left text support. The research identified existing pain points in Gatsby's i18n ecosystem, including scalability issues, the need for manual adjustments, and difficulties in using third-party localization platforms. The upcoming release of the alpha version of gatsby-theme-i18n aims to solve some of these issues, and the Gatsby team encourages community involvement through their Discord channel to refine the solution and gather feedback.

Gatsby Days, originally planned as a virtual event, was transformed into a content series to respect and support the Black Lives Matter movement while still sharing valuable insights from the community. The event's announcements were consolidated into a blog post, accompanied by a video series featuring the scheduled speakers. One highlight from the series was Cole Bemis's presentation on Doctocat, a Gatsby Theme developed to streamline the creation of documentation sites for GitHub's design system. Doctocat simplifies the process by integrating functionalities like responsive navigation, live code examples, and an automatically-generated table of contents into an easy-to-use package. This innovation addresses previous challenges of code repetition across multiple repositories by consolidating these elements into a single, cohesive workflow. Gatsby Days is set to return in October, with details yet to be confirmed, and updates will be shared via Gatsby's Twitter.

Gatsby has released Blog Theme 2.0, which brings new features and customization options to the popular gatsby-theme-blog. This update includes enhanced image support with featured images and social sharing capabilities, improved SEO, and easy webfont configuration. Users can now highlight lines in code snippets using Theme UI's prism package, and styling presets allow easy aesthetic changes without requiring in-depth design skills. The release also introduces gatsby-theme-blog-core with unstyled components for more flexibility and separates the dark mode feature into a standalone theme. These enhancements aim to provide more tools and customization options, encouraging the community to create innovative and diverse sites, with updated documentation and tutorials available to assist users in leveraging these new capabilities.

Gatsby's new source plugin for WordPress, launched in beta, significantly enhances the integration of headless WordPress with Gatsby and Gatsby Cloud, offering features such as near-instant publishing and live content previews through Incremental Builds and Gatsby Preview. The update aims to empower content editors with a streamlined workflow and introduces improvements like the ability to preview content during creation, rapid updates or new content publication, and optimized handling of links and images in HTML. The plugin also integrates seamlessly with WPGraphQL, enabling sites to utilize popular WordPress plugins for SEO, content modeling, translation, and ecommerce within a single Gatsby source plugin. This development allows agencies and organizations to adopt Gatsby for complex web projects, providing a familiar yet enhanced publishing experience for content editors.

Gatsby Days, initially planned as a live digital event, was transformed into a content series to maintain focus on the Black Lives Matter movement while still sharing valuable information from scheduled speakers. The series includes a video presentation by Sam Julien, a Senior Developer Advocate Engineer at Auth0, who demonstrates how to build a Gatsby Recipe for setting up authentication in Gatsby applications. While Gatsby is often seen as a static site generator, it is actually a dynamic framework that supports features like authentication, differing slightly from React in its implementation. Sam's demonstration includes using React Context with mock values to prevent build errors and employing gatsby-browser.js and gatsby-node.js for handling authentication providers and DOM API objects. Gatsby Days plans for October were mentioned, with details to be announced on Twitter.