WEBVTT 1 00:00:00.200 --> 00:00:03.399 Welcome to React Roundup, the podcast where we keep you 2 00:00:03.480 --> 00:00:07.080 updated on all things React related. This show is brought 3 00:00:07.080 --> 00:00:11.080 to you by Void and top End Devs. Unvoid provides 4 00:00:11.160 --> 00:00:14.839 high quality design and software development services on a client 5 00:00:14.880 --> 00:00:20.239 friendly business model. Unlike all other software agencies, Unvoid allows 6 00:00:20.239 --> 00:00:24.120 clients to only pay after the work is delivered and approved. 7 00:00:24.600 --> 00:00:28.079 Visit unvoid dot com to learn more and reach out. 8 00:00:28.199 --> 00:00:30.679 If you know a company that needs more professionals to 9 00:00:30.760 --> 00:00:36.000 help with design and software development, that's u n void 10 00:00:36.479 --> 00:00:39.840 dot com and top end Davs helps you stay up 11 00:00:39.840 --> 00:00:44.320 to date with cutting edge technologies like JavaScript, Ruby, Elixir, 12 00:00:44.520 --> 00:00:48.799 and AI. Visit topandevs dot com to join their AIDV 13 00:00:48.880 --> 00:00:54.159 boot camp, weekly community meetups and access expert tutorials. I'm 14 00:00:54.240 --> 00:00:58.079 Lucas Paganini, founder of Onvoid and host of this podcast. 15 00:00:58.439 --> 00:01:04.400 Thank you for tuning in. Let's jump into the episode. 16 00:01:07.640 --> 00:01:10.719 Hello everybody, and welcome to another episode of React Round That. 17 00:01:11.120 --> 00:01:13.280 My name is TJ Van Tol and with me on 18 00:01:13.280 --> 00:01:14.840 a panel today is Paige. 19 00:01:14.680 --> 00:01:17.439 Meeting guts Hey everyone, and our. 20 00:01:17.359 --> 00:01:21.159 Special guest today is mirslav nick Love which hopefully I 21 00:01:21.239 --> 00:01:24.000 pronounced that correctly, but mirsta. Welcome to React round that. 22 00:01:24.079 --> 00:01:26.640 Why don't you tell everybody who you are, what you do, 23 00:01:26.799 --> 00:01:28.400 why you're famous, that sort of stuff. 24 00:01:28.879 --> 00:01:31.840 Thank you, hi, everybody. I don't think i'm famous, to 25 00:01:31.879 --> 00:01:36.040 be honest, I work as a UI developer mostly front 26 00:01:36.120 --> 00:01:40.000 ends so one dot com it's Danish company that is 27 00:01:40.040 --> 00:01:45.040 currently expelling, and what I do is basically react and 28 00:01:45.159 --> 00:01:49.040 in my free time, I try to maintain my block 29 00:01:49.400 --> 00:01:54.840 so turning my experience in some useful articles. That's like 30 00:01:54.959 --> 00:01:58.719 something like a hobby. And yeah, I'm a family guy. 31 00:01:59.599 --> 00:02:04.200 My wife, Panta, kids a boy, so that basically takes 32 00:02:04.359 --> 00:02:08.319 a hour all my free time, so I don't really 33 00:02:08.400 --> 00:02:11.719 have much time to spend on side activities. 34 00:02:12.199 --> 00:02:15.639 That's so fun. We were talking before. I'm very jealous Denmark. 35 00:02:15.719 --> 00:02:18.840 Copenhagen is a super beautiful area, so I'm very jealous 36 00:02:18.840 --> 00:02:21.240 of that. And your blog will drop it in the 37 00:02:22.280 --> 00:02:24.479 show notes as well. I like the design on it 38 00:02:24.520 --> 00:02:27.639 as well, and I know like reading through some of them. 39 00:02:27.680 --> 00:02:30.039 I know you wanted to talk a bit about testing 40 00:02:30.120 --> 00:02:33.960 and writing just human what you call human friendly REAC 41 00:02:34.000 --> 00:02:37.000 component tests. Do you want to outline sort of that 42 00:02:37.199 --> 00:02:39.520 whole concept and what you mean by that to sort 43 00:02:39.560 --> 00:02:40.479 of kick us off here? 44 00:02:41.159 --> 00:02:46.080 It's it's basically it's all about library called Unexpected Jays 45 00:02:46.400 --> 00:02:49.919 and it's I know it's not very popular, but what 46 00:02:50.039 --> 00:02:53.000 it does on what it adds on top of everything 47 00:02:53.039 --> 00:02:57.360 else we have seen is actually out of playing English 48 00:02:57.719 --> 00:03:01.280 when you when you write your tests. And I'm using 49 00:03:01.319 --> 00:03:05.159 that library basically for the past five years, and I 50 00:03:05.280 --> 00:03:09.039 just decided to write an article which is just a 51 00:03:09.159 --> 00:03:13.479 short introduction to what is possible with the library. And 52 00:03:13.520 --> 00:03:16.080 so I decided to write the article for cisys Tricks 53 00:03:16.120 --> 00:03:21.159 so that it's basically rich a little bit wider audience. 54 00:03:22.039 --> 00:03:25.479 And it was very surprising that I think right now, 55 00:03:25.479 --> 00:03:30.360 if you write React component tests or just React tests testing, 56 00:03:31.280 --> 00:03:34.560 that appears on the first page. But I believe this 57 00:03:34.719 --> 00:03:40.400 is because of the strong domain of cesys Tricks. So yeah, 58 00:03:40.560 --> 00:03:45.759 it's also brought some discussion because it seems like people 59 00:03:45.840 --> 00:03:49.800 prefer different style of testing and it's a little bit opinionated, 60 00:03:50.560 --> 00:03:53.800 but yeah, there are some there is some positive feedback 61 00:03:54.080 --> 00:03:54.520 as well. 62 00:03:54.840 --> 00:03:58.680 So can you expand a little bit about about what 63 00:03:58.879 --> 00:04:02.199 unexpected jas is because that's actually a framework that I've 64 00:04:02.199 --> 00:04:05.840 never heard of before. I'm interested does it work like 65 00:04:05.960 --> 00:04:09.840 with React testing library or is it Cyprus or is 66 00:04:09.879 --> 00:04:12.400 it both unit and and can you tell us a 67 00:04:12.400 --> 00:04:13.360 little bit more about it? 68 00:04:13.719 --> 00:04:16.759 Yeah, first just to say that I'm not a maintainer 69 00:04:16.800 --> 00:04:20.000 of the library. I'm using it, but as far as 70 00:04:20.040 --> 00:04:22.480 I know, it should be able because it works with 71 00:04:22.560 --> 00:04:25.519 plug ins. It should be able to use some of 72 00:04:25.560 --> 00:04:29.000 the plug ins with reg Testing library, so you can 73 00:04:29.160 --> 00:04:33.199 use REAP testing library and some assertions custom assertions on 74 00:04:33.240 --> 00:04:36.920 top so you can write your plain English tests and 75 00:04:38.480 --> 00:04:42.839 behind that it's React Testing library, so it should be possible, 76 00:04:42.879 --> 00:04:47.079 though I haven't tried. Yeah, and I also kept for 77 00:04:47.079 --> 00:04:49.639 a light version of the article on my block, just 78 00:04:50.040 --> 00:04:53.360 it's a little bit lighter without the introduction because currently 79 00:04:53.399 --> 00:04:57.759 it's a little bit controversial on how we tests, and 80 00:04:58.079 --> 00:05:01.839 I know the community is going strongly after reacticting library. 81 00:05:02.519 --> 00:05:08.360 So people are sometimes speaky when you present something unusual 82 00:05:08.560 --> 00:05:09.000 for you. 83 00:05:09.480 --> 00:05:11.879 Absolutely new things are not to be trusted. 84 00:05:12.920 --> 00:05:15.639 Developments don't have opinions and what you're talking about. 85 00:05:18.240 --> 00:05:21.480 So how did you first come across unexpected? You said 86 00:05:21.480 --> 00:05:23.560 you've been using it for a number of years. Now, 87 00:05:23.600 --> 00:05:25.879 did it somebody else introduce it to you or was 88 00:05:25.920 --> 00:05:28.240 it just something you stumbled upon and you really liked. 89 00:05:28.399 --> 00:05:31.199 How how it operated. Uh. 90 00:05:31.879 --> 00:05:34.519 To be honest, I didn't have choice because when I 91 00:05:34.600 --> 00:05:38.560 joined one dot com, they have already they already used 92 00:05:38.759 --> 00:05:43.079 have already using this library. And some of the people 93 00:05:43.079 --> 00:05:47.480 who are maintaining the library also work for the company 94 00:05:47.600 --> 00:05:50.480 at some point though they are no longer part, but 95 00:05:50.959 --> 00:05:54.240 we're still we're still using it internally. 96 00:05:53.879 --> 00:05:55.319 So that's a good reason. 97 00:05:55.360 --> 00:05:59.639 Is any did you get a little bit into I know, 98 00:05:59.680 --> 00:06:01.920 one thing you cover in your article is trying the 99 00:06:02.040 --> 00:06:05.959 right tests that are sort of a least say, human 100 00:06:06.040 --> 00:06:09.879 friendly or easily readable. Could you give like some examples 101 00:06:09.920 --> 00:06:11.839 of what you mean by that, And I know, like 102 00:06:12.800 --> 00:06:16.680 syntax is kind of hard on an audio podcast, but 103 00:06:16.800 --> 00:06:21.279 just like high level like how you approach structuring tests 104 00:06:21.360 --> 00:06:24.480 in a human friendlier, in a more readable way. 105 00:06:24.680 --> 00:06:29.120 So basically what we use is the usual arrange acts 106 00:06:29.240 --> 00:06:32.800 assert kind of thing, which is I mean you first 107 00:06:32.879 --> 00:06:35.600 arrange or test, then you act on it, and then 108 00:06:35.639 --> 00:06:40.560 you assert. So this is basically shared approach for I 109 00:06:40.600 --> 00:06:45.040 think for every testing library. But what Unexpected does a 110 00:06:45.079 --> 00:06:49.519 little bit different is the expect. Assertion is just a 111 00:06:49.600 --> 00:06:55.279 function expect and inside you pass as many arguments as 112 00:06:55.319 --> 00:07:00.920 you want, and these arguments are just plain strings, so 113 00:07:01.000 --> 00:07:04.560 you don't really have a JP relax syntax like dot 114 00:07:05.199 --> 00:07:09.800 dot equals or dot to be executed. You just play 115 00:07:09.800 --> 00:07:14.680 in English and usually the editor is colors that in 116 00:07:14.680 --> 00:07:16.920 the same color, so it's very easy to read. It's 117 00:07:16.920 --> 00:07:19.959 easy for the eye. Maybe not so straightforward to write 118 00:07:19.959 --> 00:07:23.399 it because your editor won't help you to auto complete 119 00:07:23.720 --> 00:07:29.480 different function goals, but it's it's it's really it's really 120 00:07:29.600 --> 00:07:32.519 easy for the eye. And we we are working in 121 00:07:32.639 --> 00:07:35.800 a in a team and it's basically usually not just 122 00:07:35.839 --> 00:07:39.160 one person who is working with these file testing files, 123 00:07:39.680 --> 00:07:42.560 So you want something expressive there. 124 00:07:42.920 --> 00:07:45.639 That's very cool. I'm looking at the article right now. 125 00:07:46.319 --> 00:07:50.800 I guess one question I have is how how long 126 00:07:50.959 --> 00:07:53.439 do you think it takes a new developer to get 127 00:07:53.519 --> 00:07:57.000 up to speed with using something like unexpected. Like most 128 00:07:57.079 --> 00:07:59.800 of us, if we've been working with React for a while, 129 00:07:59.800 --> 00:08:03.639 we're probably pretty familiar with just may be familiar with Enzyme, 130 00:08:04.160 --> 00:08:08.079 maybe familiar with React testing library. But how easy or 131 00:08:08.120 --> 00:08:10.560 difficult do you think it is to get up to 132 00:08:10.600 --> 00:08:14.120 speed with unexpected and then start to potentially integrate it 133 00:08:14.120 --> 00:08:17.439 into any existing testing frameworks that you might have. 134 00:08:18.000 --> 00:08:20.920 I think it's pretty easy, especially if you use examples 135 00:08:20.959 --> 00:08:25.720 as a real examples as a reference. Maybe documentation is 136 00:08:25.759 --> 00:08:29.199 not going to be the fastest path learning path, but 137 00:08:30.000 --> 00:08:33.200 if you use examples, it's really easy. And usually you 138 00:08:33.240 --> 00:08:36.879 have just you have several common assertions that you would 139 00:08:36.919 --> 00:08:40.639 like to use, and you don't really use so many 140 00:08:41.120 --> 00:08:46.000 different features, at least for the React components. You want 141 00:08:46.039 --> 00:08:50.120 to test if something has rendered, so usually you test 142 00:08:50.519 --> 00:08:54.080 you equate for an element and you test for its 143 00:08:54.159 --> 00:08:58.799 string that it contains. And also the other thing is 144 00:08:58.840 --> 00:09:04.320 testing function that is also straightforward. So apart from these 145 00:09:04.879 --> 00:09:10.960 two things presence of certain elements and executing functions, you're 146 00:09:11.159 --> 00:09:16.080 most likely rarely going to use other other like assercial 147 00:09:16.200 --> 00:09:19.559 So I would say, but it's it's very straightforward, at 148 00:09:19.639 --> 00:09:20.759 least for at least for me. 149 00:09:20.840 --> 00:09:25.720 It us as I remember, that's always encouraging. It's I 150 00:09:25.759 --> 00:09:28.399 remember when I was first learning React Testing Library. It 151 00:09:28.480 --> 00:09:31.279 was kind of a massive mind shift for me to 152 00:09:31.360 --> 00:09:33.720 go from the way that just an enzyme had been 153 00:09:33.759 --> 00:09:37.759 doing it to trying to reorient myself towards the way 154 00:09:37.840 --> 00:09:41.159 React Testing Library focuses on what's in the dom and 155 00:09:41.240 --> 00:09:45.240 interacting with that at a unit test level. So anything 156 00:09:45.279 --> 00:09:48.480 that is easier to get up and started with is 157 00:09:48.519 --> 00:09:51.240 definitely always good. 158 00:09:52.159 --> 00:09:55.120 Yeah, that's still something is like I'm not as in 159 00:09:55.200 --> 00:10:00.639 the weeds with unit testing libraries anymore, So sometimes a 160 00:10:00.679 --> 00:10:03.320 lot of this type of stuff goes over my head 161 00:10:04.039 --> 00:10:07.320 and I'm actually curious, like this, this is a question, 162 00:10:07.360 --> 00:10:10.399 I guess for both of you, is where is the 163 00:10:10.519 --> 00:10:13.600 React world at right now for in terms of like 164 00:10:13.720 --> 00:10:19.600 testing markup structure in your like individual unit tests, Because 165 00:10:19.879 --> 00:10:21.960 I know Miroslov in some of your articles you went 166 00:10:22.000 --> 00:10:26.559 in and you are like basically asserting against the exact 167 00:10:26.679 --> 00:10:30.799 dom structure. Is there some advantages of that or like 168 00:10:31.440 --> 00:10:33.559 versus like I'm if I want to test my component 169 00:10:33.559 --> 00:10:37.200 render something specifically, like how specific should your as search 170 00:10:37.200 --> 00:10:39.600 and be for I'm looking for this exact markup structure 171 00:10:39.720 --> 00:10:41.279 or do you just like try to pick out an 172 00:10:41.320 --> 00:10:44.559 individual string like I just care that it spit this 173 00:10:44.639 --> 00:10:47.480 out correctly. Like I'm kind of curious where the React 174 00:10:47.480 --> 00:10:50.320 world is at with that sort of setup right now. 175 00:10:50.720 --> 00:10:55.080 So for my understanding and what my team is doing 176 00:10:55.320 --> 00:10:59.759 today is that we're a lot more focused on this 177 00:11:00.360 --> 00:11:02.679 basically the same interactions that you would try and do 178 00:11:02.799 --> 00:11:05.399 in an end to end test in the unit tests. 179 00:11:05.720 --> 00:11:10.120 So it's a lot less about did this REDUCS dispatch 180 00:11:10.399 --> 00:11:15.399 happen or did this particular function mock get called? And 181 00:11:15.440 --> 00:11:18.639 it's a lot more of can I see this element 182 00:11:18.720 --> 00:11:21.240 in the dom? Can I click this button? Or is 183 00:11:21.279 --> 00:11:24.720 this button disabled? Did this list appear? And can I 184 00:11:24.799 --> 00:11:28.200 interact with it? Which, like I said, it's a little 185 00:11:28.240 --> 00:11:30.159 bit hard to get used to when you're coming from 186 00:11:30.159 --> 00:11:33.159 the old way of testing did this function fire? But 187 00:11:33.360 --> 00:11:36.559 I like it a lot more because it seems to 188 00:11:36.559 --> 00:11:38.919 me to be a lot more true to life and 189 00:11:38.919 --> 00:11:42.039 how as how a user would interact with our application. 190 00:11:42.159 --> 00:11:44.879 They don't care if the REDUCS dispatch fired or not. 191 00:11:45.000 --> 00:11:47.159 They just care that their list loaded and you know, 192 00:11:47.200 --> 00:11:49.519 they can click the button and go through their shopping cart. 193 00:11:50.480 --> 00:11:52.960 So that's kind of what we've been leaning towards. So 194 00:11:53.080 --> 00:11:56.600 not necessarily, you know, is there this particular H one 195 00:11:56.679 --> 00:12:00.039 tag with this ID? But can I see you know, 196 00:12:00.200 --> 00:12:03.919 my page title? Or can I see this drawer that 197 00:12:04.039 --> 00:12:06.000 is supposed to be there at the bottom and can 198 00:12:06.039 --> 00:12:08.399 I open it? Or can I click buttons? And you know, 199 00:12:08.480 --> 00:12:11.240 do different stuff like that within the component. So that's 200 00:12:11.320 --> 00:12:14.200 kind of the approach that we're taking. But i'd love 201 00:12:14.240 --> 00:12:16.679 to hear how other people are doing it as well. 202 00:12:17.399 --> 00:12:20.519 I would say that we're using the same approach at least. 203 00:12:21.399 --> 00:12:24.279 Comparing the dom structure is something that we use really, 204 00:12:24.840 --> 00:12:27.600 and I know that the communities pretty much with React 205 00:12:27.600 --> 00:12:31.360 Testing Library going away from that kind of assertions, So 206 00:12:31.399 --> 00:12:35.879 we use it really and we mostly unit tests and 207 00:12:35.960 --> 00:12:39.480 we have strong QATEAM, so the visual part is really 208 00:12:39.879 --> 00:12:43.600 for them, so it's not something that we really deal with. 209 00:12:43.960 --> 00:12:49.679 It's we focus on the unit tests and edge cases especially, 210 00:12:50.759 --> 00:12:51.840 so that's ourly. 211 00:12:52.240 --> 00:12:54.360 That makes a lot of sense. And because I remember, 212 00:12:54.879 --> 00:12:56.559 like you said, Page, the way it used to be 213 00:12:56.720 --> 00:12:59.320 is you would you would do things like ensure your 214 00:12:59.360 --> 00:13:02.519 marks we're here, or that your testing structure, but it 215 00:13:02.559 --> 00:13:04.039 felt like a lot of times you were just writing 216 00:13:04.080 --> 00:13:07.320 those tests to write those tests so that you get 217 00:13:07.360 --> 00:13:10.919 like better code coverage and such. I like that just 218 00:13:10.919 --> 00:13:14.039 because it feels like, I don't know, the test just 219 00:13:14.039 --> 00:13:16.519 makes more sense. And I feel like there's a lot 220 00:13:16.519 --> 00:13:20.320 better not just QA, but like visual testing tools now 221 00:13:20.360 --> 00:13:23.919 as well to catch some of these things, Like I 222 00:13:23.960 --> 00:13:26.919 think a lot of these like snapshotting tools are becoming 223 00:13:26.919 --> 00:13:30.200 a lot more popular as well to catch like if 224 00:13:30.200 --> 00:13:33.600 you did screw up some like markup thing in your 225 00:13:33.600 --> 00:13:36.639 buttons suddenly doesn't look like a button anymore. That there's 226 00:13:36.759 --> 00:13:38.320 some other test is going to catch that, so you 227 00:13:38.399 --> 00:13:41.559 don't need to like test your HTML parsing. 228 00:13:42.200 --> 00:13:45.039 Yeah, and actually that's something that I'd be interested to 229 00:13:45.080 --> 00:13:47.519 hear more about. Miroslav, you said that you've got a 230 00:13:47.600 --> 00:13:51.320 QA team who helps you with the visual portion of it. 231 00:13:51.519 --> 00:13:54.600 Are they using that you're awarever they using any particular 232 00:13:54.679 --> 00:13:58.919 tools because visual regression testing is something that my team 233 00:13:58.919 --> 00:14:01.279 has struggled with in the as, but we haven't really 234 00:14:01.320 --> 00:14:05.960 found a great tool that helps keep that up to date. 235 00:14:06.759 --> 00:14:09.559 Yeah, they have their own tools, but a lot of 236 00:14:09.600 --> 00:14:12.840 the testing is I think kind of ends to end testing, 237 00:14:13.120 --> 00:14:16.120 for example, adding a product to the shopping cart, and 238 00:14:16.200 --> 00:14:19.360 we follow the whole process up until the end. This 239 00:14:19.519 --> 00:14:23.879 is what is important for them. I know some people 240 00:14:23.919 --> 00:14:28.960 suggest to write user stories as the part of the storybook, 241 00:14:29.200 --> 00:14:32.639 and then you use something like cypress on top to 242 00:14:33.240 --> 00:14:38.919 visually compare your user stories your components. I haven't tried that. 243 00:14:39.600 --> 00:14:41.919 I think it is for our case, it's going to 244 00:14:41.919 --> 00:14:45.240 be too much of an effort if you really do 245 00:14:45.279 --> 00:14:48.039 your homework with the unit tests. At least our experience 246 00:14:48.039 --> 00:14:52.240 show that we don't really face production box and we 247 00:14:52.279 --> 00:14:55.600 are not really trying to have a full test coverage, 248 00:14:55.840 --> 00:14:59.320 just trying to test the fragile paths of our applications. 249 00:15:00.120 --> 00:15:03.879 So but actually we have a we have a product 250 00:15:03.960 --> 00:15:08.799 which was launched in somewhere October. It's heavily used, and 251 00:15:09.759 --> 00:15:13.840 we didn't have a single front and back for that 252 00:15:14.000 --> 00:15:17.000 product up until this moment. It was I think the 253 00:15:17.080 --> 00:15:21.720 team did a good job of testing and iterations. So 254 00:15:21.759 --> 00:15:27.919 it's I know, it's rare, something that's remarkable from time 255 00:15:27.960 --> 00:15:28.320 to time. 256 00:15:28.720 --> 00:15:29.639 Did you get an award? 257 00:15:29.879 --> 00:15:37.279 Like, Oh, I'm not sure if people notice that achievements. 258 00:15:37.559 --> 00:15:39.440 I don't notice until it stops working. 259 00:15:39.519 --> 00:15:40.360 That's the problem. 260 00:15:40.720 --> 00:15:44.399 Yeah, that's the thing about testing is like there's you 261 00:15:44.440 --> 00:15:47.320 don't get a if you do your job right, Like 262 00:15:47.440 --> 00:15:50.279 no one ever knows that you have all these processes 263 00:15:50.320 --> 00:15:52.360 behind it. It's sort of the good and bad thing 264 00:15:52.360 --> 00:15:55.360 about it. So I'm curious your stuff. What what made 265 00:15:55.399 --> 00:15:57.799 you want to write about this and start a blog 266 00:15:57.879 --> 00:15:59.399 and share some of this stuff. 267 00:15:59.679 --> 00:16:03.559 Yeah, I didn't do it before because I suppose that 268 00:16:04.399 --> 00:16:08.080 our time is such a resource that we basically it's 269 00:16:08.120 --> 00:16:13.519 not we cannot regain it, it's lost basically, so writing 270 00:16:13.559 --> 00:16:17.120 an article, I mean, junior developers, writing an articles is 271 00:16:17.360 --> 00:16:21.000 something that's at least I try to avoid because I 272 00:16:21.200 --> 00:16:24.639 don't think I had something to tell, something variable to 273 00:16:24.679 --> 00:16:29.360 take tell people, and reading my ten minutes article will 274 00:16:29.399 --> 00:16:34.000 be a loss of time. So I decided to start 275 00:16:34.039 --> 00:16:38.320 writing maybe after thirteen years of working with work applications, 276 00:16:39.200 --> 00:16:42.200 just because I feel a little bit more comfortable and 277 00:16:42.840 --> 00:16:46.480 maybe I have something important to say and people want 278 00:16:46.519 --> 00:16:50.440 to just spend there ten minutes and forget after that. 279 00:16:52.440 --> 00:16:56.559 It's a tricky area at least I feel uncomfortable. So yeah, 280 00:16:56.840 --> 00:16:59.000 that's the main reason I suppose. And I have a 281 00:16:59.039 --> 00:17:04.559 lot of ideas material during these years, so there's plenty 282 00:17:04.599 --> 00:17:05.519 of topics. 283 00:17:05.720 --> 00:17:08.559 I think after thirteen years you could be considered kind 284 00:17:08.599 --> 00:17:12.799 of an expert in development. That's that's a fair amount 285 00:17:12.799 --> 00:17:14.640 of time to see a lot of stuff. 286 00:17:16.079 --> 00:17:21.119 Yeah, yeah, explor six this was there back back then, 287 00:17:21.279 --> 00:17:21.839 I remember. 288 00:17:22.279 --> 00:17:26.079 But yeah, thirteen years is about where I'm at as well. 289 00:17:26.119 --> 00:17:29.599 I started. My first apps were i E six only 290 00:17:29.759 --> 00:17:33.279 corporate apps, so this is these are fun times. 291 00:17:35.200 --> 00:17:38.920 Yeah, oh I see here, Oh go ahead, please go ahead. 292 00:17:39.200 --> 00:17:41.960 I just wanted to say that writing an auto about 293 00:17:41.960 --> 00:17:46.000 to explore six is probably I don't know, what's not 294 00:17:46.039 --> 00:17:47.359 going to be very famous. 295 00:17:47.640 --> 00:17:50.000 I don't know. It's about time for like the nostalgia 296 00:17:50.039 --> 00:17:52.759 of that to kick in, because now now you can 297 00:17:52.839 --> 00:17:55.599 tell them it's like war stories right like back in 298 00:17:55.640 --> 00:17:57.559 the day. 299 00:17:57.519 --> 00:18:01.599 Yes, it's true. I mean today people are starting to 300 00:18:01.640 --> 00:18:05.839 react directly. I mean they don't even learn JavaScript. For them, 301 00:18:05.920 --> 00:18:11.119 JavaScript is now it's something like react and five six 302 00:18:11.240 --> 00:18:12.960 years ago, which was maybe je. 303 00:18:12.880 --> 00:18:18.599 Query so query Angular I think like and we're talking 304 00:18:18.640 --> 00:18:23.079 about testing too. The thing that amazes me nowadays is 305 00:18:23.759 --> 00:18:26.079 for the most part, when you write your code, you 306 00:18:26.119 --> 00:18:28.240 don't have to worry too much about your code just 307 00:18:28.279 --> 00:18:32.079 straight up not working and other browsers, which like sometimes 308 00:18:32.200 --> 00:18:35.519 sometimes you do catch little things like it's it's the 309 00:18:35.559 --> 00:18:37.559 sort of thing where you still do kind of need 310 00:18:37.599 --> 00:18:39.880 to test your code and other browsers, but for the 311 00:18:39.920 --> 00:18:42.960 most part you kind of don't anymore, Like especially on 312 00:18:43.000 --> 00:18:46.079 desktop browsers, Like chances are the code you write is 313 00:18:46.119 --> 00:18:49.359 going to work. And that's still like quite the mind 314 00:18:49.400 --> 00:18:52.160 shift from how it used to be. Where it used 315 00:18:52.200 --> 00:18:54.039 to be you wrote your code and like you opened 316 00:18:54.039 --> 00:18:57.119 your you just prayed before you opened all the other 317 00:18:57.200 --> 00:18:59.440 five or six browsers you needed things to work in. 318 00:19:00.160 --> 00:19:02.799 True, I to be honest, I don't think I go 319 00:19:03.000 --> 00:19:08.359 out of Chrome and I don't really test on other browsers. Yeah, 320 00:19:08.359 --> 00:19:12.160 and you're right because even qare they don't they don't 321 00:19:12.200 --> 00:19:17.000 find they don't find spucks often another browsers, So it's 322 00:19:17.400 --> 00:19:18.440 things things are working. 323 00:19:18.960 --> 00:19:21.799 So one question that I had is when I visit 324 00:19:21.880 --> 00:19:24.240 your website, the first thing I see is that you 325 00:19:24.319 --> 00:19:29.759 were previously a CEO and a CTO. So how did 326 00:19:29.799 --> 00:19:33.119 you go from being in charge of whole companies and 327 00:19:33.160 --> 00:19:37.640 whole divisions to back to a developer. Did you want 328 00:19:37.680 --> 00:19:41.279 to be less of a manager and more of a team, 329 00:19:41.680 --> 00:19:44.599 like an individual contributor or how did how did that happen? 330 00:19:45.079 --> 00:19:50.119 Yeah, it's uh, I think it happened naturally. Again, it's 331 00:19:50.359 --> 00:19:54.480 it's a small company where I was basically maybe I 332 00:19:54.559 --> 00:19:57.359 was a CEO. Actually I was doing everything because the 333 00:19:57.440 --> 00:20:01.960 owner were in a basic in Sweden and I was 334 00:20:02.000 --> 00:20:05.279 back in Bulgaria at that time, so I was managing 335 00:20:05.319 --> 00:20:08.799 the whole business plus development for the company. But it 336 00:20:08.839 --> 00:20:12.680 was relatively small one, so it's it's easy to manage 337 00:20:13.480 --> 00:20:17.160 and to have many responsibilities. Even accounting and things like that. 338 00:20:18.000 --> 00:20:22.400 But at that point I also started freelancing, So I 339 00:20:22.880 --> 00:20:26.480 was freelancing a little bit, then moved away from that company, 340 00:20:26.559 --> 00:20:29.640 and then I met my wife here in Copenhagen. It 341 00:20:29.680 --> 00:20:34.720 was related to one of our freelance projects. And Copenhagen 342 00:20:34.759 --> 00:20:38.880 is I mean, it's a really expensive city compared to Europe, 343 00:20:39.039 --> 00:20:41.599 it's probably the most expensive one, and you really need 344 00:20:41.599 --> 00:20:44.359 a full time job to survive here. So this is 345 00:20:44.400 --> 00:20:49.119 how I ended up in the company's web developer. Wow. 346 00:20:49.279 --> 00:20:52.680 So basically running a company wasn't enough for he had 347 00:20:52.680 --> 00:20:56.559 a dove freelance work on the side too. That's dedication. 348 00:20:57.920 --> 00:21:01.759 Yes, at some point it became too much, but yeah, 349 00:21:01.960 --> 00:21:04.759 you can do it for some time before you burn out. 350 00:21:05.359 --> 00:21:06.359 Yeah. 351 00:21:06.400 --> 00:21:11.279 So looking at the blog, is your blog built with Gatsby? 352 00:21:11.519 --> 00:21:13.240 What what did you use to create this? 353 00:21:13.960 --> 00:21:17.200 Yeah, it's exactly gets and I was I was inspired 354 00:21:17.240 --> 00:21:22.640 by Don abramovs bloke. It uses the starter team, so 355 00:21:22.720 --> 00:21:27.359 it's really just the start theme Starter team with some 356 00:21:27.359 --> 00:21:32.079 some tweaks. So I just wanted something simple up and 357 00:21:32.160 --> 00:21:36.319 running fast, and after that maybe I will figure out 358 00:21:36.400 --> 00:21:38.920 a better designed for it, but for now it's just 359 00:21:39.079 --> 00:21:41.119 it just works good. 360 00:21:42.079 --> 00:21:42.480 Yeah. 361 00:21:42.799 --> 00:21:46.640 I like the just the clean look of it and 362 00:21:46.680 --> 00:21:48.160 the fact that you have dark mode. 363 00:21:49.640 --> 00:21:54.039 Yeah, it's it's a default thing now, right everybody. 364 00:21:54.480 --> 00:21:57.160 And I also see you have a newsletter as well. 365 00:21:57.720 --> 00:22:01.279 Yeah, it's I'm trying to keep with. It's once a 366 00:22:01.319 --> 00:22:06.119 month and I'm trying to send I'm usually sending my 367 00:22:06.640 --> 00:22:09.640 new article, which at least I have time for one 368 00:22:09.720 --> 00:22:13.359 article per month. I can't really write more often. It's 369 00:22:13.400 --> 00:22:17.680 difficult with family and one article per month and some 370 00:22:18.039 --> 00:22:23.119 interesting thoughts and links maybe I have found, but at 371 00:22:23.200 --> 00:22:26.240 least I'm trying to write about the topics that you 372 00:22:27.039 --> 00:22:30.400 It was difficult to find a quick solution by just googling, 373 00:22:30.480 --> 00:22:34.759 So if I can't really find a solution, I would 374 00:22:34.759 --> 00:22:39.359 write about it. And I remember it was an article 375 00:22:39.400 --> 00:22:42.799 about something like a editorial on how to create a 376 00:22:42.839 --> 00:22:46.920 sticky table header but would react but by using just 377 00:22:47.480 --> 00:22:51.839 a normal table, not a deep based fleck or flax 378 00:22:51.880 --> 00:22:56.640 books based layouts. And it was surprising to me that 379 00:22:56.880 --> 00:23:00.839 actually there are not so many examples that you can find, 380 00:23:01.680 --> 00:23:04.680 and this article is without any is you always now, 381 00:23:05.200 --> 00:23:09.759 it's it's pretty high when you try to look for 382 00:23:10.079 --> 00:23:11.680 something like that. Who will. 383 00:23:13.359 --> 00:23:18.400 Oh, well, I just noticed because actually I clicked on 384 00:23:18.440 --> 00:23:22.000 that article in particular, I noticed that you have unique reads, 385 00:23:22.240 --> 00:23:24.319 and I was wondering how you did that, because that's 386 00:23:24.359 --> 00:23:26.079 a really cool little feature to have. 387 00:23:26.599 --> 00:23:28.720 Well, I don't think I know what unique reads are. 388 00:23:29.480 --> 00:23:33.960 Yeah, it's it's not Google Analytics, because it's so not 389 00:23:34.079 --> 00:23:37.799 straightforward to implement that thing in your blog. 390 00:23:38.680 --> 00:23:41.920 And I just I just saw it. Okay, you mean 391 00:23:42.000 --> 00:23:44.440 like I see it now, So yeah, this is in 392 00:23:44.480 --> 00:23:47.359 case anybody else here listening to this totally didn't understand 393 00:23:47.359 --> 00:23:51.119 it either. He has on each blog post the number 394 00:23:51.119 --> 00:23:54.200 of unique people that have viewed an individual blog post, 395 00:23:54.519 --> 00:23:57.160 and that is definitely interesting. I don't think I've ever 396 00:23:57.200 --> 00:24:00.640 seen anybody just like sometimes you see views, but I 397 00:24:00.640 --> 00:24:03.319 don't think I've ever seen anybody list unique readers. 398 00:24:03.680 --> 00:24:07.440 Yeah, it was read, but then I found many blocks 399 00:24:07.519 --> 00:24:12.000 which are just counting the visitors, so they have, for example, 400 00:24:12.039 --> 00:24:16.000 they display sixty thousand views. But that doesn't really make 401 00:24:16.039 --> 00:24:18.920