December 2019 Summaries

Hashim Warren introduces the #100DaysOfGatsby challenge, aimed at both beginners and experienced developers to learn and deepen their skills with Gatsby, which was named the top new technology to learn in 2020. The challenge encourages participants to create a blog using Gatsby from scratch, providing a platform to document their learning progress and experiences. It involves setting up a local environment, creating pages with React components, sourcing content from Markdown files, and deploying the site. The initiative emphasizes the benefits of writing about one's learning journey as a means to enhance retention and problem-solving. Beginners can follow step-by-step Gatsby tutorials, while advanced users may opt to create a Gatsby theme for a more complex project. The Gatsby community is available for support through various online platforms such as Discord, Reddit, and Dev.

TinaCMS is a JavaScript toolkit designed to integrate content editing functionalities into websites, and this guide details how to incorporate it into a Gatsby site. Currently leveraging a Git backend, TinaCMS tracks content changes and updates source files and repositories in real time. The guide provides step-by-step instructions on installing and configuring TinaCMS, including setting up the Tina sidebar, creating content editing forms for markdown, and enabling inline editing for enhanced user experience. It also covers how to add a content-creator plugin for creating new posts and discusses deploying TinaCMS in a cloud environment using Gatsby Cloud, allowing non-technical users to manage content. The article highlights TinaCMS's flexibility, with plans to support alternative backends in the future, and introduces Tina Teams, an upcoming feature for live editing and user authentication.

Oberon, a company addressing server load issues for festival websites, accidentally launched a popular Gatsby plugin after transitioning a client's server-heavy site to a static model using Gatsby and AWS S3. Their approach involved using Gatsby, a static site generator based on React, which allowed seamless integration with their existing use of React and GraphQL. Deployment challenges with AWS Amplify led Oberon to develop a plugin that fixed issues such as redirect functionality, caching headers, and client-side routes, ultimately resulting in a highly efficient, scalable, and cost-effective hosting solution. The plugin became widely adopted within the Gatsby community, enabling features like prefixed deploys, alternative S3-compliant endpoints, and handling large file uploads. This development not only improved their client's website performance during high traffic periods but also established the plugin as a standard tool for using Gatsby with S3.

In 2016, Mediacurrent.com explored a decoupled approach for its site redesign, initially using Jekyll with Drupal but soon switching to Gatsby for its front-end. This decision was driven by Gatsby's ability to provide speed, security, and flexibility, especially in handling frequent content updates without the operational burdens caused by Jekyll's markdown files. Gatsby's React and GraphQL-based architecture, coupled with its robust plugin system, allowed for seamless integration with Drupal and improved performance. Despite encountering challenges with build times, image processing, and external JavaScript integration, Mediacurrent successfully addressed these issues by implementing Jenkins for builds, optimizing image handling, and utilizing Gatsby's server-side rendering API. The transition to Gatsby resulted in significant improvements, such as faster build times and the ability to make front-end updates independently of back-end logic, ultimately enhancing Mediacurrent's organizational agility and overall website performance.

Gatsby Cloud introduced several changes to streamline user onboarding by reducing unnecessary interactions, based on user history and environment context. Usability tests revealed that users were confused when asked to add a new GitHub organization after granting access to their personal GitHub account, a step that was deemed unnecessary. To address this, Gatsby Cloud implemented a system that infers the user's intent to save their first site in their personal GitHub account, allowing for corrections only if the assumption is incorrect. This approach minimizes user interaction by defaulting to the last known value—in this case, the personal GitHub account—thereby reducing confusion and enhancing the user experience. The design team plans to continue enhancing Gatsby Cloud by introducing features such as a free pricing tier, more starters, improved error messages, and additional integrations, all aimed at further refining user interaction and performance assessments.