1
00:00:00,210 --> 00:00:00,990
I'm Nick Pettit.

2
00:00:00,990 --> 00:00:01,990
>> I'm Jason Seifer.

3
00:00:01,990 --> 00:00:03,500
>> And you're watching the Treehouse Show.

4
00:00:03,500 --> 00:00:06,500
Your weekly dose of Internets where we
talk about all things web design,

5
00:00:06,500 --> 00:00:07,910
web development and more.

6
00:00:07,910 --> 00:00:12,003
>> In this episode we'll be talking about
reactive programming, accessible colors,

7
00:00:12,003 --> 00:00:14,360
JavaScript errors and more.

8
00:00:14,360 --> 00:00:20,339
>> Let's check it out.
[MUSIC]

9
00:00:20,339 --> 00:00:25,320
>> First up, we have a very long post on
the introduction to reactive

10
00:00:25,320 --> 00:00:28,730
programming that you have been missing.

11
00:00:28,730 --> 00:00:30,280
>> All right, give us the TLDR.

12
00:00:30,280 --> 00:00:30,910
>> All right.
Well,

13
00:00:30,910 --> 00:00:33,270
what in the world is reactive programming?

14
00:00:33,270 --> 00:00:37,530
Well, the author of this article wanted to
know exactly that.

15
00:00:37,530 --> 00:00:42,330
And had to learn it the hard way, which
was actually doing the programming and

16
00:00:42,330 --> 00:00:43,690
all sorts of reading.

17
00:00:43,690 --> 00:00:48,240
So the author of this article was nice
enough to sum it all up in this very,

18
00:00:48,240 --> 00:00:50,490
very thorough article.

19
00:00:50,490 --> 00:00:54,320
That was just a quick scroll to give you
an idea about how long this article is.

20
00:00:54,320 --> 00:00:57,220
Now I'm going to read this whole thing to
you word by word, so

21
00:00:57,220 --> 00:01:00,450
get comfortable, grab a beverage, and
let's get to it.

22
00:01:01,710 --> 00:01:02,260
No, I'm just kidding.

23
00:01:02,260 --> 00:01:03,960
So what is reactive programming?

24
00:01:03,960 --> 00:01:09,210
This is basically the way of programming
in which you are working with

25
00:01:09,210 --> 00:01:11,700
asynchronous data streams.

26
00:01:11,700 --> 00:01:15,860
And then after you have those asynchronous
data streams,

27
00:01:15,860 --> 00:01:18,890
you are manipulating them in some way.

28
00:01:18,890 --> 00:01:22,530
And then displaying the output, and
reacting to events.

29
00:01:22,530 --> 00:01:27,320
Wow, that sure is a whole lot of things,
and what does this all mean?

30
00:01:27,320 --> 00:01:29,680
Well, let's go ahead and see what happens.

31
00:01:29,680 --> 00:01:31,620
Well, this is an example of a stream.

32
00:01:31,620 --> 00:01:34,642
Notice it's got arrows, and circles, and
colors.

33
00:01:34,642 --> 00:01:35,810
There.
I hope that explains

34
00:01:35,810 --> 00:01:37,592
absolutely everything to you.

35
00:01:37,592 --> 00:01:38,312
>> Got it.

36
00:01:38,312 --> 00:01:39,045
>> Good.

37
00:01:39,045 --> 00:01:39,665
No.

38
00:01:39,665 --> 00:01:44,169
So the author of this article really shows
what exactly happens when hey,

39
00:01:44,169 --> 00:01:47,920
okay I've got, direct programming, what's
going on.

40
00:01:47,920 --> 00:01:51,680
Here's an example that we go through and
recreate in this article.

41
00:01:51,680 --> 00:01:56,540
This is an example of a list of people to
follow on Twitter.

42
00:01:56,540 --> 00:01:59,020
And you'll notice that there are a couple
buttons on here.

43
00:01:59,020 --> 00:02:02,360
You can either follow this person, which
is going to do something, or

44
00:02:02,360 --> 00:02:08,180
click the X which will get rid of this
suggestion and load up another one.

45
00:02:08,180 --> 00:02:11,335
You can also refresh this, which will go
out and

46
00:02:11,335 --> 00:02:16,850
re-fetch different people to follow, and
so on and so forth.

47
00:02:16,850 --> 00:02:19,660
So the rest of this article walks through
doing that and

48
00:02:19,660 --> 00:02:23,400
walks through reactive programming in the
process.

49
00:02:23,400 --> 00:02:27,720
So basically they take this whole request
and response and

50
00:02:27,720 --> 00:02:35,420
you subscribe to the request and then use
jQuery to get a JSON response.

51
00:02:35,420 --> 00:02:39,210
And then, you can subscribe to that as
well.

52
00:02:39,210 --> 00:02:41,150
Once this is all gone, yet look at that.

53
00:02:41,150 --> 00:02:43,959
The, these are, this is just a small
example of the emotions that you'll

54
00:02:43,959 --> 00:02:45,560
experience while reading this article.

55
00:02:46,890 --> 00:02:49,040
So you get these requests and responses.

56
00:02:49,040 --> 00:02:51,950
Okay the request goes out, and then the
response comes up.

57
00:02:51,950 --> 00:02:56,910
Here's like, little As that request big A
is the response and then the article

58
00:02:56,910 --> 00:03:01,500
shows you how to combine all this, what
happens in these responses and

59
00:03:01,500 --> 00:03:05,740
by the end of the article you have a whole
response stream.

60
00:03:05,740 --> 00:03:09,250
This is the entire code that you write in
this article

61
00:03:09,250 --> 00:03:12,140
along with a great explanation of how this
all works.

62
00:03:12,140 --> 00:03:14,010
Now, obviously, I can't explain all this
to you, but

63
00:03:14,010 --> 00:03:17,970
this is an absolutely wonderful
introduction to reactive programming.

64
00:03:17,970 --> 00:03:19,380
Definitely check it out.

65
00:03:19,380 --> 00:03:21,270
We'll have a link in the show notes.

66
00:03:21,270 --> 00:03:21,910
>> Very nice stuff.

67
00:03:21,910 --> 00:03:26,030
Well, next up is a tool for choosing
colors,

68
00:03:26,030 --> 00:03:31,620
but not just any colors, colors that are
safe for

69
00:03:31,620 --> 00:03:36,130
the WCAG, that's Web Content Accessibility
Guidelines,

70
00:03:36,130 --> 00:03:39,210
Guidelines just like ATM machine or PIN
number.

71
00:03:39,210 --> 00:03:43,740
So I'm gonna go ahead and click get
started here and

72
00:03:43,740 --> 00:03:45,520
I can pick a background color.

73
00:03:45,520 --> 00:03:50,170
So I'm gonna click here and I'll pick a
darker background color, so

74
00:03:50,170 --> 00:03:55,290
maybe we'll go with like a, like a dark
blue or something like that.

75
00:03:55,290 --> 00:04:00,220
And then I've got a font family, font
size, font weight, and WCAG standard.

76
00:04:00,220 --> 00:04:01,820
Let's go, let's go triple A.

77
00:04:01,820 --> 00:04:03,280
Then I'll say, all right.

78
00:04:03,280 --> 00:04:05,080
Generate the color palette.

79
00:04:05,080 --> 00:04:06,290
>> Oh, that's nice.

80
00:04:06,290 --> 00:04:13,240
>> And then we can click on these, and
pick a secondary color for the text.

81
00:04:13,240 --> 00:04:18,520
But like I said, this is not just any kind
of color.

82
00:04:18,520 --> 00:04:24,140
These are colors that hit the proper
contrast ratio

83
00:04:24,140 --> 00:04:28,300
to be compliant with the WCAG standards.

84
00:04:28,300 --> 00:04:32,610
So if you have a color that you definitely
want to use for

85
00:04:32,610 --> 00:04:35,990
a background color well, then you can go
ahead and

86
00:04:35,990 --> 00:04:41,560
pick colors that are going to match for
that contrast ratio.

87
00:04:41,560 --> 00:04:46,270
So let's try another example, let's go
back up here and let's maybe pick-.

88
00:04:46,270 --> 00:04:46,970
>> Yellow.

89
00:04:46,970 --> 00:04:48,060
>> A really bright color.

90
00:04:48,060 --> 00:04:52,120
So we'll go ahead and go with maybe this
light yellow.

91
00:04:52,120 --> 00:04:54,650
We'll say, okay, generate color palette.

92
00:04:54,650 --> 00:04:59,960
And now it should come up with, there we
go, some dark colors.

93
00:04:59,960 --> 00:05:04,990
So those dark colors will match the
lighter color that we picked.

94
00:05:04,990 --> 00:05:07,110
So this isn't necessarily a tool for

95
00:05:07,110 --> 00:05:11,850
picking color palettes that are going to
be aesthetically pleasing, but

96
00:05:11,850 --> 00:05:16,330
that doesn't mean that you can't make them
aesthetically pleasing just by picking

97
00:05:16,330 --> 00:05:19,020
good colors that will match your color
palette.

98
00:05:19,020 --> 00:05:23,100
What this tool really is for, is to make
sure that you have enough contrast

99
00:05:23,100 --> 00:05:27,450
in your text and your backgrounds, so that
your text is actually readable.

100
00:05:27,450 --> 00:05:31,570
>> Yeah and, you know, if, if you're
worried about that, lighten up.

101
00:05:32,660 --> 00:05:33,540
Get it?

102
00:05:33,540 --> 00:05:34,950
It's a color pun.

103
00:05:34,950 --> 00:05:40,860
Next up, we have a blog post on how to
track JavaScript errors in AngularJS and

104
00:05:40,860 --> 00:05:43,250
jQuery using Google Analytics.

105
00:05:43,250 --> 00:05:48,300
So the benefit of this is if you have some
sort of JavaScript error on your site,

106
00:05:48,300 --> 00:05:51,390
when you load up Google Analytics, you can
see the error and

107
00:05:51,390 --> 00:05:54,140
the message right inside.

108
00:05:54,140 --> 00:05:59,110
So, they tell you how to do it using the
classic Google analytic js,

109
00:05:59,110 --> 00:06:02,190
and it's actually really, really easy to
do.

110
00:06:02,190 --> 00:06:04,620
Just go ahead and, hey.

111
00:06:04,620 --> 00:06:09,980
Whenever you have an error, push it on to
the stack and, boom, you are good to go.

112
00:06:09,980 --> 00:06:15,740
Also show how to do it in angular JS using
an exception handler service.

113
00:06:15,740 --> 00:06:21,060
Also very, very easy to use, just load up
a module, then configure it,

114
00:06:21,060 --> 00:06:25,790
do the same push of the error and tracking
the event.

115
00:06:25,790 --> 00:06:28,170
And another example with JQuery.

116
00:06:28,170 --> 00:06:32,110
What does this look like when you get into
Google Analytics?

117
00:06:32,110 --> 00:06:37,260
Well you can enter some errors on here and
then if you scroll down

118
00:06:37,260 --> 00:06:41,250
you'll see this is what it can look like
right on the Google Analytics site.

119
00:06:41,250 --> 00:06:43,270
You get a JavaScript error.

120
00:06:43,270 --> 00:06:46,240
Shows you the exact error that happened.

121
00:06:46,240 --> 00:06:46,990
When it happened.

122
00:06:46,990 --> 00:06:48,330
How many times.

123
00:06:48,330 --> 00:06:52,160
And also works for Angular JS and jQuery.

124
00:06:52,160 --> 00:06:56,050
So this is a really, really great tool to
have in your arsenal.

125
00:06:56,050 --> 00:07:00,140
Could also take the place of some specific
error reporting services that

126
00:07:00,140 --> 00:07:01,500
you might have to pay money for.

127
00:07:01,500 --> 00:07:03,280
Anyway, check it out, we'll have a link in
the show notes.

128
00:07:03,280 --> 00:07:05,430
You can see them right below this video.

129
00:07:05,430 --> 00:07:06,330
>> Very nice stuff.

130
00:07:06,330 --> 00:07:09,800
Well, keeping with the theme of
accessibility from the previous link,

131
00:07:09,800 --> 00:07:14,210
here's yet another tool that does a very
similar thing.

132
00:07:14,210 --> 00:07:17,760
>> Oh, so you mean there's not a lot of
contrast between the last tool?

133
00:07:17,760 --> 00:07:19,710
>> No.
They're pretty similar.

134
00:07:19,710 --> 00:07:22,570
So, in keeping with the theme of
accessibility,

135
00:07:22,570 --> 00:07:26,777
this is another tool that will help you
measure the WCAG.

136
00:07:26,777 --> 00:07:28,215
>> guidelines.
>> Guidelines, the-.

137
00:07:28,215 --> 00:07:30,030
>> The guidelines, guidelines.

138
00:07:30,030 --> 00:07:35,300
>> The Web Content Accessibility
Guidelines guidelines.

139
00:07:35,300 --> 00:07:40,520
And it will help you measure the contrast
ratio of your background to text.

140
00:07:40,520 --> 00:07:43,500
Except, instead of suggesting colors,

141
00:07:43,500 --> 00:07:47,820
this tool will allow you to pick any
colors you want.

142
00:07:47,820 --> 00:07:50,970
So we can use these sliders down here to
make adjustments.

143
00:07:50,970 --> 00:07:51,970
And it will tell us, okay.

144
00:07:51,970 --> 00:07:57,830
Well, right now, we're hitting a triple A
level of contrast.

145
00:07:57,830 --> 00:08:01,400
But if we maybe bring down the likeness
oh, this is.

146
00:08:01,400 --> 00:08:02,250
>> Down to double a.

147
00:08:02,250 --> 00:08:03,480
>> Down to double a.

148
00:08:03,480 --> 00:08:04,530
>> We're failing.

149
00:08:04,530 --> 00:08:10,420
>> And this is okay if the text is large,
but this is not okay.

150
00:08:10,420 --> 00:08:14,980
And then right down here, oh, now we are
hitting fail.

151
00:08:14,980 --> 00:08:18,110
>> Oh, I see then, then the number on the
top right changes and

152
00:08:18,110 --> 00:08:19,120
shows you what your score is.

153
00:08:19,120 --> 00:08:19,830
>> That's right.

154
00:08:19,830 --> 00:08:21,670
It's pretty low right now cause it's tough
to read.

155
00:08:21,670 --> 00:08:27,090
So let's bring that down, and then maybe
if we bring up the background-.

156
00:08:27,090 --> 00:08:30,130
>> Ooh!
>> We can go back to triple-a.

157
00:08:30,130 --> 00:08:33,410
>> That's nice.
>> So, this tells you, and quantifies for

158
00:08:33,410 --> 00:08:38,210
you just how much contrast is in your
text, which is really important for,

159
00:08:38,210 --> 00:08:42,050
not only accessibility reasons, but also
just for design in general.

160
00:08:42,050 --> 00:08:45,140
It's good to have nice, crisp, legible
text.

161
00:08:45,140 --> 00:08:46,430
>> Definitely.

162
00:08:46,430 --> 00:08:50,070
Next up we have a blog post from Ian
Devlin on

163
00:08:50,070 --> 00:08:55,030
dynamically adding text tracks to HTML5
video.

164
00:08:55,030 --> 00:08:57,850
Now, why in the world would you want to do
that?

165
00:08:57,850 --> 00:09:00,330
Well, maybe you don't want to load the
entire track up front.

166
00:09:00,330 --> 00:09:08,150
Save mobile users some bandwidth, you can
use a callback to load a text track later.

167
00:09:08,150 --> 00:09:11,760
This could be useful for adding something
like closed captioning.

168
00:09:11,760 --> 00:09:12,700
So, how do you do that?

169
00:09:12,700 --> 00:09:17,200
Well, you can add an event listener for
loaded metadata and

170
00:09:17,200 --> 00:09:21,850
then add a text track to it and boom you
are good to go.

171
00:09:21,850 --> 00:09:27,630
So there is a little bit more in depth
instructions for what you need to do.

172
00:09:27,630 --> 00:09:32,730
You can add some attributes to it and you
get a little call back function here.

173
00:09:32,730 --> 00:09:36,660
And then you can even set different modes
on the video.

174
00:09:36,660 --> 00:09:40,920
And by the end of it you have an entire
working example

175
00:09:40,920 --> 00:09:46,470
of creating another text track dynamically
in HTML 5 video.

176
00:09:46,470 --> 00:09:51,180
So that's it, just a really quick how to
post if you're working with HTML 5 video.

177
00:09:51,180 --> 00:09:51,910
>> Very nice stuff.

178
00:09:51,910 --> 00:09:54,880
Well, I think that is all we have time for
this week.

179
00:09:54,880 --> 00:09:57,060
Congrats on making it through another
episode.

180
00:09:57,060 --> 00:09:58,280
I am @nickrp on twitter.

181
00:09:58,280 --> 00:10:01,190
>> And I am @jseifer, for more information
on anything we talked about,

182
00:10:01,190 --> 00:10:03,240
check out the show notes right below this
video.

183
00:10:03,240 --> 00:10:06,215
We want to thank you so much for watching,
and we'll see you next week.

184
00:10:06,215 --> 00:10:13,004
[SOUND]