1
00:00:00,000 --> 00:00:01,832


2
00:00:01,832 --> 00:00:03,040
YULIA SOKOLOVA: Hi, everyone.

3
00:00:03,040 --> 00:00:06,660
My name is Yulia I'm one of
the preceptors here at CS50.

4
00:00:06,660 --> 00:00:11,430
Thank you so much for joining
us today for our CS50 seminars.

5
00:00:11,430 --> 00:00:16,680
Today, we have our own Andrew
Holmes, Harvard class of 2024,

6
00:00:16,680 --> 00:00:19,470
presenting on Flying the Nest--

7
00:00:19,470 --> 00:00:22,390
Setting Up Your Local
Development Environment.

8
00:00:22,390 --> 00:00:26,170
So I will kick things off
to enter in just a minute,

9
00:00:26,170 --> 00:00:29,340
but please enjoy the seminar.

10
00:00:29,340 --> 00:00:32,290
Feel free to type any questions
that you have in the chat,

11
00:00:32,290 --> 00:00:35,790
and we will try to get to
them either during the seminar

12
00:00:35,790 --> 00:00:40,642
or shortly after Andrew,
you want to kick things off?

13
00:00:40,642 --> 00:00:41,850
ANDREW HOLMES: Well, welcome.

14
00:00:41,850 --> 00:00:42,730
Thanks for coming.

15
00:00:42,730 --> 00:00:44,733
This is the CS50 seminar
on Flying the Nest.

16
00:00:44,733 --> 00:00:46,650
So today, I'm going to
be talking about moving

17
00:00:46,650 --> 00:00:49,080
from cs50.dev or the
Codespace environment

18
00:00:49,080 --> 00:00:53,160
and all of our familiar tools
working on your laptop-- working

19
00:00:53,160 --> 00:00:55,020
offline in local development.

20
00:00:55,020 --> 00:00:57,690
And for me personally, that
takes the form of Windows.

21
00:00:57,690 --> 00:01:00,540
As I've just said, I am
a long-time Windows user.

22
00:01:00,540 --> 00:01:04,360
I've just moved to an iPhone for the
first time ever in the iOS system.

23
00:01:04,360 --> 00:01:07,240
But I'm going to be talking
largely based in Windows.

24
00:01:07,240 --> 00:01:10,150
And at the end, I'm going to talk
about some of the Mac connotations

25
00:01:10,150 --> 00:01:14,420
and how that should translate if you're
working on a Mac or on a Linux system.

26
00:01:14,420 --> 00:01:16,390
So to get us started--

27
00:01:16,390 --> 00:01:19,050


28
00:01:19,050 --> 00:01:24,000
well, to get us started I guess
I should start with a home page.

29
00:01:24,000 --> 00:01:27,270
So welcome to the CS50 seminar again.

30
00:01:27,270 --> 00:01:28,490
My name is Andrew Holmes.

31
00:01:28,490 --> 00:01:33,140
I am a head TF here for CS50
at the college currently.

32
00:01:33,140 --> 00:01:35,490
I have taught CS50 for three years.

33
00:01:35,490 --> 00:01:38,330
This is my final year
here as a senior, and I'm

34
00:01:38,330 --> 00:01:42,240
really excited to be working with
you for the next 30 minutes or so.

35
00:01:42,240 --> 00:01:46,913
So getting going, this is something
that hopefully we're familiar with.

36
00:01:46,913 --> 00:01:48,830
If you're a CS50 student,
you've been studying

37
00:01:48,830 --> 00:01:53,570
through CS50x, CS50 at the college, this
is our Codespaces environment, right?

38
00:01:53,570 --> 00:01:56,108
This can be accessed by cs50.dev.

39
00:01:56,108 --> 00:01:58,400
On the left, you're going to
see some of our new tools.

40
00:01:58,400 --> 00:02:01,448
You might see the duck over
on the left sidebar, which

41
00:02:01,448 --> 00:02:03,740
is one of our newest tools
which I was fortunate enough

42
00:02:03,740 --> 00:02:06,181
to work on over the summer last year.

43
00:02:06,181 --> 00:02:09,139
But this has some problems, and you
might have encountered some of them

44
00:02:09,139 --> 00:02:10,970
already.

45
00:02:10,970 --> 00:02:13,190
So it begs the question,
why am I even bothering

46
00:02:13,190 --> 00:02:14,482
saying "Why Local Development?"

47
00:02:14,482 --> 00:02:17,810
Because we already have a tool
space where you've worked.

48
00:02:17,810 --> 00:02:18,500
It's familiar.

49
00:02:18,500 --> 00:02:19,880
It has lots of great things.

50
00:02:19,880 --> 00:02:22,250
The CS50 duck is actually
specific to that environment.

51
00:02:22,250 --> 00:02:24,300
You won't be able to
find that anywhere else.

52
00:02:24,300 --> 00:02:26,300
So why should I bother?

53
00:02:26,300 --> 00:02:28,440
The first point I would
say is offline work.

54
00:02:28,440 --> 00:02:30,560
Anyone here at the
college knows the pain

55
00:02:30,560 --> 00:02:34,070
of the CS50 office hours on
Sunday, where we have wi-fi issues.

56
00:02:34,070 --> 00:02:35,330
Maybe you're traveling.

57
00:02:35,330 --> 00:02:36,410
We get stuck.

58
00:02:36,410 --> 00:02:39,320
You can't access cs50.dev,
you can't make progress,

59
00:02:39,320 --> 00:02:43,000
and that can be a source
of a huge frustration.

60
00:02:43,000 --> 00:02:45,470
The next thing is a
customizable environment.

61
00:02:45,470 --> 00:02:47,890
You might want to have tools
that we don't allow you.

62
00:02:47,890 --> 00:02:50,320
And I'll show you an example
where cs50 has restrictions

63
00:02:50,320 --> 00:02:52,180
on what you can do within
the Codespace environment,

64
00:02:52,180 --> 00:02:54,888
even though it's built on top of
VSCode, which we're going to see

65
00:02:54,888 --> 00:02:56,930
is very flexible.

66
00:02:56,930 --> 00:02:58,880
And the next one is
simplicity and speed.

67
00:02:58,880 --> 00:03:01,790
I can just turn on my laptop,
access whatever I'm working,

68
00:03:01,790 --> 00:03:04,880
on VS Code or any similar
tool, and I can write code.

69
00:03:04,880 --> 00:03:05,780
I can make progress.

70
00:03:05,780 --> 00:03:07,542
I don't have to go to cs50.dev.

71
00:03:07,542 --> 00:03:09,500
I don't even necessarily
need a GitHub account.

72
00:03:09,500 --> 00:03:11,060
I can just make it happen like that.

73
00:03:11,060 --> 00:03:13,490


74
00:03:13,490 --> 00:03:16,240
But you might have heard that local
development is not necessarily

75
00:03:16,240 --> 00:03:17,230
the standard here.

76
00:03:17,230 --> 00:03:22,570
And I'm going to ask why not local
development in the same vein.

77
00:03:22,570 --> 00:03:26,472
Local development is common,
especially at the undergraduate level.

78
00:03:26,472 --> 00:03:28,180
But as you go on, you
might actually find

79
00:03:28,180 --> 00:03:30,055
that we move back away
from local development

80
00:03:30,055 --> 00:03:33,117
and go back onto like a server
or something like Codespaces.

81
00:03:33,117 --> 00:03:34,450
And that begs the question, why?

82
00:03:34,450 --> 00:03:35,992
Why have we set up local development?

83
00:03:35,992 --> 00:03:38,247
Why would we move away from it later?

84
00:03:38,247 --> 00:03:40,330
One of the things-- it's
a massive pain to set up.

85
00:03:40,330 --> 00:03:42,730
As we're going to see,
and as I was demonstrating

86
00:03:42,730 --> 00:03:45,490
by struggling a minute before
I was meant to present,

87
00:03:45,490 --> 00:03:47,950
things can go wrong, especially
on your own computer.

88
00:03:47,950 --> 00:03:48,830
Right?

89
00:03:48,830 --> 00:03:49,995
And that's a safe space.

90
00:03:49,995 --> 00:03:51,620
You don't want to damage your computer.

91
00:03:51,620 --> 00:03:54,377
You don't want to have to
debug your machine or cause

92
00:03:54,377 --> 00:03:57,460
issues with the rest of your life,
especially if it's a personal computer,

93
00:03:57,460 --> 00:04:01,180
like many university or students
of CS would currently use.

94
00:04:01,180 --> 00:04:04,460
You don't have a work
machine and a home machine.

95
00:04:04,460 --> 00:04:06,290
There are also hardware limitations.

96
00:04:06,290 --> 00:04:09,200
Whatever laptop you're
running, it's limited, right?

97
00:04:09,200 --> 00:04:10,370
You might have four cores.

98
00:04:10,370 --> 00:04:11,270
You might have eight cores.

99
00:04:11,270 --> 00:04:12,590
Maybe you're running a new M3.

100
00:04:12,590 --> 00:04:15,710
Maybe you're running an
old Intel Windows laptop.

101
00:04:15,710 --> 00:04:18,320
Maybe you're running AMD
hardware, which is different.

102
00:04:18,320 --> 00:04:20,870
That can create some hazards, right?

103
00:04:20,870 --> 00:04:24,763
Some things may not be compatible,
some things may install differently,

104
00:04:24,763 --> 00:04:26,180
and some things may not translate.

105
00:04:26,180 --> 00:04:28,850
Your code might run differently
on your system than on mine.

106
00:04:28,850 --> 00:04:32,690
That's especially true if you're on
a 32-bit versus a 64-bit machine.

107
00:04:32,690 --> 00:04:36,170
We might even see an example later
perhaps where I made a mistake

108
00:04:36,170 --> 00:04:40,970
and installed a 32-bit GCC or C
compiler, and so all my pointers in C

109
00:04:40,970 --> 00:04:44,315
are actually 4 bytes long by accident
when I installed this earlier.

110
00:04:44,315 --> 00:04:46,890


111
00:04:46,890 --> 00:04:49,450
And that's come down to
hardware-dependent behavior.

112
00:04:49,450 --> 00:04:52,530
And one of those especially is
with the new Apple silicon, M1s,

113
00:04:52,530 --> 00:04:55,650
M2s have different
behavior based on their ARM

114
00:04:55,650 --> 00:05:01,070
architecture versus the traditional
Intel or similar processors.

115
00:05:01,070 --> 00:05:03,720
I'm going to bring myself back in here.

116
00:05:03,720 --> 00:05:06,650
So VSCode, this is where
we're going to start.

117
00:05:06,650 --> 00:05:08,510
This is a familiar interface.

118
00:05:08,510 --> 00:05:10,500
I have it here as my
default black theme,

119
00:05:10,500 --> 00:05:13,230
which I think many people are used to.

120
00:05:13,230 --> 00:05:14,900
And why should I use VSCode?

121
00:05:14,900 --> 00:05:17,600
I'm going to say that this is
where it's a good place to start

122
00:05:17,600 --> 00:05:19,970
in terms of writing code locally.

123
00:05:19,970 --> 00:05:21,842
And the first thing is
it's familiar, right?

124
00:05:21,842 --> 00:05:23,300
This is essentially the same thing.

125
00:05:23,300 --> 00:05:26,390
You'll see the sidebar over here,
which will look nice and familiar.

126
00:05:26,390 --> 00:05:28,120
Right?

127
00:05:28,120 --> 00:05:29,580
And it's very powerful.

128
00:05:29,580 --> 00:05:31,340
We use it everywhere.

129
00:05:31,340 --> 00:05:32,460
It's very common.

130
00:05:32,460 --> 00:05:36,480
It's used by plenty of people you
should trust who write excellent code.

131
00:05:36,480 --> 00:05:38,670
And so, let's get started.

132
00:05:38,670 --> 00:05:40,910
So we're going to see that
I'm running in Windows.

133
00:05:40,910 --> 00:05:41,900
I don't have VSCode.

134
00:05:41,900 --> 00:05:43,835
If I type it here, if I try and check--

135
00:05:43,835 --> 00:05:45,710
Andrew, you've been
writing code for a while.

136
00:05:45,710 --> 00:05:47,180
It's already installed, right?

137
00:05:47,180 --> 00:05:48,990
I'm working on a new user.

138
00:05:48,990 --> 00:05:51,400
So I have no VSCode.

139
00:05:51,400 --> 00:05:54,280
And instead of going to
cs50.dev, like I have here,

140
00:05:54,280 --> 00:05:56,050
we're going to search VSCode.

141
00:05:56,050 --> 00:05:59,770
Not the logo, which I needed for my
slides, but here's Visual Studio Code.

142
00:05:59,770 --> 00:06:00,550
Right?

143
00:06:00,550 --> 00:06:02,380
And the first thing we
see on this web page

144
00:06:02,380 --> 00:06:04,420
is Download for Windows Stable Build.

145
00:06:04,420 --> 00:06:08,020
And that's what we're going to hit.

146
00:06:08,020 --> 00:06:10,570
As we wait, we're going
to get an exe which

147
00:06:10,570 --> 00:06:13,420
we're going to just run and install
like on Windows, and the process

148
00:06:13,420 --> 00:06:14,950
here, while I have a
minute-- because this is

149
00:06:14,950 --> 00:06:16,575
going to take a little bit to download.

150
00:06:16,575 --> 00:06:18,970
I should have connected the ethernet.

151
00:06:18,970 --> 00:06:21,200
It's going to be similar for Mac, right?

152
00:06:21,200 --> 00:06:23,950
Go to VSCode, just search
Visual Studio Code,

153
00:06:23,950 --> 00:06:26,090
and there will be a
nice big install button.

154
00:06:26,090 --> 00:06:31,290
For example, if I go back a page, you'll
see that I could even click this arrow

155
00:06:31,290 --> 00:06:33,840
and say I want the macOS version.

156
00:06:33,840 --> 00:06:34,990
OK.

157
00:06:34,990 --> 00:06:36,790
Looks like my download is complete.

158
00:06:36,790 --> 00:06:39,100
So let's run this.

159
00:06:39,100 --> 00:06:41,460
I'm going to accept the
agreement to install this.

160
00:06:41,460 --> 00:06:42,820
Next.

161
00:06:42,820 --> 00:06:47,460
I'm going to install it in some folder.

162
00:06:47,460 --> 00:06:50,230
Luckily, it's not--
I have a second user,

163
00:06:50,230 --> 00:06:52,890
so it's not going to stall where
I already had it in my Andrew.

164
00:06:52,890 --> 00:06:54,098
It's going to stall in Andre.

165
00:06:54,098 --> 00:06:57,990
I guess I was both called Andrew,
and it removed the W for this user.

166
00:06:57,990 --> 00:07:01,050
We're going to have it as Visual
Studio Code or VSCode, whatever

167
00:07:01,050 --> 00:07:03,120
you like your shortcut to be.

168
00:07:03,120 --> 00:07:05,860
Then we have a couple of
options here which are useful.

169
00:07:05,860 --> 00:07:09,690
So the first one at the top here, Open
with Code action to Windows Explorer

170
00:07:09,690 --> 00:07:13,080
file context menu, and the one right
beneath, directory context menu.

171
00:07:13,080 --> 00:07:15,210
This is to say, if you're
in the File Explorer,

172
00:07:15,210 --> 00:07:17,877
you're looking through your files,
you'll be able to right-click

173
00:07:17,877 --> 00:07:23,310
on a piece of code, let's say a .c file,
and say Open With and then with Visual

174
00:07:23,310 --> 00:07:24,560
Studio Code or open with Code.

175
00:07:24,560 --> 00:07:26,727
And that will mean there
will be a shortcut directly

176
00:07:26,727 --> 00:07:29,610
within your File Explorer so you
can open a code file and bring it

177
00:07:29,610 --> 00:07:30,960
into VSCode.

178
00:07:30,960 --> 00:07:35,410
So I would recommend taking
both of these and hitting Next.

179
00:07:35,410 --> 00:07:37,170
And let's press Install.

180
00:07:37,170 --> 00:07:38,250
OK.

181
00:07:38,250 --> 00:07:44,220
So we're going to wait for this
to run for hopefully not too long.

182
00:07:44,220 --> 00:07:52,770
And as we go, let's launch VSCode.

183
00:07:52,770 --> 00:07:53,270
OK.

184
00:07:53,270 --> 00:07:55,990


185
00:07:55,990 --> 00:07:58,780
So I have a couple of
things open which I probably

186
00:07:58,780 --> 00:08:00,190
should have got rid of before.

187
00:08:00,190 --> 00:08:03,820
But I've set up a little space
for us to do some experimentation.

188
00:08:03,820 --> 00:08:06,430
I have a .c file over here--

189
00:08:06,430 --> 00:08:08,500
hello.c.

190
00:08:08,500 --> 00:08:10,000
So this should be nice and familiar.

191
00:08:10,000 --> 00:08:14,790
I'll make this bigger so
it's clearer for the video.

192
00:08:14,790 --> 00:08:17,480
This should be nothing surprising.

193
00:08:17,480 --> 00:08:20,270
Then, if I go over here,
I've also got the birthdays p

194
00:08:20,270 --> 00:08:24,350
set from p set nine-- this is
our Flask app-- and a home page.

195
00:08:24,350 --> 00:08:30,920
When I say a home page, I really mean
a very simple HTML page set up for us.

196
00:08:30,920 --> 00:08:31,460
OK.

197
00:08:31,460 --> 00:08:35,182
But currently, if I try and run
anything here and do HTTP Server,

198
00:08:35,182 --> 00:08:36,890
or any of the familiar
tools, we're going

199
00:08:36,890 --> 00:08:39,740
to see that I'm going to get
some pretty nasty red errors.

200
00:08:39,740 --> 00:08:43,460
It's currently not recognized
as a form of a commandlet.

201
00:08:43,460 --> 00:08:46,190
And that's because I don't have
a HTTP Server installed, right?

202
00:08:46,190 --> 00:08:47,250
And it'll be the same--

203
00:08:47,250 --> 00:08:48,833
I'm going to get rid of this for now--

204
00:08:48,833 --> 00:08:51,950
if I try to write gcc,
which is a C compiler.

205
00:08:51,950 --> 00:08:55,510
If I try to go to, let's
say I go to the C directory.

206
00:08:55,510 --> 00:08:56,510
I'm just going to clear.

207
00:08:56,510 --> 00:08:57,980
So I'm now in the C directory.

208
00:08:57,980 --> 00:09:01,400
If I ls, you're going to see I
have my hello.c and a makefile.

209
00:09:01,400 --> 00:09:04,190
If I tried make hello,
we're also going to see

210
00:09:04,190 --> 00:09:08,230
that I'm hitting errors because I
don't have this default installed.

211
00:09:08,230 --> 00:09:08,890
OK.

212
00:09:08,890 --> 00:09:11,150
So how do I fix this?

213
00:09:11,150 --> 00:09:14,020
Well, there's a couple of routes
through this on Windows especially.

214
00:09:14,020 --> 00:09:16,730


215
00:09:16,730 --> 00:09:19,410
The first thing is
that I can not fix it.

216
00:09:19,410 --> 00:09:22,910
I can take what I already had on
cs50.dev, and I can run it locally.

217
00:09:22,910 --> 00:09:24,320
We have this tool.

218
00:09:24,320 --> 00:09:28,550
And when you go on the Login button,
there's the arrow here on the right.

219
00:09:28,550 --> 00:09:31,040
And I'm going to demonstrate it now.

220
00:09:31,040 --> 00:09:34,970
If I want to, I can run exactly
the environment I had on cs50.dev,

221
00:09:34,970 --> 00:09:36,440
but I can run it on my computer.

222
00:09:36,440 --> 00:09:37,100
Right?

223
00:09:37,100 --> 00:09:40,868
So if I hit this Open in
VSCode Desktop, click this,

224
00:09:40,868 --> 00:09:42,660
it's going to ask you
for some permissions.

225
00:09:42,660 --> 00:09:46,970
So it's going to allow CS50 to
install the prerequisite materials

226
00:09:46,970 --> 00:09:48,180
onto your computer.

227
00:09:48,180 --> 00:09:50,390
So here we go, Allow it to open.

228
00:09:50,390 --> 00:09:52,910
Oh, apologies for the noise.

229
00:09:52,910 --> 00:09:56,200
Let's turn that off.

230
00:09:56,200 --> 00:09:57,755
OK.

231
00:09:57,755 --> 00:09:59,880
And here, we're going to
see it's trying to set up.

232
00:09:59,880 --> 00:10:01,350
So as you'll see--

233
00:10:01,350 --> 00:10:07,325
I'll move myself-- we have setting up
remote Codespace, starting Codespace.

234
00:10:07,325 --> 00:10:10,200
And what this is going to do is set
up almost exactly the environment

235
00:10:10,200 --> 00:10:13,050
that we already had.

236
00:10:13,050 --> 00:10:15,590
So I have a completely blank codespace.

237
00:10:15,590 --> 00:10:17,498
I'll go and log in here
on the web page, just

238
00:10:17,498 --> 00:10:19,790
to demonstrate that it's not
like I'm missing anything.

239
00:10:19,790 --> 00:10:22,410
My files would be synced.

240
00:10:22,410 --> 00:10:25,170
Let's log in.

241
00:10:25,170 --> 00:10:27,840
And here is my probable lamp codespace.

242
00:10:27,840 --> 00:10:30,900
Like I said, I made a
new GitHub user just

243
00:10:30,900 --> 00:10:35,730
to simulate trying to set
up for the first time.

244
00:10:35,730 --> 00:10:38,170
So yeah, I have nothing here.

245
00:10:38,170 --> 00:10:41,040
So you should expect,
when this is all set up--

246
00:10:41,040 --> 00:10:43,050
I don't need the languages.

247
00:10:43,050 --> 00:10:46,690
But now I'm in a codespace
environment, and there's nothing there.

248
00:10:46,690 --> 00:10:47,940
Let's remove the Welcome.

249
00:10:47,940 --> 00:10:51,090
But if I wanted to, I could code.

250
00:10:51,090 --> 00:10:53,340
Let's use some of our commands.

251
00:10:53,340 --> 00:10:56,520
Let's mkdir hello.

252
00:10:56,520 --> 00:10:58,560
You see, hello is now there on the left.

253
00:10:58,560 --> 00:10:59,415
cd hello.

254
00:10:59,415 --> 00:11:02,240


255
00:11:02,240 --> 00:11:03,720
I'm going to code.

256
00:11:03,720 --> 00:11:08,330
Code is the keyword,
essentially a bash function,

257
00:11:08,330 --> 00:11:11,540
to run VSCode and open
the file in VSCode.

258
00:11:11,540 --> 00:11:18,050
And if I wanted to do, I could do
include stdio.h, int main void,

259
00:11:18,050 --> 00:11:20,950
printf, "hello, world!"

260
00:11:20,950 --> 00:11:24,270


261
00:11:24,270 --> 00:11:31,300
And I now run make hello
and ./hello, there we are.

262
00:11:31,300 --> 00:11:32,650
Hello, world.

263
00:11:32,650 --> 00:11:37,440
And with that in mind, let's
put myself back on screen.

264
00:11:37,440 --> 00:11:38,700
OK.

265
00:11:38,700 --> 00:11:41,160
So this is one way of doing it.

266
00:11:41,160 --> 00:11:43,620
But this is not going to
give us much flexibility.

267
00:11:43,620 --> 00:11:49,410
Because we have restricted some tools on
here to make it work with our systems.

268
00:11:49,410 --> 00:11:52,560
One of those that is
probably pretty frustrating

269
00:11:52,560 --> 00:11:55,830
if you have any experience with
it is that if I try and run Git,

270
00:11:55,830 --> 00:11:56,940
it's going to say--

271
00:11:56,940 --> 00:11:58,480
move myself again quickly--

272
00:11:58,480 --> 00:12:00,420
you are in a repository managed by CS50.

273
00:12:00,420 --> 00:12:01,830
Git is disabled.

274
00:12:01,830 --> 00:12:04,560
And there's a talk later this
afternoon about using Git,

275
00:12:04,560 --> 00:12:06,360
and it's a super useful tool.

276
00:12:06,360 --> 00:12:09,490
Hopefully, you'll watch that
talk and see how to use it.

277
00:12:09,490 --> 00:12:12,360
But some restrictions
like this are going

278
00:12:12,360 --> 00:12:16,260
to be problematic for me to
configure exactly what I want to do.

279
00:12:16,260 --> 00:12:18,420
So let's abandon this idea.

280
00:12:18,420 --> 00:12:21,400
I want to be able to have my
own exact custom environment.

281
00:12:21,400 --> 00:12:26,340
So I'm going to close this out,
and I'm going to ignore cs50.dev,

282
00:12:26,340 --> 00:12:30,310
and I'm going to go my own route.

283
00:12:30,310 --> 00:12:34,690
And my own route-- on Windows,
there are two routes I would say.

284
00:12:34,690 --> 00:12:36,610
And this is going to be
a fascinating arrow--

285
00:12:36,610 --> 00:12:38,500
the height of animation and teaching.

286
00:12:38,500 --> 00:12:41,710
Windows is going to point
directly to Windows.

287
00:12:41,710 --> 00:12:44,730
And what I mean by this is there
are two options on Windows.

288
00:12:44,730 --> 00:12:46,480
Generally, if you want
to stay on Windows,

289
00:12:46,480 --> 00:12:49,510
one is to work locally
exactly within Windows.

290
00:12:49,510 --> 00:12:52,195
But there's an alternative,
which is this arrow, which

291
00:12:52,195 --> 00:12:54,070
is a little bit more
meaningful, and it's not

292
00:12:54,070 --> 00:12:56,170
the same word drawing to the same word.

293
00:12:56,170 --> 00:12:57,430
This is WSL.

294
00:12:57,430 --> 00:12:59,860
This is the Windows Subsystem for Linux.

295
00:12:59,860 --> 00:13:02,812
And what this does is it means
I can run a small Linux, almost

296
00:13:02,812 --> 00:13:05,770
something like a virtual machine--
it's not actually a virtual machine.

297
00:13:05,770 --> 00:13:09,418
But I can run something like
Linux while within Windows.

298
00:13:09,418 --> 00:13:10,960
I can write code in that environment.

299
00:13:10,960 --> 00:13:12,252
I can work in that environment.

300
00:13:12,252 --> 00:13:16,810
But I can still have all the familiarity
of working in my own Windows system.

301
00:13:16,810 --> 00:13:20,110
And this is great because all
the tools that we're used to

302
00:13:20,110 --> 00:13:22,750
are much easier to install
in Linux, and there

303
00:13:22,750 --> 00:13:26,570
are some compatibility and other nice
features that it's going to give us.

304
00:13:26,570 --> 00:13:28,810
So as it would suggest
by the green arrow,

305
00:13:28,810 --> 00:13:30,560
we're going to take this route today.

306
00:13:30,560 --> 00:13:34,820
You can do both, and I actually have
both configured myself on my laptop.

307
00:13:34,820 --> 00:13:38,160
But we're going to
focus on WSL for today.

308
00:13:38,160 --> 00:13:39,480
And why?

309
00:13:39,480 --> 00:13:41,145
It's more similar to CS50 tools.

310
00:13:41,145 --> 00:13:42,520
It's running a Linux environment.

311
00:13:42,520 --> 00:13:43,978
So we're going to be back in Linux.

312
00:13:43,978 --> 00:13:47,100
Anything like ls, mkdir, wget, apt--

313
00:13:47,100 --> 00:13:49,980
all those tools are going to work
right out of the box basically.

314
00:13:49,980 --> 00:13:53,430
It's much easier to install
once setup, and Linux and Unix

315
00:13:53,430 --> 00:13:57,150
tends to be much more
compatible with other systems.

316
00:13:57,150 --> 00:14:02,640
Some cons briefly is that
there's some overhead to run it.

317
00:14:02,640 --> 00:14:05,940
You are essentially running a mini
operating system on top of Windows

318
00:14:05,940 --> 00:14:07,200
already.

319
00:14:07,200 --> 00:14:11,310
And accessing files on your
local computer from WSL,

320
00:14:11,310 --> 00:14:12,492
there's some overhead.

321
00:14:12,492 --> 00:14:14,700
And it actually recommends
you to have all your files

322
00:14:14,700 --> 00:14:16,710
within the subsystem for Linux.

323
00:14:16,710 --> 00:14:20,220
I'll talk about that a little bit
later to explain it a bit better,

324
00:14:20,220 --> 00:14:23,010
but it's going to be a little
bit slow in terms of file

325
00:14:23,010 --> 00:14:25,710
writing and reading at times.

326
00:14:25,710 --> 00:14:29,410
And one con that I know someone on
the staff will want me to include,

327
00:14:29,410 --> 00:14:33,420
so I'm going to put it there, it's not
as good as just running pure Linux.

328
00:14:33,420 --> 00:14:36,390
If you want to take that
route and run Linux entirely,

329
00:14:36,390 --> 00:14:38,950
abandon ship, that would
be totally reasonable.

330
00:14:38,950 --> 00:14:40,210
And I, in fact, dual boot.

331
00:14:40,210 --> 00:14:42,490
I can boot into Windows
or I can boot into Linux.

332
00:14:42,490 --> 00:14:48,552
But that is a little bit advanced and
definitely not necessary for CS50.

333
00:14:48,552 --> 00:14:50,260
So here's how we're
going to get started.

334
00:14:50,260 --> 00:14:52,320
We're going to try and install WSL.

335
00:14:52,320 --> 00:14:56,480
Going to do wsl --install
within a terminal,

336
00:14:56,480 --> 00:14:59,240
and that's going to get us on the road.

337
00:14:59,240 --> 00:15:01,700
So what I'm going to do is
I'm going to open a terminal.

338
00:15:01,700 --> 00:15:04,700
In Windows 11, this is just
called Terminal like this.

339
00:15:04,700 --> 00:15:07,520
If you're on Windows 10, you might
want to run the command prompt--

340
00:15:07,520 --> 00:15:09,440
cmd down here.

341
00:15:09,440 --> 00:15:13,610
But I'm assuming most people
are now on Windows 11.

342
00:15:13,610 --> 00:15:16,910
I'm going to type-- well, I'm
going to clear the console quickly

343
00:15:16,910 --> 00:15:19,370
and type wsl --install.

344
00:15:19,370 --> 00:15:23,540
Let's make this nice and big,
make it clear what I'm doing,

345
00:15:23,540 --> 00:15:25,250
and we're going to install.

346
00:15:25,250 --> 00:15:29,210
So I've already installed this because
it needs a restart after installing.

347
00:15:29,210 --> 00:15:30,620
But this is a simple command.

348
00:15:30,620 --> 00:15:32,270
You're just going to run,
it's going to install it,

349
00:15:32,270 --> 00:15:33,660
and then it's going to
tell you to restart.

350
00:15:33,660 --> 00:15:35,930
And then you'll be essentially
exactly where I am.

351
00:15:35,930 --> 00:15:37,430
OK?

352
00:15:37,430 --> 00:15:41,420
So now that you have that set up.

353
00:15:41,420 --> 00:15:46,190
If I try and run wsl, for me
I've had to cheat a little bit

354
00:15:46,190 --> 00:15:49,110
and remove my distribution
so I can run it.

355
00:15:49,110 --> 00:15:52,340
It's going to say it has
no installed distributions.

356
00:15:52,340 --> 00:15:56,240
And what this means is WSL, the
subsystem for Linux, is installed,

357
00:15:56,240 --> 00:15:59,730
but it doesn't actually have a
Linux installation that it can use.

358
00:15:59,730 --> 00:16:04,400
And so, to do that, you can
go to one of these stores,

359
00:16:04,400 --> 00:16:06,690
or you can simply
install a distribution.

360
00:16:06,690 --> 00:16:08,870
And I'm going to do that like this.

361
00:16:08,870 --> 00:16:13,880
wsl --install, a distribution, -d.

362
00:16:13,880 --> 00:16:16,640
And because I know I
already have it installed,

363
00:16:16,640 --> 00:16:23,570
I'm going to pick Ubuntu-22.04,
the latest Ubuntu long-term support

364
00:16:23,570 --> 00:16:24,590
edition.

365
00:16:24,590 --> 00:16:28,550
So I'm going to hit this
command, and now it's

366
00:16:28,550 --> 00:16:30,620
going to attempt to install Ubuntu.

367
00:16:30,620 --> 00:16:35,330
And so, again, I've cheated just
so the seminar doesn't take an hour

368
00:16:35,330 --> 00:16:38,060
to install all of these things.

369
00:16:38,060 --> 00:16:41,240
But this is already installed,
so it's going to speed up--

370
00:16:41,240 --> 00:16:45,380
hopefully appear here
in a second for me.

371
00:16:45,380 --> 00:16:47,268
I see there's some
questions in the chat.

372
00:16:47,268 --> 00:16:49,310
We're going to answer
questions right at the end,

373
00:16:49,310 --> 00:16:51,643
once we've finished going
through everything, if that's.

374
00:16:51,643 --> 00:16:52,990
OK.

375
00:16:52,990 --> 00:16:53,920
Cool.

376
00:16:53,920 --> 00:16:58,360
And now, I see, in this terminal,
it has installed for me,

377
00:16:58,360 --> 00:17:01,450
and it wants some username
and password, just as

378
00:17:01,450 --> 00:17:04,160
if it was Windows or any
other operating system.

379
00:17:04,160 --> 00:17:07,180
So for this example,
I'm going to pick cs50.

380
00:17:07,180 --> 00:17:08,793
I'm going to give myself a password.

381
00:17:08,793 --> 00:17:10,460
It's not going to display your password.

382
00:17:10,460 --> 00:17:16,250
So this is a hidden, not very secure
password for the demonstration.

383
00:17:16,250 --> 00:17:17,589
And now, I'm in.

384
00:17:17,589 --> 00:17:20,800
It says, Welcome to
Ubuntu 2022-- sorry, 2022?

385
00:17:20,800 --> 00:17:23,260
22.04.2.

386
00:17:23,260 --> 00:17:23,980
OK.

387
00:17:23,980 --> 00:17:28,180
Now, if I type clear and I
run ls or anything like that,

388
00:17:28,180 --> 00:17:30,160
you're going to see it's going to work.

389
00:17:30,160 --> 00:17:33,520
You notice my terminal is changed
to this green prompt, which

390
00:17:33,520 --> 00:17:37,770
is going to be our indicator that
we're in Windows subsystem for Linux.

391
00:17:37,770 --> 00:17:38,520
OK.

392
00:17:38,520 --> 00:17:40,870
Now, how can I actually use this?

393
00:17:40,870 --> 00:17:45,280
Well what I'm going to do is
I'm going to go back to VSCode.

394
00:17:45,280 --> 00:17:46,480
OK.

395
00:17:46,480 --> 00:17:49,780
And it's trying to set up this
remote connection with Codespaces,

396
00:17:49,780 --> 00:17:51,280
which is actually not what I want.

397
00:17:51,280 --> 00:17:53,850
I want to work locally.

398
00:17:53,850 --> 00:17:57,100
I'm going to open local, I'm going to
go to My Documents and this CS50 folder,

399
00:17:57,100 --> 00:17:59,770
and I'm just going to open here.

400
00:17:59,770 --> 00:18:00,270
OK?

401
00:18:00,270 --> 00:18:04,150


402
00:18:04,150 --> 00:18:04,840
So here we are.

403
00:18:04,840 --> 00:18:08,640
We're back in this folder that we talked
about, which wasn't in my Codespaces.

404
00:18:08,640 --> 00:18:11,140
This is on my computer, and
this is code that I want to run.

405
00:18:11,140 --> 00:18:12,160
Right?

406
00:18:12,160 --> 00:18:15,850
And what I'm going to do is
this bottom corner over here

407
00:18:15,850 --> 00:18:17,560
there's an Open a Remote Window.

408
00:18:17,560 --> 00:18:22,220
And this is going to allow us
to open in WSL that folder.

409
00:18:22,220 --> 00:18:26,940
So I'm going to write Connect to WSL,
and I'm just going to click this.

410
00:18:26,940 --> 00:18:28,660
And we're going to see what happens.

411
00:18:28,660 --> 00:18:30,030
So it says starting VSCode--

412
00:18:30,030 --> 00:18:33,340
If I move myself-- in WSL
I didn't move in time.

413
00:18:33,340 --> 00:18:35,480
Sorry about that.

414
00:18:35,480 --> 00:18:41,720
But now I'm in WSL, and
I'm in my VSCode shortcut--

415
00:18:41,720 --> 00:18:43,880
sorry, in my VSCode terminal.

416
00:18:43,880 --> 00:18:47,420
And any of the tools that
I wanted to run over here,

417
00:18:47,420 --> 00:18:54,860
like ls, makedir, hello, cd hello,
we're going to see that now I'm back.

418
00:18:54,860 --> 00:18:56,720
But where actually am I?

419
00:18:56,720 --> 00:19:01,700
I don't seem to be-- like, if I'm on
the left, it says like Open the Folder.

420
00:19:01,700 --> 00:19:03,190
What's going on?

421
00:19:03,190 --> 00:19:04,610
I don't seem to be in CS50.

422
00:19:04,610 --> 00:19:08,030
And if I click this cs50,
here where it says Recent,

423
00:19:08,030 --> 00:19:11,120
we're going to see I no
longer seem to be in WSL.

424
00:19:11,120 --> 00:19:13,170
What's going on?

425
00:19:13,170 --> 00:19:16,980
What's going on is when
WSL recommends that you

426
00:19:16,980 --> 00:19:21,870
should keep your files separately--
so when I open local Windows files,

427
00:19:21,870 --> 00:19:24,060
it says, oh, you probably
don't want to be in WSL.

428
00:19:24,060 --> 00:19:25,470
But in fact, I do.

429
00:19:25,470 --> 00:19:27,490
So we can override this.

430
00:19:27,490 --> 00:19:28,650
And this is an update.

431
00:19:28,650 --> 00:19:31,290
If you've seen Carter's
local development talk,

432
00:19:31,290 --> 00:19:33,450
this has changed since then.

433
00:19:33,450 --> 00:19:37,740
You're going to want to hit
Control-Shift-P or View and the Command

434
00:19:37,740 --> 00:19:39,000
Palette.

435
00:19:39,000 --> 00:19:40,200
OK?

436
00:19:40,200 --> 00:19:44,970
And then, if you type WSL
an Open folder in WSL,

437
00:19:44,970 --> 00:19:48,540
it's going to say, OK, which folder
do you want to open with WSL?

438
00:19:48,540 --> 00:19:53,700
And I'm going to click the CS50
folder, Select Folder, and now

439
00:19:53,700 --> 00:19:55,510
what we're going to see--

440
00:19:55,510 --> 00:19:57,970
oh, OK.

441
00:19:57,970 --> 00:20:01,610
I'm not used to having
Zoom videos move around.

442
00:20:01,610 --> 00:20:03,450
What we're going to see is--

443
00:20:03,450 --> 00:20:06,330
if I close everything here--

444
00:20:06,330 --> 00:20:09,510
now, I'm in my folder
right, CS50 over here.

445
00:20:09,510 --> 00:20:12,300
It says ESL Ubuntu and WSL Ubuntu.

446
00:20:12,300 --> 00:20:15,840
And actually, at my terminal,
if I move myself again,

447
00:20:15,840 --> 00:20:17,610
we're going to see now I'm in CS50.

448
00:20:17,610 --> 00:20:18,180
Right?

449
00:20:18,180 --> 00:20:21,240
If I ls, I can see my folders.

450
00:20:21,240 --> 00:20:26,940
If I wanted to work in C, I would
cd into C. Let's just clear.

451
00:20:26,940 --> 00:20:28,990
Show my folders here again.

452
00:20:28,990 --> 00:20:31,230
So I have my makefile and hello.c.

453
00:20:31,230 --> 00:20:32,550
And now, I'm in business.

454
00:20:32,550 --> 00:20:37,590
Within in Linux I'm running
an Ubuntu system or a system,

455
00:20:37,590 --> 00:20:40,150
but I'm working in my Windows files.

456
00:20:40,150 --> 00:20:43,950
So now, if I wanted to make this code,
I might want to use a C compiler.

457
00:20:43,950 --> 00:20:45,600
And I'm just going to quickly--

458
00:20:45,600 --> 00:20:47,970
just to make things a little easier--

459
00:20:47,970 --> 00:20:50,370
run this command
prompt_dirtrim, which is

460
00:20:50,370 --> 00:20:56,190
going to shorten how many
folders are visible in my prompt.

461
00:20:56,190 --> 00:20:58,770
And I'm going to try
and run a C compiler.

462
00:20:58,770 --> 00:21:00,670
I want to try and compile this code.

463
00:21:00,670 --> 00:21:04,260
So the C compiler that I'm going
to recommend using is called GCC.

464
00:21:04,260 --> 00:21:07,770
And I'm going to type gcc hello.c -o--

465
00:21:07,770 --> 00:21:09,750
I'm too far on the screen--

466
00:21:09,750 --> 00:21:11,190
and then hello.

467
00:21:11,190 --> 00:21:12,250
OK?

468
00:21:12,250 --> 00:21:14,000
And what this is going
to do is it's going

469
00:21:14,000 --> 00:21:16,550
to try and compile that
file, hello.c, and it's

470
00:21:16,550 --> 00:21:18,922
going to output the Hello file.

471
00:21:18,922 --> 00:21:22,160
But we're going to find
the GCC is not installed.

472
00:21:22,160 --> 00:21:22,940
OK?

473
00:21:22,940 --> 00:21:24,110
And it's going to give us--

474
00:21:24,110 --> 00:21:27,500
Linux gives us very nice instructions
as how to install these files.

475
00:21:27,500 --> 00:21:31,130
Install sudo apt install gcc.

476
00:21:31,130 --> 00:21:33,710
Just before we do that,
we're going to make sure

477
00:21:33,710 --> 00:21:35,720
that we have everything up to date.

478
00:21:35,720 --> 00:21:39,660
So apt is a package installer
that we're going to use a lot.

479
00:21:39,660 --> 00:21:43,190
And sudo, the sudo command that we're
going to see all over the place today,

480
00:21:43,190 --> 00:21:44,087
is super user do.

481
00:21:44,087 --> 00:21:46,670
It's the equivalent of running
as an administrator on Windows.

482
00:21:46,670 --> 00:21:48,020
It says, I want this done.

483
00:21:48,020 --> 00:21:50,250
Trust me, I know what I'm doing.

484
00:21:50,250 --> 00:21:52,520
And so, we're going to
run this command first.

485
00:21:52,520 --> 00:21:54,260
It's going to say sudo apt update.

486
00:21:54,260 --> 00:21:58,310
And once that's done, it's then
going to run the second half, which

487
00:21:58,310 --> 00:21:59,990
is sudo apt upgrade.

488
00:21:59,990 --> 00:22:04,080
Which is going to make sure our
apt tool is nice and up to date.

489
00:22:04,080 --> 00:22:06,510
So we're going to say sudo apt update.

490
00:22:06,510 --> 00:22:08,900
Let me just move the
sidebar to make it clearer.

491
00:22:08,900 --> 00:22:11,210
Let's clear this.

492
00:22:11,210 --> 00:22:11,810
Clear.

493
00:22:11,810 --> 00:22:15,525
Sudo apt update and sudo apt upgrade.

494
00:22:15,525 --> 00:22:17,650
You can run these as separate
commands if you like.

495
00:22:17,650 --> 00:22:19,200
I'm just going to do them all in one.

496
00:22:19,200 --> 00:22:21,858
Hit Enter, and it's going
to ask you for a password

497
00:22:21,858 --> 00:22:23,650
because you're running
as an administrator.

498
00:22:23,650 --> 00:22:27,548
So let's put in the password-- cs50.

499
00:22:27,548 --> 00:22:30,090
And we're going to see it's
going to do a whole lot of stuff.

500
00:22:30,090 --> 00:22:33,810
And I'll put myself back here
briefly while it's running.

501
00:22:33,810 --> 00:22:37,710
And here, it's going to ask, are you
sure you want to download all this?

502
00:22:37,710 --> 00:22:40,650
91.4 megabytes is not a whole lot.

503
00:22:40,650 --> 00:22:42,100
We have space for that.

504
00:22:42,100 --> 00:22:44,310
So I'm going to hit Y-- type Yes.

505
00:22:44,310 --> 00:22:45,030
OK?

506
00:22:45,030 --> 00:22:45,810
And here it goes.

507
00:22:45,810 --> 00:22:49,080
It's going to install for us.

508
00:22:49,080 --> 00:22:52,275
Waiting for-- hopefully the
wi-fi won't take too long.

509
00:22:52,275 --> 00:22:56,652


510
00:22:56,652 --> 00:22:57,610
And we're almost there.

511
00:22:57,610 --> 00:23:00,670


512
00:23:00,670 --> 00:23:04,045
Leave myself out for the
fireworks-- the nice progress bar.

513
00:23:04,045 --> 00:23:15,950


514
00:23:15,950 --> 00:23:17,135
And any second.

515
00:23:17,135 --> 00:23:25,110


516
00:23:25,110 --> 00:23:26,100
And we're in.

517
00:23:26,100 --> 00:23:26,730
OK.

518
00:23:26,730 --> 00:23:27,360
Done.

519
00:23:27,360 --> 00:23:28,680
Zero added, zero removed.

520
00:23:28,680 --> 00:23:29,430
No red.

521
00:23:29,430 --> 00:23:30,580
No errors.

522
00:23:30,580 --> 00:23:31,080
Cool.

523
00:23:31,080 --> 00:23:32,170
Let's clear that away.

524
00:23:32,170 --> 00:23:36,210
And let's try it again--
gcc hello.c out hello.

525
00:23:36,210 --> 00:23:38,100
And again, it's still not installed.

526
00:23:38,100 --> 00:23:40,440
All I did right there was
install the package manager

527
00:23:40,440 --> 00:23:41,880
or update the package manager.

528
00:23:41,880 --> 00:23:45,420
So we're now going to run this command
it tells me-- sudo apt install and then

529
00:23:45,420 --> 00:23:46,320
gcc.

530
00:23:46,320 --> 00:23:51,960
And this stands for Gnu C
compiler or collective compilers--

531
00:23:51,960 --> 00:23:54,933
the Gnu collective compilers I believe.

532
00:23:54,933 --> 00:23:56,100
And we're going to say, Yes.

533
00:23:56,100 --> 00:23:57,870
I want to install this program.

534
00:23:57,870 --> 00:23:59,530
This is a compiler.

535
00:23:59,530 --> 00:24:01,030
And it's going to do the same thing.

536
00:24:01,030 --> 00:24:05,890
We're going to see this a couple of
times when we try and run apt install.

537
00:24:05,890 --> 00:24:06,970
And there we are.

538
00:24:06,970 --> 00:24:08,260
All done.

539
00:24:08,260 --> 00:24:09,700
Again, if I type clear.

540
00:24:09,700 --> 00:24:13,510
And one final time,
hopefully, I try gcc hello.c.

541
00:24:13,510 --> 00:24:16,250
io stands for out, output.

542
00:24:16,250 --> 00:24:19,550
And this is the name of the
file that I want to put output.

543
00:24:19,550 --> 00:24:21,820
And now I see I got nothing, right?

544
00:24:21,820 --> 00:24:25,090
This is the equivalent
of me running make hello.

545
00:24:25,090 --> 00:24:30,370
But if I run as we would do in
cs50 space, within Codespaces,

546
00:24:30,370 --> 00:24:33,130
if I run ./hello, what do we see?

547
00:24:33,130 --> 00:24:34,180
"hello, world!"

548
00:24:34,180 --> 00:24:35,600
Right?

549
00:24:35,600 --> 00:24:39,740
So if I now go look at the C and I
hit this little refresh button for it

550
00:24:39,740 --> 00:24:42,170
to show up, now you can see
this is the compiled file.

551
00:24:42,170 --> 00:24:44,750
And now I have a C compiler
ready to go, right?

552
00:24:44,750 --> 00:24:48,090
I was able to compile this file--

553
00:24:48,090 --> 00:24:51,840
not for now-- and be able
to printf "hello, world!"

554
00:24:51,840 --> 00:24:52,680
Cool.

555
00:24:52,680 --> 00:24:56,670
But that's not how I originally
was compiling code on CS50, right?

556
00:24:56,670 --> 00:24:58,770
I was using make-- make hello.

557
00:24:58,770 --> 00:25:01,950
And the tool to use that
is behind the scenes

558
00:25:01,950 --> 00:25:03,330
we're running a makefile for you.

559
00:25:03,330 --> 00:25:04,560
What is a makefile?

560
00:25:04,560 --> 00:25:08,700
It's a handy little tool
to compile code for you.

561
00:25:08,700 --> 00:25:10,930
And I have an example here.

562
00:25:10,930 --> 00:25:13,710
Let's zoom out a little bit,
just so I can see everything.

563
00:25:13,710 --> 00:25:16,470
And this is something
close to the compiler--

564
00:25:16,470 --> 00:25:18,540
sorry, the makefile
that we have for CS50.

565
00:25:18,540 --> 00:25:21,930
What it does is it says, what's the
C compiler that I'm going to use?

566
00:25:21,930 --> 00:25:23,160
GCC.

567
00:25:23,160 --> 00:25:24,360
Give it some flags.

568
00:25:24,360 --> 00:25:26,250
I've only put in a couple of flags.

569
00:25:26,250 --> 00:25:28,950
But this will tell you
any options for how

570
00:25:28,950 --> 00:25:33,630
you want to compile your code
and then some compilation rules.

571
00:25:33,630 --> 00:25:35,400
This is going to look very cryptic.

572
00:25:35,400 --> 00:25:39,480
I can post this file afterwards online
if you want to do something like this,

573
00:25:39,480 --> 00:25:42,660
or you can find your own
makefiles online or make your own.

574
00:25:42,660 --> 00:25:45,300
And what this says is the
target-- if I run make

575
00:25:45,300 --> 00:25:50,160
and then some word like hello, it's
going to look for that target hello.c.

576
00:25:50,160 --> 00:25:53,460
It's going to run the
compiler with some flags.

577
00:25:53,460 --> 00:25:56,710
The output should just be
the name of the target.

578
00:25:56,710 --> 00:25:58,860
The target was .c.

579
00:25:58,860 --> 00:26:01,710
After -o, there's no .c.

580
00:26:01,710 --> 00:26:03,990
It just wants to target out.

581
00:26:03,990 --> 00:26:05,770
Essentially, that's what's going on.

582
00:26:05,770 --> 00:26:10,710
So if I now try this, if I say make
hello, we're going to see that, damn,

583
00:26:10,710 --> 00:26:11,730
not installed again.

584
00:26:11,730 --> 00:26:12,450
Right?

585
00:26:12,450 --> 00:26:14,250
But that's OK, another easy fix.

586
00:26:14,250 --> 00:26:18,290
Sudo apt install and then make.

587
00:26:18,290 --> 00:26:20,900
It happened almost instantly.

588
00:26:20,900 --> 00:26:25,590
Now, if I try to make hello,
"hello" is already up to date.

589
00:26:25,590 --> 00:26:26,430
Whoopsie.

590
00:26:26,430 --> 00:26:31,690
Let me just delete this file
just to give an example.

591
00:26:31,690 --> 00:26:33,730
Make hello.

592
00:26:33,730 --> 00:26:36,400
We're going to see, it's run gcc.

593
00:26:36,400 --> 00:26:37,990
That's the command it's run.

594
00:26:37,990 --> 00:26:41,830
And if I run ./hello
again, "hello, world!"

595
00:26:41,830 --> 00:26:42,580
Yeah?

596
00:26:42,580 --> 00:26:45,340
So now, I have a makefile
root of compiling,

597
00:26:45,340 --> 00:26:48,630
or I can just compile
by myself using GCC.

598
00:26:48,630 --> 00:26:49,470
Cool.

599
00:26:49,470 --> 00:26:51,900
So that's basically a compilation
for first half of the course, right?

600
00:26:51,900 --> 00:26:54,400
Everything we've done in C.
Looks like we're up in business.

601
00:26:54,400 --> 00:26:57,300
But let's talk about the rest, right?

602
00:26:57,300 --> 00:26:58,995
So we've made these couple of steps.

603
00:26:58,995 --> 00:27:01,560


604
00:27:01,560 --> 00:27:05,570
When you install WSL, it probably
installed this WSL extension for you.

605
00:27:05,570 --> 00:27:12,320
If it didn't, I would just make sure
you have the [? WSL ?] installed--

606
00:27:12,320 --> 00:27:12,980
extension.

607
00:27:12,980 --> 00:27:17,220
So to install an extension, you
go to this part of the sidebar.

608
00:27:17,220 --> 00:27:19,250
It's the three blocks
with an extra block.

609
00:27:19,250 --> 00:27:21,440
Search for the extension
the one to install.

610
00:27:21,440 --> 00:27:22,490
Type WSL.

611
00:27:22,490 --> 00:27:24,630
And then, if I just pick
another one, for example,

612
00:27:24,630 --> 00:27:25,922
you'll see this Install button.

613
00:27:25,922 --> 00:27:27,380
And just hit this Install.

614
00:27:27,380 --> 00:27:29,072
So this was already installed for me.

615
00:27:29,072 --> 00:27:31,280
I think I might have gotten
a little bit lucky there.

616
00:27:31,280 --> 00:27:33,975
If it didn't, install that for yourself.

617
00:27:33,975 --> 00:27:34,475
OK?

618
00:27:34,475 --> 00:27:37,780


619
00:27:37,780 --> 00:27:42,450
OK, next.

620
00:27:42,450 --> 00:27:44,033
So we're a little bit ahead of slides.

621
00:27:44,033 --> 00:27:46,658
There are a couple of things that
are already installed for us.

622
00:27:46,658 --> 00:27:47,160
OK?

623
00:27:47,160 --> 00:27:49,860
So I didn't even have to try and run--

624
00:27:49,860 --> 00:27:51,840
I didn't have to sudo apt install this.

625
00:27:51,840 --> 00:27:55,150
Python 3 and Git are already
going to be installed for us.

626
00:27:55,150 --> 00:27:57,270
So if I type python3 here--

627
00:27:57,270 --> 00:28:02,070
let's move myself again,
and let's get rid of this--

628
00:28:02,070 --> 00:28:05,210


629
00:28:05,210 --> 00:28:07,940
we see that I have a Python
interpreter already good to go.

630
00:28:07,940 --> 00:28:10,790
Python 3.10.12.

631
00:28:10,790 --> 00:28:17,450
And if I say x equals 12, and
let's print x, we print 12.

632
00:28:17,450 --> 00:28:18,110
OK?

633
00:28:18,110 --> 00:28:20,820
So that's already set up
for us, which is nice.

634
00:28:20,820 --> 00:28:24,920
I'm going to hit Control-D to get
out of the Python interpreter.

635
00:28:24,920 --> 00:28:26,300
And then, also, git.

636
00:28:26,300 --> 00:28:30,360
If I try and type git, and
then let's say git status,

637
00:28:30,360 --> 00:28:31,650
it's going to say fatal--

638
00:28:31,650 --> 00:28:32,880
not a git repository.

639
00:28:32,880 --> 00:28:35,010
But it's actually working, right?

640
00:28:35,010 --> 00:28:37,410
It's recognizing that I'm
not within a git repo.

641
00:28:37,410 --> 00:28:40,620
I could just try it like
git --version, and it's

642
00:28:40,620 --> 00:28:42,963
going to tell me which version
of git I have installed.

643
00:28:42,963 --> 00:28:45,630
And so, like I said, I'm not going
to go too much into Git here.

644
00:28:45,630 --> 00:28:47,070
That's for this afternoon's talk.

645
00:28:47,070 --> 00:28:50,200
But it's nice that it's
already set up for us.

646
00:28:50,200 --> 00:28:52,980
Some of you may be thinking, Python 3?

647
00:28:52,980 --> 00:28:56,175
If I want to run Python 3,
you saw this at the top.

648
00:28:56,175 --> 00:28:58,830
It said Python 3.10.12.

649
00:28:58,830 --> 00:29:00,870
It's not the most up-to-date version.

650
00:29:00,870 --> 00:29:03,990
There is Python 3.12, which is
currently the latest version.

651
00:29:03,990 --> 00:29:07,930
And 3.13, I think, is coming out in
January is the estimated timeline.

652
00:29:07,930 --> 00:29:09,810
These tend to lag a little bit behind.

653
00:29:09,810 --> 00:29:12,870
If you want to install the latest
version, you certainly can.

654
00:29:12,870 --> 00:29:14,670
It's a little tricky at times.

655
00:29:14,670 --> 00:29:17,653
3.12 is a little weird in
terms of compatibility.

656
00:29:17,653 --> 00:29:20,820
But there's actually some benefits to
being on some of these older toolings.

657
00:29:20,820 --> 00:29:24,985
3.10.12, a lot of the packages take
some time to update to later versions.

658
00:29:24,985 --> 00:29:27,360
So especially if you're doing
final projects, [? doing ?]

659
00:29:27,360 --> 00:29:30,250
like machine learning, stuff
like TensorFlow and PyTorch

660
00:29:30,250 --> 00:29:34,180
are classic Python libraries which are
used extensively in machine learning

661
00:29:34,180 --> 00:29:36,460
but are currently not supported by 3.12.

662
00:29:36,460 --> 00:29:40,310
So if you'd like to go beyond
3.10, you're welcome to do that,

663
00:29:40,310 --> 00:29:41,860
and I'm not going to cover that now.

664
00:29:41,860 --> 00:29:46,070
But actually staying in 3.10 is not
the worst idea in the world at all.

665
00:29:46,070 --> 00:29:47,980
OK.

666
00:29:47,980 --> 00:29:52,120
So now, we might think,
OK, let's go cd back back,

667
00:29:52,120 --> 00:29:54,040
and let's go to my birthdays, right?

668
00:29:54,040 --> 00:29:56,500
Maybe I want to run birthdays.

669
00:29:56,500 --> 00:29:59,380
If I look at my file
here, I have this app.py--

670
00:29:59,380 --> 00:30:01,400
same as a normal Flask application.

671
00:30:01,400 --> 00:30:06,837
And if I tried flask run, it's going
to tell me that Flask is not installed.

672
00:30:06,837 --> 00:30:09,170
And there's a couple of things
that we're missing there.

673
00:30:09,170 --> 00:30:13,990
So I'm going to remove my terminal
and show the birthday folder.

674
00:30:13,990 --> 00:30:17,860
So move this app.py.

675
00:30:17,860 --> 00:30:21,280
If you'd like to install,
there's these pop-ups.

676
00:30:21,280 --> 00:30:24,610
Installing the recommended Python
extensions is generally a good idea.

677
00:30:24,610 --> 00:30:26,300
You can hit this Install if you'd like.

678
00:30:26,300 --> 00:30:29,260
I'm just going to ignore it for now.

679
00:30:29,260 --> 00:30:31,090
But we're missing some libraries, right?

680
00:30:31,090 --> 00:30:35,260
CS50 has its own Python library, which
I currently don't have installed.

681
00:30:35,260 --> 00:30:36,610
And also, Flask.

682
00:30:36,610 --> 00:30:37,810
Flask has a bunch of--

683
00:30:37,810 --> 00:30:40,480
[INAUDIBLE] Flask.

684
00:30:40,480 --> 00:30:43,330
There are two Flask libraries
that we're going to want to see.

685
00:30:43,330 --> 00:30:45,590
And let's see how we install those.

686
00:30:45,590 --> 00:30:47,380
So I'm going to clear again.

687
00:30:47,380 --> 00:30:50,980
And to install things, we're
going to use Python's installer.

688
00:30:50,980 --> 00:30:52,420
It's called pip.

689
00:30:52,420 --> 00:30:54,830
Or I'm going to do this.

690
00:30:54,830 --> 00:30:55,970
Pip3.

691
00:30:55,970 --> 00:30:57,860
OK?

692
00:30:57,860 --> 00:31:03,093
And that's not going to work
because that's not installed,

693
00:31:03,093 --> 00:31:04,260
which is a bit of an oopsie.

694
00:31:04,260 --> 00:31:09,060
So let's install sudo
apt install python3-pip.

695
00:31:09,060 --> 00:31:12,720
This is going to be our Python
install Python package manager.

696
00:31:12,720 --> 00:31:17,192
It stands for I think Pip Installs
Programs or something like that.

697
00:31:17,192 --> 00:31:18,900
So it's a nice recursive
definition where

698
00:31:18,900 --> 00:31:23,920
PIP is both in the definition
and the definition.

699
00:31:23,920 --> 00:31:27,310
And we're going to run Yes
when I want to install it.

700
00:31:27,310 --> 00:31:35,300


701
00:31:35,300 --> 00:31:36,480
And we should be all set.

702
00:31:36,480 --> 00:31:42,070
So now, if I type pip3, we can see
it gives me a bunch of commands.

703
00:31:42,070 --> 00:31:43,240
OK.

704
00:31:43,240 --> 00:31:46,830
So let's go back to my slides briefly.

705
00:31:46,830 --> 00:31:50,520
So we've already set up
GCC and make, but there

706
00:31:50,520 --> 00:31:53,670
are things that we're missing
like Flask and HTTP Server.

707
00:31:53,670 --> 00:31:57,510
So we've already done these two.

708
00:31:57,510 --> 00:31:58,620
I haven't done SQlite 3.

709
00:31:58,620 --> 00:32:00,970
Let's just handle that quickly.

710
00:32:00,970 --> 00:32:04,440
So I want to install SQLite 3--

711
00:32:04,440 --> 00:32:07,020
same thing, sudo apt
install and sqlite3.

712
00:32:07,020 --> 00:32:10,610


713
00:32:10,610 --> 00:32:12,500
That was done super quickly.

714
00:32:12,500 --> 00:32:15,740
I'm within birthdays, so
I have this birthdays.db.

715
00:32:15,740 --> 00:32:19,820
So let's do sqlite3 birthdays.db.

716
00:32:19,820 --> 00:32:22,070
And we're going to see, we're
back in business, right?

717
00:32:22,070 --> 00:32:26,540
I can do anything that I could do
in the CS50 environment. .schema,

718
00:32:26,540 --> 00:32:31,580
or if I wanted to select everything
from the table from birthdays--

719
00:32:31,580 --> 00:32:35,060
typo from me-- then we
see we have everything.

720
00:32:35,060 --> 00:32:36,940
Good to go.

721
00:32:36,940 --> 00:32:39,404
Cool.

722
00:32:39,404 --> 00:32:41,950
I'll just show that
come on quickly again.

723
00:32:41,950 --> 00:32:45,990
So it was sudo apt install sqlite3.

724
00:32:45,990 --> 00:32:50,700
Again, I'll be sharing all the
slides for this afterwards.

725
00:32:50,700 --> 00:32:53,300
But this is how we're going
to install Python packages.

726
00:32:53,300 --> 00:32:56,270
We're going to use pip3,
Python's package installer.

727
00:32:56,270 --> 00:32:59,510
So these are the three packages
you're going to need for the--

728
00:32:59,510 --> 00:33:01,340
well, at least for the p sets for CS50.

729
00:33:01,340 --> 00:33:03,410
And if you want to use
other packages, you

730
00:33:03,410 --> 00:33:06,980
might want to find tools online
that you want to install via pip.

731
00:33:06,980 --> 00:33:09,510
So we're going to run these commands.

732
00:33:09,510 --> 00:33:12,170
So the first one-- let's
clear my console again--

733
00:33:12,170 --> 00:33:15,300
is going to be pip3
install and then cs50.

734
00:33:15,300 --> 00:33:15,800
Right?

735
00:33:15,800 --> 00:33:18,950
This is going to install
the CS50 packages.

736
00:33:18,950 --> 00:33:23,560
And we're going to see that
a lot of installing for us.

737
00:33:23,560 --> 00:33:24,850
Clear it away.

738
00:33:24,850 --> 00:33:26,192
Let's return to my slides.

739
00:33:26,192 --> 00:33:27,400
And we want to install Flask.

740
00:33:27,400 --> 00:33:33,310
And then flask_session, this is
basically a sublibrary of Flask.

741
00:33:33,310 --> 00:33:34,960
It's going to be used in--

742
00:33:34,960 --> 00:33:38,380
if you have done the finance p set
already or you're starting on it now,

743
00:33:38,380 --> 00:33:42,820
this is what we can use to track
session information about users.

744
00:33:42,820 --> 00:33:47,710
So let's do pip3 install and then flask.

745
00:33:47,710 --> 00:33:50,500
Already has Flask
installed for me, which is,

746
00:33:50,500 --> 00:33:54,290
I think, possibly a product
of me messing around earlier.

747
00:33:54,290 --> 00:33:59,740
But if it's not already installed for
you, which it probably shouldn't be,

748
00:33:59,740 --> 00:34:03,520
you'll get exactly the same string
of text saying stuff is installing.

749
00:34:03,520 --> 00:34:08,510
And then hopefully no red error
messages, and you should be good to go.

750
00:34:08,510 --> 00:34:09,010
OK.

751
00:34:09,010 --> 00:34:15,620
I did the same thing-- pip3
install flask_session up here.

752
00:34:15,620 --> 00:34:16,940
OK.

753
00:34:16,940 --> 00:34:21,110
So if I try and run flask run here,
there might be one final hurdle.

754
00:34:21,110 --> 00:34:26,940
It's going to say it actually wants
the installation from apt as well.

755
00:34:26,940 --> 00:34:28,520
So you might need both to run this.

756
00:34:28,520 --> 00:34:30,290
This was not always true.

757
00:34:30,290 --> 00:34:32,389
But I'm just going to
do exactly what it tells

758
00:34:32,389 --> 00:34:36,620
me-- sudo apt Install python3-flash.

759
00:34:36,620 --> 00:34:38,254
And yes, I want to install that.

760
00:34:38,254 --> 00:34:40,980


761
00:34:40,980 --> 00:34:42,750
Nice and fast.

762
00:34:42,750 --> 00:34:48,150
And now, if I run flask run, we're
going to see the nice WARNING

763
00:34:48,150 --> 00:34:50,040
that we've had so many times before.

764
00:34:50,040 --> 00:34:51,280
This is a development server.

765
00:34:51,280 --> 00:34:52,500
Do not use it in production.

766
00:34:52,500 --> 00:34:55,020
But if I click this,
we're going to see I

767
00:34:55,020 --> 00:34:58,930
have the beginning of the
birthdays problem set from week 9.

768
00:34:58,930 --> 00:35:00,180
And now, we're up and running.

769
00:35:00,180 --> 00:35:01,222
We have C up and running.

770
00:35:01,222 --> 00:35:02,850
We have SQL up and running.

771
00:35:02,850 --> 00:35:06,060
We have some maketools if you want
to compile using the make command

772
00:35:06,060 --> 00:35:08,280
like we had in the
Codespace environment.

773
00:35:08,280 --> 00:35:10,040
We're almost there, right?

774
00:35:10,040 --> 00:35:11,790
I think the only thing
I haven't shown you

775
00:35:11,790 --> 00:35:15,510
so far, in terms of being able to
run the p sets, is our old friend

776
00:35:15,510 --> 00:35:17,440
HTTP Server.

777
00:35:17,440 --> 00:35:23,730
So if I wanted to just go back,
and I think I had this home page.

778
00:35:23,730 --> 00:35:25,370
Let's just clear.

779
00:35:25,370 --> 00:35:28,460
I have an index.html
and styles.css, right?

780
00:35:28,460 --> 00:35:33,630
I would have wanted to be
able to run http-server,

781
00:35:33,630 --> 00:35:34,895
but it says command not found.

782
00:35:34,895 --> 00:35:37,020
And it didn't even give me
up nice install message.

783
00:35:37,020 --> 00:35:41,250
That's because HTTP Server is
generally not installed via apt.

784
00:35:41,250 --> 00:35:42,840
Normally installed via node--

785
00:35:42,840 --> 00:35:44,670
Nodejs.

786
00:35:44,670 --> 00:35:48,135
Carter's previous talk, I
think in 2019, can cover this.

787
00:35:48,135 --> 00:35:50,010
But I'm going to suggest
a different version.

788
00:35:50,010 --> 00:35:52,260
We are benefiting that
we are in VSCode, and it

789
00:35:52,260 --> 00:35:54,000
has some really nice tools for us.

790
00:35:54,000 --> 00:36:00,250
And one of those, if we go to the
Extension tab and type live server,

791
00:36:00,250 --> 00:36:02,530
is this live server package.

792
00:36:02,530 --> 00:36:06,010
And if I click on this, it
says a development local server

793
00:36:06,010 --> 00:36:08,870
with live reload for static web pages.

794
00:36:08,870 --> 00:36:15,580
So I'm going to hit Install on this, and
it's going to take just a few seconds.

795
00:36:15,580 --> 00:36:18,700
Everything here should install super
fast except from the original WSL

796
00:36:18,700 --> 00:36:21,610
install and the installation
of the distribution.

797
00:36:21,610 --> 00:36:24,580
And I'm blocking it, but
something new has appeared.

798
00:36:24,580 --> 00:36:25,540
It's hard to spot.

799
00:36:25,540 --> 00:36:28,300
But down in this bottom-right
corner, I have this Go Live button.

800
00:36:28,300 --> 00:36:30,200
Click to Run a Live Server.

801
00:36:30,200 --> 00:36:35,960
So when you're within the
folder you want to run,

802
00:36:35,960 --> 00:36:39,367
I'm going to hit this Go Live button.

803
00:36:39,367 --> 00:36:40,950
And it's going to say Open in Browser.

804
00:36:40,950 --> 00:36:42,370
The application is now running.

805
00:36:42,370 --> 00:36:43,720
So I Open in Browser.

806
00:36:43,720 --> 00:36:45,930
It's going to show me my folders, right?

807
00:36:45,930 --> 00:36:47,920
And I want to run in the home page.

808
00:36:47,920 --> 00:36:49,050
So I go to Home page.

809
00:36:49,050 --> 00:36:50,820
It's going to tell me,
wow, that was easy!

810
00:36:50,820 --> 00:36:52,500
Right?

811
00:36:52,500 --> 00:37:00,090
Because if we look at my HTML page,
homepage, index, what do we see?

812
00:37:00,090 --> 00:37:03,210
Header-- Wow, that was easy.

813
00:37:03,210 --> 00:37:05,580
And that is now just
rendering as a page.

814
00:37:05,580 --> 00:37:09,047
And you can see me being a little
worried that this wasn't going to work.

815
00:37:09,047 --> 00:37:10,380
Filming live is a little tricky.

816
00:37:10,380 --> 00:37:13,590
But so far, no major hiccups I think.

817
00:37:13,590 --> 00:37:15,180
Which is good.

818
00:37:15,180 --> 00:37:19,650
And now, we have basically everything
from any CS50 p set you can now run,

819
00:37:19,650 --> 00:37:23,610
and it's been up and running in
about 25-30 minutes, hopefully.

820
00:37:23,610 --> 00:37:26,520
I'm going to show you a
brief another tool that

821
00:37:26,520 --> 00:37:28,740
is now useful for your final project.

822
00:37:28,740 --> 00:37:31,410
There's a tool called Emmet.

823
00:37:31,410 --> 00:37:32,610
I realize I'm disappearing.

824
00:37:32,610 --> 00:37:36,000
There's a tool called Emmet which
is useful for writing HTML fast.

825
00:37:36,000 --> 00:37:38,610
There's a really good Emmet cheat sheet.

826
00:37:38,610 --> 00:37:43,320
If you Google Emmet cheat sheet.

827
00:37:43,320 --> 00:37:44,550
Oh, I can't spell--

828
00:37:44,550 --> 00:37:47,570
cheat sheet.

829
00:37:47,570 --> 00:37:49,130
And it looks something like this.

830
00:37:49,130 --> 00:37:52,430
It looks about what you'd expect
a computer science cheat sheet

831
00:37:52,430 --> 00:37:53,312
to look like.

832
00:37:53,312 --> 00:37:56,270
Again, I can share this in the chat--
or if [INAUDIBLE] or Carter wants

833
00:37:56,270 --> 00:37:57,710
to share this in the chat.

834
00:37:57,710 --> 00:38:00,570
But this is a tool that's actually
built into VSCode for you.

835
00:38:00,570 --> 00:38:03,413
And it allows you to
write HTML really fast.

836
00:38:03,413 --> 00:38:06,330
Especially if you're doing final
projects, this could be super useful.

837
00:38:06,330 --> 00:38:10,160
So to show you an example, I'm going to
give a quick shout-out to my teaching

838
00:38:10,160 --> 00:38:12,300
fellows here at Harvard.

839
00:38:12,300 --> 00:38:15,050
We have a really great community,
and I'm very proud of the people

840
00:38:15,050 --> 00:38:17,130
that I've been in charge
of as head TF this year.

841
00:38:17,130 --> 00:38:21,350
So I'm going to do ul If
I hit ul and just hit Tab,

842
00:38:21,350 --> 00:38:23,650
it's going to create an
unordered list for me.

843
00:38:23,650 --> 00:38:25,650
But I want to go a little
bit further than that.

844
00:38:25,650 --> 00:38:28,310
And then, I can say within
the ul I want something.

845
00:38:28,310 --> 00:38:29,480
I want an li.

846
00:38:29,480 --> 00:38:32,452
So I'm going to have this less than or--

847
00:38:32,452 --> 00:38:34,160
sorry, it's a greater
than symbol right--

848
00:38:34,160 --> 00:38:36,200
ul greater than symbol and hit Tab.

849
00:38:36,200 --> 00:38:39,050
That would create a ul
and then an li within.

850
00:38:39,050 --> 00:38:41,110
Go back one more step.

851
00:38:41,110 --> 00:38:43,900
I can also give them ids
and classes within this.

852
00:38:43,900 --> 00:38:49,280
When I gave something a class
within CSS, I had the dot syntax.

853
00:38:49,280 --> 00:38:52,030
And I'm going to say that my staff,
the people I've been teaching,

854
00:38:52,030 --> 00:38:53,780
have been really awesome this semester.

855
00:38:53,780 --> 00:38:57,250
Awesome-staff is going to be the
class I'm going to give to them.

856
00:38:57,250 --> 00:38:59,150
And I'm going to make seven of them.

857
00:38:59,150 --> 00:39:00,910
And I believe my cohort is seven people.

858
00:39:00,910 --> 00:39:03,780
And if I hit Tab, we're
going to see that I

859
00:39:03,780 --> 00:39:06,330
get a ul with a bunch of awesome staff.

860
00:39:06,330 --> 00:39:08,880
And just as a nice quick
shout-out to you guys,

861
00:39:08,880 --> 00:39:11,220
I'm going to put in your names.

862
00:39:11,220 --> 00:39:16,590
I'm going to say thank you to these
guys for having a really good semester.

863
00:39:16,590 --> 00:39:19,320
Let's try and make sure I get everyone.

864
00:39:19,320 --> 00:39:26,200
Matthew, Isabel, Sedik.

865
00:39:26,200 --> 00:39:29,290
And if I save this and look at my page--

866
00:39:29,290 --> 00:39:31,030
I had to restart.

867
00:39:31,030 --> 00:39:33,140
What are we going to see?

868
00:39:33,140 --> 00:39:34,580
There we have all their names.

869
00:39:34,580 --> 00:39:35,880
Not quite as big as I like it.

870
00:39:35,880 --> 00:39:38,060
I'll give you a little zoom, guys.

871
00:39:38,060 --> 00:39:38,720
Right?

872
00:39:38,720 --> 00:39:39,890
I didn't have to refresh.

873
00:39:39,890 --> 00:39:41,348
I didn't have to restart my server.

874
00:39:41,348 --> 00:39:45,320
It is a live server,
just like HTTP Server.

875
00:39:45,320 --> 00:39:47,950
Cool.

876
00:39:47,950 --> 00:39:52,600
Now, a couple of final extensions
and useful bits and pieces.

877
00:39:52,600 --> 00:39:55,600
One of them that I really recommend
is, along with live server,

878
00:39:55,600 --> 00:39:58,720
there's a tool called Live Share.

879
00:39:58,720 --> 00:40:00,770
And we're going to go here--

880
00:40:00,770 --> 00:40:05,900
same place, search in your extensions,
Live Share, and hit Install.

881
00:40:05,900 --> 00:40:09,080
And what that's going to do is allow
us to have real-time code sharing.

882
00:40:09,080 --> 00:40:11,362
If you want to work on your
project with someone else,

883
00:40:11,362 --> 00:40:13,070
you can see exactly
where you're working.

884
00:40:13,070 --> 00:40:15,540
And you can work on the
same file at the same time.

885
00:40:15,540 --> 00:40:17,967
So I have this installed,
and I've been told--

886
00:40:17,967 --> 00:40:20,300
and hopefully I'm right--
that Carter has this installed

887
00:40:20,300 --> 00:40:22,200
as well, over to my left somewhere.

888
00:40:22,200 --> 00:40:24,650
And now what I'm going to do--

889
00:40:24,650 --> 00:40:27,260
there's now this Live Share tab, right?

890
00:40:27,260 --> 00:40:30,613
So if I hit this Live Share, I want
to start a live sharing session.

891
00:40:30,613 --> 00:40:31,280
I want to work--

892
00:40:31,280 --> 00:40:33,170
Carter wants to work on
my code at the same time.

893
00:40:33,170 --> 00:40:34,820
Maybe we're in the
same room, but we want

894
00:40:34,820 --> 00:40:36,570
to work on different
parts of the project.

895
00:40:36,570 --> 00:40:40,850
Maybe at the CS50 Hackathon, maybe
just working together while on a call.

896
00:40:40,850 --> 00:40:43,760
I'm going to create this
new sharing session.

897
00:40:43,760 --> 00:40:44,870
OK.

898
00:40:44,870 --> 00:40:47,630
And what I'm going to do is I'm
going to hit Invite participants.

899
00:40:47,630 --> 00:40:47,930
Right?

900
00:40:47,930 --> 00:40:49,730
I want someone else
to come along with me.

901
00:40:49,730 --> 00:40:52,310
It says Invite link copied to clipboard.

902
00:40:52,310 --> 00:40:54,050
What I'm going to very quickly do--

903
00:40:54,050 --> 00:40:58,480
I'm going to send it to Carter@cs50.

904
00:40:58,480 --> 00:40:59,555
Carter, are you with me?

905
00:40:59,555 --> 00:41:00,680
CARTER ZENKE: I'm with you.

906
00:41:00,680 --> 00:41:02,200
ANDREW HOLMES: Excellent.

907
00:41:02,200 --> 00:41:03,880
There's a Live Share link for him.

908
00:41:03,880 --> 00:41:07,120


909
00:41:07,120 --> 00:41:10,160
And when he joins, hopefully we're
going to see, over on the left,

910
00:41:10,160 --> 00:41:14,140
we're going to have our participants
is going to bump up to one.

911
00:41:14,140 --> 00:41:17,003
And it's also going to see,
just while I'm waiting for that,

912
00:41:17,003 --> 00:41:18,670
that we actually have a shared terminal.

913
00:41:18,670 --> 00:41:21,940
We can also not only share writing
files, but when we're in the terminal,

914
00:41:21,940 --> 00:41:24,700
we can see what each other is writing.

915
00:41:24,700 --> 00:41:26,460
OK.

916
00:41:26,460 --> 00:41:28,230
So even before he's joined--

917
00:41:28,230 --> 00:41:30,780
I think he's still working
on finding the link--

918
00:41:30,780 --> 00:41:34,240
is you're now going to notice
that to facilitate discussion

919
00:41:34,240 --> 00:41:36,472
and working on things
collaboratively, there

920
00:41:36,472 --> 00:41:39,180
are now this button on the left
where I can say Start discussion.

921
00:41:39,180 --> 00:41:40,770
And I can create a comment thread.

922
00:41:40,770 --> 00:41:43,950
And we just saw, Carter has just
joined on the left, which is cool.

923
00:41:43,950 --> 00:41:48,890
And so, I can say, Hey, Carter.

924
00:41:48,890 --> 00:41:50,885
Aren't my staff great?

925
00:41:50,885 --> 00:41:54,550


926
00:41:54,550 --> 00:41:58,667
You can see-- oops.

927
00:41:58,667 --> 00:42:01,500
So now, you'll see there's this
comment for him that he can look at.

928
00:42:01,500 --> 00:42:02,950
But also, he can write some code for me.

929
00:42:02,950 --> 00:42:04,770
Carter, do you want to
add anyone to that style

930
00:42:04,770 --> 00:42:06,395
that you'd like to shout-out this year?

931
00:42:06,395 --> 00:42:10,215


932
00:42:10,215 --> 00:42:10,965
Let's move myself.

933
00:42:10,965 --> 00:42:17,800


934
00:42:17,800 --> 00:42:20,620
A very deserving shout-out to
Yulia, one of our new staff

935
00:42:20,620 --> 00:42:26,410
members here behind the scenes-- one
of our preceptors who's been amazing.

936
00:42:26,410 --> 00:42:29,845
And so, now, you can
see, this is now Carter.

937
00:42:29,845 --> 00:42:30,910
He can see my cursor.

938
00:42:30,910 --> 00:42:32,140
I can see his cursor.

939
00:42:32,140 --> 00:42:34,180
If Carter typed in the
terminal, I could also

940
00:42:34,180 --> 00:42:38,050
see what he was doing in the terminal.

941
00:42:38,050 --> 00:42:39,400
But that's rarely used.

942
00:42:39,400 --> 00:42:40,870
You'd rather just work separately.

943
00:42:40,870 --> 00:42:42,727
But we can work side by side.

944
00:42:42,727 --> 00:42:44,560
So I'm going to write
one more staff member.

945
00:42:44,560 --> 00:42:46,880
Carter, do you want to
write one beneath me?

946
00:42:46,880 --> 00:42:52,540
So I'm going to do li.awesome-staff,
and I'm going to shout out a previous

947
00:42:52,540 --> 00:42:53,800
member of staff, Phyllis.

948
00:42:53,800 --> 00:42:56,680


949
00:42:56,680 --> 00:42:59,620
And perhaps one more--

950
00:42:59,620 --> 00:43:01,720
we're going to shout out Ashley.

951
00:43:01,720 --> 00:43:05,140
As you can see, we're both writing
code simultaneously in the same file

952
00:43:05,140 --> 00:43:06,310
and able to collaborate.

953
00:43:06,310 --> 00:43:10,950
If I look at my live server,
which is still running,

954
00:43:10,950 --> 00:43:13,280
we see that I now have
a full, updated list

955
00:43:13,280 --> 00:43:15,050
of people we all wanted to shout-out.

956
00:43:15,050 --> 00:43:19,920
Phyllis, Ashley, Brian, and Yulia are
all people we've just added together.

957
00:43:19,920 --> 00:43:21,403
Cool.

958
00:43:21,403 --> 00:43:22,320
So that's super great.

959
00:43:22,320 --> 00:43:24,060
Carter, maybe you'd
like to leave a comment.

960
00:43:24,060 --> 00:43:25,435
Or did you add a comment to mine?

961
00:43:25,435 --> 00:43:27,000
CARTER ZENKE: Yeah, [INAUDIBLE].

962
00:43:27,000 --> 00:43:29,720
ANDREW HOLMES: Sure.

963
00:43:29,720 --> 00:43:33,470
Just to show some of
the added functionality.

964
00:43:33,470 --> 00:43:35,790
Carter just added a comment down here.

965
00:43:35,790 --> 00:43:37,050
Nice list of staff.

966
00:43:37,050 --> 00:43:37,902
Very good.

967
00:43:37,902 --> 00:43:40,110
So this can be super useful
when you're collaborating

968
00:43:40,110 --> 00:43:42,780
on your final project with
a partner or just working

969
00:43:42,780 --> 00:43:45,150
in future your classes,
future endeavors.

970
00:43:45,150 --> 00:43:47,110
Live Share is a great tool.

971
00:43:47,110 --> 00:43:50,920
In terms of when Carter leaves
the session, I also as the host

972
00:43:50,920 --> 00:43:52,270
can kick him off I believe.

973
00:43:52,270 --> 00:43:53,230
Remove Participant.

974
00:43:53,230 --> 00:43:54,080
Sorry, Carter.

975
00:43:54,080 --> 00:43:55,460
Hate to do this to you.

976
00:43:55,460 --> 00:43:57,455
But now that I've removed
Carter, maybe we're

977
00:43:57,455 --> 00:44:00,580
working together in the same place,
maybe we're at the Hackathon, wherever,

978
00:44:00,580 --> 00:44:03,020
but I was the one holding the session.

979
00:44:03,020 --> 00:44:05,800
It was my code, and the code
is only saved locally to me.

980
00:44:05,800 --> 00:44:08,290
So now, when Carter
has left the session,

981
00:44:08,290 --> 00:44:12,260
we're no longer working side by side,
he does not have access to the code.

982
00:44:12,260 --> 00:44:14,650
And that's really where Git comes in.

983
00:44:14,650 --> 00:44:19,180
Git is a useful tool, and especially
Git in relation to GitHub.

984
00:44:19,180 --> 00:44:21,180
You can send and upload code.

985
00:44:21,180 --> 00:44:22,930
Once you're finished
working on something,

986
00:44:22,930 --> 00:44:26,350
once you've implemented something, push
it to the server, push it to GitHub.

987
00:44:26,350 --> 00:44:28,093
And then your user-- another user--

988
00:44:28,093 --> 00:44:30,760
your friend, your group project,
they can then pull from GitHub.

989
00:44:30,760 --> 00:44:34,210
They can use git pull and bring that
information live onto their computer.

990
00:44:34,210 --> 00:44:37,390
So at the end of a session, you could
both commit the work you've done,

991
00:44:37,390 --> 00:44:40,830
say git push, push it on to the server.

992
00:44:40,830 --> 00:44:43,260
Say I keep working-- my
colleague, my partner,

993
00:44:43,260 --> 00:44:45,750
has gone work to do something else--

994
00:44:45,750 --> 00:44:48,480
I push something else that they
don't have while I was working.

995
00:44:48,480 --> 00:44:51,030
Then when they log back in,
before they start working again,

996
00:44:51,030 --> 00:44:52,530
they get your live, updated changes.

997
00:44:52,530 --> 00:44:54,572
They say git pull, they
have all the information,

998
00:44:54,572 --> 00:44:55,738
and then they're good to go.

999
00:44:55,738 --> 00:44:57,550
They have everything
that you've just done.

1000
00:44:57,550 --> 00:45:02,460
So using these two tools in
tandem, Live Server and GitHub,

1001
00:45:02,460 --> 00:45:06,600
is super useful for working
in collaboration on projects.

1002
00:45:06,600 --> 00:45:08,700
I think that's about me done.

1003
00:45:08,700 --> 00:45:11,880
I'm just going to check that
there's nothing else that I missed.

1004
00:45:11,880 --> 00:45:14,880
I had some other VSCode extensions
you might want to install.

1005
00:45:14,880 --> 00:45:17,850
So when Python popped
up or C popped up, you

1006
00:45:17,850 --> 00:45:22,960
can quite literally search C and
Python for these extensions over here.

1007
00:45:22,960 --> 00:45:24,150
So if I type Python--

1008
00:45:24,150 --> 00:45:25,620
there's just some
toolings for the languages

1009
00:45:25,620 --> 00:45:26,680
that you might want to work in.

1010
00:45:26,680 --> 00:45:28,513
So if you work in any
other languages, these

1011
00:45:28,513 --> 00:45:30,130
are good things to install as well.

1012
00:45:30,130 --> 00:45:34,050
It might just help you with
error messages and debugging.

1013
00:45:34,050 --> 00:45:38,130
And I had one final
one, which is CodeSnap.

1014
00:45:38,130 --> 00:45:42,130
This is the tool that I use to
take screenshots of any of my code.

1015
00:45:42,130 --> 00:45:45,720
So if you like taking screenshots
and having pretty code like this,

1016
00:45:45,720 --> 00:45:51,170
that's a tool called CodeSnap
which you can have a look at.

1017
00:45:51,170 --> 00:45:55,870
But that's not super instrumental
in getting yourself set up,

1018
00:45:55,870 --> 00:45:58,030
which is basically where we are now.

1019
00:45:58,030 --> 00:46:02,380
And in correlation with the talk
this afternoon with Git and GitHub,

1020
00:46:02,380 --> 00:46:05,590
you should be able to work on a final
project together or on other projects

1021
00:46:05,590 --> 00:46:07,680
super effectively.

1022
00:46:07,680 --> 00:46:10,110
So there's a lot more
customization options.

1023
00:46:10,110 --> 00:46:15,290
One of them, I would say, that I
like is having your own macros.

1024
00:46:15,290 --> 00:46:18,817
So for example, some of
these tools are a little--

1025
00:46:18,817 --> 00:46:19,775
let's put myself back--

1026
00:46:19,775 --> 00:46:22,350


1027
00:46:22,350 --> 00:46:26,250
one of my favorite things is if I'm
currently working within the home page,

1028
00:46:26,250 --> 00:46:28,830
like I don't want to see all
these other files whatever,

1029
00:46:28,830 --> 00:46:32,520
then there's this command
code ., which says code here.

1030
00:46:32,520 --> 00:46:34,230
This current location is the dot.

1031
00:46:34,230 --> 00:46:36,460
And then -r stands for replace--

1032
00:46:36,460 --> 00:46:39,300
replace the current working directory.

1033
00:46:39,300 --> 00:46:41,892
And this is going to
open just birthdays.

1034
00:46:41,892 --> 00:46:44,350
Now, you can see on the left,
I'm just in that environment.

1035
00:46:44,350 --> 00:46:45,400
Right?

1036
00:46:45,400 --> 00:46:48,370
That's a lot to remember-- code . -r.

1037
00:46:48,370 --> 00:46:52,140
And sometimes what I do--

1038
00:46:52,140 --> 00:46:55,250
you can edit-- oh, I'm
blocking my own command.

1039
00:46:55,250 --> 00:46:57,410
Let's zoom in.

1040
00:46:57,410 --> 00:46:58,760
Oh, I'm going to prompt--

1041
00:46:58,760 --> 00:47:04,960
prompt dirtrim equals 2 again.

1042
00:47:04,960 --> 00:47:09,020
And I'm going to say code.

1043
00:47:09,020 --> 00:47:10,540
So you're currently running--

1044
00:47:10,540 --> 00:47:12,340
Linux runs in a terminal called Bash.

1045
00:47:12,340 --> 00:47:15,190
This is a bashrc file.

1046
00:47:15,190 --> 00:47:19,000
You just have to remember that this
is at the root and then go to this

1047
00:47:19,000 --> 00:47:19,750
location /.bashrc.

1048
00:47:19,750 --> 00:47:22,350


1049
00:47:22,350 --> 00:47:23,950
Yes, I want to open it.

1050
00:47:23,950 --> 00:47:26,880
This gives you some tools.

1051
00:47:26,880 --> 00:47:29,140
This is how your terminal is configured.

1052
00:47:29,140 --> 00:47:32,820
And one of the things you can
do, which can be useful to you

1053
00:47:32,820 --> 00:47:36,840
if you ever forget commands or
you just have some shorthands,

1054
00:47:36,840 --> 00:47:38,250
is you can write an alias.

1055
00:47:38,250 --> 00:47:42,715
So for me, I have ch
equals and then code . -r.

1056
00:47:42,715 --> 00:47:44,340
This is just one of the aliases I have.

1057
00:47:44,340 --> 00:47:46,000
And Save.

1058
00:47:46,000 --> 00:47:49,660
So what it says is I want the ch
command to then just be replaced,

1059
00:47:49,660 --> 00:47:52,500
and it should just run this.

1060
00:47:52,500 --> 00:47:54,440
So I'm going to do that.

1061
00:47:54,440 --> 00:47:55,730
I finished editing it.

1062
00:47:55,730 --> 00:48:00,650
You're going to want to write
source and the same path bashrc,

1063
00:48:00,650 --> 00:48:03,630
which is just going to say I've
updated this, now reuse it.

1064
00:48:03,630 --> 00:48:06,230
And now, if I went back-- cd dot dot--

1065
00:48:06,230 --> 00:48:08,630
and then I wanted to go
into the C directory.

1066
00:48:08,630 --> 00:48:14,210
Now I want to write some C.
Now, instead of code . -r,

1067
00:48:14,210 --> 00:48:17,677
I'm just going to Control-L.
And I can type ch, code here.

1068
00:48:17,677 --> 00:48:19,010
That's what I have as shorthand.

1069
00:48:19,010 --> 00:48:22,230
Ch Code Here, and it's going
to do exactly what I want.

1070
00:48:22,230 --> 00:48:25,070
So there's all sorts of tools and
information like that you can do.

1071
00:48:25,070 --> 00:48:26,612
Customize it to your heart's content.

1072
00:48:26,612 --> 00:48:29,430


1073
00:48:29,430 --> 00:48:32,690
There's also the side of things where
local development and just pure Windows

1074
00:48:32,690 --> 00:48:35,450
is often still useful,
especially if you want

1075
00:48:35,450 --> 00:48:38,660
to get things-- oh, I'm
definitely blocking my own text.

1076
00:48:38,660 --> 00:48:40,790
If you want to get stuff
done quick and dirty,

1077
00:48:40,790 --> 00:48:43,140
you don't need to boot up
WSL, just want to work,

1078
00:48:43,140 --> 00:48:46,453
especially Python is nice and
easy in Windows, you can do that.

1079
00:48:46,453 --> 00:48:47,870
And then just install other tools.

1080
00:48:47,870 --> 00:48:48,743
Apt is a great tool.

1081
00:48:48,743 --> 00:48:50,660
The internet is a great
tool for anything else

1082
00:48:50,660 --> 00:48:52,965
that you might want to
use for a final project.

1083
00:48:52,965 --> 00:48:55,090
But hopefully now you're
all set up with everything

1084
00:48:55,090 --> 00:48:59,800
that you needed for the final
project or other endeavors.

1085
00:48:59,800 --> 00:49:01,932
Oh, wrong button.

1086
00:49:01,932 --> 00:49:03,640
I think the only thing
I have left to say

1087
00:49:03,640 --> 00:49:07,120
is we're about to go to the final slide,
which is just going to be a Thank you.

1088
00:49:07,120 --> 00:49:10,870
I'll give a shout-out to
the slides that I used.

1089
00:49:10,870 --> 00:49:14,570
I've been using this design for a
while, and my students seem to love it.

1090
00:49:14,570 --> 00:49:17,290
We're going to end up just now.

1091
00:49:17,290 --> 00:49:18,720
Wrong one again.

1092
00:49:18,720 --> 00:49:19,780
Need to hit the button.

1093
00:49:19,780 --> 00:49:22,680
But that's going to be a
wrap for the live community.

1094
00:49:22,680 --> 00:49:25,180
In a second here, we're going
to open up for some questions.

1095
00:49:25,180 --> 00:49:27,183
I think Carter or Yulia
will manage the Zoom.

1096
00:49:27,183 --> 00:49:29,600
But if you're watching the
recording, thank you very much.

1097
00:49:29,600 --> 00:49:30,850
I hope this was useful to you.

1098
00:49:30,850 --> 00:49:34,270
If you're working on Mac, there is the
previous version with [? Rongxin ?]

1099
00:49:34,270 --> 00:49:35,572
and Carter in 2019.

1100
00:49:35,572 --> 00:49:37,780
We'll probably put a link
to that in the description.

1101
00:49:37,780 --> 00:49:39,160
And I'll try and be
in the comments to try

1102
00:49:39,160 --> 00:49:41,680
and answer some useful
questions-- common questions--

1103
00:49:41,680 --> 00:49:42,848
that I can't do here.

1104
00:49:42,848 --> 00:49:44,140
But I think that's all from us.

1105
00:49:44,140 --> 00:49:46,080
Thank you very much.

1106
00:49:46,080 --> 00:49:47,000