1
00:00:00,460 --> 00:00:01,220
>> I'm Nick Pettit.

2
00:00:01,220 --> 00:00:02,020
>> I'm Jason Seifer.

3
00:00:02,020 --> 00:00:05,170
>> And you're watching The Treehouse Show,
your weekly dose of Internets,

4
00:00:05,170 --> 00:00:08,480
where we talk about all things web design,
web development, and more.

5
00:00:08,480 --> 00:00:09,700
>> In this episode we'll be talking

6
00:00:09,700 --> 00:00:14,020
about animation, sidebar transitions,
icons, and more.

7
00:00:14,020 --> 00:00:14,900
>> Let's check it out.

8
00:00:14,900 --> 00:00:20,020
[MUSIC]

9
00:00:20,020 --> 00:00:24,960
First up there's this really amazing post
about advanced animation paths.

10
00:00:24,960 --> 00:00:28,380
Now, if you've ever tried to do CSS
animations and

11
00:00:28,380 --> 00:00:32,310
tried to animate something along a path or
a curve.

12
00:00:32,310 --> 00:00:34,490
You know that it's pretty much impossible.

13
00:00:34,490 --> 00:00:37,820
It's very, very difficult to get that to
look right.

14
00:00:37,820 --> 00:00:39,160
>> Don't say impossible, Nick.

15
00:00:39,160 --> 00:00:40,440
Nothing's impossible.

16
00:00:40,440 --> 00:00:43,450
>> You're right, and that's where this
blog post comes in.

17
00:00:43,450 --> 00:00:47,800
Basically, you can create these advanced
animation paths, just

18
00:00:47,800 --> 00:00:51,900
like you see with this roller coaster demo
on CodePen.

19
00:00:51,900 --> 00:00:53,050
Whoa, look at that.

20
00:00:53,050 --> 00:00:54,020
>> What?

21
00:00:54,020 --> 00:00:59,140
>> Basically the way it works, is you draw
a path,

22
00:00:59,140 --> 00:01:04,270
or a motion route, and you can do that as
an svg.

23
00:01:04,270 --> 00:01:10,237
And then, you can use tween js, and
basically

24
00:01:10,237 --> 00:01:15,240
step through each part of the path.

25
00:01:15,240 --> 00:01:19,260
So there's a pretty good illustration here
of what this code is doing.

26
00:01:19,260 --> 00:01:24,564
Basically, it takes the current point and
previous point,

27
00:01:24,564 --> 00:01:30,290
and over time, it will move an object
along that svg curve.

28
00:01:30,290 --> 00:01:34,910
So there's quite a lot of JavaScript here,
but that's basically what it does.

29
00:01:34,910 --> 00:01:40,920
And, you can create these really amazing
curving animations like that.

30
00:01:40,920 --> 00:01:44,370
So, if you wanna view this on codepen, you
can do that.

31
00:01:44,370 --> 00:01:50,400
Or you can go to the Git-repo, and see
exactly how this all works.

32
00:01:50,400 --> 00:01:52,820
>> That looks like a pretty fun
rollercoaster, I gotta say.

33
00:01:52,820 --> 00:01:53,260
>> It does.

34
00:01:53,260 --> 00:01:54,780
We should go on it together.

35
00:01:54,780 --> 00:01:55,530
>> We should do that.

36
00:01:55,530 --> 00:01:57,660
>> We can get some cotton candy, ice cream
afterwards.

37
00:01:57,660 --> 00:01:58,560
>> Make a day of it.

38
00:01:58,560 --> 00:01:59,320
>> Hm.

39
00:01:59,320 --> 00:01:59,790
Seems nice.

40
00:01:59,790 --> 00:02:02,500
>> Really spend some time together, turn
off our phones.

41
00:02:02,500 --> 00:02:05,400
Next up we have a project called
Velocity.js.

42
00:02:05,400 --> 00:02:09,715
Velocity.js is a drop-in replacement for
jQuery's

43
00:02:09,715 --> 00:02:14,100
.animate function which provides a lot
better performance.

44
00:02:14,100 --> 00:02:18,980
Now, if we look at the site right here,
you'll see a performance comparison.

45
00:02:18,980 --> 00:02:21,850
And if we look at this drop down here,

46
00:02:21,850 --> 00:02:26,690
we've got jQuery and the number of
elements right here.

47
00:02:26,690 --> 00:02:32,640
And then if we click on over to velocity
and start, you'll see that it is much

48
00:02:32,640 --> 00:02:37,590
smoother so, with velocity it's actually
going very smoothly back and forth.

49
00:02:37,590 --> 00:02:41,010
It's actually kinda hypnotizing but you
can potentially see

50
00:02:41,010 --> 00:02:45,110
some jaggyness as we're looking at the
jQuery version.

51
00:02:45,110 --> 00:02:49,340
So, the way that velocity works is it's
really just a drop-in replacement.

52
00:02:49,340 --> 00:02:53,700
Instead of calling .animate, you call
.velocity.

53
00:02:53,700 --> 00:02:58,470
Now, the way that velocity works is it
using request animation

54
00:02:58,470 --> 00:03:03,960
frame, and also it uses jQuery's effects
queue to work on this.

55
00:03:03,960 --> 00:03:06,040
Now, there's a, a bunch of demos on here,
but

56
00:03:06,040 --> 00:03:09,580
pretty much for the most part it is a
drop-in replacement.

57
00:03:09,580 --> 00:03:11,700
You just add velocity to your project,
change

58
00:03:11,700 --> 00:03:15,050
the instances of animate with velocity,
and boom!

59
00:03:15,050 --> 00:03:17,420
You have better performance right off the
bat.

60
00:03:17,420 --> 00:03:18,950
Now, you can find a link to velocity in

61
00:03:18,950 --> 00:03:22,550
our show notes, which you can get to at
youtube.com/gotreehouse.

62
00:03:22,550 --> 00:03:23,970
Or search for us in iTunes.

63
00:03:23,970 --> 00:03:25,420
We are the treehouse show.

64
00:03:25,420 --> 00:03:26,770
Oh, and please rate us.

65
00:03:26,770 --> 00:03:27,550
>> Very nice stuff.

66
00:03:27,550 --> 00:03:31,810
Well, next up is this amazing post on the
codrops blog.

67
00:03:31,810 --> 00:03:34,450
Called sidebar transitions.

68
00:03:34,450 --> 00:03:40,790
So, you're probably familiar with the
sidebar off canvas hamburger menus

69
00:03:40,790 --> 00:03:44,140
that come on the left and right sides of
the page.

70
00:03:44,140 --> 00:03:49,520
Well, these are transitions that basically
make that look a lot fancier.

71
00:03:49,520 --> 00:03:53,110
So you can push the page or it can just
slide in.

72
00:03:53,110 --> 00:03:58,280
But there is more advanced ones that use
rotations and 3D effects.

73
00:03:58,280 --> 00:04:00,400
So you can rotate the whole page.

74
00:04:00,400 --> 00:04:04,380
Or you can do a 3D rotate, in or rotate
out.

75
00:04:04,380 --> 00:04:07,570
And there's also a few that will scale the
page.

76
00:04:07,570 --> 00:04:10,440
I thought that was pretty interesting.

77
00:04:11,490 --> 00:04:13,770
And there's a couple others here.

78
00:04:13,770 --> 00:04:15,510
Let's click through.

79
00:04:15,510 --> 00:04:16,430
Look at that.

80
00:04:16,430 --> 00:04:18,310
Pretty amazing.

81
00:04:18,310 --> 00:04:22,290
So if we head over to the Codrops article.

82
00:04:22,290 --> 00:04:25,944
You can view the demo that we were just
looking at,

83
00:04:25,944 --> 00:04:30,670
or you can download the source and see
exactly how this works.

84
00:04:30,670 --> 00:04:36,394
It's just basic combination of HTML, and a
few perspective,

85
00:04:36,394 --> 00:04:40,840
or, excuse me, transforms and transitions.

86
00:04:40,840 --> 00:04:42,460
So, pretty cool stuff.

87
00:04:42,460 --> 00:04:43,990
>> Yeah, that is pretty cool.

88
00:04:43,990 --> 00:04:44,730
>> Mm-hm.

89
00:04:44,730 --> 00:04:46,780
>> Next up, we have a couple of posts

90
00:04:46,780 --> 00:04:51,100
about icons that are free to download and
use.

91
00:04:51,100 --> 00:04:53,130
The first set is called feather.

92
00:04:53,130 --> 00:04:57,990
And this is, quote, a growing collection
of beautifully simple icons.

93
00:04:57,990 --> 00:05:02,640
And you can get that in Photoshop, csh,
svg and web font format.

94
00:05:02,640 --> 00:05:04,380
Not a whole lot to say about this.

95
00:05:04,380 --> 00:05:08,210
It's just a bunch of different standard
icons around here.

96
00:05:08,210 --> 00:05:09,350
They're pretty minimalist.

97
00:05:09,350 --> 00:05:11,450
And also pretty nice looking.

98
00:05:11,450 --> 00:05:16,490
So, yeah, go ahead and download that if
you need some icons for your project.

99
00:05:16,490 --> 00:05:20,120
It's MIT licensed so you can do pretty
much whatever you want with it.

100
00:05:20,120 --> 00:05:21,090
>> Very nice stuff.

101
00:05:21,090 --> 00:05:25,360
Well, speaking of icons, we've covered
Iconic in

102
00:05:25,360 --> 00:05:28,760
the past which is a paid icon set.

103
00:05:28,760 --> 00:05:31,020
You can use it for free if you're

104
00:05:31,020 --> 00:05:33,950
doing it for, or using it for
non-commercial purposes.

105
00:05:33,950 --> 00:05:37,380
But if you are using it for commercial
purposes, you do need to pay for it.

106
00:05:37,380 --> 00:05:40,370
However, it just went open source.

107
00:05:40,370 --> 00:05:45,705
Which means you can head over to GitHub,
and you can look at all the

108
00:05:45,705 --> 00:05:51,560
different files including the svg's that
make up this icon set.

109
00:05:51,560 --> 00:05:56,420
So that's a pretty amazing change because
it's means that more people

110
00:05:56,420 --> 00:06:01,260
will be able to contribute to iconic, if
they'd like to do so.

111
00:06:01,260 --> 00:06:06,750
And, to just review, Iconic is just a very
robust icon set, we'll

112
00:06:06,750 --> 00:06:12,709
go back to the pro page here, allows you
to do a bunch of pretty amazing stuff.

113
00:06:12,709 --> 00:06:17,830
They scale the icons appropriately, let's
see, there it is.

114
00:06:17,830 --> 00:06:20,650
And you can color them individually.

115
00:06:20,650 --> 00:06:21,590
It's pretty awesome.

116
00:06:21,590 --> 00:06:24,660
So definitely be sure to check that out.

117
00:06:24,660 --> 00:06:27,630
And if you have a good idea for an icon,

118
00:06:27,630 --> 00:06:30,880
it's a good opportunity to get involved
with Open Source.

119
00:06:30,880 --> 00:06:33,830
>> Can we get a, an icon of both of us?

120
00:06:33,830 --> 00:06:34,690
Like, separate icons.

121
00:06:34,690 --> 00:06:36,790
Not one, one Nick and Jason.

122
00:06:36,790 --> 00:06:37,960
I'm just gonna move on.

123
00:06:37,960 --> 00:06:41,390
Next up, we have Google Web Fundamentals.

124
00:06:41,390 --> 00:06:44,590
Google put up a Web Fundamentals page,
which is a handbook.

125
00:06:44,590 --> 00:06:47,930
For best practices when making websites.

126
00:06:47,930 --> 00:06:52,120
Now if you go through this book, it says a
bunch of

127
00:06:52,120 --> 00:06:56,570
things that we have already talked about
on the Treehouse Show at length.

128
00:06:56,570 --> 00:07:01,050
So they go into multi device layouts with
responsive web design.

129
00:07:01,050 --> 00:07:02,580
They go through fundamentals.

130
00:07:02,580 --> 00:07:05,360
Patterns, Navigation and Action Patterns.

131
00:07:05,360 --> 00:07:10,210
You know, you'll see a little bit about
the App Bar, Tab Bar, Navigation Drawer.

132
00:07:10,210 --> 00:07:13,810
Kinda like what we just went over, the
Codrops article.

133
00:07:13,810 --> 00:07:17,730
Basically if you watch the Treehouse Show,
you'll be you know, set

134
00:07:17,730 --> 00:07:21,790
for the future, and the future is now,
according to Google Web Fundamentals.

135
00:07:21,790 --> 00:07:23,260
>> Tomorrow is today.

136
00:07:23,260 --> 00:07:25,350
>> And yesterday is already gone.

137
00:07:25,350 --> 00:07:27,680
But make sure you catch up on every
previous episode

138
00:07:27,680 --> 00:07:29,600
of the Treehouse Show, I think is the
point there.

139
00:07:29,600 --> 00:07:30,040
>> Hm.

140
00:07:30,040 --> 00:07:33,020
>> Anyway, go ahead and scroll through the
book.

141
00:07:33,020 --> 00:07:35,040
Definitely read everything here.

142
00:07:35,040 --> 00:07:37,998
There's great sections on optimizing
performance you

143
00:07:37,998 --> 00:07:42,050
know the rendering path, and optimizing
content efficiently.

144
00:07:42,050 --> 00:07:43,320
anyway, just a ton of stuff on here.

145
00:07:43,320 --> 00:07:46,394
We can't go into everything, but for the
most part, really, if you

146
00:07:46,394 --> 00:07:48,196
have been watching the Treehouse Show,

147
00:07:48,196 --> 00:07:50,700
we've already pointed you in this
direction.

148
00:07:50,700 --> 00:07:53,000
Google is now solidifying it, so.

149
00:07:53,000 --> 00:07:54,140
>> Very nice stuff.

150
00:07:54,140 --> 00:07:56,060
Well, next up is a color picker.

151
00:07:56,060 --> 00:07:59,094
In fact, this is an eight bit color
picker,

152
00:07:59,094 --> 00:08:02,948
meaning there are just 256 colors in the
palette, so

153
00:08:02,948 --> 00:08:05,572
if I click on one of these colors here,

154
00:08:05,572 --> 00:08:09,220
you can see that we get this nice color
picker.

155
00:08:09,220 --> 00:08:13,150
And there's just 256 colors in this
palette.

156
00:08:13,150 --> 00:08:17,337
So I can click one of these and it will
change the color, and over

157
00:08:17,337 --> 00:08:22,490
on the right side I can see the
hexadecimal value for this color as well.

158
00:08:22,490 --> 00:08:28,230
So this might be pretty nice if you maybe
are building out a social network and

159
00:08:28,230 --> 00:08:30,580
you want users to be able to customize

160
00:08:30,580 --> 00:08:33,740
the colors on their homepage or something
like that.

161
00:08:33,740 --> 00:08:36,610
You can go ahead and use this color picker
to do that.

162
00:08:36,610 --> 00:08:42,030
And the nice thing is that it has no
dependencies not even jQueries.

163
00:08:42,030 --> 00:08:42,280
>> Wow.

164
00:08:42,280 --> 00:08:46,232
>> So you don't need to include anything
else in order to get this

165
00:08:46,232 --> 00:08:48,664
color picker, you can just install it

166
00:08:48,664 --> 00:08:51,819
using Bower, or Component if you prefer
that.

167
00:08:51,819 --> 00:08:53,571
And then you create a div with

168
00:08:53,571 --> 00:08:57,440
a class eight-bit-color-picker, and then
call the detect

169
00:08:57,440 --> 00:08:59,630
on the eight bit color picker in your

170
00:08:59,630 --> 00:09:03,480
JavaScript, and wala, you get something
like this.

171
00:09:03,480 --> 00:09:08,660
If we look at the documentation, here we
have the EightBitColorPicker constructor.

172
00:09:08,660 --> 00:09:13,450
And you can send it an array of 256
strings in

173
00:09:13,450 --> 00:09:17,970
hexadecimal format if you would like to
create a new color palette.

174
00:09:17,970 --> 00:09:21,720
So, you're not limited to the color
palette that you see here.

175
00:09:21,720 --> 00:09:24,300
You can actually do something completely
different.

176
00:09:24,300 --> 00:09:26,410
If say, you are in that situation

177
00:09:26,410 --> 00:09:28,610
I described, you're creating this social
network.

178
00:09:28,610 --> 00:09:32,510
You wanna have users customize their
profile pages, and you wanna limit

179
00:09:32,510 --> 00:09:36,760
them to specific colors that work with the
rest of your design.

180
00:09:36,760 --> 00:09:37,580
You can do that.

181
00:09:37,580 --> 00:09:39,950
>> And if you don't want the colors to
work

182
00:09:39,950 --> 00:09:41,290
with the rest of your design, you don't
have to.

183
00:09:41,290 --> 00:09:42,735
I think we all remember MySpace.

184
00:09:42,735 --> 00:09:42,960
>> Mm-hm.

185
00:09:42,960 --> 00:09:45,950
You can just leave the default, and let
people go to town on everything.

186
00:09:45,950 --> 00:09:48,558
>> Yeah, that was a, I'm really glad the
web has come so far since then.

187
00:09:48,558 --> 00:09:48,848
>> Mm-hm.

188
00:09:48,848 --> 00:09:54,700
>> Next step, we have a JavaScript plugin
called Ice.

189
00:09:54,700 --> 00:09:56,740
This is a really, really interesting

190
00:09:56,740 --> 00:10:00,330
plugin for anything that is
contenteditable.

191
00:10:00,330 --> 00:10:04,210
This is from the New York Times, and it's
really easy to explain with a demo.

192
00:10:04,210 --> 00:10:07,460
So here is, you know, a little, a little
section right here.

193
00:10:07,460 --> 00:10:11,640
We can edit all of these different text
fields here.

194
00:10:11,640 --> 00:10:13,270
So say I'm writing things.

195
00:10:13,270 --> 00:10:16,550
And you'll see that it underline that in
blue.

196
00:10:16,550 --> 00:10:22,070
Now you can actually show and hide the
different changes to the article here.

197
00:10:22,070 --> 00:10:26,690
So if I hide the changes it shows you the
actual, current text.

198
00:10:26,690 --> 00:10:28,450
Or you can show the changes and it will
show

199
00:10:28,450 --> 00:10:31,470
you what was crossed out, what was added,
and when.

200
00:10:31,470 --> 00:10:34,350
Now, what's interesting about this is it
has multi-user support.

201
00:10:34,350 --> 00:10:36,934
So you can theoretically, track all the

202
00:10:36,934 --> 00:10:40,630
changes to everything down to each
individual user.

203
00:10:40,630 --> 00:10:45,790
Now, this works with anything that is
contenteditable on the web.

204
00:10:45,790 --> 00:10:50,760
And it is really, really cool, it's simple
super to use, you just create the tracker.

205
00:10:50,760 --> 00:10:53,648
And it works, you give it the element that
you

206
00:10:53,648 --> 00:10:57,360
want to track changes to, and a current
user object.

207
00:10:57,360 --> 00:11:00,850
In this case it has an id and a name
associated with it.

208
00:11:00,850 --> 00:11:04,820
And then just call the start tracking
function and you're good to go.

209
00:11:04,820 --> 00:11:09,870
And it also supports plugins if you want
to add those in as well.

210
00:11:09,870 --> 00:11:11,930
Anyway, really really great plugin.

211
00:11:11,930 --> 00:11:16,250
Definitely useful if, for example, you are
creating a content management system on

212
00:11:16,250 --> 00:11:19,730
the web, and wanna make sure that you can
see who has changed what.

213
00:11:20,820 --> 00:11:22,462
We'll I think that's about all that we
have time for.

214
00:11:22,462 --> 00:11:23,808
Nick, who are you on Twitter?

215
00:11:23,808 --> 00:11:24,627
>> I am @nickrp.

216
00:11:24,627 --> 00:11:25,950
>> And I am @jseifer.

217
00:11:25,950 --> 00:11:27,886
For more information on anything that
we've talked

218
00:11:27,886 --> 00:11:30,450
about, check out the show notes at
youtube.com/gotreehouse.

219
00:11:30,450 --> 00:11:31,954
Or the search for us in iTunes, we're

220
00:11:31,954 --> 00:11:34,390
the Treehouse Show, and don't forget to
rate us.

221
00:11:34,390 --> 00:11:36,742
Also, if you'd like to try out Treehouse
free for

222
00:11:36,742 --> 00:11:39,660
a month, use the link right in the show
notes here.

223
00:11:39,660 --> 00:11:41,790
And, of course, if you'd like to see more
videos like this

224
00:11:41,790 --> 00:11:45,970
one about web design, web development,
mobile business, and so much more.

225
00:11:45,970 --> 00:11:49,550
Be sure to check us out at
teamtreehouse.com and use the

226
00:11:49,550 --> 00:11:52,440
free link in the show notes to get a free
month.

227
00:11:52,440 --> 00:11:55,735
Thank you so much for watching, and we
will see ya next week.

228
00:11:55,735 --> 00:12:02,319
[MUSIC]