Eric Carlisle 6:49 Hi, everyone. Hope everyone is having a great day today. Really appreciate your time. Your interest in this presentation today, going to be talking about choosing your own adventure in Astro. So I have a GitHub repository for this that has some branches for the different stages of this presentation that we’ll walk through. But I wanted to start out just so I’ve been a web engineer and designer for a long time. Wanted to really talk about what really drew me to Astro and use it as a tool and and really how it’s empowered me so far, and what’s really driven my interest. So I’ve worked with JavaScript for a long time, but within the last six years, I’ve become a React developer, which is good and it’s, you know, a lot of people have strong opinions about libraries frameworks, but what the specialization in becoming a React programmer was it’s both intriguing because it’s fascinating ideas, new approaches, brilliant innovation, Just like a lot of these libraries, but also a concern, and the concern was that I was really pin holding, or excuse me, pigeonholing myself in the thought process, or at least I thought I might be where if I’m obstructing myself in a particular specialization a particular library framework, then I’m How am I limiting myself in how I’m thinking? There’s a lot of different libraries, different frameworks, lots of work with components, web components, and I just don’t want to have FOMO with that. Want to be able to continue to be inspired and learn every day. So I also want to keep things simple. We’ll talk about that too, that that’s my mantra is, is keeping things simple? So Astro, I’ve got the homepage up. I’ve had a history of working with static site generators. Jekyll Hugo, Eleventy, one of my favorites, Astro is not exactly a static site generator, but it follows in a lot of the same patterns. It as it says front and center. It’s web framework for content driven websites, and does that very well. It also. Delivers, by default with a zero JavaScript footprint, and which makes for great performance, potentially good SEO for different content driven sites. So what I want to do is give a demo of so start with a bare bones Astro project, and branch out a little bit and give a little tour what we can do here. So we’re going to start with how you get started. Create Astra latest. I have a here we go. Okay, yeah, got it right here. So like so many project creation I’m in a terminal. I’m going to enter this command. It’s going to give me some options. It’s going to ask me to give a name for it. Since we’re choosing our own adventure today, I’m going to choose wisely, because I want the dude to cross the room when I make the choice to say he chose wisely so. And I’m going to make it an empty project, because I don’t want to, I want to keep it simple and show some of the basics without the blog template is really great because it shows some of the ways that you can incorporate markdown content and create content collections. But we’re going to keep it empty right now. And yeah, we use TypeScript, and I promise we won’t do typing acrobatics here, but some libraries we have will be have some TypeScript reliances here, and we’ll use strict we’ll install the dependencies I already have a get pot pository for this. I’m and as that’s installing, that’ll take a second, this will pretty much just give me a bare bones site. Astro is built on top of vite, so a lot of power inherited there. And I will npm start and get my bare bones site.

There we go. You only you’ll notice this little toolbar down here. It’s it shows me some integrations with Astro. The the Inspect is interesting because one of the things that makes Astro really impressive is that, as with with the integrations that we have, we can integrate just about every library out there, react, Preact, lit solid, svelte, and we can, like a static site generator. We can generate them statically, but we can also achieve different levels of partial hydration based on client side directives, and we’ll see that ahead. We’ll probably turn this toolbar off in the meantime, has a little audit tool. I haven’t done much with that, with that, but also choices for reverse logging, pretty cool. So I’m going to skip to the next step. And this is just my GCo, get checkout for a different branch. We’ll update this and two severe vulnerabilities. It’s, I think it was a regex library. It’s tied with, I think it’s client side, but always trying to keep mindful of this. So I what I did was made a couple changes. So I set up scaffolding for our project. At first we had, if I go to our initial step, pretty much we just have a source directory with pages and index dot Astro, and that’s, that’s our page. What I did was she use a different Fave icon. There we go. Was to keep that page, but now I’m going to make a layout. We were going to do that in most every JavaScript library. Or static site generator, and also added some global styles. That’s why we have some the font got better, being some padding and so forth. And I made a couple of changes in our you’re going to look at this if you used vite before, you’re like, Hmm, divine config. This is already starting to look like a vite configuration file. So just change a configuration file so that when I started, it opens it up on port 3000 we’ve got that dev bar turned off. But also, so just to give you an idea, the the files that we start with our dot Astro. Dot Astro files are really interesting because here’s my layout. They are. They can be a layout. They can be a page. They can be a component, very flexible. And if we go to the page, you’ll notice that I’ve got front matter up top, which is formatted in JavaScript, J with es six syntax, so I’m importing the layout and I am declaring variables for title, description, giving those to layout and giving some content as a child component into this. This is also pretty cool too. There’s some native components inside of Astra where this one is just, I have it set up as a code highlighter, but I’m just showing you the file structure that I have set up so far. But so far this, this looks pretty simple. It’s not quite JSX. It’s actually it’s simpler than JSX, but I’ve worked with a lot of JavaScript templating tools back to mustache and handlebars and nunchucks and liquid. And it’s really impressive what you can set up in front matter and use directly on the page, very straightforward. So let’s take a look at some integrations we can add into Astro and, as I mentioned before, react, pre act, lit solids, felt, Vue, Alpine, the also different SSS adapters and other integrations. But, and that’s, that’s, that’s also worth mentioning that Astra, by default, is not a single page application. It starts out as a multiple page application with file based routing, but you can change just about everything with that being built on top of lit, you can, I believe it can be a single page application, which becomes more important when we’re talking about in page transitions and more sharing of state between components. So we’re going to start, we’re going to add a component to this I want, I want to put a top navigation here, and I’m going to use pre act for that, and so I’ll get a pre cooked I’m

oops, I’m on three. There we go.

Okay, so now I’ve got a component for my navigation that’s going to show my initial page and what I’m now calling navigation. So this is made in Preact. What I did was I added a components in the source directory, added a components navigation folder, with the TSX file for navigation, the Preact control and a CSS module file. And then that’s a really interesting thing about Astro as well, is that you can, you can really scope the when I in fact, if I go back to my layout, we can see that I’m just importing the global style sheet and the global styles if in doing it that way, are in. Into the head in line, and they’re treated globally. We’ll get into it in just a little bit about how we accomplish that different ways where there’s scope locally to a component, but pretty neat way, all right. So, yeah, so we’ve the component is feeding from. See the template below the front matter is a JSX flavor. Customization is also transported TSX. Which tscs? Yeah, exactly. I can’t I, yeah, it’s very easy. In fact, I think the the JSX transform that accomplishes, that is being accomplished with Astro. It’s, it’s, it’s very simple, even iterating on array maps. I’m not, not sure if it even needs keys. I’m not sure if you need a top level element. It’s, it’s, it’s really cool. So changes I’ve made is I have this main navigation files reading from a constants, but it could be any endpoint that I’m getting my navigation data. And typically when you I’ll go back to my so my Choose wisely file, I could say MPX, Astro, add, Preact, and that’s pretty much how I can that’s the quick way of and I’ll ask you the dependencies that you want to install. It’ll inform you the changes that you’re going to be making. There’s your Astro configuration file, the integration. I’ll do it that way. And also, hey, check it out. We’re also having some changes occur to the TypeScript config file, making make it easier for that library. It’s going to change again on a subsequent step, but I’ll go back to my code. As I said before, components, I’m just I have a very simple array. I’m reading that Ray array into the Preact control. It is mapping over there, and we are including CSS modules that are being mapped onto that component. So, and this is one thing I’ll do is I’ll build it.

My NPM job also has a it runs Astro check to make sure that there’s no type errors, things like that, gives me a report of what it’s creating. And I’ve got another NPM script where I’m running the preview, which this is essentially the live site. So go to Network. I have a Preact control but yeah, no, no JavaScript coming down, and it’s, it’s very lightweight, very easy. So we’re going to get a little bit more complex. Now. I know we’ve one of the typical steps in noon code samples is to do a counter to show a counter where we’re showing the reactive client side, or Yeah, capability. So NPM i and we’ll start this,

I’ll close this. We’re in debug mode, so some of this is won’t show in production. Oh yeah, I forgot to mention, I’m actually viewing the content of this pre act control by importing it as a string that actually is something that Astro inherits from V so it’s really cool, especially in terms of documentation. When I go into I

my name, oh, I’m sorry that’s in there.

I think my Huh,

that’s funny. Do it Do I have so? Do I still have it? Here, you can pretty much import a file, an asset, as a string, and what I’m doing that is I’m just then placing the code into Astros code component. So as you can imagine, for documentation, that could be great real time. And also be careful. So let’s go to our counter. So for our counter, I made three components, one where we’re viewing the count was felt, and then two different components essentially do the same thing, increment and decrement the count, but one’s using lit and the other one’s using Vue. And I’ll just give it a try. And you’re asking, you may be asking yourself, what are we using? Redux, reusing Zustand is, what are we using? We’re actually using nano stores. It’s a tiny state manager, and it’s really interesting, because I think one of like when you when you think about using redox or using shared components between or shared utilities between components of different libraries, you’ll Need use different interfaces. One of these components did require, like you can see right here, nanostores react. I think one of my components does use an adapter for it, but don’t think my lit control needed it. So, so we can see that, and pretty much I do the same thing in incorporating these libraries, MPX, Astro, add svelte, add lit, add Vue. It would tell me the dependencies. It would change the TypeScript file. Let’s see where my TypeScript file is so, yeah, we’ve got, we’ve got some changes that made. It starts out with its own template for the TS config, but most of those changes were made by the as I installed the libraries I Yeah, so let’s take a look here at if I go now into counter. So once again, each of these pages so go into counter, and the reason we’re seeing a red line right here is my editor. I’ve got, like, an extension for svelte, Vue, lit everything and and I don’t think I have it set up where they all get along perfectly yet, but, but I am importing these into my Astro page. Also notice that in this counter page I’m I have styles that are scoped to this page. So if I actually view the source, or rather inspect and let’s take a look at I’m

yeah, some of this is being inherited by the page, and some of this, like this, is actually inside the component so, but really it’s just, I’m just giving these a grid display and setting that up so that the three components are one next to another, and but and the styles are scoped to this page, which is helpful for me. We’ll go into the counter files. Go into the Vue file I’ve got my template to where I have my buttons and both my bindings for the events and the styles I have, I’m importing the Nano store value. It’s actually an atom. All I’m doing. It’s a small it could be a small primitive. You can you could have more complex objects in nano stores, but you. This one is just a number. So I’m using call an atom. I’ve got an increment and decrement function, some CSS properties that I’m applying to my objects, my DOM objects, exporting them here, that’s view we’ll go over. And really in doing this, it’s really fascinating for me, just the similarities and the differences. I, like I said, six years react developer and I’ve just been wanting to jump head first and use these libraries. See the differences, see the commonalities. So pretty much the same thing here. Right now I’ve in my lit control. I’m setting a property which gets the atom from the counter store. Here’s the counter store. Is the Nano store. I’m just initializing a count atom at zero, and I have an increment and decrement function that I’m importing and using just to use once within the components. So go back to Yeah. So I’m importing them here, binding the the property, setting up my styles, mapping the or sending out the increment and decrement I’m this which are mapped onto the click on the buttons. So different syntax, but you know, same story. Let’s go to svelte. So importing the counter store where I’m getting at atom, instantiating that. I’ve got my functions, I’ve got my template where I’m displaying my count. And here are my styles in all three components. I’ve just all the styles are scoped to each component, and they do it different ways. There we go. So let’s see if I missed anything here. So, yeah, it did add a svelte project file, but that was very minimal Astro config. Let me see if I had, yeah, let me, let’s take a look at that, because you can see, and this is actually, I’m glad I brought this up, because you’ll see that lit views, felts, and with Preact, I have an include property here where I’m saying I want to include Preact From. Well, why do I want to do that? Well because with Astra, I’m able to have three libraries that could potentially have JSX. They have React, React and Vue. So to keep everything from mixing together, I can indicate the paths and separate as such. I

so I wanted to just a just a couple of extra things. I if you haven’t viewed tanstack, and this is just, this goes to and, no, actually, not yet. What I want to do is I want to build this. Sorry,

because, as we know before, all right, this is interesting here. The had some referential confusion with the lit component. Is it server side, or is it client side? It guest client side? That’s good. I imagine. I’m guessing that’s the adapter. Let’s preview it, and now let’s open the Network tab, and we’ve got more going on, but Let

me just hard reload this make sure that. Yeah, there we go. It updated so so I do have a handful of files coming in because the everything’s been bundled accordingly. And go to my navigation page. No JavaScript there. There’s a multi page application. So each route has the JavaScript it needs, which is good and bad, or can be good or bad. But there we go. And so we’re using three JavaScript libraries and not bad for

not bad for the sizes. There we go, refreshing it so the biggest ones, 24 25k

It’s pretty fast and I got what I need. I can be buttons, count up and down. One other thing I wanted to mention, I’ve been looking at Tan stack, really interesting tools that for query, router, form that work across different libraries. I’ve been really interested in the level of activity that it’s been getting. I’ve been wondering how much overhead it is to use these like an adapter for libraries if you’re using more than one, but it’s really impressive the collection they’re getting. And I was also, I thought I saw that Anna stores atom, and that reminded me of, if you’ve never seen Brad Frost’s atomic design? It’s a book, and this is a chapter from the book, but it’s a way of quantifying from a design level. And I’ve often thought that atomic design can be applied both to design and to architecture, especially through design systems, to make for very consistent to really place design, engineering and management on the same page. So just the nomenclature on that, where that was reminding me of that. Okay, all right, I’m going to stop my screen. Well, I’ll show the just in case we can, we can put the URL on the on the video for the in case you want to clone the clone the repo and give it a try. But I’ll stop my screen. I well, I’ll keep my screen up just in case. But welcome any questions.

Brian Rinaldi 37:57 Thanks, Eric, that was great, you know. And I think it does show a little bit like, how flexible Astro is. We were chatting in the comments, just how you know, one of the things I found impressive is even from the first time we used it, I guess it was like a couple years ago, at least now, where you could include, say, React component, and unless you specified that you wanted it client side, like it would render it on this, on the server and with no JavaScript. So, like, you’re actually using effectively, like JSX and but it’s server rendering that JSX, and this is long before we had, like, you know, react server components. So it was already doing that kind of thing early on, which is, like, you know, just being able to render what was effectively a client side component on the server. So I always found that really, really impressive for like, how many different frameworks, you mean, you listed them, like, six different frameworks. It’s different frameworks. It’s

Eric Carlisle 39:03 crazy. Yeah, I forgot to mention that that the if I did not put the client load. In fact, I list out on one of these pages where the different client directives are that you have the option for So, client, load, client, idle, timeout, visible, media query, it’s or only execute on the client, which is just mind boggling for me, how those different life cycles and that all comes together in the partial hydration architecture and how Astros put this together. It’s kind of just mind blowing,

Brian Rinaldi 39:49 yeah, yeah. And we’ve gotten a bunch of comments like, you know, sort of with basically, what’s what? But the benefit here, what, when I talk about Astra, a lot of it is, it’s just how much you can reduce the amount of JavaScript you have on the client. Even, you know, I know you didn’t get too deep into it, but like, effectively, each one of those things is an island, right? Yes. And, and those islands, like you, you then can specify not only what framework they use, but how, how they’re loaded. And now, even I haven’t, I haven’t really dug into it myself, but you can have server rendered islands that basically it defers the rendering and then, and actually server renders it, as opposed to, like, you know, right here, you’re basically rendering everything at once, right? And those are rendered on the client, but like you can actually server render a component, an island like that as well. So that’s a new feature and and I don’t know how to pronounce the name freoni says there are also Community Frameworks that aren’t that you aren’t even listed as the official integration. So, like, there’s lots of exist, like community integrations. So he said, like, quick and Angular, are Angular? Yeah, yeah. Which is, yeah, another, another big one. So also lots of, yes, lots of plugins. So I think it’s just, it’s really amazing what they’ve been able to accomplish in a couple years. So I have a question for you, though, and if anybody has any questions, please post them in the comments, and we’ll get to them. But like, so my question is, as somebody who really came from purely, like, we’re focused on purely react development, you said prior, did you how steep of a learning curve Did you feel like Astro had, in general, like, how hard was it for you to get comfortable with

Eric Carlisle 41:51 it? Astro? Not at all. It was more so in the incorporation of the different components and remembering the rule set for each one how styles are handled for each component, what how they template, how they maintain state. As far as I mean, I You could pretty much what I did. You could do everything with DOT, Astro files, the counter, the I mean, import, and it’s really cool, because the front matter at the beginning of an Astro File is essentially its own JavaScript object that you’re importing at at runtime or build time, yeah, or when you’re choosing,

Brian Rinaldi 42:35 yeah, yeah. I mean, I have a demo. I built two that’s like, it’s basically like, like a track. It’s like a to do list, but it’s more for tracking, like your CFP submissions and acceptance and stuff like that and so like, and I try to tell people, I mean, I wanted to add in client side stuff to show you, but like, I didn’t need to it all just works. Everything just worked great without it, without estrofiles, and very limited. There’s, like, I think the entire site all functions with no JavaScript, just fine. You wouldn’t even notice

Eric Carlisle 43:09 it, right, right? But given the option, you could, I mean, like I was saying before, it can be an SBA, you can the server side. Islands are very impressive. So it’s almost starting with just what you need. Don’t get me wrong, next js, it’s it’s a great framework for React. If I do, if I start next js, sometimes all the all the code I’m giving initially, I’m blown away by all the detail. And with Astro, if I started with either the blog template or the site template, it would have given me more, but it’s very approachable, and I think that, I think the mindset of offering that was, I’m hoping that was intentional, because it’s incredibly successful for me. It was, it was amazing, like, like saying, like, saying before, when I was using Jekyll and using Shopify liquid for that. This is much easier than that, because it’s probably because I have a React history too, and this is closer to JSX being fair. But,

Brian Rinaldi 44:27 yeah, that’s true. I mean, I would Jekyll always struggled with the just the Ruby ecosystem in general. It was like Jekyll itself was easy, but Ruby, every stuff, gems would break and stuff would, you know, I just be left with a mask that I had to really configure everything, and I don’t know Ruby so was that was hard. But, yeah, I think that Astro is super, I agree. Astro super approachable. And I even think, like, you know, they still pitch it as a content focused, like, for content sites and whatever. But I mean, there you could build almost anything. When I talk about, like, well, if you’re building, like, a dashboard that everything’s interactive, maybe there’s not a lot of value to using Astro, because everything would be a client side rendering, you know, a component. But like and and something like next JS probably makes more sense, but you could do there’s not like any limitation in what you could do with Astro. You could build an interactive dashboard and it would work. Yeah,

Eric Carlisle 45:30 it’s recently I was working on a React application that started with a create react app, and that’s been deprecated by meta, and you can pretty much just kind of bootstrap them to vite now. Yeah, so vite’s an incredible tool in Astro. Just really builds on top of it very well and makes things very approachable.

Brian Rinaldi 45:59 Yep. What would you say? Is there anything in Astro that presented you so far, something like where you’re a bit of a stumbling block that you think somebody who wants to get into it might run into, hmm,

Eric Carlisle 46:17 this might be a little controversial. Go for it. I kid, I kid. No, no, this isn’t surprising. It’s I so as I went from project to project, it was JavaScript, JavaScript, JavaScript, and it’s been so many years later, and I’m like, Oh, hey, I haven’t been doing TypeScript this whole time, so I need to learn about tuples and interfaces and types and making sure that I have type definitions that are and that I’m declaring my module and my module resolution correctly. That’s also, it’s also one of the things I ran into in this project. It was kind of funny, and Astro has documentation about that you can import these, but there are certain architectural expectations that these libraries will have. In fact, I think it suggested importing lit before view, for some reasons, but not all. So for me, the it was, I think, the presumption of, if you’re taking the TypeScript approach, and that was just one of those things where, for me, it was, got to stay marketable, you know, not dis TypeScript, but the market wants TypeScript, and I’ve got to do my my push ups with it, so that makes sure. So I’d say that would probably be the

Speaker 1 47:53 but I don’t think that would be unique, yeah, probably

Brian Rinaldi 47:57 not known. I mean, I think next JS now defaults to TypeScript two, if I were also so, yeah, I think it’s pretty much across the board. We’ve kind of said typescripts the thing I have my I’m kind of in the same boat as you. I like it in some respects. I think I don’t appreciate it as much as I could, just because I tend to work mostly, like on solo projects and things like that, by by the nature of my job, so I don’t appreciate some of the things that type safety might bring to like when you’re working as a team and different people are maintaining different parts of the project, kind of thing. And so that often becomes, for me, feeling like a burden of like, you know, I’m spending just a time, like, just undoing type fixing type errors that, like, really, ultimately don’t impact that, like the Apple actual application. But again, like I said, these are solo projects, so like, that’s I where I think I don’t appreciate that type safety in the same way for that, I

Eric Carlisle 49:05 mean, it’s another abstraction away from JavaScript. And even if you’re using JavaScript inside of React, I’m not using event handlers. I’m using functional components and hooks that are specific to the React library or signals or, you know, it’s, it’s but, but, but I really appreciated that this would let me really stay in my comfort zone and let me explore and jump out in either direction. You know, you ask yourself, you know, why would you want to throw in five frameworks at the same time? But it’s obviously not the intention, but, but, but the island’s architecture and having the ability to have two libraries at once working independently, that’s, I mean, it’s, it’s, yeah. Uh, in an inevitable requirement sometimes. So, yeah, yeah,

Brian Rinaldi 50:05 I agree. I mean, I always, I talk about it too, when I talk about Astro and I’m like, you know, it’s not recommended. I wouldn’t recommend you actually start throwing multiple frameworks at this, but at the same time, like, especially if you’re trying, that’s where I think Astro shines is like, if you’re trying to migrate, like, kind of an existing project, right? I can, in some of some of these cases, you might be pulling over components that are already written, and I can migrate them in and, oh, I guess here’s a use case. It’s great for document that work cross framework. So like, yeah, for documentation stuff, which actually we should mention, they do have a documentation library called starlight, which is like, yeah, so it’s built on top of of Astro, but specifically for documentation that’s worth checking out. So cool. Well, this was, this was great. I hope people took from it that to give Astro a try. As you can tell, like, it’s kind of funny here to be chatting, and we’re, like, we’re both fans of Astro. So like, I think I’m not the objective questioner in this case, I this is, this is what I choose to use to build new projects. So yeah, it was really great seeing you kind of demonstrate it, and hopefully people get it, get a sense of, like, kind of the ability, capabilities of it, and give it a shot.

Eric Carlisle 51:29 Yeah, and it’s a very, very live, active project. Server. Islands are a new feature. There’s a database feature that’s coming. Yes, I totally, yeah, it’s out. It was beta right now. I think I don’t have it may,

Brian Rinaldi 51:47 it may still be listed as beta, but yeah, you can use it the Astro dB, yeah, yeah, yeah, which I guess, would negate the need for Nano stores and in your the project you were doing, I guess. Well, no, you wouldn’t. You wouldn’t store in a database. Never

Eric Carlisle 52:05 mind. I’m not sure if it’s state management or I know it’s, yeah,

Brian Rinaldi 52:09 at least I haven’t tried it either, to be honest. But I my understanding when I looked at the documentation, it’s a little bit more of a replacement for like, say, Well, I’m guy we speak in AWS terms for like, a dynamo kind of thing. Maybe not to the scale of Dynamo, yeah. So yeah, nanostores is more managed state in the client, whereas, yeah, whereas this is managing state on the server. So, yeah. Anyway, it’s got a lot of stuff, and then, in fact, it up. I would say one of my things that I struggle with is that it updates so frequently, so I’m always like, feel like I’m behind, but that’s, it’s a good problem to have. I can deal with it,

Eric Carlisle 52:54 right? And you’re going to see the security vulnerabilities because there’s so many updates and the downstream dependencies. But I mean that that happens everywhere you have to. You have to pick your battles with those but fast moving projects and just yeah, like I, my, my career mantra is spell kiss with 1s keep it simple and and for me, that that’s, that’s one of the product strengths, first and foremost, yep,

Brian Rinaldi 53:25 so I was just going back in the comments here, just talking about nanostores being managing state on the client. I do know nanostores includes a library that you can actually do state on the server, because I used it in a project. The only thing I’ve struggled with was it didn’t, if you had stayed on the client and stay on the server, you had to actually pass it back and forth to, like, keep it in sync. It didn’t. It wasn’t, like, automatically in sync. It was state on the server, state on the client. But, yeah, anyway, aside, a side note, but I, because I use it for a project last year, and I was, I was passing that back and forth using nanostores Anyway.

Eric Carlisle 54:08 I did mention this before, but I was able to use nanostores natively with lit and svelte. Vue was the one where I needed an adapter I needed, like, at nanostores slash vue. Oh, okay, and it adds, I mean, it’s, it’s tiny, but, yeah, like I said before, if compared to Redux or zest and or any other state management, there’s probably a, I mean, of course, we’re not passed around an account with those. Those are much more complex, but there’s probably some sort of adapters needed for the library to sync them up have them talking on the same page.

Brian Rinaldi 54:49 Yeah, cool. All right. Well, thank you, Eric.