WEBVTT 1 00:00:05.200 --> 00:00:09.759 Hello, Welcome to React Roundups, the podcast where we keep you updated on 2 00:00:09.839 --> 00:00:17.760 all things React related. This show is sponsored by Raygun and produced by Topendeves 3 00:00:17.760 --> 00:00:21.800 and on board. Top and Doves is where we create topendves who get top 4 00:00:21.839 --> 00:00:27.120 and pay and recognition while working on interesting problems and making meaningful community contributions. 5 00:00:27.559 --> 00:00:34.119 An Void provides remote design and software development services on a task basis, so 6 00:00:34.200 --> 00:00:39.439 clients only pay when tasks are delivered and approved, which is the safest way 7 00:00:39.479 --> 00:00:45.840 to extend your design and software development us. In today's episode, we will 8 00:00:45.920 --> 00:00:52.560 talk about the libraries we used in our general React projects. So which libraries 9 00:00:52.600 --> 00:00:58.840 do we commonly end up installing in our projects. My name is Lucas Paganini. 10 00:00:59.240 --> 00:01:03.359 One of the hosts in the podcast and joining me in today's episode is 11 00:01:03.759 --> 00:01:14.439 Chris Ruen, Hi everyone, and Peter Ossa. Hi. Everyone. All 12 00:01:14.560 --> 00:01:19.319 right, so let's get to it. Chris, let's start with you. 13 00:01:19.359 --> 00:01:26.280 So what do you generally use in your React projects? Of course, the 14 00:01:26.359 --> 00:01:33.400 main question is with regards to libraries that you end up installing, but it 15 00:01:33.480 --> 00:01:41.959 could be some other form of utilities too. Yeah. So I was taking 16 00:01:41.959 --> 00:01:46.439 a look here at one of my recent projects, and of course I can't 17 00:01:46.439 --> 00:01:49.239 believe I forgot it is the top one would have to be bootstrapped, so 18 00:01:49.280 --> 00:01:56.799 I'm a big bootstrap guy. I know tailwind is catching on, so there's 19 00:01:56.840 --> 00:02:01.400 that one Otherwise, also though, I guess like staples for me are of 20 00:02:01.400 --> 00:02:09.280 course the React reducks library and then the the reducs toolkit, so those probably 21 00:02:09.319 --> 00:02:15.000 I have probably in almost every project. And then along with Reducs, there's 22 00:02:15.000 --> 00:02:21.080 a nice Persist library, and basically what that does is handles a kind of 23 00:02:21.199 --> 00:02:25.520 keeping. You can configure what you want in your reduc store to stay in 24 00:02:25.759 --> 00:02:31.520 local storage, for example, or different parts of your state. So those 25 00:02:31.520 --> 00:02:36.240 are a few. I think as we go through the episode, maybe we 26 00:02:36.240 --> 00:02:40.560 can get into some more some other stuff I'm always on the hunt for, 27 00:02:43.240 --> 00:02:49.560 like charting libraries and things like that, and other UI libraries, so maybe 28 00:02:49.560 --> 00:02:54.280 we can get into that. I actually have some questions about some of those 29 00:02:54.319 --> 00:03:00.520 libraries that you mentioned, so before we go to Topeter, you meant this 30 00:03:00.159 --> 00:03:08.240 last library, which is to persist the state of your reducers into local storage 31 00:03:08.400 --> 00:03:15.560 or probably index TB two depending on the size of your state. I'd like 32 00:03:15.639 --> 00:03:21.439 to know a bit more about this library, because I think a lot of 33 00:03:21.479 --> 00:03:25.800 people. If it's like a very transparent addition on top of reducts, I 34 00:03:25.840 --> 00:03:30.639 think it could be beneficial to a lot of people because they can get rid 35 00:03:30.680 --> 00:03:36.319 of that initial load in which you don't have anything to show, and you 36 00:03:36.319 --> 00:03:42.319 can at least show the stale data that you had from the previous session. 37 00:03:42.960 --> 00:03:47.719 So I wonder how much setup do you need to integrate that with React reducts, 38 00:03:49.319 --> 00:03:53.080 and yeah, just overall, how do you use the library? Yeah, 39 00:03:53.120 --> 00:04:00.759 so it's pretty I mean for just an initial configuration, I think it's 40 00:04:01.039 --> 00:04:05.439 pretty painless. You just have to add a few lines to like your wherever 41 00:04:05.479 --> 00:04:13.080 you're configuring your store, and that's where I mean. I think initially by 42 00:04:13.159 --> 00:04:16.920 default you can just say okay store at all and that's it's like two or 43 00:04:16.959 --> 00:04:21.199 three lines. It's all on there on the project's get hub, on the 44 00:04:21.319 --> 00:04:26.839 on the read me. But then, of course typically it makes sense. 45 00:04:27.199 --> 00:04:31.240 You know, you're only persisting I don't know certain parts, certain branches of 46 00:04:31.279 --> 00:04:38.600 your state. And I believe I'm not lying. I believe it also can 47 00:04:38.639 --> 00:04:45.040 work or React Native, but I'm not sure. It's been a while since 48 00:04:45.079 --> 00:04:48.600 I worked on a React native project. Yeah, like you said, it's 49 00:04:48.800 --> 00:04:54.199 it's super nice. Uh, so that you don't have to write any of 50 00:04:54.199 --> 00:05:00.000 that local storage logic yourself, because that can always be kind of true, 51 00:05:00.480 --> 00:05:03.040 or or you get stuff that keep sticking around when you don't want it to, 52 00:05:03.160 --> 00:05:12.040 and and and so on. So yeah, it's it's not too too 53 00:05:12.120 --> 00:05:16.560 hard. I guess it's the my final answer. It's pretty easy to get 54 00:05:16.560 --> 00:05:21.639 started. And again, what's the name of the library reducs persists, So 55 00:05:21.759 --> 00:05:30.639 reducs dash persists should pop up. Oh yeah, interesting to know about it. 56 00:05:30.560 --> 00:05:36.560 It's true this right. Have you used that one too, Peter, 57 00:05:38.639 --> 00:05:42.000 Yeah, yeah, yeah, I actually used this for all my and all 58 00:05:42.040 --> 00:05:46.759 my podresdocs. It's kind of really could in the sense that it's you. 59 00:05:46.879 --> 00:05:49.240 I think you. I think you don't need to add it to where you're 60 00:05:49.240 --> 00:05:54.720 creating your redoc store, and that should you walk out right to it to 61 00:05:54.920 --> 00:05:58.519 just kind of persist every store you have to stop so you don't need to 62 00:05:58.639 --> 00:06:03.879 worry about that fast love, but you have empty datail something. Yeah, 63 00:06:04.319 --> 00:06:06.959 it's really good, you know. I think it's simple and of adopt the 64 00:06:08.079 --> 00:06:15.199 mp MPM on the chart here. I sent it on the comment section two 65 00:06:15.360 --> 00:06:24.480 for anyone listening that wants to check out the link. Yeah, and Chris, 66 00:06:24.519 --> 00:06:30.279 what about other areas? So for example, you mentioned stuff very related 67 00:06:30.360 --> 00:06:36.240 to state, but there's also testing. So for example, I don't know 68 00:06:36.279 --> 00:06:45.360 if you use Jazz or uh, Jasmine, Karma whatever for unit tests and 69 00:06:45.399 --> 00:06:49.040 for end to end tests. A lot of people are starting to divide themselves 70 00:06:49.079 --> 00:06:56.800 between Cyprus and Playwright. So there are those other complementary areas too, And 71 00:06:56.839 --> 00:07:02.560 even in terms of your package manager, like do you use NPM yarn bun 72 00:07:05.120 --> 00:07:11.920 Yeah. So if I'm a I do like Jess, and I'm a Cypress 73 00:07:11.920 --> 00:07:15.439 guy as well. I really like the Cypress project. I think they do 74 00:07:15.480 --> 00:07:19.639 a really nice job, and you can even I know it's like the priority 75 00:07:19.800 --> 00:07:24.839 or or the main I guess like the main thing you would use it for 76 00:07:24.959 --> 00:07:27.720 is end to end test. But I've even written just because it's so nice 77 00:07:27.720 --> 00:07:31.199 to use. I've even written like integration tests, and they have ways of 78 00:07:31.240 --> 00:07:39.040 doing that as well, like API tests. And I'm also so this is 79 00:07:39.079 --> 00:07:43.959 a maybe it's an unpopular opinion. I am an NPM guy through and through. 80 00:07:44.399 --> 00:07:48.720 I have always argued against YARN. I think I understood why there was 81 00:07:48.839 --> 00:07:55.920 yarn like long ago because something there was some like major almost like a bug 82 00:07:55.959 --> 00:08:00.480 in NPM. I can't remember. It was so long ago, and issues 83 00:08:00.519 --> 00:08:03.040 that Yarn kind of stuck around. I think just because of that, And 84 00:08:03.680 --> 00:08:07.160 I don't know, I've never seen I've actually had issues when I tried to 85 00:08:07.240 --> 00:08:11.439 use Yarn and install stuff, like everything would break. So but I'm very 86 00:08:11.600 --> 00:08:16.079 opinionated about that, so I've always used MPM and never had a problem. 87 00:08:18.360 --> 00:08:24.000 For me, like because NBM is the it just seems redundant, like there's 88 00:08:24.000 --> 00:08:28.839 an extra package around a package manager. I don't know. You guys can 89 00:08:28.879 --> 00:08:33.519 of course totally go against me, because I know there's huge fans of Yarn, 90 00:08:33.080 --> 00:08:39.559 but that's just me. So I think most people that I spoke to 91 00:08:39.639 --> 00:08:46.679 there in favor of Yarn say that it is just more performance. But honestly, 92 00:08:48.039 --> 00:08:54.039 I never felt that the performance differences between Yarn and NPM were enough for 93 00:08:54.080 --> 00:09:00.120 me to consider switching to it. It's like it's gonna take a while no 94 00:09:00.240 --> 00:09:03.919 matter what you do, because you're installing everything. So it could be faster 95 00:09:05.000 --> 00:09:07.840 if you just install the packages that you don't already have installed, but I 96 00:09:07.840 --> 00:09:11.240 don't even like to do that. I prefer to do a clean stall when 97 00:09:11.279 --> 00:09:16.399 I'm just pulling a branch that has updates in packageason, I don't want to 98 00:09:16.519 --> 00:09:22.480 just install the differences. I want to clean everything and reinstall. So I 99 00:09:22.519 --> 00:09:26.480 don't think YARN would make much of a difference there. But and by the 100 00:09:26.480 --> 00:09:33.799 way, I actually even think that if you're comparing, if you're deciding Yarn 101 00:09:33.919 --> 00:09:39.080 just because of the performance benefits. I'm not sure about the benchmarks, but 102 00:09:39.759 --> 00:09:45.879 I believe P ANDPM would be even faster. So if you just choose something 103 00:09:45.960 --> 00:09:50.759 based on marginal performance gains, then you're going to keep switching them all the 104 00:09:50.799 --> 00:09:56.120 time. But what I did, and it took me a while because I've 105 00:09:56.159 --> 00:09:58.480 always just used NPM, just like you, Chris, I've always been in 106 00:09:58.600 --> 00:10:05.080 favor of just MPM. There was no reason for me to explore the complexity 107 00:10:05.120 --> 00:10:09.000 of learning another package manager, and every time I tried to use others, 108 00:10:09.399 --> 00:10:13.120 I had bad experiences. In some cases, I don't have a choice. 109 00:10:13.159 --> 00:10:18.480 It's just a project that I don't control. So yeah, but what I 110 00:10:18.519 --> 00:10:28.399 am doing currently is using BUN only on CI and only on CI first, 111 00:10:28.679 --> 00:10:33.919 because Bun, as far as I know, has not yet released a version 112 00:10:33.120 --> 00:10:39.480 compatible with Windows, so I can't encourage a team of developers to use it 113 00:10:39.600 --> 00:10:45.000 if the support is not there for everyone. But when we're running on CI, 114 00:10:45.240 --> 00:10:50.519 it's saw Linux, so there's not been holding us from using BUND there. 115 00:10:50.879 --> 00:10:54.519 And you can't use BUN just as a package manager, not as a 116 00:10:54.679 --> 00:11:00.120 node, not as a full replacement for node, because it can also execute 117 00:11:00.240 --> 00:11:03.120 JavaScript and types could go. But you can use it just to install the 118 00:11:03.159 --> 00:11:13.919 packages. And to me that actually made sense because the differences between installing with 119 00:11:15.080 --> 00:11:22.840 the BUND versus NPM are really major. It's almost like two or three times 120 00:11:22.919 --> 00:11:26.679 faster if you're like doing a clean stall. If you already had some of 121 00:11:26.720 --> 00:11:30.559 the dependencies there, it would be even faster, but if you're just doing 122 00:11:30.559 --> 00:11:37.720 a clean stall, it's still faster. So just because in CI, I 123 00:11:37.879 --> 00:11:41.159 want to optimize things as much as possible, because I hate the experience of 124 00:11:41.679 --> 00:11:48.720 a developer finishing their work, sending it to get help or something, and 125 00:11:48.759 --> 00:11:54.440 then having to wait five minutes to get an answert, you know, So 126 00:11:54.639 --> 00:11:58.279 I always try to optimize CI as much as possible so that it runs in 127 00:11:58.559 --> 00:12:05.960 like ideally up to three minutes, but it should give you. It should 128 00:12:07.080 --> 00:12:11.360 cash as many things as possible to speed things up, and only do the 129 00:12:11.399 --> 00:12:16.600 calculations that he needs to do. So yeah, force CII use BUND. 130 00:12:16.639 --> 00:12:18.840 For every other situation, I just use NPM. I agree with you. 131 00:12:18.879 --> 00:12:24.279 I think doesn't make sense to me to use a different package manager. What 132 00:12:24.360 --> 00:12:28.399 about you, Peter? What do you think about this? Oh? Sorry, 133 00:12:28.440 --> 00:12:31.799 Chris? Yeah, I just wanted to quickly no, because I haven't 134 00:12:31.840 --> 00:12:37.000 used BUND. But even on their website they list like against NPM and YARN 135 00:12:37.039 --> 00:12:41.480 and pn PNPM, Yarn is the slowest. So I don't know what happened, 136 00:12:41.480 --> 00:12:46.759 but yeah, and I just quickly wanted to mention maybe before we move 137 00:12:46.799 --> 00:12:52.440 on, I know that Yarn was maybe good in the sense because NPM saw 138 00:12:52.480 --> 00:12:54.840 what they did and they were like, oh man, we need to kind 139 00:12:54.840 --> 00:12:58.960 of like get our act together. And I think ever since like two or 140 00:12:58.000 --> 00:13:03.080 three years ago, they really focused on those install times and everything. But 141 00:13:03.120 --> 00:13:05.519 now I guess they they're back to having YOUNG and beat. So so, 142 00:13:05.600 --> 00:13:09.799 Peter, what do you think about this? Okay, Well, my project, 143 00:13:09.919 --> 00:13:15.639 I kind of alternate between PMPM and YOUNG. Yeah. I use PMP 144 00:13:15.799 --> 00:13:20.080 and Young alternity because first of all, for Young, the idea of kind 145 00:13:20.120 --> 00:13:24.919 of packaging or the package like compiling and all the packages at first before installing 146 00:13:24.960 --> 00:13:30.879 them was kind of okay. Yeah, especially at the point where I had 147 00:13:30.960 --> 00:13:35.279 like bad reception. Usually we're using MPM but just installed everything beats by bait 148 00:13:35.399 --> 00:13:41.120 and then we're having like maybe issues with network or something white kind of breaks 149 00:13:41.159 --> 00:13:45.679 and then you have, yeah, get some kind of errors, could cob 150 00:13:45.799 --> 00:13:48.919 some stuff. So yeah, I had to use them because of that first 151 00:13:48.919 --> 00:13:54.279 step, right, and not really because of his fast off, but just 152 00:13:54.919 --> 00:13:58.360 the installation was kind of much packaged and better. The PMPN was kind of 153 00:13:58.639 --> 00:14:05.960 yes, the feature of kind of sharing, it doesn't like it's not modus, 154 00:14:05.960 --> 00:14:11.159 so it doesn't really like replicate dependencies. Like maybe you are installing dependencies 155 00:14:11.159 --> 00:14:13.240 and you have like two similar types, it's going to kind of put it 156 00:14:13.440 --> 00:14:18.120 under one bell and then use that that kind of stuff. So yeah, 157 00:14:18.159 --> 00:14:22.120 I think that was also what I did for the package management the side. 158 00:14:22.120 --> 00:14:26.000 But then as alongside outside that I've just born for kind of personal projects. 159 00:14:26.200 --> 00:14:30.960 I've written a lot about it as well. For the Proact application I worked 160 00:14:31.000 --> 00:14:35.600 on, it was kind of okay, but like when I did that then 161 00:14:35.120 --> 00:14:39.840 I think that was like on the point versions all point something, right, 162 00:14:39.879 --> 00:14:45.399 so it doesn't it goes up to version one, so I really yeah, 163 00:14:45.759 --> 00:14:48.360 I wouldn't. I've not really used it as one at the moment though, 164 00:14:48.519 --> 00:14:54.000 to see maybe if it's there's a lot of improvements. But I used I 165 00:14:54.080 --> 00:14:56.320 kind of visit officially for just projects, but you don't not like you see 166 00:14:56.360 --> 00:15:07.240 young GMP. So yeah, so that's interesting because we were just talking about 167 00:15:07.320 --> 00:15:11.320 how we are in favor of NPM, and then Peter starts with I either 168 00:15:11.480 --> 00:15:18.279 use yarn or p n PM, like he never uses NPM. So it's 169 00:15:18.399 --> 00:15:26.159 nice nice, I like this. I like this. Yeah, yeah, 170 00:15:26.480 --> 00:15:30.879 yeah, the diversity. That's a good point, I think, I because 171 00:15:31.080 --> 00:15:35.799 maybe I mean, I yeah, good diversity. And I have no experience 172 00:15:35.840 --> 00:15:39.879 with the other two with the Yarner or Bond or pn PM, but I 173 00:15:39.000 --> 00:15:43.960 yeah, that's if yarn. So yarn does cash like previous downloads, that 174 00:15:45.000 --> 00:15:46.639 could be I mean, that could be nice because if you have like I 175 00:15:46.679 --> 00:15:50.399 know, like when I'm on the train or whatever, like if I had 176 00:15:50.559 --> 00:15:56.919 to install like I'm I'm toasted. So that's maybe a feature. No MPM. 177 00:15:58.840 --> 00:16:00.279 I don't know. I just I don't know enough experience with all these 178 00:16:02.080 --> 00:16:11.159 all these tools. Yeah, I think there was also a time where Yarn 179 00:16:11.320 --> 00:16:17.840 had workspaces and NPM didn't right, So a lot of people started using yarn 180 00:16:17.960 --> 00:16:26.159 because of that feature, the idea of having your repository b conglomerate of packages 181 00:16:26.240 --> 00:16:33.759 that import each other. So yeah, nowadays, I believe NPM already has 182 00:16:33.799 --> 00:16:40.159 workspaces. I gotta be honest, I haven't used it for real, because 183 00:16:40.320 --> 00:16:45.639 every time I wanted to have mono repo, I just went straight to NX 184 00:16:45.279 --> 00:16:49.879 that it gives me a lot more power than just NPM workspaces. So never 185 00:16:51.000 --> 00:16:56.240 really used NPM workspaces in a production application. But yeah, I think that 186 00:16:56.679 --> 00:17:03.319 there was this this point, Tore, I like to go back in one 187 00:17:03.599 --> 00:17:07.000 other thing that you said, Gritz, and then we got to go into 188 00:17:07.240 --> 00:17:14.160 what Peter uses because now I'm curious, like maybe he uses things that are 189 00:17:14.240 --> 00:17:18.400 super different from the ones that we are using. But I want to go 190 00:17:18.480 --> 00:17:26.960 back to testing again and talk about Cypress and Playwright because I've been really interested 191 00:17:27.039 --> 00:17:33.160 in Playwright lately, because don't get me wrong, I've always had great experiences 192 00:17:33.200 --> 00:17:41.039 with Cypress, except with their asyncowight madness, because they did that thing where 193 00:17:41.079 --> 00:17:48.559 they make a synchronous code look like it is synchronous so that it would be 194 00:17:48.599 --> 00:17:55.200 easier for people to get started. But and yeah, this is cool at 195 00:17:55.240 --> 00:18:00.000 first, but as soon as you actually want to include other utaies in your 196 00:18:00.279 --> 00:18:08.160 back files that are indeed asynchronous, everything goes to help. And I have 197 00:18:08.319 --> 00:18:15.240 spent so much time trying to get an API client to work within Cyprus, 198 00:18:15.519 --> 00:18:22.319 and it just it's impossible, Like you have to use the Cypress APIs to 199 00:18:22.440 --> 00:18:30.519 make attP requests because otherwise then everything goes out of order and by the time 200 00:18:30.640 --> 00:18:37.440 it runs your code, it hasn't really waited for that promise to return, 201 00:18:37.599 --> 00:18:44.200 and it's just really a nightmare. So I'm really happy that Playwright doesn't have 202 00:18:44.279 --> 00:18:51.880 that, and you just have regular asyncle weight. So I've been interested in 203 00:18:51.960 --> 00:18:56.200 learning more about it, honestly, though, I don't know of many other 204 00:18:56.359 --> 00:19:00.440 features, of many other differences between Playwright and so vipress. Besides that, 205 00:19:02.480 --> 00:19:08.599 I suppose that it would also be more cost effective for companies because Cyprus is 206 00:19:08.640 --> 00:19:11.400 a company. Right at the end of the day, they have to pay 207 00:19:11.440 --> 00:19:15.559 their bills and the only way that they have to do it is by monetizing 208 00:19:15.880 --> 00:19:25.119 Cyprus itself. The tool, but Playwright is was created by Microsoft, and 209 00:19:25.319 --> 00:19:30.160 I don't think Microsoft gives it, you know, I don't think they care 210 00:19:30.559 --> 00:19:34.799 at all about making money with that. It's like if they were to make 211 00:19:34.839 --> 00:19:41.599 money with that, it would be so ridiculously small compared to their other income 212 00:19:41.680 --> 00:19:47.000 sources that I think they just don't care. And that to me is appealing 213 00:19:47.400 --> 00:19:55.759 because I believe that we would be able to have a complete experience of the 214 00:19:55.839 --> 00:20:03.079 tool without needing to pay what would only pay to have Cyprus parallelization and video 215 00:20:03.160 --> 00:20:08.319 recordings and and things like that. So yeah, I'm still going through their 216 00:20:08.400 --> 00:20:12.880 dogs to to see more, to understand more about their differences, but it's 217 00:20:12.880 --> 00:20:18.960 definitely something that I've been interested. So I wonder if you guys have studied 218 00:20:18.039 --> 00:20:22.559 a bit about playwright. Yeah, so I, for one, not religious 219 00:20:22.559 --> 00:20:26.839 to play right kind of. I think I'm moved like a said plus guide 220 00:20:26.160 --> 00:20:32.599 so religious for it through I think the one I kind of hope. I 221 00:20:32.599 --> 00:20:37.759 don't even know about coopetia, so also I know that, but I think 222 00:20:37.799 --> 00:20:42.240 I've just dot I won't well, I think cyplus is too in my opinion, 223 00:20:42.279 --> 00:20:45.960 but a bit, although I can't really see because I won't used to 224 00:20:45.960 --> 00:20:51.200 play right. So maybe any average choice of a change of mind and I 225 00:20:51.319 --> 00:20:56.279 kind of exploit Yeah, I think I'm in the same position as as both 226 00:20:56.359 --> 00:21:02.079 you guys. I mean, I know sich I. The only reason I 227 00:21:02.119 --> 00:21:06.960 know of play right actually is I'm working on a Blazer app for work, 228 00:21:07.240 --> 00:21:11.000 and so I was naturally kind of led in the Microsoft path and oh they 229 00:21:11.039 --> 00:21:14.440 have this end to end tool as well. But I would guess, I 230 00:21:14.440 --> 00:21:21.039 mean as like as my experience with software goes like it's slightly newer than sorry 231 00:21:21.079 --> 00:21:25.599 Cypress, so my guess is, and it looks I think, like you 232 00:21:25.640 --> 00:21:29.720 said, Lucas, it looks like Cypress, it looks like I'm reading Cypress 233 00:21:29.759 --> 00:21:33.680 code. So I would guess like if they've kind of fixed any of the 234 00:21:33.720 --> 00:21:38.559 weird quirks with Cypress but have almost the same feature set, h you know, 235 00:21:38.640 --> 00:21:45.759 it would definitely definitely for something for me to look into further. Yeah, 236 00:21:45.799 --> 00:21:48.759 Peter also mentioned I forgot Puppeteer as well. That's a great tool and 237 00:21:48.799 --> 00:21:52.839 I even use that not just for testing, but you can do you know, 238 00:21:52.960 --> 00:21:56.119 other stuff, any any sort of automation or in screenshots and stuff too, 239 00:21:57.839 --> 00:22:02.279 So I guess I guess it. And so Puppeteers sometimes feels like super 240 00:22:03.359 --> 00:22:07.200 like lightweight, like in two or three lines you can do stuff, whereas 241 00:22:07.440 --> 00:22:11.240 yeah, with Cyprus, of course you're probably doing actual testing or something of 242 00:22:11.279 --> 00:22:18.559 that nature. So interesting stuff. Yeah, nice, nice note. So 243 00:22:18.640 --> 00:22:26.000 Peter, now it's the time. Yeah, Now this is a time where 244 00:22:26.720 --> 00:22:30.680 you say, yeah, guys, I don't use any of the things that 245 00:22:30.720 --> 00:22:36.640 you mentioned. I use those other hipster technologies. So yeah, tell us 246 00:22:36.759 --> 00:22:41.839 what is it that you use in your React projects? Okay, yeah, 247 00:22:42.279 --> 00:22:48.400 from my React But just first of all, I justly doing Yeah, so 248 00:22:48.519 --> 00:22:53.440 I'm dealing with guys. So yeah, I was before like from yeah, 249 00:22:53.920 --> 00:22:57.279 just cast me, I'm took me away. So yeah, so yeah, 250 00:22:57.599 --> 00:23:02.680 first of all you went my design system. Then yeah, if I want 251 00:23:02.720 --> 00:23:07.119 to probably kind of vieild a design system like within that will probably pick something 252 00:23:07.359 --> 00:23:15.759 like maybe anti design or materia u y maybe for more functionality. Right, 253 00:23:15.519 --> 00:23:18.759 then if I de said okay, I just want to build everything babboom from 254 00:23:18.759 --> 00:23:22.240 Scratcher, probably just you still with them, go with THESSL. Right. 255 00:23:22.400 --> 00:23:27.720 So then for state management, I kind of work with a lot kind of 256 00:23:27.759 --> 00:23:32.599 I use different types personalities. First of all, for service states, I 257 00:23:32.680 --> 00:23:36.799 use the Artquay, right, So if I want to hunt to serve states, 258 00:23:36.920 --> 00:23:38.720 I used the arth Carey. Most of the time. I probably use 259 00:23:40.119 --> 00:23:45.119 the Artquay for most of my proof like you don't matter like my state management, 260 00:23:45.160 --> 00:23:48.880 because for most of my projects, I will need maybe close to an 261 00:23:49.000 --> 00:23:56.119 endpoint to an API that's server state and from the Earthquay kind of those those 262 00:23:56.160 --> 00:24:00.480 great and handling server states. Right then, But then if I just want 263 00:24:00.000 --> 00:24:06.599 a layer of client state management, I go to either redogs those stands. 264 00:24:06.640 --> 00:24:10.000 I use those stand as well to stay from all those stands well, and 265 00:24:10.039 --> 00:24:11.960 then there's still Jota. Juta is I'm not going to actually use. I 266 00:24:11.960 --> 00:24:18.119 love Juta. It's so simplistic, but does gives the feeling of you're using 267 00:24:18.119 --> 00:24:22.720 a very powerful state management to board. Then it's loos like you state, 268 00:24:22.880 --> 00:24:26.440 like just like your regular yard states, like I'm at like, just so 269 00:24:26.559 --> 00:24:30.160 simplistic. So that's why I love Judai. Like using Juta, I probably 270 00:24:30.200 --> 00:24:33.880 would recommend using Jutah for maybe if you have something like a microphontain system maybe 271 00:24:33.920 --> 00:24:40.319 where you kind of share states between different applications, you're just using Juda is 272 00:24:40.400 --> 00:24:45.680 kind of very efficient because it's easy to It's just like I just like the 273 00:24:45.759 --> 00:24:48.240 boiler play the hook codes. It's just like you state. It's so simple 274 00:24:48.599 --> 00:24:55.400 right, you don't need much boiler plate stuff to set up not that right, 275 00:24:55.480 --> 00:24:59.480 So I use that for like small projects like projects I know that you 276 00:24:59.519 --> 00:25:02.920 are. We just work with that. Then stand as well too. I 277 00:25:03.079 --> 00:25:06.400 think I kind of still use those stands for like React native stuff, so 278 00:25:06.440 --> 00:25:11.200 I work on and then sometimes when React applications, then readults is kind of 279 00:25:11.279 --> 00:25:15.720 like you go to if I see this app is gonna get very very big, 280 00:25:15.839 --> 00:25:19.400 and yeah, I'm based on Also like I have this kind of partiality 281 00:25:19.440 --> 00:25:25.000 to redults. It was like my first dis management stuff, so kind of 282 00:25:25.039 --> 00:25:29.920 have like this partial love for redocts. Right. So yeah, so from 283 00:25:29.960 --> 00:25:34.440 that I see the other packages as well, like maybe things like defereness for 284 00:25:34.920 --> 00:25:38.920 this time, I was using moments before, but the moment got deprecated, 285 00:25:40.119 --> 00:25:44.039 so I deed oh no, no, no, I can't use that, 286 00:25:44.240 --> 00:25:48.480 so the data ferdness yeah for this. There are still also maybe things like 287 00:25:49.519 --> 00:25:55.599 load dash once like if I'm even going to use load dash kind of partially, 288 00:25:55.759 --> 00:25:59.880 but most of the time I depend on maybe I think some utilities myself 289 00:26:00.119 --> 00:26:03.599 kind of, but sometimes I could use loadash for maybe if I if I 290 00:26:03.640 --> 00:26:07.000 see look at this group of the project, it kind of requires a lot 291 00:26:07.039 --> 00:26:12.000 of manipulations from kind of high competitions that will come me to manupulate always do 292 00:26:12.119 --> 00:26:15.599 certain things, and I need to do them in quick time, right, 293 00:26:15.680 --> 00:26:22.359 so probably use loadash this then. Yeah, I think that's just basically the 294 00:26:22.559 --> 00:26:29.039 found this let just the fundamental part. Any other package I probably based on 295 00:26:29.079 --> 00:26:32.400 the need, and maybe like charts. If I'm working to analytics, I 296 00:26:32.440 --> 00:26:37.799 probably use like charts or shout out with apex chats. Yeah, so I 297 00:26:37.880 --> 00:26:41.200 use a pegs chat as well, and then after that, Yeah, I 298 00:26:41.200 --> 00:26:45.680 think that's just technically do for me. So what do you think, like, 299 00:26:45.839 --> 00:26:53.400 do I is it weird? Do is it's kind of strange? I 300 00:26:53.400 --> 00:27:00.440 think you're definitely the hipster among us. There were some live is that you 301 00:27:00.519 --> 00:27:06.359 mentioned that I don't even know how to write them, so definitely you win, 302 00:27:07.079 --> 00:27:12.880 you win the game. Wow. Yeah, So I think that's technically 303 00:27:12.960 --> 00:27:18.519 well, well, there's for testing obviously, there's digest, right, and 304 00:27:18.720 --> 00:27:25.920 there's the sideways. Yeah. Apart from that fundamentally, then probably if I 305 00:27:25.920 --> 00:27:30.680 if I want to go step further, I could maybe use like if I'm 306 00:27:30.720 --> 00:27:34.480 just being lazy, things like maybe some infinite school packages or I could just 307 00:27:34.559 --> 00:27:38.319 like to look for that then I think there was a day I became so 308 00:27:38.400 --> 00:27:41.880 lazy that I kind of installed the packages for like this, you know, 309 00:27:42.359 --> 00:27:47.720 events for publication when you click outside of a menu and then you want that 310 00:27:47.920 --> 00:27:51.640 pass the close like the men you open a menu. Ya. So yeah, 311 00:27:51.839 --> 00:27:53.359 I just became lazy. You want there, I just study package for 312 00:27:53.400 --> 00:27:57.799 that. So usually a hook would do that, though I just decided to 313 00:27:57.880 --> 00:28:02.519 do that. So sometimes I just be very lyad and I just said to 314 00:28:02.599 --> 00:28:06.720 those picks some packages. But on the Norther movie, I will just probably 315 00:28:06.720 --> 00:28:11.440 write them myself. Well tho just copy them from Like could I have like 316 00:28:11.480 --> 00:28:14.240 a catalog of cood I use kind of so just take it from there, 317 00:28:14.440 --> 00:28:18.839 we use it. Yeah, yeah, like that, there's that React hook 318 00:28:18.960 --> 00:28:22.759 site. I also I also like I'm weird. I know I can just 319 00:28:22.799 --> 00:28:26.759 install the library, but I don't want the whole thing, so I just 320 00:28:26.839 --> 00:28:30.799 copy like the few hooks that I want, but I would be I just 321 00:28:30.839 --> 00:28:36.000 added a bunch of stars to my GitHub. So thanks for all those. 322 00:28:36.319 --> 00:28:40.000 But I'd love to hear more about this. The React query So is that 323 00:28:40.039 --> 00:28:45.039 for like, does it like help you simplify API calls or or like what 324 00:28:45.039 --> 00:28:48.839 what is it? Well? React qual It's kind of really nice in the 325 00:28:48.880 --> 00:28:52.920 sense that for savistys, right, you know, most of the time you 326 00:28:52.000 --> 00:28:56.319 have we kind of work with API calls, right, so you see that 327 00:28:56.440 --> 00:29:02.359 the aspect of Sevasti stoying the data for Sevasti and then cashing it, prefetching 328 00:29:02.400 --> 00:29:04.240 it when you need it, and so on and so forth, like that 329 00:29:04.359 --> 00:29:08.119 does evolving end points APIs and so on. Yeah, so the art Corey 330 00:29:08.279 --> 00:29:14.240 kind of works with that or and like you technically if if more for it 331 00:29:14.400 --> 00:29:21.400 kind of very API heavy app you may actually just multiple use a client states 332 00:29:21.400 --> 00:29:25.599 manager like a widows or Juti or those stump if you actually do it very 333 00:29:25.680 --> 00:29:30.240 work kind of we just use the art qualer just fetching. Probably for example 334 00:29:30.519 --> 00:29:33.680 an e commerce up, you just use your creed to kind of cash the 335 00:29:33.880 --> 00:29:40.480 products the wi fish and a PI and then with the identifier you could get 336 00:29:40.599 --> 00:29:45.319 the that same data cast like you could do a lot with the art query. 337 00:29:45.920 --> 00:29:48.400 So it's actually like for I use it for sever states, like that's 338 00:29:48.400 --> 00:29:52.039 why I probably serve states. Anything depends on maybe getting from an endpoint. 339 00:29:52.799 --> 00:29:56.839 I just use that for it and then go my own blewey. Then probably 340 00:29:56.920 --> 00:30:00.960 there are certain things I need to store on the client. Maybe I have 341 00:30:00.039 --> 00:30:03.920 like a very big dies on list of something that I don't want to keep 342 00:30:03.960 --> 00:30:07.240 on fetching or the like, I don't want to keep on calling the end 343 00:30:07.240 --> 00:30:11.720 points as like constantly. I've probably used a videos like the client states for 344 00:30:11.759 --> 00:30:17.000 that on those stories, then persistic to local storage so that I could justice 345 00:30:17.000 --> 00:30:19.799 sleep with fetch it when I needed to. But yeah, I think we 346 00:30:19.880 --> 00:30:22.599 ask probably is kind of quite cool that I feel something. A lot of 347 00:30:22.599 --> 00:30:26.119 people will check it out. It's kind of going to minimize a lot of 348 00:30:26.400 --> 00:30:30.200 client states managements you're going to work with. Yeah, yeah, I feel 349 00:30:30.240 --> 00:30:34.640 like I've probably been writing a lot of code like that. I could have 350 00:30:34.680 --> 00:30:40.599 been using this library the whole time. Okay, yeah, so yeah, 351 00:30:40.920 --> 00:30:44.000 yeah most of the time. Like I said, you probably don't need the 352 00:30:44.359 --> 00:30:47.559 like depending on how you write work with the creat you probably won't need like 353 00:30:47.680 --> 00:30:52.440 you because for like you will be like a client state because you're working most 354 00:30:52.519 --> 00:30:55.640 times, like if you're working on an application that requires a lot of course, 355 00:30:55.759 --> 00:30:57.480 like you, you're dependent on data, you know, maybe you're not 356 00:30:57.519 --> 00:31:03.960 dependent on setting like details from a main point or so it's save us states, 357 00:31:03.000 --> 00:31:07.440 right, you could just walk with your career and work with that, 358 00:31:07.599 --> 00:31:11.720 and I think something that kind of looks similarly to how it works. I 359 00:31:11.720 --> 00:31:17.279 don't know, if you work with all cash, Yeah, it gives that 360 00:31:17.359 --> 00:31:22.839 kind of yea yea yeah, so it kind of works similarly to graph your 361 00:31:22.920 --> 00:31:26.279 clients with, but I think it's kind more fight with much better kind of 362 00:31:26.880 --> 00:31:32.839 does it better and does it for like excally to use its multiple pose kind 363 00:31:32.880 --> 00:31:36.880 of? Yeah, So that's why it is. Generally it's kind of cool. 364 00:31:37.079 --> 00:31:40.119 I think it's something a lot of people should check out and check it 365 00:31:40.160 --> 00:31:44.759 out and just start using. Yeah, I think it's something that you can't 366 00:31:44.799 --> 00:31:48.519 I think I've worked with a lot of company or on large cold business with 367 00:31:48.599 --> 00:31:52.079 that, and it's kind of easy to navigate because then you could always see 368 00:31:52.119 --> 00:31:56.160 your you casually know when okay, oh this is save us state, this 369 00:31:56.200 --> 00:32:02.319 is the identified just get your out with art that don't don't need to worry 370 00:32:02.319 --> 00:32:07.200 about so much. Yeah. Cool, Yeah, lots of lots of interesting 371 00:32:07.240 --> 00:32:14.319 stuff. So I'm not sure if mine are going to be as interesting, 372 00:32:14.440 --> 00:32:20.640 but I think some of the utility libraries that I use could be really interesting. 373 00:32:21.799 --> 00:32:25.839 So let me start with with that. So one thing that I use, 374 00:32:27.480 --> 00:32:34.559 and it's definitely not common for people. Is a lot of functional programming, 375 00:32:34.839 --> 00:32:38.799 right, I use a lot of functional programming. So, for example, 376 00:32:39.000 --> 00:32:45.039 there's a library called FPTS, which stands for Functional Programming Typescript, so 377 00:32:45.079 --> 00:32:52.799 it's FPTS and it is huge. It exposes a lot of functional programming data 378 00:32:52.839 --> 00:33:00.400 structures and they are all really well typed and none of them are class So 379 00:33:00.440 --> 00:33:04.680 it's kind of like the movement that our actually has had a while ago, 380 00:33:04.960 --> 00:33:09.599 where you have to pipe and then you have a lot of functions that a 381 00:33:09.640 --> 00:33:14.359 lot of pure functions that you use to pipe your observables. So the same 382 00:33:14.359 --> 00:33:21.440 way, this library gives you a lot of isolated pure functions that you can 383 00:33:21.559 --> 00:33:28.640 use to modify what's coming through. So you have for example, either, 384 00:33:29.319 --> 00:33:34.680 which is a type safe structure for you to deal with success and failure scenarios, 385 00:33:34.880 --> 00:33:37.519 so you don't need to throw errors anymore. You can simply use an 386 00:33:37.519 --> 00:33:43.160 either and that forces you to handle the error cases. There's no way for 387 00:33:43.200 --> 00:33:46.920 you to forget to handle errors because it's just not going to compile if you 388 00:33:46.960 --> 00:33:52.799 don't. Then you have task either, which is also used a lot, 389 00:33:52.240 --> 00:34:00.680 which is the asynchronous version of either, so it's basically either with promises and 390 00:34:00.960 --> 00:34:07.000 it's it's lazy, so the promise is not executed eagerly. It's only executed 391 00:34:07.079 --> 00:34:13.559 once you call it app like you pipe it through all the modifications that you 392 00:34:13.639 --> 00:34:16.239 wanted, and afterwards when you call it, that's when it actually triggers the 393 00:34:16.320 --> 00:34:22.320 request. So I really like this lazy aspect, this lazy execution aspect. 394 00:34:23.079 --> 00:34:28.000 There's a lot of interesting things. If you go down that palf of learning 395 00:34:28.159 --> 00:34:34.920 FPTS, then there's another library which goes along with FPTS, which is IoTs, 396 00:34:35.400 --> 00:34:42.679 and that is basically the coders, so it allows you to do data 397 00:34:42.760 --> 00:34:49.960 validation. People generally use joy or things like that. I much prefer IoTs 398 00:34:50.119 --> 00:34:57.880 because I think it's much easier to compose, to create your your the coders, 399 00:34:58.039 --> 00:35:04.920 and also to make it extremely strict and extremely type safe. It also 400 00:35:05.079 --> 00:35:09.119 integrates directly with FPTS because they were created by the same person, so you're 401 00:35:09.199 --> 00:35:15.519 kind of like in the same universe. Then I also use low dash a 402 00:35:15.519 --> 00:35:21.519 lot, specifically low dash FP, which is the functional programming version of the 403 00:35:21.559 --> 00:35:25.920 low dash utilities. The main difference is not like there are different functions for 404 00:35:27.000 --> 00:35:30.760 low deash FP. It's still the same utilities that you have for ladash, 405 00:35:30.920 --> 00:35:35.440 but you have some differences in how you write them. For example, they 406 00:35:35.440 --> 00:35:40.280 are all curried by default. And for those of you that may not know 407 00:35:40.320 --> 00:35:45.360 what currying is, is you for example, if you have a function that 408 00:35:45.400 --> 00:35:52.159 takes two parameters, currying that function means transforming that into a function that takes 409 00:35:52.199 --> 00:35:55.320 one parameter and returns a function that takes another premer and then returns the result. 410 00:35:57.000 --> 00:36:00.400 So the go here is to have functions there are unit which means that 411 00:36:00.599 --> 00:36:07.079 functions that only have one input parameter. And why is that important? Because 412 00:36:07.599 --> 00:36:15.480 that way you can write point free programming, which is basically, let's say 413 00:36:15.519 --> 00:36:20.960 that you're doing an array dot map. If your function just takes one input, 414 00:36:21.360 --> 00:36:23.920 then you don't need to call your function inside the map. You just 415 00:36:24.039 --> 00:36:29.199 pass the function. So let's say that you have, for example, you 416 00:36:29.320 --> 00:36:32.239 have an array of strengths and you want to map that into an array of 417 00:36:32.320 --> 00:36:40.960 numbers, and then you have a function that is like two number. You 418 00:36:42.000 --> 00:36:46.960 know, so if this function takes only one argument, then you can just 419 00:36:47.039 --> 00:36:52.639 do array dot map and within the parentheses you write two number. You don't 420 00:36:52.679 --> 00:36:59.519 need to write an arrow function that takes the value and then passes it to 421 00:36:59.559 --> 00:37:04.880 the function. And it's really important that we use unary functions for that context, 422 00:37:05.119 --> 00:37:09.880 because if your function takes more than one argument, then you can find 423 00:37:09.880 --> 00:37:15.480 yourself in situations where you weren't expecting people to put it into an array dot 424 00:37:15.559 --> 00:37:17.960 map, for example, and then you're getting the index of the array as 425 00:37:19.000 --> 00:37:22.559 the second argument, and there certainly things are not beating the way that you 426 00:37:22.679 --> 00:37:28.320 expect. So there's that. And also when you're carrying your functions, you 427 00:37:28.400 --> 00:37:32.639 make sure that the arguments that are going to change the least are always the 428 00:37:32.679 --> 00:37:39.119 first ones to be passed. So let's say that you want to sort something, 429 00:37:39.239 --> 00:37:46.400 so you have a function like sort by. The most common approach to 430 00:37:46.519 --> 00:37:52.280 write a sort by function is to write it in a way that the first 431 00:37:52.280 --> 00:37:55.440 parameter is the collection of things that you're going to sort, and the second 432 00:37:55.480 --> 00:38:04.360 parameter is the function that you call to compare the values. If you're using 433 00:38:04.519 --> 00:38:07.920 functional programming, you would do the opposite, So the first thing that you 434 00:38:07.960 --> 00:38:13.639 would pass would be the function that compares, and the second thing would be 435 00:38:13.840 --> 00:38:17.199 the collection that will be sorted. And the reason for that is because most 436 00:38:17.280 --> 00:38:23.719 generally the collection that would be sorted is going to change way more often than 437 00:38:23.760 --> 00:38:29.159 the function that sorts the collection. So by having the function that starts the 438 00:38:29.159 --> 00:38:35.679 collection first, you can create a function that is like start by name is 439 00:38:35.719 --> 00:38:38.599 equal to start by and then you give it the compare function, and this 440 00:38:38.639 --> 00:38:43.880 is going to give you back a function that takes a collection returns it sorted 441 00:38:43.920 --> 00:38:47.039 by name. So yeah, there's a lot of functional programming madness that I'm 442 00:38:47.079 --> 00:38:54.320 really into. Peter mentioned date date functions data Offense. I also use that. 443 00:38:54.440 --> 00:39:05.800 I prefer it as opposed to moment because yeah, especially because it uses 444 00:39:05.840 --> 00:39:10.000 functional programming. There's also a time zone extension for date funds, which is 445 00:39:10.079 --> 00:39:17.199 date Funds TZ, which exposes utilities to deal with time zone conversions. It's 446 00:39:17.239 --> 00:39:24.119 also very useful. I also use the library that I created. It's at 447 00:39:24.239 --> 00:39:30.519 Lucas Paganini ts and a while ago, like I think it's two years by 448 00:39:30.519 --> 00:39:35.840 now. I created an entire course for free on YouTube, so if anyone 449 00:39:35.880 --> 00:39:43.119 wants to watch, you free about typescript narrowing. So basically it's a course 450 00:39:43.199 --> 00:39:51.360 about how to tell typescript which types you're dealing with. So all of us 451 00:39:51.440 --> 00:39:55.440 have had a situation where you you had like a number or strength, and 452 00:39:55.480 --> 00:40:00.000 you already did the necessary checks to make sure that that thing is a strength. 453 00:40:00.360 --> 00:40:04.400 The typescript still thinks that it's a number, so this would be narrowing. 454 00:40:04.760 --> 00:40:10.239 And I did like eight videos on that, and by the end the 455 00:40:10.360 --> 00:40:16.239 last video, I built a library with all the utilities that I referenced throughout 456 00:40:16.280 --> 00:40:23.599 the previous videos, and this library is published on NPM under at nucas Paganini 457 00:40:24.880 --> 00:40:30.760 ts So I'm sending this in the comments section. It is not maintained, 458 00:40:30.960 --> 00:40:37.119 but it is stable. Like everything that I have here are just types, 459 00:40:37.280 --> 00:40:43.159 so there's nothing that's going to go into your actual runtime implementation. It's literally 460 00:40:43.400 --> 00:40:47.920 just types. So I don't think anyone should feel at risk of using it. 461 00:40:49.000 --> 00:40:52.480 But honestly, it's just myself using it. I don't even like release. 462 00:40:53.239 --> 00:40:57.320 I haven't released new versions in a while, but it exposes a lot 463 00:40:57.360 --> 00:41:02.360 of interesting utilities for me. So, for example, I have a utility 464 00:41:02.480 --> 00:41:10.800 that extracts all the values from an object. I mean the types. For 465 00:41:10.840 --> 00:41:15.159 example, Let's say that you have an object which is a user, and 466 00:41:15.239 --> 00:41:17.199 this user has a name which is a string, and an age which is 467 00:41:17.199 --> 00:41:21.760 a number. So if you call object values, then it's going to give 468 00:41:21.800 --> 00:41:28.480 you string or number. So these are the types of the potential properties of 469 00:41:28.679 --> 00:41:32.880 this of this object. And there are a lot of really really weird stuff, 470 00:41:34.079 --> 00:41:40.039 like I created an asynchronous type guard, so we have like type predicates. 471 00:41:40.199 --> 00:41:45.000 When you have a function that returns a bullion and tells typescript if that 472 00:41:45.000 --> 00:41:50.039 that value is of that type, so I created a synchronous version of that, 473 00:41:50.559 --> 00:41:54.199 so you can return a promise of a bullion and that will tell typescript 474 00:41:55.119 --> 00:41:58.960 the correct type of this of that thing. So there are a lot of 475 00:42:00.039 --> 00:42:04.800 weird stuff in that library, so I use it a lot. I also 476 00:42:04.960 --> 00:42:10.440 use a library called expect type and this is going to be really interesting to 477 00:42:10.480 --> 00:42:15.119 a lot of folks. So basically, there are a lot of libraries to 478 00:42:15.159 --> 00:42:22.440 do testing, but I always felt that I needed something to test my type 479 00:42:22.480 --> 00:42:28.159 definitions. So for example, let's say that I have a function that if 480 00:42:28.159 --> 00:42:34.599 I give a particular input, I expected to return something off a particular type. 481 00:42:35.440 --> 00:42:37.800 So if you give it a string, you should return on an array 482 00:42:37.800 --> 00:42:40.440 of strengths, but if you give it a number, you should return noul 483 00:42:40.679 --> 00:42:45.679 or I don't know, something weird like that. So this library allows you 484 00:42:45.719 --> 00:42:51.400 to test the types of your code. It's really interesting and the idea is 485 00:42:51.559 --> 00:42:57.480 just genius. It's basically, if your code is returning the wrong types, 486 00:42:58.039 --> 00:43:05.800 then the library is it's not going to compile because Typescript will try to parse 487 00:43:05.880 --> 00:43:09.639 your BAC files and the types are not going to match with what this library 488 00:43:09.679 --> 00:43:15.719 is expecting, and then the types just fail. So it's genius the way 489 00:43:15.760 --> 00:43:20.199 that they that they did this, and I think it's a really, really, 490 00:43:20.239 --> 00:43:23.639 really good library. I use it extensively because I do a lot of 491 00:43:24.400 --> 00:43:30.559 Typescript madness, so this is the only thing that allows me to guarantee that 492 00:43:30.599 --> 00:43:37.159 the types of when I'm returning are still what I expected. Other than that, 493 00:43:37.280 --> 00:43:42.039 I also use just in Cyprus. As I was just mentioning I might 494 00:43:42.119 --> 00:43:47.079 migrate to Playwright. I'm studying it. I use our EXGS a lot, 495 00:43:49.400 --> 00:43:55.119 not that much in React because within the React universe, our XGS is just 496 00:43:55.239 --> 00:44:01.039 not very necessary. There are other libraries that do what our xs does. 497 00:44:01.519 --> 00:44:07.599 But I do a lot of Angular code and also just no JS things like 498 00:44:07.639 --> 00:44:13.679 that, and in those scenarios I use our actually as to have reactivity, 499 00:44:14.719 --> 00:44:17.280 And yeah, I think these are the most interesting things I could, like 500 00:44:17.360 --> 00:44:22.440 go on for three hours talking about the technologies that I generally use, but 501 00:44:22.480 --> 00:44:32.159 I think those are the most generally useful for other folks. Yeah, I 502 00:44:32.159 --> 00:44:37.840 think we'll have to We'll have to say for another episode just the like front 503 00:44:37.920 --> 00:44:42.559 end, because I have a few UI libraries I like, But we can 504 00:44:42.679 --> 00:44:45.800 we can do that in some other because we could probably go another hour. 505 00:44:47.159 --> 00:44:52.400 Yeah, so most packages, and especially you're looking at JavaScript, right, 506 00:44:52.559 --> 00:45:00.360 So many packages, so many Yeah, definitely, So we're probably I do 507 00:45:00.440 --> 00:45:07.440 a round two maybe a few weeks or or months from now, to keep 508 00:45:07.480 --> 00:45:10.760 you guys updated. But in the meantime, I think this is enough for 509 00:45:10.960 --> 00:45:16.320 all of you to study for three months. There's a lot of a lot 510 00:45:16.360 --> 00:45:24.719 of stuff. So yeah, let's let's start wrapping things up. Let's just 511 00:45:24.760 --> 00:45:30.400 do some quick updates on things that we're working on. And yeah, so 512 00:45:30.639 --> 00:45:38.360 on my end, I'm just gonna promote Onvoid. So basically, Unvoid is 513 00:45:38.400 --> 00:45:45.519 the most risk free way of extending your software and design teams. And the 514 00:45:45.559 --> 00:45:51.800 way it works is that their entire business model was created so that it would 515 00:45:51.800 --> 00:45:57.519 address the main pain points that companies have when they are outsourcing designer software development 516 00:45:57.519 --> 00:46:01.360 services. So time zoning, compatibilities, for example, this is dealt with 517 00:46:02.000 --> 00:46:08.480 so Onvoid is near shore and it has big overlap with the United States and 518 00:46:08.519 --> 00:46:16.559 even the coast of Europe also contracts. For example, all the contracts on 519 00:46:16.559 --> 00:46:21.400 Onvoid are based on the state in which the companies head border, and so 520 00:46:21.960 --> 00:46:24.119 you are in Tennessee, the contract is going to be governed by the laws 521 00:46:24.119 --> 00:46:29.119 of Tennessee, or in California, it is governed by the laws of California. 522 00:46:29.480 --> 00:46:34.159 So it gives you a lot of safety in that sense. You feel 523 00:46:34.639 --> 00:46:38.239 very secure. And there's also a two week money back guarantee for any reason. 524 00:46:38.280 --> 00:46:43.559 So if you hire Onvoid and you're not satisfied with the quality of what 525 00:46:43.639 --> 00:46:50.920 their professionals delivered, you can just cancel the contract within two weeks and you're 526 00:46:50.960 --> 00:46:54.519 not going to pay literally anything, and you can even keep the work that 527 00:46:54.679 --> 00:47:01.000 was delivery that was delivered to you during that period. So really anything that 528 00:47:01.039 --> 00:47:06.519 you have in your mind of possible objection, like I don't know if this 529 00:47:06.639 --> 00:47:10.519 is gonna work, because X, Y and z uh they probably have you 530 00:47:10.599 --> 00:47:16.159 covered. So if you're interested in that, check out avoid dot com is 531 00:47:16.440 --> 00:47:23.079 you and v O I D dot com And yeah, so what about you? 532 00:47:23.119 --> 00:47:28.920 Peter there are also on my end mostly more do or do. I 533 00:47:29.000 --> 00:47:34.159 really just appreciate the link to like some packages I talked about, like the 534 00:47:34.239 --> 00:47:39.360 State Management Jutai I kind of talked about really cool. I really I said 535 00:47:39.400 --> 00:47:44.079 it on't be shot, so I really really something A lot of people come 536 00:47:45.159 --> 00:47:52.719 and work with. Yeah, and then also yeah, I also rightful refined. 537 00:47:52.960 --> 00:48:00.440 So maybe I's some somebody that looks like some articles for it the fine 538 00:48:00.480 --> 00:48:06.000 book. I only many know about to find it more like react right so 539 00:48:06.039 --> 00:48:10.559 that they try to automate some kind of we do the house shot. It'll 540 00:48:10.599 --> 00:48:16.440 sitting up on coutin React applications. I will show my auto profile on the 541 00:48:16.760 --> 00:48:21.920 chats on probably something you can't look out check out. Yeah, so I 542 00:48:21.960 --> 00:48:27.119 think that's just for me. Cool Yeah about you Chris. Yeah, Also 543 00:48:27.320 --> 00:48:31.719 not much new, uh, I'll post as an alternative to my blog in 544 00:48:31.840 --> 00:48:37.000 case you don't like dark mode. I have medium. I still don't have 545 00:48:37.039 --> 00:48:40.360 a dark mode on my blog, but I have like basically a clone of 546 00:48:40.519 --> 00:48:47.000 everything. And again that's just the articles. Typically they're driven by me encountering 547 00:48:47.079 --> 00:48:50.880 some problem and not being able to find the solution, and then I just 548 00:48:51.119 --> 00:48:54.880 convert whatever I whatever the solution I find is I convert that to a blog 549 00:48:54.960 --> 00:48:59.440 post. So I've got all sorts of stuff, not just React but but 550 00:48:59.599 --> 00:49:04.440 everything from Go and even now I'm doing more Windows stuff, so cool. 551 00:49:04.599 --> 00:49:13.599 All right. Yeah, so I'm gonna send you guys' links on the comment 552 00:49:13.719 --> 00:49:21.519 section, so anyone that is interested in checking those libraries and also your content 553 00:49:22.280 --> 00:49:27.320 will be able to see it. So, yeah, if you're listening to 554 00:49:27.440 --> 00:49:31.119 this and you're wondering, what was the thing that Peter said, uh, 555 00:49:31.599 --> 00:49:36.400 yeah, it's probably in the comment section, and you're like, oh, 556 00:49:36.480 --> 00:49:42.360 I'd like to read more about what Chris is talking about, then yep, 557 00:49:42.519 --> 00:49:46.559 it's also going to be in the comment section. Yeah, guys, thank 558 00:49:46.599 --> 00:49:52.440 you so much, audience, Thank you so much for sticking with us. 559 00:49:52.960 --> 00:49:59.280 I know that sometimes we we end up getting really extended into our conversation, 560 00:49:59.480 --> 00:50:04.159 but it's because we really have a lot of things to share with you guys. 561 00:50:04.719 --> 00:50:08.440 But yeah, hopefully this was valuable to you. Have an awesome week 562 00:50:08.760 --> 00:50:10.000 and I'll see you in the next one.