Episode 100: CSS will-change Property, HTML5 Forms, Vertical Align

I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:01 >> And you're watching the Treehouse Show, your weekly dose of Internets 0:02 where we talk about all things, web design, web development, and more. 0:05 >> For a free month's trial of Treehouse, head on over to TeamTreehouse.com/show. 0:08 In this episode, we'll be talking about the CSS 0:13 will-change Property, HTML Forms, Vertical aligning things, and more. 0:16 Let's check it out. 0:22 [MUSIC]. 0:23 Well, this may come as a surprise to many of you, or none of you at all. 0:28 But, the Treehouse show is on its 100th episode 0:33 and we actually haven't won any awards at all. 0:36 >> It comes as a surprise to me. 0:40 Literally every day that I wake up and have not won an award. 0:42 >> This is not an award winning show so we decided [LAUGH] to to make our own award. 0:45 We were thinking about Best Treehouse Show, but we're not, 0:52 [MUSIC] 0:54 We're not really sure if that's, that's true. 0:55 So, we gave ourselves a participation award. 0:58 >> This is a lovely, lovely participation award. 1:01 >> And here it is. 1:04 [MUSIC] 1:05 It's coming up. 1:07 >> Nick, I also wanna say that like the Treehouse Show would be nothing 1:10 without its viewers, and its listeners, you 1:14 know truly this award belongs to you all. 1:16 You are the wind beneath our wings. 1:19 So first up,. 1:24 Here is everything you need to know about the CSS will-change property. 1:25 This is over on the Opera development blog 1:30 and it goes into the will-change property of CSS. 1:33 Now, the will-change property is something that is very, very interesting. 1:37 The introduction sums it up pretty well. 1:41 If you've ever noticed that Flicker 1:43 in web-kit based browsers while performing certain 1:45 CSS operations, than you've mostly, most 1:47 likely come across the term, Hardware Acceleration. 1:50 Now, CSS transforms can be done on the GPU, which will do Hardware Acceleration. 1:54 On the Graphics Processing Unit. 2:01 Not the CSS will-change property, tells the web browser 2:04 to off load these different transformations onto the GPU. 2:08 Now there are a lot of different things that you need 2:13 to take into account when working with the CSS will-change attribute. 2:16 Now, you might think, hey, if I'm just telling the browser that everything will 2:23 change, this will result in a massive speed-up of all of my rendering. 2:28 And that is incorrect. 2:34 In fact, there are a tons of 2:36 do's and don'ts when using the will-change property. 2:38 In fact, the very first don't is do not click, do not declare 2:41 that everything will change, because you can 2:45 actually slow down, and crash the browser. 2:47 Another do when using the will change property 2:51 is give the browser enough time to work. 2:54 What does that mean? 2:58 Well if you are telling the browser to off load 2:59 the transition of transforming on an elements hover it, the browser 3:03 does not have enough time to do that because the 3:09 attribute will be taken into account while the transition is happening. 3:12 Instead, you can apply different parts of the 3:17 will-change attribute to different states of the element. 3:22 So you can go from hover to active, and telling it, the transformation. 3:25 Will occur when you hover over the element and then when 3:30 it is active, that is when the transformation goes into effect. 3:33 >> That's really cool, so when you actually use the 3:38 GPU or some kind of property that uses the GPU. 3:42 Browser actually has to create a separate compositing layer. 3:46 >> Mm-hm. 3:49 >> So using will-change tells the browser to create that layer 3:50 in advance so that's just ready to go as soon as that 3:55 change happens, because that flickering you're 3:58 seeing is that element being transferred 4:00 over to that different compositing layer that's being rendered on the GPU. 4:03 >> Exactly. 4:07 >> So if you use way too many of those 4:09 and just apply it to every element, it's gonna create- 4:12 >> It's like a party. 4:15 >> A ton of layers. 4:16 >> Yeah. 4:17 >> Yeah. 4:17 >> It's like when everything is important, nothing is important. 4:18 >> Exactly. 4:20 Very cool stuff. 4:22 So next up is HTML5 Forms Validation. 4:23 This is a really cool blog post. 4:27 In fact it's a, a three part series about HTML 5 web forms. 4:30 In the first part they covered the markup. 4:35 Second part covered CSS. 4:38 And this about the constraint validation API. 4:40 Now if you're not familiar, you can actually do. 4:44 Form validation in HTML 5 forms without any kind of JavaScript. 4:47 So you can use the invalid and required styles. 4:53 And they'll be applied on page load, and if you don't, for example, 4:57 want the formed validate, you can also use the no validate property. 5:02 There's a whole bunch of different stuff here. 5:08 Not really going to go into detail but mostly just wanted to 5:10 make you aware that all of this stuff exists, and it's pretty cool. 5:13 If you haven't checked out HTML5 Form Validation, definitely be sure to 5:19 look into it because it's starting to become a real usable thing pretty quickly. 5:24 >> Sometimes I feel like you've given me the no validate property. 5:30 Next up we have a project called Bounce.js. 5:36 Bounce.js lets you easily create CSS3 animations right in your web browser. 5:38 Let's go ahead and check this out. 5:45 So here we have a square on the screen. 5:46 That is really not that dramatic but what happens when we play this animation? 5:49 >> Whoa, what just happened? 5:55 >> Whoa, nothing, because we have to select a component first. 5:56 Now let's goa ahead and select a preset, we're just gonna spin. 5:58 Look at that, you see that? 6:02 Look at that. 6:02 Look at that. 6:03 That box is spinning. 6:04 That's not really that impressive, is it huh? 6:06 No, let's go have you add another component. 6:09 We can spin, scale, rotate. 6:11 What is going on on this website? 6:15 >> And you can do all of those things at once by combining those components. 6:17 >> What! 6:22 >> Pretty amazing! 6:22 >> Isn't It? 6:23 Look at this. 6:24 And now, so here we go. 6:25 You can combine as many of these as you want to. 6:27 And then, this is the best part of the website, you can click export CSS. 6:30 >> Woah. 6:35 >> It will generate all this for you and it saves you 6:36 all the work of typing every single one of these things out. 6:40 >> That is way too many CSS's. 6:43 >> [LAUGH] Yeah. 6:46 [LAUGH] It's like a css party. 6:46 >> Wow. 6:49 >> I want to be invited to the CSS party. 6:50 Anyways, you can find a link to bounce.js in our 6:52 show notes which you check out at youtube.com/gotreehouse or search for 6:54 us in iTunes, we are the Treehouse Show and don't 6:58 forget to check us out for 30 free days of www.teamtreehouse.com/show. 7:00 >> It's an award-winning show now. 7:05 >> Mm-hm. 7:08 >> Yep. 7:09 Thanks for participating. 7:09 Thank you Jason. 7:11 Next up is vertical aligning anything with just three lines of CSS. 7:13 I can see you're staring at this. 7:18 Do you think, Do you think that's solid gold? 7:20 >> I just like the trophy. 7:22 >> We should probably lock that up somewhere. 7:24 >> Nah, it's probably fine. 7:26 >> Yeah. 7:28 >> I mean I Tweet my credit card number when I wanna buy something, So. 7:28 >> Yeah, that's very good. 7:32 >> You just ask the internet to do it for you,. 7:32 >> Mm-hm. 7:33 >> Nice. 7:34 >> Well next up is vertically aligning anything with just three lines 7:34 of CSS, You may have tried to vertically align things in the past. 7:39 And it can be pretty. 7:44 Difficult to do. 7:46 However, this is a fairly elegant solution. 7:48 So, to the element that you're trying to select, you just say position relative. 7:51 The top is set to 50% and then you set a translateY transform to negative 50%. 7:57 And, that will vertically align the element and something that was 8:06 pointed out a little bit later on was that the element 8:11 could look blurry because it could end up on a half 8:15 pixel since you're telling it to translate in terms of percentages. 8:18 So, in order to mitigate that, you just say transform-style 8:23 preserve-3d and it should actually be a little bit more crisp. 8:27 But, anyway, you can see what that looks like here. 8:33 So here's some vertically aligned elements. 8:35 There's a cat and, hey let's go swimming. 8:38 Up here you can also see how you might do this in Sass and use a, use a mix in 8:41 or I should say extension to actually include that into your code very easily. 8:48 Oh, there's the mix in. 8:54 That's what I was looking for. 8:55 Very cool. 8:56 And that's it. 8:57 >> Very nice. 8:58 >> Time for the next link now. 8:59 >> Next up we have a project called dc.js. 9:01 This is a Dimensional Charting JavaScript library. 9:04 Hence those initials. 9:08 Now if we take a look at that the dc.js 9:10 website, let's go ahead and jump straight to an example. 9:13 Here is the Nasdaq 100 index for a whole lot of time. 9:16 There are something like 30 years in here and you might say, wow. 9:21 I've seen all of these charts before, this is not 9:25 very impressive, why are you showing us this charting library? 9:28 Well, because it is completely dynamic and there is 9:31 a huge amount of data in this record set. 9:35 There is something like 7,000 different items 9:38 that this is going through and processing. 9:40 And actually you can scroll inside of this little 9:43 axis right here that shows all of the different years. 9:48 Scroll in and out. 9:51 And not only is it changing the 9:52 data, it is smoothly animating and transitioning everything. 9:54 Now if we look up here, it is, okay, here we go. 9:59 The last 27 years, this is 27 years of data. 10:04 Now, we can take a look at the source code for that particular chart. 10:09 You can see we are telling it what kind of chart we want. 10:14 There are pie charts, bar charts, line charts, and bubble charts. 10:18 Then it goes ahead and applies the mark up. 10:23 And then loads the data. 10:27 This is, this data is being loaded from a csv file. 10:30 So it needs to be formatted. 10:34 And it uses d3.js to apply different time formatting and parsing as well. 10:36 Then it also allows you to cross filter dimensions 10:44 in groups, using these very, very easy JavaScript reduced functions. 10:47 I am joking about that. 10:53 Those are not easy to write at all. 10:54 It's actually a little bit complicated, but once you've been doing 10:56 d3.js for a little while this stuff becomes a lot easier. 10:59 Anyway, this is a great charting library that allows you to 11:03 do a lot of different things and do them very performantly. 11:06 We're not gonna go through all of this, but 11:08 make sure to check it out in the show notes. 11:10 >> Very nice stuff. 11:13 Well next up is a couple of used cases for calc, this is actually a little bit of an 11:13 older article from Chris Coyier on the CSS Tricks 11:19 blog but it's still very relevant and very cool stuff. 11:23 So, basically calc is CSS function that allows you to natively do simple math. 11:27 Now you might be wondering, hey, can't just CSS Preprocessor like 11:35 Sass or Less, actually take care of the calculations for me? 11:39 >> Yeah. 11:43 Can't CSS or SAS pre-processors, take care of these transformations for me? 11:43 Calculations? 11:48 >> Well, the answer is [LAUGH] yes and no. 11:48 It can do some things, but no Preprocessor will ever be 11:52 able to do things, that mean to happen at rendered time. 11:56 >> Not with that attitude. 11:59 >> Such as [LAUGH] mixing units. 12:01 So right here. 12:03 There's an example where calc is being used 12:04 to mix a percentage unit with an em unit. 12:07 So that's pretty cool. 12:10 There's surprisingly good browser support. 12:12 I'll let you read about that on your own. 12:15 I wanna scroll down here to the second example. 12:18 I though this was pretty nifty. 12:21 You can actually use calc to say how many pixels 12:23 you want something to be from the bottom right corner. 12:27 That's actually somewhat difficult to pull off but 12:31 with calc you can do it fairly easily. 12:34 Another example is Use Case #4 here, Showing Math is Easier To Understand. 12:38 I like this a lot because often times. 12:43 Say for example you're doing some column calculations or 12:46 you're doing a responsive grid or something like that 12:49 and you have these really messy percentages, that require 12:53 a lot of significant digits to avoid rounding errors. 12:57 However, down here, you can see that calc shows exactly what's happening with math. 13:00 So, it's just a 100% divided by say seven. 13:06 Or seven times two and so on. 13:10 So you avoid any of these magic 13:13 numbers and save this hypothetical seven column grid. 13:15 So, pretty cool stuff. 13:20 Definitely be sure to check this one out and try using it in your own CSS. 13:22 >> Oh, very nice. 13:27 >> Mm-hm. 13:28 >> Well that's about all we have time for. 13:29 Nick, who are you on Twitter? 13:30 >> I am @nickrp. 13:31 >> And I am @jseifer. 13:32 Make sure to follow our Participation Trophy, @treehouseshowparticipationtrophy. 13:34 For more information on anything we talked about, 13:39 check out our show notes at youtube.com/gotreehouse You 13:41 can also search for us iTunes, we are The Treehouse Show don't forget to rate us. 13:44 And also don't forget for a 30 13:49 day free Treehouse head on over to teamtreehouse.com/show. 13:51 Thank you so much for watching and we will see you next week. 13:55 [MUSIC]. 13:59 [SOUND] It's cute, you know, those talons, beast. 14:09 >> It's very talented. 14:16 Do you think when it goes to a party it gets to beak the ice? 14:20 We're really getting along well, you know, birds of a feather. 14:26 >> Hm. 14:29 >> What 14:29 kind of bottled water do you think it drinks? 14:33 Evian? 14:36 They hope I didn't give you claws for alarm there. 14:40 >> Wow, these are getting worse and worse. 14:44

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

Sign up