WEBVTT 0 00:00.330 --> 00:06.710 Now, in it's current state, our styles.css is looking a little bit atrocious. 1 00:06.720 --> 00:09.570 I mean there's so much repetition here. 2 00:09.600 --> 00:13.400 Montserrat-Bold font-family, Montserrat-Bold font-family. 3 00:13.500 --> 00:18.640 And you might even remember how many times we wrote padding 7 percent 15 percent, right? 4 00:18.660 --> 00:24.840 We wrote it like all over the place here and here and many many more. 5 00:24.930 --> 00:29.670 So as I said previously, as a programmer, we’re always aspiring to be dry. 6 00:29.670 --> 00:32.560 Do not repeat yourself. 7 00:32.850 --> 00:38.590 And the opposite of this is kind of our code at the moment, and it's probably like wet code. 8 00:38.700 --> 00:40.520 We enjoy typing. 9 00:40.530 --> 00:48.240 This is why we want to refactor our code on a regular basis in order to keep it performant and easy 10 00:48.240 --> 00:49.170 to read. 11 00:49.200 --> 00:54.660 Now whenever I go on holiday I always seem to be packing an hour before I have to leave. 12 00:54.660 --> 01:00.930 I think I have some medical condition where I can't pack in advance so my suitcase always inevitably 13 01:00.960 --> 01:06.840 ends up looking like there's basically a mess and I have to sort of like kneel on it to try and close 14 01:06.840 --> 01:12.080 it and everything is everywhere and it's just impossible to find anything 15 01:12.210 --> 01:20.400 once I actually do arrive. Now, instead, what would be a lot nicer is if I had actually learned the skills of 16 01:20.430 --> 01:27.720 packing properly so that everything is neat and tidy and myself or anybody else would be able to easily 17 01:27.720 --> 01:31.850 find anything they need inside the suitcase. 18 01:31.930 --> 01:35.330 And this is kind of the idea behind code refactoring as well, right? 19 01:35.370 --> 01:40.330 I mean, incidentally, I’m also the type of person who cooks, makes a huge mess in the kitchen, 20 01:40.470 --> 01:49.290 and then I will just sort of mentally ignore it until I eat, and then after I eat I kind of have to confront 21 01:49.320 --> 01:54.710 the situation, or sometimes, you know, maybe even go two meals without tidying the kitchen. 22 01:54.780 --> 02:01.410 But of course the longer that you go on like this the harder it is to continue cooking because you can't 23 02:01.410 --> 02:04.300 find anything and everything is everywhere. 24 02:04.440 --> 02:11.250 One of the most memorable things that I remember from one of my mentors is that he once said you should 25 02:11.340 --> 02:20.490 refactor your code and maintain it to keep your code in a state as if you expect the next person who's 26 02:20.490 --> 02:23.780 going to have to maintain your code to be an axe murderer. 27 02:23.970 --> 02:28.980 Basically how much do you want to get murdered when they can't find any of the variables and they can't 28 02:28.980 --> 02:36.390 figure out why something's going wrong because your code is a mess and it's a load of unorganized spaghetti 29 02:36.390 --> 02:37.140 code? 30 02:37.140 --> 02:42.460 So we've spoken enough about why we need to refactor our code, but how do you actually do it? 31 02:42.480 --> 02:47.520 Well there's a number of guiding principles that most people will follow when they're refactoring their 32 02:47.520 --> 02:48.420 code. 33 02:48.460 --> 02:52.850 And for me the order of importance goes more or less like this. 34 02:52.890 --> 02:57.850 So I would prioritize readability as the number one priority. 35 02:57.960 --> 03:04.320 So make sure that your code is easy to understand but not just, you know, yourself but maybe, say, 36 03:04.320 --> 03:05.620 your future self, 37 03:05.640 --> 03:11.340 say when you come back in a year to try and understand your code, can you quickly understand what's going 38 03:11.340 --> 03:11.960 on? 39 03:11.970 --> 03:14.930 Is everything organized in a logical way? 40 03:14.970 --> 03:19.660 Is everything commented so that you can easily understand what each part of the code is about? 41 03:19.830 --> 03:25.470 And also when somebody else comes along or if you're working on the same project with another person, 42 03:25.530 --> 03:32.460 and this is a very common scenario if you're working in any sort of company or team, you're likely to 43 03:32.460 --> 03:34.970 be cooperating on the same piece of code. 44 03:34.980 --> 03:36.700 So remember axe murderer. 45 03:36.750 --> 03:37.370 Bad. 46 03:37.410 --> 03:39.860 So try to keep your code readable. 47 03:39.990 --> 03:47.760 Now the next thing is modularity and this kind of relates to how easy is it to reuse bits of your code 48 03:47.760 --> 03:49.840 and how easy is it to narrow down. 49 03:49.840 --> 03:55.890 Say if, you know, one particular part of your web site breaks down, is your code modular enough that you 50 03:55.890 --> 04:03.390 would be able to narrow down on the exact section of code or code file that's responsible for the problems 51 04:03.390 --> 04:04.860 that's occurring? Now, 52 04:04.920 --> 04:12.480 at the moment, because we're only covering, basically, HTML and CSS, we haven't really dug into this idea of 53 04:12.480 --> 04:14.050 modularity, although 54 04:14.210 --> 04:22.020 I've tried to impress upon you the importance of keeping your structure code inside the HTML and your style 55 04:22.020 --> 04:27.730 code inside the CSS, so that when you come to debugging your code you know where to look. 56 04:27.840 --> 04:31.810 And this kind of division of labor is another form of modularity. 57 04:31.950 --> 04:37.710 But as we go on to learn more about Javascript or NodeJS, back end stuff, we're going to be making our code 58 04:37.710 --> 04:44.170 more and more modular so that it's easier to maintain as it gets more complex and more interesting. 59 04:44.250 --> 04:49.200 And then we come on to the slightly less important things like efficiency. 60 04:49.200 --> 04:51.500 How fast does your code run? 61 04:51.540 --> 04:55.400 There's ways of making your code very efficient and very fast. 62 04:55.410 --> 05:00.490 Now a lot of that happens at the choosing the programming language level, so, you know, you want something 63 05:00.490 --> 05:02.460 fast, choose something like C, 64 05:02.470 --> 05:07.900 right, something that's close to the mantel. But there's also other ways of improving the efficiency of 65 05:07.900 --> 05:08.520 your code. 66 05:08.680 --> 05:14.470 But it's much much less important than keeping your code modular and readable. 67 05:14.470 --> 05:16.090 So that's why it's number three. 68 05:16.300 --> 05:23.200 And the last thing that a lot of people like to obsess about but it's mostly a vanity thing is the 69 05:23.200 --> 05:24.600 length of your code. 70 05:24.760 --> 05:27.100 You’ll very often hear coding bros 71 05:27.100 --> 05:30.960 talk about how short they've managed to make their code. 72 05:31.030 --> 05:36.160 And very often when you're talking to a bunch of programmers and somebody says that I built this feature 73 05:36.220 --> 05:41.130 and you know it only has what like 21 lines then somebody else is going to come along, 74 05:41.140 --> 05:48.430 inevitably, and going to be like, well I can write that in Haskell and it'll be 10. And, you know, yours 75 05:48.460 --> 05:53.180 truly, I might have also engaged in such terrible behavior. 76 05:53.200 --> 05:55.240 But it's kind of more like recreational. 77 05:55.240 --> 05:58.710 This is not good coding practice by any means. 78 05:58.720 --> 06:03.000 Now if you're cutting down on the length to improve readability then that's great. 79 06:03.010 --> 06:04.650 That's really really important. 80 06:04.690 --> 06:10.000 Making sure that you're not repeating yourself in your code so that you keep your code really well structured 81 06:10.090 --> 06:13.030 and readable, that is very important, up there, 82 06:13.030 --> 06:19.360 number one. But if you're purely just reducing the length of your code and actually making your code 83 06:19.360 --> 06:22.760 less readable, less comprehensible, then that's bad. 84 06:22.780 --> 06:29.470 And if you're building code for enterprise or for your company then that's, you know, probably not what you 85 06:29.470 --> 06:30.180 want to do. 86 06:30.190 --> 06:38.270 But if you are doing it just for fun there's actually a sport amongst programmers called code golf. 87 06:38.320 --> 06:42.460 Don't worry it doesn't involve, you know, getting changed or actually having to sweat. 88 06:42.610 --> 06:48.550 All it involves is trying to figure out how you can write the shortest code possible in order to achieve 89 06:48.640 --> 06:49.850 a certain task. 90 06:49.930 --> 06:55.270 And if you're interested there's a section of Stack Exchange called codegolf.stackexchange, where 91 06:55.270 --> 06:56.920 they've got a whole bunch of these kind of things. 92 06:56.950 --> 07:04.120 For example, this one is where you get to create a magic 8-ball that spits out one of these answers randomly 93 07:04.300 --> 07:08.130 and you have to do that in the least number of characters of code possible. 94 07:08.140 --> 07:14.980 So you see stuff like people using crazy programming languages which are just, like, look how short this 95 07:14.980 --> 07:15.180 is. 96 07:15.200 --> 07:19.930 And for some reason it’s able to spit out that code, but more likely you're going to see something like 97 07:19.990 --> 07:22.930 this or something like this. 98 07:22.960 --> 07:25.170 But it's a fun place to explore 99 07:25.210 --> 07:31.720 once you've really understood a particular language and you really want to flex your code biceps for 100 07:31.780 --> 07:34.580 recreation. But, for code that you're going to ship, 101 07:34.690 --> 07:36.890 this is not important at all. 102 07:36.940 --> 07:39.920 So I just want to make that really clear. 103 07:39.940 --> 07:47.740 Now let's head into our code and see what we can do to refactor it and make it more readable and more 104 07:47.740 --> 07:48.600 modular.