November 2019 Summaries

Gatsby Preview for Cosmic has been officially released, enabling content creators to preview their work on Cosmic-powered Gatsby websites with ease. This integration, resulting from a collaboration between Gatsby and Cosmic teams, allows for a seamless one-click preview of content, enhancing the workflow for content teams. The feature addresses the challenge of providing instant content previews in JAMStack websites built on Gatsby, a highly requested capability by content creators. This development represents a significant advancement in the tools available to both developers and content teams, promoting faster content marketing velocity. The Cosmic team is committed to further improving the integration by continuing collaboration with Gatsby and welcomes user feedback for future enhancements.

Gatsby Cloud's Quickstart page is designed to facilitate the onboarding process for users, whether they have an existing Gatsby project or are starting from scratch, requiring only a GitHub account with no commitment or credit card. The platform is undergoing continuous improvements based on user feedback from React developers unfamiliar with Gatsby, focusing on areas like GitHub integration, CMS choices, and onboarding friction. Notable changes include offering an MDX-based starter to simplify content management and providing clearer guidance on adding GitHub organizations. The team tracks feedback using Barron Caster’s 3x Conversion Playbook to prioritize and implement enhancements, aiming to enhance user experience and streamline major workflows. Users are encouraged to share their experiences and desired integrations to further refine Gatsby Cloud's offerings.

MDX is a file format that allows the integration of JSX into Markdown files, enabling the use of React components alongside standard Markdown syntax, which is particularly useful for creating interactive components and reusable elements across web pages. The guide by Thomas Wang details a process for converting an existing Gatsby blog to utilize MDX, as the current version of Gatsby's blog starter does not natively support it. The conversion involves five key steps: installing necessary plugins such as gatsby-plugin-mdx and @mdx-js/react, updating configurations in gatsby-config.js by replacing gatsby-transformer-remark with gatsby-plugin-mdx, modifying gatsby-node.js and GraphQL queries to accommodate MDX content, and ensuring MDX files can be rendered with the MDXRenderer component. Once these adjustments are made, developers can test their implementation by creating and rendering a .mdx file within their blog, allowing JSX elements to appear on their site. The text also provides resources for further reading and offers a Gatsby personal blog starter to facilitate the creation of new blogs with MDX support.

Gatsby Cloud is a newly launched commercial platform designed to enhance the capabilities of web creators by providing stable, trusted tools for building websites more efficiently. It integrates with Gatsby's existing content mesh platform to offer features such as Cloud Quickstart for rapid project creation, Real-time Preview for instant content changes, and extensive CMS integrations with plugins for 389 systems. The platform addresses common challenges faced by users, such as complex project initiation, consistent workflows, and faster builds, by offering solutions like preconfigured starters and a fast build service in private beta. Gatsby Cloud aims to capitalize on the shift towards cloud computing and JavaScript-rich web apps, providing a cost-effective, scalable, and secure alternative to traditional CMS architectures. It caters to a wide range of users with a free tier for personal and small sites, while also supporting advanced features for larger projects.

Madalyn Parker provides a detailed guide on setting up a Mac development environment to manually test web accessibility using free screen readers across various platforms. The article emphasizes the importance of selecting appropriate screen reader and browser combinations for effective testing, such as NVDA with Firefox or Chrome and VoiceOver with Safari or Chrome, and offers specific configuration tips for different devices and operating systems. It includes instructions for enabling screen reader testing on mobile devices and virtual environments, highlighting necessary steps like configuring developer options on Android or setting network preferences on iOS to access localhost. Parker's discussion is part of a broader series aimed at enhancing web accessibility testing, with future topics expected to include keyboard navigation and testing techniques.

Gatsby's gatsby-plugin-offline allows websites to function offline by preloading pages and resources, even when JavaScript is disabled. The plugin, which can be easily integrated into existing Gatsby sites, leverages service workers to provide offline access by caching pages and serving a lightweight "offline shell." The recent release of version 3 introduced enhancements such as a major update to Workbox and a new feature that ensures full pre-rendered HTML is served when JavaScript is disabled, improving accessibility. This functionality is achieved through a communication mechanism between service workers and page-level JavaScript, which uses message APIs and specially formatted URLs to detect JavaScript status and adjust the site's offline behavior accordingly. The plugin can be tested by adding it to an existing site or creating a new one using the Gatsby CLI, while maintaining website performance and accessibility.