WEBVTT 1 00:00:06.320 --> 00:00:10.919 Hey, welcome back to another episode of Javascripts Jabber. This week on our 2 00:00:10.960 --> 00:00:15.160 panel, we have a j O'Neil yoyo coming at you live from a fish 3 00:00:15.160 --> 00:00:21.239 tank. Dan Shapier, Hello from an Israel, unbelievably still at war. 4 00:00:22.480 --> 00:00:26.839 I'm Charles Maxwood from top End Devs, and this week we're talking to Sam 5 00:00:27.079 --> 00:00:30.120 Selikoff. Sam, do you want to introduce yourself? Let people know who 6 00:00:30.120 --> 00:00:34.679 you are and why we all love you so much? Sure? Thanks for 7 00:00:34.719 --> 00:00:39.039 having me. Yeah, I'm Sam. I am a friend end developer, 8 00:00:39.560 --> 00:00:43.359 fell in love with it. I don't know eight years ago, but started 9 00:00:43.399 --> 00:00:49.039 out kind of in PHP. Perl actually was my first language, but then 10 00:00:49.119 --> 00:00:54.039 I fell in love with JavaScript and was doing Ember development for a long time. 11 00:00:54.600 --> 00:00:57.679 And these days I'm doing React and a bunch of other stuff in the 12 00:00:57.679 --> 00:01:03.200 React ecosystem and now courses I build you I with my business partner Ryan Toronto 13 00:01:03.319 --> 00:01:10.319 and make YouTube videos. So yeah, started in Pearl and lived to tell 14 00:01:10.359 --> 00:01:14.879 about it. There you go, I have I have blessed a reference in 15 00:01:15.000 --> 00:01:19.439 order to get an object in Pearl. I jumped on just to see and 16 00:01:19.959 --> 00:01:23.560 we had you on what back in twenty nineteen to talk about Ember Octane yeah, 17 00:01:23.599 --> 00:01:26.879 there you go. So I was still slinging a number in twenty nineteen, 18 00:01:27.040 --> 00:01:30.439 but I remember that. I'm not sure if AJ was there, but 19 00:01:32.760 --> 00:01:36.879 Charles, you and AJ. You guys are a big part of me my 20 00:01:36.959 --> 00:01:40.040 early learning in JavaScript. Actually, I used to listen to the jobscript ever 21 00:01:40.719 --> 00:01:46.799 religiously and I think AJ. Actually I learned about event delegation and JavaScript from 22 00:01:46.840 --> 00:01:49.599 AJ in one of the episodes, and I remember that one. Well. 23 00:01:49.719 --> 00:01:53.000 So, yeah, it's always awesome to be here with you guys. A 24 00:01:53.159 --> 00:01:59.000 good deal. Yeah, we're all old old. I've got the gray hairs 25 00:01:59.000 --> 00:02:01.079 and my beard to prove it. I know when I grow mine out, 26 00:02:01.200 --> 00:02:07.599 my wife's always like, I think those those of you have hair basically just 27 00:02:07.680 --> 00:02:16.520 shut up. Yeah. I shaved mine off because it's embarrassing, embarrassingly sparse. 28 00:02:16.599 --> 00:02:23.199 Soyo, So let's let's compare notes. When when when did you write 29 00:02:23.199 --> 00:02:29.199 your first line of JavaScript? I think it would have been like twenty thirteen, 30 00:02:30.080 --> 00:02:38.520 twenty, how about you, aj Um. I'm going to go probably 31 00:02:38.560 --> 00:02:42.719 closer to two thousand and eight, two thousand and nine, and you chuck. 32 00:02:44.080 --> 00:02:47.439 So, I have a question on this question because I was playing with 33 00:02:47.479 --> 00:02:53.719 web development in high school. But I wasn't really seriously writings JavaScript corre did 34 00:02:53.719 --> 00:02:58.479 that counts? That counts. So it was probably ninety six ninety seven, 35 00:02:58.639 --> 00:03:04.680 but like kidding into actual programming with actual you know, where I was running 36 00:03:04.680 --> 00:03:15.159 against maybe a prototype JS or jQuery. That was probably six. So I 37 00:03:15.240 --> 00:03:23.039 wrote a large scale front you know, single page application as it were back 38 00:03:23.120 --> 00:03:30.240 in ninety seven ninety eight about out Yeah, offline first, by the way, 39 00:03:30.599 --> 00:03:39.199 Wow, there you go. Ninety eight should have been impossible. Kind 40 00:03:39.199 --> 00:03:46.919 of no fat error functions back then. Eh nah, no closures, no 41 00:03:46.039 --> 00:03:52.400 try and catch, no closures, no try and catch. Wow, if 42 00:03:52.400 --> 00:03:54.439 you wanted to catch an error that you know you had window on error. 43 00:03:55.080 --> 00:03:59.800 There you go. I do everything I can to avoid write and try and 44 00:03:59.800 --> 00:04:05.759 cat. But yeah, crazy, that's crazy. Yeah, all right, 45 00:04:05.800 --> 00:04:09.879 well it'll we dive into our topic here. It sounds like there's a bit 46 00:04:09.919 --> 00:04:14.280 of a backstory here because Sam, you reached out to us. There's been 47 00:04:14.599 --> 00:04:16.319 some back and forth on Twitter. Do you kind of want to set the 48 00:04:16.319 --> 00:04:21.480 scene for us and then we can kind of fill in the gaps? Absolutely? 49 00:04:23.160 --> 00:04:28.279 Yeah, So you guys had a podcast. It looks like it was 50 00:04:28.319 --> 00:04:33.120 November fourteenth. It was called RPC resurgence from client server applications to next chest 51 00:04:33.600 --> 00:04:39.560 edit frameworks. And I think it was U three talking about it actually, 52 00:04:40.079 --> 00:04:44.360 and you guys mentioned the slide from my talk that got turned kind of into 53 00:04:44.360 --> 00:04:49.040 a meme. But you were talking about server components and server actions and you 54 00:04:49.040 --> 00:04:53.600 know, the new React features that kind of have been trickling out over the 55 00:04:53.680 --> 00:04:58.639 last year or so. And it was a really good conversation and there was 56 00:04:58.800 --> 00:05:00.519 just some stuff in there that I I thought would be fun to dive into 57 00:05:00.519 --> 00:05:06.079 a little bit more, and yeah, just unpack. So that was kind 58 00:05:06.079 --> 00:05:12.279 of the backstory, and I guess that if we wanted to kick it off, 59 00:05:13.560 --> 00:05:16.800 Dan was talking about had a really good kind of survey of like the 60 00:05:16.839 --> 00:05:21.120 history of r PC. Maybe it was when you were writing that that SPA 61 00:05:21.240 --> 00:05:28.000 in ninety seven, you know, and then you also I had a tweet 62 00:05:28.079 --> 00:05:35.199 about my slide and about server actions and you had kind of replied saying, 63 00:05:35.279 --> 00:05:40.160 like, we used to do this and we chose not to. So it's 64 00:05:41.160 --> 00:05:44.639 there and there was a reason we chose not to. So maybe that is 65 00:05:44.720 --> 00:05:48.439 one way we could kick off the conversation. Basically, our server actions just 66 00:05:48.560 --> 00:05:55.279 our PC. Are they the same thing? And if so then why should 67 00:05:55.319 --> 00:05:58.399 we not or why should we not do them or do them? And if 68 00:05:58.439 --> 00:06:03.240 not, how are they different? So that's kind of actually so it's a 69 00:06:03.319 --> 00:06:09.920 really interesting conversation for me because on the one hand, like you said, 70 00:06:10.680 --> 00:06:14.279 and it's funny, by the way, how we a minute ago spoke about 71 00:06:14.319 --> 00:06:18.160 the really old JavaScript and the early two thousands and late nineties, and now 72 00:06:18.279 --> 00:06:25.720 we've moved to the very latest form of JavaScript with server actions and reacts over 73 00:06:25.800 --> 00:06:30.959 components and whatnot. And again we're going back in time talking about our PC. 74 00:06:30.720 --> 00:06:34.879 So in a lot of as I was saying back in that episode, 75 00:06:35.399 --> 00:06:43.680 there are a lot of similarities, but there are also some very significant differences. 76 00:06:44.720 --> 00:06:58.120 The similarity is that you're using the and the function called syntax syntax exactly 77 00:06:58.560 --> 00:07:03.720 for over the wire community. So you're sending, you're performing an operation that 78 00:07:03.879 --> 00:07:10.879 looks like a function call. You're sending parameters like you would into a regular 79 00:07:10.920 --> 00:07:15.000 function, and you're getting a return value like you would from a function, 80 00:07:15.160 --> 00:07:20.439 but it's actually being sent over the wire, and it's type safe and whatnot. 81 00:07:20.879 --> 00:07:25.879 And that's exactly what our PC is, and that's what we're bringing back. 82 00:07:26.519 --> 00:07:30.959 At the same time, there are some really notable differences because back in 83 00:07:30.000 --> 00:07:33.720 the day, if you looked at systems that did this sort of thing back 84 00:07:33.759 --> 00:07:41.000 in the nineties and even more modern systems like gRPC, it's also about being 85 00:07:41.040 --> 00:07:49.079 able to communicate between different programming languages and different architectures, whereas OURPC that we're 86 00:07:49.079 --> 00:07:56.279 seeing in the context of React kind of lives and exists because everything is that 87 00:07:56.600 --> 00:08:01.000 is like this React app, and it's just trying to abstract the way the 88 00:08:01.120 --> 00:08:07.439 concept of some stuff running on the client and some stuff running on the servers. 89 00:08:07.920 --> 00:08:15.079 But it's not as a means of communicating between separate systems and even separate 90 00:08:15.120 --> 00:08:20.319 programming languages. It's more of the concept of doing everything within that same React 91 00:08:20.360 --> 00:08:26.879 app using typescript all the way, you know, up and down. So 92 00:08:26.040 --> 00:08:30.959 there are some like key differences here as well. So you know, I 93 00:08:31.040 --> 00:08:37.000 found that really interesting to see both the similarities and distinctions. But I think 94 00:08:37.360 --> 00:08:41.279 I might be pulling us forward maybe too quickly. Maybe it's worthwhile to talk 95 00:08:41.279 --> 00:08:46.480 again a little bit about what there was in your slide and why you think 96 00:08:48.000 --> 00:08:54.279 that maybe people got so hot and bothered about it. M Yeah, So 97 00:08:54.480 --> 00:09:03.159 the slide was showing a server action where you clicked create a bookmark and write 98 00:09:03.480 --> 00:09:09.879 in your component's JSX. It basically had an on click and then it the 99 00:09:09.919 --> 00:09:13.279 event handler had the used server directive, which meant that that code ran on 100 00:09:13.320 --> 00:09:18.360 the server and it used the SQL with the template tag literal to insert a 101 00:09:18.360 --> 00:09:22.759 new bookmark into the database. And folks, there was a couple of things 102 00:09:22.799 --> 00:09:28.639 that that kind of sparked it off. One was it looking like an SQL 103 00:09:28.879 --> 00:09:35.320 injection vector, which it wasn't because template tags and the SQL function sanitized that. 104 00:09:35.440 --> 00:09:39.919 But setting that aside, it was more about the separation of concerns, 105 00:09:41.279 --> 00:09:45.639 or the lack of separation and concerns from the perspective of those folks, and 106 00:09:45.679 --> 00:09:50.519 that's kind of what got the conversation going. So it was kind of like 107 00:09:50.759 --> 00:09:54.120 showing, you know, normally you have a button and like you were saying, 108 00:09:54.679 --> 00:10:00.000 the form or the button can make a post request to an API and 109 00:10:00.519 --> 00:10:05.360 over the network, and there's a separation there. It's like call the front 110 00:10:05.440 --> 00:10:07.200 end, calls the back end logic, and then the back end can be 111 00:10:07.240 --> 00:10:13.080 written in any programming language and it has can be using Ruban, rails or 112 00:10:13.159 --> 00:10:16.600 layer vel or node server, and there's a nice separation here. And we 113 00:10:16.639 --> 00:10:20.960 are used to thinking about front end and back end development separately because they have 114 00:10:22.039 --> 00:10:24.919 different constraints, they are in different environments, they have different responsibilities. That's 115 00:10:24.919 --> 00:10:31.120 a good thing, and so putting all these things together maybe is not the 116 00:10:31.120 --> 00:10:37.159 best idea. So that was that's kind of the argument and the criticism with 117 00:10:37.320 --> 00:10:43.200 the demo. So and you also mentioned that you used to work on PHP, 118 00:10:43.799 --> 00:10:46.960 and I think it brought PHP back to a lot of people, and 119 00:10:46.320 --> 00:10:52.759 not just PHP, but also ASP all these technologies that a lot of them 120 00:10:52.960 --> 00:11:03.320 intentionally or unintentionally mixed data access to the data layer alongside within the UI generation 121 00:11:03.639 --> 00:11:07.080 because you know, if you ignore for the for a minute, the fact 122 00:11:07.120 --> 00:11:11.279 that maybe you're also doing some JavaScript on the client side when you're doing PHP, 123 00:11:11.399 --> 00:11:16.759 you're actually constructing the UI. You know, it's all HTML templates, 124 00:11:16.000 --> 00:11:24.360 and people have had very bad vibes from the concept of mixing together within the 125 00:11:24.399 --> 00:11:31.519 same file the UI layer and also all the data access operations. Yeah, 126 00:11:31.559 --> 00:11:35.720 so one way to think about that is if you go back to when React 127 00:11:35.759 --> 00:11:41.639 first came out, a similar kind of criticism that was probably the most popular 128 00:11:41.679 --> 00:11:46.559 one levied against it was that it broke the separation to concerns and these folks 129 00:11:46.639 --> 00:11:52.320 had come from backgrounds where they worked on PHP apps with one big file and 130 00:11:52.360 --> 00:11:56.399 everything mixed together. It was hard to maintain those applications, and so separating 131 00:11:56.440 --> 00:12:01.159 it out made it easier to think about the views only respond for the view. 132 00:12:01.759 --> 00:12:05.039 It passed the data through a controller layer, and then the controller was 133 00:12:05.159 --> 00:12:09.480 narrow and sent the messages to the model layer. And so the model layer 134 00:12:09.600 --> 00:12:15.120 was this clean business logic area and the view was separate from that. And 135 00:12:15.200 --> 00:12:20.759 so that NBC architecture or whatever variation of it that the service side frameworks adopted, 136 00:12:20.080 --> 00:12:26.039 helped with maintainability. But when React came out, it made the argument 137 00:12:26.080 --> 00:12:30.360 that a lot of what we were doing with our front end code, especially 138 00:12:30.399 --> 00:12:35.639 as we work writing more sophisticated front ends with richer client side interactivity that needed 139 00:12:35.679 --> 00:12:41.360 access to data and needed to have logic and air handling and all this stuff, 140 00:12:41.120 --> 00:12:48.240 is that putting these things in separate files based on the technology needed for 141 00:12:48.320 --> 00:12:52.399 each part of the UI to work. So you have a jobscript file because 142 00:12:52.440 --> 00:12:56.919 you need the jobscript behavior to respond to events. You need a CSS file 143 00:12:56.000 --> 00:13:01.440 for the styling, and then you have your back and stuff to handle the 144 00:13:01.440 --> 00:13:09.200 network requests. One of the reacts original arguments was that these things are all 145 00:13:09.240 --> 00:13:13.759 related, and they're all needed for a piece of UI to work, and 146 00:13:13.799 --> 00:13:18.399 the React component was a new abstraction that enabled this because you could put a 147 00:13:18.440 --> 00:13:22.519 slice of the Java script, a slice of the CSS, a slice of 148 00:13:22.559 --> 00:13:28.240 the HTML markup that you needed in a single file so that you're dropped down, 149 00:13:28.960 --> 00:13:33.159 which had which required all three of those technologies for it to do everything 150 00:13:33.159 --> 00:13:39.240 it needed to do, would be co located. And so separation of concerns 151 00:13:39.399 --> 00:13:46.759 is a design principle that helps you organize code because one part of the code 152 00:13:46.840 --> 00:13:50.960 doesn't concern or doesn't share concerns with another. But reacts argument was that these 153 00:13:50.000 --> 00:13:54.320 all had the same concern They were all there in order to enable a drop 154 00:13:54.360 --> 00:13:58.559 down to work, and therefore they are related, they should be, and 155 00:13:58.639 --> 00:14:01.120 therefore the code should be co looking. And I think over time we've seen 156 00:14:01.120 --> 00:14:07.279 that that has proven to be has proven to be good, and in particular, 157 00:14:07.519 --> 00:14:13.159 the component as an abstraction has proved to help us organize this code that 158 00:14:13.279 --> 00:14:16.879 used to be in a single PHP file. Let's say, because we have 159 00:14:18.000 --> 00:14:20.559 the component and are able to break up our apps into components. The fact 160 00:14:20.600 --> 00:14:24.720 that they have multiple technologies inside of them. HTML, jobscript, and CSS 161 00:14:26.039 --> 00:14:28.600 is not a problem anymore because we have the component and we can define boundaries 162 00:14:28.639 --> 00:14:33.720 based on actual concern. The dropdown doesn't have to be in the same file 163 00:14:33.080 --> 00:14:37.200 as the header, even though both of those files have all three technologies. 164 00:14:37.639 --> 00:14:41.440 So yeah, I was just going to jump in and say a lot of 165 00:14:41.480 --> 00:14:46.679 people that I've talked to, when they talk about separation of concerns in some 166 00:14:46.759 --> 00:14:50.799 of these same ways, they try and bring up the single responsibility principle from 167 00:14:50.840 --> 00:14:54.039 solid and effectively say, yeah, so we don't want to mix all this 168 00:14:54.120 --> 00:15:00.480 stuff together. But I've talked to Bob Martin actually quite a bit, and 169 00:15:00.799 --> 00:15:05.360 when he talks about the single responsibility principle, it's you want to put the 170 00:15:05.399 --> 00:15:11.120 code together that's likely to change together exactly and drop down and you're looking at 171 00:15:11.279 --> 00:15:15.559 oh, we have to open the JavaScript. Oh, the JavaScript is adding 172 00:15:15.679 --> 00:15:20.200 an event listener to document dot Query element by class. Boom. Okay, 173 00:15:20.240 --> 00:15:22.480 let's go to the class or the HTML to find the element that has the 174 00:15:22.519 --> 00:15:26.279 class, and then we need to update the style of that. So let's 175 00:15:26.320 --> 00:15:30.080 go open the CSS file and find where that class is declared. If you're 176 00:15:30.080 --> 00:15:33.960 opening three file m Yeah, then those should be together. So that's a 177 00:15:33.000 --> 00:15:37.879 real simple way to think about it. So I agree with package structure. 178 00:15:37.960 --> 00:15:43.600 I mean that's like the whole architecture of Go is that things are organized by 179 00:15:43.960 --> 00:15:48.879 package by component, if you will. The problem that I have is that, 180 00:15:50.440 --> 00:15:56.440 Okay, yes, the three files change together, but they need to 181 00:15:56.440 --> 00:16:03.360 be edited by three different people. There needs to be the engineer that's editing 182 00:16:03.720 --> 00:16:11.279 the JavaScript, and then there needs to be the you know, designer that's 183 00:16:11.559 --> 00:16:18.279 editing the pixel information, and then there needs to be that crossover front end 184 00:16:18.279 --> 00:16:25.679 person that's editing the CSS and the HTML. So that's that's where And I 185 00:16:25.720 --> 00:16:30.759 think that trying to say, oh, a front end person whose primary concern 186 00:16:30.879 --> 00:16:36.080 is adapting design is also supposed to be a JavaScript engineer, to me, 187 00:16:36.200 --> 00:16:40.480 that just seems ludicrous, Like, what, what are the odds that someone 188 00:16:40.600 --> 00:16:48.000 who is great at adapting design is going to really be a great programmer. 189 00:16:48.960 --> 00:16:52.159 I think it's it's interesting because I think you just illustrated what is it, 190 00:16:52.200 --> 00:16:57.279 Conway's law, where the structure of the code reflects the structure of the team. 191 00:16:57.879 --> 00:17:03.119 And I do think that AJ is the issue that AJ had just highlighted 192 00:17:03.240 --> 00:17:11.119 is a real significant concern I I and I've seen teams stumble with it, 193 00:17:11.359 --> 00:17:17.640 like getting the design, the design into the components and whatnot. You know, 194 00:17:18.000 --> 00:17:22.079 various solutions have come up along the way. First of all, if 195 00:17:22.119 --> 00:17:26.160 you're using some sort of a design system, it kind of partially solves that 196 00:17:26.279 --> 00:17:33.880 issue for you. And and you know, there are only certain components where 197 00:17:33.920 --> 00:17:38.400 you really need to deal with with the details of the pixel placement, and 198 00:17:38.480 --> 00:17:45.160 those are created once by like you know, joint teams. There's also to 199 00:17:45.200 --> 00:17:49.839 an extent, tailwind exists to address UH and and and similar technologies or exists 200 00:17:49.839 --> 00:17:56.160 to address UH such issues to an extent. But and we're now even seeing 201 00:17:56.200 --> 00:18:00.839 AI being put to use in this context, you know, of taking designs 202 00:18:00.880 --> 00:18:07.039 out of FIGMA and and translating them into JSX that you know, developers could 203 00:18:07.200 --> 00:18:11.720 then embed within their components. But I totally agree that it's it's it's it's 204 00:18:11.759 --> 00:18:17.680 a problem. But I'm not sure that it's a problem that that components, 205 00:18:18.000 --> 00:18:22.680 you know, necessarily make worse than before. I mean, at the end 206 00:18:22.720 --> 00:18:26.559 of the day, you still had that issue of HTML and JavaScript and CSS 207 00:18:26.599 --> 00:18:33.200 needing to work together. Yeah, I think I've definitely heard of teams working 208 00:18:33.319 --> 00:18:37.920 more along the ways that AJ mentioned. You know some people and there's there's 209 00:18:37.960 --> 00:18:41.920 different expertise, right, someone who is an expert in CSS, you can't 210 00:18:41.920 --> 00:18:45.400 be an expert in all three things because there's people whose whole careers are just 211 00:18:45.400 --> 00:18:49.400 about HTML, the semantics of HML elements and all the attributes, you know, 212 00:18:49.440 --> 00:18:52.160 and a generalist doesn't isn't going to know as much as they do. 213 00:18:53.599 --> 00:19:03.039 But I think that those teams could still impose boundaries and maybe firewall off a 214 00:19:03.079 --> 00:19:07.680 developer from making changes to the design side because that suited them. But those 215 00:19:07.680 --> 00:19:12.559 boundaries should come from the organization and the coders and the designers, as opposed 216 00:19:12.599 --> 00:19:21.400 to being artificially imposed by the technology. So just because we can write HTMLCSS 217 00:19:21.400 --> 00:19:25.440 and JavaScript in the same file doesn't mean we have to. But if we 218 00:19:25.480 --> 00:19:29.039 could, if we had to write them all in separate files, then we 219 00:19:29.079 --> 00:19:32.559 could never write them together. And you know, someone who's starting out could 220 00:19:32.559 --> 00:19:37.599 never just make that change all in a single file when it's you know, 221 00:19:37.000 --> 00:19:41.480 for a lot of the parts that are simple, and they still change together. 222 00:19:41.599 --> 00:19:48.519 So I think that the fact that the technologies were artificially imposing those constraints 223 00:19:48.559 --> 00:19:52.759 on everyone was not the best way to come up with those boundaries. But 224 00:19:53.319 --> 00:19:57.599 we still see people, we still see teams having boundaries today between designs. 225 00:19:57.599 --> 00:20:02.000 For example, if you do have a design system of component library, you're 226 00:20:02.000 --> 00:20:06.920 developers who are experts on the JavaScript side and doing the actual UI programming, 227 00:20:07.319 --> 00:20:11.480 pull in the predesigned components from this design system, and those have a limited 228 00:20:11.519 --> 00:20:17.519 public interface that the design team controls so that the developers, you know, 229 00:20:17.799 --> 00:20:21.440 stay along with the brand and everything. So I think those boundaries can be 230 00:20:21.559 --> 00:20:25.640 important and can still be created by the teams, but I think it's good 231 00:20:25.680 --> 00:20:30.759 that they're they are derived from the team's needs and you know, instead of 232 00:20:30.799 --> 00:20:36.160 imposed by the technology. I'm going to agree with you on this. I 233 00:20:36.200 --> 00:20:41.599 think people don't talk about agile development anymore, but this was one of the 234 00:20:41.640 --> 00:20:45.720 thing, one of the ideas that came out of some of the different agile 235 00:20:45.720 --> 00:20:49.480 methodologies was that you know, you get together every so often and have a 236 00:20:49.519 --> 00:20:53.200 retrospective where you talk about what's working for you and what's not. And at 237 00:20:53.200 --> 00:20:56.640 that point, yeah, you can say, look, we're going to keep 238 00:20:56.759 --> 00:21:00.960 using JSX because it solves these problems for us. We're going to adjust our 239 00:21:00.960 --> 00:21:04.720 team structure or our team responsibilities or educate people who work with us or whatever 240 00:21:06.480 --> 00:21:10.599 to handle the other piece, right, and so then yeah, maybe you 241 00:21:10.759 --> 00:21:14.240 teach your designers, Look, this is how components go together, and so 242 00:21:14.400 --> 00:21:15.839 if you need to adjust styles, you're going to have to look in one 243 00:21:15.880 --> 00:21:22.160 of these places, right. But this is how we've structured the the the 244 00:21:22.200 --> 00:21:27.960 components that have an area of control, and so it should be relatively easy 245 00:21:29.000 --> 00:21:32.519 for you to figure out which component you're tweaking and then you can go and 246 00:21:32.680 --> 00:21:37.799 edit js X. By the way, I wanted to say that for me, 247 00:21:37.000 --> 00:21:45.960 the component model that you talked about works best in React when it's when 248 00:21:45.000 --> 00:21:52.480 it's coupled with the unidirectional data flow. When when you're when when the data 249 00:21:52.640 --> 00:21:57.920 flows properly, then components really work. When it doesn't, it becomes it 250 00:21:57.920 --> 00:22:03.480 can become a hot mess. Mm hmm. Yeah. I think that's definitely 251 00:22:03.480 --> 00:22:07.599 aligned with with the overall React philosophy. I mean, especially when it came 252 00:22:07.640 --> 00:22:11.240 on the scene, it talked a lot. They talked a lot about one 253 00:22:11.279 --> 00:22:18.119 way data flow because the prevailing frameworks at the time used two way bindings to 254 00:22:18.279 --> 00:22:21.839 try to get a lot of things done. So you just drop an input 255 00:22:21.920 --> 00:22:23.839 in, you bind into a model. You know, Ember was like this, 256 00:22:25.000 --> 00:22:27.319 Angular was like this. By the way, do you remember that Back 257 00:22:27.359 --> 00:22:32.960 when React came out, it actually had to weigh data band binding just to 258 00:22:33.039 --> 00:22:37.200 be on par with the other frameworks. It kind of had that mechanism built 259 00:22:37.240 --> 00:22:40.160 in, and then it kind of, you know, fell by the wayside 260 00:22:40.200 --> 00:22:44.319 over the years. I don't remember that. Actually, what was the syntax 261 00:22:44.400 --> 00:22:47.880 for that. I'm trying to remember. I'll find it. I'll try to 262 00:22:48.160 --> 00:22:52.359 google it while while we talk about the other stuff. But yeah, actually 263 00:22:52.519 --> 00:23:00.279 you could actually bind the field to a state. That was Angler's big selling 264 00:23:00.279 --> 00:23:02.720 point. They were kind of the big dog before React, so I can 265 00:23:02.799 --> 00:23:07.200 see why they did that. Yep, And you know that was it was. 266 00:23:07.279 --> 00:23:12.039 It was nice that the framework was able to keep your UI and sync 267 00:23:12.079 --> 00:23:17.599 with your state. But as it got more complex and I've got more complex, 268 00:23:17.640 --> 00:23:21.720 and there was two way bindings happening in lots of places that were triggering 269 00:23:21.720 --> 00:23:26.160 effects or other running other functions as a result of a change, it was 270 00:23:26.200 --> 00:23:29.440 hard to follow. So one way data one way data flow, I think 271 00:23:29.519 --> 00:23:34.039 is is a core principle of React. It's one of those like unwritten rules 272 00:23:34.279 --> 00:23:37.440 that you really need to understand and follow. If you're going to be successful. 273 00:23:37.480 --> 00:23:42.880 And interestingly, one way to think about server components and server actions is 274 00:23:42.920 --> 00:23:48.720 that it's bringing that one way data flow to the whole app across the network. 275 00:23:48.759 --> 00:23:51.839 That's actually how a lot of the core team has talked about it. 276 00:23:52.160 --> 00:23:56.839 And so going back to the slide that you showed, so we talked about 277 00:23:57.200 --> 00:24:03.720 like the two reasons that people were kind of I wouldn't say upset, Well 278 00:24:03.759 --> 00:24:07.680 maybe some of the words triggered, that's the best word. So one, 279 00:24:07.759 --> 00:24:11.519 like you said, this was escual injection, and we already spoke about why 280 00:24:11.559 --> 00:24:18.559 that wasn't really a concern because it looks like a an SQL string, but 281 00:24:18.720 --> 00:24:25.319 in actuality, it's actually a function call, so it can actually sanitize that 282 00:24:25.359 --> 00:24:29.599 string before it actually uses it, and that overcomes that issue because it's a 283 00:24:29.640 --> 00:24:34.960 templated string literal. But I think the bigger issue was the mixing of concerns, 284 00:24:36.240 --> 00:24:38.799 and I think you know, people will say, okay, like like 285 00:24:38.880 --> 00:24:44.160 you said, I'm encapsulating the relevant logic in the same component like this, 286 00:24:44.720 --> 00:24:51.000 but how do I now overcome the fact that I've got my SQL code spread 287 00:24:51.240 --> 00:24:56.799 all over the application and if I ever need to change anything in the structure 288 00:24:57.000 --> 00:25:03.519 of you know, my data layer that I basically need to go throughout my 289 00:25:03.759 --> 00:25:08.319 entire UI layer and fix it all up. Yeah, so kind of along 290 00:25:08.359 --> 00:25:15.200 the same lines that we were talking about with with the React component first, 291 00:25:15.759 --> 00:25:19.680 bringing HTML, CSS and JavaScript in the same file, you could kind of 292 00:25:19.720 --> 00:25:26.160 make the same argument there. Well, if every React component can define a 293 00:25:26.160 --> 00:25:29.960 new CSS rule and set a color, then we can just set a color 294 00:25:30.759 --> 00:25:33.759 and that way, that means that our colors are going to be spread all 295 00:25:33.799 --> 00:25:38.720 around. And so if we need to change a blue somewhere and we're using 296 00:25:38.720 --> 00:25:42.119 this hex code, now we have to open up all of our React components 297 00:25:42.119 --> 00:25:45.880 and change it there. But of course that's not what people do these days. 298 00:25:45.920 --> 00:25:51.480 They have abstraction layers and boundaries based on what changes, and so if 299 00:25:51.480 --> 00:25:56.160 every React component should use the same blue, then they reference it or import 300 00:25:56.200 --> 00:26:00.759 it from a module or in a design system or as a CS that's variable 301 00:26:00.079 --> 00:26:07.599 and the components reference that instead. So you know, libraries, frameworks, 302 00:26:07.640 --> 00:26:11.519 teams come up with different boundaries for their abstractions based on what things change. 303 00:26:12.599 --> 00:26:18.839 So that just because you can do have the full power of all technologies in 304 00:26:18.880 --> 00:26:26.400 the file doesn't mean that's how people write applications, and so the SQL example 305 00:26:26.440 --> 00:26:30.960 in my talk was because I was just using the simplest version to explain the 306 00:26:30.039 --> 00:26:36.839 actual server action API. But in a real app, you would do something 307 00:26:37.599 --> 00:26:41.880 that resembles how you would do it today, even if you weren't using server 308 00:26:41.960 --> 00:26:45.920 actions, and if you had traditional API end points. If you looked at 309 00:26:45.920 --> 00:26:49.240 your API end point handlers, whether they're a node or they're written in PHP 310 00:26:49.440 --> 00:26:55.720 or Ruby, those things also are not going to be calling directly to SQL, 311 00:26:55.799 --> 00:26:59.799 even though they can, right. They usually use a model layer like 312 00:27:00.119 --> 00:27:03.440 Rails. You have active model, so your endpoints, your controller methods, 313 00:27:03.440 --> 00:27:10.279 and a RAILS app are accessing the SQL database via the model layer via active 314 00:27:10.319 --> 00:27:14.599 record. And again that's an abstraction point, so that your controller can say, 315 00:27:14.720 --> 00:27:17.799 you know app dot user dot first name and first name can be a 316 00:27:17.799 --> 00:27:21.839 method on your model derived or a full name. It can be derived from 317 00:27:21.839 --> 00:27:25.599 your first name in last name. Feels the controllers aren't queering SQL directly and 318 00:27:25.640 --> 00:27:30.519 doing all that work together. So these different abstraction points and boundaries can and 319 00:27:30.599 --> 00:27:34.920 responsibilities. Right, that's the real single responsibility principle being applied. Because you 320 00:27:36.000 --> 00:27:40.079 have an area for your business logic and so The way that would look here 321 00:27:40.440 --> 00:27:45.079 is instead of just importing SQL and going directly to your database, you would 322 00:27:45.079 --> 00:27:48.359 import you know, a dB module or a model layer like a Prisma. 323 00:27:48.400 --> 00:27:53.119 You could import Prisma and call Prisma user create you know, or any other 324 00:27:53.119 --> 00:27:56.720 O r M you use, or any business layer, or you could even 325 00:27:56.799 --> 00:28:03.039 delegate to another service that's the HTP. So basically whatever you're doing with JS 326 00:28:03.119 --> 00:28:07.279 uses Prisma that way. Yep. Basically, however, you're writing your API 327 00:28:07.400 --> 00:28:14.079 end points today that your that your your SPA is already hitting. Whatever logic 328 00:28:14.160 --> 00:28:18.440 is in there is just it's going to be the same exact logic that you 329 00:28:18.480 --> 00:28:21.720 can now put inside of the component with the server action. So again, 330 00:28:21.799 --> 00:28:26.119 it's not about saying it's not it's not about making an argument about where your 331 00:28:26.119 --> 00:28:32.039 boundaries should or shouldn't be. It's about enabling the co location of code that 332 00:28:32.160 --> 00:28:36.599 changes together in a way that we couldn't before. So and the way that 333 00:28:36.680 --> 00:28:41.240 I like to think about it is basically saying that you know, at at 334 00:28:41.279 --> 00:28:45.480 the at the leaf node, let's say, of the component tree, Uh, 335 00:28:45.799 --> 00:28:55.160 you've got some client side interactive component and it captures some event and then 336 00:28:55.200 --> 00:29:00.200 it invokes a function that was probably passed to it as a prop so it 337 00:29:00.240 --> 00:29:07.839 effectively now bubbles up that interaction. Now, in the past, at some 338 00:29:07.079 --> 00:29:14.799 point you needed to explicitly send that across the wire into somewhere which wasn't React 339 00:29:14.880 --> 00:29:21.480 anymore. And now it bubbles all the way up to some component that actually 340 00:29:21.519 --> 00:29:27.880 does access the data, and somewhere along the lines of that bubbling it crosses 341 00:29:27.960 --> 00:29:33.799 the network divide. You don't necessarily need to think about it as explicitly as 342 00:29:33.839 --> 00:29:38.279 you did before. It feels like it's functions all the way up. It's 343 00:29:38.440 --> 00:29:44.640 just that at one point or another that function is an OURPC function that effectively 344 00:29:44.680 --> 00:29:48.000 sent the data over the wire. But it feels like it looks and feels 345 00:29:48.079 --> 00:29:53.240 like a regular function. Yeah, I think part of it is the is 346 00:29:53.240 --> 00:29:57.200 the ergonomics, which is what you guys talked a lot about in the last 347 00:29:57.240 --> 00:30:06.599 episode, because you can import a function and REACT can take care of serializing 348 00:30:06.680 --> 00:30:11.960 the arguments across the wire and de serializing them and giving you type information about 349 00:30:11.960 --> 00:30:15.759 that and errors as opposed to what we have to do today right, which 350 00:30:15.799 --> 00:30:21.119 is just right fetch put in a string to a URL and then pass along 351 00:30:21.160 --> 00:30:25.920 the data and the request body that's a very error prone process in a lot 352 00:30:25.920 --> 00:30:30.000 of ways. If you were to give me a React SPA and ask me 353 00:30:30.799 --> 00:30:34.480 to tell to show you all the ways that all of the user flows that 354 00:30:34.480 --> 00:30:38.799 that SPA can make network requests, it would be hard. I'd have to 355 00:30:38.880 --> 00:30:44.279 search for fetch or whatever abstraction around fetch exists. I'd have to look at 356 00:30:44.279 --> 00:30:48.880 the URLs that are hit and the data that is collected, because data has 357 00:30:48.880 --> 00:30:52.640 to be serialized across the wire, and everyone's kind of doing it their own 358 00:30:52.640 --> 00:30:57.920 way. Whereas a nice benefit from server actions is that, especially because if 359 00:30:57.960 --> 00:31:03.960 you're writing typescript, that they're traceable just like any other module is. So 360 00:31:03.640 --> 00:31:10.440 if we were looking at your SPA and you were using radicks drop down, 361 00:31:10.839 --> 00:31:15.559 you know, from Radix a UI library, and I asked you to find 362 00:31:15.640 --> 00:31:18.960 all the places you're using that, we could just do that very easily because 363 00:31:18.000 --> 00:31:22.240 we can just look at the module import graph. And so now you can 364 00:31:22.279 --> 00:31:25.440 do that as well. For kind of like what you're saying, the RPC 365 00:31:25.599 --> 00:31:30.519 calls have become first class modules in effect, and they take part in the 366 00:31:30.519 --> 00:31:36.559 module graph. So that's a nice DX win and it just takes a lot 367 00:31:36.559 --> 00:31:40.160 of the work off of our hands in terms of I think, in terms 368 00:31:40.240 --> 00:31:42.359 of how we are going to go about serializing things. There's kind of a 369 00:31:42.400 --> 00:31:48.880 standard now with form data and Action and React, and it just takes a 370 00:31:48.880 --> 00:31:52.759 lot of the work off. But I don't think that that's the most important 371 00:31:52.759 --> 00:31:59.359 part of this. I do not think it's about DX and it's not about 372 00:31:59.519 --> 00:32:05.359 elimiting some of that boiler plane. It actually is about bringing those back end 373 00:32:05.440 --> 00:32:10.319 pieces of functionality to inside of the component boundary. So and I took it 374 00:32:10.359 --> 00:32:15.599 a step further and saying yes, it's part of the component boundary, and 375 00:32:15.640 --> 00:32:21.160 it's also part of that uni directional data flow. It's it's the data flowing 376 00:32:21.279 --> 00:32:31.640 from React server components down into client components as props, and it's events bubbling 377 00:32:31.759 --> 00:32:40.279 up from client components to server side operations where the data is actually persisted as 378 00:32:40.359 --> 00:32:47.880 function calls. Right yep. And you know, I think something you said 379 00:32:47.920 --> 00:32:52.200 earlier is, you know, there's a lot of folks who have reacted spas, 380 00:32:52.599 --> 00:32:59.960 and spas are nice because you can deploy them and they can make network 381 00:33:00.079 --> 00:33:02.720 calls to any service, and those services can be written in any code because 382 00:33:02.720 --> 00:33:08.160 it's server side code. So a lot of companies have React apps that are 383 00:33:08.200 --> 00:33:14.599 talking to Python back ends and Ruby back ends and Php back ends. But 384 00:33:14.720 --> 00:33:17.319 now React is moving in a direction where they want us to write our back 385 00:33:17.440 --> 00:33:22.319 ends in JavaScript so that we can take advantage of things like server components and 386 00:33:22.359 --> 00:33:24.720 server actions. And I actually don't think that's the right way to think about 387 00:33:24.759 --> 00:33:32.759 this, because you don't need to write your entire services layer, your entire 388 00:33:32.799 --> 00:33:37.720 service layer in JavaScript to take the advance to read the benefits of the of 389 00:33:37.759 --> 00:33:44.119 the architecture. If you were deploying a front end, a React front end 390 00:33:44.160 --> 00:33:46.039 has a drop down that when you click on it, it makes an API 391 00:33:46.160 --> 00:33:52.640 request. It's true that that React app can run anywhere and you can just 392 00:33:52.720 --> 00:33:55.759 deploy it, but if someone were to use that code, someone else on 393 00:33:55.799 --> 00:34:00.400 the team use that code, the back end would have to be there as 394 00:34:00.440 --> 00:34:05.720 well. So if you were to deploy that somewhere, the back end API 395 00:34:05.839 --> 00:34:08.639 call that the front end makes has to also be there, right, It 396 00:34:08.679 --> 00:34:12.639 has to be running. It's basically you can think of it as a dependency. 397 00:34:13.000 --> 00:34:17.039 The front end has a dependency on the server side endpoints, and what 398 00:34:17.119 --> 00:34:22.000 server components and server actions let you do is bundle the dependency so that if 399 00:34:22.039 --> 00:34:27.119 I render a drop down and it needs to run some server side code. 400 00:34:28.239 --> 00:34:30.599 It's going to come along for the ride. It's a way to bundle the 401 00:34:30.639 --> 00:34:35.119 server side logic and code that needs to run just by rendering the component. 402 00:34:35.199 --> 00:34:38.199 And I think that's the most important aspect of server components and server actions. 403 00:34:42.519 --> 00:34:47.360 So what yours look? The reality is that what I'm seeing is that a 404 00:34:47.400 --> 00:34:57.960 lot of organizations out there have not necessarily embraced JavaScript or type script as the 405 00:34:58.199 --> 00:35:04.880 back end language. So in order so what you're, if I'm understanding correctly, 406 00:35:04.920 --> 00:35:07.880 what you're saying, is you're saying, you know, you can keep 407 00:35:07.920 --> 00:35:16.800 on using whatever programming language framework you like, but you will need some sort 408 00:35:16.880 --> 00:35:22.440 of you know, be it next jes or or Redwood or something along these 409 00:35:22.480 --> 00:35:24.719 lines as a kind of you know. The term I think these days is 410 00:35:24.800 --> 00:35:28.360 b f F. It's like a back end for front end. We used 411 00:35:28.360 --> 00:35:34.639 to call this thing middleware, but basically a translation layer on the server side 412 00:35:35.199 --> 00:35:42.519 that is the endpoint for the RPC calls and and and translates that into action 413 00:35:43.079 --> 00:35:49.079 access to various micro services written in whatever is that? Am I like? 414 00:35:49.280 --> 00:35:54.400 Presenting what you said correctly? That is one that's one way you could you 415 00:35:54.400 --> 00:36:00.800 could use it is to if you did have a running node server, then 416 00:36:00.159 --> 00:36:05.679 you could have that kind of BFF model where your React components can interact with 417 00:36:05.800 --> 00:36:10.960 other server side services at run time because you're running it. You can also 418 00:36:12.159 --> 00:36:15.280 use them at build time, and we can talk about that. But I 419 00:36:15.280 --> 00:36:21.000 think I think runtime is the more interesting, interesting idea, and maybe one 420 00:36:21.039 --> 00:36:28.159 way to think about this is think about integrating something like Stripe Checkout into your 421 00:36:28.159 --> 00:36:30.960 app. So let's just take Stripe right. It lets you charge your customers 422 00:36:31.639 --> 00:36:37.039 money for your products. Let's say I have a PHP app. How do 423 00:36:37.119 --> 00:36:42.199 I integrate Stripe with my PHP app that renders a React front end. Let's 424 00:36:42.199 --> 00:36:44.559 say I have a create React app. Well, they're going to give me 425 00:36:44.599 --> 00:36:47.400 like a Stripe Checkout React component that renders the front end, and then I 426 00:36:47.440 --> 00:36:54.320 need to import and use their SDKs in my PHP app so that when my 427 00:36:54.400 --> 00:37:00.599 React front end their component, their checkout component can talk to my pH server, 428 00:37:00.920 --> 00:37:05.079 which can then interact with stripes APIs right because we put that kind of 429 00:37:05.119 --> 00:37:09.039 logic web hooks and all the logic that needs to go between our trusted server 430 00:37:09.639 --> 00:37:14.920 and Stripes as a service, right with all the secret keys there that needs 431 00:37:14.960 --> 00:37:17.920 to run on our service. So point being, if you were going to 432 00:37:17.920 --> 00:37:22.920 add strip checkout to your site, there's a client side component and a server 433 00:37:22.039 --> 00:37:28.840 side component. Not there's a client side aspect and a server side aspect to 434 00:37:28.920 --> 00:37:34.239 getting a full integration of full stack integration with a service like Stripe. And 435 00:37:35.800 --> 00:37:39.880 the cool thing about server components and server actions is that you can imagine a 436 00:37:39.920 --> 00:37:50.760 world where that Stripe checkout component can include the server side logic and now you 437 00:37:50.800 --> 00:37:53.679 can just render it. It's going to do the same thing and talk to 438 00:37:53.760 --> 00:37:59.760 your trusted server, but the logic for integrating it, the surface area of 439 00:37:59.760 --> 00:38:02.400 that is much much smaller. Maybe you just give it an environment key and 440 00:38:02.440 --> 00:38:07.159 it's on your trusted service. That's safe. But now the back and forth 441 00:38:07.199 --> 00:38:10.079 communication, the airror handling, it's not left up to you to do that, 442 00:38:12.000 --> 00:38:15.000 to make fetch calls or to wire up a new endpoint to do that. 443 00:38:15.199 --> 00:38:17.519 They can bundle it inside and then, yes, if you have the 444 00:38:17.519 --> 00:38:22.280 capability to run node at request time, you could do certain levels of this. 445 00:38:22.639 --> 00:38:25.840 But even if you only could do it at build time, libraries could 446 00:38:25.840 --> 00:38:31.639 ship a lot more of the logic by including that service side piece. So 447 00:38:32.639 --> 00:38:37.880 that's kind of One way I think about this is that most librarries integrating with 448 00:38:37.920 --> 00:38:42.800 services is a great use case for this, and today to integrate with a 449 00:38:42.840 --> 00:38:45.480 service, we have to have a front end piece and a back end piece. 450 00:38:45.840 --> 00:38:50.480 The front end piece is really easy to use because React now has all 451 00:38:50.559 --> 00:38:53.400 the primitives on the client to let us do things like just render a stripe 452 00:38:53.480 --> 00:38:58.440 checkout, and that Stripe checkout component. That React component is going to do 453 00:38:58.480 --> 00:39:01.280 all sorts of things in our browser. Right. It can render drop downs 454 00:39:01.400 --> 00:39:07.000 that the user can do used to choose their credit card. It can use 455 00:39:07.039 --> 00:39:12.559 any browser API at wants to set up the UI. But React has all 456 00:39:12.599 --> 00:39:15.320 the primitives needed or strike to be able to bundle those things inside of the 457 00:39:15.320 --> 00:39:20.320 component boundary. Right because of use effect and use state, they can access 458 00:39:20.360 --> 00:39:23.519 the entire array of browser APIs and encapsulate that within the component. But we 459 00:39:23.559 --> 00:39:29.039 don't have a similar tool for the server. There's no way to encapsulate server 460 00:39:29.199 --> 00:39:32.360 arbitrary service side code inside of a component. But now with server actions and 461 00:39:32.400 --> 00:39:37.000 server components, there is so companies can companies, services, and even teams 462 00:39:37.360 --> 00:39:45.360 can start to bundle that in the same easy to use component interface and way 463 00:39:45.400 --> 00:39:50.159 to think about this is like it's a missing primitive that enables more powerful components 464 00:39:50.440 --> 00:39:53.559 in the same way use effect and use state. We're missing primitives that have 465 00:39:53.679 --> 00:39:59.800 enabled richer client components, bundle it and also compose it. One of the 466 00:39:59.840 --> 00:40:04.360 things exactly I really liked in your talk, which I highly recommend people watch 467 00:40:04.400 --> 00:40:08.480 if they haven't for some reason, is how you highlighted the fact that with 468 00:40:09.000 --> 00:40:14.159 server components, before you even got into server actions, you highlighted the fact 469 00:40:14.239 --> 00:40:23.480 that we're with server components, you can actually uh like uh, because they're 470 00:40:23.559 --> 00:40:32.159 components, you can I'm gonna leave clients exactly, Yeah, compose them together. 471 00:40:32.840 --> 00:40:37.360 Yes, exactly what we're looking for. Yeah, And that's another really 472 00:40:37.360 --> 00:40:42.920 important point. I just don't have enough faith in humanity. I just don't 473 00:40:42.920 --> 00:40:46.679 think that's smart. I just don't, you know, I don't don't think 474 00:40:46.679 --> 00:40:51.960 people are that smart. But but they don't need but they don't now know, 475 00:40:52.079 --> 00:40:57.239 they don't necessarily but they don't necessarily to be because if you if you 476 00:40:57.360 --> 00:41:02.559 build a component interface correct, Stripe did the work and build their component appropriately, 477 00:41:02.760 --> 00:41:08.000 and they should have the resources to do that. Then effectively you're just 478 00:41:08.599 --> 00:41:15.239 dropping a Stripe component into your code and you don't need to know anything about 479 00:41:15.599 --> 00:41:19.639 you know, what's what's it doing on the back end, what's it doing 480 00:41:19.679 --> 00:41:23.760 on the front end, because it's self contained. That's the goal, that's 481 00:41:23.840 --> 00:41:27.639 the dream. We are in an early stage. Obviously, this is a 482 00:41:27.719 --> 00:41:32.880 new technology, so right now it's we don't have technology. It's PHP. 483 00:41:34.119 --> 00:41:37.840 Like it's literally PHP. It's the exactly and thing we're gonna and we're gonna 484 00:41:37.880 --> 00:41:39.320 have we're gonna render this, and we're gonna render that, and we're gonna 485 00:41:39.360 --> 00:41:42.800 have some of the we're gonna have some of the server code in there, 486 00:41:42.800 --> 00:41:45.199 and we're gonna have some of the client code in there. Like yeah, 487 00:41:45.199 --> 00:41:49.239 but with PHP you were Yeah, but with PHP you were wearing But that's 488 00:41:49.360 --> 00:41:52.599 like the whole thing of object oriented like with PHP or you were wearing your 489 00:41:52.679 --> 00:41:59.800 underwear on the outside in the sense that the the the the the all the 490 00:42:00.039 --> 00:42:06.440 interface that connected to the front end part which was self contained to the back 491 00:42:06.519 --> 00:42:10.559 end through your your own code was all out there in the open, you 492 00:42:10.599 --> 00:42:16.760 know, all the end points, all the code that did the translation and 493 00:42:17.039 --> 00:42:22.840 stuff like that was not encapsulated. It was, yeah, this is what 494 00:42:22.880 --> 00:42:29.400 you can't do with PHP. You can't render something that fetches data a list 495 00:42:29.400 --> 00:42:30.639 of countries. Let's say you're doing a drop down you need to show all 496 00:42:30.639 --> 00:42:35.400 the countries, and the list of countries comes from your database. You render 497 00:42:35.519 --> 00:42:39.960 something that is a country list, and then inside of that you render a 498 00:42:40.039 --> 00:42:45.320 drop down component from a UI library like Radix, and you pass the countries 499 00:42:45.559 --> 00:42:51.639 from the country's component into the dropdown, and now you have a UI that 500 00:42:51.800 --> 00:42:57.320 is driven by dynamic data. But Radix is doing a dropdown that renders a 501 00:42:57.360 --> 00:43:02.039 portal and has virtual scrolling and keyboard shortcuts. So the way those things compose 502 00:43:02.119 --> 00:43:07.559 together is the novel aspect of this, and the way I think about what 503 00:43:07.679 --> 00:43:13.000 it will enable in the future is the same way I think about how React 504 00:43:13.079 --> 00:43:17.320 enabled libraries UI libraries like Radix to exist today. Because when React first came 505 00:43:17.360 --> 00:43:23.119 out, if you needed to render a dialogue, you might have to render 506 00:43:23.320 --> 00:43:27.599 the dialogue right here, but then in the root of your app you might 507 00:43:27.639 --> 00:43:30.199 have to do something like, oh, we need a separate div, right, 508 00:43:30.440 --> 00:43:35.280 we need a separate div outside of our tree, because when we render 509 00:43:35.320 --> 00:43:38.000 the dialogue, it can't be inside of the content. It has to kind 510 00:43:38.000 --> 00:43:42.119 of portal out so that it lays on top of it. So there was 511 00:43:42.159 --> 00:43:45.079 two steps to rendering a dialogue. You could you could render it, but 512 00:43:45.119 --> 00:43:46.880 then when it was open somehow you had to tell the route that it was 513 00:43:46.920 --> 00:43:52.000 open. And then you had to hook into this sibling div that was outside 514 00:43:52.039 --> 00:43:55.519 of our application so that the dialogue showed on top. Then React came out 515 00:43:55.519 --> 00:44:01.119 with portals. Portals solve that problem. So today if you install a dialogue 516 00:44:01.119 --> 00:44:07.880 component from a library like Radix or Reaction to the HTML portal spec, well, 517 00:44:08.480 --> 00:44:15.199 where where is it? Where did that come from? I frames, 518 00:44:15.199 --> 00:44:20.599 well, oh, is that a news spec that's coming or yes? Yes, 519 00:44:20.960 --> 00:44:23.320 So it's unfortunate that they called it portals because there actually is a thing 520 00:44:23.400 --> 00:44:30.920 called portals that basically it's but it's is it is? It's Is it still 521 00:44:30.920 --> 00:44:35.360 a thing? I think the whole portal thing was kind of deprecated somewhere along 522 00:44:35.400 --> 00:44:38.159 the way. I'm not sure that they're coming up with it, but with 523 00:44:38.360 --> 00:44:43.119 paskeys it probably won't matter because I think the primary use case of portals would 524 00:44:43.119 --> 00:44:46.039 have been single sign on and I think past are going but I think we 525 00:44:46.239 --> 00:44:51.079 digressed. Yeah, anyway, I'm just saying that it's not no relation to 526 00:44:51.119 --> 00:44:55.559 the portal spec. Okay, talking about related got What I'm saying is there's 527 00:44:55.599 --> 00:45:00.079 already a thing in HTML called a portal. We're not talking portals, okay, 528 00:45:00.159 --> 00:45:06.079 got you. So there's a feature in React called portals, and basically 529 00:45:06.119 --> 00:45:12.079 every UI framework has something like this now that does let you render a div 530 00:45:13.360 --> 00:45:17.199 elsewhere in the tree if you need to render it outside the tree of where 531 00:45:17.239 --> 00:45:21.199 you currently are. Right, if you're toggling something and you show and hide 532 00:45:21.199 --> 00:45:23.239 a paragraph and it moves the page, that's like what you want. That's 533 00:45:23.280 --> 00:45:28.639 fine. But for things like drop downs and dialogues, you want those to 534 00:45:28.639 --> 00:45:32.159 be able to render outside the current tree, so that that UI element is 535 00:45:32.199 --> 00:45:37.559 on top conceptually in the z index and it doesn't interfere with that. It 536 00:45:37.599 --> 00:45:42.079 sits on top of the existing content, right, And so there used to 537 00:45:42.079 --> 00:45:45.880 be a step to do that. So if I was an author of React 538 00:45:46.000 --> 00:45:52.679 modal library, I would say to use my modial library. First render capital 539 00:45:52.800 --> 00:45:55.719 M modal and put your content in there, but then also come here and 540 00:45:55.800 --> 00:46:01.239 render you know, modal root alongside your body tag, so that when the 541 00:46:01.239 --> 00:46:06.000 modal renders, it behaves like a well behaved modal. It renders on top 542 00:46:06.280 --> 00:46:10.239 and it doesn't none of the other contents of your page obscures it. But 543 00:46:10.320 --> 00:46:15.280 then React added portals is a feature to the library. It was a missing 544 00:46:15.360 --> 00:46:20.719 primitive which let which let you move that logic inside the component boundary. And 545 00:46:20.760 --> 00:46:24.119 so today if you install something like Radix or React Aria or headless UI, 546 00:46:24.760 --> 00:46:29.840 you get to render a modal wherever you want and behind the scenes, within 547 00:46:29.960 --> 00:46:32.679 that component boundary, it's going to set up a portal, it's going to 548 00:46:32.719 --> 00:46:37.159 set up context, it's going to set up effects that add keyboard listeners. 549 00:46:37.440 --> 00:46:42.480 All of the features of those UI components are contained in the modal in the 550 00:46:42.800 --> 00:46:46.960 component boundary, and using those components is the easiest part of working with React 551 00:46:47.000 --> 00:46:52.719 to day because you get to just render them their declarative they take props and 552 00:46:52.760 --> 00:46:54.880 you can conditionally render them in JSX. It's like the most base. It's 553 00:46:54.920 --> 00:46:58.920 just like rendering HTML elements, right because that's what it's based off of. 554 00:46:59.880 --> 00:47:04.480 The contain all this functionality, all the browser API is that they need inside 555 00:47:04.480 --> 00:47:07.639 of that component interface. That makes them easier to use. So exactly like 556 00:47:07.719 --> 00:47:14.599 Dan was saying, you can imagine a world where a CMS like contentful gives 557 00:47:14.639 --> 00:47:20.480 you an you know, a text field component and text field you can say 558 00:47:20.639 --> 00:47:23.239 what's a prop. The prop the model name is user and the idea is 559 00:47:23.280 --> 00:47:27.920 one two three. It's coming from the URL and that's it. You just 560 00:47:28.000 --> 00:47:30.880 drop that into your app and now it's going to be able to read the 561 00:47:30.960 --> 00:47:36.960 data from contentful on the server side. It'll populate it as you type and 562 00:47:37.000 --> 00:47:39.840 make changes. You could hit save and hitting save is going to run a 563 00:47:39.880 --> 00:47:45.920 server action that's bundled inside of the component by contentful and makes a right back 564 00:47:45.960 --> 00:47:50.519 to your CMS. And you didn't have to do that. One two step 565 00:47:50.559 --> 00:47:55.000 integration where to use contentful, you know text field. First, import the 566 00:47:55.039 --> 00:47:59.840 React component, add it to your front end, and second, create a 567 00:47:59.840 --> 00:48:05.280 new at API endpoint and integrate with our SDK on your server. Because all 568 00:48:05.280 --> 00:48:07.840 of it can be bundled in the component boundary, and it respects the data 569 00:48:07.840 --> 00:48:13.320 flow from your reactory, it can trigger rerenders, it can pass a draft 570 00:48:13.440 --> 00:48:17.440 version of the content to other React components. That's the composition story that we 571 00:48:17.519 --> 00:48:23.000 never had in PHP, and that's the goal of what these new primitives enable. 572 00:48:23.559 --> 00:48:27.679 So I've got two concerns. I'll start with the first one. The 573 00:48:27.719 --> 00:48:30.760 first one is the and I mentioned these concerns by the way, in that 574 00:48:30.800 --> 00:48:36.960 episode when we spoke about r PC, my first concern is the proliferation of 575 00:48:37.079 --> 00:48:45.039 endpoints or APIs like in the old days, because creating APIs was so explicit. 576 00:48:45.920 --> 00:48:52.960 We were very intentional about creating those API end points, and you know, 577 00:48:52.400 --> 00:49:00.559 we tried to minimize their number simply because they were not that easy to 578 00:49:00.639 --> 00:49:04.800 create. Uh. And we, you know, we, if we were 579 00:49:04.840 --> 00:49:09.239 doing things right, we use let's say, RESTful APIs or maybe graphic you 580 00:49:09.320 --> 00:49:15.559 well, but let's stick with RESTful APIs, and we modeled them according to 581 00:49:15.599 --> 00:49:19.960 the structure of our data. And and you know, we use them that 582 00:49:20.079 --> 00:49:22.800 way. These days, you know, an API is you know, as 583 00:49:22.840 --> 00:49:29.519 easy as creating a function. Uh. So it's likely that we're going to 584 00:49:29.599 --> 00:49:36.360 have a ton of internal APIs within our application and they are going to be 585 00:49:36.400 --> 00:49:40.800 wholly distinct from you know, the external APIs that we create. So maybe 586 00:49:40.840 --> 00:49:46.519 nobody is actually checking that the external API still properly work because we're not using 587 00:49:46.559 --> 00:49:52.079 them anymore. Uh. And that's that, you know, that kind of 588 00:49:52.559 --> 00:50:00.079 scares me, This this cavalier approach to endpoint creation. Yeah, I've I 589 00:50:00.079 --> 00:50:08.039 think I would kind of take the same thinking as when we were talking about 590 00:50:08.519 --> 00:50:16.800 how react originally brought HTML, CSS and JavaScript into the same file. Just 591 00:50:16.920 --> 00:50:24.039 because that enabled you to write any thing you wanted in a single file doesn't 592 00:50:24.079 --> 00:50:29.360 mean that that's what people end up doing, and they end up creating abstractions 593 00:50:29.360 --> 00:50:36.159 and boundaries for things like you know, design tokens for CSS so that we're 594 00:50:36.159 --> 00:50:42.440 not just writing CSS rules from crats in every component. I think it's reacts 595 00:50:42.519 --> 00:50:50.840 job to enable that low level colocation, and it's a frameworks job to impose 596 00:50:51.679 --> 00:50:55.639 healthy conventions and constraints. And the same way that Ruby is a programming language 597 00:50:57.000 --> 00:50:59.800 and you should be able to do anything you want with it, but you 598 00:50:59.840 --> 00:51:01.320 can can't do anything you want in Ruby on rails, or if you try, 599 00:51:01.320 --> 00:51:05.719 you're going to have a really bad time. So Ruby on Rails has 600 00:51:05.760 --> 00:51:08.719 guidelines and conventions that you follow that keep you on the happy path, that 601 00:51:08.840 --> 00:51:15.320 keep your app easy to maintain. You know, skinny skinny controllers fat models 602 00:51:15.480 --> 00:51:19.920 is a popular one right, Well, you know, it's kind of a 603 00:51:19.960 --> 00:51:23.840 best practice in rails apps to keep your controllers skinny. So if you have 604 00:51:23.880 --> 00:51:29.920 controller methods and they have a ton of logic, they check your user logged 605 00:51:29.960 --> 00:51:32.639 in and if there's permissions, and then they check if there's database entries, 606 00:51:32.880 --> 00:51:37.360 and you open up your controller method and it has all this logic that maybe 607 00:51:37.400 --> 00:51:40.519 really belongs in the model there, and you're missing like a new abstraction there. 608 00:51:40.840 --> 00:51:45.639 And you know, RAILS and DHH has done a really good job creating 609 00:51:45.679 --> 00:51:51.719 these conventions and guidelines to help people build maintainable applications. I think of React 610 00:51:51.800 --> 00:51:55.719 as a programming language for us, and I think of server actions and server 611 00:51:55.800 --> 00:52:00.719 components in the same way I think of feature client features like use effect and 612 00:52:01.239 --> 00:52:07.480 portals and context. They're primitives that enable kind of higher level abstractions, but 613 00:52:07.519 --> 00:52:12.960 they were missing pieces in the programming language. And now frameworks like Next and 614 00:52:13.079 --> 00:52:19.119 Remix can impose conventions and constraints for what developers need to do most of the 615 00:52:19.199 --> 00:52:22.679 time. And that's going to look like you know, maybe that looks like 616 00:52:23.920 --> 00:52:29.760 not going willy nilly and having you know, low level server actions anywhere, 617 00:52:29.840 --> 00:52:32.480 but instead you have something like what Remix has, which is, let's give 618 00:52:32.519 --> 00:52:37.079 each route a loader and an action. So now if you want to know 619 00:52:37.239 --> 00:52:42.119 which pages in your application talk to the network, you just know you look 620 00:52:42.119 --> 00:52:45.360 in the routees file and you just see a loader or an action, and 621 00:52:45.639 --> 00:52:50.239 you also know as a developer, every time I define a loader or an 622 00:52:50.280 --> 00:52:53.960 action, I need to secure it because that's an endpoint that's exposed to the 623 00:52:53.960 --> 00:52:59.079 public Internet. And that's what Remix developers know. And there's there's also you 624 00:52:59.079 --> 00:53:05.039 know, linters and guidelines in Remix that help you remember that. So I 625 00:53:05.079 --> 00:53:09.599 think the kinds of framework level app level concerns you're talking about, things like 626 00:53:09.599 --> 00:53:15.840 security and maintainability, I think those are the jobs for the frameworks, and 627 00:53:15.360 --> 00:53:20.239 I think people who are building an app with React should be using a framework 628 00:53:20.400 --> 00:53:22.159 for the same reason I think people who are building an app with Ruby should 629 00:53:22.159 --> 00:53:27.079 be using a framework like Rails and not starting from scratch with Ruby. I 630 00:53:27.119 --> 00:53:35.280 agree with everything you said, I do think that I'm not sure frameworks can 631 00:53:35.320 --> 00:53:40.639 take us all the way. I think that best practices will need to evolve 632 00:53:42.280 --> 00:53:50.320 beyond what frameworks can and should enforce, like maybe pulling the like we said 633 00:53:50.480 --> 00:53:55.159 we talked. I talked about the fact that you know, the events bubble 634 00:53:55.280 --> 00:54:00.400 up and now with the with sever actions they cross the wire somewhere along the 635 00:54:00.440 --> 00:54:07.760 way. Maybe you want to pull that point higher up within the component tree, 636 00:54:07.719 --> 00:54:14.800 like to the highest snow that still has the appropriate context. So that 637 00:54:15.039 --> 00:54:20.639 you kind of minimize the number of these kind of crossing points that you have. 638 00:54:21.199 --> 00:54:25.639 But I guess basically what remix does remix hoists the actions and loaders to 639 00:54:25.719 --> 00:54:30.519 the route level. So if you want to know how your React app is 640 00:54:30.559 --> 00:54:34.880 interacting with the network, you only have to look at the route file. 641 00:54:35.320 --> 00:54:38.840 You don't you don't have to worry about leave components deep down. Yeah, 642 00:54:38.199 --> 00:54:45.320 I totally get it. I actually think that reacts over components are intentionally not 643 00:54:45.599 --> 00:54:52.239 that uh and and the stripe and the stripe example that you got that you 644 00:54:52.320 --> 00:54:57.519 gave before is a perfect example because you know you can have the stripe component 645 00:54:57.639 --> 00:55:01.280 dropped in within the page and and then you know the router doesn't need to 646 00:55:01.320 --> 00:55:06.920 know anything about it. Yep, that's true. So it is true that 647 00:55:07.639 --> 00:55:12.079 if you are in a world of server components and server actions, part of 648 00:55:12.119 --> 00:55:17.360 the whole point is that any component can interact with the network's that's part of 649 00:55:17.360 --> 00:55:22.320 the benefit is that they're encapsulated inside of a component. And so yes, 650 00:55:22.360 --> 00:55:25.239 you could drop a stripe check out deep in the tree and now it's making 651 00:55:25.280 --> 00:55:30.639 a net requests that you don't that you didn't maybe intention like you didn't opt 652 00:55:30.639 --> 00:55:34.880 in too intentionally, I guess, but I still think there's a way for 653 00:55:34.960 --> 00:55:40.519 frameworks to kind of solve this problem. I see the possibility to create that 654 00:55:40.559 --> 00:55:47.280 Stripe component as something that React is trying to solve, and now we have 655 00:55:47.320 --> 00:55:51.639 the primitives for that to exist. And then the question of how best do 656 00:55:51.679 --> 00:55:55.800 we use these new powerful full stack components in a way that doesn't expose our 657 00:55:55.800 --> 00:56:01.199 apps to new security risks or keeps our apps maintained. That's going to be 658 00:56:01.199 --> 00:56:05.880 something that we figure out and that we get advice from with frameworks and different 659 00:56:05.920 --> 00:56:09.480 opinions. All I'm saying really is that it does make a lot of sense 660 00:56:09.599 --> 00:56:15.480 to tie the communication to the router in many cases because at the end of 661 00:56:15.480 --> 00:56:21.400 the day, in a lot of cases, it is the navigation that's all 662 00:56:21.440 --> 00:56:25.800 about changing your state. But as we say, as you know, that 663 00:56:25.960 --> 00:56:30.800 Stripe example shows that's not always the case. It's not just the case. 664 00:56:30.960 --> 00:56:35.679 So it's a very powerful model, but it shouldn't be the exclusive model. 665 00:56:36.000 --> 00:56:42.480 Yeah, and it's it's also not the exclusive one because another primitive that has 666 00:56:42.519 --> 00:56:46.960 recently come to react to suspense and suspense is all about coordinating things like data 667 00:56:47.000 --> 00:56:52.840 requests so you can drop in your Stripe checkout component, and let's say it 668 00:56:52.880 --> 00:56:57.039 has to load data first before actually charging someone, like just to render. 669 00:56:57.199 --> 00:57:00.280 It requires data, It requires the current user, It requires your catalog of 670 00:57:00.280 --> 00:57:05.920 products and the prices. So you just drop that in and you say, 671 00:57:05.920 --> 00:57:08.639 well, isn't that bad because my route already loads this other data. Now 672 00:57:08.639 --> 00:57:12.840 I'm dropping in a Stripe component deep down in my tree and it's going to 673 00:57:12.920 --> 00:57:15.679 do its own data fetching. How does that all work? This is where 674 00:57:15.719 --> 00:57:21.880 suspense comes in. Suspense lets the whole tree of components tell the parent, 675 00:57:22.239 --> 00:57:25.159 Hey, I'm not ready yet, and so I have this network request or 676 00:57:25.199 --> 00:57:31.119 this one. You can hoist them, but basically suspense lets you keep those 677 00:57:31.239 --> 00:57:37.559 at a choke point but still have the logic inside the component boundary so that 678 00:57:37.599 --> 00:57:40.360 you do get to do things like if a frameworks to decide we only want 679 00:57:40.360 --> 00:57:45.800 to load data on URL change, they can do that without breaking the encapsulation 680 00:57:45.559 --> 00:57:50.960 of the fact that the Stripe checkout component knows what it needs from Stripe. 681 00:57:51.760 --> 00:57:53.920 I just know that it needs to rent to load data, but I don't 682 00:57:53.920 --> 00:57:57.960 know how it gets that they can do that for me. Don't want and 683 00:57:58.000 --> 00:58:00.960 you don't want to be blocked on. It is the most important aspect I 684 00:58:01.039 --> 00:58:05.079 think at the end of the day. Well, sometimes you might sometimes you 685 00:58:05.159 --> 00:58:08.679 might want to block on getting every data loading component to fetch its data before 686 00:58:08.679 --> 00:58:12.719 it renders. Sometimes it might be below the fold and you want to let 687 00:58:12.760 --> 00:58:15.360 it render lazily with the loading spinner. And again suspense is the answer. 688 00:58:15.440 --> 00:58:20.480 That's the primitive that lets you have control over that. But but you still 689 00:58:20.519 --> 00:58:24.920 get the benefit of having the component have its own logic inside of the component 690 00:58:24.960 --> 00:58:30.639 boundary. So one point that I did want to mention is like another as 691 00:58:30.679 --> 00:58:34.519 a final point on my end. That's kind of related to RPC, which 692 00:58:34.960 --> 00:58:38.480 we've also brought up in that discussion. It wasn't a problem when RPC existed 693 00:58:38.559 --> 00:58:43.320 back in the in the in those days in the nineties, and it's and 694 00:58:43.360 --> 00:58:47.639 it's also a problem with with quote unquote RPC here within server actions as far 695 00:58:47.639 --> 00:58:58.360 as I can tell. And that's versiony that you're tying the version of your 696 00:58:58.400 --> 00:59:00.199 clients to your server. Now you might I think, hey, that's not 697 00:59:00.280 --> 00:59:04.639 a problem. I mean, you know, it's everything part of that single 698 00:59:05.159 --> 00:59:09.079 next JS app which I deploy as a whole. But you're not thinking about 699 00:59:09.079 --> 00:59:15.400 the situation where somebody keeps a client up and running while you're let's say, 700 00:59:15.440 --> 00:59:21.400 updating the server version. So you can get even if it's like all a 701 00:59:21.440 --> 00:59:24.840 part of that single app, you can get into version mismatches between the client 702 00:59:24.920 --> 00:59:31.679 and server fairly easily with long living client side web apps. Yes, and 703 00:59:31.679 --> 00:59:35.159 that's a problem. That's a problem that's existed, I guess, you know 704 00:59:35.639 --> 00:59:42.320 since since we started doing long lipped client development. Right, if you have 705 00:59:42.360 --> 00:59:47.360 a route split create React app and uh, you only load the first page, 706 00:59:47.400 --> 00:59:51.159 the person leaves it open for a day or two, and then they 707 00:59:51.239 --> 00:59:54.320 navigate, maybe they get a different version of the next chunk, or that 708 00:59:54.400 --> 00:59:58.880 chunk references a different version of something because there's been a deploy since then and 709 00:59:58.880 --> 01:00:02.440 they haven't refreshed. So I think that this this comes up a lot with 710 01:00:02.559 --> 01:00:07.519 long lived clients. But I think either React or next has some built in 711 01:00:07.639 --> 01:00:12.519 stuff. I think React has some built in stuff to kind of fingerprint the 712 01:00:12.599 --> 01:00:15.960 version of the server action that a particular client component may have gotten referenced to. 713 01:00:16.960 --> 01:00:20.840 I'd have to look more into that, but yeah, but that's definitely 714 01:00:20.880 --> 01:00:25.880 something. But then like API versioning on your rails app or PHPI exactly. 715 01:00:25.960 --> 01:00:30.840 It's like that, Yeah, you're using V one in your path instead of 716 01:00:30.920 --> 01:00:35.840 V two in your path. Yeah. But like when you're doing RESTful APIs, 717 01:00:35.880 --> 01:00:39.239 you're cognizant of that. You're very explicit about it, you know, 718 01:00:39.320 --> 01:00:45.159 and you can make sure to maintain backward compatibility at least one version back it's 719 01:00:45.199 --> 01:00:51.079 pretty straightforward when you're doing everything with RPC and it's intentionally made to look like 720 01:00:51.119 --> 01:00:54.559 a function called you know, you've added a parameter in the next version and 721 01:00:54.639 --> 01:01:00.840 it's suddenly incompatible. So yeah, I do know that there's I'd have to 722 01:01:00.880 --> 01:01:01.760 look I don't know, if the top of my head. I know that 723 01:01:01.840 --> 01:01:06.400 they have some solution to this, and I think they've thought about it, 724 01:01:06.719 --> 01:01:07.920 but I don't know off the top of my head what it is, but 725 01:01:08.000 --> 01:01:12.480 I think it's Yeah, I'd have to look more into it, but that's 726 01:01:12.480 --> 01:01:15.880 definitely something. The good The good news here though, is that between the 727 01:01:16.840 --> 01:01:22.119 cookie banner and the subscribe banner and the did you want more content banner, 728 01:01:22.760 --> 01:01:24.639 the people are probably never going to get to your site, so they'll probably 729 01:01:24.719 --> 01:01:31.400 never notice there. You go, all right, well, if we're going 730 01:01:31.400 --> 01:01:35.880 there's just one more thing, it's just one more thing in the list of 731 01:01:35.920 --> 01:01:39.280 things we're gonna go wrong on your site. Yeah, all right, I'm 732 01:01:39.280 --> 01:01:44.199 gonna push just to picks, uh Sam, if people want to follow you 733 01:01:44.320 --> 01:01:47.159 or check out build u I, what are all the links U r ls, 734 01:01:47.239 --> 01:01:52.039 et cetera. Yeah. Buildjoy dot com is our our site with our 735 01:01:52.199 --> 01:01:57.519 our courses. We've got a tailwind course, We've got a React Server Components 736 01:01:57.559 --> 01:02:02.360 course, and remix course. We really love building a remix and Frame of 737 01:02:02.440 --> 01:02:06.119 Motion which is a cool animation library, and this week we're putting out one 738 01:02:06.159 --> 01:02:08.480 on Radix, which is a UI component library, so nice. If you're 739 01:02:08.480 --> 01:02:12.239 into that, you can check that out. We have a newsletter buildow dot 740 01:02:12.280 --> 01:02:14.760 com slash Newsletter. It's a nice way to keep up with what we're doing. 741 01:02:14.800 --> 01:02:19.079 And then I'm on Twitter, so Sam's hellicof on Twitter. Awesome? 742 01:02:19.199 --> 01:02:21.880 All right, Well, let's go ahead and do our picks. Then we'll 743 01:02:21.880 --> 01:02:23.719 put all those links in the show notes and if you drop them in the 744 01:02:23.719 --> 01:02:28.320 little chat over here, we'll make sure they also wind up in the comments. 745 01:02:29.719 --> 01:02:32.159 AJ, what are your picks? So? Had I had some last 746 01:02:32.159 --> 01:02:36.960 week that I didn't Well? First, okay, so first and foremost, 747 01:02:37.480 --> 01:02:43.519 I'm going to pick this no back end. There was a movement called no 748 01:02:43.639 --> 01:02:49.840 back end that started, I don't know, one hundred years ago, something 749 01:02:49.920 --> 01:02:54.280 like that, twenty seventeen maybe, and I don't think that it has any 750 01:02:54.360 --> 01:03:04.480 chance of succeeding. But it's kind of the idea of if you just created 751 01:03:04.559 --> 01:03:10.039 standards for common actions, then you could have components for the back end. 752 01:03:10.280 --> 01:03:14.639 I mean essentially kind of what we're saying, but it would be API. 753 01:03:15.079 --> 01:03:19.079 It would just be a well standardized API, so that on your front end 754 01:03:19.440 --> 01:03:22.519 you didn't have to be aware of the back end. So same kind of 755 01:03:22.079 --> 01:03:29.480 effect. You'd be able to install a component for front end back end for 756 01:03:30.280 --> 01:03:36.599 lots of different things. And the person who put the site together has examples 757 01:03:36.679 --> 01:03:44.440 of like user accounts, generic data storage, emails, permission sharing, file 758 01:03:44.519 --> 01:03:49.480 conversion, payments, et cetera. Well, the only other one on there 759 01:03:49.559 --> 01:03:53.400 was make coffee or tea, but that's kind of a joke because of the 760 01:03:53.400 --> 01:04:00.239 the HTTP four nineteen. I am not a teapot. But anyway, so 761 01:04:01.000 --> 01:04:05.519 that that idea I really like. The reason that I say it'll never take 762 01:04:05.519 --> 01:04:13.840 hold is in comparison to this like RSD type thing, is that our entire 763 01:04:14.000 --> 01:04:18.000 foundation of the Internet is built on money that doesn't exist. It's low interest 764 01:04:18.079 --> 01:04:24.960 rate loans from the Federal Reserve that get pumped into investor money that get pumped 765 01:04:25.000 --> 01:04:30.760 into businesses that don't ever need to have a thought about being profitable that you 766 01:04:30.800 --> 01:04:34.280 know, the only thing that they need to do is to grow. And 767 01:04:34.360 --> 01:04:41.639 as long as we have that, the proprietary nature of creating a payment's API 768 01:04:41.760 --> 01:04:49.079 that only works with one provider is going to always trump over having a payment's 769 01:04:49.079 --> 01:04:56.440 API that any provider could use, because you're not trying to get profitability and 770 01:04:56.480 --> 01:05:01.039 then compete in a free market. You're trying to take advantage of government regulation 771 01:05:01.239 --> 01:05:08.280 and investor you know, hot potato to just create businesses that have growth and 772 01:05:08.920 --> 01:05:13.480 you want to trap in you know, this one little niche thing like what 773 01:05:13.559 --> 01:05:18.880 Stripe is done. You know, it's funny people Stripe in particular, like 774 01:05:20.000 --> 01:05:27.159 they have way better documentation and way prettier pictures on their website. Other than 775 01:05:27.199 --> 01:05:30.519 that, huh oh. Other than that, they kind of look like the 776 01:05:30.559 --> 01:05:35.360 other you know, fifteen different options that you can choose from, and it's 777 01:05:35.400 --> 01:05:40.679 like you put a credit card, you pass it like it's not anyway. 778 01:05:41.119 --> 01:05:45.280 So, but I like this idea, this is This would be my dream 779 01:05:45.639 --> 01:05:51.360 is that we use protocols rather than companies h and that it's a free and 780 01:05:51.400 --> 01:05:56.239 open market where the company that can provide the best is the one that wins, 781 01:05:56.360 --> 01:06:00.079 rather than the one that is able to use invest your money to create 782 01:06:00.159 --> 01:06:05.599 advertising hype to you know, create a proprietary API for something that should be 783 01:06:05.679 --> 01:06:14.280 relatively simple and open, like messaging or file storage or whatever. But old 784 01:06:14.320 --> 01:06:17.880 man yelling at Cloud's clouds aside, there were a couple of things that I 785 01:06:18.280 --> 01:06:23.559 had to pick. One was Home Assistant, which I just mentioned last time 786 01:06:23.559 --> 01:06:30.440 because we were really running low on time. But Home Assistant is, you 787 01:06:30.480 --> 01:06:33.679 know, it's also a bittersweet that it works at all, is what's really 788 01:06:33.719 --> 01:06:40.760 cool about it is definitely not end user friendly whatsoever. But if you are, 789 01:06:41.440 --> 01:06:45.599 you know, an it guy or a programmer, you can probably get 790 01:06:45.639 --> 01:06:48.719 it set up and get it working. And it doesn't really matter whether you 791 01:06:48.800 --> 01:06:54.599 buy the box where it's pre installed or not. It's it's basically like Apple 792 01:06:54.679 --> 01:07:01.320 Home Kit or Google Assistant or Alexa Home. It's it's that type of software, 793 01:07:01.559 --> 01:07:04.400 and in fact, it integrates with those things as well, so it 794 01:07:04.440 --> 01:07:09.800 can piggyback on those If you happen to buy a device that doesn't have a 795 01:07:09.800 --> 01:07:13.519 way to have a local API or zigb or z wave or any of the 796 01:07:13.559 --> 01:07:18.400 standards that have existed for you know, home assistance and smart home stuff before 797 01:07:19.039 --> 01:07:24.679 you know, the Google Assistant type of things kicked off. But anyway, 798 01:07:24.719 --> 01:07:29.400 I was, I was able to get it working. I got it wasn't 799 01:07:29.760 --> 01:07:32.880 it was. It took me a few hours to get my thermostat set up 800 01:07:32.960 --> 01:07:36.239 on a schedule, which is not I mean, I guess it would take 801 01:07:36.239 --> 01:07:40.480 that long if I just bought a thermostat at lows and then press the buttons 802 01:07:40.480 --> 01:07:46.039 on it going through the schedule menu thing. But anyway, it's it. 803 01:07:46.360 --> 01:07:50.519 It works like you can have cameras. I've got a camera connected to it 804 01:07:50.960 --> 01:07:56.960 that's using en viv, which is the open video standard for security cameras. 805 01:07:57.239 --> 01:08:01.199 I've got a thermostat via z Wave. I'm going to get a power device 806 01:08:02.159 --> 01:08:04.960 via Zigbie, and I think that that's probably going to be as easy to 807 01:08:05.039 --> 01:08:10.280 detect as z way. But it's all event based, and the problem is 808 01:08:10.320 --> 01:08:15.559 that it's like there's no modules for you know, here's your thermostat module. 809 01:08:15.679 --> 01:08:19.319 Everything is if this, then that style, So your thermostat has an event 810 01:08:19.520 --> 01:08:23.600 like temperature change that it fires off, and something can listen for that, 811 01:08:24.560 --> 01:08:29.199 and you can have a schedule system like a calendar for example, and say, 812 01:08:29.239 --> 01:08:31.479 okay, like nine am is an event, and what should the event 813 01:08:31.520 --> 01:08:36.560 do. Well, the event should trigger the thermostat to be set to seventy 814 01:08:36.600 --> 01:08:42.479 two degrees or you know that sort of thing. So wiring it up is 815 01:08:42.720 --> 01:08:46.920 very tedious, but at the end of the day, it works at all, 816 01:08:47.760 --> 01:08:54.920 which is better than the alternative of not having any way to do any 817 01:08:54.920 --> 01:08:59.239 sort of smart automation in your home without having Google and Amazon listening to every 818 01:08:59.239 --> 01:09:02.720 conversation that you have and knowing when your lights are on and what your power 819 01:09:02.760 --> 01:09:05.960 bill is likely to be and all that stuff that you know can just kind 820 01:09:05.960 --> 01:09:12.479 of feel creepy. So I'll pick Home Assistant. There's there's a couple of 821 01:09:12.520 --> 01:09:16.359 different sites. One is a Marriadroid, another is cloud Free, and those 822 01:09:16.359 --> 01:09:21.920 are sites that particularly sell things that are known to be compatible with Home Assistant, 823 01:09:23.479 --> 01:09:27.079 and probably some of the other ones like habitat and whatnot, And then 824 01:09:27.119 --> 01:09:30.119 a lot of the stuff you can get on Amazon, but it's very difficult 825 01:09:30.319 --> 01:09:33.439 to do any sort of search on Amazon and actually know whether or not the 826 01:09:33.479 --> 01:09:38.439 thing is actually going to be compatible, whereas if you use a Marriadroid or 827 01:09:38.560 --> 01:09:43.199 cloud Free. I mean it's you know, they're selling all of these DIY 828 01:09:43.279 --> 01:09:46.640 smart devices. You know that they're already pre flashed with the right firmware, 829 01:09:46.760 --> 01:09:48.960 or they're already you know, they're already kind of set up so that you 830 01:09:49.000 --> 01:09:55.279 can start using them in your home with the different sensors and relays and whatnot. 831 01:09:55.800 --> 01:09:58.319 One of the things I'm going to do is get my garage door opener 832 01:09:58.600 --> 01:10:00.720 so that I can open it and I don't have to worry about you know, 833 01:10:00.800 --> 01:10:03.359 some data leak happening, and then you know, anybody that gets the 834 01:10:03.399 --> 01:10:06.600 Amazon database being able to open my garage door or something like that. So 835 01:10:09.279 --> 01:10:12.680 yeah, it kind of a love hate relationship at this point. Love that 836 01:10:12.760 --> 01:10:15.760 it is allowing me to do things I couldn't otherwise do. Hate that it 837 01:10:15.880 --> 01:10:19.840 is extremely geared towards people that want to edit Yamel files and do if this, 838 01:10:19.960 --> 01:10:26.600 then that's just have a module for the thermostat or the garage door or 839 01:10:26.640 --> 01:10:30.199 you know whatever, like so, do you have a Docker container for your 840 01:10:30.239 --> 01:10:35.960 thermostat? So it does that, it does that automatically that's how it works. 841 01:10:36.000 --> 01:10:41.000 So you install Home Assistant. Hom assistant boots up the Docker container. 842 01:10:41.399 --> 01:10:44.720 So there probably is a Docker container for the z wave module. I don't 843 01:10:44.720 --> 01:10:46.640 know exactly how it does it. I just put it in a virtual machine 844 01:10:47.119 --> 01:10:51.279 and then pass through the USB device to the virtual machine and let it do 845 01:10:51.319 --> 01:10:55.319 its thing. And it's working, and I have it segmented, so I 846 01:10:55.319 --> 01:10:58.920 have a separate network in my home that's an IoT network where any of the 847 01:10:58.960 --> 01:11:02.560 home devices like our laptops and phones can access the IoT network, but the 848 01:11:02.600 --> 01:11:08.720 IoT network can't go back and access anything else. So it's it's like even 849 01:11:08.720 --> 01:11:13.119 if I buy some weird device that has hacked firmware on it, I'm relatively 850 01:11:13.119 --> 01:11:15.600 safe. Now. Obviously that's not something the average person is going to do, 851 01:11:15.920 --> 01:11:17.199 and even as a programmer, you're not going to have any idea how 852 01:11:17.239 --> 01:11:26.439 to do that. But the thing is, one day, one day, 853 01:11:26.479 --> 01:11:28.920 it'd be nice if we did have a box that could just do the stuff 854 01:11:28.920 --> 01:11:31.880 that's just plug and play. And some people have got to deal with this 855 01:11:32.079 --> 01:11:39.039 iteration of technology in order for us to get to that iteration of technology. 856 01:11:40.039 --> 01:11:46.079 And then one other thing that I will pick today is chaos walking. I 857 01:11:46.119 --> 01:11:48.359 did I mention that I watched the movie. I don't know. If I 858 01:11:48.399 --> 01:11:53.920 mentioned I watched the movie. Books are good, it is okay, Yeah, 859 01:11:53.960 --> 01:11:58.960 the books are good, and the movie was. You despaired on the 860 01:11:59.159 --> 01:12:02.920 quality of the movie. It's just it's a completely different story that happens to 861 01:12:02.960 --> 01:12:06.439 have a few of the same characters. So if you for anybody that watched 862 01:12:06.479 --> 01:12:13.159 Jurassic Park two and read Jurassic Park two, it's like it's the same kind 863 01:12:13.199 --> 01:12:15.840 of thing, Like, completely different story. A couple of the same characters, 864 01:12:15.880 --> 01:12:19.920 have the same names, and a couple of the same catchphrases. But 865 01:12:20.079 --> 01:12:24.520 other than the first thirty seconds of the movie, which is exactly the same 866 01:12:24.560 --> 01:12:29.079 as the book, a boy walking through the woods talking to himself, from 867 01:12:29.119 --> 01:12:32.439 that point forward, it's just a completely different story that has a few of 868 01:12:32.640 --> 01:12:36.439 similar motifs in it, you know, like Jurassic Park two was a completely 869 01:12:36.520 --> 01:12:42.319 different story, but it was also a story about dinosaurs. So that that's 870 01:12:42.479 --> 01:12:45.039 what I have to say about it. So, yes, if you did 871 01:12:45.079 --> 01:12:49.439 not like the movie of Chaos Walking, I highly encourage you. But you 872 01:12:49.600 --> 01:12:54.159 like the premise, like the trailer was interesting, the movie was terrible. 873 01:12:54.960 --> 01:12:59.840 Take a look at the books because the books have a coherent story and uh 874 01:13:00.399 --> 01:13:04.159 and it's really good and compelling and it is nothing like the movie other than 875 01:13:05.119 --> 01:13:09.920 there is a Mayor Prentice and there is a viola, and there is a 876 01:13:09.960 --> 01:13:15.800 Todd Hewett and they and they have noise. So that's those will be my 877 01:13:15.840 --> 01:13:18.720 picks for the for the day. All right, Dan, what are your 878 01:13:18.760 --> 01:13:25.319 picks? Okay? So my first pick is going to be a series that 879 01:13:25.359 --> 01:13:30.359 I'm currently watching on Netflix which is amazing, and it's called Blue Eye Samurai 880 01:13:31.079 --> 01:13:35.359 And if you've not watched it, you need to watch it now. It's 881 01:13:35.840 --> 01:13:45.039 an adult show, so there's some nudity and some sex and lots and lots 882 01:13:45.039 --> 01:13:54.479 of violence, but the artwork is amazing, the storytelling is excellent. I'm 883 01:13:54.600 --> 01:14:01.359 really enjoying it, so I highly recommend it. And it reminded me of 884 01:14:01.479 --> 01:14:09.800 another excellent story show about samurais which has a which is surprisingly which is really 885 01:14:09.800 --> 01:14:15.159 different but in some ways surprisingly similar, which is that old show Samurai Jack 886 01:14:15.920 --> 01:14:20.640 from you know, like originally like twenty something years ago and then with a 887 01:14:20.640 --> 01:14:29.760 few more episodes twelve years after that, which is also highly recommended if you 888 01:14:29.840 --> 01:14:33.439 can find it. But like I said, it's like a totally different character 889 01:14:33.520 --> 01:14:39.000 of show. It's mostly intended for like it's it's effectively, you know, 890 01:14:39.119 --> 01:14:42.840 a show for kids, but it's one of those shows for kids that adults 891 01:14:42.920 --> 01:14:48.239 enjoy more. But Blue Eye Samurai is definitely a show for adults, not 892 01:14:48.359 --> 01:14:54.680 for kids. So cool. Yeah, I highly recommend it. So those 893 01:14:54.720 --> 01:15:00.359 would be my pick for today. All Right, my picks are going to 894 01:15:00.399 --> 01:15:02.479 be a little bit heavy. So sam why don't you go ahead and go 895 01:15:02.560 --> 01:15:08.199 first? I was going to say Lessons in Chemistry. A bunch of people 896 01:15:08.199 --> 01:15:12.399 were recommending it to me. It's an Apple TV Plus show and it's really 897 01:15:12.399 --> 01:15:16.039 great. It's like a timepiece in the fifties, I guess, and that's 898 01:15:16.079 --> 01:15:20.479 about uh, chemistry and cooking, and it's just really well made. So 899 01:15:20.560 --> 01:15:27.399 I've been enjoying that. Cool. We started watching it and then we let 900 01:15:27.479 --> 01:15:33.760 our Apple TV subscription, you know, and we and we didn't renew because 901 01:15:34.039 --> 01:15:39.239 I just, you know, I can't abide by the fact that, you 902 01:15:39.279 --> 01:15:42.479 know, you pay for a subscription, but then you also need to pay 903 01:15:42.520 --> 01:15:46.000 for the movies that you want to watch, so you know, it's kind 904 01:15:46.000 --> 01:15:49.840 of annoying. Well, the other thing is is I think, are we 905 01:15:50.119 --> 01:15:56.399 quit paying our cable bill way back when when it was like a hundred bucks. 906 01:15:56.560 --> 01:16:00.720 But I think we're already halfway to there with all of our stream services, 907 01:16:00.239 --> 01:16:04.800 and so yeah, unless there's something really compelling to keep you there, 908 01:16:06.279 --> 01:16:10.239 you know, just pick the ones that have most of the stuff you want. 909 01:16:11.119 --> 01:16:13.600 Anyway, So I'm gonna get a little bit heavy. I'm gonna get 910 01:16:13.600 --> 01:16:16.840 a little bit personal as well, and I feel like I just want to 911 01:16:16.840 --> 01:16:21.600 talk about this for a minute, mostly so that if there's somebody in your 912 01:16:21.640 --> 01:16:27.640 life that you can help out, that you can do it. And if 913 01:16:28.039 --> 01:16:31.359 my talking about self harm or suicide will bother you, then turn off the 914 01:16:31.399 --> 01:16:36.000 episode at this point. So, right before Christmas, my brother, he's 915 01:16:36.000 --> 01:16:45.520 thirty two, attempted to end his life and he he bought himself a pistol 916 01:16:45.600 --> 01:16:50.159 and he wound up. He put the gun to his temple, but when 917 01:16:50.199 --> 01:16:54.520 he pulled the trigger, his hand moved forward and he shot his eyes instead 918 01:16:54.520 --> 01:16:57.960 of his brain. And so you know, we still have him here, 919 01:16:58.119 --> 01:17:00.079 is essentially what I'm saying. We kind of I got lucky in that sense, 920 01:17:00.119 --> 01:17:04.319 but he's blind now, and so a lot of the things that I've 921 01:17:04.319 --> 01:17:08.920 been talking about releasing, I haven't released because I've been dealing with family stuff 922 01:17:08.920 --> 01:17:13.800 for the last month that all said. What I really want to put forward 923 01:17:13.920 --> 01:17:17.119 is I've talked to so I'm involved in several other things, right, and 924 01:17:17.159 --> 01:17:20.199 so I've had to explain to some people in other areas, hey, look, 925 01:17:20.199 --> 01:17:24.359 this is what's going on, and so this is why I've been in 926 01:17:24.399 --> 01:17:28.159 the place that I have been and why i haven't done everything that I wanted 927 01:17:28.199 --> 01:17:31.560 to do for you. And you know, everybody's been very understanding. But 928 01:17:31.600 --> 01:17:36.880 the thing that really surprised me was that a lot of people basically said, 929 01:17:36.920 --> 01:17:41.279 my son or my brother, or my parent or my family member, my 930 01:17:41.359 --> 01:17:47.560 friend attempt at suicide and and so it's I'm finding that it's something that touches 931 01:17:47.600 --> 01:17:50.840 a lot more people than I thought. And you know, you kind of 932 01:17:50.840 --> 01:17:55.880 hear the statistics, but it never really hit home to me as much that 933 01:17:56.319 --> 01:18:00.000 you know, a lot of the people that I talked to have had experience 934 01:18:00.079 --> 01:18:03.279 with a friend or family member who has tried to end their life. And 935 01:18:03.359 --> 01:18:09.039 so a couple of things that I just want to put forward is, first 936 01:18:09.079 --> 01:18:11.279 of all, you know, my brother and I, I mean, we 937 01:18:11.319 --> 01:18:15.560 didn't have a bad relationship. We just didn't really ever talk all that often, 938 01:18:15.960 --> 01:18:17.640 and he was kind of a loner, and so you know, that 939 01:18:17.720 --> 01:18:21.560 kind of happened. But for one, if you haven't talked to somebody in 940 01:18:21.600 --> 01:18:27.000 a while, if you have a relationship with ship with somebody where you feel 941 01:18:27.039 --> 01:18:29.079 like or wish that it could be better, I mean, even if there's 942 01:18:29.159 --> 01:18:31.560 history there, right, because sometimes that's the way it is. Just take 943 01:18:31.600 --> 01:18:35.600 a minute and reach out and let them know. And then the other thing 944 01:18:35.680 --> 01:18:41.760 is is that what I'm finding. I actually went and talked to a therapist 945 01:18:41.880 --> 01:18:45.279 last week, you know, after i'd kind of got I set it up 946 01:18:45.279 --> 01:18:46.600 when I was really suffering and then you know, I had kind of gotten 947 01:18:46.600 --> 01:18:49.960 through most of my anger and frustration and things like that, which is why 948 01:18:50.000 --> 01:18:54.239 I haven't talked about it to this point because it's just been really hard for 949 01:18:54.279 --> 01:18:59.600 me to think through and deal with. But I'm feeling a lot better now 950 01:18:59.680 --> 01:19:03.439 about things and you know, just working toward how I can help him out. 951 01:19:03.479 --> 01:19:10.880 But a lot of people have that hole in their life, right and 952 01:19:11.159 --> 01:19:14.760 I'm not going to tell you how you feel it. I also haven't been 953 01:19:15.000 --> 01:19:18.600 that low in my life where I felt like I, you know, wanted 954 01:19:18.640 --> 01:19:24.279 to hurt myself. I also have a number of friends who have addiction issues, 955 01:19:24.319 --> 01:19:27.760 and they they tend to fill that same kind of hole with with some 956 01:19:27.880 --> 01:19:32.439 kind of an addiction, whether it's drugs or pornography or something else. But 957 01:19:32.640 --> 01:19:36.000 just realize that a lot of people out there really are suffering and they're going 958 01:19:36.039 --> 01:19:41.319 through a lot of things, and you need to figure out if you're feeling 959 01:19:41.319 --> 01:19:43.840 that hole, how to fill it. And for me, I feel it 960 01:19:43.880 --> 01:19:47.439 with my family and my faith and things like that, you know, and 961 01:19:47.520 --> 01:19:50.119 if you can't figure out how to feel it, then go talk to somebody, 962 01:19:50.119 --> 01:19:55.279 Go talk to a professional. The other thing is is that if you 963 01:19:55.840 --> 01:19:59.760 have a friend or family member that goes through something like this, just realizes 964 01:19:59.800 --> 01:20:02.199 that if affects you too, and that if you need help, you should 965 01:20:02.199 --> 01:20:06.000 also go talk to a professional, or go find a church leader or somebody 966 01:20:06.000 --> 01:20:12.319 that you can confide in and find that help. Because I can tell you 967 01:20:12.359 --> 01:20:15.199 I have a couple of really close friends. We get together every Wednesday night 968 01:20:15.239 --> 01:20:23.279 and play board games. And we played board games basically the week after and 969 01:20:23.279 --> 01:20:29.000 and just talked and it helped so much. Right, And they're not professionals, 970 01:20:29.000 --> 01:20:30.760 and they weren't telling me, oh, you should really do whatever, 971 01:20:30.880 --> 01:20:39.920 Right, but yeah, if you're experiencing this kind of anger or frustration because 972 01:20:39.920 --> 01:20:43.560 somebody did something, you know, whether it was personally directed at you or 973 01:20:43.560 --> 01:20:46.239 you're just angry that you know they did something like what my brother did, 974 01:20:47.720 --> 01:20:54.000 go find somebody to talk to and go find that help. Humans are social 975 01:20:54.039 --> 01:21:00.159 creatures. We need that human interaction. But I totally agree with what you 976 01:21:00.239 --> 01:21:03.960 said that you know, find somebody to talk to. But if you really 977 01:21:04.000 --> 01:21:09.439 need professional help, then you know, go for it. Don't don't you 978 01:21:09.439 --> 01:21:13.439 know, don't assume that just talking to a friend is a sufficient substitute, 979 01:21:14.520 --> 01:21:17.600 right exactly. So, I mean, I don't know if I'm giving any 980 01:21:17.720 --> 01:21:21.800 specific or concrete way of knowing where you're at some of the stuff, and 981 01:21:21.840 --> 01:21:26.119 a lot of times it's really hard to figure out, and you know, 982 01:21:26.439 --> 01:21:30.439 one day is great and the other the next day it's not. But just 983 01:21:30.439 --> 01:21:34.159 just be aware and you know, look out for other people, the people 984 01:21:34.239 --> 01:21:38.199 you care about in your life, and look out for yourself. I think 985 01:21:38.239 --> 01:21:40.880 that's all I really have to say about this, But it's just kind of 986 01:21:40.920 --> 01:21:45.560 been it's it's something that I've really wanted to just tell people to just think 987 01:21:45.600 --> 01:21:50.760 about. All right, we'll go ahead and wrap it up there. Sorry 988 01:21:50.760 --> 01:21:55.720 to get all deep and thanks for sharing man. I'm sorry you're going through 989 01:21:55.760 --> 01:22:00.199 that. That's rough. Yeah, I appreciate you sharing man. That's you 990 01:22:00.199 --> 01:22:03.640 be thinking about your family for sure. Yeah. Thanks. All right, 991 01:22:03.720 --> 01:22:11.640 well we'll wrap it up here. Till next time, folks, Max out h