October means Halloween! For your spooky reading pleasure, the blog now has a dark mode. So dim the lights, pull up a comfy chair and let’s begin.
Follow that YouTube playlist to find a plethora of goodies including a keynote from Kyle Mathews, info on building and selling Gatsby themes by Horacio Herrera and advice on writing accessible components from Marcy Sutton.
On with some features and updates from the team.
First up is something we’re calling structured logging. We’ve done some behind the scenes re-working of Gatsby’s logging code. Gatsby now keeps an internal list of messages and activities, and can output those messages in different formats. As an example, run
gatsby build --json to see the your build logs output as JSON instead of the usual log messages.
In the future, this will enable things like a Gatsby desktop app. Have a nose at the PR to see what went into this release. There have also been a few fixes and enhancements to the standard CLI output as a result of this work.
Following on from an RFC in September, there are now 10 in-progress translations for Gatsby’s documentation. Want to get involved? Check out the new Gatsby Docs Translation Guide. Thanks to Nat Alison for driving this project!
Have you ever wondered what Gatsby does when you run a build? There’s now a new docs page that walks through the details. Overview of the Gatsby Build Process is the place to go. I particularly like the diagram that explains the different layers of Gatsby.
We’re gradually moving our official plugins over to use the Schema Customization APIs we added earlier this year. See the changes to
gatsby-transformer-sharp for an example. If you’re interested in helping out with this, there’s now a little known plugin that will write out the inferred schema to disk. See gatsby-plugin-schema-snapshot.
Thanks to David Bailey for working on this!
Have you tried out the superbly stylish dark mode for gatsbyjs.org?
There are a few more bits and bobs that are also worth mentioning.
Have you been working with Gatsby themes? Under the hood, a theme and a plugin are pretty similar. Until recently, creating a local theme in your
plugins directory would have caused an error. A recent update fixes this, making the
plugins directory work for local themes. Maybe you could use this for prototyping or one-off themes. See PR #15856 for the full lowdown.
A persistent bug that was first reported back in 2017 has finally been squashed. Good riddance! 🙂
And finally… no-mouse-days. I can’t improve on the description so I’m going to copy and paste it right here:
Ever wanted a package that disables the mouse cursor one day a week so you can test keyboard accessibility as a team? No? Well here you go anyway.
Grab it from https://www.npmjs.com/package/no-mouse-days.
Hacktoberfest Hacktoberfest Hacktoberfest. Yes, October means Hacktoberfest. A huge welcome to all our new and returning contributors!
There are way too many contributions to mention individually, but let’s try to take a rocket powered tour through some highlights.
- Wide improvements to all of Gatsby’s documentation. Bringing docs in-line with the style guide proved to be a popular (and very valuable) activity last month.
- Improvements to how gatsby-plugin-offline handles custom link tags with the
rel=preconnectattribute, thanks to Espen Hovlandsdal
- A fix for the
wrapPageElementAPI while running
gatsby develop, courtesy of Valeriy
- Performance improvements to querying, adding a nice speed boost when building larger sites, thanks to Matthew Miller
- Thanks again to Matthew, this PR improved Gatsby’s type inference, making it faster and less memory intensive
- A fix for
gatsby-plugin-manifestthat ensures manifest links are updated after page navigation, thanks to DK the Human
- An issue that happened when creating a resolver using the
context.nodeModelAPI was fixed by Nicky Fahey
- This PR reduces the number of files that are changed with each build. This should result in faster deploys on services like Netlify, particularly for larger sites. Huge thanks to Alex Fenton!
- Bailey Swartz fixed ordering when using matchpaths in #18478
The site of the month for October is IBM’s Carbon Design System. What’s it all about?
Carbon is IBM’s open-source design system for products and experiences. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors.
Seems like everyone is building design systems these days, and for good reason. There’s a lot to like in here. It’s based on guidelines to be open, inclusive, modular, and consistent. Components are available for React, Angular, Vue and Vanilla JS.
Why is it our site of the month?
- Design system with lots of well thought out components and clear guidelines
- Open source
- Used at scale at IBM
gatsby-theme-firebase might be the quickest way to add full featured Auth to your site, and it’s our theme of the month for October!
Add the theme, add your Firebase credentials and off you go. Want to change anything? Use component shadowing to override whatever you like.
Last but certainly not the least, we launched Gatsby Cloud last week! 💃
Here’s an excerpt from Kyle’s announcement post:
We’re excited to announce the launch of Gatsby Cloud: a commercial platform of stable, trusted tools that enable web creators to build better websites. Gatsby Cloud enhances our content mesh platform with interoperable, out-of-the-box solutions to launch websites faster and drive business success. This is a significant step forward for our diverse and thriving open-source community, and we’re really proud of it.
Gatsby Cloud features include a quickstart to create a CMS-powered site in seconds, real-time preview for your Gatsby sites, Lighthouse reports and superpowered Builds.
Visit gatsbyjs.com to start using Gatsby Cloud today! We can’t wait to hear what you think.
That’s all, folks.
See you soon again! ❤️