1
00:00:00,000 --> 00:00:04,674
[MUSIC]

2
00:00:04,674 --> 00:00:08,968
So far, we have been
concentrating on designing and

3
00:00:08,968 --> 00:00:14,540
implementing our website,
be it HTML, CSS, or JavaScript code.

4
00:00:16,170 --> 00:00:21,890
Once your website is ready, the next step
is to be able to build your website and

5
00:00:21,890 --> 00:00:26,010
to deploy it to a web server, so
that it becomes publicly available.

6
00:00:27,300 --> 00:00:30,750
Then our second set of steps
that we need to undergo before

7
00:00:30,750 --> 00:00:34,580
your website is ready for
deployment on a web server.

8
00:00:34,580 --> 00:00:39,079
This is what we're going to look
at in this and the next lesson.

9
00:00:40,915 --> 00:00:43,479
As I mentioned, web development and

10
00:00:43,479 --> 00:00:47,870
deployment involves a lot
of repetitive tasks.

11
00:00:47,870 --> 00:00:54,820
Obviously, the writing of the HTML/CSS and
JavaScript code is one part of it.

12
00:00:54,820 --> 00:00:57,600
But the other part is
the fact that if you write

13
00:00:59,200 --> 00:01:04,170
the CSS code using one of the CSS
preprocessing languages, like Sass or

14
00:01:04,170 --> 00:01:09,200
Less, then you need to convert that
code into the corresponding CSS code.

15
00:01:09,200 --> 00:01:14,614
Thereafter, you need to do
additional processing on your

16
00:01:14,614 --> 00:01:20,810
CSS files like minification,
compaction, and concatenation.

17
00:01:20,810 --> 00:01:24,850
We'll talk a little bit more about
these in the next few slides.

18
00:01:24,850 --> 00:01:30,090
Similarly, with your JavaScript code,
you need to do

19
00:01:30,090 --> 00:01:34,580
JSHinting, checking for potential errors.

20
00:01:34,580 --> 00:01:40,590
Then concatenation of
various script files and

21
00:01:40,590 --> 00:01:45,100
then even uglification and
the mangling of the code.

22
00:01:45,100 --> 00:01:49,240
We'll talk a little bit about
that in the next few slides.

23
00:01:49,240 --> 00:01:54,889
All these tasks are repetitive tasks,
which we would like to automate

24
00:01:54,889 --> 00:02:00,536
as far as possible, so that we can
concentrate on the actual design and

25
00:02:00,536 --> 00:02:05,730
building of our website,
rather than these repetitive tasks.

26
00:02:05,730 --> 00:02:09,623
So that the DRY principle,
do not repeat yourself principle,

27
00:02:09,623 --> 00:02:11,840
is very essential in this case.

28
00:02:11,840 --> 00:02:16,840
We don't want to be wasting our time
on such repetitive combustion tasks,

29
00:02:16,840 --> 00:02:20,140
and instead,
try to automate them as far as possible so

30
00:02:20,140 --> 00:02:23,410
that they can be executed
whenever required.

31
00:02:23,410 --> 00:02:27,649
Let's talk about some of these
repetitive tasks in a bit more detail.

32
00:02:28,950 --> 00:02:33,580
Let's take the example of CSS as a case.

33
00:02:33,580 --> 00:02:37,470
When we write CSS code,
we often write the code

34
00:02:37,470 --> 00:02:41,440
using one of the preprocessing
languages likes Less or Sass.

35
00:02:41,440 --> 00:02:46,920
Now once the code is written, then it
needs to be converted into CSS by using

36
00:02:46,920 --> 00:02:52,460
one of the preprocessors as we
have seen in the previous lesson.

37
00:02:54,130 --> 00:02:59,660
There, we may need to do some
vendor specific prefixing for

38
00:02:59,660 --> 00:03:06,300
our CSS code to address the issues that
might arise with various browsers.

39
00:03:06,300 --> 00:03:12,599
So this is where the task of
doing auto-prefixing is used,

40
00:03:12,599 --> 00:03:16,980
whereby this can be automatically done for
us.

41
00:03:16,980 --> 00:03:20,430
Similarly, once your CSS code is written,
obviously,

42
00:03:20,430 --> 00:03:26,010
the way we write CSS code
is to be humanly readable.

43
00:03:26,010 --> 00:03:30,550
But for a machine, it doesn't really
care whether there are enough spaces

44
00:03:30,550 --> 00:03:34,000
between the code or
whether it is properly formatted or not.

45
00:03:35,100 --> 00:03:41,274
So, minification is the process of
removing all the unnecessary characters,

46
00:03:41,274 --> 00:03:46,080
the white space, newlines,
comments, from your CSS code.

47
00:03:46,080 --> 00:03:51,280
So that your end result is a very
compact file with minimum number

48
00:03:51,280 --> 00:03:56,306
of characters, so
that may be served up very, very quickly.

49
00:03:56,306 --> 00:03:57,812
But at the same time,

50
00:03:57,812 --> 00:04:03,099
you want to preserve the functionality
that you designed in your CSS code.

51
00:04:04,550 --> 00:04:09,140
Similarly, you might distribute
your CSS code into many files,

52
00:04:09,140 --> 00:04:12,870
while you are designing and
building your website.

53
00:04:12,870 --> 00:04:17,620
You may want to concatenate all of them
into a single CSS file at the end,

54
00:04:17,620 --> 00:04:21,430
so that only a single CSS
file needs to be downloaded

55
00:04:21,430 --> 00:04:25,290
by the browser when it is
rendering your website.

56
00:04:25,290 --> 00:04:27,150
So concatenation is yet

57
00:04:27,150 --> 00:04:32,340
another task that is involved when
you're building your website.

58
00:04:33,660 --> 00:04:38,940
Similarly, when you write JavaScript code,
whether it is pure JavaScript or

59
00:04:38,940 --> 00:04:44,800
jQuery or
one of the frameworks that we will use in

60
00:04:44,800 --> 00:04:50,640
the future courses of this specialization,
you would need to write JavaScript code.

61
00:04:50,640 --> 00:04:53,550
So once you've written the JavaScript
code, you'll want to be able to check

62
00:04:53,550 --> 00:04:57,510
the JavaScript code for
errors and potential problems.

63
00:04:57,510 --> 00:05:00,576
Things like missing semicolons,

64
00:05:02,810 --> 00:05:09,030
Improper use of the language, and so on,
so what we call as static code analysis.

65
00:05:09,030 --> 00:05:13,490
So if you want to be able to perform this,
even before we deploy our

66
00:05:14,830 --> 00:05:18,180
website on the web server.

67
00:05:18,180 --> 00:05:23,379
Similarly, we might organize our
code into multiple JavaScript files.

68
00:05:23,379 --> 00:05:28,135
When we actually deploy, we may want
to concatenate all these files into

69
00:05:28,135 --> 00:05:33,515
a single JavaScript file and
then use that in our web pages.

70
00:05:33,515 --> 00:05:36,775
And this concatenation can
be done automatically.

71
00:05:36,775 --> 00:05:42,340
Similarly, the uglification of
the JavaScript code, which stands for

72
00:05:42,340 --> 00:05:46,720
minification, meaning removing all
the unnecessary white space and

73
00:05:46,720 --> 00:05:48,880
comments and so on.

74
00:05:48,880 --> 00:05:53,670
And mangling of the code,
meaning reducing the names of the local

75
00:05:53,670 --> 00:05:58,100
variables to single
letters wherever feasible.

76
00:05:58,100 --> 00:06:01,562
Now, from a perspective of a computer,

77
00:06:01,562 --> 00:06:06,790
it doesn't really care what the code
looks like as long as it works correctly.

78
00:06:06,790 --> 00:06:12,230
For human readable format,
we obviously write code in a lot more

79
00:06:12,230 --> 00:06:17,960
elaborate manner, so that it's easier for
us to follow what the code is doing.

80
00:06:17,960 --> 00:06:19,620
So when you actually deploy,

81
00:06:19,620 --> 00:06:23,460
you may wish to remove all
the extraneous features from your code.

82
00:06:23,460 --> 00:06:29,226
And then compact it so that the minimum
amount of code will be served up.

83
00:06:29,226 --> 00:06:35,270
At the same time, upon completion
of the JSHint concatenation and

84
00:06:35,270 --> 00:06:37,200
uglification process,

85
00:06:37,200 --> 00:06:41,990
you may still want to make sure that your
resulting code will still work correctly.

86
00:06:41,990 --> 00:06:46,490
So, you may want to recheck your code for
potential errors.

87
00:06:47,550 --> 00:06:52,127
CSS and JavaScript are two major aspects
of your web development that you

88
00:06:52,127 --> 00:06:55,640
obviously need to pay
a lot of attention to.

89
00:06:55,640 --> 00:06:59,640
But there are many other smaller
tasks that you need to perform

90
00:06:59,640 --> 00:07:02,870
before your website is ready for
deployment.

91
00:07:02,870 --> 00:07:08,601
You might include a lot of
images into your web pages.

92
00:07:08,601 --> 00:07:14,574
Once your website is ready,
you may want to compact those images so

93
00:07:14,574 --> 00:07:17,881
that you optimize the file sizes, so

94
00:07:17,881 --> 00:07:23,440
that their images will be minimum
sized files to be deployed.

95
00:07:24,510 --> 00:07:30,310
Similarly, while you're doing development,
you may be making modifications to,

96
00:07:30,310 --> 00:07:35,580
for example, your Sass files or
your JavaScript code.

97
00:07:35,580 --> 00:07:38,268
When such modifications are done,

98
00:07:38,268 --> 00:07:42,748
you want to be able to automatically
carry out those tasks,

99
00:07:42,748 --> 00:07:47,990
like concatenation, minification,
and uglification tasks.

100
00:07:47,990 --> 00:07:52,110
So we could use watch tasks,

101
00:07:52,110 --> 00:07:56,480
whose main job is to keep
a watch on all these files.

102
00:07:56,480 --> 00:07:59,340
And if any changes
are done to these files,

103
00:07:59,340 --> 00:08:03,070
the tasks will be automatically executed.

104
00:08:03,070 --> 00:08:09,260
This will free up a lot of our time
from doing repetitive tasks manually.

105
00:08:10,610 --> 00:08:15,320
We'll look at some of this in more
detail in the exercises that follow.

106
00:08:16,660 --> 00:08:22,060
One other aspect,
while you're doing your development,

107
00:08:22,060 --> 00:08:25,940
is to be able to serve up your code and

108
00:08:25,940 --> 00:08:30,570
watch the code in your browser.

109
00:08:30,570 --> 00:08:37,960
So we have seen the use of the live
server in our previous development,

110
00:08:37,960 --> 00:08:42,330
where we had the server up and
running and serving up the code.

111
00:08:42,330 --> 00:08:46,530
So that we can see the changes
that we make instantaneously

112
00:08:48,230 --> 00:08:51,020
being rendered in the browser.

113
00:08:51,020 --> 00:08:55,549
So, for this, we need server and
livereload mechanism, and

114
00:08:55,549 --> 00:09:01,340
live server that we saw earlier is one
such example of how we can achieve this.

115
00:09:02,740 --> 00:09:07,850
Finally, if you are writing code,
you obviously need to carry out testing

116
00:09:07,850 --> 00:09:14,210
of your code, which, in Bootstrap's case,
is a lot less of consideration.

117
00:09:14,210 --> 00:09:18,930
But as you go on to use
various JavaScript frameworks,

118
00:09:18,930 --> 00:09:21,915
testing becomes an equally important task.

119
00:09:23,190 --> 00:09:28,680
Finally, you want to be able to
accomplish all these tasks and

120
00:09:28,680 --> 00:09:34,250
then build up your final deployment
code that can then be uploaded

121
00:09:34,250 --> 00:09:40,790
to your web server to make your website
available for the general public.

122
00:09:42,450 --> 00:09:48,115
The steps involved in building up your
site for deployment, what we call

123
00:09:48,115 --> 00:09:53,950
as building up the distribution files,
is also an equally important task.

124
00:09:53,950 --> 00:09:59,754
We'll look at some of these through
examples in the next exercise and

125
00:09:59,754 --> 00:10:04,470
also the next lesson where we
will look at task runners.

126
00:10:04,470 --> 00:10:10,569
[MUSIC]