Astro Weekly #1

Astro 3.2 released, View Transitions & React Three Fiber + more

Happy launch day! 🚀

Thank you for being part of the inaugural crew of 100+ Astronauts to receive Astro Weekly. The response since Friday has been overwhelming, so a huge thank you to everyone for their kind words across X and on Discord.

Now, I did pitch this as a 5-minute email roundup, so let’s dive right into it!

This week in Astro ✨

Astro 3.2 releases

The major news out of Astro this week was the release of Astro 3.2 and with it some nice improvements to everyone’s favorite favourite (spoiler alert, I’m British) new kid on the block. View Transitions.

Among the list of improvements is that the View Transitions router now includes route announcements.

What does that even mean?

In a typical multi-page application (MPA) scenario, when moving between pages, assistive technologies will announce the page title upon completion of the page load.

However, this automated announcement does not occur during client-side routing. Consequently, individuals relying on these technologies to announce routes may not be informed when a page has transitioned.

The View Transitions route announcer operates following the astro:page-load event. It searches for the page's <title> element to make an announcement. In cases where it cannot locate a <title> element, the announcer resorts to announcing the first <h1> element it encounters, or if none are found, it announces the pathname as an alternative. Nice!</title>

Check out the official Astro blog for more details on all the new features in Astro 3.2, including History Replacement on Links, JavaScript Navigation API, and Dynamically Added Integrations.

Astro @ ViteConf 2023

Members of the Astro core team will be presenting at ViteConf this week, and it couldn’t be easier to hear what they have to say. The event is 100% free and remote.

ViteConf takes place 5-6 October; tickets are available for FREE — you can also customise your virtual ticket to express how much you love Astro.

Astro Community 🧑‍🚀

Now there’s a headline you probably weren’t expecting to see

jQuery + Astro

When I started to think about what to include in the very first newsletter, I didn’t expect to find myself writing about jQuery, but alas, here we are.

Salma Alam-Naylor has published a useful written guide on How to use jQuery with Astro for those who still love the OG JavaScript library. Great news for Matthew Phillips.

jQuery is my favorite frontend framework (yes, in 2023).

@matthewcp

ShopTalk Podcast 🎙️

Elsewhere, Astro co-creator Fred K. Schott appeared on the most recent episode of ShopTalk to discuss all things community, WordPress + Astro, View Transitions, and teased a few details about Astro Studio… 👀

Astro Showcase 🌠

Every week I see some amazing examples of what’s possible with View Transitions, and every time I think to myself “This is it, no demo of View Transitions can beat this.” And then there’s Maxi Ferreira.

Maxi recently shared this incredible example of View Transitions and React Three Fiber to render an animated 3D model that persists across page navigations. This is it, no demo of View Transitions can beat this.

Tune in on Twitch

If you’re curious about how this demo came to be, you can check out the recording of Maxi’s stream, and if that whets your appetite for more, Maxi is also streaming on Twitch this Wednesday (October 4) with Paolo Ricciuti where they’ll be covering View Transitions in SvelteKit.

Have something you’d like to showcase in the future? Let me know at [email protected] or DM me on X

Beyond the Astrosphere 🪐

Beyond the what? Each week I’ll be dropping a few links from outside the Astro project that have caught my eye which you (hopefully) may find of interest.

This could be anything from tips to help improve your developer workflow, to a great resource for learning Next.js, or AI tools to make your skills feel even more redundant.

  • TailScan — browser inspector for Tailwind CSS

  • CSS Scroll Animations — a 10-minute video demonstrating vanilla CSS scroll animations using the new timeline properties

  • Blendicons — a free collection of 145k+ icons

And that’s it for Issue 1! How did I do for time?

If you found this useful, please share it with your friends. If you’d like to share any suggestions on what you’d like to see in Astro Weekly moving forward or perhaps have something you’d like to contribute for publication in the future, please drop me an email at [email protected] or reach out on X.

Have a great week!

Nathan 🧑‍🚀