WEBVTT 1 00:00:06.719 --> 00:00:09.960 Right, Hello everybody, and welcome to another episode of Mind. 2 00:00:10.279 --> 00:00:13.000 I'm your host today, Calm Gazi, and I'm joined on 3 00:00:13.039 --> 00:00:15.599 the panelist by first time panelist Jack Hamison. 4 00:00:15.919 --> 00:00:17.079 Hey Carl, how are you doing. 5 00:00:17.719 --> 00:00:19.920 I'm fine, Good to have you, Good to have you, Yeah, 6 00:00:19.960 --> 00:00:23.679 great to be here. Awesome. And our guest today is 7 00:00:23.800 --> 00:00:24.640 Tyler Hawkins. 8 00:00:24.760 --> 00:00:26.559 How you doing? Thanks for having me. 9 00:00:27.079 --> 00:00:29.440 So, Thailer, let's just start off by maybe you're telling 10 00:00:29.519 --> 00:00:32.280 us a bit about yourself and obviously why you're famous. 11 00:00:33.359 --> 00:00:38.000 Sure, So, I'm Tyler Hawkins. I'm a senior software engineer 12 00:00:38.039 --> 00:00:42.640 at Adobe. I've been doing front end development for about 13 00:00:42.679 --> 00:00:45.560 seven years now and blogging and tech writing for the 14 00:00:45.640 --> 00:00:47.560 last year and a half. I don't know that I'm 15 00:00:47.560 --> 00:00:54.159 necessarily famous now, but I do enjoy blogging and writing 16 00:00:54.200 --> 00:00:57.079 and it's it's opened up some opportunities and giving me 17 00:00:57.119 --> 00:00:58.719 a chance to talk to people like you guys. 18 00:00:59.039 --> 00:01:03.159 Awesome. Great. So obviously I kind of made what stuff 19 00:01:03.200 --> 00:01:06.799 today's show would be your article on pink code and React. 20 00:01:07.280 --> 00:01:09.239 But I guess before we kind of go into that, 21 00:01:09.280 --> 00:01:12.560 and let's just maybe dump it deep into your background 22 00:01:13.200 --> 00:01:15.280 and to how you got into tech and how you 23 00:01:15.319 --> 00:01:17.959 got into your kind of job now and how I've 24 00:01:17.959 --> 00:01:18.799 been through yourself off. 25 00:01:19.159 --> 00:01:22.280 Sure, Yeah, so I have a bit of a non 26 00:01:22.319 --> 00:01:26.480 traditional tech background. I didn't have a degree in computer 27 00:01:26.519 --> 00:01:28.519 science or anything like that. For a long time. I 28 00:01:28.560 --> 00:01:31.200 was actually a psychology major. For about two and a 29 00:01:31.239 --> 00:01:35.040 half years. I was pretty intent on, you know, finishing 30 00:01:35.079 --> 00:01:37.680 up my bachelor's and going to get a master's or 31 00:01:37.719 --> 00:01:40.920 a PhD and doing some form of counseling. But about 32 00:01:40.920 --> 00:01:44.840 midway through that, i'd taken some statistics classes. Those are 33 00:01:44.879 --> 00:01:47.719 some required classes just when you talk about doing research 34 00:01:47.719 --> 00:01:51.000 and psychology, and I really enjoyed the statistics part of 35 00:01:51.040 --> 00:01:53.200 it and kind of the more hard science as opposed 36 00:01:53.200 --> 00:01:57.000 to the softer social science of psychology. So I started 37 00:01:57.000 --> 00:01:59.959 getting really into that, and then stats actually kind of 38 00:02:00.040 --> 00:02:03.760 traded a nice segue into coding and programming. Statisticians will 39 00:02:04.359 --> 00:02:07.879 often use programming languages like R or SaaS or even 40 00:02:07.959 --> 00:02:10.919 just SQL for managing data in a database, and so 41 00:02:10.960 --> 00:02:13.120 that was really where I first got introduced to coding. 42 00:02:13.319 --> 00:02:16.199 I just remember learning R and seeing how we could 43 00:02:16.199 --> 00:02:18.879 create you know, these simulations. It was just a few 44 00:02:18.919 --> 00:02:20.599 lines of code, it was super cool to me. Or 45 00:02:20.639 --> 00:02:23.120 you could write a few lines and generate this beautiful 46 00:02:23.159 --> 00:02:25.759 graph just out of literally just a few lines of codes. 47 00:02:25.840 --> 00:02:28.120 That was really exciting for me. So at that point 48 00:02:28.159 --> 00:02:30.919 I was almost I think I was. I think I 49 00:02:30.960 --> 00:02:32.639 was in my second semester of my junior year. So 50 00:02:32.639 --> 00:02:35.360 if I was to switch to computer science at that point, 51 00:02:35.400 --> 00:02:37.280 I would have had you know, probably three more years 52 00:02:37.319 --> 00:02:40.280 just to get my bachelor's degree. So figured I probably 53 00:02:40.280 --> 00:02:42.560 wouldn't do that, so I stuck it out with statistics. 54 00:02:42.599 --> 00:02:45.240 That's that's officially what my degree is in. But at 55 00:02:45.280 --> 00:02:47.680 the time I was, I was working part time at 56 00:02:47.719 --> 00:02:50.639 a tech company called qual Tricks. They were a software 57 00:02:50.680 --> 00:02:53.800 as a service company. When I was working just just 58 00:02:53.840 --> 00:02:56.000 doing tech support for them as a product specialist, so 59 00:02:56.000 --> 00:02:58.400 a lot of just troubleshooting and problem solving and whatnot. 60 00:02:58.879 --> 00:03:01.520 But that provided really nice and afterwards, you know, I 61 00:03:01.520 --> 00:03:05.000 told them I'm looking for a software engineering job, so 62 00:03:05.039 --> 00:03:07.599 it's just a question of can I do that here 63 00:03:07.680 --> 00:03:09.520 or do I need to go look elsewhere. So they 64 00:03:09.520 --> 00:03:12.560 offered me a job working on our professional services team, 65 00:03:12.680 --> 00:03:17.400 just doing custom one off work for clients, building neat 66 00:03:17.439 --> 00:03:20.240 little small projects. They were often you know, like a 67 00:03:20.240 --> 00:03:23.199 week or two projects at a time, so pretty small scale, 68 00:03:23.759 --> 00:03:25.400 but it was a good introduction to a lot of 69 00:03:25.639 --> 00:03:29.080 I guess, unique, unique problems to solve, and then from 70 00:03:29.080 --> 00:03:31.080 there if I've worked at a few other companies. I've 71 00:03:31.080 --> 00:03:35.000 worked at an e commerce company called Unique, a ed 72 00:03:35.039 --> 00:03:39.879 tech company called Instructure, Workfront that works as an operational 73 00:03:39.879 --> 00:03:43.159 system of record, and then Workfront was recently acquired by 74 00:03:43.240 --> 00:03:46.719 Adobe back in December of twenty twenty. So now here 75 00:03:46.719 --> 00:03:47.759 I am at Adobe. 76 00:03:48.039 --> 00:03:49.120 Wow. I love Adobe. 77 00:03:49.199 --> 00:03:51.560 I used to work in Macromedia before it became Adobe, 78 00:03:51.639 --> 00:03:53.240 and it's a fantastic company. 79 00:03:53.319 --> 00:03:54.840 Yeah, really great place to work. 80 00:03:55.280 --> 00:03:56.560 Yeah, they're a great place. 81 00:03:57.400 --> 00:03:59.759 So when did you start with React? Yeah? 82 00:04:00.159 --> 00:04:05.360 React was let's see early twenty seventeen, so it's been 83 00:04:05.400 --> 00:04:06.479 about four years now. 84 00:04:06.639 --> 00:04:07.240 Fantastic. 85 00:04:07.439 --> 00:04:10.240 Sort of looking into your article, I'm curious as to 86 00:04:11.240 --> 00:04:15.240 your take on typescript and how that might change this 87 00:04:15.360 --> 00:04:16.639 clean coding approach. 88 00:04:18.240 --> 00:04:22.759 Sure so, I think, I mean clean code applies regardless 89 00:04:22.800 --> 00:04:27.040 of whether you're writing typescript or just plain vanilla JavaScript. 90 00:04:27.759 --> 00:04:30.879 I've used typescript in past jobs. We're not using it 91 00:04:30.959 --> 00:04:33.839 right now, at least in the repos that I primarily 92 00:04:33.879 --> 00:04:36.040 work in. I know other places that the company are 93 00:04:36.480 --> 00:04:38.639 I don't know I still have mixed feelings on it. 94 00:04:39.439 --> 00:04:42.600 I enjoy the type safety. I enjoy that it's explicit 95 00:04:42.680 --> 00:04:45.639 about the data type and that it provides these static 96 00:04:45.639 --> 00:04:49.000 analysis and static type checking and error checking to prevent 97 00:04:49.040 --> 00:04:53.000 you from using unexpected data types. There is also a 98 00:04:53.000 --> 00:04:55.680 lot of complexity that stems from it, especially if the 99 00:04:55.720 --> 00:04:59.560 types aren't maintained properly. You might have like a complex 100 00:05:00.079 --> 00:05:02.199 type or maybe an object for lots of different properties, 101 00:05:02.199 --> 00:05:05.120 and then people start, you know, slowly how code goes, 102 00:05:05.160 --> 00:05:06.839 and it gets bigger and bigger until it becomes all 103 00:05:06.839 --> 00:05:08.920 the spaghetti code. Now you have these spaghetti types that 104 00:05:08.959 --> 00:05:11.759 people are trying to override and whatnot. So if you're 105 00:05:11.759 --> 00:05:13.759 getting use type script, I think you have to be very, 106 00:05:13.959 --> 00:05:16.759 very devoted to it and make sure it stays nice 107 00:05:16.800 --> 00:05:18.600 and maintained for sure. 108 00:05:18.720 --> 00:05:21.560 Yeah, I mean it's funny. I think, actually use your 109 00:05:21.639 --> 00:05:24.079 article and I'm looking at it. I was actually trying 110 00:05:24.079 --> 00:05:28.120 to at work, trying to set some kind of guidelines 111 00:05:28.319 --> 00:05:32.439 regarding Funtain development because when I joined initially the company, 112 00:05:32.720 --> 00:05:35.839 front of my grade from Angulo to React. So for 113 00:05:35.839 --> 00:05:37.920 the last two years been doing that and then we 114 00:05:38.000 --> 00:05:40.879 started working on a new project recently as well, so 115 00:05:40.879 --> 00:05:43.199 then I think, okay, in order first play, which you 116 00:05:43.279 --> 00:05:46.240 kind of move faster in the future, we have kind 117 00:05:46.240 --> 00:05:49.240 of a guideline for front end development and all the 118 00:05:49.319 --> 00:05:52.639 good stuff, and actually an article looking at it now. 119 00:05:52.680 --> 00:05:54.759 And one thing that I kind of struggled with per 120 00:05:54.800 --> 00:05:58.839 se is obviously, when it comes to clean code, it's 121 00:05:58.959 --> 00:06:02.519 very subjective, right, what is clean for you? For somebody 122 00:06:02.600 --> 00:06:05.759 or it is a mess? Right, So when you come 123 00:06:05.800 --> 00:06:08.199 to think about clean code, how do you kind of say, 124 00:06:08.279 --> 00:06:10.920 maybe you're kind of guidanizeding and your body is okay, 125 00:06:11.199 --> 00:06:15.439 even though what I've written for me is what is clean? However, 126 00:06:15.920 --> 00:06:18.680 are they principles you kind of use a wider and 127 00:06:19.439 --> 00:06:23.000 across the whole field are usable? Yeah? 128 00:06:23.040 --> 00:06:25.600 Absolutely. So that's a good point is that clean code 129 00:06:25.639 --> 00:06:29.399 is pretty subjective to me. I guess how it would define. 130 00:06:29.439 --> 00:06:32.160 Clean code is just code that's easy to read, it's 131 00:06:32.160 --> 00:06:36.040 simple to understand, it's neatly organized, and that really lends 132 00:06:36.120 --> 00:06:39.920 itself to making it easier for future developers to pick 133 00:06:40.000 --> 00:06:41.839 up on the code. You know, they can instantly dive 134 00:06:41.839 --> 00:06:44.639 into the code base and understand, and also makes it 135 00:06:44.680 --> 00:06:47.160 a lot easier to refactor or extend the code later. 136 00:06:47.720 --> 00:06:50.519 As you're you know, building out new functionality as the 137 00:06:50.560 --> 00:06:53.360 app evolves and grows. But you're right in doing that, Like, 138 00:06:53.439 --> 00:06:57.959 it's it's a pretty subjective principle, right, or subjective idea 139 00:06:58.319 --> 00:07:00.639 of okay, what what what makes clean and what's not? 140 00:07:01.240 --> 00:07:03.439 And so I think that's important to call out, right, 141 00:07:03.519 --> 00:07:05.879 especially like I've written this article of some things that 142 00:07:05.920 --> 00:07:08.920 I find helpful when writing React code, But it doesn't 143 00:07:08.959 --> 00:07:11.399 necessarily mean that you'll find it helpful. You might have 144 00:07:12.079 --> 00:07:15.759 very different, very strongly held opinions that contradict my own, 145 00:07:16.199 --> 00:07:18.959 and that's that might be okay, right, there might not 146 00:07:19.040 --> 00:07:22.560 be a right or wrong answer, But even with that, like, 147 00:07:22.600 --> 00:07:26.879 there definitely are still some generally accepted principles, not just 148 00:07:26.920 --> 00:07:31.920 in React, but across all programming languages, right, Like, it's 149 00:07:32.040 --> 00:07:35.480 pretty commonly accepted that we should use clear variable names 150 00:07:35.639 --> 00:07:39.399 instead of just naming your variable T, it should be 151 00:07:40.120 --> 00:07:44.160 you know, whatever time or whatever you're representing, right, Or 152 00:07:44.279 --> 00:07:48.279 rather than having a comment that says increment counter by one, 153 00:07:48.680 --> 00:07:51.279 let's just have our code be explicit and clear to 154 00:07:51.279 --> 00:07:53.680 write that, right. So there, there still are some generally 155 00:07:53.720 --> 00:07:56.480 accepted principles when it comes to writing clean code. 156 00:07:56.720 --> 00:08:00.399 Yeah, So with the article. What made you want to 157 00:08:00.399 --> 00:08:03.079 write then and actually publish it. I'm assuming there's something 158 00:08:03.079 --> 00:08:05.959 that happened to be in your in your own development 159 00:08:05.959 --> 00:08:08.120 that made you want to actually make this article, write 160 00:08:08.120 --> 00:08:11.560 it down, and then obviously share it because it's it's 161 00:08:11.600 --> 00:08:13.439 a big thing. I guess, kind of saying Okay, this 162 00:08:13.480 --> 00:08:15.600 is what I think is keen code, right, and then 163 00:08:15.639 --> 00:08:17.800 people read that and then discuss and say I agree, 164 00:08:17.839 --> 00:08:19.920 I don't agree, But what was the kind of beginnings 165 00:08:19.920 --> 00:08:21.040 of the article for you? 166 00:08:21.639 --> 00:08:22.160 Yeah? 167 00:08:22.360 --> 00:08:24.639 So I'm a big fan of reading, just like the 168 00:08:25.079 --> 00:08:30.079 classical tech programming books. So I have read Clean Code 169 00:08:30.120 --> 00:08:33.799 by Robert Martin Refactoring by Martin Fowler. Those are probably 170 00:08:34.240 --> 00:08:37.399 the two biggest ones just when it comes to clean 171 00:08:37.440 --> 00:08:41.919 Code and Refactory as their titles say, and rightly so 172 00:08:42.120 --> 00:08:45.480 like these books focus more on general principles that would 173 00:08:45.519 --> 00:08:49.440 apply to any programming language. I think the original Refactoring 174 00:08:49.600 --> 00:08:53.480 was written with Java examples, and then they recently released 175 00:08:53.480 --> 00:08:56.480 a second edition in I think it was like twenty nineteen, 176 00:08:56.879 --> 00:08:59.360 but that's been re updated to all be written in JavaScript, 177 00:08:59.399 --> 00:09:01.679 which is super nice for me as a front and developer. 178 00:09:01.840 --> 00:09:03.799 But so all of these principles that they've that they've 179 00:09:03.840 --> 00:09:10.039 outlined are more general programming sort of language agnostic principles. Right, 180 00:09:10.039 --> 00:09:12.799 they should be true regardless of whether your front end 181 00:09:12.879 --> 00:09:15.919 or back end or Python or C plus plus or whatever. Right, 182 00:09:16.320 --> 00:09:19.840 And so in thinking about that, I wanted to sort 183 00:09:19.840 --> 00:09:23.360 of get more specific of, Okay, we have these general principles, 184 00:09:24.000 --> 00:09:26.879 and now in my job, I'm primarily writing React, and 185 00:09:27.600 --> 00:09:31.639 so are hundreds of thousands of other developers, So how 186 00:09:31.639 --> 00:09:35.039 can we take these principles and make them even more specific? 187 00:09:35.080 --> 00:09:36.919 Of like, how do we how do we distill these 188 00:09:36.960 --> 00:09:41.120 into what makes React code clean for our very specific 189 00:09:41.240 --> 00:09:43.399 use case. So that was sort of the intent, And 190 00:09:43.440 --> 00:09:45.960 then the other part of it is like, there are 191 00:09:46.480 --> 00:09:49.000 you know, useful automated tools you can use, So things 192 00:09:49.039 --> 00:09:53.320 like es lend to establish best practices so that enforces 193 00:09:53.360 --> 00:09:57.720 the consistency. You can use tools like Prettier for formatting codes, 194 00:09:57.799 --> 00:09:59.759 so now you don't have to have arguments anymore of 195 00:10:00.120 --> 00:10:02.360 should we have semi colons or no semi colons, or 196 00:10:02.360 --> 00:10:05.000 trailing commas or no trailing commas. You can just pick 197 00:10:05.039 --> 00:10:07.639 one and have Prettier format it for you. So those 198 00:10:07.679 --> 00:10:09.960 are super helpful and essential tools. But then there's also 199 00:10:09.960 --> 00:10:14.879 still things that aren't necessarily enforceable, right, So like if 200 00:10:14.919 --> 00:10:18.279 you think about a clear variable name, like a tool 201 00:10:18.399 --> 00:10:21.720 like pretty or easlink can't tell you yes, that variable 202 00:10:21.799 --> 00:10:24.879 name makes sense to a human, Right, that's more subjective 203 00:10:24.919 --> 00:10:27.720 and it's where people get involved. And so that's kind 204 00:10:27.720 --> 00:10:30.600 of where my article is more focusing is not the 205 00:10:31.440 --> 00:10:35.399 syntactical differences, but more just what makes this understandable for 206 00:10:35.440 --> 00:10:35.879 a human. 207 00:10:36.480 --> 00:10:39.080 So when I'm looking at your code, it's interesting to 208 00:10:39.080 --> 00:10:43.759 see you're creating these closures inside the component. Have you 209 00:10:43.799 --> 00:10:47.720 looked at things like use callback and use memo and 210 00:10:47.759 --> 00:10:48.799 what's your take on those? 211 00:10:49.159 --> 00:10:51.840 Yeah, so use callback and use memos, So those are 212 00:10:51.879 --> 00:10:55.679 really handy REACT hooks, right, So working with function components, 213 00:10:56.360 --> 00:11:00.600 and they're both essentially memoization techniques, right, so where you 214 00:11:00.639 --> 00:11:05.080 can take some value that's expensive to compute and memorize 215 00:11:05.120 --> 00:11:07.879 it so that you're not constantly recalculating that, and so 216 00:11:07.919 --> 00:11:11.679 those can come in handy when you are realizing that 217 00:11:11.720 --> 00:11:16.679 you've had that you've that you're having performance issues. Pretty 218 00:11:16.960 --> 00:11:21.159 commonly accepted ideas that you don't want to prematurely optimize 219 00:11:21.159 --> 00:11:24.440 your application, right, And so for the most part, I 220 00:11:24.519 --> 00:11:28.360 tend to avoid use callback and use memo until I 221 00:11:28.399 --> 00:11:31.120 recognize that it might be a problem because there's an 222 00:11:31.120 --> 00:11:33.480 overhead to that, right when you when you memoize something 223 00:11:33.519 --> 00:11:35.879 and you have this cash that's created, that does take 224 00:11:35.919 --> 00:11:38.039 some overhead. And so if you're trying to memorize everything, 225 00:11:38.399 --> 00:11:41.759 you actually will have worse performance than if you hadn't, right, 226 00:11:42.080 --> 00:11:44.639 So there's a fine line to draw. And so yeah, 227 00:11:44.679 --> 00:11:48.559 that typically the advice is just don't until you realize, like, hey, 228 00:11:48.559 --> 00:11:51.720 this is behaving pretty slowly, then let's go figureze figure 229 00:11:51.759 --> 00:11:53.440 out what we need to go memorize. 230 00:11:53.799 --> 00:11:58.120 Sure, yeah, and also I'm looking at your result. One 231 00:11:58.120 --> 00:12:02.320 thing I actually stop do now was actually before I 232 00:12:02.440 --> 00:12:05.679 used to use a lot of kind of effect and 233 00:12:06.360 --> 00:12:09.799 for example operator and instead of using a ternary. And 234 00:12:09.879 --> 00:12:12.559 I think I also do an article by Kensey Dodds 235 00:12:12.600 --> 00:12:15.759 about the same thing saying that actually it's better to 236 00:12:15.919 --> 00:12:19.679 have the ternary as opposed to sometimes this kind of operator. 237 00:12:19.799 --> 00:12:23.480 So I think it's good because for me, my philosophy 238 00:12:23.519 --> 00:12:26.759 has always been underpinned by I read this comment in 239 00:12:26.879 --> 00:12:30.360 a book by Kyle Simpson, which was the U Don't 240 00:12:30.360 --> 00:12:35.879 Know JS series, and he said that developers write code 241 00:12:36.000 --> 00:12:40.240 for developers, not for the computer. So your your code 242 00:12:41.000 --> 00:12:43.919 read by add yourself in tomorrow or in a few 243 00:12:43.919 --> 00:12:47.480 months time, in a year's time, or your colleagues. So therefore, 244 00:12:47.919 --> 00:12:51.480 always try to write code that makes it easier for 245 00:12:51.600 --> 00:12:53.960 you in the future or your code has come in, 246 00:12:54.360 --> 00:12:57.919 look at it, understand it, and actually get it working. 247 00:12:57.960 --> 00:13:00.759 And it's something I actually seen when I was looking 248 00:13:00.799 --> 00:13:04.039 at the source code for React, for example, I came 249 00:13:04.080 --> 00:13:06.759 across that they use variable names are very explicit and 250 00:13:06.879 --> 00:13:10.799 quite long, right, which for me looks quite odd, but 251 00:13:10.919 --> 00:13:14.240 actually it helps you actually make sense of what's happening 252 00:13:14.279 --> 00:13:17.440 because even though the name for the vailable might be 253 00:13:17.480 --> 00:13:20.960 quite long and explicit, actually it makes it easy to 254 00:13:21.360 --> 00:13:24.480 work out to getting on. So I think on that front, definitely, 255 00:13:24.799 --> 00:13:27.559 that's how I can approach my clean code and try 256 00:13:27.559 --> 00:13:29.399 to wrap my code in that way where I'm trying 257 00:13:29.399 --> 00:13:32.960 to say, Okay, I want to communicate to my colleagues 258 00:13:33.120 --> 00:13:36.120 my intention, or maybe try to make it clear that 259 00:13:36.159 --> 00:13:37.960 I'm trying to do the X, Y and Z and 260 00:13:38.240 --> 00:13:42.159 all at comments when I'm doing something, which maybe is 261 00:13:42.159 --> 00:13:45.799 not the best practice, but because in this particular example, 262 00:13:46.080 --> 00:13:48.639 it's the best way and actually works. So that's how 263 00:13:48.679 --> 00:13:50.720 I approached it. I don't know if you've also had 264 00:13:50.759 --> 00:13:52.679 a similar kind of viewprint and how you do your 265 00:13:52.919 --> 00:13:53.559 code as well. 266 00:13:54.159 --> 00:13:54.559 Yeah. 267 00:13:54.639 --> 00:13:56.840 Absolutely. I can't remember who said it. I want to 268 00:13:56.840 --> 00:13:59.159 say it was like ken Beck, but it's somewhere along 269 00:13:59.159 --> 00:14:02.279 the lines of anyone can write code a computer can understand. 270 00:14:02.320 --> 00:14:03.960 It's a lot more difficult to write code a human 271 00:14:04.000 --> 00:14:07.320 can understand. Right. And then another really important principle is 272 00:14:07.360 --> 00:14:10.919 that code is read a lot more often than it 273 00:14:11.000 --> 00:14:13.480 is written. You know, like in my day to day 274 00:14:13.559 --> 00:14:16.360 job as a software engineer, I will spend a lot 275 00:14:16.399 --> 00:14:20.159 of time doing code reviews prior to merging code. I'll 276 00:14:20.200 --> 00:14:23.039 spend time reading through the code base as I'm trying 277 00:14:23.080 --> 00:14:25.720 to you know, troubleshoot or debug some issue that I'm 278 00:14:25.759 --> 00:14:29.000 working on right that someone may have written eight months ago. 279 00:14:29.200 --> 00:14:30.840 You may spend your time in meetings, and so if 280 00:14:30.879 --> 00:14:33.480 you look at like how often you actually spend time 281 00:14:33.519 --> 00:14:36.159 writing code, like, it's probably like ten to twenty percent 282 00:14:36.200 --> 00:14:40.360 of my day is actually writing code versus reading code 283 00:14:40.679 --> 00:14:43.360 or discussing, right. So yeah, I mean there's a lot 284 00:14:43.399 --> 00:14:47.919 of value in writing this clean code and making it understandable. 285 00:14:47.919 --> 00:14:53.000 Because that's a majority of your time and your codeker's time. Yeah. 286 00:14:53.039 --> 00:14:54.559 Also looking through your code, it's interesting. 287 00:14:54.639 --> 00:14:57.240 I'm looking at the undefined props one and where you 288 00:14:57.480 --> 00:15:00.559 are sending in a handle click and it it's interesting. 289 00:15:00.639 --> 00:15:03.360 Have you looked at the optional chaining operator question mark 290 00:15:03.399 --> 00:15:05.759 dot and just come out, well, I guess last couple 291 00:15:05.799 --> 00:15:06.679 of years I have. 292 00:15:06.919 --> 00:15:09.679 Yeah, the optional chaining that was in the Yes twenty 293 00:15:09.759 --> 00:15:10.519 twenty release. 294 00:15:11.120 --> 00:15:14.600 Well, yeah, I think that could actually be a lot 295 00:15:14.600 --> 00:15:17.000 easier here. You know, we basically just question mark dot 296 00:15:17.039 --> 00:15:19.720 on the invocation of handle click and there you go. 297 00:15:19.879 --> 00:15:22.360 It's if it's there, it works. If it doesn't, it doesn't. 298 00:15:22.639 --> 00:15:24.799 Yeah, the optional chaining is great when it comes to 299 00:15:25.639 --> 00:15:29.200 ye being uncertain of whether a certain property or method 300 00:15:29.279 --> 00:15:30.279 exists on an object. 301 00:15:30.360 --> 00:15:33.200 Absolutely, it definitely helps, like, as you say, like clean 302 00:15:33.200 --> 00:15:34.720 out with the code so that you know, if you 303 00:15:35.000 --> 00:15:38.200 have like a deeply nested thing in a structure, you know, 304 00:15:38.600 --> 00:15:41.039 data dot first name or data dot name dot first 305 00:15:41.159 --> 00:15:43.080 or something like that, you can easily just say, Okay, 306 00:15:43.080 --> 00:15:45.320 if it's there, then it's this, and if it's not, 307 00:15:45.480 --> 00:15:48.120 then you can back off and get to whatever your 308 00:15:48.120 --> 00:15:50.639 default value is. And it definitely pairs it down from 309 00:15:50.679 --> 00:15:54.320 those nasty, nested ifs we have to used to have to. 310 00:15:54.240 --> 00:15:58.639 Do absolutely so with clean code. What impact have you 311 00:15:58.720 --> 00:16:01.559 seen in your work person or maybe in your teams 312 00:16:02.000 --> 00:16:05.240 when you've tried to actually use these principles if we see, 313 00:16:06.000 --> 00:16:10.399 let's say, an improvement and probability as the code become 314 00:16:10.759 --> 00:16:13.039 much eier to work with over time, What have you 315 00:16:13.080 --> 00:16:15.159 seen impact wise from what you've actually be sharing in 316 00:16:15.159 --> 00:16:15.679 your audible? 317 00:16:16.000 --> 00:16:19.279 Yeah, absolutely so, there has been a lot of benefits 318 00:16:19.679 --> 00:16:22.440 as far as like even just discussing these things, right, So, 319 00:16:22.440 --> 00:16:24.759 like if we were to go through this and do 320 00:16:24.879 --> 00:16:26.879 like a team training or something, right and just just 321 00:16:26.960 --> 00:16:32.759 having a shared understanding of certain principles or styling conventions 322 00:16:32.799 --> 00:16:36.399 that we agree on, I think is huge, right because 323 00:16:36.399 --> 00:16:39.240 now we're all using the same language, we're using the 324 00:16:39.240 --> 00:16:44.559 same terms, we're writing code, and hopefully mostly the same way, right, 325 00:16:44.639 --> 00:16:46.080 And so that makes it very easy for it to 326 00:16:46.080 --> 00:16:48.279 transfer from one person to another. You know, if I'm 327 00:16:48.279 --> 00:16:50.000 reviewing your code, I don't have to get used to 328 00:16:50.039 --> 00:16:52.039 your style and then I have to get used to 329 00:16:52.120 --> 00:16:54.559 Jack styles or review his code. Right, We're all we're 330 00:16:54.559 --> 00:16:56.120 all kind of writing the same way, So there's a 331 00:16:56.159 --> 00:16:58.399 lot of value in that. And then even just like 332 00:16:59.080 --> 00:17:02.360 trying to pick us specific principle and focus on it 333 00:17:02.679 --> 00:17:05.039 for however long, a few weeks or a month, whatever, 334 00:17:05.440 --> 00:17:08.200 we've seen a lot of value in that. So, for instance, 335 00:17:08.400 --> 00:17:10.359 this isn't one actually I think it is mentioned at 336 00:17:10.359 --> 00:17:13.759 the bottom of the article. But just like extracting logic 337 00:17:13.880 --> 00:17:16.839 out into a clearly named function, you might have like 338 00:17:17.440 --> 00:17:19.680 I don't know, I'm trying to think of a good example, 339 00:17:19.720 --> 00:17:22.079 but basically just a whole bunch of conditions. Right, so 340 00:17:22.119 --> 00:17:25.319 you might say, like if condition one and condition two 341 00:17:25.400 --> 00:17:28.799 and condition three or condition four or five, then do 342 00:17:28.920 --> 00:17:32.359 this thing. And it's like it may be clear to 343 00:17:32.359 --> 00:17:34.359 the developer when they're writing it of like why I'm 344 00:17:34.359 --> 00:17:36.920 writing this if statement, but at some point, like the 345 00:17:37.359 --> 00:17:42.119 intent of that can be it can be misunderstood or misinterpreted. Right, 346 00:17:42.119 --> 00:17:45.279 maybe that's not well documented, that's lost. And so there's 347 00:17:45.319 --> 00:17:48.519 a ton of value just like it's extracting that condition 348 00:17:48.720 --> 00:17:50.880 out into a function or into a variable that says 349 00:17:50.920 --> 00:17:55.480 like this is check for user or whatever, right like 350 00:17:55.839 --> 00:17:58.319 this is why I am doing all these conditions in 351 00:17:58.359 --> 00:18:00.440 this if statement. Anyway, So that was that was just 352 00:18:00.440 --> 00:18:03.440 a simple example of something we had focused on of Okay, 353 00:18:03.519 --> 00:18:06.400 let's let's start extracting this code into functions. And as 354 00:18:06.440 --> 00:18:08.279 we do that, like the code becomes a lot more 355 00:18:08.519 --> 00:18:11.839 I guess self documenting and a lot more easy to understand, right, 356 00:18:11.880 --> 00:18:13.920 because now you've got this code extracted out, and so 357 00:18:13.960 --> 00:18:16.720 now you basically just have high level steps of like okay, 358 00:18:16.720 --> 00:18:18.400 I'm going to check if the user is logged in, 359 00:18:19.000 --> 00:18:22.559 then I'm going to fetch their user data, avatar or whatever. Right, 360 00:18:22.640 --> 00:18:25.319 so you have these very clear steps. That's almost like, 361 00:18:25.359 --> 00:18:27.480 I mean, it's not pseudocode, but it's it's a lot 362 00:18:27.519 --> 00:18:30.000 more human readable to just read, like here these three 363 00:18:30.000 --> 00:18:33.440 functions that are being executed, as opposed to digging through 364 00:18:33.480 --> 00:18:36.480 one hundred lines of code of you know, this is 365 00:18:36.480 --> 00:18:38.200 what's actually going on underneath the hood. 366 00:18:38.559 --> 00:18:43.400 So, building on Carl's questions, so when you are going 367 00:18:43.440 --> 00:18:46.480 through these with your team, you know these principles, how 368 00:18:46.480 --> 00:18:49.559 do you find decide when you say, okay, this is 369 00:18:49.839 --> 00:18:52.000 this one's really important? You know, somebody pushed it back 370 00:18:52.039 --> 00:18:54.240 They're like I wouldn't do it that way, I would 371 00:18:54.279 --> 00:18:56.599 do it this way, or something like that. How do 372 00:18:56.640 --> 00:19:00.039 you decide, Okay, this is a really important one. This 373 00:19:00.039 --> 00:19:01.920 is the one I'm you know, willing to go to 374 00:19:01.920 --> 00:19:06.119 town on, you know, versus we can agree to disagree 375 00:19:06.279 --> 00:19:08.640 on that. How do you make that? How do you 376 00:19:08.720 --> 00:19:09.640 weigh those choices? 377 00:19:10.160 --> 00:19:13.279 Yeah, it's a good question because software engineers in general, 378 00:19:13.319 --> 00:19:16.839 I feel like we're pretty pedantic people and we like, no, 379 00:19:17.319 --> 00:19:22.000 we have made strongly held opinions about things that really 380 00:19:22.039 --> 00:19:22.680 don't matter. 381 00:19:23.000 --> 00:19:23.240 Right. 382 00:19:24.359 --> 00:19:30.160 No, it sounds like this is ringing a bell. Yeah, 383 00:19:31.160 --> 00:19:34.000 but honestly, like when it comes to that kind of stuff, 384 00:19:34.079 --> 00:19:37.359 like I feel like it's I mean, it doesn't have 385 00:19:37.440 --> 00:19:40.119 to be complicated. You can have a discussion of Okay, 386 00:19:40.160 --> 00:19:42.279 I like it, I like writing it this way, you 387 00:19:42.319 --> 00:19:45.000 like writing it that way. We can talk about if 388 00:19:45.319 --> 00:19:48.200 there actually is a value or a benefit to doing 389 00:19:48.240 --> 00:19:51.000 one over the other. If there is, right, like, hopefully 390 00:19:51.000 --> 00:19:52.680 you can have a discussion and show like, Okay, this 391 00:19:52.880 --> 00:19:56.559 is clearly better, it provides whatever better performance or you know, 392 00:19:56.599 --> 00:19:59.119 whatever it is, right like, this is objectively better. And 393 00:19:59.160 --> 00:20:01.559 if it's not, if it's a question of do you 394 00:20:01.640 --> 00:20:04.440 like semi colons or no semi colons and javascripts like 395 00:20:05.359 --> 00:20:08.359 to me, it doesn't matter, Like, let's just pick one 396 00:20:08.599 --> 00:20:11.359 and We'll go with it because really, probably what's more 397 00:20:11.400 --> 00:20:13.880 important than the standards that you do pick is just 398 00:20:13.920 --> 00:20:16.920 that you have a standard and that you enforce it. 399 00:20:16.960 --> 00:20:18.680 And that comes back to just like the s lent 400 00:20:18.799 --> 00:20:22.480 and Prettier tools, right, you can configure those, So just 401 00:20:22.519 --> 00:20:25.720