The excitement was palpable and the opening talks shared the latest and greatest knowledge, giving away top-notch tips like Ellen on her gift giveaway shows in the runup to Christmas. The Gatsby team even started giving away raffle prizes throughout the stream.
The event chats were full of hilarious gifs and “oohs” and “aahs” and previous conference attendees saying “Hey!” to the people they recognised.
I need to mention how amazed I was at the great event platform, Hubilo, which offered awesome breakout rooms, sponsor booths, personal note taking, the ability to add events to your own event schedule, and meeting with people – all with no hiccups.
"Wait", I hear you say, "What is Gatsby?".
I'm pretty sure you have heard of it, but I’m glad you asked. Gatsby is the frontend for creating highly-performant content-rich websites. See this teaser video for the conference.
Day 1: The speakers and topics:
Websites are good now
The keynote was by Chris Coyier, called Websites are good now. Slightly ‘tongue and cheek’ he said, as it has been good for a long time, but it is really good now!
The main points:
- Web Typography: where good licensing, easy sourcing, free font faces, that are also more performant and fluid type are a dream combination now for frontend devs.
- Image Handling has seen some great improvements, where it is easier to serve performant, responsive lazy loaded images.
- Layout has seen huge gains, with Flex & Grid we can now do in fewer lines of code, what used to take us an age to code before.
- An exciting new feature coming is container queries where one is able to make styling decisions based on the container’s attributes!
- We’re now building more with components, which is great for designers and frontend developers.
- We can isolate interactivity, data and styling concerns in sensible bundles.
- Components are a consistent model across frameworks.
- If you’re doing some animations, checkout JS: WAAPI (Web animation api) and Scroll Timelines.
- As this is native to most browsers, it means we don’t need to add 3rd party libraries to do this.
- Then, lastly, we heard about hosting and The Edge. The name of the game seems to be “Nothing beats static files…”.
- What is even cooler, is actually doing stuff “on the edge”.
Personal share: I had one of my questions answered by Chris about web accessibility and he quickly mentioned that just being aware of it is a great first step and that there's this free browser extension to help you.
The Latest, Greatest, and Beyond
Dustin Schau’s topic, ‘The Latest, Greatest, and Beyond’, spoke about what has been achieved in the latest releases, bringing attention to the fact that what we want are sites that are “Fast to create quickly and easily.” With ~3k plugins, it is even easier to source data. With Gatsby’s pluggable architecture we can add what we need to the site from RSS feeds, sitemaps, image optimisations and more.
Gatsby is also great for content editors, as it is fast to edit, fast to deploy and they can publish new content, quickly.
It’s about the user. Fast!
You gain a huge performance boost with Gatsby. With the latest features, Gatsby Cloud went from 2min to 10 sec for a deployment under certain tests.
Mention must be made of the latest improvements in Gatsby:
- Typescript all the things… fully supported!
- Trailing slashes
- Updated CMS Starters for Contentful, WordPress, Drupal and Sanity coming soon
- Highlighting two great options: Static Site Generation (SSG) and Deferred Static Generation (DSG) = pages that can wait.
For us Drupal lovers there is a great Gatsby Starter ready to be hooked up.
npx gatsby new gatsby-starter-drupal-homepage
Get the latest version of Gatsby with:
npm i gatsby:latest
hOW TO AVOID THE MOST COMMON PERFORMANCE PITFALLS
Ward Peters spoke on how to avoid the most common performance pitfalls. As speed is a vital metric, some of the topics covered were:
Using Lighthouse to look at Largest Contentful Paint (LCP) for lab-style benchmarking is ok, but it's a very controlled environment. Ward suggests that Google uses “field data” (real user data) to measure your site. This is far more important and so it's essential to test your site in various real-life conditions, like using the DevTools Performance slow down option to test for CLS. There is also an option for the Google Analytics plugin that allows you to enableWebVitalsTracking: true, which should help monitor this.
Another tip is to host fonts on your own domain, preload fonts and use font-display: swap, optimise renders and use CSS to your advantage (e.g. add a class for animations or hiding content, rather than 3rd party libraries).
If everything is important, then nothing is - Patrick Lenciono
- Defer all the things
- Animations - rather use CSS animation or WAAPI
- Oversized libs
- Don’t treat your top content equally to your footer content
- If it's all important, then nothing is important…
- Check React lazy / loadable-components…
How Figma Helps Designers and Devs Customise Gatsby Starters
During a breakout session, called Gatsby Design: How Figma Helps Designers and Devs Customise Gatsby Starters, we had a live demo of design changes being handed to the front-enders to implement. A cool starter kit for Figma can be found here.
Gatsby Framework: Then, Now, and Coming Soon
Patrick Sullivan spoke on the status of the Gatsby Framework: Then, Now, and Coming Soon
It’s all about static site generation. There were no new major announcements of new features, but Gatsby called on devs to get in on the survey and suggest what they think Gatsby should improve on for 2022 - you can complete the survey here.
Becoming an Open Source Champion with Gatsby
In Becoming an Open Source Champion with Gatsby, Lennart Jörgens showed ways to get involved and contribute.
Gatsby and Drupal at Scale: Higher Ed News Site
We were particularly interested in Gatsby and Drupal at Scale: Higher Ed News Site by Mark Shropshire. He gave some insight into their work on a huge site with loads of users.
Mark mentions the useful Gatsby heavy lifters provided, like:
- Gatsby Framework LMDB - Parallel query running
- Content Previews
- Limit preview queries
Some tips for large content repos:
- After-hours processing for RSS feeds
- Client runtime API fetching
From Mark's experience, he said that Gatsby Cloud wins for ease and it just works the way it is meant to with deep integration. Mark suggests going all in on the Gatsby Ecosystem to make sure everything works well.
Day 2: Workshops
Decoupling Drupal Using Gatsby: A Crash Course
I attended Decoupling Drupal Using Gatsby: A Crash Course by Jesus Manuel Olivas. The course gets you started by walking through the steps of exposing Drupal data as an API endpoint, which Gatsby uses to retrieve your site content (such as an Article and Basic Page). Then we're shown how to use that to render content stored using Paragraphs as React components. See a great demo code sample here. I was really impressed with the ability to render nested paragraphs using the React components we are shown in the course. Definitely worth rewatching that one!
That's all folks!
If you missed GatsbyConf, that’s ok. Here are the Day 1 and 2 YouTube playlists for you to dive into and share, as per Dustin's recent newsletter. And a big thanks to all concerned – it was a great conference, we learned a lot and we're already looking forward to the next one!
Day 1 Presentations and Announcements
This set of videos also shows the announcement of Gatsby’s Image CDN, Incremental Deploys, TypeScript Support and the many other exciting new Gatsby Framework and Gatsby Cloud features.
Day 2 Hands-On Workshops + Gatsby Agency Awards
There are fourteen live coding demos that’ll help you, including how to upgrade to Gatsby 4, improve security, or optimise site speed through your third-party scripts.