Astro Weekly #22

Astronauts. Are you ready?

The countdown is finally over. Houston, Astro DB has landed! There is a lot to cover in this week’s newsletter, so we’re jumping right in! Buckle up.

This week in Astro ✨

Astro DB has landed 🚀

Astro redefined our expectations for static-site generators. Now, it’s time for Astro to redefine working with data inside Astro.

Introducing Astro DB. A fully-managed SQL database designed exclusively for Astro.

https://astro.build/db/

Astro DB enables you to add a hosted database to any Astro project in seconds. It’s fast, lightweight, and ridiculously easy to use.

Astro DB is a complete solution to configuring, developing and querying your data inside Astro. A local database is created whenever you run astro dev, using LibSQL to manage your data without the need for Docker or a network connection.

Unified developer experience

Astro DB offers a deeply integrated, unified developer experience, with features such as visual data viewers, TypeScript ORM, schema management, instant local development, and a whole lot more.

Astro DB is available to try out today and offers a generous free tier, with no credit card required.

If you’re keen to get started, we strongly encourage you to read the official documentation, but if you just can’t wait to start building, run npx astro add db (requires [email protected] or later).

Introducing Astro Studio 📡

Astro Studio introduces a whole new way of managing your Astro projects.

Astro DB can connect to the Astro Studio platform to quickly add a hosted database to your project in seconds.

From the Astro Studio web portal, you gain access to features enabling you to view, manage, and deploy new hosted databases with ease.

Astro Studio is available to try today:
https://studio.astro.build/

Further details on Astro Studio are expected to be shared in due course, so keep an eye on official Astro channels.

Astro 4.5 released ⚡️

In between all the buzz surrounding Astro DB, you could be forgiven if the release of Astro 4.5 slipped you by.

This latest release introduces improvements to View Transitions, syntax highlighting, multi-CDN asset fixing, as well as experimental support for JSON schemas for data collections, and a new script detection algorithm.

The headline feature, however, is the first-of-its-kind dev audit UI.

Astro 4.5 introduces the Dev Audit UI, simplifying the process of identifying web performance and accessibility issues directly within your browser.

With a user-friendly interface, developers can effortlessly visualize and navigate audits, categorize issues, and access detailed information, all without leaving their development environment. This streamlined approach ensures that crucial testing is no longer overlooked or cumbersome.

To explore all the features included in Astro 4.5, visit the official Astro blog for a comprehensive breakdown.

Astro Boosters 🚀

Astro Weekly is brought to you this week with the support of Tailscan.

Tailscan is the ultimate tool for Tailwind CSS. Build, design, and debug your Tailwind website visually with Tailscan, right within the browser.

Tailscan is available as either a monthly or annual subscription, or for a limited time only, pay once and use it forever.

Astro Weekly receives a percentage of revenue made through purchasing products via the links above. 100% of all proceeds help support Astro Weekly and/or Astro projects.

Astro Community 🧑‍🚀

Get started with Panda CSS 🐼

Panda CSS is a build-time CSS-in-JS library that transforms how you write CSS styles in your websites and applications.

If, like me, you’re new to Panda CSS, then check out this awesome starter kit from Elian van Cutsem that has everything you need to help you get started with Panda CSS inside your Astro project. Bamboo not included.

Dynamic API endpoints in Astro 🪝

Can Astro CRUD? That’s what Chris Pennington aims to answer in his latest video on his YouTube channel, Coding in Public.

What else I’ve been reading this week 🤓

Check out these great posts from the Astro Community ↓

• 🧾 Create and print an invoice with Astro and Tailwind CSS

• 🧑‍💻 Get your Astro web development setup right

• ⚡️ Build embed components with Astro, Qwik and StackBlitz

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

Astro on X 💫

What’s happening on Twitter X this week…

Direct link for web version:
https://twitter.com/CarlLindesvard/status/1767274880045638036

Astro Showcase 🤩

This week’s Astro Showcase is no stranger to the spotlight, having already been awarded the Site of the Day & Developer Award from Awwwards.

Museum for the 21st Century is an artistic masterpiece that captivates with its stunning micro-interactions and animations. Under the hood, the site uses GSAP and Astro to achieve these remarkable results.

Put the Astro Showcase March ‘24 in the trophy cabinet! 🏆

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…

• dm.new — a quick way for people to slide into your DMs on X

• Tailwind CSS v4.0 — first alpha release of the next generation of everyone’s favorite utility-class CSS framework

• Pines UI — library of animations, sliders, tooltips, accordions, modals, and more built with Alpine.js and Tailwind CSS

Phew! That’s a wrap for Astro Weekly this week.

If you made it this far, I appreciate you! For those who’ve already shot off to start building with Astro DB, that’s also totally understandable.

As always, if you have something you’d like to share with your fellow Astronauts, you can reach me at [email protected] or via DM on X.

Have fun out there, Astronaut.

– Nathan 🧑‍🚀