1
00:00:00,000 --> 00:00:00,500


2
00:00:00,500 --> 00:00:03,472
[MUSIC PLAYING]

3
00:00:03,472 --> 00:00:12,267


4
00:00:12,267 --> 00:00:13,850
BRIAN YU: Welcome back to CS50 Beyond.

5
00:00:13,850 --> 00:00:14,900
Hope you all enjoyed lunch.

6
00:00:14,900 --> 00:00:17,441
Feel free to help yourself to
pizza now still, if you'd like,

7
00:00:17,441 --> 00:00:19,232
as we go through this afternoon.

8
00:00:19,232 --> 00:00:20,940
A bit of a change of
pace this afternoon.

9
00:00:20,940 --> 00:00:23,450
So we spent the morning
talking about HTML and CSS,

10
00:00:23,450 --> 00:00:26,240
which you had seen in CS50, but
we went a little bit beyond that,

11
00:00:26,240 --> 00:00:30,325
looking at other features of HTML and
CSS and more modern versions of both.

12
00:00:30,325 --> 00:00:33,380
What we're going to do this
afternoon is take a look at Git.

13
00:00:33,380 --> 00:00:35,540
And so just for show of hands--

14
00:00:35,540 --> 00:00:36,950
actually, let's do via the faces.

15
00:00:36,950 --> 00:00:40,199
If you've used Git before and you feel
comfortable with it, green smiley face.

16
00:00:40,199 --> 00:00:42,230
If you've never used it
before, red frowny face.

17
00:00:42,230 --> 00:00:45,534
If you're somewhere in between, yellow.

18
00:00:45,534 --> 00:00:46,950
OK, so sort of all over the place.

19
00:00:46,950 --> 00:00:48,130
A bunch of people have used it before.

20
00:00:48,130 --> 00:00:49,770
A bunch of people have
never used it before.

21
00:00:49,770 --> 00:00:52,140
So if you've never used it before,
this will be a good introduction.

22
00:00:52,140 --> 00:00:53,970
Even if you have used it
before, hopefully you'll

23
00:00:53,970 --> 00:00:56,010
get a bit more of an
understanding of it here.

24
00:00:56,010 --> 00:00:59,070
Git is what we call a piece
of version control software.

25
00:00:59,070 --> 00:01:01,470
It's software designed to
help us manage and track

26
00:01:01,470 --> 00:01:02,940
different versions of our code.

27
00:01:02,940 --> 00:01:04,349
And it is incredibly helpful.

28
00:01:04,349 --> 00:01:07,050
If you ever go on to take
future computer science classes,

29
00:01:07,050 --> 00:01:09,840
or you go and work for a
computer science internship,

30
00:01:09,840 --> 00:01:12,630
or work in computer science
industry, you will almost definitely

31
00:01:12,630 --> 00:01:14,490
be using Git as your
means of keeping track

32
00:01:14,490 --> 00:01:15,950
of different versions of your projects.

33
00:01:15,950 --> 00:01:18,270
And so it's good to have an
understanding of it and how it works.

34
00:01:18,270 --> 00:01:20,340
So today is going to be a bit
of an introduction to that,

35
00:01:20,340 --> 00:01:22,800
give you an opportunity to see
the various features of it,

36
00:01:22,800 --> 00:01:26,190
get an opportunity to practice with
it hands-on later on this afternoon.

37
00:01:26,190 --> 00:01:28,065
And then in the latter
part of the afternoon,

38
00:01:28,065 --> 00:01:30,690
we'll also take a look
at SaaS, which is a way

39
00:01:30,690 --> 00:01:34,980
to generate CSS code, which we'll
take a look at in a moment as well.

40
00:01:34,980 --> 00:01:38,612
But questions before we begin
on anything from this morning,

41
00:01:38,612 --> 00:01:40,320
anything about the
structure of the class

42
00:01:40,320 --> 00:01:44,590
or, logistics of what's going
to happen this afternoon?

43
00:01:44,590 --> 00:01:45,250
All right.

44
00:01:45,250 --> 00:01:46,700
Let's go out and get started then.

45
00:01:46,700 --> 00:01:48,699
So we're talking about
Git today, and Git

46
00:01:48,699 --> 00:01:50,990
is a piece of version control
software, as I mentioned.

47
00:01:50,990 --> 00:01:53,240
And it's good for a number
of different things.

48
00:01:53,240 --> 00:01:55,630
So the first thing that Git
is particularly good for

49
00:01:55,630 --> 00:01:58,810
is for keeping track of
changes you make to your code.

50
00:01:58,810 --> 00:02:02,260
I remember when I first
took CS50, I would

51
00:02:02,260 --> 00:02:04,820
be working on a problem
in the problem set,

52
00:02:04,820 --> 00:02:07,740
and I would work and get like
part of it working, but not quite.

53
00:02:07,740 --> 00:02:09,880
But I'd be afraid that
if I added more, I would

54
00:02:09,880 --> 00:02:11,338
break the stuff I had already done.

55
00:02:11,338 --> 00:02:13,570
So I'd save a duplicate
copy of the code somewhere,

56
00:02:13,570 --> 00:02:15,130
make changes to another
copy, and pretty soon, you

57
00:02:15,130 --> 00:02:17,680
have four or five different
copies of the same program that

58
00:02:17,680 --> 00:02:18,760
are all slightly
different, and they just

59
00:02:18,760 --> 00:02:20,770
become a little bit
tough to keep track of.

60
00:02:20,770 --> 00:02:23,110
Maybe some of you had similar
experiences, definitely

61
00:02:23,110 --> 00:02:24,359
something that happened to me.

62
00:02:24,359 --> 00:02:27,250
This is before I learned how
to use Git, which is primarily

63
00:02:27,250 --> 00:02:30,520
designed for trying to deal
with problems like this, keeping

64
00:02:30,520 --> 00:02:34,227
track of changes you make to your code,
such that you have a full revision

65
00:02:34,227 --> 00:02:36,310
history, so to speak, of
all the changes you make.

66
00:02:36,310 --> 00:02:39,430
So you might have initially created a
file, made some changes to the file,

67
00:02:39,430 --> 00:02:41,771
added a line to the file,
removed a line from the file.

68
00:02:41,771 --> 00:02:44,770
And Git is going to help keep track
of all of those different changes we

69
00:02:44,770 --> 00:02:49,330
make to the code so that we have a
record of all the changes we've made.

70
00:02:49,330 --> 00:02:51,400
Another thing that Git
is particularly good for

71
00:02:51,400 --> 00:02:54,350
is for synchronizing code
between different people.

72
00:02:54,350 --> 00:02:56,414
So you might imagine
that you have some file

73
00:02:56,414 --> 00:02:59,080
that you and a collaborator, a
partner, are working together on.

74
00:02:59,080 --> 00:03:01,900
Maybe it's a partner you're working on
in a problem set in a class together,

75
00:03:01,900 --> 00:03:04,550
or a bunch of people that you're working
with on the same software project,

76
00:03:04,550 --> 00:03:06,760
if you're working for the
same company, for instance,

77
00:03:06,760 --> 00:03:09,700
and you're sharing some file
that you're working on together.

78
00:03:09,700 --> 00:03:13,180
And what Git makes it easy to do is
to give both you and your partner

79
00:03:13,180 --> 00:03:17,350
the same version of that file, such that
you can both independently be making

80
00:03:17,350 --> 00:03:20,497
modifications to that file, change
different parts of that file,

81
00:03:20,497 --> 00:03:22,330
and then eventually
synchronize them back up

82
00:03:22,330 --> 00:03:25,000
together in some sort
of central server, such

83
00:03:25,000 --> 00:03:29,110
that you can both then get that updated
version of the file, where the idea is

84
00:03:29,110 --> 00:03:31,570
you can both be independently
making changes to the code,

85
00:03:31,570 --> 00:03:34,510
synchronize them somewhere so that you
both have access to the latest version.

86
00:03:34,510 --> 00:03:37,180
No more emailing, like, this is
the latest version, use that one.

87
00:03:37,180 --> 00:03:39,679
And then there are conflicting
versions being emailed around

88
00:03:39,679 --> 00:03:41,020
and that starts to become messy.

89
00:03:41,020 --> 00:03:43,728
Git helps to just simplify that
process, keep track of everything

90
00:03:43,728 --> 00:03:45,390
much more cleanly.

91
00:03:45,390 --> 00:03:47,140
Another thing that Git
is good for is it's

92
00:03:47,140 --> 00:03:50,620
good at testing changes to
your code without losing

93
00:03:50,620 --> 00:03:52,130
the original copy of the code.

94
00:03:52,130 --> 00:03:53,980
So you might have
something that's working,

95
00:03:53,980 --> 00:03:56,896
and you might want to add a new
feature to your website, for instance.

96
00:03:56,896 --> 00:03:59,470
So you might want to tackle the
next part of the problem set.

97
00:03:59,470 --> 00:04:02,830
But doing so might involve breaking
the stuff you've already made

98
00:04:02,830 --> 00:04:04,120
and you want to save that.

99
00:04:04,120 --> 00:04:06,250
So what git makes it
very easy to do is say,

100
00:04:06,250 --> 00:04:08,830
branch off, a term that we'll
explore more in just a moment.

101
00:04:08,830 --> 00:04:12,190
But say, try something else for a
little bit while keeping the original.

102
00:04:12,190 --> 00:04:15,148
And only when we've tried it and it
works and we're feeling comfortable

103
00:04:15,148 --> 00:04:17,890
with it can we then merge it back
in with the original code, such

104
00:04:17,890 --> 00:04:20,350
that we now have the original
version of whatever it

105
00:04:20,350 --> 00:04:22,720
is that we were working with.

106
00:04:22,720 --> 00:04:25,936
And finally, Git is very good at
reverting back to old versions of code.

107
00:04:25,936 --> 00:04:28,060
You've made some changes
and you decide the feature

108
00:04:28,060 --> 00:04:31,090
you have is not a feature that you want,
or you decide that what you've done

109
00:04:31,090 --> 00:04:33,910
has a mistake in it, a bug, you want
to go back to a previous version.

110
00:04:33,910 --> 00:04:35,200
It's very easy to just
say, you know what?

111
00:04:35,200 --> 00:04:36,730
Go back in the revision history.

112
00:04:36,730 --> 00:04:39,156
Go back to a previous
version of that file.

113
00:04:39,156 --> 00:04:42,280
So questions about the goals here, the
problems that we're trying to solve?

114
00:04:42,280 --> 00:04:44,446
And then we'll introduce
Git and see how it actually

115
00:04:44,446 --> 00:04:46,837
goes about solving those problems.

116
00:04:46,837 --> 00:04:49,920
All right, a website you may or may
not be familiar with is called GitHub.

117
00:04:49,920 --> 00:04:52,794
You should all have GitHub accounts
that you made when you took CS50,

118
00:04:52,794 --> 00:04:53,970
or in some other time.

119
00:04:53,970 --> 00:04:56,160
And what GitHub is going
to do is it's going

120
00:04:56,160 --> 00:04:59,820
to be a website that's going to
host what we call Git repositories.

121
00:04:59,820 --> 00:05:03,420
And the word "repository" you can think
of as just meaning a folder where we're

122
00:05:03,420 --> 00:05:06,401
going to contain the code files
that we're going to track, the code

123
00:05:06,401 --> 00:05:08,400
that we want to keep track
of different versions

124
00:05:08,400 --> 00:05:09,820
of and synchronize
between different people.

125
00:05:09,820 --> 00:05:12,219
It's just a folder where
you're going to store code.

126
00:05:12,219 --> 00:05:14,760
And so GitHub is an online place
to store those repositories,

127
00:05:14,760 --> 00:05:17,218
such that you can put code
there, and then different people

128
00:05:17,218 --> 00:05:19,390
can access that same shared repository.

129
00:05:19,390 --> 00:05:22,280
So I'll show you an example of that now.

130
00:05:22,280 --> 00:05:24,120
I'll go ahead and go to github.com.

131
00:05:24,120 --> 00:05:27,730
You'll be brought to an interface
that looks something like this.

132
00:05:27,730 --> 00:05:30,100
And in the upper right, you'll
see a little Plus button.

133
00:05:30,100 --> 00:05:34,460
If I click on that, there's a button
there that says a New Repository.

134
00:05:34,460 --> 00:05:36,870
So you click on that, New Repository.

135
00:05:36,870 --> 00:05:39,430
You're going to give
that repository a name.

136
00:05:39,430 --> 00:05:41,740
I'll just call it Beyond for now.

137
00:05:41,740 --> 00:05:43,590
You can give a description if you want.

138
00:05:43,590 --> 00:05:47,200
You can make it public, meaning anyone
can access it, anyone can see it.

139
00:05:47,200 --> 00:05:48,420
You can also make it private.

140
00:05:48,420 --> 00:05:51,120
GitHub recently allowed
any user, even for free,

141
00:05:51,120 --> 00:05:52,870
to create private repositories.

142
00:05:52,870 --> 00:05:54,330
So if you don't want other
people to be able to see it,

143
00:05:54,330 --> 00:05:55,663
you can make it private as well.

144
00:05:55,663 --> 00:05:56,970
I'll make this one public.

145
00:05:56,970 --> 00:05:58,869
And you go in and create the repository.

146
00:05:58,869 --> 00:06:00,660
And what this is going
to do is just create

147
00:06:00,660 --> 00:06:04,320
an empty folder, an empty
repository, on GitHub servers,

148
00:06:04,320 --> 00:06:07,390
wherein I can begin to
store code, eventually.

149
00:06:07,390 --> 00:06:10,860
So that's all I've done, created a
new repository on GitHub's website.

150
00:06:10,860 --> 00:06:13,380


151
00:06:13,380 --> 00:06:16,770
So now, what are the commands
that I can run on the command line

152
00:06:16,770 --> 00:06:18,450
to interact with this Git repository?

153
00:06:18,450 --> 00:06:20,760
Well, the first thing I need
to do is this repository

154
00:06:20,760 --> 00:06:22,470
is located on GitHub servers.

155
00:06:22,470 --> 00:06:25,650
I want it on my computer so that
I can begin adding files to it,

156
00:06:25,650 --> 00:06:28,650
looking at the files that are in
it, making modifications, and such.

157
00:06:28,650 --> 00:06:32,220
And so a command that we're
going to use is called git clone.

158
00:06:32,220 --> 00:06:35,970
And so what git clone is going to
do is if I have my computer here

159
00:06:35,970 --> 00:06:39,330
and I have some server that's got
the code that I want to clone locally

160
00:06:39,330 --> 00:06:42,960
onto my computer, I run the command
git clone, followed by the URL

161
00:06:42,960 --> 00:06:44,061
are all of the repository.

162
00:06:44,061 --> 00:06:46,310
And what that's going to do
it's going to make a copy.

163
00:06:46,310 --> 00:06:49,101
It's going to take the repository,
locate it up somewhere on GitHub

164
00:06:49,101 --> 00:06:52,840
servers, and it's going to copy it
and bring it down onto my own computer

165
00:06:52,840 --> 00:06:57,230
so that I have a copy of that
repository on my local machine.

166
00:06:57,230 --> 00:07:00,511
What questions do you have so far?

167
00:07:00,511 --> 00:07:01,010
OK.

168
00:07:01,010 --> 00:07:04,280
I'll actually do this so you
can see what it looks like.

169
00:07:04,280 --> 00:07:06,770
What I have here is a URL.

170
00:07:06,770 --> 00:07:11,390
And there are going to be two different
URLS, an HTTPS URL and an SSH URL.

171
00:07:11,390 --> 00:07:13,160
If you set up SSH with
GitHub-- there are

172
00:07:13,160 --> 00:07:16,400
instructions for how to do that on the
GitHub website-- you can use that URL.

173
00:07:16,400 --> 00:07:19,610
That involves something called
public-key cryptography, which

174
00:07:19,610 --> 00:07:21,110
we'll talk about later in the week.

175
00:07:21,110 --> 00:07:23,068
But if you haven't set
that up, you're probably

176
00:07:23,068 --> 00:07:25,040
safest using the HTTPS URL for now.

177
00:07:25,040 --> 00:07:27,655
I'm going to use the SSH
URL, but either will work.

178
00:07:27,655 --> 00:07:29,030
And you'll go into your terminal.

179
00:07:29,030 --> 00:07:31,140
I'll go to my desktop.

180
00:07:31,140 --> 00:07:37,280
And I'm just going to type git
clone, followed by that URL.

181
00:07:37,280 --> 00:07:40,504
And that's going to do is it's
going to clone that repository.

182
00:07:40,504 --> 00:07:41,420
And it says, "Warning.

183
00:07:41,420 --> 00:07:42,980
You appear to have cloned
an empty repository."

184
00:07:42,980 --> 00:07:43,646
But that's fine.

185
00:07:43,646 --> 00:07:45,380
I know that the repository is empty.

186
00:07:45,380 --> 00:07:48,080
But if I look at the folders
that are inside of my desktop

187
00:07:48,080 --> 00:07:51,440
right now-- recall that LS is a
terminal command that stands for list,

188
00:07:51,440 --> 00:07:54,110
list all the files and
folders in this directory.

189
00:07:54,110 --> 00:07:56,180
What I'll see is I have
a directory now called

190
00:07:56,180 --> 00:08:00,830
Beyond, the same name as the repository
that I had just a moment ago.

191
00:08:00,830 --> 00:08:03,350
If I move into the Beyond
directory by typing CD--

192
00:08:03,350 --> 00:08:06,570
CD for Change Directory,
or move into a folder--

193
00:08:06,570 --> 00:08:08,930
CD Beyond, I'm now inside
the Beyond directory.

194
00:08:08,930 --> 00:08:10,437
And if I type LS, nothing happens.

195
00:08:10,437 --> 00:08:12,020
There's nothing inside of this folder.

196
00:08:12,020 --> 00:08:15,200
But I have now cloned
this folder so that I

197
00:08:15,200 --> 00:08:18,100
have a copy of the
repository on my computer.

198
00:08:18,100 --> 00:08:20,720


199
00:08:20,720 --> 00:08:22,600
So that's git clone.

200
00:08:22,600 --> 00:08:23,100
Questions?

201
00:08:23,100 --> 00:08:23,661
Yeah?

202
00:08:23,661 --> 00:08:25,970
AUDIENCE: Sorry, can you
show where you got the URL?

203
00:08:25,970 --> 00:08:26,870
BRIAN YU: Yup.

204
00:08:26,870 --> 00:08:28,760
So the question was,
where did I get the URL?

205
00:08:28,760 --> 00:08:30,980
When you create a new
blank repository, you

206
00:08:30,980 --> 00:08:33,745
should get a URL that shows up here.

207
00:08:33,745 --> 00:08:35,870
If you have files in the
repository, this interface

208
00:08:35,870 --> 00:08:36,620
looks slightly different.

209
00:08:36,620 --> 00:08:38,210
But there will be a dropdown
where you can clone it

210
00:08:38,210 --> 00:08:39,918
and there should be
a link there as well.

211
00:08:39,918 --> 00:08:42,720


212
00:08:42,720 --> 00:08:47,240
So what I'd like to do now is add
some files to this repository.

213
00:08:47,240 --> 00:08:50,000
Maybe I want to put my website
that I was creating this morning

214
00:08:50,000 --> 00:08:52,720
inside of a gate repository, which
would allow anyone to see it,

215
00:08:52,720 --> 00:08:55,970
anyone to put modifications to it, allow
multiple people to collaborate on it,

216
00:08:55,970 --> 00:08:56,930
for instance.

217
00:08:56,930 --> 00:08:59,990
And so to add something to a Git
repository, the command we run

218
00:08:59,990 --> 00:09:01,660
is just called git add.

219
00:09:01,660 --> 00:09:04,740
And so quite simply what happens
is that if I have a file,

220
00:09:04,740 --> 00:09:09,020
and I make some changes to it and I want
to add these changes to the next time

221
00:09:09,020 --> 00:09:11,450
that I save a version
of the repository--

222
00:09:11,450 --> 00:09:13,940
and instead of save a
version of the repository,

223
00:09:13,940 --> 00:09:16,760
the terminology we're going to
start using is the word "commit."

224
00:09:16,760 --> 00:09:20,180
Whenever I say commit, just think of it
as this is a version of the repository

225
00:09:20,180 --> 00:09:21,050
that I'm saving.

226
00:09:21,050 --> 00:09:24,500
And we'll save the entire history of
commit so that anytime I make a commit,

227
00:09:24,500 --> 00:09:27,080
it's going to save that as
a version I have access to.

228
00:09:27,080 --> 00:09:28,940
And so if I want to
say, this is a file I

229
00:09:28,940 --> 00:09:31,881
want to include the next
time I make a commit, I'm

230
00:09:31,881 --> 00:09:34,880
going to run a command called git
add, followed by the name of the file,

231
00:09:34,880 --> 00:09:37,160
foo.py, or whatever
the file happens to be.

232
00:09:37,160 --> 00:09:40,010
And that's basically telling
Git that foo.py, this

233
00:09:40,010 --> 00:09:43,719
is a file I want to
include in my next commit.

234
00:09:43,719 --> 00:09:45,260
And so I'll actually give that a try.

235
00:09:45,260 --> 00:09:47,301
And when you do that, Git
will give you a message

236
00:09:47,301 --> 00:09:50,690
letting you know that this is
now a change that you can commit.

237
00:09:50,690 --> 00:09:54,190
And so let me go ahead and create
a new file inside of this folder.

238
00:09:54,190 --> 00:09:55,510
I'll call it hello.html.

239
00:09:55,510 --> 00:09:58,843
Touch is a command that you can use just
to create a file, an empty file, if you

240
00:09:58,843 --> 00:10:00,370
want to called hello.html.

241
00:10:00,370 --> 00:10:03,250
I'll go ahead and edit that file.

242
00:10:03,250 --> 00:10:19,020
And we will put a very
simple hello.html file

243
00:10:19,020 --> 00:10:23,110
that I've now put inside
of the Beyond directory.

244
00:10:23,110 --> 00:10:25,950
If I type LS, I see that
hello.html is there.

245
00:10:25,950 --> 00:10:32,100
And now, if I type something
like git add hello.html,

246
00:10:32,100 --> 00:10:34,080
nothing seems to have happened.

247
00:10:34,080 --> 00:10:37,560
But I have now added
hello.html as a file

248
00:10:37,560 --> 00:10:39,700
that I want to include
in my next commit.

249
00:10:39,700 --> 00:10:43,900
I've told Git that this is a file
that should be in the repository.

250
00:10:43,900 --> 00:10:48,750
The next step is to actually make this
change, to actually commit this change.

251
00:10:48,750 --> 00:10:50,940
And so how might you do that?

252
00:10:50,940 --> 00:10:53,110
The command is just git commit.

253
00:10:53,110 --> 00:10:54,540
And so what does that look like?

254
00:10:54,540 --> 00:10:57,410
You type git commit
dash m-- m for message.

255
00:10:57,410 --> 00:10:59,160
And then, in quotation
marks, you're going

256
00:10:59,160 --> 00:11:01,530
to include what's called
a commit message, which

257
00:11:01,530 --> 00:11:05,640
is just an English phrase
or sentence describing what

258
00:11:05,640 --> 00:11:07,816
it is that you changed in this commit.

259
00:11:07,816 --> 00:11:10,440
And that could be anything you
want, but the rationale for this

260
00:11:10,440 --> 00:11:12,898
is that when you're going back
and looking at your history,

261
00:11:12,898 --> 00:11:15,072
it becomes very clear what
changes you made when.

262
00:11:15,072 --> 00:11:17,280
And when other people are
looking at your repository,

263
00:11:17,280 --> 00:11:20,220
it becomes easier for them to
understand what changes you're making.

264
00:11:20,220 --> 00:11:22,230
And this is especially useful
if people are collaborating.

265
00:11:22,230 --> 00:11:24,240
You can see what other
people have been up to, not

266
00:11:24,240 --> 00:11:26,760
by trying to read every single
line of code that they've written,

267
00:11:26,760 --> 00:11:29,093
but, in particular, by looking
at their commit messages,

268
00:11:29,093 --> 00:11:32,490
to see a description in English of
what it is that they've changed.

269
00:11:32,490 --> 00:11:35,190
So git commit dash m
followed by the message.

270
00:11:35,190 --> 00:11:36,780
And you say, OK, this is what I did.

271
00:11:36,780 --> 00:11:40,050
I just added a line to the file, some
message to describe what you did.

272
00:11:40,050 --> 00:11:43,590
And that's going to take your code and
just save a new version of that code

273
00:11:43,590 --> 00:11:46,600
with all of those changes in it.

274
00:11:46,600 --> 00:11:47,772
So that's git commit.

275
00:11:47,772 --> 00:11:49,230
We'll go ahead and give that a try.

276
00:11:49,230 --> 00:11:52,070


277
00:11:52,070 --> 00:11:57,950
I'll type git commit dash m, and
I'll just say add a hello file.

278
00:11:57,950 --> 00:12:01,060
This is what I did in
this particular commit.

279
00:12:01,060 --> 00:12:03,590
I'll press Return.

280
00:12:03,590 --> 00:12:06,180
"Your name and email address
were configured automatically."

281
00:12:06,180 --> 00:12:07,995
Yeah, that's fine.

282
00:12:07,995 --> 00:12:11,120
I haven't yet set up my name and email
address on this particular computer,

283
00:12:11,120 --> 00:12:12,828
and that's something
that you'll probably

284
00:12:12,828 --> 00:12:16,220
need to do the first time that
you start working with Git.

285
00:12:16,220 --> 00:12:23,679
So OK, questions so far
about what we've done?

286
00:12:23,679 --> 00:12:25,146
Yeah?

287
00:12:25,146 --> 00:12:34,450
AUDIENCE: [INAUDIBLE]

288
00:12:34,450 --> 00:12:35,920
BRIAN YU: Oh, good question.

289
00:12:35,920 --> 00:12:38,920
So the question is, are there
now two versions of this file?

290
00:12:38,920 --> 00:12:41,920
If I just look inside of the
Beyond directory right now,

291
00:12:41,920 --> 00:12:44,290
I only have one copy of hello.html.

292
00:12:44,290 --> 00:12:47,620
And if I show what it's inside
of it by saying, cat hello.html,

293
00:12:47,620 --> 00:12:50,300
it's got the contents,
the most recent contents.

294
00:12:50,300 --> 00:12:53,800
And so if I were to just look at the
files themselves, they'll look like--

295
00:12:53,800 --> 00:12:56,980
right now, at least-- whatever my
most recent version of the file is.

296
00:12:56,980 --> 00:13:00,550
But separately, Git is storing
all of those previous versions,

297
00:13:00,550 --> 00:13:03,070
I just can't see them right now.

298
00:13:03,070 --> 00:13:06,244
But yeah, good question.

299
00:13:06,244 --> 00:13:09,160
All right, so maybe now I want to
get a better understanding of what's

300
00:13:09,160 --> 00:13:11,310
happening inside my Git repository.

301
00:13:11,310 --> 00:13:14,050
A command I can use very
frequently is git status.

302
00:13:14,050 --> 00:13:16,390
That basically just tells you
what's currently happening

303
00:13:16,390 --> 00:13:18,280
in my Git repository, what's going on.

304
00:13:18,280 --> 00:13:20,930
And it lets me, then,
figure out what to do next.

305
00:13:20,930 --> 00:13:27,520
So if I type, inside my repository,
git status, what I'll see

306
00:13:27,520 --> 00:13:33,610
is that I'm on branch master, and we'll
see in a moment what the branch means.

307
00:13:33,610 --> 00:13:35,845
And it says but the upstream is gone.

308
00:13:35,845 --> 00:13:38,424


309
00:13:38,424 --> 00:13:39,340
Try this for a moment.

310
00:13:39,340 --> 00:13:43,410


311
00:13:43,410 --> 00:13:43,910
OK.

312
00:13:43,910 --> 00:13:46,580


313
00:13:46,580 --> 00:13:48,680
I haven't quite configured
everything just yet.

314
00:13:48,680 --> 00:13:51,050
But I just did git status
to check what was going on.

315
00:13:51,050 --> 00:13:53,735
And then the command that
I just typed was git push.

316
00:13:53,735 --> 00:13:56,360
So I typed git push and you saw
a whole bunch of things happen.

317
00:13:56,360 --> 00:13:59,120
So what exactly is git
push and what does it do?

318
00:13:59,120 --> 00:14:04,700
Well, when I added the hello.html
file, it wasn't yet on GitHub servers

319
00:14:04,700 --> 00:14:05,240
just yet.

320
00:14:05,240 --> 00:14:08,420
It was only on my own computer locally.

321
00:14:08,420 --> 00:14:11,240
And what git push does is it
says, when I type git push,

322
00:14:11,240 --> 00:14:13,790
it says take whatever
changes that I've made

323
00:14:13,790 --> 00:14:16,040
and go ahead and push
them up to the server.

324
00:14:16,040 --> 00:14:18,580
I want to take those changes
and push them up to GitHub

325
00:14:18,580 --> 00:14:22,310
so that anyone who goes online onto
GitHub and looks at my repository

326
00:14:22,310 --> 00:14:24,500
can actually see the
changes that I've made,

327
00:14:24,500 --> 00:14:26,710
can see those commits that I've made.

328
00:14:26,710 --> 00:14:30,620
And in fact, now, if I go
to my GitHub repository,

329
00:14:30,620 --> 00:14:34,430
that right now is just empty, and I
refresh this page, what I'll see now

330
00:14:34,430 --> 00:14:35,560
is there's a file here.

331
00:14:35,560 --> 00:14:37,760
There is hello.html.

332
00:14:37,760 --> 00:14:44,120
And if I click on hello.html, I'll see,
OK, here is the file that I've created.

333
00:14:44,120 --> 00:14:46,356


334
00:14:46,356 --> 00:14:48,730
It's the same as the one that
was locally on my computer,

335
00:14:48,730 --> 00:14:50,920
but I added it to my
Git repository, and then

336
00:14:50,920 --> 00:14:54,250
I pushed it up to GitHub so that
it now has the latest versions.

337
00:14:54,250 --> 00:14:57,020
And anytime I make a change,
I can do something like this.

338
00:14:57,020 --> 00:14:58,810
So for instance, I can go back here.

339
00:14:58,810 --> 00:15:02,800
And maybe instead of just Hello World, I
want to put Hello World inside of an H1

340
00:15:02,800 --> 00:15:04,840
tag to make it big and bold.

341
00:15:04,840 --> 00:15:06,790
So Hello World, get rid of that.

342
00:15:06,790 --> 00:15:09,730


343
00:15:09,730 --> 00:15:10,230
Question?

344
00:15:10,230 --> 00:15:11,150
Yeah.

345
00:15:11,150 --> 00:15:14,364
AUDIENCE: [INAUDIBLE]
when you use [INAUDIBLE]

346
00:15:14,364 --> 00:15:15,530
BRIAN YU: Oh, good question.

347
00:15:15,530 --> 00:15:18,860
So what's the difference between
git push and git push origin master?

348
00:15:18,860 --> 00:15:22,850
git push, normally, will just default
to doing what git push origin master is.

349
00:15:22,850 --> 00:15:25,650
It has to do with pushing
to different branches,

350
00:15:25,650 --> 00:15:29,140
and we'll talk about
branches in a moment.

351
00:15:29,140 --> 00:15:31,945
All right, so I took Hello World
and I put it inside of the H1 tag.

352
00:15:31,945 --> 00:15:34,320
And now, this is some change
that I would like to commit.

353
00:15:34,320 --> 00:15:37,200
I'd like to save this is a
new version of the repository.

354
00:15:37,200 --> 00:15:40,380
And so I can say, all
right, git add hello.html.

355
00:15:40,380 --> 00:15:43,740
This is the file I want to
include in my next commit.

356
00:15:43,740 --> 00:15:49,890
git commit dash m, and I'll
say, OK, put text in an H1 tag.

357
00:15:49,890 --> 00:15:51,930
And OK.

358
00:15:51,930 --> 00:15:55,860
And it's telling me
that I need to add my--

359
00:15:55,860 --> 00:15:59,516
I'll just go ahead and do
my name and email address

360
00:15:59,516 --> 00:16:01,140
so that it stops telling me to do that.

361
00:16:01,140 --> 00:16:09,010


362
00:16:09,010 --> 00:16:11,090
OK, sorry about that.

363
00:16:11,090 --> 00:16:15,800
OK, so I committed those changes, and
let me fix the identity to commit.

364
00:16:15,800 --> 00:16:18,320


365
00:16:18,320 --> 00:16:24,200
And now, if I type git status, it
says that I'm on branch master.

366
00:16:24,200 --> 00:16:28,735
And it says my branch is the head
of origin master by one commit.

367
00:16:28,735 --> 00:16:31,110
OK, it's a little bit confusing,
but what does that mean?

368
00:16:31,110 --> 00:16:33,110
It means that my branch
of the repository,

369
00:16:33,110 --> 00:16:36,530
the version that I have on my computer,
is ahead of the origin version--

370
00:16:36,530 --> 00:16:38,960
the origin one is the one
that's up on GitHub servers--

371
00:16:38,960 --> 00:16:42,350
by one comment, meaning I have made
one change that my server on GitHub

372
00:16:42,350 --> 00:16:43,711
doesn't yet know about.

373
00:16:43,711 --> 00:16:46,460
And so if I want to publish those
commits, push them up to GitHub,

374
00:16:46,460 --> 00:16:47,600
I can type git push.

375
00:16:47,600 --> 00:16:54,300
Before I do that, notice that hello.html
just has Hello, not in an H1 tag.

376
00:16:54,300 --> 00:16:57,990
But as soon as I type git push to say
take my changes, push them up to GitHub

377
00:16:57,990 --> 00:17:02,840
so that GitHub has the latest version of
my code, I push that, refresh the page,

378
00:17:02,840 --> 00:17:05,670
and, OK, now Hello World
is inside those H1 tags.

379
00:17:05,670 --> 00:17:08,412
This is the latest
version of the repository.

380
00:17:08,412 --> 00:17:12,310
But what you'll see on GitHub is if
I go to the GitHub repository page,

381
00:17:12,310 --> 00:17:14,349
I can see that I've made two commits.

382
00:17:14,349 --> 00:17:18,609
And if I click on OK, two commits that
I've made here, I can actually see,

383
00:17:18,609 --> 00:17:21,230
OK, here was the original
add a hello file.

384
00:17:21,230 --> 00:17:24,190
And I can see, OK, here is the
original file that I created,

385
00:17:24,190 --> 00:17:26,230
the one without the H1 tag.

386
00:17:26,230 --> 00:17:29,050
And then I can say, OK, when
I put text inside the H1 tag--

387
00:17:29,050 --> 00:17:30,585
let's look at that commit.

388
00:17:30,585 --> 00:17:32,380
And OK, here was the change that I made.

389
00:17:32,380 --> 00:17:35,380
I took the Hello World line and
I added the H1 tags around it.

390
00:17:35,380 --> 00:17:38,751
So GitHub and Git, more generally,
is tracking all of these changes

391
00:17:38,751 --> 00:17:39,250
that I make.

392
00:17:39,250 --> 00:17:42,160
It knows when I make the changes,
whenever I make a new commit,

393
00:17:42,160 --> 00:17:45,700
and it's saving all of those different
commits in the commit history

394
00:17:45,700 --> 00:17:48,400
of this particular repository.

395
00:17:48,400 --> 00:17:48,910
Questions?

396
00:17:48,910 --> 00:17:49,720
Yeah?

397
00:17:49,720 --> 00:17:53,530
AUDIENCE: So does Git actually
save a list of the changes

398
00:17:53,530 --> 00:17:56,910
that you make so that it's able
to recreate the file [INAUDIBLE]

399
00:17:56,910 --> 00:18:00,560
or is your entire Git
history a massive collection

400
00:18:00,560 --> 00:18:01,890
of files that you [INAUDIBLE]

401
00:18:01,890 --> 00:18:02,400
BRIAN YU: Good question.

402
00:18:02,400 --> 00:18:04,770
So the question is, what
is Git actually storing?

403
00:18:04,770 --> 00:18:07,350
Simply put, Git is storing
a different version

404
00:18:07,350 --> 00:18:11,400
of the file for each type, time, you
create a new version of that file,

405
00:18:11,400 --> 00:18:13,414
although there are
ways to compress that.

406
00:18:13,414 --> 00:18:16,330
And Git does some compression behind
the scenes to try and save space.

407
00:18:16,330 --> 00:18:19,454
But you can generally think of it as
storing a separate version of the file

408
00:18:19,454 --> 00:18:21,130
every time you make a change.

409
00:18:21,130 --> 00:18:21,753
Yeah?

410
00:18:21,753 --> 00:18:25,187
AUDIENCE: Can you make
multiple [INAUDIBLE]

411
00:18:25,187 --> 00:18:25,770
BRIAN YU: Yes.

412
00:18:25,770 --> 00:18:27,894
If you make two commits
and then you type Git push,

413
00:18:27,894 --> 00:18:30,789
that will push both of
those commits up to GitHub.

414
00:18:30,789 --> 00:18:31,330
Other things?

415
00:18:31,330 --> 00:18:32,160
Other questions?

416
00:18:32,160 --> 00:18:35,940


417
00:18:35,940 --> 00:18:37,560
OK, so let's explore a little more.

418
00:18:37,560 --> 00:18:40,170
And actually, before we go ahead, can
I just get a little bit of feedback

419
00:18:40,170 --> 00:18:42,690
with the smiley faces about,
how much are we following this?

420
00:18:42,690 --> 00:18:46,150
How much does it makes sense,
are we feeling about it?

421
00:18:46,150 --> 00:18:47,984
OK, it's a mix of mostly
green, some yellow.

422
00:18:47,984 --> 00:18:49,025
I'll take some questions.

423
00:18:49,025 --> 00:18:49,642
Yeah?

424
00:18:49,642 --> 00:18:53,016
AUDIENCE: If you make multiple
[INAUDIBLE] same file, will it show--

425
00:18:53,016 --> 00:18:57,354
[INAUDIBLE] let's say
[INAUDIBLE] data set

426
00:18:57,354 --> 00:19:00,710
[INAUDIBLE] added something else to that
file, or would [INAUDIBLE] absolutely

427
00:19:00,710 --> 00:19:05,880
[INAUDIBLE] committed [INAUDIBLE]
specifically [INAUDIBLE]

428
00:19:05,880 --> 00:19:08,450
BRIAN YU: The default will be
the most recent on GitHub, yes.

429
00:19:08,450 --> 00:19:09,008
Yeah?

430
00:19:09,008 --> 00:19:11,100
AUDIENCE: Why would you commit
something and not push it?

431
00:19:11,100 --> 00:19:13,560
BRIAN YU: Why would you commit
something and not push it?

432
00:19:13,560 --> 00:19:14,730
Good question.

433
00:19:14,730 --> 00:19:18,480
Pushing it is only relevant
if you care about other people

434
00:19:18,480 --> 00:19:21,206
online being able to
access that same version.

435
00:19:21,206 --> 00:19:23,580
And so there are many times
when I'm working on a project

436
00:19:23,580 --> 00:19:26,880
independently, for instance, and I
might care about committing things

437
00:19:26,880 --> 00:19:28,590
for myself, but I don't
really care about other people

438
00:19:28,590 --> 00:19:30,810
on the internet being able
to access the repository.

439
00:19:30,810 --> 00:19:32,851
And so then you might
commit, but not really care

440
00:19:32,851 --> 00:19:35,490
about pushing because you
don't care about other people

441
00:19:35,490 --> 00:19:38,661
on the internet being able
to access the repository.

442
00:19:38,661 --> 00:19:39,300
Yeah?

443
00:19:39,300 --> 00:19:44,680
AUDIENCE: Why did you
add it again [INAUDIBLE]

444
00:19:44,680 --> 00:19:45,760
BRIAN YU: So git add--

445
00:19:45,760 --> 00:19:48,220
so the question is, why did
I add before I committed?

446
00:19:48,220 --> 00:19:50,830
It's sort of a two-step
process that Git uses.

447
00:19:50,830 --> 00:19:53,620
First, you add files
and put them in what's

448
00:19:53,620 --> 00:19:56,830
called the staging area, which is to
say you tell Git that this is a file you

449
00:19:56,830 --> 00:19:58,510
want to include in your next commit.

450
00:19:58,510 --> 00:20:00,310
And then you actually do the commit.

451
00:20:00,310 --> 00:20:03,220
The reasoning here might be
maybe you've made modifications

452
00:20:03,220 --> 00:20:06,370
to a bunch of different files, but
you don't want to commit all of them

453
00:20:06,370 --> 00:20:07,150
at the same time.

454
00:20:07,150 --> 00:20:09,760
Maybe you are only done with two or
three of them and are ready to commit,

455
00:20:09,760 --> 00:20:11,330
but the others, you're not ready yet.

456
00:20:11,330 --> 00:20:13,870
So you can only add the files
you actually want to commit,

457
00:20:13,870 --> 00:20:17,080
and then you say, OK, commit to
say commit all of these files.

458
00:20:17,080 --> 00:20:19,210
So there's always this
additional add step.

459
00:20:19,210 --> 00:20:21,760
Now, there's shorthand
workarounds to this.

460
00:20:21,760 --> 00:20:27,520
If you type, instead of a git commit
dash m, you do git commit dash am--

461
00:20:27,520 --> 00:20:29,020
the "a" for add--

462
00:20:29,020 --> 00:20:32,470
that will automatically add
all of the changed files

463
00:20:32,470 --> 00:20:34,830
and commit at the same time
so you can combine the add

464
00:20:34,830 --> 00:20:36,490
and commit steps together.

465
00:20:36,490 --> 00:20:39,812
But there is still that add
step that needs to happen.

466
00:20:39,812 --> 00:20:46,430
AUDIENCE: If you already added the
file, [INAUDIBLE] added and then you

467
00:20:46,430 --> 00:20:47,680
BRIAN YU: Yeah, good question.

468
00:20:47,680 --> 00:20:51,580
So the idea here is even if I've
added it and it's in the repository,

469
00:20:51,580 --> 00:20:55,516
if I make changes to the file, I need to
tell Git that those changes to the file

470
00:20:55,516 --> 00:20:57,640
are ones that I want to
include in the next commit.

471
00:20:57,640 --> 00:20:59,660
So I still need to add it again.

472
00:20:59,660 --> 00:21:00,290
Yeah?

473
00:21:00,290 --> 00:21:03,167
AUDIENCE: So how do you access
the Git history if you're just

474
00:21:03,167 --> 00:21:04,889
working with a [INAUDIBLE]

475
00:21:04,889 --> 00:21:05,930
BRIAN YU: Great question.

476
00:21:05,930 --> 00:21:08,870
We'll get to that in a moment.

477
00:21:08,870 --> 00:21:09,830
Yes?

478
00:21:09,830 --> 00:21:12,050
AUDIENCE: Do you have
to download [INAUDIBLE]

479
00:21:12,050 --> 00:21:13,897
BRIAN YU: Do you have to download Git--

480
00:21:13,897 --> 00:21:15,230
AUDIENCE: The GitHub [INAUDIBLE]

481
00:21:15,230 --> 00:21:16,810
BRIAN YU: Yes.

482
00:21:16,810 --> 00:21:19,060
So the question is, how
do you actually use Git?

483
00:21:19,060 --> 00:21:21,670
You'll need to install
Git, most likely, first.

484
00:21:21,670 --> 00:21:24,302
If you go to either Git
or GitHub's website,

485
00:21:24,302 --> 00:21:26,260
there'll be instructions
for how to install it.

486
00:21:26,260 --> 00:21:28,720
It varies a little bit, depending
on which platform you're using,

487
00:21:28,720 --> 00:21:30,730
but you'll likely need
to install it first.

488
00:21:30,730 --> 00:21:33,250
For Macs, it comes with
the Xcode developer

489
00:21:33,250 --> 00:21:36,254
tools, which it may ask you to
download, but there are other ways

490
00:21:36,254 --> 00:21:37,420
to get access to it as well.

491
00:21:37,420 --> 00:21:40,230


492
00:21:40,230 --> 00:21:40,890
Other things?

493
00:21:40,890 --> 00:21:43,550


494
00:21:43,550 --> 00:21:45,620
OK.

495
00:21:45,620 --> 00:21:50,000
The opposite of git push, as
you might imagine, is git pull.

496
00:21:50,000 --> 00:21:52,940
So the idea here is that before,
we talked about situations

497
00:21:52,940 --> 00:21:55,700
where what's on my computer is
more recent than whatever is up

498
00:21:55,700 --> 00:21:56,630
on the server.

499
00:21:56,630 --> 00:21:58,190
Sometimes it's going to
be the other way around.

500
00:21:58,190 --> 00:22:00,530
Whatever is up on the server is
going to be more recent than whatever

501
00:22:00,530 --> 00:22:01,790
I have on my computer.

502
00:22:01,790 --> 00:22:03,957
And I want to take the
changes from up on the server

503
00:22:03,957 --> 00:22:06,290
and download them down to my
computer so that I can then

504
00:22:06,290 --> 00:22:07,670
use them and have access to them.

505
00:22:07,670 --> 00:22:09,620
To do that, I just run
the command git pull.

506
00:22:09,620 --> 00:22:11,570
That takes the changes
from up on the server,

507
00:22:11,570 --> 00:22:15,040
downloads them onto my computer,
such that I now have access to them.

508
00:22:15,040 --> 00:22:18,940
And so I'll show you an
example of that as well.

509
00:22:18,940 --> 00:22:24,590
GitHub's user interface actually lets
me make modifications to the code.

510
00:22:24,590 --> 00:22:28,430
So I can go into hello.html
and actually edit it.

511
00:22:28,430 --> 00:22:35,060
So I'll go to hello.html,
I'll edit it, and I will say--

512
00:22:35,060 --> 00:22:41,730
let me go ahead and add a comma between
Hello and World, just a simple change.

513
00:22:41,730 --> 00:22:43,920
And I'm going to say, OK, add a comma.

514
00:22:43,920 --> 00:22:45,360
That's my commit message.

515
00:22:45,360 --> 00:22:46,950
And I'm going to commit those changes.

516
00:22:46,950 --> 00:22:49,410
So I've committed those changes
just by GitHub's web user

517
00:22:49,410 --> 00:22:50,576
interface, which you can do.

518
00:22:50,576 --> 00:22:53,410
Just edit a file and
make a commit online.

519
00:22:53,410 --> 00:22:55,470
OK, so that's what I've done now.

520
00:22:55,470 --> 00:23:01,170
But on my version of the repository
here, if I look at hello.html,

521
00:23:01,170 --> 00:23:04,740
it's still Hello World, no comma,
because the version on GitHub

522
00:23:04,740 --> 00:23:06,879
is more recent than the
version on my computer.

523
00:23:06,879 --> 00:23:08,670
And I would like to
pull down those changes

524
00:23:08,670 --> 00:23:11,610
so that my version on my
computer is up-to-date.

525
00:23:11,610 --> 00:23:17,920
So to do that, I just type git pull,
press Return, and here's what it says.

526
00:23:17,920 --> 00:23:20,160
All right, it's updated my repository.

527
00:23:20,160 --> 00:23:23,972
And it says "one file changed,
one insertion, one deletion."

528
00:23:23,972 --> 00:23:27,180
Git is not quite smart enough to know
that I've taken one line and edited it.

529
00:23:27,180 --> 00:23:30,226
So if I take one line and edit it,
it sees that as removing the line

530
00:23:30,226 --> 00:23:31,350
and adding in the new line.

531
00:23:31,350 --> 00:23:33,640
So that's what one insertion,
one deletion means.

532
00:23:33,640 --> 00:23:35,880
And now, if I check the file,
you'll notice that there's actually

533
00:23:35,880 --> 00:23:37,230
a comma between Hello and World.

534
00:23:37,230 --> 00:23:39,030
I've pulled down the
latest version of the file

535
00:23:39,030 --> 00:23:41,196
and now the file on my
computer has updated in order

536
00:23:41,196 --> 00:23:43,665
to reflect those changes.

537
00:23:43,665 --> 00:23:44,540
Questions about that?

538
00:23:44,540 --> 00:23:47,820


539
00:23:47,820 --> 00:23:49,220
OK.

540
00:23:49,220 --> 00:23:53,570
So we can git push to push our changes
from our computer up to the server.

541
00:23:53,570 --> 00:23:56,210
We can git pull to take
changes from the server

542
00:23:56,210 --> 00:23:58,610
and pull them down onto
our local computer.

543
00:23:58,610 --> 00:24:00,890
What can go wrong here?

544
00:24:00,890 --> 00:24:03,360
What are some problems you
imagine might start to come up?

545
00:24:03,360 --> 00:24:04,472
Yeah?

546
00:24:04,472 --> 00:24:07,434
AUDIENCE: [INAUDIBLE]

547
00:24:07,434 --> 00:24:10,100
BRIAN YU: People trying to push
different versions up to GitHub.

548
00:24:10,100 --> 00:24:10,550
All right, great.

549
00:24:10,550 --> 00:24:12,890
So what might go wrong if
multiple people are trying

550
00:24:12,890 --> 00:24:15,374
to make changes to the same repository?

551
00:24:15,374 --> 00:24:16,040
What can happen?

552
00:24:16,040 --> 00:24:21,331


553
00:24:21,331 --> 00:24:22,293
Yeah?

554
00:24:22,293 --> 00:24:25,355
AUDIENCE: [INAUDIBLE]

555
00:24:25,355 --> 00:24:25,980
BRIAN YU: Yeah.

556
00:24:25,980 --> 00:24:29,180
So imagine a situation where
multiple people are making changes

557
00:24:29,180 --> 00:24:34,610
to the same line and now Git is not
going to be able to resolve for itself

558
00:24:34,610 --> 00:24:35,570
how to deal with that.

559
00:24:35,570 --> 00:24:39,080
Which version should it actually
be if person A has made this change

560
00:24:39,080 --> 00:24:40,540
and person B has made that change?

561
00:24:40,540 --> 00:24:42,140
Git is normally pretty
smart about things.

562
00:24:42,140 --> 00:24:44,120
If I'm adding something
to the beginning of a file

563
00:24:44,120 --> 00:24:46,120
and someone else is adding
something to the end of the file,

564
00:24:46,120 --> 00:24:47,750
Git is usually pretty
smart about just being

565
00:24:47,750 --> 00:24:49,470
able to merge those changes together.

566
00:24:49,470 --> 00:24:51,530
But sometimes you'll
run into situations,

567
00:24:51,530 --> 00:24:55,020
when people are working on the same
file, where we can't quite resolve it.

568
00:24:55,020 --> 00:24:57,020
And this brings up what
we call merge conflicts,

569
00:24:57,020 --> 00:24:59,240
when we try to merge
two people's changes

570
00:24:59,240 --> 00:25:01,550
and we can't resolve those differences.

571
00:25:01,550 --> 00:25:04,080
And that generates what
we call a merge conflict.

572
00:25:04,080 --> 00:25:07,580
And so that might happen
if I git pull some changes.

573
00:25:07,580 --> 00:25:12,230
I pull some changes down from GitHub,
but the changes I'm pulling conflict

574
00:25:12,230 --> 00:25:14,260
with whatever I have on my repository.

575
00:25:14,260 --> 00:25:15,710
There is some conflict there.

576
00:25:15,710 --> 00:25:18,380
And so rather than being
able to actually merge,

577
00:25:18,380 --> 00:25:19,520
it's going to say conflict.

578
00:25:19,520 --> 00:25:21,860
There was a merge conflict in some file.

579
00:25:21,860 --> 00:25:23,150
The automatic merge failed.

580
00:25:23,150 --> 00:25:26,077
I need to fix the conflicts
and then commit the results.

581
00:25:26,077 --> 00:25:27,410
All right, there's some problem.

582
00:25:27,410 --> 00:25:28,370
We need to fix them.

583
00:25:28,370 --> 00:25:30,350
You open up the file and you'll
see something really cryptic

584
00:25:30,350 --> 00:25:31,641
that looks something like this.

585
00:25:31,641 --> 00:25:34,069
This can be strange
and confusing at first.

586
00:25:34,069 --> 00:25:36,860
I'll try and help you decipher what
it is that this actually means.

587
00:25:36,860 --> 00:25:41,640
What you'll see is between the left
arrow symbols and the equal signs,

588
00:25:41,640 --> 00:25:45,710
these are your changes, the changes
that you've made on your repository.

589
00:25:45,710 --> 00:25:49,310
And the changes between the equal
signs and the greater than signs, these

590
00:25:49,310 --> 00:25:51,500
are the remote changes,
the changes that you're

591
00:25:51,500 --> 00:25:55,070
trying to merge in to
whatever it is that you have.

592
00:25:55,070 --> 00:25:57,590
And this long sequence of
numbers and letters, this

593
00:25:57,590 --> 00:25:59,540
is what we call a commit hash.

594
00:25:59,540 --> 00:26:01,939
Every time you make a
commit, Git gives it

595
00:26:01,939 --> 00:26:04,730
a commit hash, which is just a long
sequence of numbers and letters

596
00:26:04,730 --> 00:26:06,680
to uniquely identify that commit.

597
00:26:06,680 --> 00:26:08,900
This is just telling you
which commit is actually

598
00:26:08,900 --> 00:26:10,749
the one that's creating the conflict.

599
00:26:10,749 --> 00:26:13,040
And so what do you do when
you see something like this?

600
00:26:13,040 --> 00:26:16,040
The first thing you can do is
remove those marker symbols.

601
00:26:16,040 --> 00:26:19,220
And then you need to decide what it is
that the file should look like, maybe

602
00:26:19,220 --> 00:26:20,884
remove any excess whitespace.

603
00:26:20,884 --> 00:26:24,050
And when the file looks the way you
want it to look, you commit the results.

604
00:26:24,050 --> 00:26:26,150
Basically, you need to
manually go in and tell

605
00:26:26,150 --> 00:26:29,390
Git how it is that you want to
resolve these different conflicts.

606
00:26:29,390 --> 00:26:32,240
Some modern text editor come
built in with some automated

607
00:26:32,240 --> 00:26:34,040
ways of trying to help you do that.

608
00:26:34,040 --> 00:26:37,550
But in short, you have to do
something like this every time.

609
00:26:37,550 --> 00:26:39,370
So let's give that a try.

610
00:26:39,370 --> 00:26:43,775
I am going to go to Hello World and
maybe add some exclamation points.

611
00:26:43,775 --> 00:26:46,940
We'll add two exclamation points.

612
00:26:46,940 --> 00:26:51,590
And I'll do git commit dash am to
combine the add and the merge step.

613
00:26:51,590 --> 00:26:56,990
And say, add two exclamation points.

614
00:26:56,990 --> 00:26:57,530
All right.

615
00:26:57,530 --> 00:27:01,410


616
00:27:01,410 --> 00:27:03,860
OK.

617
00:27:03,860 --> 00:27:08,300
And then up on this GitHub
repository, I'm going to edit it.

618
00:27:08,300 --> 00:27:13,580
And let's, I don't know,
add five exclamation points.

619
00:27:13,580 --> 00:27:20,650


620
00:27:20,650 --> 00:27:22,510
So I've made a change
on my local computer.

621
00:27:22,510 --> 00:27:23,718
I've made a change on GitHub.

622
00:27:23,718 --> 00:27:25,750
And importantly, these changes conflict.

623
00:27:25,750 --> 00:27:27,646
They are changes to
the same line of code

624
00:27:27,646 --> 00:27:30,520
and Git is not going to know, when
it tries to take these two changes

625
00:27:30,520 --> 00:27:34,390
and merge them together,
which one should it listen to.

626
00:27:34,390 --> 00:27:35,790
So I go back here.

627
00:27:35,790 --> 00:27:40,830
And now, if I tried
to git pull, I'm going

628
00:27:40,830 --> 00:27:44,340
to get, OK, trying to
automerge hello.html, conflict.

629
00:27:44,340 --> 00:27:47,690
Merge conflict and HTML,
automatic merge failed.

630
00:27:47,690 --> 00:27:50,470
Fix the conflicts and
then commit the results.

631
00:27:50,470 --> 00:27:52,140
So let's take a look at it.

632
00:27:52,140 --> 00:27:55,770
Here's hello.html, and VS code
is doing some fancy highlighting

633
00:27:55,770 --> 00:27:58,620
to try and make it clear to
me what exactly is going on.

634
00:27:58,620 --> 00:28:03,480
But basically, between the left
arrow symbols and the equal sign,

635
00:28:03,480 --> 00:28:06,750
this is my version, the one with
just three exclamation points here.

636
00:28:06,750 --> 00:28:08,961
Then beneath it is the
version that I'm trying

637
00:28:08,961 --> 00:28:11,210
to pull in, the one with
even more exclamation points.

638
00:28:11,210 --> 00:28:13,835
Here is the commit hash of the
one that's causing the conflict.

639
00:28:13,835 --> 00:28:17,640
And I basically need to manually resolve
this conflict in order to figure out

640
00:28:17,640 --> 00:28:19,470
what should actually happen next.

641
00:28:19,470 --> 00:28:23,250
And so in order to do that,
well, I can go ahead and say--

642
00:28:23,250 --> 00:28:25,370
and the VS code actually
gives me some buttons,

643
00:28:25,370 --> 00:28:28,140
like either accept my current
change, accept the incoming,

644
00:28:28,140 --> 00:28:31,170
or sort of compare them in order
to figure out how to resolve it.

645
00:28:31,170 --> 00:28:35,590
I'm just going to resolve it manually
for now by deleting this line,

646
00:28:35,590 --> 00:28:37,792
deleting that line, deleting that line.

647
00:28:37,792 --> 00:28:39,000
So here are the two versions.

648
00:28:39,000 --> 00:28:42,684
And I sort of just need to decide, how
am I going to resolve these together?

649
00:28:42,684 --> 00:28:44,100
And maybe I'll say, you know what?

650
00:28:44,100 --> 00:28:47,440
I'll just use all of
the exclamation points.

651
00:28:47,440 --> 00:28:50,160
Let's put them all
together and save that.

652
00:28:50,160 --> 00:28:52,750
This is the version
that I now want to keep.

653
00:28:52,750 --> 00:28:56,880
I'll do git commit dash am.

654
00:28:56,880 --> 00:28:59,690
I'll say, fix merge conflict.

655
00:28:59,690 --> 00:29:00,260
And OK.

656
00:29:00,260 --> 00:29:01,190
Great.

657
00:29:01,190 --> 00:29:05,070
Now, if I type git push, say, OK,
push those changes back up to GitHub,

658
00:29:05,070 --> 00:29:07,220
those are changes that I want to save.

659
00:29:07,220 --> 00:29:09,710
I refresh the page, and all right.

660
00:29:09,710 --> 00:29:11,690
Now I've been able to
fix the merge conflict

661
00:29:11,690 --> 00:29:14,600
and I have the long sequence of
exclamation points that I want.

662
00:29:14,600 --> 00:29:18,394
So I've been able to resolve the changes
that were conflicting between the two.

663
00:29:18,394 --> 00:29:20,560
Doesn't always come up when
you're working with Git,

664
00:29:20,560 --> 00:29:23,601
but comes up often enough that it's
good to know what a merge conflict is

665
00:29:23,601 --> 00:29:26,800
and how you can actually deal with it.

666
00:29:26,800 --> 00:29:28,480
What questions do you have about that?

667
00:29:28,480 --> 00:29:30,360
Merge conflicts, pushing, pulling.

668
00:29:30,360 --> 00:29:31,007
Yeah?

669
00:29:31,007 --> 00:29:33,740
AUDIENCE: What would happen
if, say, you were working

670
00:29:33,740 --> 00:29:36,474
on the top part of the
component and someone else was

671
00:29:36,474 --> 00:29:37,965
working at the bottom part.

672
00:29:37,965 --> 00:29:40,947
[INAUDIBLE] variable name,
but you didn't realize it,

673
00:29:40,947 --> 00:29:43,510
would that [INAUDIBLE] merge
[INAUDIBLE] or would it not?

674
00:29:43,510 --> 00:29:44,510
BRIAN YU: Good question.

675
00:29:44,510 --> 00:29:47,218
So the question is, all right,
we're working on the same VS code.

676
00:29:47,218 --> 00:29:50,300
I make some changes to the top
of the code, and that's fine.

677
00:29:50,300 --> 00:29:52,790
My partner makes some changes
to the bottom of the code.

678
00:29:52,790 --> 00:29:55,682
But we're using the same variable.

679
00:29:55,682 --> 00:29:57,890
Maybe we're using the same
variable in different ways

680
00:29:57,890 --> 00:29:59,931
and don't realize what
the other person is doing.

681
00:29:59,931 --> 00:30:01,790
Is Git going to catch
that merge conflict?

682
00:30:01,790 --> 00:30:02,290
It's not.

683
00:30:02,290 --> 00:30:05,390
Git is not smart enough to know
anything about the logic of the program.

684
00:30:05,390 --> 00:30:08,180
It's just looking at lines of code
and figuring out how they work.

685
00:30:08,180 --> 00:30:09,860
And so it's still something
you need to be careful about.

686
00:30:09,860 --> 00:30:10,740
You still need to be careful.

687
00:30:10,740 --> 00:30:12,320
Just because you don't
have a merge complex

688
00:30:12,320 --> 00:30:15,134
doesn't mean that things are going
to go together perfectly the way

689
00:30:15,134 --> 00:30:16,050
that you want them to.

690
00:30:16,050 --> 00:30:17,750
So something to be aware of.

691
00:30:17,750 --> 00:30:18,320
Good point.

692
00:30:18,320 --> 00:30:18,960
Yeah?

693
00:30:18,960 --> 00:30:26,810
AUDIENCE: Sorry, but I have not been
able to make it work on [INAUDIBLE]

694
00:30:26,810 --> 00:30:28,110
BRIAN YU: OK.

695
00:30:28,110 --> 00:30:30,860
When we get to project time, come
find one of the teaching fellows

696
00:30:30,860 --> 00:30:33,671
and we can help you try and solve that.

697
00:30:33,671 --> 00:30:34,170
Yeah?

698
00:30:34,170 --> 00:30:40,300
AUDIENCE: [INAUDIBLE]

699
00:30:40,300 --> 00:30:41,300
BRIAN YU: Good question.

700
00:30:41,300 --> 00:30:44,200
How do you delete a
file from a repository?

701
00:30:44,200 --> 00:30:46,540
On your normal command
line, rm is the command

702
00:30:46,540 --> 00:30:50,540
to delete a file. rm for remove, so
you do rm space name of the file.

703
00:30:50,540 --> 00:30:53,176
If you do git rm, followed
by the name of the file,

704
00:30:53,176 --> 00:30:56,050
that's going to remove the file from
the next time you make a commit.

705
00:30:56,050 --> 00:30:58,258
So the next time you make
a commit, you'll save that.

706
00:30:58,258 --> 00:31:01,180
But because Git does store the
history of all the commits,

707
00:31:01,180 --> 00:31:04,511
if you wanted to go back and get
that file removed, you still could.

708
00:31:04,511 --> 00:31:05,010
Yeah?

709
00:31:05,010 --> 00:31:07,860


710
00:31:07,860 --> 00:31:11,670
AUDIENCE: [INAUDIBLE]

711
00:31:11,670 --> 00:31:15,870
BRIAN YU: So the question is, how do you
save changes to specific files rather

712
00:31:15,870 --> 00:31:17,310
than all the files you've changed?

713
00:31:17,310 --> 00:31:19,110
You do that via the git add step.

714
00:31:19,110 --> 00:31:21,600
So when you type git add,
you specify which files

715
00:31:21,600 --> 00:31:23,640
you want to save in your next commit.

716
00:31:23,640 --> 00:31:26,220
And so if you've edited 10
files, but only half of them

717
00:31:26,220 --> 00:31:28,539
are ones you want to
commit, only add those half.

718
00:31:28,539 --> 00:31:30,330
And then when you
commit, you're only going

719
00:31:30,330 --> 00:31:33,121
to commit the ones that you've
added to the so-called staging area.

720
00:31:33,121 --> 00:31:35,630


721
00:31:35,630 --> 00:31:37,160
Great questions.

722
00:31:37,160 --> 00:31:37,960
Other things?

723
00:31:37,960 --> 00:31:39,710
We'll get an opportunity
to practice, too.

724
00:31:39,710 --> 00:31:40,210
Yeah?

725
00:31:40,210 --> 00:31:42,345
AUDIENCE: If you're adding
everything-- if you're

726
00:31:42,345 --> 00:31:47,195
adding [INAUDIBLE] in the directory,
[INAUDIBLE] add all of the files,

727
00:31:47,195 --> 00:31:51,570
even if you haven't made any changes
to them, will it still push all of them

728
00:31:51,570 --> 00:31:53,610
up as well, like the
ones that aren't changed?

729
00:31:53,610 --> 00:31:56,126
Or are they just kept the
same in the previous commit?

730
00:31:56,126 --> 00:31:57,670
BRIAN YU: Yeah, they are.

731
00:31:57,670 --> 00:31:58,170
Yeah.

732
00:31:58,170 --> 00:32:00,912
So git add dot-- dot stands
for current directory.

733
00:32:00,912 --> 00:32:03,870
That's basically a way of saying,
add everything that may have changed.

734
00:32:03,870 --> 00:32:07,676


735
00:32:07,676 --> 00:32:08,800
All right, great questions.

736
00:32:08,800 --> 00:32:12,440
A couple other commands
that we'll look at briefly.

737
00:32:12,440 --> 00:32:13,930
One is git log.

738
00:32:13,930 --> 00:32:17,140
git log is a command that basically
just shows you a history of the commits

739
00:32:17,140 --> 00:32:17,590
that you've made.

740
00:32:17,590 --> 00:32:20,030
It's a way of seeing all your
commits on the command line.

741
00:32:20,030 --> 00:32:22,570
So I type something like git log,
and it basically just [INAUDIBLE]

742
00:32:22,570 --> 00:32:25,300
here is a commit that I made, and here's
when I made it and what I changed,

743
00:32:25,300 --> 00:32:27,370
and here's another
commit and what happened.

744
00:32:27,370 --> 00:32:31,920
And so if I type and git
log, I see, all right.

745
00:32:31,920 --> 00:32:34,710
Here's when I fixed the
merge conflict at 14:33.

746
00:32:34,710 --> 00:32:37,480
Added five exclamation points,
added two exclamation points.

747
00:32:37,480 --> 00:32:39,570
They're in reverse
chronological order, but I

748
00:32:39,570 --> 00:32:42,270
can see this whole history of
all the comments that I've made

749
00:32:42,270 --> 00:32:43,770
and what they're commit hashes were.

750
00:32:43,770 --> 00:32:47,904


751
00:32:47,904 --> 00:32:49,370
OK.

752
00:32:49,370 --> 00:32:53,210
git reset is probably the
last command that we'll

753
00:32:53,210 --> 00:32:55,070
look at before we talk about branching.

754
00:32:55,070 --> 00:32:58,730
This is a way of going back to
a previous version of a commit.

755
00:32:58,730 --> 00:33:02,480
And so if you type git
reset dash dash hard--

756
00:33:02,480 --> 00:33:05,190
so there's differences between
soft resets and hard resets,

757
00:33:05,190 --> 00:33:08,660
that we won't quite go into
today, you can experiment with.

758
00:33:08,660 --> 00:33:11,390
Followed by a commit hash, that
will basically take you back

759
00:33:11,390 --> 00:33:13,610
to a previous version of the file.

760
00:33:13,610 --> 00:33:16,100
So git reset dash dash hard,
followed by a commit hash,

761
00:33:16,100 --> 00:33:19,490
takes you back to this
particular comment

762
00:33:19,490 --> 00:33:22,970
that will eliminate all those
changes and take you back.

763
00:33:22,970 --> 00:33:25,810
And you can also go back to
a particular branch as well.

764
00:33:25,810 --> 00:33:27,560
And when we start to
talk about branching,

765
00:33:27,560 --> 00:33:30,930
you'll see this a little
more clearly, too.

766
00:33:30,930 --> 00:33:34,670
So let's talk about making
changes to a repository,

767
00:33:34,670 --> 00:33:38,780
and what exactly happens as you go about
the process of working on a repository,

768
00:33:38,780 --> 00:33:41,757
working on a larger project, and
what making changes looks like.

769
00:33:41,757 --> 00:33:44,840
So you make your first commit, and
maybe now you're adding features to it.

770
00:33:44,840 --> 00:33:46,220
You're making changes to it.

771
00:33:46,220 --> 00:33:48,062
You're making some more changes to it.

772
00:33:48,062 --> 00:33:49,520
You start working on a new feature.

773
00:33:49,520 --> 00:33:53,040


774
00:33:53,040 --> 00:33:55,010
You keep working on that new feature.

775
00:33:55,010 --> 00:33:57,950
What happens, then, if you
discover a bug in your program?

776
00:33:57,950 --> 00:33:59,457
You want to go and fix that bug.

777
00:33:59,457 --> 00:34:01,790
But you want to fix that bug,
but simultaneously, you're

778
00:34:01,790 --> 00:34:05,990
also working on this new feature,
and that's not quite ideal

779
00:34:05,990 --> 00:34:08,960
when you want to figure
out some strategy for being

780
00:34:08,960 --> 00:34:10,880
able to deal with this,
being able to work

781
00:34:10,880 --> 00:34:14,110
on two different parts of
a project simultaneously.

782
00:34:14,110 --> 00:34:15,860
And so that's what
branching is, this idea

783
00:34:15,860 --> 00:34:18,193
you'll hear about a lot when
we start to talk about Git,

784
00:34:18,193 --> 00:34:20,810
and something that's built
into the core of what Git is.

785
00:34:20,810 --> 00:34:23,816
It's designed to allow you to branch
very easily, where the idea here

786
00:34:23,816 --> 00:34:25,190
is you've made your first commit.

787
00:34:25,190 --> 00:34:26,690
You're making some
changes to that commit.

788
00:34:26,690 --> 00:34:28,760
You're making some more
changes to your project.

789
00:34:28,760 --> 00:34:31,280
And now you want to start
working on a new feature,

790
00:34:31,280 --> 00:34:35,179
but you've got this, what we might call,
the master version of your repository,

791
00:34:35,179 --> 00:34:36,916
some version of your code that works.

792
00:34:36,916 --> 00:34:38,790
And when you start
working on in near future,

793
00:34:38,790 --> 00:34:41,330
you don't want it to be on the
master branch, so to speak.

794
00:34:41,330 --> 00:34:44,185
You want to work on it separately,
such that when it's done,

795
00:34:44,185 --> 00:34:46,310
you can merge it back in
with the rest of the code.

796
00:34:46,310 --> 00:34:48,560
So rather than start working
on a new feature and just

797
00:34:48,560 --> 00:34:50,435
keep it on the same
branch, what you might do

798
00:34:50,435 --> 00:34:54,590
is you might branch off, start working
on a new feature on a different branch

799
00:34:54,590 --> 00:34:57,060
and keep working on that new
feature on a different branch.

800
00:34:57,060 --> 00:34:58,550
And now you might imagine,
OK, you discovered

801
00:34:58,550 --> 00:35:01,632
that way back in the original version
of the code, there's some bug.

802
00:35:01,632 --> 00:35:04,340
And so you can say, all right,
this was when I first branched off

803
00:35:04,340 --> 00:35:07,680
to start working on the new feature, but
the bug is in this version of the code.

804
00:35:07,680 --> 00:35:11,600
Let me just go ahead and fix the
bug on this version of the code.

805
00:35:11,600 --> 00:35:14,060
And now, what I've got going
on in two different branches,

806
00:35:14,060 --> 00:35:17,295
I've got this master branch, the
original version of the code,

807
00:35:17,295 --> 00:35:20,420
and then I have my feature branch,
which could be called whatever you want,

808
00:35:20,420 --> 00:35:23,420
just some name to describe the
feature that I'm currently working on.

809
00:35:23,420 --> 00:35:25,730
And I've got these two
independent versions of the code

810
00:35:25,730 --> 00:35:28,670
that I can switch back
and forth between.

811
00:35:28,670 --> 00:35:33,290
Git has a term called the HEAD of
the repository, capital HEAD, that

812
00:35:33,290 --> 00:35:36,410
just represents, where in
the repository am I now?

813
00:35:36,410 --> 00:35:38,870
And by default, HEAD is going
to be whatever master is.

814
00:35:38,870 --> 00:35:40,880
It's going to be pointing
to the master branch.

815
00:35:40,880 --> 00:35:42,200
But I could move my HEAD.

816
00:35:42,200 --> 00:35:44,990
I could move where I am in the
repository and say, you know what?

817
00:35:44,990 --> 00:35:48,020
I actually want to work on the
feature branch instead, for instance.

818
00:35:48,020 --> 00:35:50,720
And so we'll show you how you
can check out different branches,

819
00:35:50,720 --> 00:35:52,689
so to speak, in just a moment.

820
00:35:52,689 --> 00:35:54,480
So I'm keeping working
on this new feature.

821
00:35:54,480 --> 00:35:54,979
I fixed the.

822
00:35:54,979 --> 00:35:56,440
Bug and the feature is now done.

823
00:35:56,440 --> 00:35:58,820
I'm ready to bring it back
into the master branch.

824
00:35:58,820 --> 00:36:00,570
The last thing I can
do is say, all right,

825
00:36:00,570 --> 00:36:03,120
I want to take these two changes,
I want to merge them back

826
00:36:03,120 --> 00:36:06,360
together so that this new feature
is now on the master branch,

827
00:36:06,360 --> 00:36:07,950
but so is the bug fix.

828
00:36:07,950 --> 00:36:09,750
Everything comes together in that way.

829
00:36:09,750 --> 00:36:10,418
Yeah?

830
00:36:10,418 --> 00:36:12,715
AUDIENCE: Before, when
you moved around the HEAD,

831
00:36:12,715 --> 00:36:15,465
what's the significance of where
the HEAD is and what the HEAD is?

832
00:36:15,465 --> 00:36:18,464
BRIAN YU: The question is, what's the
significance of where the HEAD is?

833
00:36:18,464 --> 00:36:23,560
It represents whatever-- which
files I am currently working on.

834
00:36:23,560 --> 00:36:25,549
And so if I try and open
up a file to edit it,

835
00:36:25,549 --> 00:36:27,340
the version of the file
that I'm looking at

836
00:36:27,340 --> 00:36:29,410
is whatever version the
HEAD is pointing to.

837
00:36:29,410 --> 00:36:32,110
So we'll see that in just a moment, too.

838
00:36:32,110 --> 00:36:32,680
Other things?

839
00:36:32,680 --> 00:36:36,240


840
00:36:36,240 --> 00:36:36,864
OK.

841
00:36:36,864 --> 00:36:38,280
So let's actually give this a try.

842
00:36:38,280 --> 00:36:40,920
The commands we're going
to be using are git branch

843
00:36:40,920 --> 00:36:44,130
to go to a different
branch, git checkout

844
00:36:44,130 --> 00:36:48,600
in order to check out some
new branch, and git merge

845
00:36:48,600 --> 00:36:51,960
to say merging some things together.

846
00:36:51,960 --> 00:36:55,320
So let's go ahead and
go into My Repository.

847
00:36:55,320 --> 00:36:58,260
And let's say git checkout.

848
00:36:58,260 --> 00:37:02,430
git checkout is my way of saying,
I want to go to some new branch.

849
00:37:02,430 --> 00:37:05,100
And I don't have any
other branches right now.

850
00:37:05,100 --> 00:37:08,864
In fact, if I type git branch right
now, it will show me the branches

851
00:37:08,864 --> 00:37:09,780
that I currently have.

852
00:37:09,780 --> 00:37:11,169
I just have the master branch.

853
00:37:11,169 --> 00:37:12,960
And a little star next
to master means this

854
00:37:12,960 --> 00:37:14,670
is the branch that I'm currently on.

855
00:37:14,670 --> 00:37:17,070
I'd like to branch off,
go create a new branch.

856
00:37:17,070 --> 00:37:19,990
And so I'm going to say
git checkout out dash b.

857
00:37:19,990 --> 00:37:22,740
So git checkout will normally just
take you to a different branch.

858
00:37:22,740 --> 00:37:24,630
If I want to check out
a brand new branch,

859
00:37:24,630 --> 00:37:27,370
I'll do you git checkout dash
b to create a new branch.

860
00:37:27,370 --> 00:37:30,120
I'm going to call this branch--

861
00:37:30,120 --> 00:37:31,140
what am I going to do?

862
00:37:31,140 --> 00:37:32,280
I'll just call it Feature.

863
00:37:32,280 --> 00:37:34,950
I'm adding some new
feature to my web page.

864
00:37:34,950 --> 00:37:37,950
And so OK, switch to
a new branch feature.

865
00:37:37,950 --> 00:37:38,550
Great.

866
00:37:38,550 --> 00:37:41,760
If I type git branch right now, I
see that now I have two branches.

867
00:37:41,760 --> 00:37:43,886
I have a feature branch
and I have a master branch.

868
00:37:43,886 --> 00:37:45,593
The feature one is
the one with the star.

869
00:37:45,593 --> 00:37:47,340
That's the branch that I'm currently on.

870
00:37:47,340 --> 00:37:51,210
And the master branch is the other
branch that I have available to me.

871
00:37:51,210 --> 00:37:54,499
Here's hello.html, and I want
to add some sort of feature.

872
00:37:54,499 --> 00:37:57,540
Maybe the feature that I'm going to
add is some styling to this web page.

873
00:37:57,540 --> 00:38:00,450
So I'm going to go up
here, add a style header,

874
00:38:00,450 --> 00:38:05,050
and say, all right, H1 is going to
have a color and it's going to be blue.

875
00:38:05,050 --> 00:38:07,840
Fairly straightforward, I
just added some styling to it.

876
00:38:07,840 --> 00:38:11,620
I can test it, open up, code in
HTML, make sure it looks blue.

877
00:38:11,620 --> 00:38:12,640
Great.

878
00:38:12,640 --> 00:38:14,332
So I've added that.

879
00:38:14,332 --> 00:38:15,915
Now, I'd like to commit those changes.

880
00:38:15,915 --> 00:38:20,970
So I"m going to say git
commit dash am add styling.

881
00:38:20,970 --> 00:38:22,830
That's the change that
I made, and I want

882
00:38:22,830 --> 00:38:27,060
to save those changes
in this repository.

883
00:38:27,060 --> 00:38:30,050
So I'm on git branch
on the feature branch,

884
00:38:30,050 --> 00:38:34,580
and I have this styling, that
I'm coloring the H1 tag blue.

885
00:38:34,580 --> 00:38:37,490
But this is only a change that
I've made to the feature branch.

886
00:38:37,490 --> 00:38:43,280
If I go ahead and type git checkout
master, meaning switch branches,

887
00:38:43,280 --> 00:38:45,250
go to the master branch instead.

888
00:38:45,250 --> 00:38:46,070
Press Return.

889
00:38:46,070 --> 00:38:47,819
All right, I've switched
to branch master.

890
00:38:47,819 --> 00:38:50,090
And now, if I look at the
code, no more style code.

891
00:38:50,090 --> 00:38:53,240
The version, I've switched my
HEAD to be on the master branch.

892
00:38:53,240 --> 00:38:55,290
I'm now looking at the
code on my master branch

893
00:38:55,290 --> 00:38:57,440
and the master branch
doesn't have the styling yet.

894
00:38:57,440 --> 00:38:59,090
Only the feature branch does.

895
00:38:59,090 --> 00:39:02,180
If I say git checkout feature,
switch back to the feature branch,

896
00:39:02,180 --> 00:39:04,270
now my code has the style code there.

897
00:39:04,270 --> 00:39:06,080
You switch back and
forth between branches,

898
00:39:06,080 --> 00:39:08,756
you can get different
versions of the code.

899
00:39:08,756 --> 00:39:11,620
I switch back to master,
git checkout master.

900
00:39:11,620 --> 00:39:14,259
Now, no more styling code.

901
00:39:14,259 --> 00:39:17,050
So now, what I'd like to do is say,
OK, I'm happy with the feature.

902
00:39:17,050 --> 00:39:17,600
It works.

903
00:39:17,600 --> 00:39:18,310
I've opened up the page.

904
00:39:18,310 --> 00:39:18,893
It looks blue.

905
00:39:18,893 --> 00:39:20,440
I've tested this feature thoroughly.

906
00:39:20,440 --> 00:39:21,460
I'd like to merge it in.

907
00:39:21,460 --> 00:39:23,500
I'd like to merge it
into the master branch

908
00:39:23,500 --> 00:39:26,680
so that my master branch has
the latest version of this code.

909
00:39:26,680 --> 00:39:28,340
How do I do that?

910
00:39:28,340 --> 00:39:34,390
Well, what I can do is I can just
say git merge and then the branch

911
00:39:34,390 --> 00:39:35,470
that I want to merge in.

912
00:39:35,470 --> 00:39:39,370
So I want to merge in the feature branch
into this current branch, my master

913
00:39:39,370 --> 00:39:40,250
branch.

914
00:39:40,250 --> 00:39:41,920
So I say, git merge feature.

915
00:39:41,920 --> 00:39:45,520
And it says, "one file changed, five
insertions," which sounds about right

916
00:39:45,520 --> 00:39:47,620
for the style tag plus the style code.

917
00:39:47,620 --> 00:39:52,210
And now I'm looking at my master
branch and the style code is now there.

918
00:39:52,210 --> 00:39:54,250
So the story of what we
did there is we created

919
00:39:54,250 --> 00:39:57,940
a brand new branch, the feature branch,
added some code there, made a commit,

920
00:39:57,940 --> 00:39:59,950
then went back to the
master branch and merged

921
00:39:59,950 --> 00:40:02,240
that commit into the master branch.

922
00:40:02,240 --> 00:40:04,450
And this is a way of
version control, of being

923
00:40:04,450 --> 00:40:06,826
able to work on something
without messing up the original

924
00:40:06,826 --> 00:40:09,158
until you're satisfied with
the original, at which point

925
00:40:09,158 --> 00:40:10,730
you can merge in those changes.

926
00:40:10,730 --> 00:40:11,347
Yeah?

927
00:40:11,347 --> 00:40:12,667
AUDIENCE: [INAUDIBLE]

928
00:40:12,667 --> 00:40:14,250
BRIAN YU: Can you still get conflicts?

929
00:40:14,250 --> 00:40:14,880
Absolutely.

930
00:40:14,880 --> 00:40:18,570
If I, in my feature branch, made some
changes, and I, in my master branch,

931
00:40:18,570 --> 00:40:21,279
made other changes to the same
places and tried to merge them in,

932
00:40:21,279 --> 00:40:23,236
you can definitely get
conflicts there as well.

933
00:40:23,236 --> 00:40:24,666
You resolve those the same way.

934
00:40:24,666 --> 00:40:26,490
Yeah?

935
00:40:26,490 --> 00:40:28,740
AUDIENCE: Does your branch
still exist [INAUDIBLE]

936
00:40:28,740 --> 00:40:29,740
BRIAN YU: Good question.

937
00:40:29,740 --> 00:40:31,330
Does the feature branch still exist?

938
00:40:31,330 --> 00:40:32,040
Yeah, it does.

939
00:40:32,040 --> 00:40:32,800
I type git branch.

940
00:40:32,800 --> 00:40:34,216
The feature branch is still there.

941
00:40:34,216 --> 00:40:35,380
I can switch to it.

942
00:40:35,380 --> 00:40:37,480
If I don't want it
anymore, I can delete it.

943
00:40:37,480 --> 00:40:42,640
I think it's git branch dash capital
D for delete, followed by feature.

944
00:40:42,640 --> 00:40:44,690
And then just hard deletes the branch.

945
00:40:44,690 --> 00:40:47,440
So now, if I type git branch, just
back to only the master branch.

946
00:40:47,440 --> 00:40:51,450


947
00:40:51,450 --> 00:40:53,730
Other questions about anything so far?

948
00:40:53,730 --> 00:40:56,401


949
00:40:56,401 --> 00:40:56,900
OK.

950
00:40:56,900 --> 00:41:00,030
One last thing I'll show you
is the idea of a pull request,

951
00:41:00,030 --> 00:41:03,260
which is a GitHub-based feature for
when you're trying to merge in changes.

952
00:41:03,260 --> 00:41:05,030
This is especially useful
if you're collaborating

953
00:41:05,030 --> 00:41:07,160
with each other, multiple
people making changes.

954
00:41:07,160 --> 00:41:08,510
And you want to make
sure that whatever is

955
00:41:08,510 --> 00:41:11,870
being merged in has been reviewed, that
you have an opportunity to look at it

956
00:41:11,870 --> 00:41:15,120
and approve it before it actually
gets merged into the master branch.

957
00:41:15,120 --> 00:41:19,610
So I'm going to go ahead and push
these changes, push them up to GitHub.

958
00:41:19,610 --> 00:41:22,610


959
00:41:22,610 --> 00:41:27,329
And what I'm also going to
do is let's say, all right,

960
00:41:27,329 --> 00:41:28,370
here's the master branch.

961
00:41:28,370 --> 00:41:29,840
Here's hello.html.

962
00:41:29,840 --> 00:41:32,370
It's blue right now.

963
00:41:32,370 --> 00:41:35,540
Let's say I want to make a change,
and the change I would like to make

964
00:41:35,540 --> 00:41:38,520
is I'd like to make the
heading red instead of blue.

965
00:41:38,520 --> 00:41:40,950
So to do that, I could just
make the change and commit it.

966
00:41:40,950 --> 00:41:43,575
But to show you branching, I'll
actually create a branch first.

967
00:41:43,575 --> 00:41:46,310
So git checkout dash
b, create a new branch.

968
00:41:46,310 --> 00:41:49,950
I'll call the branch Red, let's say,
because I want to change it to red.

969
00:41:49,950 --> 00:41:52,020
I'm on a new branch called Red.

970
00:41:52,020 --> 00:41:58,920
I'm going to go to the style heading,
change the color from blue to red.

971
00:41:58,920 --> 00:42:01,760
git commit dash am,
save all these changes,

972
00:42:01,760 --> 00:42:05,280
add all the new files that I've
changed, change color to red.

973
00:42:05,280 --> 00:42:07,900
That's my commit message.

974
00:42:07,900 --> 00:42:08,700
Press Return.

975
00:42:08,700 --> 00:42:10,230
All right, I've made that change.

976
00:42:10,230 --> 00:42:14,760
Now, if I type git push, you'll see
that I don't quite get this to work.

977
00:42:14,760 --> 00:42:18,360
It says, "The current branch
red has no upstream branch."

978
00:42:18,360 --> 00:42:19,450
What does that mean?

979
00:42:19,450 --> 00:42:21,930
Well, it means that I'm
trying to push the red branch,

980
00:42:21,930 --> 00:42:24,720
but on GitHub, GitHub doesn't
know that there's a red branch.

981
00:42:24,720 --> 00:42:26,890
GitHub only knows that
there's a master branch.

982
00:42:26,890 --> 00:42:29,670
So what I need to do is
tell GitHub the origin--

983
00:42:29,670 --> 00:42:32,940
GitHub is my origin repository--
to push my red branch up

984
00:42:32,940 --> 00:42:36,120
to a new branch called
Red on the origin.

985
00:42:36,120 --> 00:42:38,490
And so to do that, you'll
just run this command,

986
00:42:38,490 --> 00:42:45,240
git push set upstream origin red, to
mean push upstream to GitHub, push

987
00:42:45,240 --> 00:42:47,740
to a new branch called Red.

988
00:42:47,740 --> 00:42:51,480
So I went ahead and did that,
push to that new branch.

989
00:42:51,480 --> 00:42:57,060
And so now if I check GitHub,
refresh this page, it's still blue.

990
00:42:57,060 --> 00:42:59,310
And that's because I'm on
the master branch right now.

991
00:42:59,310 --> 00:43:02,930
See, on the left side, I see
here I have branch master.

992
00:43:02,930 --> 00:43:06,210
But if I click on branch master, I'll
see a list of all of my branches.

993
00:43:06,210 --> 00:43:08,940
And here, I have master and I have red.

994
00:43:08,940 --> 00:43:12,537
If I switch to the red
branch, now I'll see, OK.

995
00:43:12,537 --> 00:43:14,120
Here's the fact that I have color red.

996
00:43:14,120 --> 00:43:15,911
So I've got both of
these branches that are

997
00:43:15,911 --> 00:43:18,130
coexisting on GitHub simultaneously.

998
00:43:18,130 --> 00:43:21,570
And what I'd like to do is I'd like
to use GitHub's interface to say,

999
00:43:21,570 --> 00:43:25,720
I would like to propose this as a
change to make to the master branch.

1000
00:43:25,720 --> 00:43:27,615
And so this is what a
pull request is, it's

1001
00:43:27,615 --> 00:43:31,690
a request to pull in some
code from a different branch.

1002
00:43:31,690 --> 00:43:35,289
And so I'll go to pull requests,
and it's actually suggesting now

1003
00:43:35,289 --> 00:43:37,830
that I actually make a new pull
request from the red branch--

1004
00:43:37,830 --> 00:43:40,020
and notice that I've
just pushed this branch.

1005
00:43:40,020 --> 00:43:43,182
So I'll go ahead and
compare and pull request.

1006
00:43:43,182 --> 00:43:46,390
It's going to ask me to title my pull
request, propose the name of the change

1007
00:43:46,390 --> 00:43:48,320
that I'm making, and leave a comment.

1008
00:43:48,320 --> 00:43:52,916
So I thought the red looked
better, whatever you want to say.

1009
00:43:52,916 --> 00:43:56,420
You can create the pull request.

1010
00:43:56,420 --> 00:43:59,657
And OK, now anyone who has
access to this repository

1011
00:43:59,657 --> 00:44:00,740
can see this pull request.

1012
00:44:00,740 --> 00:44:02,740
You can go online and see
it now if you want to.

1013
00:44:02,740 --> 00:44:06,260
You can see the comment
about the proposed change.

1014
00:44:06,260 --> 00:44:08,260
If I go to the Files
Changed, you can see here's

1015
00:44:08,260 --> 00:44:09,843
the change that I'm proposing to make.

1016
00:44:09,843 --> 00:44:13,690
I'm proposing to change
the color from blue to red.

1017
00:44:13,690 --> 00:44:15,910
And you can see that
what I want to do is

1018
00:44:15,910 --> 00:44:19,139
I want to merge one commit
into master from red.

1019
00:44:19,139 --> 00:44:20,680
That's what my pull request is doing.

1020
00:44:20,680 --> 00:44:23,110
I'm trying to take one commit
that's on the red branch

1021
00:44:23,110 --> 00:44:25,980
and merge it into the master branch.

1022
00:44:25,980 --> 00:44:29,230
And so this is something you
commonly see in industry,

1023
00:44:29,230 --> 00:44:32,590
where they don't just let anyone
just make a change automatically

1024
00:44:32,590 --> 00:44:36,160
to the code base, where they'll want you
to make changes on a different branch

1025
00:44:36,160 --> 00:44:39,417
and then submit a pull request, like
propose these changes so that someone

1026
00:44:39,417 --> 00:44:42,250
else can code, review it, leave
comments and feedback on the changes

1027
00:44:42,250 --> 00:44:43,090
that you've made.

1028
00:44:43,090 --> 00:44:45,340
And then only when everyone
feels confident and comfortable

1029
00:44:45,340 --> 00:44:48,010
with the changes that you've made
do they go down here and click

1030
00:44:48,010 --> 00:44:50,244
this green Merge Pull
Request button that says,

1031
00:44:50,244 --> 00:44:51,910
all right, I'm happy with these changes.

1032
00:44:51,910 --> 00:44:53,860
Let's take the changes
from the red branch,

1033
00:44:53,860 --> 00:44:55,760
bring them into the master branch.

1034
00:44:55,760 --> 00:44:58,210
And when I click Confirm Merge,
now on the master branch,

1035
00:44:58,210 --> 00:45:00,679
it's going to be updated
with that new red styling.

1036
00:45:00,679 --> 00:45:03,220
It's now giving me the option
to delete the red branch, which

1037
00:45:03,220 --> 00:45:05,890
I can do now because I no
longer need the red branch.

1038
00:45:05,890 --> 00:45:08,574
But that's the idea of a pull request.

1039
00:45:08,574 --> 00:45:09,740
Questions about all of that?

1040
00:45:09,740 --> 00:45:10,573
I know that's a lot.

1041
00:45:10,573 --> 00:45:11,610
Yeah?

1042
00:45:11,610 --> 00:45:15,340
AUDIENCE: Yeah, so if you branch it
off and you change the color to red,

1043
00:45:15,340 --> 00:45:21,525
then someone else adds a bunch
of extra features to the master,

1044
00:45:21,525 --> 00:45:25,736
merging the red to the master is
not going to lose those features.

1045
00:45:25,736 --> 00:45:30,163
And likewise, if you wanted to
merge the master to the red,

1046
00:45:30,163 --> 00:45:32,705
would that keep the changes that
you made in the red as well?

1047
00:45:32,705 --> 00:45:33,704
BRIAN YU: Good question.

1048
00:45:33,704 --> 00:45:35,840
So the question is, I
changed the color to red,

1049
00:45:35,840 --> 00:45:37,780
but before I'm able to
merge it in, someone's

1050
00:45:37,780 --> 00:45:39,580
added new features to the master branch.

1051
00:45:39,580 --> 00:45:41,230
What happens when I merge red in?

1052
00:45:41,230 --> 00:45:42,710
It's going to keep all
those same features.

1053
00:45:42,710 --> 00:45:44,376
So everything just gets merged together.

1054
00:45:44,376 --> 00:45:47,200
The only trouble comes if, when
someone was adding new features,

1055
00:45:47,200 --> 00:45:49,199
they also decided to
change the color to green,

1056
00:45:49,199 --> 00:45:52,240
and now they conflict and then you
have to deal with that merge conflict.

1057
00:45:52,240 --> 00:45:54,680
But other than that,
everything is preserved.

1058
00:45:54,680 --> 00:45:55,650
Yeah?

1059
00:45:55,650 --> 00:46:00,105
AUDIENCE: Are there ways,
in GitHub, to regulate

1060
00:46:00,105 --> 00:46:05,421
who can actually improve [INAUDIBLE]
project leader, or [INAUDIBLE]

1061
00:46:05,421 --> 00:46:06,420
BRIAN YU: Good question.

1062
00:46:06,420 --> 00:46:08,891
Is there a way in GitHub to
have some approval mechanisms

1063
00:46:08,891 --> 00:46:11,140
so that only certain people
can improve pull requests?

1064
00:46:11,140 --> 00:46:11,680
Absolutely.

1065
00:46:11,680 --> 00:46:13,570
In the settings, you
can go to collaborators

1066
00:46:13,570 --> 00:46:16,939
and you can add configuration
there for security to make sure.

1067
00:46:16,939 --> 00:46:18,730
You can even add certain
branch protections

1068
00:46:18,730 --> 00:46:20,740
to make sure that nobody
can push to master

1069
00:46:20,740 --> 00:46:22,450
without going through a
pull request first, even

1070
00:46:22,450 --> 00:46:23,990
if they can push the other branches.

1071
00:46:23,990 --> 00:46:26,554
There are a lot of
features there as well.

1072
00:46:26,554 --> 00:46:27,205
Yeah?

1073
00:46:27,205 --> 00:46:29,830
AUDIENCE: Conceptually, even
though it's called a pull request,

1074
00:46:29,830 --> 00:46:31,815
is it more like a merge request?

1075
00:46:31,815 --> 00:46:32,440
BRIAN YU: Yeah.

1076
00:46:32,440 --> 00:46:33,170
You can think of it as that.

1077
00:46:33,170 --> 00:46:35,003
It's called a pull
request insofar as you're

1078
00:46:35,003 --> 00:46:38,290
trying to request to have some code
pulled into a particular branch,

1079
00:46:38,290 --> 00:46:41,820
but depending on how you think of
it, however makes best sense to you.

1080
00:46:41,820 --> 00:46:45,370
But you're trying to merge code
together, one branch into another,

1081
00:46:45,370 --> 00:46:47,330
generally.

1082
00:46:47,330 --> 00:46:47,830
All right.

1083
00:46:47,830 --> 00:46:50,969
You'll have an opportunity to play
around with pull requests in GitHub

1084
00:46:50,969 --> 00:46:53,260
a little more in the afternoon
project, but just wanted

1085
00:46:53,260 --> 00:46:55,420
to introduce that to
you as a useful tool

1086
00:46:55,420 --> 00:46:58,540
that you can use over the course
of this week and future classes

1087
00:46:58,540 --> 00:47:03,614
that you take in your own work,
in industry, so on and so forth.

1088
00:47:03,614 --> 00:47:06,530
Other questions about Git before we
turn to one final topic for today?

1089
00:47:06,530 --> 00:47:09,770


1090
00:47:09,770 --> 00:47:10,750
OK.

1091
00:47:10,750 --> 00:47:20,230
So last topic we're going
to talk about is SaaS.

1092
00:47:20,230 --> 00:47:24,220
And so SaaS is an
extension to CSS that is

1093
00:47:24,220 --> 00:47:26,590
going to add some new features to CSS.

1094
00:47:26,590 --> 00:47:29,920
So you might imagine
that CSS code can quickly

1095
00:47:29,920 --> 00:47:33,550
start to get a little bit repetitive,
where you might imagine that if you've

1096
00:47:33,550 --> 00:47:37,060
got a themed website, where your
website follows a standard color scheme,

1097
00:47:37,060 --> 00:47:37,746
for instance.

1098
00:47:37,746 --> 00:47:40,120
You might have a particular
color that you're using again

1099
00:47:40,120 --> 00:47:44,830
and again and again throughout
the entirety of your CSS page,

1100
00:47:44,830 --> 00:47:47,590
for instance, whereby
if you later then wanted

1101
00:47:47,590 --> 00:47:51,100
to go back and change
the color of the page,

1102
00:47:51,100 --> 00:47:53,904
you might run into some
issues, whereby you'd

1103
00:47:53,904 --> 00:47:56,320
have to go back and change the
color in every single place

1104
00:47:56,320 --> 00:47:58,000
where that color shows up.

1105
00:47:58,000 --> 00:48:01,330
And that starts to get
a little bit annoying.

1106
00:48:01,330 --> 00:48:03,190
In code, how do we solve this problem?

1107
00:48:03,190 --> 00:48:04,940
If we've got some piece
of code that we're

1108
00:48:04,940 --> 00:48:07,372
reusing a lot, some value
that we're using a lot,

1109
00:48:07,372 --> 00:48:09,580
and we want to avoid using
it over and over and over,

1110
00:48:09,580 --> 00:48:12,235
how would we solve this problem
in a language like C or Python?

1111
00:48:12,235 --> 00:48:13,450
AUDIENCE: Define a variable.

1112
00:48:13,450 --> 00:48:14,650
BRIAN YU: Define a variable, exactly.

1113
00:48:14,650 --> 00:48:17,080
We define a variable, set the
variable equal to the value,

1114
00:48:17,080 --> 00:48:18,913
and then we can reuse
that variable whenever

1115
00:48:18,913 --> 00:48:20,750
we want to represent that value.

1116
00:48:20,750 --> 00:48:23,241
CSS, by default, doesn't
give us that ability,

1117
00:48:23,241 --> 00:48:25,990
but it is an ability that we get
with something called SaaS, which

1118
00:48:25,990 --> 00:48:30,660
we'll see in just a moment, among other
features that it adds on top of CSS.

1119
00:48:30,660 --> 00:48:33,740
And so let's take a look at what
that would actually look like.

1120
00:48:33,740 --> 00:48:36,930
So I'll give an example here.

1121
00:48:36,930 --> 00:48:40,840
We'll go in and go to the desktop
and just create a new file, which

1122
00:48:40,840 --> 00:48:43,960
I'm going to call variables.css.

1123
00:48:43,960 --> 00:48:46,930


1124
00:48:46,930 --> 00:48:50,530
And you might imagine here that
if I want to color unordered lists

1125
00:48:50,530 --> 00:48:54,340
and ordered lists the same way,
I might say, OK, unordered lists,

1126
00:48:54,340 --> 00:49:00,490
I want to have a color of red
and a font size of 14 pixels.

1127
00:49:00,490 --> 00:49:04,000
And ordered lists, I want
to have a color of red also.

1128
00:49:04,000 --> 00:49:08,722
And ordered lists, I want them to
be bigger, font size 18 pixels.

1129
00:49:08,722 --> 00:49:09,930
Let me now create a new file.

1130
00:49:09,930 --> 00:49:14,880
I'll call it variables.html,
doc type, HTML.

1131
00:49:14,880 --> 00:49:18,210
I've created a separate CSS file,
which we haven't yet seen today,

1132
00:49:18,210 --> 00:49:21,390
but it works the same as
putting things in the style tag.

1133
00:49:21,390 --> 00:49:22,920
The only change is--

1134
00:49:22,920 --> 00:49:26,880
we'll call this my web page.

1135
00:49:26,880 --> 00:49:30,810
Rather than putting a style tag, here
I'm just going to link the CSS file.

1136
00:49:30,810 --> 00:49:34,020
I'm going to say the relationship
of this file is a style sheet

1137
00:49:34,020 --> 00:49:38,810
and the source for the
file is that variables.css.

1138
00:49:38,810 --> 00:49:42,900
So basically, I'm saying take the
CSS code located in variables.css

1139
00:49:42,900 --> 00:49:46,376
and include it as styling for
this particular HTML page.

1140
00:49:46,376 --> 00:49:48,750
This can be a useful tool if
you want to use the same CSS

1141
00:49:48,750 --> 00:49:49,980
file for multiple pages.

1142
00:49:49,980 --> 00:49:51,480
You don't need to duplicate the CSS.

1143
00:49:51,480 --> 00:49:55,810
You just have all the files reference
the same CSS file, for instance.

1144
00:49:55,810 --> 00:50:00,950
And inside the body of this page now,
I might have an unordered list, so UL.

1145
00:50:00,950 --> 00:50:08,940
We have a bunch of list items,
so item 1 and item 2 and item 3.

1146
00:50:08,940 --> 00:50:14,970
And maybe in addition to that, I
also have an ordered list, an OL.

1147
00:50:14,970 --> 00:50:17,997
So I have a UL, an unordered
list, and an OL, an ordered list,

1148
00:50:17,997 --> 00:50:19,080
that also has items on it.

1149
00:50:19,080 --> 00:50:21,080
And I have them both.

1150
00:50:21,080 --> 00:50:25,340
Whereby now, if I open
up variables.html,

1151
00:50:25,340 --> 00:50:29,210
I see that I have a small unordered list
and a large ordered list, both of which

1152
00:50:29,210 --> 00:50:29,960
are red.

1153
00:50:29,960 --> 00:50:32,840
And that's to be expected,
because in variables.css, I

1154
00:50:32,840 --> 00:50:36,620
said, unordered lists should be
a size 14 point font, color red,

1155
00:50:36,620 --> 00:50:40,820
and ordered lists should be a size
18 point font and also colored red.

1156
00:50:40,820 --> 00:50:43,376
But the duplication here
is in the color red.

1157
00:50:43,376 --> 00:50:46,250
If I wanted to change the color to
blue, or green, or something else,

1158
00:50:46,250 --> 00:50:49,190
I would have to actually go to
both of the places in the code

1159
00:50:49,190 --> 00:50:51,881
and change both of the occurrences
of red to blue, or green,

1160
00:50:51,881 --> 00:50:52,630
or something else.

1161
00:50:52,630 --> 00:50:55,045
Now, might not seem like a
big deal for a simple example,

1162
00:50:55,045 --> 00:50:57,170
but you imagine starting
to work on larger projects

1163
00:50:57,170 --> 00:50:58,961
where things start to
get more complicated,

1164
00:50:58,961 --> 00:51:01,820
and this can start to get
messy or annoying to replace

1165
00:51:01,820 --> 00:51:04,310
all of these changes
constantly, more room for error

1166
00:51:04,310 --> 00:51:06,018
if you happen to miss
one and then things

1167
00:51:06,018 --> 00:51:07,590
start to look a little bit strange.

1168
00:51:07,590 --> 00:51:09,440
So how can we solve this problem?

1169
00:51:09,440 --> 00:51:11,000
That's what SaaS is designed to do.

1170
00:51:11,000 --> 00:51:15,485
So I'm going to create a new
file, call it variables.scss.

1171
00:51:15,485 --> 00:51:19,200
It's the file extension for SaaS files.

1172
00:51:19,200 --> 00:51:21,347
And this is going to
be very similar to CSS,

1173
00:51:21,347 --> 00:51:24,305
but we're going to extend it with
the capability of defining variables.

1174
00:51:24,305 --> 00:51:28,940
So I'm going to define a variable
called dollar sign color--

1175
00:51:28,940 --> 00:51:33,210
and dollar sign is just the way in
SaaS that you define a variable--

1176
00:51:33,210 --> 00:51:34,011
colon red.

1177
00:51:34,011 --> 00:51:36,260
Color could've been anything,
but the dollar sign just

1178
00:51:36,260 --> 00:51:37,884
says, here's a new name for a variable.

1179
00:51:37,884 --> 00:51:41,232
The variable is called color
and it's going to be set to red.

1180
00:51:41,232 --> 00:51:43,760
And now, I can say, all
right, unordered lists.

1181
00:51:43,760 --> 00:51:47,040
I should have a font size of 14 point.

1182
00:51:47,040 --> 00:51:50,550
But the color, rather
than just saying red here,

1183
00:51:50,550 --> 00:51:54,160
I'm instead going to
say dollar sign color.

1184
00:51:54,160 --> 00:51:57,810
That's the name of the variable
that I would like to use right here.

1185
00:51:57,810 --> 00:52:01,500
Just plug in the value of
that variable here as well.

1186
00:52:01,500 --> 00:52:06,270
Then I can also add an ordered list and
say, all right, the font size for that

1187
00:52:06,270 --> 00:52:09,965
should be 18 point font,
and the color there

1188
00:52:09,965 --> 00:52:12,840
is also just going to be whatever
the value of the color variable is.

1189
00:52:12,840 --> 00:52:18,340
I'm using some variable there,
putting it inside of my SCSS file.

1190
00:52:18,340 --> 00:52:22,429
Questions about what I'm doing
so far, or why I'm doing it?

1191
00:52:22,429 --> 00:52:25,220
OK, so what we might like to be
able to do is go into our HTML file

1192
00:52:25,220 --> 00:52:27,830
and say, all right, instead
of using variables.css,

1193
00:52:27,830 --> 00:52:32,220
let's use variables.scss, and
then go ahead and load this page.

1194
00:52:32,220 --> 00:52:34,280
But when I do that, I
lost all the styling.

1195
00:52:34,280 --> 00:52:37,040
Sizes are the same, nothing is red.

1196
00:52:37,040 --> 00:52:37,740
Why is that?

1197
00:52:37,740 --> 00:52:38,239
Any guesses?

1198
00:52:38,239 --> 00:52:45,706


1199
00:52:45,706 --> 00:52:47,106
AUDIENCE: [INAUDIBLE]

1200
00:52:47,106 --> 00:52:48,230
BRIAN YU: I didn't link it.

1201
00:52:48,230 --> 00:52:49,040
But I did link it.

1202
00:52:49,040 --> 00:52:51,140
I linked to the SCSS file.

1203
00:52:51,140 --> 00:52:55,070
The problem here is that
web browsers don't natively

1204
00:52:55,070 --> 00:52:57,680
understand SaaS or SCSS files.

1205
00:52:57,680 --> 00:53:00,260
They only understand CSS as a language.

1206
00:53:00,260 --> 00:53:03,630
And this, although it looks a
lot like CSS, is not quite CSS.

1207
00:53:03,630 --> 00:53:05,990
It's using variables
that CSS doesn't support.

1208
00:53:05,990 --> 00:53:08,040
And so this is a bit of a problem.

1209
00:53:08,040 --> 00:53:10,940
So what you need to
do is this extra step

1210
00:53:10,940 --> 00:53:16,240
of converting our SCSS file,
our SaaS file, into a CSS file.

1211
00:53:16,240 --> 00:53:19,262
And so that's the extra
step that you'll need to do.

1212
00:53:19,262 --> 00:53:21,470
You'll have to install SaaS,
and there's instructions

1213
00:53:21,470 --> 00:53:23,480
for how to do this on the SaaS website.

1214
00:53:23,480 --> 00:53:26,310
But when you do, then you
can say something like,

1215
00:53:26,310 --> 00:53:32,720
all right, SaaS, variables.scss,
and then variables.css.

1216
00:53:32,720 --> 00:53:35,960
What I'm saying here is
take variables.scss and just

1217
00:53:35,960 --> 00:53:39,920
convert it into plain old CSS
and generate a file called

1218
00:53:39,920 --> 00:53:43,960
variables.css via the SaaS program.

1219
00:53:43,960 --> 00:53:45,320
So I press Return.

1220
00:53:45,320 --> 00:53:46,700
Nothing seems to happen.

1221
00:53:46,700 --> 00:53:50,720
But if I look at variables.css
now, looks a little bit different.

1222
00:53:50,720 --> 00:53:52,730
But the general thinking
is the same thing.

1223
00:53:52,730 --> 00:53:56,900
I've generated the CSS file, whereby
it's plugged in the color red

1224
00:53:56,900 --> 00:54:00,490
into both unordered
lists and ordered lists.

1225
00:54:00,490 --> 00:54:02,690
And if I go into the SCSS
file now and change it,

1226
00:54:02,690 --> 00:54:07,130
go from red to blue,
and then I rerun SaaS,

1227
00:54:07,130 --> 00:54:11,570
say recompile the dot SCSS
file into a dot CSS file.

1228
00:54:11,570 --> 00:54:15,140
Then when I go back to variables.css,
OK, both colors are now blue.

1229
00:54:15,140 --> 00:54:19,460
It keeps generating the new
CSS file based on whatever it

1230
00:54:19,460 --> 00:54:22,580
is that I've included in the SaaS file.

1231
00:54:22,580 --> 00:54:24,890
It's making that conversion for me.

1232
00:54:24,890 --> 00:54:28,890
And then in variables.html, rather
than including the SCSS file,

1233
00:54:28,890 --> 00:54:33,350
I'm just going to include the CSS file,
the translated version of that file,

1234
00:54:33,350 --> 00:54:36,920
such that I can refresh, and
OK, now everything is blue.

1235
00:54:36,920 --> 00:54:38,900
Now, if I'm currently
working on development,

1236
00:54:38,900 --> 00:54:41,720
it's probably a little bit
annoying to have to constantly

1237
00:54:41,720 --> 00:54:43,670
be, every time I make
a change to the SaaS

1238
00:54:43,670 --> 00:54:46,070
file, recompile it to the CSS file.

1239
00:54:46,070 --> 00:54:48,680
So SaaS has some features
to help with this.

1240
00:54:48,680 --> 00:54:53,030
I can say SaaS dash dash watch
to say, keep watching this file.

1241
00:54:53,030 --> 00:54:56,390
And anytime I make a change to the file,
just automatically due to conversion

1242
00:54:56,390 --> 00:54:57,710
into the CSS file.

1243
00:54:57,710 --> 00:55:03,290
So I'll say SaaS dash dash watch
variables.scss colon variables.css.

1244
00:55:03,290 --> 00:55:06,625
The colon separates original
file, resulting file.

1245
00:55:06,625 --> 00:55:09,410
It's just the way the
command line program works.

1246
00:55:09,410 --> 00:55:10,580
I press Return.

1247
00:55:10,580 --> 00:55:13,670
And now it says SaaS is
watching for changes.

1248
00:55:13,670 --> 00:55:16,710
Now if I go to variables.css, and
instead of blue, say, all right,

1249
00:55:16,710 --> 00:55:18,170
let's take the color green.

1250
00:55:18,170 --> 00:55:19,490
Save that.

1251
00:55:19,490 --> 00:55:21,890
And go to variables.css,
all right, the color's

1252
00:55:21,890 --> 00:55:25,130
green it's automatically
updated the CSS files for me

1253
00:55:25,130 --> 00:55:29,520
based on whatever it is that
I have in the SCSS file.

1254
00:55:29,520 --> 00:55:32,520
Questions about that, what I've
done, what the idea there was?

1255
00:55:32,520 --> 00:55:38,810


1256
00:55:38,810 --> 00:55:39,660
OK.

1257
00:55:39,660 --> 00:55:43,260
So this adds some ability
for you in your SaaS

1258
00:55:43,260 --> 00:55:45,810
files to be a little
bit clever about CSS,

1259
00:55:45,810 --> 00:55:48,535
to be a little bit better
designed in the way

1260
00:55:48,535 --> 00:55:50,910
that you structure your style
sheets, in the way that you

1261
00:55:50,910 --> 00:55:52,950
go about thinking about
what goes where, and how

1262
00:55:52,950 --> 00:55:56,340
to think about avoiding reusing
the same thing multiple times

1263
00:55:56,340 --> 00:56:00,180
to make it easier to change
things later on down the line.

1264
00:56:00,180 --> 00:56:03,720
So now, let's begin to look at
some of the other features that

1265
00:56:03,720 --> 00:56:09,720
were afforded in SaaS, one of
which is the idea of nesting.

1266
00:56:09,720 --> 00:56:13,200
And so let me show you an example.

1267
00:56:13,200 --> 00:56:17,100
I'll go to Source.

1268
00:56:17,100 --> 00:56:20,030


1269
00:56:20,030 --> 00:56:21,730
I'll go into nesting.html.

1270
00:56:21,730 --> 00:56:24,380


1271
00:56:24,380 --> 00:56:27,420
So notice here, I've got an HTML page.

1272
00:56:27,420 --> 00:56:33,210
I have a div, a big div,
inside of which is a paragraph.

1273
00:56:33,210 --> 00:56:38,830
And inside of the div is also
an unordered list, a UL element.

1274
00:56:38,830 --> 00:56:42,390
Then I have a paragraph
that's outside of the div

1275
00:56:42,390 --> 00:56:44,390
and I also have an unordered
list that's outside

1276
00:56:44,390 --> 00:56:47,660
of the div, so some hierarchical
structures here that

1277
00:56:47,660 --> 00:56:49,920
are elements within other elements.

1278
00:56:49,920 --> 00:56:52,790
But maybe I only want to style
the paragraph and the lists

1279
00:56:52,790 --> 00:56:56,180
that are inside of the div.

1280
00:56:56,180 --> 00:56:59,340
And so you might end up with code
that looks something like this.

1281
00:56:59,340 --> 00:57:01,982
So SaaS supports the idea
of nesting CSS selectors

1282
00:57:01,982 --> 00:57:04,940
within each other, where the idea
can be, all right, I'm going to style

1283
00:57:04,940 --> 00:57:05,700
the div.

1284
00:57:05,700 --> 00:57:08,480
The div is going to have a
font size of 18 point font.

1285
00:57:08,480 --> 00:57:12,710
And then if, inside the div,
you have a paragraph, a p tag,

1286
00:57:12,710 --> 00:57:14,300
that can be colored blue.

1287
00:57:14,300 --> 00:57:16,797
And if, inside the div,
there is an unordered list,

1288
00:57:16,797 --> 00:57:18,380
that's going to have a color of green.

1289
00:57:18,380 --> 00:57:21,890
So you can add the nesting
of elements within elements.

1290
00:57:21,890 --> 00:57:26,120
That can often be helpful if you're
thinking about larger, more complex CSS

1291
00:57:26,120 --> 00:57:26,881
style sheets.

1292
00:57:26,881 --> 00:57:28,880
And in fact, earlier this
morning, I was working

1293
00:57:28,880 --> 00:57:30,920
with some of you who are
starting to come up with things

1294
00:57:30,920 --> 00:57:32,090
that were a little more complicated.

1295
00:57:32,090 --> 00:57:34,131
You had a lot of things
nested within each other.

1296
00:57:34,131 --> 00:57:38,060
It's just a lot simpler to think about
when you can nest CSS selectors within

1297
00:57:38,060 --> 00:57:41,210
each other, to say, only style
paragraphs and unordered lists that are

1298
00:57:41,210 --> 00:57:46,940
inside of the div in particular ways,
whereby if I open up nesting.html--

1299
00:57:46,940 --> 00:57:52,660


1300
00:57:52,660 --> 00:57:55,340
HTML.

1301
00:57:55,340 --> 00:58:01,640
OK, I haven't compiled the SaaS file
into CSS yet, so saasnesting.scss,

1302
00:58:01,640 --> 00:58:04,490
nesting.css.

1303
00:58:04,490 --> 00:58:05,540
And all right, great.

1304
00:58:05,540 --> 00:58:09,320
So now, the list items inside the div
and the paragraph inside the div, those

1305
00:58:09,320 --> 00:58:11,900
get styled, but the
paragraph outside the div

1306
00:58:11,900 --> 00:58:13,820
and the list outside
the div, those don't

1307
00:58:13,820 --> 00:58:15,920
get styled, because I
was able to generate

1308
00:58:15,920 --> 00:58:21,559
from nesting.scss the nesting.css
file, which looks something

1309
00:58:21,559 --> 00:58:22,350
a little like this.

1310
00:58:22,350 --> 00:58:25,040
It's generating
equivalent CSS code that's

1311
00:58:25,040 --> 00:58:27,560
taking advantage of
the descendant selector

1312
00:58:27,560 --> 00:58:31,856
that we were talking about
earlier this morning.

1313
00:58:31,856 --> 00:58:32,730
Questions about that?

1314
00:58:32,730 --> 00:58:35,350


1315
00:58:35,350 --> 00:58:35,850
OK.

1316
00:58:35,850 --> 00:58:37,950
I'll show you one other
SaaS example, just

1317
00:58:37,950 --> 00:58:40,380
to give you a sense for the
type of thing that you can do.

1318
00:58:40,380 --> 00:58:42,900
Oftentimes, you might have a
whole bunch of different things

1319
00:58:42,900 --> 00:58:46,800
that are very similarly styled,
except for a couple of differences.

1320
00:58:46,800 --> 00:58:49,750
So an example of that might be--

1321
00:58:49,750 --> 00:58:55,749
go to inheritance and
open inheritance.html.

1322
00:58:55,749 --> 00:58:57,540
This is the type of
thing I want to create,

1323
00:58:57,540 --> 00:59:00,690
where I have similar to
bootstrap alert messages.

1324
00:59:00,690 --> 00:59:04,020
I have a success message, a warning
message, and an error message.

1325
00:59:04,020 --> 00:59:06,021
And these are admittedly different.

1326
00:59:06,021 --> 00:59:07,270
The success messages is green.

1327
00:59:07,270 --> 00:59:11,140
The warning is yellow, or orange,
and the error message is red.

1328
00:59:11,140 --> 00:59:13,512
And they are all different colors.

1329
00:59:13,512 --> 00:59:15,720
But there's also things
about them that are the same.

1330
00:59:15,720 --> 00:59:16,920
They are similarly spaced.

1331
00:59:16,920 --> 00:59:18,711
They have a border
around the edge of them.

1332
00:59:18,711 --> 00:59:21,060
They're a similar font,
and the same font, in fact.

1333
00:59:21,060 --> 00:59:24,180
So everything about them is
the same, except for the color.

1334
00:59:24,180 --> 00:59:26,940
And so I'd like some way of
avoiding repeating myself

1335
00:59:26,940 --> 00:59:29,020
when I'm writing this code.

1336
00:59:29,020 --> 00:59:31,100
And so here's the code I might use.

1337
00:59:31,100 --> 00:59:34,020
I'll use inheritance.scss.

1338
00:59:34,020 --> 00:59:38,010
And what I have up here is
I'm defining the styling

1339
00:59:38,010 --> 00:59:42,110
for something called a message.

1340
00:59:42,110 --> 00:59:44,580
And a message that I'm
defining with this percent

1341
00:59:44,580 --> 00:59:47,490
sign, which is going to
allow me to extend it later,

1342
00:59:47,490 --> 00:59:48,690
is going to be sans serif.

1343
00:59:48,690 --> 00:59:49,980
It has a particular font size.

1344
00:59:49,980 --> 00:59:50,980
It's going to be bolded.

1345
00:59:50,980 --> 00:59:51,930
It has a border.

1346
00:59:51,930 --> 00:59:54,360
It has certain spacing, 20
pixels around the edge of it

1347
00:59:54,360 --> 00:59:56,820
and 20 pixels inside of it.

1348
00:59:56,820 --> 01:00:00,670
And then anything with
a class of success,

1349
01:00:00,670 --> 01:00:03,040
I'm going to say is going
to extend the message.

1350
01:00:03,040 --> 01:00:05,710
It's going to inherit
all of the CSS properties

1351
01:00:05,710 --> 01:00:09,070
that the original message had,
so all of these CSS properties

1352
01:00:09,070 --> 01:00:12,920
get used inside of the success class.

1353
01:00:12,920 --> 01:00:16,330
The only difference is that
the background color is green.

1354
01:00:16,330 --> 01:00:18,520
And likewise, for my
warning message, I'm

1355
01:00:18,520 --> 01:00:22,900
also going to extend the message
that has all of these CSS properties

1356
01:00:22,900 --> 01:00:24,010
and values.

1357
01:00:24,010 --> 01:00:26,093
And I'm just going to say,
all right, let's change

1358
01:00:26,093 --> 01:00:27,700
the background color to be orange.

1359
01:00:27,700 --> 01:00:30,940
And for the error message, I'm likewise
just going to extend that message

1360
01:00:30,940 --> 01:00:33,840
and change the background color to red.

1361
01:00:33,840 --> 01:00:38,460
When I generate the resulting
inheritance.css file,

1362
01:00:38,460 --> 01:00:40,770
it's going to look like this.

1363
01:00:40,770 --> 01:00:44,580
It looks like, all right, let's
give success, warning, and error

1364
01:00:44,580 --> 01:00:46,837
all of these same properties in common.

1365
01:00:46,837 --> 01:00:49,170
And let's make success have
a background color of green,

1366
01:00:49,170 --> 01:00:50,580
and warning of a
background color of orange,

1367
01:00:50,580 --> 01:00:52,260
and error of a background color of red.

1368
01:00:52,260 --> 01:00:54,402
And certainly, you can
do this for yourself,

1369
01:00:54,402 --> 01:00:56,610
but sometimes it's going to
be easier to reason about

1370
01:00:56,610 --> 01:00:58,590
and easier to think
about by just giving it

1371
01:00:58,590 --> 01:01:02,940
a name, saying these are all a message
and success extends that message

1372
01:01:02,940 --> 01:01:05,730
and also has a background color,
for instance, to avoid needing

1373
01:01:05,730 --> 01:01:09,450
to have success in too many places,
to avoid having to repeat yourself too

1374
01:01:09,450 --> 01:01:11,060
many times.

1375
01:01:11,060 --> 01:01:13,920
And so yet another thing
that SaaS can be useful for,

1376
01:01:13,920 --> 01:01:18,210
just making it easier to design your
style sheets a little more effectively.

1377
01:01:18,210 --> 01:01:19,350
Yeah?

1378
01:01:19,350 --> 01:01:22,710
AUDIENCE: Does SaaS have the same
kind of variable name inheritance

1379
01:01:22,710 --> 01:01:25,710
that CSS does with not--

1380
01:01:25,710 --> 01:01:28,470
so if you're using
bootstrap, or something,

1381
01:01:28,470 --> 01:01:32,950
and they use success and warning
and [INAUDIBLE] general class names,

1382
01:01:32,950 --> 01:01:35,210
if you create a SaaS
variable, would that

1383
01:01:35,210 --> 01:01:39,531
override success and warning variables
if they have another SaaS file?

1384
01:01:39,531 --> 01:01:40,530
BRIAN YU: Good question.

1385
01:01:40,530 --> 01:01:43,100
So the question's about
conflicting class names.

1386
01:01:43,100 --> 01:01:45,340
Like, what if you have
a class name declaration

1387
01:01:45,340 --> 01:01:49,070
that bootstrap has and you
reuse that declaration in SaaS?

1388
01:01:49,070 --> 01:01:51,890
This has actually very
little to do with SaaS itself

1389
01:01:51,890 --> 01:01:54,080
because SaaS is just
generating CSS files.

1390
01:01:54,080 --> 01:01:56,390
But it is an interesting
question of bootstrap

1391
01:01:56,390 --> 01:01:59,780
defines what class success
means, maybe, and my code also

1392
01:01:59,780 --> 01:02:02,900
defines what class success, how
class success, should be styled.

1393
01:02:02,900 --> 01:02:05,120
How should those two things be resolved?

1394
01:02:05,120 --> 01:02:08,734
And the answer is that if
the selectors are identical--

1395
01:02:08,734 --> 01:02:11,150
we talked a little bit earlier
about specificity, the idea

1396
01:02:11,150 --> 01:02:13,200
that IDs bind more
tightly than class name.

1397
01:02:13,200 --> 01:02:15,900
And so if something has an
ID, that will take precedence.

1398
01:02:15,900 --> 01:02:19,490
But if the selectors are the same,
CSS tends to go with the last one,

1399
01:02:19,490 --> 01:02:20,927
so whatever occurs last.

1400
01:02:20,927 --> 01:02:22,760
And so we can demonstrate
this very quickly.

1401
01:02:22,760 --> 01:02:25,370


1402
01:02:25,370 --> 01:02:27,356
I'll just open up--

1403
01:02:27,356 --> 01:02:36,580
I'll copy variables.html and call it
style.html and open up style.html.

1404
01:02:36,580 --> 01:02:42,200
And I'm going to have
an H1 that says Hello.

1405
01:02:42,200 --> 01:02:47,600
I can add some style here,
whereby each ones are colored red

1406
01:02:47,600 --> 01:02:50,880
and each ones are colored blue.

1407
01:02:50,880 --> 01:02:54,180
These are identical selectors so
they should bind equally tightly.

1408
01:02:54,180 --> 01:02:57,630
But when both are in conflict, the
latter one is going to take precedence.

1409
01:02:57,630 --> 01:03:01,620
It's going to be blue instead of red
because the color blue selector comes

1410
01:03:01,620 --> 01:03:03,199
after the color red selector.

1411
01:03:03,199 --> 01:03:04,740
Now, there are ways to override this.

1412
01:03:04,740 --> 01:03:06,823
If you really want one of
them to take precedence,

1413
01:03:06,823 --> 01:03:11,100
even if it is earlier in a file,
you can say color red exclamation

1414
01:03:11,100 --> 01:03:12,030
point important.

1415
01:03:12,030 --> 01:03:14,520
Like, this is an important
style, you should use this one.

1416
01:03:14,520 --> 01:03:17,970
And if you do that, then Hello
is going to show up as red.

1417
01:03:17,970 --> 01:03:19,647
But you should use that sparingly.

1418
01:03:19,647 --> 01:03:21,480
Usually, there is almost
always a way to get

1419
01:03:21,480 --> 01:03:26,010
by without needing to use being
important, where you can just add an ID

1420
01:03:26,010 --> 01:03:28,560
or add some additional layer
of specificity, such that you

1421
01:03:28,560 --> 01:03:31,390
can make sure it binds more tightly.

1422
01:03:31,390 --> 01:03:32,140
But good question.

1423
01:03:32,140 --> 01:03:35,820


1424
01:03:35,820 --> 01:03:40,200
All right, questions about SaaS,
or what it can be used for,

1425
01:03:40,200 --> 01:03:42,510
or what the idea of it is?

1426
01:03:42,510 --> 01:03:44,580
So we saw this idea of
variables of being able

1427
01:03:44,580 --> 01:03:48,120
to, in SaaS, be able to
specify names of variables

1428
01:03:48,120 --> 01:03:51,701
that you can reuse later when you're
trying to use some common CSS property

1429
01:03:51,701 --> 01:03:52,200
value.

1430
01:03:52,200 --> 01:03:54,540
I talked about nesting
things inside of each other

1431
01:03:54,540 --> 01:03:56,370
to avoid having code that
looks something like this.

1432
01:03:56,370 --> 01:03:59,203
You can have code that looks something
a little more like the right.

1433
01:03:59,203 --> 01:04:02,550
It's a little bit easier
to reason about sometimes.

1434
01:04:02,550 --> 01:04:06,210
So this afternoon, what I thought
we'd do is do a couple of things.

1435
01:04:06,210 --> 01:04:09,300
I'll leave this up for a little
bit so you can take a look at it.

1436
01:04:09,300 --> 01:04:11,977
First thing to do, install
SaaS on your computer.

1437
01:04:11,977 --> 01:04:15,060
You're probably also going to want to
install Git, if you haven't already.

1438
01:04:15,060 --> 01:04:18,210
And then the TAs can walk
around and help you with that.

1439
01:04:18,210 --> 01:04:20,580
And add some SaaS to your HTML page.

1440
01:04:20,580 --> 01:04:22,360
Add some variables.

1441
01:04:22,360 --> 01:04:23,610
Add nesting, if you'd like to.

1442
01:04:23,610 --> 01:04:26,190
Add some inheritance,
if you want to, as well.

1443
01:04:26,190 --> 01:04:27,390
Then go to GitHub.

1444
01:04:27,390 --> 01:04:28,680
Create a new repository.

1445
01:04:28,680 --> 01:04:31,020
And take the HTML page
you've been working on today

1446
01:04:31,020 --> 01:04:32,100
and push it up to GitHub.

1447
01:04:32,100 --> 01:04:33,484
Push it up to the master branch.

1448
01:04:33,484 --> 01:04:36,150
And just try and practice committing
changes and pushing them up

1449
01:04:36,150 --> 01:04:38,606
to GitHub, since that's
probably new for many of you.

1450
01:04:38,606 --> 01:04:40,980
And then here's an opportunity
to get to know each other.

1451
01:04:40,980 --> 01:04:44,590
What we're going to ask you to do is
find a partner, someone to work with.

1452
01:04:44,590 --> 01:04:47,310
Add each other as collaborators
to your GitHub repositories.

1453
01:04:47,310 --> 01:04:49,143
If you go to Settings
and Collaborators, you

1454
01:04:49,143 --> 01:04:52,740
can add the other person's GitHub
username as a collaborator there.

1455
01:04:52,740 --> 01:04:55,800
And then what we'll have you do
is clone each other's repositories

1456
01:04:55,800 --> 01:04:58,080
by doing git clone, followed by the URL.

1457
01:04:58,080 --> 01:04:59,760
Make some changes on a new branch.

1458
01:04:59,760 --> 01:05:01,950
Go to a new branch and
change the styling,

1459
01:05:01,950 --> 01:05:03,870
change the wording of
something, for instance.

1460
01:05:03,870 --> 01:05:06,630
And push those changes up
to GitHub on a new branch.

1461
01:05:06,630 --> 01:05:08,520
And then practice
making the pull request.

1462
01:05:08,520 --> 01:05:12,374
Make a pull request to the master branch
and add whoever owns the repository.

1463
01:05:12,374 --> 01:05:13,290
Look at those changes.

1464
01:05:13,290 --> 01:05:15,930
Maybe comment on them and then
approve that pull request.

1465
01:05:15,930 --> 01:05:17,970
That'll sort of simulate
for us this idea

1466
01:05:17,970 --> 01:05:21,240
of what very commonly happens in
practice and in industry all over,

1467
01:05:21,240 --> 01:05:23,640
this idea of making changes,
pushing them to branches,

1468
01:05:23,640 --> 01:05:24,690
merging them together.

1469
01:05:24,690 --> 01:05:27,570
It would be good practice
with HTML, CSS, and SaaS,

1470
01:05:27,570 --> 01:05:30,220
and also good practice with Git as well.

1471
01:05:30,220 --> 01:05:31,790
So I think what we'll do is--

1472
01:05:31,790 --> 01:05:33,420
I know people are sitting in
slightly different places.

1473
01:05:33,420 --> 01:05:35,253
But we'll change up the
groups a little bit.

1474
01:05:35,253 --> 01:05:38,790
We'll have the people sitting
in the middle go to room 136.

1475
01:05:38,790 --> 01:05:41,680
Have the people sitting on
this side, go to room 212.

1476
01:05:41,680 --> 01:05:43,470
Actually, were you in 212 last time?

1477
01:05:43,470 --> 01:05:47,130
This side, go to 212, and
this side will stay here.

1478
01:05:47,130 --> 01:05:49,020
And we'll go ahead and work on that.

1479
01:05:49,020 --> 01:05:51,630
Just so everyone knows, we
will all reconvene here.

1480
01:05:51,630 --> 01:05:53,860
We'll keep working
until 5 o'clock, or so,

1481
01:05:53,860 --> 01:05:56,900
and then tomorrow, we'll
meet again here at 10:00 AM.

1482
01:05:56,900 --> 01:05:58,119