1
00:00:01,210 --> 00:00:03,130
I'm Nick Pettit. >>I'm Jason Seifer. 

2
00:00:03,130 --> 00:00:06,130
And you're watching The Treehouse Show, your weekly dose of Internets

3
00:00:06,130 --> 00:00:09,820
where we talk about all things web design, web development and more.

4
00:00:09,820 --> 00:00:13,060
In this episode of The Treehouse Show, we'll be talking about jQuery releases,

5
00:00:13,060 --> 00:00:15,990
favicons, and CSS optimization.

6
00:00:15,990 --> 00:00:18,280
Let's check it out.

7
00:00:18,280 --> 00:00:22,000
[Morse code beeping sound]

8
00:00:22,000 --> 00:00:23,890
[The Treehouse Show]

9
00:00:23,890 --> 00:00:27,300
First up is easing functions. [trhou.se/TspRkb]

10
00:00:27,300 --> 00:00:30,260
It's this really cool website at easings.net

11
00:00:30,260 --> 00:00:34,340
where you can learn about all the different types of easing functions

12
00:00:34,340 --> 00:00:37,140
that you can apply to animations.

13
00:00:37,140 --> 00:00:39,090
Now, what is an easing function?

14
00:00:39,090 --> 00:00:46,190
It's a little bit complicated to think about if you've never encountered them before,

15
00:00:46,190 --> 00:00:51,310
but basically you use them with CSS animations and transitions,

16
00:00:51,310 --> 00:00:54,630
and you can also use them in JavaScript as well.

17
00:00:54,630 --> 00:00:59,780
It basically determines how fast an animation plays over time,

18
00:00:59,780 --> 00:01:03,070
not necessarily quantifying time itself.

19
00:01:03,070 --> 00:01:07,500
So the animation could play over 4 seconds or 10 minutes,

20
00:01:07,500 --> 00:01:12,980
and it determines how fast the animation occurs.

21
00:01:12,980 --> 00:01:16,460
This is pretty complicated, which is why there is this whole website for it.

22
00:01:16,460 --> 00:01:22,510
So if you want to, say, create an animation that is easeinCubic,

23
00:01:22,510 --> 00:01:26,290
which kind of increases in speed over time,

24
00:01:26,290 --> 00:01:33,340
you can go ahead and click on this and it will show you how to implement that in JavaScript,

25
00:01:33,340 --> 00:01:36,810
Sass, as well as CSS.

26
00:01:36,810 --> 00:01:42,060
So it would look something like this, which is pretty complicated

27
00:01:42,060 --> 00:01:46,830
to just go ahead and do in pure numbers, which is why it's nice to have this little graph here.

28
00:01:46,830 --> 00:01:48,300
Pretty nifty.

29
00:01:48,300 --> 00:01:51,350
All of these different possible easing functions 

30
00:01:51,350 --> 00:01:56,000
would make great Twitter screen names, by the way, or BT dubs, as the kids say.

31
00:01:57,090 --> 00:01:59,790
I will consider that. Thanks, Jason. >>Yeah, no problem.

32
00:01:59,790 --> 00:02:02,210
Next up we have some new releases of jQuery. 

33
00:02:02,210 --> 00:02:06,440
jQuery 1.9 and 2.0 have recently come out. [trhou.se/Y1qSxg]

34
00:02:06,440 --> 00:02:09,300
jQuery 1.9 is the next evolution of jQuery.

35
00:02:09,300 --> 00:02:13,760
This includes support for older versions of Internet Explorer 6, 7, and 8.

36
00:02:13,760 --> 00:02:17,460
jQuery 2.0 is dropping support for those older versions of IE

37
00:02:17,460 --> 00:02:20,910
in order to have a smaller, more modular code base.

38
00:02:20,910 --> 00:02:23,960
But kind of the big news about this jQuery release

39
00:02:23,960 --> 00:02:30,000
is the jQuery Migrate plugin which can be used with either jQuery 1.9 or 2.0

40
00:02:30,000 --> 00:02:33,410
to detect deprecated and removed features.

41
00:02:33,410 --> 00:02:38,360
So if you do plan on upgrading a jQuery 1.8 site to 1.9 or 2.0,

42
00:02:38,360 --> 00:02:42,270
make sure you test out with this Migrate plugin on your site locally

43
00:02:42,270 --> 00:02:46,500
and then just get an idea of what features you may be using.

44
00:02:46,500 --> 00:02:51,070
This is useful because even if you're using a plugin that uses these features, it will tell you.

45
00:02:51,070 --> 00:02:54,040
So that's something that you'll have to watch out for on your own sites.

46
00:02:54,040 --> 00:02:55,510
Wow. That's pretty amazing.

47
00:02:55,510 --> 00:02:59,290
That's exactly what I was going to ask: if it can look at plugins

48
00:02:59,290 --> 00:03:01,760
and also tell you if they're still compatible.

49
00:03:01,760 --> 00:03:04,520
Yeah, because you can only control the code that you write. >>That's right.

50
00:03:04,520 --> 00:03:07,590
That's really amazing because it makes upgrading so easy.

51
00:03:07,590 --> 00:03:11,550
There's really no excuse, unless you are really using those deprecated features.

52
00:03:11,550 --> 00:03:13,480
Yeah, exactly. >>Right.

53
00:03:13,480 --> 00:03:15,930
I could probably come up with a few good excuses to not upgrade.

54
00:03:15,930 --> 00:03:19,960
Yeah. Laziness, procrastination-- >>Yeah. Don't feel like it. >>Yeah.

55
00:03:19,960 --> 00:03:23,320
Those are all good reasons for anything, really.

56
00:03:23,320 --> 00:03:27,120
Next up we're going to talk about Maki icons [pronounces it Mak-ee]

57
00:03:27,120 --> 00:03:29,660
or [pronounces it Mak-eye] icons. [trhou.se/TspOF1] I'm not really sure how to--

58
00:03:29,660 --> 00:03:32,560
Mah-key? >>Maki. I'm not really sure how to pronounce it.

59
00:03:32,560 --> 00:03:38,670
This is a really nice icon set for pixel-perfect web cartography.

60
00:03:38,670 --> 00:03:44,460
Let's say you're making the next Foursquare or some sort of cool mapping application--

61
00:03:44,460 --> 00:03:47,850
[Seifer] Call it Fivesquare. >>[Pettit] Yeah, Fivesquare. That's genius.

62
00:03:47,850 --> 00:03:49,560
[Seifer] Or RecFiveTangle. >>[Pettit] That's right.

63
00:03:49,560 --> 00:03:56,290
And you want to go ahead and drop in these really nice little bits of iconography.

64
00:03:56,290 --> 00:03:59,180
That's exactly what this icon set is for.

65
00:03:59,180 --> 00:04:06,190
You can drop in gas stations or bus stops or theaters or coffee. >>[Seifer] Or a minefield.

66
00:04:06,190 --> 00:04:08,710
[Pettit] Exactly. That's good to know too.

67
00:04:08,710 --> 00:04:13,680
And it comes in 3 different sizes: 24 pixels, 18, and 12.

68
00:04:13,680 --> 00:04:19,170
And you'll notice as we scale down, the look of the iconography actually changes slightly.

69
00:04:19,170 --> 00:04:24,810
It doesn't just scale down the pixel sizes; it actually changes what the icon looks like,

70
00:04:24,810 --> 00:04:30,340
which is important because at smaller sizes, icons don't necessarily scale smoothly.

71
00:04:30,340 --> 00:04:35,520
You want to really get into pixel perfection when you're doing that type of thing.

72
00:04:35,520 --> 00:04:40,250
This is of course open source, available on GitHub, 

73
00:04:40,250 --> 00:04:45,150
and you should definitely check it out if you're planning on making applications

74
00:04:45,150 --> 00:04:46,840
that deal with mapping.

75
00:04:46,840 --> 00:04:49,600
Do you have any idea for a new mapping application, Nick? >>I do.

76
00:04:49,600 --> 00:04:51,780
It's called Unexpected Coffee.

77
00:04:51,780 --> 00:04:54,480
You basically go to places that are not coffee shops

78
00:04:54,480 --> 00:04:57,380
and try to find really, really good coffee there.

79
00:04:57,380 --> 00:05:02,720
I'm talking about fast food restaurants, public libraries, 

80
00:05:02,720 --> 00:05:06,190
office buildings that you're not authorized to be in.

81
00:05:06,190 --> 00:05:11,520
So basically, a user would submit a random location to your app, Unexpected Coffee.

82
00:05:11,520 --> 00:05:14,830
Right and then you'd go there and you'd be like, "Oh my gosh, this is the best coffee ever."

83
00:05:14,830 --> 00:05:17,680
"Why don't they have this at Starbucks?"

84
00:05:17,680 --> 00:05:20,440
I feel like that could be a really good opportunity for pranks.

85
00:05:20,440 --> 00:05:25,000
I would definitely vote up a friend's house. >>Yeah. Cool. That one's for free.

86
00:05:25,000 --> 00:05:27,530
Yeah. Look out for that one, Jarrett.

87
00:05:27,530 --> 00:05:30,660
Next up we have a project called Parsley.js. [trhou.se/Y1qSxh]

88
00:05:30,660 --> 00:05:32,570
This is JavaScript form validation.

89
00:05:32,570 --> 00:05:36,120
It's powerful, UX aware, and dead simple.

90
00:05:36,120 --> 00:05:41,090
This makes you not have to write JavaScript anymore to validate your forms on the front end.

91
00:05:41,090 --> 00:05:43,150
We can see some examples here.

92
00:05:43,150 --> 00:05:46,310
If you have a demo, here's a Name field,

93
00:05:46,310 --> 00:05:50,890
and all you have to do is put in a couple of attributes to say that something is,

94
00:05:50,890 --> 00:05:52,980
for example, required.

95
00:05:52,980 --> 00:05:57,120
When you want to trigger these validations, it could be on the change event.

96
00:05:57,120 --> 00:06:00,990
As an example on the Email field, say a@ something.

97
00:06:00,990 --> 00:06:02,340
Hey, that's not valid.

98
00:06:02,340 --> 00:06:04,850
It says, "Hey, this should be a valid email."

99
00:06:04,850 --> 00:06:10,290
The nice thing about Parsley.js is it has a ton of different options

100
00:06:10,290 --> 00:06:12,650
and it is also super easy to install.

101
00:06:12,650 --> 00:06:16,510
You just include the Parsley JavaScript on your site

102
00:06:16,510 --> 00:06:20,920
and then add the different data attributes to it and you are good to go.

103
00:06:20,920 --> 00:06:23,920
There is a ton of different validations that it has on its site,

104
00:06:23,920 --> 00:06:28,860
and you can find a link to that in our show notes at youtube.com/gotreehouse.

105
00:06:28,860 --> 00:06:32,390
I really like how you can include Parsley in your website.

106
00:06:32,390 --> 00:06:38,760
I feel like really every JavaScript framework and stuff should be named after foods

107
00:06:38,760 --> 00:06:40,360
so it's kind of just like cooking.

108
00:06:40,360 --> 00:06:44,800
You throw in some parsley, throw in some tomatoes or something. >>Yeah.

109
00:06:44,800 --> 00:06:48,640
Get a little website ratatouille going. >>There's a 2013 trend for you.

110
00:06:48,640 --> 00:06:53,410
Next up we're going to talk about this really cool blog post from Jonathan T. Neal.

111
00:06:53,410 --> 00:06:58,720
called Understanding the Favicon or [pronounces it fave icon], if you will. 

112
00:06:58,720 --> 00:07:00,720
[trhou.se/VPljDx] 

113
00:07:00,720 --> 00:07:04,730
Much like Jonathan, I found the same thing when I was reading his article.

114
00:07:04,730 --> 00:07:09,480
He said, "When I decided to dive in a little deeper, things got interesting."

115
00:07:09,480 --> 00:07:16,660
"I realized how little I knew about favorite icons, touch icons, and tile icons.

116
00:07:16,660 --> 00:07:19,280
One of the things I learned by reading this article 

117
00:07:19,280 --> 00:07:24,540
is that these were actually introduced in 1999 for Internet Explorer.

118
00:07:24,540 --> 00:07:27,500
I feel a little silly not having known that, but--

119
00:07:27,500 --> 00:07:32,170
Internet Explorer has been driving the Web forward since 1999. >>Evidently.

120
00:07:32,170 --> 00:07:35,760
So that's why they're ICO files, I guess.

121
00:07:35,760 --> 00:07:39,090
It's a relic of the Windows desktop.

122
00:07:39,090 --> 00:07:44,760
I also learned that the type attribute is basically useless,

123
00:07:44,760 --> 00:07:50,510
and I also learned that if you want to implement a high DPI icon

124
00:07:50,510 --> 00:07:56,930
it's actually a little messy if you want to go ahead and support all of the different browsers

125
00:07:56,930 --> 00:08:01,630
using an ICO file and also using a PNG file.

126
00:08:01,630 --> 00:08:04,370
The code for it is down here at the bottom,

127
00:08:04,370 --> 00:08:09,150
and of course there's other little caveats that are covered in the article.

128
00:08:09,150 --> 00:08:11,250
But really, really interesting read, 

129
00:08:11,250 --> 00:08:14,580
and I think it's something that is definitely worth learning about

130
00:08:14,580 --> 00:08:17,870
because there's just such a huge multitude of devices,

131
00:08:17,870 --> 00:08:23,060
and of course there are now also high resolution displays that you should be concerned with.

132
00:08:23,060 --> 00:08:24,610
Pretty nifty.

133
00:08:24,610 --> 00:08:28,280
Next up we have a project called Basket.js. [trhou.se/Y1qTBp]

134
00:08:28,280 --> 00:08:30,440
This isn't completely ready for full time.

135
00:08:30,440 --> 00:08:32,409
This is a project by Addy Osmani.

136
00:08:32,409 --> 00:08:37,240
It's a beta, and what it does is if you've used a CDN before

137
00:08:37,240 --> 00:08:41,799
to kind of cache JavaScript or get a JavaScript file to load quicker,

138
00:08:41,799 --> 00:08:47,330
what Basket.js does is it uses local storage in a browser

139
00:08:47,330 --> 00:08:55,810
to cache external JavaScripts inside of the browser using the HTML5 local storage.

140
00:08:55,810 --> 00:09:01,150
This way if you go to a site where a script is used that is already in local storage,

141
00:09:01,150 --> 00:09:05,240
instead of going out to fetch it, it will just pull it up inside of your browser

142
00:09:05,240 --> 00:09:07,690
and load that much quicker.

143
00:09:07,690 --> 00:09:12,810
If the script does not exist inside of local storage, it will go out and fetch that

144
00:09:12,810 --> 00:09:17,120
using an AJAX request, save it to local storage, and load it up on the page.

145
00:09:17,120 --> 00:09:19,800
This winds up being pretty quick.

146
00:09:19,800 --> 00:09:22,300
It's a very, very simple API.

147
00:09:22,300 --> 00:09:27,080
It just has a few different methods: basket.require, get, remove, and clear.

148
00:09:27,080 --> 00:09:29,030
So check this out.

149
00:09:29,030 --> 00:09:32,120
Like I said, it's still in beta, not quite ready for prime time

150
00:09:32,120 --> 00:09:36,140
but a very interesting concept, and it kind of shows where we're going to be going

151
00:09:36,140 --> 00:09:39,220
with HTML5 and local storage.

152
00:09:39,220 --> 00:09:40,630
Pretty cool.

153
00:09:40,630 --> 00:09:47,270
Next up is this really cool article about using the HTML title attribute. [trhou.se/TspOF4]

154
00:09:47,270 --> 00:09:52,680
Similar to the favicon article, this has a lot of really interesting things

155
00:09:52,680 --> 00:09:57,320
that I never really thought much about, just kind of used the title attribute

156
00:09:57,320 --> 00:09:59,950
and didn't really think much of it.

157
00:09:59,950 --> 00:10:05,290
Basically, the title attribute is only useful to people that are using a mouse,

158
00:10:05,290 --> 00:10:11,380
which, as it turns out, is actually less and less people in recent times

159
00:10:11,380 --> 00:10:17,510
because there's mobile users, tablet users, users that use assistive devices

160
00:10:17,510 --> 00:10:20,150
and then a lot of users that just use the keyboard 

161
00:10:20,150 --> 00:10:22,660
and kind of navigate the Web that way.

162
00:10:22,660 --> 00:10:28,600
The title attribute is only useful if you actually hover over something 

163
00:10:28,600 --> 00:10:30,800
that has a title attribute on it.

164
00:10:30,800 --> 00:10:33,400
So you'd go ahead and hover your mouse over it

165
00:10:33,400 --> 00:10:36,050
and you'd see some sort of text appear.

166
00:10:36,050 --> 00:10:40,170
So for example, if you're a fan of the comic xkcd,

167
00:10:40,170 --> 00:10:43,910
you can go ahead and hover over each comic

168
00:10:43,910 --> 00:10:49,180
and some bit of ancillary text will come up.

169
00:10:49,180 --> 00:10:55,400
This is interesting to me because everyone talks about the hover pseudo-class in CSS

170
00:10:55,400 --> 00:11:02,120
not being useful for assistive devices or being useful for tablet or mobile users,

171
00:11:02,120 --> 00:11:05,590
but the same is true for the title attribute.

172
00:11:05,590 --> 00:11:10,570
So in this article they list a couple of places where it actually is useful,

173
00:11:10,570 --> 00:11:16,570
so labeling frame or iframe elements or providing a programmatically associated label

174
00:11:16,570 --> 00:11:20,810
for a control in situations where a visible text label would be redundant,

175
00:11:20,810 --> 00:11:23,150
so useful in forms.

176
00:11:23,150 --> 00:11:28,790
And then there's a much longer list of places where it's actually not useful

177
00:11:28,790 --> 00:11:30,920
or not totally supported.

178
00:11:30,920 --> 00:11:36,410
Pretty cool article, well worth reading for anyone that is interested in HTML,

179
00:11:36,410 --> 00:11:39,230
which is-- >>Everybody. >>Basically everybody.

180
00:11:39,230 --> 00:11:43,370
The entire world is interested in HTML-- >>You should be. >>even if they don't know it.

181
00:11:43,370 --> 00:11:46,410
Next up, kind of to go along with that--actually, not really--

182
00:11:46,410 --> 00:11:51,280
there's a project called mincss or [pronounces it minces]--not really sure how to pronounce it.

183
00:11:51,280 --> 00:11:53,280
[trhou.se/Y1qSxk]

184
00:11:53,280 --> 00:11:55,350
This "clears the junk out of your CSS."

185
00:11:55,350 --> 00:11:58,510
You guys couldn't see that, but I was doing air quotes when I said that.

186
00:11:58,510 --> 00:12:00,980
What this does is it's a tool.

187
00:12:00,980 --> 00:12:03,900
You give it a URL or a couple URLs.

188
00:12:03,900 --> 00:12:10,090
It downloads all of the CSS and then it checks every single selector in your CSS

189
00:12:10,090 --> 00:12:12,910
to find out which ones aren't used.

190
00:12:12,910 --> 00:12:17,410
From there you can go through and delete these selectors from your CSS files

191
00:12:17,410 --> 00:12:20,380
and trim down your pages.

192
00:12:20,380 --> 00:12:26,500
On an example page that this author tried, he went from 82 kilobytes down to 7 kilobytes.

193
00:12:26,500 --> 00:12:28,930
This is quite a bit of savings.

194
00:12:28,930 --> 00:12:33,110
You probably don't want to just use this on a single page on your site

195
00:12:33,110 --> 00:12:36,270
and then just delete all of your CSS.

196
00:12:36,270 --> 00:12:39,450
Use it, compare the output on a bunch of different pages,

197
00:12:39,450 --> 00:12:43,270
and see where you really can slim down all your different CSS.

198
00:12:43,270 --> 00:12:49,090
I'm really appreciating this trend of food names.

199
00:12:49,090 --> 00:12:53,870
You can use minces, mince your parsley. >>Yeah, there you go.

200
00:12:53,870 --> 00:12:56,180
Yeah. Maybe throw in chef.

201
00:12:56,180 --> 00:13:00,150
There's all sorts of terms coming up. I'm telling you, it's a new trend.

202
00:13:00,150 --> 00:13:03,590
Yeah. The web design salad. That's what we're going to call it. >>That's right.

203
00:13:03,690 --> 00:13:06,300
Web design salad. >>I think that about wraps it up for today.

204
00:13:06,300 --> 00:13:10,030
If you want to catch us on Twitter, I am jseifer. >>I am @nickrp.

205
00:13:10,030 --> 00:13:12,640
Thanks so much for watching this episode of The Treehouse Show.

206
00:13:12,640 --> 00:13:17,620
For show notes and more, check out our YouTube channel at youtube.com/gotreehouse.

207
00:13:17,620 --> 00:13:20,620
And of course if you'd like to see more videos like this one

208
00:13:20,620 --> 00:13:24,360
and learn more about web design, web development, mobile development,

209
00:13:24,360 --> 00:13:29,030
business and more, be sure to check us out at teamtreehouse.com.

210
00:13:29,030 --> 00:13:30,790
See you next week.

211
00:13:30,790 --> 00:13:33,190
[Morse code beeping sound] [The Treehouse Show]

212
00:13:33,190 --> 00:13:34,950
[beeping continues]