Astro Weekly #10

Hello, Astro Weekly subscribers!

First off, I’m delighted to announce that our crew has now surpassed over 350 members in just 10 weeks. Thank you so much for your support so far, the response to the newsletter has blown all expectations.

There’s a lot to cover this week, so strap yourselves in for our biggest issue yet, as Astro 4.0 has now been officially released!

This week in Astro ✨

Astro 4.0 released ⚡

New APIs, faster builds, redesigned docs, and a unique new Dev Toolbar for Astro that enhances your local dev environment in new and exciting ways.

Astro 4.0 is here, and it’s stacked full of incredible new features.

Astro Dev Toolbar 🔍

Astro 4.0 debuts the Dev Toolbar, an advanced tool designed to elevate your local browser development experience with Astro.

This feature empowers users to inspect pages, identify accessibility issues, and extend the functionality of the toolbar by integrating custom apps and third-party tools.

Internationalization (i18n) Routing 🌏

A new internationalization routing system is introduced in Astro 4.0, simplifying the process of creating globally accessible websites.

This update enables users to effortlessly build sites with internationalization support by leveraging features such as automatic i18n routing and low-level helper functions for URL management.

Incremental Content Caching (Experimental) ⏱️

Astro 4.0 introduces Incremental Content Caching, an experimental feature designed to drastically speed up build performance for large websites.

Activating content caching on the Astro Docs codebase resulted in a remarkable improvement, reducing the "astro build" step from 133.20s to 10.46s — that’s approximately 92% faster! The overall end-to-end build time also experienced a substantial reduction, dropping from 4 minutes and 58 seconds to just over 60 seconds, an impressive 80% faster total build time.

New View Transition APIs 🪄

Since its introduction in Astro 3.0, View Transitions has captured the imagination of the developer community. Astro 4.0 takes things one step further, with more configurable APIs and exciting new use cases, including static HTML forms and dynamic client-side form components.

Redesigned Logging ❗️

Astro 4.0 enhances the Astro CLI with a redesigned logging experience, eliminating unnecessary logs and reducing error messages to occupy fewer lines for a more streamlined view.

Additionally, stack traces for errors have been refined to exclude irrelevant Vite runtime internals by default, improving clarity in error diagnostics.

Astro docs powered by Starlight 🌟

Starlight isn't just a snazzy name; it's the official documentation template for Astro, packed with all the best practices and patterns gathered over two years of managing the Astro docs at scale.

Brace yourself for the plot twist: docs.astro.build has now hitched a ride on the Starlight spaceship, bringing extra pizzazz to Asto docs!

Astro 4.0 is available now on npm. To get started on a new project, run the following command in to your terminal:

npm create astro@latest

If you’d like to take Astro 4.0 for a spin in your browser, visit https://astro.new/

Upgrading an existing project to Astro 4.0? Check out the v4.0 Upgrade Guide for full details and individual upgrade guidance for each change.

For a full breakdown of all the new features in Astro 4.0, check out the official Astro blog. If you need to take a minute to unpack all this awesomeness, that’s also understandable.

$100,000 Astro Ecosystem Fund 💰

If Astro 4.0 wasn’t enough to announce for this week, Astro also announced an unprecedented new community initiative — the Astro Ecosystem Fund.

This new fund will award $10,000 grants to ten project maintainers over the next twelve months. Each recipient will receive a one-time grant to support and continue their work on behalf of the larger Astro ecosystem.

The first three recipients have been awarded. Congratulations to:

• @pilcrowonpaper — for work on Lucia and Lucia + Astro middleware

• @ota-meshi — for work on eslint-plugin-astro

• @Mike_Andreuzza — for work on Astro themes & templates

Further information, including instructions on how to nominate your favourite projects for one of the remaining seven $10,000 grants, will be available in early 2024.

For all the details, head on over to the official Astro blog.

Astro Community 🧑‍🚀

Build your own Linktree clone with Astro 🌳

Following up the guide to building a wishlist app with Astro, Darko Bozhinovski is back with another awesome entry in his Quick-and-useful series that teaches you how to build small apps using Astro and other web technologies.

In this entry, Darko demonstrates how you can build a self-hosted Linktree and Linkinbio clone rolled in one using Astro and TinaCMS.

Demo: https://ltree.darko.io/
Theme: https://github.com/DBozhinovski/astro-theme-ltree/tree/master

Send emails with Astro 📬

Resend, the modern email platform designed with developers in mind, has been making waves in the developer discourse in 2023.

In this video tutorial, Chris Pennington (Coding in Public) shows you how to get set up with Resend using Astro. Chris covers setting up a dynamic JSON endpoint with server-side rendering, customising the process from the front-end, and using React Email to compose your emails.

If you have something awesome you’d like to share with the Astro community, you can reach me at [email protected] or via DM on X

AstroXtra 💫

What’s happening on Twitter X this week…

If you can’t use your newsletter to promote a tweet post of your own when can you? I had fun reading all your responses. Ditching .astro for .php — don’t rule it out! I guess the Astro team is saving Grand Theft Astro for another day. 🏝️

Direct link for web version:
https://twitter.com/nathanlawsn/status/1731682518250766539

Astro Showcase 🌠

“We build epic realtime interactive experience to blow people's minds.”

A bold claim by Lusion, an award-winning multidisciplinary production studio based in Bristol, UK. Well, prepare to have your minds blown! 🤯

Using a mix of Astro and Three.js, Lusion’s new studio website is quite literally, out of this world. There’s so much to unpack as you navigate around, but the astronaut scene as you scroll the homepage is astounding.

Other Astro projects in orbit 🪐

More great Astro projects worth checking out! ↓

Would you like your work to be featured in our Astro Showcase? Get in touch at [email protected] or DM me on X

Beyond the Astrosphere 🪐

What caught my eye outside of Astro this week…

• Interactive Guide to CSS Grid — learn the fundamentals of CSS Grid and more with Josh W. Comeau

• How Much to Make — a simple calculator to help you hit your financial goals

• Storefront.Design — a curated collection of the best digital storefronts on the internet

And that’s it for another week — or is it? 👀

In the meantime, drop me an email at [email protected] or send me a DM on X if you have something you wish to contribute to next week’s issue.

Have a great week, Astronauts!

– Nathan 🧑‍🚀