Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,340 --> 00:00:04,110
Up until now, whenever we changed our code
2
00:00:04,110 --> 00:00:06,640
and then wanted to see the effect of the code
3
00:00:06,640 --> 00:00:09,210
in the browser, we saved the code
4
00:00:09,210 --> 00:00:12,070
and then manually reloaded the browser.
5
00:00:12,070 --> 00:00:14,410
But there is a much better way.
6
00:00:14,410 --> 00:00:18,010
So instead, we can make the page reload automatically
7
00:00:18,010 --> 00:00:21,200
whenever we change our code in the editor.
8
00:00:21,200 --> 00:00:22,853
So let's now learn how.
9
00:00:24,790 --> 00:00:26,260
So in the real world,
10
00:00:26,260 --> 00:00:30,200
no professional developer reloads their browsers manually
11
00:00:30,200 --> 00:00:32,060
like we have been doing.
12
00:00:32,060 --> 00:00:35,990
So everyone uses some kind of tool to do that.
13
00:00:35,990 --> 00:00:39,730
So to make our life easier as we go through this course,
14
00:00:39,730 --> 00:00:42,980
we will now also install such a development tool
15
00:00:42,980 --> 00:00:44,903
which is called Live Server.
16
00:00:45,750 --> 00:00:49,850
And we can actually use Live Server in two different ways.
17
00:00:49,850 --> 00:00:53,640
First, we can install a VS Code extension,
18
00:00:53,640 --> 00:00:58,640
or second, we can use a bit of a more professional workflow
19
00:00:58,810 --> 00:01:03,580
using Node.js and a so-called npm package.
20
00:01:03,580 --> 00:01:06,520
And let's actually start with the easier approach
21
00:01:06,520 --> 00:01:09,770
which is to simply install the Live Server,
22
00:01:09,770 --> 00:01:11,653
the extension here on VS Code.
23
00:01:12,830 --> 00:01:15,210
So that's Live Server,
24
00:01:15,210 --> 00:01:17,600
and it's this one here.
25
00:01:17,600 --> 00:01:20,800
So just click Install as always.
26
00:01:20,800 --> 00:01:25,030
And then as we close this, you will see that down here
27
00:01:25,030 --> 00:01:29,540
we have this Go Live button, right?
28
00:01:29,540 --> 00:01:33,670
And so let's try to log something to the console here now,
29
00:01:33,670 --> 00:01:36,403
or actually let's try to click this button here first.
30
00:01:37,550 --> 00:01:40,030
So you see it says starting
31
00:01:40,030 --> 00:01:45,030
and now it opened up a new browser tab on this address here.
32
00:01:45,160 --> 00:01:48,920
So this URL, okay?
33
00:01:48,920 --> 00:01:53,560
Then here we click on inspect just to open up
34
00:01:53,560 --> 00:01:55,053
the developer console.
35
00:01:56,700 --> 00:02:00,820
Let's increase it a little bit and you see that right now,
36
00:02:00,820 --> 00:02:02,940
we have no output here at all.
37
00:02:02,940 --> 00:02:06,230
And that's because we are not logging anything
38
00:02:06,230 --> 00:02:10,410
here in the script. Right?
39
00:02:10,410 --> 00:02:14,220
And so now let's try to actually change the file.
40
00:02:14,220 --> 00:02:17,890
So let's just call the calcAge function here
41
00:02:17,890 --> 00:02:22,110
and now watch what happens as I simply save this file now.
42
00:02:22,110 --> 00:02:25,040
So I hit Command + S and you see that here
43
00:02:25,040 --> 00:02:26,240
on the other side,
44
00:02:26,240 --> 00:02:29,670
the output automatically appeared without me having
45
00:02:29,670 --> 00:02:33,400
to reload the browser. Right?
46
00:02:33,400 --> 00:02:36,990
And if I try some other value, give it a save again,
47
00:02:36,990 --> 00:02:39,990
then you see that it updated here again.
48
00:02:39,990 --> 00:02:44,683
And so that is the Live Server extension doing its work.
49
00:02:45,640 --> 00:02:48,530
Okay, but let's take it back here
50
00:02:48,530 --> 00:02:51,010
and actually close this window,
51
00:02:51,010 --> 00:02:55,550
because this was only the first way of using Live Server.
52
00:02:55,550 --> 00:02:59,910
So as I said before, there is a more professional way
53
00:02:59,910 --> 00:03:01,580
of running Live Server
54
00:03:01,580 --> 00:03:04,600
which just by using something called Node.jS,
55
00:03:04,600 --> 00:03:06,760
which is a JavaScript runtime
56
00:03:06,760 --> 00:03:09,303
that we can install on our computers.
57
00:03:10,160 --> 00:03:13,790
Now, if the extension that we just installed works just fine
58
00:03:13,790 --> 00:03:17,890
for you and you don't want to add any more complexity,
59
00:03:17,890 --> 00:03:20,850
then you can just skip the rest of this video
60
00:03:20,850 --> 00:03:22,760
and move on in the course.
61
00:03:22,760 --> 00:03:25,970
But I will actually use the second approach
62
00:03:25,970 --> 00:03:27,630
in the rest of the course,
63
00:03:27,630 --> 00:03:29,980
which is to first install Node.js,
64
00:03:29,980 --> 00:03:34,600
and then use an npm package called Live Server there.
65
00:03:34,600 --> 00:03:37,270
But again, you can follow the rest of the course,
66
00:03:37,270 --> 00:03:40,410
just as well by simply using the extension
67
00:03:40,410 --> 00:03:41,910
that we just installed.
68
00:03:41,910 --> 00:03:44,270
You don't need to install Node.js
69
00:03:44,270 --> 00:03:47,230
and the Live Server npm package.
70
00:03:47,230 --> 00:03:49,750
But if you're curious and want to see how
71
00:03:49,750 --> 00:03:51,430
the second approach works,
72
00:03:51,430 --> 00:03:53,250
then let's now quickly go ahead
73
00:03:53,250 --> 00:03:57,720
and install Node.js on our computers.
74
00:03:57,720 --> 00:04:00,230
So just Google Node.js here.
75
00:04:00,230 --> 00:04:04,880
And then it's probably this first result that you saw here.
76
00:04:04,880 --> 00:04:08,020
And Node.js is a way of running JavaScript
77
00:04:08,020 --> 00:04:09,950
outside of the browser,
78
00:04:09,950 --> 00:04:13,100
but also it's a way of running development tools,
79
00:04:13,100 --> 00:04:17,150
just like the Live Server that we want to install now.
80
00:04:17,150 --> 00:04:19,660
So go here to download,
81
00:04:19,660 --> 00:04:22,700
and then you can use the LTS version
82
00:04:22,700 --> 00:04:25,460
for whatever platform that you're using.
83
00:04:25,460 --> 00:04:28,670
So Windows, Mac, Linux,
84
00:04:28,670 --> 00:04:31,720
just download whatever you need for your use case
85
00:04:31,720 --> 00:04:35,970
then install it and then come back to this video.
86
00:04:35,970 --> 00:04:38,890
Now, if for some reason you cannot do this,
87
00:04:38,890 --> 00:04:42,010
or if anything goes wrong, then don't worry.
88
00:04:42,010 --> 00:04:43,900
You can of course continue this course
89
00:04:43,900 --> 00:04:46,150
without using a Live Server.
90
00:04:46,150 --> 00:04:48,720
So please don't get stuck on this video
91
00:04:48,720 --> 00:04:51,320
if you don't manage to install Live Server
92
00:04:51,320 --> 00:04:54,060
for some reason. Okay?
93
00:04:54,060 --> 00:04:57,850
Now, anyway, after you successfully installed Node.js,
94
00:04:57,850 --> 00:05:00,370
it will become available as a program
95
00:05:00,370 --> 00:05:02,680
in the so-called terminal.
96
00:05:02,680 --> 00:05:05,973
and let's use the VS Code built-in terminal.
97
00:05:07,420 --> 00:05:12,030
So VS code has a terminal included and to open it,
98
00:05:12,030 --> 00:05:15,880
we need to go to the menu bar and then new terminal.
99
00:05:15,880 --> 00:05:18,993
Or we can also use this weird shortcut here,
100
00:05:20,820 --> 00:05:22,693
but I prefer to do it like this.
101
00:05:23,580 --> 00:05:26,863
So let's increase this a little bit.
102
00:05:27,740 --> 00:05:30,130
And then I will clear this terminal here
103
00:05:30,130 --> 00:05:32,733
by hitting Command or Control + K.
104
00:05:33,760 --> 00:05:36,340
And that looks a little bit better.
105
00:05:36,340 --> 00:05:39,343
I can also increase this by hitting Command, + ,
106
00:05:40,400 --> 00:05:43,010
and actually that increases the whole window.
107
00:05:43,010 --> 00:05:46,540
So that I don't want, so let's go back.
108
00:05:46,540 --> 00:05:49,440
But anyway, in case you're not familiar with the terminal,
109
00:05:49,440 --> 00:05:53,530
it is basically a way of giving a computer instructions.
110
00:05:53,530 --> 00:05:55,570
And we will learn more about the terminal
111
00:05:55,570 --> 00:05:57,040
later in the course.
112
00:05:57,040 --> 00:05:59,630
This not the point to worry about a terminal.
113
00:05:59,630 --> 00:06:04,630
All I want you to do is to write note -v,
114
00:06:04,740 --> 00:06:07,320
then hit Return or Enter.
115
00:06:07,320 --> 00:06:10,910
And then you should see some kind of number here.
116
00:06:10,910 --> 00:06:12,740
It doesn't matter what number,
117
00:06:12,740 --> 00:06:14,570
but as long as you see a number,
118
00:06:14,570 --> 00:06:18,210
it means that you successfully installed Node.js
119
00:06:18,210 --> 00:06:20,510
So if you have this number here
120
00:06:20,510 --> 00:06:25,510
then you can now write npm install live-server -g.
121
00:06:30,140 --> 00:06:31,490
And in case you're on a Mac,
122
00:06:31,490 --> 00:06:35,200
you will probably need to sudo this command.
123
00:06:35,200 --> 00:06:37,400
So start a command with sudo
124
00:06:37,400 --> 00:06:41,430
and then npm install live-server g.
125
00:06:41,430 --> 00:06:42,960
So again, it's not important
126
00:06:42,960 --> 00:06:44,853
that you understand what this does.
127
00:06:45,730 --> 00:06:47,380
Let me just, in 10 seconds,
128
00:06:47,380 --> 00:06:50,880
tell you that npm is the Node package manager,
129
00:06:50,880 --> 00:06:54,150
which is basically a program to download tools.
130
00:06:54,150 --> 00:06:55,500
Then here we say install.
131
00:06:55,500 --> 00:06:58,670
And then here we say that the tool we want to install
132
00:06:58,670 --> 00:07:02,520
is called Live Server and -g means
133
00:07:02,520 --> 00:07:04,690
that it should be installed globally.
134
00:07:04,690 --> 00:07:06,440
And that will make the Live Server tool
135
00:07:06,440 --> 00:07:09,520
available everywhere on your computer.
136
00:07:09,520 --> 00:07:14,040
So if you're on a Mac use sudo here before the command,
137
00:07:14,040 --> 00:07:16,320
but on Windows you don't need sudo.
138
00:07:16,320 --> 00:07:19,010
And it won't work even if you use sudo.
139
00:07:19,010 --> 00:07:21,520
Then hit Enter and if you're on a Mac,
140
00:07:21,520 --> 00:07:24,300
you now need to enter your password.
141
00:07:24,300 --> 00:07:26,830
And don't worry if you don't see anything there,
142
00:07:26,830 --> 00:07:30,093
that is on purpose, just write it anyway, hit Return,
143
00:07:31,020 --> 00:07:33,563
and then it should start doing something.
144
00:07:38,110 --> 00:07:40,680
So right now it is being installed
145
00:07:40,680 --> 00:07:44,283
and I get some errors here apparently,
146
00:07:45,600 --> 00:07:49,130
but I think they are not really important.
147
00:07:49,130 --> 00:07:52,830
Anyway, I already had Live Server installed anyway.
148
00:07:52,830 --> 00:07:56,070
And so these errors here, they should be no problem.
149
00:07:56,070 --> 00:07:58,160
So we can clear our console again
150
00:07:58,160 --> 00:08:01,051
by hitting Command or Control key.
151
00:08:01,051 --> 00:08:01,884
(keyboard clacks)
152
00:08:01,884 --> 00:08:05,160
Like this. And so that looks much better.
153
00:08:05,160 --> 00:08:06,780
And now all we need to do
154
00:08:06,780 --> 00:08:11,780
is to write live-server and then hit Return.
155
00:08:11,800 --> 00:08:16,500
So try that and it worked.
156
00:08:16,500 --> 00:08:21,460
So it automatically opened up a tab in the browser.
157
00:08:21,460 --> 00:08:23,990
So probably in your predefined browser
158
00:08:23,990 --> 00:08:26,320
and this browser tab is now connected
159
00:08:26,320 --> 00:08:28,610
to your current project folder.
160
00:08:28,610 --> 00:08:31,650
And so in the console here, you can see the folder,
161
00:08:31,650 --> 00:08:33,240
which is this one.
162
00:08:33,240 --> 00:08:35,690
So developer skills in this case
163
00:08:35,690 --> 00:08:37,740
and so that's exactly the project folder
164
00:08:37,740 --> 00:08:40,000
that we are in right now.
165
00:08:40,000 --> 00:08:43,270
So whenever you run Live Server in some folder,
166
00:08:43,270 --> 00:08:46,810
that folder will then be opened in the browser.
167
00:08:46,810 --> 00:08:49,420
And whenever we open a folder in the browser,
168
00:08:49,420 --> 00:08:53,290
it will then open the index.html file by default.
169
00:08:53,290 --> 00:08:54,270
And that's why we always
170
00:08:54,270 --> 00:08:57,733
have an index.html file in any folder.
171
00:08:58,890 --> 00:09:03,080
Okay, so let's open up the console here.
172
00:09:03,080 --> 00:09:06,060
Then we get a small error, but as we reload the page,
173
00:09:06,060 --> 00:09:07,923
this error will disappear.
174
00:09:09,700 --> 00:09:11,240
Yeah, that's right.
175
00:09:11,240 --> 00:09:15,503
And so here, let's actually get rid of this.
176
00:09:17,780 --> 00:09:20,000
And here let's log to the console,
177
00:09:20,000 --> 00:09:24,050
the result of calcAge and then with some year,
178
00:09:24,050 --> 00:09:26,410
just so that we can now test this.
179
00:09:26,410 --> 00:09:28,060
So when I give it a save,
180
00:09:28,060 --> 00:09:31,120
watch what happens here on the right side in a browser.
181
00:09:31,120 --> 00:09:32,910
So I will not reload the browser,
182
00:09:32,910 --> 00:09:36,133
I will only hit Command + S to save this file.
183
00:09:37,336 --> 00:09:39,780
And you see, it took like half a second,
184
00:09:39,780 --> 00:09:41,230
then the browser reloaded
185
00:09:41,230 --> 00:09:44,590
and now we get the result here automatically.
186
00:09:44,590 --> 00:09:46,780
Also you can see down here in the terminal
187
00:09:46,780 --> 00:09:48,550
that a change was detected
188
00:09:48,550 --> 00:09:51,400
and so that's what triggered the reload.
189
00:09:51,400 --> 00:09:55,000
So any file that changes in this folder now
190
00:09:55,000 --> 00:09:56,820
will trigger a reload.
191
00:09:56,820 --> 00:10:00,343
So even if I changed something in the HTML file.
192
00:10:02,820 --> 00:10:04,960
For example, if I save now,
193
00:10:04,960 --> 00:10:08,713
then see how it changed here as well, right away.
194
00:10:09,750 --> 00:10:13,650
So let's put that back, close it.
195
00:10:13,650 --> 00:10:16,480
And actually we can even close this terminal.
196
00:10:16,480 --> 00:10:19,040
So if I close it and save it again,
197
00:10:19,040 --> 00:10:22,360
you see it reloaded again very quickly
198
00:10:23,750 --> 00:10:25,140
and it's still working.
199
00:10:25,140 --> 00:10:27,460
So the terminal, it's still down there,
200
00:10:27,460 --> 00:10:28,900
it's just not visible,
201
00:10:28,900 --> 00:10:32,173
but we can always get it back by hitting new terminal.
202
00:10:33,920 --> 00:10:35,830
And actually that's a new one,
203
00:10:35,830 --> 00:10:37,770
but then just click this menu here
204
00:10:37,770 --> 00:10:41,313
and go to the first one that we had, which says node.
205
00:10:42,990 --> 00:10:44,130
Okay, and with this,
206
00:10:44,130 --> 00:10:48,100
we established a real world web development environment
207
00:10:48,100 --> 00:10:49,660
or workflow.
208
00:10:49,660 --> 00:10:52,220
And so now you can really start to feel like
209
00:10:52,220 --> 00:10:55,560
a real JavaScript developer, not one of the kind
210
00:10:55,560 --> 00:10:58,383
that has to manually reload their browser.
211
00:10:59,750 --> 00:11:03,650
So I hope that you find this as cool as I do,
212
00:11:03,650 --> 00:11:07,660
but in any way, we are now finished setting up our browser
213
00:11:07,660 --> 00:11:10,610
and also our development workflow.
214
00:11:10,610 --> 00:11:13,590
So basically this part here of the section,
215
00:11:13,590 --> 00:11:15,110
so the editor setup.
216
00:11:15,110 --> 00:11:17,080
And so now we're ready to go a little bit
217
00:11:17,080 --> 00:11:20,900
into developer skills because that's also an area
218
00:11:20,900 --> 00:11:25,050
that's important to develop for you as a new developer.
219
00:11:25,050 --> 00:11:28,210
And so the next couple of videos will be how to learn
220
00:11:28,210 --> 00:11:29,993
and how to solve problems.
16419
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.