March 2021 Summaries

Gatsby v3.0 introduces a revamped gatsby-plugin-image, enhancing its robust and optimized image handling capabilities to make the inclusion of high-performance, responsive images more seamless and efficient for users. The new plugin offers three layout options—constrained, fixed, and full-width—allowing developers to choose the best fit for their needs, and supports advanced features such as automatic AVIF image generation and breakpoint management based on global device usage analytics. The plugin aims to maintain high Lighthouse scores by optimizing image loading, recommending lazy loading by default but permitting eager loading for critical above-the-fold images. Additional guidance is provided on setting default processing options through gatsby-plugin-sharp and using the sizes prop to optimize resolution selection without manually setting breakpoints, ensuring that the plugin performs effectively with sensible defaults. Despite these detailed best practices, users should find that the plugin delivers excellent performance and user experience out of the box, with automated features like responsive containers and native lazy loading. A webinar is scheduled to further demonstrate the plugin's capabilities and address common user pitfalls, promising insights into the latest advancements in image optimization with Gatsby.

Gatsby and Storybook serve as complementary tools for documenting and developing design systems, with Gatsby offering the flexibility needed for long-form content and holistic design guidelines while Storybook excels in component development and testing. Various teams, such as those from Thumbtack, Capital One, and IBM, have utilized these tools in different ways to manage their design systems effectively. Thumbtack has integrated everything within Gatsby for a unified approach, whereas Capital One uses Gatsby for overarching documentation and Storybook for component specifics. IBM employs Gatsby as a core component of its Carbon Design System, facilitating contributions from both technical and non-technical team members and enabling the creation of a Gatsby theme for widespread internal use. These case studies highlight Gatsby's adaptability and strength in supporting evolving design systems within diverse organizational structures.

In the final phase of the #100DaysOfGatsby coding challenge, participants are tasked with creating a Gatsby Theme to facilitate scalable growth for a fictional company named AudioCORE. This involves developing a pre-built, reusable package that simplifies the setup and configuration of Gatsby sites. Participants have access to various resources, including documentation, tutorials, and community support, to assist in their theme development. The challenge encourages sharing progress on forums, attending livestreams for best practices, and publishing the completed theme to the npm library. Successful completion marks the end of the initiative, unlocking new skills and offering opportunities for further learning and engagement with the Gatsby community.

Cabrillo College, a community college in northern California, underwent a significant website renovation to better reflect its diverse departments and programs. The project was led by Ramesh Goonetilleke, who aimed to move away from outdated technology like Dreamweaver and flat HTML files to a more modern and flexible tech stack. Collaborating with Cosmic, a Bay Area agency, Goonetilleke adopted a solution using headless WordPress and Gatsby, enabling faculty and administrators to independently create and maintain pages for their departments through an intuitive drag-and-drop interface, Gutenberg. This approach allowed for decentralized content management and empowered the college community to tailor their web presence to their specific needs. While the transition faced challenges, such as performance issues with the Gutenberg interface and adapting WordPress to function with newer JAMstack technologies, the overall shift has been seen as a success, providing Cabrillo's community with the tools to effectively share information and engage with students. The project highlights the importance of a website that reflects the multifaceted nature of educational institutions, offering students the resources they need to explore their educational paths.

Matthew Frawley describes his experience building a project for Gatsby's first Silly Site Competition, where his creation, "The Jabberwocky Poem," was selected as a top 5 runner-up. Inspired by Star Wars-style scrolling text and using Lewis Carroll's nonsensical poem "Jabberwocky," Frawley implemented the GreenSock Animation Platform (GSAP) to achieve a 3D animation effect that moves text towards the viewer as they scroll. Through trial and error, he optimized the animation by animating only two paragraphs at a time to enhance performance. To address accessibility and performance, he implemented a static version of the poem for users who prefer reduced motion and used Gatsby Image for efficient image handling. Frawley invites collaboration and shares his enthusiasm for creating innovative and engaging web experiences.

Hi-Rez Studios, a game development company based in Atlanta, successfully transitioned its web infrastructure from WordPress to a combination of Gatsby and React, significantly improving its ability to handle high traffic and create interactive web experiences. Originally using WordPress, the team faced challenges with scalability and deployment inefficiencies, especially during high-traffic game launches, which led them to explore more robust solutions. After testing Gatsby for a high-profile game launch in 2017, the team found it provided faster and more resilient sites, allowing them to manage traffic spikes effectively and enhancing their development workflow. This transition enabled Hi-Rez to expand from four to eighteen web properties, including game homepages and e-sports sites, and integrate features like dynamic data paths, localization, and external CDNs to improve user experiences across different regions. By 2021, the team's successful adoption of Gatsby not only improved their productivity and flexibility in web development but also elevated their role within the company, allowing them to experiment with new technologies and deliver sophisticated, interactive content for their gaming communities.

Paul Scanlon shares his journey from digital advertising to tech in the "Voices of Gatsby" series, highlighting the importance of a structured approach to projects, which he metaphorically describes as "seeing the Lighthouse." With a career spanning over sixteen years, he began in digital advertising, earning accolades like a BAFTA for digital creativity, before transitioning to building React applications. Drawing from his diverse experiences, Scanlon emphasizes the value of planning and vision, arguing that projects should start with a clear end goal before diving into coding. He illustrates this through his creation of "BumHub" for Gatsby's Silly Site Challenge, showcasing how his advertising background informed his tech projects. Despite the often chaotic nature of tech projects, Scanlon advocates for maintaining process and structure, likening it to the "measure twice, cut once" mantra instilled by his family. He encourages others to adopt this mindset to enhance their own project outcomes.

As Gatsby is increasingly adopted for building large-scale and complex websites, professional users from sizable organizations are calling for improvements such as faster site performance, shorter publish times, and better e-commerce integrations. Users specifically desire enhancements for smoother Shopify integration, marketing workflows, and dynamic data handling, while also seeking more seamless access control options and support for internationalization. To address these needs, Gatsby has introduced new features like a faster Shopify plugin, improved image handling, and Gatsby Cloud Edge CDN for quicker deploy times. The company is also enhancing its documentation and sharing success stories to guide best practices, especially in areas like site migration and performance optimization. Gatsby plans to continue engaging with its community through discussions and case studies to further refine its offerings based on user feedback.

In the fourth phase of the #100DaysOfGatsby coding challenge, participants are tasked with adding a Shopify ecommerce store to the fictional startup AudioC0RE's website, following their successful integration of a WordPress-powered blog. The challenge requires creating a swag store under a new "/shop" route, utilizing a Shopify Developer account and the gatsby-source-shopify-experimental plugin, introduced at a Gatsby conference. Participants are directed to develop a landing page and product pages for a shirt and a hat, with support available from the Gatsby community through forums and a coding livestream. The challenge aims to enhance participants' skills in integrating ecommerce solutions into web projects using Gatsby, a popular framework for building performant websites.

Gatsby Cloud has introduced new pricing plans that separate costs for Builds and Hosting, allowing users to choose based on their build speed and traffic needs. The updated Build Plans remove the previous caps on "Real Time Edits," enabling unlimited edits and builds, with options to enhance build speed through optimized memory and computational power. The new Hosting Plans leverage a global edge network, allowing scalable hosting costs without needing to scale build infrastructure. Users can start on free plans, ideal for testing small projects, and upgrade as their needs grow, with existing users being migrated to equivalent plans. The changes aim to prevent penalties for frequent site edits and lengthy builds, aligning costs with build speed and offering a 14-day free trial for new users to test the updated services.

Gatsby 3.0 introduces significant improvements to its core framework, enhancing the experience for developers, content editors, and site visitors. The new version offers an 80% speed improvement in local development by processing images and pages only when needed, reducing waiting times for large sites. Content editors benefit from Incremental Builds, now available in the open-source version, which updates only changed pages, drastically cutting build times. Site visitors enjoy better performance due to a revamped gatsby-plugin-image, which simplifies the API and boosts core web vitals and Lighthouse scores. Gatsby 3.0 also updates core dependencies, eliminating bugs and enabling future features, while Gatsby Hosting reduces deploy times for faster site updates. The release aims to provide a seamless upgrade experience with extensive support and documentation, culminating in the first-ever GatsbyConf and the launch of new Gatsby Cloud capabilities.

Gatsby Cloud has introduced a hosting solution that completes its vision of a comprehensive platform for building and deploying Jamstack websites, focusing on improving speed, reliability, and security for developers and marketers. By integrating hosting with a secure global edge network powered by Fastly, Gatsby Cloud provides a seamless and efficient workflow from development to production, offering features such as Incremental Builds, Deploy Previews, and CMS Previews. This new hosting service promises faster deployments, particularly for larger sites, while simplifying management through custom domains, SSL certificates, and Workspaces. The platform supports a range of flexible plans, including free options for small projects, and provides built-in security with free TLS certificates. The launch marks a significant milestone in delivering an end-to-end solution that enhances the user experience by ensuring fast, consistent build and deploy times, fulfilling the original vision of Gatsby's founder, Kyle Mathews.

GatsbyConf 2021 announced several significant updates, including the launch of Gatsby v3.0 and Gatsby Hosting, aimed at enhancing the performance and developer experience for building modern websites. Gatsby Hosting is introduced as a best-in-class CDN powered by Fastly's global edge network, drastically improving deployment times and offering a seamless experience for Gatsby Cloud users. The release of Gatsby v3.0 brings advancements such as Incremental Builds, an improved Gatsby Plugin Image, and an optimized local development experience. The event also highlighted the release candidate of a Shopify source plugin, promising substantial enhancements in build performance for e-commerce sites. Furthermore, Gatsby Functions were announced, enabling developers to incorporate dynamic, serverless functionalities into static sites. These updates collectively aim to bridge the gap between developers and marketers, fostering a collaborative environment and empowering teams to create high-performance websites with ease.