July 2019 Summaries

Lennart Jörgens shares his experience of building a Gatsby themes library website using Theme UI, illustrating how its features, such as breakpoints, variants, and the Tailwind preset, significantly streamlined the design and development process. He highlights the importance of starting with a design prototype in Figma, drawing inspiration from platforms like Dribbble and Behance, and maintaining consistency by using shared design tokens across both Figma and Theme UI. Jörgens emphasizes the utility of the Theme UI feature for creating responsive and customizable components, particularly through the use of variants for styling elements like buttons and gradients, and the intuitive breakpoint syntax for mobile-friendly layouts. By integrating YAML for shape positioning and leveraging Theme UI's shadowable and themeable properties, he effectively enhanced the Gatsby themes' aesthetic and functionality. Overall, Jörgens recommends Theme UI for its ergonomic and constraint-based design benefits, especially when developing Gatsby themes.

A beta launch of the live preview feature combining Drupal and Gatsby is announced, offering an innovative approach to content management by integrating the rich content modeling capabilities of Drupal with the modern frontend features of Gatsby, such as hot reloading and reusable UIs. This integration, made possible through a preview module developed by Third and Grove, allows content teams to see immediate changes in their work, enhancing the workflow traditionally offered by CMS platforms. Previously available for other CMS platforms like Contentful and Sanity, the new Drupal compatibility significantly broadens the potential user base, tapping into a large open-source community. To get started, users must sign up for the Gatsby Preview beta, install the required plugins, and configure their Drupal instance to enable JSON API and the Gatsby Preview module. This development promises improved client outcomes, site performance, and UI/UX for companies and agencies using Drupal, while also modernizing their engineering stack and increasing team satisfaction.

In celebration of the stable release of Gatsby Themes, the Gatsby Theme Jam contest was announced, inviting participants to create and submit their own Gatsby Themes by July 31st, 2019, with all entrants receiving a limited-edition mug or t-shirt and two winners earning a trip to a Gatsby Days event. Gatsby Themes are installable packages that streamline the setup of a site's styling, components, plugins, and configuration, allowing for easy updates and swaps. Participants can build new themes or expand existing ones, such as the official blog or notes themes, using resources like Gatsby's documentation, a free Egghead.io course, and a "Learn with Jason" session. Contest submissions must include links to their GitHub repository, npm package, and demo site, and will be judged on criteria such as code quality, accessibility, performance, documentation, and creativity. Further details and resources are available on the contest website, themejam.gatsbyjs.org.

In June 2019, Marcy Sutton conducted accessibility research with Fable Tech Labs, focusing on user testing of client-side routing techniques in JavaScript web applications to identify the most intuitive and ergonomic methods for users with disabilities. The initiative aimed to gather insights on how different navigation techniques impact the user experience, particularly in single-page applications where traditional page reloads are absent. Common accessibility barriers include issues with screen reader announcements, focus management, and the visibility of focus outlines. The research involved testing various prototypes, each employing different focus management strategies, with users utilizing assistive technologies like screen readers, screen magnification, and voice navigation. The findings emphasized the importance of responsive design, visible focus outlines, and tailored focus management techniques to enhance accessibility. Recommendations included implementing interactive UI controls, ARIA Live Regions, and skip links to improve navigation and focus management, aiming for a more inclusive web experience. The research underscored the value of user testing in making informed accessibility improvements and highlighted the need for collaboration with users with disabilities to develop effective solutions.

Sandy Springs, a city north of Atlanta, collaborated with Mediacurrent to create a unified digital platform using a decoupled architecture combining Drupal 8 and Gatsby. The initiative aimed to streamline the publication of content across multiple channels, including the City Springs website and digital signage, by addressing the inefficiencies of the previous system, which required content to be created multiple times. The new platform leverages Drupal 8 for backend content management and Gatsby for frontend presentation, enabling a "create once, publish everywhere" approach. This setup uses the JSON API Drupal module to expose data feeds to Gatsby, with Netlify handling site deployment and updates. The result is a more efficient, scalable, and faster system that reduces training needs and infrastructure complexity, allowing Sandy Springs to publish content more effectively while continuing to work with Mediacurrent to expand and maintain their digital capabilities.

Gatsby provides an effective solution for building static documentation websites by utilizing Markdown files, making it a suitable choice for companies like Apollo, which deals with documentation spread across multiple repositories. The challenge Apollo faced was unifying these repositories into a cohesive site without the need to rebuild the entire website for every update. By employing Gatsby Themes, they can configure a single Gatsby website that can be applied across multiple sources, allowing each repository to operate independently while maintaining a consistent layout. Gatsby Themes offer flexibility through configurable plugins and GraphQL queries, facilitating version control and navigation via gatsby-source-git, while Gatsby Remark plugins enhance Markdown parsing capabilities, enabling features like internal link checking. Additionally, MDX allows for the integration of React components within Markdown, enabling rich, interactive documentation and shared content across pages. This approach not only streamlines the documentation process but also makes it more enjoyable and efficient, leveraging familiar technology to quickly deploy features. Apollo's journey with Gatsby Themes and the broader ecosystem demonstrates how these tools can deliver a consistent and dynamic documentation experience.

Gatsby has announced the stable release of Gatsby Themes, which allows developers to abstract their site's default configurations into an installable package, making it easy to update, compose, and swap themes. This release moves the theme APIs from an experimental phase to stable status, with composition and shadowing as core features. Composition combines configurations from various plugins and the site's gatsby-config, whereas shadowing allows developers to override specific components by creating new files. The previously experimental __experimentalThemes key is deprecated, and themes are now integrated into Gatsby's core functionality. Gatsby has also launched two official themes, gatsby-theme-blog and gatsby-theme-notes, built with the Theme UI library, which encapsulates best practices for theme development. Future plans include developing tools to make features like shadowing more accessible through the Gatsby CLI and GUI, enhancing the ease of working with themes.

Gatsby themes aim to provide a flexible and extensible framework for building sites by allowing the reuse of site configurations, plugins, and components across multiple sites, with a focus on progressive complexity and easy customization. The release of two official themes—a blog theme and a notes theme—demonstrates this flexibility by allowing users to customize typography, color, layout, and other design tokens through a theme configuration object. Theme UI, an optional open-source library developed alongside these themes, enhances customization by enabling consistent styles across React components and simplifying the styling of MDX content. It builds upon the Styled System library to offer portable configuration and guidelines for creating themeable UI without starting from scratch. Users can implement custom styles by leveraging Gatsby's shadowing feature and the Theme UI library, with the potential to integrate additional tools and libraries for enhanced site styling.

John Otander's piece discusses the concept of component shadowing in Gatsby, highlighting recent improvements that allow developers to extend components and entire pages more efficiently. By leveraging the new feature of component extending, developers can now import and customize components without delving into their internal implementations, thus streamlining workflows such as wrapping components or modifying props. Otander illustrates the process with examples, such as customizing a NewsletterButton by applying new props and using the Emotion CSS prop for styling changes. Additionally, he touches on altering global settings like theme.js for site-wide modifications. This approach offers a flexible and powerful means for developers to tailor component behavior and styling, enhancing the adaptability of Gatsby themes.