1
00:00:00,700 --> 00:00:01,440
I'm Nick Pettit.

2
00:00:01,440 --> 00:00:02,007
>> I'm Jason Seifer.

3
00:00:02,007 --> 00:00:02,370
[MUSIC].

4
00:00:02,370 --> 00:00:05,030
>> And you're watching the Treehouse show,
you're weekly dose of Internets,

5
00:00:05,030 --> 00:00:08,340
where we talk about all things web design,
wed development, and more.

6
00:00:08,340 --> 00:00:09,840
>> In this episode, we'll be talking about

7
00:00:09,840 --> 00:00:14,660
morphing buttons, range sliders,
declarative animation and more.

8
00:00:14,660 --> 00:00:15,362
>> Let's check it out.

9
00:00:15,362 --> 00:00:15,862
[MUSIC].

10
00:00:20,675 --> 00:00:24,450
>> First up we have a library called pull
and zoom.

11
00:00:24,450 --> 00:00:28,275
The pull and zoom library replicates the
functionality that

12
00:00:28,275 --> 00:00:32,190
you might have seen in the twitter
application on IOS.

13
00:00:32,190 --> 00:00:35,360
>> So what happens is, as you're scrolling
down the page.

14
00:00:35,360 --> 00:00:38,090
A background image will zoom in.

15
00:00:38,090 --> 00:00:40,150
This is what it looks like on Android.

16
00:00:40,150 --> 00:00:44,490
So if you scroll down, it will actually
get

17
00:00:44,490 --> 00:00:47,810
bigger and appear to zoom in on the image.

18
00:00:47,810 --> 00:00:48,000
>> Wow.

19
00:00:48,000 --> 00:00:51,334
>> Now this also works on IOS.

20
00:00:51,334 --> 00:00:55,970
This is a very, very simple plug-in, you
just initialize pulling zoom

21
00:00:55,970 --> 00:00:59,846
after adding the load add event listener
to your sight and you

22
00:00:59,846 --> 00:01:02,886
give it the main page which is going to be
the main

23
00:01:02,886 --> 00:01:07,690
element and the background in which and
then call this Ping method.

24
00:01:07,690 --> 00:01:10,650
After that, it is completely done.

25
00:01:10,650 --> 00:01:14,180
So it's really a very, very small plugin,
there's actually not a lot of code here.

26
00:01:14,180 --> 00:01:16,640
If you look at pull and zoom.js, it

27
00:01:16,640 --> 00:01:20,445
really just initialize's the options, and
then adds a

28
00:01:20,445 --> 00:01:24,750
[UNKNOWN] for touch moves, scroll, touch
start, and end,

29
00:01:24,750 --> 00:01:28,370
and then it uses, red kick transforms and
transitions.

30
00:01:28,370 --> 00:01:31,900
To perform that background pull and zoom.

31
00:01:31,900 --> 00:01:36,090
So, that's it, pretty simple plug in, but
pretty nice, you know pretty easy to use.

32
00:01:36,090 --> 00:01:38,530
Go ahead and integrate that on your pages
if you want to.

33
00:01:38,530 --> 00:01:39,600
We're not gonna force you.

34
00:01:39,600 --> 00:01:41,700
>> You don't have to do anything we say.

35
00:01:41,700 --> 00:01:44,360
>> Yeah, it's, I, I wouldn't listen to
anything we say.

36
00:01:44,360 --> 00:01:45,220
>> No.

37
00:01:45,220 --> 00:01:50,730
Well, next up is a really cool demo on the
code drops blog called morphing buttons.

38
00:01:50,730 --> 00:01:55,760
See, morphing buttons Concept, and they
have a bunch of different types here.

39
00:01:55,760 --> 00:01:58,490
Here are the Login, and Signup buttons.

40
00:01:58,490 --> 00:01:59,925
Let's click these, and see what they do.

41
00:01:59,925 --> 00:02:00,399
Woah!

42
00:02:00,399 --> 00:02:03,160
What just happened?

43
00:02:03,160 --> 00:02:05,210
A modal window.

44
00:02:05,210 --> 00:02:05,790
>> Wow.

45
00:02:05,790 --> 00:02:09,060
>> And it was transformed from this
button.

46
00:02:09,060 --> 00:02:10,770
They have terms of service here.

47
00:02:10,770 --> 00:02:13,160
So you can click that, and it brings it
up.

48
00:02:13,160 --> 00:02:15,012
That's, definitely here and there.

49
00:02:15,012 --> 00:02:15,560
>> [LAUGH]

50
00:02:15,560 --> 00:02:18,940
>> You can subscribe, so you can subscribe
to our newsletter.

51
00:02:18,940 --> 00:02:21,820
And if folds out this form, and that's
pretty amazing.

52
00:02:21,820 --> 00:02:23,680
I really like this share one.

53
00:02:23,680 --> 00:02:25,860
When you click share this, watch this,
whoa.

54
00:02:25,860 --> 00:02:26,570
>> What?

55
00:02:26,570 --> 00:02:28,270
>> What just happened?

56
00:02:28,270 --> 00:02:30,630
>> The future of UI is now.

57
00:02:30,630 --> 00:02:33,320
>> And then they have this really amazing
video player.

58
00:02:33,320 --> 00:02:37,870
You just click watch the trailer and it
brings up movie trailer.

59
00:02:37,870 --> 00:02:43,064
So this is pretty amazing, if we head over
to the code drops

60
00:02:43,064 --> 00:02:48,576
article we can scroll down the page and
you can either view this

61
00:02:48,576 --> 00:02:54,780
demo or you can download the source and
alternatively you can.

62
00:02:54,780 --> 00:03:00,280
Find this project on GitHub, so all the
code to do this is right here,

63
00:03:00,280 --> 00:03:05,910
and you can jump into the CSS and see
exactly how all this is being done.

64
00:03:05,910 --> 00:03:07,560
We're not gonna get into the code, but I

65
00:03:07,560 --> 00:03:10,400
did want to show you this really cool
design concept.

66
00:03:10,400 --> 00:03:14,172
I think it's a pretty smart way to show
small bits

67
00:03:14,172 --> 00:03:19,450
of content, like terms and conditions, or
like a contact form.

68
00:03:19,450 --> 00:03:21,660
Or, you know, the share buttons, like
that.

69
00:03:21,660 --> 00:03:25,060
>> Also adds just a little bit of context
to what you're doing, you know.

70
00:03:25,060 --> 00:03:25,470
>> It does.

71
00:03:25,470 --> 00:03:27,560
>> In case you forget what button you just
clicked.

72
00:03:27,560 --> 00:03:28,880
>> Which happens to me all the time.

73
00:03:28,880 --> 00:03:29,390
>> Yeah, I know.

74
00:03:29,390 --> 00:03:32,055
I, I can't be trusted to surf the web and
not click on things.

75
00:03:32,055 --> 00:03:32,720
>> Mm-mm.

76
00:03:32,720 --> 00:03:35,450
Alright, next up we have a project called
rangeslider.js.

77
00:03:35,450 --> 00:03:39,230
This is a really really simple jQuery and
java

78
00:03:39,230 --> 00:03:43,760
script poly fill for the HTML 5 range
slider element.

79
00:03:43,760 --> 00:03:47,080
So here is an example of the range slider
right here.

80
00:03:47,080 --> 00:03:48,640
And you can see as I.

81
00:03:48,640 --> 00:03:51,930
Drag the cursor, it will update the value.

82
00:03:51,930 --> 00:03:57,350
What's really nice about this is it's
touch-screen friendly, and it recalculates

83
00:03:57,350 --> 00:04:02,600
on resize so you can use it with your
responsive designs.

84
00:04:02,600 --> 00:04:06,078
And it's it's very very easy to use.

85
00:04:06,078 --> 00:04:08,790
It's compatible with standard HTML input
elements.

86
00:04:08,790 --> 00:04:10,940
Supports IE 8 and up.

87
00:04:10,940 --> 00:04:12,620
And I mean, look at that, all you do, you

88
00:04:12,620 --> 00:04:15,710
grab an element, and call the range slider
method on it.

89
00:04:15,710 --> 00:04:18,890
If you want to delete it, call destroy.

90
00:04:18,890 --> 00:04:21,960
Now it does have a few different options.

91
00:04:21,960 --> 00:04:25,020
You can either use it as a poly fill.

92
00:04:25,020 --> 00:04:27,000
Call the different classes that you want
to

93
00:04:27,000 --> 00:04:29,880
use, range slider, range slider fill, and
handle.

94
00:04:29,880 --> 00:04:32,710
And then you get call backs for
initialize.

95
00:04:32,710 --> 00:04:35,640
Slide starting, and sliding ending.

96
00:04:35,640 --> 00:04:38,170
So, cool they have a few different
examples right here.

97
00:04:38,170 --> 00:04:40,160
Here's an example of destroying it and
falling

98
00:04:40,160 --> 00:04:43,570
back to the native element, or
initializing it.

99
00:04:43,570 --> 00:04:44,550
And there you go.

100
00:04:44,550 --> 00:04:46,040
Again, very very simple.

101
00:04:46,040 --> 00:04:48,150
You can find the link to this in our show
notes which you can

102
00:04:48,150 --> 00:04:50,870
get to at YouTube.com/GoTreehouse, or
search for

103
00:04:50,870 --> 00:04:53,090
us on iTunes, we are the Treehouse Show.

104
00:04:54,280 --> 00:04:54,910
>> Very nice stuff.

105
00:04:54,910 --> 00:04:58,110
Well next up is WTF, forms?

106
00:04:58,110 --> 00:05:00,830
I'm saying it like that because there's a
question mark there.

107
00:05:00,830 --> 00:05:01,560
>> Hm.

108
00:05:01,560 --> 00:05:06,910
>> This is a re-styling of several common
form controls.

109
00:05:06,910 --> 00:05:10,770
It's done by Mark Otto, you may know him
from Twitter formally.

110
00:05:10,770 --> 00:05:16,142
He is now at GetHub and he works on the
bootstrap project, and these form controls

111
00:05:16,142 --> 00:05:21,750
are designed for Chrome, Safari, Firefox,
and Internet Explorer 9 and up.

112
00:05:21,750 --> 00:05:22,940
So, let's take a look at them.

113
00:05:22,940 --> 00:05:25,090
Here are some check boxes.

114
00:05:25,090 --> 00:05:28,180
So we have these custom check box styles.

115
00:05:28,180 --> 00:05:30,880
There's some nice radio buttons here.

116
00:05:30,880 --> 00:05:31,660
>> I like that.

117
00:05:31,660 --> 00:05:35,360
>> And you can also re-style what icons
you're

118
00:05:35,360 --> 00:05:39,490
using for each one of these so that's
pretty cool.

119
00:05:39,490 --> 00:05:44,740
There's also a Select menu here, so pretty
standard stuff there.

120
00:05:44,740 --> 00:05:50,140
And there's a File browser, which is
actually notoriously difficult to restyle.

121
00:05:50,140 --> 00:05:53,560
I've tried to do that in years past, and
it was difficult.

122
00:05:53,560 --> 00:05:58,070
Maybe it's easier now, and especially
easier with WTF forms.

123
00:05:58,070 --> 00:06:03,075
There's a good FAQ here, and one thing in
particular I'd like to

124
00:06:03,075 --> 00:06:08,353
highlight is that it doesn't style every
form control just yet, and

125
00:06:08,353 --> 00:06:14,177
there's no for attributes, but that's
perfectly fine because if you look

126
00:06:14,177 --> 00:06:20,090
at the markup here, all of the form
elements are wrapped in label elements.

127
00:06:20,090 --> 00:06:23,100
So, if you click on the form elements,

128
00:06:23,100 --> 00:06:25,899
they'll, they'll be selected because
they're wrapped labels.

129
00:06:27,160 --> 00:06:30,530
so, right now, it doesn't require Java
script so that's pretty nice.

130
00:06:30,530 --> 00:06:33,790
It just requires CSS so that's great.

131
00:06:33,790 --> 00:06:35,740
And will this be added to boot strap?

132
00:06:35,740 --> 00:06:40,280
Possibly, but not until version 4.0 at the
earliest.

133
00:06:40,280 --> 00:06:40,885
So you.

134
00:06:40,885 --> 00:06:42,230
Heard it here folks.

135
00:06:42,230 --> 00:06:44,715
This is the beginning of boot strap four.

136
00:06:44,715 --> 00:06:46,046
>> The beginning of the future.

137
00:06:46,046 --> 00:06:46,784
>> That's right.

138
00:06:46,784 --> 00:06:49,805
<< The future will be later but right now
we can start on it.

139
00:06:49,805 --> 00:06:53,340
>> And it's only maybe so.

140
00:06:53,340 --> 00:06:54,500
Okay?

141
00:06:54,500 --> 00:06:55,540
Perfect.

142
00:06:55,540 --> 00:06:55,950
>> Great.

143
00:06:55,950 --> 00:06:58,320
>> Next up we have a project called Quill.

144
00:06:58,320 --> 00:07:03,120
Quill is a very nice rich text editor
built for the modern web.

145
00:07:03,120 --> 00:07:07,860
So, you can have a text editor right here,
and then you can do some typing.

146
00:07:07,860 --> 00:07:09,540
Look at me, I'm typing.

147
00:07:09,540 --> 00:07:13,170
And you can make things bold, italic,
underline, and

148
00:07:13,170 --> 00:07:18,510
add images and links, and it is a
what-you-see-is-what-you-get editor.

149
00:07:18,510 --> 00:07:21,320
Now, what's really nice about this though,
is that

150
00:07:21,320 --> 00:07:26,820
you have access to events inside of the
JavaScript object.

151
00:07:26,820 --> 00:07:30,770
So you can get access to the text
changing.

152
00:07:30,770 --> 00:07:34,500
And, then, you can even see where it came
from, and you get

153
00:07:34,500 --> 00:07:38,460
access to the delta which is gonna be what
changed, inside the text field.

154
00:07:38,460 --> 00:07:40,190
And you can also get access to

155
00:07:40,190 --> 00:07:44,880
what was selected, inside of that
particular editor.

156
00:07:44,880 --> 00:07:47,980
That will allow you to do, different
things, if you want to.

157
00:07:47,980 --> 00:07:50,450
So pretty cool, you know, you can add
toolbar

158
00:07:50,450 --> 00:07:53,030
buttons and customize the toolbar if you
want to.

159
00:07:53,030 --> 00:07:55,590
And, as we're looking at this, the markup
is relatively

160
00:07:55,590 --> 00:07:59,900
minimal and, actually, kind of semantic at
the same time.

161
00:07:59,900 --> 00:08:02,640
So, it also supports different themes.

162
00:08:02,640 --> 00:08:05,390
There aren't too many out there right now,
but they're

163
00:08:05,390 --> 00:08:09,250
saying that's because the interface has
not been finalized just yet.

164
00:08:09,250 --> 00:08:12,140
Anyway, this is a really nice project, and
if you do

165
00:08:12,140 --> 00:08:14,700
need to add a rich text editor to your
site, definitely.

166
00:08:14,700 --> 00:08:15,820
Give it a look, see what you think.

167
00:08:16,870 --> 00:08:17,540
>> Very cool stuff!

168
00:08:17,540 --> 00:08:23,940
Well next up is rendering realistic
terrain in 130 lines.

169
00:08:23,940 --> 00:08:26,330
This is pretty impressive.

170
00:08:26,330 --> 00:08:29,850
Actually I'd like to start out with the
demo.

171
00:08:29,850 --> 00:08:32,610
So explore otherworldly terrain.

172
00:08:32,610 --> 00:08:35,840
We can click on that, and it's going to
render.

173
00:08:35,840 --> 00:08:37,890
This kind of interesting looking terrain.

174
00:08:37,890 --> 00:08:41,690
And if I refresh the page a couple
different times, it will,

175
00:08:41,690 --> 00:08:44,160
generate different terrain, and there's
even

176
00:08:44,160 --> 00:08:45,970
some water there, that's pretty amazing.

177
00:08:45,970 --> 00:08:49,450
And this is all being done, like I said,
in 130 lines of JavaScript.

178
00:08:49,450 --> 00:08:51,580
Which is fairly compact.

179
00:08:51,580 --> 00:08:54,350
So, how is this being done?

180
00:08:54,350 --> 00:08:58,530
Well, first, a height map is being
generated and if you are

181
00:08:58,530 --> 00:09:02,790
not familiar with 3D graphics, a height
map is a two-dimensional array.

182
00:09:02,790 --> 00:09:07,130
So, it's sort of a data structure that you
are looking at and then,

183
00:09:07,130 --> 00:09:12,750
you take that data and you can extrude the
terrain from the two-dimensional maps.

184
00:09:12,750 --> 00:09:19,260
So, you basically map how, how tall each
part of terrain should be.

185
00:09:19,260 --> 00:09:22,680
And traditionally in 3D graphics, a dark
portion will

186
00:09:22,680 --> 00:09:25,120
be low, and the light portion will be
higher.

187
00:09:25,120 --> 00:09:29,490
So they generate this pipe map, and then.

188
00:09:29,490 --> 00:09:34,090
They can have a couple of different ways
of rendering it.

189
00:09:34,090 --> 00:09:37,920
So you could render it as just a flat pipe
map.

190
00:09:37,920 --> 00:09:40,920
You could do it in an isometric
perspective.

191
00:09:40,920 --> 00:09:47,040
Or you could do it in perspective and
there's all that there.

192
00:09:47,040 --> 00:09:52,110
Now, you also have to light it, so they
show how they do lighting and shadowing.

193
00:09:52,110 --> 00:09:56,890
And then, like I said, they do the
perspective projection right there.

194
00:09:56,890 --> 00:10:02,134
Now, obviously, this is pretty complicated
code, but if you're interested in

195
00:10:02,134 --> 00:10:05,098
generating procedural terrains or you
know,

196
00:10:05,098 --> 00:10:08,890
doing some advanced algorithm design in
JavaScript.

197
00:10:08,890 --> 00:10:12,710
This is a really cool example of a really
great

198
00:10:12,710 --> 00:10:16,100
code that does one thing and does it
really, really well.

199
00:10:16,100 --> 00:10:20,040
I'm not sure when specifically you might
need to use something like this on

200
00:10:20,040 --> 00:10:25,720
a website, but it's just good code to
kinda help you practice your skills.

201
00:10:25,720 --> 00:10:27,690
>> Yeah, it's really cool.

202
00:10:27,690 --> 00:10:30,570
Next up, we have a project called AniJS.

203
00:10:30,570 --> 00:10:35,870
This is a declarative library for CSS
animations.

204
00:10:35,870 --> 00:10:37,960
So let's take a look at the example right
here.

205
00:10:37,960 --> 00:10:39,540
So, click square demo.

206
00:10:39,540 --> 00:10:41,690
Ooh, get, get a load of this, watch this
page.

207
00:10:41,690 --> 00:10:43,100
It goes crazy.

208
00:10:43,100 --> 00:10:43,570
Wow!

209
00:10:43,570 --> 00:10:45,000
What's goin' on?

210
00:10:45,000 --> 00:10:46,650
What is goin' on?

211
00:10:46,650 --> 00:10:49,380
Look at this, I go to input my name,
everything just falls out of place.

212
00:10:49,380 --> 00:10:50,040
What?

213
00:10:50,040 --> 00:10:50,760
Where's it going?

214
00:10:50,760 --> 00:10:52,190
Why, why's it going there?

215
00:10:52,190 --> 00:10:56,000
So, you might think that a ton of code is
required to get

216
00:10:56,000 --> 00:11:00,940
this to work, but no, this is all being
handled in a data attribute.

217
00:11:00,940 --> 00:11:02,490
So, you give it data.

218
00:11:02,490 --> 00:11:05,230
Any js and we are saying, if this gets

219
00:11:05,230 --> 00:11:10,050
focussed, do a wobble and then give it a
target.

220
00:11:10,050 --> 00:11:12,200
So, there are a few different animations
that

221
00:11:12,200 --> 00:11:16,300
you can do and the if is also supported.

222
00:11:16,300 --> 00:11:22,670
If we look at the documentation, you can
see here, here we go, Wiki Pages.

223
00:11:22,670 --> 00:11:24,180
Sentence definitions.

224
00:11:24,180 --> 00:11:28,200
So the different if scenarios are pretty
easy to understand.

225
00:11:28,200 --> 00:11:30,000
You know, if we click on something, if we
focus

226
00:11:30,000 --> 00:11:33,940
something or scroll to it or content has
been loaded.

227
00:11:33,940 --> 00:11:39,310
And then we do it on what part of the
page, header, footer, whatever.

228
00:11:39,310 --> 00:11:42,170
You know, so here we're saying, hey if
we're clicking

229
00:11:42,170 --> 00:11:45,940
on the header or on the footer, then swing
everything.

230
00:11:45,940 --> 00:11:48,650
Not really sure you would, why you would
want to do a swing, but hey.

231
00:11:48,650 --> 00:11:50,160
You might want to.

232
00:11:50,160 --> 00:11:55,600
And then it tells you to, and that is the
element that is going to be animated.

233
00:11:55,600 --> 00:11:58,850
Now if it's not specified then the element
that was

234
00:11:58,850 --> 00:12:03,580
declared on is what event will be
triggered on and animated.

235
00:12:03,580 --> 00:12:06,180
So, this is a pretty interesting library.

236
00:12:06,180 --> 00:12:11,750
I don't know if I'm completely sold on
animating based on sentences.

237
00:12:11,750 --> 00:12:14,290
But it is very, very simple to use if

238
00:12:14,290 --> 00:12:16,940
you just want to get started with some
simple animation.

239
00:12:16,940 --> 00:12:19,350
So definitely make sure to check it out,
evaluate it,

240
00:12:19,350 --> 00:12:20,960
and see if it's right for you and your
project.

241
00:12:20,960 --> 00:12:25,010
You know it's nice that it does use CSS
animations as well, so.

242
00:12:25,010 --> 00:12:25,900
>> Very cool stuff.

243
00:12:25,900 --> 00:12:29,250
Well next up is a wonderful blog post
about

244
00:12:29,250 --> 00:12:32,920
Bézier curves and how they relate to type
design.

245
00:12:32,920 --> 00:12:36,650
Now, if you are designing a font, which is

246
00:12:36,650 --> 00:12:39,730
a fairly ambitious endeavor if you've
never done it before.

247
00:12:39,730 --> 00:12:41,870
It's actually pretty complicated.

248
00:12:41,870 --> 00:12:44,850
Then this is a really great blog post
about how

249
00:12:44,850 --> 00:12:49,330
to design all of your curves for the type
face.

250
00:12:49,330 --> 00:12:53,750
Now, we're not really highlighting this
because we want you all to be really

251
00:12:53,750 --> 00:12:56,198
great type designers, this is actually an

252
00:12:56,198 --> 00:12:59,280
excellent tutorial on how Bézier curves
work.

253
00:12:59,280 --> 00:13:04,230
Now there's two different types of Bézier
curves, one is a quadratic curve and one

254
00:13:04,230 --> 00:13:11,070
is a cubic curve and they work with
different types of typefaces best.

255
00:13:11,070 --> 00:13:15,420
However the article suggests using cubic
Bézier curves.

256
00:13:15,420 --> 00:13:20,420
Because, you have fewer points overall,
and

257
00:13:20,420 --> 00:13:22,630
there's a couple of other different
reasons.

258
00:13:22,630 --> 00:13:24,550
But the thing I want to highlight here is
this

259
00:13:24,550 --> 00:13:29,860
really amazing animated GIF, actually it's
right here, excuse me, GIF.

260
00:13:29,860 --> 00:13:30,950
>> Thank You.

261
00:13:30,950 --> 00:13:34,200
>> [LAUGH] And, basically when a.

262
00:13:34,200 --> 00:13:36,450
Cubic curve is being drawn.

263
00:13:36,450 --> 00:13:39,320
You have a quadratic curve.

264
00:13:39,320 --> 00:13:44,440
That was a quadratic curve, and here is a
cubic curve, and

265
00:13:44,440 --> 00:13:49,940
it's being drawn by rendering this
quadratic curve between the two cubes.

266
00:13:49,940 --> 00:13:51,490
And when a curve is being drawn like

267
00:13:51,490 --> 00:13:54,350
this, it's actually a bunch of tiny little
planes.

268
00:13:54,350 --> 00:13:58,370
It's not actually a curve because it has
to be rasterized to the screen.

269
00:13:58,370 --> 00:13:59,960
>> When you say a bunch of tiny little

270
00:13:59,960 --> 00:14:02,550
planes, you don't mean like, like
passenger airplanes, right?

271
00:14:02,550 --> 00:14:04,960
>> No, and I don't mean tiny, little
airplanes either.

272
00:14:04,960 --> 00:14:05,820
>> Okay.

273
00:14:05,820 --> 00:14:10,880
>> No, no it's just a, it's just a normal
plane in

274
00:14:10,880 --> 00:14:14,610
the computer, and it's basically just
rendering a bunch of tiny, little.

275
00:14:14,610 --> 00:14:18,930
Straight lines, you could say, to create
this curve.

276
00:14:18,930 --> 00:14:22,950
Anyway, it's a great explanation about how
Bézier Curves work and you

277
00:14:22,950 --> 00:14:27,790
should definitely check out this post even
if you're not a type designer.

278
00:14:27,790 --> 00:14:30,630
>> I am not a type designer and I will
check out that post Nick.

279
00:14:30,630 --> 00:14:32,070
Because you recommended it.

280
00:14:32,070 --> 00:14:32,330
>> Very nice.

281
00:14:32,330 --> 00:14:33,740
>> Who are you on Twitter?

282
00:14:33,740 --> 00:14:34,580
>> I'm @nickrp.

283
00:14:34,580 --> 00:14:35,850
>> And I am @jseifer.

284
00:14:35,850 --> 00:14:37,510
For more information on anything we talked
about,

285
00:14:37,510 --> 00:14:40,100
you can get to our show notes at
YouTube.com/gotreehouse.

286
00:14:40,100 --> 00:14:42,470
You can also search for us on iTunes.

287
00:14:42,470 --> 00:14:43,530
We are The Treehouse Show.

288
00:14:43,530 --> 00:14:44,930
Don't forget to rate us.

289
00:14:44,930 --> 00:14:48,190
Also, if you would like to get one month
free of Treehouse,

290
00:14:48,190 --> 00:14:51,070
make sure to click the link that we have
in the show notes.

291
00:14:51,070 --> 00:14:52,850
>> And of course, if you'd like to see
more videos like

292
00:14:52,850 --> 00:14:54,350
this one about web design, web

293
00:14:54,350 --> 00:14:57,620
development, mobile, business, and so much
more.

294
00:14:57,620 --> 00:15:00,650
Be sure to check us out at
teamtreehouse.com

295
00:15:00,650 --> 00:15:03,530
and use that link to get a free month.

296
00:15:03,530 --> 00:15:09,950
Thank you so much for watching and we will
see you next week.

297
00:15:09,950 --> 00:15:13,149
[MUSIC]