1
00:00:00,670 --> 00:00:01,380
I'm Nick Pettit.

2
00:00:01,380 --> 00:00:02,410
>> I'm Jason Seifer.

3
00:00:02,410 --> 00:00:03,930
>> And you're watching the Treehouse Show.

4
00:00:03,930 --> 00:00:05,730
Your weekly dose of Internets where we
talk

5
00:00:05,730 --> 00:00:08,410
about all things web design, web
development, and more.

6
00:00:08,410 --> 00:00:09,610
>> In this episode we'll be talking

7
00:00:09,610 --> 00:00:14,250
about Voodoo, responsive tables,
JavaScript graphs, and more.

8
00:00:14,250 --> 00:00:15,220
>> Let's check it out.

9
00:00:15,220 --> 00:00:20,600
[BLANK_AUDIO]

10
00:00:20,600 --> 00:00:23,600
First up is Voodoo JS.

11
00:00:23,600 --> 00:00:28,230
Now, this is a JavaScript library that
allows you to

12
00:00:28,230 --> 00:00:33,040
mix 3D and 2D elements on a single web
page.

13
00:00:33,040 --> 00:00:34,760
It's pretty impressive.

14
00:00:34,760 --> 00:00:36,830
So, let's take a look.

15
00:00:36,830 --> 00:00:39,730
So it says Voodoo is a new java script
framework that lets

16
00:00:39,730 --> 00:00:43,470
you easily mix 2D and 3D content together
on the same page.

17
00:00:43,470 --> 00:00:44,530
Well what does that mean?

18
00:00:44,530 --> 00:00:50,210
Well lets scroll down the page and look at
this graph over here and

19
00:00:50,210 --> 00:00:55,310
as I scroll you can see that it actually
parallaxes in 3D.

20
00:00:55,310 --> 00:00:59,680
There's more pronounced examples here,
like this palm tree.

21
00:00:59,680 --> 00:00:59,940
>> What?

22
00:00:59,940 --> 00:01:02,823
>> So as I scroll up and down, you can see

23
00:01:02,823 --> 00:01:07,770
it's actually in 3D and it's mixing with
this text here.

24
00:01:07,770 --> 00:01:11,380
That's just a normal HTML paragraph.

25
00:01:11,380 --> 00:01:12,970
So that's pretty impressive.

26
00:01:12,970 --> 00:01:17,610
Now even more impressive is this ring down
here at the bottom.

27
00:01:17,610 --> 00:01:19,690
You'll see that it's actually in front of

28
00:01:19,690 --> 00:01:23,850
the text but it's also simultaneously
behind the text.

29
00:01:23,850 --> 00:01:26,980
And actually I can highlight this.

30
00:01:26,980 --> 00:01:30,100
You can see that it is real text on the
page.

31
00:01:30,100 --> 00:01:34,350
In fact I can even bring up the Chrome
developer tools here.

32
00:01:34,350 --> 00:01:43,212
And highlight this little bit here and you
can see it's just a normal EM element.

33
00:01:43,212 --> 00:01:43,597
>> What?

34
00:01:43,597 --> 00:01:46,100
>> So, it is actually there on the page.

35
00:01:46,100 --> 00:01:49,410
It's not like rendering this text
magically or something.

36
00:01:50,634 --> 00:01:53,770
so, how, is this happening?

37
00:01:53,770 --> 00:01:58,550
Well, it's using web GL to do it's 3D
rendering.

38
00:01:58,550 --> 00:02:03,290
Which is currently supported in Chrome and
Firefox.

39
00:02:03,290 --> 00:02:06,880
And if you enable it in Safari its ordered
there.

40
00:02:06,880 --> 00:02:09,600
And I believe its ordered in Internet
Explorer 11.

41
00:02:09,600 --> 00:02:13,857
So support is definitely on the rise and
the way that

42
00:02:13,857 --> 00:02:19,370
they're doing this is by rending two
different Web GL canvases.

43
00:02:19,370 --> 00:02:24,960
There is one that is above and one that is
below and then they're fusing them

44
00:02:24,960 --> 00:02:28,270
together with seam here and with a little

45
00:02:28,270 --> 00:02:32,690
bit of anti-alysing it basic, basically
removes all the.

46
00:02:32,690 --> 00:02:36,180
Jagged pixels there and kind of fuses it
together.

47
00:02:36,180 --> 00:02:38,180
So it's pretty smart.

48
00:02:38,180 --> 00:02:39,420
Now, how does this work?

49
00:02:39,420 --> 00:02:42,550
Well, if we go over to the documentation,
the two

50
00:02:42,550 --> 00:02:47,870
really big important things here are the
model and the view.

51
00:02:47,870 --> 00:02:52,880
Now, the model is a base class you can
extend.

52
00:02:52,880 --> 00:02:58,120
And it contains objects managed by the
Voodoo rendering engine.

53
00:02:58,120 --> 00:03:02,680
So, it's a, a model is a single 3D object.

54
00:03:02,680 --> 00:03:09,350
Now, if we click on View, you'll see that
the View is also extendable.

55
00:03:09,350 --> 00:03:13,650
And every model should have a View.

56
00:03:14,690 --> 00:03:22,370
Basically contains information about, the
state of an object.

57
00:03:22,370 --> 00:03:26,740
So, if we switch over to my text editor
here I

58
00:03:26,740 --> 00:03:30,840
actually want you to see what this code
looks like in action.

59
00:03:30,840 --> 00:03:36,420
This is a sample that you can download
with Voodoo, so there's a view here, and.

60
00:03:36,420 --> 00:03:39,780
We're extending and, one thing I forgot to
mention, is

61
00:03:39,780 --> 00:03:45,650
that Voodoo does rely on 3JS, which is
another WebGL library.

62
00:03:45,650 --> 00:03:52,400
So, basically we can create a Taurus here,
which is bas, basically a donut shape.

63
00:03:52,400 --> 00:03:55,930
We can apply a material, or a texture,

64
00:03:55,930 --> 00:03:58,660
to describe what the surface of that looks
like.

65
00:03:58,660 --> 00:04:03,400
And then, we can actually add that to the
scene.

66
00:04:03,400 --> 00:04:04,550
There we go.

67
00:04:04,550 --> 00:04:07,410
And we can position it and all that good
stuff.

68
00:04:07,410 --> 00:04:13,440
Then we also have a function here to move
the Taurus in 3D space.

69
00:04:13,440 --> 00:04:17,740
Then down here in the model, which is used
to again describe

70
00:04:17,740 --> 00:04:22,505
the state of three objects we have an
update function right here.

71
00:04:22,505 --> 00:04:25,361
You know, if you are familiar with game
engines or

72
00:04:25,361 --> 00:04:29,448
if you are familiar 3D graphics your
update function basically runs.

73
00:04:29,448 --> 00:04:33,144
Every frame, and by passing in delta time
here, you

74
00:04:33,144 --> 00:04:37,380
can tell it, how long it's been since the
last frame.

75
00:04:37,380 --> 00:04:42,100
So it will know, how far to move that
donut back and forth.

76
00:04:42,100 --> 00:04:48,370
And if we go down here, the last thing we
do after declaring or excuse

77
00:04:48,370 --> 00:04:54,970
me extending the view, and model, we just
call the sample model, and in the browser.

78
00:04:54,970 --> 00:04:56,920
You'll get something that looks like this.

79
00:04:56,920 --> 00:05:01,290
So there is that taurus, it has a red
color

80
00:05:01,290 --> 00:05:06,290
and we've positioned it so that it's
around some text here.

81
00:05:06,290 --> 00:05:09,330
Anyway, Voodoo is pretty amazing.

82
00:05:09,330 --> 00:05:10,990
I, I think this is a really, really

83
00:05:10,990 --> 00:05:15,190
cool project and you should definitely
check this out.

84
00:05:15,190 --> 00:05:18,950
Web GL is being supported in more and more
browsers.

85
00:05:18,950 --> 00:05:19,630
Than ever.

86
00:05:19,630 --> 00:05:23,350
And it's definitely time to start using it
in websites.

87
00:05:23,350 --> 00:05:25,435
>> They have super, super impressive
demos.

88
00:05:25,435 --> 00:05:26,450
>> Mm-hm.

89
00:05:26,450 --> 00:05:30,760
>> Next up we have a project called
Responsive Tables.

90
00:05:30,760 --> 00:05:35,170
This is a very, very descriptive name for
what it is, which as you might guess is.

91
00:05:35,170 --> 00:05:37,310
Responsive tables for your webpage.

92
00:05:37,310 --> 00:05:38,110
Let's go ahead and check it out.

93
00:05:38,110 --> 00:05:40,560
So you can see down here so whatever.

94
00:05:40,560 --> 00:05:42,880
You just install it, have the CSS and the
JavaScript.

95
00:05:42,880 --> 00:05:49,270
Put in a couple classes and your markup,
just add class is table responsive.

96
00:05:49,270 --> 00:05:51,090
And you are good to go.

97
00:05:51,090 --> 00:05:52,950
Now here is a demo.

98
00:05:52,950 --> 00:05:57,310
Look at, look at all this information
inside of the table.

99
00:05:57,310 --> 00:06:01,160
Now if we go ahead and resize the browser
to make it responsive.

100
00:06:01,160 --> 00:06:04,260
Wow, look at that, all of our stuff is
gone.

101
00:06:04,260 --> 00:06:05,810
We only have a couple different columns.

102
00:06:05,810 --> 00:06:07,570
Well, what if we wanted more columns?

103
00:06:07,570 --> 00:06:13,270
Well, just click that display button and
the different columns collapse but you can

104
00:06:13,270 --> 00:06:18,990
add them back in automatically and then go
ahead and scroll up and down table.

105
00:06:18,990 --> 00:06:21,260
Also, supports this little focus button
right here.

106
00:06:21,260 --> 00:06:25,150
So, if you wanna click on a row, you get
just that information.

107
00:06:26,210 --> 00:06:31,390
Now this is super simple to use, the way
that you set up your table is you give

108
00:06:31,390 --> 00:06:36,700
each of your table heading elements a
priority.

109
00:06:36,700 --> 00:06:42,316
Now the priorities correspond to different
break points so, priority of one is going

110
00:06:42,316 --> 00:06:47,050
to be always visible but you can hide it
inside of that drop down.

111
00:06:47,050 --> 00:06:50,950
And so on and so forth for all of the
different priorities.

112
00:06:50,950 --> 00:06:53,610
This is a super simple plug in to use.

113
00:06:53,610 --> 00:06:54,790
We'll have a like to that in the show

114
00:06:54,790 --> 00:06:57,950
notes which you can get to at
YouTube.com/GoTreeHouse or.

115
00:06:57,950 --> 00:07:00,650
Or search for us on iTunes, we are The
Tree House Show.

116
00:07:02,350 --> 00:07:02,950
>> Very cool stuff.

117
00:07:02,950 --> 00:07:06,370
Well, next up is Isomer which is

118
00:07:06,370 --> 00:07:11,700
an isometric graphics library for HTML5
canvas.

119
00:07:11,700 --> 00:07:16,730
Now, if you play a lot of video games, you
might be familiar with isometric graphics.

120
00:07:16,730 --> 00:07:22,190
It's basically a view that renders without
any kind of perspective.

121
00:07:22,190 --> 00:07:29,880
So it's rendering this at a 3 quarters
view or a side view here basically and you

122
00:07:29,880 --> 00:07:36,320
can see both sides of the 3D object, and
it doesn't have any kind of perspective.

123
00:07:36,320 --> 00:07:39,170
Now how is it rendering this?

124
00:07:39,170 --> 00:07:41,040
Because this isn't just a, a picture.

125
00:07:41,040 --> 00:07:43,770
It's actually rendering this onto a
canvas.

126
00:07:43,770 --> 00:07:49,010
Well, with Isomer, you can create a shape
and a point

127
00:07:49,010 --> 00:07:53,310
and then you add it to the scene or the
drawing.

128
00:07:53,310 --> 00:07:56,740
So, in this case, the shape is a prism.

129
00:07:56,740 --> 00:08:02,030
And it's using the point to position it in
3D space.

130
00:08:02,030 --> 00:08:07,570
Now if we scroll down here we can see a
slightly more robust example.

131
00:08:07,570 --> 00:08:13,345
In this case we are using the
Point,ORIGIN, which, should

132
00:08:13,345 --> 00:08:20,270
default to just the, the origin of the 3D
grid, that you can see here.

133
00:08:20,270 --> 00:08:24,360
And then, with these three values here
we're defining

134
00:08:24,360 --> 00:08:30,050
the width, length, and height of this 3D
object.

135
00:08:30,050 --> 00:08:36,840
Now you can, obviously, use this to build
out much more complex examples.

136
00:08:36,840 --> 00:08:40,480
So, if we click on the playground here, it
will take us over to

137
00:08:40,480 --> 00:08:46,490
Codepen, and you can see exactly how that
example up in the header was built.

138
00:08:46,490 --> 00:08:53,730
We are adding a bunch of different isomer
objects to our canvas here.

139
00:08:53,730 --> 00:08:59,010
And if I change these, so for example
let's just comment one of these out.

140
00:08:59,010 --> 00:09:04,040
You can see that the view will update
here, and will actually remove that box

141
00:09:05,270 --> 00:09:09,100
that's right here so you can get an idea
of how this scene is being built.

142
00:09:09,100 --> 00:09:12,490
And I could adjust the width, length, and
height here.

143
00:09:13,620 --> 00:09:16,940
And that should probably make it look a
little bit strange

144
00:09:16,940 --> 00:09:20,100
because it is being rendered
isymmetrically, but you get the idea.

145
00:09:20,100 --> 00:09:23,900
You can very quickly adjust the size or
position

146
00:09:23,900 --> 00:09:28,930
of these objects, and create these nifty
little graphics.

147
00:09:28,930 --> 00:09:30,600
So very cool stuff.

148
00:09:30,600 --> 00:09:37,930
It is a a paid project, actually let me go
back here, there we go.

149
00:09:39,030 --> 00:09:42,530
But it's very inexpensive, just $10, and
you

150
00:09:42,530 --> 00:09:46,460
get two files which allow you to build.

151
00:09:46,460 --> 00:09:49,020
These pretty amazing, 3D graphics.

152
00:09:49,020 --> 00:09:50,600
So, very cool stuff.

153
00:09:50,600 --> 00:09:53,740
However, it is also available for free
under the MIT license.

154
00:09:53,740 --> 00:09:54,560
I should mention that.

155
00:09:54,560 --> 00:09:56,250
So it is actually free.

156
00:09:56,250 --> 00:09:59,330
But you can pay for it if you like it a
lot.

157
00:09:59,330 --> 00:10:00,110
>> Very very cool.

158
00:10:00,110 --> 00:10:00,670
>> Mm-hm.

159
00:10:00,670 --> 00:10:03,780
>> Next up, we have a project called
digraphs.

160
00:10:03,780 --> 00:10:08,660
This is a JavaScript charting and
diagramming library.

161
00:10:08,660 --> 00:10:10,880
Let's go ahead and check it out right
here.

162
00:10:10,880 --> 00:10:12,790
It's super simple to use.

163
00:10:12,790 --> 00:10:15,030
You can see this, this chart on the right.

164
00:10:15,030 --> 00:10:20,540
Is generated just from this little snippet
of JavaScript right here.

165
00:10:20,540 --> 00:10:23,250
It's given a target, which is a div.

166
00:10:23,250 --> 00:10:26,420
A data source, which is a text file
located on the server.

167
00:10:26,420 --> 00:10:27,820
And then just some different options.

168
00:10:27,820 --> 00:10:33,940
If you want a legend, title, and, labels,
and all that good stuff.

169
00:10:33,940 --> 00:10:40,120
So if we look on the right right here, as
I am moving my mouse across the chart.

170
00:10:40,120 --> 00:10:42,220
The different data points are moving.

171
00:10:42,220 --> 00:10:47,070
And then it is updating on the top right
with the corresponding values.

172
00:10:47,070 --> 00:10:51,165
Now you can actually click and drag this
graph to zoom in.

173
00:10:51,165 --> 00:10:54,466
Double-clicking will zoom out.

174
00:10:54,466 --> 00:11:01,550
Shift and dragging will pan the charts and
you can even adjust the averaging period.

175
00:11:01,550 --> 00:11:05,980
Now there are, bunch of options, as you
can see, as we go through.

176
00:11:05,980 --> 00:11:07,690
Just tons of different things you can do

177
00:11:07,690 --> 00:11:12,110
with these graphs, there is a lot of
demos.

178
00:11:12,110 --> 00:11:16,620
Right here as well, of, just generating
all of these different graphs.

179
00:11:16,620 --> 00:11:19,700
Anyway, this is a completely free project.

180
00:11:19,700 --> 00:11:24,310
Go ahead and download it if you need
charting or graphing on your site.

181
00:11:24,310 --> 00:11:25,970
Very, very great, great project.

182
00:11:27,180 --> 00:11:33,060
>> Next up is a, blog post, from Brad
Frost, called Label Bask.

183
00:11:33,060 --> 00:11:38,370
And label masks you can see it
demonstrated right here.

184
00:11:38,370 --> 00:11:43,590
Basically allow the user to type in some
input into a form and

185
00:11:43,590 --> 00:11:49,700
then get a preview of how that data is
going to be interpreted.

186
00:11:49,700 --> 00:11:54,610
Now, if we scroll down here, you can see
that Brad was basically

187
00:11:54,610 --> 00:12:00,150
inspired by this release from the Filament
Group called Politespace.

188
00:12:00,150 --> 00:12:04,050
But he thought that had a couple of
issues.

189
00:12:04,050 --> 00:12:08,750
It's, it's pretty amazing on it's own, but
he decided to.

190
00:12:08,750 --> 00:12:13,530
Enhance it and scroll down to the demo
here.

191
00:12:13,530 --> 00:12:17,030
You can see what this result looks like.

192
00:12:17,030 --> 00:12:21,110
Now, if I just type in a bunch of garbage
here, it will basically

193
00:12:21,110 --> 00:12:23,180
show me, well, that's what you know,

194
00:12:23,180 --> 00:12:25,340
my credit card information is gonna look
like.

195
00:12:25,340 --> 00:12:31,280
Obviously, we don't want something like
that so that way i can type in a number

196
00:12:31,280 --> 00:12:37,474
here instead, that is my real credit card
number please feel free to use it.

197
00:12:37,474 --> 00:12:40,656
Basically this is nice if you've ever
typed

198
00:12:40,656 --> 00:12:44,500
a credit card number you know it's
difficult.

199
00:12:44,500 --> 00:12:51,230
To kind of make sure you're typing in the
four digit groups just right.

200
00:12:51,230 --> 00:12:54,040
But this way, with the Labelmask, you can
look up here and

201
00:12:54,040 --> 00:12:58,680
say, okay, this is what it actually looks
like on my credit card.

202
00:12:58,680 --> 00:13:01,240
And that makes it a lot easier to make
sure you're typing

203
00:13:01,240 --> 00:13:04,890
in the correct number, rather than just
looking at the input box.

204
00:13:04,890 --> 00:13:07,870
Which can be kind of difficult to find.

205
00:13:07,870 --> 00:13:13,030
Those stops for each 4 digits, same thing
with phone numbers.

206
00:13:13,030 --> 00:13:15,170
If you're typing in a phone number and
there's

207
00:13:15,170 --> 00:13:18,400
no spacing between it; when you're
actually typing it in.

208
00:13:18,400 --> 00:13:22,880
It can be a little bit tough to figure out
if you're typing in the correct number.

209
00:13:22,880 --> 00:13:27,990
But same deal there, anyway you can check
out the project.

210
00:13:27,990 --> 00:13:31,680
On GitHub and use it on your sites.

211
00:13:31,680 --> 00:13:32,630
Very cool stuff.

212
00:13:32,630 --> 00:13:33,160
>> Yeah, very nice.

213
00:13:33,160 --> 00:13:34,050
I really like that pattern.

214
00:13:34,050 --> 00:13:35,565
Really, really good UI.

215
00:13:35,565 --> 00:13:35,970
>> Mm-hm.

216
00:13:35,970 --> 00:13:39,770
>> Next up, over at the Tellarite
developer network, we have

217
00:13:39,770 --> 00:13:43,580
a blog post on seven quirks I wish I knew
about JavaScript.

218
00:13:43,580 --> 00:13:47,877
Now, this is some common quirks when you
actually start working with the language.

219
00:13:47,877 --> 00:13:51,195
That you learn very quickly or slowly
depending on

220
00:13:51,195 --> 00:13:54,119
how long it takes you to debug what is
wrong.

221
00:13:54,119 --> 00:14:00,053
So the first thing they go into is
equality, the JavaScript language has

222
00:14:00,053 --> 00:14:05,915
the double equals comparison operator but
you are actually, most of the time.

223
00:14:05,915 --> 00:14:08,669
Looking to use the triple equals

224
00:14:08,669 --> 00:14:13,800
equality operator, because they do
different things.

225
00:14:13,800 --> 00:14:16,210
>> Also known as the threequals.

226
00:14:16,210 --> 00:14:18,275
>> Threequals, never, never heard that,
that's very clever.

227
00:14:18,275 --> 00:14:19,560
>> Mm-hm.

228
00:14:19,560 --> 00:14:23,450
>> The double equals, the example that
they give here is

229
00:14:23,450 --> 00:14:27,550
a, in, an integer of the number one, is
going to be.

230
00:14:27,550 --> 00:14:30,110
Equal to the string 1.

231
00:14:30,110 --> 00:14:32,750
So there are two equalities.

232
00:14:32,750 --> 00:14:36,750
There is equality and strict equality,
which also checks the type.

233
00:14:38,020 --> 00:14:40,340
They go into different things.

234
00:14:40,340 --> 00:14:43,110
Dot notation versus bracket notation.

235
00:14:43,110 --> 00:14:44,550
Context of different functions.

236
00:14:44,550 --> 00:14:47,290
We don't have time to go into the entire
blog post here.

237
00:14:47,290 --> 00:14:48,590
But I do recommend you check it out.

238
00:14:48,590 --> 00:14:50,020
We'll have a link to it in the show notes.

239
00:14:51,610 --> 00:14:52,140
>> Very nice stuff.

240
00:14:52,140 --> 00:14:55,110
Well next up is Flexplorer.

241
00:14:55,110 --> 00:14:58,980
Now if you've been watching the developing
of Flex Box,

242
00:14:58,980 --> 00:15:03,550
you might know that Flex Box is pretty
close to primetime.

243
00:15:03,550 --> 00:15:08,260
I am on the caniuse.com website, which
charts

244
00:15:08,260 --> 00:15:14,320
the Compatibility of various pieces of
browser technology.

245
00:15:14,320 --> 00:15:20,590
And this a page for the flexible box
layout module from the W3 saved.

246
00:15:20,590 --> 00:15:26,370
And it is now a candidate recommendation
and if you look at the current browsers,

247
00:15:26,370 --> 00:15:33,170
Internet Explorer 11, Firefox 28, Chrome
34, and Safari 7 now all support it.

248
00:15:33,170 --> 00:15:36,480
With Safari 7, you do need to still use

249
00:15:36,480 --> 00:15:41,230
the WebKit prefix, same with iOS 7, but
that's okay.

250
00:15:41,230 --> 00:15:44,640
It's also supported on Opera and the

251
00:15:44,640 --> 00:15:48,000
latest version of the Android and
Blackberry browsers.

252
00:15:48,000 --> 00:15:51,920
That's really good because Flexbox is a
new way to lay

253
00:15:51,920 --> 00:15:56,460
out web pages without using floats or
position, or any kind

254
00:15:56,460 --> 00:15:59,240
of the traditional elements that you would
expect when laying out

255
00:15:59,240 --> 00:16:03,750
a web page using multi columns or rows,
and so on.

256
00:16:03,750 --> 00:16:07,370
And it's really great that mobile browsers
support it

257
00:16:07,370 --> 00:16:11,730
now as well because it's wonderful for
responsive web design.

258
00:16:11,730 --> 00:16:17,640
Now, lets go back to flexplorer here and
take a look at how this works.

259
00:16:17,640 --> 00:16:21,580
Flex box is a little bit complicated to
understand at

260
00:16:21,580 --> 00:16:25,210
first but once you do wrap your head
around it.

261
00:16:25,210 --> 00:16:29,410
You'll start to understand that it's
incredibly intelligent and a very

262
00:16:29,410 --> 00:16:34,640
elegant solution to this complex problem
of laying out web pages.

263
00:16:34,640 --> 00:16:37,630
Especially in a responsive contexts.

264
00:16:39,490 --> 00:16:41,390
And in fact I think this is how web

265
00:16:41,390 --> 00:16:45,930
pages will be built in the future almost
definitely.

266
00:16:45,930 --> 00:16:53,380
Flexplorer allows you to kind of explore
how different flex box properties.

267
00:16:53,380 --> 00:16:56,610
Work and interact with different elements.

268
00:16:56,610 --> 00:17:02,540
So, if I resize the browser here, you can
see that this page is indeed

269
00:17:02,540 --> 00:17:08,530
responsive and all of these different
elements kind of flow very nicely.

270
00:17:08,530 --> 00:17:11,170
And if I adjust some of these properties

271
00:17:11,170 --> 00:17:14,760
I can change the number of items for
example.

272
00:17:14,760 --> 00:17:20,550
That's not terribly interesting but I
could change the direction

273
00:17:20,550 --> 00:17:25,250
of these different elements, so I could go
from row, which

274
00:17:25,250 --> 00:17:30,390
is laying out all these, elements or flex
items in

275
00:17:30,390 --> 00:17:35,190
order here and it will change what's
called the flex container.

276
00:17:36,460 --> 00:17:37,940
And I can change that to column.

277
00:17:37,940 --> 00:17:41,240
So now all of these elements are laid out
in a column.

278
00:17:41,240 --> 00:17:48,260
And that's all done by changing a single
CSS value on the flex direction property.

279
00:17:48,260 --> 00:17:50,760
Now if you've ever laid out a multi column
layout

280
00:17:50,760 --> 00:17:53,810
even using a CSS multi framework, you know
that this can

281
00:17:53,810 --> 00:17:56,890
actually be a pretty complicated thing to
do and there's a

282
00:17:56,890 --> 00:18:00,040
lot that has to happen to go from rows to
columns.

283
00:18:00,040 --> 00:18:05,030
So it's amazing you can do that with just
one CSS value.

284
00:18:05,030 --> 00:18:08,700
Actually, I should have resized the
browser there, there's

285
00:18:08,700 --> 00:18:11,880
that's what that actually looks like and
when I.

286
00:18:11,880 --> 00:18:12,270
Go down.

287
00:18:12,270 --> 00:18:17,320
You can see it is flexible like you would
expect.

288
00:18:17,320 --> 00:18:23,430
You can also adjust other con, other
properties here like the justify

289
00:18:23,430 --> 00:18:30,830
content, or the flex wrap, which are a
couple different.

290
00:18:30,830 --> 00:18:34,970
Properties that we don't really have time
to go into here on the show.

291
00:18:34,970 --> 00:18:38,050
But, anyway after you learn a bit about

292
00:18:38,050 --> 00:18:41,100
Flexbox you should definitely check out
Flexplorer to

293
00:18:41,100 --> 00:18:44,500
get a better understanding of what each of

294
00:18:44,500 --> 00:18:46,550
those properties and values are going to
do.

295
00:18:46,550 --> 00:18:49,905
Because Flexbox, while it is very robust,
and powerful, it can

296
00:18:49,905 --> 00:18:53,890
be a little bit complicated to understand
when you're first learning.

297
00:18:53,890 --> 00:18:57,180
But definitely worth learning because it
is almost

298
00:18:57,180 --> 00:18:59,880
time to start using that on
production-ready sites.

299
00:18:59,880 --> 00:19:01,660
>> The future is now.

300
00:19:01,660 --> 00:19:02,030
>> It is.

301
00:19:02,030 --> 00:19:03,150
Tomorrow is today.

302
00:19:03,150 --> 00:19:05,070
>> But that is all we have time for today.

303
00:19:05,070 --> 00:19:06,028
Nick who are you on Twitter?

304
00:19:06,028 --> 00:19:07,450
I am @nickrp.

305
00:19:07,450 --> 00:19:11,070
>> And I am @jseifer, for more information
on anything we talked about, check out the

306
00:19:11,070 --> 00:19:14,360
show note at youtube.com/gotreehouse or
search for us

307
00:19:14,360 --> 00:19:17,000
on iTunes, we are the tree house show.

308
00:19:17,000 --> 00:19:20,770
And for a 30 day free trial of treehouse,
click

309
00:19:20,770 --> 00:19:23,160
the link in the show notes here on you
tube.

310
00:19:23,160 --> 00:19:25,752
>> And of course, if you'd like to see,
more

311
00:19:25,752 --> 00:19:30,432
videos like this one about web design, web
development, mobile business,

312
00:19:30,432 --> 00:19:32,808
and so much more, be sure to check us out

313
00:19:32,808 --> 00:19:37,170
at teamtreehouse.com, and use that link to
get a free month.

314
00:19:37,170 --> 00:19:40,370
Thank you so much for watching, and we
will see you next week.

315
00:19:40,370 --> 00:19:47,109
[MUSIC]