1
00:00:01,120 --> 00:00:02,820
I'm Nick Pettit.
>> I'm Jason Seifer.

2
00:00:02,820 --> 00:00:05,730
>> And you're watching The Treehouse
Show, your weekly dose of internets,

3
00:00:05,730 --> 00:00:09,150
where we talk about all things web design,
web development, and more.

4
00:00:09,150 --> 00:00:10,590
>> In this episode, we'll be talking
about

5
00:00:10,590 --> 00:00:15,980
web typography, JavaScript progress bars,
CSS 3D, and more.

6
00:00:15,980 --> 00:00:16,640
>> Let's check it out.

7
00:00:16,640 --> 00:00:21,577
[MUSIC].

8
00:00:21,577 --> 00:00:24,810
First up is FlowType.js.

9
00:00:24,810 --> 00:00:28,670
This is a really cool jQuery plugin that
will actually resize

10
00:00:28,670 --> 00:00:34,900
your text as the browser window resizes,
so great for responsive designs.

11
00:00:34,900 --> 00:00:39,290
If we head over to FlowType.JS here, we
can go ahead and try it out.

12
00:00:39,290 --> 00:00:41,910
We can drag this little slider.

13
00:00:41,910 --> 00:00:46,130
And as you can see, as the browser window
gets smaller, and smaller,

14
00:00:46,130 --> 00:00:47,750
the type gets smaller.

15
00:00:47,750 --> 00:00:54,380
And as the browser window increase in
size, the type also increases in size.

16
00:00:54,380 --> 00:00:58,510
>> It's pretty easy to use.
You just set a couple of thresholds.

17
00:00:58,510 --> 00:01:02,450
You say what the minimum and maximum
sizes, should be.

18
00:01:02,450 --> 00:01:05,400
And then you can go ahead and include

19
00:01:05,400 --> 00:01:10,660
the jQuery plug-in along with jQuery onto
your page.

20
00:01:10,660 --> 00:01:11,280
And you set

21
00:01:11,280 --> 00:01:15,410
those options when you actually call it,
and that's pretty

22
00:01:15,410 --> 00:01:19,100
much it, it's, it's actually really super
simple to use.

23
00:01:19,100 --> 00:01:24,230
And what's even better is that is works
just fine with Typekit, Cloud,

24
00:01:24,230 --> 00:01:30,400
Typography and Google Webfonts and pretty
much any other web font service.

25
00:01:30,400 --> 00:01:31,400
So pretty cool stuff.

26
00:01:31,400 --> 00:01:31,980
>> It's really neat.

27
00:01:31,980 --> 00:01:36,310
You know, it says on the page there that
the ideal typography for legibility

28
00:01:36,310 --> 00:01:39,930
is 45 to 75 words on a line.
>> I did not know that.

29
00:01:39,930 --> 00:01:41,010
>> I did not either.

30
00:01:41,010 --> 00:01:42,900
But it makes sense.
>> Mm-hm.

31
00:01:42,900 --> 00:01:44,620
>> Either way I tldr'd it.

32
00:01:44,620 --> 00:01:47,240
Next up we have something called admin js.

33
00:01:47,240 --> 00:01:50,360
This is a, an backend agnostic

34
00:01:50,360 --> 00:01:53,470
administration framework written entirely
in Javascript.

35
00:01:53,470 --> 00:01:55,840
It uses ember js and a couple of plug-ins.

36
00:01:55,840 --> 00:01:58,120
So if we take a look at the site here.

37
00:01:58,120 --> 00:02:01,490
You can see they have an example of admin
js, and this is

38
00:02:01,490 --> 00:02:05,180
listing customer zero through 10,000, and
it

39
00:02:05,180 --> 00:02:07,830
gives you a really nicely formatted table.

40
00:02:07,830 --> 00:02:14,530
You can search and you know, even filter
by name, email, and the different notes.

41
00:02:14,530 --> 00:02:16,620
What's really interesting about this is
that

42
00:02:16,620 --> 00:02:19,560
this is all created dynamically in
JavaScript.

43
00:02:19,560 --> 00:02:25,240
It uses something called EPF which is a
plug-in for ember.

44
00:02:25,240 --> 00:02:26,530
All you need to do is

45
00:02:26,530 --> 00:02:30,150
tell it what your models are, and what
attributes they

46
00:02:30,150 --> 00:02:34,010
have, and that's pretty much all you need
to do.

47
00:02:34,010 --> 00:02:37,060
This little block of code right here was
all that's needed.

48
00:02:37,060 --> 00:02:39,990
To make this entire table up here.

49
00:02:39,990 --> 00:02:43,200
And the nice thing is this even does
relations so you can see a customer

50
00:02:43,200 --> 00:02:47,670
has a certain number or orders and you can
even go over to the orders tab.

51
00:02:47,670 --> 00:02:51,610
And even though it crashed a little bit in
my browser right here I promise you

52
00:02:51,610 --> 00:02:52,800
that it works.

53
00:02:52,800 --> 00:02:57,030
You can see it's version 0.0.1 so clearly
if you have a couple bugs to work

54
00:02:57,030 --> 00:03:01,360
out, but so far it's looking like a great
project so check that out, admin js.

55
00:03:01,360 --> 00:03:02,700
>> Pretty cool stuff.

56
00:03:02,700 --> 00:03:04,710
Well, next up, we're going to check out

57
00:03:04,710 --> 00:03:08,290
The Corner, which is the Square
engineering blog.

58
00:03:08,290 --> 00:03:10,030
That's pretty clever.
>> I get it.

59
00:03:10,030 --> 00:03:11,170
>> Square, corner.

60
00:03:11,170 --> 00:03:12,910
>> Corner.
>> Edges.

61
00:03:12,910 --> 00:03:14,170
>> Geometry joke.

62
00:03:14,170 --> 00:03:15,980
>> Polygons.
>> Yeah.

63
00:03:15,980 --> 00:03:16,750
>> So,

64
00:03:16,750 --> 00:03:21,790
over on the corner, they have this amazing
blog post about responsive images.

65
00:03:21,790 --> 00:03:27,040
So they were putting together their
Japanese translation for

66
00:03:27,040 --> 00:03:32,515
Square and they wanted to have a couple of
different layouts on their home page.

67
00:03:32,515 --> 00:03:37,570
Now, each layout uses the same image or at
least the same

68
00:03:37,570 --> 00:03:42,780
photograph, but they're actually storing
different different images.

69
00:03:42,780 --> 00:03:46,020
They're cropped slightly differently.
They're positioned differently.

70
00:03:46,020 --> 00:03:51,540
Here on the smallest version they have the
text below the picture and

71
00:03:51,540 --> 00:03:55,310
the medium and large they have the text
over on the right side.

72
00:03:55,310 --> 00:03:56,950
So, how do they do this?

73
00:03:56,950 --> 00:03:58,580
Well you don't wanna go ahead and just

74
00:03:58,580 --> 00:04:01,130
send the same image to every browser
because that's

75
00:04:01,130 --> 00:04:03,910
actually kind of a waste, especially when
you have

76
00:04:03,910 --> 00:04:07,780
this beautiful full screen photograph that
would be way

77
00:04:07,780 --> 00:04:12,820
too big for a mobile device.
Instead, they wrote a Compass

78
00:04:12,820 --> 00:04:18,090
extension, and they're calling Apropos, I
believe is how it's pronounced?

79
00:04:18,090 --> 00:04:19,400
>> Your, Apropos?

80
00:04:19,400 --> 00:04:23,440
>> Apropos, not really sure on that.
Jason is probably right.

81
00:04:23,440 --> 00:04:23,940
Listen to him.

82
00:04:25,030 --> 00:04:25,160
and.

83
00:04:25,160 --> 00:04:28,560
>> Apropos is an animal, its closely
related to the hippopotamus.

84
00:04:28,560 --> 00:04:30,510
>> Oh, I, I didn't know that, true
facts.

85
00:04:30,510 --> 00:04:32,640
>> Yep.
>> half-truths.

86
00:04:32,640 --> 00:04:38,360
Here is all the images that they used for
this the different layouts.

87
00:04:38,360 --> 00:04:41,380
You can actually specify the different
images that you want

88
00:04:41,380 --> 00:04:44,770
to use, maybe leave a comment in there, so
you remember.

89
00:04:44,770 --> 00:04:49,880
And then, in your media queries, you can
go ahead and bring in those images.

90
00:04:49,880 --> 00:04:56,240
So pretty cool idea, a great way to save
bandwidth and, you know, check it out.

91
00:04:56,240 --> 00:04:56,830
Pretty cool.

92
00:04:56,830 --> 00:04:58,030
>> Might be a fruit.

93
00:04:58,030 --> 00:05:01,150
The apropos fruit.
>> That is, this is very possible.

94
00:05:01,150 --> 00:05:02,360
I have no idea.

95
00:05:02,360 --> 00:05:02,750
>> Mm.

96
00:05:02,750 --> 00:05:05,520
Next up, we have a project called N
Progress.

97
00:05:05,520 --> 00:05:10,570
This is a Javascript library for creating
a really slim progress bar on your site.

98
00:05:10,570 --> 00:05:15,530
It's really, really great if you're using
an Ajax heavy application.

99
00:05:15,530 --> 00:05:17,680
So let's check a little bit about how it
works here.

100
00:05:17,680 --> 00:05:18,220
It's really easy.

101
00:05:18,220 --> 00:05:20,930
You just call start, set, inc, or done.

102
00:05:20,930 --> 00:05:23,470
Now you'll have to take a look at the top
of the browser here.

103
00:05:23,470 --> 00:05:25,290
If we hit the play button, you can

104
00:05:25,290 --> 00:05:29,976
see that it is incrementing, decrementing,
and done.

105
00:05:29,976 --> 00:05:31,495
Start it again in case you missed it,

106
00:05:31,495 --> 00:05:33,710
watch the top of the screen, little blue
line.

107
00:05:33,710 --> 00:05:35,120
Whoa!
Hey, there we go.

108
00:05:35,120 --> 00:05:35,920
It's going.
Whew.

109
00:05:35,920 --> 00:05:36,310
>> That's amazing.

110
00:05:36,310 --> 00:05:37,810
Wow.
>> It's going, wow.

111
00:05:37,810 --> 00:05:39,400
All, all that stuff.

112
00:05:39,400 --> 00:05:41,530
Anyway you can see there's just four
methods that

113
00:05:41,530 --> 00:05:44,830
you can use to control it so pretty easy.

114
00:05:44,830 --> 00:05:47,470
Really great library and really easy to
integrate.

115
00:05:47,470 --> 00:05:48,660
You can find that in the show notes

116
00:05:48,660 --> 00:05:51,640
which you can get to at
youtube.com/gotreehouse or

117
00:05:51,640 --> 00:05:54,670
search for us on iTunes at the treehouse
show.

118
00:05:54,670 --> 00:05:55,590
Very cool stuff.

119
00:05:55,590 --> 00:05:59,680
Well, next up is One Pixel Deep, which is
a website

120
00:05:59,680 --> 00:06:04,900
that allows you to create a Bootstrap
theme based on a color.

121
00:06:04,900 --> 00:06:09,380
So, they describe it as a flatish
Bootstrap 3 theme.

122
00:06:09,380 --> 00:06:13,230
Of course Bootstrap 3 was just recently
released.

123
00:06:13,230 --> 00:06:13,920
It's very cool,

124
00:06:13,920 --> 00:06:15,190
check it out.

125
00:06:15,190 --> 00:06:17,220
But here you can go ahead and select a

126
00:06:17,220 --> 00:06:20,720
seed color and this really nice little
color picker here.

127
00:06:20,720 --> 00:06:24,930
I'm going to go ahead and try to select a
color that's not going to be a

128
00:06:24,930 --> 00:06:28,790
completely horrible actually, let's go
with something really

129
00:06:28,790 --> 00:06:30,790
bright so you can really see what it does.

130
00:06:30,790 --> 00:06:34,390
I'm gonna go with this bright yellow here,
and then over here, you

131
00:06:34,390 --> 00:06:39,560
have a color wheel where you can pick a
couple of different color schemes.

132
00:06:39,560 --> 00:06:46,330
They have accented, analogue, monochrome,
complement, triad, And tetrad so, if

133
00:06:46,330 --> 00:06:50,220
you're familiar with color theory you'll
know exactly what those things mean.

134
00:06:50,220 --> 00:06:51,435
>> Pretty sure those are all video
games.

135
00:06:51,435 --> 00:06:53,258
>> Yup exactly.

136
00:06:53,258 --> 00:06:56,192
Soo I'm gonna hit scheme now and bam look
at that.

137
00:06:56,192 --> 00:06:56,446
>> Bam.

138
00:06:56,446 --> 00:07:00,410
>> Of this absolutely terrifying theme.
Let's go to.

139
00:07:00,410 --> 00:07:01,970
>> Glad I brought my sunglasses.

140
00:07:01,970 --> 00:07:04,970
>> A slightly darker color here, see
what that looks like.

141
00:07:04,970 --> 00:07:08,400
Hey that looks a little bit nicer and more
legible.

142
00:07:08,400 --> 00:07:12,550
And we can make it purple, try out
complementary theme here.

143
00:07:12,550 --> 00:07:13,530
Should be.

144
00:07:13,530 --> 00:07:15,285
Yeah, pretty nice.
>> It's lovely.

145
00:07:15,285 --> 00:07:17,500
>> Mm-hm.
>> It's a delicious grape color.

146
00:07:17,500 --> 00:07:22,930
>> So, [LAUGH] you can check out One
Pixel Deep and go ahead, pick

147
00:07:22,930 --> 00:07:26,760
a color, pick something on the color wheel
and see what you come up with.

148
00:07:26,760 --> 00:07:30,040
This is very a very good tool for
developers that

149
00:07:30,040 --> 00:07:32,730
may not necessarily be too sure about

150
00:07:32,730 --> 00:07:35,910
their design skills or color picking
abilities.

151
00:07:35,910 --> 00:07:38,340
They can go ahead and just use Bootstrap
3,

152
00:07:38,340 --> 00:07:40,550
pick a nice color, and you're set to go.

153
00:07:40,550 --> 00:07:42,840
>> What are you trying to say, Nick?

154
00:07:42,840 --> 00:07:47,300
>> I'm trying to say that you know, you
need to stay out of the CSS.

155
00:07:47,300 --> 00:07:49,190
And I'll stay out of the models.
>> All right.

156
00:07:49,190 --> 00:07:52,670
Next up, Thankful presents JavaScript best
practices.

157
00:07:52,670 --> 00:07:55,330
This is part one of a multi-part series
and

158
00:07:55,330 --> 00:07:56,860
if you could possibly guess based on the

159
00:07:56,860 --> 00:08:01,430
title, they're going over best practices
when coding JavaScript.

160
00:08:01,430 --> 00:08:02,220
And it's really great.

161
00:08:02,220 --> 00:08:04,130
They start with some bad examples of how
to do

162
00:08:04,130 --> 00:08:07,900
something and then show you how you could
actually restructure it.

163
00:08:07,900 --> 00:08:12,400
This came from a slideshow that they did
for a talk somewhere.

164
00:08:12,400 --> 00:08:16,690
So first thing they're telling you, you
know, make understandable variable names.

165
00:08:16,690 --> 00:08:20,934
This is programming advice that is
applicable not just to JavaScript I

166
00:08:20,934 --> 00:08:22,420
mean, as you can see they give you some

167
00:08:22,420 --> 00:08:25,850
examples of bad variable names, either
being too short

168
00:08:25,850 --> 00:08:29,830
and non-descriptive or having way too much
information, and

169
00:08:29,830 --> 00:08:31,880
they go through and tell you how that is.

170
00:08:31,880 --> 00:08:34,820
How it would be formatted much better.

171
00:08:34,820 --> 00:08:37,830
Avoid global variables, things that you
probably already know

172
00:08:37,830 --> 00:08:41,080
if you're more familiar with JavaScript,
and they're just going

173
00:08:41,080 --> 00:08:44,150
through and showing you a ton of different
things that

174
00:08:44,150 --> 00:08:47,370
you're gonna need to keep in mind when
coding JavaScript.

175
00:08:47,370 --> 00:08:51,510
Now, again, this is the first part of a
multi-part article, so stay tuned.

176
00:08:51,510 --> 00:08:53,730
And you can find the link in the show
notes.

177
00:08:53,730 --> 00:08:54,870
Really digging it.

178
00:08:54,870 --> 00:09:01,860
>> Very cool.
So next up is Tridiv, that's T-R-I-D-I-V,

179
00:09:01,860 --> 00:09:07,570
and this is basically a 3D modeling
program for 3D CSS.

180
00:09:07,570 --> 00:09:12,630
It's pretty amazing, actually, and let's
just go ahead and check it out right now.

181
00:09:12,630 --> 00:09:14,860
I'm going to click start using the app.

182
00:09:14,860 --> 00:09:19,090
Of course, it shows browser compatibility,
compatibility down here.

183
00:09:19,090 --> 00:09:23,670
Does not yet work in Firefox or Internet
Explorer.

184
00:09:23,670 --> 00:09:25,710
I believe in Internet Explorer, it
probably doesn't work,

185
00:09:25,710 --> 00:09:31,660
because it does not support the preserve
3D property.

186
00:09:31,660 --> 00:09:38,860
So here we have a, just your basic 3D
editor, and we can go ahead and

187
00:09:38,860 --> 00:09:43,400
create some shapes here.
We can look at it in perspective.

188
00:09:43,400 --> 00:09:46,180
We can go ahead and move it around the
screen.

189
00:09:46,180 --> 00:09:47,300
We can rotate it.

190
00:09:48,610 --> 00:09:52,430
All sorts of amazing things here.
There we go.

191
00:09:52,430 --> 00:09:53,090
Edit.

192
00:09:53,090 --> 00:09:55,650
I can actually drag a handle here, and
just rotate it.

193
00:09:55,650 --> 00:09:59,070
I can adjust the size of it.

194
00:09:59,070 --> 00:09:59,260
>> Wow.

195
00:09:59,260 --> 00:10:02,310
>> It's pretty awesome.
And pretty robust.

196
00:10:02,310 --> 00:10:04,110
Now if we actually go back to Tridiv

197
00:10:04,110 --> 00:10:08,260
here, we can scroll down and see a couple
of examples.

198
00:10:08,260 --> 00:10:14,380
They have an iPhone 4S a Super NES -- I
guess they like retro electronics there.

199
00:10:14,380 --> 00:10:15,340
>> Nick, that's a regular NES.

200
00:10:15,340 --> 00:10:17,770
>> Then they, then they.
>> There's nothing super about that.

201
00:10:17,770 --> 00:10:18,650
>> Oh wow, you're right.

202
00:10:18,650 --> 00:10:20,420
Excuse me.
Even more retro.

203
00:10:20,420 --> 00:10:24,060
And then, an X-wing, which is actually
also retro

204
00:10:24,060 --> 00:10:26,855
because it's from a galaxy a long time
ago.

205
00:10:26,855 --> 00:10:29,130
>> [LAUGH]
>> Alright, so let's go ahead and

206
00:10:29,130 --> 00:10:30,310
load up the X-wing here.

207
00:10:30,310 --> 00:10:34,720
We have it loaded into the Tridiv preview
window here.

208
00:10:34,720 --> 00:10:36,320
I can drag this around.

209
00:10:36,320 --> 00:10:39,910
As you can see we have 3D geometry in the
browser here.

210
00:10:39,910 --> 00:10:42,540
This is pretty impressive and the cool
thing about

211
00:10:42,540 --> 00:10:44,750
it is that it even has shading on it.

212
00:10:44,750 --> 00:10:48,230
They're doing this with a plug-in called
Photon.

213
00:10:48,230 --> 00:10:51,640
Actually I don't know if it's a plug-in to
anything, necessarily.

214
00:10:51,640 --> 00:10:54,560
It's just a piece of JavaScript, or a
JavaScript

215
00:10:54,560 --> 00:11:00,810
project called Photon, and it will
actually shade your geometry

216
00:11:00,810 --> 00:11:07,910
that's transformed in the browser.
Now, over here, you can get the HTML code.

217
00:11:07,910 --> 00:11:11,350
You can get the CSS code and you can even
edit it.

218
00:11:11,350 --> 00:11:15,220
On Codepen, so I'm just going to go ahead
and click

219
00:11:15,220 --> 00:11:20,590
that and we're gonna load up this X-Wing
into Codepen here.

220
00:11:20,590 --> 00:11:24,350
Now, I want you to take a look at the HTML
here.

221
00:11:24,350 --> 00:11:26,600
Here you can see it has all the Photon
shader

222
00:11:26,600 --> 00:11:32,038
classes and there is just a ton of DIVs
here.

223
00:11:32,038 --> 00:11:39,125
Really, really non-semantic markup.
I don't want to take anything

224
00:11:39,125 --> 00:11:46,370
away from Tridiv but I do have a little
bit of an opinion on 3D in the browser.

225
00:11:46,370 --> 00:11:50,350
I actually think that while this is pretty
cool.

226
00:11:50,350 --> 00:11:54,540
Maybe you can use it for some kind of
splash page or something.

227
00:11:54,540 --> 00:11:58,850
I don't think that the DOM is a really
good place to store 3D geometry.

228
00:11:58,850 --> 00:12:04,956
I actually think that you should do
something like this with 3JS or, you know,

229
00:12:04,956 --> 00:12:10,710
some other 3D library that will actually
do this either in Canvas or in web GL.

230
00:12:12,056 --> 00:12:14,471
There's less support for that or I guess I

231
00:12:14,471 --> 00:12:17,690
should say there's not great support for
web GL.

232
00:12:17,690 --> 00:12:21,900
It doesn't work in Internet Explorer yet
but then again neither does this.

233
00:12:21,900 --> 00:12:24,984
So what's the difference really?
Right?

234
00:12:24,984 --> 00:12:27,168
anyway, I, I think Tridiv is really cool
but I

235
00:12:27,168 --> 00:12:29,820
do think if you're going to do 3D in a
browser.

236
00:12:29,820 --> 00:12:35,910
You should try to avoid putting a ton of
unsemantic divs into your markup.

237
00:12:35,910 --> 00:12:37,120
>> And, and for more examples

238
00:12:37,120 --> 00:12:41,300
of how to program well in 3D, check out
previous episodes of the Treehouse Show.

239
00:12:41,300 --> 00:12:41,780
>> Bam.

240
00:12:41,780 --> 00:12:43,000
There you go.

241
00:12:43,000 --> 00:12:46,570
>> Next up we have something called the
iOS Design Cheat Sheet.

242
00:12:46,570 --> 00:12:49,660
This is a cheat sheet for designing with
iOS 7.

243
00:12:49,660 --> 00:12:54,120
Now with iOS sev, iOS 7 they've updated
just a bunch of stuff.

244
00:12:54,120 --> 00:12:58,580
The grid system has changed, so over here
on this site they've

245
00:12:58,580 --> 00:13:02,130
taken all this information and put it into
a handy dandy cheat

246
00:13:02,130 --> 00:13:03,110
sheet for you.

247
00:13:03,110 --> 00:13:07,560
So it'll list the different dimensions for
the different devices going from

248
00:13:07,560 --> 00:13:11,170
the iPad all the way to different models
of iPhones and iPod touches.

249
00:13:12,170 --> 00:13:16,250
The pixels per inch, color mode, what the
different app

250
00:13:16,250 --> 00:13:20,740
icon sizes is, and also important is the
grid system.

251
00:13:20,740 --> 00:13:25,850
So that'll tell you how to lay it out when
designing an icon for your application.

252
00:13:25,850 --> 00:13:27,710
As well as just different

253
00:13:27,710 --> 00:13:30,830
pixels and dimensions for pretty much
everything you can think of.

254
00:13:30,830 --> 00:13:34,570
So this is great just a quick handy cheat
sheet for you.

255
00:13:34,570 --> 00:13:37,290
And think that's about all we have for
this episode.

256
00:13:37,290 --> 00:13:38,430
Nick, who are you on Twitter?

257
00:13:38,430 --> 00:13:40,790
>> I'm @nickrp.
>> And I am @jseifer.

258
00:13:40,790 --> 00:13:44,170
For more information on anything we talked
about in this show, check our

259
00:13:44,170 --> 00:13:47,540
show notes at youtube.com/gotreehouse or
search for

260
00:13:47,540 --> 00:13:49,710
us on iTunes at The Treehouse Show.

261
00:13:49,710 --> 00:13:52,880
>> And, of course, if you'd like to see
more videos like this one about web

262
00:13:52,880 --> 00:13:56,740
design, web development, mobile business
and so much

263
00:13:56,740 --> 00:13:59,770
more, be sure to check us out at
teamtreehouse.com.

264
00:13:59,770 --> 00:14:02,463
Thanks so much for watching and we'll see
ya next week.

265
00:14:02,463 --> 00:14:09,890
[MUSIC]