[Nick] I'm Nick Pettit. [Jason] I'm Jason Seifer.

[Nick] And you're watching the Treehouse Show, your weekly dose of Internet

where we talk about all things web design, web development, and more.

[Jason] In this episode we'll be talking form validations,

Safari push notifications, JavaScript performance, and more.

[Nick] Let's check it out.

[treehouse show]

[Jason] First up we're talking about a project called Formance.js.

This is a jQuery form validation library for the client side,

and they bill it as bringing the romance back to forms

because obviously what all of your web forms are missing—romance.

[Nick] Definitely. [Jason] Anyway, there are a lot of nice client side validations in here.

They have validations for credit card expiration dates,

dates, email addresses, numbers, phone numbers, and just a whole bunch of stuff.

So they have a nice little demo right here.

They have a nice hint in the toolbox right here.

So if you want to type in a phone number you can say, 111-111—

[Nick] Is that your phone number, Jason? [Jason] No.

My phone number has the ones in different order.

And you'll see as I type in the last number it goes from invalid to valid.

So this is just a really nice set of client side validations

that work—you know—right inside your browser.

You always want to do validations on the server side as well as the client side

because people can manipulate the data

and then send it up on the server.

However, client side validation is just a really great UI

and user experience for your users.

So check that out, it's called Formance.js.

[Nick] Pretty cool stuff.

[Jason] Formance like performance—not for mints.

[Nick] Oh, okay. I totally read that wrong.

[Jason] Yeah, it happens.

[Nick] Next up is Photon—I think it's Photon.js—I'm not quite sure.

But it's a CSS 3D lighting engine.

And here I have Photon turned off,

but when we go ahead and turn Photon on,

wow, look at that.

There's all of this shading on this origami crane.

We can go ahead and click on another example here.

Here's this folding map,

and you can see that the shading adjusts based on the angle of the geometry.

So we'll go ahead and click on another example here.

This is kind of a cover flow example.

But Photon is again for use with CSS 3D,

so if you're doing transformations in 3D using CSS,

you can go ahead and apply Photon.

So I'm going to go ahead and click on the documentation here—here we go.

And it says here up at the top that Photon is rather processor intensive,

so you do want to use it responsibly.

However, you can okay ahead and apply it just using this quick start here.

So you go ahead and create a light, and then you create your faces,

and then you go ahead and render the 3D object.

And then, of course, there's a whole bunch of other ways

that you can interact with the render, the lighting, the faces, and so on.

Now I am not really that big of a fan of using CSS 3D in the browser

unless the HTML is actually very semantic.

I actually like using WebGL a lot more

because I think that the DOM is kind of a bad place to store geometry.

With that said, if your only option is to use CSS 3D

and actually transform DOM elements,

then this a pretty good solution for actually applying some nice lighting to it.

I have not tested it out on mobile,

but I don't see any reason why it wouldn't work there as well.

So it's a pretty cool thing to use during the interim

until WebGL is actually well supported on mobile.

[Jason] That's really, really awesome—very, very impressive.

Next up we have something called json.human.js.

[Nick] Yeah, kind of like you. [Jason] Yeah. [Nick] A human.

[Jason] And Jason. [Nick] I didn't get that other part.

Mind blown.

[Jason] So this is a JavaScript library that's called JSON Formatting for Human Beings.

So what this will do—this will let you take any JSON encoded string or values,

and then it will display it really nicely for you.

So they have an exam on the page.

You can see there is some JSON input,

which is actually relatively easy to read.

So you can see all the different values that they have.

You'll notice the repository value right here has 2 different values beneath it.

So you can click on that convert button,

and then this is what it will output.

It just gives you a really nice display—

a formatted list of everything that is going on in the JSON.

It will also give you the raw HTML should you want that.

Anyway, this is just a quick library for prettifying JSON.

And you can find this in the show notes at youtube.com/gotreehouse

or search for us on iTunes at The Treehouse Show.

[Nick] Very cool stuff. [Jason] It is cool.

[Nick] Well, next up is a pretty cool project called Pattern Lab,

and it's from Brad Frost.

So if we go ahead and take a look at Pattern Lab here,

it's basically drawing an analogy between biochemistry and web pages.

So you have components that are called atoms.

We can transform those into molecules by combining them.

That turns into organisms, and then you can create templates and pages.

I think it's the latter part where the analogy kind of breaks down.

[Jason] Yeah, those last—those last 2 steps there.

[Nick] Don't really make as much sense.

[Jason] How do you go from an organism to a template?

[Nick] Well, if you go to the blog post from Brad Frost,

you can find out.

If you scroll down the page here, he suggests that design

should actually be treated more like a set of components

or atoms, molecules, and so on

that build up into larger and more complex elements or components.

And he says, "Well, what is atomic design?"

Well, that's stuff like label and input or a button.

You can combine those things into—you know—

larger things that we call molecules,

and then you can put those together into organisms and so on.

It's a pretty interesting blog post and pretty interesting project

that actually makes use of this concept.

So definitely be sure to check that out.

[Jason] That is definitely something to think about.

Next up on OS X Mavericks,

which is the next generation of the OS X operating system,

Safari is going to have support for push notifications.

So websites are going to be able to send push notifications right to your desktop.

[Nick] And that's even when Safari is closed.

[Jason] Exactly. Now some web browsers already do this

like Chrome that's had these notifications for a little while,

but unlike in Chrome—Chrome has to be open for the notifications to get to you.

Anyway, if you want to start learning how to work with these notifications,

Apple has put up the documentation over on the Apple Developer Connection.

Now you can see there's a notification guide for programming websites.

And then we'll just sign in with my Apple ID here.

[Nick] What's your password, Jason?

[Jason] It's Nick Pettit. Is that weird?

[Nick] Nick Pettit is that weird?

Does that have spaces? [Jason] No, all lowercase—one word.

[Nick] Got it.

[Jason] And so here's how you configure the Safari push notifications.

What's interesting about how Apple decided to do push notifications with Safari

is that first the browser will authenticate and then ask user permission.

Then the server will get a device token.

What's interesting here where it breaks down,

and that's different from how other web browsers do the notifications,

is that there's an external notification service,

which then delivers the notification back to the user's web browser.

So that means in order to send push notifications through Safari,

you're going to have to register with Apple and register a website that's push ID.

So it's kind of interesting—I think—that Apple has decided to take this route

of making people actually register in order to send these notifications.

You know—on the one hand, it makes a lot of sense that they would do that,

but on the other hand, I think this may be more hoops

than some developers are willing to go through

in order to just get notifications out.

[Nick] Yeah, it seems a little weird to actually have

2 different push notification implementations in 2 different browsers.

[Jason] Yeah. And—I mean not only that—you know—

you'll have one way of doing it Chrome,

one way of doing it in Firefox, and yet another way of doing it in Safari.

[Nick] So it's kind of fragmenting the market there.

[Jason] Yeah. So I don't know.

It might be a good opportunity for some sort of polyfill library

that just abstracts all the different notifications you'll have to do,

but we'll see how that goes.

[Nick] Yeah. And if you build that, we'll go ahead and cover it on the Treehouse Show

because that would be wonderful.

[Jason] Exactly. Make sure to Tweet at us.

[Nick] That's right.

All right, next up is dat.GUI.

And this is a piece of JavaScript that allows you to create

these little GUIs over here or graphical user interfaces.

So I've got a little slider here

that I can use to adjust the speed of this graphic over here.

[Jason] Wow. [Nick] Amazing—I know. [Jason] It's like a ghost.

[Nick] I can go ahead and use this check box to apply an outline.

I can click this button and make it explode—that's pretty cool.

[Jason] Is that magic? [Nick] And I can even go ahead and change the text here.

So I can type in Treehouse, and I'll go ahead and display that.

Pretty nifty.

Now dat.GUI is not actually building these graphics here,

it's actually building this interface or these controls over here.

And it's actually really simple to implement them.

You can go ahead and just give it some variables here.

And whatever you put you into the property's initial values

will actually define what the control is.

So, for example, if you just pass this string here,

it will go ahead and put in a string.

If you put in a couple of numbers here,

it will give you this slider that you can go ahead and use to adjust the numbers.

And you can tie these to any variables in your JavaScript,

so it doesn't necessarily have to be for—

say something like—you know—a fancy graphic

like the one that you see here.

You can tie this to any sort of variables that you want.

Pretty cool.

There's actually a lot more here that we don't have time to go into on the show,

but definitely be sure to check it out.

[Jason] Very, very nice. Interesting—interesting library.

Next up we have a website called jsPerf.

This is really interesting.

It lets you share JavaScript test cases with other people.

So you can upload your JavaScript test case

and then you get a little URL for it,

and it will actually run these test cases in the browser

and show you which one is faster and a whole bunch of stuff.

So here is what the site looks like right now.

You can input your name, email, URL,

and then you give it the details of your test case,

and you can define all the HTML, the test, the setup, and the teardown.

So they have a whole library of test cases in here.

And then here's an example of one.

This is the preparation code.

And then here is the test runner.

You can hit run tests,

and then these are all running inside the browser right now.

And you'll see on the right,

as soon as these tests are actually done,

it will say completed.

And then it will show you which ones are faster and which ones are not.

Now this has quite a lot of processing to do.

It's really running these a lot of times.

You can see it's running at 450—something—thousand times right here.

[Nick] Wow. [Jason] I know—I know.

All right in the browser.

I'm out of breath just thinking about it.

Anyway, this is just a really, really nice tool that you can use.

It's very helpful when your developing sites

or if you want to get somebody's feedback

on how you could maybe do something better.

That is jsPerf, so make sure to check that out in the show notes.

[Nick] That is just perfect—jsPerf.

[Jason] That was pretty good, Nick.

[Nick] All right, moving on.

Next up is D3.js.

D3 is standing for— [Jason] That is D3—erfect.

[Nick] Didn't quite work the same way,

but that was a good try.

I appreciate the effort. [Jason] When in Rome.

[Nick] D3 or data-driven documents is this library for JavaScript

that allows you to manipulate data.

So rather than reading through all this boring code down here,

let's just go ahead and look at these examples.

So I'm going to click on this map here of a noncontiguous cartogram.

And, wow, look at this.

That one is not interactive.

Let's go to a better one.

Let's look at this graph right here.

It shows us this really cool tree map—I guess is what it's called.

And we can go ahead and click over here onto this graph.

There we go, that's pretty cool.

When I hover over it, you can see that it kind of has this fish eye effect.

It's actually an incredibly powerful graphing library

that allows you to produce all sort of really interestingly looking graphs.

Wow, what's this one going to do?

Oh, man, I think it's teaching me about cell division or something.

There goes that biochemistry analysis—analogy again.

All right, so D3 helps you bring data to life using HTML, SVG, and CSS.

Now that's really great because that means that

you're not going to be tied to some sort of proprietary technology like flash

or something that isn't necessarily supported well across all browsers and devices.

D3 just uses—like I said—HTML, SVG, and JavaScript—or CSS.

So that means that it's going to be well supported on mobile devices as well,

aond it should load pretty quickly.

[Jason] Yeah—you know—that's the nice thing about it, it's really quick to load.

It has a wealth of different possible visualizations.

And a lot of people do use it,

so it does have a really good community behind it.

[Nick] Definitely. [Jason] It's D3—awesome.

[Nick] D3—close.

[Jason] I tried.

So I think that's about all we have for today.

Nick, who are you on Twitter? [Nick] I am @nickrp. [Jason] And I am @jseifer.

If you want more information on anything we talked about,

check out our show notes at youtube.com/gotreehouse

or search for us in iTunes at The Treehouse Show.

[Nick] And, of course, if you would 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.

Thank you so much for watching,

and we'll see you next week.

[treehouse show]