0
1
00:00:00,330 --> 00:00:06,710
Now, in it's current state, our styles.css is looking a little bit atrocious.
1

2
00:00:06,720 --> 00:00:09,570
I mean there's so much repetition here.
2

3
00:00:09,600 --> 00:00:13,400
Montserrat-Bold font-family,  Montserrat-Bold font-family.
3

4
00:00:13,500 --> 00:00:18,640
And you might even remember how many times we wrote padding 7 percent 15 percent, right?
4

5
00:00:18,660 --> 00:00:24,840
We wrote it like all over the place here and here and many many more.
5

6
00:00:24,930 --> 00:00:29,670
So as I said previously, as a programmer, we’re always aspiring to be dry.
6

7
00:00:29,670 --> 00:00:32,560
Do not repeat yourself.
7

8
00:00:32,850 --> 00:00:38,590
And the opposite of this is kind of our code at the moment, and it's probably like wet code.
8

9
00:00:38,700 --> 00:00:40,520
We enjoy typing.
9

10
00:00:40,530 --> 00: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

11
00:00:48,240 --> 00:00:49,170
to read.
11

12
00:00:49,200 --> 00:00:54,660
Now whenever I go on holiday I always seem to be packing an hour before I have to leave.
12

13
00:00:54,660 --> 00:01:00,930
I think I have some medical condition where I can't pack in advance so my suitcase always inevitably
13

14
00:01:00,960 --> 00: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

15
00:01:06,840 --> 00:01:12,080
it and everything is everywhere and it's just impossible to find anything
15

16
00:01:12,210 --> 00: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

17
00:01:20,430 --> 00:01:27,720
packing properly so that everything is neat and tidy and myself or anybody else would be able to easily
17

18
00:01:27,720 --> 00:01:31,850
find anything they need inside the suitcase.
18

19
00:01:31,930 --> 00:01:35,330
And this is kind of the idea behind code refactoring as well, right?
19

20
00:01:35,370 --> 00:01:40,330
I mean, incidentally, I’m also the type of person who cooks, makes a huge mess in the kitchen,
20

21
00:01:40,470 --> 00: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

22
00:01:49,320 --> 00:01:54,710
the situation, or sometimes, you know, maybe even go two meals without tidying the kitchen.
22

23
00:01:54,780 --> 00: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

24
00:02:01,410 --> 00:02:04,300
find anything and everything is everywhere.
24

25
00:02:04,440 --> 00: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

26
00:02:11,340 --> 00: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

27
00:02:20,490 --> 00:02:23,780
going to have to maintain your code to be an axe murderer.
27

28
00:02:23,970 --> 00: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

29
00:02:28,980 --> 00: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

30
00:02:36,390 --> 00:02:37,140
code?
30

31
00:02:37,140 --> 00:02:42,460
So we've spoken enough about why we need to refactor our code, but how do you actually do it?
31

32
00:02:42,480 --> 00:02:47,520
Well there's a number of guiding principles that most people will follow when they're refactoring their
32

33
00:02:47,520 --> 00:02:48,420
code.
33

34
00:02:48,460 --> 00:02:52,850
And for me the order of importance goes more or less like this.
34

35
00:02:52,890 --> 00:02:57,850
So I would prioritize readability as the number one priority.
35

36
00:02:57,960 --> 00:03:04,320
So make sure that your code is easy to understand but not just, you know, yourself but maybe, say,
36

37
00:03:04,320 --> 00:03:05,620
your future self,
37

38
00:03:05,640 --> 00: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

39
00:03:11,340 --> 00:03:11,960
on?
39

40
00:03:11,970 --> 00:03:14,930
Is everything organized in a logical way?
40

41
00:03:14,970 --> 00:03:19,660
Is everything commented so that you can easily understand what each part of the code is about?
41

42
00:03:19,830 --> 00:03:25,470
And also when somebody else comes along or if you're working on the same project with another person,
42

43
00:03:25,530 --> 00: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

44
00:03:32,460 --> 00:03:34,970
be cooperating on the same piece of code.
44

45
00:03:34,980 --> 00:03:36,700
So remember axe murderer.
45

46
00:03:36,750 --> 00:03:37,370
Bad.
46

47
00:03:37,410 --> 00:03:39,860
So try to keep your code readable.
47

48
00:03:39,990 --> 00: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

49
00:03:47,760 --> 00:03:49,840
and how easy is it to narrow down.
49

50
00:03:49,840 --> 00:03:55,890
Say if, you know, one particular part of your web site breaks down, is your code modular enough that you
50

51
00:03:55,890 --> 00: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

52
00:04:03,390 --> 00:04:04,860
that's occurring? Now,
52

53
00:04:04,920 --> 00: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

54
00:04:12,480 --> 00:04:14,050
modularity, although 
54

55
00:04:14,210 --> 00:04:22,020
I've tried to impress upon you the importance of keeping your structure code inside the HTML and your style
55

56
00:04:22,020 --> 00:04:27,730
code inside the CSS, so that when you come to debugging your code you know where to look.
56

57
00:04:27,840 --> 00:04:31,810
And this kind of division of labor is another form of modularity.
57

58
00:04:31,950 --> 00: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

59
00:04:37,710 --> 00:04:44,170
more and more modular so that it's easier to maintain as it gets more complex and more interesting.
59

60
00:04:44,250 --> 00:04:49,200
And then we come on to the slightly less important things like efficiency.
60

61
00:04:49,200 --> 00:04:51,500
How fast does your code run?
61

62
00:04:51,540 --> 00:04:55,400
There's ways of making your code very efficient and very fast.
62

63
00:04:55,410 --> 00:05:00,490
Now a lot of that happens at the choosing the programming language level, so, you know, you want something
63

64
00:05:00,490 --> 00:05:02,460
fast, choose something like C, 
64

65
00:05:02,470 --> 00:05:07,900
right, something that's close to the mantel. But there's also other ways of improving the efficiency of
65

66
00:05:07,900 --> 00:05:08,520
your code.
66

67
00:05:08,680 --> 00:05:14,470
But it's much much less important than keeping your code modular and readable.
67

68
00:05:14,470 --> 00:05:16,090
So that's why it's number three.
68

69
00:05:16,300 --> 00: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

70
00:05:23,200 --> 00:05:24,600
length of your code.
70

71
00:05:24,760 --> 00:05:27,100
You’ll very often hear coding bros
71

72
00:05:27,100 --> 00:05:30,960
talk about how short they've managed to make their code.
72

73
00:05:31,030 --> 00:05:36,160
And very often when you're talking to a bunch of programmers and somebody says that I built this feature
73

74
00:05:36,220 --> 00:05:41,130
and you know it only has what like 21 lines then somebody else is going to come along,
74

75
00:05:41,140 --> 00: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

76
00:05:48,460 --> 00:05:53,180
truly, I might have also engaged in such terrible behavior.
76

77
00:05:53,200 --> 00:05:55,240
But it's kind of more like recreational.
77

78
00:05:55,240 --> 00:05:58,710
This is not good coding practice by any means.
78

79
00:05:58,720 --> 00:06:03,000
Now if you're cutting down on the length to improve readability then that's great.
79

80
00:06:03,010 --> 00:06:04,650
That's really really important.
80

81
00:06:04,690 --> 00:06:10,000
Making sure that you're not repeating yourself in your code so that you keep your code really well structured
81

82
00:06:10,090 --> 00:06:13,030
and readable, that is very important, up there,
82

83
00:06:13,030 --> 00:06:19,360
number one. But if you're purely just reducing the length of your code and actually making your code
83

84
00:06:19,360 --> 00:06:22,760
less readable, less comprehensible, then that's bad.
84

85
00:06:22,780 --> 00: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

86
00:06:29,470 --> 00:06:30,180
want to do.
86

87
00:06:30,190 --> 00:06:38,270
But if you are doing it just for fun there's actually a sport amongst programmers called code golf.
87

88
00:06:38,320 --> 00:06:42,460
Don't worry it doesn't involve, you know, getting changed or actually having to sweat.
88

89
00:06:42,610 --> 00:06:48,550
All it involves is trying to figure out how you can write the shortest code possible in order to achieve
89

90
00:06:48,640 --> 00:06:49,850
a certain task.
90

91
00:06:49,930 --> 00:06:55,270
And if you're interested there's a section of Stack Exchange called codegolf.stackexchange, where
91

92
00:06:55,270 --> 00:06:56,920
they've got a whole bunch of these kind of things.
92

93
00:06:56,950 --> 00: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

94
00:07:04,300 --> 00:07:08,130
and you have to do that in the least number of characters of code possible.
94

95
00:07:08,140 --> 00:07:14,980
So you see stuff like people using crazy programming languages which are just, like, look how short this
95

96
00:07:14,980 --> 00:07:15,180
is.
96

97
00:07:15,200 --> 00: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

98
00:07:19,990 --> 00:07:22,930
this or something like this.
98

99
00:07:22,960 --> 00:07:25,170
But it's a fun place to explore
99

100
00:07:25,210 --> 00:07:31,720
once you've really understood a particular language and you really want to flex your code biceps for
100

101
00:07:31,780 --> 00:07:34,580
recreation. But, for code that you're going to ship,
101

102
00:07:34,690 --> 00:07:36,890
this is not important at all.
102

103
00:07:36,940 --> 00:07:39,920
So I just want to make that really clear.
103

104
00:07:39,940 --> 00: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

105
00:07:47,740 --> 00:07:48,600
modular.