Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,330 --> 00:00:06,710
Now, in it's current state, our styles.css is looking a little bit atrocious.
2
00:00:06,720 --> 00:00:09,570
I mean there's so much repetition here.
3
00:00:09,600 --> 00:00:13,400
Montserrat-Bold font-family, Montserrat-Bold font-family.
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?
5
00:00:18,660 --> 00:00:24,840
We wrote it like all over the place here and here and many many more.
6
00:00:24,930 --> 00:00:29,670
So as I said previously, as a programmer, we’re always aspiring to be dry.
7
00:00:29,670 --> 00:00:32,560
Do not repeat yourself.
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.
9
00:00:38,700 --> 00:00:40,520
We enjoy typing.
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
11
00:00:48,240 --> 00:00:49,170
to read.
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.
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
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
15
00:01:06,840 --> 00:01:12,080
it and everything is everywhere and it's just impossible to find anything
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
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
18
00:01:27,720 --> 00:01:31,850
find anything they need inside the suitcase.
19
00:01:31,930 --> 00:01:35,330
And this is kind of the idea behind code refactoring as well, right?
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,
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
22
00:01:49,320 --> 00:01:54,710
the situation, or sometimes, you know, maybe even go two meals without tidying the kitchen.
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
24
00:02:01,410 --> 00:02:04,300
find anything and everything is everywhere.
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
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
27
00:02:20,490 --> 00:02:23,780
going to have to maintain your code to be an axe murderer.
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
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
30
00:02:36,390 --> 00:02:37,140
code?
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?
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
33
00:02:47,520 --> 00:02:48,420
code.
34
00:02:48,460 --> 00:02:52,850
And for me the order of importance goes more or less like this.
35
00:02:52,890 --> 00:02:57,850
So I would prioritize readability as the number one priority.
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,
37
00:03:04,320 --> 00:03:05,620
your future self,
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
39
00:03:11,340 --> 00:03:11,960
on?
40
00:03:11,970 --> 00:03:14,930
Is everything organized in a logical way?
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?
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,
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
44
00:03:32,460 --> 00:03:34,970
be cooperating on the same piece of code.
45
00:03:34,980 --> 00:03:36,700
So remember axe murderer.
46
00:03:36,750 --> 00:03:37,370
Bad.
47
00:03:37,410 --> 00:03:39,860
So try to keep your code readable.
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
49
00:03:47,760 --> 00:03:49,840
and how easy is it to narrow down.
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
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
52
00:04:03,390 --> 00:04:04,860
that's occurring? Now,
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
54
00:04:12,480 --> 00:04:14,050
modularity, although
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
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.
57
00:04:27,840 --> 00:04:31,810
And this kind of division of labor is another form of modularity.
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
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.
60
00:04:44,250 --> 00:04:49,200
And then we come on to the slightly less important things like efficiency.
61
00:04:49,200 --> 00:04:51,500
How fast does your code run?
62
00:04:51,540 --> 00:04:55,400
There's ways of making your code very efficient and very fast.
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
64
00:05:00,490 --> 00:05:02,460
fast, choose something like C,
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
66
00:05:07,900 --> 00:05:08,520
your code.
67
00:05:08,680 --> 00:05:14,470
But it's much much less important than keeping your code modular and readable.
68
00:05:14,470 --> 00:05:16,090
So that's why it's number three.
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
70
00:05:23,200 --> 00:05:24,600
length of your code.
71
00:05:24,760 --> 00:05:27,100
You’ll very often hear coding bros
72
00:05:27,100 --> 00:05:30,960
talk about how short they've managed to make their code.
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
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,
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
76
00:05:48,460 --> 00:05:53,180
truly, I might have also engaged in such terrible behavior.
77
00:05:53,200 --> 00:05:55,240
But it's kind of more like recreational.
78
00:05:55,240 --> 00:05:58,710
This is not good coding practice by any means.
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.
80
00:06:03,010 --> 00:06:04,650
That's really really important.
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
82
00:06:10,090 --> 00:06:13,030
and readable, that is very important, up there,
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
84
00:06:19,360 --> 00:06:22,760
less readable, less comprehensible, then that's bad.
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
86
00:06:29,470 --> 00:06:30,180
want to do.
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.
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.
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
90
00:06:48,640 --> 00:06:49,850
a certain task.
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
92
00:06:55,270 --> 00:06:56,920
they've got a whole bunch of these kind of things.
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
94
00:07:04,300 --> 00:07:08,130
and you have to do that in the least number of characters of code possible.
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
96
00:07:14,980 --> 00:07:15,180
is.
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
98
00:07:19,990 --> 00:07:22,930
this or something like this.
99
00:07:22,960 --> 00:07:25,170
But it's a fun place to explore
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
101
00:07:31,780 --> 00:07:34,580
recreation. But, for code that you're going to ship,
102
00:07:34,690 --> 00:07:36,890
this is not important at all.
103
00:07:36,940 --> 00:07:39,920
So I just want to make that really clear.
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
105
00:07:47,740 --> 00:07:48,600
modular.
10824
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.