Episode 145: Justice, Carousels, Centering in CSS

I'm Nick Pettit. 0:00 >> I'm Jason Swifer. 0:01 >> And you're watching the Treehouse Show. 0:02 Your weekly dose of internets. 0:03 Where we talk about all things web design, web development and more. 0:04 >> In this episode, we'll be talking about JavaScript web page performance metrics, 0:07 carousel, MV-ish Frameworks and more. 0:11 >> Let's check it out. 0:16 [MUSIC] 0:16 >> First up we have this really cool utility called Justice. 0:22 Justice is an embeddable script for displaying webpage performance metrics. 0:24 >> Who made this? 0:31 Is this Batman made this? 0:32 >> No, it was a bunch of people. 0:34 I think a whole league of them. 0:35 Like the Justice League. 0:40 >> Yeah. Yeah. 0:41 I got the joke. 0:41 Yeah. >> I was kind of 0:43 playing on your- >> Yeah. 0:44 We're taking it to far now. 0:44 >> Joke about Batman. 0:45 So, here is Justice. 0:46 And if you look at the bottom of the screen right here. 0:49 It shows you different metrics on the page. 0:52 It shows you how long it takes to repaint. 0:55 The current FPS count. 0:57 And it also shows you how easy this is to use and initialize. 1:00 So just include the Justice JavaScript and call Justice.init. 1:05 If only getting real justice were that easy. 1:10 Actually, we're kinda lucky it is not, because our puns are so horrible. 1:14 So anyway you can create budgets to stay within. 1:19 And if you're over budget, it will display different colors. 1:22 This very, very easy to use. 1:25 Not much to say about it, but if you are developing 1:27 any webpages where FPS is important, definitely check this out. 1:31 >> And FPS, of course, stands for frames per second. 1:35 And you wanna try to stay above 60 frames per second on any website. 1:38 So if you're doing some cool scrolling effect or animation. 1:43 That can drop your frames per second. 1:47 So using this tool you can measure something like that. 1:49 Next up is this really cool blog post from Dan Cortes. 1:52 How to make a carousel using only HTML and CSS. 2:02 No JavaScript required. 2:08 Now, when I first saw that, I was like, well how is that even possible? 2:11 >> Hey look at that, it's a bunch of people on a field. 2:17 >> That's right. 2:19 So. >> Do you think that when he was looking 2:20 at this, he's like oh, the ball's in your Cortes? 2:22 That's his last name. 2:24 >> I don't know if that's how you say it. 2:26 But yeah, so this uses no JavaScript, you can click through. 2:29 And it will go to the next image without any kind of JavaScript. 2:33 >> That's not possible. 2:39 >> And I thought how in the world is Dan C doing this? 2:40 Well, the HTML is actually pretty straightforward. 2:45 I'll let you go to the blog post. 2:50 If you want to see how that is put together. 2:52 However, it is in the CSS, or SCSS, 2:56 in this particular case, where the magic happens. 3:00 So, there's Quite a lot of stuff here that's really just positioning. 3:04 And transforms. 3:10 And all that is important to making this work. 3:12 You have to have the buttons to actually click on. 3:15 And you want them to be in the right place. 3:17 And you want things to be transparent and all that. 3:19 The way this is actually working is by using the target pseudo element. 3:23 So, you'll see right here that says *target, 3:28 and then has a selector to grab the first item. 3:31 And it's setting the opacity to zero. 3:35 And one really nice thing about this blog post, 3:38 is that everything is very well commented. 3:39 There's these really large and detailed comments above each step. 3:42 So you can see how it's put together. 3:48 But by using that target pseudo class, 3:51 it's actually reading form the URI, what the user clicked on. 3:54 So if they click on one of those arrows, 3:59 it's going to grab the target plus each new item. 4:02 And you just have to crate a selector for each item you want to add. 4:07 Really cool technique, definitely be sure to check this one out. 4:12 I have not seen something quite like this before. 4:16 But it's a very smart use of the target pseudo class. 4:19 Next up we have a project called jsblocks. 4:23 This is a quote better MV-ish Framework. 4:27 Now, what's really nice about this framework it 4:31 supports all the things that you'd expect from a java script framework, 4:34 it's been a couple weeks since we talked about one. 4:37 But this supports two-way data binding. 4:39 And it has a nice built in utility library, for fast data manipulations. 4:42 Also it is really, really fast. 4:47 But probably the most interesting thing about this framework, 4:50 is that it also supports server-side rendering. 4:54 So what that means is, if you are using node.js, 4:59 you can render the entire page before it gets sent down to the client. 5:02 Now this means that your client is going to have a very quick initial load. 5:07 And things like SEO will work. 5:12 Google can index your page rather than having to go through and 5:15 click through all the JavaScript which may or may not load. 5:19 Depending on the framework that you used. 5:23 So, it's pretty easy to use. 5:24 Like I said, supports the two-way data binding. 5:26 And it has a really interesting query syntax. 5:29 Now, we're not gonna go through all of this. 5:32 I do recommend that you check it out in the show notes. 5:34 Especially if you want to get into something like server side rendering. 5:37 Which is really gonna be a lot more important these days. 5:41 >> Very cool stuff. 5:44 Next up is a tool that helps you center things in CSS. 5:45 It's appropriately titled How to Center in CSS. 5:50 So, what is it? 5:55 Well centering in CSS is surprisingly difficult, even in 2015. 5:56 Especially if you want to center things vertically, how do you do it? 6:03 Well, here is why it's so complicated. 6:08 There's a lot of different variables that you have to keep in mind. 6:10 Such as the alignment. 6:14 Whether or not the width and height is known or unknown. 6:16 And there's also browser support that you have to consider. 6:19 This tool breaks it all down into a step-by-step process. 6:24 So you can just check off each item, and fill in some information. 6:28 And then, it will give you the code that you need to center something. 6:32 So here, we have the content. 6:36 And it asks, well, what do you want to center? 6:39 Is it just Text, or is it a div, any block level element? 6:41 We'll go with text. 6:45 It'll say, how many lines of text do you have? 6:46 Well, we do know that. 6:50 Let's say it's three. 6:52 Do you know the line height of each line? 6:54 Sure, we'll sa we're going with 1M. 6:56 And then the container. 6:59 Well, how big is the container div? 7:01 Do you know the width and height? 7:04 Let's just say we don't. 7:06 And we don't know what the width and height is going to be. 7:07 Perhaps this is some user generated content of some sort. 7:11 And we're limiting the length of text. 7:15 But we don't necessarily know how things are going to wrap around, and so on. 7:17 Then, we have the alignment. 7:22 So, we can actually choose between left center and right. 7:25 And top, middle, and bottom for horizontal and vertical. 7:30 Surprise, this site isn't just for centering. 7:33 So we can align it however we want. 7:36 But let's say we want it to be right in the middle of the page. 7:37 We want it horizontal and vertically centered. 7:41 And we'll say, we want support for Internet Explorer 10. 7:44 We can say, generate code. 7:47 And then it says, the method for 7:49 this particular code, should be table cell. 7:54 If we want to have that IE support, and 7:58 we want to do all of the things that we specified. 8:00 Here's the code that we're gonna need. 8:02 However, let's say that well, I don't actually need IE support. 8:04 Maybe I'm deploying this to, I don't know, an internal network or something. 8:09 Where the browsers are already pre-installed. 8:13 And we know what the browser's gonna be, it's not IE. 8:16 Then it says well okay. 8:19 Then you can use Flexbox. 8:20 And here is the code to do that. 8:22 So this is a really great tool. 8:26 Because centering things in CSS is notoriously difficult. 8:29 It's really hard to get stuff particularly aligned vertically, and horizontally. 8:33 Especially if you don't know the exact size of the elements. 8:39 So definitely be sure to check this out. 8:43 If you ever get stuck trying to center something in CSS. 8:46 >> Yeah, it's very cool. 8:48 I especially like that surprise at the end. 8:50 Like, whoa, they went all out. 8:52 >> Yeah, didn't really expect that. 8:53 See that coming. 8:55 >> Next up, we have an ECMAScript compatibility table. 8:55 Now, this is going to be really useful if you are developing a JavaScript 8:59 application. 9:02 And need to know whether or 9:03 not certain platforms support the JavaScript that we are going to use. 9:04 Now, they have. 9:09 A bunch of different versions of ECMAScript up here. 9:11 ECMAScript is of course the specification for JavaScript. 9:13 And as things make their way into the ECMAScript standard, 9:17 you start to see them being supported in different browsers. 9:20 So I have The ECMAScript 5 table up here. 9:24 And you can see over on the left, 9:28 we have the feature name like Object.create, define property. 9:30 And then over on the right are the different environments, 9:34 and green means supported. 9:37 So we can see IE 9, 10, Firefox, and so on. 9:40 All support object.create, but the ES5 shim library does not. 9:44 So they have a really, really nice compatibility table for ECMA Script 5. 9:50 Which actually has quite a bit of support. 9:55 However, when we start going up in versions. 9:57 Well, we can see the things are not quite supported as much. 10:01 What's really cool about this though is for the, at least ECMAScript 6 standards. 10:05 They have polyfills with support as well. 10:10 So you can see if different syntax is gonna be supported in 10:13 whatever polyfill you're using. 10:17 Then over on the right it has the desktop browsers that you would expect. 10:19 IE 10, not a lot of support for this. 10:25 Then even goes into servers and run times. 10:27 So, if you are going to be developing a modern Java Script application. 10:32 And want to start using more modern Java Script. 10:35 Definitely make sure to check this out. 10:38 And we'll have a link to that in the show notes. 10:39 >> Well, that is all we have time for this week. 10:42 I am @nickrp on Twitter. 10:44 >> And I am @jseifer. 10:46 For more information on anything we talked about, 10:47 check out the show notes below this video. 10:48 Thank you so much for watching, and we'll see you next week. 10:50 [MUSIC] 10:52

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

Sign up