WEBVTT 1 00:00:06.200 --> 00:00:10.679 Hello, everybody, Welcome to another thrilling episode of JavaScript Jabber. I am 2 00:00:10.759 --> 00:00:13.679 Steve Edwards, the host with the face for radio and the voice for being 3 00:00:13.679 --> 00:00:18.079 of mine. But i'm your host today with me on the panel, coming 4 00:00:18.239 --> 00:00:21.839 from across the pond in Tel avivvisuel As, mister Dan, how are you 5 00:00:21.839 --> 00:00:25.960 doing, Dan, I'm doing well. I'm doing fine. Thank you? 6 00:00:26.640 --> 00:00:29.879 Good are you? Are you my opposite today? Weatherwise, we were getting 7 00:00:29.879 --> 00:00:33.000 snow on the ground here. Let's put it this way. I'm sitting in 8 00:00:33.039 --> 00:00:37.439 front of an open window in a T shirts and sweatshirt. I feel your 9 00:00:37.479 --> 00:00:41.079 pain, I really do. Also with us on the panels, mister A. 10 00:00:41.240 --> 00:00:45.840 J. O'Neill from the purple background, Harry you aj yo, yo 11 00:00:45.920 --> 00:00:49.280 yo, coming at your life from under the weather, under the weather. 12 00:00:49.840 --> 00:00:57.799 Oh sorry to hear that, yeah, and I'll feel better tomorrow. Our 13 00:00:57.920 --> 00:01:00.799 very special guests, also from the tele you area, mister Shaye Davidson. 14 00:01:00.880 --> 00:01:04.920 How you doing, Shay? Hello, Thanks for having me. We are 15 00:01:04.959 --> 00:01:11.159 glad to have you here. We are anticipating, shall we say, quite 16 00:01:11.200 --> 00:01:17.359 the reaction from this one. And you'll understand as soon as as soon as 17 00:01:17.400 --> 00:01:22.760 you hear this, thank you, Thank you, hey, folks, this 18 00:01:22.799 --> 00:01:25.719 is Charles Maxwell. I've been talking to whole bunch of people that want to 19 00:01:26.200 --> 00:01:30.400 update their resume and find a better job, and I figure, well, 20 00:01:30.439 --> 00:01:33.319 why not just share my resume. So you if you go to top endevs 21 00:01:33.359 --> 00:01:38.200 dot com slash resume, enter your name and email address, then you'll get 22 00:01:38.239 --> 00:01:42.719 a copy of the resume that I use, that I've used through freelancing through 23 00:01:42.120 --> 00:01:46.480 most of my career, as I've kind of refined it and tweaked it to 24 00:01:46.519 --> 00:01:49.000 get me the jobs that I want. Like I said, top endevs dot 25 00:01:49.000 --> 00:01:53.359 com slash resume, we'll get you that, and you can just kind of 26 00:01:53.439 --> 00:01:57.359 use the formatting. It comes in word and pages formats and you can just 27 00:01:57.560 --> 00:02:02.640 fill it in from there. All. So, Shay is here by Dan's 28 00:02:02.680 --> 00:02:07.560 invite, as she wrote some very disparaging tweets. No, I'm kidding, 29 00:02:07.719 --> 00:02:13.439 just some tweets with opinions on React server components and things that I am not 30 00:02:13.560 --> 00:02:15.319 very knowledgeable on. So I'm going to let Dan take it from here. 31 00:02:16.400 --> 00:02:22.080 Well, you know, React server components is a totally non controversial issue. 32 00:02:22.800 --> 00:02:29.199 I'm just kidding. It seems that that it's got like the entire React community 33 00:02:29.360 --> 00:02:32.879 still up in arms. Ever since they were introduced, we've had we've discussed 34 00:02:32.879 --> 00:02:38.479 them on several episodes. Obviously, we've had Dan Abramov on the show. 35 00:02:39.039 --> 00:02:46.439 More recently we had another episode about it. Let me, I forget the 36 00:02:46.520 --> 00:02:52.479 name of our guests. I'll say it in in a minute. And I 37 00:02:52.520 --> 00:02:57.960 also spoke about them, and and in general it's you know, a lot 38 00:02:58.000 --> 00:03:06.199 of people are talking about them because oh yeah with Sam Selikov, who did 39 00:03:06.280 --> 00:03:15.479 that really controversial tweet while back where he actually inlined squel query inside the React 40 00:03:15.479 --> 00:03:21.560 component, like the kind of reminiscent of the good old PHP days and it 41 00:03:21.719 --> 00:03:24.840 and it got the entire React community really up in arms. So so it's 42 00:03:24.840 --> 00:03:32.080 a pretty controversial topic, I guess. And Shy did his uh his part 43 00:03:32.240 --> 00:03:38.639 of you know, increasing that controversy. So I thought that, you know, 44 00:03:38.159 --> 00:03:45.360 having him on as an actual person who actually try to use this technology 45 00:03:46.000 --> 00:03:51.039 rather than you know, somebody who's either promoting it or intentionally disparaging it, 46 00:03:51.680 --> 00:03:57.039 I thought would be like an interesting change of pace. And also the scenario 47 00:03:57.080 --> 00:04:00.479 in which Shi that you used it is also I thought, really interesting, 48 00:04:00.960 --> 00:04:04.960 So I think it's also worth talking about. So yeah, take it away, 49 00:04:04.960 --> 00:04:11.280 introduce yourself, please, thank you. So I'm Shay Davidson. I'm 50 00:04:11.280 --> 00:04:15.759 thirty nine at a birthday last week. The birthday, my day was your 51 00:04:15.759 --> 00:04:20.839 birthday. It was a Sunday. Okay, the twenty eighth is the perfect 52 00:04:20.879 --> 00:04:30.120 day, but that was mine of course enough. I've been developing things since 53 00:04:30.160 --> 00:04:35.959 I remember myself started my career as a flash game developer. Actually won the 54 00:04:36.000 --> 00:04:40.319 best Israeli in the game in twenty ten, but did nothing with that, 55 00:04:42.160 --> 00:04:48.399 yeah, unfortunately. And then I started my actual career as a web developer 56 00:04:48.439 --> 00:04:55.879 of eBay. Then with PayPal, worked in a paralttle thing with Cancy Dodd, 57 00:04:55.959 --> 00:05:01.360 by the way, and then after my team got was I joined Lemonad 58 00:05:01.399 --> 00:05:08.240 and I'm there for five years already and a principal engineered there, and until 59 00:05:08.240 --> 00:05:13.800 recently I was the funt and lead in the company, and now I'm leading 60 00:05:13.839 --> 00:05:18.399 all kinds of technical initiatives. And so both of us are kind of in 61 00:05:18.480 --> 00:05:24.040 insure tech. Because I wor I work at Next Insurance. We are. 62 00:05:25.800 --> 00:05:29.120 It's it's funny. I never thought I'd be in insurance. And also my 63 00:05:29.240 --> 00:05:32.439 wife is a legal counsel in an insurance company in Israel, and so it's 64 00:05:32.600 --> 00:05:38.639 we have insurance and I was like, no, I want to develop games. 65 00:05:38.680 --> 00:05:42.240 I don't want to be in an insurance And funnily enough, my first 66 00:05:42.360 --> 00:05:46.519 job, my first professional job as a developer, was in a gaming company 67 00:05:46.519 --> 00:05:48.920 as well, but that was a really long time ago. A lot of 68 00:05:48.920 --> 00:05:55.639 people started, I mean a lot of people I know went into development just 69 00:05:55.680 --> 00:06:00.600 because they want to develop games. But now nobody that. Yeah. Funnily 70 00:06:00.720 --> 00:06:04.759 enough, I've never been a big gamer. I'm not really big into actually 71 00:06:04.800 --> 00:06:10.639 playing games, but actually programming games that's a lot of fun and something that 72 00:06:10.680 --> 00:06:17.560 I really enjoyed doing. It's amazing and it's probably the best track in development 73 00:06:18.199 --> 00:06:21.240 or coding that you can ever experience. But I can talk about it later. 74 00:06:23.319 --> 00:06:29.160 Let me start sharing the story. So a few months ago, I 75 00:06:29.240 --> 00:06:32.720 was in a family trip in Europe and we were hearing a podcast in during 76 00:06:32.720 --> 00:06:39.759 a car ride, and we listened to the history of computer games, and 77 00:06:39.439 --> 00:06:46.480 the narrator talked about games in the seventies textual adventures or months where you could 78 00:06:46.519 --> 00:06:53.240 input text and the game would reply to you what you're seeing or what you 79 00:06:53.240 --> 00:06:57.399 can act upon, etc. And my daughter, which was almost nine back 80 00:06:57.439 --> 00:07:00.879 then, was very excited, and the first thing she said was Daddy, 81 00:07:01.199 --> 00:07:05.759 did we have something like this in Abril? And I said maybe, And 82 00:07:06.079 --> 00:07:10.800 we went back after the vacation and I search on Google and I couldn't find 83 00:07:10.839 --> 00:07:15.639 anything in abroom and in the age of A, I said, okay, 84 00:07:15.079 --> 00:07:20.600 that should be pretty easy to develop, because I mean, you can even 85 00:07:20.639 --> 00:07:26.920 go to GPT today or Claude, which is even better in enbroom and write 86 00:07:26.920 --> 00:07:30.079 a prompt, write me a story about it. Imagine I'm a character in 87 00:07:30.120 --> 00:07:34.439 this world, and let's try to build a story together. And I mean 88 00:07:35.399 --> 00:07:40.600 it works pretty well. I mean I sometimes I read stories bet time stories 89 00:07:40.600 --> 00:07:44.759 for my kids, just using the problem from GPT, et cetera. That 90 00:07:44.839 --> 00:07:51.279 I wanted to create a very unique experience that feels unique and feels like a 91 00:07:51.319 --> 00:07:56.120 gift, something that she can be proud up that she received and she can 92 00:07:56.120 --> 00:08:00.319 play with and looks pretty nice, and I don't didn't want to just center 93 00:08:00.399 --> 00:08:05.600 the link to open AI website and you can do whatever she wants. And 94 00:08:05.720 --> 00:08:09.800 so I started working on a project called Cepuela, which is again a simple 95 00:08:11.560 --> 00:08:18.639 application, a simple reactiplication built on top of open AI APIs and just looks 96 00:08:18.199 --> 00:08:22.759 way way better. And if I can interrupt you for a second though, 97 00:08:24.680 --> 00:08:31.399 if what you were doing is pure text based adventures, why do you actually 98 00:08:31.439 --> 00:08:39.120 even need react? How it's text? You're right, But the thing is 99 00:08:39.159 --> 00:08:45.600 that that was like we've been using next JS in lamonades for quite some time. 100 00:08:45.720 --> 00:08:48.000 But I mean, as the front and leading lemonade, I said, 101 00:08:48.000 --> 00:08:52.240 Okay, I know all this general around the reacts of the components and next 102 00:08:52.279 --> 00:08:58.720 fourteen and then the move from the page router next to the app router or 103 00:08:58.879 --> 00:09:03.080 was vice versa. But and I said, I don't know anything about it. 104 00:09:03.840 --> 00:09:09.840 Let's use this opportunity to also experience some new technologies. And of course 105 00:09:09.879 --> 00:09:13.039 if I'm using next, I need to use reacts, and I wanted to 106 00:09:13.159 --> 00:09:16.559 experience with that, considering it was a simpler it is a simple application. 107 00:09:18.240 --> 00:09:20.759 We have only I have only three pages. I have some ABI calls to 108 00:09:22.360 --> 00:09:28.240 get to open AI and get the new follow adventure. Yeah, I thought 109 00:09:28.279 --> 00:09:35.399 that was a reasonable excuse to start using reacting next ys. So it's kind 110 00:09:35.399 --> 00:09:39.120 of like that thing about developers wanting to blog. So the first step in 111 00:09:39.399 --> 00:09:46.759 blogging is creating a blogging platform. Yeah, so you you kind of use 112 00:09:46.840 --> 00:09:52.279 this opportunity to learn about the new REACT well, in new next Yes, 113 00:09:52.440 --> 00:09:56.279 well cool. I mean, you know, if you're going to do a 114 00:09:56.360 --> 00:09:58.000 hobby, you might as well get the most out of it, for sure. 115 00:09:58.799 --> 00:10:03.159 I I thought that it's important for me, as somebody who is in 116 00:10:03.200 --> 00:10:07.600 a leading position in a company, to first be able to reason about this 117 00:10:07.919 --> 00:10:11.320 when people are approached to me and say, what about why don't we upgrade 118 00:10:11.320 --> 00:10:15.679 our next or what about sother components? Do you have an opportunity to use 119 00:10:15.720 --> 00:10:16.840 them in our code? And I said, well, I don't have any 120 00:10:16.879 --> 00:10:22.120 experience with it. I don't have any viable use case for this right now 121 00:10:22.200 --> 00:10:24.320 in our business plan, and in order to have an opinion about that, 122 00:10:26.399 --> 00:10:31.960 and I might need to experience it directly. And that was a great opportunity 123 00:10:31.960 --> 00:10:37.039 for me because before before we dive into that, you did mention that the 124 00:10:37.120 --> 00:10:41.679 level made you do use next JS. So I'm kind of curious, are 125 00:10:41.720 --> 00:10:46.840 you using it like as the general basis for your front end or for particular 126 00:10:46.960 --> 00:10:50.919 things? No, you know what you know, depending on what you can 127 00:10:50.960 --> 00:10:56.799 actually say. Obviously, we started using FGZZ about at the same time I've 128 00:10:56.840 --> 00:11:01.600 joined like four and a half five years ago, and the purpose was mostly 129 00:11:01.639 --> 00:11:07.200 around SEO. We wanted the suber side the rendering for SEO and so it 130 00:11:07.320 --> 00:11:11.480 was for the public site. Well, yeah, it's only for our marketing 131 00:11:11.559 --> 00:11:18.399 website, and that's how we call it. Okay, okay cool. Funnily 132 00:11:18.559 --> 00:11:22.200 enough, it's the same thing at Next Insurance where I currently work, that 133 00:11:22.679 --> 00:11:28.120 our marketing website or public site as we call it, is built on top 134 00:11:28.159 --> 00:11:33.840 of next GS as well, and other things are not the thing that its 135 00:11:33.080 --> 00:11:37.600 rank is built on nextvs. A lot of the experience in Lemonade is very, 136 00:11:37.720 --> 00:11:43.879 very very dynamic, and we thought that we didn't find a good use 137 00:11:43.919 --> 00:11:50.120 case for Next with these use cases. And also we ran into a lot 138 00:11:50.120 --> 00:11:56.399 of problem with hidration considering we have a lot of highly interactive, in dynamic 139 00:11:56.240 --> 00:12:01.679 animations in a website and we do a lot of generative CSS, and it 140 00:12:01.879 --> 00:12:13.519 we always run into aggration problem and things that they need to be zomorphic, 141 00:12:13.720 --> 00:12:16.960 like all your components need to work both in the server and the client in 142 00:12:18.000 --> 00:12:24.279 the same way. And when you when you rely on the in some components 143 00:12:24.320 --> 00:12:28.399 or some pages, when you write on the position of the scroll when the 144 00:12:28.480 --> 00:12:33.600 user refreshed and it's only available once the seven request ends, then you run 145 00:12:33.600 --> 00:12:39.120 into problems. So so in that case, just again, you know, 146 00:12:39.279 --> 00:12:41.799 depending on what you can tell us. I'm kind of curious, then, 147 00:12:41.840 --> 00:12:48.360 what are you implementing that part of the user interface? And elimonade we have 148 00:12:48.519 --> 00:12:56.840 our own framework, but basically it's Vanilla reacts. Oh so it's kind of 149 00:12:56.960 --> 00:13:03.919 client side, client rendered React. Okay, it's it's interesting. I'm actually 150 00:13:05.360 --> 00:13:09.480 I'm kind of derailing us slightly, but I think it's an interesting point to 151 00:13:09.519 --> 00:13:16.480 bring up because I am seeing kind of this uh, the split or how 152 00:13:16.480 --> 00:13:22.480 would you say, bureau be by furcation, bifurcation in yeah, exactly, 153 00:13:22.919 --> 00:13:28.240 in the in the React ecosystem of like you know, forget about reactions over 154 00:13:28.320 --> 00:13:35.279 components. I'm talking about SSR hydration meta frameworks. On the one side, 155 00:13:35.639 --> 00:13:37.480 next day, yes, you might say, because that's the like the king 156 00:13:37.519 --> 00:13:43.720 of the hill for for React meta frameworks. And on the other side, 157 00:13:45.279 --> 00:13:50.639 a lot of organizations simply doing client side rendered React. You know, maybe 158 00:13:50.799 --> 00:13:56.159 somebody did create React app a couple of years ago, maybe they even manually 159 00:13:56.159 --> 00:14:01.559 configured web back. But it's basically, you know, a lot of software 160 00:14:01.559 --> 00:14:07.799 built using React, you know, and especially at larger orgs, don't care 161 00:14:07.919 --> 00:14:15.039 about SEO, don't care about ranking. It's it's like dashboards and interactive applications 162 00:14:15.080 --> 00:14:20.320 and whatnot, and it's just clients that react all the way at least that's 163 00:14:20.360 --> 00:14:24.519 what I'm saying. Yeah, I think in our case, I mean, 164 00:14:24.240 --> 00:14:28.480 in our dynamic pages, we didn't need a CEO. And I think that's 165 00:14:28.480 --> 00:14:33.480 a question that I've seen, that's a problem, that's an opinion. I've 166 00:14:33.519 --> 00:14:39.240 seen a lot of times that the focus on SSG and perform rendering performance with 167 00:14:39.360 --> 00:14:45.159 initial learning performance is indeed a front end concern, but it's not the only 168 00:14:45.360 --> 00:14:50.000 concent but people like in all the metals caussions around react nowadays it's it's only 169 00:14:50.080 --> 00:14:56.200 this the rendering initial veteric speed working with network and little with server data. 170 00:14:56.240 --> 00:15:01.200 But front end is more than this, and I feel, for example, 171 00:15:01.279 --> 00:15:05.799 in our business case in Lemonade, we had to tackle other important things. 172 00:15:07.200 --> 00:15:13.720 I'm totally with you. You know. We had Alex Russell on on the 173 00:15:13.759 --> 00:15:20.159 show a while back, and he makes the distinction between websites and web apps 174 00:15:22.240 --> 00:15:28.399 where based on depth of interaction. But the actual kind of split that I'm 175 00:15:28.440 --> 00:15:33.759 mostly saying is around whether or not you care about you know, ranking, 176 00:15:35.399 --> 00:15:39.240 and whether or not you cared whether you know whether or not the page is 177 00:15:39.279 --> 00:15:43.759 actually going to be scanned and being you know, in an index, and 178 00:15:43.759 --> 00:15:50.320 and a lot of cases, you know, like you said you at Lemonade, 179 00:15:50.480 --> 00:15:54.279 also next where I work again, next insurance, not next years. 180 00:15:56.080 --> 00:16:03.399 Uh, it's it's stuff that's behind authentication. It's it's like a funnel sort 181 00:16:03.399 --> 00:16:08.399 of a thing. You never land directly into it, you don't search it. 182 00:16:08.399 --> 00:16:15.039 It's very personalized, so it doesn't really need to rank. So obviously, 183 00:16:15.120 --> 00:16:18.679 you know, there there are some considerations around loading time because obviously you 184 00:16:18.720 --> 00:16:23.759 don't want you to load too slowly. But it's not the primary concern for 185 00:16:23.799 --> 00:16:30.120 sure. But on the other hand, think about what next. What VERSLL 186 00:16:30.240 --> 00:16:37.480 is selling. Versell is selling hosting, so they kind of need you to 187 00:16:37.639 --> 00:16:42.480 want, you know, to care about those things related to hosting, which 188 00:16:42.519 --> 00:16:47.639 are performance, which are the initial render which are stuff like that, because 189 00:16:47.679 --> 00:16:51.879 if you're doing client side rendering, you can basically host it anywhere. Eventually, 190 00:16:51.960 --> 00:16:53.919 I realized that I'm for us to deploy it in versa and in other 191 00:16:56.399 --> 00:17:00.399 services I'm a fan of, like Netlifi. Netlifi don't support acts of a 192 00:17:00.480 --> 00:17:04.480 component. I ran into problems configuring it and just gave up and paid verse 193 00:17:07.039 --> 00:17:14.279 interesting anyway, back to your story. Yeah, so okay, let's wear 194 00:17:14.599 --> 00:17:19.039 was I so I decided to develop this web up, not the website like 195 00:17:19.079 --> 00:17:25.880 you said, for my daughter, using experiment with new technologies if that opportunity, 196 00:17:26.599 --> 00:17:32.960 and the story is not only around the reacts of components like I said, 197 00:17:32.960 --> 00:17:38.279 it's about around the new next thirteen next fourteen actually reacts of the components, 198 00:17:38.279 --> 00:17:45.279 and also have used Superbase, which was an amazing experience. And I'm 199 00:17:45.400 --> 00:17:49.640 saying it because, like I said, I came my first full cycle web. 200 00:17:49.680 --> 00:17:56.480 That gig was eBay, and then there I was writing applications in rails, 201 00:17:56.559 --> 00:18:02.680 real waves. And there's always this notion that it was far more easy 202 00:18:02.839 --> 00:18:10.119 to write web applications back then compared to the node system today, where you 203 00:18:10.119 --> 00:18:14.519 need to orchestrate everything and raisers did everything from you for you. Now, 204 00:18:14.559 --> 00:18:18.160 looking back, I don't miss writing in Ruby. I love typescripts, and 205 00:18:18.200 --> 00:18:25.480 I can't imagine myself writing production grade applications without tax But think good shock isn't 206 00:18:25.519 --> 00:18:33.079 here kidding, but I mean it's still. I mean, there's still this 207 00:18:33.279 --> 00:18:38.079 nostalgic for nostalgic reasoning for we could do better, And I think this is 208 00:18:38.160 --> 00:18:41.480 what the remix is selling by the way, they say they can be the 209 00:18:41.599 --> 00:18:48.279 near rails in the NOE ecosystem. But anyway, developing this game brought me 210 00:18:48.400 --> 00:18:52.960 back to my earlier experience as as a developer, like, yeah, this 211 00:18:52.519 --> 00:19:00.519 this philosoph familiar And so I didn't know about super base anything that I heard 212 00:19:00.559 --> 00:19:03.319 about it from a friend at work, and I if you don't know what 213 00:19:03.440 --> 00:19:08.680 superbase is, it's a SaaS product. It's also open source. You can 214 00:19:08.759 --> 00:19:14.680 create a project and they basically give you a post press database for free with 215 00:19:14.920 --> 00:19:19.720 storage that's compellable to S three, which will time functions, several as functions, 216 00:19:21.400 --> 00:19:27.079 automatic graph KELAPI generation really really great. I didn't use all of this 217 00:19:27.240 --> 00:19:32.160 to just use the database. Yeah, I'm kind of curious, like what 218 00:19:32.319 --> 00:19:34.039 did you need all that power for. I didn't need all this power. 219 00:19:34.039 --> 00:19:40.839 I just wanted free database because, like I said, it's not only rails. 220 00:19:40.920 --> 00:19:45.279 Back then, if you remember, there was this company called the Parts 221 00:19:45.359 --> 00:19:51.799 that Facebook bot and then close that deliver the same premise. Here's a SaaS 222 00:19:51.839 --> 00:19:56.559 project, a SaaS product or that you can create a database which functions you 223 00:19:56.640 --> 00:20:00.039 can deploy and you don't need to set up us the database yourself. I 224 00:20:00.079 --> 00:20:03.119 don't need to set up my scul your podcast. It's just there and here's 225 00:20:03.119 --> 00:20:07.079 a simple API to access. And I also Firebase I think in the sense, 226 00:20:07.759 --> 00:20:11.319 well that's what it is. It's an open source version of Firebase. 227 00:20:11.920 --> 00:20:15.880 Yeah, but I don't I have experience with Firebase, but honestly and without 228 00:20:17.680 --> 00:20:22.640 I don't. I don't have a good experience at fivebas and I think about 229 00:20:22.680 --> 00:20:30.599 the API feels awkward to me when I use it, and I don't want 230 00:20:30.640 --> 00:20:34.799 to get into details because maybe it was just one my single or two times 231 00:20:34.839 --> 00:20:37.599 I've been experienced with it and didn't have a good experience. Maybe I did 232 00:20:37.640 --> 00:20:42.480 something wrong. But compared to super Base, I mean, it's a different, 233 00:20:42.559 --> 00:20:49.039 completely different world. But that's but when I when I when I tell 234 00:20:49.079 --> 00:20:52.640 about when I tell people about super Base, they say, oh, it's 235 00:20:52.720 --> 00:20:57.000 like Firebase, and I say, no, it's not like Firebase. It's 236 00:20:57.119 --> 00:21:03.359 it's it has a better developers. Well for what it's worth, super Basis 237 00:21:03.440 --> 00:21:07.000 taglines says, I mean on the website says the open source fire based alternative. 238 00:21:07.079 --> 00:21:11.279 So you can probably forget people for taking that. That's exctly what I 239 00:21:11.319 --> 00:21:15.759 wanted to say. That's that's exactly a tagline. Super Base is an open 240 00:21:15.880 --> 00:21:19.440 source five based alternative. Anyway, back to your story, so you you 241 00:21:19.880 --> 00:21:25.599 you chose a super base for your datase and it was really good for you, 242 00:21:26.400 --> 00:21:33.480 and you chose to build everything on next fourteen with React eighteen and the 243 00:21:33.720 --> 00:21:41.440 app folder and reacts for components. Correct, So my applications three pages, 244 00:21:41.720 --> 00:21:48.319 as I have a Linux page which is static, a dealer page which shows 245 00:21:48.480 --> 00:21:56.279 all the books that I generated in AI, or I have to create book 246 00:21:56.599 --> 00:22:03.319 page and I have the book itself where the user one page shows the textual 247 00:22:03.400 --> 00:22:07.359 adventure what the AI says, and another one the other side of the page. 248 00:22:07.559 --> 00:22:14.720 Book is formed with a single input that the user my my daughter can 249 00:22:14.799 --> 00:22:18.480 write what shoes to do and submits it and then they generates a new page 250 00:22:18.559 --> 00:22:23.519 and moves forward, kind of a chat interaction. Just I created an entire 251 00:22:23.559 --> 00:22:30.640 book with the says, with pages and with the animation, and I actually 252 00:22:30.920 --> 00:22:36.880 don't I show you, but I just realized that my open AI quota is 253 00:22:36.960 --> 00:22:42.960 out, so I can't use anymore. But yeah, but I mean it 254 00:22:44.160 --> 00:22:48.000 was four pages. And okay, here's a component. Do this api called 255 00:22:48.039 --> 00:22:52.319 to super based in the React component, considering it to serve a component, 256 00:22:52.880 --> 00:22:59.400 take the data out of it, and render the component that render the components 257 00:22:59.440 --> 00:23:03.559 you wish to render based on this data in the stead of components. And 258 00:23:03.640 --> 00:23:07.079 the first thing I did was to render the list of books, the list 259 00:23:07.119 --> 00:23:11.400 of stories, and I said, okay, super Base a query from books 260 00:23:12.359 --> 00:23:18.640 by the user, here's the data. It's typed because super Base automatically generates 261 00:23:18.640 --> 00:23:22.559 the types for you, and then run a map function over these books and 262 00:23:22.720 --> 00:23:29.759 render the book component. And well it worked amazing. And that was my 263 00:23:29.880 --> 00:23:33.000 first experience with reacts of the components. And I said, okay, this 264 00:23:33.200 --> 00:23:38.880 is fairly awesome because I don't need to declare an API function in the APA 265 00:23:40.200 --> 00:23:44.240 order. It's just thirty automatical. It creates a API for you, and 266 00:23:45.279 --> 00:23:52.519 I have it in a single file. Okay, nice. Undoubtedly, that's 267 00:23:52.839 --> 00:23:57.680 like the big premise thing is that you, I'm sorry, can make a 268 00:23:57.839 --> 00:24:03.599 call to a single kind of API with a sink a weight inside your React 269 00:24:03.680 --> 00:24:08.640 code, inside your component directly render the results. You know. It's it's 270 00:24:08.960 --> 00:24:17.519 very enticing. Undoubtedly. Yeah, But then things got complicated. First of 271 00:24:17.519 --> 00:24:22.000 all, I ran into problems and wait, the super Base squeries. Like 272 00:24:25.000 --> 00:24:26.839 let's say that I created a new book, a new new book from my 273 00:24:26.960 --> 00:24:33.960 daughter. And I got back and I ticked back to the index page and 274 00:24:33.200 --> 00:24:38.519 the book was not there, and I mean nothing about it appeared in the 275 00:24:40.200 --> 00:24:42.119 next ges, the commentation, et cetera. But if you start training and 276 00:24:42.200 --> 00:24:48.519 Google, you run into multiple Google getab issues around it. And so apparently 277 00:24:48.799 --> 00:24:56.200 because next gs override the native vetch function, they with their own catching mechanism 278 00:24:56.039 --> 00:25:04.279 and I got the all the responses. Well, actually, actually it's not 279 00:25:04.519 --> 00:25:10.559 so much I think that you got the old response so much as it it 280 00:25:10.799 --> 00:25:15.720 basically cashed the old response and it didn't and it basically just returned the cash 281 00:25:15.880 --> 00:25:22.240 version. So as I recall what they did is that they now I don't 282 00:25:22.319 --> 00:25:29.119 remember if they still do it or if they basically backtracked on this. On 283 00:25:29.240 --> 00:25:33.920 this behavior, it's an interest. It's it's an interesting thing to check because 284 00:25:33.960 --> 00:25:37.119 it actually did get a lot of pushback. Basically, the they kind of 285 00:25:37.200 --> 00:25:44.240 built kind of like React query like functionality into their fetch implementation that by default 286 00:25:44.799 --> 00:25:48.079 it cashes the results instead of making if the U O L is the same 287 00:25:48.240 --> 00:25:52.160 or something along these lines. I think that built in cashing again is one 288 00:25:52.200 --> 00:25:56.680 of the things like in rails and oh they're they're doing it for me. 289 00:25:56.799 --> 00:25:59.640 I don't need to develop it myself, Like, well, it's a complete 290 00:26:00.200 --> 00:26:06.039 experienced bundle. But when seeing that, I was reflected because I didn't understand 291 00:26:06.039 --> 00:26:11.279 what's going on and it's belly. I mean, maybe I'm talking about it 292 00:26:11.359 --> 00:26:15.079 in them. But one of the main problems that I had throughout this entire 293 00:26:15.079 --> 00:26:21.279 extent is not necessarily the technology. It's the fact that it's barely documented, 294 00:26:21.359 --> 00:26:26.799 and it's documented thrue vita issues, like, you know, it's it's an 295 00:26:26.599 --> 00:26:30.519 you know, that's kind of the thing about living on the bleeding edge, 296 00:26:30.720 --> 00:26:33.680 you know, And undoubtedly when you started using it, it was kind of 297 00:26:33.839 --> 00:26:38.079 like the bleeding edge. I think it's They would argue that it's more mature 298 00:26:38.200 --> 00:26:48.160 now I can look. Obviously, overriding built in function like fetch in a 299 00:26:48.240 --> 00:26:53.519 way that changes its behavior is something that I'm intrinsically opposed to. I can 300 00:26:53.759 --> 00:27:02.160 understand. Like the motivation, Like the problem that they faced was that when 301 00:27:02.200 --> 00:27:11.319 you componentize access to APIs, you very easily repeat yourself. Like if you've 302 00:27:11.359 --> 00:27:15.799 got two components that need to access the same data, you know, you 303 00:27:15.079 --> 00:27:19.599 end up in this kind of world of pain where each and like, forget 304 00:27:19.640 --> 00:27:23.480 about two, You've got a thousand components that all need to access the same 305 00:27:23.599 --> 00:27:29.359 data. They all make the same API called you can very easily like either 306 00:27:29.519 --> 00:27:41.160 overload your database or just create a performance nightmare. So they build caching into 307 00:27:41.359 --> 00:27:47.680 the actual fetch to avoid this kind of waterfall of a million calls for each 308 00:27:48.039 --> 00:27:52.480 like how do you preserve like the component model which where each component is like 309 00:27:52.680 --> 00:27:59.880 distinct and self contained, but at the same time don't end up issuing a 310 00:28:00.079 --> 00:28:07.039 million fetch calls. So I'm guessing that that was their solution. I would 311 00:28:07.079 --> 00:28:11.240 have been explicit about it, you know, to something like a reacquery. 312 00:28:11.680 --> 00:28:15.599 And I seem to recall that they that I'm trying to remember if it's still 313 00:28:15.680 --> 00:28:19.960 that way or they changed it back a month ago it was still there because 314 00:28:21.039 --> 00:28:27.000 that's when my my daughter's birthday was in February fourteenth, so it's not long 315 00:28:27.039 --> 00:28:36.400 ago. Anyway. Afterwards, I discovered that there's built in caching configuration mechanism 316 00:28:36.880 --> 00:28:47.440 in the new next but it's globally declared on the components files, so and 317 00:28:47.880 --> 00:28:51.480 it's also it was also very hard to find it in the commentation and the 318 00:28:51.599 --> 00:28:57.960 thing I only managed to solve it by digging into gidabitious, But once I 319 00:28:59.000 --> 00:29:03.640 saw the cashingsue U, it was I solved this problem and I could move. 320 00:29:04.039 --> 00:29:08.920 And the next thing that I found confusing, but I understand why it 321 00:29:10.039 --> 00:29:15.720 works is mixing between server components and client components. So basically, whenever you 322 00:29:15.839 --> 00:29:22.240 want to use a React to, it must be in a client component. 323 00:29:23.440 --> 00:29:29.680 And I mean I understand why. I mean it's obvious why because you can't 324 00:29:29.720 --> 00:29:36.599 serialize the state. Yeah, the server components are are kind of stateless by 325 00:29:36.640 --> 00:29:45.759 definition. They render and and they're done, and that's it. So obviously 326 00:29:45.920 --> 00:29:51.599 they can't be state full. They have to be state less. So and 327 00:29:52.079 --> 00:29:57.319 you can't have a use state in a React server component. Steve a j 328 00:29:57.559 --> 00:30:00.640 Is it? Is it clear enough? Do we need to kind of talk 329 00:30:00.680 --> 00:30:06.319 about why that is? Hey? There, this is Charles Maxwood. I'm 330 00:30:06.359 --> 00:30:08.640 excited because I wanted to let you know about this thing that I pulled together 331 00:30:10.079 --> 00:30:14.480 that I had just I've been dying to have this for years and I never 332 00:30:14.559 --> 00:30:17.519 felt like I could, And then I just realized that there's no reason why 333 00:30:17.519 --> 00:30:19.440 I can't. So I'm putting together a book club and we're going to read 334 00:30:19.599 --> 00:30:25.000 development focused books, career books, you know, technical books, whatever. 335 00:30:25.119 --> 00:30:29.160 The first book that we're going to do is going to be Clean Architecture by 336 00:30:29.359 --> 00:30:32.720 Uncle Bob Martin. If you're not familiar with clean code or some of the 337 00:30:32.799 --> 00:30:34.640 other stuff that Bob has done, check that out. I've also talked to 338 00:30:34.720 --> 00:30:37.839 him on the Clean Coders podcast, which is on top End Devs. But 339 00:30:38.480 --> 00:30:41.319 yeah, we're going to get on. He's going to show up to some 340 00:30:41.400 --> 00:30:44.480 of our meetings. And what I'm thinking is we'll probably have like five or 341 00:30:44.519 --> 00:30:48.079 six people part of the conversation along with Bob and I at the same time, 342 00:30:48.599 --> 00:30:52.680 and we'll just so somebody can come on, they can ask their question, 343 00:30:52.319 --> 00:30:56.119 and then we'll just rotate people through, so we'll mute one person, 344 00:30:56.240 --> 00:31:00.480 unmute another person when it's their turn to come on and be part of the 345 00:31:00.559 --> 00:31:03.160 discussion. So we'll do that for like an hour hour and a half. 346 00:31:03.279 --> 00:31:06.799 And then the other part of it that I'm putting together is just kind of 347 00:31:06.880 --> 00:31:12.359 a meet and greet gather area on Gathertown. And so after the meetup and 348 00:31:12.480 --> 00:31:15.880 the call, what we'll do as we'll all go over to gather Town and 349 00:31:15.960 --> 00:31:18.519 you can just log in, walk up to a group and have a conversation, 350 00:31:19.160 --> 00:31:22.559 and that way we can all kind of get to know each other and 351 00:31:22.240 --> 00:31:26.119 make friends and get to know people across the world. One thing that I'm 352 00:31:26.119 --> 00:31:29.799 finding is that, yeah, the meetups are starting to come back, but 353 00:31:29.920 --> 00:31:32.559 a lot of people don't have the opportunity to go to a meetup. And 354 00:31:32.680 --> 00:31:34.200 I really want to meet you guys and talk to you. So we're gonna 355 00:31:34.200 --> 00:31:37.319 put all that together. It'll all be part of that book club. You 356 00:31:37.359 --> 00:31:40.440 can go to topendevs dot com slash book Club to be part of it, 357 00:31:40.799 --> 00:31:44.680 and I'm looking forward to seeing you there. The first book club meeting will 358 00:31:44.720 --> 00:31:47.920 be in December, the beginning of December. We're starting the first week of 359 00:31:47.960 --> 00:31:52.240 December, and you'll also be part of the conversation about which book we do 360 00:31:52.440 --> 00:31:56.319 next. I have one in mind, but I want to see where everybody's 361 00:31:56.319 --> 00:32:01.400 at. So there you go. Well, I think we should talk about 362 00:32:01.440 --> 00:32:08.519 why that is because I personally don't use the components. Well, think about 363 00:32:08.519 --> 00:32:14.359 it this way. If you've got a component running server side, then if 364 00:32:14.440 --> 00:32:19.680 you need want it to be state full, you need to have like this 365 00:32:19.920 --> 00:32:25.160 persistent connection between the client and the server, like a web socket, like 366 00:32:27.240 --> 00:32:34.000 yeah. And also it's like a one to one connection between between your your 367 00:32:34.960 --> 00:32:39.599 server and your client because you're keeping something in server memory that that is the 368 00:32:39.720 --> 00:32:49.559 state, and that makes the whole server side development that much trickier and you 369 00:32:49.680 --> 00:32:54.279 know, less scalable and more complex. You basically you generally want to keep 370 00:32:54.359 --> 00:32:59.359 your server code stateless, you know, keep whatever state you have in the 371 00:32:59.480 --> 00:33:06.480 database or something, and that means that you can't really use stateful hooks on 372 00:33:06.599 --> 00:33:10.839 the server side. So React server components, because they run server side, 373 00:33:10.880 --> 00:33:19.480 they can't use stateful hooks. That your state is not serializable, So how 374 00:33:19.480 --> 00:33:22.799 would you transfer to the well In a sense, it is kind of serializable 375 00:33:22.880 --> 00:33:29.319 in the sense that you know, you can't pass props from a server component 376 00:33:29.480 --> 00:33:35.160 to a client component, so you're effectively serializing props across the wire. So 377 00:33:35.799 --> 00:33:40.720 I can see, like you know, if it was just the protocol overhead 378 00:33:40.759 --> 00:33:45.839 of serializing data back and forth, that's solvable. And like I said, 379 00:33:45.839 --> 00:33:51.799 they kind of solve it already because they serialize data downstream in the React server 380 00:33:51.920 --> 00:33:57.640 components sending props to client set components, and they serialize now data upstream in 381 00:33:57.799 --> 00:34:02.960 server actions or server functions you send which is kind of an RPC protocol. 382 00:34:04.079 --> 00:34:08.360 You send data upstream and you get the result downstream, so they are able 383 00:34:08.440 --> 00:34:15.639 to serialize state across the wire. The bigger issue from my perspective is the 384 00:34:15.760 --> 00:34:22.679 fact that you cannot have persistent state in the memory of a server side component 385 00:34:22.880 --> 00:34:29.079 because you might be hitting one server instance in one call and another server instance 386 00:34:29.159 --> 00:34:34.400 in another call, or or the server you know might be might go down 387 00:34:34.559 --> 00:34:38.119 because it's some sort of a lambda function or something like that, so it 388 00:34:38.880 --> 00:34:46.280 server, so server reacts. Server components by definition cannot have cannot be stateful. 389 00:34:49.280 --> 00:34:52.880 They they can. The only way they can have persistent state is by 390 00:34:53.000 --> 00:34:58.039 using something like a database or something like that. Is that kind of clearer 391 00:34:58.280 --> 00:35:05.079 seve agent? Yeah, but yeah, it does mean that the instance you 392 00:35:05.280 --> 00:35:10.840 want you you you want to use to make a component stateful by adding if 393 00:35:10.920 --> 00:35:15.199 in React in React speak, by adding a use state or something along these 394 00:35:15.280 --> 00:35:22.000 lines, you have to make it a component that can run on the client 395 00:35:22.079 --> 00:35:28.039 side and and use client Is that divide that gets you from being service side 396 00:35:28.119 --> 00:35:34.599 only to having something that can also run on the client side. Yeah. 397 00:35:35.480 --> 00:35:42.159 The interesting analogy that Dan Abramov now makes when he describes it is that use 398 00:35:42.320 --> 00:35:46.920 client is to React or to modern React, like the script tag is to 399 00:35:47.239 --> 00:35:52.039 web development. It kind of indicates that from this point on, script tag 400 00:35:52.119 --> 00:36:00.119 says this stuff runs in the browser or can run in the browser anyway. 401 00:36:00.559 --> 00:36:05.039 Again, I kind of stud it derailed us, but I thought it was 402 00:36:05.079 --> 00:36:08.760 a point worth making that Like you said that the instance you wanted to add 403 00:36:08.880 --> 00:36:15.519 interactivity and client side state and respond to user interactions, you had to switch 404 00:36:15.679 --> 00:36:22.119 over and and you know things that are beyond you know, routing, you 405 00:36:22.320 --> 00:36:30.000 had to switch over to using to use to use client and client side React. 406 00:36:31.880 --> 00:36:37.840 So I want to go different into this because in my case, I 407 00:36:37.920 --> 00:36:45.079 have a four page application. But even with these I mean small amount of 408 00:36:45.119 --> 00:36:49.960 files and components, you started having this nichemash of okay, this is a 409 00:36:50.079 --> 00:36:53.239 several components, and this is another several component inside my page. Oh but 410 00:36:53.360 --> 00:36:58.400 this might be a client component. And this is another client component that is 411 00:36:58.480 --> 00:37:00.960 only a client component because it's he was saying, but it doesn't actually render 412 00:37:01.039 --> 00:37:06.000 anything because I need to get back and data for me, So it's basically 413 00:37:06.159 --> 00:37:10.239 a used client book And then you kind of get lost on what's a sever 414 00:37:10.360 --> 00:37:19.400 component to what's a client And it was art for me to imagine how this 415 00:37:19.599 --> 00:37:30.960 doesn't get messy in loude scale application. And so here's my two cents about 416 00:37:30.039 --> 00:37:36.400 it. First of all, when I talk to people about React server components, 417 00:37:36.440 --> 00:37:39.480 and so I'll backtrack a little bit, I have a talk that I 418 00:37:39.599 --> 00:37:45.639 give it that I gave it a few conferences, which is about overcoming the 419 00:37:45.920 --> 00:37:52.000 performance cost of vibration, in which I talk about various ways in which various 420 00:37:52.519 --> 00:37:57.760 frameworks try to reduce the cost of vibration. And one of the methods is 421 00:37:57.920 --> 00:38:02.840 React server components, because it's pulls some of the rendering operation from the client 422 00:38:04.000 --> 00:38:07.840 to the server. So for React server components, they don't actually need to 423 00:38:07.000 --> 00:38:13.599 download any JavaScript code, they don't need to do any hydration. It just 424 00:38:13.719 --> 00:38:19.559 streams the results from the server directly to the client. But then I described 425 00:38:19.679 --> 00:38:23.480 the downside of this approach, and I say that the biggest downside is that 426 00:38:23.639 --> 00:38:28.760 it's a it's a new mental model that you can't just, you know, 427 00:38:29.800 --> 00:38:35.280 assume that since you know React, you can easily just switch over to use 428 00:38:35.360 --> 00:38:43.679 this stuff. You need to think differently about how you architect your React application. 429 00:38:44.519 --> 00:38:51.639 And again, to be fair, dan Abramov, is you know straightforward 430 00:38:51.679 --> 00:38:58.559 about that, where he basically says that the transition in React from classes to 431 00:38:58.760 --> 00:39:04.159 hooks was a very very easy one because it was bottom up you wanted to 432 00:39:04.360 --> 00:39:07.400 use. If you wanted to start using hooks, you can say, okay 433 00:39:07.559 --> 00:39:10.320 in that, but in this particular component, I'll start using hooks. It 434 00:39:10.400 --> 00:39:15.559 doesn't impact any other part of the rest of the application. And they can 435 00:39:15.760 --> 00:39:21.559 like start in that in a particular point and then expand out, whereas with 436 00:39:21.760 --> 00:39:27.400 Reacts over components, you know you kind of need to bottom it's top down, 437 00:39:27.840 --> 00:39:31.400 and you effectively need to rethink the architecture of your entire application, and 438 00:39:31.519 --> 00:39:36.320 you need to start thinking, like you said shy about, Hey, this 439 00:39:36.559 --> 00:39:40.199 is going to be a server side This can be server side only, but 440 00:39:40.519 --> 00:39:45.239 this part needs to also run on the client, and you know, where 441 00:39:45.280 --> 00:39:50.760 do I draw the line, where do I switch? Where do I place 442 00:39:50.880 --> 00:39:54.960 the divide? And it infects everything, and it really is a different way 443 00:39:55.559 --> 00:40:00.960 of thinking about the architecture of your React application, so that it's not a 444 00:40:00.079 --> 00:40:07.800 trivial switch. I think the comparison is really is really good because when I 445 00:40:07.960 --> 00:40:12.880 joined Lemonade, I had the experience they just they've just introduced ooks and I've 446 00:40:12.960 --> 00:40:16.559 had on experience with the class components, but getting into ooks was felt so 447 00:40:16.800 --> 00:40:21.760 natural to me. It was, Wow, this is amazing. It's function 448 00:40:22.000 --> 00:40:25.679 functional encoding which react and the look the power that LOOKS gives us, and 449 00:40:25.800 --> 00:40:30.800 we don't need mixings anymore, and we don't need compound components and everything is 450 00:40:30.880 --> 00:40:36.559 great. And I learned looks immediately and started applying it in all lemon It's 451 00:40:36.599 --> 00:40:43.119 code. But with reacts with components it feels different because no, I don't 452 00:40:43.159 --> 00:40:46.440 think it's a mental model, and I think that from the start of introducing 453 00:40:46.519 --> 00:40:52.960 it, there was a great communication problem in introducing what they want to achieve, 454 00:40:53.199 --> 00:40:59.519 how it's being done. What is that? But other technology actually works 455 00:41:00.480 --> 00:41:04.000 and everybody are biased around it right now. So even if I had a 456 00:41:04.039 --> 00:41:08.239 great experience developing reactor components, there's this little thing back in my head that 457 00:41:08.320 --> 00:41:15.760 says it's a bit off, and I think that the communication problem around. 458 00:41:16.519 --> 00:41:21.039 I'm not sure they can fix it anymore. And maybe in two years from 459 00:41:21.079 --> 00:41:24.239 now, I'm now everybody are using reacts with components, but right now, 460 00:41:25.079 --> 00:41:29.960 like it has been two years since they've announced it, I think it's still 461 00:41:30.079 --> 00:41:37.559 hard to digest reacts with components, and realistically, I think that only now 462 00:41:37.679 --> 00:41:44.559 people are actually starting to use it. How does that British phrase go go 463 00:41:44.960 --> 00:41:52.800 in anger? Like seriously? And I think like it's it's interesting, you 464 00:41:52.880 --> 00:41:58.840 know, if any of our listeners want to, you know, hit us 465 00:41:58.920 --> 00:42:06.440 back on that. But I am wondering how many organizations are actually using reacts 466 00:42:06.480 --> 00:42:15.760 over components for large scale projects. Uh, it's an it's an interesting question 467 00:42:16.639 --> 00:42:21.559 which I don't know the answer to. I've not I've yet to encounter a 468 00:42:21.760 --> 00:42:28.119 large scale application developed with reacts over components, but obviously my information is very 469 00:42:28.199 --> 00:42:31.519 unecdotal. Do you think it would benefit the react and versus teams if they 470 00:42:31.559 --> 00:42:40.800 have announced seven components after it has been matured enough? I don't know how 471 00:42:40.880 --> 00:42:45.679 that might have worked, because it's it's like a chicken and an egg problem. 472 00:42:45.800 --> 00:42:51.559 I mean, if you wait for it to be mature before you release 473 00:42:51.599 --> 00:42:54.800 it into the wild, it will never be mature and you'll never release it 474 00:42:54.880 --> 00:43:01.840 into the wild. These technologies, you know, they they evolve over time. 475 00:43:02.639 --> 00:43:07.840 Uh. And and you know it's it's also very much about the feedback 476 00:43:07.880 --> 00:43:13.199 that you get. Uh. For example, I don't know how many people 477 00:43:13.320 --> 00:43:22.039 remember that the actual initial implementation of Reactions server components was Shopify Hydrogen. We 478 00:43:22.159 --> 00:43:28.119 actually had a person from Shopify on our on our show I Need to find 479 00:43:28.159 --> 00:43:30.760 the episode when it you know, when it was really new and we were 480 00:43:30.840 --> 00:43:35.079 talking about, you know, how it works and what they do, and 481 00:43:35.920 --> 00:43:39.039 we really didn't get it back then, by the way, and that project 482 00:43:39.239 --> 00:43:45.559 failed effectively, and it failed, and they learned a lot from that failure. 483 00:43:46.559 --> 00:43:52.000 For example, back then there was no use server and used client instead. 484 00:43:52.079 --> 00:43:57.119 It was based on the file name, so you either had server or 485 00:43:57.239 --> 00:44:00.519 client in the file name or something along the lines, and that would determine 486 00:44:00.519 --> 00:44:04.760 whether it ran on the server or ran on the client or both. Uh. 487 00:44:05.039 --> 00:44:12.960 And that turned out to be a bad idea. File name based routing 488 00:44:13.039 --> 00:44:16.679 and configurations. Well yeah, but it turned out to be a bad idea, 489 00:44:16.760 --> 00:44:20.639 and they would have known that it would have that it's a bad idea 490 00:44:20.639 --> 00:44:28.239 if they hadn't tried it out. So yeah, you know, it's it's 491 00:44:28.880 --> 00:44:32.280 you kind of have to make these kind of big bets. Sometimes. The 492 00:44:32.679 --> 00:44:39.000 challenge for React is that they've got such a huge base, uh And and 493 00:44:39.280 --> 00:44:44.679 you know they it's more difficult, what's more challenging for them to make these 494 00:44:44.880 --> 00:44:50.599 kind of big bets than it is for smaller frameworks. Like Ryan Carneiato, 495 00:44:50.760 --> 00:44:55.280 the creator of Solid. He makes sweeping changes in the way that the framework 496 00:44:55.400 --> 00:45:00.360 works, like on a daily basis. But you know he's got like what 497 00:45:00.599 --> 00:45:08.559 how many websites built using Solid? And the people who use Solid are buying 498 00:45:08.599 --> 00:45:14.440 into this, they know what they're getting. Would reacts, it's a different 499 00:45:14.519 --> 00:45:16.920 story. But like I said, I don't I think that if they would 500 00:45:16.960 --> 00:45:22.119 have waited for it too mature. And also remember how long it actually took 501 00:45:22.639 --> 00:45:27.519 to get from React seventeen to React eighteen, Like what was it two three 502 00:45:27.639 --> 00:45:31.599 years? How much longer would they have waited another two or three? You 503 00:45:31.679 --> 00:45:38.639 know? But I think when I think about it, it's not only when 504 00:45:38.639 --> 00:45:44.599 you think about it, it's not only about reacts of components, because I'm 505 00:45:44.599 --> 00:45:49.599 not talking about library maintaineers. But as an application developer, I mean, 506 00:45:51.199 --> 00:45:57.039 you look at all these new React features, even suspense use, transition use, 507 00:45:57.079 --> 00:46:01.039 differd value use. I don't even remember their new book's name is. 508 00:46:01.559 --> 00:46:06.440 And I see it in the team, in the guild, in the Lemonade 509 00:46:06.599 --> 00:46:10.960 front and guild. I mean nobody. It's not that we don't know how 510 00:46:12.039 --> 00:46:16.079 to use this. We don't have We don't really know. It doesn't interest 511 00:46:16.239 --> 00:46:20.800 us to learn it because we don't know what are the use cases for these 512 00:46:20.840 --> 00:46:24.639 features. I mean sustense Okay, suspense is also at a rough initial right, 513 00:46:24.960 --> 00:46:28.760 but now suspense is very known. But the rest of all these new 514 00:46:28.800 --> 00:46:34.000 features, it's not only the several components when you think about that, Yeah, 515 00:46:34.079 --> 00:46:36.800 but I think it's most of the act components. It's first of all, 516 00:46:36.800 --> 00:46:39.920 it's also it's worth mentioning. Again, I assume most of our listeners 517 00:46:40.039 --> 00:46:45.679 know what suspense is all about. Basically, suspense is about saying this stuff 518 00:46:46.719 --> 00:46:50.719 can we don't need to wait on it. It can be a synchronous to 519 00:46:50.800 --> 00:46:54.760 the rest of the application. That's basically from from my perspective. The shortest 520 00:46:54.800 --> 00:47:02.519 explanation of what suspense is that they originally you react rendering operation was synchronous. 521 00:47:04.000 --> 00:47:07.440 It all it happened all at once, and suspense was a way to say 522 00:47:08.199 --> 00:47:13.400 these parts of the UI, well, they can have happened later, and 523 00:47:13.519 --> 00:47:19.480 they can happen at their own time. Shine, Would you accept this definition 524 00:47:19.679 --> 00:47:25.159 or would you use a different one? Yeah, But I mean there's a 525 00:47:25.239 --> 00:47:29.920 way to maybe simplify it because I mean the common the most common use case 526 00:47:30.119 --> 00:47:37.480 is what should I render while I wait for this data? But this part 527 00:47:37.519 --> 00:47:39.840 of the wedding on is only a small part of what I'm trying to render. 528 00:47:40.480 --> 00:47:45.480 Yeah, but that's kind of a fancier way of saying what I'm saying, 529 00:47:45.519 --> 00:47:47.960 because if something is a synchronous to the rest, it means that it 530 00:47:49.079 --> 00:47:53.079 happens in its own time, and you usually want to sew some sort of 531 00:47:53.280 --> 00:47:59.360 placeholder while you're waiting on that thing to actually happen. Yeah, just a 532 00:47:59.519 --> 00:48:02.679 thing. Most of the people use it for spinners and loaders, and that 533 00:48:04.239 --> 00:48:07.599 I think that's the simple way to describe it. Yeah, and I'll quote 534 00:48:07.639 --> 00:48:14.119 myself that One of my favorite shit tweets was that the way to tell the 535 00:48:14.159 --> 00:48:19.480 difference between a modern web application and a legacy web application is that the legacy 536 00:48:19.519 --> 00:48:23.199 web application is one big spinner while it's loading, and a modern web application 537 00:48:23.400 --> 00:48:29.679 is a lot of tiny spinners. I prefer the first night from your ex 538 00:48:29.760 --> 00:48:36.639 perspective. But well, the idea then, though, is that you know, 539 00:48:36.760 --> 00:48:40.199 if with the big spinner, you're you're blocked on the slowest part, 540 00:48:42.519 --> 00:48:51.119 and with the modern application, you know each thing loads arrives as soon as 541 00:48:51.159 --> 00:48:53.159 it's as it's ready, which is again, by the way, part of 542 00:48:53.239 --> 00:48:59.280 the thing about reactions over component streaming is that if you've got multiple reacts of 543 00:48:59.320 --> 00:49:02.880 a components in the page, another thing that's kind of confusing is that each 544 00:49:04.000 --> 00:49:08.400 can kind of arrive independently as soon as it's ready, and you've got a 545 00:49:08.480 --> 00:49:15.360 spinner until it's there, and then it appears, and you can arrange your 546 00:49:15.480 --> 00:49:20.199 page in such a way that the most important things and the high priority things 547 00:49:20.280 --> 00:49:24.360 and the things that appear first are in the initial viewport, while things further 548 00:49:24.480 --> 00:49:31.079 down the page appear as they become available. I think it's an interesting discussion. 549 00:49:31.159 --> 00:49:36.559 I would actually love to talk about it for a few minutes because from 550 00:49:36.599 --> 00:49:42.800 my personal experience, I think the big spinner problem it could solve with perceived 551 00:49:42.880 --> 00:49:47.440 performance improvements like and not to remember I'm not sure that the exact right down 552 00:49:47.559 --> 00:49:53.920 but ghoest texting and that it looks like there's content but it doesn't amation so 553 00:49:54.320 --> 00:49:59.480 like the YouTube thing, like lots of great boxes until there's a lot of 554 00:49:59.559 --> 00:50:02.400 experience SINS are doing at the moment, and when I, as a user, 555 00:50:02.800 --> 00:50:08.559 I enter website and I have these all little spinners and then content starts 556 00:50:08.559 --> 00:50:13.280 appears, it takes my attention. I mean, I mean, first of 557 00:50:13.280 --> 00:50:15.000 all, if you're not doing it correctly, it creates like achieved, which 558 00:50:15.079 --> 00:50:20.599 is which are bad. But I mean I would love I have. Maybe 559 00:50:20.639 --> 00:50:24.199 I'm not the normal user, but I think I want to say everything at 560 00:50:24.239 --> 00:50:30.639 once. And it's sort of compared to why I'm using when people see me 561 00:50:30.719 --> 00:50:34.440 work, Why you're not using a larger monitor, You're you're only using your 562 00:50:34.519 --> 00:50:37.440 MacBooks monitor because and I'm saying, I don't want to move my eyes around. 563 00:50:37.599 --> 00:50:42.679 I want to remain focused on a single place. And when everything pops 564 00:50:42.719 --> 00:50:45.800 out on your screen and it takes your attention, it creates this delay of 565 00:50:45.960 --> 00:50:51.840 your interpretation of the content in my personal experience. So Apple Vision Pro is 566 00:50:51.920 --> 00:50:59.280 not for you. Yeah, probably not. Well, look, first of 567 00:50:59.280 --> 00:51:00.960 all, in a lot of ways, I agree. I mean, you 568 00:51:01.039 --> 00:51:06.239 know, first of all, I hate spinners period, So preferably no big 569 00:51:06.320 --> 00:51:09.119 spinner, no little spinners. Just give me the content fast so that I 570 00:51:09.159 --> 00:51:14.360 don't need spinners. But but you know, think about it differently. You 571 00:51:14.400 --> 00:51:16.920 know a lot of pages, you've got the important things and you've got the 572 00:51:17.000 --> 00:51:22.639 less important things. So for example, if you're thinking about let's say a 573 00:51:22.760 --> 00:51:25.920 weather app, you want to know the temperature and whether it's going to rain 574 00:51:27.039 --> 00:51:32.639 or not. Everything else is kind of superfluous. You know, it's nice 575 00:51:32.960 --> 00:51:38.000 to have, but it's not more than that. And if it's a big 576 00:51:38.119 --> 00:51:45.880 spinner and you're waiting on some slow something that's not the main content, that's 577 00:51:45.159 --> 00:51:51.199 that's a big issue. Think about you know a lot of like you know, 578 00:51:51.199 --> 00:51:54.400 a lot of cases, a lot of modern pages, ads appear after 579 00:51:54.519 --> 00:52:00.199 the main stuff, and you could have delayed everything until the very less as 580 00:52:00.320 --> 00:52:06.119 ad appeared. Some native applications work like that, and that and noise the 581 00:52:06.199 --> 00:52:10.280 heck out of me. Where you're you go into like this news app and 582 00:52:10.480 --> 00:52:15.440 it takes a ton of time to load, but when it loads, it 583 00:52:15.559 --> 00:52:19.760 has everything, including all the ads. You know, give me the text, 584 00:52:19.880 --> 00:52:22.840 load the ads while I'm already reading reading the application. Now, obviously 585 00:52:23.199 --> 00:52:27.280 you need to be smart about it to avoid shifts and stuff like that. 586 00:52:28.199 --> 00:52:36.119 But but I do get the value of not blocking everything on the slowest thing 587 00:52:36.800 --> 00:52:44.559 and prioritizing things based on how important they likely are to the user. Obviously 588 00:52:44.679 --> 00:52:49.480 you need to be to build the UI in such a way that it works 589 00:52:49.559 --> 00:52:52.960 well. Like for like I mentioned before, maybe you know, it's okay 590 00:52:53.039 --> 00:52:59.320 if there's a tiny spinner, but it's outside the initial visual visual uh, 591 00:52:59.800 --> 00:53:04.159 the whole viewport, and it's you know, you'd only see it if you 592 00:53:04.280 --> 00:53:10.480 scroll down really quickly. That's okay in my book. Definitely I agree, 593 00:53:10.519 --> 00:53:14.519 And maybe I've sounded two hours like. It's not that I want the entire 594 00:53:14.599 --> 00:53:17.679 rebsite to load and then show content, but I think there's a middle ground 595 00:53:17.679 --> 00:53:23.199 between showing when, especially for back office applications, when you have a lot 596 00:53:23.280 --> 00:53:29.000 of no I totally, I totally agree. If your page looks like twenty 597 00:53:29.119 --> 00:53:34.559 spinners and and things appear at random in different places, that's a very annoying 598 00:53:34.679 --> 00:53:38.639 experience. Undoubtedly, especially if it also causes lots of shifts, then it's 599 00:53:38.719 --> 00:53:44.119 totally ridiculous. So anyway, were you able to actually build the app? 600 00:53:44.960 --> 00:53:46.920 Yeah? I did, and I actually didn't get to the best part because 601 00:53:47.559 --> 00:53:51.480 I mean I added my up and downs in the experience of developing this that 602 00:53:51.599 --> 00:53:54.960 I think the best feature that I've encountered is a sear action. I was 603 00:53:55.079 --> 00:53:59.880 like, okay, I need an API to create a new book or the 604 00:54:00.000 --> 00:54:05.599 submit the form, etcetera. But then I read about server actions and then 605 00:54:06.639 --> 00:54:14.599 basically several actions work so similar to several components and the fact that you can 606 00:54:14.679 --> 00:54:20.679 declare them inside the component and they are functions that run in the cervil, 607 00:54:20.880 --> 00:54:30.239 but their API, their signature are native form arguments like how you would and 608 00:54:30.719 --> 00:54:36.000 a submitted form from the client. You have the same API on the server 609 00:54:36.400 --> 00:54:39.159 and you have access to the same service side APIs that you have in several 610 00:54:39.199 --> 00:54:45.559 components. For example, I can access superbase and read the form data from 611 00:54:45.639 --> 00:54:52.480 the client inside the server action. Valid. Yeah. Basically, a server 612 00:54:52.679 --> 00:54:58.760 action is a function that runs on the server that can be called from the 613 00:54:58.840 --> 00:55:05.199 client. Effective Now it's wrapped in a function usually wrapped in a form submit. 614 00:55:06.639 --> 00:55:08.440 Does it have to be by the way or can it be just any 615 00:55:09.559 --> 00:55:13.920 I didn't see any other use cases. Maybe they've improved that, but it's 616 00:55:14.639 --> 00:55:19.079 I use it only for from submission the endler for the form and that was 617 00:55:19.400 --> 00:55:23.960 the server action all the time. In any event. We talked about it 618 00:55:24.079 --> 00:55:29.280 with Sam and I also talked about it in that episode I did on RPC. 619 00:55:29.480 --> 00:55:34.320 It's effectively a form of RPC calling a function that runs on the server 620 00:55:34.920 --> 00:55:44.559 from the client using effectively function called semantics and having the framework in this case, 621 00:55:45.119 --> 00:55:50.599 next gs serialize the parameters in the upstream, deserialize them on the server, 622 00:55:51.320 --> 00:55:55.559 and then serialize and deserialize the result which is sent back. So I 623 00:55:55.719 --> 00:56:01.400 think that the serialized thing is not it's not entirely correct because this is also 624 00:56:01.480 --> 00:56:07.880 where I ran to public because the response from a sever action it's it's not 625 00:56:08.000 --> 00:56:14.760 the data itself, because I mean, it's it's running inside a server component. 626 00:56:14.880 --> 00:56:16.880 So if you want to get a data back, you should re render 627 00:56:16.960 --> 00:56:22.000 it with the data you fetched the ste A component. So a sever action 628 00:56:22.239 --> 00:56:24.559 can do two things, maybe more, but I've used to. It can 629 00:56:24.599 --> 00:56:30.960 either redirect to a different page or it can say I want to invalidate the 630 00:56:31.119 --> 00:56:38.480 data in this certain page. And then I mean, it wasn't intuitive for 631 00:56:38.559 --> 00:56:44.880 me in the beginning because I said I need to I want to let's say 632 00:56:44.920 --> 00:56:50.159 that I want to refresh the data in my in the page the trigger diserver 633 00:56:50.320 --> 00:56:53.920 action. So and even if deserver action can be reused, I wanted to 634 00:56:54.679 --> 00:56:59.960 to invalidate the cache in the cache in a dynamic way just in the page 635 00:57:00.079 --> 00:57:04.840 triggered it, And there wasn't such a function and I had, like, 636 00:57:05.119 --> 00:57:08.119 in every server action, I had to figure out what was the path that 637 00:57:08.760 --> 00:57:16.679 sent triggered the action, and then invalidated, so so effectively you caused a 638 00:57:19.760 --> 00:57:25.480 route operation on every submit effectively, Yeah, and then send the data back 639 00:57:25.599 --> 00:57:31.119 down as props in reacts over components. Yeah, next, that's it free. 640 00:57:32.760 --> 00:57:37.320 Well, to be fair, look when I first, like, I 641 00:57:37.480 --> 00:57:44.800 had various misconceptions about reacts over components and about server actions when I first encountered 642 00:57:44.880 --> 00:57:51.800 them, because initially I assumed that it would be more akin to quick server 643 00:57:51.960 --> 00:57:58.280 dollar mechanism, where it's literally a way to call a function on the server 644 00:57:58.440 --> 00:58:02.960 side, but the act really subscribes to the Uni directional data flow model. 645 00:58:04.679 --> 00:58:12.599 So they don't want you to call the function on the server side and send 646 00:58:12.679 --> 00:58:15.559 the data down that way. They wanted to go in a circle, as 647 00:58:15.639 --> 00:58:23.400 it were. You send data from the server to from parent components as props 648 00:58:23.519 --> 00:58:30.679 going down, and you send notifications as events bubbling up or function calls bubbling 649 00:58:30.800 --> 00:58:37.400 up. So it's it's kind of like this circle of how the thing flows. 650 00:58:37.000 --> 00:58:43.639 So I can totally understand why they don't want you to just you know, 651 00:58:44.440 --> 00:58:49.239 do things on the server and get data from the server by just calling 652 00:58:49.360 --> 00:58:53.039 functions, getting data and re rendering it. That way, they want the 653 00:58:53.159 --> 00:59:00.599 rerendering to go through the React server components. It totally makes sense read and 654 00:59:00.480 --> 00:59:05.599 now that I know it, I can can develop these things fairly quickly. 655 00:59:05.719 --> 00:59:13.440 But I mean again, it wasn't really intuitive, and especially the cashing validation 656 00:59:14.920 --> 00:59:20.599 thing. Can you elaborate on the caching issues. Yeah, let's say I 657 00:59:20.719 --> 00:59:24.480 really unfamiliar with Yeah, let's say that I want to use the same server 658 00:59:24.599 --> 00:59:30.480 action in two different pages. But the result that I want is that the 659 00:59:30.639 --> 00:59:37.559 data that I want to invalidate is not in a single page, but on 660 00:59:39.079 --> 00:59:44.360 the same page that I triggered the action from. So it means that you 661 00:59:44.440 --> 00:59:49.440 need to start analyzing the path that the action was triggered from. In my 662 00:59:49.599 --> 00:59:52.960 case, and maybe I didn't do it correctly. I literally added the path 663 00:59:53.079 --> 00:59:57.480 of the page as an even input on the form, so I don't need 664 00:59:57.559 --> 01:00:00.079 to do it. I don't need to calculate it myself. So we're just 665 01:00:00.199 --> 01:00:05.760 there. So, for example, if I want to invalidate the data on 666 01:00:06.199 --> 01:00:09.719 a specific user, you need to have the idea of the user and the 667 01:00:10.079 --> 01:00:14.599 l that you want to invalidate, and then instead of trying to calculate it. 668 01:00:14.679 --> 01:00:17.360 I just sent it with the form lata. It's probably how do you 669 01:00:17.519 --> 01:00:20.800 tell it? How do you do that in validation? By the way, 670 01:00:21.159 --> 01:00:24.400 I don't real the function name, but it's called invalidate tag or something like 671 01:00:24.480 --> 01:00:30.320 that. And some weeks since I've done it, don't remember precisely, but 672 01:00:31.239 --> 01:00:35.599 it's the next JS thing. Yeah, it's a next gas thing, not 673 01:00:35.760 --> 01:00:43.719 a reacting Okay, okay, we are close to finishing. I think shy 674 01:00:44.199 --> 01:00:47.760 as anything else you want to talk to say about this project. First of 675 01:00:47.760 --> 01:00:52.880 all is that you said that you kind of ran out of your open ai 676 01:00:52.599 --> 01:00:59.559 quota, but like we need to wait like a month and then be able 677 01:00:59.599 --> 01:01:02.119 to see it or something along these lines. You know, surely I have 678 01:01:02.280 --> 01:01:07.519 your quota instantly run out as our listeners try it out. So what happened? 679 01:01:07.599 --> 01:01:09.440 Is it? I intended to release it only for my daughter and I 680 01:01:09.920 --> 01:01:15.480 open Ai just released their two four preview tourbal model and apparently it costs a 681 01:01:15.599 --> 01:01:20.159 lot. And when I published in the Twitter, it blew up. I 682 01:01:20.239 --> 01:01:28.239 got like twenty thousand impressions and people approached me, strangers and colleagues and family, 683 01:01:28.360 --> 01:01:30.360 like I want to try this. I want to try this, so 684 01:01:30.039 --> 01:01:34.760 concruly, I didn't have a create user form. I created all the users 685 01:01:34.840 --> 01:01:39.400 manually for some of the people that requested, and then I ran out of 686 01:01:40.000 --> 01:01:45.480 quota for my open AI and I paid quite a lot. But my daughter 687 01:01:45.559 --> 01:01:50.760 played it and she lost interest after a week. And that's fine because I 688 01:01:50.800 --> 01:01:54.000 achieved what I wanted. I created an awesome personal, great gift. I 689 01:01:54.079 --> 01:02:02.400 learned a lot technologically, and I think what experience in Jena, and so 690 01:02:02.559 --> 01:02:07.920 yeah, it's achievedains goal. Have you ever wished that you had a group 691 01:02:07.000 --> 01:02:10.280 of people that were just as passionate about writing code as you are. I 692 01:02:10.400 --> 01:02:13.840 know I did. I did that for most of my career. I'd go 693 01:02:13.920 --> 01:02:15.800 to the meetups, I try and create other opportunities, and it was just 694 01:02:15.960 --> 01:02:19.840 really hard, right the meetups. I got some of that, but they 695 01:02:19.880 --> 01:02:22.159 were only like once or twice a month, and it was just really hard 696 01:02:22.199 --> 01:02:25.599 to find that group of people that I connected with and really wanted to, 697 01:02:25.960 --> 01:02:29.679 you know, talk about code a lot, right, I mean, I 698 01:02:29.960 --> 01:02:32.800 love writing code. I think it's the best. And so I've decided to 699 01:02:32.920 --> 01:02:38.400 create this community and create a worldwide community that we can all jump in and 700 01:02:38.440 --> 01:02:42.800 do it. So we're going to have two workshops every week. One of 701 01:02:42.880 --> 01:02:45.719 those or two of those every month are going to be Q and A calls 702 01:02:45.800 --> 01:02:47.880 right where you can get on you can ask me or me and another expert 703 01:02:49.000 --> 01:02:52.360 questions. The rest of them are going to be focused on different aspects of 704 01:02:52.519 --> 01:02:57.519 career or programming or things like that. Right, So it'll go anywhere from 705 01:02:57.599 --> 01:03:00.360 like deployments and containers all the way up to managing your four oh one K 706 01:03:00.480 --> 01:03:05.639 and negotiating your benefits package. Well, we'll cover all of it, okay, 707 01:03:06.199 --> 01:03:09.199 And then we're also going to have meetups every month for your particular technology 708 01:03:09.280 --> 01:03:13.519 area. So we have shows about JavaScript, to react, angular view and 709 01:03:13.800 --> 01:03:15.599 so on. We're going to have meetups for all of those things. I'm 710 01:03:15.599 --> 01:03:19.880 going to revive the freelancer show. We'll have one about that, right so 711 01:03:19.960 --> 01:03:22.599 you can get started freelancing or continue freelancing if that's where you're at. And 712 01:03:23.159 --> 01:03:30.320 I'm working on finding authors who can actually do weekly video tutorials on some thing 713 01:03:30.480 --> 01:03:34.480 for ten minutes. This related again to those technology areas so that you can 714 01:03:34.519 --> 01:03:37.920 stay current, keep growing. So if you're interested, go to topendevs dot 715 01:03:37.960 --> 01:03:43.119 com, slash sign up and you can get in right now for thirty nine 716 01:03:43.159 --> 01:03:45.880 dollars. When we're done, that price is going to go up to seventy 717 01:03:45.920 --> 01:03:52.039 five dollars, and the thirty nine dollars price gets you access to two calls 718 01:03:52.320 --> 01:03:57.239 per week. The full price at one hundred and fifty dollars, which is 719 01:03:57.280 --> 01:04:00.239 going to be seventy five dollars over the next few weeks. That price is 720 01:04:00.320 --> 01:04:03.599 going to get you access to all of the calls and all of the tutorials 721 01:04:03.679 --> 01:04:08.320 and everything else that we put out from top Endevs, along with member pricing 722 01:04:08.920 --> 01:04:13.039 for our remote conferences that are coming up next year. So go check it 723 01:04:13.079 --> 01:04:19.079 out topendevs dot com, slash sign up. Alrighty. So hopefully you will 724 01:04:19.119 --> 01:04:24.800 all have a good reaction to this episode. I know I'm always learning. 725 01:04:25.480 --> 01:04:28.519 Anything I learned about React, I hear about React, I'm learning because I 726 01:04:28.559 --> 01:04:32.360 don't use it. But anything to wrap up before we move on to picks. 727 01:04:33.559 --> 01:04:39.280 Anything you wanted to cover that we did not cover, No, I 728 01:04:39.480 --> 01:04:45.199 think it was. I had a pretty good experience, guys. Good deal. 729 01:04:46.519 --> 01:04:49.000 Alrighty, So that we'll move on to picks. Picks for part of 730 01:04:49.039 --> 01:04:54.880 the show where we get to talk about anything we want to talk about that 731 01:04:55.119 --> 01:05:00.320 isn't tech related or is dec related or anything within reason that's not and get 732 01:05:00.360 --> 01:05:02.559 us fine, So let's see, Dan, I know you had a good 733 01:05:02.559 --> 01:05:06.119 pick for us once you lead us off, after you turn yourself off with 734 01:05:06.199 --> 01:05:12.280 me, Dan, Yeah, my dog was barking really loudly outside, so 735 01:05:12.519 --> 01:05:18.440 I had to mute myself anyway, So yeah, AI is the thing, 736 01:05:18.639 --> 01:05:27.039 So AI's the pick. My first pick is this really amusing channel on YouTube 737 01:05:27.559 --> 01:05:34.039 where he basically has Arnold Schwarzenegger do all sorts of things, usually sing in 738 01:05:34.159 --> 01:05:39.960 all sorts of sorts of roles. So for example, a really popular one 739 01:05:40.119 --> 01:05:46.119 is Arnold Schwarzenegger doing Judy Garland and singing over the Rainbow. There's another one 740 01:05:46.320 --> 01:05:56.800 whether the Arnold Schwartzenegger is a thriller instead of Michael Jackson or doing Whitney Houston. 741 01:05:56.960 --> 01:06:00.519 It's it's really amusing. And by the way, that's just one example 742 01:06:00.599 --> 01:06:06.000 I recently saw here, and you know it won't mean anything for our non 743 01:06:06.159 --> 01:06:12.960 Israeli listeners, but the very known Israeli banned from the seventies. They had 744 01:06:13.280 --> 01:06:17.719 them cover modern songs and it really but in their using you know, their 745 01:06:17.840 --> 01:06:24.079 voices and their singing style. And again it was really amusing, like saying 746 01:06:24.320 --> 01:06:29.960 like new songs being done by an old band that way. So it's really 747 01:06:30.000 --> 01:06:34.639 amusing seeing all these things that can be done with AI. But it can 748 01:06:34.800 --> 01:06:39.760 turn it turns out that this thing can kind of get scary, because there 749 01:06:39.920 --> 01:06:46.039 was this story a while back about how a finance worker at some company in 750 01:06:46.639 --> 01:06:57.000 Hong Kong was conned into paying twenty five million dollars to some hackers after they 751 01:06:57.119 --> 01:07:05.079 tricked him by using deep by deep faking the company's CFO on on a video 752 01:07:05.280 --> 01:07:11.639 chat. So basically he thought he was talking to his CFO who told him 753 01:07:11.719 --> 01:07:15.800 to transfer twenty five million dollars to a certain account, which he did, 754 01:07:16.679 --> 01:07:21.159 uh, and then only thought to try to verify it to get again after 755 01:07:21.280 --> 01:07:29.079 he actually made the transfer. But but yeah, so you know, watch 756 01:07:29.159 --> 01:07:34.119 out for those deep fakes. And I guess those would be my picks for 757 01:07:34.239 --> 01:07:41.719 today. Alrighty aj, you got any picks for us? Even being under 758 01:07:41.760 --> 01:07:51.760 the weather weather, I don't know. Let's see Dune. Dune was re 759 01:07:51.920 --> 01:07:56.920 released in theaters a couple of weeks ago, and then I'm gonna go see 760 01:07:57.000 --> 01:08:02.559 the next part tomorrow, so I'll pick Dune. It's done very well. 761 01:08:03.000 --> 01:08:08.320 Has it. I've heard sort of bearing bearing reviews on it. Yeah, 762 01:08:08.519 --> 01:08:13.039 thank you. I enjoyed the first part. I watched it a while back. 763 01:08:14.000 --> 01:08:20.920 I thought it was fairly accurate to the book. Last week and I'm 764 01:08:20.920 --> 01:08:26.880 accident it was a great experience. The second movie, the second movie. 765 01:08:27.079 --> 01:08:30.279 Yeah, wait, the second movie came out. Oh well, it came 766 01:08:30.319 --> 01:08:31.960 out on Friday, I guess. Yeah, for us it came out and 767 01:08:32.239 --> 01:08:39.399 Tuesday. No way, Yes, movies in Israel are released earlier of the 768 01:08:39.439 --> 01:08:45.199 world's. That's interesting. Okay, Yeah, well, I I think they 769 01:08:45.279 --> 01:08:46.720 did a really good job with the first movie. I think that if they're 770 01:08:46.720 --> 01:08:49.479 going to do the whole series, they got to tone it down a little 771 01:08:49.479 --> 01:08:54.680 bit, because I think when you're when you're introducing something this epic that's been 772 01:08:54.800 --> 01:09:00.960 done so poorly in prior iterations, it's good for it to come out so 773 01:09:00.199 --> 01:09:05.000 bold and strong and dramatic. But if they keep the same tone that they 774 01:09:05.079 --> 01:09:09.119 had for the first movie for every movie, it would be overdoing it. 775 01:09:09.199 --> 01:09:13.359 But I think it was perfect for the first movie. I actually heard, 776 01:09:15.039 --> 01:09:20.119 I actually heard an interesting analysis about the movie, and that's something that the 777 01:09:20.279 --> 01:09:27.600 director actually did right, which that in a lot of ways, the hero 778 01:09:28.760 --> 01:09:34.640 paulma Deep Polo Trades is actually, in lots of ways, really well the 779 01:09:34.720 --> 01:09:40.880 opposite of a hero, because the best thing that he should have done or 780 01:09:40.960 --> 01:09:46.079 could have done, was literally to kill himself like halfway into the book, 781 01:09:47.319 --> 01:09:54.680 because from that point on, basically what he creates is a disaster. I 782 01:09:54.760 --> 01:10:00.920 don't know. I think it's it's this what you're saying appears in the second 783 01:10:01.039 --> 01:10:06.600 movie, and it's really uncanny. By the way, and without spoiling too 784 01:10:06.680 --> 01:10:13.960 much, have you read the book, by the way A j Yeah, 785 01:10:15.319 --> 01:10:19.880 there's probably some parts that I didn't get fully because it is it's kind of 786 01:10:19.960 --> 01:10:24.159 a boring book, like Moby Dick. You know, it's got a lot 787 01:10:24.199 --> 01:10:29.920 of words, a lot of words. Amazing how books tend to have this, 788 01:10:30.960 --> 01:10:33.039 Well, it's got the book has more words than it has story. 789 01:10:33.840 --> 01:10:38.199 You know. It's it's saying a lot without saying a lot. Well, 790 01:10:38.439 --> 01:10:41.479 he does a lot of what he does a lot of world building, so 791 01:10:41.800 --> 01:10:45.600 you really need to be into world building to enjoy the book in a way. 792 01:10:45.840 --> 01:10:48.680 Yeah, I guess that's the hard part about having such an intricate book 793 01:10:48.720 --> 01:10:51.880 making into a movie, because it's really hard to get in all that background 794 01:10:53.880 --> 01:10:57.680 actually in the description. In a certain way, a movie has a certain 795 01:10:58.199 --> 01:11:00.800 it, don't right. Movies can have an advantage in that regard because they 796 01:11:00.880 --> 01:11:06.359 can just show without needing to explain. One of the problems in in the 797 01:11:06.760 --> 01:11:13.439 the old, the original movie, the one who was done by what's his 798 01:11:13.600 --> 01:11:20.039 name by Devalunch exactly was that he literally told the story as he was showing 799 01:11:20.079 --> 01:11:26.199 the story. Uh, you know, it was all there was all like, 800 01:11:26.680 --> 01:11:31.239 everything was narrated. That was one that was one of the problems of 801 01:11:31.319 --> 01:11:35.119 the movie. The other problem was that it was totally incomprehensible to anybody who 802 01:11:35.159 --> 01:11:43.000 didn't read the book. But yeah, you know there was a planned earlier 803 01:11:43.159 --> 01:11:51.439 version, Yeah of course. Yeah, yeah, the the most the most 804 01:11:51.479 --> 01:11:57.840 famous movie that never was never made. Yeah, too bad, by the 805 01:11:57.880 --> 01:12:00.960 way. Yeah, but he actually he planned on totally changing the story, 806 01:12:01.239 --> 01:12:08.960 by the way, Oh yeah, his story was actually totally different. So 807 01:12:09.239 --> 01:12:11.279 all right, before we move on, I'll give you guys one bit of 808 01:12:11.319 --> 01:12:15.000 trivia. And I may have told this before, so apologies that puts a 809 01:12:15.079 --> 01:12:21.840 repeat. But the inspiration for Dune for Frank Herbert was the large dunes on 810 01:12:21.920 --> 01:12:26.079 the southern Oregon coast not too far from where I live. He lived up 811 01:12:26.119 --> 01:12:30.439 in Tacoma, up in Washington, just north of here, and he's talked 812 01:12:30.439 --> 01:12:34.119 about how that was when he went down and saw the dunes like bandon down 813 01:12:34.159 --> 01:12:43.279 that way, that was his inspiration for writing dune yep. Okay, anyway 814 01:12:44.960 --> 01:12:47.720 myself, I'll move on to the the Dad Jokes of a Week, which, 815 01:12:47.840 --> 01:12:51.039 as we all know, the high point of any any of these episodes. 816 01:12:54.000 --> 01:12:56.920 I'm sorry if you weren't Warren shy, but just to be prepared, 817 01:12:58.279 --> 01:13:01.800 So, did you know that penguins produce an oil that helps keep their helps 818 01:13:01.800 --> 01:13:06.239 their feathers retain their heat, you know, And so in other words, 819 01:13:06.279 --> 01:13:12.680 you could say the oily board gets the warm, you know, for those 820 01:13:12.720 --> 01:13:17.720 of the you know what Popeye is you can think about. Let's see, 821 01:13:17.960 --> 01:13:23.720 the other day I went to my doctor said I wasn't feeling good. AJ 822 01:13:23.880 --> 01:13:27.439 might appreciate this one, as I said, Doc, I've got an earache 823 01:13:27.560 --> 01:13:30.760 and flamed sinuses, conjunctivitis and headaches and he but he was really dismissive. 824 01:13:30.840 --> 01:13:38.279 He said, nah, it's all in your head, right, And then 825 01:13:38.319 --> 01:13:43.399 finally I, uh, my wife and I always brush our teeth together separate 826 01:13:43.439 --> 01:13:46.279 toothbrushes by the way, just because I found out that nine out of ten 827 01:13:46.399 --> 01:13:56.279 dentists say that brushing alone won't reduce cavities yet it so that was funny. 828 01:13:56.840 --> 01:14:00.720 That was funny, right, all right? What do you have for any 829 01:14:00.800 --> 01:14:06.720 picks? Any shameless I thought whether to talk about a game, I'm playing 830 01:14:06.960 --> 01:14:11.920 a computer game, or to talk about the to stick with the sci fi 831 01:14:13.359 --> 01:14:16.560 a concept theme that we had area, And we'll stick with the sci fi 832 01:14:16.680 --> 01:14:24.760 one, because Villain. Your next movie is probably Rendezvous with Rama Stick Clo 833 01:14:25.359 --> 01:14:30.680 Drama, which is my favorite book, and I'm really excited if and when 834 01:14:30.960 --> 01:14:34.680 it shows up, and afterwards it's supposed to do Dune Messiah, which is 835 01:14:34.760 --> 01:14:43.079 the third part of the Dune Saka. Do you know did you read Rama? 836 01:14:44.920 --> 01:14:49.880 I myself have not. I don't know where. Then when its basically, 837 01:14:50.359 --> 01:14:56.479 without spotting too much, it's basically futur a futuristic art sci fi book 838 01:14:57.560 --> 01:15:05.199 about cylindrical spaceship that enters the Solar System and how humans interact and explore it. 839 01:15:05.479 --> 01:15:13.760 And I'm a big art sci fi fan, so the book is one 840 01:15:13.800 --> 01:15:16.880 of my favorites art sci fi. I haven't heard that term before. Yeah, 841 01:15:17.159 --> 01:15:21.279 art sci fi is basically science fiction that tries to cling through reality, 842 01:15:21.600 --> 01:15:27.039 unlike, for example, sci fi, which has a lot of aliens and 843 01:15:28.079 --> 01:15:31.520 a bit our tangent to fantasy, like Star Wars, which is definitely not 844 01:15:31.680 --> 01:15:42.960 sci fi. So it usually touches things like futurism, solar system exploration, 845 01:15:44.159 --> 01:15:51.479 and things that really cling into real science. Okay, cool, I like 846 01:15:51.520 --> 01:15:58.720 to alrighty, so that we are going to wrap up this episode of job 847 01:15:58.800 --> 01:16:02.800 Scripture. We lost and but a j still here. I'm still here, 848 01:16:02.840 --> 01:16:08.520 shy here. Thank you all for watching slash listening, and we will talk 849 01:16:08.520 --> 01:16:13.800 to you next time on javiscript jabber h