Hey folks, Welcome back to another episode of JavaScript Jabber.

This week looks like I am the host this week.

We usually have a few people, but Steve had something come up.

I think Dan might be traveling, and so it's me today, Charles max Wood from Top End Devs, and I have a special guest.

This is Sagie Carmel coming to us from the other side of the world.

Sagie, do you want to let people know who you are where they might have heard of you?

Sure, no problem.

My name is Segie.

I'm thirty years old.

I started developing since seventh grade and then never stopped.

I did thirteenth grade, which is funny thing that you have in Israel.

You can have a specific thirteenth grade about only development.

And then I work for the idea and the idea if I did programming as well, worked on some small start up the company companies, and then now I'm starting again one of my own after being in a startup company again while trying a variety of technologies, and generally people would know me from either conferences, small conferences or meetups that I'm usually trying to attend for having intending in Israel.

And also it's like on YouTube and some other social media platforms.

Cool.

Okay, So yeah, so today we're talking about ASTRO, and I know we've talked about it before, but I think it's been a while.

Are there things that are new at astro or.

So inherently server server actions, just like next chance, which is a new feature that was added to as fairly recently.

I genuinely I don't like using it.

But one of the features that I am that is fairly new and I'm using it quite often is the way that environment variables are passed to astro.

It now allows for we can add you can go to the astro config dot js or NJS and then write your environment variables over there and assigning it to right there.

Now it's a secrets it's a client or service side, and then after running a small sink, you can import those directly because the code without doing process dot en or import or import dot meta.

So just allow us to fairly structures side of code.

Then if it doesn't exist, it just pops an error, which is amazing.

Gotcha.

So yeah, maybe we should just get into the fundamentals here real quick and just talk about what astro is and what the difference is between that and maybe some of the other things that people have used.

All right, So Astrojas is a service side rendering framework, just like next js remix next or or when was that nuts and one else's vel kit.

So all those frameworks are flavored to a certain type of front and front library.

So it's either you get remixed for React and just for React, and you might get nuxt for view and s vel Kit for svelt.

With the Astrogs, it's like a service side agnostic framework which does allow you to incorporate any kind of client side library into it and make components that could be rendered in the server or in the client.

So if you feel like, if you feel very creative, you can take your team and just like say, okay, let's just figure out which front end library we like the most and even develop multiple components in multiple different libraries and see what works for you.

So that's a really cool thing about astrogs that allows you this freedom.

I don't recommend having multiple multiple components in the same multiple front and frameworks in the same project, but it's sure fun if you're trying to figure out what's your team So it allows it and it's amazing.

So I guess one thing that I'm wondering just diving into this, right because you know, I've played a little bit with next I've done some stuff with some of the others as well.

They kind of have this cohesive idea where everything.

I haven't used next JS since they did server side components, so I don't know how that all plays, But.

What did you So I'm curious, what do you use?

What if if you need to run it?

So my full time job, I work in Ruby.

Actually I'm so so you know, I can't reach for a jackal or something like that for my, uh, server side stuff, and then if I need client side stuff, then I'll just I'll just import something into the front end.

But a lot of times I'm doing rails and so it you know, it does a back end process and a front end process, and you know they're different because the back ends rails in the front end something else.

A lot of times that's hot wire stimulus.

But yeah, when I'm fiddling with something like an next JS, they kind of have a cohesive way of managing stuff right where it's like, hey, you kind of do it the next JS way and it just kind of works and it sounds like Astro the way that works, and if I remember right, they've got islands and so you can say this island does this and this island does that, and so you can kind of mix and match.

So are their best practices for astro kind of above and beyond the isolate your pieces or.

Generally generally not.

But that's simplicity to what makes it beautiful.

So let me give you.

Let me give you an example.

So in next JAS where you could have rendered service side component inside clients component, inside server components and sye side components.

That makes this entire ordeal of tracking what everything in what each file is doing is very complex, very complexed.

It's like just like inside each other.

It's very not understandable.

Well, I've heard that complaint from React developers just in general is yeah, you start mixing your server components with your front end components.

In ay, it's not always straightforward what's going to do what?

This is very very common and one of the issues that it suffers from the if for those who did use nextjs are normally using server actions and then try to revalidate the information for front end.

It needs to be pretty, it needs to be beautiful, and most of the issues about revalidation that it just doing the hydration in its own way.

So hydration that is done using NEXTJS with the revalidation from the service side.

Rendering component must do like a full like swamp of the page, but it doesn't let you opt in about how you should do it unless you're doing partial partial pages rendering.

So it's very convoluted and there are many ways.

If you ever saw the docks.

If you've ever seen the docks, those docks are amazing, but like they contain a lot of information for nested routes and grouping routes and to have partial rendering and in astral it just like very simple.

Just like if you want to opt out and let a server component like wait a bit and finish and then hydrate, you just write server colon deferre on the component and then what it does that it just hold the request and just keep this spot with any loading component that you choose, and then when it's ready, it just swamps it back.

But just learning it for this specific island.

So it's very simple and it's amazing and the fact that you're just staying in the jobscript ecosystem allows you to also pass and split code accordingly.

So okay, if you don't want any just I'm just hijacking.

This final question is for something.

No, you're fine, but let me just make sure that I understand it.

So essentially, what you're saying is is that if I have a server component that you know, I need to wait for it to you know, do something or render something or things like that.

ASTRO gives me a way of kind of controlling the hydration and rendering cycles so that I don't get lost in kind of the middle of the Oh.

Well, you know, this is a web front end component versus you know that has a server component has another thing, and so you know, I can tell it, hey, just render when you're done, or you know, hey, you're you're you know, I want you to manage the life cycle in this way.

That's that's very correct, And I only talked about sever de third, which is allowing to server components to be rendered later.

But you can also have client client load that is being loaded with criterias.

For example, for those who use native HTML, they might be aware that you can load CSS based on the width of the screen.

So it's immediate story that allows you to load styles based on the screen to you know, just saves like resources.

You can also do the same thing with astro and components that they're are rendered in the client side.

So we just talked about severybody for for server components, but clients, but client components also have their own like ecosystem and support that works amazing behind the scene and just just works.

And it's clear what it's made.

It's not the components.

It's not the responsibility of the component to decide whether or not it's server or clients.

It's whoever calls it makes the decision.

To me, just like under all logical reasoning, it just makes sense, you know, just sleep.

Yeah.

So so I guess the other question that I have is what what problems does this solve other than just you know, kind of knowing you know what's doing what and when and how and why.

You know, it's one thing to talk about kind of the nitty gritty of Okay, you know this is going to render at this time in this way and things like that, but you know, ultimately usually what we're talking about is user experience, right, And so the reason I do any of this stuff is because it either makes my life easier to keep track of what's going on, or it makes the user experience easier.

So does this solve one problem more than the other.

You're talking about the developer experience or the user experience.

I for this specific instance, sounds like you're talking about the developer experience.

It could be either one.

I guess what I'm saying is sometimes you do this for user experience right where it's like, hey, you know, we just render the whole thing when it's done, instead of hey, you kind of order rendered, but you're still waiting on this other thing to render and then it finally renders, and then okay, you know it's still you know, waiting for something else, or there's something else you know, and another component that's gonna you know, it's going to hook into this component and change things, and and so you know, it sounds like what Astro's doing is is giving you a good way to manage a lot of that life cycle and that that work that flow, you know, whether it's data or you know, visual components or other things.

And so some of that a lot of times is just down to it's nice for the user if it just kind of loads all at once or loads in the right way, or things like that.

And for some of this, though, when you're talking about, hey, you've gotten tested server components and for on end components, some of that it sounds like it just makes it easier for the developer to track and debug when things are working.

So I guess what I'm driving at is where where do the benefits usually come in.

Is it more developer experience thing or is it more of a use or experience And when when do you start making the decision to make these trade offs.

So I'll break it down from the beginning.

Astro is mainly, surprisingly enough, the initial intention of astro to be a content er than framework.

So when you when you ever you're creating blogs, this should be this should be.

And I'm not like I'm obviously biased here, but I'm saying that to everyone.

If you ever wanted to create a blog, astro jas just provide the best integrations and the best things to get the blog going.

And it's just service side components with pages and routing the sense most of it will be translated to HTML, CSS and JavaScript.

If you're doing fine side some client side, then this is your go to framework.

And what makes it so great obviously that if you just if you don't need the service side rendering.

You want to create static, static apps, it will just do it.

So that's the first thing that you want to think about when you're trying to choose Astro.

Let's just say, but you want to create a more complex application with like off and logins and so one, you need service any So in this instance, the reason where astro shines is both its usages of is integration from the developers experience using CSS and obviously it's speed working to using the Turbo engine behind the scenes.

So it just works amazingly and like many benchmarks has been done to compare between many frameworks, and astrog just tends to come on top.

It's just because it's so fast both from build time and obviously showing it because it's then translate all the code into native no JS code, it obviously has its own functionality behind it.

So it allows you to both have an amazing developer experience and an amazing user experience.

The issue where it lacks is currently popularity doesn't community, it just lasts popularity, so the difference between the two.

So it's like I can go into discord.

There is an AI bot that helps me and a fiber community that helps me with whatever I need.

That masking there usually get a response ten like lie from a person or a few seconds they using an AI and that's like where usually it lacks.

So this is one of the disadvantages of why Astro is Like maybe you're thinking about it, you're not sure, but it's like Astrogas is kind of lacking on popularity.

So when a person comes to me, he says, well, I don't know what Astro is, so they most likely won't pick it because they don't know.

But after they do, it's like I never looked back after choosing Astra from from my projects.

Gotcha?

Okay, So let's say that I want to get started with Astro.

Then it's like, okay, you know what you know Soggy, He's smart.

He convinced me.

He you know, I'm going to go do this right?

So where do I go from there?

So the Astra documentation is an amazing place to start.

Normally speaking, that will just tell you you, look, you need to have like a PNPM or NPM and just run the CLI.

Just like you're starting VAT as a project or you're starting an HS.

They have their own CLO.

Just starting a project, they ask you what template do you want?

Like is that a blog?

Is it a starting side rendering?

You just start from there.

It just plops out a template with a basic Astra website.

You sort of fiddling around.

It's just like, oh, it's very clear.

This components has this logect.

It looks like this, and it has its own styling and it's favorite.

But that's where you start, and then you can move forward to whatever your project needs.

If you want to move to more or interaction oriented websites, then you go on and install the integration with React, viewers, vellop or even not even just that.

You have quick, you have solid, you have like you have every and then like the world is your oyster.

Right, So I guess the other thing that I'm wondering then is we dive in is how does astro then interact with React or view or whatever?

Right.

I don't know how they created their adapter, but essentially you're downloading the React package, but you're also downloading an adapter for Astro JS.

And just like VT where you can assign integrations to a project like tailwind CSS for a very used React with with Tailwind knows that the vat configuration needs to get tail in CSS, which Astro also supports, and then like it does the same thing for reacting, and then you just tweet it like a React act.

But once you need to use it in an Astra component, because you probably will have to, then you need to either decide if it's a client, if it's a client component or a server component, and then you add the client colon low directive which love tails it.

These components now need to have the clind tight interactivity.

Okay, that makes sense.

So you know this is this goes back to what you were talking about before, where you know, now it's working with life cycle and you know all of the other pieces.

You have an adapter there that manages all that and so it it's not just kind of this, Hey, here's a rapper and we're gonna, you know, do black magic to make it work.

It actually it knows about React and it knows how React works.

And so at the end, at the end of the day, in that island, it says, Okay, then this is the way that I'm going to hook in and manage React and allow React to do its work exactly.

You got it.

Yeah, that makes a lot of sense.

So it does, right, It doesn't should be that simple.

So I guess the other question I have is I hear some people basically say, well, I like Astro because it lets me use more than one framework, and that sounds like a headache to me, to.

Be honest, that's generally.

That now I have to learn two frameworks plus how Astro works.

And I guess the flip side of the argument is, well, if I use NEXTGS and I only have to really know React plus whatever next ads.

So so when should I be reaching for the Hey, I've got a lower learning curve in next JAS versus I've got you know, whatever niceties that Astro gives me.

Versus Hey, I've kind of got sources from all kinds of stuff, and so I I have some Angular stuff and some React stuff, and so I'm gonna oh, so first, why do you make that decision?

So normally speaking, people would I'll separate between those who knows React and those who don't React, because there is a small distinction needs to be made.

So if you know React, knowing XJS is pretty simple.

The only thing you need to take control control on is when it's a server component or what you can and can do it within a server component and when it's a client component, and what you can and can do in a client combone.

We start from that.

The second thing is if you know, if you know React, the Astro writing style very similar to how you write and reacts.

It's a jsex style, but it's not exactly JSX, And I'll explain the distinction in JSX because well, it's a React framework used to based on React, and React used to be a front end library.

So if you wanted to write, for example, class, which is the htmil director for class in CSS, then you would write class name.

The reason behind the reason behind this is because well, you cannot write the keyword class.

And React JavaScript so you can't ye because.

Word in jalousy opted out for a class name.

But in astral you can write class.

And the reason is because it's service side component.

It trenders into server and you're writing like it's very similar.

It's a better version of JSX because you can write class, but you're getting a raw htmail output from that, and essentially it just doesn't do any interpolation.

However, if you want to do like let's just say map between an information to components using htmail what that you normally do is you would tweet it like React, but you won't write a key equals to I or something because again you're not running it in the client.

It's javascripted runs in the server, so when so this is the first operation.

So if you know React, knowing how astral works, it's just amazing.

You just need to get used to the concept that Astra components are servers side rendered and should mostly.

I never create a client side server a client side component for Astro, but Astra components should normally and always be service side.

So you don't write so for whoever you used to write on click on components now it doesn't work with Astro components because they intended to be on service now those for no who knows React is amazing.

If you don't know React, generally still using Astro and understanding of JSX components, it's still simple.

Know in JSX it's not the React framework.

You're learning to write code that maps to HTML in the end, even if you don't know the JSX style, can still map code that renders to HTML in the end using the HTML template, the basic HTML template, and again it should be very clear of how you do it.

It so that answers both of those questions.

So if you do or you don't, just please try.

And I'm pretty sure that you would like using it without the JSEX syntax if you're not familiar with it, or with the JX syntax if you are.

All right, So yeah, I mean I think I'm getting the picture here.

So what kinds of things do people build with astro or what kinds of things should people reach for Astro over something like next JSS.

So again, I use my Astro is my Swiss army knife.

So just like it creates everything from locks to more interactive websites.

And I didn't see any reasons why to use next JS more than I would like to use Astro.

The main issues that I haves that your vendor locked, which is one of the most complaints that I hear about next JS.

It's just like you're locked to using self to fully enjoy all the capabilities of next gess, which is feels like a cheap move against against developers.

Give me a framework that is open source and allows me to do whatever I want.

Why do I need to be vendor locked?

And I don't really see a reason why not to use next JS.

Unless you have a really complex, insanely complex website, and the scale might be something that asked for won't reach, though I think it would reach.

I really don't see a reason why not to use astro versus nextgs.

Okay, it sounds like they kind of operate in a lot of the same space, right they Yeah, they give you solutions to a lot of the same problems.

So what have you built with astro then?

So I've created the census for for the CBS, for censuses for whoever doesn't know.

So, census is like a way that you can gather information about population or everything that the government wants the people to know, the growth rate of population within regions or whatever.

So I've created the website that does it within Israel, which is a census CBS col for whoever is outside of Israel won't be able to get it.

You probably will need a VPN.

But this is the website that I've created.

It's very static, and most of it and most of the same interactivity was done using CSS, which is another topic that I haven't really talked about, but it's really important for understanding why why service side is slightly superior than client site and we'll get to it.

But so I used created this website which is mostly service side interactivity with the smidge of client site that I've gotten from connecting the graphs using Luker, which is a Google product with big Query.

So that's why.

So this is the official census site for Israel initial.

God Census, the CBS.

It's like the Census Bureau Statistic CBS something like that.

Right, So you you said, I want to dig into this.

So you said that a lot of the what animation was done with CSS, and that was important for how you're using astro, So you want to explain that.

So, yes, I would love that.

I love it.

So in CSS.

Normally people people from a back end experience, tend to underestimate the CSS.

But CSS gives you a lot of power to do many of what fun and libraries gives to you.

But it does it for free.

So we'll start for animations.

Animations you pretty much.

Get Hang on, I'm going to back you up for a second, because it doesn't do it for free, but you don't have to write code.

You don't have to write as much code in JavaScript.

What do you mean it doesn't do it for free?

So so CSS has it built in, right, and so you usually have some style and some of the style is animate for this long in this way.

And I think what you mean by for free is that beyond that, you don't really have to do any extra work, right, you don't have to you don't have to write out the animation in JavaScript, you don't have to tell it how to do the transition or anything like that.

All of that stuff's just built into your CSS.

And the other part for free is that the CSS is really really highly optimized to just work without a lot of computing overhead, whereas doing it in JavaScript is I mean, I've seen stuff done in JavaScript that doesn't cost you a lot in your computing computing resources, but the CSS is already optimized and does it way more efficiently.

Yes, So I just don't want people thinking it's just you know, automatic, It feels that way, but yeah, I get it.

So I'll advert So what I'm saying for free in this instance is what I'm saying is that for I'll be explicit about this.

So most of the animations needed to be to most of them, not all, but most of the animation needed to be to create it to be created are very simple like you however, like a click, like a target, like like shaders, like shading behind an element, so on and so forth.

Most of these animations, including scaling, it's just like you.

You get it for CSS and when I mean, now for free'z just like it's easy, it's clear and yeah, and like you, you, once you get into it, you pretty much gathered like most of the animation needed.

Now, sometimes if you need something more complex, like I just say a confetti, or you want to have like a more like three animations, whatever, then you then normally writing it in CSS, though is possible is not really reasonable, then then you opt out to JavaScript.

And why I'm recommending CSS within astro because there are front end I'm sorry about it, but there are seven ways to load CSS into front end, which is external styling, global styling, module styling, tailwind or any other one of those tailwind and you have like what it was it seven and astro you have, you would you probably mostly used one, which is scope styling.

So scope styling essentially when you create an ASTRO component, it allows you to create the styling which is being used only for that component.

So let's just say I have a class named button, so this class that I've created for the button will only be used for that button.

And if I have a class different player and that does something different, it just like it's completely separate and it behaves and behaves like it looks whatever you've decided to be looked.

So so that's what I'm saying with CSS, and now that you have more exvanced selectors, like for example, the has selector, which is incredibly popular and thank god it was created, you would also have the starting style.

Do you know, by the way, for those who doesn't know, starting style is as a new CSS I would say, I forget what's the name.

It's a query.

So when a component is being rendered to the screen, it creates the animation from the start of it.

So for example, if you're hiding something and you're showing it using a display, it would just show up.

It will just show up constantly.

And what I'm saying is it's being done for feit just like people like you would have used like a bunch of JavaScript to make the animation happens when it's being loaded, But now you get it for free using CSS and you don't have to worry about this.

This is what essentially went.

Yeah, yeah, that makes sense.

So so yeah, so you've got the scope styling, and that's the power that you're getting as far as CSS goes from your from using astro right, because then you can say, hey, stuff in here animates this way.

You know, stuff in here hover it's hover states react in this way, and I can I can have that same kind of thing.

I didn't like your button example, because usually you want all your buttons to look more or less the same.

But yeah, okay, well button, a lot of your other Yeah, what you're talking about here is okay, you know, maybe I have a menu component and so you know the dropdowns or whatever.

Right, if I hover there, the hover states are going to be unique to that component.

But then if I have I don't know, graph or a chart and I hover over a particular data point, then that's going to show things up differently.

Right.

It might give me the numbers and a little box and things like that, but I don't want it to pop in in the same way that the menu does.

And so you know, I can set the specific cover states.

And sure you can do that by you know, giving it a class and then you know, doing a bunch of other wrangling.

But if you've got it scope to just that component and you know that, okay, any chart component's going to have hover states and animation states and click states this way, then then you know that you've got everything kind of set up that way and you don't have to worry about, Okay, is this going to bleed over to something else because it's all scope to just that kind of a component.

Amazing, you got it.

Yeah, that's cool.

I think I've seen this in other frameworks, but they wind up doing some of the other CSS magic to make it work.

Yeah, and I'm happy that Astra has it.

It also has some cheat sheets which with some shortcuts.

So for example, if you're creating a class.

Normally, in order to create a class and condition whether or not a class would exist on a component, but just say we're talked about all the service side rendering and not talking about the land side, you would have to be like doing string interpolation over the class.

Like usually we would have a class which is class A, class B, class C, and you have space between.

Right when using Astro, there is something that is called class list which allows you to pass on on the rate which is containing all the name and allows you to condition whether or not a name of a class would exist, whether or not if if you condition, it would just say active call on something that is brilliant, and if it's true, it would be inserted to as a name of a class, and if it isn't, it will just it will just disappear.

And it's just like it's a nice shortcut for managing your components.

Yeah, I've seen that in some of the things that I've like, I've I've gotten HTML templates that have ASTRO in them, and I've seen those directives so.

Amazing.

The next thing what they'll be interesting about is also the specific one that I've created.

I also use HTMX.

I'm not sure if it's within the scope of this conversation, but if you're curious to hear about this and why did I use HTMX, I'll be more than happy to do.

Well.

Yeah, I mean it is interesting.

We've had Carson Gross on the podcast talking about HTMX and it's a it's a tool, or it's almost a patternal anyway, but it's it's a really handy way of managing a lot of your state and things like that, and it seems like with ASTRO it would play pretty nicely because again you've got these pockets of functionality right that you're managing as islands, and so HTMX it doesn't think of it quite that way, but I could see how you could.

You can make a mesh.

Yes, So about the integration between HTMX and ASPER, it pretty much nailed the differences that like HTMX would normally need you to return an HTML template which you can create using astro.

You can create the estra the HTML temple, just return them so and then it will just swap them directly into the client to whatever side that you need.

And so you don't even need the client side of like fiber b for the simplistic stuff, because you would have HTMX doing all the swapping together with ASTRO.

So ASTRO will hold the state using the database and would vendor the HTML and HMX will just swap it where it's needed based on the interaction.

Yeah, we do something similar with RAILS and Turbo.

It's amazing and so yeah, and it's the same idea, right, It's like hey, you know, uh, you know, replace or insert after insert before whatever, right, and you just throw some HTML back and so RAILS renders the HTML with the data from the database and yeah, puts it into the page based on what you're telling it, following the conventions in Turbo, and I know HTMX basically works the same way exactly.

And one last thing that it's important to mention and why I recommend using astro and why it is so fun to use astro, which is like a JavaScript both the front and the back, which is the inherent part at about code splitting.

So let me give you an example.

I'll just say I've created an ID for a component, right, And let's just say I've created this ID, and I need this ID to be used in a service side component and in a client side component.

Usually passing those between the client side and the service side would be le'll just say headache, especially if you're I mean you're from Ruby on rails, like do you know how to pass?

Like I just I need this ID and the client side whateveration because those are two completely different languages.

But in astray it's both on the same.

So I create a constant ideas file and my in the idea is being shared to the service side components and to the client side components, so it's will duplicate it to the server and the client and just being used and it's interlace and it's amazing.

That's cool.

Yeah.

So I'm a little curious because I think we're kind of talking around some of the fundamentals of ASTRO and you know, some of the you know, more common use cases.

Where where do you get more advanced with ASTRO?

Where where do you get into features that I guess maybe aren't as simple or common but are still powerful.

Can you give me an example.

I don't know.

What will be let's just let's flip the script.

What will be an advance?

So what would you consider the advanced when you're writing rubion rails with whatever front end frameworks to your front and library with your decision.

What I mean, usually you're getting into, you know, more of I guess the optimization stuff, you know, where it's hey, you know, I'm optimizing the way I access my database, or you know, maybe I have some really really complicated behaviors.

But I know people generally solve a lot of that with something like React.

Wait, you're saying that accessing the database, they're solving it using React by you No.

No, No, really complicated interactions on the front end you handle with React.

So amazing.

If you need complicated interaction.

You could just opt into React and God bless you.

Yeah, so it's just like you have it all like from side to side.

You need the complex stuff you can install, even like front the libraries like material Lui, schatsy and has a right integration with aastro Okay, get it for free.

You want something with more tailin do you have flow bite and obviously and it just works.

Makes sense.

So are there optimizations you need to make on the back end as far as you know database or the way you do your queries or things like that if you're pulling from a data source.

So normally it would be I wouldn't have an issue with generally pulling information from the database because again you're just writing typescript as like back end.

It's just like the difference is that and what that I'm usually trying to tell to whomever I've worked with on the components.

It's just like not to write the exact queries within the components.

So I would rather have like an entities file than those entities file you managed like the functions like getting get all creator and that and then you call them using the astro component.

Not because I'm afraid of any sort of leakage of the information.

But because I mean like because of how ASTRA works, which is some people might argue that it is the disadvantage.

So ASPRA is the component of aspro is inherently divided to two, the logic and the template of the HTML.

So you must either I think you return a response to to return something else except the HTML template, or you will let the HTML template decide on whatever it works, right, So you need to have the logic finish.

Most of the time, you need to have the logic finish.

So that means they can condition is that early bailout which is something so that they think of early bailt is like write it if and then return.

This might not work.

This might not work because you need to return a component, so you will write a wrapper around it.

It's just like it's very inconvenient.

It's not.

It's not convenient to write it within the ASTRA component.

So that's the only thing which is not that bad all things consider.

But it's just like things to know, just don't write your selects and inserts and whatever within the astro component.

Was just create a function and then manage.

Yeah, that's common practice.

I've seen with most back end systems, right you have, Yeah, you've segregated your logic so that your database access layer is separate from your rendering logic.

Yeah.

What will be another interesting thing to talk about, which are slots.

So if if you don't want I mean so, in React, normally you would have in order to pass on, would you say the aid of the JSX to the next component and to renderative components, you would have children.

So the children components will be whatever you Let's just say I've created a menu, which is a component that I've created, and then I will have like the list of whatever I needs to have inside them.

In so you would have children component within the within the minu, the definition of the menu would have the children component.

In Astro, you would have slots.

And slot is is an HTML element that a lot of people don't don't know that exists.

That there is a template HTML attribute, the tag and the slot which are both like official but the slot, the spot template or the spot tag allows you to insert components just like a children would.

So what's the difference.

Normally The difference would be that you can give slot's name, So by giving them name, you can also tell to the parent, Okay.

The parent can say to the kid, okay, I want this in the spot named the header, I want this in this in the nameless slot, which is the children, and I want this in the footer.

So normally you can What did I do with my styling is that I would have the component, the outer component designed the entire layout and then the and then inject the inner components where they need to be fit.

What did you get is an extremely amazing experience that you know that layup is outside.

The father decides on the layouts, and the components themselves decided on the functionality of themselves.

And this is like, this is one of those things that it's just very convenient.

And I don't know how people manage without my cashwall.

Usually they pass it by the props and it's just like it looks kind of ugly.

Yeah, I've seen that, and yeah it gets a little bit hairy.

I've used other component libraries that yeah, you can basically say, hey, these are the things that go in the different slots.

So Ruby on rails has a view component library that you know does all the service rendering, and yeah, you can give it slots and then you can give it other components to stick in those slots.

Amazing and view transition.

Have you ever heard of hue transition?

I think I might have heard of it, but I don't know what it is.

So the view transition inherently essentially created using it's a standard web thing which allows you to move between websites without having a front and library, and it allows you to fade between pages, so you can, if you want, us a client site feel feel to something without like looking at the at the indicator that says that it's doting when it's trying to move between component A too component B, or between page A to page B.

You can in astro they give you like a nice, a nice addition to it, but it's just like you write, you add the view the view transition, and and then you like you want to move between page A too, pah B, just press on the link and you don't get any indication from the server that it's doted, but it will be instead faded nicely from one page to another, which is you can do it also on Ruby Advance.

It's just like it's a website.

Yeah, yeah, yeah, there are a number of I think HTMX allows you to do something similar as well, yes, where you know, you just allows you to yeah, and so effectively, what you're doing is it's like, okay, I click the link to load a different page on the same website, and so it intelligently says, okay, what changed, right, And then.

There is a few differences though there's a few difference So view transition not only that, it does also the fading between the pages, which HTMX won't unless you explicitly create animations you CSS.

So this does it with an animation.

Not only that, it also allows you to persist certain elements when you move between pages.

Okay, so I'm Fireship created a video about it way back, which is when you press the button, a certain element moved from the center of the page to the top five.

But if r L and the page itself change between page A to page B and it went through the server, right, So you pusition is slightly more advanced animation and gives you like a really client side feel And normally you would have to do like jump through hoops to create this animation, and you're sort of getting.

It for free.

Yeah.

Yeah, I like that because you know, and that's that's the kind of UX that's nice, is that, you know, it's like, hey, now what you had it, you know, and now it looks like this instead of what you started with.

Exactly super cool.

Well, we're kind of getting a little bit toward the end of time.

If people want to learn more about you or about Astro, what are the best resources out.

I mean, I'm just trying to every once in a while topload to YouTube, maybe post on LinkedIn, but those two places I'm trying to be I'll try to be more mindful about it.

But this is where I'm currently at.

Until I become an official, official public speaker about Astro, I wanted to one day just talk about Astra freely and.

Trash next Chase, So, what's your YouTube channel?

So I think it's I think it's just my name in English, but I don't think it's a good idea.

Let's say if I can it says segi at Segi caramel.

Let's see, and then yeah, on LinkedIn, we can just look you up by it.

Yeah, just like a caramel.

It doesn't have any It just added a bunch of numbers in the end.

But it's just so it's like, yeah, it might contain Hebrew.

So if your audience do a Hebrew, but sometimes I'll try to add I'll try to add stuff in English.

Right, all right, Well, so the last part of our show is always picks, and that's just shout outs about stuff that we like.

So I'll go ahead and get us going for the picks.

And I always start my picks off with with a board game.

And so this board game is it's a variation on Pandemic.

So for the folks that have played Pandemic, if you don't know what Pandemic is, it's a cooperative game where you're trying to eradicate diseases from the globe.

And so, yeah, you all have different roles and you move around and right, you play cards to find cures and things like that.

This one is a little bit more involved.

And there's a variation on Pandemic called Fall of Rome, and so instead of diseases, you have armies that are marching toward Rome.

This one.

This one is Fate of the Fellowship and it's based on Lord of the Rings.

So and I'm going to be teaching it in about three weeks at a game board convention.

Board game convention anyway, Yeah, my friend does.

He teaches games at the at the convention every year.

He used to be part owner in a board game store.

Does he make a living from teaching games?

Like, is he doing it for no?

Not anymore.

So he was getting he was he was getting paid by the store and his profit share, but the store closed, so now he's just doing it just just for fun.

So anyway, the way that this works is you have armies from you know, the different bad guys and you have armies for like Elvin armies.

What was it it was elves humans And anyway, there are like three or four different colors of good guy armies and so you know, you're moving your armies to fight off the other armies and then you're trying to get Frodo and the ring to Mount Doom.

You have to complete like I think it was four missions, and the fourth one is getting frod or Mountain Doom and being able to play a number of ring cards in order to destroy the ring.

And if you can do that, you win.

We played it twice we lost, so it's it's not just like this super easy game, but it was fun.

There were four of us playing.

Board game geek says it's best with three, and yeah, so you play with two characters each and so you know, somebody's Frodo and Sam and somebody else, you know, and then they might have another one.

I think that the other character that that person was playing was legless, you know I was playing was I playing Aoin and Mary and Pip and anyway, And so you can do different they have different abilities and you move around the map and try and manage this stuff.

You also have havens that you're trying to protect, and if you lose havens, then the hope meter goes down.

If you lose hope before Frodo gets to the then you lose.

And it's got a tower that you roll the dice through that looks like sour on the eye of Souron tower.

You know.

The different missions are you have to take where what's Saramon's tower you have to take that, you have to have a certain kind of a battle.

I think I can't remember.

I've only played it like twice, but it was very, very fun, and so Board Game Geek waits it at two point ninety nine.

So Pandemic I think probably is like a two point one or two point two.

This is a bit more involved because you're moving the nascul around and trying to you know, you're you're you're keeping track of a lot of things.

Uh.

The armies march are along different paths on the board and so unlike Fall of Rome, they don't all go to Rome.

The paths go all over the board and so anyway, uh, just and it's it's it was fun.

We really enjoyed playing it.

So I'm going to pick Lord of the Rings Fate of the Fellowship.

Uh, this is a new game that came out this year.

Usually I'm picking games that you know are a year three old, but this one's new.

So.

Definitely go pick it up.

It's one of the more well put together visual games.

So it it's very fun because all the pieces are are well designed and anyway, so so it's cool, very cool.

So I'm gonna pick that.

My wife and I watched a movie last night.

I didn't love it, but it was it was it was good.

I could have predicted every every plot point in a movie whatever.

But it was called The Christmas Miracle of Jonathan Toomey and no, it's at the beginning of the movie.

The main character is a ten year old boy.

His father goes off to war.

I think it's World War one and he's killed in action and he has this nativity set that he put out every year with his dad and he loses it.

And so Jonathan Toomey is this wood carver.

And so.

Anyway, they moved to the town where Toomey lives and you know, meet with him and you know.

Anyway, so yeah, so you know, and it takes place at Christmas time anyway, and to me is you know, they commissioned him to carve a replacement Nativity set.

So anyway, it was all right.

I guess it's not a glowing endorsement.

But if you're looking for a movie that you probably haven't seen, and yeah, it has.

There were like two actors in it that you've seen in other stuff.

I'm trying to remember names, but I'm not very good at remembering celebrities names because I just don't care.

But there was one in particular.

She was like one of the kids that he befriends, and she was in the Host and a handful of other movies as an adult, right, and she's a little kid in this movie.

So we ran across it, and it's got to be twenty years old or something at least, But anyway, we enjoyed it, so my wife really liked it.

So so if you're looking for that that kind of a feel good Christmas movie, then then that's right up your alley.

Those ones don't always do it for me, but I'm a good support.

I'll sit through a movie trying to think, what else.

Are you thinking about?

A pick?

Because I have something as American and people just if they go ahead play it, it's just sick.

Do a pick.

It's just the whole Night Silk song.

It's amazing and if you didn't play it already, you should.

It's an amazing game.

Which song is it?

No suck song in the game the video game, it's a whole night sucks song.

Okay, so all night?

Yeah.

Yeah, this game crashed the entire internet or the stores of Nintendo XBO and just crashed it for being awesome.

And it's still amazing and I recommend you all to play and obviously played the first Hole name.

Those games are just amazing.

Team Cherriot just.

And know what the the graphics for that game, I I just I love them.

Hendron not animated, not pixelated, just throwing with all the passion, just amazing.

Yeah, it's it's very yeah, simple gameplay, but it's it's a fun game for sure.

Simple, my goodness, simply this game, this game is so goddamn hard because it's hard.

Oh yeah, I'm just saying.

It's like, it's it's how do I explain it, it's it's somewhere between.

And I I haven't played a ton of it.

My son was really into Night oh and Silk Song.

So Silk Song just came out.

Yeah, but yeah, so Hollow Night.

You know, you move through, you do have some basic attack and things like that.

It's almost I mean, you are fighting through the levels, but it's almost as much a puzzle game, like how do I get into the right position to to get through the level right with whatever abilities I have?

As it is an action and fighting game.

M oh and there is a like a lot of lord behind it.

The generally fun game it is.

I love the visuals on the game, and it's definitely a fun game.

Like I don't want to sell it short, but yeah, but I haven't played Silk Song yet, so I'll have to check that out.

I really want to get the switch to I haven't.

Don't do it.

I don't do it for two reasons.

One the fact that Nintendo gets away for overpricing their console is unforgivable.

There is no reason to buy Anintendo too just so I like, I wouldn't feel feed to that market.

Secondly, it's uh, the Nintendo Nintendo two doesn't have like a lot of graphic improvements that if you already have a Nintendo one, you should just stick to it.

And unless you won the very exclusive game, then I recommended to stick to the Switch one.

Right, Are there are there exclusive games to Nintendo or to the Switch.

To the Probably yes they are, they are, But again, if you're not looking for anything specific, and I recommend it just to stick to the Switch one.

I also have a Switch one that just like, because I do not that keen of just like up and over and just buying, Like how much was it eight hundred eight hundred bucks for the switch?

That's nuts.

I haven't even looked it's nuts.

Yeah, it looks like Mario Kart World, Donkey Kong Bonanza.

Oh, there's a Metroid a Kirby I Rule Warriors.

So yeah, there are games I guess that are exclusive to switch to.

But yeah, I haven't even priced it.

I was going to look and see how much it was for Christmas.

But now that you'll see the prisl, it's more than a.

Couple hundred dollars.

I'm probably, oh, yeah, it's five hundred dollars here and that that's a little bit.

If my kids really really deeply wanted it, it'd be like, hey, this is all you're getting, right for the next three years.

Oh my goodness.

So and again it's like it doesn't have any significant graphic improvement.

So just yeah, I guess, I guess I haven't looked into that either.

I have to say too that the so one of the reasons that I was excited to get the Switch when it came out was it was kind of the hybrid, right, it was a console you hooked to your TV and then you could also like just put it in your bag and take it with you.

And as far as a handheld system goes, I really liked it.

As far as then hooking it up to my TV, I felt like it wasn't the best console.

Yes, is that is that a terrible thing to say?

I mean, no, that's that's been my take.

So you know, I don't know.

I mean I like this switch.

The Nintendo for me, just like it was very un not convenient for me.

The hookup.

I don't know how it works with other people.

But you get like this plastic piece printed.

It's very like not very convenient.

Then you need to hook that up with your HDMI and then in order to make it work, so I need to put I need to place this the freaking switch inside the slot.

Right, it's very annoying.

Like I wasn't excited for handhelds.

I would recommend the Steam Deck, which is the better one.

That being said, I don't have the Steam Deck.

I just had heard of reviews about this and just like you get access to a bunch of games and it works pretty pretty well.

And if you're traveling a lot, maybe try the RG Xbox, which is not really an Xbox hand held.

It's a lot but just look it up.

Though the RG Xbox is more expensive than Nintendo than Nintendo's.

Only Yeah, yeah, I mean the I guess the nice thing about like because I didn't even know Steam how to Steam Deck, but it looks like you can play basically anything you can get on Steam on the Steam Deck, which is.

Some stuff you can get on Play Pass with the Xbox that for stuff can also play PC.

Right, it's amazing.

It's like it gives you everything now about the About the quality, my guess it's on par.

It's not slightly better than the Nintendo.

Switch, probably.

Just for assuming because you're optimized for this team.

But yeah, but yeah, my my other issue with the Switch is that, oh they do have a docking station for the Steam Deck as well.

The other issue that I had was that the so the little joy cons like those, we get drift in them, We get all kinds of other issues and then it's okay, well, you know, the batteries dying on it, so I have to go slide it onto the switch, and oh when I slid it on, then it it came off of the dock just enough for it to kind of glitch out.

Yeah, where it is real, I get, like you know how many times I got.

But the issue, the issue was always with it when you were using it as a console on your TV and not right as a handheld.

It was generally better, but.

I have one of the issues, and I have some.

Normally, if you buy a single swhich you get like two controllers which are two halves, which is essentially one, but if you want to play with a friend, you have to hook it up to this sort of yanky plastic thing that slide it over, and then you would hold it horizontally instead of vertically with the other one.

You have no idea how many times I've messed it up and I flipped it to the wrong way.

And I'm pretty sure that most of the reason why it strifts because of me, because of the good because I have a stupid plastic thing inside the inside the controller.

I got the other ways dominant.

Yeah, yeah, all right, well I'm gonna go ahead and wrap us up.

But this was cool, good conversation about astro, fun conversation about games and video games.

Thank you for having me.

I think I have it in me somewhere.

Eventually I want to write a video game.

But we'll see if you need somebody to talk to you on my fresher video games.

So yeah, I know a few people who have built video games too.

So my twenty year old keeps saying that he wants to be an indie video game developer.

Of course, getting him to sit down and actually do the work to learn how to do it, that's another story.

But I get the appeal and I think it.

I think it'd be fun.

So anyway, we'll go ahead and wrap it up until next time folks max out.