1
00:00:00,250 --> 00:00:01,040
I'm Nick Pettit.

2
00:00:01,040 --> 00:00:02,000
>> I'm Jason Seifer.

3
00:00:02,000 --> 00:00:05,190
>> And you're watching The Treehouse Show,
your weekly dose of internet where we

4
00:00:05,190 --> 00:00:08,000
talk about all things web design, web
development, and more.

5
00:00:08,000 --> 00:00:13,530
>> For a free month's trial of Treehouse,
head on over to teamtreehouse.com/show.

6
00:00:13,530 --> 00:00:16,290
In this episode we'll be talking about
DPI,

7
00:00:16,290 --> 00:00:19,920
responsive charts, media queries, and
more.

8
00:00:19,920 --> 00:00:21,144
>> Let's check it out.

9
00:00:21,144 --> 00:00:26,222
[MUSIC]

10
00:00:26,222 --> 00:00:29,560
First up is the designers guide to DPI.

11
00:00:29,560 --> 00:00:30,740
What does that mean?

12
00:00:30,740 --> 00:00:33,590
Well, DPI is dots per inch.

13
00:00:33,590 --> 00:00:37,970
And it's an important topic that designers
have been talking about quite a lot.

14
00:00:37,970 --> 00:00:44,250
Because these days you can't rely on every
single screen having the same

15
00:00:44,250 --> 00:00:49,360
pixel density, the same amount of pixels
packed into the same area.

16
00:00:49,360 --> 00:00:50,770
It tends to vary.

17
00:00:50,770 --> 00:00:55,490
For example, we have retina iPhones and
eye iPads now, and

18
00:00:55,490 --> 00:00:59,080
even retina displays on computers like
this one.

19
00:00:59,080 --> 00:01:00,790
>> There only gonna get more dense.

20
00:01:00,790 --> 00:01:06,090
>> They are, at least that's the rumor or
the speculation, so.

21
00:01:06,090 --> 00:01:10,480
This is a really good time to start
learning about DPI and

22
00:01:10,480 --> 00:01:16,210
what it means to you as a designer or a
developer if you haven't done so already.

23
00:01:16,210 --> 00:01:18,990
This is a fairly basic guide, but

24
00:01:18,990 --> 00:01:24,800
it's good that it's basic because DPI can
be somewhat confusing if you're new to it.

25
00:01:24,800 --> 00:01:30,650
So there's an explanation about what is
DPI and what is PPI, or pixels

26
00:01:30,650 --> 00:01:36,540
per inch, and it goes in depth there with
some really great illustrations.

27
00:01:36,540 --> 00:01:41,590
Then it goes on to say what the impact on
your design might be, so.

28
00:01:41,590 --> 00:01:45,960
Basically anything that is at a higher
pixel,

29
00:01:45,960 --> 00:01:51,710
density is going to appear smaller on the
screen, or physically smaller.

30
00:01:51,710 --> 00:01:54,730
At least in general as sort of a general
rule.

31
00:01:54,730 --> 00:01:57,662
There's a more detailed explanation there.

32
00:01:57,662 --> 00:02:00,960
There is a difference between the screen
resolution and

33
00:02:00,960 --> 00:02:04,400
what the screen's actual native resolution
is.

34
00:02:04,400 --> 00:02:07,280
And then it also talks about what's 4k,

35
00:02:07,280 --> 00:02:11,590
what are monitor hertz, what's a retina
display, and so on.

36
00:02:11,590 --> 00:02:16,080
Basically, everything that you might need
to know as a designer.

37
00:02:16,080 --> 00:02:20,670
So this is a really great in-depth article
about all of

38
00:02:20,670 --> 00:02:25,150
these newer screens and kind of what they
mean for design.

39
00:02:25,150 --> 00:02:26,510
But anyway, great article.

40
00:02:26,510 --> 00:02:28,130
Be sure to check that one out.

41
00:02:28,130 --> 00:02:29,050
>> Yeah.
Also good, you know,

42
00:02:29,050 --> 00:02:31,050
if you're a designer send it to some
developers so

43
00:02:31,050 --> 00:02:33,680
you guys can establish some common ground.

44
00:02:33,680 --> 00:02:37,010
>> Mm-hm. Yeah. >> Put the we in DPI, not
make it so one sided.

45
00:02:37,010 --> 00:02:37,870
>> Yeah.
Maybe,

46
00:02:37,870 --> 00:02:40,930
maybe some day we'll form an
understanding.

47
00:02:40,930 --> 00:02:44,590
Next up we have a project called
Chartist.JS.

48
00:02:44,590 --> 00:02:49,700
As you might expect from the name this is
a JavaScript library for charts.

49
00:02:49,700 --> 00:02:53,000
But the spin on it is that they are
responsive.

50
00:02:53,000 --> 00:02:57,290
And this little guy with the top hat and
pitchfork pointing at the chart.

51
00:02:57,290 --> 00:03:01,540
And you can also see this chart even
supports CSS animations.

52
00:03:01,540 --> 00:03:02,850
Look at that.

53
00:03:02,850 --> 00:03:03,710
>> It is, it is happening.

54
00:03:03,710 --> 00:03:04,560
>> Wow.
I know.

55
00:03:04,560 --> 00:03:07,070
So very, very easy to use.

56
00:03:07,070 --> 00:03:08,200
They're also customizable.

57
00:03:08,200 --> 00:03:10,260
A few different kinds of charts are
supported.

58
00:03:10,260 --> 00:03:13,550
We've got line charts, bar charts, pie
charts.

59
00:03:13,550 --> 00:03:16,220
Oh, I'm kinda hungry now talking about pie
charts.

60
00:03:16,220 --> 00:03:17,130
>> Yeah.

61
00:03:17,130 --> 00:03:18,493
>> Any hamburger venues on this site?

62
00:03:18,493 --> 00:03:19,061
[CROSSTALK] I, I don't think so.

63
00:03:19,061 --> 00:03:22,920
>> You know how much of that pie chart is
a pie chart?

64
00:03:22,920 --> 00:03:25,190
>> How much?
>> 100% of it.

65
00:03:25,190 --> 00:03:26,270
Yeah.
The whole thing.

66
00:03:26,270 --> 00:03:26,890
>> I'm pretty hungry.

67
00:03:26,890 --> 00:03:27,820
>> The whole things a pie.

68
00:03:27,820 --> 00:03:29,710
>> Now that you said that.

69
00:03:29,710 --> 00:03:32,360
>> Oh.
>> So here is a CSS animation example.

70
00:03:32,360 --> 00:03:33,070
Look at that.
We,

71
00:03:33,070 --> 00:03:35,590
the, I don't exactly what this is, what
this is doing.

72
00:03:35,590 --> 00:03:38,120
But these, these results are absolutely
insane and

73
00:03:38,120 --> 00:03:40,930
not typical for what the chart usually
should display.

74
00:03:40,930 --> 00:03:41,830
>> Wow.
>> So you should have

75
00:03:41,830 --> 00:03:45,560
a very strong emotional reaction to what's
going on here and I,

76
00:03:45,560 --> 00:03:49,250
I mean with the chart not with the tension
between nick and myself.

77
00:03:49,250 --> 00:03:54,150
But it is responsive so lets see what
happens when I resize the browser.

78
00:03:54,150 --> 00:03:55,540
What.

79
00:03:55,540 --> 00:03:59,040
This chart is getting smaller.

80
00:03:59,040 --> 00:04:00,460
Oh, look at that different chart.

81
00:04:00,460 --> 00:04:02,530
No it didn't, it didn't change.

82
00:04:02,530 --> 00:04:05,300
It's in a different spot on the page.

83
00:04:05,300 --> 00:04:07,440
It had to move when the browser moved.

84
00:04:07,440 --> 00:04:12,010
Okay, anyway, so any CSS3 animations are
supported.

85
00:04:12,010 --> 00:04:16,340
And actually we can look at the API
documentation,

86
00:04:16,340 --> 00:04:20,170
no that's not what I wanted, I wanted to
the examples, live coating.

87
00:04:20,170 --> 00:04:23,960
You can actually edit the examples on the
site which is pretty awesome, so

88
00:04:23,960 --> 00:04:25,180
here are the different labels.

89
00:04:25,180 --> 00:04:26,100
Like, so.

90
00:04:26,100 --> 00:04:29,740
For example, instead of Monday we'll
change that to Nickday and

91
00:04:29,740 --> 00:04:31,630
you can see that, that change is right
there.

92
00:04:31,630 --> 00:04:34,930
And then we can mess around with the
numbers and

93
00:04:34,930 --> 00:04:39,210
the changes are directly reflected on the
chart right there.

94
00:04:39,210 --> 00:04:41,640
So you can see really, really simple to
use.

95
00:04:41,640 --> 00:04:44,780
You just give it some data and then call
Chartist and

96
00:04:44,780 --> 00:04:48,010
the kind of chart that you want to use.

97
00:04:48,010 --> 00:04:53,890
Here's a pie chart example, and I think we
can just say Chartist.Pie.

98
00:04:53,890 --> 00:04:56,260
Instead of a line chart, we're using a pie
chart here.

99
00:04:56,260 --> 00:04:58,080
Anyway, very, very easy to use.

100
00:04:58,080 --> 00:05:00,845
We'll have a link to this in the show
notes which you can check out at

101
00:05:00,845 --> 00:05:05,480
youtube.com/gotreehouse/ or search for us
in iTunes, we are The Treehouse Show.

102
00:05:05,480 --> 00:05:10,194
And don't forget to join us for a free
month's trial at teamtreehouse.com/show.

103
00:05:11,390 --> 00:05:12,150
Very cool stuff.

104
00:05:12,150 --> 00:05:17,170
Well next up if this wonderful blog post
from Brad Frost.

105
00:05:17,170 --> 00:05:19,680
That was really difficult to say for some
reason.

106
00:05:19,680 --> 00:05:25,060
It's called Seven Habits of Highly
Effective Media Queries of course.

107
00:05:25,060 --> 00:05:30,140
I think that's a play on the title of book
Seven Habits of Highly Effective People I

108
00:05:30,140 --> 00:05:31,600
think is the title of the book.

109
00:05:31,600 --> 00:05:32,899
>> Think you're thinking of Twilight.

110
00:05:34,700 --> 00:05:35,550
I think you're right.

111
00:05:35,550 --> 00:05:40,160
I think, I think Twilight is actually what
I was thinking of there.

112
00:05:40,160 --> 00:05:45,730
anyway, this blog post is a little older,
but it's still perfectly good.

113
00:05:45,730 --> 00:05:49,730
Let's go down and look at some of these
seven habits.

114
00:05:49,730 --> 00:05:53,780
First one I wanna point out is, let the
content determine the break points.

115
00:05:53,780 --> 00:05:57,580
And I think this is really great advice
that Brad Frost is giving here, and

116
00:05:57,580 --> 00:06:03,540
he says, every time you see 320px, 480px,
and so on, used as breakpoint values,

117
00:06:03,540 --> 00:06:07,380
a kitten got its head bitten off by an
angel, or something like that.

118
00:06:07,380 --> 00:06:10,470
Wow, that sounds really horrible, so don't
do that.

119
00:06:10,470 --> 00:06:16,980
You should use breakpoints that are
basically based on the content

120
00:06:16,980 --> 00:06:22,940
of the page because these preset break
points are just based on popular devices.

121
00:06:22,940 --> 00:06:29,220
So for example 320 is an iPhone and
portrait, 480 is an iPhone and landscape,

122
00:06:29,220 --> 00:06:36,450
768 is an iPad in portrait and so on,
because these actual dimensions could be

123
00:06:36,450 --> 00:06:41,910
irrelevant in you know, a week's time or a
year's time or something like that.

124
00:06:41,910 --> 00:06:44,250
New devices come out all the time.

125
00:06:44,250 --> 00:06:49,090
So, it's much better to tailor your
content to the breakpoints and

126
00:06:49,090 --> 00:06:50,170
not the other way around.

127
00:06:50,170 --> 00:06:55,060
Or, or I should say, it's better to tailor
your breakpoints to the content.

128
00:06:55,060 --> 00:06:56,420
Excuse me.

129
00:06:56,420 --> 00:07:01,210
It's not a good idea to use these preset
ones, just because they could change.

130
00:07:01,210 --> 00:07:07,360
They, they may not mean anything in a
year's time or something like that.

131
00:07:07,360 --> 00:07:09,680
>> Also media queries sparkle in the
daylight.

132
00:07:11,100 --> 00:07:14,220
>> That is something that I think you just
made up.

133
00:07:15,440 --> 00:07:18,290
You should treat layout as an enhancement.

134
00:07:18,290 --> 00:07:23,250
So for example if you're building a mobile
first responsive site,

135
00:07:23,250 --> 00:07:26,850
which you probably should be doing in this
day and age,

136
00:07:26,850 --> 00:07:32,160
you wanna make sure that layout is just
sort of treated as an enhancement.

137
00:07:32,160 --> 00:07:36,680
So you build your very simple mobile-first
styles for

138
00:07:36,680 --> 00:07:40,420
the web, and says that right here.

139
00:07:40,420 --> 00:07:44,920
And you can then enhance that with layout
later on.

140
00:07:44,920 --> 00:07:50,940
So when you go up to these larger desktop
styles you can start to add layouts.

141
00:07:52,120 --> 00:07:53,490
Last thing I'm gonna point out here.

142
00:07:53,490 --> 00:07:55,180
There's a couple more you should check
out.

143
00:07:55,180 --> 00:07:59,460
But last thing I'm gonna, for now is the
idea of using major and

144
00:07:59,460 --> 00:08:00,490
minor break points.

145
00:08:00,490 --> 00:08:07,700
So, for example, you might have a website
that has a single column layout on mobile.

146
00:08:07,700 --> 00:08:10,040
And then expands into maybe two or

147
00:08:10,040 --> 00:08:15,910
three columns on larger desktop devices or
perhaps tablets.

148
00:08:15,910 --> 00:08:19,410
Those types of dramatic changes do need a
breakpoint, but

149
00:08:19,410 --> 00:08:23,210
you can also have smaller breakpoints in
between if you

150
00:08:23,210 --> 00:08:27,770
just wanna change small parts of the site,
such as a, a font size.

151
00:08:27,770 --> 00:08:33,480
Or maybe the navigation might switch from
horizontal to vertical, and so on.

152
00:08:33,480 --> 00:08:38,500
And you can do smaller breakpoints in
these sort of minor breakpoints,

153
00:08:38,500 --> 00:08:45,220
as Brad Frost points out here, instead of
doing dramatic changes and

154
00:08:45,220 --> 00:08:50,540
trying to squeeze those minor changes into
the more dramatic breakpoints.

155
00:08:50,540 --> 00:08:52,400
Anyway, really good article.

156
00:08:52,400 --> 00:08:54,560
Be sure to check this one out.

157
00:08:55,610 --> 00:08:56,570
>> Very nice.

158
00:08:56,570 --> 00:08:59,010
Next up we have a project called
Victor.JS.

159
00:08:59,010 --> 00:09:06,660
This is a JavaScript two D vector maps
library for Node.js and the browser.

160
00:09:06,660 --> 00:09:10,030
I know that because it says it in the
header of this web page.

161
00:09:10,030 --> 00:09:13,670
One thing I'm just going to point out that
is of little to no relevance to what we're

162
00:09:13,670 --> 00:09:16,740
talking about, is that you can click
anywhere on this page right here and

163
00:09:16,740 --> 00:09:20,610
that little thing will follow to the
points that you just clicked on.

164
00:09:20,610 --> 00:09:23,060
>> I think that's really the most
important thing here.

165
00:09:23,060 --> 00:09:26,250
>> If you take one thing away from the
Treehouse Show,

166
00:09:26,250 --> 00:09:29,660
it is well it's not this particular thing.

167
00:09:29,660 --> 00:09:32,780
I think, I think it'll be a, a deep sense
of sadness and regret.

168
00:09:32,780 --> 00:09:33,340
Anyway.

169
00:09:33,340 --> 00:09:35,840
This is very, very easy to use.

170
00:09:35,840 --> 00:09:39,590
You simply install it using Node.js or at
the browser.

171
00:09:39,590 --> 00:09:41,420
It's very easy to use with Bower.

172
00:09:41,420 --> 00:09:45,630
And then you can create new vector.

173
00:09:45,630 --> 00:09:48,970
I'm sorry.
New x and y coordinates with Victor.

174
00:09:48,970 --> 00:09:53,140
So why would you use this library instead
of just creating your own

175
00:09:53,140 --> 00:09:54,710
JavaScript object for it?

176
00:09:54,710 --> 00:09:58,640
Well, you get all sorts of maths that go
along with it.

177
00:09:58,640 --> 00:10:03,260
So you create your point and then you can
go through and add to the point.

178
00:10:03,260 --> 00:10:05,680
You can have all this math done for you.

179
00:10:05,680 --> 00:10:10,850
You can for example, right here, create a
new vector and then add to

180
00:10:10,850 --> 00:10:16,540
the x coordinate another vector
coordinate, and then call to string.

181
00:10:16,540 --> 00:10:19,610
You'll get these particular values.

182
00:10:19,610 --> 00:10:22,770
Now you don't need to call to string, you
can have all that math done for

183
00:10:22,770 --> 00:10:23,870
you right there.

184
00:10:23,870 --> 00:10:27,340
Now this also works, not just with
addition, but

185
00:10:27,340 --> 00:10:33,640
you can do rotation you can do all sorts
of different math calculations.

186
00:10:33,640 --> 00:10:34,990
And this is very easy to use.

187
00:10:34,990 --> 00:10:37,160
The documentation is also very thorough.

188
00:10:37,160 --> 00:10:38,490
So, make sure to check that out.

189
00:10:38,490 --> 00:10:40,460
We will have a link in the show notes.

190
00:10:42,080 --> 00:10:44,680
>> Very nice.
I like the fact that it's called Victor,

191
00:10:44,680 --> 00:10:51,090
because there's probably other JavaScript
objects that might be a, a vector and

192
00:10:51,090 --> 00:10:55,920
could conflict with the names, so it's
pretty clever and it's, it's nice that

193
00:10:55,920 --> 00:10:59,850
they called it Victor just so you can sort
of remember that it is actually a vector.

194
00:10:59,850 --> 00:11:02,260
>> You could say it's the winning name for
the library.

195
00:11:02,260 --> 00:11:03,560
>> It just, it was the Victor.

196
00:11:04,840 --> 00:11:10,490
Next up is an article called Pure CSS
parallax scrolling websites.

197
00:11:10,490 --> 00:11:14,890
Of course, parallax scrolling websites
have been popular for quite some time now.

198
00:11:14,890 --> 00:11:20,290
That's basically where a website might
have multiple layers of depth,

199
00:11:20,290 --> 00:11:22,750
or at least the appearance of such and.

200
00:11:22,750 --> 00:11:23,810
>> Like an onion.

201
00:11:23,810 --> 00:11:24,640
>> Right.

202
00:11:24,640 --> 00:11:26,430
Or like our relationship.

203
00:11:26,430 --> 00:11:29,370
And when you scroll down the page there's
sort of

204
00:11:29,370 --> 00:11:34,390
multiple components that parallax with one
another or move at different speeds.

205
00:11:34,390 --> 00:11:37,730
This is sort of like when you're riding in
a car or

206
00:11:37,730 --> 00:11:42,100
a train and you look at something that's
close to you and it moves by very quickly.

207
00:11:42,100 --> 00:11:46,110
While something that's far away moves by
much more slowly, or

208
00:11:46,110 --> 00:11:50,050
at least it has the perception of doing
that because of perspective.

209
00:11:50,050 --> 00:11:51,730
>> Like our time together.

210
00:11:51,730 --> 00:11:55,835
>> Indeed.
[SOUND] The parallax is typically handled

211
00:11:55,835 --> 00:12:01,282
with JavaScript and that's actually not
very perfomant.

212
00:12:01,282 --> 00:12:04,436
It's listening to the scroll event and

213
00:12:04,436 --> 00:12:07,940
it does a couple of things once a scroll
happens.

214
00:12:07,940 --> 00:12:11,950
And it triggers lots of reflows and
repaints, and

215
00:12:11,950 --> 00:12:15,206
that's just not good for performance.

216
00:12:15,206 --> 00:12:21,200
So typically ends up with lower frame
rates than what might be desirable.

217
00:12:21,200 --> 00:12:23,830
>> So are you saying that they can be done
in pure CSS?

218
00:12:23,830 --> 00:12:29,050
>> That is exactly what this article
describes how to do.

219
00:12:29,050 --> 00:12:31,800
Now, there's a bunch of theory here but
that's boring.

220
00:12:31,800 --> 00:12:35,330
Let's go ahead and jump into a demo.

221
00:12:35,330 --> 00:12:40,500
I'm going to do this in Safari because,
actually I'll switch back to the article,

222
00:12:40,500 --> 00:12:44,620
here, it points out that this technique is
broken in Chrome 37.

223
00:12:44,620 --> 00:12:49,000
And at the time of this recording I am
indeed using Chrome 37 here.

224
00:12:49,000 --> 00:12:51,680
So I have to switch to a different
browser.

225
00:12:51,680 --> 00:12:53,320
But here's what the demo looks like.

226
00:12:53,320 --> 00:13:00,870
You can scroll down the page and it's
parallaxing all of this with pure CSS.

227
00:13:00,870 --> 00:13:01,880
Now-
>> Wow.

228
00:13:01,880 --> 00:13:04,060
>> How the heck are they doing that?

229
00:13:04,060 --> 00:13:10,890
Because it's not using any kind of
JavaScript event to listen to the scroll.

230
00:13:10,890 --> 00:13:15,020
So, how are they able to get these layers
of scroll?

231
00:13:15,020 --> 00:13:18,080
>> Magic.
>> Well, if you click on this debug mode.

232
00:13:19,240 --> 00:13:19,750
>> What?

233
00:13:19,750 --> 00:13:23,340
>> It will show you exactly what's
actually going on here.

234
00:13:23,340 --> 00:13:23,840
>> Wow.

235
00:13:23,840 --> 00:13:29,020
>> Basically they are placing these
elements on to different planes, and

236
00:13:29,020 --> 00:13:34,610
then translating them using the transform
property.

237
00:13:34,610 --> 00:13:42,050
So it's moving these different layers into
the z-plane, or the depth of the page.

238
00:13:42,050 --> 00:13:46,310
And then when you actually look at it
straight on,

239
00:13:46,310 --> 00:13:49,590
looking at it from straight on here.

240
00:13:49,590 --> 00:13:54,660
It looks like some layers are moving
slower and

241
00:13:54,660 --> 00:13:58,570
some layers are moving faster and you get
that nice parallax effect.

242
00:13:58,570 --> 00:14:01,640
Anyway, this article goes into a lot more
depth

243
00:14:01,640 --> 00:14:05,450
as to how this particular effect is
achieved.

244
00:14:05,450 --> 00:14:07,540
Highly recommend you check it out.

245
00:14:07,540 --> 00:14:09,940
And I think that's all we have time for.

246
00:14:09,940 --> 00:14:11,180
>> Well that is, who are you on Twitter?

247
00:14:11,180 --> 00:14:12,320
>> I am @nickrp.

248
00:14:12,320 --> 00:14:13,450
>> And I am @jseifer.

249
00:14:13,450 --> 00:14:16,075
For more information on anything that we
talked about, check out our show notes at

250
00:14:16,075 --> 00:14:20,940
www.youtube.com/gotreehouse/ or search for
us on iTunes, we are The Treehouse Show.

251
00:14:20,940 --> 00:14:23,690
>> And of course, if you'd like to see
more videos like this one about web

252
00:14:23,690 --> 00:14:28,590
design, web development, mobile, business,
and so much more, be sure to check us

253
00:14:28,590 --> 00:14:34,270
out at teamtreehouse.com/show and get a
month free.

254
00:14:34,270 --> 00:14:37,443
Thank you so much for watching, and we
will see you next week.

255
00:14:37,443 --> 00:14:47,443
[MUSIC]