Astro Weekly #3

Greetings, Astro Weekly readers!

It’s been quite the week for Astro, so let’s launch right into it.

This week in Astro ✨

Astro 3.3 released ⚡️

Picture component is here, and it’s perfect.

Astro 3.3 has been released, introducing the highly requested Picture component, enhanced compatibility for syntax highlighting, improved package provenance, and several other quality-of-life improvements.

After the most upvoted PR in Astro’s history, Astro answered our prayers and introduced the experimental Picture component.

This dynamic feature allows you to effortlessly generate a picture element with multiple source elements, offering a new level of flexibility and control in image handling.

If you’re eager to dive in, using the new Picture component couldn’t be simpler. The example below demonstrates the use of the formats property to create a source element for each specified image format:

The new Picture component accepts all the same props as the existing Image component, in addition to the new densities and widths properties.

srcset support

Coming in hot alongside the Picture element, two new properties have been introduced for both the Image component and getImage() function: densities and widths.

These new properties serve to construct a srcset attribute, allowing for the specification of either absolute widths in pixels (e.g., [300, 600, 900]) or pixel density descriptors (e.g., ["2x"] or [1.5, 2]).

---
import { Image } from 'astro';
import myImage from './i-love-astro-weekly.jpg';
---

<Image src={myImage} width={myImage.width / 2} densities={[1.5, 2]} alt="I love Astro Weekly" />

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

Astro Community 🧑‍🚀

LaunchFast 🚀

Launch your SaaS in a day, not in a week with LaunchFast — a new Astro boilerplate by Rishi Raj Jain

LaunchFast includes everything you need to take your SaaS from idea to production in as little as 3 minutes! 🤯

Here’s what you can expect out of the box:

• Accept payments via Stripe or Lemon Squeezy

• Support for Google OAuth 2 / Email login and verification

• Deliver emails with confidence via Resend

• Serverless DB via Upstash

• Google & PostHog Analytics

• Deploy on Vercel or Netlify (or any other Node.js platform)

• Customisable components with Tailwind CSS

• + much more!

As a special launch price, LaunchFast is available for just $75!

_{(The above link earns Astro Weekly a small % of each sale — 100% of all kickbacks will go directly to supporting future growth plans for Astro Weekly)}

Decoding the Astro Framework 🎙️

Chris Pennington from the popular YouTube channel @CodinginPublic joined the Code Ryan podcast this week to share his personal tech story, as well as share some invaluable insights on the best use-cases for Astro, common pitfalls to watch out for, and tips for those eager to master Astro.

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 Showcase 🌠

Jerôme Abel got in touch this week to share this delightful portfolio built #withastro 🚀

Jerome called upon their artistic experience to provide inspiration for a unique visual identity, with great use of soft colour, typography and bespoke illustrations, elevated by Astro’s powerful first-class support for View Transitions to create a really pleasant experience.

But it’s not just on the surface level where Jerome’s portfolio shines, under the hood the site achieves a perfect 100 score across the board in Lighthouse 💯

Great job, Jerôme! 👏

You too can have your work shared with almost 200 subscribers, just like Jerôme. Get in touch at [email protected] or DM me on X

Beyond the Astrosphere 🪐

What caught my eye outside of Astro this week…

• uiverse.io — 3000+ open-source UI elements built w/ CSS & Tailwind

• SSG vs SSR in 10 minutes — No fluff explanation of the two common rendering strategies by James Quick

• GraphQL.wtf — learn something new with GraphQL, every week

That’s a wrap for this week!

Feel free to keep those suggestions coming for Astro Weekly. If you've got something you'd like to contribute for future publications, please drop me an email at [email protected] or connect with me on X.

Have a great week, Astronauts!

– Nathan 🧑‍🚀