WEBVTT 1 00:00:06.160 --> 00:00:10.000 Hello everybody, and welcome to another episode of React Round Up. My name 2 00:00:10.039 --> 00:00:13.880 is TJ Van Tool and with me on a panel today is Page Meeting guts. 3 00:00:14.039 --> 00:00:19.280 Hey everyone, and our special guest today is mirslav nick Love which hopefully 4 00:00:19.359 --> 00:00:22.719 I pronounced that correctly, but Mirsla, welcome to React round Up. Why 5 00:00:22.760 --> 00:00:26.079 don't you tell everybody who you are, what you do while you're famous, 6 00:00:26.160 --> 00:00:29.640 that sort of stuff. Thank you, hi, everybody. I don't think 7 00:00:29.640 --> 00:00:34.280 I'm famous, to be honest, I work as a UI developer, mostly 8 00:00:34.320 --> 00:00:40.679 frontends so one dot com. It's Danish company that is currently expanding, and 9 00:00:40.719 --> 00:00:45.000 what I do is basically react and in my free time, I try to 10 00:00:46.359 --> 00:00:53.359 maintain my block, so turning my experience in some useful articles. That's like 11 00:00:53.479 --> 00:00:58.200 something like a hobby. And yeah, I'm a family guy, have my 12 00:00:58.240 --> 00:01:03.319 wife and ta kids, a boy, so that basically takes a hour all 13 00:01:03.400 --> 00:01:08.280 my free time, so I don't really have much time to spend on side 14 00:01:08.480 --> 00:01:14.120 activities. That's so fun that we were talking before. I'm very jealous Denmark, 15 00:01:14.239 --> 00:01:17.519 Copenhagen is a super beautiful area, so I'm very jealous of that, 16 00:01:17.680 --> 00:01:22.120 and your blog will drop it in the show notes as well. I like 17 00:01:22.200 --> 00:01:26.000 the design on it as well, and I know like reading through some of 18 00:01:26.000 --> 00:01:29.719 them. I know you wanted to talk a bit about testing and writing this 19 00:01:30.319 --> 00:01:34.680 human what you call human friendly React component tests. Do you want to outline 20 00:01:34.000 --> 00:01:38.359 sort of that whole concept and what you mean by that to sort of kick 21 00:01:38.439 --> 00:01:47.040 us off here. It's basically it's all about library called Unexpected Jays, and 22 00:01:47.840 --> 00:01:51.840 it's I know it's not very popular, but what it does on what it 23 00:01:51.879 --> 00:01:57.200 adds on top of everything else we have seen, is actually all of playing 24 00:01:57.239 --> 00:02:01.920 English when you when you write your tests. And I'm using that library basically 25 00:02:01.959 --> 00:02:07.479 for the past five years, and I just decided to write an article which 26 00:02:07.520 --> 00:02:14.039 is just a short introduction to what is possible with the library. And so 27 00:02:14.120 --> 00:02:19.599 I decided to write the article for cecys Tricks so that it's basically rich a 28 00:02:19.639 --> 00:02:24.960 little bit wider audience. And it was very surprising that I think right now, 29 00:02:24.960 --> 00:02:31.360 if you write React component tests or just React tests testing, that appears 30 00:02:31.479 --> 00:02:37.000 on the first page. But I believe this is because of the strong domain 31 00:02:37.560 --> 00:02:45.479 of cesys Tricks. So yeah, it's it's also brought some discussion because it 32 00:02:45.520 --> 00:02:50.280 seems like people prefer different style of testing and it's a little bit opinionated, 33 00:02:51.080 --> 00:02:54.639 but yeah, there are some there is some positive feedback as well. So 34 00:02:54.960 --> 00:03:00.800 can you expand a little bit about about what unexpected js is because that's actually 35 00:03:00.840 --> 00:03:05.759 a framework that I've never heard of before, but I'm interested. Does it 36 00:03:05.840 --> 00:03:10.439 work like with React Testing library or is it Cyprus or is it both unit 37 00:03:10.560 --> 00:03:14.439 and and can you tell us a little bit more about it. Yeah, 38 00:03:14.639 --> 00:03:19.120 First just to say that I'm not a maintainer of the library. I'm using 39 00:03:19.159 --> 00:03:22.599 it, but as far as I know, it should be able because it 40 00:03:22.639 --> 00:03:25.599 works with plug ins. It should be able to use some of the plugins 41 00:03:25.639 --> 00:03:31.719 with reg testing library, so you can use REAP testing library and some assertions 42 00:03:31.759 --> 00:03:38.520 customer assertions on top so you can write your plain English tests and behind that 43 00:03:38.599 --> 00:03:44.439 it's React Testing library, so it should be possible, though I haven't tried. 44 00:03:45.000 --> 00:03:49.120 Yeah, and I also kept for a light version of the article on 45 00:03:49.159 --> 00:03:53.199 my block, just it's a bit lighter without the introduction because currently it's a 46 00:03:53.199 --> 00:04:00.879 little bit controversial on how we test, and I know the communities going strongly 47 00:04:00.919 --> 00:04:09.120 after Reactesting library. So people are sometimes speaky when you present something unusual for 48 00:04:09.280 --> 00:04:14.919 you. Absolutely new things are not to be trusted developments don't have opinions and 49 00:04:15.159 --> 00:04:20.720 what you're talking about, So how did you first come across unexpected? You 50 00:04:20.759 --> 00:04:24.360 said you've been using it for a number of years. Now, did it 51 00:04:24.439 --> 00:04:28.040 somebody else introduce it to you or was it just something you stumbled upon and 52 00:04:28.079 --> 00:04:32.439 you really liked how how it operated. To be honest, I didn't have 53 00:04:32.600 --> 00:04:39.079 choice because when I joined one dot com they have already they already used, 54 00:04:39.439 --> 00:04:45.720 already using this library. And some of the people who are maintaining the library 55 00:04:46.720 --> 00:04:49.800 also worked for the company at some point, though they are no longer part 56 00:04:49.879 --> 00:04:55.839 but were still we're still using it internally, so that's good a reason. 57 00:04:55.959 --> 00:05:00.519 Any did you get a little bit into it? You know, one thing 58 00:05:00.519 --> 00:05:04.680 you cover in your article is trying the right tests that are sort of least 59 00:05:04.680 --> 00:05:10.600 say, human friendly or easily readable. Could you give like some examples of 60 00:05:10.680 --> 00:05:14.360 what you mean by that? And I know, like syntax is kind of 61 00:05:14.399 --> 00:05:18.519 hard on an audio podcast, but just like high level, like how you 62 00:05:18.600 --> 00:05:25.279 approach structuring tests in a human friendlier, in a more readable way. So 63 00:05:25.720 --> 00:05:30.920 basically what we use is the usual arrange acts assert kind of thing, which 64 00:05:30.959 --> 00:05:34.600 is I mean you first arrange or test, then you act on it, 65 00:05:34.800 --> 00:05:41.639 and then you assert. So this is basically shared approach for I think for 66 00:05:41.800 --> 00:05:48.040 every testing library. But what Unexpected that's a little bit different is the expect. 67 00:05:48.040 --> 00:05:55.800 Assertion is just a function expect and inside you pass as many arguments as 68 00:05:55.839 --> 00:06:01.120 you want. And these arguments are just playing strings, so you don't really 69 00:06:01.120 --> 00:06:08.879 have a JP relax syntax like dot dot equals or dot to be executed. 70 00:06:09.759 --> 00:06:15.519 You just play in English and usually the editor is colors that in the same 71 00:06:15.560 --> 00:06:17.240 color, so it's very easy to read. It's easy for the eye. 72 00:06:17.800 --> 00:06:23.199 Maybe not so straightforward to write it because your editor won't help you to auto 73 00:06:23.240 --> 00:06:30.399 complete different function goals, but it's uh, it's it's really it's really easy 74 00:06:30.439 --> 00:06:34.120 for the eye. And we are working in a in a team and it's 75 00:06:34.160 --> 00:06:39.639 basically usually not just one person who is working with these file testing files. 76 00:06:40.160 --> 00:06:45.040 So you want something expressive there. That's very cool. I'm looking at the 77 00:06:45.120 --> 00:06:50.560 article right now. I guess one question I have is how how long do 78 00:06:50.639 --> 00:06:55.839 you think it takes a new developer to get up to speed with using something 79 00:06:55.920 --> 00:06:59.920 like Unexpected. Like most of us, if we've been working with React for 80 00:07:00.079 --> 00:07:03.959 while, we're probably pretty familiar with just may be familiar with enzyme, maybe 81 00:07:03.959 --> 00:07:09.600 familiar with React testing library. But how easy or difficult do you think it 82 00:07:09.639 --> 00:07:14.600 is to get up to skate with unexpected and then start to potentially integrate it 83 00:07:14.639 --> 00:07:18.759 into any existing testing frameworks that you might have. I think it's pretty easy, 84 00:07:18.839 --> 00:07:25.319 especially if you use examples as a real examples as a reference. Maybe 85 00:07:25.319 --> 00:07:30.720 documentation is not going to be the fastest path learning path, but if you 86 00:07:30.800 --> 00:07:34.800 use examples, it's really easy. And usually you have just you have several 87 00:07:34.800 --> 00:07:40.720 common assertions that you would like to use, and you don't really use so 88 00:07:40.839 --> 00:07:46.920 many different features, at least for the React components. You want to test 89 00:07:46.920 --> 00:07:51.360 if something has rendered, so usually you test you equate for an element and 90 00:07:51.439 --> 00:07:59.319 you test for its stringth that it contains. And also the other thing is 91 00:07:59.360 --> 00:08:05.399 testing function calls. That is also straightforward. So apart from these two things 92 00:08:05.879 --> 00:08:13.199 presence of certain elements and executing functions, you're most likely rarely going to use 93 00:08:13.240 --> 00:08:18.879 other like assercial. So I would say, but it's it's very straightforward, 94 00:08:18.959 --> 00:08:22.959 at least for at least for me to us as I remember, that's always 95 00:08:24.079 --> 00:08:28.879 encouraging. It's I remember when I was first learning React testing library, it 96 00:08:28.000 --> 00:08:31.879 was kind of a massive mind shift for me to go from the way that 97 00:08:33.120 --> 00:08:37.279 just an enzyme had been doing it to trying to reorient myself towards the way 98 00:08:37.320 --> 00:08:43.360 React testing library focuses on what's in the dom and interacting with that at a 99 00:08:43.440 --> 00:08:48.600 unit test level. So anything that is easier to get up and started with 100 00:08:48.840 --> 00:08:54.519 is definitely always good. Yeah, that's still something. Is like I'm not 101 00:08:54.879 --> 00:09:01.480 as in the weeds with unit testing libraries anymore. So sometimes a lot of 102 00:09:01.519 --> 00:09:07.080 this type of stuff goes over my head and I'm actually curious, like this, 103 00:09:07.080 --> 00:09:09.320 this is a question, I guess for both of you, is where 104 00:09:09.440 --> 00:09:16.559 is the React world at right now for in terms of like testing markup structure 105 00:09:16.519 --> 00:09:20.679 in your like individual unit tests, because I know Miroslov in some of your 106 00:09:20.759 --> 00:09:28.080 articles you went in and you are like basically asserting against the exact dom structure. 107 00:09:28.200 --> 00:09:33.039 Is there some advantages of that or like versus like if I'm if I 108 00:09:33.039 --> 00:09:37.679 want to test my component render something specifically, like how specific should your assertion 109 00:09:37.840 --> 00:09:41.159 be for I'm looking for this exact markup structure or you just like try to 110 00:09:41.200 --> 00:09:45.840 pick out an individual string like I just care that it spit this out correctly, 111 00:09:46.080 --> 00:09:48.679 Like I'm kind of curious where the React world is at with that sort 112 00:09:48.720 --> 00:09:54.600 of setup right now. So for my understanding and what my team is doing 113 00:09:54.799 --> 00:10:01.559 today is that we're a lot more focused on the same, basically the same 114 00:10:01.600 --> 00:10:03.960 interactions that you would try and do in an end to end test in the 115 00:10:05.120 --> 00:10:11.799 unit tests. So it's a lot less about did this REDUCS dispatch happen or 116 00:10:11.840 --> 00:10:18.159 did this particular function mock get called? And it's a lot more of can 117 00:10:18.200 --> 00:10:20.720 I see this element in the dom? Can I click this button or is 118 00:10:20.759 --> 00:10:26.240 this button disabled? Did this list appear? And can I interact with it? 119 00:10:26.879 --> 00:10:28.679 Which, like I said, it's a little bit hard to get used 120 00:10:28.720 --> 00:10:31.919 to when you're coming from the old way of testing did this function fire? 121 00:10:33.559 --> 00:10:37.559 But I like it a lot more because it seems to me to be a 122 00:10:37.600 --> 00:10:41.919 lot more true to life and how as how a user would interact with our 123 00:10:41.000 --> 00:10:45.840 application. They don't care if the reducts dispatch fired or not. They just 124 00:10:45.879 --> 00:10:48.840 care that their list loaded and you know, they can click the button and 125 00:10:48.879 --> 00:10:52.399 go through their shopping cart. So that's kind of what we've been leaning towards. 126 00:10:52.399 --> 00:10:56.519 So not necessarily, you know, is there this particular H one tag 127 00:10:56.759 --> 00:11:01.559 with this ID, but can I see, you know, my page title, 128 00:11:01.639 --> 00:11:05.799 or can I see this drawer that is supposed to be there at the 129 00:11:05.840 --> 00:11:07.879 bottom and can I open it? Or can I click buttons and you know, 130 00:11:07.960 --> 00:11:11.799 do different stuff like that within the component. So that's kind of the 131 00:11:11.840 --> 00:11:16.559 approach that we're taking, but I'd love to hear how other people are doing 132 00:11:16.559 --> 00:11:20.000 it as well. I would say that we're using the same approach at least. 133 00:11:20.879 --> 00:11:24.639 Comparing the dom structure is something that we use rarely, and I know 134 00:11:24.720 --> 00:11:31.200 that the communities pretty much with Reactesting library going away from that kind of assertions, 135 00:11:31.679 --> 00:11:37.080 So we use it really and we mostly unit tests and we have strong 136 00:11:37.240 --> 00:11:43.080 QATEAM, so the visual part is really for them, so it's not something 137 00:11:43.080 --> 00:11:48.840 that we really deal with. It's we focus on the unit tests and edge 138 00:11:48.879 --> 00:11:52.759 cases especially, so that's ourly. That makes a lot of sense. And 139 00:11:54.000 --> 00:11:56.960 because I remember, like you said, page, the way it used to 140 00:11:56.960 --> 00:12:00.600 be is you would you would do things like and share your mind were hit 141 00:12:00.919 --> 00:12:03.039 or that your testing structure, But it felt like a lot of times you 142 00:12:03.039 --> 00:12:07.240 were just writing those tests to write those tests so that you get like better 143 00:12:07.279 --> 00:12:13.960 code coverage and such. I like that just because it feels like I don't 144 00:12:13.960 --> 00:12:16.799 know. The test just makes more sense, and I feel like there's a 145 00:12:16.799 --> 00:12:20.559 lot better not just QA, but like visual testing tools now as well to 146 00:12:20.639 --> 00:12:26.360 catch some of these things, Like I think a lot of these like snapshotting 147 00:12:26.559 --> 00:12:30.799 tools are becoming a lot more popular as well, to catch like if you 148 00:12:30.840 --> 00:12:35.039 did screw up some like markup thing in your buttons suddenly doesn't look like a 149 00:12:35.039 --> 00:12:37.759 button anymore, that there's some other test is going to catch that, so 150 00:12:37.799 --> 00:12:43.120 you don't need to like test your HTML parsing. Yeah, and actually that's 151 00:12:43.159 --> 00:12:46.480 something that I'd be interested to hear more about. Miroslav. You said that 152 00:12:46.519 --> 00:12:50.799 you've got a QA team who helps you with the visual portion of it. 153 00:12:52.000 --> 00:12:56.639 Are they using that you're awarever theyre using any particular tools, because visual regression 154 00:12:56.679 --> 00:13:00.960 testing is something that my team has struggled with it in the past, but 155 00:13:01.000 --> 00:13:05.440 we haven't really found a great tool that helps keep that up to date. 156 00:13:07.240 --> 00:13:09.919 Yeah, they have their own tools, but a lot of the testing is 157 00:13:11.000 --> 00:13:15.799 I think kind of ends to ends testing for example, adding a product to 158 00:13:15.799 --> 00:13:18.960 the shopping cart, and we follow the whole process up until the end. 159 00:13:18.799 --> 00:13:24.360 This is what is important for them. I know some people suggest to write 160 00:13:24.879 --> 00:13:31.159 user stories as the part of the storybook and then you use something like cypress 161 00:13:31.200 --> 00:13:39.399 on top to visually compare your user stories your components. I haven't tried that. 162 00:13:39.120 --> 00:13:41.759 I think, at least for our case, it's going to be too 163 00:13:41.799 --> 00:13:46.399 much of an effort if you really do your homework with the unit tests. 164 00:13:46.519 --> 00:13:52.919 At least our experience show that we don't really face production bags and we are 165 00:13:52.919 --> 00:13:56.559 not really trying to have a full test coverage, just trying to test the 166 00:13:56.679 --> 00:14:03.919 fragile paths of our applications. So but actually we have a we have a 167 00:14:03.960 --> 00:14:09.840 product which was launched in somewhere October. It's heavily used, and we didn't 168 00:14:09.879 --> 00:14:16.759 have a single front and back for that product up until this moment. It 169 00:14:16.840 --> 00:14:22.200 was I think the team did a good job of testing and iterations. So 170 00:14:22.240 --> 00:14:28.399 it's I know, it's rare, that's remarkable from time to time. Did 171 00:14:28.399 --> 00:14:35.039 you get an award? Like, oh, I'm not sure if people notice 172 00:14:35.360 --> 00:14:39.879 that achievements. I don't notice until it stops working. That's the problem. 173 00:14:41.240 --> 00:14:46.679 Yeah, that's the thing about testing is like there's you don't get a if 174 00:14:46.679 --> 00:14:50.000 you do your job right, Like no one ever knows that you have all 175 00:14:50.039 --> 00:14:52.679 these processes behind it. It's sort of the good and bad thing about it. 176 00:14:52.919 --> 00:14:56.480 So I'm curious, me, stuf, what what made you want to 177 00:14:56.720 --> 00:15:00.519 write about this and start a blog and share some of this stuff. Yeah, 178 00:15:01.080 --> 00:15:05.440 I didn't do it before because I suppose that our time is such a 179 00:15:05.480 --> 00:15:11.320 resource that we basically it's not we cannot regain it, it's lost basically, 180 00:15:11.360 --> 00:15:18.200 So writing an article, I mean, junior developers writing an articles is something 181 00:15:18.240 --> 00:15:22.440 that's at least I try to avoid because I don't think I had something to 182 00:15:22.480 --> 00:15:28.639 tell, something variable to take tell people, and reading my ten minutes article 183 00:15:28.679 --> 00:15:35.480 will be a loss of time. So I decided to start writing maybe after 184 00:15:35.759 --> 00:15:41.639 thirteen years of working with work applications, just because I feel a little bit 185 00:15:41.639 --> 00:15:46.200 more comfortable and maybe I have something important to say and people want to just 186 00:15:46.240 --> 00:15:54.200 spend there ten minutes and forget after that. It's a tricky area. At 187 00:15:54.279 --> 00:15:58.639 least I feel uncomfortable. So yeah, that's the main reason I suppose. 188 00:15:58.080 --> 00:16:03.759 And I have a lot of ideas and material during these years, so there's 189 00:16:03.799 --> 00:16:08.159 plenty of topics. I think after thirteen years you could be considered kind of 190 00:16:08.159 --> 00:16:14.519 an expert in development. That's that's a fair amount of time to see a 191 00:16:14.519 --> 00:16:21.399 lot of stuff. Yeah, yeah, Explore six it was there back back 192 00:16:21.440 --> 00:16:26.200 then, I remember. But yeah, thirteen years is about where I'm at 193 00:16:26.240 --> 00:16:30.080 as well. I started. My first apps were I E. Six only 194 00:16:30.240 --> 00:16:36.600 corporate apps, so this is those are fun times. Yeah, oh I 195 00:16:36.639 --> 00:16:40.600 see here. Oh go ahead, please God. I just wanted to say 196 00:16:40.639 --> 00:16:45.200 that writing an auto about to Explore six is probably, I don't know, 197 00:16:45.080 --> 00:16:48.279 it's not going to be very famous. I don't know. It's about time 198 00:16:48.320 --> 00:16:52.279 for like the nostalgia of that to kick in, because now now you can 199 00:16:52.360 --> 00:16:59.159 tell them it's like war stories right like back in the day. It's true. 200 00:16:59.240 --> 00:17:03.119 I mean today people are starting to react directly. I mean they don't 201 00:17:03.160 --> 00:17:10.240 even learn JavaScript. For them, JavaScript is now it's something like react and 202 00:17:11.079 --> 00:17:18.079 five six years ago, which was maybe je query so j Query Angular I 203 00:17:18.119 --> 00:17:22.319 think like and we're talking about testing too. The thing that amazes me nowadays 204 00:17:22.440 --> 00:17:26.000 is for the most part, when you write your code, you don't have 205 00:17:26.079 --> 00:17:30.880 to worry too much about your code just straight up not working and other browsers, 206 00:17:30.440 --> 00:17:36.240 which like sometimes sometimes you do catch little things like it's it's the sort 207 00:17:36.240 --> 00:17:38.160 of thing where you still do kind of need to test your code and other 208 00:17:38.200 --> 00:17:41.920 browsers, but for the most part, you kind of don't anymore, Like 209 00:17:42.000 --> 00:17:45.839 especially on desktop browsers, Like chances are the code you write is going to 210 00:17:45.920 --> 00:17:51.200 work. And that's still like quite the mind shift from how it used to 211 00:17:51.200 --> 00:17:53.559 be. Where it used to be you wrote your code and like you opened 212 00:17:53.559 --> 00:17:57.799 your you just prayed before you opened all the other five or six browsers you 213 00:17:57.839 --> 00:18:02.599 needed things to work in. That's true. I to be honest, I 214 00:18:02.599 --> 00:18:07.240 don't think I go out of Chrome, and I don't really test on other 215 00:18:07.319 --> 00:18:11.680 browsers. Yeah, and you're right because even qare, they don't they don't 216 00:18:11.680 --> 00:18:18.920 find they don't find spucks often another browsers. So it's things things are working. 217 00:18:21.240 --> 00:18:25.039 So one question that I had is when I visit your website, the 218 00:18:25.119 --> 00:18:29.279 first thing I see is that you were previously a CEO and a CTO. 219 00:18:30.640 --> 00:18:36.359 So how did you go from being in charge of whole companies and whole divisions 220 00:18:36.640 --> 00:18:41.400 to back to a developer. Did you want to be less of a manager 221 00:18:41.440 --> 00:18:45.440 and more of a team like an individual contributor or how did how did that 222 00:18:45.519 --> 00:18:52.759 happen? Yeah, it's I think it happened naturally. Again, it's it's 223 00:18:52.799 --> 00:18:57.359 a small company where I was basically maybe I was a CEO. Actually I 224 00:18:57.400 --> 00:19:03.440 was doing everything because the owner were in basically in Sweden and I was back 225 00:19:03.480 --> 00:19:08.440 in Bulgaria at that time, so I was managing the whole business plus development 226 00:19:10.079 --> 00:19:12.640 for the company. But it was relatively small one, so it's easy to 227 00:19:14.519 --> 00:19:19.359 manage and to have many responsibilities, even accounting and things like that. But 228 00:19:19.640 --> 00:19:26.359 at that point I also started freelancing, so I was freelancing a little bit, 229 00:19:26.920 --> 00:19:30.519 then moved away from that company, and then I met my wife here 230 00:19:30.519 --> 00:19:36.960 in Copenhagen. It was related to one of our freelance projects. And Copenhagen 231 00:19:37.039 --> 00:19:41.799 is I mean, it's a really expensive city compared to Europe, it's probably 232 00:19:41.839 --> 00:19:45.240 the most expensive one, and you really need a full time job to survive 233 00:19:45.319 --> 00:19:49.319 here. So this is how I ended up in the company's web developer. 234 00:19:51.079 --> 00:19:55.200 Wow. So basically running a company wasn't enough. Where he had a dove 235 00:19:55.240 --> 00:20:00.960 freelance work on the side too, that's dedication. Yes, at some point 236 00:20:00.000 --> 00:20:04.279 it became too much, but yeah, you can do it for some time 237 00:20:04.319 --> 00:20:10.920 before you burn out. Yeah. So looking at the blog, is your 238 00:20:10.920 --> 00:20:15.519 blog built with Gatsby? What what did you use to create this? It's 239 00:20:15.599 --> 00:20:22.079 exactly gets and I was I was inspired by Dan Abramov's blog. It uses 240 00:20:22.279 --> 00:20:29.640 the starter team, so it's really just the start team Starter team with some 241 00:20:29.640 --> 00:20:34.839 some tweaks. So I just wanted something simple up and running fast. And 242 00:20:36.359 --> 00:20:40.559 after that maybe I will figure out a better designed for it, but for 243 00:20:40.680 --> 00:20:47.000 now, it's just it just works. Yeah. I like the just the 244 00:20:47.200 --> 00:20:52.119 clean look of it and the fact that you have dark mode. Yeah, 245 00:20:52.160 --> 00:20:56.880 it's it's a default thing now right everybody. And I also see you have 246 00:20:57.359 --> 00:21:02.839 a newsletter as well. Yeah, it's I'm trying to keep up with it. 247 00:21:02.839 --> 00:21:08.039 It's once a month and I'm trying to send I'm usually sending my new 248 00:21:08.160 --> 00:21:11.720 article, which is at least I have time for one article per month. 249 00:21:12.160 --> 00:21:18.960 I can't really write more often. It's difficult with family and one article per 250 00:21:18.960 --> 00:21:25.640 month and some interesting thoughts and links maybe I have found, but at least 251 00:21:25.839 --> 00:21:30.480 I'm trying to write about the topics that you It was difficult to find a 252 00:21:30.559 --> 00:21:34.839 quick solution by just googling, So if I can't really find a solution, 253 00:21:36.160 --> 00:21:41.640 I would I would write about it. And I remember it was an article 254 00:21:41.640 --> 00:21:45.759 about something like a editorial on how to create a sticky table header. But 255 00:21:47.240 --> 00:21:52.880 would react, but by using just a normal table, not a deep based 256 00:21:52.279 --> 00:21:59.599 fleck or flax books based layouts. And it was surprising to me that actually 257 00:21:59.680 --> 00:22:04.000 there are not so many examples that you can find, and this article is 258 00:22:04.000 --> 00:22:11.599 without any is you always now it's it's pretty high when you try to look 259 00:22:11.799 --> 00:22:19.119 for something like that. Will Oh good, Well I just noticed because actually 260 00:22:19.119 --> 00:22:23.240 I clicked on that article in particular, I noticed that you have unique reads, 261 00:22:23.480 --> 00:22:26.240 and I was wondering how you did that, because that's a really cool 262 00:22:26.359 --> 00:22:30.759 little feature to have. Well, I don't think I know what unique reads 263 00:22:30.799 --> 00:22:37.079 are. Yeah, it's it's not Google analytics, because it's so not straightforward 264 00:22:37.119 --> 00:22:41.720 to implement that thing in your blog. And I just I just saw it. 265 00:22:41.799 --> 00:22:45.160 Okay, you mean like I see it now? So yeah, this 266 00:22:45.359 --> 00:22:48.920 is in case anybody else here listening to this totally didn't understand it either. 267 00:22:49.160 --> 00:22:55.079 He has on each blog post the number of unique people that have viewed an 268 00:22:55.079 --> 00:22:59.400 individual blog post, and that is definitely interesting. I don't think I've ever 269 00:22:59.400 --> 00:23:03.480 seen anybody just like sometimes you see views, but I don't think I've ever 270 00:23:03.559 --> 00:23:07.119 seen anybody list unique readers. Yeah, it was read, but then I 271 00:23:07.160 --> 00:23:14.279 found many blocks which are just counting the visitors. So they have for example, 272 00:23:14.279 --> 00:23:18.880 they display sixty thousand views, but that doesn't really make sense because I 273 00:23:18.920 --> 00:23:23.079 can relote my brother two hundred times and then it's not really useful. And 274 00:23:23.880 --> 00:23:27.759 I'm using a third party service that is just a counter, and whenever your 275 00:23:27.839 --> 00:23:33.559 component renders, I just put in use effect a call to this service so 276 00:23:33.599 --> 00:23:38.200 it will count, but in the same time return back the number of unique 277 00:23:38.279 --> 00:23:42.920 roots. So this is the way. How's it's done. It's very simple. 278 00:23:44.599 --> 00:23:48.519 It's like it might be worth a blog post. Yeah, it's one 279 00:23:48.519 --> 00:23:52.279 of these topics that are not very well covered. If you try to search 280 00:23:52.799 --> 00:23:59.680 how to add a counter and gets the block. It's all about Google analytics 281 00:23:59.720 --> 00:24:04.079 and it's so so difficult. So it's funny though, how little things like 282 00:24:04.119 --> 00:24:10.279 that people can find useful. One of the most popular things I've ever written 283 00:24:10.640 --> 00:24:14.240 is I wrote like, my blog is a little bit older, so it's 284 00:24:14.240 --> 00:24:18.680 written with Jekyl and I've I came up with some way like it's like a 285 00:24:18.720 --> 00:24:22.440 one liner piece of code to have a jeckal like point to an external blog 286 00:24:22.480 --> 00:24:26.440 post. So if you wanted to list blog posts but include things that you 287 00:24:26.440 --> 00:24:30.359 wrote on like other places and that thing gets like, I don't know what, 288 00:24:30.759 --> 00:24:36.880 but it's like a two paragraph blog post and it gets like it hit 289 00:24:36.920 --> 00:24:40.799 a sweet spot in Google. So it's funny how sometimes these things that you 290 00:24:40.839 --> 00:24:45.119 think are really little can be actually super valuable to people. Yeah, it's 291 00:24:45.279 --> 00:24:52.599 true. With today's situation, you can really easily create a serverless kind of 292 00:24:52.759 --> 00:24:56.920 service. And because it's so easy and people don't really need to have a 293 00:24:57.000 --> 00:25:02.880 local database or to own the database. Yeah, they usually use something like 294 00:25:02.920 --> 00:25:07.720 Firebase and try to easily put together some third party services and vola. It 295 00:25:07.839 --> 00:25:12.480 works. But it's it's not really I mean, so much effort for such 296 00:25:12.480 --> 00:25:18.319 a simple job. It's at least I try to think about the simplest possible 297 00:25:18.319 --> 00:25:22.119 solution out there. I like it. I feel like it's funny because personal 298 00:25:22.200 --> 00:25:26.640 blogs or the one place where over engineering something is like not only okay, 299 00:25:26.680 --> 00:25:30.480 but sometimes almost encourage, right, because it's like a place that you can 300 00:25:30.519 --> 00:25:34.839 experiment and have some fun with. Yeah, it's it's especially when you are 301 00:25:34.880 --> 00:25:38.559 just starting, you can do a lot of experiments. I'm doing that a 302 00:25:38.559 --> 00:25:45.440 lot because I don't really have so many readers. It's it's it's yeah, 303 00:25:45.480 --> 00:25:48.839 it's now it's the time to do crazy things. When you get a lot 304 00:25:48.839 --> 00:25:55.039 of readers, then they came for the crazy things. Then you get yeah, 305 00:25:55.119 --> 00:26:02.279 they can even see a four or four Yeah, the uh go ahead 306 00:26:02.319 --> 00:26:07.240 page. We keep doing this, please continue. The other thing I'm wondering 307 00:26:07.240 --> 00:26:10.799 about, speaking of, like little implementation details, what are you using to 308 00:26:11.240 --> 00:26:15.599 implement the newsletter? It's a mail Chimp for now. They I think they 309 00:26:17.799 --> 00:26:22.079 give one thousands, I think subscribers for free. So it's yeah, it's 310 00:26:22.599 --> 00:26:27.279 pretty say forward choice for me, but I may change it in the future. 311 00:26:29.319 --> 00:26:30.960 Do they give you the little like you have this little section in your 312 00:26:30.960 --> 00:26:34.599 blog post that encourages people to join. Is that something they provided or did 313 00:26:34.640 --> 00:26:38.240 you code up the design for that yourself. Do you mean the pop up 314 00:26:40.160 --> 00:26:42.640 the little thing that says join a foreign end newsletter, like little thing that 315 00:26:42.799 --> 00:26:49.240 entices people to subscribe to the newsletter? The form on the bottom. Yeah, 316 00:26:49.319 --> 00:26:53.480 the form on the bottom is just custom made. It's not really mail 317 00:26:53.559 --> 00:27:00.519 Chimp. I just post to their service, so it's just sort of the 318 00:27:00.559 --> 00:27:04.920 email address and then I just just play a confirmed message. But it's not 319 00:27:06.240 --> 00:27:08.880 it's not Melchin. You've got a little bit of design talent, because that 320 00:27:08.880 --> 00:27:15.279 thing looks really nice. It's very I know you said you're using like the 321 00:27:15.319 --> 00:27:18.440 default theme and such, but I can tell you've tweaked this quite a bit. 322 00:27:18.480 --> 00:27:25.519 It looks really nice. I'm jealous and I might steal this. Yeah, 323 00:27:25.559 --> 00:27:32.200 it's it's an evolution. Are you hosting a newsletter on your on your 324 00:27:32.240 --> 00:27:37.000 website? TJ No, no newsletter, but we do stuff for like kind 325 00:27:37.000 --> 00:27:44.640 to react and progress sometimes and definitely takes some inspiration from this. Yeah, 326 00:27:44.720 --> 00:27:48.359 I implemented one on my own personal website, which I launched about a month 327 00:27:48.400 --> 00:27:55.759 ago. When we're recording this anyway, But I and I looked at all 328 00:27:56.519 --> 00:28:03.720 the different email providers like mail Chimp and mail gun, and yeah, convert 329 00:28:03.799 --> 00:28:07.920 kit is a big one. I ended up going with one called substack, 330 00:28:08.039 --> 00:28:15.559 though, and the thinking was that substack doesn't charge you based on the amount 331 00:28:15.559 --> 00:28:19.839 of readers you have. It actually charges you if you start to monetize your 332 00:28:19.920 --> 00:28:26.160 newsletter. Because my blog is exactly what yours is. It's just a personal 333 00:28:26.200 --> 00:28:29.759 one. I write tech articles, I post them, and if people want 334 00:28:29.799 --> 00:28:33.440 to get notified when I do, great, But I don't really see it 335 00:28:33.480 --> 00:28:40.839 ever becoming some sort of a monetized thing. And I even though I'm very 336 00:28:40.880 --> 00:28:45.440 early in my own website or my redo of my website. I guess the 337 00:28:45.519 --> 00:28:53.000 idea of crossing those subscriber thresholds and then having to pay thirty bucks a month, 338 00:28:53.079 --> 00:28:59.079 fifty bucks a month more than that just to send a newsletter probably once 339 00:28:59.119 --> 00:29:06.880 a month, just makes me really unhappy to even contemplate. So that's why 340 00:29:06.880 --> 00:29:08.920 I decided to go with substack, because it seems like it doesn't matter how 341 00:29:08.960 --> 00:29:17.000 big your subscriber base gets, they will not charge you. So it's a 342 00:29:17.000 --> 00:29:22.839 little bit weird because it takes you off of my site when you subscribe. 343 00:29:22.960 --> 00:29:26.319 But my thought is I can write short blogs on substack that link you back 344 00:29:26.319 --> 00:29:30.240 to the blogs that I've written on my site. So it seems like a 345 00:29:30.279 --> 00:29:34.960 decent solution for the meantime. And then I guess I ever want to change 346 00:29:36.000 --> 00:29:38.720 it and start paying, or if I decide that I will not get a 347 00:29:38.720 --> 00:29:45.039 subscriber base that warrants that, maybe I'll go with something more sophisticated that keeps 348 00:29:45.079 --> 00:29:49.400 me, keeps users on site, like Mailchimp or or something in the future. 349 00:29:49.839 --> 00:29:55.559 Yeah, I also heard about substack. I actually have seen Kent Beeck. 350 00:29:55.720 --> 00:30:00.279 For example, he's using you as well, so, and he's someone 351 00:30:00.319 --> 00:30:04.680 with all I think big communities around him. So, but he's posting in 352 00:30:04.759 --> 00:30:11.079 there. Oh well, that's that's encouraging then to know that people who have 353 00:30:11.200 --> 00:30:15.640 big followings are using it to their advantage too. Yeah. Yeah, and 354 00:30:15.720 --> 00:30:18.839 all the cool kids have newsletters. What am I even doing with myself? 355 00:30:18.079 --> 00:30:23.160 It's apparently it's just like all the cool kids are starting tech podcasts. It's 356 00:30:23.160 --> 00:30:29.720 like there's more podcasts than there is time in the day to listen to them. 357 00:30:29.839 --> 00:30:33.960 Yeah, that's true. Is there things that we haven't covered? I 358 00:30:33.000 --> 00:30:38.440 know, anything about testing components that we didn't get to or ask you? 359 00:30:38.880 --> 00:30:42.960 Oh, I think we touched the basics and if we have to wrap up, 360 00:30:44.000 --> 00:30:51.480 it's just it's very controversial topic, and I think some sometimes people are 361 00:30:51.480 --> 00:30:56.480 too dogmatic about what we should use in terms of libraries. I think, 362 00:30:57.000 --> 00:31:02.880 Jane, it's all about it's all about what you really can't do in your 363 00:31:03.160 --> 00:31:10.880 certain situation, with your team, with your organizational structure, because something may 364 00:31:10.960 --> 00:31:15.960 work but others won't work in different organizations. Do you mean it's controversial in 365 00:31:17.000 --> 00:31:21.920 the sense that, like some people give the impression that like you have to 366 00:31:22.000 --> 00:31:26.519 use the popular thing or else you're doing it wrong sort of thing. Yeah. 367 00:31:26.519 --> 00:31:30.319 I mean, for example, if you do all of dumb comparisons in 368 00:31:30.359 --> 00:31:37.000 your tests and you are publicly doing that in a form of blog posts or 369 00:31:37.599 --> 00:31:41.599 maybe tweeting about it, you will get a lot of people commenting that this 370 00:31:41.720 --> 00:31:45.240 is definitely in the past and you should not do that. I see. 371 00:31:45.720 --> 00:31:52.079 I have even heard that, Okay, testing if a function is called by 372 00:31:52.119 --> 00:31:56.400 clicking something in your UI is also not a good idea. So it's some 373 00:31:56.440 --> 00:32:02.599 people could be really dogmatic about these things, but it's really what works for 374 00:32:04.240 --> 00:32:13.839 you in this particular situation, because sometimes don't comparison maybe required, and sometimes 375 00:32:13.880 --> 00:32:19.839 you want to test for a function call, especially if it's somewhere between conditional 376 00:32:19.880 --> 00:32:24.960 logic, So you should really think about, yeah, what works for you. 377 00:32:28.200 --> 00:32:31.519 Yeah, I feel like that's that's good advice for I mean React testing 378 00:32:31.559 --> 00:32:37.599 for Reactor, just software development in general. Like it's it's good to have 379 00:32:37.960 --> 00:32:40.440 sort of best practices, but at the same time, like, don't yell 380 00:32:40.440 --> 00:32:46.559 at people on Twitter for for things that they're doing that you don't totally have 381 00:32:46.599 --> 00:32:54.400 the context for either. Yeah, that's why I don't have Twitter. Also, 382 00:32:57.839 --> 00:33:00.559 it takes too much of my time. And I don't really have time 383 00:33:00.640 --> 00:33:07.680 to get into conversation since yeah right, and tweet about relevant cool Paige, 384 00:33:07.680 --> 00:33:14.599 did you have anything else? No? This has been a really interesting conversation 385 00:33:14.759 --> 00:33:17.720 though, So since you're not on Twitter, if people want to find you, 386 00:33:17.880 --> 00:33:22.519 where can they find you online? If you just go to my blog 387 00:33:22.599 --> 00:33:29.960 you will find a few links. Probably the best ways by just email and 388 00:33:30.400 --> 00:33:35.279 I have also linked and GitHub, so this is the way to do it. 389 00:33:35.720 --> 00:33:40.039 Oh cool, So why don't we move on to the picks? Then, 390 00:33:40.200 --> 00:33:45.200 paigde you want to kick us off? Sure? So my pick this 391 00:33:45.240 --> 00:33:47.839 week is going to be a show that has been out for a while, 392 00:33:49.039 --> 00:33:52.920 but my husband and I have been recently rewatching it with one of our friends 393 00:33:53.359 --> 00:33:59.839 who hasn't seen it before, and is the Jack Reacher series on Amazon Prime. 394 00:34:00.839 --> 00:34:04.319 And I believe that it's Tom Clancy's Jack Reacher. It's based on the 395 00:34:04.359 --> 00:34:08.119 books, and it is just rewatching it after having seen it, you know, 396 00:34:08.199 --> 00:34:14.519 a year or two ago. It's still really well done. It just 397 00:34:14.960 --> 00:34:22.920 sucks you in and we can't stop watching it. So I would definitely recommend 398 00:34:23.000 --> 00:34:28.480 that one if you're looking for something else to binge. As we slowly start 399 00:34:28.519 --> 00:34:35.119 to come out of the Covid Hayes of the past year plus, so I 400 00:34:35.119 --> 00:34:38.280 think that that is going. Actually, I'm sorry that that is the movie 401 00:34:38.719 --> 00:34:45.519 with Tom Cruise. What I'm thinking of is Jack Ryan, another Tom Clancy 402 00:34:45.960 --> 00:34:52.639 novel. Please don't write into the show notes about that that I got it 403 00:34:52.679 --> 00:34:57.760 wrong the first time. But Jack Ryan is the series. There's two seasons. 404 00:34:57.840 --> 00:35:00.719 It's a great watch. I would definitely encourage it if you're like, 405 00:35:00.840 --> 00:35:07.679 if you're into the spy spionage CIA type of shows. Okay, I definitely 406 00:35:07.679 --> 00:35:13.039 remember seeing the the ads for this now, so I'll have to check it 407 00:35:13.039 --> 00:35:15.519 out. It's a good one. Cool. My pick for this week, 408 00:35:15.599 --> 00:35:17.800 I got a I've been getting my bike out a little bit more. It's 409 00:35:17.840 --> 00:35:23.079 been nicer here in Michigan, and I got a little thing that's just a 410 00:35:23.239 --> 00:35:29.159 quick and easy speedometer for it, which I kind of like. It's kind 411 00:35:29.159 --> 00:35:32.000 of fun to like challenge yourself to see how fast you can go without dying 412 00:35:32.440 --> 00:35:37.920 on Michigan roads. But it's a did a little bit of research and found 413 00:35:37.920 --> 00:35:39.840 one I liked, so I will drop that in the show notes and I'll 414 00:35:39.880 --> 00:35:44.719 just pick biking in general. If you're not a person that likes biking fun 415 00:35:44.760 --> 00:35:47.239 times, Mireslav, how about your picks? I think I have two. 416 00:35:47.840 --> 00:35:54.639 The one is I recently found out that Eric Crossman, from the person behind 417 00:35:54.760 --> 00:36:00.960 the rep Final rep Final Form, he also stoughtsublishing his blog posts and so 418 00:36:01.239 --> 00:36:07.199 right now he has a blog and he's one of the people who I actually 419 00:36:07.719 --> 00:36:12.679 learned a lot, and I think he has what to say and it's it's 420 00:36:12.840 --> 00:36:17.199 good to if you if you really want to read something from the people behind 421 00:36:17.679 --> 00:36:25.320 React, because he's his programming and React for quite some time, so you 422 00:36:25.360 --> 00:36:30.199 can. You can visit his block based blink. And then the other one 423 00:36:30.280 --> 00:36:37.400 is just an article I read recently from kemp dot's newsletter. But the article 424 00:36:37.440 --> 00:36:40.079 itself, I think it's not it's older one, it's not new. But 425 00:36:40.119 --> 00:36:45.760 basically he's talking about that in many situations, you don't really need a global 426 00:36:45.800 --> 00:36:52.239 state management solution for your application, for your React applications, and that is 427 00:36:52.280 --> 00:36:57.199 also the case with many of applications I have done. If you really care 428 00:36:57.280 --> 00:37:00.400 for you think about if you can do it just with and maybe a little 429 00:37:00.400 --> 00:37:06.199 bit of context, then yeah, you don't really need three ducks. But 430 00:37:06.280 --> 00:37:10.880 the article could be controversial, Well I will just put that, Yeah, 431 00:37:10.920 --> 00:37:17.280 We've had many discussions in past episodes about that very controversial subject which you just 432 00:37:17.400 --> 00:37:22.679 mentioned. But Mark Erickson, who was a guest on the podcast a little 433 00:37:22.679 --> 00:37:27.880 while back, did a great job of kind of explaining the difference between REDUCS, 434 00:37:28.000 --> 00:37:34.119 which holds the global state versus context, which just passes state around the 435 00:37:34.199 --> 00:37:37.280 application isn't actually in charge of holding it, which made it a lot more 436 00:37:37.400 --> 00:37:42.280 clear to me kind of when you might need one versus the other. But 437 00:37:42.599 --> 00:37:47.119 I completely agree with you, we as engineers have way over engineered a lot 438 00:37:47.159 --> 00:37:52.280 of applications to use REDUCS when we probably didn't really need it in the first 439 00:37:52.280 --> 00:37:57.599 place. Yeah, it's true. Sometimes we inherit habits from previous applications and 440 00:37:57.679 --> 00:38:01.719 we tend to copy and pace the same approach. Yeah. Well cool. 441 00:38:01.840 --> 00:38:05.480 Well, thanks Maria stuff for joining us. This was a lot of fun 442 00:38:05.559 --> 00:38:07.440 chatting with you. Thank you too, all right, Well, thanks everybody 443 00:38:07.480 --> 00:38:10.320 again, and see you next week. Yeah, see you next time.