Episode 129: Field Validation, CSS Reference, Progress Bars

I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:01 >> And you're watching the treehouse show. 0:02 Your weekly dose of internet, 0:03 where we talk about all things web design, web development, and more. 0:05 >> In this episode we'll be talking about field validation, CSS reference, 0:08 progress bars, and more. 0:12 >> Let's check it out. 0:14 [MUSIC] 0:16 [MUSIC] 0:18 >> First up we have a project called FieldVal. 0:20 This as you might expect form the name, lets you create error reports for 0:24 your JavaScript data. 0:29 Essentially, it does field validation. 0:30 >> Oh, so it's like a shorter version of that. 0:34 >> Yeah. >> Okay, cool. 0:36 >> Yeah, they compressed it. 0:37 >> I'm on board. 0:38 >> So let's go ahead and just quickly check out a demo, because that is easy. 0:39 We can see, if I click into the email field right here, and then tab out, and 0:45 hit submit, that changes from saying that the field was missing to, 0:49 it was an invalid email address format. 0:53 Now, the output that you get is interesting. 0:56 You get a JSON object which has all of the different fields in it. 0:59 Says it's missing or it's invalid, along with the different keys which 1:03 correspond to the different parts of the form. 1:07 Now, why in the world would you wanna do something like this? 1:10 Well, when you are validating data why, why would you wanna do that? 1:13 Here is an example of poor validation where you 1:17 can really only run one at a time. 1:20 So this library fixes that by allowing you to 1:23 get a bunch of different validations at the same time. 1:26 It allows you to just give your users a little bit better of an experience because 1:28 you can catch more things before you send the data up to the server. 1:33 Anyway, we will have a link in the show notes, 1:36 which you can check out right below this video if you're interested. 1:38 >> Next up is Matter.js, this is a physics library or 1:42 a physics engine for the web, as you might guess from it being written in JavaScript. 1:47 This is only 2D for now but perhaps it will be 3D in the future. 1:54 And this picture is pretty boring so let's go to the full demo here. 1:59 >> What? 2:03 >> Whoa. What is happening? 2:04 >> What is happening? 2:07 Wow. 2:08 >> This is physics in the browser. 2:08 >> Is this the future? 2:13 >> Tomorrow is today. 2:15 Now- >> Yesterday already happened. 2:16 >> You might be wondering why would you use something like this? 2:18 >> Why would I? 2:21 >> Why does it- >> Yeah. 2:22 >> Why does it matter? 2:23 Well, if you are making a game, that's a pretty useful use case. 2:24 But perhaps you might want to use this to do some sort of cool animation, 2:30 maybe something like kind of drops down and 2:36 you want a few things to kinda like bounce around. 2:38 Could be good for like a marketing page. 2:41 It is a little bit frivolous but 2:43 there's definitely some good use cases where it could add some extra wow factor. 2:45 So this is pretty easy to install. 2:50 You can just include the script directly into your page. 2:52 Or you can install it with Bower or the node package manager. 2:56 And it has a lot of pretty robust features. 3:01 It has physical properties such as mass, area, and density. 3:04 It can do rigid bodies of any convex polygon. 3:09 And it has gravity, all sorts of stuff, you might expect in a physics engine. 3:12 So, pretty neat stuff, 3:20 not a whole lot to say about it but it is definitely pretty impressive. 3:21 >> You know, as far a physics engine libraries go, 3:26 I think I prefer mind.js over matter.js. 3:29 Next up we have a project called Material Progress. 3:34 This is a quick little combination of CSS3, and pure JavaScript, 3:39 to implement progress bars based on Google's Material Design. 3:45 There are a few different types, I believe there are four different types here. 3:50 The first one is a determinate progress bar, and you can see right here a little 3:53 example on the screen just going from left to right filling up the progress. 3:57 It's really easy to use, just include in your page and 4:02 call new m progress then you get start and set and increment. 4:04 There are a few different kinds, 4:10 we've got buffers as well which can, gives you a little bit 4:11 of another progress bar that's intended to represent a buffer as things are loading. 4:15 An indeterminate progress bar, which just means things are gonna take forever and 4:21 making no progress, kinda like mine and Nick's relationship. 4:24 And then there's also a fourth type, which is query indeterminate and determinate, 4:28 that kinda goes a few different ways depending on what is going on. 4:33 Anyway, you can see a few more details and 4:38 check out the project on GitHub, which we'll have a link to in the show notes. 4:40 >> We are definitely living in a material world. 4:44 And I guess it's also pretty cool if you just wanna make like, a cool like, 4:47 laser light show on your website not really for loading bars, necessarily. 4:50 >> Yeah, that's true, they do. 4:54 >> Cool little web disco there. 4:55 All right. 4:56 >> Web disco. 4:57 >> Next up is a CSS reference from codrops. 4:58 This is very cool. 5:02 It's an incredibly robust CSS reference. 5:04 So you can click on any property here. 5:09 Let's click on, say, animation. 5:11 And, once you click on one of those, you can see that the animation 5:14 property is short hand for all of these other properties. 5:20 And of course, those are all linked within the reference. 5:24 And there's just a great article for every single one of these. 5:28 There's some trivia and notes. 5:33 There is the official syntax. 5:35 There's the different values, and then some examples and not only that there is 5:37 also a live demo and, then of course browser support from, caniuse.com. 5:42 >> Wow, this is very thorough. 5:49 >> It's really incredibly thorough, I mean it's remarkable the. 5:52 There's so much detail for every single one of these. 5:57 It's definitely one of the best CSS references I've ever seen. 5:59 So if there's maybe a couple of elements that you're kinda stuck on and you want 6:03 to learn a little bit more about them, or kinda just get a different perspective on 6:09 them, then this is definitely something that's worth checking out. 6:13 And even if you feel like you know a lot about CSS, 6:16 it's still worth checking out because every time I look through here, 6:19 I always find something that maybe is new to me or 6:22 I just haven't looked at in a while and I see how it could be used in a new way. 6:26 >> Very, very. 6:30 >> It's pretty cool. 6:31 >> Yeah very cool stuff. 6:31 >> Mm-hm. 6:32 >> And finally we have a library called vissense, which is for 6:33 observing changes in the visibility of DOM elements. 6:38 Now, let's see if we have a demo that we can take a look at. 6:43 Oh, here we go, demo page. 6:48 You can just see how it works here. 6:51 If we're looking at different sections of a page, for 6:54 example, you can see there are three different sections and it shows whether or 6:56 not something is visible or hidden. 7:01 And then as we scroll down the page, 7:03 you'll be able to see on the bottom left these change between visible, 7:05 fully visible, and hidden, depending on what is viewable inside the browser. 7:10 Now, you could use this for certain things like showing whether or 7:15 not a video is playing, if a video is visible on a page, you could maybe 7:19 make it play automatically, or as you scroll, you could have it stop playing. 7:25 That's something that could be really useful. 7:28 A ton of different uses, and it's actually really, really easy to use. 7:30 You just give it the DOM element of what you want to, what, what you want to track, 7:33 and then, you can call the is fully visible method, and then, 7:39 inside there, you get a little bit of a call back. 7:44 So there is more documentation. 7:46 We're not gonna get all the way into that. 7:47 You can check it out in the show notes if you are interested in it. 7:49 >> Very cool stuff. 7:53 You could probably use that in combination with like the page visibility API, 7:53 which both I mean is really good for battery life. 7:58 So, like you were saying. 8:01 >> Yeah. >> You're not like playing videos or, 8:02 you know, showing like a photo gallery, whatever if it's not visible. 8:04 It's pretty cool, cool idea. 8:08 Well, that is all we have time for this week. 8:09 Jason, who are you on Twitter? 8:12 >> I am @jseifer. 8:14 >> And I am @nickrp. 8:15 And- 8:16 >> For more information on anything we 8:17 talked about check out the show notes below the video. 8:19 We want to thank everybody for watching and we'll talk to you next week. 8:21 See you later. 8:24 [MUSIC] 8:25 What, why is google chrome wanna access my contacts? 8:32 That's awkward Google Chrome, we just- 8:35 >> I wanna see your contacts. 8:37 >> We just started hanging out Google Chrome, why would 8:39

You need to sign up for Treehouse in order to set up Workspace

Sign up