Speaker would like to talk about something in a future show. They like the Tool bar, which appears in the browser during development and is never included in the final build. They created a toolbar app to highlight interactive Ui component islands on pages.

Speaker explains how to view props and click to open a component directly in code editor.

Speaker explains to Speaker some of the technical details of the website development. They are excited about the new build time that was eighty percent faster. Now Starlight is the official documentation template for Astro. Speaker is talking about a platform that allows other people to create documentation sites. They have created a documentation website called Starlight.

Speaker would like to have the back end stuff laid out for them so that they don't have to rework it all the time. They will probably make a decision this week. Speaker wants to repurpose the screen share to turn it into a dashboard with log in and log in. They will look into it more. Speaker sends everyone off with some traveling music called Thank you.

Speaker would like to create a framework that they could use as the basis for their dashboards. They have been building a lot of Astro sites. They want to add support for components built with any supported Ui framework. Speaker wants to create a dashboard using Starlight as the basis. They loaded the project in Stack Blitz.

Speaker is trying to set up a new tab in Stack Blitz. They want to be able to include spelt components in their dashboard. It didn't work at first. Now it works. Speaker is importing both the counter and the Hello world.

Speaker wants their website to be loaded when the client loads. They don't understand why the hello from the spelt astro config file is not showing up.

Speaker is working on a large side project and needs a dashboard for it. They are looking for a framework to create a dashboard for their talks and presentations.

Speaker wants to create a single page app with the dashboard built in. Felten is doing some front end stuff with Astro. Speaker is interested in it. Felten has just released Ah. Speaker will copy and paste the link and put it next to the video to show what they are working on.

Speaker explains to Speaker what is Astro and discusses new features. They are excited about the Astro Dev Tool Bar.

• astro dev tool bar
• dope
• tool bar hides
• toolbar app
• component
• code editor
• initial version
• spell view

Welcome back.

Your dreams or your ticket?

Welcome back.

To that same old place that you laughed about.

Well, the names have all changed since you hung around.

What's going on all right?

This is a stretch.

Okay, cool, all right.

So this one, like I, like I was saying before, I'm doing some Research into something that I could possibly hopefully use in my new side project, right?

And but So I'm not using what let me just get, let me just set this right so.

Uh, let me share my screen here real quick.

Let me, uh, get this one.

This one here, Okay, so start screen share with a mouse.

Here we go.

So Like I said, I'm working on a new side project, right?

And it's going to be a larger side project, probably like the largest side project I've worked on.

Thus far right.

And with, with large projects, a lot of times I need a dashboard, right?

So, for example.

Like this one here.

So this is my dashboard for my in or doing stuff that I project where I kind of like chronicle my trips or take pictures and videos and stuff and post to it, right?

So that's that one for this one here is.

So when I'm doing like talks and things.

I have them listed here, so this is like the dashboard for it, so I can actually it is a thing where What I'm saying will turn into text and show up on the person's screen, so they can kind of follow along with stuff, right?

If it's like a different language and all these things.

Another one is for my actual personal site, lifelong dev.

And so this is where I can put like the different events and projects and presentations, right?

And then this.

So I'm like cool, so.

You can see they're all kind of different and I kind of have to set them up.

Every time, right?

And I was looking for.

Maybe if there was some sort of like thing I could just framework that I could just make and not have to worry about like the layout really, but just like the parts that make up the admin that I would need for that particular application, right?

So I don't have to worry about like, oh well.

You know.

I'm going to do for like tabs and stuff or like things on the side here, all kind of want to have that already there and I can just like fill it out and it will just Work with all the routing and all that stuff, you know what I'm saying?

Instead of me having to do all that.

And so recently, found out that a lot of my projects, I've been especially like the front end stuff, not necessarily the dashboard.

All the dashboards so far have been like single page apps built in.

S.

Felten doing a lot of like front end stuff, like just basically like web apps, not nothing super huge right so far with Astro right?

So just like a lot of the front end stuff I've been using Astro, and they just released Ah.

Four point zero, which is pretty exciting.

And so, uh, I'm gonna copy and paste this link and it'll be next to the video so you can check it out for yourself.

So I figure let's take a quick look at it.

And there's something that's pretty exciting that I'm really into.

Well, there's a few things, but there's one that was like, ohh, this is super awesome that I want to show.

And I was, I was working on it and so hopefully, and I kind of ran to issue, but we'll see, all right.

So four point zero, right?

So this came out, the fifth is the tenth now, so since the last time the show.

So Yes So Introducing Astro Four Point Zero New Apis, Faster Builds, Redesign Docs.

And a unique development Tool for Astro that enhances your local Dev environment in new and exciting ways.

I'm always down for new and exciting ways as long as it's not too new and not too exciting, because you know, I live a pretty boring life and so that's by design, all right.

I'm switching around some stuff here.

Cool Yes.

Uh, let me move this.

The second Okay.

Cool all right.

So further down and say, what is Astro?

Astro is pretty awesome.

And that's, I added that I don't think it actually says that, but Astro is awesome.

So new things are like the Astro dev Tool bar, which we'll take a look at, you know what I'm saying, I think, yeah, take a look at that.

Internationalization, which is pretty dope on the routing.

That's awesome.

Incremental content caching So if you do like server side rendering No, no, no service.

Static site generation And it was like s, s something.

Static site generation Uh, basically if you have like a lot of files, every time you make a change, all those files have to be generated right, whereas this one I've also heard of incremental static generation was that it is something where it knows what changed and then just statically generates just that instead of having to go through all of it.

So that's pretty much what that is, I think.

As kind of read through it quickly, so read for yourself if you fit your use case.

New view Transition Api That's pretty awesome.

So I was looking into that.

That's pretty cool.

And then they have some redesign logging and redesign documentation.

Now the redesign documentation that leads into what I want to talk about.

But let's see Yeah, you can do a bunch of stuff here and it kind of tells you know how to run the latest ones here.

This is pretty dope.

The Astro Dev Tool Bar.

So it was, I think, behind a flag in an earlier version, but now it's there, uh, like just out of the box.

And so introduces the Dev Tool bar, a powerful new way to enhance and customize your local browser dev experience with Astro.

Inspect your page, catch tricky accessibility problems, which, that is dope that actually point that out for you, and extend the Tool bar itself with custom apps and third party tooling.

And that got me thinking like, I wonder if I could do some stuff so Maybe in a future show I might talk about something.

Maybe if I can get something to Work, we'll see.

All right now.

The Astro dev Tool bar only appears in the browser during development and is never included in your final production build, which is dope now.

The Tool bar hides at the bottom of your page until you need it, so you kind of like hover over it, so hover nearby in the Tool box pops into view with several different applications available.

All right, cool, and I think they kind of have it shown here, so yeah, so.

Here, so it kind of shows up at the bottom, right?

And then the little shows you like, oh hey, there's this thing here, and they can click to go to the file directly.

That's pre dope.

So yes, so inspect that, inspect, so highlight the interactive Ui component islands on your page.

This toolbar app was designed to leverage Astro's unique island architecture, which is pretty dope highlighting islands on your page and can help you understand which elements are interactive versus lightweight static Html.

So sometimes you may lose track of where your component is or what have you if you're just looking at it.

So this way you kind of like show you like, Oh hey, this one is the interactive part, this other stuff is static Html, right?

So from there and then that can also help because like sometimes like wait, why is this thing not working?

And you click, inspect and it doesn't show up as an interactive Ui thing.

They're like, oh, I forgot to do, like client load or some client directive, you know, I'm saying.

Or maybe the opposite, like oh, this is not supposed to be, this was statically generated kind of thing, so that's how I would use it.

So from there you can view props and click to open a component directly in your code editor.

I wonder how that Work if I'm using like Stack Blitz or Like code, sandbox or something, I don't know either, okay.

Now this is pretty dope.

The audit You can run a series of tests that audit the page for common accessibility issues.

So catch images without all tags.

That's what you do all text or misconfigured Aria role attributes instantly without ever leaving the browser.

So that's pretty dope.

So shown here like a this image doesn't have, was it an all tag?

If missing attribute all tag, you can go directly there.

That's the partner of Century to design the initial version of this Tool.

Bar Nice, Century is the leading app monitoring platform for the web, and they were excited to Work with us on a new standard standalone debugging Tool for Astro Super Dope.

So they got some more stuff that's coming with that.

And then Story Block, there're some integrations with that three Dope third party app.

Like I said, you could do your own Api stuff.

I'm Thinking.

My, I don't know.

We'll see.

Uh, what else?

So yeah, so a bunch of stuff and then internationalization, routing, that's pretty dope.

So you just kind of like set it your locals here and then you like slash, slash s whatever and like it will.

Reload the translation stuff.

That's pretty dope.

Then here is the same incremental content caching stuff.

So a website code base often takes longer to build.

As a code base grows larger over time, grows over time.

Static websites suffer this problem even more dramatically due to regenerating the same pages on every build.

Like I was saying before.

So then they introduced a caching to help reduce the amount of duplicate, unnecessary Work.

So they probably store like the differences And so they know what to regenerate, what not to regenerate.

I think they said it's like a total build time that was eighty percent faster.

That's dope.

So, yes, so they're saying like it was from like four minutes and fifty-eight seconds.

I couldn't imagine something and Just over sixty seconds that's still.

Ah.

Cool, uh yeah, okay, good.

New View Transitions Api.

So you can do some more stuff with that, that's pretty dope.

See.

Redesign logging Now here, this is what I want to talk about real quickly.

Redesign documentation All right, so now Starlight is the official documentation template for Astro.

It includes all the best practices and patterns that we've collected over the past two years building and managing the Astro Doc site at scale.

So it's pretty dope that they have now.

They're showing this whole thing now.

They, they took all the learnings from the stuff that they did, you know, saying and kind of like created their own, I guess, kind of like platform or whatever to create documentation sites, right?

That's pretty dope.

And so the actual dock sites are now built with it, and so they kind of like released it so that other people can build their own dock sites.

So Yeah, cool.

Uh, let's see.

Mm.

mm.

mm.

Yeah, let me see, I'm trying to think, okay, so, yeah, okay, but, so I want to talk about this here, right, so.

I was thinking, so let me show what it actually looks like.

Starlight looks like it's pretty dope.

Share this tab.

So this is Starlight, right?

Make your docs shine with Starlight.

And isn't Starlight also the name of the character from uh the boys, if I remember correctly?

All right, cool.

So everything you need to build a stellar documentation website fast, accessible and easy to use, cool?

And then you can kind of, you know, you can check it out, you get started here, you see.

So this is kind of like the set up of it, right?

So this is how it loads.

I was like, huh.

I wonder if I would be able to repurpose, so not just creating a documentation site, I wonder if I could use it to be the basis of my dashboards for my different as I have to keep like recreating it?

If I just have had like a framework that I could just build upon, that'd be dope, right?

And it would be, it'd be a little bit different because all my other dashboards were single page apps, whereas with this would be like a multi page app.

I guess depending on how I set it up, I could probably Like mess around and make it a single page, but neither here nor there.

So I was like, I wonder if I can get this to Work.

Because all I would need for to do, because it's pretty cool because you have all these different, like the components, right?

and so they have these different Built in components So there's like tabs, so if you and you saw one of my other ones had tabs all throughout it, so that'd be pretty cool just to be able to have something around to figure that out.

Different cards and stuff so you can like lay out cards.

So my thought was basically I would be able to have like link cards, icons, so if I were to need an icon, it's already there.

Built in.

So my thought was because With this you can use it, says it here.

because Starlight is powered by Astro.

You can add support for components built with any supported Ui framework, so like React, Preact, Spell View, Solid Lit, and Alpine.

So I've been building a lot of my Astro sites.

If I needed interactivity stuff, I would use felt or maybe like lit or something, right?

And, so I was like, Okay, so if I need to add some, so if I use Starlight as the basis for my dashboard, and then any interactivity I could do Uh, like felt it would be just kind of like how the other projects are, but you know, it'd be kind of like laid out for a dashboard, so I would have kind of like the things I would need to create a dashboard, right?

so I loaded it up in uh, let me see here.

So I loaded up the project.

Let me refresh this so it's all on one page.

Give me a second here, I'm just loading this thing up.

So I loaded everything up into Stack blitz right.

So here it is.

So I, I took the actual Starlight basic example and loaded it into.

What do you call into Stack Blitz is like a one click thing, right cool?

Now.

Okay, it's still loading.

Give it a second.

Okay, so here it is, right?

It's pretty dope.

Oh it loaded awesome, cause before this didn't load, I don't know what I did.

And I'm happy to see it working now because maybe you just need like a brand-new, like restart or something because let me open in a new tab here.

So all right, so maybe the other thing will Work, Ok, so This is it here.

R.

It's pretty dope.

I like Houston with a little hard hat on.

There, that's kind of cool.

So this is the basics of it, right?

So this would be like the front page of my dashboard and you log in or whatever and then it'll take you to the other stuff here, right?

And it'll have these things now.

I tried.

Because the whole point of me was I wanted to be able to include spelt components, right?

And, so I try to do that, and so I so In this code here, right?

So I have this uh spelt component that just says hello, right?

First I put a counter in there and it didn't Work.

But Um.

I was like, that's weird.

So I created, so I had this spelt counter.

I also created a Hello Astro, just like a Hello World says yo right?

And, so I was like, maybe I'm doing something wrong because over here on the side I have it where it has the example M D X.

And that's where we put it in now.

Before it was like.

Example M D just like in here.

Uh, in the, in the reference, but in order to like import stuff it has to be an M D X would make sense, right?

So if you ever done like M D X before, so now I'm importing both the counter and the Hello world, and they're both in the same directory, right?

The both in components, that's where you put the stuff, right?

And then I just import the Hello.

Component and then I have the counter and now counter.

I want it to be like loaded on the cause it's gonna have Javascript.

So I want to be loaded when the client loads.

That's why this client load.

Client Director of here cool Now the thing is when the actual page loads.

You see, I see the yo here, but the actual spelt thing came up as undefined, which I'm not.

I'm not.

I don't understand that, because all I did was the regular N P M A N P X Was it ads felt or something like that from the documentation?

Whatever the thing from documentation said, I did that.

And but then, so, then it said, Hey, do you want to change?

So it created a spelt that config js file.

I'm like, all right, cool.

And then it's like, Hey, do you want to change your astro config file?

And so it imported the felt.

And then It loads it here.

So I'm not sure what exactly.

Happened because that's normally what I do anyway for my other projects.

so I'm not sure Why, it's coming up as undefined here.

I'm not sure.

Cause here's the Hello.

Astro.

Component And then, but then the other one, the hello from the spelt is not showing up.

So I gotta look into it more.

But if I can get this to Work.

This could be a pretty cool thing for me to be able to generate because the main thing about my project is more like the front end stuff.

The back end stuff is just like it needs to Work And other people need to be able to log in and it needs to make sense for them to get around it right?

So.

The more straightforward, the better.

And, so I think by having like kind of like a nice already laid out for me and I just need to put in my pieces that I need for that project.

If I can have something like that, that'd be pretty cool.

And me having to like rethink it all the time, you know, I mean, and then plus this has all like the resizing for the different screen sizes and things already, like kind of like built in and have the icons, the tabs and a bunch of other stuff, so I don't know, I don't know.

So We'll see, we'll see.

So that's what I'm Work.

Oh, and then also, here's a little Tool bar here Now I wonder if I click this.

See, he says, no islands detected, even though that should have been shown up because this felt component that I'm loading on the client So I'm not sure.

And then there's an audit thing, what does that do?

Audit I didn't do anything.

I'm not sure.

What's that about menu?

Alright, that's pretty cool, very nice, uh.

Alright, but then let me try the audit.

Oh, there's a thing here.

Uh, that.

Hmm I can't read that.

I mean, uh, I can't move, I can't move over to read that.

But there's like a label tag something there.

Ok.

I know that's a book that probably should have.

Moved over so you could read it, but you know, it's, it's still early times, and so I'm gonna play around with it more.

I'll probably make a decision sometime this week.

I see if I can get this felt thing to Work and make a decision and maybe I'll talk about it next week.

I don't know, but it's pretty dope.

So if you're looking for like a dock site, this is pretty cool.

Of course, Me, I always think like how can I repurpose this thing?

So I see if I can turn into like a dashboard with like log in and all that stuff.

So But yet neither there Go get you all back to Work while I try and get this to Work so.

Stop the screen share.

Thanks again for hanging out.

I send you all off with some traveling music.

This right here.

Is.

Oh, wait so.

Yes, if anybody knows anything if I know anybody at Astro.

What have you and you can like see like a glaring thing that I, I just totally messed up on, please let me know cause' not sure what I did wrong with this felt component.

I'll look more into it, but yeah, get y'all back to Work.

This is Screen share.

Eventually they'll load all right, so we got here is Nudist in a Pony B.

The track is called Thank you, thanks again for hanging out.

We'll come back with a look at artists ie the watch some videos, some tracks, maybe you'll become a fan all right, thanks again, be easy and peace.

Start from the exploring state, I think.

I appreciate this unique opportunity.

I'm going to Boopie opportunity.

I'm going to.

Start from the heart.

I want to, I think I appreciate this unique opportunity.

I'm going back some count.

You never stop support.

I'm going to.