Episode 149: Performance Tools, Material Design, Sliders

I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:01 >> And you're watching The Treehouse Show, your weekly dose of 0:02 Internet where we talk about all things web design, web development, and more. 0:04 >> In this episode we'll be talking about performance tools, 0:08 material design, sliders, and more. 0:10 >> Let's check it out. 0:14 [MUSIC] 0:15 First up, we have a wonderful blog post over on CSS-TRICKS that is 0:20 rounding up different performance tools for your website. 0:25 Now they break this up into several different sections, 0:29 from content delivery networks, like CloudFlare and MaxCDN, 0:33 all the way through to performance testing, developer tools and more. 0:38 Now what should you be using when you are analyzing the performance of your website? 0:43 Well, the answer is every single one of the things on this page. 0:47 >> Hm. 0:51 >> No, first you'll start with a content delivery network and 0:52 what that's going to do is distribute the assets to your website around the world, 0:55 in order to deliver them to your users as fast as possible, 1:00 no matter where they are around the world. 1:03 Now there are a few different CDNs to chose from over on the roundup post here. 1:06 Pretty much you can read about that and figure out which one makes sense for you. 1:12 Next there are a bunch of different performance testing services. 1:17 And these things will tell you how your websites are doing, what is loading 1:21 quickly, how quickly that first byte is served to your different users. 1:25 And then some of these will even make suggestions about how you can fix that. 1:30 One of those examples is Google PageSpeed which will analyze and 1:34 also give you hints for optimizing your site according to best practices. 1:39 Now something else that's kind of cool, 1:45 there is a command line program to access page speed insights with reporting, 1:46 and then you can find that in the post as well. 1:51 I'm not gonna go over all of these, 1:54 but you can see there are a ton of different ones to choose from. 1:56 Next there are performance testing tools and developer tools that you can use 2:00 in order to check out how your site's going, and that's gonna be something 2:04 that you're gonna be using locally like Chrome's Developer Tools. 2:07 And you can use the Audit and Network tabs to figure that out. 2:11 Now there are just a whole bunch of these things in this blog post. 2:15 I really recommend you check that out in the show notes, 2:18 which you can find right below this video. 2:20 >> Very cool stuff. 2:22 Well, next up is a blog post called The Making Of "In Pieces": Designing 2:23 an Interactive Exhibition with CSS Clip Paths. 2:29 Now- >> I thought In Pieces was 2:33 a documentary about our relationship. 2:34 >> This is actually In Pieces. 2:40 It is a website that showcases endangered species, 2:42 kind of like Jason, and we can flick through here and 2:47 look at these different animals. 2:52 Look at this. 2:56 And if you haven't heard of these animals, 2:57 that's probably because they're endangered. 2:58 Each one of these animals is made out of 30 triangles or polygons. 3:02 And as you flip through each one, 3:08 the polygons rearrange themselves to create the new animal. 3:12 Look at that. There's a red panda. 3:16 That's [CROSSTALK] pretty cool. 3:17 >> That's how it works in real life too, right? 3:19 >> No, not quite, not quite. 3:20 If we go back to the blog post here. 3:24 This is a really long post on Smashing magazine about how this was put together. 3:27 It looks pretty simple visually and it's a nice clean design, 3:34 but it's basically based entirely on the CSS property called clip-path. 3:39 Now with clip-path you can do something like this. 3:46 So you can take a div and apply the clip-path property and 3:51 give it a polygon that's basically a set of parameters. 3:57 And so here we have three different coordinates, and 4:02 each set of coordinates is where these vectors should go and 4:07 it forms the face of this polygon. 4:12 So through this you can start to imagine how you could create 4:14 more complicated shapes using a collection of these triangles. 4:18 So if we scroll down a little bit more here, 4:24 there is some concept art for how these illustrations came to be. 4:27 And then they used this special tracing technique. 4:32 It's pretty cool. 4:37 Definitely be sure to check that out. 4:38 But then a little bit further down they talk about how they did the animations, 4:41 and this is pretty neat. 4:46 They stored all of the animations, or all of the animals, I should say, in an array, 4:48 and then they cycle through each one just by applying a different class. 4:54 So all of the polygons rearrange themselves when the class changes. 4:59 And to do the animations, or the actual polygonal transitions, 5:05 they do the same type of thing where they have a couple of different states. 5:10 Here we go. 5:15 There's state one, two, three, or even four, and 5:16 every so often they use JavaScript to cycle through each one of these states. 5:21 So they'll add a class and then remove a class, and 5:25 the CSS will use a transition to actually go between the two states. 5:29 So pretty cool stuff. 5:36 There's a lot more in this post. 5:37 I actually summarized it pretty quickly. 5:39 But definitely be sure to check this out. 5:41 >> Yeah, there is so much of that post, actually, 5:43 you might wanna read it in pieces. 5:47 Next up we have a project called Material Design Light. 5:50 This is a CSS framework that doesn't rely on any external 5:53 JavaScript libraries to help you implement material design in your website. 5:57 Hey, that sounds interesting, but let's just go ahead and 6:03 look at some of the components and templates and demos. 6:05 So wow, look at this. 6:09 Here's some badges that you can put on the site. 6:10 Let's say okay, I have a bunch of notifications. 6:12 Click, dismiss, boom, done. 6:14 There are buttons that you can put on your site. 6:17 Look at that, that's a circular button [CROSSTALK] with a plus inside it. 6:18 >> Nice, that's my favorite kind of button. 6:21 >> Yeah, and you can even put different colors on all these buttons. 6:23 You're not limited to circles. 6:27 You can also use rectangles and colors inside of rectangles. 6:29 >> Man, at Google they just thought of everything. 6:33 >> There is literally no end. 6:35 Except for those two things actually. 6:38 You can put cards in here. 6:40 They'll have a little background with a icon on top and some text. 6:41 So it's very easy to implement a card. 6:46 You just have these several nested divs with all of these different 6:48 styles that come in then to implement this kind of card design. 6:53 Now pretty much everything that you would expect from a CSS framework is here, and 6:58 you can go ahead and 7:02 customize it with a nice little preview button here on the side. 7:03 So if I wanted to preview this theme that was 7:07 different shades of green, that's what it would look like. 7:11 And you get a little menu there with some links on the side. 7:14 No, I don't like that one. 7:18 Let me go ahead and try a different one. 7:19 There, that's much better. 7:20 Then just hit the Download button and you are ready to go. 7:21 Now this is gonna be a little tiny bit different than some of the other 7:26 material design frameworks that we've had on the show 7:28 because it doesn't require any JavaScript frameworks in order to load. 7:31 Anyway, if material design is something you are interested in implementing on your 7:36 site, make sure to check this out and it could materialize on your own webpage. 7:39 >> Good joke. 7:46 Next up is. 7:47 >> Did you say the single material? 7:48 No, forget about that one, that was bad. 7:51 >> Next up is a post over on the codrops blog called Zoom Slider. 7:57 This is a pretty good one. 8:03 If you click View demo, you can see what this looks like. 8:04 So here we have a couple of different things where you can- 8:08 >> Now when you say slider, 8:11 is that like a mini burger? 8:12 >> I don't see any hamburger menus. 8:15 >> Really hungry. 8:17 >> Yeah. 8:19 We can slide through each one of these, and these are different Apple products. 8:21 And if you click on one of these, if I click the zoom button actually, 8:26 it will zoom into them and sort of show this screenshot here and 8:32 give you some more information. 8:36 You can click the X and come back out. 8:37 Let's try another one. 8:39 Let's try this Apple Watch. 8:40 Look at that. 8:43 >> Wow. 8:44 >> Pretty amazing. 8:45 >> Now you need electricity to make this work, so 8:46 you can kind of call it the electric slide. 8:49 >> So if we go back to the post here, you can see the HTML and CSS and 8:54 JavaScript all the way down here at the bottom. 9:01 Quite a lot of CSS there. 9:06 And there's a lot of JavaScript to make this work. 9:08 So this is really a blueprint for how you might put something like this together. 9:11 So they have all the HTML, CSS and JavaScript that you would need. 9:15 You can download the source right here. 9:19 But just a brief explanation as to how this is actually working. 9:21 Basically, there is a zoom area. 9:26 And then as the page gets scaled up, once the page is completely 9:30 covered with the zoomable area, they actually bring in the text. 9:36 So that is the zoom slider, pretty cool. 9:42 You could use that for, I don't know, hamburgers or 9:45 any other kind of food product [CROSSTALK] as an example usage. 9:49 >> I think implementing that on your page would be a real win, a landslide victory. 9:54 Next up we have a project called Summernote this is a WYSIWYG editor 10:00 built on Twitter Bootstrap. 10:05 So when you implement this in your page, 10:07 you will have a very nice text editor right there on the page. 10:09 Look, this is me writing text [CROSSTALK] and then, 10:13 wow, I could make that bold, too. 10:17 Look at that, Nick. 10:19 That is the power that you can wield with this text editor. 10:20 >> Now, it's summertime right now, 10:23 but what do you use in the wintertime if you wanna make notes? 10:25 >> Oh, no, you can use the same editor. 10:29 The name doesn't change in the winter or- >> So it controls the weather then. 10:32 >> No, it just controls text areas on the page. 10:38 >> Okay, I'm very confused, but continue. 10:40 >> Okay, so this is what it looks like and 10:43 you can actually customize all of this on the page. 10:46 So let's say we wanna put Nick's name in Comic Sans, 10:49 there, and this nice shade of orange. 10:54 >> Alex, this is looking good. 10:57 >> 36 point font. 10:58 >> Can you send that to me? 10:59 >> Yeah, I will. 11:00 >> Change my email signature. 11:01 >> [LAUGH] It's perfect. 11:02 So [LAUGH] this is the example that we have right here. 11:05 And you can actually customize pretty much everything about this. 11:09 So there's a couple different versions of it. 11:12 You'll notice that there are some more options over here. 11:14 You can go full screen. 11:17 You can have a view of the code. 11:18 Throw in tables. 11:20 Pretty much anything you want. 11:21 Now this is really easy to get started with. 11:22 You just initialize the editor right on the page 11:26 with this Summernote function and you are pretty much good to go. 11:30 Now it's also themeable, and there is a very thorough API, 11:36 should you want to customize it a lot. 11:40 You wanna rip out every single part of it, go ahead. 11:44 You wanna implement a new tool bar? 11:46 You can do that, and 11:48 it's just a short journey through the documentation to learn about how. 11:49 So anyway if you have a site that already uses Bootstrap I recommend using 11:53 Summernote anytime of year if you need a WYSIWYG editor for it. 11:57 >> Very cool stuff. 12:02 Well, that is all we have time for this week. 12:03 I am @nickrp at Twitter. 12:05 >> And I'm @jseifer. 12:07 For more information for 12:08 anything we've talked about make sure to check out the show notes below this video. 12:09 Thanks, everybody, for watching and we will see you next week. 12:12 [MUSIC] 12:14

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

Sign up