You've already started watching Episode 59: Form Validation, Safari Push Notifications, JavaScript Performance
Episode 59: Form Validation, Safari Push Notifications, JavaScript Performance
14:35 with Nick Pettit and Jason SeiferIn 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
[Nick] I'm Nick Pettit. [Jason] I'm Jason Seifer.
-
0:02
[Nick] And you're watching the Treehouse Show, your weekly dose of Internet
-
0:04
where we talk about all things web design, web development, and more.
-
0:08
[Jason] In this episode we'll be talking form validations,
-
0:10
Safari push notifications, JavaScript performance, and more.
-
0:14
[Nick] Let's check it out.
-
0:16
[treehouse show]
-
0:20
[Jason] First up we're talking about a project called Formance.js.
-
0:24
This is a jQuery form validation library for the client side,
-
0:28
and they bill it as bringing the romance back to forms
-
0:32
because obviously what all of your web forms are missing—romance.
-
0:36
[Nick] Definitely. [Jason] Anyway, there are a lot of nice client side validations in here.
-
0:39
They have validations for credit card expiration dates,
-
0:43
dates, email addresses, numbers, phone numbers, and just a whole bunch of stuff.
-
0:47
So they have a nice little demo right here.
-
0:50
They have a nice hint in the toolbox right here.
-
0:53
So if you want to type in a phone number you can say, 111-111—
-
0:58
[Nick] Is that your phone number, Jason? [Jason] No.
-
1:00
My phone number has the ones in different order.
-
1:03
And you'll see as I type in the last number it goes from invalid to valid.
-
1:07
So this is just a really nice set of client side validations
-
1:12
that work—you know—right inside your browser.
-
1:15
You always want to do validations on the server side as well as the client side
-
1:18
because people can manipulate the data
-
1:20
and then send it up on the server.
-
1:22
However, client side validation is just a really great UI
-
1:25
and user experience for your users.
-
1:27
So check that out, it's called Formance.js.
-
1:29
[Nick] Pretty cool stuff.
-
1:31
[Jason] Formance like performance—not for mints.
-
1:34
[Nick] Oh, okay. I totally read that wrong.
-
1:36
[Jason] Yeah, it happens.
-
1:38
[Nick] Next up is Photon—I think it's Photon.js—I'm not quite sure.
-
1:43
But it's a CSS 3D lighting engine.
-
1:47
And here I have Photon turned off,
-
1:50
but when we go ahead and turn Photon on,
-
1:52
wow, look at that.
-
1:54
There's all of this shading on this origami crane.
-
1:59
We can go ahead and click on another example here.
-
2:00
Here's this folding map,
-
2:02
and you can see that the shading adjusts based on the angle of the geometry.
-
2:09
So we'll go ahead and click on another example here.
-
2:11
This is kind of a cover flow example.
-
2:15
But Photon is again for use with CSS 3D,
-
2:20
so if you're doing transformations in 3D using CSS,
-
2:24
you can go ahead and apply Photon.
-
2:27
So I'm going to go ahead and click on the documentation here—here we go.
-
2:31
And it says here up at the top that Photon is rather processor intensive,
-
2:38
so you do want to use it responsibly.
-
2:42
However, you can okay ahead and apply it just using this quick start here.
-
2:46
So you go ahead and create a light, and then you create your faces,
-
2:51
and then you go ahead and render the 3D object.
-
2:54
And then, of course, there's a whole bunch of other ways
-
2:58
that you can interact with the render, the lighting, the faces, and so on.
-
3:01
Now I am not really that big of a fan of using CSS 3D in the browser
-
3:08
unless the HTML is actually very semantic.
-
3:12
I actually like using WebGL a lot more
-
3:14
because I think that the DOM is kind of a bad place to store geometry.
-
3:19
With that said, if your only option is to use CSS 3D
-
3:24
and actually transform DOM elements,
-
3:27
then this a pretty good solution for actually applying some nice lighting to it.
-
3:31
I have not tested it out on mobile,
-
3:33
but I don't see any reason why it wouldn't work there as well.
-
3:37
So it's a pretty cool thing to use during the interim
-
3:40
until WebGL is actually well supported on mobile.
-
3:43
[Jason] That's really, really awesome—very, very impressive.
-
3:46
Next up we have something called json.human.js.
-
3:50
[Nick] Yeah, kind of like you. [Jason] Yeah. [Nick] A human.
-
3:52
[Jason] And Jason. [Nick] I didn't get that other part.
-
3:54
Mind blown.
-
3:57
[Jason] So this is a JavaScript library that's called JSON Formatting for Human Beings.
-
4:01
So what this will do—this will let you take any JSON encoded string or values,
-
4:06
and then it will display it really nicely for you.
-
4:09
So they have an exam on the page.
-
4:11
You can see there is some JSON input,
-
4:14
which is actually relatively easy to read.
-
4:16
So you can see all the different values that they have.
-
4:19
You'll notice the repository value right here has 2 different values beneath it.
-
4:24
So you can click on that convert button,
-
4:27
and then this is what it will output.
-
4:29
It just gives you a really nice display—
-
4:31
a formatted list of everything that is going on in the JSON.
-
4:35
It will also give you the raw HTML should you want that.
-
4:39
Anyway, this is just a quick library for prettifying JSON.
-
4:43
And you can find this in the show notes at youtube.com/gotreehouse
-
4:47
or search for us on iTunes at The Treehouse Show.
-
4:50
[Nick] Very cool stuff. [Jason] It is cool.
-
4:52
[Nick] Well, next up is a pretty cool project called Pattern Lab,
-
4:55
and it's from Brad Frost.
-
4:58
So if we go ahead and take a look at Pattern Lab here,
-
5:01
it's basically drawing an analogy between biochemistry and web pages.
-
5:09
So you have components that are called atoms.
-
5:12
We can transform those into molecules by combining them.
-
5:15
That turns into organisms, and then you can create templates and pages.
-
5:20
I think it's the latter part where the analogy kind of breaks down.
-
5:23
[Jason] Yeah, those last—those last 2 steps there.
-
5:26
[Nick] Don't really make as much sense.
-
5:28
[Jason] How do you go from an organism to a template?
-
5:30
[Nick] Well, if you go to the blog post from Brad Frost,
-
5:33
you can find out.
-
5:35
If you scroll down the page here, he suggests that design
-
5:38
should actually be treated more like a set of components
-
5:42
or atoms, molecules, and so on
-
5:45
that build up into larger and more complex elements or components.
-
5:50
And he says, "Well, what is atomic design?"
-
5:54
Well, that's stuff like label and input or a button.
-
5:58
You can combine those things into—you know—
-
6:02
larger things that we call molecules,
-
6:05
and then you can put those together into organisms and so on.
-
6:10
It's a pretty interesting blog post and pretty interesting project
-
6:15
that actually makes use of this concept.
-
6:19
So definitely be sure to check that out.
-
6:21
[Jason] That is definitely something to think about.
-
6:23
Next up on OS X Mavericks,
-
6:26
which is the next generation of the OS X operating system,
-
6:29
Safari is going to have support for push notifications.
-
6:33
So websites are going to be able to send push notifications right to your desktop.
-
6:37
[Nick] And that's even when Safari is closed.
-
6:40
[Jason] Exactly. Now some web browsers already do this
-
6:43
like Chrome that's had these notifications for a little while,
-
6:46
but unlike in Chrome—Chrome has to be open for the notifications to get to you.
-
6:51
Anyway, if you want to start learning how to work with these notifications,
-
6:55
Apple has put up the documentation over on the Apple Developer Connection.
-
6:59
Now you can see there's a notification guide for programming websites.
-
7:04
And then we'll just sign in with my Apple ID here.
-
7:08
[Nick] What's your password, Jason?
-
7:10
[Jason] It's Nick Pettit. Is that weird?
-
7:12
[Nick] Nick Pettit is that weird?
-
7:14
Does that have spaces? [Jason] No, all lowercase—one word.
-
7:16
[Nick] Got it.
-
7:18
[Jason] And so here's how you configure the Safari push notifications.
-
7:21
What's interesting about how Apple decided to do push notifications with Safari
-
7:25
is that first the browser will authenticate and then ask user permission.
-
7:31
Then the server will get a device token.
-
7:34
What's interesting here where it breaks down,
-
7:36
and that's different from how other web browsers do the notifications,
-
7:39
is that there's an external notification service,
-
7:42
which then delivers the notification back to the user's web browser.
-
7:46
So that means in order to send push notifications through Safari,
-
7:51
you're going to have to register with Apple and register a website that's push ID.
-
7:56
So it's kind of interesting—I think—that Apple has decided to take this route
-
8:00
of making people actually register in order to send these notifications.
-
8:04
You know—on the one hand, it makes a lot of sense that they would do that,
-
8:07
but on the other hand, I think this may be more hoops
-
8:10
than some developers are willing to go through
-
8:12
in order to just get notifications out.
-
8:15
[Nick] Yeah, it seems a little weird to actually have
-
8:17
2 different push notification implementations in 2 different browsers.
-
8:21
[Jason] Yeah. And—I mean not only that—you know—
-
8:23
you'll have one way of doing it Chrome,
-
8:25
one way of doing it in Firefox, and yet another way of doing it in Safari.
-
8:29
[Nick] So it's kind of fragmenting the market there.
-
8:31
[Jason] Yeah. So I don't know.
-
8:33
It might be a good opportunity for some sort of polyfill library
-
8:36
that just abstracts all the different notifications you'll have to do,
-
8:39
but we'll see how that goes.
-
8:41
[Nick] Yeah. And if you build that, we'll go ahead and cover it on the Treehouse Show
-
8:44
because that would be wonderful.
-
8:45
[Jason] Exactly. Make sure to Tweet at us.
-
8:47
[Nick] That's right.
-
8:49
All right, next up is dat.GUI.
-
8:52
And this is a piece of JavaScript that allows you to create
-
8:55
these little GUIs over here or graphical user interfaces.
-
9:00
So I've got a little slider here
-
9:03
that I can use to adjust the speed of this graphic over here.
-
9:06
[Jason] Wow. [Nick] Amazing—I know. [Jason] It's like a ghost.
-
9:08
[Nick] I can go ahead and use this check box to apply an outline.
-
9:12
I can click this button and make it explode—that's pretty cool.
-
9:16
[Jason] Is that magic? [Nick] And I can even go ahead and change the text here.
-
9:20
So I can type in Treehouse, and I'll go ahead and display that.
-
9:24
Pretty nifty.
-
9:26
Now dat.GUI is not actually building these graphics here,
-
9:32
it's actually building this interface or these controls over here.
-
9:35
And it's actually really simple to implement them.
-
9:39
You can go ahead and just give it some variables here.
-
9:44
And whatever you put you into the property's initial values
-
9:48
will actually define what the control is.
-
9:51
So, for example, if you just pass this string here,
-
9:54
it will go ahead and put in a string.
-
9:57
If you put in a couple of numbers here,
-
9:59
it will give you this slider that you can go ahead and use to adjust the numbers.
-
10:03
And you can tie these to any variables in your JavaScript,
-
10:06
so it doesn't necessarily have to be for—
-
10:08
say something like—you know—a fancy graphic
-
10:12
like the one that you see here.
-
10:14
You can tie this to any sort of variables that you want.
-
10:16
Pretty cool.
-
10:18
There's actually a lot more here that we don't have time to go into on the show,
-
10:20
but definitely be sure to check it out.
-
10:22
[Jason] Very, very nice. Interesting—interesting library.
-
10:24
Next up we have a website called jsPerf.
-
10:27
This is really interesting.
-
10:29
It lets you share JavaScript test cases with other people.
-
10:33
So you can upload your JavaScript test case
-
10:36
and then you get a little URL for it,
-
10:38
and it will actually run these test cases in the browser
-
10:40
and show you which one is faster and a whole bunch of stuff.
-
10:43
So here is what the site looks like right now.
-
10:45
You can input your name, email, URL,
-
10:48
and then you give it the details of your test case,
-
10:50
and you can define all the HTML, the test, the setup, and the teardown.
-
10:56
So they have a whole library of test cases in here.
-
10:59
And then here's an example of one.
-
11:02
This is the preparation code.
-
11:04
And then here is the test runner.
-
11:06
You can hit run tests,
-
11:08
and then these are all running inside the browser right now.
-
11:10
And you'll see on the right,
-
11:12
as soon as these tests are actually done,
-
11:14
it will say completed.
-
11:17
And then it will show you which ones are faster and which ones are not.
-
11:20
Now this has quite a lot of processing to do.
-
11:24
It's really running these a lot of times.
-
11:27
You can see it's running at 450—something—thousand times right here.
-
11:31
[Nick] Wow. [Jason] I know—I know.
-
11:33
All right in the browser.
-
11:35
I'm out of breath just thinking about it.
-
11:37
Anyway, this is just a really, really nice tool that you can use.
-
11:39
It's very helpful when your developing sites
-
11:41
or if you want to get somebody's feedback
-
11:43
on how you could maybe do something better.
-
11:45
That is jsPerf, so make sure to check that out in the show notes.
-
11:48
[Nick] That is just perfect—jsPerf.
-
11:54
[Jason] That was pretty good, Nick.
-
11:56
[Nick] All right, moving on.
-
11:58
Next up is D3.js.
-
12:00
D3 is standing for— [Jason] That is D3—erfect.
-
12:04
[Nick] Didn't quite work the same way,
-
12:06
but that was a good try.
-
12:08
I appreciate the effort. [Jason] When in Rome.
-
12:10
[Nick] D3 or data-driven documents is this library for JavaScript
-
12:15
that allows you to manipulate data.
-
12:17
So rather than reading through all this boring code down here,
-
12:21
let's just go ahead and look at these examples.
-
12:24
So I'm going to click on this map here of a noncontiguous cartogram.
-
12:29
And, wow, look at this.
-
12:31
That one is not interactive.
-
12:33
Let's go to a better one.
-
12:35
Let's look at this graph right here.
-
12:38
It shows us this really cool tree map—I guess is what it's called.
-
12:44
And we can go ahead and click over here onto this graph.
-
12:47
There we go, that's pretty cool.
-
12:49
When I hover over it, you can see that it kind of has this fish eye effect.
-
12:53
It's actually an incredibly powerful graphing library
-
12:57
that allows you to produce all sort of really interestingly looking graphs.
-
13:01
Wow, what's this one going to do?
-
13:03
Oh, man, I think it's teaching me about cell division or something.
-
13:07
There goes that biochemistry analysis—analogy again.
-
13:11
All right, so D3 helps you bring data to life using HTML, SVG, and CSS.
-
13:19
Now that's really great because that means that
-
13:21
you're not going to be tied to some sort of proprietary technology like flash
-
13:26
or something that isn't necessarily supported well across all browsers and devices.
-
13:32
D3 just uses—like I said—HTML, SVG, and JavaScript—or CSS.
-
13:38
So that means that it's going to be well supported on mobile devices as well,
-
13:43
aond it should load pretty quickly.
-
13:45
[Jason] Yeah—you know—that's the nice thing about it, it's really quick to load.
-
13:47
It has a wealth of different possible visualizations.
-
13:50
And a lot of people do use it,
-
13:52
so it does have a really good community behind it.
-
13:54
[Nick] Definitely. [Jason] It's D3—awesome.
-
13:58
[Nick] D3—close.
-
14:00
[Jason] I tried.
-
14:02
So I think that's about all we have for today.
-
14:04
Nick, who are you on Twitter? [Nick] I am @nickrp. [Jason] And I am @jseifer.
-
14:07
If you want more information on anything we talked about,
-
14:08
check out our show notes at youtube.com/gotreehouse
-
14:11
or search for us in iTunes at The Treehouse Show.
-
14:14
[Nick] And, of course, if you would like to see more videos like this one
-
14:17
about web design, web development, mobile, business, and so much more,
-
14:21
be sure to check us out at teamtreehouse.com.
-
14:24
Thank you so much for watching,
-
14:26
and we'll see you next week.
-
14:28
[treehouse show]
You need to sign up for Treehouse in order to download course files.
Sign up