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


2
00:00:01,870 --> 00:00:03,370
RONGXIN LIU: Welcome back, everyone.

3
00:00:03,370 --> 00:00:07,620
So for this session, we're going to talk
about VS Code in the cloud with GitHub

4
00:00:07,620 --> 00:00:08,310
Codespaces.

5
00:00:08,310 --> 00:00:12,120
And my name is Rongxin Lu,
and I'm the presenter at CS50.

6
00:00:12,120 --> 00:00:16,560
So before we talk about what
are VS Code in Codespace,

7
00:00:16,560 --> 00:00:19,800
let's just briefly introduce
what's Visual Studio Code.

8
00:00:19,800 --> 00:00:21,870
Many of you are probably
already using it.

9
00:00:21,870 --> 00:00:27,780
Visual Studio Code itself is a
pretty popular source code editor

10
00:00:27,780 --> 00:00:33,390
available on many platforms, such
as Linux, MacOS, and Windows.

11
00:00:33,390 --> 00:00:34,800
So Codespaces.

12
00:00:34,800 --> 00:00:36,450
So then, what is Codespaces?

13
00:00:36,450 --> 00:00:41,010
Codespaces is a VS Code Code editor
backed by Linux virtual machine

14
00:00:41,010 --> 00:00:45,750
running on Microsoft Azure services
and maintained and managed by GitHub.

15
00:00:45,750 --> 00:00:50,430
So Codespaces has the full
power of a VS Code Code editor.

16
00:00:50,430 --> 00:00:55,660
So simply put, you can just think of
it as VS Code running in the cloud.

17
00:00:55,660 --> 00:01:02,130
So Visual Studio Code for CS50 is,
then, a web app at code.cs50.io.

18
00:01:02,130 --> 00:01:04,739
If you want to check it
out, the link's here.

19
00:01:04,739 --> 00:01:09,480
It's an adaptation of Codespaces
for students and teachers.

20
00:01:09,480 --> 00:01:14,850
The goal to create VS Code for CS50
is to standardize all the programming

21
00:01:14,850 --> 00:01:17,310
environments so that
teachers, students, they

22
00:01:17,310 --> 00:01:23,440
are all running in the same IDE with
the exact same programming environment.

23
00:01:23,440 --> 00:01:28,110
So within the browser, it's just a
full-fledged VS Code editor, including

24
00:01:28,110 --> 00:01:33,390
a graphical File Explorer on the
left, a code editor in the top,

25
00:01:33,390 --> 00:01:35,550
and then terminal on below.

26
00:01:35,550 --> 00:01:38,700
The terminal is actually
connected to a Docker container

27
00:01:38,700 --> 00:01:42,630
running our own CS50 Codespace image.

28
00:01:42,630 --> 00:01:45,900
We customized this Docker
image so that it pre-installs

29
00:01:45,900 --> 00:01:51,450
all the necessary software packages,
such as CS50 C library, Python library,

30
00:01:51,450 --> 00:01:55,140
SQLite, HTTP server,
Flask, and all that package

31
00:01:55,140 --> 00:02:00,130
that a student would need to
accomplish their problem set.

32
00:02:00,130 --> 00:02:03,870
So we think this is crucial
for students and teachers

33
00:02:03,870 --> 00:02:06,090
because, especially for
beginners, they don't

34
00:02:06,090 --> 00:02:08,729
need to worry about configuring
all this on their own,

35
00:02:08,729 --> 00:02:10,259
troubleshooting on their end.

36
00:02:10,259 --> 00:02:12,960
They could just open the
browser, connect it to Codespace,

37
00:02:12,960 --> 00:02:16,620
and dive right into the problem set.

38
00:02:16,620 --> 00:02:20,760
And for students who are already
familiar or using VS Code editor,

39
00:02:20,760 --> 00:02:25,680
they could also connect to
their Codespace container right

40
00:02:25,680 --> 00:02:27,060
from the VS Code editor.

41
00:02:27,060 --> 00:02:28,620
And the experience is just seamless.

42
00:02:28,620 --> 00:02:31,640


43
00:02:31,640 --> 00:02:36,290
So now let's talk about what
a Codespace container is,

44
00:02:36,290 --> 00:02:40,220
what's happening underneath the
hood, how this all happened.

45
00:02:40,220 --> 00:02:46,970
So when students visit code.cs50.io,
when they click on that button, what's

46
00:02:46,970 --> 00:02:52,730
happening underneath the hood is,
we will create a devcontainer.json

47
00:02:52,730 --> 00:02:57,140
file, which is a configuration
file we place in the repository

48
00:02:57,140 --> 00:03:03,060
because to launch a codespace, it
requires a backing GitHub repository.

49
00:03:03,060 --> 00:03:06,590
So this is the devcontainer.json
file we are talking about.

50
00:03:06,590 --> 00:03:13,490
As you can see, for example, this is
one of the student's Codespaces' backing

51
00:03:13,490 --> 00:03:14,270
repository.

52
00:03:14,270 --> 00:03:16,410
For example, this is my test account.

53
00:03:16,410 --> 00:03:21,710
And as you can see, there's a
devcontainer.json placed right there.

54
00:03:21,710 --> 00:03:28,100
This file describes the resources
that the codespace would need--

55
00:03:28,100 --> 00:03:32,630
for example, what Docker
image to use, what editor

56
00:03:32,630 --> 00:03:35,300
settings we would like
to apply, and what

57
00:03:35,300 --> 00:03:39,290
extension we want to pre-install for
the Codespaces, and what kind of command

58
00:03:39,290 --> 00:03:43,830
we want to run after the
container is created.

59
00:03:43,830 --> 00:03:48,150
And this is the four
main thing we care when

60
00:03:48,150 --> 00:03:51,060
we create this codespace container.

61
00:03:51,060 --> 00:03:54,750
Here is just an example,
like a shortened version,

62
00:03:54,750 --> 00:03:57,400
of our devcontainer.json file.

63
00:03:57,400 --> 00:04:02,100
It defines the CS50 codespace container.

64
00:04:02,100 --> 00:04:04,170
As you can see, there's
an extension attribute.

65
00:04:04,170 --> 00:04:07,320
For example, we specify we
would like to install a dock

66
00:04:07,320 --> 00:04:10,020
debugger for our codespace container.

67
00:04:10,020 --> 00:04:13,590
We would like to also
install C+ tools, Python,

68
00:04:13,590 --> 00:04:18,149
or other extension that the
codespace container would need.

69
00:04:18,149 --> 00:04:20,700
In the image attribute,
we specify we would

70
00:04:20,700 --> 00:04:25,290
like to use the CS50 codespace
Docker image as the base image

71
00:04:25,290 --> 00:04:26,190
for the container.

72
00:04:26,190 --> 00:04:29,250
And it will also specify what kind
of command we would like to run,

73
00:04:29,250 --> 00:04:32,670
what kind of script we want to run
after the container is started,

74
00:04:32,670 --> 00:04:34,830
and what kind of editor settings.

75
00:04:34,830 --> 00:04:39,630
And I want to point out the
settings attribute specifically.

76
00:04:39,630 --> 00:04:44,190
So as you know the VS Code editor
comes with many powerful features.

77
00:04:44,190 --> 00:04:50,010
But lots of those features, we think
it's not suitable for early beginners

78
00:04:50,010 --> 00:04:55,920
to use-- for example, code
completion, because we

79
00:04:55,920 --> 00:04:59,610
want students to build up their own
muscle memory to write the code.

80
00:04:59,610 --> 00:05:03,120
So we don't want those kind of settings
enabled by default for students,

81
00:05:03,120 --> 00:05:04,690
so we will actually disable them.

82
00:05:04,690 --> 00:05:10,350
There are many, many more settings
we will set in CS50 codespace

83
00:05:10,350 --> 00:05:14,625
so the student will not be
overwhelmed by the editor.

84
00:05:14,625 --> 00:05:18,220


85
00:05:18,220 --> 00:05:22,738
So now, once the student clicks
on Log in via GitHub, the button,

86
00:05:22,738 --> 00:05:24,280
there will be greeted by this screen.

87
00:05:24,280 --> 00:05:29,560
So all this Linux provisioning is
happening underneath the hood--

88
00:05:29,560 --> 00:05:36,310
all the compute resources, all the
image pulling, extracting happening.

89
00:05:36,310 --> 00:05:39,910
So for a new student using
a codespace, it usually

90
00:05:39,910 --> 00:05:42,880
takes about two minutes
for the codespace

91
00:05:42,880 --> 00:05:46,610
to start, mainly because we need
to pull the image and extract it.

92
00:05:46,610 --> 00:05:49,430
So we hope we could improve
this build time in the future.

93
00:05:49,430 --> 00:05:55,010
But right now, this is the case when
the user first using the codespace.

94
00:05:55,010 --> 00:05:59,410
But after the codespace is built
and when student reconnects to it,

95
00:05:59,410 --> 00:06:03,270
it should take about 30 seconds to load.

96
00:06:03,270 --> 00:06:08,730
Now let's just quickly
navigate codespace.

97
00:06:08,730 --> 00:06:11,295
Here is just an example
of a student writing

98
00:06:11,295 --> 00:06:17,010
a C program, compiling the source
code, and then run it in the codespace.

99
00:06:17,010 --> 00:06:19,800


100
00:06:19,800 --> 00:06:23,000
Another example is student
running Flask server.

101
00:06:23,000 --> 00:06:26,420
For example, when they're
doing their finance problems,

102
00:06:26,420 --> 00:06:29,930
they will be able to run Flask
server on their codespace.

103
00:06:29,930 --> 00:06:34,520
And notice that there's
a port step here,

104
00:06:34,520 --> 00:06:36,980
because this is running
on GitHub server,

105
00:06:36,980 --> 00:06:40,430
so there's a port forwarding going on.

106
00:06:40,430 --> 00:06:44,900
And what's neat about it is, they can
change the visibility of the port.

107
00:06:44,900 --> 00:06:47,990
For example, they can
switch to-- so currently,

108
00:06:47,990 --> 00:06:51,530
the student can only visit
their own GitHub preview link.

109
00:06:51,530 --> 00:06:53,900
But what if they want to
share with other people--

110
00:06:53,900 --> 00:06:56,600
for example, if they want to
share with the TAs, teacher

111
00:06:56,600 --> 00:06:57,890
to troubleshoot something?

112
00:06:57,890 --> 00:07:01,460
They could switch the port
to public so that they can

113
00:07:01,460 --> 00:07:04,250
share with the TA and teachers freely.

114
00:07:04,250 --> 00:07:06,590
Or they could even share
with their friends and family

115
00:07:06,590 --> 00:07:09,740
to showcase what they're
building in codespace,

116
00:07:09,740 --> 00:07:13,800
or what they're building
with their assignment.

117
00:07:13,800 --> 00:07:17,625
And this is just an example of that--
running finance problems on VS Code.

118
00:07:17,625 --> 00:07:21,040


119
00:07:21,040 --> 00:07:25,630
So new features are
added via extensions.

120
00:07:25,630 --> 00:07:29,350
So VS Code is famous for
its extensibility model--

121
00:07:29,350 --> 00:07:34,270
that people around the world can create
extension and add functionality to it.

122
00:07:34,270 --> 00:07:36,760
And we think this is
perfect for our use case

123
00:07:36,760 --> 00:07:41,530
as well, because we could also build
our own extensions to further customize

124
00:07:41,530 --> 00:07:47,710
our codespace and add functionality
that we think are needed for students.

125
00:07:47,710 --> 00:07:52,270
For example, we have our own sets of
the extension that, on the surface,

126
00:07:52,270 --> 00:07:53,320
it's just three buttons--

127
00:07:53,320 --> 00:07:55,990
Launch GUI, Update Codespace,
and Rebuild Codespace.

128
00:07:55,990 --> 00:08:01,330
But underneath the hood, it actually
brings in many crucial functionalities

129
00:08:01,330 --> 00:08:02,620
to codespace.

130
00:08:02,620 --> 00:08:06,430
For example, we bring
debug50 to codespace,

131
00:08:06,430 --> 00:08:10,660
and this is realized
through the CS50 extension.

132
00:08:10,660 --> 00:08:14,770
So when student runs
debug50, it actually

133
00:08:14,770 --> 00:08:19,150
dynamically generates a
launch configuration file

134
00:08:19,150 --> 00:08:23,350
for the VS Code editor.

135
00:08:23,350 --> 00:08:27,250
For folks who have been
using debugging on VS Code

136
00:08:27,250 --> 00:08:32,200
before, if you launch a debugger
on VS Code, you yourself,

137
00:08:32,200 --> 00:08:34,929
you have to create a
launch configuration

138
00:08:34,929 --> 00:08:37,720
file, which is very overwhelming
for a student-- even for me.

139
00:08:37,720 --> 00:08:44,200
But this debug50 basically simplifies
the entire configuration process

140
00:08:44,200 --> 00:08:45,655
while just one command.

141
00:08:45,655 --> 00:08:48,360


142
00:08:48,360 --> 00:08:50,870
And this is achieved
through the CS50 extension

143
00:08:50,870 --> 00:08:55,790
because, basically, the
debug50 program is actually

144
00:08:55,790 --> 00:08:58,370
communicating with the
extension, and the extension

145
00:08:58,370 --> 00:09:02,075
will just call VS Code API
to trigger a debug session.

146
00:09:02,075 --> 00:09:04,605


147
00:09:04,605 --> 00:09:08,010
Or, alternatively, if the
student don't like debug50,

148
00:09:08,010 --> 00:09:10,590
they could just use a dock debugger.

149
00:09:10,590 --> 00:09:14,700
They can just talk to the debugger,
and usually, the CS50 dock debugger

150
00:09:14,700 --> 00:09:17,260
will respond with a
very inspiring response,

151
00:09:17,260 --> 00:09:19,620
so the student probably
would get unstuck

152
00:09:19,620 --> 00:09:21,810
pretty quickly if they check more.

153
00:09:21,810 --> 00:09:24,920


154
00:09:24,920 --> 00:09:31,250
People might be wondering how you can
also develop your GUI-based program

155
00:09:31,250 --> 00:09:32,550
on a web browser.

156
00:09:32,550 --> 00:09:34,520
There's no display to connect to.

157
00:09:34,520 --> 00:09:40,220
So to solve this problem, we
actually use a software called noVNC.

158
00:09:40,220 --> 00:09:44,000
So we bring it onto the
codespace, and we also

159
00:09:44,000 --> 00:09:50,660
grow our own plugins so that we can
recreate the GUI experience even

160
00:09:50,660 --> 00:09:52,950
in the web browser.

161
00:09:52,950 --> 00:09:55,940
So again, there's a Launch
GUI button on the C50 menu.

162
00:09:55,940 --> 00:10:02,000
If we click on it, it will actually
bring out another window or tab

163
00:10:02,000 --> 00:10:03,680
that gives you a virtual display.

164
00:10:03,680 --> 00:10:09,830
So this is just an example that I run
a simple Python GUI-based program.

165
00:10:09,830 --> 00:10:11,690
You can even run Turtle graphics on it.

166
00:10:11,690 --> 00:10:15,660
It's actually animated on
this separate browser window.

167
00:10:15,660 --> 00:10:21,080
So I think by introducing this
noVNC through the CS50 extension,

168
00:10:21,080 --> 00:10:24,170
we add the missing puzzle.

169
00:10:24,170 --> 00:10:28,430
You could now even write a GUI-based
program even in a web browser.

170
00:10:28,430 --> 00:10:31,680


171
00:10:31,680 --> 00:10:34,110
We recently also developed
another extension,

172
00:10:34,110 --> 00:10:37,320
which its whole purpose is
to install other extensions,

173
00:10:37,320 --> 00:10:40,350
because in educational
contexts, we really

174
00:10:40,350 --> 00:10:44,130
don't want students to install
all those fancy software

175
00:10:44,130 --> 00:10:48,420
or packages or extensions that
might potentially lead them

176
00:10:48,420 --> 00:10:51,510
to the violating the academic honesty.

177
00:10:51,510 --> 00:10:57,300
For example, there's many, many
AI-driven code editing as extension

178
00:10:57,300 --> 00:10:58,170
exists nowadays.

179
00:10:58,170 --> 00:11:01,380
So it is possible the student
can install this extension,

180
00:11:01,380 --> 00:11:03,990
and it will finish their
problem set right away for them.

181
00:11:03,990 --> 00:11:05,500
So we don't want that to happen.

182
00:11:05,500 --> 00:11:09,150
So we have this extension
in place just to help

183
00:11:09,150 --> 00:11:15,100
them don't navigate into that way.

184
00:11:15,100 --> 00:11:19,390
Of course, with the VS Code Marketplace,
you could even install more extension.

185
00:11:19,390 --> 00:11:22,120
For example, you can
specify the extension

186
00:11:22,120 --> 00:11:25,870
you think you need for the
student in the devcontainer.json

187
00:11:25,870 --> 00:11:27,230
that I mentioned earlier.

188
00:11:27,230 --> 00:11:29,920
You can further customize the
codespace however you want.

189
00:11:29,920 --> 00:11:33,010
Or, you can write your own extension
and publish to marketplace,

190
00:11:33,010 --> 00:11:36,170
and it will be available
for other people to use.

191
00:11:36,170 --> 00:11:40,880
So for example, we currently have two
simple extensions on the marketplace,

192
00:11:40,880 --> 00:11:45,100
so everyone can also install and
use, not just on CS50 Codespace.

193
00:11:45,100 --> 00:11:47,750


194
00:11:47,750 --> 00:11:54,860
For example, I got people saying,
there is no presentation mode

195
00:11:54,860 --> 00:12:00,110
in this CS50 codespace, which
used to be on the CS50 IDE.

196
00:12:00,110 --> 00:12:01,760
So we think that--

197
00:12:01,760 --> 00:12:04,460
so I did a quick search.

198
00:12:04,460 --> 00:12:07,640
There's this presentation mode
extension, which I can just install.

199
00:12:07,640 --> 00:12:13,290
And right away, my CS50
codespace has presentation mode.

200
00:12:13,290 --> 00:12:15,650
Another great extension that I found--

201
00:12:15,650 --> 00:12:18,950
which happened to be developed by
one of our good friends on GitHub--

202
00:12:18,950 --> 00:12:20,450
is this workspace layout.

203
00:12:20,450 --> 00:12:26,630
What this extension does is, it allows
you to pre-configure or predefine

204
00:12:26,630 --> 00:12:28,430
the layout of your codespace.

205
00:12:28,430 --> 00:12:33,020
For example, in a lab situation,
you would want a student

206
00:12:33,020 --> 00:12:36,770
to automatically have a
walkthrough tutorial on the left,

207
00:12:36,770 --> 00:12:41,300
code editor on the right, and then a
terminal ready for the student to use.

208
00:12:41,300 --> 00:12:47,670
That's exactly how we recreate
the labs experience in codespace.

209
00:12:47,670 --> 00:12:53,990
So in codespace, we bring labs back
via the Workspace Layout extension.

210
00:12:53,990 --> 00:12:56,910
For example, here is
a Mario lab example.

211
00:12:56,910 --> 00:13:00,140
You can see the workspace on
the left, editor on the right.

212
00:13:00,140 --> 00:13:02,120
It's very simple layout for a student.

213
00:13:02,120 --> 00:13:07,760
But imagine, if you want to
write a more complex lab--

214
00:13:07,760 --> 00:13:10,220
for example, let's imagine
there's a finance lab.

215
00:13:10,220 --> 00:13:16,370
This requires maybe two editor windows
open, maybe two terminals open, even,

216
00:13:16,370 --> 00:13:19,610
or maybe pre-run some
commands for the student.

217
00:13:19,610 --> 00:13:23,060
For example, student always
forgot to ask for the API key

218
00:13:23,060 --> 00:13:25,190
when they are running the Flask server.

219
00:13:25,190 --> 00:13:31,940
What if this lab environment would be
able to create a server and then run--

220
00:13:31,940 --> 00:13:36,140
export the API key automatically for
student, and bring up the Flask server,

221
00:13:36,140 --> 00:13:40,500
and then have another terminal which
serves as a client for testing?

222
00:13:40,500 --> 00:13:47,150
So in this way, we can further
define a more sophisticated lab

223
00:13:47,150 --> 00:13:50,280
session for student, and
student can just dive right in.

224
00:13:50,280 --> 00:13:54,320
And you'll notice, there's some of
the code line even being highlighted.

225
00:13:54,320 --> 00:13:56,120
That's actually
automatically highlighted,

226
00:13:56,120 --> 00:14:00,560
because it's preconfigured.

227
00:14:00,560 --> 00:14:03,210
And the configuration actually
looks something like this.

228
00:14:03,210 --> 00:14:07,370
Again, it looks similar to the
devcontainer.json file I mentioned.

229
00:14:07,370 --> 00:14:12,080
It basically describes what
layout you want, what code lines

230
00:14:12,080 --> 00:14:15,718
you want to highlight for students
when this lab's being brought out--

231
00:14:15,718 --> 00:14:18,260
what terminal you want to create,
how do you want to name it,

232
00:14:18,260 --> 00:14:21,720
what command you want to run when
the terminal is being created.

233
00:14:21,720 --> 00:14:24,980
So I would say, on
Codespace, the lab would

234
00:14:24,980 --> 00:14:30,850
become more powerful in the future,
which is not possible in the past.

235
00:14:30,850 --> 00:14:34,420
Of course, teachers care
about collaboration,

236
00:14:34,420 --> 00:14:38,020
or if they want to code with the
student or want to just check out.

237
00:14:38,020 --> 00:14:40,360
Or students, when they're
doing group projects,

238
00:14:40,360 --> 00:14:43,270
they want to collaborate on each other.

239
00:14:43,270 --> 00:14:49,480
Again, via extension, VS Code has this
extension called Visual Studio Live

240
00:14:49,480 --> 00:14:54,790
Share, which is you will be able to
share your codespace with other people

241
00:14:54,790 --> 00:14:58,122
but just clicking on
the Live Share button.

242
00:14:58,122 --> 00:15:00,580
And it will generate a link,
and you can send this link out

243
00:15:00,580 --> 00:15:05,270
to other codespace users.

244
00:15:05,270 --> 00:15:11,630
And for example, the screen in
dark theme, it's my other user.

245
00:15:11,630 --> 00:15:17,300
So we will be able to collaborate
each other on the same problem set.

246
00:15:17,300 --> 00:15:19,058
And the terminals even in sync.

247
00:15:19,058 --> 00:15:21,350
People will be able to see
what other people are typing

248
00:15:21,350 --> 00:15:23,420
in the terminal, that kind of thing.

249
00:15:23,420 --> 00:15:27,390
And it also supports audio
chat, text-based chat.

250
00:15:27,390 --> 00:15:29,940
I would say experience is just more--

251
00:15:29,940 --> 00:15:33,790


252
00:15:33,790 --> 00:15:36,000
student we get a better
collaboration experience

253
00:15:36,000 --> 00:15:39,345
on this versus the previous
generation of the CS50 IDE.

254
00:15:39,345 --> 00:15:42,570


255
00:15:42,570 --> 00:15:46,800
And of course, lastly, all the
CS50 too is, of course, available

256
00:15:46,800 --> 00:15:48,330
on CS50 Codespace.

257
00:15:48,330 --> 00:15:52,650
We pre-install all these
CS50-specific tools.

258
00:15:52,650 --> 00:15:58,395
For example, you can still run style
style50, chat50, submit50, or render50

259
00:15:58,395 --> 00:15:59,670
to generate a PDF.

260
00:15:59,670 --> 00:16:02,750


261
00:16:02,750 --> 00:16:05,840
And that's all with VS Code in
the cloud with GitHub Codespaces.

262
00:16:05,840 --> 00:16:07,720
Thank you.

263
00:16:07,720 --> 00:16:09,000