Upgrading to Astro v3 hero

Upgrading to Astro v3


Code along with me as I upgrade my website to Astro 3.0! It’s 30% faster and more powerful than ever. We’ll explore new features like view transitions, image optimization, JSX Fast Refresh, and so much more.

Here are the highlights of what we’ll cover:

  • Upgrade packages: We’ll upgrade all our Astro dependencies to the latest version of 3.0. We’ll also make sure the site still builds, runs locally, and deploys successfully. This update includes a 30-75% performance boost for Astro components and a 30% build time reduction.
  • Image Optimization: Astro now supports image optimization out of the box. We’ll update the site to use the new built-in <Image> component and explore the new image optimization features. I ended up reducing the size of some of my images by over 90%!
  • View Transitions: We’ll experiment with the new web platform API that unlocks native browser transition effects between pages, without any JavaScript required. The goal is to morph the post thumbnails between page routes.

Overall it was a fun stream! I had some hiccups with the new View Transitions API but once we figured it out it turned out great! You can view all of the work in the pull request.

View pull request

Sign-Up for New Posts

Stay in the loop and get the latest blog posts about development sent to your inbox.

man sitting at desk in front of a landscape of rivers leading to a mountain range

Dev Workflow Intro

Your guide to creating a powerful and intuitive development workflow in the terminal.

The terminal is a powerful tool for developers, but it can be overwhelming to know where to start. This guide will help you create a powerful development environment in the terminal. Here are some of the things you'll learn.

  • Install packages and keep them up-to-date
  • Design a minimalist, distraction-free, user-interface
  • Use familiar keyboard shortcuts
  • Manage multiple projects with ease
  • Integrate with Git and GitHub
Get Started