1 00:00:00,490 --> 00:00:01,330 I'm Nick Pettit. 2 00:00:01,330 --> 00:00:02,360 >> I'm Jason Seifer. 3 00:00:02,360 --> 00:00:03,830 >> And you're watching the treehouse show. 4 00:00:03,830 --> 00:00:05,090 Your weekly dose of internet, 5 00:00:05,090 --> 00:00:08,250 where we talk about all things web design, web development, and more. 6 00:00:08,250 --> 00:00:12,830 >> In this episode we'll be talking about field validation, CSS reference, 7 00:00:12,830 --> 00:00:14,890 progress bars, and more. 8 00:00:14,890 --> 00:00:16,011 >> Let's check it out. 9 00:00:16,011 --> 00:00:18,127 [MUSIC] 10 00:00:18,127 --> 00:00:20,888 [MUSIC] 11 00:00:20,888 --> 00:00:24,420 >> First up we have a project called FieldVal. 12 00:00:24,420 --> 00:00:29,440 This as you might expect form the name, lets you create error reports for 13 00:00:29,440 --> 00:00:30,945 your JavaScript data. 14 00:00:30,945 --> 00:00:34,525 Essentially, it does field validation. 15 00:00:34,525 --> 00:00:36,805 >> Oh, so it's like a shorter version of that. 16 00:00:36,805 --> 00:00:37,575 >> Yeah. >> Okay, cool. 17 00:00:37,575 --> 00:00:38,755 >> Yeah, they compressed it. 18 00:00:38,755 --> 00:00:39,365 >> I'm on board. 19 00:00:39,365 --> 00:00:45,120 >> So let's go ahead and just quickly check out a demo, because that is easy. 20 00:00:45,120 --> 00:00:49,180 We can see, if I click into the email field right here, and then tab out, and 21 00:00:49,180 --> 00:00:53,940 hit submit, that changes from saying that the field was missing to, 22 00:00:53,940 --> 00:00:56,930 it was an invalid email address format. 23 00:00:56,930 --> 00:00:59,340 Now, the output that you get is interesting. 24 00:00:59,340 --> 00:01:03,520 You get a JSON object which has all of the different fields in it. 25 00:01:03,520 --> 00:01:07,940 Says it's missing or it's invalid, along with the different keys which 26 00:01:07,940 --> 00:01:10,980 correspond to the different parts of the form. 27 00:01:10,980 --> 00:01:13,240 Now, why in the world would you wanna do something like this? 28 00:01:13,240 --> 00:01:17,440 Well, when you are validating data why, why would you wanna do that? 29 00:01:17,440 --> 00:01:20,180 Here is an example of poor validation where you 30 00:01:20,180 --> 00:01:23,060 can really only run one at a time. 31 00:01:23,060 --> 00:01:26,340 So this library fixes that by allowing you to 32 00:01:26,340 --> 00:01:28,980 get a bunch of different validations at the same time. 33 00:01:28,980 --> 00:01:33,590 It allows you to just give your users a little bit better of an experience because 34 00:01:33,590 --> 00:01:36,860 you can catch more things before you send the data up to the server. 35 00:01:36,860 --> 00:01:38,730 Anyway, we will have a link in the show notes, 36 00:01:38,730 --> 00:01:42,470 which you can check out right below this video if you're interested. 37 00:01:42,470 --> 00:01:47,390 >> Next up is Matter.js, this is a physics library or 38 00:01:47,390 --> 00:01:54,190 a physics engine for the web, as you might guess from it being written in JavaScript. 39 00:01:54,190 --> 00:01:59,420 This is only 2D for now but perhaps it will be 3D in the future. 40 00:01:59,420 --> 00:02:03,840 And this picture is pretty boring so let's go to the full demo here. 41 00:02:03,840 --> 00:02:04,510 >> What? 42 00:02:04,510 --> 00:02:07,280 >> Whoa. What is happening? 43 00:02:07,280 --> 00:02:08,330 >> What is happening? 44 00:02:08,330 --> 00:02:08,960 Wow. 45 00:02:08,960 --> 00:02:11,840 >> This is physics in the browser. 46 00:02:13,400 --> 00:02:14,110 >> Is this the future? 47 00:02:15,750 --> 00:02:16,630 >> Tomorrow is today. 48 00:02:16,630 --> 00:02:18,690 Now- >> Yesterday already happened. 49 00:02:18,690 --> 00:02:21,820 >> You might be wondering why would you use something like this? 50 00:02:21,820 --> 00:02:22,920 >> Why would I? 51 00:02:22,920 --> 00:02:23,440 >> Why does it- >> Yeah. 52 00:02:23,440 --> 00:02:24,910 >> Why does it matter? 53 00:02:24,910 --> 00:02:30,420 Well, if you are making a game, that's a pretty useful use case. 54 00:02:30,420 --> 00:02:36,260 But perhaps you might want to use this to do some sort of cool animation, 55 00:02:36,260 --> 00:02:38,570 maybe something like kind of drops down and 56 00:02:38,570 --> 00:02:41,170 you want a few things to kinda like bounce around. 57 00:02:41,170 --> 00:02:43,430 Could be good for like a marketing page. 58 00:02:43,430 --> 00:02:45,150 It is a little bit frivolous but 59 00:02:45,150 --> 00:02:50,600 there's definitely some good use cases where it could add some extra wow factor. 60 00:02:50,600 --> 00:02:52,380 So this is pretty easy to install. 61 00:02:52,380 --> 00:02:56,650 You can just include the script directly into your page. 62 00:02:56,650 --> 00:03:01,250 Or you can install it with Bower or the node package manager. 63 00:03:01,250 --> 00:03:04,000 And it has a lot of pretty robust features. 64 00:03:04,000 --> 00:03:09,330 It has physical properties such as mass, area, and density. 65 00:03:09,330 --> 00:03:12,950 It can do rigid bodies of any convex polygon. 66 00:03:12,950 --> 00:03:20,240 And it has gravity, all sorts of stuff, you might expect in a physics engine. 67 00:03:20,240 --> 00:03:21,600 So, pretty neat stuff, 68 00:03:21,600 --> 00:03:26,730 not a whole lot to say about it but it is definitely pretty impressive. 69 00:03:26,730 --> 00:03:29,200 >> You know, as far a physics engine libraries go, 70 00:03:29,200 --> 00:03:32,240 I think I prefer mind.js over matter.js. 71 00:03:34,560 --> 00:03:39,210 Next up we have a project called Material Progress. 72 00:03:39,210 --> 00:03:45,060 This is a quick little combination of CSS3, and pure JavaScript, 73 00:03:45,060 --> 00:03:50,620 to implement progress bars based on Google's Material Design. 74 00:03:50,620 --> 00:03:53,370 There are a few different types, I believe there are four different types here. 75 00:03:53,370 --> 00:03:57,860 The first one is a determinate progress bar, and you can see right here a little 76 00:03:57,860 --> 00:04:02,080 example on the screen just going from left to right filling up the progress. 77 00:04:02,080 --> 00:04:04,880 It's really easy to use, just include in your page and 78 00:04:04,880 --> 00:04:10,460 call new m progress then you get start and set and increment. 79 00:04:10,460 --> 00:04:11,570 There are a few different kinds, 80 00:04:11,570 --> 00:04:15,540 we've got buffers as well which can, gives you a little bit 81 00:04:15,540 --> 00:04:21,530 of another progress bar that's intended to represent a buffer as things are loading. 82 00:04:21,530 --> 00:04:24,990 An indeterminate progress bar, which just means things are gonna take forever and 83 00:04:24,990 --> 00:04:28,320 making no progress, kinda like mine and Nick's relationship. 84 00:04:28,320 --> 00:04:33,290 And then there's also a fourth type, which is query indeterminate and determinate, 85 00:04:33,290 --> 00:04:38,420 that kinda goes a few different ways depending on what is going on. 86 00:04:38,420 --> 00:04:40,550 Anyway, you can see a few more details and 87 00:04:40,550 --> 00:04:44,000 check out the project on GitHub, which we'll have a link to in the show notes. 88 00:04:44,000 --> 00:04:47,520 >> We are definitely living in a material world. 89 00:04:47,520 --> 00:04:50,620 And I guess it's also pretty cool if you just wanna make like, a cool like, 90 00:04:50,620 --> 00:04:54,200 laser light show on your website not really for loading bars, necessarily. 91 00:04:54,200 --> 00:04:55,330 >> Yeah, that's true, they do. 92 00:04:55,330 --> 00:04:56,840 >> Cool little web disco there. 93 00:04:56,840 --> 00:04:57,450 All right. 94 00:04:57,450 --> 00:04:58,590 >> Web disco. 95 00:04:58,590 --> 00:05:02,690 >> Next up is a CSS reference from codrops. 96 00:05:02,690 --> 00:05:04,560 This is very cool. 97 00:05:04,560 --> 00:05:09,170 It's an incredibly robust CSS reference. 98 00:05:09,170 --> 00:05:11,980 So you can click on any property here. 99 00:05:11,980 --> 00:05:14,890 Let's click on, say, animation. 100 00:05:14,890 --> 00:05:20,010 And, once you click on one of those, you can see that the animation 101 00:05:20,010 --> 00:05:24,980 property is short hand for all of these other properties. 102 00:05:24,980 --> 00:05:28,750 And of course, those are all linked within the reference. 103 00:05:28,750 --> 00:05:33,290 And there's just a great article for every single one of these. 104 00:05:33,290 --> 00:05:35,250 There's some trivia and notes. 105 00:05:35,250 --> 00:05:37,380 There is the official syntax. 106 00:05:37,380 --> 00:05:42,430 There's the different values, and then some examples and not only that there is 107 00:05:42,430 --> 00:05:49,850 also a live demo and, then of course browser support from, caniuse.com. 108 00:05:49,850 --> 00:05:52,100 >> Wow, this is very thorough. 109 00:05:52,100 --> 00:05:57,250 >> It's really incredibly thorough, I mean it's remarkable the. 110 00:05:57,250 --> 00:05:59,670 There's so much detail for every single one of these. 111 00:05:59,670 --> 00:06:03,600 It's definitely one of the best CSS references I've ever seen. 112 00:06:03,600 --> 00:06:09,290 So if there's maybe a couple of elements that you're kinda stuck on and you want 113 00:06:09,290 --> 00:06:13,000 to learn a little bit more about them, or kinda just get a different perspective on 114 00:06:13,000 --> 00:06:16,730 them, then this is definitely something that's worth checking out. 115 00:06:16,730 --> 00:06:19,090 And even if you feel like you know a lot about CSS, 116 00:06:19,090 --> 00:06:22,870 it's still worth checking out because every time I look through here, 117 00:06:22,870 --> 00:06:26,930 I always find something that maybe is new to me or 118 00:06:26,930 --> 00:06:30,680 I just haven't looked at in a while and I see how it could be used in a new way. 119 00:06:30,680 --> 00:06:31,280 >> Very, very. 120 00:06:31,280 --> 00:06:31,910 >> It's pretty cool. 121 00:06:31,910 --> 00:06:32,745 >> Yeah very cool stuff. 122 00:06:32,745 --> 00:06:33,460 >> Mm-hm. 123 00:06:33,460 --> 00:06:38,370 >> And finally we have a library called vissense, which is for 124 00:06:38,370 --> 00:06:43,520 observing changes in the visibility of DOM elements. 125 00:06:43,520 --> 00:06:48,520 Now, let's see if we have a demo that we can take a look at. 126 00:06:48,520 --> 00:06:49,930 Oh, here we go, demo page. 127 00:06:51,230 --> 00:06:54,110 You can just see how it works here. 128 00:06:54,110 --> 00:06:56,410 If we're looking at different sections of a page, for 129 00:06:56,410 --> 00:07:01,320 example, you can see there are three different sections and it shows whether or 130 00:07:01,320 --> 00:07:03,330 not something is visible or hidden. 131 00:07:03,330 --> 00:07:05,950 And then as we scroll down the page, 132 00:07:05,950 --> 00:07:10,760 you'll be able to see on the bottom left these change between visible, 133 00:07:10,760 --> 00:07:15,980 fully visible, and hidden, depending on what is viewable inside the browser. 134 00:07:15,980 --> 00:07:19,770 Now, you could use this for certain things like showing whether or 135 00:07:19,770 --> 00:07:25,435 not a video is playing, if a video is visible on a page, you could maybe 136 00:07:25,435 --> 00:07:28,935 make it play automatically, or as you scroll, you could have it stop playing. 137 00:07:28,935 --> 00:07:30,615 That's something that could be really useful. 138 00:07:30,615 --> 00:07:33,885 A ton of different uses, and it's actually really, really easy to use. 139 00:07:33,885 --> 00:07:39,875 You just give it the DOM element of what you want to, what, what you want to track, 140 00:07:39,875 --> 00:07:44,325 and then, you can call the is fully visible method, and then, 141 00:07:44,325 --> 00:07:46,420 inside there, you get a little bit of a call back. 142 00:07:46,420 --> 00:07:47,740 So there is more documentation. 143 00:07:47,740 --> 00:07:49,110 We're not gonna get all the way into that. 144 00:07:49,110 --> 00:07:53,010 You can check it out in the show notes if you are interested in it. 145 00:07:53,010 --> 00:07:53,730 >> Very cool stuff. 146 00:07:53,730 --> 00:07:58,550 You could probably use that in combination with like the page visibility API, 147 00:07:58,550 --> 00:08:01,570 which both I mean is really good for battery life. 148 00:08:01,570 --> 00:08:02,640 So, like you were saying. 149 00:08:02,640 --> 00:08:04,510 >> Yeah. >> You're not like playing videos or, 150 00:08:04,510 --> 00:08:08,130 you know, showing like a photo gallery, whatever if it's not visible. 151 00:08:08,130 --> 00:08:09,960 It's pretty cool, cool idea. 152 00:08:09,960 --> 00:08:12,600 Well, that is all we have time for this week. 153 00:08:12,600 --> 00:08:14,010 Jason, who are you on Twitter? 154 00:08:14,010 --> 00:08:15,400 >> I am @jseifer. 155 00:08:15,400 --> 00:08:16,290 >> And I am @nickrp. 156 00:08:16,290 --> 00:08:16,790 And- 157 00:08:17,980 --> 00:08:19,200 >> For more information on anything we 158 00:08:19,200 --> 00:08:21,110 talked about check out the show notes below the video. 159 00:08:21,110 --> 00:08:24,840 We want to thank everybody for watching and we'll talk to you next week. 160 00:08:24,840 --> 00:08:25,912 See you later. 161 00:08:25,912 --> 00:08:32,928 [MUSIC] 162 00:08:32,928 --> 00:08:35,650 What, why is google chrome wanna access my contacts? 163 00:08:35,650 --> 00:08:37,908 That's awkward Google Chrome, we just- 164 00:08:37,908 --> 00:08:39,000 >> I wanna see your contacts. 165 00:08:39,000 --> 00:08:40,980 >> We just started hanging out Google Chrome, why would