August 2019 Summaries

Gatsby has outlined a commitment to diversity and inclusion within its community, emphasizing the importance of actively seeking and amplifying voices from underrepresented groups. Initiatives include sponsoring two interns through Outreachy, a program offering internships in various tech fields to individuals facing bias in the industry, and launching the Gatsby Fellowship Program in 2020 to provide mentorship and potential employment opportunities to fellows from diverse backgrounds. Additionally, Gatsby has established an External Partnerships Fund, committing $10,000 annually to support events and programs that integrate underrepresented individuals into the developer community, while providing contributors with the option to donate their Swag Store credits to this fund. A Code of Conduct has been instituted to uphold community standards, with ongoing reviews every six months to assess the effectiveness of these initiatives.

Tania Rascia shares her experience of creating a simple, custom comment system for her website after being dissatisfied with third-party options like Disqus due to excessive ads and scripts. Her solution involves setting up a Node.js, Express, and PostgreSQL REST API hosted on Heroku, allowing her complete control over the functionality and design, while avoiding third-party scripts and ads. The system she built includes basic features like adding, updating, and deleting comments, with the entire setup documented in an article on creating and deploying such an API. The frontend uses React to fetch and display comments, with a straightforward submission form that only collects a name and comment. While the system lacks advanced features and requires manual moderation to prevent spam, it offers a customizable and ad-free alternative suitable for personal sites.

Change Incorporated, a new purpose-driven media company owned by VICE, was launched to address significant social issues affecting its audience, starting with a campaign to encourage quitting cigarettes. Developed in collaboration with Clearleft and Nearform, the platform was built within a tight deadline using a headless CMS with server-side rendering, and the JAMstack architecture, which enhanced site performance, security, and scalability. The team utilized modern technologies like Gatsby, React, and GraphQL, and focused on building a robust typographic system and component library to ensure a seamless visual and user experience across devices. Despite the demanding timeline, the project delivered a scalable and extensible publishing platform, capable of evolving with Change Incorporated's future ambitions, which include tackling broader global issues. The collaborative effort resulted in exceeding expectations, with a positive reception from stakeholders and a solid foundation for ongoing development and iteration.

StriVectin, a skincare company, transitioned its e-commerce platform from Magento Enterprise to Gatsby to address performance, stability, and scalability issues caused by significant growth. Collaborating with Elevar, which specializes in e-commerce data analysis and optimization, the company sought to improve site speed, reduce outages, and simplify content management. Gatsby's use of server-side rendering, code splitting, and GraphQL for data fetching, combined with tools like Storybook, Prismic, Shopify, and Firebase, enabled a more flexible and efficient development process. The new Gatsby-based site reduced hosting costs significantly, improved organic SEO traffic by 20%, and enhanced the overall user and developer experience. Post-launch, the site demonstrated increased speed, security, and capacity to handle rapid changes, positioning StriVectin for future growth and scalability.

Ilesh Mistry discusses the process of adding and retrieving localized strings from Kentico Cloud to GatsbyJS using GraphQL. He highlights the importance of managing static text elements in websites, particularly in multilingual settings, by leveraging content management systems like Kentico Cloud, which allows editors to manage these elements through localized strings. Mistry explains how to set up content types and items for localization, advises on determining language codes via URL or language switchers, and outlines the use of GatsbyJS with GraphQL to retrieve the localized content. He suggests creating separate projects for localization strings to streamline management across multiple environments and emphasizes the benefits of this approach for ensuring all localized strings are readily available, reducing the need for frequent updates. While acknowledging other methods, Mistry shares his recommended practices based on experience, emphasizing the challenges and flexible nature of working with Content as a Service platforms like Kentico Cloud.

The August edition of the Gatsby Gazette, written by Sidhartha Chatterjee, highlights several key developments and initiatives within the Gatsby community. The "Snow Leopard" release focused on refining the codebase to enhance performance and stability, drawing a parallel with macOS's Snow Leopard release. Notable updates include the open-sourcing of WPGraphQL for Advanced Custom Fields, improved documentation with pagination and a floating table of contents, and the addition of a copy button for code snippets to reduce errors. The Gazette also details the excitement around Gatsby's support for Chrome's native lazy loading and a successful Theme Jam event celebrating new Gatsby Themes. Community contributions have been robust, with a record number of merged pull requests, and the Core Maintainers Meeting has been rebranded to emphasize inclusivity, offering live pull request reviews and a platform for community engagement. Additionally, Gatsby is hiring for its Open Source and Cloud teams, inviting those interested in contributing to their growth and development.

In August 2019, Jason Lengstorf announced the winners of the Gatsby Theme Jam, a community celebration for developers creating themes using Gatsby. The event aimed to give back to the community by rewarding creators who published exemplary themes with exclusive swag and an all-expenses-paid trip to Gatsby Days. Participants were required to submit themes with demo sites, npm packages, and public repositories, while also meeting performance and accessibility standards. Out of 111 submissions, 52 passed the automated review, which involved audits from webpagetest.org and Lighthouse. The manual review highlighted coding best practices, accessibility, and creativity, with Vojtěch Holík's Simplecast theme and Allan Pooley's Prismic-powered legal pages theme being recognized as standout contributions. The initiative underscored the importance of high-quality examples in improving the theme ecosystem and expressed gratitude to all contributors, encouraging ongoing participation in theme development.

Kyle Pennell shares his experience of creating a fast-loading Acroyoga video explorer site using Gatsby and the Google Sheets API. Motivated by a personal interest in Acroyoga, Pennell developed the site to help users easily find and filter videos based on tags and instructors. By leveraging Gatsby's static site generation, React components, and Material-UI, he created an intuitive interface that enhances user experience. He optimized the site further by using the gatsby-plugin-remote-images to improve image loading times, making it more mobile-friendly. Pennell offers insights into the technical setup, including the use of Gatsby's createPage method to generate pages dynamically from Google Sheets data, and how he optimized image handling to address load speed issues. The project not only meets the needs of Acroyoga enthusiasts but also serves as a demonstration of how combining simple tools can result in an effective and engaging web application.

JSX pragma is a compiler directive used in JavaScript frameworks like React to control how JSX syntax is transformed into executable JavaScript code, typically by converting it to calls to functions such as React.createElement. While most frameworks have built-in tooling, such as Babel, to handle this transformation, they also allow customization through the use of a custom JSX pragma, which can be defined either by adding an option to the Babel plugin or by setting a pragma comment at the beginning of a module. This approach enables developers to limit the impact of changes to specific modules, offering flexibility in how JSX is processed. Libraries like Emotion and Theme UI use custom JSX pragmas to integrate specific styling props like css and sx, thus allowing developers to style elements by referencing theme objects directly. This customization is particularly useful for those looking to tailor the transformation process to suit their application's needs, as seen in frameworks like Gatsby that incorporate these techniques for advanced theming capabilities.