Instructor: Now let's start with vertical formatting.
Vertical formatting is about using the vertical space
in our code file.
And there, we have one simple rule.
Your code should be readable like an essay;
top to bottom without too many "jumps".
And this is something you already heard
in the first code section.
Your code should be nice to read, almost like an essay.
And if you read a book,
you also don't wanna jump from page one to page three,
and from the start of page three to the end of page three,
before you continue in the middle of page three, right?
You wanna have one smooth reading flow,
and we wanna have the same for the code you write.
Now to achieve this smooth reading flow for our code,
there are a couple of the rules and concepts
we can keep in mind and follow.
For example, if your file becomes too big,
if it houses too many different concepts,
you wanna consider splitting it across multiple files.
Now there is no hard rule on how many lines of code
in one file are considered to be too big.
But in general,
whenever you have a file with a lot of different concepts,
for example, multiple classes being defined in one file,
then it is probably too big,
and you should split your file into multiple files.
For example, as a rule of thumb,
if you are working with classes,
it is a good rule that you should have one class per file,
not more than that.
And this will help with keeping your files short,
and therefore readable.
Now within one in the same file,
you will still have multiple different concepts.
And with concepts,
here I don't mean different classes or anything like that.
But for example,
simply multiple methods within one at the same class.
That could be different concepts,
different areas of code, you could say.
And you should separate those concepts by spacing.
And here's an example.
We start by importing from a third-party package,
or in this case, actually from the Node.js core library.
So in this case, some core functionalities,
which are built into Node.js, which is a JavaScript runtime.
I'm importing these functionalities
and then I'm defining a class,
the DiskStorage class which has a constructor,
and then various methods for creating directories
and for inserting files.
Also for handling the completion of our operations
and for handling errors.
And then at the very bottom,
I instantiate this class twice
to have different storages, different folders.
And then I insert different files into these storages.
Now what you will notice is that I have some blank lines
in this code file.
And in general,
throughout all the examples I showed you up to this point,
I do have blank lines,
and you should have blank lines,
because these blank lines create vertical space,
and this space makes the code more readable.
Consider this alternative version of this file.
It's the exact same code,
but I did remove all the blank lines.
All of a sudden, it's way harder to read.
It's way harder to tell what belongs together
and what doesn't.
It's way harder to tell where a method starts
and where it ends.
Even though I did not remove indentation
or anything like that,
it's just the blank lines which are gone.
And this shows us how important
and helpful vertical space is.
So you should introduce blank lines,
and therefore vertical space
between different blocks of code, different areas of code.
For example, here I start with my imports.
Then I have a blank line
before I start with the class definition.
Then we can add one between the class definition,
the constructor.
We definitely should add one between the constructor
and the next method,
and between all other methods to make it clear
that these are different methods,
and that it's not one huge method.
Once the class definition is done,
I add a blank line here before I start using the class.
Then one after that before I start using
the instantiated classes in that new timer which I set here.
And then I have no blank lines between all these lines,
because I'm doing the same thing,
just on different storages.
So that is closely related and the same kind of action.
Now obviously you should structure the code
in a way that makes sense to you.
But adding vertical spacing
is definitely something you should do.
So different concepts should be separated.
Similar concepts, on the other hand,
should not be separated by spacing.
And that's what you, for example,
saw in these or in these lines here,
where I basically have the same kind of operation.
I instantiate my DiskStorage or then I insert files.
And hence there is no real reason for a separation.
It's the same kind of task, the same kind of thing,
which is being done there.
Hence I keep that close to each other.
Now, last but not least,
we also should keep related concepts close to each other.
At least we should consider doing this.
And indeed, if you have a look at this demo file,
you will see that in the constructor,
I call the setupStorageDirectory method,
and it is the very next method in line.
In there, I call the createStorageDirectory method then,
and that is the next method in line.
Now here I point at the handleOperationCompletion method,
and it's not the next method in line,
instead it is down there.
But simply because in between I have another method,
which will also point at this handleOperationCompletion.
However, in handleOperationCompletion,
I then point at handleFileSystemError, and that is a method,
which is right below handleOperationCompletion.
So I'm keeping these related methods or these methods
which are calling each other close to each other,
at least in the places where this is possible.
Technically, we could also take
this insertFileWithData code and remove it from here.
And for example, add it here,
between setupStorageDirectory and createStorageDirectory.
Everything would work, the code would not break.
But it would be harder to read.
If we go through this file,
we see that we're calling
some createStorageDirectory method here,
but we don't see that method immediately.
Hence we have to scroll through the entire file
and search for it.
Obviously, this is a small class, so it's okay.
But still, it's unnecessary work.
It doesn't read smoothly.
We have a "jump" in our file.
And as I explained a couple of minutes ago,
we wanna avoid such jumps.
After all, when we read a book,
we also don't have such jumps.
Hence the better place for insertFileWithData
is not between two methods which are closely related,
but somewhere else where it's not directly
between related methods.
Now with the concept of keeping related concepts close
to each other, we already touched on ordering.
And ordering, of course,
also is important when it comes to formatting your code.
Now the rules on how to order things
in a class and outside of a class always also depend
on the programming language you're using.
For example if you have a language which knows
the concept of public and private properties and methods,
there often are rules on what should come first.
For example, that you start with the public properties,
then you have the private properties,
and then you continue with the public methods,
followed by the private methods, or the other way around.
So when it comes to this specific ordering,
it is the style guides of a language
you might wanna consult.
But besides that,
the concepts explained throughout
the last lectures apply nonetheless,
no matter which programming language you are using.