March 2019 Summaries

David Eads, in a conversation with Sam Bhagwat, discusses his extensive use of Gatsby for creating data visualization projects at ProPublica, highlighting its benefits for journalistic work. Gatsby's static site generation capability ensures maintainability and cost-effectiveness in newsrooms, where projects often need to be published and left for long periods without active maintenance. Eads explains that Gatsby’s consolidated query system, which accommodates various data sources like Google Sheets and databases, enhances the workflow in journalism by allowing seamless data integration. He shares his experience in using Gatsby's plugin system to create dynamic content workflows, often leveraging Google Sheets as a makeshift content management system for translations and interface text. The conversation also touches on the importance of web performance in engaging readers, as fast-loading content is crucial for grabbing and maintaining audience attention in the competitive landscape of online journalism.

JAMstack, an emerging trend in modern web development, offers significant benefits for marketers by utilizing JavaScript, APIs, and Markup to create static websites that provide speed, security, stability, and scalability. Marketer Kym Ellis discusses her experience with a site relaunch using JAMstack, highlighting its capacity to combine content seamlessly and quickly adapt to new functionalities such as e-commerce or podcasts without overhauling the entire site. Unlike traditional CMS platforms that often come with unnecessary features and plugins, JAMstack allows for a modular approach, improving site performance, SEO, and user engagement. Ellis emphasizes the enhanced collaboration between developers and marketers in this framework, as it fosters a better understanding of site structure, leading to efficient content management and optimization. Despite some challenges, such as the need for coding knowledge and potential bugs, the benefits of JAMstack for marketing—such as improved technical skills and faster page load times—are substantial. Ellis advocates for marketers to explore this technology for its ability to deliver a superior and adaptable web experience, as demonstrated by her successful project with the Ghost Docs site, which saw significant improvements in performance and search engine metrics.

Gatsby Preview has advanced to its beta phase, offering a solution for content creators using Gatsby and Contentful CMS to preview changes in their websites before they go live. The beta version introduces a more user-friendly interface, streamlined setup using GitHub integration, and enhanced features for team collaboration, including the ability to invite contributors and manage multiple sites through a centralized dashboard. This development addresses the previous challenge for teams who had to create their own preview infrastructure, which was often time-consuming. Gatsby Preview is currently available by invitation only, focusing on usability, reliability, and scalability, aiming to extend support to other CMS platforms in the future. The beta also includes easier client management and troubleshooting capabilities, such as viewing build logs and triggering rebuilds, ensuring a seamless experience for agencies and clients alike.

Jason Lengstorf's blog post discusses the challenges of setting up authentication in Gatsby apps, emphasizing the need for secure user-specific data access. While simple examples exist, a comprehensive guide for implementing authentication in a production environment was lacking until a recent livestream. In collaboration with Ado Kukic, Lengstorf demonstrated how to create a Gatsby account page with dynamic routes and user login requirements using Auth0, ensuring secure token storage and persistent user sessions. This session is part of the "Learn With Jason" series, which airs weekly on Twitch, offering interactive learning opportunities with guest experts. The code developed during the livestream is available on GitHub as a valuable resource for developers. Additionally, the post encourages engagement with future livestreams and provides links to related resources and social media for further exploration.

Tania Rascia describes her journey of migrating her blog from WordPress to Gatsby, highlighting the increased site speed and performance improvements achieved through this transition. Initially, her WordPress site was optimized, but still cumbersome and limited in speed, prompting her to explore static site generators. She chose Gatsby due to its ability to leverage modern web technologies like code splitting, pre-loading, and image optimization. The migration process, which she anticipated would be arduous, took 10 days and involved converting WordPress content to Markdown, adapting styles using Sass, and employing tools like ExitWP and Netlify for deployment. With Gatsby's Node.js and React foundation, Rascia could create a single-page application with seamless navigation, improved image handling, and efficient resource pre-fetching. She emphasizes that while setting up a Gatsby site requires knowledge of various technologies, the result is a faster, more maintainable, and version-controlled website.

Gatsby has introduced a new schema customization API in version 2.2.0, aimed at enhancing and stabilizing its GraphQL layer by allowing developers to define, fix, and extend types within their Gatsby GraphQL schemas. This update addresses previous issues where automatic schema generation could lead to unexpected changes and bugs, providing two new APIs, `createTypes` and `createResolvers`, that offer more controlled customization options. The `createTypes` API allows explicit type definitions, ensuring stable type names, while `createResolvers` facilitates further customization, including adding fields to existing types. Additionally, Gatsby introduced the Type Builder API, combining the simplicity of Schema Definition Language with the flexibility of graphql-js, to streamline type creation with resolvers. Despite efforts to avoid breaking changes, some modifications, such as stable type naming, may require developers to update fragments referring to old type names. These enhancements promise a more robust and customizable GraphQL experience, paving the way for further developments like theming, and have been met with positive feedback from the community.

Design+Code revamped their website using Gatsby to enhance content delivery and meet growing sales targets, leveraging their familiarity with React. Initially started by Meng To in 2015 with a digital book on iOS app design, Design+Code has evolved into a subscription-based learning platform offering courses on building real apps, with their React course gaining particular popularity. The new Gatsby-powered site, integrated with a Stripe subscription system, supports the company's shift from downloadable content to a full-fledged learning platform, effectively handling content growth and driving business. Gatsby was chosen for its compatibility with modern tools like GraphQL and its ease of use, which aligns with Design+Code's philosophy of teaching what they create. This shift resulted in significant improvements in SEO performance, as evidenced by high Lighthouse scores, and a successful launch that saw Design+Code achieve top rankings on Product Hunt.

The text outlines the process undertaken by Gatsby to update their homepage on gatsbyjs.org, as the existing design was outdated and did not effectively communicate Gatsby's value to new visitors. The project involved conducting usability tests with React-knowledgeable testers, the majority of whom were unfamiliar with Gatsby, to identify issues with the site's messaging and user engagement. Initial tests revealed that visitors did not gain an accurate understanding of Gatsby from the homepage, leading to changes such as moving the "How it Works" diagram above the fold and refining the messaging to emphasize Gatsby as a free, open-source tool for developers. The company organized a prototype workshop to iteratively design the homepage, addressing concerns like the use of company logos for social proof and the clarity of commercial offerings. Despite initial missteps with the "Install Gatsby" button, which confused users, the team returned to using "Get started" based on test feedback. The goal is to ensure visitors quickly appreciate Gatsby's benefits, as measured by increased engagement and conversions, with ongoing community input encouraged through comments and participation in future tests.

Gatsby themes have significantly evolved, enabling rapid site development with minimal disruption while introducing key features such as theme composition, component shadowing, and simplifying the data model. Theme composition allows multiple themes to be merged seamlessly, supporting child themes that enhance flexibility by enabling a tree-like structure of themes. Component shadowing empowers developers to override and customize specific components, enhancing the adaptability of themes. Improving documentation has been a priority to assist a growing audience, and the introduction of a simplified data model aims to make themes more interchangeable and user-friendly, particularly for newcomers to Gatsby. The roadmap includes potential UX improvements, design token sharing, and the development of a cohesive set of themeable components, signaling a collaborative effort to refine Gatsby themes further.

Linda Watkins provides guidance on effectively communicating the benefits of using Gatsby to non-technical stakeholders such as clients or team members. She emphasizes the importance of understanding the audience's priorities, like SEO, lead conversion, team productivity, and revenue, and suggests simplifying technical explanations to focus on outcomes that matter to the audience. Watkins uses metaphors, like comparing Gatsby to a conveyor belt sushi bar, to illustrate how pre-built websites offer faster load times and improved user experiences. Real-world case studies highlight Gatsby's advantages, such as improved SEO and lead conversion, as demonstrated by companies like Flamingo and Youfit Health Clubs. Watkins encourages using these examples to show potential clients or team members the tangible benefits Gatsby can provide for their business goals.

A recent survey conducted within the Gatsby community aimed to understand how users define Gatsby and what they value most about it, receiving 122 responses primarily from individuals who build sites for clients or companies. The survey revealed a split preference between describing Gatsby as a "website generator" or a "website framework," with respondents appreciating its open-source nature, use of modern technologies like React and GraphQL, and its promise of "blazing fast" performance. Key valued attributes highlighted were fast website performance, productivity from the start, and expert optimization out-of-the-box, with respondents noting that Gatsby's static site generation leads to faster load times and improved user experience. The survey also underscored the importance of Gatsby's plugin ecosystem, its welcoming community, and its ability to make web development fun and accessible. These insights are intended to guide a redesign of the Gatsby.org homepage, emphasizing its core values and addressing community suggestions while maintaining a playful yet informative tone.

Gatsby has introduced a new Schema Customization API that offers users enhanced control over the inferred schema, addressing common issues related to data source integration. Released as a preview, this API is part of a substantial refactoring effort to improve Gatsby's GraphQL functionality. It includes two main components: the `createTypes` action for defining or fixing type definitions to prevent schema changes due to data alterations, and the `createResolvers` action for adding or modifying resolvers and extending the schema's functionality. This update aims to align Gatsby with common GraphQL practices where schemas serve as the source of truth, enabling more robust and flexible data querying. The changes also bring improvements like normalized type names and deterministic inference, while leveraging the graphql-compose library for efficient schema management. The Gatsby team invites user feedback on this alpha release to refine the feature further, reflecting its commitment to evolving the platform based on community insights.

Travis Stanley discusses a method for implementing localization with Gatsby and Sanity.io, a solution that is both efficient and user-friendly for content teams and developers. He describes his experience with two website projects that required localization, noting the challenges and improvements he encountered. The initial project involved separate builds for each language, while the second project adopted a single-build approach that allowed pages to be generated for every language using a unified URL structure. Sanity.io's flexible schemas and Gatsby's capabilities were leveraged to streamline the localization process, allowing for easy addition of translations and automatic generation of language-specific pages. Stanley emphasizes the benefits of using Sanity.io as a content backend and encourages developers to explore this combination for fast and scalable web development.