1
00:00:00,250 --> 00:00:02,020
I'm Nick Pettit.
>> I'm Jason Seifer.

2
00:00:02,020 --> 00:00:04,840
>> And you're watching The Treehouse
Show, your weekly dose of internets,

3
00:00:04,840 --> 00:00:08,000
where we talk about all things web design,
web development and more.

4
00:00:08,000 --> 00:00:09,350
>> In this episode we'll be talking
about

5
00:00:09,350 --> 00:00:14,190
contrast ratio, favicons, offline web apps
and more.

6
00:00:14,190 --> 00:00:15,394
>> Let's check it out.

7
00:00:15,394 --> 00:00:20,384
[MUSIC]

8
00:00:20,384 --> 00:00:24,193
First up is a tool called contrast ratio.

9
00:00:24,193 --> 00:00:28,093
Now if you're building a website and
you're wondering if whether or not your

10
00:00:28,093 --> 00:00:30,613
text contrasts against your background
then this

11
00:00:30,613 --> 00:00:32,660
is probably the tool you want to use.

12
00:00:32,660 --> 00:00:33,880
>> So you're saying you shouldn't use

13
00:00:33,880 --> 00:00:36,170
light grey text on a light grey
background.

14
00:00:36,170 --> 00:00:38,780
>> Probably not it's not going to be
very legible.

15
00:00:38,780 --> 00:00:42,750
>> Hmm, but what if you're just trying
to trick your users into squinting.

16
00:00:42,750 --> 00:00:45,920
That would be actually pretty terrible.

17
00:00:45,920 --> 00:00:49,360
So, here we have a background, and it's
set to white.

18
00:00:49,360 --> 00:00:52,340
That's over on the left side here, and
over on the

19
00:00:52,340 --> 00:00:57,640
right, we have the text color, and that's
using an HSLA value.

20
00:00:57,640 --> 00:01:02,050
That's set to black, and it's slightly
transparent.

21
00:01:02,050 --> 00:01:05,740
So that's the text that you see.
Over here.

22
00:01:05,740 --> 00:01:11,160
Now in the middle we have, this number
8.6, and that's a rating according

23
00:01:11,160 --> 00:01:15,230
to the WCAG 2.0 guidelines.
>> What does that stand for?

24
00:01:15,230 --> 00:01:18,950
>> That stands for web content
accessibility guidelines.

25
00:01:20,590 --> 00:01:21,160
Yep.

26
00:01:21,160 --> 00:01:26,570
And if we go ahead and change this color,
so I'm going to, set

27
00:01:26,570 --> 00:01:31,630
the background to green here, and we'll
change this

28
00:01:31,630 --> 00:01:36,300
color over here to orange, it's going to
give me a pretty terrible rating,

29
00:01:36,300 --> 00:01:41,680
it's gonna say this actually fails WCAG,
and it gives me a sad face there.

30
00:01:41,680 --> 00:01:43,870
>> Yeah that, that fails a lot of
things.

31
00:01:43,870 --> 00:01:44,760
>> But.

32
00:01:44,760 --> 00:01:49,950
If I were to reset this, and set the

33
00:01:49,950 --> 00:01:54,730
background color to white and the text
color to black, we'll get a really high

34
00:01:54,730 --> 00:02:00,590
rating here, and we'll say this passes AAA
level for any size text.

35
00:02:00,590 --> 00:02:02,630
So it has good contrast.

36
00:02:02,630 --> 00:02:03,760
So, pretty nifty tool.

37
00:02:03,760 --> 00:02:07,480
And good for testing whether or not you
have enough contrast with your text.

38
00:02:07,480 --> 00:02:09,070
>> Yeah, that's, that's really useful.

39
00:02:09,070 --> 00:02:10,460
>> Hm.
>> Especially, you know?

40
00:02:10,460 --> 00:02:13,670
In case you need to be told not to have a
green background and orange text.

41
00:02:13,670 --> 00:02:14,810
>> Just in case.
>> Right.

42
00:02:16,160 --> 00:02:20,080
Next up, we have something called the real
Favicon Generator.

43
00:02:20,080 --> 00:02:22,390
Now, this is a really nice site where you

44
00:02:22,390 --> 00:02:25,180
can input your current website, and it
will tell you.

45
00:02:25,180 --> 00:02:27,830
How your favicon looks, and also give you
different code

46
00:02:27,830 --> 00:02:30,700
to put into your site.
>> Wow, for real?

47
00:02:30,700 --> 00:02:30,930
>> Yeah.

48
00:02:30,930 --> 00:02:33,060
It'll also give you different ratings, to
see if it works

49
00:02:33,060 --> 00:02:37,010
well on Android browsers, or Windows
mobile phones, things like that.

50
00:02:37,010 --> 00:02:38,140
>> Really?
>> Yeah.

51
00:02:38,140 --> 00:02:38,280
>> Wow.

52
00:02:38,280 --> 00:02:42,650
>> So, gotta, gotta little demo here.
You can either submit your favicon.

53
00:02:42,650 --> 00:02:45,270
It'll Generate the different ones for you.

54
00:02:45,270 --> 00:02:50,420
Or you can check your existing Favicon.
I'll just enter cnn.com right here.

55
00:02:50,420 --> 00:02:53,180
And okay so I gave it cnn.com to

56
00:02:53,180 --> 00:02:56,010
check the different Favicon.
And said hey, alright great.

57
00:02:57,220 --> 00:02:59,720
The overview is yeah it looks great on
desktop.

58
00:02:59,720 --> 00:03:01,190
Yeah looks great on IOS.

59
00:03:01,190 --> 00:03:03,720
Yeah looks fine on some cases on Windows
8.

60
00:03:03,720 --> 00:03:08,400
But uh-oh, This is not well designed for
Android.

61
00:03:08,400 --> 00:03:11,310
So then it goes through and it kinda
grades you and tells you what's going on.

62
00:03:11,310 --> 00:03:13,320
You know, obviously green means it's good.

63
00:03:13,320 --> 00:03:15,960
Red, hey you need a little bit of work on
here.

64
00:03:15,960 --> 00:03:18,360
And it will give you suggestions saying

65
00:03:18,360 --> 00:03:24,130
hey upload this size picture and even more
suggestions for different PNG sizes.

66
00:03:24,130 --> 00:03:27,470
Then it also breaks down with IOS sizes.

67
00:03:27,470 --> 00:03:31,880
As well as Windows 8, and boy it doesn't
have the

68
00:03:31,880 --> 00:03:37,570
Android on here, but it can make some
optimizations for that too.

69
00:03:37,570 --> 00:03:38,690
Anyway, check it out.

70
00:03:38,690 --> 00:03:40,100
We'll have a link to that in the show
notes,

71
00:03:40,100 --> 00:03:43,360
which you can get to at
youtube.com/gotreehouse or search for us

72
00:03:43,360 --> 00:03:46,320
in iTunes at The Treehouse Show.

73
00:03:46,320 --> 00:03:49,770
That is wonderful, well next up is ion
icons and

74
00:03:49,770 --> 00:03:52,000
if you like icon fonts you're going to
love this.

75
00:03:52,000 --> 00:03:54,530
>> I love icon fonts.
>> It's an icon font.

76
00:03:54,530 --> 00:03:59,870
Now it says the premium icon font for
ionic framework now what the heck is that?

77
00:03:59,870 --> 00:04:01,670
If you click through, it's actually a

78
00:04:01,670 --> 00:04:05,190
framework that's coming soon, fall of
2013.

79
00:04:05,190 --> 00:04:08,390
Not much time left.
And it's going to

80
00:04:08,390 --> 00:04:13,640
be a bunk between HTML-5 and native apps
and you can go ahead and sign up.

81
00:04:13,640 --> 00:04:16,030
With your email address to get notified.

82
00:04:16,030 --> 00:04:20,820
However, these icons are already
available, and as Andrew Chalkley

83
00:04:20,820 --> 00:04:23,650
said, this is the fam fam fam of our time.

84
00:04:23,650 --> 00:04:28,490
Fam fam fam, of course, being a popular
icon set of yesteryear.

85
00:04:28,490 --> 00:04:31,210
But these are the new ones, and they're
super flat.

86
00:04:31,210 --> 00:04:33,630
And if we scroll down here you can see

87
00:04:33,630 --> 00:04:39,100
that a lot of these look very much like
icons like you might find in IOS 7.

88
00:04:39,100 --> 00:04:42,790
So of course if this is gonna be the bond
between HTML

89
00:04:42,790 --> 00:04:46,630
5 and native apps, you definitely need to
use some of those.

90
00:04:46,630 --> 00:04:50,850
If we scroll down further, you can see all
the typical things that you would expect.

91
00:04:50,850 --> 00:04:54,590
And, got some play buttons here, got some
social icons,

92
00:04:54,590 --> 00:04:58,490
all that good stuff, it's a pretty good
icon font,

93
00:04:58,490 --> 00:05:02,320
it seems like it's pretty comprehensive,
so, definitely be sure to check it out.

94
00:05:02,320 --> 00:05:05,190
>> Huh, I guess you could say you could
keep your eye on it.

95
00:05:06,380 --> 00:05:07,770
That's a good one, Jason.
>> Get it?

96
00:05:07,770 --> 00:05:10,484
Cuz it's called [INAUDIBLE].
>> Yeah, I think we got it.

97
00:05:10,484 --> 00:05:13,250
>> Next up we have a really handy

98
00:05:13,250 --> 00:05:18,220
table here for equality in JavaScript with
zeros.

99
00:05:18,220 --> 00:05:20,300
>> So if you're ever laying in bed one
night

100
00:05:20,300 --> 00:05:24,000
and you're like, man I really can't figure
out if null

101
00:05:24,000 --> 00:05:29,090
is equal to zero in JavaScript.
You can just go right to this website.

102
00:05:29,090 --> 00:05:29,260
>> Yeah.

103
00:05:29,260 --> 00:05:30,040
>> And figure it out.

104
00:05:30,040 --> 00:05:32,500
>> And I'm sorry I didn't send this to
you yesterday.

105
00:05:32,500 --> 00:05:33,880
>> Yeah.

106
00:05:33,880 --> 00:05:36,610
>> It's weird cuz he was telling me
about how he couldn't

107
00:05:36,610 --> 00:05:39,730
go to sleep, because he couldn't think
about the quality of zeroes.

108
00:05:39,730 --> 00:05:40,840
>> So, so tired today.

109
00:05:40,840 --> 00:05:41,460
>> JavaScript.

110
00:05:41,460 --> 00:05:43,976
Anyway, no, so [LAUGH] this is a, this is
a nice

111
00:05:43,976 --> 00:05:48,800
site where Surprisingly, Javascript
equality can be a little bit strange.

112
00:05:48,800 --> 00:05:53,060
like, if we take a look at the site, they
have the number zero.

113
00:05:53,060 --> 00:05:55,360
And is that equal to zero?

114
00:05:55,360 --> 00:05:58,260
Well, yes, this chart says it's true.

115
00:05:58,260 --> 00:06:03,310
Is also equal to the string zero.
The array with the only element

116
00:06:03,310 --> 00:06:08,260
zero, An empty array but not an object
[UNKNOWN].

117
00:06:08,260 --> 00:06:13,980
So, if you are confused about why some
value in JavaScript is may

118
00:06:13,980 --> 00:06:15,890
be returning something strange, you might
have

119
00:06:15,890 --> 00:06:18,370
run into one of these different scenarios,

120
00:06:18,370 --> 00:06:21,180
and you should look it up on here just to
see what's going on.

121
00:06:21,180 --> 00:06:26,840
Now, it's not just a quality, they also
have it for triple equal sign which is

122
00:06:26,840 --> 00:06:33,670
quality and the same object And it also
works for addition and multiplication.

123
00:06:33,670 --> 00:06:36,190
So, anyway this is a really, really handy
chart.

124
00:06:36,190 --> 00:06:39,520
Next time you're programming a web app in
JavaScript,

125
00:06:39,520 --> 00:06:40,670
refer to it in case you're getting

126
00:06:40,670 --> 00:06:42,240
some strange behavior that you can't
figure out.

127
00:06:42,240 --> 00:06:44,890
You might have hit one of these weird
little edge cases.

128
00:06:44,890 --> 00:06:47,080
>> Hm, that's a really handy reference.

129
00:06:47,080 --> 00:06:48,820
Or you can just read it for fun after

130
00:06:48,820 --> 00:06:51,230
you're done with the phone book or the
dictionary.

131
00:06:51,230 --> 00:06:53,050
>> Yeah, if you have enough time.

132
00:06:53,050 --> 00:06:56,100
>> Hm, really nice stuff.
Alright, well next up is.

133
00:06:56,100 --> 00:06:58,060
>> We're really nailing the jokes
today.

134
00:06:58,060 --> 00:07:03,050
>> Next up is a blog post from Ethan
Marcotte.

135
00:07:03,050 --> 00:07:04,940
I still don't know how to pronounce his
last name.

136
00:07:04,940 --> 00:07:08,200
It's Marcot or Marcot I'm really sorry.

137
00:07:09,450 --> 00:07:12,570
But anyways, it's a blog post from Ethan,
leave it at that.

138
00:07:12,570 --> 00:07:17,650
And Ethan of course, is the creator of
responsive web design, which is a

139
00:07:17,650 --> 00:07:22,250
technique that allows you to create web
pages that work on a variety of.

140
00:07:22,250 --> 00:07:24,180
Different screen resolutions.

141
00:07:24,180 --> 00:07:27,440
Now that's actually what the blog post is
about.

142
00:07:27,440 --> 00:07:29,960
There's been a little bit of controversy
in the

143
00:07:29,960 --> 00:07:33,380
web design world recently.
Luke.

144
00:07:33,380 --> 00:07:34,848
Another difficult last name.

145
00:07:34,848 --> 00:07:39,470
[UNKNOWN] I believe is how you say it,
wrote a blog post.

146
00:07:39,470 --> 00:07:44,950
And he's basically saying that he thinks
people have become too dependent

147
00:07:44,950 --> 00:07:49,820
On screen sizes or the, the width of the
screen

148
00:07:49,820 --> 00:07:55,530
for determining other functionality, such
as touch capabilities.

149
00:07:55,530 --> 00:07:57,550
Ethan says, you know, of course you
shouldn't

150
00:07:57,550 --> 00:08:01,760
determine other functionality based on the
screen resolution.

151
00:08:01,760 --> 00:08:04,590
And, he makes a point here where he says,

152
00:08:04,590 --> 00:08:07,760
you know, rather than seeing that as a
hindrance.

153
00:08:07,760 --> 00:08:14,960
He sees the screen resolution as being a
foundation for building up other things.

154
00:08:14,960 --> 00:08:19,540
So instead of seeing it as, you know a
drawback.

155
00:08:19,540 --> 00:08:20,750
He really sees it as

156
00:08:20,750 --> 00:08:24,260
a way to actually start your design.

157
00:08:24,260 --> 00:08:27,060
You know, you start your design with The
screen,

158
00:08:27,060 --> 00:08:31,020
and then as other things become available
to us.

159
00:08:31,020 --> 00:08:34,190
Later on with the new standards that are
upcoming.

160
00:08:34,190 --> 00:08:35,190
I think there's.

161
00:08:35,190 --> 00:08:36,390
I'm trying to think of the name of it.

162
00:08:36,390 --> 00:08:39,650
It's a W3C standard and he did link to it
in here.

163
00:08:39,650 --> 00:08:42,460
It's the net info API.

164
00:08:42,460 --> 00:08:45,990
So as other things like that become
available and new capabilities become

165
00:08:45,990 --> 00:08:48,940
available on hardware devices It might be
okay to do

166
00:08:48,940 --> 00:08:51,810
that later on, but I think he's very right
in

167
00:08:51,810 --> 00:08:56,610
stating that we really should stick to
responsive web design

168
00:08:56,610 --> 00:08:59,490
as being a tool for web designing for a
screen.

169
00:08:59,490 --> 00:09:01,960
Because that's really the, the common

170
00:09:01,960 --> 00:09:04,830
thread amongst all of these different
devices.

171
00:09:04,830 --> 00:09:05,080
>> Yeah.

172
00:09:05,080 --> 00:09:06,950
And you know when you get to the point
where

173
00:09:06,950 --> 00:09:09,680
you need to add different behavior and
things like that.

174
00:09:09,680 --> 00:09:11,050
You can use a polyfil,

175
00:09:11,050 --> 00:09:12,580
you know, if you don't wanna rely on
touch.

176
00:09:12,580 --> 00:09:15,360
Use a polyfil that we've talked about on
previous episodes of this show.

177
00:09:15,360 --> 00:09:17,830
Or we'll say, hey, if touch is available
use that.

178
00:09:17,830 --> 00:09:21,000
If not, go ahead and fall back to the
click handlers or somethin' like that.

179
00:09:21,000 --> 00:09:21,490
>> Exactly.

180
00:09:21,490 --> 00:09:25,290
You're saying that a small screen doesn't
necessarily mean it's a touch device.

181
00:09:25,290 --> 00:09:27,650
>> Yeah.
Maybe someone just resized their browser.

182
00:09:27,650 --> 00:09:28,260
>> Exactly.

183
00:09:28,260 --> 00:09:30,670
>> I mean I, sometimes I browse the web
with my browser that big.

184
00:09:30,670 --> 00:09:31,230
It's just.
>> Yeah.

185
00:09:31,230 --> 00:09:33,250
>> It's not a statement.
It's just sometimes that's [INAUDIBLE].

186
00:09:33,250 --> 00:09:35,540
>> Yeah, instead of using browser tabs,
that's usually what I do.

187
00:09:35,540 --> 00:09:36,300
I just have like

188
00:09:36,300 --> 00:09:39,300
Eight really skinny browsers across,
across the screen.

189
00:09:39,300 --> 00:09:40,260
>> Yeah, yeah, yeah.

190
00:09:40,260 --> 00:09:42,032
>> Love browsing the web that way.
>> Huh.

191
00:09:42,032 --> 00:09:47,540
[LAUGH] Next up we have a project called
Offline.

192
00:09:47,540 --> 00:09:50,610
This is a JavaScript library from Hubspot
that makes

193
00:09:50,610 --> 00:09:54,400
handling offline interactions with your
web apps much easier.

194
00:09:54,400 --> 00:09:56,760
Now, one thing that's interesting about,
you know, where we are today,

195
00:09:56,760 --> 00:09:59,630
you can have a web app that handles a
whole bunch of data.

196
00:09:59,630 --> 00:10:01,360
You know, you're posting to

197
00:10:01,360 --> 00:10:04,330
a server, getting things back right on the
page without leaving it.

198
00:10:04,330 --> 00:10:05,860
You know, maybe it's heavy into AJAX,

199
00:10:05,860 --> 00:10:08,260
maybe it's using WebSockets, something
like that.

200
00:10:08,260 --> 00:10:09,620
Now, what this library does is,

201
00:10:09,620 --> 00:10:13,910
it'll monitor the connectivity of your
application.

202
00:10:13,910 --> 00:10:14,550
Goes offline.

203
00:10:14,550 --> 00:10:16,660
It can display a message to somebody.

204
00:10:16,660 --> 00:10:19,780
And you can decide how you hand, wanna
handle it at that point.

205
00:10:19,780 --> 00:10:22,380
Now, as you expect [UNKNOWN] from
basically everything that we

206
00:10:22,380 --> 00:10:25,580
cover on here, it is very, very simple to
use.

207
00:10:25,580 --> 00:10:26,490
You can see

208
00:10:26,490 --> 00:10:29,630
if the step, if the connection is
available immediately, you

209
00:10:29,630 --> 00:10:33,510
can intercept requests, specify how long
of a delay you want.

210
00:10:33,510 --> 00:10:38,400
And then you can say, hey what should we
do when we are online, what happens when

211
00:10:38,400 --> 00:10:41,520
we're reconnecting, what happens when
we're reconnected and you

212
00:10:41,520 --> 00:10:44,670
can also intercept AJAX requests if you
want to.

213
00:10:44,670 --> 00:10:46,130
Anyway this is a really, really handy

214
00:10:46,130 --> 00:10:48,720
library and something that you should be
using.

215
00:10:48,720 --> 00:10:51,680
In your web applications you can't always
assume that people are

216
00:10:51,680 --> 00:10:54,120
going to be connected this day and age.

217
00:10:54,120 --> 00:10:56,260
So yeah, just check that out, offline.js,
you'll

218
00:10:56,260 --> 00:10:57,940
find a link to it in the show notes.

219
00:10:57,940 --> 00:11:01,690
>> You know that reminds me that the
FAA recently decided that we can

220
00:11:01,690 --> 00:11:07,880
go ahead and leave electronic devices on,
while we're in any phase of flight.

221
00:11:07,880 --> 00:11:08,530
>> Oh, good.

222
00:11:08,530 --> 00:11:12,690
>> So if you know, the person is using
your web app maybe, their on

223
00:11:12,690 --> 00:11:17,740
their Or on the runway, and as they take
off, they're just like totally zoned out.

224
00:11:17,740 --> 00:11:22,290
And it disconnects from the internet.
But that might be a perfect use for it.

225
00:11:22,290 --> 00:11:23,450
>> The, yeah.
There you go.

226
00:11:23,450 --> 00:11:24,290
>> Yeah.

227
00:11:24,290 --> 00:11:28,440
Well, next up is Snazzy Maps, and recently

228
00:11:28,440 --> 00:11:33,360
Google just released The 3.0 version of
their

229
00:11:33,360 --> 00:11:36,120
Google Maps Javascript API, and in that,
you

230
00:11:36,120 --> 00:11:38,990
can actually apply different colors to the
maps.

231
00:11:38,990 --> 00:11:43,190
Snazzy Maps is basically just a set of
themes or different

232
00:11:43,190 --> 00:11:45,920
color schemes that you can apply to your
maps.

233
00:11:45,920 --> 00:11:49,290
Now, there's a lot of different colors on
a map that you need to set, so

234
00:11:49,290 --> 00:11:52,460
this is actually pretty nice, because It
has

235
00:11:52,460 --> 00:11:55,470
all those colors set and adjusted for you.

236
00:11:55,470 --> 00:11:59,160
And as we discussed earlier contrast on
any of these is

237
00:11:59,160 --> 00:12:02,780
very important, so it's nice that that's
already done for you.

238
00:12:02,780 --> 00:12:03,750
And look at that, whoa!

239
00:12:03,750 --> 00:12:05,630
I can actually drag these around and see

240
00:12:05,630 --> 00:12:07,370
what different parts of the world look
like.

241
00:12:07,370 --> 00:12:07,750
>> Wow.

242
00:12:07,750 --> 00:12:08,320
In any one

243
00:12:08,320 --> 00:12:09,610
of these themes.

244
00:12:09,610 --> 00:12:13,960
Not much to say about it, but it is pretty
nice that a lot of these themes are

245
00:12:13,960 --> 00:12:16,620
already made available to you so
definitely be sure

246
00:12:16,620 --> 00:12:18,660
to check that out if you're working with
Google maps.

247
00:12:18,660 --> 00:12:19,070
>> Yeah.

248
00:12:19,070 --> 00:12:20,550
Well I think that about wraps it up for
today.

249
00:12:20,550 --> 00:12:21,580
Nick, who are you on Twitter?

250
00:12:21,580 --> 00:12:23,970
>> I'm @nickrp.
>> And I'm @jseifer.

251
00:12:23,970 --> 00:12:26,120
If you want anymore information On
anything we talked about,

252
00:12:26,120 --> 00:12:29,810
be sure to check out our show notes at
youtube.com/gotreehouse.

253
00:12:29,810 --> 00:12:32,910
Or search for us at iTunes at the
Treehouse Show.

254
00:12:32,910 --> 00:12:33,510
>> And, of course,

255
00:12:33,510 --> 00:12:37,820
if you'd like to see videos that are even
better than this one, hard to imagine.

256
00:12:37,820 --> 00:12:39,555
>> Go anywhere else on the internet.

257
00:12:39,555 --> 00:12:40,210
[LAUGH]

258
00:12:40,210 --> 00:12:43,810
>> Or, if you want to learn more about
web design, web development,

259
00:12:43,810 --> 00:12:48,900
business, mobile, and so much more, be
sure to check us out at TeamTreeHouse.com.

260
00:12:48,900 --> 00:12:52,472
Thanks so much for watching, and we hope
to see you next week.

261
00:12:52,472 --> 00:12:59,484
[MUSIC]

262
00:12:59,484 --> 00:13:02,572
>> I like your face.
>> I like your face.