AstroJS - The JavaScript Meta Framework you'll WANT to use

Astro has been getting more hype recently than any other framework. After spending some quality developer time with it, I can say that it absolutely deserves the hype.
It's a Meta Framework that lets you use components from just about any other framework including React, Vue or Svelte. You can even mix and match components from different frameworks.
It also has the best implementation of partial hydration which loads the javascript for components only when you need them.
But don't take my word for it. Let's build something with it, so you can see why when I rebuild my blog later this year, it's what I'll be using.
Index
=====
00:00 Intro
00:40 Installing
01:58 Analyzing the Install
02:42 PicoCSS Styles
03:23 Creating a Layout
04:46 Markdown Pages
06:37 Props in MD Components
07:53 Creating an IMG Component
09:32 Using Globs to Read A Folder
11:55 Installing Tailwind CSS
13:22 Creating a Svelte Dark Mode Component
15:08 Partial Hydrating Components
Links
====
Astro: astro.build/
PicoCSS: picocss.com/
Tailwind CSS: tailwindcss.com/
Bootstrap Icons: icons.getbootstrap.com/
Follow Me
=======
Blog: raybo.org
LinkedIn: / planetoftheweb
Twitter: / planetoftheweb
----
Blog: raybo.org/

[@rahulkumarsingh1716]

Till now it is the best JS framework i have used in my 7+ yrs of Career.

[@babyboie20]

I was wondering why you sounded so familiar. I grew up on your lessons back in my Lynda tutorial days! WOW! So happy I found you on YT and thanks for the video!

[@planetoftheweb]

Yeah, glad I’ve been able to help. Still going strong here

[@jhalmu]

That was quickly and well presented. Thanks.

[@tobychidi]

Astro is really cool

[@planetoftheweb]

I am so impressed with it. I'll be redoing my blog on it.

[@planetoftheweb]

I'm totally loving it.

[@victordelacruz8440]

@14:46 Is the if/else conditional Svelte or Astro? It's the first time I've seen it in the html button tag.

[@planetoftheweb]

That's the svelte conditional

[@isomorphic97]

Nice Video, but two things I would do differently, instead of refit the heading after installing tailwind I would rather deactivate tailwinds reset functionality. The same with the dark mode, pico ships it out of the box. Why not using it at the end. It kind of feels unnecessary to install pico at all.

[@planetoftheweb]

I think I agree with the first one. With the second, I'd say that I'm using Pico out of convenience. When I'm doing these demos, I don't want to be typing it margins font weights sizes and a whole lot of other crud I'd have to do if I was really using Tailwind. These demos are meant to just give you a taste of some of the features of the frameworks to let you know if it's something you'd want to check out, not to be realistic demos of something I'd do in production. That's sort of the goal of The Toolbox.

[@rand0mtv660]

6:30, are you sure that doesn't work? Is it just the fact that you used frontmatter.bio instead of frontmatter.slug?

[@planetoftheweb]

Good point. I’m pretty sure I tried other versions of it

[@rand0mtv660]

@@planetoftheweb hey I just tested this and it seems just using curly braces doesn't interpolate these variables inside strings (so it's not a typo in the video). We have to use $ before curly braces. I managed to get it working by doing this "../images/${frontmatter.slug}.png".

[@planetoftheweb]

@@rand0mtv660 Cool. Checking it out right now. I guess I'll have to delete this video and post a new one. I really wish KZbin would just let you replace a video.

[@planetoftheweb]

@@rand0mtv660 I still think I like the technique of showing that you can also create a sub-component, so I might leave part of that there.

[@rand0mtv660]

@@planetoftheweb yeah that technique is great. I was just mostly confused how you can use these variables in some parts of markdown, but not the others so I wanted to investigate 😁

[@RoshinKrosh]

Can you do more with astro?

[@planetoftheweb]

I wouldn't say that you can do more, but it's more flexible than something that's married to a single framework. You can use it with any or many frameworks.

[@himabimdimwim]

@@planetoftheweb I think they may have been asking if you will make more videos about astro. The wording is a bit ambiguous.

[@vexkiddy]

Looks a lot like Svelte? no ?

[@multinaute]

Astrojs for next linkedin learning ?

[@planetoftheweb]

I’m not allowed to either confirm or deny any Rumors about my future projects…wink wink.

[@carlosl-f2433]

Finding Astro or and Qwik tutorials are not easy. If you know where to point me pls do.

[@greendsnow]

Fresh is much more fast.

[@planetoftheweb]

Been meaning to give that one a try. Faster isn’t necessarily better, but it’s good to see a new player in the game.