Skip to content

Projects

Fast Refresh Integration (Gatsby)

Code

All of the frontend code lives inside the cache-dir/fast-refresh-overlay folder, other bits like the webpack config are in other files inside the gatsby package.

Description

Fast Refresh is an implementation of Hot Reloading with full support from React. It was the goal to publish the Fast Refresh integration with the release of Gatsby v3 (see release notes). So on a tight deadline an accessible, responsive and most importantly helpful modal/error overlay had to be created. Since Fast Refresh relies on stricter “code style” rules (e.g. no anonymous exports, only one export per file) compared to previous Hot Reloading solutions two things had to be done: 1) Ensure that Gatsby’s frontend itself handles all possible files gracefully (e.g. MDX) and 2) that ESLint warnings were added to warn against those now bad code styles. The end result is an accessible modal (with focus trap, correct aria labels, respects prefers-* media queries) showing multiple types of errors. In addition, a public facing Fast Refresh documentation page was written to inform users of how it works, limitations, and tips.

File System Route API (Gatsby)

Code

The relevant code was added to the existing gatsby-plugin-page-creator package. Pull Request on GitHub.

Description

While the File System Route API when I took the project over has already been in a beta stage for some weeks there was still much to do. Incorporating the bug reports and feature requests from the community, adding unit & end-to-end tests, writing documentation. A lot of work went into the polishing of this feature and ensuring that most common use cases were covered — since the goal of this new feature was to abstract some lower-level Gatsby APIs away into the filename itself. It greatly improved the DX of Gatsby and lowered the level of entry for each user. Challenges were different encodings/formats of file names, some feature requests from users, and the question of what the final API surface should look like. All the added tests and user interviews cleared a path for finding solutions before the GA release. An example also shows the API in action.

Internalization Theme (Gatsby)

Code

gatsby-theme-i18n + gatsby-theme-i18n-react-intl / gatsby-theme-i18n-react-i18next / gatsby-theme-i18n-lingui

Description

As lead engineer on the Gatsby internalization (i18n) initiative, I knew right from the start that internationalization and localization are multi-faceted problems requiring an iterative solution process with involvement from the community. To best understand what this process should look like, I needed to identify the current pain points as well what future considerations need to be kept in mind in designing a solution. With these in mind, I started researching the current i18n ecosystem in Gatsby. I published the article Research on i18n with Gatsby to invite people to give feedback and work together on the identified pain points. The announcement article Gatsby Goes Global: Announcing Gatsby’s Official i18n Theme lays out the problems I hit and the solutions I found for integrating third-party libraries together with Gatsby. The users are now able to combine the main theme with a theme of their choice to have instant support for most common i18n use cases.

Writing
TutorialsDronesLifestyleScience
Social
Email Twitter GitHub LinkedIn
© 2022 by jpwahle.com. All rights reserved.
Privacy Policy. Legal Notice.