1
00:00:00,560 --> 00:00:02,620
So we've got a pretty
good looking project, but

2
00:00:02,620 --> 00:00:04,730
it has a slight problem from
maintenance point of view.

3
00:00:04,730 --> 00:00:08,330
There aren't any tests and
I was looking through the code a bit and

4
00:00:08,330 --> 00:00:12,630
there doesn't seem to be too many comments
about the trickier bit of the code.

5
00:00:12,630 --> 00:00:15,600
Really not even very sure what it's doing,

6
00:00:15,600 --> 00:00:18,480
let alone if it's doing what it
was originally intended to do.

7
00:00:18,480 --> 00:00:20,110
So here's what I think we should do.

8
00:00:20,110 --> 00:00:23,660
Let's take a look at one of those issues
that our client filed for us to fix and

9
00:00:23,660 --> 00:00:27,460
see if we can't try to walk through that
code to track down and remove the bug.

10
00:00:27,460 --> 00:00:28,910
We'll do this by using the debugger.

11
00:00:30,400 --> 00:00:33,700
Remember, this tool's name is
derived from the active debugging.

12
00:00:33,700 --> 00:00:38,200
Removing bugs, which remember, this is
based on that Grace Hopper story of

13
00:00:38,200 --> 00:00:41,460
fixing a problem by removing
an actual bug from the machine.

14
00:00:42,720 --> 00:00:45,970
Sometimes in order to get the work done,
you just got to dive in.

15
00:00:45,970 --> 00:00:46,960
Are you ready to take the plunge?

16
00:00:48,300 --> 00:00:51,420
Okay, so
let's look at the project on GitHub.

17
00:00:51,420 --> 00:00:53,220
Over here let's look at the Issues tab.

18
00:00:55,250 --> 00:00:59,370
Our clients added a few issues here and I
wanna take a look at this first one here,

19
00:00:59,370 --> 00:01:01,930
change the number of
examples on the home page.

20
00:01:01,930 --> 00:01:02,430
Okay.
So

21
00:01:02,430 --> 00:01:05,300
currently we're showing five
example terms on the home page, but

22
00:01:05,300 --> 00:01:06,940
three would probably be better.

23
00:01:06,940 --> 00:01:09,480
Also while you're in there can you
verify the count, the numbers seem off.

24
00:01:09,480 --> 00:01:10,610
Sure.
Let's do that.

25
00:01:10,610 --> 00:01:13,860
So let's take a look at
the home page first, right?

26
00:01:13,860 --> 00:01:14,910
So let's go.

27
00:01:14,910 --> 00:01:18,280
I've got, let's make sure that
our server is running here.

28
00:01:22,120 --> 00:01:23,850
So yeah.
One of the things to do here is

29
00:01:23,850 --> 00:01:28,310
to make sure that you kind of
know what's happening first.

30
00:01:28,310 --> 00:01:30,966
Before you get in there,
so let's take a look.

31
00:01:30,966 --> 00:01:35,834
Okay, so the home page,
these must be the terms here right, so

32
00:01:35,834 --> 00:01:41,240
there's five JDK, YAGNI, SDK,
JRE, Java EE and eight more.

33
00:01:41,240 --> 00:01:43,401
So this number must be what
they're talking about being off.

34
00:01:43,401 --> 00:01:44,590
And this is five right?

35
00:01:44,590 --> 00:01:46,340
One, two, three, four, five, okay.

36
00:01:46,340 --> 00:01:49,570
Also check this out,
I don't think those are the same.

37
00:01:49,570 --> 00:01:52,260
Cool, each time you come in
they're kind of random, right?

38
00:01:52,260 --> 00:01:55,470
Every time I refresh we're getting
different versions of them there.

39
00:01:55,470 --> 00:01:57,050
Okay, that seems doable.

40
00:01:58,350 --> 00:02:00,630
Let's see if we can find that code.

41
00:02:00,630 --> 00:02:04,560
So if we come here, that's the home page
and that's typically called index, right?

42
00:02:04,560 --> 00:02:07,460
So we'll do shift, shift and
we'll just start typing index.

43
00:02:07,460 --> 00:02:09,930
IndexController, beautiful.

44
00:02:09,930 --> 00:02:13,750
Okay and, look right here,
in the request mapping for

45
00:02:13,750 --> 00:02:15,508
forward slash, that sounds good.

46
00:02:15,508 --> 00:02:19,733
So we wanna look at this code, we can walk
this code, try to figure out what is going

47
00:02:19,733 --> 00:02:22,245
on with the issues and
we can do it by ourselves and

48
00:02:22,245 --> 00:02:25,589
keep all the state in our brains,
but we don't need to, right?

49
00:02:25,589 --> 00:02:28,805
The debugger can actually run this
line by line and we can pause it.

50
00:02:28,805 --> 00:02:31,886
Now to pause it, what you do is you
place what's known as a break point and

51
00:02:31,886 --> 00:02:34,770
you do that by clicking over
here in the gutter area.

52
00:02:34,770 --> 00:02:36,200
So see I put a little stop sign there.

53
00:02:37,330 --> 00:02:40,170
So what this means is if the server
is kicked off in debug mode,

54
00:02:40,170 --> 00:02:44,040
when this line is run, things will pause
and wait for us to move until it's ready.

55
00:02:44,040 --> 00:02:44,770
Want to do it?

56
00:02:44,770 --> 00:02:45,310
Cool.
So

57
00:02:45,310 --> 00:02:47,515
I'm gonna stop the existing
running server.

58
00:02:47,515 --> 00:02:51,470
I'm gonna come up here under Run and
I'm gonna choose Debug.

59
00:02:54,390 --> 00:02:58,146
Okay so now things are up and running and
now this is not yet paused, but

60
00:02:58,146 --> 00:03:02,350
if we come over here and I refresh the
home page, right, some I'm gonna make it

61
00:03:02,350 --> 00:03:05,683
go through that request mapping,
boom it paused right away.

62
00:03:06,930 --> 00:03:09,010
You'll see here that
the line is highlighted and

63
00:03:09,010 --> 00:03:10,910
this is what's ready to be run.

64
00:03:10,910 --> 00:03:12,310
It's known as the execution point.

65
00:03:12,310 --> 00:03:14,390
It hasn't yet been executed and

66
00:03:14,390 --> 00:03:17,380
you can see everything here,
down here is in scope.

67
00:03:17,380 --> 00:03:19,797
These are the variables that
are in scope currently, right?

68
00:03:19,797 --> 00:03:21,160
So there's model came in.

69
00:03:22,430 --> 00:03:24,450
These update as we move line to line.

70
00:03:24,450 --> 00:03:25,600
So let's watch what happens.

71
00:03:25,600 --> 00:03:30,420
So this line that we're on currently is
going to create a new string builder.

72
00:03:30,420 --> 00:03:32,060
So let's allow that to happen.

73
00:03:32,060 --> 00:03:32,840
Now, I'm going to do this.

74
00:03:32,840 --> 00:03:34,850
I'm gonna,
down here in this debugger line here.

75
00:03:34,850 --> 00:03:36,570
I'm gonna click this
step over button here.

76
00:03:36,570 --> 00:03:40,010
And this instructs the debugger,
to execute the line and

77
00:03:40,010 --> 00:03:41,310
move on to the next one.

78
00:03:41,310 --> 00:03:45,081
So I press it and you'll see that the line
moves down to this FlashCard line here.

79
00:03:46,330 --> 00:03:47,810
And if you look down
in the variables here,

80
00:03:47,810 --> 00:03:49,650
you'll see that there's the ctaBuilder.

81
00:03:49,650 --> 00:03:51,840
Which is the new string builder.

82
00:03:51,840 --> 00:03:54,771
And of course if you're unfamiliar with
StringBuilder you can always use help,

83
00:03:54,771 --> 00:03:56,291
just like you always could in the editor.

84
00:03:56,291 --> 00:03:58,916
So if I come to StringBuilder here and
I press F1,

85
00:03:58,916 --> 00:04:02,140
we'll see the help pop-up,
a little hard to grab.

86
00:04:02,140 --> 00:04:05,034
But you can kinda read through here.

87
00:04:05,034 --> 00:04:05,762
So, basically,

88
00:04:05,762 --> 00:04:09,110
what these notes are getting at here is
that you'll find a string builder approach

89
00:04:09,110 --> 00:04:11,945
found in loops where you're
trying to put strings together.

90
00:04:11,945 --> 00:04:14,975
Now the reason that you'd want to use
this over a regular string concatenation,

91
00:04:14,975 --> 00:04:17,995
you know where using the pluses,
this for memory purposes and

92
00:04:17,995 --> 00:04:21,810
usually it's used to help increase
overall code readability.

93
00:04:21,810 --> 00:04:24,520
Remember each time that you concatenate
a string using the plus sign,

94
00:04:24,520 --> 00:04:28,540
in memory you were creating a brand new
string, which in a tight loop can get

95
00:04:28,540 --> 00:04:32,570
pretty expensive as the old strings need
to get destroyed and things like that.

96
00:04:32,570 --> 00:04:36,120
So I'm assuming that this string builder

97
00:04:36,120 --> 00:04:39,910
is being used to build up the text that
was supposed to change on the home page.

98
00:04:39,910 --> 00:04:43,530
I'm not quite sure what
this cta is just yet.

99
00:04:43,530 --> 00:04:47,235
I know that cta stands for Chicago Transit
Authority, but that doesn't make any sense

100
00:04:47,235 --> 00:04:50,143
in this area, so, but I'm sure
we'll find out what it is shortly.

101
00:04:50,143 --> 00:04:51,220
I'm not gonna worry about it.

102
00:04:52,920 --> 00:04:54,840
So looking at our current
execution point here,

103
00:04:54,840 --> 00:04:58,060
it looks like it's just
gathering random cards and

104
00:04:58,060 --> 00:05:02,370
I'm assuming, again I'm assuming,
that this five here is the number, right?

105
00:05:02,370 --> 00:05:04,330
Cuz there's five cards that are out there.

106
00:05:04,330 --> 00:05:05,370
But why don't we validate that?

107
00:05:05,370 --> 00:05:06,220
Cuz we can, all right?

108
00:05:06,220 --> 00:05:07,480
We're here.
We can do that.

109
00:05:07,480 --> 00:05:10,760
So, I'd like to see the way that
this code uses this argument.

110
00:05:10,760 --> 00:05:14,370
So, what I can do is instead of,
before I was doing step over,

111
00:05:14,370 --> 00:05:15,340
which stepped over the line.

112
00:05:15,340 --> 00:05:17,860
But you can actually step
into this method call.

113
00:05:17,860 --> 00:05:18,430
So, I'm gonna do that.

114
00:05:18,430 --> 00:05:19,610
I'm gonna click Step Into.

115
00:05:21,750 --> 00:05:24,940
And you'll see here that I've
opened up a new file for us.

116
00:05:24,940 --> 00:05:26,190
It's FlashCardServiceImpl.

117
00:05:26,190 --> 00:05:27,260
I did this automatically.

118
00:05:27,260 --> 00:05:30,160
We're in this getRandomFlashCards here.

119
00:05:30,160 --> 00:05:33,050
And if you look down here in
the variables, you'll see this P.

120
00:05:33,050 --> 00:05:34,620
That's for parameter, right?

121
00:05:34,620 --> 00:05:36,060
So it was passed in.

122
00:05:36,060 --> 00:05:38,770
And you'll also notice that the editor
is starting to be decorated.

123
00:05:38,770 --> 00:05:40,120
This isn't in the file itself.

124
00:05:40,120 --> 00:05:41,830
This is just written here
on the screen for us.

125
00:05:41,830 --> 00:05:43,059
So it says amount is five.

126
00:05:45,120 --> 00:05:48,460
Okay, so this first line here looks like
it goes and it finds all of the cards,

127
00:05:48,460 --> 00:05:49,000
which is good.

128
00:05:49,000 --> 00:05:50,410
So let's go ahead and we'll step that.

129
00:05:52,340 --> 00:05:54,560
Okay, so
it looks like there's eight cards.

130
00:05:54,560 --> 00:05:59,370
Okay, see it says cards size = 8 and then
we look down here and there's size = 8.

131
00:05:59,370 --> 00:06:02,820
Then at quick glance, it shuffles them.

132
00:06:02,820 --> 00:06:04,240
Right, it just does a shuffling.

133
00:06:04,240 --> 00:06:08,630
It gets the first whatever amount was
passed in, it gets the first five.

134
00:06:08,630 --> 00:06:09,784
Cool, that makes sense.

135
00:06:09,784 --> 00:06:10,610
Yeah.

136
00:06:10,610 --> 00:06:12,430
And then it creates a new list.

137
00:06:12,430 --> 00:06:13,150
So, that's cool.

138
00:06:13,150 --> 00:06:14,590
We should be good if we
change that to three.

139
00:06:14,590 --> 00:06:15,650
That should work, right?

140
00:06:15,650 --> 00:06:18,218
Now, since we don't need
to walk through this code,

141
00:06:18,218 --> 00:06:19,943
cuz we just did kind of in our heads.

142
00:06:19,943 --> 00:06:22,270
We kinda know what it's doing,
we are not really interested in it.

143
00:06:22,270 --> 00:06:23,740
We can actually step out.

144
00:06:23,740 --> 00:06:25,980
This kinda makes sense if
there's a lot of code there,

145
00:06:25,980 --> 00:06:28,190
that you're like I understand
now what it's doing.

146
00:06:28,190 --> 00:06:28,930
So, you can step out.

147
00:06:28,930 --> 00:06:34,011
That's what this little arrow here
with pointing up at the angle there.

148
00:06:34,011 --> 00:06:38,530
And that step out, moves us back to
where we were before we stepped in.

149
00:06:38,530 --> 00:06:39,510
So, nice.

150
00:06:39,510 --> 00:06:42,680
Now we're back where we were and
we can do a step over.

151
00:06:43,680 --> 00:06:44,780
Cool.
And now we can see that there

152
00:06:44,780 --> 00:06:46,140
are five cards.

153
00:06:46,140 --> 00:06:47,690
And this is pretty cool.

154
00:06:47,690 --> 00:06:50,834
Since there are cards I can now
highlight this and it will show,

155
00:06:50,834 --> 00:06:54,390
just like down below in this little
plus thing, and I can open them up and

156
00:06:54,390 --> 00:06:56,195
I can take a look at each one of them.

157
00:06:56,195 --> 00:06:58,510
It's pretty handy it's
nice to have that in line.

158
00:07:00,080 --> 00:07:03,050
So I could actually go and
change this five to three right now, but

159
00:07:03,050 --> 00:07:06,225
I need to restart the server
to make things take effect.

160
00:07:06,225 --> 00:07:10,135
But, for now, let's keep walking through
this code cuz I am dying to know what this

161
00:07:10,135 --> 00:07:11,780
ctaBuilder is doing.

162
00:07:11,780 --> 00:07:15,290
Now, you might have seen
the hotkeys we moused over these.

163
00:07:15,290 --> 00:07:18,140
Step over is a great one to know, it's F8.

164
00:07:18,140 --> 00:07:21,370
So if you press F8 on your keyboard,
you can just kind of move and

165
00:07:21,370 --> 00:07:23,380
keep your vision on the screen, right.

166
00:07:23,380 --> 00:07:27,430
So this next line here, we're going to
loop through each one of the cards.

167
00:07:27,430 --> 00:07:30,360
This one is going to use
the append method to append and

168
00:07:30,360 --> 00:07:33,120
you can see that it's going
to refresh your memory about

169
00:07:33,120 --> 00:07:36,010
is the term here that it's gonna do and
it's going to append to that.

170
00:07:36,010 --> 00:07:36,610
That's nice.

171
00:07:36,610 --> 00:07:40,850
And then, wow, what is this doing?

172
00:07:40,850 --> 00:07:42,170
So check this out.

173
00:07:42,170 --> 00:07:45,480
When you don't know what's happening,
if you highlight, let's go ahead and

174
00:07:45,480 --> 00:07:47,960
I'm gonna highlight this card.size here.

175
00:07:47,960 --> 00:07:54,730
And you can press Cmd+Shift+F8, and
it will show you what's going on.

176
00:07:54,730 --> 00:07:58,080
There's a setting that I have turned on
here that you might not have turned on and

177
00:07:58,080 --> 00:08:01,050
I wanna show you cuz it's one of my
favorites and I always turn it on.

178
00:08:01,050 --> 00:08:04,750
So if you come into
a IntelliJ Preferences and

179
00:08:04,750 --> 00:08:08,080
you come down to Build, Execution,
Deployment and then Debugger and

180
00:08:08,080 --> 00:08:13,420
then Data Views, there's this option here
for Show value tool tip on code selection.

181
00:08:13,420 --> 00:08:18,650
So If you don't want that on,
you can do it with that command.

182
00:08:18,650 --> 00:08:20,735
See, I always forget which is
why I have that turned on.

183
00:08:20,735 --> 00:08:23,200
Cmd+Shift+F8.

184
00:08:23,200 --> 00:08:24,490
So that will kick that off.

185
00:08:24,490 --> 00:08:29,302
It's called a quick evaluate, but
it's super nice because I want to know,

186
00:08:29,302 --> 00:08:33,379
it's calling a cards.get on
cards.size minus 1 which is 4.

187
00:08:33,379 --> 00:08:34,790
What does that mean?

188
00:08:34,790 --> 00:08:37,770
So what is cards.get?

189
00:08:37,770 --> 00:08:41,815
You can highlight it all and see that
it does a quick evaluate across it and

190
00:08:41,815 --> 00:08:44,150
I know, it's the last card.

191
00:08:44,150 --> 00:08:46,305
So this is for to avoid the Oxford comma.

192
00:08:46,305 --> 00:08:50,680
[LAUGH] Wow that could be
documented a little bit better?

193
00:08:50,680 --> 00:08:55,173
Or maybe even use the new StringJoiner
class, see the teacher's notes.

194
00:08:55,173 --> 00:08:55,770
Oaky, so we get it.

195
00:08:55,770 --> 00:08:58,670
It goes through in and
it appends each one of these terms and

196
00:08:58,670 --> 00:08:59,970
we don't really want to walk through it.

197
00:08:59,970 --> 00:09:02,583
So we could add a new breakpoint
after this loop right?

198
00:09:02,583 --> 00:09:05,861
So we could go down here and
put a new breakpoint in here, but

199
00:09:05,861 --> 00:09:10,360
we might not want that breakpoint later so
why kind of litter up our breakpoints.

200
00:09:10,360 --> 00:09:12,650
So there's another thing that you can do,
just click here and

201
00:09:12,650 --> 00:09:15,070
you click Run to Cursor
which is this one here.

202
00:09:16,070 --> 00:09:18,450
Boom, so all those lines ran,
and it came here and stopped.

203
00:09:19,720 --> 00:09:22,760
Okay so it says refresh your memory about,
ba, ba, ba, ba, ba.

204
00:09:22,760 --> 00:09:27,444
It's gonna append, and
it's gonna get the current count, and

205
00:09:27,444 --> 00:09:30,490
it's gonna put in the total count there.

206
00:09:32,120 --> 00:09:34,030
Refresh your memory about and eight.

207
00:09:35,220 --> 00:09:36,425
And it's gonna append more.

208
00:09:36,425 --> 00:09:37,780
Weird.

209
00:09:37,780 --> 00:09:38,450
They're right.

210
00:09:38,450 --> 00:09:42,506
It is off right, it's not eight more,
cuz theres eight total cards and

211
00:09:42,506 --> 00:09:44,238
then it's gonna add cta.

212
00:09:44,238 --> 00:09:45,760
By calling ctaBuilder.toString,

213
00:09:45,760 --> 00:09:49,070
this is how you can do the build
pattern on the on the builder there.

214
00:09:49,070 --> 00:09:50,950
Now we finally are creating the string.

215
00:09:50,950 --> 00:09:52,340
[LAUGH] What is this cta?

216
00:09:52,340 --> 00:09:54,730
Inquiring minds want to know.

217
00:09:54,730 --> 00:09:56,120
Maybe something's in the template.

218
00:09:56,120 --> 00:09:59,380
Let's take a look at the template, right,
so it's gonna turn this index template.

219
00:09:59,380 --> 00:10:02,478
So if I do Shift+Shift, index.html.

220
00:10:04,551 --> 00:10:06,402
Where is cta, call-to-action.

221
00:10:06,402 --> 00:10:11,690
[LAUGH] I get it, we're building
the call to action on the page, cool.

222
00:10:11,690 --> 00:10:15,270
So I think we got the fixes
at our disposal.

223
00:10:15,270 --> 00:10:16,410
We're gonna change that thing to three,

224
00:10:16,410 --> 00:10:19,910
and we're gonna make that
thing count properly.

225
00:10:19,910 --> 00:10:22,310
Let's just stop the server like usual.

226
00:10:22,310 --> 00:10:24,240
And I'm gonna take a quick break,
and I'm swing back and

227
00:10:24,240 --> 00:10:26,860
fix this method with what we've
uncovered through our debugging.