 Hi there, my friend and friends. If you'd really like the simplicity of writing vanilla HTML CSS and JavaScript, but you'd like the extra features and other cool stuff you can get from having components and using things like scope styling and all that other good stuff. And maybe you have a simple project you'd like to sprinkle in a little bit of react here or you're using svelte and you just need it for this one little thing over there. Well, if that's the case, then astro is amazing. And it's something that I've been using a lot lately. I'm really in love with it. And today I want to look at why I think it's such a cool tool. So here is their website. It's nice and simple build the web you want. And really the if we jump on over the documentation, where they talk about some of the benefits here of it where we have the component islands server first API design zero JS by default. So it is a static site generator by default, which is really, really cool. It's a really nice feature that it has. So it just makes you have much faster websites as a default. And there's a lot more going on including UI agnostic. So it supports react react view svelte solid, lit and more meaning, you know, I can do it one way, you can do things your own way. But what I really like about astro, despite all of that is the simplicity of it and how easy it is to get started with it. For me, when I was using other static site generators, and I love like I use 11t for my personal site, I absolutely love it. But you're learning the static site generator, you're also learning templating tools, and you're jumping between different documentations and it can seem like a little bit much, especially early on. And I feel like astro removes a lot of that friction and it makes it feel like a very simple experience. And so today, I don't want to look at how we get started with astro. Honestly, if you just come and go into here and you do they're getting started, their docs are really good, you can just look through on the getting started, or you can go to the build a blog here and follow this tutorial. It's excellent. I definitely recommend it if you want to get started with astro. But this is more of a sales pitch with it. So what I'm going to do is take this page that I built recently. You know, I just use vanilla HTML CSS and JavaScript to be able to create it. And thanks to your recommendations, I'm looking at astro. It was suggested that I look at how we can modify it to be an astro project so we can see what some of the benefits of it are. So right now, everything is working. It's basically exactly what I had before. It's just regular old HTML with one important difference. As you can see up here, it looks like front matter. And it basically is front matter that's up at the top here in a regular what would be an HTML file, but it's my CSS that's coming in this way instead of through a regular link. Now I could use a regular link. The advantage of doing it through the front matter and importing it this way is if ever I do want to make a change to my CSS. So let's just change this to 1.5. I think we'll see those dots update right there. And so if I want to take advantage of the hot module reloading, then I just want to have this, it's, you know, just floating around in my source. I have my styles and my main. I'm just importing it this way instead. This does not get shipped like this. Remember, there's no JavaScript by default. So astro is going to do its magic behind the scenes, and it will just become a linked file. But for now, just bringing this here instead of having it as a link there is the only difference I've made from where my project was. And the first thing I want to look at is with this list of different icons we have here, because when I created that, I did it all the way down here. And it was kind of annoying because I had my list item, then I have this visually hidden paragraph, and then I have my image that I was bringing in. And maybe I want to, you know, bring in another one of these so I could come on to here, I could duplicate that, and then we end up adding another one here. And, you know, it's not that bad. You're copying your pasting and you're duplicating code, but sometimes that can be a little bit annoying. And then also, if I want to go and style it, I had to come in here and then I had to search around and find the right styling. It's right at the bottom in this case, and I'm in the right spot. But when you have a large style sheet that can be a little bit annoying, and people are always asking me about organizing their CSS, and what's the best way to organize it? Do I split things up into multiple files? And so we're going to see how Astro can really help with that as well. So the first thing I'm actually going to do here is I'm going to come into my project and in my source folder, I'm going to create a new folder called components, because we're going to create a component. And if you've never dealt with components before, you know, learning a language just to be able to do components can be a little bit hard. We're going to see how simple this is and how great it is. So in my components here, we're going to do a new file. And because it is this list, we're just going to go and look at what I called this. It was my icon list. So we're going to go with that. So I will do icon list dot Astro Astro supports dot Astro files, which will look a lot like just HTML files basically, sort of, we'll see some differences. But it also supports markdown files. We'll see that in a little bit later. It supports MDX as well. So there's a lot of cool stuff you can do. But for now, we'll stick with this Astro file. And I did start it with a capital I it's just the naming convention when we have our components. And so let's jump back to my index here. And I'm just going to take this entire UL that we have right here, I'm going to cut it. And it's going to disappear from here. We're going to go over to here, and we're going to paste it in hit save. And now we have a component basically. So what we can do is I can come back over to here. And where we had that, I can actually come in and do icon list. And this is getting autocompleted. I did install the Astro extension. And the nice thing with that is when it finds this, I'm going to use that. So we get my icon list coming in. And you can see it's come here. What the extension has done is it's actually automatically imported that at the top here as well, because it recognized what I was bringing in, which is really, really handy and makes life a lot easier. And so right away, you can see how we can sort of clean things up. I just do icon list and it comes in. And then if you want your icon list, it's right here. And you know what the name of it is. You can see it's right there. So I can just do my control P. I can start writing icon list. It's right there. And I can come in and make my changes to it. So that's that first thing that you can do. You don't have to do anything else other than that. And you're using Astro and you're sort of creating these different components, which is nice. You can be a little bit more organized with it. It's also really easy if you need to reuse this on another page or reuse it somewhere else. But the next thing we can do, which is really cool is I'm going to come down here and make a style tag. And this is where things look a little bit different. But what we can actually do is I can take all of these styles that are related to this icon list away from my main CSS file, and I can keep them here as well. And you can see all the styling is working right there. So that's pretty cool, right? I think that's really awesome. And this is one thing I like about it. The other thing that's nice is these are scope styles, meaning if I had an icon list class somewhere else, that this is not going to affect it. It's only going to affect what's inside this file. And that actually means that I don't need this icon list class on here anymore. I could just do this and then I could come down here and I could just have this as my UL. And that's here. We got rid of it in all the places. Let's just go through and make sure that all of them are. So that's my UL. And then like here, I don't even really need to do that. I could just do something like this. And I don't need to worry about this CSS bleeding out and affecting anything else. If we come and take a look in here, let's go look in our DevTools. We're actually going to see that things look a little bit different because Astro is adding these classes onto here automatically. And the class that we put on before, all that stuff I did, you can see it's just on my UL and then it's using the where to keep the specificity low and it's putting all those styles on there based on that class that's right here. So it's a really nice way to work with some scope styling without having to do anything. This just works. It's super simple and it's that next step that you can do. And then you're getting that separation of files where you know where your CSS is because you're just going into that component and your CSS is right there. So now if ever I need to change this, I can just remove one and we get one less I should have taken the LA as well. But now we're down to four and so on and so forth. But we could even take this another step further if we wanted to just to run through this practice again. And to get content that's maybe a little bit more dynamic. So what I could do here is actually remove let's take all of these allies off. We're going to take everything out. And I'm going to go and open up my components and make another new file in here. I'm going to call this icon list item dot astro. And what I'm going to do is paste this in here. But in this case, we want things to be a little bit different because I mean, I could come here. And then so here I could say icon list item, the import is automatically getting brought in by the astro extension. So again, definitely make sure you have it. And now I should be able to get one icon. And let's get another one two, three, four, five. One thing you'll notice now is when I do that, this styling isn't actually coming in and doing anything because the allies here, it's looking for ones that are in this file. And it's not it's not looking for the ones that are in here. So that's really important is like, remember, I said the styles are self isolated. So the styles of my icon list item are isolated to the styles in there. So now what I'd probably want to do is actually take all of these styles and we can take them. And there's ways of actually making global styles, even if you're in a scope style like this, but we'll just come here, you can open up a style, paste that in. And now our styling for these are all here. My styling for the list itself is over here. I don't know if I'd necessarily take this extra step like this, but I just want to show you how sort of this next step of something we can do because right now we have all these HTML and we want to be able to update those a little bit easier. And this is sort of as complicated as things are going to get at least for what I'm showing right now. But what we want to do is I don't want HTML to be here. And I want this source to be something that could be updated. So we need both of these to be a little bit more dynamic. And so to be able to make something dynamic content, what I'm going to do is wrap this in curly braces and I'm just gonna write skill here because this is the skill that we're talking about. And I am getting an error right now. Don't worry about that. And we're going to come here and we're going to do the same thing. We're going to write image. And whenever we see these curly braces, it basically means that there's some JavaScript involved somehow that's coming into what we're doing here. And it's giving me a syntax warning because right now it's saying I don't know what these are. So what we're going to do is we're going to come and add some front matter up here with those three hyphens right there. And then what we can do is we can say const. And we're going to do skill and image. And we're going to say is equal to astro dot props. And now you can see that the syntax highlighting is gone from here. And what the astro props are is whenever we use a something like this, we can pass props through to it. And then so we're saying that the skill and the image we're deconstructing the props here. And we're finding the skill and image from there. And then we can insert them dynamically. And basically, you just need the names to match up. And you're going to have that there at that there. And then we can jump on over to here. And I can write skill is equal to HTML. And I can write that the image is equal to the path to my image, which I think was HTML dot SVG. And that one's actually not going to change. So let's go and grab this next one. And actually, we got to save here, they should all disappear. There we go. I was like, wait, why didn't there we go? So now what we can do is we can come in with the same type of thing. But what we're going to have here is this one was my CSS. And then I have my CSS coming right there. And let's go and take a look in here at what's actually getting generated. And you can see that I'm getting my Li, then I have my paragraph that has the visually hidden with HTML. And then I have the HTML icon. And then over here, the visually hidden has the CSS. And then we get the path to the image there. So it's just taking this text here, and it's inserting that where we have skill here. And then what it's doing is grabbing the path to my image right there. And it's inserting it where that source is, and it's doing it separately for each one. So really nice, simple way to be able to build out our components. And then if you have other ones that you need to do, well, it's super nice and easy to add those extra ones in. And there we go, we have all of them brought back in right now. Again, it works really well. It's relatively simple to do. And this would definitely be the first type of thing I'd be using on a regular basis. If I started bringing in components and all of that through Astro. So super, super handy. But another thing we can do, and this may not be the best use case for it, but I still think it does work where we're going to look over here at these jobs that I brought in. And you can see we have the list of jobs that come down underneath my head here. And what I want to do with that is let's come and make a new component. So we're going to do a new file. And I'm going to call it job listings dot Astro. And then we can jump back on over to our index. And we can go and take a look in here. Here's my individual job. So let's just go and take this entire job listings right here. I call the job experience. We'll grab all of this, cut it out of here and go over to the job listings and paste it in. We can close this extra stuff down. We don't need that anymore. Hit save and it will disappear. And just like before, I can come in now and save my job listings. And once again, Astro has automatically imported that up here. So that's super and it's showing back up. We could take my styles and bring that over as well. I definitely would actually do that if this was a real project and have everything together. But what I want to look at here is making this a little bit more dynamic. And so to do that, what I'm going to do is in here where I have my source, I'm not going to be in any of these, we're going to create a new folder called content. And it should not be inside my styles. We want that directly in my source, we can move that over and I have this content one that's right here. And the reason I'm creating content is we're not going to be creating components here. I just want to create the content around each one of these jobs. So for this, I'm going to be using markdowns. And then so in here, you might have blog articles, authors, you could have tons of different stuff. So what we'll do is we'll make a new file. And I'm just going to put jobs and then job one md. And I'm going to do this as a markdown file. So it's content, then a folder jobs. And then we have job one that's in there. And I've already set this up as a markdown file. So I'm going to paste that in. And so you can see that we have that right there, the company, the role, the year and then I put the description right here. And actually I've gone and just now just really fast made job one job two and job three here all in markdown files just to speed things up a little bit. And so we have all of those there, they're all ready to go. And they're just sitting there is markdown files. So what can we do with that? And this is where definitely we're stepping things up a little bit into a little bit more JavaScript and stuff, but it's still not going to be anything that's too complicated. And we're going to come back here to my job listings. And in my job listings, let's make this a little bit bigger, just so we can see everything that's going to be going on, or we'll keep one of these jobs here, actually. So let's just leave that one. But I'm going to delete all these extra ones. So we'll just come down, delete all that. And the only reason I'm even leaving this here is I want to use it as my template for what my jobs are going to look like. So what we can do is we're going to put in the curly braces here like that because again, anytime we see that when it's inside regular HTML, it means that we're going to be writing some JavaScript. But remember, Astro does ship zero JavaScript by default. So this will be static files that are generated from what we're doing here. Now, for this to work, there is another little Astro thing. So I'm going to come up here and we're going to create our front matter at the top here. And I'm going to create a new thing. So we're going to say const all jobs and we need to collect all our jobs. We want them all, you know, where can it find all the information for the jobs? So we're going to do it equals a weight and you might be going, where do you find this? Don't worry, we'll talk about that in a second. I'm going to say astro dot glob. And there's different ways we can actually do what we're doing now. We can create collections as well. But for something simple like this, I find this is the easiest way to do it. And then we just basically need to find the file path. So we're going to go a step back, right? Because right now we're in our components folder. So I want to go out of the components folder. I want to go into my content. Then we go to jobs. And then we're going to do a star dot md. So let's just make this a little bigger so you can see everything I put there. So we're just finding that and we're just using the glob of star. So it's finding all the markdown files that are inside of jobs. And so those are all going to be collected together. And that means we can now do something with them. And this is where things get kind of interesting. And so we're going to be doing some JavaScript. And what we want to be doing here is we're going to go to our all jobs that we have up top. And we're going to map over them. And in this map, what we want to do is look for go through each one of the individual jobs that is part of this. So we're going to put in a like that and then like that right there. And so now we want to do something. So let's start off with the first thing. We're just going to grab this paragraph that's right here. And let's bring it in there. But obviously we don't want it to be 20. We want this to be dynamic. And we can't do like before where we said year because where would this year be coming from? Well, it's coming from this job and we want each one to be separate. So we can actually get that information from here. So I'm going to say job dot front matter dot year. And now if I hit save, we have all those years are popping up at the top here, because it's going through all three of those jobs and it's generating that. Huh, that's kind of interesting, right? And you can see it because I didn't have a lot there. Prettier was jumping in and trying to solve things for us a little bit. So let's come in and do a little bit more work here where we're going to have this should be inside of a job class. So we have a little bit more going on. Then we can have my H2 that's or we have this whole you know what, let's just grab all of this and cut all of that out, delete this year and paste that there. And the reason we have this front matter here, we have job dot front matter dot year is just because if we go and take a look at my jobs, let's just go and look at job three here. Anything that's in this area here is considered front matter. So we have the company, the role of the year. These are all different pieces of information in the front matter of this markdown file. And so jumping back over to here, we can change this. And now we just do job dot front matter dot role. And then the last one right here, you can probably figure it out job dot front matter dot company. And I'm going to save even though we haven't brought in the description for these yet. And we can see, look at that, we got them all coming in. So cool. Awesome. So I'm really happy with that. But we have this last bit down here that we still need to solve. And that one obviously isn't being done with front matter, that's the actual content down here. So for that, how can we get the content in? How do we know what that is? And there's a few different things we could actually get from here. Now, I'll show you one thing we could do, we could come here and do job dot raw content. And this would actually work right now. And you can see it's all coming in. But I'm not necessarily going to recommend it. Because what it would do it lets us come to job three here, and we're going to add another paragraph. So here is a second paragraph. And when you're doing front matter line breaks like this, create new paragraphs. But if we go and look at this third one, the second paragraph is not because it's raw content. It's just grabbing everything in here like it's a string. So even if I, you know, tried to make this a heading as well, it's not going to work. It's literally going to bring that in, which does not look great. Now, the other thing that you might find when you're digging around is we have more than just this. We also have compiled content. So we could come in and do compiled content. But oh my goodness, now we get our tags and everything. And that's a complete mess. We definitely don't want that one. So if neither of those are what we actually want, what is it we want? And this is definitely one that is a little bit different looking where we're just going to do a paragraph like this. And what I'm going to do on this paragraph to be a self closing paragraph, which is kind of weird. And this is where we're getting away from this idea of like these are kind of easy to figure out, in my opinion, if you're coming from native HTML and CSS, you know, we're going to care we're looking at the front matter. We've brought in Markdown, which maybe you're not used to, but it's the easiest thing to learn. And you don't need to use Markdown. You know, you could just have the content coming in. You could do this like we did those lists earlier. But this one's a little bit weird where what I'm going to do is a set HTML. And if you're used to any JavaScript, this is very similar to doing an inner HTML on something inner HTML, right, where you're just injecting HTML into something. And this also does come with the caveats of using inner HTML. So you do want to be a little bit careful if you are using it, make sure you trust the data source that where things are coming from, you know, if you were allow it, you know, if you were opening this up to like third party people being able to like use a CMS to bring in the content that's getting injected in here, maybe that would be a little bit dangerous. But if it's just for your own personal site and you're in complete control of everything, then you should be fine. And what would the HTML be? And we saw before the compiled con job.compiled content. The job compiled content was giving us actual raw HTML. So now if I had save on that, you can see it looks back to normal, but we are actually getting like full Markdown support coming in through here. So in this case, I don't actually need that second paragraph. Maybe it's a little bit of overkill for what we built here because we saw the rock content did work, but I just I did want to like highlight how we could do something like that. If you needed a little bit extra of being able to come in here. Another option instead of doing this, if you find that's like a little bit extra is you could just not have the content here and you could come here and put description, right? And we could just bring that description up here and leave this blank. That'd be completely fine as well. And then here you just have your job dot front matter dot description. And that would bring in the description. And so that's definitely another option if you prefer going that type of route instead of doing it the way I did here, but I figured I'd show both options just so we have different ways of achieving the same type of thing. And what's really nice about this now is, you know, that took a little bit of setup, though really creating this is no more work than it really was before where we had to create everything. But the advantage of this now is when you need a new one, you just come here. I'm going to copy all that. We can come here, make our new file, which will be job or md and I could have, you know, 20 maybe way back in 2010, I worked at some some other company as a sales engineer and hitting save on that. I now have the sales engineer for some other company right here. And it just took seconds to generate. And it's right there. So it just makes life a lot easier for that. If you have blog articles, other things, it's really fantastic. And this is really just like an overview of a couple of the things I really like. So we had, you know, creating components, having the scope styling, which is absolutely amazing, is really nice for organizing your CSS and you could stop right there, or you could add in more dynamic content, or you could take the next step to going to what we were just looking at now and adding more stuff on top. And I just sort of wanted to wet your appetite and show you some of the things that are possible with Astro. Let me know in the comments below, we could do something definitely more in depth starting from scratch, though I really well recommend their documentation. It is fantastic and a really good way to get started as well. With that, I would like to thank my enablers of awesome Andrew James Enrico, Michael Simon, Tim and Johnny, as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your corner the internet just a little bit more awesome.