Back to overview

The 3 best features announced at GatsbyConf 2021

|2 min read

Yesterday the (virtual) conference for Gatsby started. It’s still going on today, with a lot of workshops. If you’re interested, go check it out at https://gatsbyconf.com/.

In the talks yesterday a lot of cool new features were announced. I’ve selected 3 which I found the most interesting.

Gatsby Cloud Hosting

Gatsby cloud already existed for a while now, but yesterday the Gatsby team announced they are adding hosting to their offering. So as easy and fast as it was before to build your website, you can now immediately deploy your Gatsby site through this service too. They partnered with Fastly for a super fast CDN. More info: https://www.gatsbyjs.com/products/cloud/hosting/

Gatsby Image Plugin

The Gatsby team has worked on a new image plugin for the past few months, and it shows! This might be my favourite announcement of the conference. The new plugin makes your images responsive and fast by default. Images above the fold are immediately loaded, images below the fold are lazy loaded.

Here are some of the options I like in the plugin:

Example of the code:

import { StaticImage } from "gatsby-plugin-image";

export function Dino() {
  return (
    <StaticImage
      src="../images/dino.png"
      alt="A dinosaur"
      placeholder="blurred"
      layout="fixed"
      width={200}
      height={200}
    />
  );
}

More info can be found here: https://www.gatsbyjs.com/docs/how-to/images-and-media/using-gatsby-plugin-image

Gatsby v3.0

Last but not least: a new major version of Gatsby’s core! Some of the biggest takeaways:

More info can be found here: https://www.gatsbyjs.com/blog/gatsby-v3/

Thanks for reading!

Did you like this post? Check out my latest blog posts:

Chrome logo repeated in a grid
4 Sept 2023

Developing a Chrome extension to convert the current url to localhost in 1 click

  • javascript
  • chrome extension
  • html
TailwindCSS logo
12 Jul 2023

Setting and using CSS variables in Tailwind with React

  • css
  • tailwind
  • react
The word update spelled out with scrabble blocks
10 Jul 2023

Keeping your dependencies up to date in a visual way using npm-check-updates

  • javascript
  • nodejs