Episode 59: Form Validation, Safari Push Notifications, JavaScript Performance

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