May 2020 Summaries

In May 2020, Gatsby celebrated its fifth anniversary with significant achievements, including surpassing 2,000 plugins and announcing a series B funding round aimed at revolutionizing web development. The platform introduced new features to enhance performance, such as the Strapi Instant Preview for content editors and faster build times on Gatsby Cloud, with examples like Agility CMS achieving five-second builds. Collaborations with the Chrome team have improved site performance by optimizing JavaScript loading, and new configurations, such as Gatsby Recipes and TypeScript support, were launched to streamline development. The Gatsby community also witnessed various events and contributions, including the upcoming virtual Gatsby Days, new themes and plugins, and enhancements in GraphQL tracing and accessibility. Additionally, integrations with Azure Static Web Apps were introduced, and WPGraphQL continued to grow, marking an exciting period for Gatsby and its ecosystem.

Gatsby has secured $28 million in Series B funding led by Index Ventures to further its mission of revolutionizing web development by moving away from outdated, monolithic site-building approaches. Designed with a decoupled architecture, Gatsby allows developers to quickly and efficiently build secure, scalable, and high-performance websites using modern tools like Git, React, and GraphQL. The platform's open-source framework is supported by an extensive plugin ecosystem, fostering a growing developer community. Gatsby Cloud enhances performance with features like real-time previews and Incremental Builds, drastically reducing build times. The company's vision for the future includes making Gatsby easier to use and accessible for everyone, with plans to introduce more collaborative and user-friendly features. As part of its commitment to open source, Gatsby continues to support key projects and maintain a strong community focus while also developing commercial infrastructure solutions through Gatsby Cloud.

Will It Build is a new public benchmarking service launched by Gatsby Cloud that allows users to view and compare build times for websites and applications built with Gatsby. The service demonstrates the progress of build times for various sample Gatsby sites, using popular CMSs like WordPress, Contentful, Drupal, and DatoCMS, and supports MDX and Markdown as data sources. It features an open-source benchmark plugin and example sites, with data accessible via a GraphQL API. The service highlights the significant reduction in build times facilitated by Gatsby Cloud's Incremental Builds feature, categorizing builds into three types: uncached/code changes, cached code changes, and data changes from a CMS. These builds vary in speed, with the fastest being the incremental builds available exclusively on Gatsby Cloud. The initiative underscores Gatsby's commitment to optimizing build performance and providing transparency in site development metrics.

Gatsby, a React-based static site generator, celebrated its fifth anniversary in May 2020, marking a significant evolution from its inception as a tool designed to enhance web development by enabling fast, component-based sites with seamless transitions. Initially conceptualized as "Codex," the framework aimed to make incredibly fast websites a default state, integrating technologies like GraphQL for efficient data handling. Over the years, Gatsby introduced features such as code splitting, themes, plugins, and the concept of "composable" websites, which allow for modular site construction. These developments were supported by a vibrant community of over 3,300 contributors and users, resulting in 200,000 public Gatsby sites on GitHub. The introduction of Gatsby Cloud further bolstered its capabilities, offering incremental builds to optimize performance for data and content changes. Amidst these innovations, Gatsby remains committed to its open-source roots, emphasizing community involvement and maintaining a free tier for individuals and projects. The celebration of its fifth anniversary underscores not only past achievements but also a forward-looking vision grounded in collaboration and open source principles.

Gatsby Recipes, introduced by Paul Scanlon, are a new tool designed to automate common site-building tasks within the Gatsby framework, utilizing MDX to author tasks executed via the Gatsby CLI. These Recipes facilitate processes like npm installations and configuration changes, simplifying tasks that might otherwise be cumbersome, such as integrating Storybook with Gatsby projects. The utility of Recipes is demonstrated through their ability to automate the installation of plugins, like the gatsby-plugin-google-analytics, and to streamline workflows by handling tasks efficiently through simple command-line operations. Scanlon envisions a future where Recipes could evolve into a broader workflow tool, potentially extending their utility beyond the Gatsby ecosystem to address repetitive tasks in various projects, thereby enhancing efficiency and reducing errors typically associated with manual configurations.

Little & Big is a Sydney-based agency founded by Allan Pooley and Sakura Rimal, focused on delivering impactful branding, web design, and development services for small businesses using modern technologies. Initially, Pooley started with WordPress but transitioned to using React and eventually adopted Gatsby for its efficiency in handling frontend development and seamless integration with various services through plugins. The agency uses Gatsby's capabilities to optimize images and enhance website performance, particularly for mobile users, which has earned them awards for their work, such as the interactive site developed for Kua Coffee that leverages Shopify for e-commerce solutions. By employing Gatsby, Little & Big has established itself as a distinctive boutique agency, boasting a portfolio of innovative and well-performing websites.

Gatsby Theme Catalyst, developed by Eric Howey, is an open-source project designed to streamline the process of building websites with Gatsby by utilizing a modular approach with integrated themes and starters. The tool is particularly beneficial for freelance web developers who value maintainability and reusability, as it allows for the combination of multiple themes, each serving a distinct function, to create a cohesive final site. Component shadowing within these themes provides granular control and customization, while the use of Theme UI ensures a unified design system that remains flexible regarding aesthetic choices. Themes within Gatsby Theme Catalyst are categorized into core, layout, functional, data, and presentation themes, each playing a specific role akin to the foundational, structural, and decorative elements of a house. The project's flexibility in data sourcing and ease of updates via npm packages further enhance its practicality, making it a robust solution for quickly launching and maintaining Gatsby projects.

Virtual Gatsby Days is a two-day online conference scheduled for June 2nd and 3rd, offering the Gatsby community an opportunity to enhance their skills through a series of engaging talks. A diverse lineup of speakers will cover topics ranging from creating design system documentation and encrypted applications using Gatsby, to leveraging the platform for mapping and side hustles. Key presentations include Adekunle Oduye on maintaining design systems, Benedicte Raae on web encryption, and Derek Murr on the benefits of Gatsby for junior developers. Additional topics include setting up authentication with Gatsby Recipes, enhancing accessibility, and utilizing Gatsby's development features for rapid website iteration. Participants are encouraged to register for this free event to gain insights and connect with the Gatsby community.

Strapi, a leading open-source headless CMS, integrates seamlessly with Gatsby, a popular framework among frontend developers, to create fast and efficient websites. The combination of Strapi and Gatsby allows developers to manage content through an API using a familiar Node and React environment. The integration is further enhanced by Gatsby Preview, which offers a live URL to preview changes in content before publishing, akin to "hot reloading" for content. This capability is bolstered by using Strapi Webhooks to trigger instant rebuilds of Gatsby applications on Gatsby Cloud, eliminating the need for manual rebuilds and ensuring users can see real-time updates. Deployment involves setting up Strapi on Heroku and connecting it to Gatsby Cloud, with a focus on leveraging Gatsby's Incremental Builds feature for faster data changes. The process underscores the efficiency and speed improvements achieved by pairing these two technologies, as demonstrated by a Gatsby Blog starter available for quick setup.

Impossible Foods faced a significant challenge as their original website struggled to accommodate the rapid growth and popularity of their plant-based Impossible Burger, particularly when Burger King incorporated it into their menu. The static website only listed locations alphabetically by state, requiring users to manually search for nearby outlets, which led to customer frustration and potential loss of sales. To address this, Impossible Foods collaborated with Matter Supply to redesign their website using Gatsby, which enabled a fast, interactive store locator map utilizing React, Mapbox, and Airtable. This upgrade streamlined the user experience, reducing the steps needed to find a nearby burger location, while also enhancing content management through modular services like Contentful. The new site not only improved user engagement with a 30-40% reduction in bounce rates but also supported the company's business growth by allowing quick adaptations to new marketing campaigns and partnerships. This digital transformation underscored the importance of a robust tech stack in scaling the brand and facilitating rapid content updates, significantly boosting customer interaction and brand visibility.

Car Loans Canada sought to enhance its website's performance and content management by adopting a headless CMS solution, ultimately choosing ButterCMS for its compatibility with Gatsby, superior documentation, and clear pricing. The company's website, which requires content in both English and French, was rebuilt using React and Gatsby, allowing for fast and efficient blog management without developer intervention. ButterCMS enabled the team to manage not only blog posts but also static assets across various site pages, improving content localization and flexibility. This change led to significant improvements in site performance, including faster loading times, increased pageviews per session, and longer user engagement, all while maintaining full independence for marketing content. The switch to ButterCMS and Gatsby also supported better SEO practices by allowing pre-processed content bundling, contributing to more dynamic and rich content experiences for users.