WEBVTT

1
00:00:05.200 --> 00:00:09.359
<v Speaker 1>Hey folks, Welcome back to another episode of JavaScript Jabber.

2
00:00:09.599 --> 00:00:13.039
<v Speaker 1>This week looks like I am the host this week.

3
00:00:13.080 --> 00:00:17.039
<v Speaker 1>We usually have a few people, but Steve had something

4
00:00:17.079 --> 00:00:20.440
<v Speaker 1>come up. I think Dan might be traveling, and so

5
00:00:20.760 --> 00:00:24.839
<v Speaker 1>it's me today, Charles max Wood from Top End Devs,

6
00:00:24.879 --> 00:00:28.679
<v Speaker 1>and I have a special guest. This is Sagie Carmel

7
00:00:29.719 --> 00:00:31.960
<v Speaker 1>coming to us from the other side of the world. Sagie,

8
00:00:32.000 --> 00:00:33.560
<v Speaker 1>do you want to let people know who you are

9
00:00:34.840 --> 00:00:35.840
<v Speaker 1>where they might have heard of you?

10
00:00:38.320 --> 00:00:41.719
<v Speaker 2>Sure, no problem. My name is Segie. I'm thirty years old.

11
00:00:42.200 --> 00:00:46.240
<v Speaker 2>I started developing since seventh grade and then never stopped.

12
00:00:46.280 --> 00:00:48.960
<v Speaker 2>I did thirteenth grade, which is funny thing that you

13
00:00:49.000 --> 00:00:51.359
<v Speaker 2>have in Israel. You can have a specific thirteenth grade

14
00:00:51.359 --> 00:00:55.719
<v Speaker 2>about only development. And then I work for the idea

15
00:00:55.520 --> 00:00:58.479
<v Speaker 2>and the idea if I did programming as well, worked

16
00:00:58.479 --> 00:01:01.880
<v Speaker 2>on some small start up the company companies, and then

17
00:01:02.240 --> 00:01:05.439
<v Speaker 2>now I'm starting again one of my own after being

18
00:01:05.519 --> 00:01:09.680
<v Speaker 2>in a startup company again while trying a variety of technologies,

19
00:01:09.719 --> 00:01:14.000
<v Speaker 2>and generally people would know me from either conferences, small

20
00:01:14.040 --> 00:01:17.359
<v Speaker 2>conferences or meetups that I'm usually trying to attend for

21
00:01:17.519 --> 00:01:20.920
<v Speaker 2>having intending in Israel. And also it's like on YouTube

22
00:01:20.920 --> 00:01:24.000
<v Speaker 2>and some other social media platforms.

23
00:01:25.120 --> 00:01:32.040
<v Speaker 1>Cool. Okay, So yeah, so today we're talking about ASTRO,

24
00:01:32.480 --> 00:01:34.159
<v Speaker 1>and I know we've talked about it before, but I

25
00:01:34.159 --> 00:01:38.159
<v Speaker 1>think it's been a while. Are there things that are

26
00:01:38.200 --> 00:01:39.560
<v Speaker 1>new at astro or.

27
00:01:40.840 --> 00:01:46.760
<v Speaker 2>So inherently server server actions, just like next chance, which

28
00:01:46.799 --> 00:01:50.040
<v Speaker 2>is a new feature that was added to as fairly recently.

29
00:01:50.560 --> 00:01:55.280
<v Speaker 2>I genuinely I don't like using it. But one of

30
00:01:55.319 --> 00:01:57.760
<v Speaker 2>the features that I am that is fairly new and

31
00:01:57.840 --> 00:02:00.799
<v Speaker 2>I'm using it quite often is the way that environment

32
00:02:00.879 --> 00:02:05.439
<v Speaker 2>variables are passed to astro. It now allows for we

33
00:02:05.480 --> 00:02:08.960
<v Speaker 2>can add you can go to the astro config dot

34
00:02:09.120 --> 00:02:13.879
<v Speaker 2>js or NJS and then write your environment variables over

35
00:02:13.919 --> 00:02:16.240
<v Speaker 2>there and assigning it to right there. Now it's a

36
00:02:16.280 --> 00:02:19.840
<v Speaker 2>secrets it's a client or service side, and then after

37
00:02:19.960 --> 00:02:22.599
<v Speaker 2>running a small sink, you can import those directly because

38
00:02:22.639 --> 00:02:26.319
<v Speaker 2>the code without doing process dot en or import or

39
00:02:26.360 --> 00:02:30.719
<v Speaker 2>import dot meta. So just allow us to fairly structures

40
00:02:31.840 --> 00:02:33.719
<v Speaker 2>side of code. Then if it doesn't exist, it just

41
00:02:33.960 --> 00:02:36.400
<v Speaker 2>pops an error, which is amazing.

42
00:02:37.840 --> 00:02:43.879
<v Speaker 1>Gotcha. So yeah, maybe we should just get into the

43
00:02:43.919 --> 00:02:46.879
<v Speaker 1>fundamentals here real quick and just talk about what astro

44
00:02:47.159 --> 00:02:51.319
<v Speaker 1>is and what the difference is between that and maybe

45
00:02:51.319 --> 00:02:52.800
<v Speaker 1>some of the other things that people have used.

46
00:02:53.800 --> 00:02:57.840
<v Speaker 2>All right, So Astrojas is a service side rendering framework,

47
00:02:57.960 --> 00:03:02.039
<v Speaker 2>just like next js remix next or or when was

48
00:03:02.080 --> 00:03:06.680
<v Speaker 2>that nuts and one else's vel kit. So all those

49
00:03:07.080 --> 00:03:10.439
<v Speaker 2>frameworks are flavored to a certain type of front and

50
00:03:11.599 --> 00:03:14.919
<v Speaker 2>front library. So it's either you get remixed for React

51
00:03:14.919 --> 00:03:18.080
<v Speaker 2>and just for React, and you might get nuxt for

52
00:03:18.319 --> 00:03:21.479
<v Speaker 2>view and s vel Kit for svelt. With the Astrogs,

53
00:03:21.560 --> 00:03:25.000
<v Speaker 2>it's like a service side agnostic framework which does allow

54
00:03:25.120 --> 00:03:29.719
<v Speaker 2>you to incorporate any kind of client side library into

55
00:03:29.759 --> 00:03:32.719
<v Speaker 2>it and make components that could be rendered in the

56
00:03:32.840 --> 00:03:36.280
<v Speaker 2>server or in the client. So if you feel like,

57
00:03:36.560 --> 00:03:38.439
<v Speaker 2>if you feel very creative, you can take your team

58
00:03:38.479 --> 00:03:40.199
<v Speaker 2>and just like say, okay, let's just figure out which

59
00:03:40.879 --> 00:03:44.039
<v Speaker 2>front end library we like the most and even develop

60
00:03:44.319 --> 00:03:47.479
<v Speaker 2>multiple components in multiple different libraries and see what works

61
00:03:47.520 --> 00:03:50.479
<v Speaker 2>for you. So that's a really cool thing about astrogs

62
00:03:50.520 --> 00:03:54.120
<v Speaker 2>that allows you this freedom. I don't recommend having multiple

63
00:03:54.599 --> 00:03:58.759
<v Speaker 2>multiple components in the same multiple front and frameworks in

64
00:03:58.879 --> 00:04:02.439
<v Speaker 2>the same project, but it's sure fun if you're trying

65
00:04:02.479 --> 00:04:04.719
<v Speaker 2>to figure out what's your team So it allows it

66
00:04:04.879 --> 00:04:05.599
<v Speaker 2>and it's amazing.

67
00:04:08.039 --> 00:04:11.960
<v Speaker 1>So I guess one thing that I'm wondering just diving

68
00:04:12.000 --> 00:04:15.439
<v Speaker 1>into this, right because you know, I've played a little

69
00:04:15.479 --> 00:04:18.720
<v Speaker 1>bit with next I've done some stuff with some of

70
00:04:18.720 --> 00:04:22.720
<v Speaker 1>the others as well. They kind of have this cohesive

71
00:04:23.000 --> 00:04:27.480
<v Speaker 1>idea where everything. I haven't used next JS since they

72
00:04:27.560 --> 00:04:30.120
<v Speaker 1>did server side components, so I don't know how that

73
00:04:30.279 --> 00:04:31.079
<v Speaker 1>all plays, But.

74
00:04:33.519 --> 00:04:36.120
<v Speaker 2>What did you So I'm curious, what do you use?

75
00:04:36.199 --> 00:04:37.720
<v Speaker 2>What if if you need to run it?

76
00:04:38.160 --> 00:04:41.000
<v Speaker 1>So my full time job, I work in Ruby. Actually

77
00:04:41.120 --> 00:04:44.680
<v Speaker 1>I'm so so you know, I can't reach for a

78
00:04:44.839 --> 00:04:48.319
<v Speaker 1>jackal or something like that for my, uh, server side stuff,

79
00:04:48.360 --> 00:04:51.839
<v Speaker 1>and then if I need client side stuff, then I'll

80
00:04:51.959 --> 00:04:56.240
<v Speaker 1>just I'll just import something into the front end. But

81
00:04:57.000 --> 00:04:58.959
<v Speaker 1>a lot of times I'm doing rails and so it

82
00:04:59.240 --> 00:05:01.959
<v Speaker 1>you know, it does a back end process and a

83
00:05:02.040 --> 00:05:05.399
<v Speaker 1>front end process, and you know they're different because the

84
00:05:05.480 --> 00:05:08.120
<v Speaker 1>back ends rails in the front end something else. A

85
00:05:08.199 --> 00:05:12.279
<v Speaker 1>lot of times that's hot wire stimulus. But yeah, when

86
00:05:12.279 --> 00:05:16.279
<v Speaker 1>I'm fiddling with something like an next JS, they kind

87
00:05:16.319 --> 00:05:19.279
<v Speaker 1>of have a cohesive way of managing stuff right where

88
00:05:19.319 --> 00:05:21.000
<v Speaker 1>it's like, hey, you kind of do it the next

89
00:05:21.079 --> 00:05:23.319
<v Speaker 1>JS way and it just kind of works and it

90
00:05:23.439 --> 00:05:25.480
<v Speaker 1>sounds like Astro the way that works, and if I

91
00:05:25.560 --> 00:05:28.639
<v Speaker 1>remember right, they've got islands and so you can say

92
00:05:28.680 --> 00:05:30.759
<v Speaker 1>this island does this and this island does that, and

93
00:05:30.839 --> 00:05:34.240
<v Speaker 1>so you can kind of mix and match. So are

94
00:05:34.319 --> 00:05:38.040
<v Speaker 1>their best practices for astro kind of above and beyond

95
00:05:38.240 --> 00:05:40.759
<v Speaker 1>the isolate your pieces or.

96
00:05:43.279 --> 00:05:48.319
<v Speaker 2>Generally generally not. But that's simplicity to what makes it beautiful.

97
00:05:48.519 --> 00:05:50.959
<v Speaker 2>So let me give you. Let me give you an example.

98
00:05:51.160 --> 00:05:55.680
<v Speaker 2>So in next JAS where you could have rendered service

99
00:05:55.720 --> 00:05:58.879
<v Speaker 2>side component inside clients component, inside server components and sye

100
00:05:58.920 --> 00:06:03.560
<v Speaker 2>side components. That makes this entire ordeal of tracking what

101
00:06:04.000 --> 00:06:07.639
<v Speaker 2>everything in what each file is doing is very complex,

102
00:06:07.959 --> 00:06:12.399
<v Speaker 2>very complexed. It's like just like inside each other. It's

103
00:06:12.480 --> 00:06:13.399
<v Speaker 2>very not understandable.

104
00:06:14.000 --> 00:06:17.160
<v Speaker 1>Well, I've heard that complaint from React developers just in

105
00:06:17.279 --> 00:06:20.800
<v Speaker 1>general is yeah, you start mixing your server components with

106
00:06:20.920 --> 00:06:25.399
<v Speaker 1>your front end components. In ay, it's not always straightforward

107
00:06:25.600 --> 00:06:26.959
<v Speaker 1>what's going to do what?

108
00:06:28.879 --> 00:06:32.959
<v Speaker 2>This is very very common and one of the issues

109
00:06:33.040 --> 00:06:36.079
<v Speaker 2>that it suffers from the if for those who did

110
00:06:36.279 --> 00:06:40.680
<v Speaker 2>use nextjs are normally using server actions and then try

111
00:06:40.759 --> 00:06:45.120
<v Speaker 2>to revalidate the information for front end. It needs to

112
00:06:45.240 --> 00:06:47.959
<v Speaker 2>be pretty, it needs to be beautiful, and most of

113
00:06:48.079 --> 00:06:52.399
<v Speaker 2>the issues about revalidation that it just doing the hydration

114
00:06:53.040 --> 00:06:56.160
<v Speaker 2>in its own way. So hydration that is done using

115
00:06:56.279 --> 00:06:59.600
<v Speaker 2>NEXTJS with the revalidation from the service side. Rendering component

116
00:07:00.120 --> 00:07:03.399
<v Speaker 2>must do like a full like swamp of the page,

117
00:07:03.480 --> 00:07:05.839
<v Speaker 2>but it doesn't let you opt in about how you

118
00:07:05.879 --> 00:07:09.079
<v Speaker 2>should do it unless you're doing partial partial pages rendering.

119
00:07:09.600 --> 00:07:12.839
<v Speaker 2>So it's very convoluted and there are many ways. If

120
00:07:12.879 --> 00:07:14.839
<v Speaker 2>you ever saw the docks. If you've ever seen the docks,

121
00:07:14.959 --> 00:07:18.360
<v Speaker 2>those docks are amazing, but like they contain a lot

122
00:07:18.439 --> 00:07:21.920
<v Speaker 2>of information for nested routes and grouping routes and to

123
00:07:22.240 --> 00:07:26.199
<v Speaker 2>have partial rendering and in astral it just like very simple.

124
00:07:26.720 --> 00:07:29.000
<v Speaker 2>Just like if you want to opt out and let

125
00:07:29.079 --> 00:07:32.079
<v Speaker 2>a server component like wait a bit and finish and

126
00:07:32.160 --> 00:07:37.839
<v Speaker 2>then hydrate, you just write server colon deferre on the

127
00:07:37.920 --> 00:07:41.959
<v Speaker 2>component and then what it does that it just hold

128
00:07:42.079 --> 00:07:45.639
<v Speaker 2>the request and just keep this spot with any loading

129
00:07:45.680 --> 00:07:48.319
<v Speaker 2>component that you choose, and then when it's ready, it

130
00:07:48.399 --> 00:07:50.600
<v Speaker 2>just swamps it back. But just learning it for this

131
00:07:50.720 --> 00:07:55.319
<v Speaker 2>specific island. So it's very simple and it's amazing and

132
00:07:55.480 --> 00:07:58.879
<v Speaker 2>the fact that you're just staying in the jobscript ecosystem

133
00:07:59.040 --> 00:08:05.199
<v Speaker 2>allows you to also pass and split code accordingly. So okay,

134
00:08:05.480 --> 00:08:07.839
<v Speaker 2>if you don't want any just I'm just hijacking. This

135
00:08:07.959 --> 00:08:09.399
<v Speaker 2>final question is for something.

136
00:08:10.079 --> 00:08:13.000
<v Speaker 1>No, you're fine, but let me just make sure that

137
00:08:13.040 --> 00:08:16.560
<v Speaker 1>I understand it. So essentially, what you're saying is is

138
00:08:16.639 --> 00:08:19.879
<v Speaker 1>that if I have a server component that you know,

139
00:08:20.000 --> 00:08:22.279
<v Speaker 1>I need to wait for it to you know, do

140
00:08:22.439 --> 00:08:25.879
<v Speaker 1>something or render something or things like that. ASTRO gives

141
00:08:25.920 --> 00:08:30.319
<v Speaker 1>me a way of kind of controlling the hydration and

142
00:08:31.079 --> 00:08:35.440
<v Speaker 1>rendering cycles so that I don't get lost in kind

143
00:08:35.480 --> 00:08:37.559
<v Speaker 1>of the middle of the Oh. Well, you know, this

144
00:08:37.759 --> 00:08:41.639
<v Speaker 1>is a web front end component versus you know that

145
00:08:41.720 --> 00:08:44.519
<v Speaker 1>has a server component has another thing, and so you know,

146
00:08:44.679 --> 00:08:48.159
<v Speaker 1>I can tell it, hey, just render when you're done,

147
00:08:48.440 --> 00:08:51.480
<v Speaker 1>or you know, hey, you're you're you know, I want

148
00:08:51.519 --> 00:08:53.159
<v Speaker 1>you to manage the life cycle in this way.

149
00:08:54.039 --> 00:08:56.799
<v Speaker 2>That's that's very correct, And I only talked about sever

150
00:08:56.960 --> 00:08:59.919
<v Speaker 2>de third, which is allowing to server components to be

151
00:09:00.200 --> 00:09:04.759
<v Speaker 2>rendered later. But you can also have client client load

152
00:09:05.320 --> 00:09:10.519
<v Speaker 2>that is being loaded with criterias. For example, for those

153
00:09:10.600 --> 00:09:13.960
<v Speaker 2>who use native HTML, they might be aware that you

154
00:09:14.039 --> 00:09:17.639
<v Speaker 2>can load CSS based on the width of the screen.

155
00:09:18.159 --> 00:09:21.120
<v Speaker 2>So it's immediate story that allows you to load styles

156
00:09:21.240 --> 00:09:24.960
<v Speaker 2>based on the screen to you know, just saves like resources.

157
00:09:25.480 --> 00:09:28.120
<v Speaker 2>You can also do the same thing with astro and

158
00:09:28.200 --> 00:09:31.039
<v Speaker 2>components that they're are rendered in the client side. So

159
00:09:31.240 --> 00:09:34.159
<v Speaker 2>we just talked about severybody for for server components, but clients,

160
00:09:34.600 --> 00:09:38.440
<v Speaker 2>but client components also have their own like ecosystem and

161
00:09:38.799 --> 00:09:42.919
<v Speaker 2>support that works amazing behind the scene and just just works.

162
00:09:43.039 --> 00:09:45.919
<v Speaker 2>And it's clear what it's made. It's not the components.

163
00:09:46.480 --> 00:09:49.879
<v Speaker 2>It's not the responsibility of the component to decide whether

164
00:09:49.960 --> 00:09:54.320
<v Speaker 2>or not it's server or clients. It's whoever calls it

165
00:09:54.559 --> 00:09:58.879
<v Speaker 2>makes the decision. To me, just like under all logical reasoning,

166
00:09:58.879 --> 00:10:00.759
<v Speaker 2>it just makes sense, you know, just sleep.

167
00:10:00.960 --> 00:10:04.320
<v Speaker 1>Yeah. So so I guess the other question that I

168
00:10:04.440 --> 00:10:08.440
<v Speaker 1>have is what what problems does this solve other than

169
00:10:08.600 --> 00:10:12.200
<v Speaker 1>just you know, kind of knowing you know what's doing

170
00:10:12.360 --> 00:10:18.559
<v Speaker 1>what and when and how and why. You know, it's

171
00:10:18.639 --> 00:10:20.559
<v Speaker 1>one thing to talk about kind of the nitty gritty

172
00:10:20.600 --> 00:10:22.799
<v Speaker 1>of Okay, you know this is going to render at

173
00:10:22.840 --> 00:10:25.559
<v Speaker 1>this time in this way and things like that, but

174
00:10:26.679 --> 00:10:30.159
<v Speaker 1>you know, ultimately usually what we're talking about is user experience, right,

175
00:10:30.240 --> 00:10:32.919
<v Speaker 1>And so the reason I do any of this stuff

176
00:10:33.080 --> 00:10:36.279
<v Speaker 1>is because it either makes my life easier to keep

177
00:10:36.320 --> 00:10:37.960
<v Speaker 1>track of what's going on, or it makes the user

178
00:10:38.039 --> 00:10:41.399
<v Speaker 1>experience easier. So does this solve one problem more than

179
00:10:41.440 --> 00:10:41.720
<v Speaker 1>the other.

180
00:10:42.320 --> 00:10:44.960
<v Speaker 2>You're talking about the developer experience or the user experience.

181
00:10:45.039 --> 00:10:47.519
<v Speaker 2>I for this specific instance, sounds like you're talking about

182
00:10:47.519 --> 00:10:48.480
<v Speaker 2>the developer experience.

183
00:10:49.200 --> 00:10:51.799
<v Speaker 1>It could be either one. I guess what I'm saying

184
00:10:51.879 --> 00:10:54.399
<v Speaker 1>is sometimes you do this for user experience right where

185
00:10:54.480 --> 00:10:57.159
<v Speaker 1>it's like, hey, you know, we just render the whole

186
00:10:57.200 --> 00:10:59.879
<v Speaker 1>thing when it's done, instead of hey, you kind of

187
00:11:00.120 --> 00:11:01.879
<v Speaker 1>order rendered, but you're still waiting on this other thing

188
00:11:01.919 --> 00:11:04.240
<v Speaker 1>to render and then it finally renders, and then okay,

189
00:11:04.399 --> 00:11:07.279
<v Speaker 1>you know it's still you know, waiting for something else,

190
00:11:07.399 --> 00:11:09.679
<v Speaker 1>or there's something else you know, and another component that's

191
00:11:09.720 --> 00:11:12.559
<v Speaker 1>gonna you know, it's going to hook into this component

192
00:11:12.600 --> 00:11:16.279
<v Speaker 1>and change things, and and so you know, it sounds

193
00:11:16.360 --> 00:11:18.440
<v Speaker 1>like what Astro's doing is is giving you a good

194
00:11:18.440 --> 00:11:20.320
<v Speaker 1>way to manage a lot of that life cycle and

195
00:11:20.399 --> 00:11:23.759
<v Speaker 1>that that work that flow, you know, whether it's data

196
00:11:24.360 --> 00:11:29.320
<v Speaker 1>or you know, visual components or other things. And so

197
00:11:29.480 --> 00:11:31.320
<v Speaker 1>some of that a lot of times is just down

198
00:11:31.360 --> 00:11:33.720
<v Speaker 1>to it's nice for the user if it just kind

199
00:11:33.759 --> 00:11:35.799
<v Speaker 1>of loads all at once or loads in the right way,

200
00:11:36.000 --> 00:11:38.320
<v Speaker 1>or things like that. And for some of this, though,

201
00:11:38.360 --> 00:11:41.120
<v Speaker 1>when you're talking about, hey, you've gotten tested server components

202
00:11:41.200 --> 00:11:45.799
<v Speaker 1>and for on end components, some of that it sounds

203
00:11:45.879 --> 00:11:48.399
<v Speaker 1>like it just makes it easier for the developer to

204
00:11:48.519 --> 00:11:51.679
<v Speaker 1>track and debug when things are working. So I guess

205
00:11:51.720 --> 00:11:56.399
<v Speaker 1>what I'm driving at is where where do the benefits

206
00:11:56.519 --> 00:11:59.240
<v Speaker 1>usually come in. Is it more developer experience thing or

207
00:11:59.320 --> 00:12:01.519
<v Speaker 1>is it more of a use or experience And when

208
00:12:01.679 --> 00:12:04.639
<v Speaker 1>when do you start making the decision to make these

209
00:12:04.679 --> 00:12:05.200
<v Speaker 1>trade offs.

210
00:12:05.679 --> 00:12:10.720
<v Speaker 2>So I'll break it down from the beginning. Astro is mainly,

211
00:12:11.320 --> 00:12:14.639
<v Speaker 2>surprisingly enough, the initial intention of astro to be a

212
00:12:14.799 --> 00:12:18.320
<v Speaker 2>content er than framework. So when you when you ever

213
00:12:18.440 --> 00:12:23.240
<v Speaker 2>you're creating blogs, this should be this should be. And

214
00:12:23.360 --> 00:12:26.559
<v Speaker 2>I'm not like I'm obviously biased here, but I'm saying

215
00:12:26.600 --> 00:12:29.480
<v Speaker 2>that to everyone. If you ever wanted to create a blog,

216
00:12:30.200 --> 00:12:33.600
<v Speaker 2>astro jas just provide the best integrations and the best

217
00:12:33.679 --> 00:12:37.919
<v Speaker 2>things to get the blog going. And it's just service

218
00:12:37.960 --> 00:12:42.519
<v Speaker 2>side components with pages and routing the sense most of

219
00:12:42.600 --> 00:12:46.919
<v Speaker 2>it will be translated to HTML, CSS and JavaScript. If

220
00:12:46.960 --> 00:12:49.759
<v Speaker 2>you're doing fine side some client side, then this is

221
00:12:49.960 --> 00:12:53.480
<v Speaker 2>your go to framework. And what makes it so great

222
00:12:53.639 --> 00:12:55.720
<v Speaker 2>obviously that if you just if you don't need the

223
00:12:55.759 --> 00:12:59.200
<v Speaker 2>service side rendering. You want to create static, static apps,

224
00:13:00.039 --> 00:13:02.840
<v Speaker 2>it will just do it. So that's the first thing

225
00:13:02.919 --> 00:13:04.360
<v Speaker 2>that you want to think about when you're trying to

226
00:13:04.440 --> 00:13:06.159
<v Speaker 2>choose Astro. Let's just say, but you want to create

227
00:13:06.240 --> 00:13:10.759
<v Speaker 2>a more complex application with like off and logins and

228
00:13:10.879 --> 00:13:14.720
<v Speaker 2>so one, you need service any So in this instance,

229
00:13:15.039 --> 00:13:17.960
<v Speaker 2>the reason where astro shines is both its usages of

230
00:13:18.960 --> 00:13:22.799
<v Speaker 2>is integration from the developers experience using CSS and obviously

231
00:13:23.080 --> 00:13:27.759
<v Speaker 2>it's speed working to using the Turbo engine behind the scenes.

232
00:13:28.200 --> 00:13:31.840
<v Speaker 2>So it just works amazingly and like many benchmarks has

233
00:13:31.879 --> 00:13:34.960
<v Speaker 2>been done to compare between many frameworks, and astrog just

234
00:13:35.080 --> 00:13:37.440
<v Speaker 2>tends to come on top. It's just because it's so

235
00:13:37.600 --> 00:13:40.879
<v Speaker 2>fast both from build time and obviously showing it because

236
00:13:40.879 --> 00:13:46.440
<v Speaker 2>it's then translate all the code into native no JS code,

237
00:13:46.600 --> 00:13:49.879
<v Speaker 2>it obviously has its own functionality behind it. So it

238
00:13:50.240 --> 00:13:53.279
<v Speaker 2>allows you to both have an amazing developer experience and

239
00:13:53.320 --> 00:13:57.960
<v Speaker 2>an amazing user experience. The issue where it lacks is

240
00:13:58.080 --> 00:14:03.240
<v Speaker 2>currently popularity doesn't community, it just lasts popularity, so the

241
00:14:03.320 --> 00:14:05.039
<v Speaker 2>difference between the two. So it's like I can go

242
00:14:05.159 --> 00:14:07.720
<v Speaker 2>into discord. There is an AI bot that helps me

243
00:14:08.279 --> 00:14:10.799
<v Speaker 2>and a fiber community that helps me with whatever I need.

244
00:14:10.840 --> 00:14:15.240
<v Speaker 2>That masking there usually get a response ten like lie

245
00:14:15.360 --> 00:14:18.039
<v Speaker 2>from a person or a few seconds they using an

246
00:14:18.080 --> 00:14:23.639
<v Speaker 2>AI and that's like where usually it lacks. So this

247
00:14:23.799 --> 00:14:26.559
<v Speaker 2>is one of the disadvantages of why Astro is Like

248
00:14:27.000 --> 00:14:29.679
<v Speaker 2>maybe you're thinking about it, you're not sure, but it's

249
00:14:29.759 --> 00:14:33.480
<v Speaker 2>like Astrogas is kind of lacking on popularity. So when

250
00:14:33.519 --> 00:14:35.000
<v Speaker 2>a person comes to me, he says, well, I don't

251
00:14:35.000 --> 00:14:37.159
<v Speaker 2>know what Astro is, so they most likely won't pick

252
00:14:37.240 --> 00:14:40.320
<v Speaker 2>it because they don't know. But after they do, it's

253
00:14:40.399 --> 00:14:44.799
<v Speaker 2>like I never looked back after choosing Astra from from

254
00:14:44.840 --> 00:14:45.519
<v Speaker 2>my projects.

255
00:14:47.200 --> 00:14:51.519
<v Speaker 1>Gotcha? Okay, So let's say that I want to get

256
00:14:51.559 --> 00:14:53.720
<v Speaker 1>started with Astro. Then it's like, okay, you know what

257
00:14:54.919 --> 00:14:59.600
<v Speaker 1>you know Soggy, He's smart. He convinced me. He you know,

258
00:15:00.519 --> 00:15:02.639
<v Speaker 1>I'm going to go do this right? So where do

259
00:15:02.720 --> 00:15:03.279
<v Speaker 1>I go from there?

260
00:15:03.960 --> 00:15:07.639
<v Speaker 2>So the Astra documentation is an amazing place to start.

261
00:15:08.399 --> 00:15:10.639
<v Speaker 2>Normally speaking, that will just tell you you, look, you

262
00:15:10.679 --> 00:15:13.440
<v Speaker 2>need to have like a PNPM or NPM and just

263
00:15:13.960 --> 00:15:16.720
<v Speaker 2>run the CLI. Just like you're starting VAT as a

264
00:15:16.799 --> 00:15:19.159
<v Speaker 2>project or you're starting an HS. They have their own CLO.

265
00:15:19.519 --> 00:15:22.200
<v Speaker 2>Just starting a project, they ask you what template do

266
00:15:22.240 --> 00:15:24.320
<v Speaker 2>you want? Like is that a blog? Is it a

267
00:15:24.360 --> 00:15:27.440
<v Speaker 2>starting side rendering? You just start from there. It just

268
00:15:27.639 --> 00:15:30.799
<v Speaker 2>plops out a template with a basic Astra website. You

269
00:15:30.919 --> 00:15:33.840
<v Speaker 2>sort of fiddling around. It's just like, oh, it's very clear.

270
00:15:34.360 --> 00:15:36.799
<v Speaker 2>This components has this logect. It looks like this, and

271
00:15:36.919 --> 00:15:39.559
<v Speaker 2>it has its own styling and it's favorite. But that's

272
00:15:39.600 --> 00:15:42.360
<v Speaker 2>where you start, and then you can move forward to

273
00:15:42.720 --> 00:15:46.000
<v Speaker 2>whatever your project needs. If you want to move to

274
00:15:46.240 --> 00:15:51.440
<v Speaker 2>more or interaction oriented websites, then you go on and

275
00:15:51.519 --> 00:15:55.399
<v Speaker 2>install the integration with React, viewers, vellop or even not

276
00:15:55.559 --> 00:15:57.679
<v Speaker 2>even just that. You have quick, you have solid, you

277
00:15:57.799 --> 00:16:04.080
<v Speaker 2>have like you have every and then like the world

278
00:16:04.159 --> 00:16:04.759
<v Speaker 2>is your oyster.

279
00:16:05.960 --> 00:16:09.120
<v Speaker 1>Right, So I guess the other thing that I'm wondering

280
00:16:09.200 --> 00:16:13.120
<v Speaker 1>then is we dive in is how does astro then

281
00:16:13.279 --> 00:16:17.639
<v Speaker 1>interact with React or view or whatever? Right.

282
00:16:19.159 --> 00:16:21.679
<v Speaker 2>I don't know how they created their adapter, but essentially

283
00:16:21.799 --> 00:16:25.559
<v Speaker 2>you're downloading the React package, but you're also downloading an

284
00:16:25.559 --> 00:16:28.919
<v Speaker 2>adapter for Astro JS. And just like VT where you

285
00:16:28.960 --> 00:16:33.519
<v Speaker 2>can assign integrations to a project like tailwind CSS for

286
00:16:33.559 --> 00:16:37.799
<v Speaker 2>a very used React with with Tailwind knows that the

287
00:16:38.080 --> 00:16:41.159
<v Speaker 2>vat configuration needs to get tail in CSS, which Astro

288
00:16:41.279 --> 00:16:44.799
<v Speaker 2>also supports, and then like it does the same thing

289
00:16:44.879 --> 00:16:47.080
<v Speaker 2>for reacting, and then you just tweet it like a

290
00:16:47.200 --> 00:16:49.399
<v Speaker 2>React act. But once you need to use it in

291
00:16:49.480 --> 00:16:53.000
<v Speaker 2>an Astra component, because you probably will have to, then

292
00:16:53.080 --> 00:16:56.120
<v Speaker 2>you need to either decide if it's a client, if

293
00:16:56.159 --> 00:16:58.159
<v Speaker 2>it's a client component or a server component, and then

294
00:16:58.200 --> 00:17:02.320
<v Speaker 2>you add the client colon low directive which love tails it.

295
00:17:02.480 --> 00:17:05.640
<v Speaker 2>These components now need to have the clind tight interactivity.

296
00:17:06.960 --> 00:17:09.680
<v Speaker 1>Okay, that makes sense. So you know this is this

297
00:17:09.759 --> 00:17:11.440
<v Speaker 1>goes back to what you were talking about before, where

298
00:17:11.640 --> 00:17:14.480
<v Speaker 1>you know, now it's working with life cycle and you

299
00:17:14.559 --> 00:17:18.480
<v Speaker 1>know all of the other pieces. You have an adapter

300
00:17:18.640 --> 00:17:21.839
<v Speaker 1>there that manages all that and so it it's not

301
00:17:22.160 --> 00:17:24.559
<v Speaker 1>just kind of this, Hey, here's a rapper and we're gonna,

302
00:17:25.160 --> 00:17:27.319
<v Speaker 1>you know, do black magic to make it work. It

303
00:17:27.440 --> 00:17:31.079
<v Speaker 1>actually it knows about React and it knows how React works.

304
00:17:31.160 --> 00:17:33.680
<v Speaker 1>And so at the end, at the end of the day,

305
00:17:33.960 --> 00:17:37.640
<v Speaker 1>in that island, it says, Okay, then this is the

306
00:17:37.680 --> 00:17:39.759
<v Speaker 1>way that I'm going to hook in and manage React

307
00:17:39.799 --> 00:17:45.000
<v Speaker 1>and allow React to do its work exactly. You got it. Yeah,

308
00:17:45.039 --> 00:17:45.960
<v Speaker 1>that makes a lot of sense.

309
00:17:46.079 --> 00:17:50.599
<v Speaker 2>So it does, right, It doesn't should be that simple.

310
00:17:52.440 --> 00:17:54.799
<v Speaker 1>So I guess the other question I have is I

311
00:17:54.920 --> 00:17:58.240
<v Speaker 1>hear some people basically say, well, I like Astro because

312
00:17:58.240 --> 00:18:00.359
<v Speaker 1>it lets me use more than one framework, and that

313
00:18:00.519 --> 00:18:01.839
<v Speaker 1>sounds like a headache to me, to.

314
00:18:01.839 --> 00:18:04.359
<v Speaker 2>Be honest, that's generally.

315
00:18:04.160 --> 00:18:08.039
<v Speaker 1>That now I have to learn two frameworks plus how

316
00:18:08.119 --> 00:18:12.640
<v Speaker 1>Astro works. And I guess the flip side of the

317
00:18:12.880 --> 00:18:16.680
<v Speaker 1>argument is, well, if I use NEXTGS and I only

318
00:18:16.759 --> 00:18:21.240
<v Speaker 1>have to really know React plus whatever next ads. So

319
00:18:21.759 --> 00:18:26.240
<v Speaker 1>so when should I be reaching for the Hey, I've

320
00:18:26.279 --> 00:18:30.160
<v Speaker 1>got a lower learning curve in next JAS versus I've

321
00:18:30.240 --> 00:18:36.240
<v Speaker 1>got you know, whatever niceties that Astro gives me. Versus Hey,

322
00:18:36.359 --> 00:18:39.079
<v Speaker 1>I've kind of got sources from all kinds of stuff,

323
00:18:39.119 --> 00:18:41.920
<v Speaker 1>and so I I have some Angular stuff and some

324
00:18:42.119 --> 00:18:46.240
<v Speaker 1>React stuff, and so I'm gonna oh, so first, why

325
00:18:46.240 --> 00:18:47.160
<v Speaker 1>do you make that decision?

326
00:18:47.920 --> 00:18:52.240
<v Speaker 2>So normally speaking, people would I'll separate between those who

327
00:18:52.319 --> 00:18:55.119
<v Speaker 2>knows React and those who don't React, because there is

328
00:18:55.200 --> 00:18:58.559
<v Speaker 2>a small distinction needs to be made. So if you

329
00:18:58.680 --> 00:19:02.200
<v Speaker 2>know React, knowing XJS is pretty simple. The only thing

330
00:19:02.279 --> 00:19:06.799
<v Speaker 2>you need to take control control on is when it's

331
00:19:06.799 --> 00:19:08.960
<v Speaker 2>a server component or what you can and can do

332
00:19:09.039 --> 00:19:12.039
<v Speaker 2>it within a server component and when it's a client component,

333
00:19:12.119 --> 00:19:14.640
<v Speaker 2>and what you can and can do in a client combone.

334
00:19:15.559 --> 00:19:18.240
<v Speaker 2>We start from that. The second thing is if you know,

335
00:19:18.799 --> 00:19:23.160
<v Speaker 2>if you know React, the Astro writing style very similar

336
00:19:23.279 --> 00:19:26.160
<v Speaker 2>to how you write and reacts. It's a jsex style,

337
00:19:26.240 --> 00:19:29.559
<v Speaker 2>but it's not exactly JSX, And I'll explain the distinction

338
00:19:30.720 --> 00:19:36.680
<v Speaker 2>in JSX because well, it's a React framework used to

339
00:19:36.799 --> 00:19:39.960
<v Speaker 2>based on React, and React used to be a front

340
00:19:40.039 --> 00:19:44.240
<v Speaker 2>end library. So if you wanted to write, for example, class,

341
00:19:44.440 --> 00:19:47.799
<v Speaker 2>which is the htmil director for class in CSS, then

342
00:19:47.839 --> 00:19:52.160
<v Speaker 2>you would write class name. The reason behind the reason

343
00:19:52.240 --> 00:19:56.839
<v Speaker 2>behind this is because well, you cannot write the keyword class.

344
00:19:56.640 --> 00:19:59.759
<v Speaker 1>And React JavaScript so you can't ye because.

345
00:20:00.039 --> 00:20:05.240
<v Speaker 2>Word in jalousy opted out for a class name. But

346
00:20:05.440 --> 00:20:08.160
<v Speaker 2>in astral you can write class. And the reason is

347
00:20:08.279 --> 00:20:11.720
<v Speaker 2>because it's service side component. It trenders into server and

348
00:20:11.759 --> 00:20:14.640
<v Speaker 2>you're writing like it's very similar. It's a better version

349
00:20:14.680 --> 00:20:19.079
<v Speaker 2>of JSX because you can write class, but you're getting

350
00:20:19.960 --> 00:20:23.559
<v Speaker 2>a raw htmail output from that, and essentially it just

351
00:20:23.680 --> 00:20:26.400
<v Speaker 2>doesn't do any interpolation. However, if you want to do

352
00:20:26.599 --> 00:20:31.480
<v Speaker 2>like let's just say map between an information to components

353
00:20:31.599 --> 00:20:35.200
<v Speaker 2>using htmail what that you normally do is you would

354
00:20:35.720 --> 00:20:39.880
<v Speaker 2>tweet it like React, but you won't write a key

355
00:20:40.079 --> 00:20:43.680
<v Speaker 2>equals to I or something because again you're not running

356
00:20:43.680 --> 00:20:46.599
<v Speaker 2>it in the client. It's javascripted runs in the server,

357
00:20:47.440 --> 00:20:50.720
<v Speaker 2>so when so this is the first operation. So if

358
00:20:50.759 --> 00:20:55.599
<v Speaker 2>you know React, knowing how astral works, it's just amazing.

359
00:20:55.720 --> 00:20:57.400
<v Speaker 2>You just need to get used to the concept that

360
00:20:57.839 --> 00:21:02.480
<v Speaker 2>Astra components are servers side rendered and should mostly. I

361
00:21:03.119 --> 00:21:07.160
<v Speaker 2>never create a client side server a client side component

362
00:21:07.240 --> 00:21:11.720
<v Speaker 2>for Astro, but Astra components should normally and always be

363
00:21:11.960 --> 00:21:14.519
<v Speaker 2>service side. So you don't write so for whoever you

364
00:21:14.599 --> 00:21:18.039
<v Speaker 2>used to write on click on components now it doesn't

365
00:21:18.079 --> 00:21:21.400
<v Speaker 2>work with Astro components because they intended to be on

366
00:21:21.480 --> 00:21:24.000
<v Speaker 2>service now those for no who knows React is amazing.

367
00:21:24.279 --> 00:21:27.599
<v Speaker 2>If you don't know React, generally still using Astro and

368
00:21:27.920 --> 00:21:33.039
<v Speaker 2>understanding of JSX components, it's still simple. Know in JSX

369
00:21:33.200 --> 00:21:36.400
<v Speaker 2>it's not the React framework. You're learning to write code

370
00:21:36.440 --> 00:21:39.000
<v Speaker 2>that maps to HTML in the end, even if you

371
00:21:39.119 --> 00:21:42.079
<v Speaker 2>don't know the JSX style, can still map code that

372
00:21:42.880 --> 00:21:47.680
<v Speaker 2>renders to HTML in the end using the HTML template,

373
00:21:48.119 --> 00:21:50.839
<v Speaker 2>the basic HTML template, and again it should be very

374
00:21:50.920 --> 00:21:55.319
<v Speaker 2>clear of how you do it. It so that answers

375
00:21:55.440 --> 00:21:58.799
<v Speaker 2>both of those questions. So if you do or you don't,

376
00:21:59.000 --> 00:22:03.359
<v Speaker 2>just please try. And I'm pretty sure that you would

377
00:22:03.480 --> 00:22:06.440
<v Speaker 2>like using it without the JSEX syntax if you're not

378
00:22:06.519 --> 00:22:09.160
<v Speaker 2>familiar with it, or with the JX syntax if you are.

379
00:22:12.920 --> 00:22:18.200
<v Speaker 1>All right, So yeah, I mean I think I'm getting

380
00:22:18.240 --> 00:22:21.240
<v Speaker 1>the picture here. So what kinds of things do people

381
00:22:21.319 --> 00:22:24.759
<v Speaker 1>build with astro or what kinds of things should people

382
00:22:24.839 --> 00:22:27.000
<v Speaker 1>reach for Astro over something like next JSS.

383
00:22:27.640 --> 00:22:32.119
<v Speaker 2>So again, I use my Astro is my Swiss army knife.

384
00:22:32.240 --> 00:22:36.119
<v Speaker 2>So just like it creates everything from locks to more

385
00:22:36.200 --> 00:22:42.519
<v Speaker 2>interactive websites. And I didn't see any reasons why to

386
00:22:42.720 --> 00:22:47.039
<v Speaker 2>use next JS more than I would like to use Astro.

387
00:22:47.160 --> 00:22:50.400
<v Speaker 2>The main issues that I haves that your vendor locked,

388
00:22:50.880 --> 00:22:53.000
<v Speaker 2>which is one of the most complaints that I hear

389
00:22:53.000 --> 00:22:56.440
<v Speaker 2>about next JS. It's just like you're locked to using

390
00:22:57.000 --> 00:23:01.400
<v Speaker 2>self to fully enjoy all the capabilities of next gess,

391
00:23:01.440 --> 00:23:04.759
<v Speaker 2>which is feels like a cheap move against against developers.

392
00:23:04.960 --> 00:23:07.039
<v Speaker 2>Give me a framework that is open source and allows

393
00:23:07.079 --> 00:23:09.200
<v Speaker 2>me to do whatever I want. Why do I need

394
00:23:09.240 --> 00:23:12.000
<v Speaker 2>to be vendor locked? And I don't really see a

395
00:23:12.079 --> 00:23:16.319
<v Speaker 2>reason why not to use next JS. Unless you have

396
00:23:16.480 --> 00:23:22.000
<v Speaker 2>a really complex, insanely complex website, and the scale might

397
00:23:22.160 --> 00:23:24.519
<v Speaker 2>be something that asked for won't reach, though I think

398
00:23:24.559 --> 00:23:27.119
<v Speaker 2>it would reach. I really don't see a reason why

399
00:23:27.240 --> 00:23:29.200
<v Speaker 2>not to use astro versus nextgs.

400
00:23:31.079 --> 00:23:34.359
<v Speaker 1>Okay, it sounds like they kind of operate in a

401
00:23:34.480 --> 00:23:39.519
<v Speaker 1>lot of the same space, right they Yeah, they give

402
00:23:39.559 --> 00:23:44.960
<v Speaker 1>you solutions to a lot of the same problems. So

403
00:23:45.119 --> 00:23:46.440
<v Speaker 1>what have you built with astro then?

404
00:23:47.319 --> 00:23:52.319
<v Speaker 2>So I've created the census for for the CBS, for

405
00:23:53.319 --> 00:23:55.920
<v Speaker 2>censuses for whoever doesn't know. So, census is like a

406
00:23:56.000 --> 00:24:00.640
<v Speaker 2>way that you can gather information about population or everything

407
00:24:00.720 --> 00:24:04.480
<v Speaker 2>that the government wants the people to know, the growth

408
00:24:04.599 --> 00:24:07.680
<v Speaker 2>rate of population within regions or whatever. So I've created

409
00:24:07.759 --> 00:24:11.240
<v Speaker 2>the website that does it within Israel, which is a

410
00:24:11.519 --> 00:24:15.839
<v Speaker 2>census CBS col for whoever is outside of Israel won't

411
00:24:15.839 --> 00:24:18.000
<v Speaker 2>be able to get it. You probably will need a VPN.

412
00:24:18.160 --> 00:24:20.960
<v Speaker 2>But this is the website that I've created. It's very static,

413
00:24:21.119 --> 00:24:23.680
<v Speaker 2>and most of it and most of the same interactivity

414
00:24:23.839 --> 00:24:27.000
<v Speaker 2>was done using CSS, which is another topic that I

415
00:24:27.079 --> 00:24:30.279
<v Speaker 2>haven't really talked about, but it's really important for understanding

416
00:24:30.359 --> 00:24:34.160
<v Speaker 2>why why service side is slightly superior than client site

417
00:24:34.799 --> 00:24:37.519
<v Speaker 2>and we'll get to it. But so I used created

418
00:24:37.559 --> 00:24:42.400
<v Speaker 2>this website which is mostly service side interactivity with the

419
00:24:42.599 --> 00:24:47.960
<v Speaker 2>smidge of client site that I've gotten from connecting the

420
00:24:48.119 --> 00:24:52.720
<v Speaker 2>graphs using Luker, which is a Google product with big Query.

421
00:24:54.440 --> 00:24:55.799
<v Speaker 2>So that's why.

422
00:24:56.079 --> 00:25:00.720
<v Speaker 1>So this is the official census site for Israel initial.

423
00:25:00.799 --> 00:25:05.920
<v Speaker 2>God Census, the CBS. It's like the Census Bureau Statistic

424
00:25:06.200 --> 00:25:07.559
<v Speaker 2>CBS something like that.

425
00:25:08.319 --> 00:25:14.480
<v Speaker 1>Right, So you you said, I want to dig into this.

426
00:25:14.559 --> 00:25:18.039
<v Speaker 1>So you said that a lot of the what animation

427
00:25:18.680 --> 00:25:23.440
<v Speaker 1>was done with CSS, and that was important for how

428
00:25:23.519 --> 00:25:27.559
<v Speaker 1>you're using astro, So you want to explain that.

429
00:25:28.519 --> 00:25:32.079
<v Speaker 2>So, yes, I would love that. I love it. So

430
00:25:32.839 --> 00:25:37.200
<v Speaker 2>in CSS. Normally people people from a back end experience,

431
00:25:37.279 --> 00:25:41.799
<v Speaker 2>tend to underestimate the CSS. But CSS gives you a

432
00:25:41.920 --> 00:25:46.119
<v Speaker 2>lot of power to do many of what fun and

433
00:25:46.400 --> 00:25:49.319
<v Speaker 2>libraries gives to you. But it does it for free.

434
00:25:49.759 --> 00:25:52.519
<v Speaker 2>So we'll start for animations. Animations you pretty much.

435
00:25:52.440 --> 00:25:54.880
<v Speaker 1>Get Hang on, I'm going to back you up for

436
00:25:54.960 --> 00:25:59.240
<v Speaker 1>a second, because it doesn't do it for free, but

437
00:25:59.519 --> 00:26:02.799
<v Speaker 1>you don't have to write code. You don't have to

438
00:26:02.839 --> 00:26:04.480
<v Speaker 1>write as much code in JavaScript.

439
00:26:04.559 --> 00:26:05.880
<v Speaker 2>What do you mean it doesn't do it for free?

440
00:26:06.920 --> 00:26:10.000
<v Speaker 1>So so CSS has it built in, right, and so

441
00:26:10.079 --> 00:26:12.880
<v Speaker 1>you usually have some style and some of the style

442
00:26:13.079 --> 00:26:20.240
<v Speaker 1>is animate for this long in this way. And I

443
00:26:20.319 --> 00:26:23.720
<v Speaker 1>think what you mean by for free is that beyond that,

444
00:26:23.839 --> 00:26:26.119
<v Speaker 1>you don't really have to do any extra work, right,

445
00:26:26.160 --> 00:26:28.160
<v Speaker 1>you don't have to you don't have to write out

446
00:26:28.200 --> 00:26:31.119
<v Speaker 1>the animation in JavaScript, you don't have to tell it

447
00:26:31.200 --> 00:26:33.400
<v Speaker 1>how to do the transition or anything like that. All

448
00:26:33.440 --> 00:26:37.000
<v Speaker 1>of that stuff's just built into your CSS. And the

449
00:26:37.119 --> 00:26:40.960
<v Speaker 1>other part for free is that the CSS is really

450
00:26:41.839 --> 00:26:45.319
<v Speaker 1>really highly optimized to just work without a lot of

451
00:26:45.440 --> 00:26:50.519
<v Speaker 1>computing overhead, whereas doing it in JavaScript is I mean,

452
00:26:50.880 --> 00:26:53.240
<v Speaker 1>I've seen stuff done in JavaScript that doesn't cost you

453
00:26:53.319 --> 00:26:56.680
<v Speaker 1>a lot in your computing computing resources, but the CSS

454
00:26:56.799 --> 00:26:59.720
<v Speaker 1>is already optimized and does it way more efficiently. Yes,

455
00:27:02.000 --> 00:27:05.519
<v Speaker 1>So I just don't want people thinking it's just you know, automatic,

456
00:27:05.640 --> 00:27:09.440
<v Speaker 1>It feels that way, but yeah, I get it.

457
00:27:09.680 --> 00:27:12.759
<v Speaker 2>So I'll advert So what I'm saying for free in

458
00:27:12.839 --> 00:27:16.480
<v Speaker 2>this instance is what I'm saying is that for I'll

459
00:27:16.480 --> 00:27:20.039
<v Speaker 2>be explicit about this. So most of the animations needed

460
00:27:20.160 --> 00:27:22.759
<v Speaker 2>to be to most of them, not all, but most

461
00:27:22.839 --> 00:27:24.960
<v Speaker 2>of the animation needed to be to create it to

462
00:27:25.039 --> 00:27:29.079
<v Speaker 2>be created are very simple like you however, like a click,

463
00:27:29.240 --> 00:27:33.599
<v Speaker 2>like a target, like like shaders, like shading behind an element,

464
00:27:33.720 --> 00:27:37.200
<v Speaker 2>so on and so forth. Most of these animations, including scaling,

465
00:27:37.680 --> 00:27:40.720
<v Speaker 2>it's just like you. You get it for CSS and

466
00:27:40.799 --> 00:27:42.839
<v Speaker 2>when I mean, now for free'z just like it's easy,

467
00:27:43.119 --> 00:27:47.039
<v Speaker 2>it's clear and yeah, and like you, you, once you

468
00:27:47.200 --> 00:27:51.759
<v Speaker 2>get into it, you pretty much gathered like most of

469
00:27:51.799 --> 00:27:55.000
<v Speaker 2>the animation needed. Now, sometimes if you need something more complex,

470
00:27:55.200 --> 00:27:58.359
<v Speaker 2>like I just say a confetti, or you want to

471
00:27:58.480 --> 00:28:02.200
<v Speaker 2>have like a more like three animations, whatever, then you

472
00:28:02.720 --> 00:28:06.039
<v Speaker 2>then normally writing it in CSS, though is possible is

473
00:28:06.200 --> 00:28:10.799
<v Speaker 2>not really reasonable, then then you opt out to JavaScript.

474
00:28:10.920 --> 00:28:16.599
<v Speaker 2>And why I'm recommending CSS within astro because there are

475
00:28:17.599 --> 00:28:19.839
<v Speaker 2>front end I'm sorry about it, but there are seven

476
00:28:19.880 --> 00:28:24.240
<v Speaker 2>ways to load CSS into front end, which is external styling,

477
00:28:24.720 --> 00:28:29.400
<v Speaker 2>global styling, module styling, tailwind or any other one of

478
00:28:29.519 --> 00:28:33.519
<v Speaker 2>those tailwind and you have like what it was it

479
00:28:33.680 --> 00:28:38.440
<v Speaker 2>seven and astro you have, you would you probably mostly

480
00:28:38.599 --> 00:28:43.400
<v Speaker 2>used one, which is scope styling. So scope styling essentially

481
00:28:43.440 --> 00:28:46.319
<v Speaker 2>when you create an ASTRO component, it allows you to

482
00:28:46.440 --> 00:28:50.640
<v Speaker 2>create the styling which is being used only for that component.

483
00:28:50.839 --> 00:28:53.119
<v Speaker 2>So let's just say I have a class named button,

484
00:28:53.319 --> 00:28:55.720
<v Speaker 2>so this class that I've created for the button will

485
00:28:55.799 --> 00:28:58.599
<v Speaker 2>only be used for that button. And if I have

486
00:28:58.680 --> 00:29:02.039
<v Speaker 2>a class different player and that does something different, it

487
00:29:02.240 --> 00:29:07.119
<v Speaker 2>just like it's completely separate and it behaves and behaves

488
00:29:07.200 --> 00:29:11.319
<v Speaker 2>like it looks whatever you've decided to be looked. So

489
00:29:12.359 --> 00:29:14.440
<v Speaker 2>so that's what I'm saying with CSS, and now that

490
00:29:14.559 --> 00:29:18.599
<v Speaker 2>you have more exvanced selectors, like for example, the has selector,

491
00:29:18.680 --> 00:29:21.480
<v Speaker 2>which is incredibly popular and thank god it was created,

492
00:29:21.920 --> 00:29:24.880
<v Speaker 2>you would also have the starting style. Do you know,

493
00:29:25.359 --> 00:29:27.799
<v Speaker 2>by the way, for those who doesn't know, starting style

494
00:29:28.000 --> 00:29:32.720
<v Speaker 2>is as a new CSS I would say, I forget

495
00:29:32.839 --> 00:29:36.599
<v Speaker 2>what's the name. It's a query. So when a component

496
00:29:36.720 --> 00:29:40.279
<v Speaker 2>is being rendered to the screen, it creates the animation

497
00:29:40.519 --> 00:29:44.200
<v Speaker 2>from the start of it. So for example, if you're

498
00:29:44.400 --> 00:29:48.720
<v Speaker 2>hiding something and you're showing it using a display, it

499
00:29:48.880 --> 00:29:52.240
<v Speaker 2>would just show up. It will just show up constantly.

500
00:29:52.599 --> 00:29:54.759
<v Speaker 2>And what I'm saying is it's being done for feit

501
00:29:54.920 --> 00:29:58.799
<v Speaker 2>just like people like you would have used like a

502
00:29:58.880 --> 00:30:01.720
<v Speaker 2>bunch of JavaScript to make the animation happens when it's

503
00:30:01.759 --> 00:30:04.160
<v Speaker 2>being loaded, But now you get it for free using

504
00:30:04.240 --> 00:30:06.240
<v Speaker 2>CSS and you don't have to worry about this. This

505
00:30:06.359 --> 00:30:07.440
<v Speaker 2>is what essentially went.

506
00:30:10.200 --> 00:30:15.400
<v Speaker 1>Yeah, yeah, that makes sense. So so yeah, so you've

507
00:30:15.400 --> 00:30:18.119
<v Speaker 1>got the scope styling, and that's the power that you're

508
00:30:18.160 --> 00:30:23.880
<v Speaker 1>getting as far as CSS goes from your from using

509
00:30:23.920 --> 00:30:27.039
<v Speaker 1>astro right, because then you can say, hey, stuff in

510
00:30:27.160 --> 00:30:31.839
<v Speaker 1>here animates this way. You know, stuff in here hover

511
00:30:32.119 --> 00:30:35.200
<v Speaker 1>it's hover states react in this way, and I can

512
00:30:35.799 --> 00:30:37.720
<v Speaker 1>I can have that same kind of thing. I didn't

513
00:30:37.799 --> 00:30:39.799
<v Speaker 1>like your button example, because usually you want all your

514
00:30:39.839 --> 00:30:42.279
<v Speaker 1>buttons to look more or less the same. But yeah, okay,

515
00:30:42.359 --> 00:30:45.359
<v Speaker 1>well button, a lot of your other Yeah, what you're

516
00:30:45.359 --> 00:30:48.200
<v Speaker 1>talking about here is okay, you know, maybe I have

517
00:30:48.440 --> 00:30:53.160
<v Speaker 1>a menu component and so you know the dropdowns or whatever. Right,

518
00:30:53.799 --> 00:30:56.200
<v Speaker 1>if I hover there, the hover states are going to

519
00:30:56.240 --> 00:30:59.079
<v Speaker 1>be unique to that component. But then if I have

520
00:30:59.400 --> 00:31:01.960
<v Speaker 1>I don't know, graph or a chart and I hover

521
00:31:02.160 --> 00:31:06.839
<v Speaker 1>over a particular data point, then that's going to show

522
00:31:06.960 --> 00:31:09.319
<v Speaker 1>things up differently. Right. It might give me the numbers

523
00:31:09.400 --> 00:31:11.319
<v Speaker 1>and a little box and things like that, but I

524
00:31:11.359 --> 00:31:13.400
<v Speaker 1>don't want it to pop in in the same way

525
00:31:13.480 --> 00:31:17.640
<v Speaker 1>that the menu does. And so you know, I can

526
00:31:17.680 --> 00:31:20.640
<v Speaker 1>set the specific cover states. And sure you can do

527
00:31:20.759 --> 00:31:23.799
<v Speaker 1>that by you know, giving it a class and then

528
00:31:24.000 --> 00:31:26.519
<v Speaker 1>you know, doing a bunch of other wrangling. But if

529
00:31:26.519 --> 00:31:28.839
<v Speaker 1>you've got it scope to just that component and you

530
00:31:29.000 --> 00:31:32.519
<v Speaker 1>know that, okay, any chart component's going to have hover

531
00:31:32.640 --> 00:31:36.880
<v Speaker 1>states and animation states and click states this way, then

532
00:31:37.720 --> 00:31:39.880
<v Speaker 1>then you know that you've got everything kind of set

533
00:31:39.960 --> 00:31:41.640
<v Speaker 1>up that way and you don't have to worry about, Okay,

534
00:31:41.720 --> 00:31:44.039
<v Speaker 1>is this going to bleed over to something else because

535
00:31:44.079 --> 00:31:46.240
<v Speaker 1>it's all scope to just that kind of a component.

536
00:31:47.119 --> 00:31:48.000
<v Speaker 2>Amazing, you got it.

537
00:31:50.599 --> 00:31:53.920
<v Speaker 1>Yeah, that's cool. I think I've seen this in other frameworks,

538
00:31:53.960 --> 00:31:57.480
<v Speaker 1>but they wind up doing some of the other CSS

539
00:31:57.640 --> 00:31:58.640
<v Speaker 1>magic to make it work.

540
00:31:59.519 --> 00:32:05.480
<v Speaker 2>Yeah, and I'm happy that Astra has it. It also

541
00:32:05.640 --> 00:32:10.839
<v Speaker 2>has some cheat sheets which with some shortcuts. So for example,

542
00:32:10.880 --> 00:32:13.400
<v Speaker 2>if you're creating a class. Normally, in order to create

543
00:32:13.440 --> 00:32:15.400
<v Speaker 2>a class and condition whether or not a class would

544
00:32:15.440 --> 00:32:17.759
<v Speaker 2>exist on a component, but just say we're talked about

545
00:32:17.799 --> 00:32:19.519
<v Speaker 2>all the service side rendering and not talking about the

546
00:32:19.599 --> 00:32:23.440
<v Speaker 2>land side, you would have to be like doing string

547
00:32:23.519 --> 00:32:27.160
<v Speaker 2>interpolation over the class. Like usually we would have a

548
00:32:27.240 --> 00:32:29.680
<v Speaker 2>class which is class A, class B, class C, and

549
00:32:29.839 --> 00:32:32.519
<v Speaker 2>you have space between. Right when using Astro, there is

550
00:32:32.559 --> 00:32:34.640
<v Speaker 2>something that is called class list which allows you to

551
00:32:34.680 --> 00:32:37.000
<v Speaker 2>pass on on the rate which is containing all the

552
00:32:37.160 --> 00:32:39.799
<v Speaker 2>name and allows you to condition whether or not a

553
00:32:39.960 --> 00:32:41.920
<v Speaker 2>name of a class would exist, whether or not if

554
00:32:42.240 --> 00:32:45.839
<v Speaker 2>if you condition, it would just say active call on

555
00:32:46.559 --> 00:32:48.799
<v Speaker 2>something that is brilliant, and if it's true, it would

556
00:32:48.839 --> 00:32:51.640
<v Speaker 2>be inserted to as a name of a class, and

557
00:32:51.720 --> 00:32:55.000
<v Speaker 2>if it isn't, it will just it will just disappear.

558
00:32:55.160 --> 00:32:57.880
<v Speaker 2>And it's just like it's a nice shortcut for managing

559
00:32:57.920 --> 00:32:58.599
<v Speaker 2>your components.

560
00:32:59.720 --> 00:33:01.799
<v Speaker 1>Yeah, I've seen that in some of the things that

561
00:33:01.920 --> 00:33:05.880
<v Speaker 1>I've like, I've I've gotten HTML templates that have ASTRO

562
00:33:05.960 --> 00:33:08.079
<v Speaker 1>in them, and I've seen those directives so.

563
00:33:09.799 --> 00:33:14.119
<v Speaker 2>Amazing. The next thing what they'll be interesting about is

564
00:33:14.200 --> 00:33:18.400
<v Speaker 2>also the specific one that I've created. I also use HTMX.

565
00:33:18.960 --> 00:33:22.200
<v Speaker 2>I'm not sure if it's within the scope of this conversation,

566
00:33:22.400 --> 00:33:24.680
<v Speaker 2>but if you're curious to hear about this and why

567
00:33:24.759 --> 00:33:27.279
<v Speaker 2>did I use HTMX, I'll be more than happy to do.

568
00:33:28.000 --> 00:33:30.519
<v Speaker 1>Well. Yeah, I mean it is interesting. We've had Carson

569
00:33:30.799 --> 00:33:35.960
<v Speaker 1>Gross on the podcast talking about HTMX and it's a

570
00:33:37.119 --> 00:33:41.160
<v Speaker 1>it's a tool, or it's almost a patternal anyway, but

571
00:33:41.279 --> 00:33:44.119
<v Speaker 1>it's it's a really handy way of managing a lot

572
00:33:44.440 --> 00:33:48.920
<v Speaker 1>of your state and things like that, and it seems

573
00:33:49.079 --> 00:33:53.160
<v Speaker 1>like with ASTRO it would play pretty nicely because again

574
00:33:53.240 --> 00:33:57.880
<v Speaker 1>you've got these pockets of functionality right that you're managing

575
00:33:57.920 --> 00:34:02.359
<v Speaker 1>as islands, and so HTMX it doesn't think of it

576
00:34:02.519 --> 00:34:04.839
<v Speaker 1>quite that way, but I could see how you could.

577
00:34:05.720 --> 00:34:06.640
<v Speaker 1>You can make a mesh.

578
00:34:08.119 --> 00:34:12.559
<v Speaker 2>Yes, So about the integration between HTMX and ASPER, it

579
00:34:12.559 --> 00:34:16.800
<v Speaker 2>pretty much nailed the differences that like HTMX would normally

580
00:34:16.880 --> 00:34:20.760
<v Speaker 2>need you to return an HTML template which you can

581
00:34:20.960 --> 00:34:24.719
<v Speaker 2>create using astro. You can create the estra the HTML temple,

582
00:34:25.039 --> 00:34:27.880
<v Speaker 2>just return them so and then it will just swap

583
00:34:27.920 --> 00:34:30.760
<v Speaker 2>them directly into the client to whatever side that you need.

584
00:34:30.920 --> 00:34:33.800
<v Speaker 2>And so you don't even need the client side of

585
00:34:34.480 --> 00:34:38.119
<v Speaker 2>like fiber b for the simplistic stuff, because you would

586
00:34:38.199 --> 00:34:41.440
<v Speaker 2>have HTMX doing all the swapping together with ASTRO. So

587
00:34:41.559 --> 00:34:45.679
<v Speaker 2>ASTRO will hold the state using the database and would

588
00:34:45.800 --> 00:34:49.480
<v Speaker 2>vendor the HTML and HMX will just swap it where

589
00:34:49.480 --> 00:34:51.039
<v Speaker 2>it's needed based on the interaction.

590
00:34:53.480 --> 00:34:56.960
<v Speaker 1>Yeah, we do something similar with RAILS and Turbo. It's

591
00:34:57.000 --> 00:35:00.280
<v Speaker 1>amazing and so yeah, and it's the same idea, right,

592
00:35:00.360 --> 00:35:03.639
<v Speaker 1>It's like hey, you know, uh, you know, replace or

593
00:35:04.000 --> 00:35:07.639
<v Speaker 1>insert after insert before whatever, right, and you just throw

594
00:35:07.800 --> 00:35:11.039
<v Speaker 1>some HTML back and so RAILS renders the HTML with

595
00:35:11.159 --> 00:35:13.440
<v Speaker 1>the data from the database and yeah, puts it into

596
00:35:13.480 --> 00:35:16.880
<v Speaker 1>the page based on what you're telling it, following the

597
00:35:17.039 --> 00:35:20.639
<v Speaker 1>conventions in Turbo, and I know HTMX basically works the

598
00:35:20.679 --> 00:35:22.480
<v Speaker 1>same way exactly.

599
00:35:23.079 --> 00:35:25.480
<v Speaker 2>And one last thing that it's important to mention and

600
00:35:25.599 --> 00:35:28.960
<v Speaker 2>why I recommend using astro and why it is so

601
00:35:29.119 --> 00:35:31.880
<v Speaker 2>fun to use astro, which is like a JavaScript both

602
00:35:32.480 --> 00:35:36.559
<v Speaker 2>the front and the back, which is the inherent part

603
00:35:36.639 --> 00:35:40.719
<v Speaker 2>at about code splitting. So let me give you an example.

604
00:35:40.760 --> 00:35:44.159
<v Speaker 2>I'll just say I've created an ID for a component, right,

605
00:35:44.519 --> 00:35:46.400
<v Speaker 2>And let's just say I've created this ID, and I

606
00:35:46.519 --> 00:35:48.599
<v Speaker 2>need this ID to be used in a service side

607
00:35:48.639 --> 00:35:52.119
<v Speaker 2>component and in a client side component. Usually passing those

608
00:35:52.199 --> 00:35:54.159
<v Speaker 2>between the client side and the service side would be

609
00:35:54.880 --> 00:35:57.360
<v Speaker 2>le'll just say headache, especially if you're I mean you're

610
00:35:57.440 --> 00:35:59.800
<v Speaker 2>from Ruby on rails, like do you know how to pass?

611
00:35:59.880 --> 00:36:02.119
<v Speaker 2>Like I just I need this ID and the client

612
00:36:02.199 --> 00:36:06.880
<v Speaker 2>side whateveration because those are two completely different languages. But

613
00:36:06.960 --> 00:36:08.960
<v Speaker 2>in astray it's both on the same. So I create

614
00:36:09.119 --> 00:36:13.920
<v Speaker 2>a constant ideas file and my in the idea is

615
00:36:14.039 --> 00:36:17.039
<v Speaker 2>being shared to the service side components and to the

616
00:36:17.079 --> 00:36:19.639
<v Speaker 2>client side components, so it's will duplicate it to the

617
00:36:20.159 --> 00:36:22.920
<v Speaker 2>server and the client and just being used and it's

618
00:36:23.639 --> 00:36:24.719
<v Speaker 2>interlace and it's amazing.

619
00:36:26.519 --> 00:36:27.039
<v Speaker 1>That's cool.

620
00:36:27.800 --> 00:36:28.000
<v Speaker 2>Yeah.

621
00:36:29.800 --> 00:36:32.119
<v Speaker 1>So I'm a little curious because I think we're kind

622
00:36:32.159 --> 00:36:34.599
<v Speaker 1>of talking around some of the fundamentals of ASTRO and

623
00:36:34.760 --> 00:36:40.159
<v Speaker 1>you know, some of the you know, more common use cases.

624
00:36:42.960 --> 00:36:45.280
<v Speaker 1>Where where do you get more advanced with ASTRO? Where

625
00:36:45.280 --> 00:36:49.000
<v Speaker 1>where do you get into features that I guess maybe

626
00:36:49.079 --> 00:36:53.480
<v Speaker 1>aren't as simple or common but are still powerful.

627
00:36:53.960 --> 00:36:55.159
<v Speaker 2>Can you give me an example.

628
00:36:56.480 --> 00:36:57.400
<v Speaker 1>I don't know.

629
00:36:58.880 --> 00:37:01.519
<v Speaker 2>What will be let's just let's flip the script. What

630
00:37:01.599 --> 00:37:03.599
<v Speaker 2>will be an advance? So what would you consider the

631
00:37:03.679 --> 00:37:06.400
<v Speaker 2>advanced when you're writing rubion rails with whatever front end

632
00:37:06.480 --> 00:37:10.000
<v Speaker 2>frameworks to your front and library with your decision.

633
00:37:11.280 --> 00:37:17.639
<v Speaker 1>What I mean, usually you're getting into, you know, more

634
00:37:17.679 --> 00:37:21.119
<v Speaker 1>of I guess the optimization stuff, you know, where it's hey,

635
00:37:21.199 --> 00:37:24.360
<v Speaker 1>you know, I'm optimizing the way I access my database,

636
00:37:24.639 --> 00:37:28.039
<v Speaker 1>or you know, maybe I have some really really complicated behaviors.

637
00:37:29.320 --> 00:37:32.199
<v Speaker 1>But I know people generally solve a lot of that

638
00:37:32.320 --> 00:37:33.480
<v Speaker 1>with something like React.

639
00:37:35.960 --> 00:37:39.000
<v Speaker 2>Wait, you're saying that accessing the database, they're solving it

640
00:37:39.159 --> 00:37:40.280
<v Speaker 2>using React by you No.

641
00:37:40.679 --> 00:37:44.239
<v Speaker 1>No, No, really complicated interactions on the front end you

642
00:37:44.360 --> 00:37:45.159
<v Speaker 1>handle with React.

643
00:37:45.440 --> 00:37:48.000
<v Speaker 2>So amazing. If you need complicated interaction. You could just

644
00:37:48.079 --> 00:37:52.199
<v Speaker 2>opt into React and God bless you. Yeah, so it's

645
00:37:52.239 --> 00:37:55.920
<v Speaker 2>just like you have it all like from side to side.

646
00:37:55.920 --> 00:37:58.320
<v Speaker 2>You need the complex stuff you can install, even like

647
00:37:58.519 --> 00:38:01.800
<v Speaker 2>front the libraries like material Lui, schatsy and has a

648
00:38:02.000 --> 00:38:05.840
<v Speaker 2>right integration with aastro Okay, get it for free. You

649
00:38:06.079 --> 00:38:08.920
<v Speaker 2>want something with more tailin do you have flow bite

650
00:38:09.000 --> 00:38:12.440
<v Speaker 2>and obviously and it just works.

651
00:38:13.960 --> 00:38:17.119
<v Speaker 1>Makes sense. So are there optimizations you need to make

652
00:38:17.199 --> 00:38:20.480
<v Speaker 1>on the back end as far as you know database

653
00:38:20.559 --> 00:38:22.280
<v Speaker 1>or the way you do your queries or things like

654
00:38:22.400 --> 00:38:24.440
<v Speaker 1>that if you're pulling from a data source.

655
00:38:25.800 --> 00:38:29.400
<v Speaker 2>So normally it would be I wouldn't have an issue

656
00:38:29.480 --> 00:38:33.079
<v Speaker 2>with generally pulling information from the database because again you're

657
00:38:33.119 --> 00:38:36.480
<v Speaker 2>just writing typescript as like back end. It's just like

658
00:38:37.000 --> 00:38:39.239
<v Speaker 2>the difference is that and what that I'm usually trying

659
00:38:39.239 --> 00:38:41.400
<v Speaker 2>to tell to whomever I've worked with on the components.

660
00:38:41.440 --> 00:38:44.679
<v Speaker 2>It's just like not to write the exact queries within

661
00:38:44.760 --> 00:38:47.960
<v Speaker 2>the components. So I would rather have like an entities

662
00:38:48.079 --> 00:38:52.400
<v Speaker 2>file than those entities file you managed like the functions

663
00:38:52.559 --> 00:38:56.679
<v Speaker 2>like getting get all creator and that and then you

664
00:38:56.840 --> 00:38:59.519
<v Speaker 2>call them using the astro component. Not because I'm afraid

665
00:38:59.559 --> 00:39:03.320
<v Speaker 2>of any sort of leakage of the information. But because

666
00:39:03.320 --> 00:39:06.639
<v Speaker 2>I mean like because of how ASTRA works, which is

667
00:39:06.840 --> 00:39:09.800
<v Speaker 2>some people might argue that it is the disadvantage. So

668
00:39:09.960 --> 00:39:13.159
<v Speaker 2>ASPRA is the component of aspro is inherently divided to two,

669
00:39:13.760 --> 00:39:18.639
<v Speaker 2>the logic and the template of the HTML. So you

670
00:39:18.960 --> 00:39:22.960
<v Speaker 2>must either I think you return a response to to

671
00:39:23.360 --> 00:39:26.800
<v Speaker 2>return something else except the HTML template, or you will

672
00:39:26.920 --> 00:39:29.840
<v Speaker 2>let the HTML template decide on whatever it works, right,

673
00:39:29.920 --> 00:39:32.679
<v Speaker 2>So you need to have the logic finish. Most of

674
00:39:32.719 --> 00:39:34.840
<v Speaker 2>the time, you need to have the logic finish. So

675
00:39:34.960 --> 00:39:37.599
<v Speaker 2>that means they can condition is that early bailout which

676
00:39:37.639 --> 00:39:39.800
<v Speaker 2>is something so that they think of early bailt is

677
00:39:39.840 --> 00:39:43.039
<v Speaker 2>like write it if and then return. This might not work.

678
00:39:43.480 --> 00:39:46.039
<v Speaker 2>This might not work because you need to return a component,

679
00:39:46.719 --> 00:39:48.880
<v Speaker 2>so you will write a wrapper around it. It's just

680
00:39:48.960 --> 00:39:51.119
<v Speaker 2>like it's very inconvenient. It's not. It's not convenient to

681
00:39:51.159 --> 00:39:54.360
<v Speaker 2>write it within the ASTRA component. So that's the only

682
00:39:55.280 --> 00:39:58.519
<v Speaker 2>thing which is not that bad all things consider. But

683
00:39:58.880 --> 00:40:01.039
<v Speaker 2>it's just like things to know, just don't write your

684
00:40:01.599 --> 00:40:04.840
<v Speaker 2>selects and inserts and whatever within the astro component. Was

685
00:40:04.960 --> 00:40:07.440
<v Speaker 2>just create a function and then manage.

686
00:40:08.480 --> 00:40:12.880
<v Speaker 1>Yeah, that's common practice. I've seen with most back end systems,

687
00:40:12.960 --> 00:40:15.719
<v Speaker 1>right you have, Yeah, you've segregated your logic so that

688
00:40:16.719 --> 00:40:21.000
<v Speaker 1>your database access layer is separate from your rendering logic.

689
00:40:21.239 --> 00:40:26.440
<v Speaker 2>Yeah. What will be another interesting thing to talk about,

690
00:40:26.480 --> 00:40:30.199
<v Speaker 2>which are slots. So if if you don't want I

691
00:40:30.239 --> 00:40:36.360
<v Speaker 2>mean so, in React, normally you would have in order

692
00:40:36.440 --> 00:40:41.039
<v Speaker 2>to pass on, would you say the aid of the

693
00:40:41.159 --> 00:40:44.039
<v Speaker 2>JSX to the next component and to renderative components, you

694
00:40:44.079 --> 00:40:47.159
<v Speaker 2>would have children. So the children components will be whatever

695
00:40:47.320 --> 00:40:50.320
<v Speaker 2>you Let's just say I've created a menu, which is

696
00:40:50.400 --> 00:40:52.559
<v Speaker 2>a component that I've created, and then I will have

697
00:40:52.760 --> 00:40:55.840
<v Speaker 2>like the list of whatever I needs to have inside them.

698
00:40:55.880 --> 00:40:59.480
<v Speaker 2>In so you would have children component within the within

699
00:40:59.519 --> 00:41:01.559
<v Speaker 2>the minu, the definition of the menu would have the

700
00:41:01.639 --> 00:41:06.880
<v Speaker 2>children component. In Astro, you would have slots. And slot

701
00:41:07.480 --> 00:41:11.239
<v Speaker 2>is is an HTML element that a lot of people

702
00:41:11.320 --> 00:41:14.000
<v Speaker 2>don't don't know that exists. That there is a template

703
00:41:14.159 --> 00:41:19.239
<v Speaker 2>HTML attribute, the tag and the slot which are both

704
00:41:19.400 --> 00:41:23.280
<v Speaker 2>like official but the slot, the spot template or the

705
00:41:23.360 --> 00:41:26.519
<v Speaker 2>spot tag allows you to insert components just like a

706
00:41:26.599 --> 00:41:30.519
<v Speaker 2>children would. So what's the difference. Normally The difference would

707
00:41:30.519 --> 00:41:34.119
<v Speaker 2>be that you can give slot's name, So by giving

708
00:41:34.199 --> 00:41:37.639
<v Speaker 2>them name, you can also tell to the parent, Okay.

709
00:41:37.960 --> 00:41:39.960
<v Speaker 2>The parent can say to the kid, okay, I want

710
00:41:40.119 --> 00:41:42.719
<v Speaker 2>this in the spot named the header, I want this

711
00:41:42.880 --> 00:41:45.079
<v Speaker 2>in this in the nameless slot, which is the children,

712
00:41:45.400 --> 00:41:47.920
<v Speaker 2>and I want this in the footer. So normally you

713
00:41:47.960 --> 00:41:50.280
<v Speaker 2>can What did I do with my styling is that

714
00:41:50.559 --> 00:41:53.159
<v Speaker 2>I would have the component, the outer component designed the

715
00:41:53.360 --> 00:41:57.440
<v Speaker 2>entire layout and then the and then inject the inner

716
00:41:57.480 --> 00:42:01.719
<v Speaker 2>components where they need to be fit. What did you

717
00:42:01.760 --> 00:42:05.119
<v Speaker 2>get is an extremely amazing experience that you know that

718
00:42:05.599 --> 00:42:08.400
<v Speaker 2>layup is outside. The father decides on the layouts, and

719
00:42:08.519 --> 00:42:12.960
<v Speaker 2>the components themselves decided on the functionality of themselves. And

720
00:42:14.360 --> 00:42:16.320
<v Speaker 2>this is like, this is one of those things that

721
00:42:16.360 --> 00:42:18.360
<v Speaker 2>it's just very convenient. And I don't know how people

722
00:42:18.440 --> 00:42:21.719
<v Speaker 2>manage without my cashwall. Usually they pass it by the

723
00:42:21.840 --> 00:42:24.320
<v Speaker 2>props and it's just like it looks kind of ugly.

724
00:42:24.599 --> 00:42:27.280
<v Speaker 1>Yeah, I've seen that, and yeah it gets a little

725
00:42:27.280 --> 00:42:34.320
<v Speaker 1>bit hairy. I've used other component libraries that yeah, you

726
00:42:34.679 --> 00:42:36.679
<v Speaker 1>can basically say, hey, these are the things that go

727
00:42:36.800 --> 00:42:41.400
<v Speaker 1>in the different slots. So Ruby on rails has a

728
00:42:42.079 --> 00:42:45.760
<v Speaker 1>view component library that you know does all the service rendering,

729
00:42:45.840 --> 00:42:47.400
<v Speaker 1>and yeah, you can give it slots and then you

730
00:42:47.440 --> 00:42:49.400
<v Speaker 1>can give it other components to stick in those slots.

731
00:42:49.679 --> 00:42:55.320
<v Speaker 2>Amazing and view transition. Have you ever heard of hue transition?

732
00:42:58.119 --> 00:42:59.239
<v Speaker 1>I think I might have heard of it, but I

733
00:42:59.280 --> 00:42:59.920
<v Speaker 1>don't know what it is.

734
00:43:01.000 --> 00:43:07.639
<v Speaker 2>So the view transition inherently essentially created using it's a

735
00:43:07.719 --> 00:43:14.880
<v Speaker 2>standard web thing which allows you to move between websites

736
00:43:16.000 --> 00:43:18.840
<v Speaker 2>without having a front and library, and it allows you

737
00:43:18.920 --> 00:43:23.239
<v Speaker 2>to fade between pages, so you can, if you want,

738
00:43:23.519 --> 00:43:27.880
<v Speaker 2>us a client site feel feel to something without like

739
00:43:28.039 --> 00:43:30.920
<v Speaker 2>looking at the at the indicator that says that it's

740
00:43:30.960 --> 00:43:33.360
<v Speaker 2>doting when it's trying to move between component A too

741
00:43:33.400 --> 00:43:37.000
<v Speaker 2>component B, or between page A to page B. You

742
00:43:37.119 --> 00:43:39.480
<v Speaker 2>can in astro they give you like a nice, a

743
00:43:39.599 --> 00:43:42.079
<v Speaker 2>nice addition to it, but it's just like you write,

744
00:43:42.239 --> 00:43:46.400
<v Speaker 2>you add the view the view transition, and and then

745
00:43:46.440 --> 00:43:48.400
<v Speaker 2>you like you want to move between page A too,

746
00:43:48.400 --> 00:43:50.559
<v Speaker 2>pah B, just press on the link and you don't

747
00:43:50.599 --> 00:43:54.119
<v Speaker 2>get any indication from the server that it's doted, but

748
00:43:54.400 --> 00:43:58.480
<v Speaker 2>it will be instead faded nicely from one page to another,

749
00:43:59.400 --> 00:44:01.679
<v Speaker 2>which is you can do it also on Ruby Advance.

750
00:44:01.760 --> 00:44:03.000
<v Speaker 2>It's just like it's a website.

751
00:44:03.079 --> 00:44:06.679
<v Speaker 1>Yeah, yeah, yeah, there are a number of I think

752
00:44:06.840 --> 00:44:10.039
<v Speaker 1>HTMX allows you to do something similar as well, yes,

753
00:44:10.280 --> 00:44:15.079
<v Speaker 1>where you know, you just allows you to yeah, and

754
00:44:15.159 --> 00:44:17.519
<v Speaker 1>so effectively, what you're doing is it's like, okay, I

755
00:44:17.559 --> 00:44:20.199
<v Speaker 1>click the link to load a different page on the

756
00:44:20.199 --> 00:44:24.159
<v Speaker 1>same website, and so it intelligently says, okay, what changed, right,

757
00:44:24.320 --> 00:44:24.679
<v Speaker 1>And then.

758
00:44:24.800 --> 00:44:27.280
<v Speaker 2>There is a few differences though there's a few difference

759
00:44:28.079 --> 00:44:30.480
<v Speaker 2>So view transition not only that, it does also the

760
00:44:30.559 --> 00:44:35.280
<v Speaker 2>fading between the pages, which HTMX won't unless you explicitly

761
00:44:36.400 --> 00:44:38.119
<v Speaker 2>create animations you CSS.

762
00:44:38.840 --> 00:44:40.039
<v Speaker 1>So this does it with an animation.

763
00:44:41.519 --> 00:44:45.360
<v Speaker 2>Not only that, it also allows you to persist certain

764
00:44:45.480 --> 00:44:51.480
<v Speaker 2>elements when you move between pages. Okay, so I'm Fireship

765
00:44:51.559 --> 00:44:54.400
<v Speaker 2>created a video about it way back, which is when

766
00:44:54.440 --> 00:44:58.079
<v Speaker 2>you press the button, a certain element moved from the

767
00:44:58.159 --> 00:45:01.039
<v Speaker 2>center of the page to the top five. But if

768
00:45:01.360 --> 00:45:05.519
<v Speaker 2>r L and the page itself change between page A

769
00:45:05.639 --> 00:45:09.079
<v Speaker 2>to page B and it went through the server, right,

770
00:45:09.199 --> 00:45:12.599
<v Speaker 2>So you pusition is slightly more advanced animation and gives

771
00:45:12.679 --> 00:45:16.719
<v Speaker 2>you like a really client side feel And normally you

772
00:45:16.760 --> 00:45:20.000
<v Speaker 2>would have to do like jump through hoops to create

773
00:45:20.039 --> 00:45:21.480
<v Speaker 2>this animation, and you're sort of getting.

774
00:45:21.239 --> 00:45:26.239
<v Speaker 1>It for free. Yeah. Yeah, I like that because you know,

775
00:45:26.440 --> 00:45:30.079
<v Speaker 1>and that's that's the kind of UX that's nice, is that,

776
00:45:30.400 --> 00:45:32.639
<v Speaker 1>you know, it's like, hey, now what you had it,

777
00:45:33.159 --> 00:45:35.000
<v Speaker 1>you know, and now it looks like this instead of

778
00:45:35.320 --> 00:45:43.599
<v Speaker 1>what you started with. Exactly super cool. Well, we're kind

779
00:45:43.599 --> 00:45:45.480
<v Speaker 1>of getting a little bit toward the end of time.

780
00:45:47.280 --> 00:45:50.199
<v Speaker 1>If people want to learn more about you or about Astro,

781
00:45:50.679 --> 00:45:52.119
<v Speaker 1>what are the best resources out.

782
00:45:52.480 --> 00:45:54.599
<v Speaker 2>I mean, I'm just trying to every once in a

783
00:45:54.599 --> 00:46:00.679
<v Speaker 2>while topload to YouTube, maybe post on LinkedIn, but those

784
00:46:00.719 --> 00:46:03.840
<v Speaker 2>two places I'm trying to be I'll try to be

785
00:46:03.960 --> 00:46:06.679
<v Speaker 2>more mindful about it. But this is where I'm currently at.

786
00:46:06.840 --> 00:46:11.079
<v Speaker 2>Until I become an official, official public speaker about Astro,

787
00:46:11.199 --> 00:46:14.159
<v Speaker 2>I wanted to one day just talk about Astra freely and.

788
00:46:15.719 --> 00:46:20.239
<v Speaker 1>Trash next Chase, So, what's your YouTube channel?

789
00:46:20.920 --> 00:46:24.440
<v Speaker 2>So I think it's I think it's just my name

790
00:46:24.519 --> 00:46:26.880
<v Speaker 2>in English, but I don't think it's a good idea.

791
00:46:26.960 --> 00:46:30.599
<v Speaker 2>Let's say if I can it says segi at Segi caramel.

792
00:46:31.119 --> 00:46:35.280
<v Speaker 1>Let's see, and then yeah, on LinkedIn, we can just

793
00:46:35.360 --> 00:46:36.000
<v Speaker 1>look you up by it.

794
00:46:36.159 --> 00:46:39.519
<v Speaker 2>Yeah, just like a caramel. It doesn't have any It

795
00:46:39.679 --> 00:46:41.280
<v Speaker 2>just added a bunch of numbers in the end. But

796
00:46:41.360 --> 00:46:44.519
<v Speaker 2>it's just so it's like, yeah, it might contain Hebrew.

797
00:46:44.679 --> 00:46:47.719
<v Speaker 2>So if your audience do a Hebrew, but sometimes I'll

798
00:46:47.760 --> 00:46:50.239
<v Speaker 2>try to add I'll try to add stuff in English.

799
00:46:51.119 --> 00:46:54.880
<v Speaker 1>Right, all right, Well, so the last part of our

800
00:46:54.960 --> 00:46:58.320
<v Speaker 1>show is always picks, and that's just shout outs about

801
00:46:58.400 --> 00:47:01.920
<v Speaker 1>stuff that we like. So I'll go ahead and get

802
00:47:02.039 --> 00:47:07.800
<v Speaker 1>us going for the picks. And I always start my

803
00:47:07.960 --> 00:47:13.960
<v Speaker 1>picks off with with a board game. And so this

804
00:47:14.159 --> 00:47:19.920
<v Speaker 1>board game is it's a variation on Pandemic. So for

805
00:47:20.039 --> 00:47:22.559
<v Speaker 1>the folks that have played Pandemic, if you don't know

806
00:47:22.639 --> 00:47:25.000
<v Speaker 1>what Pandemic is, it's a cooperative game where you're trying

807
00:47:25.039 --> 00:47:29.079
<v Speaker 1>to eradicate diseases from the globe. And so, yeah, you

808
00:47:29.199 --> 00:47:33.119
<v Speaker 1>all have different roles and you move around and right,

809
00:47:33.239 --> 00:47:36.519
<v Speaker 1>you play cards to find cures and things like that.

810
00:47:37.639 --> 00:47:41.000
<v Speaker 1>This one is a little bit more involved. And there's

811
00:47:41.039 --> 00:47:46.960
<v Speaker 1>a variation on Pandemic called Fall of Rome, and so

812
00:47:47.199 --> 00:47:51.079
<v Speaker 1>instead of diseases, you have armies that are marching toward Rome.

813
00:47:53.840 --> 00:47:58.119
<v Speaker 1>This one. This one is Fate of the Fellowship and

814
00:47:58.320 --> 00:48:05.519
<v Speaker 1>it's based on Lord of the Rings. So and I'm

815
00:48:05.559 --> 00:48:08.960
<v Speaker 1>going to be teaching it in about three weeks at

816
00:48:09.000 --> 00:48:15.079
<v Speaker 1>a game board convention. Board game convention anyway, Yeah, my

817
00:48:15.559 --> 00:48:20.000
<v Speaker 1>friend does. He teaches games at the at the convention

818
00:48:20.119 --> 00:48:22.199
<v Speaker 1>every year. He used to be part owner in a

819
00:48:22.719 --> 00:48:23.639
<v Speaker 1>board game store.

820
00:48:26.280 --> 00:48:29.280
<v Speaker 2>Does he make a living from teaching games? Like, is

821
00:48:29.320 --> 00:48:30.119
<v Speaker 2>he doing it for no?

822
00:48:30.519 --> 00:48:33.039
<v Speaker 1>Not anymore. So he was getting he was he was

823
00:48:33.079 --> 00:48:36.000
<v Speaker 1>getting paid by the store and his profit share, but

824
00:48:36.400 --> 00:48:39.079
<v Speaker 1>the store closed, so now he's just doing it just

825
00:48:39.400 --> 00:48:43.519
<v Speaker 1>just for fun. So anyway, the way that this works

826
00:48:43.639 --> 00:48:48.480
<v Speaker 1>is you have armies from you know, the different bad

827
00:48:48.559 --> 00:48:52.920
<v Speaker 1>guys and you have armies for like Elvin armies. What

828
00:48:53.199 --> 00:48:57.159
<v Speaker 1>was it it was elves humans And anyway, there are

829
00:48:57.239 --> 00:48:59.280
<v Speaker 1>like three or four different colors of good guy armies

830
00:48:59.320 --> 00:49:05.039
<v Speaker 1>and so you know, you're moving your armies to fight

831
00:49:05.119 --> 00:49:08.360
<v Speaker 1>off the other armies and then you're trying to get

832
00:49:09.199 --> 00:49:14.880
<v Speaker 1>Frodo and the ring to Mount Doom. You have to

833
00:49:14.960 --> 00:49:17.679
<v Speaker 1>complete like I think it was four missions, and the

834
00:49:17.719 --> 00:49:20.039
<v Speaker 1>fourth one is getting frod or Mountain Doom and being

835
00:49:20.079 --> 00:49:22.639
<v Speaker 1>able to play a number of ring cards in order

836
00:49:22.760 --> 00:49:24.639
<v Speaker 1>to destroy the ring. And if you can do that,

837
00:49:24.760 --> 00:49:28.639
<v Speaker 1>you win. We played it twice we lost, so it's

838
00:49:28.760 --> 00:49:31.039
<v Speaker 1>it's not just like this super easy game, but it

839
00:49:31.199 --> 00:49:37.280
<v Speaker 1>was fun. There were four of us playing. Board game

840
00:49:37.320 --> 00:49:41.480
<v Speaker 1>geek says it's best with three, and yeah, so you

841
00:49:41.599 --> 00:49:46.639
<v Speaker 1>play with two characters each and so you know, somebody's

842
00:49:46.679 --> 00:49:48.840
<v Speaker 1>Frodo and Sam and somebody else, you know, and then

843
00:49:48.920 --> 00:49:51.320
<v Speaker 1>they might have another one. I think that the other

844
00:49:52.320 --> 00:49:56.199
<v Speaker 1>character that that person was playing was legless, you know

845
00:49:56.320 --> 00:49:59.719
<v Speaker 1>I was playing was I playing Aoin and Mary and

846
00:49:59.760 --> 00:50:03.400
<v Speaker 1>Pip and anyway, And so you can do different they

847
00:50:03.480 --> 00:50:06.519
<v Speaker 1>have different abilities and you move around the map and

848
00:50:06.599 --> 00:50:09.280
<v Speaker 1>try and manage this stuff. You also have havens that

849
00:50:09.320 --> 00:50:12.400
<v Speaker 1>you're trying to protect, and if you lose havens, then

850
00:50:12.519 --> 00:50:14.960
<v Speaker 1>the hope meter goes down. If you lose hope before

851
00:50:15.599 --> 00:50:20.039
<v Speaker 1>Frodo gets to the then you lose. And it's got

852
00:50:20.119 --> 00:50:24.639
<v Speaker 1>a tower that you roll the dice through that looks

853
00:50:24.719 --> 00:50:30.679
<v Speaker 1>like sour on the eye of Souron tower. You know.

854
00:50:30.840 --> 00:50:35.320
<v Speaker 1>The different missions are you have to take where what's

855
00:50:36.079 --> 00:50:39.360
<v Speaker 1>Saramon's tower you have to take that, you have to

856
00:50:40.920 --> 00:50:42.559
<v Speaker 1>have a certain kind of a battle. I think I

857
00:50:42.599 --> 00:50:45.079
<v Speaker 1>can't remember. I've only played it like twice, but it

858
00:50:45.199 --> 00:50:48.639
<v Speaker 1>was very, very fun, and so Board Game Geek waits

859
00:50:48.719 --> 00:50:52.840
<v Speaker 1>it at two point ninety nine. So Pandemic I think

860
00:50:52.880 --> 00:50:55.119
<v Speaker 1>probably is like a two point one or two point two.

861
00:50:55.760 --> 00:50:58.360
<v Speaker 1>This is a bit more involved because you're moving the

862
00:50:58.440 --> 00:51:03.599
<v Speaker 1>nascul around and trying to you know, you're you're you're

863
00:51:03.679 --> 00:51:06.159
<v Speaker 1>keeping track of a lot of things. Uh. The armies

864
00:51:06.239 --> 00:51:09.800
<v Speaker 1>march are along different paths on the board and so

865
00:51:10.400 --> 00:51:12.519
<v Speaker 1>unlike Fall of Rome, they don't all go to Rome.

866
00:51:12.800 --> 00:51:17.159
<v Speaker 1>The paths go all over the board and so anyway, uh,

867
00:51:17.880 --> 00:51:21.440
<v Speaker 1>just and it's it's it was fun. We really enjoyed

868
00:51:21.440 --> 00:51:24.159
<v Speaker 1>playing it. So I'm going to pick Lord of the

869
00:51:24.280 --> 00:51:26.920
<v Speaker 1>Rings Fate of the Fellowship. Uh, this is a new

870
00:51:26.960 --> 00:51:29.079
<v Speaker 1>game that came out this year. Usually I'm picking games

871
00:51:29.119 --> 00:51:31.599
<v Speaker 1>that you know are a year three old, but this

872
00:51:31.719 --> 00:51:32.360
<v Speaker 1>one's new.

873
00:51:32.320 --> 00:51:32.400
<v Speaker 2>So.

874
00:51:33.920 --> 00:51:35.840
<v Speaker 1>Definitely go pick it up. It's one of the more

875
00:51:38.320 --> 00:51:45.159
<v Speaker 1>well put together visual games. So it it's very fun

876
00:51:45.239 --> 00:51:50.079
<v Speaker 1>because all the pieces are are well designed and anyway,

877
00:51:50.679 --> 00:51:53.280
<v Speaker 1>so so it's cool, very cool. So I'm gonna pick that.

878
00:51:57.199 --> 00:51:59.559
<v Speaker 1>My wife and I watched a movie last night. I

879
00:51:59.639 --> 00:52:02.360
<v Speaker 1>didn't love it, but it was it was it was good.

880
00:52:02.639 --> 00:52:08.519
<v Speaker 1>I could have predicted every every plot point in a

881
00:52:08.760 --> 00:52:13.199
<v Speaker 1>movie whatever. But it was called The Christmas Miracle of

882
00:52:13.559 --> 00:52:23.360
<v Speaker 1>Jonathan Toomey and no, it's at the beginning of the movie.

883
00:52:23.559 --> 00:52:27.800
<v Speaker 1>The main character is a ten year old boy. His

884
00:52:28.000 --> 00:52:29.880
<v Speaker 1>father goes off to war. I think it's World War

885
00:52:29.960 --> 00:52:34.400
<v Speaker 1>one and he's killed in action and he has this

886
00:52:34.760 --> 00:52:38.679
<v Speaker 1>nativity set that he put out every year with his

887
00:52:38.840 --> 00:52:43.239
<v Speaker 1>dad and he loses it. And so Jonathan Toomey is

888
00:52:43.440 --> 00:52:44.599
<v Speaker 1>this wood carver.

889
00:52:45.639 --> 00:52:45.960
<v Speaker 2>And so.

890
00:52:48.239 --> 00:52:53.039
<v Speaker 1>Anyway, they moved to the town where Toomey lives and

891
00:52:54.960 --> 00:53:00.760
<v Speaker 1>you know, meet with him and you know. Anyway, so yeah,

892
00:53:01.119 --> 00:53:05.159
<v Speaker 1>so you know, and it takes place at Christmas time anyway,

893
00:53:06.280 --> 00:53:09.039
<v Speaker 1>and to me is you know, they commissioned him to

894
00:53:09.119 --> 00:53:16.800
<v Speaker 1>carve a replacement Nativity set. So anyway, it was all right.

895
00:53:18.719 --> 00:53:21.159
<v Speaker 1>I guess it's not a glowing endorsement. But if you're

896
00:53:21.159 --> 00:53:23.599
<v Speaker 1>looking for a movie that you probably haven't seen, and yeah,

897
00:53:23.639 --> 00:53:26.559
<v Speaker 1>it has. There were like two actors in it that

898
00:53:27.079 --> 00:53:30.760
<v Speaker 1>you've seen in other stuff. I'm trying to remember names,

899
00:53:30.800 --> 00:53:33.559
<v Speaker 1>but I'm not very good at remembering celebrities names because

900
00:53:33.559 --> 00:53:37.960
<v Speaker 1>I just don't care. But there was one in particular.

901
00:53:38.079 --> 00:53:40.119
<v Speaker 1>She was like one of the kids that he befriends,

902
00:53:41.440 --> 00:53:47.559
<v Speaker 1>and she was in the Host and a handful of

903
00:53:47.639 --> 00:53:50.280
<v Speaker 1>other movies as an adult, right, and she's a little

904
00:53:50.320 --> 00:53:53.440
<v Speaker 1>kid in this movie. So we ran across it, and

905
00:53:54.280 --> 00:53:58.440
<v Speaker 1>it's got to be twenty years old or something at least,

906
00:53:59.079 --> 00:54:02.880
<v Speaker 1>But anyway, we enjoyed it, so my wife really liked it.

907
00:54:03.039 --> 00:54:05.280
<v Speaker 1>So so if you're looking for that that kind of

908
00:54:05.320 --> 00:54:08.360
<v Speaker 1>a feel good Christmas movie, then then that's right up

909
00:54:08.400 --> 00:54:14.559
<v Speaker 1>your alley. Those ones don't always do it for me,

910
00:54:14.719 --> 00:54:16.840
<v Speaker 1>but I'm a good support. I'll sit through a movie

911
00:54:20.760 --> 00:54:22.000
<v Speaker 1>trying to think, what else.

912
00:54:23.559 --> 00:54:25.880
<v Speaker 2>Are you thinking about? A pick? Because I have something

913
00:54:25.920 --> 00:54:29.519
<v Speaker 2>as American and people just if they go ahead play it,

914
00:54:29.679 --> 00:54:31.039
<v Speaker 2>it's just sick.

915
00:54:32.239 --> 00:54:32.679
<v Speaker 1>Do a pick.

916
00:54:34.440 --> 00:54:37.800
<v Speaker 2>It's just the whole Night Silk song. It's amazing and

917
00:54:38.000 --> 00:54:40.519
<v Speaker 2>if you didn't play it already, you should. It's an

918
00:54:40.559 --> 00:54:41.199
<v Speaker 2>amazing game.

919
00:54:41.239 --> 00:54:41.920
<v Speaker 1>Which song is it?

920
00:54:42.559 --> 00:54:46.039
<v Speaker 2>No suck song in the game the video game, it's

921
00:54:46.079 --> 00:54:47.280
<v Speaker 2>a whole night sucks song.

922
00:54:49.199 --> 00:54:51.239
<v Speaker 1>Okay, so all night?

923
00:54:51.480 --> 00:54:57.920
<v Speaker 2>Yeah. Yeah, this game crashed the entire internet or the

924
00:54:58.000 --> 00:55:02.800
<v Speaker 2>stores of Nintendo XBO and just crashed it for being awesome.

925
00:55:03.000 --> 00:55:05.559
<v Speaker 2>And it's still amazing and I recommend you all to

926
00:55:05.639 --> 00:55:09.880
<v Speaker 2>play and obviously played the first Hole name. Those games

927
00:55:09.920 --> 00:55:12.480
<v Speaker 2>are just amazing. Team Cherriot just.

928
00:55:14.480 --> 00:55:18.719
<v Speaker 1>And know what the the graphics for that game, I

929
00:55:18.880 --> 00:55:20.119
<v Speaker 1>I just I love them.

930
00:55:21.199 --> 00:55:27.599
<v Speaker 2>Hendron not animated, not pixelated, just throwing with all the passion,

931
00:55:28.639 --> 00:55:29.199
<v Speaker 2>just amazing.

932
00:55:29.440 --> 00:55:33.519
<v Speaker 1>Yeah, it's it's very yeah, simple gameplay, but it's it's

933
00:55:33.559 --> 00:55:34.480
<v Speaker 1>a fun game for sure.

934
00:55:35.679 --> 00:55:42.440
<v Speaker 2>Simple, my goodness, simply this game, this game is so

935
00:55:42.960 --> 00:55:45.519
<v Speaker 2>goddamn hard because it's hard.

936
00:55:45.639 --> 00:55:53.000
<v Speaker 1>Oh yeah, I'm just saying. It's like, it's it's how

937
00:55:53.039 --> 00:55:56.920
<v Speaker 1>do I explain it, it's it's somewhere between. And I

938
00:55:57.119 --> 00:55:58.760
<v Speaker 1>I haven't played a ton of it. My son was

939
00:55:58.840 --> 00:56:03.559
<v Speaker 1>really into Night oh and Silk Song. So Silk Song

940
00:56:03.719 --> 00:56:10.079
<v Speaker 1>just came out. Yeah, but yeah, so Hollow Night. You know,

941
00:56:10.519 --> 00:56:13.760
<v Speaker 1>you move through, you do have some basic attack and

942
00:56:13.840 --> 00:56:19.000
<v Speaker 1>things like that. It's almost I mean, you are fighting

943
00:56:19.079 --> 00:56:21.679
<v Speaker 1>through the levels, but it's almost as much a puzzle game,

944
00:56:21.960 --> 00:56:23.840
<v Speaker 1>like how do I get into the right position to

945
00:56:25.800 --> 00:56:29.400
<v Speaker 1>to get through the level right with whatever abilities I have?

946
00:56:29.639 --> 00:56:32.800
<v Speaker 1>As it is an action and fighting game.

947
00:56:33.320 --> 00:56:36.960
<v Speaker 2>M oh and there is a like a lot of

948
00:56:37.079 --> 00:56:41.440
<v Speaker 2>lord behind it. The generally fun game it is.

949
00:56:42.599 --> 00:56:44.760
<v Speaker 1>I love the visuals on the game, and it's definitely

950
00:56:44.840 --> 00:56:46.519
<v Speaker 1>a fun game. Like I don't want to sell it short,

951
00:56:46.599 --> 00:56:51.320
<v Speaker 1>but yeah, but I haven't played Silk Song yet, so

952
00:56:51.360 --> 00:56:54.440
<v Speaker 1>I'll have to check that out. I really want to

953
00:56:54.480 --> 00:56:56.280
<v Speaker 1>get the switch to I haven't.

954
00:56:57.039 --> 00:57:00.840
<v Speaker 2>Don't do it. I don't do it for two reasons.

955
00:57:01.400 --> 00:57:05.440
<v Speaker 2>One the fact that Nintendo gets away for overpricing their

956
00:57:05.519 --> 00:57:10.760
<v Speaker 2>console is unforgivable. There is no reason to buy Anintendo

957
00:57:10.840 --> 00:57:14.559
<v Speaker 2>too just so I like, I wouldn't feel feed to

958
00:57:14.639 --> 00:57:20.400
<v Speaker 2>that market. Secondly, it's uh, the Nintendo Nintendo two doesn't

959
00:57:20.440 --> 00:57:25.760
<v Speaker 2>have like a lot of graphic improvements that if you

960
00:57:25.840 --> 00:57:27.760
<v Speaker 2>already have a Nintendo one, you should just stick to it.

961
00:57:27.960 --> 00:57:31.800
<v Speaker 2>And unless you won the very exclusive game, then I

962
00:57:31.880 --> 00:57:34.400
<v Speaker 2>recommended to stick to the Switch one.

963
00:57:35.119 --> 00:57:41.280
<v Speaker 1>Right, Are there are there exclusive games to Nintendo or

964
00:57:41.360 --> 00:57:42.159
<v Speaker 1>to the Switch.

965
00:57:41.960 --> 00:57:47.079
<v Speaker 2>To the Probably yes they are, they are, But again,

966
00:57:47.159 --> 00:57:50.920
<v Speaker 2>if you're not looking for anything specific, and I recommend

967
00:57:50.960 --> 00:57:53.000
<v Speaker 2>it just to stick to the Switch one. I also

968
00:57:53.039 --> 00:57:54.719
<v Speaker 2>have a Switch one that just like, because I do

969
00:57:55.000 --> 00:57:57.199
<v Speaker 2>not that keen of just like up and over and

970
00:57:57.360 --> 00:58:00.320
<v Speaker 2>just buying, Like how much was it eight hundred eight

971
00:58:00.400 --> 00:58:02.920
<v Speaker 2>hundred bucks for the switch? That's nuts.

972
00:58:03.039 --> 00:58:07.239
<v Speaker 1>I haven't even looked it's nuts. Yeah, it looks like

973
00:58:09.119 --> 00:58:14.960
<v Speaker 1>Mario Kart World, Donkey Kong Bonanza. Oh, there's a Metroid

974
00:58:15.280 --> 00:58:22.039
<v Speaker 1>a Kirby I Rule Warriors. So yeah, there are games

975
00:58:22.079 --> 00:58:24.920
<v Speaker 1>I guess that are exclusive to switch to. But yeah,

976
00:58:24.920 --> 00:58:26.719
<v Speaker 1>I haven't even priced it. I was going to look

977
00:58:26.760 --> 00:58:29.440
<v Speaker 1>and see how much it was for Christmas.

978
00:58:29.599 --> 00:58:34.639
<v Speaker 2>But now that you'll see the prisl, it's more than a.

979
00:58:34.639 --> 00:58:37.320
<v Speaker 1>Couple hundred dollars. I'm probably, oh, yeah, it's five hundred

980
00:58:37.360 --> 00:58:42.480
<v Speaker 1>dollars here and that that's a little bit. If my

981
00:58:42.679 --> 00:58:45.639
<v Speaker 1>kids really really deeply wanted it, it'd be like, hey,

982
00:58:45.719 --> 00:58:50.000
<v Speaker 1>this is all you're getting, right for the next three years.

983
00:58:51.320 --> 00:58:56.239
<v Speaker 2>Oh my goodness. So and again it's like it doesn't

984
00:58:56.280 --> 00:58:58.960
<v Speaker 2>have any significant graphic improvement.

985
00:58:58.599 --> 00:59:02.079
<v Speaker 1>So just yeah, I guess, I guess I haven't looked

986
00:59:02.119 --> 00:59:05.719
<v Speaker 1>into that either. I have to say too that the

987
00:59:08.079 --> 00:59:09.800
<v Speaker 1>so one of the reasons that I was excited to

988
00:59:09.840 --> 00:59:14.199
<v Speaker 1>get the Switch when it came out was it was

989
00:59:14.320 --> 00:59:17.639
<v Speaker 1>kind of the hybrid, right, it was a console you

990
00:59:17.719 --> 00:59:21.880
<v Speaker 1>hooked to your TV and then you could also like

991
00:59:22.199 --> 00:59:23.920
<v Speaker 1>just put it in your bag and take it with you.

992
00:59:25.440 --> 00:59:29.480
<v Speaker 1>And as far as a handheld system goes, I really

993
00:59:29.639 --> 00:59:32.320
<v Speaker 1>liked it. As far as then hooking it up to

994
00:59:32.400 --> 00:59:36.760
<v Speaker 1>my TV, I felt like it wasn't the best console. Yes,

995
00:59:37.480 --> 00:59:40.960
<v Speaker 1>is that is that a terrible thing to say? I mean, no,

996
00:59:41.360 --> 00:59:46.519
<v Speaker 1>that's that's been my take. So you know, I don't know.

997
00:59:46.599 --> 00:59:47.880
<v Speaker 1>I mean I like this switch.

998
00:59:49.719 --> 00:59:51.960
<v Speaker 2>The Nintendo for me, just like it was very un

999
00:59:52.480 --> 00:59:55.039
<v Speaker 2>not convenient for me. The hookup. I don't know how

1000
00:59:55.119 --> 00:59:58.679
<v Speaker 2>it works with other people. But you get like this

1001
00:59:58.960 --> 01:00:06.719
<v Speaker 2>plastic piece printed. It's very like not very convenient. Then

1002
01:00:06.800 --> 01:00:09.199
<v Speaker 2>you need to hook that up with your HDMI and

1003
01:00:09.280 --> 01:00:10.760
<v Speaker 2>then in order to make it work, so I need

1004
01:00:10.800 --> 01:00:14.239
<v Speaker 2>to put I need to place this the freaking switch

1005
01:00:14.400 --> 01:00:20.079
<v Speaker 2>inside the slot. Right, it's very annoying. Like I wasn't

1006
01:00:20.119 --> 01:00:24.239
<v Speaker 2>excited for handhelds. I would recommend the Steam Deck, which

1007
01:00:24.320 --> 01:00:27.159
<v Speaker 2>is the better one. That being said, I don't have

1008
01:00:27.320 --> 01:00:30.000
<v Speaker 2>the Steam Deck. I just had heard of reviews about

1009
01:00:30.039 --> 01:00:32.480
<v Speaker 2>this and just like you get access to a bunch

1010
01:00:32.519 --> 01:00:35.760
<v Speaker 2>of games and it works pretty pretty well. And if

1011
01:00:35.840 --> 01:00:39.159
<v Speaker 2>you're traveling a lot, maybe try the RG Xbox, which

1012
01:00:39.199 --> 01:00:41.760
<v Speaker 2>is not really an Xbox hand held. It's a lot

1013
01:00:42.360 --> 01:00:46.400
<v Speaker 2>but just look it up. Though the RG Xbox is

1014
01:00:46.639 --> 01:00:49.840
<v Speaker 2>more expensive than Nintendo than Nintendo's.

1015
01:00:49.280 --> 01:00:56.800
<v Speaker 1>Only Yeah, yeah, I mean the I guess the nice

1016
01:00:56.840 --> 01:00:59.360
<v Speaker 1>thing about like because I didn't even know Steam how

1017
01:00:59.400 --> 01:01:03.119
<v Speaker 1>to Steam Deck, but it looks like you can play

1018
01:01:03.199 --> 01:01:05.880
<v Speaker 1>basically anything you can get on Steam on the Steam Deck,

1019
01:01:06.119 --> 01:01:06.519
<v Speaker 1>which is.

1020
01:01:07.280 --> 01:01:10.280
<v Speaker 2>Some stuff you can get on Play Pass with the

1021
01:01:10.599 --> 01:01:15.360
<v Speaker 2>Xbox that for stuff can also play PC. Right, it's amazing.

1022
01:01:15.800 --> 01:01:19.679
<v Speaker 2>It's like it gives you everything now about the About

1023
01:01:20.280 --> 01:01:24.400
<v Speaker 2>the quality, my guess it's on par. It's not slightly

1024
01:01:24.440 --> 01:01:25.760
<v Speaker 2>better than the Nintendo.

1025
01:01:25.480 --> 01:01:27.360
<v Speaker 1>Switch, probably.

1026
01:01:28.960 --> 01:01:32.119
<v Speaker 2>Just for assuming because you're optimized for this team.

1027
01:01:32.280 --> 01:01:36.440
<v Speaker 1>But yeah, but yeah, my my other issue with the

1028
01:01:36.519 --> 01:01:41.159
<v Speaker 1>Switch is that, oh they do have a docking station

1029
01:01:41.360 --> 01:01:44.639
<v Speaker 1>for the Steam Deck as well. The other issue that

1030
01:01:44.719 --> 01:01:47.679
<v Speaker 1>I had was that the so the little joy cons

1031
01:01:48.599 --> 01:01:53.400
<v Speaker 1>like those, we get drift in them, We get all

1032
01:01:53.519 --> 01:01:57.039
<v Speaker 1>kinds of other issues and then it's okay, well, you know,

1033
01:01:57.119 --> 01:01:59.000
<v Speaker 1>the batteries dying on it, so I have to go

1034
01:01:59.239 --> 01:02:01.480
<v Speaker 1>slide it onto the switch, and oh when I slid

1035
01:02:01.519 --> 01:02:04.519
<v Speaker 1>it on, then it it came off of the dock

1036
01:02:04.760 --> 01:02:06.599
<v Speaker 1>just enough for it to kind of glitch out.

1037
01:02:08.880 --> 01:02:11.119
<v Speaker 2>Yeah, where it is real, I get, like you know

1038
01:02:11.519 --> 01:02:12.559
<v Speaker 2>how many times I got.

1039
01:02:12.679 --> 01:02:15.599
<v Speaker 1>But the issue, the issue was always with it when

1040
01:02:15.639 --> 01:02:17.719
<v Speaker 1>you were using it as a console on your TV

1041
01:02:17.960 --> 01:02:25.440
<v Speaker 1>and not right as a handheld. It was generally better, but.

1042
01:02:27.280 --> 01:02:29.519
<v Speaker 2>I have one of the issues, and I have some. Normally,

1043
01:02:29.880 --> 01:02:32.320
<v Speaker 2>if you buy a single swhich you get like two

1044
01:02:32.400 --> 01:02:36.159
<v Speaker 2>controllers which are two halves, which is essentially one, but

1045
01:02:36.320 --> 01:02:37.760
<v Speaker 2>if you want to play with a friend, you have

1046
01:02:37.840 --> 01:02:40.480
<v Speaker 2>to hook it up to this sort of yanky plastic

1047
01:02:40.639 --> 01:02:43.880
<v Speaker 2>thing that slide it over, and then you would hold

1048
01:02:43.920 --> 01:02:47.400
<v Speaker 2>it horizontally instead of vertically with the other one. You

1049
01:02:47.559 --> 01:02:50.000
<v Speaker 2>have no idea how many times I've messed it up

1050
01:02:50.039 --> 01:02:53.280
<v Speaker 2>and I flipped it to the wrong way. And I'm

1051
01:02:53.320 --> 01:02:56.039
<v Speaker 2>pretty sure that most of the reason why it strifts

1052
01:02:56.159 --> 01:03:01.199
<v Speaker 2>because of me, because of the good because I have

1053
01:03:01.679 --> 01:03:05.719
<v Speaker 2>a stupid plastic thing inside the inside the controller. I

1054
01:03:05.840 --> 01:03:07.960
<v Speaker 2>got the other ways dominant.

1055
01:03:08.199 --> 01:03:11.400
<v Speaker 1>Yeah, yeah, all right, well I'm gonna go ahead and

1056
01:03:11.400 --> 01:03:15.760
<v Speaker 1>wrap us up. But this was cool, good conversation about astro,

1057
01:03:16.320 --> 01:03:18.639
<v Speaker 1>fun conversation about games and video games.

1058
01:03:19.880 --> 01:03:20.599
<v Speaker 2>Thank you for having me.

1059
01:03:20.599 --> 01:03:22.239
<v Speaker 1>I think I have it in me somewhere. Eventually I

1060
01:03:22.280 --> 01:03:23.320
<v Speaker 1>want to write a video game.

1061
01:03:23.360 --> 01:03:26.639
<v Speaker 2>But we'll see if you need somebody to talk to

1062
01:03:26.760 --> 01:03:28.360
<v Speaker 2>you on my fresher video games.

1063
01:03:28.440 --> 01:03:30.760
<v Speaker 1>So yeah, I know a few people who have built

1064
01:03:30.840 --> 01:03:34.760
<v Speaker 1>video games too. So my twenty year old keeps saying

1065
01:03:34.800 --> 01:03:38.599
<v Speaker 1>that he wants to be an indie video game developer.

1066
01:03:38.840 --> 01:03:41.039
<v Speaker 1>Of course, getting him to sit down and actually do

1067
01:03:41.119 --> 01:03:43.840
<v Speaker 1>the work to learn how to do it, that's another story.

1068
01:03:44.800 --> 01:03:48.840
<v Speaker 1>But I get the appeal and I think it. I

1069
01:03:48.880 --> 01:03:51.800
<v Speaker 1>think it'd be fun. So anyway, we'll go ahead and

1070
01:03:51.840 --> 01:03:54.360
<v Speaker 1>wrap it up until next time folks max out.