April 2018 Summaries

Eviction Free NYC was launched as a part of a campaign to educate tenants about their legal rights in eviction cases, utilizing a combination of GatsbyJS, Contentful, and Netlify to build a responsive and adaptable website. The project was driven by a human-centered design process informed by user insights from the JustFix.nyc Tenant Web-App, emphasizing mobile compatibility, internationalization, and support for older browsers. GatsbyJS was chosen for its ability to deliver fast-loading static pages, essential for users with low connectivity, while Contentful provided a flexible content management system to easily update information as tenant rights evolve. The site features hyper-personalized result pages generated from a set of variables, showcasing information specific to a tenant's location and legal circumstances. Deployment was streamlined through Netlify, which facilitates automatic site updates by integrating with Contentful's webhook functionality. The entire project was completed in just over a month, and its open-source code is available on GitHub to encourage further development and community collaboration.

Gatsby offers a transformative approach to website development, differing significantly from traditional CMS-specific frameworks by enhancing collaboration and efficiency across various stages of development. Its features, such as faster cycles, React compatibility, and CMS-agnostic environments, facilitate smoother workflows from architecture through to launch. Teams can benefit from extended evaluation periods to build component libraries, enabling rapid assembly of pages using pre-built components and allowing for cost-effective CMS choices. The use of Gatsby also accelerates user research by enabling developers to quickly prototype functional sites, thus reducing the time needed for testing and iteration. The platform's CMS-agnostic nature allows progress without immediate client CMS access, using placeholder content until integration is possible, while its integration with static hosts and React's architecture supports effective QA and development workflows. By leveraging static page components and branch-based artifacts, teams can enhance collaboration, streamline the quality assurance process, and maintain flexibility in content management.

Sarah Mogin shares her experience leading a project at Work & Co to build a website for Whittle School & Studios using Gatsby, a static site generator. The project required a content management system (CMS) and static site generation to manage content efficiently and support deployment in multiple locales, including China. Gatsby was chosen for its compatibility with React and modern CSS strategies, alongside its support for prefetching pages and integration with Contentful, a CMS used to generate dynamic URLs and handle multiple locales through GraphQL. Netlify was employed for building and deploying the site, allowing for efficient workflow management with support for webhooks to rebuild static sites when content or code changes. Mogin highlights the challenges faced and solutions found, such as using placeholder content to ensure a fully built schema, and how Gatsby's community and structure encouraged her to contribute to open-source projects. The experience underscored the importance of effective staging environments and the potential for improving future workflows using separate Contentful spaces.

Gatsby blogs can handle comments through client-side services, Git-based solutions, or custom setups, each with its pros and cons. Client-side services like Disqus offer simplicity but lack integration with the site's output, potentially affecting SEO visibility. Alternatively, integrating comments into Git using Staticman allows for complete control without external dependencies; Staticman creates pull requests for new comments and supports spam filtering, offering a free and reliable solution. While custom solutions using serverless frameworks or Netlify provide flexibility, they often require significant effort and technical expertise, making them less practical. Staticman is highlighted as the most balanced option, offering control and independence while being open-source and free, ensuring that comments remain intact even if the service is discontinued.

Gatsby has implemented a Request for Comments (RFC) process to facilitate collaboration between core team members and the community on the development of new features, taking inspiration from projects like React, Yarn, Ember, and Rust. This process allows anyone, regardless of their familiarity with Gatsby's internals or ability to implement proposals, to submit ideas for changes to Gatsby APIs that require additional review or design. The RFC process involves creating a detailed proposal document, submitting it as a pull request to the RFC repository, and incorporating community feedback before the Gatsby core team decides on acceptance. Not all changes require an RFC; bug fixes or performance improvements that do not affect the API can be submitted directly. The introduction of the RFC process coincided with proposals for a new GitHub labeling system and the removal of a special layout component, both of which have garnered community feedback and illustrate the typical RFC structure.

Khaled Garbaya, a Contentful developer and Gatsby contributor, has created a 4-part video tutorial series aimed at helping users build a high-performance website using Gatsby and Contentful, which begins by converting Gatsby's starter example into a Contentful-powered site. The series covers various aspects of website production, including automated deployment with CircleCI and the integration of Contentful webhooks, serving as documentation for those interested in leveraging the combination of Gatsby and Contentful. This synergy is highlighted through Gatsby's component-based React integration and Contentful's content-as-components approach, which provides a seamless match for rendering content types across a website. Additionally, the series underscores the efficiency gained from Contentful's sync endpoint, which only processes changed entries, and Gatsby's use of GraphQL schemas for data querying. The video tutorials, available on YouTube, are complemented by accessible source code on GitHub and a ready-to-use Contentful + Gatsby blog starter repo for quick project initiation.

GatsbyJS, a static site generator known for its speed and performance, can be seamlessly integrated with Contentful’s content infrastructure to quickly set up a website. The process involves creating a free Contentful account, setting up a space for content storage, and generating the necessary API access tokens for content management and delivery. Once these steps are completed, users can import data into their Contentful space, configure their settings, and preview their site using the Contentful Preview API. The integration allows developers to focus on building aesthetically pleasing, high-performing websites while Contentful handles content delivery through its API, providing a separation between content and presentation. This approach supports various tech stacks and offers deployment flexibility on platforms like GitHub Pages, enhancing the modular and agile work environment for developers.