1 00:00:00,480 --> 00:00:01,310 I'm Nick Pettit. 2 00:00:01,310 --> 00:00:02,310 >> I'm Jason Seifer. 3 00:00:02,310 --> 00:00:05,160 >> And you're watching the Treehouse Show, your weekly dose of Internets 4 00:00:05,160 --> 00:00:08,410 where we talk about all things, web design, web development, and more. 5 00:00:08,410 --> 00:00:13,990 >> For a free month's trial of Treehouse, head on over to TeamTreehouse.com/show. 6 00:00:13,990 --> 00:00:16,670 In this episode, we'll be talking about the CSS 7 00:00:16,670 --> 00:00:22,120 will-change Property, HTML Forms, Vertical aligning things, and more. 8 00:00:22,120 --> 00:00:23,273 Let's check it out. 9 00:00:23,273 --> 00:00:28,303 [MUSIC]. 10 00:00:28,303 --> 00:00:33,048 Well, this may come as a surprise to many of you, or none of you at all. 11 00:00:33,048 --> 00:00:36,819 But, the Treehouse show is on its 100th episode 12 00:00:36,819 --> 00:00:40,210 and we actually haven't won any awards at all. 13 00:00:40,210 --> 00:00:42,140 >> It comes as a surprise to me. 14 00:00:42,140 --> 00:00:45,920 Literally every day that I wake up and have not won an award. 15 00:00:45,920 --> 00:00:52,110 >> This is not an award winning show so we decided [LAUGH] to to make our own award. 16 00:00:52,110 --> 00:00:54,389 We were thinking about Best Treehouse Show, but we're not, 17 00:00:54,389 --> 00:00:55,437 [MUSIC] 18 00:00:55,437 --> 00:00:58,234 We're not really sure if that's, that's true. 19 00:00:58,234 --> 00:01:01,750 So, we gave ourselves a participation award. 20 00:01:01,750 --> 00:01:04,840 >> This is a lovely, lovely participation award. 21 00:01:04,840 --> 00:01:05,678 >> And here it is. 22 00:01:05,678 --> 00:01:07,428 [MUSIC] 23 00:01:07,428 --> 00:01:10,084 It's coming up. 24 00:01:10,084 --> 00:01:14,132 >> Nick, I also wanna say that like the Treehouse Show would be nothing 25 00:01:14,132 --> 00:01:16,902 without its viewers, and its listeners, you 26 00:01:16,902 --> 00:01:19,550 know truly this award belongs to you all. 27 00:01:19,550 --> 00:01:21,190 You are the wind beneath our wings. 28 00:01:24,610 --> 00:01:25,990 So first up,. 29 00:01:25,990 --> 00:01:30,740 Here is everything you need to know about the CSS will-change property. 30 00:01:30,740 --> 00:01:33,650 This is over on the Opera development blog 31 00:01:33,650 --> 00:01:37,300 and it goes into the will-change property of CSS. 32 00:01:37,300 --> 00:01:41,210 Now, the will-change property is something that is very, very interesting. 33 00:01:41,210 --> 00:01:43,050 The introduction sums it up pretty well. 34 00:01:43,050 --> 00:01:45,200 If you've ever noticed that Flicker 35 00:01:45,200 --> 00:01:47,580 in web-kit based browsers while performing certain 36 00:01:47,580 --> 00:01:50,670 CSS operations, than you've mostly, most 37 00:01:50,670 --> 00:01:54,580 likely come across the term, Hardware Acceleration. 38 00:01:54,580 --> 00:02:01,440 Now, CSS transforms can be done on the GPU, which will do Hardware Acceleration. 39 00:02:01,440 --> 00:02:04,180 On the Graphics Processing Unit. 40 00:02:04,180 --> 00:02:08,690 Not the CSS will-change property, tells the web browser 41 00:02:08,690 --> 00:02:13,780 to off load these different transformations onto the GPU. 42 00:02:13,780 --> 00:02:16,240 Now there are a lot of different things that you need 43 00:02:16,240 --> 00:02:23,660 to take into account when working with the CSS will-change attribute. 44 00:02:23,660 --> 00:02:28,920 Now, you might think, hey, if I'm just telling the browser that everything will 45 00:02:28,920 --> 00:02:34,650 change, this will result in a massive speed-up of all of my rendering. 46 00:02:34,650 --> 00:02:36,910 And that is incorrect. 47 00:02:36,910 --> 00:02:38,625 In fact, there are a tons of 48 00:02:38,625 --> 00:02:41,290 do's and don'ts when using the will-change property. 49 00:02:41,290 --> 00:02:45,160 In fact, the very first don't is do not click, do not declare 50 00:02:45,160 --> 00:02:47,740 that everything will change, because you can 51 00:02:47,740 --> 00:02:51,540 actually slow down, and crash the browser. 52 00:02:51,540 --> 00:02:54,800 Another do when using the will change property 53 00:02:54,800 --> 00:02:58,480 is give the browser enough time to work. 54 00:02:58,480 --> 00:02:59,540 What does that mean? 55 00:02:59,540 --> 00:03:03,260 Well if you are telling the browser to off load 56 00:03:03,260 --> 00:03:09,170 the transition of transforming on an elements hover it, the browser 57 00:03:09,170 --> 00:03:12,020 does not have enough time to do that because the 58 00:03:12,020 --> 00:03:17,150 attribute will be taken into account while the transition is happening. 59 00:03:17,150 --> 00:03:22,025 Instead, you can apply different parts of the 60 00:03:22,025 --> 00:03:25,580 will-change attribute to different states of the element. 61 00:03:25,580 --> 00:03:30,360 So you can go from hover to active, and telling it, the transformation. 62 00:03:30,360 --> 00:03:33,820 Will occur when you hover over the element and then when 63 00:03:33,820 --> 00:03:38,020 it is active, that is when the transformation goes into effect. 64 00:03:38,020 --> 00:03:42,680 >> That's really cool, so when you actually use the 65 00:03:42,680 --> 00:03:46,320 GPU or some kind of property that uses the GPU. 66 00:03:46,320 --> 00:03:49,995 Browser actually has to create a separate compositing layer. 67 00:03:49,995 --> 00:03:50,688 >> Mm-hm. 68 00:03:50,688 --> 00:03:55,160 >> So using will-change tells the browser to create that layer 69 00:03:55,160 --> 00:03:58,790 in advance so that's just ready to go as soon as that 70 00:03:58,790 --> 00:04:00,720 change happens, because that flickering you're 71 00:04:00,720 --> 00:04:03,400 seeing is that element being transferred 72 00:04:03,400 --> 00:04:07,960 over to that different compositing layer that's being rendered on the GPU. 73 00:04:07,960 --> 00:04:09,190 >> Exactly. 74 00:04:09,190 --> 00:04:12,700 >> So if you use way too many of those 75 00:04:12,700 --> 00:04:15,360 and just apply it to every element, it's gonna create- 76 00:04:15,360 --> 00:04:16,240 >> It's like a party. 77 00:04:16,240 --> 00:04:17,120 >> A ton of layers. 78 00:04:17,120 --> 00:04:17,650 >> Yeah. 79 00:04:17,650 --> 00:04:18,070 >> Yeah. 80 00:04:18,070 --> 00:04:20,580 >> It's like when everything is important, nothing is important. 81 00:04:20,580 --> 00:04:22,200 >> Exactly. 82 00:04:22,200 --> 00:04:23,650 Very cool stuff. 83 00:04:23,650 --> 00:04:27,860 So next up is HTML5 Forms Validation. 84 00:04:27,860 --> 00:04:30,070 This is a really cool blog post. 85 00:04:30,070 --> 00:04:35,680 In fact it's a, a three part series about HTML 5 web forms. 86 00:04:35,680 --> 00:04:38,040 In the first part they covered the markup. 87 00:04:38,040 --> 00:04:40,780 Second part covered CSS. 88 00:04:40,780 --> 00:04:44,150 And this about the constraint validation API. 89 00:04:44,150 --> 00:04:47,370 Now if you're not familiar, you can actually do. 90 00:04:47,370 --> 00:04:53,860 Form validation in HTML 5 forms without any kind of JavaScript. 91 00:04:53,860 --> 00:04:57,550 So you can use the invalid and required styles. 92 00:04:57,550 --> 00:05:02,610 And they'll be applied on page load, and if you don't, for example, 93 00:05:02,610 --> 00:05:08,550 want the formed validate, you can also use the no validate property. 94 00:05:08,550 --> 00:05:10,720 There's a whole bunch of different stuff here. 95 00:05:10,720 --> 00:05:13,890 Not really going to go into detail but mostly just wanted to 96 00:05:13,890 --> 00:05:19,460 make you aware that all of this stuff exists, and it's pretty cool. 97 00:05:19,460 --> 00:05:24,590 If you haven't checked out HTML5 Form Validation, definitely be sure to 98 00:05:24,590 --> 00:05:30,690 look into it because it's starting to become a real usable thing pretty quickly. 99 00:05:30,690 --> 00:05:33,260 >> Sometimes I feel like you've given me the no validate property. 100 00:05:36,120 --> 00:05:38,901 Next up we have a project called Bounce.js. 101 00:05:38,901 --> 00:05:45,390 Bounce.js lets you easily create CSS3 animations right in your web browser. 102 00:05:45,390 --> 00:05:46,950 Let's go ahead and check this out. 103 00:05:46,950 --> 00:05:49,550 So here we have a square on the screen. 104 00:05:49,550 --> 00:05:55,060 That is really not that dramatic but what happens when we play this animation? 105 00:05:55,060 --> 00:05:56,070 >> Whoa, what just happened? 106 00:05:56,070 --> 00:05:58,720 >> Whoa, nothing, because we have to select a component first. 107 00:05:58,720 --> 00:06:02,150 Now let's goa ahead and select a preset, we're just gonna spin. 108 00:06:02,150 --> 00:06:02,940 Look at that, you see that? 109 00:06:02,940 --> 00:06:03,260 Look at that. 110 00:06:03,260 --> 00:06:04,740 Look at that. 111 00:06:04,740 --> 00:06:06,860 That box is spinning. 112 00:06:06,860 --> 00:06:09,070 That's not really that impressive, is it huh? 113 00:06:09,070 --> 00:06:11,760 No, let's go have you add another component. 114 00:06:11,760 --> 00:06:15,200 We can spin, scale, rotate. 115 00:06:15,200 --> 00:06:17,760 What is going on on this website? 116 00:06:17,760 --> 00:06:22,000 >> And you can do all of those things at once by combining those components. 117 00:06:22,000 --> 00:06:22,880 >> What! 118 00:06:22,880 --> 00:06:23,880 >> Pretty amazing! 119 00:06:23,880 --> 00:06:24,890 >> Isn't It? 120 00:06:24,890 --> 00:06:25,730 Look at this. 121 00:06:25,730 --> 00:06:27,930 And now, so here we go. 122 00:06:27,930 --> 00:06:30,840 You can combine as many of these as you want to. 123 00:06:30,840 --> 00:06:35,420 And then, this is the best part of the website, you can click export CSS. 124 00:06:35,420 --> 00:06:36,490 >> Woah. 125 00:06:36,490 --> 00:06:40,340 >> It will generate all this for you and it saves you 126 00:06:40,340 --> 00:06:43,860 all the work of typing every single one of these things out. 127 00:06:43,860 --> 00:06:46,110 >> That is way too many CSS's. 128 00:06:46,110 --> 00:06:46,945 >> [LAUGH] Yeah. 129 00:06:46,945 --> 00:06:49,440 [LAUGH] It's like a css party. 130 00:06:49,440 --> 00:06:50,120 >> Wow. 131 00:06:50,120 --> 00:06:52,680 >> I want to be invited to the CSS party. 132 00:06:52,680 --> 00:06:54,850 Anyways, you can find a link to bounce.js in our 133 00:06:54,850 --> 00:06:58,370 show notes which you check out at youtube.com/gotreehouse or search for 134 00:06:58,370 --> 00:07:00,930 us in iTunes, we are the Treehouse Show and don't 135 00:07:00,930 --> 00:07:05,583 forget to check us out for 30 free days of www.teamtreehouse.com/show. 136 00:07:05,583 --> 00:07:08,779 >> It's an award-winning show now. 137 00:07:08,779 --> 00:07:09,464 >> Mm-hm. 138 00:07:09,464 --> 00:07:09,810 >> Yep. 139 00:07:09,810 --> 00:07:11,900 Thanks for participating. 140 00:07:11,900 --> 00:07:13,250 Thank you Jason. 141 00:07:13,250 --> 00:07:18,140 Next up is vertical aligning anything with just three lines of CSS. 142 00:07:18,140 --> 00:07:20,590 I can see you're staring at this. 143 00:07:20,590 --> 00:07:22,490 Do you think, Do you think that's solid gold? 144 00:07:22,490 --> 00:07:24,200 >> I just like the trophy. 145 00:07:24,200 --> 00:07:26,510 >> We should probably lock that up somewhere. 146 00:07:26,510 --> 00:07:28,140 >> Nah, it's probably fine. 147 00:07:28,140 --> 00:07:28,450 >> Yeah. 148 00:07:28,450 --> 00:07:31,180 >> I mean I Tweet my credit card number when I wanna buy something, So. 149 00:07:32,190 --> 00:07:32,410 >> Yeah, that's very good. 150 00:07:32,410 --> 00:07:33,900 >> You just ask the internet to do it for you,. 151 00:07:33,900 --> 00:07:34,266 >> Mm-hm. 152 00:07:34,266 --> 00:07:34,922 >> Nice. 153 00:07:34,922 --> 00:07:39,230 >> Well next up is vertically aligning anything with just three lines 154 00:07:39,230 --> 00:07:44,850 of CSS, You may have tried to vertically align things in the past. 155 00:07:44,850 --> 00:07:46,870 And it can be pretty. 156 00:07:46,870 --> 00:07:48,110 Difficult to do. 157 00:07:48,110 --> 00:07:51,750 However, this is a fairly elegant solution. 158 00:07:51,750 --> 00:07:56,510 So, to the element that you're trying to select, you just say position relative. 159 00:07:57,530 --> 00:08:06,200 The top is set to 50% and then you set a translateY transform to negative 50%. 160 00:08:06,200 --> 00:08:11,800 And, that will vertically align the element and something that was 161 00:08:11,800 --> 00:08:15,670 pointed out a little bit later on was that the element 162 00:08:15,670 --> 00:08:18,570 could look blurry because it could end up on a half 163 00:08:18,570 --> 00:08:23,030 pixel since you're telling it to translate in terms of percentages. 164 00:08:23,030 --> 00:08:27,128 So, in order to mitigate that, you just say transform-style 165 00:08:27,128 --> 00:08:33,610 preserve-3d and it should actually be a little bit more crisp. 166 00:08:33,610 --> 00:08:35,720 But, anyway, you can see what that looks like here. 167 00:08:35,720 --> 00:08:38,590 So here's some vertically aligned elements. 168 00:08:38,590 --> 00:08:41,780 There's a cat and, hey let's go swimming. 169 00:08:41,780 --> 00:08:48,570 Up here you can also see how you might do this in Sass and use a, use a mix in 170 00:08:48,570 --> 00:08:54,040 or I should say extension to actually include that into your code very easily. 171 00:08:54,040 --> 00:08:55,060 Oh, there's the mix in. 172 00:08:55,060 --> 00:08:56,500 That's what I was looking for. 173 00:08:56,500 --> 00:08:57,890 Very cool. 174 00:08:57,890 --> 00:08:58,820 And that's it. 175 00:08:58,820 --> 00:08:59,320 >> Very nice. 176 00:08:59,320 --> 00:09:01,200 >> Time for the next link now. 177 00:09:01,200 --> 00:09:04,450 >> Next up we have a project called dc.js. 178 00:09:04,450 --> 00:09:08,390 This is a Dimensional Charting JavaScript library. 179 00:09:08,390 --> 00:09:10,050 Hence those initials. 180 00:09:10,050 --> 00:09:13,180 Now if we take a look at that the dc.js 181 00:09:13,180 --> 00:09:16,310 website, let's go ahead and jump straight to an example. 182 00:09:16,310 --> 00:09:21,430 Here is the Nasdaq 100 index for a whole lot of time. 183 00:09:21,430 --> 00:09:25,710 There are something like 30 years in here and you might say, wow. 184 00:09:25,710 --> 00:09:28,630 I've seen all of these charts before, this is not 185 00:09:28,630 --> 00:09:31,410 very impressive, why are you showing us this charting library? 186 00:09:31,410 --> 00:09:35,110 Well, because it is completely dynamic and there is 187 00:09:35,110 --> 00:09:38,250 a huge amount of data in this record set. 188 00:09:38,250 --> 00:09:40,810 There is something like 7,000 different items 189 00:09:40,810 --> 00:09:43,440 that this is going through and processing. 190 00:09:43,440 --> 00:09:48,290 And actually you can scroll inside of this little 191 00:09:48,290 --> 00:09:51,190 axis right here that shows all of the different years. 192 00:09:51,190 --> 00:09:52,760 Scroll in and out. 193 00:09:52,760 --> 00:09:54,900 And not only is it changing the 194 00:09:54,900 --> 00:09:59,780 data, it is smoothly animating and transitioning everything. 195 00:09:59,780 --> 00:10:04,270 Now if we look up here, it is, okay, here we go. 196 00:10:04,270 --> 00:10:09,430 The last 27 years, this is 27 years of data. 197 00:10:09,430 --> 00:10:14,440 Now, we can take a look at the source code for that particular chart. 198 00:10:14,440 --> 00:10:18,170 You can see we are telling it what kind of chart we want. 199 00:10:18,170 --> 00:10:23,900 There are pie charts, bar charts, line charts, and bubble charts. 200 00:10:23,900 --> 00:10:26,940 Then it goes ahead and applies the mark up. 201 00:10:27,950 --> 00:10:30,300 And then loads the data. 202 00:10:30,300 --> 00:10:34,490 This is, this data is being loaded from a csv file. 203 00:10:34,490 --> 00:10:36,370 So it needs to be formatted. 204 00:10:36,370 --> 00:10:43,870 And it uses d3.js to apply different time formatting and parsing as well. 205 00:10:44,940 --> 00:10:47,630 Then it also allows you to cross filter dimensions 206 00:10:47,630 --> 00:10:53,690 in groups, using these very, very easy JavaScript reduced functions. 207 00:10:53,690 --> 00:10:54,980 I am joking about that. 208 00:10:54,980 --> 00:10:56,660 Those are not easy to write at all. 209 00:10:56,660 --> 00:10:59,445 It's actually a little bit complicated, but once you've been doing 210 00:10:59,445 --> 00:11:03,330 d3.js for a little while this stuff becomes a lot easier. 211 00:11:03,330 --> 00:11:06,760 Anyway, this is a great charting library that allows you to 212 00:11:06,760 --> 00:11:08,970 do a lot of different things and do them very performantly. 213 00:11:08,970 --> 00:11:10,770 We're not gonna go through all of this, but 214 00:11:10,770 --> 00:11:13,240 make sure to check it out in the show notes. 215 00:11:13,240 --> 00:11:13,980 >> Very nice stuff. 216 00:11:13,980 --> 00:11:19,800 Well next up is a couple of used cases for calc, this is actually a little bit of an 217 00:11:19,800 --> 00:11:23,145 older article from Chris Coyier on the CSS Tricks 218 00:11:23,145 --> 00:11:27,440 blog but it's still very relevant and very cool stuff. 219 00:11:27,440 --> 00:11:35,570 So, basically calc is CSS function that allows you to natively do simple math. 220 00:11:35,570 --> 00:11:39,710 Now you might be wondering, hey, can't just CSS Preprocessor like 221 00:11:39,710 --> 00:11:43,320 Sass or Less, actually take care of the calculations for me? 222 00:11:43,320 --> 00:11:43,720 >> Yeah. 223 00:11:43,720 --> 00:11:48,020 Can't CSS or SAS pre-processors, take care of these transformations for me? 224 00:11:48,020 --> 00:11:48,850 Calculations? 225 00:11:48,850 --> 00:11:52,130 >> Well, the answer is [LAUGH] yes and no. 226 00:11:52,130 --> 00:11:56,430 It can do some things, but no Preprocessor will ever be 227 00:11:56,430 --> 00:11:59,760 able to do things, that mean to happen at rendered time. 228 00:11:59,760 --> 00:12:01,100 >> Not with that attitude. 229 00:12:01,100 --> 00:12:03,530 >> Such as [LAUGH] mixing units. 230 00:12:03,530 --> 00:12:04,910 So right here. 231 00:12:04,910 --> 00:12:07,110 There's an example where calc is being used 232 00:12:07,110 --> 00:12:10,940 to mix a percentage unit with an em unit. 233 00:12:10,940 --> 00:12:12,850 So that's pretty cool. 234 00:12:12,850 --> 00:12:15,930 There's surprisingly good browser support. 235 00:12:15,930 --> 00:12:18,350 I'll let you read about that on your own. 236 00:12:18,350 --> 00:12:21,560 I wanna scroll down here to the second example. 237 00:12:21,560 --> 00:12:23,780 I though this was pretty nifty. 238 00:12:23,780 --> 00:12:27,380 You can actually use calc to say how many pixels 239 00:12:27,380 --> 00:12:31,060 you want something to be from the bottom right corner. 240 00:12:31,060 --> 00:12:34,660 That's actually somewhat difficult to pull off but 241 00:12:34,660 --> 00:12:38,460 with calc you can do it fairly easily. 242 00:12:38,460 --> 00:12:43,820 Another example is Use Case #4 here, Showing Math is Easier To Understand. 243 00:12:43,820 --> 00:12:46,190 I like this a lot because often times. 244 00:12:46,190 --> 00:12:49,600 Say for example you're doing some column calculations or 245 00:12:49,600 --> 00:12:53,680 you're doing a responsive grid or something like that 246 00:12:53,680 --> 00:12:57,320 and you have these really messy percentages, that require 247 00:12:57,320 --> 00:13:00,760 a lot of significant digits to avoid rounding errors. 248 00:13:00,760 --> 00:13:06,230 However, down here, you can see that calc shows exactly what's happening with math. 249 00:13:06,230 --> 00:13:10,210 So, it's just a 100% divided by say seven. 250 00:13:10,210 --> 00:13:13,080 Or seven times two and so on. 251 00:13:13,080 --> 00:13:15,830 So you avoid any of these magic 252 00:13:15,830 --> 00:13:20,510 numbers and save this hypothetical seven column grid. 253 00:13:20,510 --> 00:13:22,520 So, pretty cool stuff. 254 00:13:22,520 --> 00:13:27,470 Definitely be sure to check this one out and try using it in your own CSS. 255 00:13:27,470 --> 00:13:28,704 >> Oh, very nice. 256 00:13:28,704 --> 00:13:29,540 >> Mm-hm. 257 00:13:29,540 --> 00:13:30,850 >> Well that's about all we have time for. 258 00:13:30,850 --> 00:13:31,830 Nick, who are you on Twitter? 259 00:13:31,830 --> 00:13:32,990 >> I am @nickrp. 260 00:13:32,990 --> 00:13:34,360 >> And I am @jseifer. 261 00:13:34,360 --> 00:13:39,530 Make sure to follow our Participation Trophy, @treehouseshowparticipationtrophy. 262 00:13:39,530 --> 00:13:41,430 For more information on anything we talked about, 263 00:13:41,430 --> 00:13:44,520 check out our show notes at youtube.com/gotreehouse You 264 00:13:44,520 --> 00:13:49,790 can also search for us iTunes, we are The Treehouse Show don't forget to rate us. 265 00:13:49,790 --> 00:13:51,719 And also don't forget for a 30 266 00:13:51,719 --> 00:13:55,586 day free Treehouse head on over to teamtreehouse.com/show. 267 00:13:55,586 --> 00:13:59,153 Thank you so much for watching and we will see you next week. 268 00:13:59,153 --> 00:14:09,713 [MUSIC]. 269 00:14:09,713 --> 00:14:16,793 [SOUND] It's cute, you know, those talons, beast. 270 00:14:16,793 --> 00:14:20,239 >> It's very talented. 271 00:14:20,239 --> 00:14:23,270 Do you think when it goes to a party it gets to beak the ice? 272 00:14:26,720 --> 00:14:29,000 We're really getting along well, you know, birds of a feather. 273 00:14:29,000 --> 00:14:29,290 >> Hm. 274 00:14:29,290 --> 00:14:29,790 >> What 275 00:14:33,510 --> 00:14:35,200 kind of bottled water do you think it drinks? 276 00:14:36,340 --> 00:14:36,840 Evian? 277 00:14:40,670 --> 00:14:42,770 They hope I didn't give you claws for alarm there. 278 00:14:44,590 --> 00:14:46,970 >> Wow, these are getting worse and worse.