You've already started watching Episode 90: Voodoo, Responsive Tables, JavaScript Graphs
In this episode of The Treehouse Show, Nick Pettit (@nickrp) and Jason Seifer (@jseifer) talk about the latest in web design, web development, html5, front end development, and more.
-
0:00
I'm Nick Pettit.
-
0:01
>> I'm Jason Seifer.
-
0:02
>> And you're watching the Treehouse Show.
-
0:03
Your weekly dose of Internets where we talk
-
0:05
about all things web design, web development, and more.
-
0:08
>> In this episode we'll be talking
-
0:09
about Voodoo, responsive tables, JavaScript graphs, and more.
-
0:14
>> Let's check it out.
-
0:15
[BLANK_AUDIO]
-
0:20
First up is Voodoo JS.
-
0:23
Now, this is a JavaScript library that allows you to
-
0:28
mix 3D and 2D elements on a single web page.
-
0:33
It's pretty impressive.
-
0:34
So, let's take a look.
-
0:36
So it says Voodoo is a new java script framework that lets
-
0:39
you easily mix 2D and 3D content together on the same page.
-
0:43
Well what does that mean?
-
0:44
Well lets scroll down the page and look at this graph over here and
-
0:50
as I scroll you can see that it actually parallaxes in 3D.
-
0:55
There's more pronounced examples here, like this palm tree.
-
0:59
>> What?
-
0:59
>> So as I scroll up and down, you can see
-
1:02
it's actually in 3D and it's mixing with this text here.
-
1:07
That's just a normal HTML paragraph.
-
1:11
So that's pretty impressive.
-
1:12
Now even more impressive is this ring down here at the bottom.
-
1:17
You'll see that it's actually in front of
-
1:19
the text but it's also simultaneously behind the text.
-
1:23
And actually I can highlight this.
-
1:26
You can see that it is real text on the page.
-
1:30
In fact I can even bring up the Chrome developer tools here.
-
1:34
And highlight this little bit here and you can see it's just a normal EM element.
-
1:43
>> What?
-
1:43
>> So, it is actually there on the page.
-
1:46
It's not like rendering this text magically or something.
-
1:50
so, how, is this happening?
-
1:53
Well, it's using web GL to do it's 3D rendering.
-
1:58
Which is currently supported in Chrome and Firefox.
-
2:03
And if you enable it in Safari its ordered there.
-
2:06
And I believe its ordered in Internet Explorer 11.
-
2:09
So support is definitely on the rise and the way that
-
2:13
they're doing this is by rending two different Web GL canvases.
-
2:19
There is one that is above and one that is below and then they're fusing them
-
2:24
together with seam here and with a little
-
2:28
bit of anti-alysing it basic, basically removes all the.
-
2:32
Jagged pixels there and kind of fuses it together.
-
2:36
So it's pretty smart.
-
2:38
Now, how does this work?
-
2:39
Well, if we go over to the documentation, the two
-
2:42
really big important things here are the model and the view.
-
2:47
Now, the model is a base class you can extend.
-
2:52
And it contains objects managed by the Voodoo rendering engine.
-
2:58
So, it's a, a model is a single 3D object.
-
3:02
Now, if we click on View, you'll see that the View is also extendable.
-
3:09
And every model should have a View.
-
3:14
Basically contains information about, the state of an object.
-
3:22
So, if we switch over to my text editor here I
-
3:26
actually want you to see what this code looks like in action.
-
3:30
This is a sample that you can download with Voodoo, so there's a view here, and.
-
3:36
We're extending and, one thing I forgot to mention, is
-
3:39
that Voodoo does rely on 3JS, which is another WebGL library.
-
3:45
So, basically we can create a Taurus here, which is bas, basically a donut shape.
-
3:52
We can apply a material, or a texture,
-
3:55
to describe what the surface of that looks like.
-
3:58
And then, we can actually add that to the scene.
-
4:03
There we go.
-
4:04
And we can position it and all that good stuff.
-
4:07
Then we also have a function here to move the Taurus in 3D space.
-
4:13
Then down here in the model, which is used to again describe
-
4:17
the state of three objects we have an update function right here.
-
4:22
You know, if you are familiar with game engines or
-
4:25
if you are familiar 3D graphics your update function basically runs.
-
4:29
Every frame, and by passing in delta time here, you
-
4:33
can tell it, how long it's been since the last frame.
-
4:37
So it will know, how far to move that donut back and forth.
-
4:42
And if we go down here, the last thing we do after declaring or excuse
-
4:48
me extending the view, and model, we just call the sample model, and in the browser.
-
4:54
You'll get something that looks like this.
-
4:56
So there is that taurus, it has a red color
-
5:01
and we've positioned it so that it's around some text here.
-
5:06
Anyway, Voodoo is pretty amazing.
-
5:09
I, I think this is a really, really
-
5:10
cool project and you should definitely check this out.
-
5:15
Web GL is being supported in more and more browsers.
-
5:18
Than ever.
-
5:19
And it's definitely time to start using it in websites.
-
5:23
>> They have super, super impressive demos.
-
5:25
>> Mm-hm.
-
5:26
>> Next up we have a project called Responsive Tables.
-
5:30
This is a very, very descriptive name for what it is, which as you might guess is.
-
5:35
Responsive tables for your webpage.
-
5:37
Let's go ahead and check it out.
-
5:38
So you can see down here so whatever.
-
5:40
You just install it, have the CSS and the JavaScript.
-
5:42
Put in a couple classes and your markup, just add class is table responsive.
-
5:49
And you are good to go.
-
5:51
Now here is a demo.
-
5:52
Look at, look at all this information inside of the table.
-
5:57
Now if we go ahead and resize the browser to make it responsive.
-
6:01
Wow, look at that, all of our stuff is gone.
-
6:04
We only have a couple different columns.
-
6:05
Well, what if we wanted more columns?
-
6:07
Well, just click that display button and the different columns collapse but you can
-
6:13
add them back in automatically and then go ahead and scroll up and down table.
-
6:18
Also, supports this little focus button right here.
-
6:21
So, if you wanna click on a row, you get just that information.
-
6:26
Now this is super simple to use, the way that you set up your table is you give
-
6:31
each of your table heading elements a priority.
-
6:36
Now the priorities correspond to different break points so, priority of one is going
-
6:42
to be always visible but you can hide it inside of that drop down.
-
6:47
And so on and so forth for all of the different priorities.
-
6:50
This is a super simple plug in to use.
-
6:53
We'll have a like to that in the show
-
6:54
notes which you can get to at YouTube.com/GoTreeHouse or.
-
6:57
Or search for us on iTunes, we are The Tree House Show.
-
7:02
>> Very cool stuff.
-
7:02
Well, next up is Isomer which is
-
7:06
an isometric graphics library for HTML5 canvas.
-
7:11
Now, if you play a lot of video games, you might be familiar with isometric graphics.
-
7:16
It's basically a view that renders without any kind of perspective.
-
7:22
So it's rendering this at a 3 quarters view or a side view here basically and you
-
7:29
can see both sides of the 3D object, and it doesn't have any kind of perspective.
-
7:36
Now how is it rendering this?
-
7:39
Because this isn't just a, a picture.
-
7:41
It's actually rendering this onto a canvas.
-
7:43
Well, with Isomer, you can create a shape and a point
-
7:49
and then you add it to the scene or the drawing.
-
7:53
So, in this case, the shape is a prism.
-
7:56
And it's using the point to position it in 3D space.
-
8:02
Now if we scroll down here we can see a slightly more robust example.
-
8:07
In this case we are using the Point,ORIGIN, which, should
-
8:13
default to just the, the origin of the 3D grid, that you can see here.
-
8:20
And then, with these three values here we're defining
-
8:24
the width, length, and height of this 3D object.
-
8:30
Now you can, obviously, use this to build out much more complex examples.
-
8:36
So, if we click on the playground here, it will take us over to
-
8:40
Codepen, and you can see exactly how that example up in the header was built.
-
8:46
We are adding a bunch of different isomer objects to our canvas here.
-
8:53
And if I change these, so for example let's just comment one of these out.
-
8:59
You can see that the view will update here, and will actually remove that box
-
9:05
that's right here so you can get an idea of how this scene is being built.
-
9:09
And I could adjust the width, length, and height here.
-
9:13
And that should probably make it look a little bit strange
-
9:16
because it is being rendered isymmetrically, but you get the idea.
-
9:20
You can very quickly adjust the size or position
-
9:23
of these objects, and create these nifty little graphics.
-
9:28
So very cool stuff.
-
9:30
It is a a paid project, actually let me go back here, there we go.
-
9:39
But it's very inexpensive, just $10, and you
-
9:42
get two files which allow you to build.
-
9:46
These pretty amazing, 3D graphics.
-
9:49
So, very cool stuff.
-
9:50
However, it is also available for free under the MIT license.
-
9:53
I should mention that.
-
9:54
So it is actually free.
-
9:56
But you can pay for it if you like it a lot.
-
9:59
>> Very very cool.
-
10:00
>> Mm-hm.
-
10:00
>> Next up, we have a project called digraphs.
-
10:03
This is a JavaScript charting and diagramming library.
-
10:08
Let's go ahead and check it out right here.
-
10:10
It's super simple to use.
-
10:12
You can see this, this chart on the right.
-
10:15
Is generated just from this little snippet of JavaScript right here.
-
10:20
It's given a target, which is a div.
-
10:23
A data source, which is a text file located on the server.
-
10:26
And then just some different options.
-
10:27
If you want a legend, title, and, labels, and all that good stuff.
-
10:33
So if we look on the right right here, as I am moving my mouse across the chart.
-
10:40
The different data points are moving.
-
10:42
And then it is updating on the top right with the corresponding values.
-
10:47
Now you can actually click and drag this graph to zoom in.
-
10:51
Double-clicking will zoom out.
-
10:54
Shift and dragging will pan the charts and you can even adjust the averaging period.
-
11:01
Now there are, bunch of options, as you can see, as we go through.
-
11:05
Just tons of different things you can do
-
11:07
with these graphs, there is a lot of demos.
-
11:12
Right here as well, of, just generating all of these different graphs.
-
11:16
Anyway, this is a completely free project.
-
11:19
Go ahead and download it if you need charting or graphing on your site.
-
11:24
Very, very great, great project.
-
11:27
>> Next up is a, blog post, from Brad Frost, called Label Bask.
-
11:33
And label masks you can see it demonstrated right here.
-
11:38
Basically allow the user to type in some input into a form and
-
11:43
then get a preview of how that data is going to be interpreted.
-
11:49
Now, if we scroll down here, you can see that Brad was basically
-
11:54
inspired by this release from the Filament Group called Politespace.
-
12:00
But he thought that had a couple of issues.
-
12:04
It's, it's pretty amazing on it's own, but he decided to.
-
12:08
Enhance it and scroll down to the demo here.
-
12:13
You can see what this result looks like.
-
12:17
Now, if I just type in a bunch of garbage here, it will basically
-
12:21
show me, well, that's what you know,
-
12:23
my credit card information is gonna look like.
-
12:25
Obviously, we don't want something like that so that way i can type in a number
-
12:31
here instead, that is my real credit card number please feel free to use it.
-
12:37
Basically this is nice if you've ever typed
-
12:40
a credit card number you know it's difficult.
-
12:44
To kind of make sure you're typing in the four digit groups just right.
-
12:51
But this way, with the Labelmask, you can look up here and
-
12:54
say, okay, this is what it actually looks like on my credit card.
-
12:58
And that makes it a lot easier to make sure you're typing
-
13:01
in the correct number, rather than just looking at the input box.
-
13:04
Which can be kind of difficult to find.
-
13:07
Those stops for each 4 digits, same thing with phone numbers.
-
13:13
If you're typing in a phone number and there's
-
13:15
no spacing between it; when you're actually typing it in.
-
13:18
It can be a little bit tough to figure out if you're typing in the correct number.
-
13:22
But same deal there, anyway you can check out the project.
-
13:27
On GitHub and use it on your sites.
-
13:31
Very cool stuff.
-
13:32
>> Yeah, very nice.
-
13:33
I really like that pattern.
-
13:34
Really, really good UI.
-
13:35
>> Mm-hm.
-
13:35
>> Next up, over at the Tellarite developer network, we have
-
13:39
a blog post on seven quirks I wish I knew about JavaScript.
-
13:43
Now, this is some common quirks when you actually start working with the language.
-
13:47
That you learn very quickly or slowly depending on
-
13:51
how long it takes you to debug what is wrong.
-
13:54
So the first thing they go into is equality, the JavaScript language has
-
14:00
the double equals comparison operator but you are actually, most of the time.
-
14:05
Looking to use the triple equals
-
14:08
equality operator, because they do different things.
-
14:13
>> Also known as the threequals.
-
14:16
>> Threequals, never, never heard that, that's very clever.
-
14:18
>> Mm-hm.
-
14:19
>> The double equals, the example that they give here is
-
14:23
a, in, an integer of the number one, is going to be.
-
14:27
Equal to the string 1.
-
14:30
So there are two equalities.
-
14:32
There is equality and strict equality, which also checks the type.
-
14:38
They go into different things.
-
14:40
Dot notation versus bracket notation.
-
14:43
Context of different functions.
-
14:44
We don't have time to go into the entire blog post here.
-
14:47
But I do recommend you check it out.
-
14:48
We'll have a link to it in the show notes.
-
14:51
>> Very nice stuff.
-
14:52
Well next up is Flexplorer.
-
14:55
Now if you've been watching the developing of Flex Box,
-
14:58
you might know that Flex Box is pretty close to primetime.
-
15:03
I am on the caniuse.com website, which charts
-
15:08
the Compatibility of various pieces of browser technology.
-
15:14
And this a page for the flexible box layout module from the W3 saved.
-
15:20
And it is now a candidate recommendation and if you look at the current browsers,
-
15:26
Internet Explorer 11, Firefox 28, Chrome 34, and Safari 7 now all support it.
-
15:33
With Safari 7, you do need to still use
-
15:36
the WebKit prefix, same with iOS 7, but that's okay.
-
15:41
It's also supported on Opera and the
-
15:44
latest version of the Android and Blackberry browsers.
-
15:48
That's really good because Flexbox is a new way to lay
-
15:51
out web pages without using floats or position, or any kind
-
15:56
of the traditional elements that you would expect when laying out
-
15:59
a web page using multi columns or rows, and so on.
-
16:03
And it's really great that mobile browsers support it
-
16:07
now as well because it's wonderful for responsive web design.
-
16:11
Now, lets go back to flexplorer here and take a look at how this works.
-
16:17
Flex box is a little bit complicated to understand at
-
16:21
first but once you do wrap your head around it.
-
16:25
You'll start to understand that it's incredibly intelligent and a very
-
16:29
elegant solution to this complex problem of laying out web pages.
-
16:34
Especially in a responsive contexts.
-
16:39
And in fact I think this is how web
-
16:41
pages will be built in the future almost definitely.
-
16:45
Flexplorer allows you to kind of explore how different flex box properties.
-
16:53
Work and interact with different elements.
-
16:56
So, if I resize the browser here, you can see that this page is indeed
-
17:02
responsive and all of these different elements kind of flow very nicely.
-
17:08
And if I adjust some of these properties
-
17:11
I can change the number of items for example.
-
17:14
That's not terribly interesting but I could change the direction
-
17:20
of these different elements, so I could go from row, which
-
17:25
is laying out all these, elements or flex items in
-
17:30
order here and it will change what's called the flex container.
-
17:36
And I can change that to column.
-
17:37
So now all of these elements are laid out in a column.
-
17:41
And that's all done by changing a single CSS value on the flex direction property.
-
17:48
Now if you've ever laid out a multi column layout
-
17:50
even using a CSS multi framework, you know that this can
-
17:53
actually be a pretty complicated thing to do and there's a
-
17:56
lot that has to happen to go from rows to columns.
-
18:00
So it's amazing you can do that with just one CSS value.
-
18:05
Actually, I should have resized the browser there, there's
-
18:08
that's what that actually looks like and when I.
-
18:11
Go down.
-
18:12
You can see it is flexible like you would expect.
-
18:17
You can also adjust other con, other properties here like the justify
-
18:23
content, or the flex wrap, which are a couple different.
-
18:30
Properties that we don't really have time to go into here on the show.
-
18:34
But, anyway after you learn a bit about
-
18:38
Flexbox you should definitely check out Flexplorer to
-
18:41
get a better understanding of what each of
-
18:44
those properties and values are going to do.
-
18:46
Because Flexbox, while it is very robust, and powerful, it can
-
18:49
be a little bit complicated to understand when you're first learning.
-
18:53
But definitely worth learning because it is almost
-
18:57
time to start using that on production-ready sites.
-
18:59
>> The future is now.
-
19:01
>> It is.
-
19:02
Tomorrow is today.
-
19:03
>> But that is all we have time for today.
-
19:05
Nick who are you on Twitter?
-
19:06
I am @nickrp.
-
19:07
>> And I am @jseifer, for more information on anything we talked about, check out the
-
19:11
show note at youtube.com/gotreehouse or search for us
-
19:14
on iTunes, we are the tree house show.
-
19:17
And for a 30 day free trial of treehouse, click
-
19:20
the link in the show notes here on you tube.
-
19:23
>> And of course, if you'd like to see, more
-
19:25
videos like this one about web design, web development, mobile business,
-
19:30
and so much more, be sure to check us out
-
19:32
at teamtreehouse.com, and use that link to get a free month.
-
19:37
Thank you so much for watching, and we will see you next week.
-
19:40
[MUSIC]
You need to sign up for Treehouse in order to download course files.
Sign up