Transcrição completa de Why Astro Is Winning Developers Over with Sagi Carmel - JSJ 697

everything. I haven't used next JS since they 72 00:04:27.560 --> 00:04:30.120 did server side components, so I don't know how that 73 00:04:30.279 --> 00:04:31.079 all plays, But. 74 00:04:33.519 --> 00:04:36.120 What did you So I'm curious, what do you use? 75 00:04:36.199 --> 00:04:37.720 What if if you need to run it? 76 00:04:38.160 --> 00:04:41.000 So my full time job, I work in Ruby. Actually 77 00:04:41.120 --> 00:04:44.680 I'm so so you know, I can't reach for a 78 00:04:44.839 --> 00:04:48.319 jackal or something like that for my, uh, server side stuff, 79 00:04:48.360 --> 00:04:51.839 and then if I need client side stuff, then I'll 80 00:04:51.959 --> 00:04:56.240 just I'll just import something into the front end. But 81 00:04:57.000 --> 00:04:58.959 a lot of times I'm doing rails and so it 82 00:04:59.240 --> 00:05:01.959 you know, it does a back end process and a 83 00:05:02.040 --> 00:05:05.399 front end process, and you know they're different because the 84 00:05:05.480 --> 00:05:08.120 back ends rails in the front end something else. A 85 00:05:08.199 --> 00:05:12.279 lot of times that's hot wire stimulus. But yeah, when 86 00:05:12.279 --> 00:05:16.279 I'm fiddling with something like an next JS, they kind 87 00:05:16.319 --> 00:05:19.279 of have a cohesive way of managing stuff right where 88 00:05:19.319 --> 00:05:21.000 it's like, hey, you kind of do it the next 89 00:05:21.079 --> 00:05:23.319 JS way and it just kind of works and it 90 00:05:23.439 --> 00:05:25.480 sounds like Astro the way that works, and if I 91 00:05:25.560 --> 00:05:28.639 remember right, they've got islands and so you can say 92 00:05:28.680 --> 00:05:30.759 this island does this and this island does that, and 93 00:05:30.839 --> 00:05:34.240 so you can kind of mix and match. So are 94 00:05:34.319 --> 00:05:38.040 their best practices for astro kind of above and beyond 95 00:05:38.240 --> 00:05:40.759 the isolate your pieces or. 96 00:05:43.279 --> 00:05:48.319 Generally generally not. But that's simplicity to what makes it beautiful. 97 00:05:48.519 --> 00:05:50.959 So let me give you. Let me give you an example. 98 00:05:51.160 --> 00:05:55.680 So in next JAS where you could have rendered service 99 00:05:55.720 --> 00:05:58.879 side component inside clients component, inside server components and sye 100 00:05:58.920 --> 00:06:03.560 side components. That makes this entire ordeal of tracking what 101 00:06:04.000 --> 00:06:07.639 everything in what each file is doing is very complex, 102 00:06:07.959 --> 00:06:12.399 very complexed. It's like just like inside each other. It's 103 00:06:12.480 --> 00:06:13.399 very not understandable. 104 00:06:14.000 --> 00:06:17.160 Well, I've heard that complaint from React developers just in 105 00:06:17.279 --> 00:06:20.800 general is yeah, you start mixing your server components with 106 00:06:20.920 --> 00:06:25.399 your front end components. In ay, it's not always straightforward 107 00:06:25.600 --> 00:06:26.959 what's going to do what? 108 00:06:28.879 --> 00:06:32.959 This is very very common and one of the issues 109 00:06:33.040 --> 00:06:36.079 that it suffers from the if for those who did 110 00:06:36.279 --> 00:06:40.680 use nextjs are normally using server actions and then try 111 00:06:40.759 --> 00:06:45.120 to revalidate the information for front end. It needs to 112 00:06:45.240 --> 00:06:47.959 be pretty, it needs to be beautiful, and most of 113 00:06:48.079 --> 00:06:52.399 the issues about revalidation that it just doing the hydration 114 00:06:53.040 --> 00:06:56.160 in its own way. So hydration that is done using 115 00:06:56.279 --> 00:06:59.600 NEXTJS with the revalidation from the service side. Rendering component 116 00:07:00.120 --> 00:07:03.399 must do like a full like swamp of the page, 117 00:07:03.480 --> 00:07:05.839 but it doesn't let you opt in about how you 118 00:07:05.879 --> 00:07:09.079 should do it unless you're doing partial partial pages rendering. 119 00:07:09.600 --> 00:07:12.839 So it's very convoluted and there are many ways. If 120 00:07:12.879 --> 00:07:14.839 you ever saw the docks. If you've ever seen the docks, 121 00:07:14.959 --> 00:07:18.360 those docks are amazing, but like they contain a lot 122 00:07:18.439 --> 00:07:21.920 of information for nested routes and grouping routes and to 123 00:07:22.240 --> 00:07:26.199 have partial rendering and in astral it just like very simple. 124 00:07:26.720 --> 00:07:29.000 Just like if you want to opt out and let 125 00:07:29.079 --> 00:07:32.079 a server component like wait a bit and finish and 126 00:07:32.160 --> 00:07:37.839 then hydrate, you just write server colon deferre on the 127 00:07:37.920 --> 00:07:41.959 component and then what it does that it just hold 128 00:07:42.079 --> 00:07:45.639 the request and just keep this spot with any loading 129 00:07:45.680 --> 00:07:48.319 component that you choose, and then when it's ready, it 130 00:07:48.399 --> 00:07:50.600 just swamps it back. But just learning it for this 131 00:07:50.720 --> 00:07:55.319 specific island. So it's very simple and it's amazing and 132 00:07:55.480 --> 00:07:58.879 the fact that you're just staying in the jobscript ecosystem 133 00:07:59.040 --> 00:08:05.199 allows you to also pass and split code accordingly. So okay, 134 00:08:05.480 --> 00:08:07.839 if you don't want any just I'm just hijacking. This 135 00:08:07.959 --> 00:08:09.399 final question is for something. 136 00:08:10.079 --> 00:08:13.000 No, you're fine, but let me just make sure that 137 00:08:13.040 --> 00:08:16.560 I understand it. So essentially, what you're saying is is 138 00:08:16.639 --> 00:08:19.879 that if I have a server component that you know, 139 00:08:20.000 --> 00:08:22.279 I need to wait for it to you know, do 140 00:08:22.439 --> 00:08:25.879 something or render something or things like that. ASTRO gives 141 00:08:25.920 --> 00:08:30.319 me a way of kind of controlling the hydration and

142 00:08:31.079 --> 00:08:35.440 rendering cycles so that I don't get lost in kind 143 00:08:35.480 --> 00:08:37.559 of the middle of the Oh. Well, you know, this 144 00:08:37.759 --> 00:08:41.639 is a web front end component versus you know that 145 00:08:41.720 --> 00:08:44.519 has a server component has another thing, and so you know, 146 00:08:44.679 --> 00:08:48.159 I can tell it, hey, just render when you're done, 147 00:08:48.440 --> 00:08:51.480 or you know, hey, you're you're you know, I want 148 00:08:51.519 --> 00:08:53.159 you to manage the life cycle in this way. 149 00:08:54.039 --> 00:08:56.799 That's that's very correct, And I only talked about sever 150 00:08:56.960 --> 00:08:59.919 de third, which is allowing to server components to be 151 00:09:00.200 --> 00:09:04.759 rendered later. But you can also have client client load 152 00:09:05.320 --> 00:09:10.519 that is being loaded with criterias. For example, for those 153 00:09:10.600 --> 00:09:13.960 who use native HTML, they might be aware that you 154 00:09:14.039 --> 00:09:17.639 can load CSS based on the width of the screen. 155 00:09:18.159 --> 00:09:21.120 So it's immediate story that allows you to load styles 156 00:09:21.240 --> 00:09:24.960 based on the screen to you know, just saves like resources. 157 00:09:25.480 --> 00:09:28.120 You can also do the same thing with astro and 158 00:09:28.200 --> 00:09:31.039 components that they're are rendered in the client side. So 159 00:09:31.240 --> 00:09:34.159 we just talked about severybody for for server components, but clients, 160 00:09:34.600 --> 00:09:38.440 but client components also have their own like ecosystem and 161 00:09:38.799 --> 00:09:42.919 support that works amazing behind the scene and just just works. 162 00:09:43.039 --> 00:09:45.919 And it's clear what it's made. It's not the components. 163 00:09:46.480 --> 00:09:49.879 It's not the responsibility of the component to decide whether 164 00:09:49.960 --> 00:09:54.320 or not it's server or clients. It's whoever calls it 165 00:09:54.559 --> 00:09:58.879 makes the decision. To me, just like under all logical reasoning, 166 00:09:58.879 --> 00:10:00.759 it just makes sense, you know, just sleep. 167 00:10:00.960 --> 00:10:04.320 Yeah. So so I guess the other question that I 168 00:10:04.440 --> 00:10:08.440 have is what what problems does this solve other than 169 00:10:08.600 --> 00:10:12.200 just you know, kind of knowing you know what's doing 170 00:10:12.360 --> 00:10:18.559 what and when and how and why. You know, it's 171 00:10:18.639 --> 00:10:20.559 one thing to talk about kind of the nitty gritty 172 00:10:20.600 --> 00:10:22.799 of Okay, you know this is going to render at 173 00:10:22.840 --> 00:10:25.559 this time in this way and things like that, but 174 00:10:26.679 --> 00:10:30.159 you know, ultimately usually what we're talking about is user experience, right, 175 00:10:30.240 --> 00:10:32.919 And so the reason I do any of this stuff 176 00:10:33.080 --> 00:10:36.279 is because it either makes my life easier to keep 177 00:10:36.320 --> 00:10:37.960 track of what's going on, or it makes the user 178 00:10:38.039 --> 00:10:41.399 experience easier. So does this solve one problem more than 179 00:10:41.440 --> 00:10:41.720 the other. 180 00:10:42.320 --> 00:10:44.960 You're talking about the developer experience or the user experience. 181 00:10:45.039 --> 00:10:47.519 I for this specific instance, sounds like you're talking about 182 00:10:47.519 --> 00:10:48.480 the developer experience. 183 00:10:49.200 --> 00:10:51.799 It could be either one. I guess what I'm saying 184 00:10:51.879 --> 00:10:54.399 is sometimes you do this for user experience right where 185 00:10:54.480 --> 00:10:57.159 it's like, hey, you know, we just render the whole 186 00:10:57.200 --> 00:10:59.879 thing when it's done, instead of hey, you kind of 187 00:11:00.120 --> 00:11:01.879 order rendered, but you're still waiting on this other thing 188 00:11:01.919 --> 00:11:04.240 to render and then it finally renders, and then okay, 189 00:11:04.399 --> 00:11:07.279 you know it's still you know, waiting for something else, 190 00:11:07.399 --> 00:11:09.679 or there's something else you know, and another component that's 191 00:11:09.720 --> 00:11:12.559 gonna you know, it's going to hook into this component 192 00:11:12.600 --> 00:11:16.279 and change things, and and so you know, it sounds 193 00:11:16.360 --> 00:11:18.440 like what Astro's doing is is giving you a good 194 00:11:18.440 --> 00:11:20.320 way to manage a lot of that life cycle and 195 00:11:20.399 --> 00:11:23.759 that that work that flow, you know, whether it's data 196 00:11:24.360 --> 00:11:29.320 or you know, visual components or other things. And so 197 00:11:29.480 --> 00:11:31.320 some of that a lot of times is just down 198 00:11:31.360 --> 00:11:33.720 to it's nice for the user if it just kind 199 00:11:33.759 --> 00:11:35.799 of loads all at once or loads in the right way, 200 00:11:36.000 --> 00:11:38.320 or things like that. And for some of this, though, 201 00:11:38.360 --> 00:11:41.120 when you're talking about, hey, you've gotten tested server components 202 00:11:41.200 --> 00:11:45.799 and for on end components, some of that it sounds 203 00:11:45.879 --> 00:11:48.399 like it just makes it easier for the developer to 204 00:11:48.519 --> 00:11:51.679 track and debug when things are working. So I guess 205 00:11:51.720 --> 00:11:56.399 what I'm driving at is where where do the benefits 206 00:11:56.519 --> 00:11:59.240 usually come in. Is it more developer experience thing or 207 00:11:59.320 --> 00:12:01.519 is it more of a use or experience And when 208 00:12:01.679 --> 00:12:04.639 when do you start making the decision to make these 209 00:12:04.679 --> 00:12:05.200 trade offs. 210 00:12:05.679 --> 00:12:10.720 So I'll break it down from the beginning. Astro is mainly, 211 00:12:11.320 --> 00:12:14.639 surprisingly enough, the

initial intention of astro to be a 212 00:12:14.799 --> 00:12:18.320 content er than framework. So when you when you ever 213 00:12:18.440 --> 00:12:23.240 you're creating blogs, this should be this should be. And 214 00:12:23.360 --> 00:12:26.559 I'm not like I'm obviously biased here, but I'm saying 215 00:12:26.600 --> 00:12:29.480 that to everyone. If you ever wanted to create a blog, 216 00:12:30.200 --> 00:12:33.600 astro jas just provide the best integrations and the best 217 00:12:33.679 --> 00:12:37.919 things to get the blog going. And it's just service 218 00:12:37.960 --> 00:12:42.519 side components with pages and routing the sense most of 219 00:12:42.600 --> 00:12:46.919 it will be translated to HTML, CSS and JavaScript. If 220 00:12:46.960 --> 00:12:49.759 you're doing fine side some client side, then this is 221 00:12:49.960 --> 00:12:53.480 your go to framework. And what makes it so great 222 00:12:53.639 --> 00:12:55.720 obviously that if you just if you don't need the 223 00:12:55.759 --> 00:12:59.200 service side rendering. You want to create static, static apps, 224 00:13:00.039 --> 00:13:02.840 it will just do it. So that's the first thing 225 00:13:02.919 --> 00:13:04.360 that you want to think about when you're trying to 226 00:13:04.440 --> 00:13:06.159 choose Astro. Let's just say, but you want to create 227 00:13:06.240 --> 00:13:10.759 a more complex application with like off and logins and 228 00:13:10.879 --> 00:13:14.720 so one, you need service any So in this instance, 229 00:13:15.039 --> 00:13:17.960 the reason where astro shines is both its usages of 230 00:13:18.960 --> 00:13:22.799 is integration from the developers experience using CSS and obviously 231 00:13:23.080 --> 00:13:27.759 it's speed working to using the Turbo engine behind the scenes. 232 00:13:28.200 --> 00:13:31.840 So it just works amazingly and like many benchmarks has 233 00:13:31.879 --> 00:13:34.960 been done to compare between many frameworks, and astrog just 234 00:13:35.080 --> 00:13:37.440 tends to come on top. It's just because it's so 235 00:13:37.600 --> 00:13:40.879 fast both from build time and obviously showing it because 236 00:13:40.879 --> 00:13:46.440 it's then translate all the code into native no JS code, 237 00:13:46.600 --> 00:13:49.879 it obviously has its own functionality behind it. So it 238 00:13:50.240 --> 00:13:53.279 allows you to both have an amazing developer experience and 239 00:13:53.320 --> 00:13:57.960 an amazing user experience. The issue where it lacks is 240 00:13:58.080 --> 00:14:03.240 currently popularity doesn't community, it just lasts popularity, so the 241 00:14:03.320 --> 00:14:05.039 difference between the two. So it's like I can go 242 00:14:05.159 --> 00:14:07.720 into discord. There is an AI bot that helps me 243 00:14:08.279 --> 00:14:10.799 and a fiber community that helps me with whatever I need. 244 00:14:10.840 --> 00:14:15.240 That masking there usually get a response ten like lie 245 00:14:15.360 --> 00:14:18.039 from a person or a few seconds they using an 246 00:14:18.080 --> 00:14:23.639 AI and that's like where usually it lacks. So this 247 00:14:23.799 --> 00:14:26.559 is one of the disadvantages of why Astro is Like 248 00:14:27.000 --> 00:14:29.679 maybe you're thinking about it, you're not sure, but it's 249 00:14:29.759 --> 00:14:33.480 like Astrogas is kind of lacking on popularity. So when 250 00:14:33.519 --> 00:14:35.000 a person comes to me, he says, well, I don't 251 00:14:35.000 --> 00:14:37.159 know what Astro is, so they most likely won't pick 252 00:14:37.240 --> 00:14:40.320 it because they don't know. But after they do, it's 253 00:14:40.399 --> 00:14:44.799 like I never looked back after choosing Astra from from 254 00:14:44.840 --> 00:14:45.519 my projects. 255 00:14:47.200 --> 00:14:51.519 Gotcha? Okay, So let's say that I want to get 256 00:14:51.559 --> 00:14:53.720 started with Astro. Then it's like, okay, you know what 257 00:14:54.919 --> 00:14:59.600 you know Soggy, He's smart. He convinced me. He you know, 258 00:15:00.519 --> 00:15:02.639 I'm going to go do this right? So where do 259 00:15:02.720 --> 00:15:03.279 I go from there? 260 00:15:03.960 --> 00:15:07.639 So the Astra documentation is an amazing place to start. 261 00:15:08.399 --> 00:15:10.639 Normally speaking, that will just tell you you, look, you 262 00:15:10.679 --> 00:15:13.440 need to have like a PNPM or NPM and just 263 00:15:13.960 --> 00:15:16.720 run the CLI. Just like you're starting VAT as a 264 00:15:16.799 --> 00:15:19.159 project or you're starting an HS. They have their own CLO. 265 00:15:19.519 --> 00:15:22.200 Just starting a project, they ask you what template do 266 00:15:22.240 --> 00:15:24.320 you want? Like is that a blog? Is it a 267 00:15:24.360 --> 00:15:27.440 starting side rendering? You just start from there. It just 268 00:15:27.639 --> 00:15:30.799 plops out a template with a basic Astra website. You 269 00:15:30.919 --> 00:15:33.840 sort of fiddling around. It's just like, oh, it's very clear. 270 00:15:34.360 --> 00:15:36.799 This components has this logect. It looks like this, and 271 00:15:36.919 --> 00:15:39.559 it has its own styling and it's favorite. But that's 272 00:15:39.600 --> 00:15:42.360 where you start, and then you can move forward to 273 00:15:42.720 --> 00:15:46.000 whatever your project needs. If you want to move to 274 00:15:46.240 --> 00:15:51.440 more or interaction oriented websites, then you go on and 275 00:15:51.519 --> 00:15:55.399 install the integration with React, viewers, vellop or even not 276 00:15:55.559 --> 00:15:57.679 even just that. You have quick, you have solid, you 277 00:15:57.799 --> 00:16:04.080 have like you have every and then like the world 278 00:16:04.159 --> 00:16:04.759 is your oyster. 279 00:16:05.960 --> 00:16:09.120 Right, So I guess the other thing that I'm wondering 280 00:16:09.200 --> 00:16:13.120 then is we dive in is how does astro then 281

00:16:13.279 --> 00:16:17.639 interact with React or view or whatever? Right. 282 00:16:19.159 --> 00:16:21.679 I don't know how they created their adapter, but essentially 283 00:16:21.799 --> 00:16:25.559 you're downloading the React package, but you're also downloading an 284 00:16:25.559 --> 00:16:28.919 adapter for Astro JS. And just like VT where you 285 00:16:28.960 --> 00:16:33.519 can assign integrations to a project like tailwind CSS for 286 00:16:33.559 --> 00:16:37.799 a very used React with with Tailwind knows that the 287 00:16:38.080 --> 00:16:41.159 vat configuration needs to get tail in CSS, which Astro 288 00:16:41.279 --> 00:16:44.799 also supports, and then like it does the same thing 289 00:16:44.879 --> 00:16:47.080 for reacting, and then you just tweet it like a 290 00:16:47.200 --> 00:16:49.399 React act. But once you need to use it in 291 00:16:49.480 --> 00:16:53.000 an Astra component, because you probably will have to, then 292 00:16:53.080 --> 00:16:56.120 you need to either decide if it's a client, if 293 00:16:56.159 --> 00:16:58.159 it's a client component or a server component, and then 294 00:16:58.200 --> 00:17:02.320 you add the client colon low directive which love tails it. 295 00:17:02.480 --> 00:17:05.640 These components now need to have the clind tight interactivity. 296 00:17:06.960 --> 00:17:09.680 Okay, that makes sense. So you know this is this 297 00:17:09.759 --> 00:17:11.440 goes back to what you were talking about before, where 298 00:17:11.640 --> 00:17:14.480 you know, now it's working with life cycle and you 299 00:17:14.559 --> 00:17:18.480 know all of the other pieces. You have an adapter 300 00:17:18.640 --> 00:17:21.839 there that manages all that and so it it's not 301 00:17:22.160 --> 00:17:24.559 just kind of this, Hey, here's a rapper and we're gonna, 302 00:17:25.160 --> 00:17:27.319 you know, do black magic to make it work. It 303 00:17:27.440 --> 00:17:31.079 actually it knows about React and it knows how React works. 304 00:17:31.160 --> 00:17:33.680 And so at the end, at the end of the day, 305 00:17:33.960 --> 00:17:37.640 in that island, it says, Okay, then this is the 306 00:17:37.680 --> 00:17:39.759 way that I'm going to hook in and manage React 307 00:17:39.799 --> 00:17:45.000 and allow React to do its work exactly. You got it. Yeah, 308 00:17:45.039 --> 00:17:45.960 that makes a lot of sense. 309 00:17:46.079 --> 00:17:50.599 So it does, right, It doesn't should be that simple. 310 00:17:52.440 --> 00:17:54.799 So I guess the other question I have is I 311 00:17:54.920 --> 00:17:58.240 hear some people basically say, well, I like Astro because 312 00:17:58.240 --> 00:18:00.359 it lets me use more than one framework, and that 313 00:18:00.519 --> 00:18:01.839 sounds like a headache to me, to. 314 00:18:01.839 --> 00:18:04.359 Be honest, that's generally. 315 00:18:04.160 --> 00:18:08.039 That now I have to learn two frameworks plus how 316 00:18:08.119 --> 00:18:12.640 Astro

works. And I guess the flip side of the 317 00:18:12.880 --> 00:18:16.680 argument is, well, if I use NEXTGS and I only 318 00:18:16.759 --> 00:18:21.240 have to really know React plus whatever next ads. So 319 00:18:21.759 --> 00:18:26.240 so when should I be reaching for the Hey, I've 320 00:18:26.279 --> 00:18:30.160 got a lower learning curve in next JAS versus I've 321 00:18:30.240 --> 00:18:36.240 got you know, whatever niceties that Astro gives me. Versus Hey, 322 00:18:36.359 --> 00:18:39.079 I've kind of got sources from all kinds of stuff, 323 00:18:39.119 --> 00:18:41.920 and so I I have some Angular stuff and some 324 00:18:42.119 --> 00:18:46.240 React stuff, and so I'm gonna oh, so first, why 325 00:18:46.240 --> 00:18:47.160 do you make that decision? 326 00:18:47.920 --> 00:18:52.240 So normally speaking, people would I'll separate between those who 327 00:18:52.319 --> 00:18:55.119 knows React and those who don't React, because there is 328 00:18:55.200 --> 00:18:58.559 a small distinction needs to be made. So if you 329 00:18:58.680 --> 00:19:02.200 know React, knowing XJS is pretty simple. The only thing 330 00:19:02.279 --> 00:19:06.799 you need to take control control on is when it's 331 00:19:06.799 --> 00:19:08.960 a server component or what you can and can do 332 00:19:09.039 --> 00:19:12.039 it within a server component and when it's a client component, 333 00:19:12.119 --> 00:19:14.640 and what you can and can do in a client combone. 334 00:19:15.559 --> 00:19:18.240 We start from that. The second thing is if you know, 335 00:19:18.799 --> 00:19:23.160 if you know React, the Astro writing style very similar 336 00:19:23.279 --> 00:19:26.160 to how you write and reacts. It's a jsex style, 337 00:19:26.240 --> 00:19:29.559 but it's not exactly JSX, And I'll explain the distinction 338 00:19:30.720 --> 00:19:36.680 in JSX because well, it's a React framework used to 339 00:19:36.799 --> 00:19:39.960 based on React, and React used to be a front 340 00:19:40.039 --> 00:19:44.240 end library. So if you wanted to write, for example, class, 341 00:19:44.440 --> 00:19:47.799 which is the htmil director for class in CSS, then 342 00:19:47.839 --> 00:19:52.160 you would write class name. The reason behind the reason 343 00:19:52.240 --> 00:19:56.839 behind this is because well, you cannot write the keyword class. 344 00:19:56.640 --> 00:19:59.759 And React JavaScript so you can't ye because. 345 00:20:00.039 --> 00:20:05.240 Word in jalousy opted out for a class name. But 346 00:20:05.440 --> 00:20:08.160 in astral you can write class. And the reason is 347 00:20:08.279 --> 00:20:11.720 because it's service side component. It trenders into server and 348 00:20:11.759 --> 00:20:14.640 you're writing like it's very similar. It's a better version 349 00:20:14.680 --> 00:20:19.079 of JSX because you can write class, but you're getting 350 00:20:19.960 --> 00:20:23.559 a raw htmail output from that, and essentially it just 351 00:20:23.680 --> 00:20:26.400 doesn't do any interpolation. However, if you want to do 352 00:20:26.599 --> 00:20:31.480 like let's just say map between an information to components 353 00:20:31.599 --> 00:20:35.200 using htmail what that you normally do is you would 354 00:20:35.720 --> 00:20:39.880 tweet it like React, but you won't write a key 355 00:20:40.079 --> 00:20:43.680 equals to I or something because again you're not running 356 00:20:43.680 --> 00:20:46.599 it in the client. It's javascripted runs in the server, 357 00:20:47.440 --> 00:20:50.720 so when so this is the first operation. So if 358 00:20:50.759 --> 00:20:55.599 you know React, knowing how astral works, it's just amazing. 359 00:20:55.720 --> 00:20:57.400 You just need to get used to the concept that 360 00:20:57.839 --> 00:21:02.480 Astra components are servers side rendered and should mostly. I 361 00:21:03.119 --> 00:21:07.160 never create a client side server a client side component 362 00:21:07.240 --> 00:21:11.720 for Astro, but Astra components should normally and always be 363 00:21:11.960 --> 00:21:14.519 service side. So you don't write so for whoever you 364 00:21:14.599 --> 00:21:18.039 used to write on click on components now it doesn't 365 00:21:18.079 --> 00:21:21.400 work with Astro components because they intended to be on 366 00:21:21.480 --> 00:21:24.000 service now those for no who knows React is amazing. 367 00:21:24.279 --> 00:21:27.599 If you don't know React, generally still using Astro and 368 00:21:27.920 --> 00:21:33.039 understanding of JSX components, it's still simple. Know in JSX 369 00:21:33.200 --> 00:21:36.400 it's not the React framework. You're learning to write code 370 00:21:36.440 --> 00:21:39.000 that maps to HTML in the end, even if you 371 00:21:39.119 --> 00:21:42.079 don't know the JSX style, can still map code that 372 00:21:42.880 --> 00:21:47.680 renders to HTML in the end using the HTML template, 373 00:21:48.119 --> 00:21:50.839 the basic HTML template, and again it should be very 374 00:21:50.920 --> 00:21:55.319 clear of how you do it. It so that answers 375 00:21:55.440 --> 00:21:58.799 both of those questions. So if you do or you don't, 376 00:21:59.000 --> 00:22:03.359 just please try. And I'm pretty sure that you would 377 00:22:03.480 --> 00:22:06.440 like using it without the JSEX syntax if you're not 378 00:22:06.519 --> 00:22:09.160 familiar with it, or with the JX syntax if you are. 379 00:22:12.920 --> 00:22:18.200 All right, So yeah, I mean I think I'm getting 380 00:22:18.240 --> 00:22:21.240 the picture here. So what kinds of things do people 381 00:22:21.319 --> 00:22:24.759 build with astro or what kinds of things should people 382 00:22:24.839 --> 00:22:27.000 reach for Astro over something like next JSS. 383 00:22:27.640 --> 00:22:32.119 So again, I use my Astro is my Swiss army knife. 384 00:22:32.240 --> 00:22:36.119 So just like it creates everything from locks to more 385 00:22:36.200 --> 00:22:42.519

interactive websites. And I didn't see any reasons why to 386 00:22:42.720 --> 00:22:47.039 use next JS more than I would like to use Astro. 387 00:22:47.160 --> 00:22:50.400 The main issues that I haves that your vendor locked, 388 00:22:50.880 --> 00:22:53.000 which is one of the most complaints that I hear 389 00:22:53.000 --> 00:22:56.440 about next JS. It's just like you're locked to using 390 00:22:57.000 --> 00:23:01.400 self to fully enjoy all the capabilities of next gess, 391 00:23:01.440 --> 00:23:04.759 which is feels like a cheap move against against developers. 392 00:23:04.960 --> 00:23:07.039 Give me a framework that is open source and allows 393 00:23:07.079 --> 00:23:09.200 me to do whatever I want. Why do I need 394 00:23:09.240 --> 00:23:12.000 to be vendor locked? And I don't really see a 395 00:23:12.079 --> 00:23:16.319 reason why not to use next JS. Unless you have 396 00:23:16.480 --> 00:23:22.000 a really complex, insanely complex website, and the scale might 397 00:23:22.160 --> 00:23:24.519 be something that asked for won't reach, though I think 398 00:23:24.559 --> 00:23:27.119 it would reach. I really don't see a reason why 399 00:23:27.240 --> 00:23:29.200 not to use astro versus nextgs. 400 00:23:31.079 --> 00:23:34.359 Okay, it sounds like they kind of operate in a 401 00:23:34.480 --> 00:23:39.519 lot of the same space, right they Yeah, they give 402 00:23:39.559 --> 00:23:44.960 you solutions to a lot of the same problems. So 403 00:23:45.119 --> 00:23:46.440 what have you built with astro then? 404 00:23:47.319 --> 00:23:52.319 So I've created the census for for the CBS, for 405 00:23:53.319 --> 00:23:55.920 censuses for whoever doesn't know. So, census is like a 406 00:23:56.000 --> 00:24:00.640 way that you can gather information about population or everything 407 00:24:00.720 --> 00:24:04.480 that the government wants the people to know, the growth 408 00:24:04.599 --> 00:24:07.680 rate of population within regions or whatever. So I've created 409 00:24:07.759 --> 00:24:11.240 the website that does it within Israel, which is a 410 00:24:11.519 --> 00:24:15.839 census CBS col for whoever is outside of Israel won't 411 00:24:15.839 --> 00:24:18.000 be able to get it. You probably will need a VPN. 412 00:24:18.160 --> 00:24:20.960 But this is the website that I've created. It's very static, 413 00:24:21.119 --> 00:24:23.680 and most of it and most of the same interactivity 414 00:24:23.839 --> 00:24:27.000 was done using CSS, which is another topic that I 415 00:24:27.079 --> 00:24:30.279 haven't really talked about, but it's really important for understanding 416 00:24:30.359 --> 00:24:34.160 why why service side is slightly superior than client site 417 00:24:34.799 --> 00:24:37.519 and we'll get to it. But so I used created 418 00:24:37.559 --> 00:24:42.400 this website which is mostly service side interactivity with the 419 00:24:42.599 --> 00:24:47.960 smidge of client site that I've gotten from connecting

the 420 00:24:48.119 --> 00:24:52.720 graphs using Luker, which is a Google product with big Query. 421 00:24:54.440 --> 00:24:55.799 So that's why. 422 00:24:56.079 --> 00:25:00.720 So this is the official census site for Israel initial. 423 00:25:00.799 --> 00:25:05.920 God Census, the CBS. It's like the Census Bureau Statistic 424 00:25:06.200 --> 00:25:07.559 CBS something like that. 425 00:25:08.319 --> 00:25:14.480 Right, So you you said, I want to dig into this. 426 00:25:14.559 --> 00:25:18.039 So you said that a lot of the what animation 427 00:25:18.680 --> 00:25:23.440 was done with CSS, and that was important for how 428 00:25:23.519 --> 00:25:27.559 you're using astro, So you want to explain that. 429 00:25:28.519 --> 00:25:32.079 So, yes, I would love that. I love it. So 430 00:25:32.839 --> 00:25:37.200 in CSS. Normally people people from a back end experience, 431 00:25:37.279 --> 00:25:41.799 tend to underestimate the CSS. But CSS gives you a 432 00:25:41.920 --> 00:25:46.119 lot of power to do many of what fun and 433 00:25:46.400 --> 00:25:49.319 libraries gives to you. But it does it for free. 434 00:25:49.759 --> 00:25:52.519 So we'll start for animations. Animations you pretty much. 435 00:25:52.440 --> 00:25:54.880 Get Hang on, I'm going to back you up for 436 00:25:54.960 --> 00:25:59.240 a second, because it doesn't do it for free, but 437 00:25:59.519 --> 00:26:02.799 you don't have to write code. You don't have to 438 00:26:02.839 --> 00:26:04.480 write as much code in JavaScript. 439 00:26:04.559 --> 00:26:05.880 What do you mean it doesn't do it for free? 440 00:26:06.920 --> 00:26:10.000 So so CSS has it built in, right, and so 441 00:26:10.079 --> 00:26:12.880 you usually have some style and some of the style 442 00:26:13.079 --> 00:26:20.240 is animate for this long in this way. And I 443 00:26:20.319 --> 00:26:23.720 think what you mean by for free is that beyond that, 444 00:26:23.839 --> 00:26:26.119 you don't really have to do any extra work, right, 445 00:26:26.160 --> 00:26:28.160 you don't have to you don't have to write out 446 00:26:28.200 --> 00:26:31.119 the animation in JavaScript, you don't have to tell it 447 00:26:31.200 --> 00:26:33.400 how to do the transition or anything like that. All 448 00:26:33.440 --> 00:26:37.000 of that stuff's just built into your CSS. And the 449 00:26:37.119 --> 00:26:40.960 other part for free is that the CSS is really 450 00:26:41.839 --> 00:26:45.319 really highly optimized to just work without a lot of 451 00:26:45.440 --> 00:26:50.519 computing overhead, whereas doing it in JavaScript is I mean, 452 00:26:50.880 --> 00:26:53.240 I've seen stuff done in JavaScript that doesn't cost you 453 00:26:53.319 --> 00:26:56.680 a lot in your computing computing resources, but the CSS 454 00:26:56.799 --> 00:26:59.720 is already optimized and does it way more efficiently. Yes, 455 00:27:02.000 --> 00:27:05.519 So I just don't want people thinking it's just you know, automatic,

456 00:27:05.640 --> 00:27:09.440 It feels that way, but yeah, I get it. 457 00:27:09.680 --> 00:27:12.759 So I'll advert So what I'm saying for free in 458 00:27:12.839 --> 00:27:16.480 this instance is what I'm saying is that for I'll 459 00:27:16.480 --> 00:27:20.039 be explicit about this. So most of the animations needed 460 00:27:20.160 --> 00:27:22.759 to be to most of them, not all, but most 461 00:27:22.839 --> 00:27:24.960 of the animation needed to be to create it to 462 00:27:25.039 --> 00:27:29.079 be created are very simple like you however, like a click, 463 00:27:29.240 --> 00:27:33.599 like a target, like like shaders, like shading behind an element, 464 00:27:33.720 --> 00:27:37.200 so on and so forth. Most of these animations, including scaling, 465 00:27:37.680 --> 00:27:40.720 it's just like you. You get it for CSS and 466 00:27:40.799 --> 00:27:42.839 when I mean, now for free'z just like it's easy, 467 00:27:43.119 --> 00:27:47.039 it's clear and yeah, and like you, you, once you 468 00:27:47.200 --> 00:27:51.759 get into it, you pretty much gathered like most of 469 00:27:51.799 --> 00:27:55.000 the animation needed. Now, sometimes if you need something more complex, 470 00:27:55.200 --> 00:27:58.359 like I just say a confetti, or you want to 471 00:27:58.480 --> 00:28:02.200 have like a more like three animations, whatever, then you 472 00:28:02.720 --> 00:28:06.039 then normally writing it in CSS, though is possible is 473 00:28:06.200 --> 00:28:10.799 not really reasonable, then then you opt out to JavaScript. 474 00:28:10.920 --> 00:28:16.599 And why I'm recommending CSS within astro because there are 475 00:28:17.599 --> 00:28:19.839 front end I'm sorry about it, but there are seven 476 00:28:19.880 --> 00:28:24.240 ways to load CSS into front end, which is external styling, 477 00:28:24.720 --> 00:28:29.400 global styling, module styling, tailwind or any other one of 478 00:28:29.519 --> 00:28:33.519 those tailwind and you have like what it was it 479 00:28:33.680 --> 00:28:38.440 seven and astro you have, you would you probably mostly 480 00:28:38.599 --> 00:28:43.400 used one, which is scope styling. So scope styling essentially 481 00:28:43.440 --> 00:28:46.319 when you create an ASTRO component, it allows you to 482 00:28:46.440 --> 00:28:50.640 create the styling which is being used only for that component. 483 00:28:50.839 --> 00:28:53.119 So let's just say I have a class named button, 484 00:28:53.319 --> 00:28:55.720 so this class that I've created for the button will 485 00:28:55.799 --> 00:28:58.599 only be used for that button. And if I have 486 00:28:58.680 --> 00:29:02.039 a class different player and that does something different, it 487 00:29:02.240 --> 00:29:07.119 just like it's completely separate and it behaves and behaves 488 00:29:07.200 --> 00:29:11.319 like it looks whatever you've decided to be looked. So 489 00:29:12.359 --> 00:29:14.440 so that's what I'm saying with CSS, and now that 490 00:29:14.559 --> 00:29:18.599 you have more exvanced selectors, like for example, the has selector, 491 00:29:18.680 --> 00:29:21.480 which is incredibly popular and thank god it was created, 492 00:29:21.920 --> 00:29:24.880 you would also have the starting style. Do you know, 493 00:29:25.359 --> 00:29:27.799 by the way, for those who doesn't know, starting style 494 00:29:28.000 --> 00:29:32.720 is as a new CSS I would say, I forget 495 00:29:32.839 --> 00:29:36.599 what's the name. It's a query. So when a component 496 00:29:36.720 --> 00:29:40.279 is being rendered to the screen, it creates the animation 497 00:29:40.519 --> 00:29:44.200 from the start of it. So for example, if you're 498 00:29:44.400 --> 00:29:48.720 hiding something and you're showing it using a display, it 499 00:29:48.880 --> 00:29:52.240 would just show up. It will just show up constantly. 500 00:29:52.599 --> 00:29:54.759 And what I'm saying is it's being done for feit 501 00:29:54.920 --> 00:29:58.799 just like people like you would have used like a 502 00:29:58.880 --> 00:30:01.720 bunch of JavaScript to make the animation happens when it's 503 00:30:01.759 --> 00:30:04.160 being loaded, But now you get it for free using 504 00:30:04.240 --> 00:30:06.240 CSS and you don't have to worry about this. This 505 00:30:06.359 --> 00:30:07.440 is what essentially went. 506 00:30:10.200 --> 00:30:15.400 Yeah, yeah, that makes sense. So so yeah, so you've 507 00:30:15.400 --> 00:30:18.119 got the scope styling, and that's the power that you're 508 00:30:18.160 --> 00:30:23.880 getting as far as CSS goes from your from using 509 00:30:23.920 --> 00:30:27.039 astro right, because then you can say, hey, stuff in 510 00:30:27.160 --> 00:30:31.839 here animates this way. You know, stuff in here hover 511 00:30:32.119 --> 00:30:35.200 it's hover states react in this way, and I can 512 00:30:35.799 --> 00:30:37.720 I can have that same kind of thing. I didn't 513 00:30:37.799 --> 00:30:39.799 like your button example, because usually you want all your 514 00:30:39.839 --> 00:30:42.279 buttons to look more or less the same. But yeah, okay, 515 00:30:42.359 --> 00:30:45.359 well button, a lot of your other Yeah, what you're 516 00:30:45.359 --> 00:30:48.200 talking about here is okay, you know, maybe I have 517 00:30:48.440 --> 00:30:53.160 a menu component and so you know the dropdowns or whatever. Right, 518 00:30:53.799 --> 00:30:56.200 if I hover there, the hover states are going to 519 00:30:56.240 --> 00:30:59.079 be unique to that component. But then if I have 520 00:30:59.400 --> 00:31:01.960 I don't know, graph or a chart and I hover 521 00:31:02.160 --> 00:31:06.839 over a particular data point, then that's going to show 522 00:31:06.960 --> 00:31:09.319 things up differently. Right. It might give me the numbers 523 00:31:09.400 --> 00:31:11.319 and a little box and things like that, but I 524 00:31:11.359 --> 00:31:13.400 don't want it to pop in in the same way 525

00:31:13.480 --> 00:31:17.640 that the menu does. And so you know, I can 526 00:31:17.680 --> 00:31:20.640 set the specific cover states. And sure you can do 527 00:31:20.759 --> 00:31:23.799 that by you know, giving it a class and then 528 00:31:24.000 --> 00:31:26.519 you know, doing a bunch of other wrangling. But if 529 00:31:26.519 --> 00:31:28.839 you've got it scope to just that component and you 530 00:31:29.000 --> 00:31:32.519 know that, okay, any chart component's going to have hover 531 00:31:32.640 --> 00:31:36.880 states and animation states and click states this way, then 532 00:31:37.720 --> 00:31:39.880 then you know that you've got everything kind of set 533 00:31:39.960 --> 00:31:41.640 up that way and you don't have to worry about, Okay, 534 00:31:41.720 --> 00:31:44.039 is this going to bleed over to something else because 535 00:31:44.079 --> 00:31:46.240 it's all scope to just that kind of a component. 536 00:31:47.119 --> 00:31:48.000 Amazing, you got it. 537 00:31:50.599 --> 00:31:53.920 Yeah, that's cool. I think I've seen this in other frameworks, 538 00:31:53.960 --> 00:31:57.480 but they wind up doing some of the other CSS 539 00:31:57.640 --> 00:31:58.640 magic to make it work. 540 00:31:59.519 --> 00:32:05.480 Yeah, and I'm happy that Astra has it. It also 541 00:32:05.640 --> 00:32:10.839 has some cheat sheets which with some shortcuts. So for example, 542 00:32:10.880 --> 00:32:13.400 if you're creating a class. Normally, in order to create 543 00:32:13.440 --> 00:32:15.400 a class and condition whether or not a class would 544 00:32:15.440 --> 00:32:17.759 exist on a component, but just say we're talked about 545 00:32:17.799 --> 00:32:19.519 all the service side rendering and not talking about the 546 00:32:19.599 --> 00:32:23.440 land side, you would have to be like doing string 547 00:32:23.519 --> 00:32:27.160 interpolation over the class. Like usually we would have a 548 00:32:27.240 --> 00:32:29.680 class which is class A, class B, class C, and 549 00:32:29.839 --> 00:32:32.519 you have space between. Right when using Astro, there is 550 00:32:32.559 --> 00:32:34.640 something that is called class list which allows you to 551 00:32:34.680 --> 00:32:37.000 pass on on the rate which is containing all the 552 00:32:37.160 --> 00:32:39.799 name and allows you to condition whether or not a 553 00:32:39.960 --> 00:32:41.920 name of a class would exist, whether or not if 554 00:32:42.240 --> 00:32:45.839 if you condition, it would just say active call on 555 00:32:46.559 --> 00:32:48.799 something that is brilliant, and if it's true, it would 556 00:32:48.839 --> 00:32:51.640 be inserted to as a name of a class, and 557 00:32:51.720 --> 00:32:55.000 if it isn't, it will just it will just disappear. 558 00:32:55.160 --> 00:32:57.880 And it's just like it's a nice shortcut for managing 559 00:32:57.920 --> 00:32:58.599 your components. 560 00:32:59.720 --> 00:33:01.799 Yeah, I've seen that in some of the things that

561 00:33:01.920 --> 00:33:05.880 I've like, I've I've gotten HTML templates that have ASTRO 562 00:33:05.960 --> 00:33:08.079 in them, and I've seen those directives so. 563 00:33:09.799 --> 00:33:14.119 Amazing. The next thing what they'll be interesting about is 564 00:33:14.200 --> 00:33:18.400 also the specific one that I've created. I also use HTMX. 565 00:33:18.960 --> 00:33:22.200 I'm not sure if it's within the scope of this conversation, 566 00:33:22.400 --> 00:33:24.680 but if you're curious to hear about this and why 567 00:33:24.759 --> 00:33:27.279 did I use HTMX, I'll be more than happy to do. 568 00:33:28.000 --> 00:33:30.519 Well. Yeah, I mean it is interesting. We've had Carson 569 00:33:30.799 --> 00:33:35.960 Gross on the podcast talking about HTMX and it's a 570 00:33:37.119 --> 00:33:41.160 it's a tool, or it's almost a patternal anyway, but 571 00:33:41.279 --> 00:33:44.119 it's it's a really handy way of managing a lot 572 00:33:44.440 --> 00:33:48.920 of your state and things like that, and it seems 573 00:33:49.079 --> 00:33:53.160 like with ASTRO it would play pretty nicely because again 574 00:33:53.240 --> 00:33:57.880 you've got these pockets of functionality right that you're managing 575 00:33:57.920 --> 00:34:02.359 as islands, and so HTMX it doesn't think of it 576 00:34:02.519 --> 00:34:04.839 quite that way, but I could see how you could. 577 00:34:05.720 --> 00:34:06.640 You can make a mesh. 578 00:34:08.119 --> 00:34:12.559 Yes, So about the integration between HTMX and ASPER, it 579 00:34:12.559 --> 00:34:16.800 pretty much nailed the differences that like HTMX would normally 580 00:34:16.880 --> 00:34:20.760 need you to return an HTML template which you can 581 00:34:20.960 --> 00:34:24.719 create using astro. You can create the estra the HTML temple, 582 00:34:25.039 --> 00:34:27.880 just return them so and then it will just swap 583 00:34:27.920 --> 00:34:30.760 them directly into the client to whatever side that you need. 584 00:34:30.920 --> 00:34:33.800 And so you don't even need the client side of 585 00:34:34.480 --> 00:34:38.119 like fiber b for the simplistic stuff, because you would 586 00:34:38.199 --> 00:34:41.440 have HTMX doing all the swapping together with ASTRO. So 587 00:34:41.559 --> 00:34:45.679 ASTRO will hold the state using the database and would 588 00:34:45.800 --> 00:34:49.480 vendor the HTML and HMX will just swap it where 589 00:34:49.480 --> 00:34:51.039 it's needed based on the interaction. 590 00:34:53.480 --> 00:34:56.960 Yeah, we do something similar with RAILS and Turbo. It's 591 00:34:57.000 --> 00:35:00.280 amazing and so yeah, and it's the same idea, right, 592 00:35:00.360 --> 00:35:03.639 It's like hey, you know, uh, you know, replace or 593 00:35:04.000 --> 00:35:07.639 insert after insert before whatever, right, and you just throw 594 00:35:07.800 --> 00:35:11.039 some HTML back and so RAILS renders the HTML with 595 00:35:11.159 --> 00:35:13.440 the data from the database and yeah, puts it into 596 00:35:13.480 --> 00:35:16.880 the page based on what you're telling it, following the 597 00:35:17.039 --> 00:35:20.639 conventions in Turbo, and I know HTMX basically works the 598 00:35:20.679 --> 00:35:22.480 same way exactly. 599 00:35:23.079 --> 00:35:25.480 And one last thing that it's important to mention and 600 00:35:25.599 --> 00:35:28.960 why I recommend using astro and why it is so 601 00:35:29.119 --> 00:35:31.880 fun to use astro, which is like a JavaScript both 602 00:35:32.480 --> 00:35:36.559 the front and the back, which is the inherent part 603 00:35:36.639 --> 00:35:40.719 at about code splitting. So let me give you an example. 604 00:35:40.760 --> 00:35:44.159 I'll just say I've created an ID for a component, right, 605 00:35:44.519 --> 00:35:46.400 And let's just say I've created this ID, and I 606 00:35:46.519 --> 00:35:48.599 need this ID to be used in a service side 607 00:35:48.639 --> 00:35:52.119 component and in a client side component. Usually passing those 608 00:35:52.199 --> 00:35:54.159 between the client side and the service side would be 609 00:35:54.880 --> 00:35:57.360 le'll just say headache, especially if you're I mean you're 610 00:35:57.440 --> 00:35:59.800 from Ruby on rails, like do you know how to pass? 611 00:35:59.880 --> 00:36:02.119 Like I just I need this ID and the client 612 00:36:02.199 --> 00:36:06.880 side whateveration because those are two completely different languages. But 613 00:36:06.960 --> 00:36:08.960 in astray it's both on the same. So I create 614 00:36:09.119 --> 00:36:13.920 a constant ideas file and my in the idea is 615 00:36:14.039 --> 00:36:17.039 being shared to the service side components and to the 616 00:36:17.079 --> 00:36:19.639 client side components, so it's will duplicate it to the 617 00:36:20.159 --> 00:36:22.920 server and the client and just being used and it's 618 00:36:23.639 --> 00:36:24.719 interlace and it's amazing. 619 00:36:26.519 --> 00:36:27.039 That's cool. 620 00:36:27.800 --> 00:36:28.000 Yeah. 621 00:36:29.800 --> 00:36:32.119 So I'm a little curious because I think we're kind 622 00:36:32.159 --> 00:36:34.599 of talking around some of the fundamentals of ASTRO and 623 00:36:34.760 --> 00:36:40.159 you know, some of the you know, more common use cases. 624 00:36:42.960 --> 00:36:45.280 Where where do you get more advanced with ASTRO? Where 625 00:36:45.280 --> 00:36:49.000 where do you get into features that I guess maybe 626 00:36:49.079 --> 00:36:53.480 aren't as simple or common but are still powerful. 627 00:36:53.960 --> 00:36:55.159 Can you give me an example. 628 00:36:56.480 --> 00:36:57.400 I don't know. 629 00:36:58.880 --> 00:37:01.519 What will be let's just let's flip the script. What 630 00:37:01.599 --> 00:37:03.599 will be an advance? So what would you consider the 631 00:37:03.679 --> 00:37:06.400 advanced when you're writing rubion rails with whatever front end 632 00:37:06.480 --> 00:37:10.000

frameworks to your front and library with your decision. 633 00:37:11.280 --> 00:37:17.639 What I mean, usually you're getting into, you know, more 634 00:37:17.679 --> 00:37:21.119 of I guess the optimization stuff, you know, where it's hey, 635 00:37:21.199 --> 00:37:24.360 you know, I'm optimizing the way I access my database, 636 00:37:24.639 --> 00:37:28.039 or you know, maybe I have some really really complicated behaviors. 637 00:37:29.320 --> 00:37:32.199 But I know people generally solve a lot of that 638 00:37:32.320 --> 00:37:33.480 with something like React. 639 00:37:35.960 --> 00:37:39.000 Wait, you're saying that accessing the database, they're solving it 640 00:37:39.159 --> 00:37:40.280 using React by you No. 641 00:37:40.679 --> 00:37:44.239 No, No, really complicated interactions on the front end you 642 00:37:44.360 --> 00:37:45.159 handle with React. 643 00:37:45.440 --> 00:37:48.000 So amazing. If you need complicated interaction. You could just 644 00:37:48.079 --> 00:37:52.199 opt into React and God bless you. Yeah, so it's 645 00:37:52.239 --> 00:37:55.920 just like you have it all like from side to side. 646 00:37:55.920 --> 00:37:58.320 You need the complex stuff you can install, even like 647 00:37:58.519 --> 00:38:01.800 front the libraries like material Lui, schatsy and has a 648 00:38:02.000 --> 00:38:05.840 right integration with aastro Okay, get it for free. You 649 00:38:06.079 --> 00:38:08.920 want something with more tailin do you have flow bite 650 00:38:09.000 --> 00:38:12.440 and obviously and it just works. 651 00:38:13.960 --> 00:38:17.119 Makes sense. So are there optimizations you need to make 652 00:38:17.199 --> 00:38:20.480 on the back end as far as you know database 653 00:38:20.559 --> 00:38:22.280 or the way you do your queries or things like 654 00:38:22.400 --> 00:38:24.440 that if you're pulling from a data source. 655 00:38:25.800 --> 00:38:29.400 So normally it would be I wouldn't have an issue 656 00:38:29.480 --> 00:38:33.079 with generally pulling information from the database because again you're 657 00:38:33.119 --> 00:38:36.480 just writing typescript as like back end. It's just like 658 00:38:37.000 --> 00:38:39.239 the difference is that and what that I'm usually trying 659 00:38:39.239 --> 00:38:41.400 to tell to whomever I've worked with on the components. 660 00:38:41.440 --> 00:38:44.679 It's just like not to write the exact queries within 661 00:38:44.760 --> 00:38:47.960 the components. So I would rather have like an entities 662 00:38:48.079 --> 00:38:52.400 file than those entities file you managed like the functions 663 00:38:52.559 --> 00:38:56.679 like getting get all creator and that and then you 664 00:38:56.840 --> 00:38:59.519 call them using the astro component. Not because I'm afraid 665 00:38:59.559 --> 00:39:03.320 of any sort of leakage of the information. But because 666 00:39:03.320 --> 00:39:06.639 I mean like because of how ASTRA works, which is 667 00:39:06.840

--> 00:39:09.800 some people might argue that it is the disadvantage. So 668 00:39:09.960 --> 00:39:13.159 ASPRA is the component of aspro is inherently divided to two, 669 00:39:13.760 --> 00:39:18.639 the logic and the template of the HTML. So you 670 00:39:18.960 --> 00:39:22.960 must either I think you return a response to to 671 00:39:23.360 --> 00:39:26.800 return something else except the HTML template, or you will 672 00:39:26.920 --> 00:39:29.840 let the HTML template decide on whatever it works, right, 673 00:39:29.920 --> 00:39:32.679 So you need to have the logic finish. Most of 674 00:39:32.719 --> 00:39:34.840 the time, you need to have the logic finish. So 675 00:39:34.960 --> 00:39:37.599 that means they can condition is that early bailout which 676 00:39:37.639 --> 00:39:39.800 is something so that they think of early bailt is 677 00:39:39.840 --> 00:39:43.039 like write it if and then return. This might not work. 678 00:39:43.480 --> 00:39:46.039 This might not work because you need to return a component, 679 00:39:46.719 --> 00:39:48.880 so you will write a wrapper around it. It's just 680 00:39:48.960 --> 00:39:51.119 like it's very inconvenient. It's not. It's not convenient to 681 00:39:51.159 --> 00:39:54.360 write it within the ASTRA component. So that's the only 682 00:39:55.280 --> 00:39:58.519 thing which is not that bad all things consider. But 683 00:39:58.880 --> 00:40:01.039 it's just like things to know, just don't write your 684 00:40:01.599 --> 00:40:04.840 selects and inserts and whatever within the astro component. Was 685 00:40:04.960 --> 00:40:07.440 just create a function and then manage. 686 00:40:08.480 --> 00:40:12.880 Yeah, that's common practice. I've seen with most back end systems, 687 00:40:12.960 --> 00:40:15.719 right you have, Yeah, you've segregated your logic so that 688 00:40:16.719 --> 00:40:21.000 your database access layer is separate from your rendering logic. 689 00:40:21.239 --> 00:40:26.440 Yeah. What will be another interesting thing to talk about, 690 00:40:26.480 --> 00:40:30.199 which are slots. So if if you don't want I 691 00:40:30.239 --> 00:40:36.360 mean so, in React, normally you would have in order 692 00:40:36.440 --> 00:40:41.039 to pass on, would you say the aid of the 693 00:40:41.159 --> 00:40:44.039 JSX to the next component and to renderative components, you 694 00:40:44.079 --> 00:40:47.159 would have children. So the children components will be whatever 695 00:40:47.320 --> 00:40:50.320 you Let's just say I've created a menu, which is 696 00:40:50.400 --> 00:40:52.559 a component that I've created, and then I will have 697 00:40:52.760 --> 00:40:55.840 like the list of whatever I needs to have inside them. 698 00:40:55.880 --> 00:40:59.480 In so you would have children component within the within 699 00:40:59.519 --> 00:41:01.559 the minu, the definition of the menu would have the 700 00:41:01.639 --> 00:41:06.880 children component. In Astro, you would have slots. And slot 701 00:41:07.480 --> 00:41:11.239 is is an HTML element that a lot of people 702 00:41:11.320 --> 00:41:14.000 don't don't know that exists. That there is a template 703 00:41:14.159 --> 00:41:19.239 HTML attribute, the tag and the slot which are both 704 00:41:19.400 --> 00:41:23.280 like official but the slot, the spot template or the 705 00:41:23.360 --> 00:41:26.519 spot tag allows you to insert components just like a 706 00:41:26.599 --> 00:41:30.519 children would. So what's the difference. Normally The difference would 707 00:41:30.519 --> 00:41:34.119 be that you can give slot's name, So by giving 708 00:41:34.199 --> 00:41:37.639 them name, you can also tell to the parent, Okay. 709 00:41:37.960 --> 00:41:39.960 The parent can say to the kid, okay, I want 710 00:41:40.119 --> 00:41:42.719 this in the spot named the header, I want this 711 00:41:42.880 --> 00:41:45.079 in this in the nameless slot, which is the children, 712 00:41:45.400 --> 00:41:47.920 and I want this in the footer. So normally you 713 00:41:47.960 --> 00:41:50.280 can What did I do with my styling is that 714 00:41:50.559 --> 00:41:53.159 I would have the component, the outer component designed the 715 00:41:53.360 --> 00:41:57.440 entire layout and then the and then inject the inner 716 00:41:57.480 --> 00:42:01.719 components where they need to be fit. What did you 717 00:42:01.760 --> 00:42:05.119 get is an extremely amazing experience that you know that 718 00:42:05.599 --> 00:42:08.400 layup is outside. The father decides on the layouts, and 719 00:42:08.519 --> 00:42:12.960 the components themselves decided on the functionality of themselves. And 720 00:42:14.360 --> 00:42:16.320 this is like, this is one of those things that 721 00:42:16.360 --> 00:42:18.360 it's just very convenient. And I don't know how people 722 00:42:18.440 --> 00:42:21.719 manage without my cashwall. Usually they pass it by the 723 00:42:21.840 --> 00:42:24.320 props and it's just like it looks kind of ugly. 724 00:42:24.599 --> 00:42:27.280 Yeah, I've seen that, and yeah it gets a little 725 00:42:27.280 --> 00:42:34.320 bit hairy. I've used other component libraries that yeah, you 726 00:42:34.679 --> 00:42:36.679 can basically say, hey, these are the things that go 727 00:42:36.800 --> 00:42:41.400 in the different slots. So Ruby on rails has a 728 00:42:42.079 --> 00:42:45.760 view component library that you know does all the service rendering, 729 00:42:45.840 --> 00:42:47.400 and yeah, you can give it slots and then you 730 00:42:47.440 --> 00:42:49.400 can give it other components to stick in those slots. 731 00:42:49.679 --> 00:42:55.320 Amazing and view transition. Have you ever heard of hue transition? 732 00:42:58.119 --> 00:42:59.239 I think I might have heard of it, but I 733 00:42:59.280 --> 00:42:59.920 don't know what it is. 734 00:43:01.000 --> 00:43:07.639 So the view transition inherently essentially created using it's a 735 00:43:07.719 --> 00:43:14.880

standard web thing which allows you to move between websites 736 00:43:16.000 --> 00:43:18.840 without having a front and library, and it allows you 737 00:43:18.920 --> 00:43:23.239 to fade between pages, so you can, if you want, 738 00:43:23.519 --> 00:43:27.880 us a client site feel feel to something without like 739 00:43:28.039 --> 00:43:30.920 looking at the at the indicator that says that it's 740 00:43:30.960 --> 00:43:33.360 doting when it's trying to move between component A too 741 00:43:33.400 --> 00:43:37.000 component B, or between page A to page B. You 742 00:43:37.119 --> 00:43:39.480 can in astro they give you like a nice, a 743 00:43:39.599 --> 00:43:42.079 nice addition to it, but it's just like you write, 744 00:43:42.239 --> 00:43:46.400 you add the view the view transition, and and then 745 00:43:46.440 --> 00:43:48.400 you like you want to move between page A too, 746 00:43:48.400 --> 00:43:50.559 pah B, just press on the link and you don't 747 00:43:50.599 --> 00:43:54.119 get any indication from the server that it's doted, but 748 00:43:54.400 --> 00:43:58.480 it will be instead faded nicely from one page to another, 749 00:43:59.400 --> 00:44:01.679 which is you can do it also on Ruby Advance. 750 00:44:01.760 --> 00:44:03.000 It's just like it's a website. 751 00:44:03.079 --> 00:44:06.679 Yeah, yeah, yeah, there are a number of I think 752 00:44:06.840 --> 00:44:10.039 HTMX allows you to do something similar as well, yes, 753 00:44:10.280 --> 00:44:15.079 where you know, you just allows you to yeah, and 754 00:44:15.159 --> 00:44:17.519 so effectively, what you're doing is it's like, okay, I 755 00:44:17.559 --> 00:44:20.199 click the link to load a different page on the 756 00:44:20.199 --> 00:44:24.159 same website, and so it intelligently says, okay, what changed, right, 757 00:44:24.320 --> 00:44:24.679 And then. 758 00:44:24.800 --> 00:44:27.280 There is a few differences though there's a few difference 759 00:44:28.079 --> 00:44:30.480 So view transition not only that, it does also the 760 00:44:30.559 --> 00:44:35.280 fading between the pages, which HTMX won't unless you explicitly 761 00:44:36.400 --> 00:44:38.119 create animations you CSS. 762 00:44:38.840 --> 00:44:40.039 So this does it with an animation. 763 00:44:41.519 --> 00:44:45.360 Not only that, it also allows you to persist certain 764 00:44:45.480 --> 00:44:51.480 elements when you move between pages. Okay, so I'm Fireship 765 00:44:51.559 --> 00:44:54.400 created a video about it way back, which is when 766 00:44:54.440 --> 00:44:58.079 you press the button, a certain element moved from the 767 00:44:58.159 --> 00:45:01.039 center of the page to the top five. But if 768 00:45:01.360 --> 00:45:05.519 r L and the page itself change between page A 769 00:45:05.639 --> 00:45:09.079 to page B and it went through the server, right, 770 00:45:09.199 --> 00:45:12.599 So you pusition is slightly more advanced animation and gives 771 00:45:12.679 --> 00:45:16.719 you like a really client side feel And normally you 772 00:45:16.760 --> 00:45:20.000 would have to do like jump through hoops to create 773 00:45:20.039 --> 00:45:21.480 this animation, and you're sort of getting. 774 00:45:21.239 --> 00:45:26.239 It for free. Yeah. Yeah, I like that because you know, 775 00:45:26.440 --> 00:45:30.079 and that's that's the kind of UX that's nice, is that, 776 00:45:30.400 --> 00:45:32.639 you know, it's like, hey, now what you had it, 777 00:45:33.159 --> 00:45:35.000 you know, and now it looks like this instead of 778 00:45:35.320 --> 00:45:43.599 what you started with. Exactly super cool. Well, we're kind 779 00:45:43.599 --> 00:45:45.480 of getting a little bit toward the end of time. 780 00:45:47.280 --> 00:45:50.199 If people want to learn more about you or about Astro, 781 00:45:50.679 --> 00:45:52.119 what are the best resources out. 782 00:45:52.480 --> 00:45:54.599 I mean, I'm just trying to every once in a 783 00:45:54.599 --> 00:46:00.679 while topload to YouTube, maybe post on LinkedIn, but those 784 00:46:00.719 --> 00:46:03.840 two places I'm trying to be I'll try to be 785 00:46:03.960 --> 00:46:06.679 more mindful about it. But this is where I'm currently at. 786 00:46:06.840 --> 00:46:11.079 Until I become an official, official public speaker about Astro, 787 00:46:11.199 --> 00:46:14.159 I wanted to one day just talk about Astra freely and. 788 00:46:15.719 --> 00:46:20.239 Trash next Chase, So, what's your YouTube channel? 789 00:46:20.920 --> 00:46:24.440 So I think it's I think it's just my name 790 00:46:24.519 --> 00:46:26.880 in English, but I don't think it's a good idea. 791 00:46:26.960 --> 00:46:30.599 Let's say if I can it says segi at Segi caramel. 792 00:46:31.119 --> 00:46:35.280 Let's see, and then yeah, on LinkedIn, we can just 793 00:46:35.360 --> 00:46:36.000 look you up by it. 794 00:46:36.159 --> 00:46:39.519 Yeah, just like a caramel. It doesn't have any It 795 00:46:39.679 --> 00:46:41.280 just added a bunch of numbers in the end. But 796 00:46:41.360 --> 00:46:44.519 it's just so it's like, yeah, it might contain Hebrew. 797 00:46:44.679 --> 00:46:47.719 So if your audience do a Hebrew, but sometimes I'll 798 00:46:47.760 --> 00:46:50.239 try to add I'll try to add stuff in English. 799 00:46:51.119 --> 00:46:54.880 Right, all right, Well, so the last part of our 800 00:46:54.960 --> 00:46:58.320 show is always picks, and that's just shout outs about 801 00:46:58.400 --> 00:47:01.920 stuff that we like. So I'll go ahead and get 802 00:47:02.039 --> 00:47:07.800 us going for the picks. And I always start my 803 00:47:07.960 --> 00:47:13.960 picks off with with a board game. And so this 804 00:47:14.159 --> 00:47:19.920 board game is it's a variation on Pandemic. So for 805 00:47:20.039 --> 00:47:22.559 the folks that have played Pandemic, if you don't know 806 00:47:22.639 --> 00:47:25.000 what Pandemic is, it's a cooperative game where you're trying 807

00:47:25.039 --> 00:47:29.079 to eradicate diseases from the globe. And so, yeah, you 808 00:47:29.199 --> 00:47:33.119 all have different roles and you move around and right, 809 00:47:33.239 --> 00:47:36.519 you play cards to find cures and things like that. 810 00:47:37.639 --> 00:47:41.000 This one is a little bit more involved. And there's 811 00:47:41.039 --> 00:47:46.960 a variation on Pandemic called Fall of Rome, and so 812 00:47:47.199 --> 00:47:51.079 instead of diseases, you have armies that are marching toward Rome. 813 00:47:53.840 --> 00:47:58.119 This one. This one is Fate of the Fellowship and 814 00:47:58.320 --> 00:48:05.519 it's based on Lord of the Rings. So and I'm 815 00:48:05.559 --> 00:48:08.960 going to be teaching it in about three weeks at 816 00:48:09.000 --> 00:48:15.079 a game board convention. Board game convention anyway, Yeah, my 817 00:48:15.559 --> 00:48:20.000 friend does. He teaches games at the at the convention 818 00:48:20.119 --> 00:48:22.199 every year. He used to be part owner in a 819 00:48:22.719 --> 00:48:23.639 board game store. 820 00:48:26.280 --> 00:48:29.280 Does he make a living from teaching games? Like, is 821 00:48:29.320 --> 00:48:30.119 he doing it for no? 822 00:48:30.519 --> 00:48:33.039 Not anymore. So he was getting he was he was 823 00:48:33.079 --> 00:48:36.000 getting paid by the store and his profit share, but 824 00:48:36.400 --> 00:48:39.079 the store closed, so now he's just doing it just 825 00:48:39.400 --> 00:48:43.519 just for fun. So anyway, the way that this works 826 00:48:43.639 --> 00:48:48.480 is you have armies from you know, the different bad 827 00:48:48.559 --> 00:48:52.920 guys and you have armies for like Elvin armies. What 828 00:48:53.199 --> 00:48:57.159 was it it was elves humans And anyway, there are 829 00:48:57.239 --> 00:48:59.280 like three or four different colors of good guy armies 830 00:48:59.320 --> 00:49:05.039 and so you know, you're moving your armies to fight 831 00:49:05.119 --> 00:49:08.360 off the other armies and then you're trying to get 832 00:49:09.199 --> 00:49:14.880 Frodo and the ring to Mount Doom. You have to 833 00:49:14.960 --> 00:49:17.679 complete like I think it was four missions, and the 834 00:49:17.719 --> 00:49:20.039 fourth one is getting frod or Mountain Doom and being 835 00:49:20.079 --> 00:49:22.639 able to play a number of ring cards in order 836 00:49:22.760 --> 00:49:24.639 to destroy the ring. And if you can do that, 837 00:49:24.760 --> 00:49:28.639 you win. We played it twice we lost, so it's 838 00:49:28.760 --> 00:49:31.039 it's not just like this super easy game, but it 839 00:49:31.199 --> 00:49:37.280 was fun. There were four of us playing. Board game 840 00:49:37.320 --> 00:49:41.480 geek says it's best with three, and yeah, so you 841 00:49:41.599 --> 00:49:46.639 play with two characters each and so you know, somebody's 842 00:49:46.679 --> 00:49:48.840 Frodo and Sam and somebody else, you know, and then 843 00:49:48.920 --> 00:49:51.320 they might have another one. I think that the other 844 00:49:52.320 --> 00:49:56.199 character that that person was playing was legless, you know 845 00:49:56.320 --> 00:49:59.719 I was playing was I playing Aoin and Mary and 846 00:49:59.760 --> 00:50:03.400 Pip and anyway, And so you can do different they 847 00:50:03.480 --> 00:50:06.519 have different abilities and you move around the map and 848 00:50:06.599 --> 00:50:09.280 try and manage this stuff. You also have havens that 849 00:50:09.320 --> 00:50:12.400 you're trying to protect, and if you lose havens, then 850 00:50:12.519 --> 00:50:14.960 the hope meter goes down. If you lose hope before 851 00:50:15.599 --> 00:50:20.039 Frodo gets to the then you lose. And it's got 852 00:50:20.119 --> 00:50:24.639 a tower that you roll the dice through that looks 853 00:50:24.719 --> 00:50:30.679 like sour on the eye of Souron tower. You know. 854 00:50:30.840 --> 00:50:35.320 The different missions are you have to take where what's 855 00:50:36.079 --> 00:50:39.360 Saramon's tower you have to take that, you have to 856 00:50:40.920 --> 00:50:42.559 have a certain kind of a battle. I think I 857 00:50:42.599 --> 00:50:45.079 can't remember. I've only played it like twice, but it 858 00:50:45.199 --> 00:50:48.639 was very, very fun, and so Board Game Geek waits 859 00:50:48.719 --> 00:50:52.840 it at two point ninety nine. So Pandemic I think 860 00:50:52.880 --> 00:50:55.119 probably is like a two point one or two point two. 861 00:50:55.760 --> 00:50:58.360 This is a bit more involved because you're moving the 862 00:50:58.440 --> 00:51:03.599 nascul around and trying to you know, you're you're you're 863 00:51:03.679 --> 00:51:06.159 keeping track of a lot of things. Uh. The armies 864 00:51:06.239 --> 00:51:09.800 march are along different paths on the board and so 865 00:51:10.400 --> 00:51:12.519 unlike Fall of Rome, they don't all go to Rome. 866 00:51:12.800 --> 00:51:17.159 The paths go all over the board and so anyway, uh, 867 00:51:17.880 --> 00:51:21.440 just and it's it's it was fun. We really enjoyed 868 00:51:21.440 --> 00:51:24.159 playing it. So I'm going to pick Lord of the 869 00:51:24.280 --> 00:51:26.920 Rings Fate of the Fellowship. Uh, this is a new 870 00:51:26.960 --> 00:51:29.079 game that came out this year. Usually I'm picking games 871 00:51:29.119 --> 00:51:31.599 that you know are a year three old, but this 872 00:51:31.719 --> 00:51:32.360 one's new. 873 00:51:32.320 --> 00:51:32.400 So. 874 00:51:33.920 --> 00:51:35.840 Definitely go pick it up. It's one of the more 875 00:51:38.320 --> 00:51:45.159 well put together visual games. So it it's very fun 876 00:51:45.239 --> 00:51:50.079 because all the pieces are are well designed and anyway, 877 00:51:50.679 --> 00:51:53.280 so so it's cool, very cool. So I'm gonna pick that. 878 00:51:57.199 --> 00:51:59.559 My wife and I watched a movie last night. I 879 00:51:59.639 -->

00:52:02.360 didn't love it, but it was it was it was good. 880 00:52:02.639 --> 00:52:08.519 I could have predicted every every plot point in a 881 00:52:08.760 --> 00:52:13.199 movie whatever. But it was called The Christmas Miracle of 882 00:52:13.559 --> 00:52:23.360 Jonathan Toomey and no, it's at the beginning of the movie. 883 00:52:23.559 --> 00:52:27.800 The main character is a ten year old boy. His 884 00:52:28.000 --> 00:52:29.880 father goes off to war. I think it's World War 885 00:52:29.960 --> 00:52:34.400 one and he's killed in action and he has this 886 00:52:34.760 --> 00:52:38.679 nativity set that he put out every year with his 887 00:52:38.840 --> 00:52:43.239 dad and he loses it. And so Jonathan Toomey is 888 00:52:43.440 --> 00:52:44.599 this wood carver. 889 00:52:45.639 --> 00:52:45.960 And so. 890 00:52:48.239 --> 00:52:53.039 Anyway, they moved to the town where Toomey lives and 891 00:52:54.960 --> 00:53:00.760 you know, meet with him and you know. Anyway, so yeah, 892 00:53:01.119 --> 00:53:05.159 so you know, and it takes place at Christmas time anyway, 893 00:53:06.280 --> 00:53:09.039 and to me is you know, they commissioned him to 894 00:53:09.119 --> 00:53:16.800 carve a replacement Nativity set. So anyway, it was all right. 895 00:53:18.719 --> 00:53:21.159 I guess it's not a glowing endorsement. But if you're 896 00:53:21.159 --> 00:53:23.599 looking for a movie that you probably haven't seen, and yeah, 897 00:53:23.639 --> 00:53:26.559 it has. There were like two actors in it that 898 00:53:27.079 --> 00:53:30.760 you've seen in other stuff. I'm trying to remember names, 899 00:53:30.800 --> 00:53:33.559 but I'm not very good at remembering celebrities names because 900 00:53:33.559 --> 00:53:37.960 I just don't care. But there was one in particular. 901 00:53:38.079 --> 00:53:40.119 She was like one of the kids that he befriends, 902 00:53:41.440 --> 00:53:47.559 and she was in the Host and a handful of 903 00:53:47.639 --> 00:53:50.280 other movies as an adult, right, and she's a little 904 00:53:50.320 --> 00:53:53.440 kid in this movie. So we ran across it, and 905 00:53:54.280 --> 00:53:58.440 it's got to be twenty years old or something at least, 906 00:53:59.079 --> 00:54:02.880 But anyway, we enjoyed it, so my wife really liked it. 907 00:54:03.039 --> 00:54:05.280 So so if you're looking for that that kind of 908 00:54:05.320 --> 00:54:08.360 a feel good Christmas movie, then then that's right up 909 00:54:08.400 --> 00:54:14.559 your alley. Those ones don't always do it for me, 910 00:54:14.719 --> 00:54:16.840 but I'm a good support. I'll sit through a movie 911 00:54:20.760 --> 00:54:22.000 trying to think, what else. 912 00:54:23.559 --> 00:54:25.880 Are you thinking about? A pick? Because I have something 913 00:54:25.920 --> 00:54:29.519 as American and people just if they go ahead play it, 914 00:54:29.679 --> 00:54:31.039 it's just sick. 915 00:54:32.239 --> 00:54:32.679 Do a pick. 916 00:54:34.440 --> 00:54:37.800 It's just the whole Night Silk song. It's amazing and 917 00:54:38.000 --> 00:54:40.519 if you didn't play it already, you should. It's an 918 00:54:40.559 --> 00:54:41.199 amazing game. 919 00:54:41.239 --> 00:54:41.920 Which song is it? 920 00:54:42.559 --> 00:54:46.039 No suck song in the game the video game, it's 921 00:54:46.079 --> 00:54:47.280 a whole night sucks song. 922 00:54:49.199 --> 00:54:51.239 Okay, so all night? 923 00:54:51.480 --> 00:54:57.920 Yeah. Yeah, this game crashed the entire internet or the 924 00:54:58.000 --> 00:55:02.800 stores of Nintendo XBO and just crashed it for being awesome. 925 00:55:03.000 --> 00:55:05.559 And it's still amazing and I recommend you all to 926 00:55:05.639 --> 00:55:09.880 play and obviously played the first Hole name. Those games 927 00:55:09.920 --> 00:55:12.480 are just amazing. Team Cherriot just. 928 00:55:14.480 --> 00:55:18.719 And know what the the graphics for that game, I 929 00:55:18.880 --> 00:55:20.119 I just I love them. 930 00:55:21.199 --> 00:55:27.599 Hendron not animated, not pixelated, just throwing with all the passion, 931 00:55:28.639 --> 00:55:29.199 just amazing. 932 00:55:29.440 --> 00:55:33.519 Yeah, it's it's very yeah, simple gameplay, but it's it's 933 00:55:33.559 --> 00:55:34.480 a fun game for sure. 934 00:55:35.679 --> 00:55:42.440 Simple, my goodness, simply this game, this game is so 935 00:55:42.960 --> 00:55:45.519 goddamn hard because it's hard. 936 00:55:45.639 --> 00:55:53.000 Oh yeah, I'm just saying. It's like, it's it's how 937 00:55:53.039 --> 00:55:56.920 do I explain it, it's it's somewhere between. And I 938 00:55:57.119 --> 00:55:58.760 I haven't played a ton of it. My son was 939 00:55:58.840 --> 00:56:03.559 really into Night oh and Silk Song. So Silk Song 940 00:56:03.719 --> 00:56:10.079 just came out. Yeah, but yeah, so Hollow Night. You know, 941 00:56:10.519 --> 00:56:13.760 you move through, you do have some basic attack and 942 00:56:13.840 --> 00:56:19.000 things like that. It's almost I mean, you are fighting 943 00:56:19.079 --> 00:56:21.679 through the levels, but it's almost as much a puzzle game, 944 00:56:21.960 --> 00:56:23.840 like how do I get into the right position to 945 00:56:25.800 --> 00:56:29.400 to get through the level right with whatever abilities I have? 946 00:56:29.639 --> 00:56:32.800 As it is an action and fighting game. 947 00:56:33.320 --> 00:56:36.960 M oh and there is a like a lot of 948 00:56:37.079 --> 00:56:41.440 lord behind it. The generally fun game it is. 949 00:56:42.599 --> 00:56:44.760 I love the visuals on the game, and it's definitely 950 00:56:44.840 --> 00:56:46.519 a fun game. Like I don't want to sell it short, 951 00:56:46.599 --> 00:56:51.320 but yeah, but I haven't played Silk Song yet, so 952 00:56:51.360 --> 00:56:54.440 I'll have to check that out. I really want to 953 00:56:54.480 --> 00:56:56.280 get the switch to I haven't. 954 00:56:57.039 -->

00:57:00.840 Don't do it. I don't do it for two reasons. 955 00:57:01.400 --> 00:57:05.440 One the fact that Nintendo gets away for overpricing their 956 00:57:05.519 --> 00:57:10.760 console is unforgivable. There is no reason to buy Anintendo 957 00:57:10.840 --> 00:57:14.559 too just so I like, I wouldn't feel feed to 958 00:57:14.639 --> 00:57:20.400 that market. Secondly, it's uh, the Nintendo Nintendo two doesn't 959 00:57:20.440 --> 00:57:25.760 have like a lot of graphic improvements that if you 960 00:57:25.840 --> 00:57:27.760 already have a Nintendo one, you should just stick to it. 961 00:57:27.960 --> 00:57:31.800 And unless you won the very exclusive game, then I 962 00:57:31.880 --> 00:57:34.400 recommended to stick to the Switch one. 963 00:57:35.119 --> 00:57:41.280 Right, Are there are there exclusive games to Nintendo or 964 00:57:41.360 --> 00:57:42.159 to the Switch. 965 00:57:41.960 --> 00:57:47.079 To the Probably yes they are, they are, But again, 966 00:57:47.159 --> 00:57:50.920 if you're not looking for anything specific, and I recommend 967 00:57:50.960 --> 00:57:53.000 it just to stick to the Switch one. I also 968 00:57:53.039 --> 00:57:54.719 have a Switch one that just like, because I do 969 00:57:55.000 --> 00:57:57.199 not that keen of just like up and over and 970 00:57:57.360 --> 00:58:00.320 just buying, Like how much was it eight hundred eight 971 00:58:00.400 --> 00:58:02.920 hundred bucks for the switch? That's nuts. 972 00:58:03.039 --> 00:58:07.239 I haven't even looked it's nuts. Yeah, it looks like 973 00:58:09.119 --> 00:58:14.960 Mario Kart World, Donkey Kong Bonanza. Oh, there's a Metroid 974 00:58:15.280 --> 00:58:22.039 a Kirby I Rule Warriors. So yeah, there are games 975 00:58:22.079 --> 00:58:24.920 I guess that are exclusive to switch to. But yeah, 976 00:58:24.920 --> 00:58:26.719 I haven't even priced it. I was going to look 977 00:58:26.760 --> 00:58:29.440 and see how much it was for Christmas. 978 00:58:29.599 --> 00:58:34.639 But now that you'll see the prisl, it's more than a. 979 00:58:34.639 --> 00:58:37.320 Couple hundred dollars. I'm probably, oh, yeah, it's five hundred 980 00:58:37.360 --> 00:58:42.480 dollars here and that that's a little bit. If my 981 00:58:42.679 --> 00:58:45.639 kids really really deeply wanted it, it'd be like, hey, 982 00:58:45.719 --> 00:58:50.000 this is all you're getting, right for the next three years. 983 00:58:51.320 --> 00:58:56.239 Oh my goodness. So and again it's like it doesn't 984 00:58:56.280 --> 00:58:58.960 have any significant graphic improvement. 985 00:58:58.599 --> 00:59:02.079 So just yeah, I guess, I guess I haven't looked 986 00:59:02.119 --> 00:59:05.719 into that either. I have to say too that the 987 00:59:08.079 --> 00:59:09.800 so one of the reasons that I was excited to 988 00:59:09.840 --> 00:59:14.199 get the Switch when it came out was it was 989 00:59:14.320 --> 00:59:17.639 kind of the hybrid, right, it was a console you 990

00:59:17.719 --> 00:59:21.880 hooked to your TV and then you could also like 991 00:59:22.199 --> 00:59:23.920 just put it in your bag and take it with you. 992 00:59:25.440 --> 00:59:29.480 And as far as a handheld system goes, I really 993 00:59:29.639 --> 00:59:32.320 liked it. As far as then hooking it up to 994 00:59:32.400 --> 00:59:36.760 my TV, I felt like it wasn't the best console. Yes, 995 00:59:37.480 --> 00:59:40.960 is that is that a terrible thing to say? I mean, no, 996 00:59:41.360 --> 00:59:46.519 that's that's been my take. So you know, I don't know. 997 00:59:46.599 --> 00:59:47.880 I mean I like this switch. 998 00:59:49.719 --> 00:59:51.960 The Nintendo for me, just like it was very un 999 00:59:52.480 --> 00:59:55.039 not convenient for me. The hookup. I don't know how 1000 00:59:55.119 --> 00:59:58.679 it works with other people. But you get like this 1001 00:59:58.960 --> 01:00:06.719 plastic piece printed. It's very like not very convenient. Then 1002 01:00:06.800 --> 01:00:09.199 you need to hook that up with your HDMI and 1003 01:00:09.280 --> 01:00:10.760 then in order to make it work, so I need 1004 01:00:10.800 --> 01:00:14.239 to put I need to place this the freaking switch 1005 01:00:14.400 --> 01:00:20.079 inside the slot. Right, it's very annoying. Like I wasn't 1006 01:00:20.119 --> 01:00:24.239 excited for handhelds. I would recommend the Steam Deck, which 1007 01:00:24.320 --> 01:00:27.159 is the better one. That being said, I don't have 1008 01:00:27.320 --> 01:00:30.000 the Steam Deck. I just had heard of reviews about 1009 01:00:30.039 --> 01:00:32.480 this and just like you get access to a bunch 1010 01:00:32.519 --> 01:00:35.760 of games and it works pretty pretty well. And if 1011 01:00:35.840 --> 01:00:39.159 you're traveling a lot, maybe try the RG Xbox, which 1012 01:00:39.199 --> 01:00:41.760 is not really an Xbox hand held. It's a lot 1013 01:00:42.360 --> 01:00:46.400 but just look it up. Though the RG Xbox is 1014 01:00:46.639 --> 01:00:49.840 more expensive than Nintendo than Nintendo's. 1015 01:00:49.280 --> 01:00:56.800 Only Yeah, yeah, I mean the I guess the nice 1016 01:00:56.840 --> 01:00:59.360 thing about like because I didn't even know Steam how 1017 01:00:59.400 --> 01:01:03.119 to Steam Deck, but it looks like you can play 1018 01:01:03.199 --> 01:01:05.880 basically anything you can get on Steam on the Steam Deck, 1019 01:01:06.119 --> 01:01:06.519 which is. 1020 01:01:07.280 --> 01:01:10.280 Some stuff you can get on Play Pass with the 1021 01:01:10.599 --> 01:01:15.360 Xbox that for stuff can also play PC. Right, it's amazing. 1022 01:01:15.800 --> 01:01:19.679 It's like it gives you everything now about the About 1023 01:01:20.280 --> 01:01:24.400 the quality, my guess it's on par. It's not slightly 1024 01:01:24.440 --> 01:01:25.760 better than the Nintendo. 1025 01:01:25.480 --> 01:01:27.360 Switch, probably. 1026 01:01:28.960 --> 01:01:32.119 Just for assuming because you're optimized for this team. 1027 01:01:32.280 --> 01:01:36.440 But yeah, but yeah, my my other issue with the 1028 01:01:36.519 --> 01:01:41.159 Switch is that, oh they do have a docking station 1029 01:01:41.360 --> 01:01:44.639 for the Steam Deck as well. The other issue that 1030 01:01:44.719 --> 01:01:47.679 I had was that the so the little joy cons 1031 01:01:48.599 --> 01:01:53.400 like those, we get drift in them, We get all 1032 01:01:53.519 --> 01:01:57.039 kinds of other issues and then it's okay, well, you know, 1033 01:01:57.119 --> 01:01:59.000 the batteries dying on it, so I have to go 1034 01:01:59.239 --> 01:02:01.480 slide it onto the switch, and oh when I slid 1035 01:02:01.519 --> 01:02:04.519 it on, then it it came off of the dock 1036 01:02:04.760 --> 01:02:06.599 just enough for it to kind of glitch out. 1037 01:02:08.880 --> 01:02:11.119 Yeah, where it is real, I get, like you know 1038 01:02:11.519 --> 01:02:12.559 how many times I got. 1039 01:02:12.679 --> 01:02:15.599 But the issue, the issue was always with it when 1040 01:02:15.639 --> 01:02:17.719 you were using it as a console on your TV 1041 01:02:17.960 --> 01:02:25.440 and not right as a handheld. It was generally better, but. 1042 01:02:27.280 --> 01:02:29.519 I have one of the issues, and I have some. Normally, 1043 01:02:29.880 --> 01:02:32.320 if you buy a single swhich you get like two 1044 01:02:32.400 --> 01:02:36.159 controllers which are two halves, which is essentially one, but 1045 01:02:36.320 --> 01:02:37.760 if you want to play with a friend, you have 1046 01:02:37.840 --> 01:02:40.480 to hook it up to this sort of yanky plastic 1047 01:02:40.639 --> 01:02:43.880 thing that slide it over, and then you would hold 1048 01:02:43.920 --> 01:02:47.400 it horizontally instead of vertically with the other one. You 1049 01:02:47.559 --> 01:02:50.000 have no idea how many times I've messed it up 1050 01:02:50.039 --> 01:02:53.280 and I flipped it to the wrong way. And I'm 1051 01:02:53.320 --> 01:02:56.039 pretty sure that most of the reason why it strifts 1052 01:02:56.159 --> 01:03:01.199 because of me, because of the good because I have 1053 01:03:01.679 --> 01:03:05.719 a stupid plastic thing inside the inside the controller. I 1054 01:03:05.840 --> 01:03:07.960 got the other ways dominant. 1055 01:03:08.199 --> 01:03:11.400 Yeah, yeah, all right, well I'm gonna go ahead and 1056 01:03:11.400 --> 01:03:15.760 wrap us up. But this was cool, good conversation about astro, 1057 01:03:16.320 --> 01:03:18.639 fun conversation about games and video games. 1058 01:03:19.880 --> 01:03:20.599 Thank you for having me. 1059 01:03:20.599 --> 01:03:22.239 I think I have it in me somewhere. Eventually I 1060 01:03:22.280 --> 01:03:23.320 want to write a video game. 1061 01:03:23.360 --> 01:03:26.639 But we'll see if you need somebody to talk to 1062 01:03:26.760 --> 01:03:28.360 you on my fresher video games. 1063 01:03:28.440 --> 01:03:30.760 So yeah, I know a few people who have built 1064 01:03:30.840 --> 01:03:34.760 video games too. So my twenty year old keeps saying 1065 01:03:34.800 --> 01:03:38.599 that he wants to be an indie video game developer. 1066 01:03:38.840 --> 01:03:41.039 Of course, getting him to sit down and actually do 1067 01:03:41.119 --> 01:03:43.840 the work to learn how to do it, that's another story. 1068 01:03:44.800 --> 01:03:48.840 But I get the appeal and I think it. I 1069 01:03:48.880 --> 01:03:51.800 think it'd be fun. So anyway, we'll go ahead and 1070 01:03:51.840 --> 01:03:54.360 wrap it up until next time folks max out.