I'm Nick Pettit.

>> I'm Jason Seifer.

>> And you're watching the Treehouse Show.

Your weekly dose of Internets where we talk

about all things web design, web development, and more.

>> In this episode we'll be talking

about Voodoo, responsive tables, JavaScript graphs, and more.

>> Let's check it out.

[BLANK_AUDIO]

First up is Voodoo JS.

Now, this is a JavaScript library that allows you to

mix 3D and 2D elements on a single web page.

It's pretty impressive.

So, let's take a look.

So it says Voodoo is a new java script framework that lets

you easily mix 2D and 3D content together on the same page.

Well what does that mean?

Well lets scroll down the page and look at this graph over here and

as I scroll you can see that it actually parallaxes in 3D.

There's more pronounced examples here, like this palm tree.

>> What?

>> So as I scroll up and down, you can see

it's actually in 3D and it's mixing with this text here.

That's just a normal HTML paragraph.

So that's pretty impressive.

Now even more impressive is this ring down here at the bottom.

You'll see that it's actually in front of

the text but it's also simultaneously behind the text.

And actually I can highlight this.

You can see that it is real text on the page.

In fact I can even bring up the Chrome developer tools here.

And highlight this little bit here and you can see it's just a normal EM element.

>> What?

>> So, it is actually there on the page.

It's not like rendering this text magically or something.

so, how, is this happening?

Well, it's using web GL to do it's 3D rendering.

Which is currently supported in Chrome and Firefox.

And if you enable it in Safari its ordered there.

And I believe its ordered in Internet Explorer 11.

So support is definitely on the rise and the way that

they're doing this is by rending two different Web GL canvases.

There is one that is above and one that is below and then they're fusing them

together with seam here and with a little

bit of anti-alysing it basic, basically removes all the.

Jagged pixels there and kind of fuses it together.

So it's pretty smart.

Now, how does this work?

Well, if we go over to the documentation, the two

really big important things here are the model and the view.

Now, the model is a base class you can extend.

And it contains objects managed by the Voodoo rendering engine.

So, it's a, a model is a single 3D object.

Now, if we click on View, you'll see that the View is also extendable.

And every model should have a View.

Basically contains information about, the state of an object.

So, if we switch over to my text editor here I

actually want you to see what this code looks like in action.

This is a sample that you can download with Voodoo, so there's a view here, and.

We're extending and, one thing I forgot to mention, is

that Voodoo does rely on 3JS, which is another WebGL library.

So, basically we can create a Taurus here, which is bas, basically a donut shape.

We can apply a material, or a texture,

to describe what the surface of that looks like.

And then, we can actually add that to the scene.

There we go.

And we can position it and all that good stuff.

Then we also have a function here to move the Taurus in 3D space.

Then down here in the model, which is used to again describe

the state of three objects we have an update function right here.

You know, if you are familiar with game engines or

if you are familiar 3D graphics your update function basically runs.

Every frame, and by passing in delta time here, you

can tell it, how long it's been since the last frame.

So it will know, how far to move that donut back and forth.

And if we go down here, the last thing we do after declaring or excuse

me extending the view, and model, we just call the sample model, and in the browser.

You'll get something that looks like this.

So there is that taurus, it has a red color

and we've positioned it so that it's around some text here.

Anyway, Voodoo is pretty amazing.

I, I think this is a really, really

cool project and you should definitely check this out.

Web GL is being supported in more and more browsers.

Than ever.

And it's definitely time to start using it in websites.

>> They have super, super impressive demos.

>> Mm-hm.

>> Next up we have a project called Responsive Tables.

This is a very, very descriptive name for what it is, which as you might guess is.

Responsive tables for your webpage.

Let's go ahead and check it out.

So you can see down here so whatever.

You just install it, have the CSS and the JavaScript.

Put in a couple classes and your markup, just add class is table responsive.

And you are good to go.

Now here is a demo.

Look at, look at all this information inside of the table.

Now if we go ahead and resize the browser to make it responsive.

Wow, look at that, all of our stuff is gone.

We only have a couple different columns.

Well, what if we wanted more columns?

Well, just click that display button and the different columns collapse but you can

add them back in automatically and then go ahead and scroll up and down table.

Also, supports this little focus button right here.

So, if you wanna click on a row, you get just that information.

Now this is super simple to use, the way that you set up your table is you give

each of your table heading elements a priority.

Now the priorities correspond to different break points so, priority of one is going

to be always visible but you can hide it inside of that drop down.

And so on and so forth for all of the different priorities.

This is a super simple plug in to use.

We'll have a like to that in the show

notes which you can get to at YouTube.com/GoTreeHouse or.

Or search for us on iTunes, we are The Tree House Show.

>> Very cool stuff.

Well, next up is Isomer which is

an isometric graphics library for HTML5 canvas.

Now, if you play a lot of video games, you might be familiar with isometric graphics.

It's basically a view that renders without any kind of perspective.

So it's rendering this at a 3 quarters view or a side view here basically and you

can see both sides of the 3D object, and it doesn't have any kind of perspective.

Now how is it rendering this?

Because this isn't just a, a picture.

It's actually rendering this onto a canvas.

Well, with Isomer, you can create a shape and a point

and then you add it to the scene or the drawing.

So, in this case, the shape is a prism.

And it's using the point to position it in 3D space.

Now if we scroll down here we can see a slightly more robust example.

In this case we are using the Point,ORIGIN, which, should

default to just the, the origin of the 3D grid, that you can see here.

And then, with these three values here we're defining

the width, length, and height of this 3D object.

Now you can, obviously, use this to build out much more complex examples.

So, if we click on the playground here, it will take us over to

Codepen, and you can see exactly how that example up in the header was built.

We are adding a bunch of different isomer objects to our canvas here.

And if I change these, so for example let's just comment one of these out.

You can see that the view will update here, and will actually remove that box

that's right here so you can get an idea of how this scene is being built.

And I could adjust the width, length, and height here.

And that should probably make it look a little bit strange

because it is being rendered isymmetrically, but you get the idea.

You can very quickly adjust the size or position

of these objects, and create these nifty little graphics.

So very cool stuff.

It is a a paid project, actually let me go back here, there we go.

But it's very inexpensive, just $10, and you

get two files which allow you to build.

These pretty amazing, 3D graphics.

So, very cool stuff.

However, it is also available for free under the MIT license.

I should mention that.

So it is actually free.

But you can pay for it if you like it a lot.

>> Very very cool.

>> Mm-hm.

>> Next up, we have a project called digraphs.

This is a JavaScript charting and diagramming library.

Let's go ahead and check it out right here.

It's super simple to use.

You can see this, this chart on the right.

Is generated just from this little snippet of JavaScript right here.

It's given a target, which is a div.

A data source, which is a text file located on the server.

And then just some different options.

If you want a legend, title, and, labels, and all that good stuff.

So if we look on the right right here, as I am moving my mouse across the chart.

The different data points are moving.

And then it is updating on the top right with the corresponding values.

Now you can actually click and drag this graph to zoom in.

Double-clicking will zoom out.

Shift and dragging will pan the charts and you can even adjust the averaging period.

Now there are, bunch of options, as you can see, as we go through.

Just tons of different things you can do

with these graphs, there is a lot of demos.

Right here as well, of, just generating all of these different graphs.

Anyway, this is a completely free project.

Go ahead and download it if you need charting or graphing on your site.

Very, very great, great project.

>> Next up is a, blog post, from Brad Frost, called Label Bask.

And label masks you can see it demonstrated right here.

Basically allow the user to type in some input into a form and

then get a preview of how that data is going to be interpreted.

Now, if we scroll down here, you can see that Brad was basically

inspired by this release from the Filament Group called Politespace.

But he thought that had a couple of issues.

It's, it's pretty amazing on it's own, but he decided to.

Enhance it and scroll down to the demo here.

You can see what this result looks like.

Now, if I just type in a bunch of garbage here, it will basically

show me, well, that's what you know,

my credit card information is gonna look like.

Obviously, we don't want something like that so that way i can type in a number

here instead, that is my real credit card number please feel free to use it.

Basically this is nice if you've ever typed

a credit card number you know it's difficult.

To kind of make sure you're typing in the four digit groups just right.

But this way, with the Labelmask, you can look up here and

say, okay, this is what it actually looks like on my credit card.

And that makes it a lot easier to make sure you're typing

in the correct number, rather than just looking at the input box.

Which can be kind of difficult to find.

Those stops for each 4 digits, same thing with phone numbers.

If you're typing in a phone number and there's

no spacing between it; when you're actually typing it in.

It can be a little bit tough to figure out if you're typing in the correct number.

But same deal there, anyway you can check out the project.

On GitHub and use it on your sites.

Very cool stuff.

>> Yeah, very nice.

I really like that pattern.

Really, really good UI.

>> Mm-hm.

>> Next up, over at the Tellarite developer network, we have

a blog post on seven quirks I wish I knew about JavaScript.

Now, this is some common quirks when you actually start working with the language.

That you learn very quickly or slowly depending on

how long it takes you to debug what is wrong.

So the first thing they go into is equality, the JavaScript language has

the double equals comparison operator but you are actually, most of the time.

Looking to use the triple equals

equality operator, because they do different things.

>> Also known as the threequals.

>> Threequals, never, never heard that, that's very clever.

>> Mm-hm.

>> The double equals, the example that they give here is

a, in, an integer of the number one, is going to be.

Equal to the string 1.

So there are two equalities.

There is equality and strict equality, which also checks the type.

They go into different things.

Dot notation versus bracket notation.

Context of different functions.

We don't have time to go into the entire blog post here.

But I do recommend you check it out.

We'll have a link to it in the show notes.

>> Very nice stuff.

Well next up is Flexplorer.

Now if you've been watching the developing of Flex Box,

you might know that Flex Box is pretty close to primetime.

I am on the caniuse.com website, which charts

the Compatibility of various pieces of browser technology.

And this a page for the flexible box layout module from the W3 saved.

And it is now a candidate recommendation and if you look at the current browsers,

Internet Explorer 11, Firefox 28, Chrome 34, and Safari 7 now all support it.

With Safari 7, you do need to still use

the WebKit prefix, same with iOS 7, but that's okay.

It's also supported on Opera and the

latest version of the Android and Blackberry browsers.

That's really good because Flexbox is a new way to lay

out web pages without using floats or position, or any kind

of the traditional elements that you would expect when laying out

a web page using multi columns or rows, and so on.

And it's really great that mobile browsers support it

now as well because it's wonderful for responsive web design.

Now, lets go back to flexplorer here and take a look at how this works.

Flex box is a little bit complicated to understand at

first but once you do wrap your head around it.

You'll start to understand that it's incredibly intelligent and a very

elegant solution to this complex problem of laying out web pages.

Especially in a responsive contexts.

And in fact I think this is how web

pages will be built in the future almost definitely.

Flexplorer allows you to kind of explore how different flex box properties.

Work and interact with different elements.

So, if I resize the browser here, you can see that this page is indeed

responsive and all of these different elements kind of flow very nicely.

And if I adjust some of these properties

I can change the number of items for example.

That's not terribly interesting but I could change the direction

of these different elements, so I could go from row, which

is laying out all these, elements or flex items in

order here and it will change what's called the flex container.

And I can change that to column.

So now all of these elements are laid out in a column.

And that's all done by changing a single CSS value on the flex direction property.

Now if you've ever laid out a multi column layout

even using a CSS multi framework, you know that this can

actually be a pretty complicated thing to do and there's a

lot that has to happen to go from rows to columns.

So it's amazing you can do that with just one CSS value.

Actually, I should have resized the browser there, there's

that's what that actually looks like and when I.

Go down.

You can see it is flexible like you would expect.

You can also adjust other con, other properties here like the justify

content, or the flex wrap, which are a couple different.

Properties that we don't really have time to go into here on the show.

But, anyway after you learn a bit about

Flexbox you should definitely check out Flexplorer to

get a better understanding of what each of

those properties and values are going to do.

Because Flexbox, while it is very robust, and powerful, it can

be a little bit complicated to understand when you're first learning.

But definitely worth learning because it is almost

time to start using that on production-ready sites.

>> The future is now.

>> It is.

Tomorrow is today.

>> But that is all we have time for today.

Nick who are you on Twitter?

I am @nickrp.

>> And I am @jseifer, for more information on anything we talked about, check out the

show note at youtube.com/gotreehouse or search for us

on iTunes, we are the tree house show.

And for a 30 day free trial of treehouse, click

the link in the show notes here on you tube.

>> And of course, if you'd like to see, more

videos like this one about web design, web development, mobile business,

and so much more, be sure to check us out

at teamtreehouse.com, and use that link to get a free month.

Thank you so much for watching, and we will see you next week.

[MUSIC]