Does Astro make heavy JS frameworks obsolete?

Captions provided by White Coat Captioning (https://whitecoatcaptioning.com/). Communication Access Realtime Translation (CART) is provided in order to facilitate communication accessibility and may not be a totally verbatim record of the proceedings.

JASON LENGSTORF: Hello, everyone. And welcome to another episode of Learn With Jason. Today, on the show, we're bringing back Fred Schott. Fred, how you doing?

FRED SCHOTT: I'm doing well. How are you doing?

JASON LENGSTORF: I'm doing wonderful. I'm very, very excited about today. Because this is something that has, like, kind of captured my imagination since the first time I saw it and then, like� and I'm talking about multiple pieces of what we're going to talk about today. But before we talk about that, let's talk about you for a minute. Do you want to give us a bit of a background?

FRED SCHOTT: Yeah, love to. I'm an open source developing, first and foremost. I've been working in open source for over a decade now and on Astro, Snowpack, these are deep cuts at this point. I've fallen into Astro over the last few years. It's a web framework, it helps you build websites that are superfast, great for marketing websites, blog posts. It's just this really unique take on web development and what kind of framework frontend architecture can look like.

JASON LENGSTORF: Yeah, I think Astro is one of the things that really capture my imagination as soon as I saw it because I felt like it was one of the first frameworks I've ever encountered where it didn't feel like I was kind of battling between the two sides of my developer internal self, you know.
Because on the one hand, it feels like if you use something like Hugo or Jekyll or Eleventy. If you want to do JavaScript, you're completely on your own. You have to build all of that custom on top of whatever you're building with a static site generator and on the other side, you've got the Next.js, the Gatsby, Vue, once you build, it has to be all JavaScript. It hydrates to be a full JavaScript experience and, you know, you get good experiences in both and both of them have incredible strengths, but I always felt like I wanted to be somewhere in the middle. I want HTML and CSS. Because I needed a little bit of interactivity, I had to go allin on all JavaScript so when I saw Astro, I was like, oh, this is the one that gets me because I get to be HTML and CSS until I don't need to be and that one, little piece can opt in to be dynamic in JavaScript. It kind of became my default immediately.

FRED SCHOTT: What if I need a little bit of JavaScript? We do that all the time on our own home page. Mostly static. There's one component that would be cool if it was interactive in one way.

JASON LENGSTORF: You mentioned really heavy app use cases. I've been throwing in authentication, dashboards. I built a realtime thing� for anybody who wants to try it, there is a, like, live reactions thing on the site now. Let me get a link to it...so, if anybody's in the chat and you want to try this out, go ahead and click there. You'll have to sign in with your Discord or, you know, whatever. And then, you can� you can fire off reactions and stuff. And so�

FRED SCHOTT: Wait, I want to do this. I want to fire off a reaction.

JASON LENGSTORF: Let me make sure my reactions are actually�

FRED SCHOTT: This is the Partykit.

JASON LENGSTORF: It really is. This will make it work now, where, um, now if you start firing off your reactions...you'll see them come up on the bottom of the livestream and so that's an Astro site, with Partykit. Right. And so, it's� it is entirely, like, rehydrated into a dynamic app. But I was like, dang, that is supercool that we can do that and I didn't have to think about my bundler and how to get all this stuff work. All I had to fix was something on the Partykit because they're using Cloudflare thing. Thanks to Neil for doing that, I would not have figured that out on my own. [Laughter]. If anybody's looking at this Partykit Watch page, that login is Clerk running in Astro. The reactions are realtime web sockets running through Partykit. You can build this incrediblycomplex stuff and you don't have to� yeah, I love it. It just makes me very, very happy.

FRED SCHOTT: This was a very organic� what's that, like, that's interesting...moment. Everything we built was small bits of JavaScript. I need this for my marketing site. I'm decently happy with Next.js. I don't need to worry about performance as much. Optimized for the use case versus just trying to get performance for the sake of performance, there is a really good use case for SPAs. Islands of JavaScript of interactive UI, that could be the entire page, could just be a giant island. We need a catchy name. You can say everything at "/admin," should be this giant island that should be a SPA. Now I need an API. Now I want Partykit, Middleware, and then it's an app shell architecture, where Astro can present the shell of the apps, you're still getting some server rendering, maybe a cool, little logo or hydration. The frontend app loads and you don't worry about who owns the state, are we sharing the state. It ends up being a fullyclientside. That was something we really started to connect to. That surprised us more than anyone else, I think.

JASON LENGSTORF: Yeah, yeah, I kind of did that by mistake the first time I did it and I was like, oh, this is it. What I want, when something is dynamic, what I love about this approach is, you know, so I have my�.Astro file that serves my header and my footer and my header maybe hydrates in a search box that's a dynamic box. And then the app, itself, maybe everything between the header and footer is going to be dynamic. I don't have to care. Run it on the client. Cool. Easypeasy. We're done and now we're off to the races and I'm not thinking about how any of this stuff works or whether I need to be in a� I'm not using client, using Node, using whatever. I'm just building the thing and then I� you know, I say, that one� that one's dynamic and I stop thinking about it and now I'm moving on to the next piece or worrying about the infrastructure or the boilerplate.

FRED SCHOTT: I love how you framed it at the start. It was either, all HTML or all JavaScript and you have no control. This is that middle path of, it's all HTML, but we're giving you this primitive and it can be anything from HTML to JavaScript.

JASON LENGSTORF: Yeah, yeah, absolutely. Okay. So� and y'all just hit 3.0 yesterday, so congratulations on that.

FRED SCHOTT: Thank you. I got this from Cloudflare.

JASON LENGSTORF: Oh, that's supercool.

FRED SCHOTT: I don't have anywhere to put it.

JASON LENGSTORF: We just revealed the magic behind the curtain. Fred and I were� [Laughter]. Fred and I were both facing the same directions. [Laughter].

FRED SCHOTT: I can still recreate it.

JASON LENGSTORF: This was how we were first� [Laughter]. � so we flipped his video and I was like somebody's going to notice it's backwards and Fred just gave the game away.

FRED SCHOTT: What can you do? Movie magic.

JASON LENGSTORF: I love it. I love it. So, in Astro 3, there are a bunch of new things and not too many, like, breaking changes. I looked through and I think the most significant one� they were really all just for me, as a tutorial author, the default port changed to 4321, which is great.

FRED SCHOTT: I'm so sorry to anyone who's ever written a tutorial. I am so sorry, from the bottom of my heart. Every blog needs to be updated now. [Laughter].

JASON LENGSTORF: And then the other one that was a notable change, to me, was that the endpoints, the methods changed from being lowercase to uppercase, which I very much agree with that choice to, like, export uppercase "get," uppercase "post." There are good reasons to do that. I'm definitely about to rerecord a video about how to make an API with Astro.

FRED SCHOTT: I might be blanking on this. Is it deprecated?

JASON LENGSTORF: It's probably deprecated but I want to make sure I'm teaching the best practice.

FRED SCHOTT: That costs us nothing in our implementation so that is okay to keep around.

JASON LENGSTORF: Let's talk about what's new. So the big one� for me, at least� is the support for the View Transitions API. That was really exciting. So, maybe talk a little bit about that. How did that come to be and how does that work inside of Astro?

FRED SCHOTT: That was a really, just really organic process. We had been following that API for a while. If you don't know View Transitions, it's basically, if what if the browser was able to handle animations for you. Here's the start point, here's the endpoint, hey, browser, can you animate? I start typing or click a button, I want to change state, it's a really flexible API, A to B, let it handle the animation through CSS and HTML, maybe a little bit of JavaScript. Letting the browser take on that work.
This is still fairly new, it's not supported in all browsers. This was something that was kind of an answers to our prayers, going from Page A to Page B, literally shoot you out of a canon. Full page reload. The performance is worth it. We think most users are fine with that and comfortable with that. The SPA crowd has held it over us. A nice app, you can fade and transform and animate. Like, that's the thing that SPAs have that Astro will never have because you need� at least in the traditional world, you needed a full JavaScript, it needed routing. So we didn't have that. Serverrendered HTML. View Transitions solves that for us.

JASON LENGSTORF: I've seen the simple version, like, the builtin API. If you just turn it on and don't do any configuration, it does, like, a crossfade. That's really nice because it gives you this feeling of, oh, we're inapp. Things are moving within spaces but with relativelylow config. I haven't played with this yet because I wanted to learn today with you. It sounds like you've built in some preconfig. One of the ones I saw was a slide, left and right, depending on how you're navigating.
And the other thing that I saw teased is that you've also figured out a way is if you've got View Transitions and you've got something that should persist, like a view player and you don't want that to get reset on page navigations, like, you want the audio to keep playing, you built in support for that.

FRED SCHOTT: I posted it in the chat, I posted in the link, there are videos showing off all the things you can do. Different effects, persistence of an audio or video player. It unlocks so many possibilities that were just totally hidden from us because we didn't have the full SPA architecture.

JASON LENGSTORF: It makes it even harder for me to justify not using Astro, like� and, you know, this is something that I've just sort of been moving toward more and more. I was always using Vite or I'm hitting a really, really complicated edge case, at which point I would reach for Remix or Next or whatever. As Astro has gotten more and more powerful, I've just kind of been� I don't need Remix to do this, I don't need Next to do that. Astro is basically Vite, so I don't really need Vite. I can just use Astro and I'm kind of happy, no matter what I'm doing.
That's been a really fun transition for me, where I feel like it's helped me just eliminate an entire category of worry, where I was, before, you have this, okay, new project, run through the flow chart, what's the right framework for this project and now I've inverted that, now project, is there any reason why this shouldn't be Astro? And, I'm running out of reasons why I wouldn't just start there.
There are a few things, I don't know, maybe, if I was building something that had zero static HTML, ever. If that was the case, I don't know. It's very hard for me to reach for Next again. This is my grumpy DevRev. All you have to be is good at managing caching. It's that 10,000 foot "if." This isn't a problem if you're good at caching. Nobody's good at caching. [Laughter].

FRED SCHOTT: One of those mediums of what is the two biggest problems in development? Naming stuff and caching.

JASON LENGSTORF: Yeah. Naming, cache, validation and oneoff by errors. [Laughter]. All that being said, so the View Transitions is huge, is really exciting. Are there any other, like, big announcements, that are coming out in Astro 3 that you want to make sure that we highlight.

FRED SCHOTT: The image optimization that's built in Astro now. We might have even talked about it ages ago. We've been perfecting it. It's an iceberg problem where what we ship to you is an image component and under the water is how are you optimizing it? How do you choose the right width and height and how do you make it responsive? Performant, there's so much complexity there. We finally got that to a place where it is stable. Really proud of all the effort that went in there, from the team.

JASON LENGSTORF: Yeah, really, really good stuff in here. I could probably just continue talking about this for a while and, you know, I guess it's probably worth calling out, I'm not paid by Astro, I just really like it. [Laughter]. I was listening to myself talk. It has become my default. So, let's talk�

FRED SCHOTT: Jason, you got to take the hat off, I'm sorry, the hat's giving it away. [Laughter].

JASON LENGSTORF: Sorry, sorry. Okay.

FRED SCHOTT: No, I like that. [Laughter].

JASON LENGSTORF: No, we're bringing it back. I love this hat. I needed a new hat. The timing was perfect. Are these going to be available. I saw a bunch of people clamoring for these. I know that I got my directly, which was� thank you very much. Thanks for hooking me up. Are these going to be something that everybody can grab?

FRED SCHOTT: Maybe tomorrow. If you follow Astro.build, we are going to be Tweeting about them when they go out, later this week. We made 100, which at the time, we thought was, like, yeah, that's fine and now it's like, oh, no� I'm worried they're going to sell out fast. Good reason to keep an eye on our Twitter because I don't know when they're going on our Twitter.

JASON LENGSTORF: Yeah, I dropped a link, both to our shop, which is where I assume they'll be available, and to the Twitter.

FRED SCHOTT: They are not there yet, they will be soon.

JASON LENGSTORF: Why don't we take a minute here and let's switch over into pair programming mode. First and foremost, before we go too far, I'm going to� oh, you know what I forgot to do? I forgot to actually start some� anybody who's got those on, you're about to see all the captions flood through really fast. Sorry about that. We have had Vanessa, from White Coat Captioning, here with us from the start, doing the captioning, making the show more accessible and that is made possible through Netlify and Vets Who Code.
And, yeah, you can find all that right here on the old website.

FRED SCHOTT: I love that you do that, that's so cool.

JASON LENGSTORF: It's something that  when I was at Netlify, I was talking to Sarah about this. I feel weird doing a video show that, for somebody who wouldn't be able to follow along with video but I don't� I looked into robo captioners, they're not very good, they miss all the JavaScript words. She was like, why don't you hire a human captioner. I was like, I can't afford that. We worked it into the Netlify budget to cover the live captioning, now that I'm not at Netlify anymore, I'm out for broader sponsors because Netlify's not covering all of it anymore. But we're working on it. If your company wants to sponsor something, hit me up. [Laughter]. But, okay, we are talking today to Fred. Is this the right place� where are we even sending people these days? I'm sending them to Twitter.

FRED SCHOTT: I have a personal site, to show you how old it is, it's not even written in Astro. I think it's Jekyll or something.

JASON LENGSTORF: What is it?

FRED SCHOTT: I'm not telling you. You found it. That's it. [Laughter].

JASON LENGSTORF: And we're talking, today, about Astro. So let me drop a link here. Earlier, you mentioned this Astro 3.0 blog post, which has all sorts of goodies in it about what's new and what's changed so you can hit that.
From here, I'm ready. I want to learn about Astro 3.0. I'm going to put myself in your hands. What should we do first?

FRED SCHOTT: New project, I'm assuming? Totally from scratch. Scroll down a little bit. The one that's easier is astro.new. Loads up stacks in the browser. You can kind of play around, all in your browser, without having to do much. I feel like we're going to get pretty deep so this probably isn't what we want to do.
But that command, "npm create Astro" is what you want.

JASON LENGSTORF: Let me pull up a code editor here. Actually, I'm going to probably close this one and get a new one. There's my terminal, so I'm running. Let's go into my GitHub stuff, first. GitHub...then we're going to run this command. And...

FRED SCHOTT: All right. That's our little buddy, Houston. He's going to walk you through it.

JASON LENGSTORF: Love it. We're going to call this one "Astro 3 Tour." You want to me to do sample files, you want me to go empty?

FRED SCHOTT: Let's do the blog template if we're going to be playing around with View Transitions. Most people, the basic filing and empty if you want to totally start from scratch. If we want to play around with View Transitions, it'll give us a couple pages to jump around.

JASON LENGSTORF: Nobody has to watch me write CSS.

FRED SCHOTT: We might get a little CSS going. One of my favorite things� which we don't do� Leo says, you want to write TypeScript or not? It says, wrong [audio cutting out] a very snarky, sassy, little bot. Not really for what we're going for, for our vibe, but very funny.

JASON LENGSTORF: I'm not going to deal with that right now. Placeholder images, fonts, good. And then we have our source folder set up here. Anything I should be looking at� actually, let me...I have a profile that's less cluttered. There we go. That's going to look a little nicer.

FRED SCHOTT: That looks great. It gave you these instructions in the end of that command you just run, NPM Start works as well.

JASON LENGSTORF: There's the new port for 4321.

FRED SCHOTT: Just a basic site, nothing too fancy here...

JASON LENGSTORF: Cool. Yep. Yep. Everything's working the way we'd expect. We've got images, all the good Markdown. Excellent. All right.

FRED SCHOTT: Um, probably makes sense� I mean, there's a couple of� here's a couple places you can go. Would it make sense to do a quick walkthrough of the codebase? File structure? Highlevel?
Public is where any assets you want to go, static assets, you want them "/blogplaceholder." We don't touch anything in Public. The source structure is the responsibility for Astro to build and bundle your site. Content is where your content goes. Really, it's just the Content Directory and Pages Directory is where the magic goes. The filebased routing goes to Pages Directory. They will map, onetoone.

JASON LENGSTORF: Nice. And, content collections are not new but for anybody who hasn't seen these before, this is a really slick setup where you get this ability to do Get Collection here and you can grab whatever collection and just loop through them. Let me collapse this style. And, here, right, you get your title and that comes out of this Content Directory, here, because we've defined�

FRED SCHOTT: If no one's ever seen this before, we launched this in 2.0, I believe. If you have a problem working with Markdown where Undefined� oh, I forgot that one front matter property and one out of a thousand blog posts, it is running this. If you have a problem with it not matches, it will warn on the file and point you exactly where the problem is. Here, you get a type� like, a typed object, what you're kind of showing there. Everything has that on the Post Object. You're typing, you write the dot and see intelligent, exactly what you can expect from this.

JASON LENGSTORF: This is really nice. I feel like, Markdown is one of those things, it seems like such a good idea if you're just a solo dev but even as a solo dev, I always get myself into this situation where I've got completely unmaintainable Markdown. I want to tag my post and I never remember which tags I have, you end up with this complete nightmare so you can do things with this, that are great. You can actually make the� you can make the� what's it called in TypeScript? Tuple? Union? These are the 15 tags for this blog. If you use anything else, we're going to throw in an error. What a great way to solve that problem. [Laughter].

FRED SCHOTT: Again, I'm thinking through this spectrum model where it's always like Markdown for simple, 10 blog posts. Any time you need more than that, go find a CMS. You can get a lot out of Markdown. I think people like Markdown way more than people give credit to. Every framework has Blog as their tutorial. Every developer has a personal blogger. If you don't, you probably considered it once and realized you had better things to spend your time on. Markdown is essential, primitive for frameworks and it gets dismissed as starter templates. I think that's what this is exploring, what if there was a little bit more support here.

JASON LENGSTORF: For sure.

FRED SCHOTT: And being frameworks, I have a blog with 5,000 posts and one� once you start to listen to that person, oh, there's a lot more we could be doing here on performance, on features, on everything.

JASON LENGSTORF: The rabbit hole. Yeah. We've got our content collection. Might not need to look at those anymore. Then we've got the�.Astro files, which this is� for anybody who hasn't seen this before, kind of looks like a Markdown file. You get your front matter here, you can do anything you want up top. This is the serverside JavaScript, the stuff that gets compiled and this is what gets served.

FRED SCHOTT: We took the best of Svelte, Vue and React. One of our early goals was you could paste HTML. The top section is the�

JASON LENGSTORF: Class equals. Um, yeah, yeah, yeah. So, you get all this and then we can� we can execute arbitrary stuff if we look in one of the more complicated pages. You can do some JavaScript right here.

FRED SCHOTT: Guaranteed running on the server, never is on the client. All server rendering.

JASON LENGSTORF: Yes. So, wonderful stuff here. All right. What else� what else do you want to look at?

FRED SCHOTT: I feel like all that's the table setting needed. View Transitions is an obvious way we could make this site pop. [Laughter].

JASON LENGSTORF: I love making stuff pop, that's why I got into web development. Let's do it.

FRED SCHOTT: That's been my word for the week. What about the social image? Can we make it pop? People are like, you sound like the worst version of, I don't know, a manager. Project lead. Is this popping for everyone?
[Laughter]. I appreciate all the patience from the Astro team, you all are saints. But, yeah, let's make this pop, Jason, let's do it.

JASON LENGSTORF: I'm ready. I'm ready to make this pop. What should I do first?

FRED SCHOTT: Default View Transitions and it'll give you an easy way to see the tech working, if all goes well. Then we can go from there. Let's jump over to the docs. I don't know if you're a person who likes to do. I'll always shoutout. We put a ton of efforts into these docs to walk, really clearly, through these steps. The mobile view� the topright� yeah, that's better. You can find the sidebar View Transitions, that's the magic.

JASON LENGSTORF: I'm going to hit the forward slash...

FRED SCHOTT: Oooohhh. Let's go to the first code snippet, I think that is what you will need. Yep, two lines of code. The biggest decision you need to make is where this goes. You can put it on every page individually. I believe this comes with a base head that has been abstracted into a reasonable component.

JASON LENGSTORF: Yeah. You can commandclick into these. Tada! That's great. So then, I can...paste in this View Transitions piece and then we're just going to drop this in somewhere. We can drop it right at the bottom...and...

FRED SCHOTT: If all goes well.

JASON LENGSTORF: Are we done, is that it?

FRED SCHOTT: The effect you'll get is a very nice, tasteful, subtle fade transition across pages.

JASON LENGSTORF: Okay. Let's go. Here we go. Ooohhh, look at it. Look at it go, everyone.

FRED SCHOTT: Aaahhhhh.

JASON LENGSTORF: This is� this is so fantastic from a� just a kind of quality of life update. Being able to put two lines in [audio cutting out] right. Like, this feels like�

FRED SCHOTT: This is the starting point. This is the jumping off point.

JASON LENGSTORF: Yeah. And do give somebody the ability to get this far with the jump off point� I've tried to do this before. I remember in the DHTML days, this was probably 2004. I wasn't using jQuery yet. You would write a page and figure out where the container was and load and get that container, delete the contents here, put in the new contents here. If you wanted to do fades and stuff, I gave up. I'm not doing that. The fact that now we can just� here's a little bit of stuff and the stuff just does the stuff and now it works, it's like, ahhh, what a relief.

FRED SCHOTT: I'll give two, big shoutouts here. If the browser wasn't this simple, the platform API wasn't this simple, we couldn't be this simple. A ton of credit to the Chrome team. This is� like, again, another iceberg, we're standing on the shoulders of giants. What we're doing is essentially taking the browser API, which maybe doesn't have full support yet, and we're wrapping it in an Astro API that is just going to iron out all of the kind of rough edges and give you something that's close to onetoone of how the browser works. You're not learning the Astro way, you're learning the platform way, but it's an Astro API that helps handle. It's really nice.
Other shoutout is just to Matthew and Nate. This is something we've been kind of working towards for about a year now. This isn't a, let's throw this in the release and hope people like it. We've been working pretty hard to get to this point. I'm so proud of the result.

JASON LENGSTORF: This is maybe my favorite turnaround in the last, say, five years, where I'm not sure what the� what the official turning point was, but there's been a bit of a change where I felt like five years ago, I was using a lot of effort to fight against the platform with my JavaScript, where the JavaScript frameworks, they'd all� React implemented the VDOM and synthetic events and everything was almost browser, but not quite and then we've suddenly seen this shift, in the last few years, where it feels like everybody's moving back toward the platform and the platform authors are doing a fantastic job of supplying these builtin APIs, like the View Transitions API, or like, just� I mean, of course I'm not going to be able to think of anything off the top of my head now, these really nice APIs that supply the things we need to do the advance we want to build on the web. That, to me, is such a welcome change and it feels like now like the JavaScript ecosystem and browser ecosystem have an opportunity to work together in a way that doesn't hit odds and we're seeing more and more frameworks choose to work with the platforms instead of against them and it leads to these really simple APIs.
If you all don't have to build a full state management system to get View Transitions to work, you can build a browser API, we don't get any extra, like, messy JavaScript to handle the loading of two pages and the crossfading of them. You just have to write� what is it, like, native JavaScript, four lines of JavaScript to turn on View Transitions like this and everything else is built into the browser.

FRED SCHOTT: Astro could not have existed five years ago. Yeah, there's only so much we can do without the platform's help and I think there's this symbiotic relationship here. We are a playground, they get to ship something, behind an origin flag and you have the audience and framework starting to� we want to build the best thing for our users. We all have incentives to test the new things. We get these things that we don't have to do ourselves, our limited team, limited resources, the more we can rely on the platform, the more we are able to do. I think it's taken the industry a while to figure this out. It's a really nice relationship for, I think, everyone. I think everyone wins there.

JASON LENGSTORF: Awesome. Cool. We set up twoline View Transitions. It sounded like we can do more. How do we extend this?

FRED SCHOTT: If you really wanted to customize this, let's jump into a slide transition. This is a fade. We give you a couple you can reference by name. Fade for "fade." Where's that slide? I'm looking through the doc, myself, because I want to make sure we� yeah, if you search the page for Slide, you'll see the snippet. There's Astro APIs that help you work with this. One is the directive called Transition Animate here and that's basically going to tell you how you want the page to transition. This is where you start to add more control. The default is the fade, but let's add the slide, instead, to kind of change it up a bit.

JASON LENGSTORF: Okay. And to do that, I'm going to add it to my main section because we don't really want the header and footer to change, right?

FRED SCHOTT: Yeah. Let's try that. And I believe� I'm not sure if you need it, if you see in that code snippet, there's Transition Animate, we can go and dig deeper. Let's� just to be safe� put that on now, the HTML tag.

JASON LENGSTORF: Oh, right, because we don't want the wrapper to animate. We only want that main section to animate.

FRED SCHOTT: Yeah, exactly. I forget what happens if you don't do, is it going to fade and slide at the same time? It would be a fun experiment to run.

JASON LENGSTORF: I would guess is that what ends up happening is this won't look like it changes but it's fading in and out, on itself, which is wasteful and not really what we want. So, okay...oh, because I only put it on the blog so we'd have to put it on each one we'd want to use it on. Great. I can do that. And this is where layouts would start to come in and play a role, is you would have your layout� actually, can we do� oh, that's for a blog post only. Here, we set on the index, let's set it again.

FRED SCHOTT: While you make the change, the idea of layouts is it's really not magic. It's just the idea of componentizing this wrapping around pages. Every page has this layout, you can put it in a component. You can maybe refactor this on our side, having that default layout. If every page has a header, why isn't that componentized into a main layout component?

JASON LENGSTORF: Uhhuh.

FRED SCHOTT: But, we didn't do that so you have the power to add that all individually.

JASON LENGSTORF: Blog post layout. We can throw it in here, as well, and I'll go down to my main...okay. So, now, everywhere we go...should be set up like this. Let me make this bigger. And as we move through the pages, each one...pulls up like this. But I found something, by mistake earlier. So, check this out. When I go down here and I click into this, if I go back, it slides the other way. See that?
[Laughter]. Like�

FRED SCHOTT: Love that you found that.

JASON LENGSTORF: It's just, like, little changes that you don't really think about, but it feels so nice when it works that way and it's just built that way. Cassidy, Cassidy just showed up and called us "fart nuggets."

FRED SCHOTT: You know, I saw that message. I was like, another troll. I didn't see the username. [Laughter]. Amazing content. No longer troll. [Laughter]. Hey, Cassidy.

JASON LENGSTORF: Um, okay. So, I mean, this is, like, again, builtin, it did what we want. It's got the forward and backwards. It just feels really nice. This is a really cool way of sort of managing this. But I have a request because I've seen Moxy do this, if I click this, like this image is here and this image is also here. I want those to, like, move back and forth. Can I do that?

FRED SCHOTT: Are you saying it's morphing time? It's mighty morphing time. [Laughter]. Let's do it. Let's revert all the changes we made, though, or keep the animation "none," just to be safe. Exactly.

JASON LENGSTORF: I was trying to find a good� whatever.

FRED SCHOTT: Jason, we'll workshop later. [Laughter]. If you can tweet that, we'll tweet out the morphing time.

JASON LENGSTORF: Here we go. You want to revert everything we did.

FRED SCHOTT: Keep the "none" on HTML, just to be safe. My live demo brain is causing me to be extra careful here. We'll go back to the default. A blank slate.

JASON LENGSTORF: That was everyone, right?

FRED SCHOTT: I think so, yeah.

JASON LENGSTORF: You're set. You're using the layout. You're set. And I didn't change that one because that uses the blog post layout, which is set.

FRED SCHOTT: Okay. Let's do it. I'm seeing a lot of upgrade stuff here. Oh, you know what? It's not called Morph anymore. Actually, you know what? There's a whole section on animation directories. I'll link it in chat. You can find builtin animation. You got fade, which is what we've been talking about. Initial  this is us trying to really [Indiscernible] what the browser's going to do. I'll show you, in a second, why it's called that. Slide is what you just said. "None" is disable it entirely. Initial is "initial," because it is the initial. How does the browser know that Thing A is going to be Thing 1 on Page 2? You have a unique idea that's going to span across them. If we find the documentation on naming a transition. In some cases, you want to identify it, basically give it a transition name. That's going to help it animate.

JASON LENGSTORF: Okay. So, we'll take this transition name and then I'm going to find, in my blog index, we get the image and so I want that image to be the one that animates. And, we're going to have to do something� because there's going to be lots of blog images so I want these to be� let's go with, like, blog image and then I'm just going to toss in the slug because that will be unique.

FRED SCHOTT: Yep.

JASON LENGSTORF: Post slug.

FRED SCHOTT: You can kind of hack it. It'll work one way� actually, I don't know if it will, never mind. Ignore me.

JASON LENGSTORF: Basically, it's because when we look at this� this thing, right, this is a blog image, these all have the same transition name, it would probably work to here because this could be blog name. But then when we went back, there's no "which one is it."

FRED SCHOTT: I actually think it would break both ways, all five of them� you might see a swarming of them all. I have no idea.

JASON LENGSTORF: I don't know, should we do it the bad way and then fix it?

FRED SCHOTT: Sure.

JASON LENGSTORF: Let's try. [Laughter]. Down here, we've got the� where's our image� is here. So, then we can� I'll just drop this at the end. We'll add a� whoa, whoa. U Clip.

FRED SCHOTT: What did you call it?

JASON LENGSTORF: I called it Blog Image. Nope, not you. Not you, either. You. Blog Image. Okay�

FRED SCHOTT: It will probably break.

JASON LENGSTORF: This should break...it didn't do anything because it didn't know what to do.

FRED SCHOTT: That's my best guess at what just happened.

JASON LENGSTORF: Okay. So then let's change that�

FRED SCHOTT: Which I will say is a little bit nicer than morphing a horrible monstrosity. There's a great image of old internet versus new internet and all the old Myspace, all the fun of that internet and inter font, Arial, you're firmly in the old camp.

JASON LENGSTORF: Oh, wait. Okay, I'm still doing something wrong. Do I need to set something� oh, wait. Wait, wait, wait. We set the transition to "none" and we never told anything to transition in here.

FRED SCHOTT: You need that Initial thing, I think. Sorry, I see what you're saying. I see what you're saying. I don't know, actually. I should know this. On the image component, putting "transition:Animate." And give that "initial" and see what happens. I might be wrong. Maybe you're right. Maybe this top header one is� let's see if that works...no, you're right. Okay. I don't know, it's actually� I think you're right. Let's get rid of my annoying� my HTML tag that's disabling things. I think that's probably causing trouble here.

JASON LENGSTORF: Okay. This one, we'll call� let's remove it. Up here, remove it.

FRED SCHOTT: My intention to be safe actually caused my downfall. Make sure you're giving it a refresh, just to make sure. Interesting.

JASON LENGSTORF: So, we're doing something wrong.

FRED SCHOTT: This is definitely me not knowing the API. I just saw someone demo this the other day, I know it's all working. If you go back to the image component, let me see what that looked like.

JASON LENGSTORF: Image component, here.

FRED SCHOTT: It should just work. Baabaabaaa.

JASON LENGSTORF: Here's the milliondollar question, actually. Did I get the right piece? Transition name...oh, it doesn't show me the� the name. Um...it is the� it is slug, right? Slug is a thing? Slug does not exist on Type. So, I need to get it�

FRED SCHOTT: Oh, try Title or Updated Date is probably unique. I don't know, actually. I'm trying to think of what is a unique identifier. Oh, you know� no, you're right, that wouldn't work, too. Hmm.

JASON LENGSTORF: Um, do we get� what else� what else is in here?

FRED SCHOTT: Slug should be in there. It might be called something else. There's a way to get the slug, let me check the docs here...consulting the docs.

JASON LENGSTORF: Collection entry. Blog. Data.

FRED SCHOTT: It should just be post.slug.

JASON LENGSTORF: It looks like, for whatever reason, it's not coming through and that is why.

FRED SCHOTT: Elliot said to use the Post Title. Slug� that seems like a� yeah, there we go.

JASON LENGSTORF: That was the problem, is that Slug was just empty.

FRED SCHOTT: But it's working there. See how it says post.slug.

JASON LENGSTORF: What are you doing? You absolutely have a title. Oh, I know what's going on. You're only getting the data and the slug is up a level so we would need to figure out how to get the� this is giving us the data.

FRED SCHOTT: Only the data, nothing else. You're right.

JASON LENGSTORF: So we're not getting the up level to get the slug. I feel like I have done this, but, this should�

FRED SCHOTT: Totally fine for how this theme was working. There you go. We're back.

JASON LENGSTORF: There it is. Beauty.

FRED SCHOTT: Good catch. I always miss those Type errors. Good catch. The top one is beautiful. It's subtly bigger.

JASON LENGSTORF: And it's so nice. And, again, the issue, here, was that I was trying to key it with something that didn't match. That actually makes me wonder, if we put that transition "none" back in, does it�

FRED SCHOTT: This makes me realize that we probably really never needed the transition, that was probably me being overlycautious. But let's see what happens.

JASON LENGSTORF: You're right, Henry, it does pop.

FRED SCHOTT: It pops.

JASON LENGSTORF: Here's my transition "none" here and then...gorgeous.

FRED SCHOTT: It might be the difference between, does the rest of the content fade out versus fading in?

JASON LENGSTORF: Oh, here watch� watch� watch the title here� the menu, here...so, you get that� it's fading on top of itself, kind of thing, which is fine but it does look a little nicer if you've got� to me, at least, like, my preference would be� whoops...my preference would be to not have it do that, which is� what are you doing? Top. There. Okay. So, then, here, now it, like snaps to that.

FRED SCHOTT: Nice.

JASON LENGSTORF: So, a little bit cleaner and that's a preference thing, so you can do it however you want.

FRED SCHOTT: Do you want to do the title, as well? We can do the title, I thing� maybe even the date� well, the date will move.

JASON LENGSTORF: It'll be wrong, probably, as a permanent kind of application but it will be really, really cool to see.

FRED SCHOTT: This is something I see a lot of people on Twitter� there's a fear of is the entire web going to get way too animated because of this? Are we going to oldschool and not accessible if people have problems with motion? I wouldn't actually want that. It's going to be a line, I think everyone has to figure out. Now that we have the power, we need the responsibility.

JASON LENGSTORF: Um, is it here, title...title?

FRED SCHOTT: Yeah, what is� whatthewhat now?

JASON LENGSTORF: It didn't, like� I was trying to get the post object in the blog layout, which it already abstracted it out� or extracted it out. What we should see now is some flight. [Laughter].

FRED SCHOTT: Whoa!

JASON LENGSTORF: That doesn't look as bad as I thought it would. That looks pretty cool. I'm okay with that. Yeah, that looks� that actually looks really nice. Probably don't need to animate the date, but the title coming in is pretty cool.

FRED SCHOTT: This is, again, what does this mean for the site that I've designed? If I was like, if I really love this, move the title� you can match the web design to this feature so it's not as jarring. Actually, you can do that now. Why don't you move, on the blog page, the time to be below the title instead of above it?

JASON LENGSTORF: Let's see, we did it� move it to be below. Okay.

FRED SCHOTT: Like, formatted date there. Yeah, that one. Yeah, just move all of that. Yeah. Yeah. That should be it.

JASON LENGSTORF: Tada!

FRED SCHOTT: The spacing's a little bit off but you can keep making the changes if you really want to keep it.

JASON LENGSTORF: It already looks kind of nice and it's doing what I would expect. And this is the sort of thing, like you said, you have to work with design to choose how this works and then the other question, you brought this up for somebody who doesn't like, um� who has motion problems. Do you� is this respecting "prefers reduced motion"?

FRED SCHOTT: I think this is controversial, the web platform says that it's up to the developer to decide what to do. As a default, I think that's going to lead to more accessibility problems than benefits. What Astro does is disables it. On the browser side, "prefers reduced motion," it is a lowerlevel API� a very subtle animation is usually okay. But for us�

JASON LENGSTORF: Yeah. So, is this something� if I turn "reduce motion on," it disables. Is this something I can override in Astro?

FRED SCHOTT: As of right now, it's only� you would have to go into the lowerlevel API and implement it yourself. I think there's a lot of room for that, especially for people who ask for it. Yeah, I agree. A nice, subtle affect should still be on for everyone if the developer thinks that's okay and knows how to optin verses optout.

JASON LENGSTORF: Yeah, I think this is� this is very, very cool.

FRED SCHOTT: I'm superthrilled will how this is shaping up.

JASON LENGSTORF: So we got a little time left, anything else you want to take a peek at?

FRED SCHOTT: Um, this is kind� nothing's going to match this for how fun it is to demo. [Laughter]. The image component, it's not as easy to demo in dev because in dev it's not really doing much� actually, it's that's not true. We can do a demo. The iceberg, it is optimization.

JASON LENGSTORF: And so here, we're using a plain, old image component. If I can want to upgrade this to be an optimized� like Astrooptimized image component, is it dropin or do I need to do something special?

FRED SCHOTT: Let's delete IMG and do uppercase IMG. Let's try it. If you scroll back up� I thought it was going to autoimport it.

JASON LENGSTORF: I think that gave me a type, for some reason.

FRED SCHOTT: That's me being fancy. I'll link to the docs. Astro comes in with a builtin image component.

JASON LENGSTORF: Let's look at Image...

FRED SCHOTT: Yeah, Erica, core maintainer on the team, did an incredible job with this. It's API, it's type working, it's optimization across a billion different platforms that support it. Really complex stuff here. We support it out of Astro:Assets.

JASON LENGSTORF: If I save this and come back out here and look at my image, which is this one now...we have...a whole bunch of little bonuses just show up. We've got decoding async, we've got loading lazy. That's pretty slick.

FRED SCHOTT: Yeah. What's interesting here, you can see the source hasn't changed. I'm so glad we left this bread crumb. Because it's in Public, we're not going to touch it. It's using the old image tag, using the old image. It's coming from Public, we're not touching it. If you want to move it in Source Directory, you're giving Astro permission to optimize it. If we optimize it, it's not really the same file anymore. If you move it to Source, you're giving Astro permission to do that.

JASON LENGSTORF: This is Placeholder 1. I'm going to copy this and go into Source and create an Images folder, let me actually make it a directory. I'm going to paste this in here and then in my...I guess I'll just hardcode it this time.

FRED SCHOTT: If we're really going to do this, let's do it. There's a great content collection helper for images.

JASON LENGSTORF: Oh, sick. Okay.

FRED SCHOTT: Buhbuhbuh, where is it? I was on the Content Collection page. If you look in Content Collections, it's on the Images guide.

JASON LENGSTORF: Images, Content Collections, here we go.

FRED SCHOTT: This is saying, in the Content Collection, put a relative URL, relative to that file. And Astro will just take care of the rest.

JASON LENGSTORF: Ooookay. All right. I'm going to move this up to� where's my content folder?

FRED SCHOTT: Let's keep it in the directory. We can talk about how you can get it in the Content Directory. Actually no, we can do that now. You can move it in there. Go for it.

JASON LENGSTORF: Okay. So I'm going to put this in there and I'm going to rename it, _�

FRED SCHOTT: This isn't really content, this is more supporting.

JASON LENGSTORF: Markdown Style Guide was the first one. So we're going to go up a layer to Images and then� I think just does the whole thing. Okay. Hold on. It broke. Do I need to restart it because that image is new?

FRED SCHOTT: Um, you shouldn't need to do. Dynamic [Indiscernible] 44...images� oh, there's one more thing. If you keep following the guide, you're going to want to make sure you're using the image� update the schema, basically. This is no longer a string, this is an image. You can see it on the corner.

JASON LENGSTORF: Oooohh. Got it. On the image, we're changing this� I'm just going to copypaste it.

FRED SCHOTT: It's a little funky, it changes the format a bit. If you see on the schema: Line, you need to change the function signature because you're going to get image as an argument. Let's grab it from the function argument signature.

JASON LENGSTORF: So we grab that out of here and we got into a function and that returns one of those and then I can copy this...and, drop it in here.

FRED SCHOTT: Yeah, that Refine thing is really cool. That's kind of getting� scratching the surface, if your image isn't the right width. You're a developer that knows exactly the type of image you need, this will warn you, now, versus at the moment of�

JASON LENGSTORF: Oh, and now all of our images are broken because�

FRED SCHOTT: Yep.

JASON LENGSTORF: Okay. This is an easy fix. We're going to go to our Public and grab the rest of the blog placeholders.

FRED SCHOTT: You can drag.

JASON LENGSTORF: I'm going to into each of these and go up a later and copy, save, got that one. This one...and fix you...pretty close. What don't you like?

FRED SCHOTT: If you open up in the browser, too, it should give you a little bit of a better, um, more, formatted error. If you go back to the Astro site. Yeah, there you go.

JASON LENGSTORF: First post does not match. Cover image must be 1080 pixels wide.

FRED SCHOTT: That's just an example. That's not, like, oh, that's the optimal. Delete the whole refine stuff. Just image.

JASON LENGSTORF: Okay. And, now it's happy.

FRED SCHOTT: The fact that it's rendering means it looks good.

JASON LENGSTORF: So now if we peek at this in the Inspector, we have something much more interesting going on here. This looks like we're doing some optimization to me.

FRED SCHOTT: Oh, yeah. Yeah. So you are now connected to our image optimization. This image is getting read by disk. It is the Content Collections images, everything's working together. Content Collection's saying this is an image and giving you tools and giving you the way to reference it relatively and then on the Astro side, it is able to pipe that into the image component in a way that Astro can then optimize it. All behind the scenes, Astro's hooking this up to give you something that just feels like referencing an image but behind the scenes, it will get piped through our optimizer without you having to do much at all.

JASON LENGSTORF: And I like, here, that it's doing some stuff� some conventions I'm familiar with, if you use Image [Indiscernible], you get query string arguments, a W to set the width. This started as a JPEG, but now it's a Web P. If it was uploaded at 14,000 pixels wide, you don't want that on the web, you can now not worry about your clients needing to know about image optimization or saving� running it through� I used to train my clients to go to TinyPNG and upload things there or Squoosh.app. Now you get to skip those steps because that can happen programmatically, which is really, really nice when you start working on things like that.

FRED SCHOTT: Yeah. 100%.

JASON LENGSTORF: Um, okay. So that actually went a lot faster than I was expecting.

FRED SCHOTT: It was a big part of� I think our first design of this was our opinionated take. One of the problems we ran into, which was what if we want to connect this, the opinionated differences between us, Vercel. We were coming in with, no, these are the right features and it just� I'm oversimplifying and overdramatizing. There are services, all these things, how do we design an API that is both opinionated in the way we believe is the best way to build images and optimize images, but you can connect to Cloudinary and it doesn't break you? It doesn't have every feature everyone on our team wants, but there's a nice API to extend this to connect to one of those services. You can drop in Cloudinary and hook you up there. You can build your own service that will handle some of these things, like different options� you can build your own image optimizing for Astro, it's pretty pluggable.

JASON LENGSTORF: Is that something that exists today? I've used the image component and my company decided we're switching to Cloudinary, do I add a setting or a plugin?

FRED SCHOTT: If you want to roll your own, there's an API designed for rolling your own. But if you're just like, I want to talk to Cloudinary, that's a really quick� like, you're basically transforming the URL you saw, what's going on in here URL, you're rewriting that to point to Cloudinary and our goal is just to ship Astro at Cloudinary integration and it's set up for you.

JASON LENGSTORF: That is one of my favorite things. Can we add a little� whatever your favorite� your favorite JavaScript framework, let's add a dynamic component in here, just to show how quick it is. We have barely 15 minutes left in the show and we're going to implement and ship some component in that time.

FRED SCHOTT: I'll give a shoutout then. Check out this link I just posted. This is our integration catalog. This is where they all� they all live. You can see Cloudinary, for Netlify CMS, I think. Here's Sanity. Here's Tailwind. There's good stuff here. What's the best one to show off? They're also good. Which one do you want, you pick?

JASON LENGSTORF: The fastest ones would be Svelte or Vue or React so we can build a component.

FRED SCHOTT: Go into the search bar, on the left, and type in whichever component you want.

JASON LENGSTORF: Lowest likelihood of error for me is going to be React. Why don't we do Preact, actually, it has been kicking ass lately. This is the magic here. So, check this out, y'all. I go in here and I'm going to stop my server. I'm going to make this big so you can see how freaking cool this is...it's like, oh, do you want to install these packages? I don't have to install these packages, I just say, yes, I would like to install these packages. You have to update your config, would you like to update your config? Yeah. Now I'm writing Preact. So, I go back and, run dev. And then, like, that's it. I can just� this button...

FRED SCHOTT: Import� I don't think there's anything in here so, yeah, you'll write your first one here.

JASON LENGSTORF: We'll call this button.tsg.

FRED SCHOTT: If you're doing a demo, you need to get a Canvas confetti. I'm going to blow your mind. This was back when we were building Skypack. Click button, get confetti would be the pitch of this. You have to connect it to Preact.

JASON LENGSTORF: It should act with the [Indiscernible], right?

FRED SCHOTT: Yeah. This is totally frameworkagnostic. Yeah. This can be connected to anything.

JASON LENGSTORF: Okay. So, I have...got it. Doing a thing.

FRED SCHOTT: CJS.

JASON LENGSTORF: I've got this. Confetti. Then, we're going to export "const."

FRED SCHOTT: Oh, you're an "export const" person. Interesting.

JASON LENGSTORF: I don't know why I picked up this habit but somebody told me it's better and they had a compelling reason and I've forgotten but it's a habit.

FRED SCHOTT: Functions are always so hard to type, I always hate that.

JASON LENGSTORF: What I want to do, we'll do an onclick�

FRED SCHOTT: Should just be "confetti" as a function call.

JASON LENGSTORF: You just do it like this?

FRED SCHOTT: That isn't what I was suggesting, but, yeah, I think that does work. I think that's it.

JASON LENGSTORF: So, kind of like that.

FRED SCHOTT: Can you get that text size, 100pixel� I don't know how you make that as big as possible but let's go big on this if we're going to have some confetti.

JASON LENGSTORF: Why not. We'll do the font size, 5 REM, make it a monster.

FRED SCHOTT: Beautiful.

JASON LENGSTORF: That's complaining about types. Does this have�

FRED SCHOTT: confetti, yeah.

JASON LENGSTORF: No, all right. You're happy now. Good. Now I can go into� let's put it in our...footer so it'll be available everywhere.

FRED SCHOTT: So if people aren't familiar, this is what makes Astro, we don't pick one thing. We're not the React, Preact, we let you pick because our architecture lets you� again, we're just giving you the ability to embed one of those interactive components on the page, where ever you want. You can have Svelte or Vue or React, all working on a page.

JASON LENGSTORF: I'm going to say "client only" because� wait, why did I import this as "button"? This isn't a real thing. So that, then, should theoretically, we should have a new button, down at the bottom...oh, I haven't started the server yet. "Run dev." This enormous button here. [Laughter].

FRED SCHOTT: I regret nothing. [Laughter].

JASON LENGSTORF: All right. And, amazing.

FRED SCHOTT: There you go, confetti for everybody.

JASON LENGSTORF: Now we've got clientside interaction and we did it in, like, four minutes. This is the thing that I think is so� just so, dang impressive to me. It was like, oh, let's add another framework and we� you know� it takes this. Right. Like, the fact that the CLI just sort of takes the lift out of what otherwise would be a somewhat cumbersome, you have to tweak your TS Config and the CLI's like, you want Preact, here you go. Those are the sorts of DX improvements. It didn't remove your ability to tweak this. If I want to go back and mess with this, I can. It's all here. Here's the Preact config, I can add custom settings. My heart desires zero config so I like that Astro is sort of� it's more of an expressive CLI, where you say, I want to do this. You're going to do x, y and z, do you want us to just do it for you? I'm like, thank you so much. [Laughter].

FRED SCHOTT: As framework, I think we get our own heads up our asses all the time. You think through big, big features and you miss this. Adding integration. These are the things that really make� that create Astro. The Houston bot, when you have nothing to latch on, to empathy at that moment, a little fun, "we got you" energy. It isn't hard to engineer. It requires stepping out of your tunnel vision and more like, what helps a developer feel comfortable here.

JASON LENGSTORF: You know, you actually� you just touched on something that is, I think, a core challenge for product companies, right, and whether you're building an open source framework or softwareasaservice, the stuff that is exciting to us, as the builders, is these, like, moonshot ideas, we want to go out and build something that's never existed before. We want to push the boundaries of tech. But for the people of using stuff, they want to not fill out a config file. They want to not have to restart their dev server when changes are made to the config file. As a dev, it is night and day different. So, the discipline of a builder to� to say, like, I'm going to do this thing that's not that exciting to me but is very valuable to our users, like, that, to me� maturity, as an engineer, when you can make that tradeoff and say, I know this is boring for me but it's going to be really helpful for everyone else.

FRED SCHOTT: You need to be innovative and you need to solve real problems and you need to do both. If you do innovative without solving problems, it's just cool tech. If you are solving problems but you're not really changing much, everyone's going to want to go with the bigger thing that's doing the exact same thing. You need to do both to make a difference in the world, I think.

JASON LENGSTORF: I think that's great.

FRED SCHOTT: Oneminute demo, just to show off one more thing that went out in Astro 3. If you go into that component, the confetti button. Let's add the ability for it to� every time you click it, it changes the text to increment. Celebrate 1, celebrate 2, celebrate 3.

JASON LENGSTORF: With a "you" state.

FRED SCHOTT: It sounds like I'm giving a coding lesson, like, Jason, do you know how to add state?

JASON LENGSTORF: Nope, that's not it. [Laughter]. So, what is the "you" state equivalent in Preact?

FRED SCHOTT: You know what, did it get the types? It's preact/hooks.

JASON LENGSTORF: So then I've got that. I'm not going to type this and hope that that's okay. If I do a number, will it leave me alone? Good. Okay. And then what we can do is, we'll set one of these and we'll say, uh, set count is...okay.

FRED SCHOTT: Nice.

JASON LENGSTORF: So then that...

FRED SCHOTT: So click that. Click it a couple times. So much confetti. Now, go in and change to "plus two." Don't refresh the page or anything and watch what happens. The button has the exact same state, but now you click it and it's going up by two. This is so subtle, but it makes such a huge improvement I think it's call fast refresh. It pushes updates that don't reset and clear out the state. The code gets updated but because it's all on hooks, it's on these contexts that React stores, if you have a modal, you have to click to open, it changes the state.

JASON LENGSTORF: That's huge, especially when you get into complex dashboard stuff where you're doing filters and stuff like that. I have definitely built features for complex products, as, like, in Storybook to avoid dealing with getting to that component and you drop it in and you're like, that didn't work, what did I get wrong? A little thing, probably doesn't feel like much until it makes all the difference in the world. [Laughter].

FRED SCHOTT: And [Indiscernible] mentioned, that's scary, I'd still refresh the page. You still can. If you're just making little style changes and you're in React and it's code changes and not CSS changes, if I was working on something very, very delicate, maybe you want to give it a little refresh every once in a while, just to be safe.

JASON LENGSTORF: There it is. Magical. So, all right. We are out of time here, so, as we're wrapping up, where should we go if we want to learn more? I'm going to start with the list of links earlier, the Astro 3.0 blog post, I'm going to link to the official docs here, because they are fantastic. I saw Sarah in the chat earlier. Really, really, really solid work for Sarah and team. And, then, uh, I'm going to link to you on Twitter...where else should someone go if they want to learn more, follow along, you know, what are the resources?

FRED SCHOTT: We are really active on Twitter, from the Astro.build account so that is the best place to get updates. We'll have an email list, one of these days. We got a bunch of stuff going out. The Twitter account is definitely where to check it out. Today was our Community Day, our docs have been translated to 12 languages, I want to say. All through open source contributions. It's an incredible lift going on behind the scenes. These are all different varying levels of translation and it's just� I think at one point, we had hundreds of PRs in a week. Maybe 100+ in one day. Incredible effort from our docs team, which is so cool and so fun to watch, too.

JASON LENGSTORF: That's very, very cool.

FRED SCHOTT: It's the best way to get involved with the team, the DX team, the docs team. You said Sarah's in the chat. Shoutout to Sarah, she runs our docs.

JASON LENGSTORF: Sarah's petitioning for Canadian translation. [Laughter].

FRED SCHOTT: Someone mentioned that Google used to have "pirate." We got to add the fun ones.

JASON LENGSTORF: So good. I'm tired of my PR edits. [Laughter]. I'll throw a link out to the Discord as well, it's very active. It's a great place if you want to go show something off or chat directly with the core team.

FRED SCHOTT: One more plug?

JASON LENGSTORF: Hell yeah.

FRED SCHOTT: Before 3.0 went out, Tuesday was our product launch for Starlight. You should be able to Google it. Starlight and Astro.build is the website. This is, like, fullblown docs in a box, right?
[Laughter].

FRED SCHOTT: Oh, my god. You got to stop being so good at these little tag lines. I love that. Docs in a box. Love that. Amazing� [Laughter]. I can't even focus, that is so good. [Laughter]. This is� docs in a box. It's everything you need to build a doc site, everything we've learned at building docs, wrapped up in a template. We're still working to move this. This is basically, like, we want to redo our doc site and why don't we do it in a way that anyone can leverage and make it so anyone can remix. We're no longer live. The day's over. But, yeah, we made number two spot. Somebody beat us, I'm not bitter. [Laughter].

JASON LENGSTORF: I'm not bitter. [Laughter].

FRED SCHOTT: This is our first time. I've never done this so the fact that we got to number two. There's a ton� we were inspired by Docusource. We're still at our [Indiscernible] days. It's all powered by Astro so you're getting all the benefits of what we just demoed today.

JASON LENGSTORF: Very, very cool. With that, we are going to call this one� I'm going to say, a massive success. This was so much fun. So many things to be excited about in Astro, in v3, the general community around building cool stuff for the web and that's something that I didn't mention, one of the things I've loved about Astro is bringing people together who are joyful about building for the internet and to me, that's such a� I don't know, I've missed that. I feel like we spent a lot of time in that� we were all kind of, like, clenched, got to build the best JavaScript. Now I'm seeing people say, what if I build something that made me smile? Because the lack of boilerplate required, you can build the big, serious thing in Astro or a button you click and it makes the word "butts" appear on the screen and that makes you laugh. It takes you five minutes and you ship it and you're done. To me, let's bring a little joy back into this field and let's do things just to make each other laugh. Let's create the GeoCities of 2023 and lean on the thing that tools like Astro make it so, dang simple.
Another shoutout to Netlify and Vets Who Code for the live captioning from Vanessa from White Coat Captioning. Thank you so much, Vanessa. Make sure you look at the schedule, we just got a� we got so much good stuff coming up. Una is going to talk about APIs that Astro is building on top of. Miriam is coming up. We're going to talk about CSS container queries and a whole lot more that I've been too lazy to get posted on the site. You can follow the calendar, get on the newsletter. But, whatever it is. Come hang out, let's go build some goofy stuff for the web.
Fred, any parting words before we call this one done?

FRED SCHOTT: Just, thank you for having me on. This was a ton of fun. Everything you said about the web, that's 100% where we're coming from. Awesome to hear you say that. Really excited with how this went.

JASON LENGSTORF: All right. Thanks, y'all. We're going to find somebody else to raid and we will see you next time.