1 00:00:02,120 --> 00:00:05,010 Now let's start with vertical formatting. 2 00:00:05,010 --> 00:00:08,280 Vertical formatting is about using the vertical space 3 00:00:08,280 --> 00:00:09,480 in our code file. 4 00:00:09,480 --> 00:00:11,590 And there, we have one simple rule. 5 00:00:11,590 --> 00:00:14,540 Your code should be readable like an essay; 6 00:00:14,540 --> 00:00:17,620 top to bottom without too many "jumps". 7 00:00:17,620 --> 00:00:19,330 And this is something you already heard 8 00:00:19,330 --> 00:00:21,180 in the first code section. 9 00:00:21,180 --> 00:00:25,210 Your code should be nice to read, almost like an essay. 10 00:00:25,210 --> 00:00:26,610 And if you read a book, 11 00:00:26,610 --> 00:00:29,930 you also don't wanna jump from page one to page three, 12 00:00:29,930 --> 00:00:33,140 and from the start of page three to the end of page three, 13 00:00:33,140 --> 00:00:36,600 before you continue in the middle of page three, right? 14 00:00:36,600 --> 00:00:39,680 You wanna have one smooth reading flow, 15 00:00:39,680 --> 00:00:43,110 and we wanna have the same for the code you write. 16 00:00:43,110 --> 00:00:46,930 Now to achieve this smooth reading flow for our code, 17 00:00:46,930 --> 00:00:49,340 there are a couple of the rules and concepts 18 00:00:49,340 --> 00:00:51,840 we can keep in mind and follow. 19 00:00:51,840 --> 00:00:55,000 For example, if your file becomes too big, 20 00:00:55,000 --> 00:00:58,000 if it houses too many different concepts, 21 00:00:58,000 --> 00:01:01,680 you wanna consider splitting it across multiple files. 22 00:01:01,680 --> 00:01:05,720 Now there is no hard rule on how many lines of code 23 00:01:05,720 --> 00:01:09,490 in one file are considered to be too big. 24 00:01:09,490 --> 00:01:10,540 But in general, 25 00:01:10,540 --> 00:01:13,810 whenever you have a file with a lot of different concepts, 26 00:01:13,810 --> 00:01:17,610 for example, multiple classes being defined in one file, 27 00:01:17,610 --> 00:01:19,890 then it is probably too big, 28 00:01:19,890 --> 00:01:22,743 and you should split your file into multiple files. 29 00:01:23,750 --> 00:01:25,640 For example, as a rule of thumb, 30 00:01:25,640 --> 00:01:27,920 if you are working with classes, 31 00:01:27,920 --> 00:01:31,410 it is a good rule that you should have one class per file, 32 00:01:31,410 --> 00:01:32,890 not more than that. 33 00:01:32,890 --> 00:01:35,250 And this will help with keeping your files short, 34 00:01:35,250 --> 00:01:37,200 and therefore readable. 35 00:01:37,200 --> 00:01:39,080 Now within one in the same file, 36 00:01:39,080 --> 00:01:41,880 you will still have multiple different concepts. 37 00:01:41,880 --> 00:01:43,210 And with concepts, 38 00:01:43,210 --> 00:01:46,700 here I don't mean different classes or anything like that. 39 00:01:46,700 --> 00:01:47,760 But for example, 40 00:01:47,760 --> 00:01:51,060 simply multiple methods within one at the same class. 41 00:01:51,060 --> 00:01:52,810 That could be different concepts, 42 00:01:52,810 --> 00:01:55,110 different areas of code, you could say. 43 00:01:55,110 --> 00:01:59,520 And you should separate those concepts by spacing. 44 00:01:59,520 --> 00:02:01,270 And here's an example. 45 00:02:01,270 --> 00:02:04,470 We start by importing from a third-party package, 46 00:02:04,470 --> 00:02:08,570 or in this case, actually from the Node.js core library. 47 00:02:08,570 --> 00:02:11,300 So in this case, some core functionalities, 48 00:02:11,300 --> 00:02:15,143 which are built into Node.js, which is a JavaScript runtime. 49 00:02:16,030 --> 00:02:18,110 I'm importing these functionalities 50 00:02:18,110 --> 00:02:20,120 and then I'm defining a class, 51 00:02:20,120 --> 00:02:22,880 the DiskStorage class which has a constructor, 52 00:02:22,880 --> 00:02:26,270 and then various methods for creating directories 53 00:02:26,270 --> 00:02:28,670 and for inserting files. 54 00:02:28,670 --> 00:02:32,290 Also for handling the completion of our operations 55 00:02:32,290 --> 00:02:34,340 and for handling errors. 56 00:02:34,340 --> 00:02:35,580 And then at the very bottom, 57 00:02:35,580 --> 00:02:37,960 I instantiate this class twice 58 00:02:37,960 --> 00:02:40,690 to have different storages, different folders. 59 00:02:40,690 --> 00:02:43,863 And then I insert different files into these storages. 60 00:02:45,140 --> 00:02:49,030 Now what you will notice is that I have some blank lines 61 00:02:49,030 --> 00:02:50,920 in this code file. 62 00:02:50,920 --> 00:02:52,100 And in general, 63 00:02:52,100 --> 00:02:54,990 throughout all the examples I showed you up to this point, 64 00:02:54,990 --> 00:02:56,770 I do have blank lines, 65 00:02:56,770 --> 00:02:58,820 and you should have blank lines, 66 00:02:58,820 --> 00:03:02,600 because these blank lines create vertical space, 67 00:03:02,600 --> 00:03:05,890 and this space makes the code more readable. 68 00:03:05,890 --> 00:03:09,110 Consider this alternative version of this file. 69 00:03:09,110 --> 00:03:10,830 It's the exact same code, 70 00:03:10,830 --> 00:03:13,820 but I did remove all the blank lines. 71 00:03:13,820 --> 00:03:16,690 All of a sudden, it's way harder to read. 72 00:03:16,690 --> 00:03:19,130 It's way harder to tell what belongs together 73 00:03:19,130 --> 00:03:20,170 and what doesn't. 74 00:03:20,170 --> 00:03:23,070 It's way harder to tell where a method starts 75 00:03:23,070 --> 00:03:24,380 and where it ends. 76 00:03:24,380 --> 00:03:26,780 Even though I did not remove indentation 77 00:03:26,780 --> 00:03:28,110 or anything like that, 78 00:03:28,110 --> 00:03:31,000 it's just the blank lines which are gone. 79 00:03:31,000 --> 00:03:32,860 And this shows us how important 80 00:03:32,860 --> 00:03:35,400 and helpful vertical space is. 81 00:03:35,400 --> 00:03:37,290 So you should introduce blank lines, 82 00:03:37,290 --> 00:03:38,970 and therefore vertical space 83 00:03:38,970 --> 00:03:43,350 between different blocks of code, different areas of code. 84 00:03:43,350 --> 00:03:46,350 For example, here I start with my imports. 85 00:03:46,350 --> 00:03:47,840 Then I have a blank line 86 00:03:47,840 --> 00:03:50,410 before I start with the class definition. 87 00:03:50,410 --> 00:03:53,410 Then we can add one between the class definition, 88 00:03:53,410 --> 00:03:54,570 the constructor. 89 00:03:54,570 --> 00:03:57,230 We definitely should add one between the constructor 90 00:03:57,230 --> 00:03:58,510 and the next method, 91 00:03:58,510 --> 00:04:01,200 and between all other methods to make it clear 92 00:04:01,200 --> 00:04:02,860 that these are different methods, 93 00:04:02,860 --> 00:04:05,360 and that it's not one huge method. 94 00:04:05,360 --> 00:04:07,150 Once the class definition is done, 95 00:04:07,150 --> 00:04:10,900 I add a blank line here before I start using the class. 96 00:04:10,900 --> 00:04:13,800 Then one after that before I start using 97 00:04:13,800 --> 00:04:17,580 the instantiated classes in that new timer which I set here. 98 00:04:17,580 --> 00:04:20,890 And then I have no blank lines between all these lines, 99 00:04:20,890 --> 00:04:22,690 because I'm doing the same thing, 100 00:04:22,690 --> 00:04:24,910 just on different storages. 101 00:04:24,910 --> 00:04:29,030 So that is closely related and the same kind of action. 102 00:04:29,030 --> 00:04:30,990 Now obviously you should structure the code 103 00:04:30,990 --> 00:04:32,840 in a way that makes sense to you. 104 00:04:32,840 --> 00:04:34,300 But adding vertical spacing 105 00:04:34,300 --> 00:04:36,583 is definitely something you should do. 106 00:04:37,590 --> 00:04:40,160 So different concepts should be separated. 107 00:04:40,160 --> 00:04:42,090 Similar concepts, on the other hand, 108 00:04:42,090 --> 00:04:44,820 should not be separated by spacing. 109 00:04:44,820 --> 00:04:46,150 And that's what you, for example, 110 00:04:46,150 --> 00:04:49,720 saw in these or in these lines here, 111 00:04:49,720 --> 00:04:52,800 where I basically have the same kind of operation. 112 00:04:52,800 --> 00:04:56,850 I instantiate my DiskStorage or then I insert files. 113 00:04:56,850 --> 00:04:59,640 And hence there is no real reason for a separation. 114 00:04:59,640 --> 00:05:02,740 It's the same kind of task, the same kind of thing, 115 00:05:02,740 --> 00:05:04,160 which is being done there. 116 00:05:04,160 --> 00:05:06,560 Hence I keep that close to each other. 117 00:05:06,560 --> 00:05:08,360 Now, last but not least, 118 00:05:08,360 --> 00:05:12,260 we also should keep related concepts close to each other. 119 00:05:12,260 --> 00:05:14,930 At least we should consider doing this. 120 00:05:14,930 --> 00:05:17,980 And indeed, if you have a look at this demo file, 121 00:05:17,980 --> 00:05:20,540 you will see that in the constructor, 122 00:05:20,540 --> 00:05:23,320 I call the setupStorageDirectory method, 123 00:05:23,320 --> 00:05:26,080 and it is the very next method in line. 124 00:05:26,080 --> 00:05:30,400 In there, I call the createStorageDirectory method then, 125 00:05:30,400 --> 00:05:33,080 and that is the next method in line. 126 00:05:33,080 --> 00:05:36,740 Now here I point at the handleOperationCompletion method, 127 00:05:36,740 --> 00:05:39,020 and it's not the next method in line, 128 00:05:39,020 --> 00:05:40,810 instead it is down there. 129 00:05:40,810 --> 00:05:43,730 But simply because in between I have another method, 130 00:05:43,730 --> 00:05:47,650 which will also point at this handleOperationCompletion. 131 00:05:48,490 --> 00:05:50,930 However, in handleOperationCompletion, 132 00:05:50,930 --> 00:05:54,840 I then point at handleFileSystemError, and that is a method, 133 00:05:54,840 --> 00:05:57,795 which is right below handleOperationCompletion. 134 00:05:57,795 --> 00:06:01,500 So I'm keeping these related methods or these methods 135 00:06:01,500 --> 00:06:04,270 which are calling each other close to each other, 136 00:06:04,270 --> 00:06:07,340 at least in the places where this is possible. 137 00:06:07,340 --> 00:06:09,350 Technically, we could also take 138 00:06:09,350 --> 00:06:13,450 this insertFileWithData code and remove it from here. 139 00:06:13,450 --> 00:06:15,520 And for example, add it here, 140 00:06:15,520 --> 00:06:20,150 between setupStorageDirectory and createStorageDirectory. 141 00:06:20,150 --> 00:06:22,960 Everything would work, the code would not break. 142 00:06:22,960 --> 00:06:24,720 But it would be harder to read. 143 00:06:24,720 --> 00:06:26,730 If we go through this file, 144 00:06:26,730 --> 00:06:28,190 we see that we're calling 145 00:06:28,190 --> 00:06:30,770 some createStorageDirectory method here, 146 00:06:30,770 --> 00:06:33,040 but we don't see that method immediately. 147 00:06:33,040 --> 00:06:35,580 Hence we have to scroll through the entire file 148 00:06:35,580 --> 00:06:37,010 and search for it. 149 00:06:37,010 --> 00:06:40,370 Obviously, this is a small class, so it's okay. 150 00:06:40,370 --> 00:06:43,110 But still, it's unnecessary work. 151 00:06:43,110 --> 00:06:44,800 It doesn't read smoothly. 152 00:06:44,800 --> 00:06:47,200 We have a "jump" in our file. 153 00:06:47,200 --> 00:06:49,430 And as I explained a couple of minutes ago, 154 00:06:49,430 --> 00:06:52,000 we wanna avoid such jumps. 155 00:06:52,000 --> 00:06:53,490 After all, when we read a book, 156 00:06:53,490 --> 00:06:55,800 we also don't have such jumps. 157 00:06:55,800 --> 00:06:59,260 Hence the better place for insertFileWithData 158 00:06:59,260 --> 00:07:02,590 is not between two methods which are closely related, 159 00:07:02,590 --> 00:07:05,280 but somewhere else where it's not directly 160 00:07:05,280 --> 00:07:07,520 between related methods. 161 00:07:07,520 --> 00:07:10,820 Now with the concept of keeping related concepts close 162 00:07:10,820 --> 00:07:13,800 to each other, we already touched on ordering. 163 00:07:13,800 --> 00:07:15,240 And ordering, of course, 164 00:07:15,240 --> 00:07:18,760 also is important when it comes to formatting your code. 165 00:07:18,760 --> 00:07:21,540 Now the rules on how to order things 166 00:07:21,540 --> 00:07:24,730 in a class and outside of a class always also depend 167 00:07:24,730 --> 00:07:26,980 on the programming language you're using. 168 00:07:26,980 --> 00:07:29,330 For example if you have a language which knows 169 00:07:29,330 --> 00:07:32,720 the concept of public and private properties and methods, 170 00:07:32,720 --> 00:07:35,670 there often are rules on what should come first. 171 00:07:35,670 --> 00:07:39,080 For example, that you start with the public properties, 172 00:07:39,080 --> 00:07:41,610 then you have the private properties, 173 00:07:41,610 --> 00:07:44,020 and then you continue with the public methods, 174 00:07:44,020 --> 00:07:47,440 followed by the private methods, or the other way around. 175 00:07:47,440 --> 00:07:49,880 So when it comes to this specific ordering, 176 00:07:49,880 --> 00:07:51,960 it is the style guides of a language 177 00:07:51,960 --> 00:07:53,490 you might wanna consult. 178 00:07:53,490 --> 00:07:54,600 But besides that, 179 00:07:54,600 --> 00:07:56,010 the concepts explained throughout 180 00:07:56,010 --> 00:07:58,080 the last lectures apply nonetheless, 181 00:07:58,080 --> 00:08:00,883 no matter which programming language you are using.