🔥 Astro 3.0, Spline 3D, State of CSS 2023
Hi there!
I’m super excited to bring you this particular issue of the Top 3 in Tech newsletter 🙌 Lots of cool stuff has been happening in the web development space recently, and today I’ve brought some real bangers to help you build cooler stuff.
Let’s get right into it:
1. Astro 3.0
Let’s kick it off with the biggest update from last week: Astro 3.0 was officially released, bringing tons of awesome new features to a very interesting framework.
In case you don’t know, Astro is an all-in-one web framework for building fast, content-focused websites. You can compare it a bit to modern JS metaframeworks like NextJS, NuxtJS and SvelteKit.
The difference is that Astro isn’t built on top of a single JavaScript framework. Instead it focuses on simple components that by default render static content (aka. HTML) and sends it to the browser. But at the same time, you can also create components using any of the modern JS frameworks (or just vanilla JS) to add interactivity to parts of your site using the “Island Architecture”.
I could talk for hours about Astro, but what’s really cool are some of the new features in 3.0. Astro is the first web framework to implement the new View Transition browser API - which is designed to easily make cross-page animations using the browser’s native tools (which hasn’t been possible before). They also launched their new Image component for automatic image optimization, improved performance and lots more.
It’s all super neat, so check out the official launch blog post to learn all about what’s new in Astro 3.0:
Or check out this LinkedIn post where I talk more about the View Transition API + a cool demo of what it can do:
Mads Brodt on LinkedIn: The new View Transitions API is so awesome
2. Spline 3D
Next up is another sweet tool for web developers: Spline. Spline is a collaborative 3D design tool. Which might get you thinking: hold up, I’m a developer - what do I care about a stupid design tool?
Glad you asked, because Spline is so much more than just a design tool. It’s a way to create rich, interactive 3D experiences using some pretty simple mechanics. You can add 3D objects like cubes and spheres, or any custom 3D model you can find online.
What’s cool about Spline is that each object can contain several “states” with alternative positions, rotations and more. And animating between those states based on stuff like time passed or user activity is as easy as adding an event listener for common actions like mouseDown, keyUp, scroll etc. There’s also controls for drag and drop, player movement and much more. Basically anything you need to create cool 3D experiences or even simple games.
And the icing on the cake? Exporting your Spline scene to pure JavaScript, ThreeJS or just an iframe link is literally two buttons. Making it by far the easiest way to get started with 3D on the web by embedding your scene directly on your website.
Again, I could talk about Spline for a long time - but it’s a lot more fun if you just check it out and see what it can do. Who knows, you might just get inspired to add some rad new 3D effects to your portfolio:
Spline - 3D Design tool in the browser with real-time collaboration
3. State of CSS 2023
The final pick for this week is another banger (just like I promised): The official State of CSS 2023 survey results were just released 🔥
It’s the go-to resource to get updated on what’s hot in the CSS world: Frameworks, new features of the language and much more.
As for frameworks, TailwindCSS continues to be the dominant player in terms of usage and overall satisfaction - with Bootstrap still being incredibly popular, although declining year over year.
As for features, the new :has() selector, the gap property and container queries are growing in both awareness and usage (and for good reason - they’re all awesome).
Either way, if you’re a front-end developer I highly recommend checking out the survey results to get the full picture of what’s going on in CSS:
The 2023 edition of the annual survey about the latest trends in the CSS ecosystem.
That's all for now! See you in 2 weeks ✌️
If you did, why not share it with your friends! Either by forwarding this email, or by posting about it on Twitter, LinkedIn, or Facebook. You can also simply copy/paste the link mads.fyi/top3 on other platforms. It really helps to keep me motivated and let the newsletter grow.
— Mads Brodt