Episode 93: Parallax, StyleStats, Uncss

I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:01 >> And you're watching the Treehouse Show. 0:02 Your weekly dose of internet, where we talk 0:04 about all things Web Design, Web Development and more. 0:06 >> The Treehouse show is brought to you by Treehouse. 0:09 For freea about the Treehouse, check out TeamTreehouse.com/show. 0:11 In this episode, we'll be going over parallax scrolling. 0:15 Style sheets finding unused CSS and more. 0:19 >> Let's check it out. 0:22 [MUSIC]. 0:23 >> First up we have a blog post on parallax scrolling done right. 0:29 Now, we've probably all seen the parallax scrolling effect and actually 0:33 we can check out a demo to see what parallax scrolling is. 0:36 You can see as I'm scrolling down the 0:39 page, there are animations where the background is little 0:41 bit out of sync, and just having some 0:44 really nice effects while we're scrolling down the page. 0:46 >> What is happening? 0:49 >> We are in the future Nick, that's what's happening. 0:50 The future is right now. 0:53 >> Tomorrow is today. 0:54 >> On this webpage. 0:55 Look at that. 0:57 See all that? 0:58 So this can actually be a pretty tough effect to do perfomantly in your code. 0:58 And this blog post goes over a bunch of different ways 1:05 and things you should keep in mind while creating a parallax effect. 1:09 So here are some do's, only use properties that you're cheap for browsers to animate. 1:13 He is talking about using a translate 3D, scale, rotation and opacity. 1:19 This is a good tip. 1:24 Anything else and you're probably not going to 1:26 be running all of these animations at 60 fps. 1:28 >> That's frames per second. 1:31 >> Yes it is Nick. 1:34 I, I just thought that was the name of it, I didn't know it meant something. 1:35 >> Oh, it does. 1:38 >> Wow. 1:39 My mind is blown. 1:40 I can't even do the rest of this. 1:41 No, I'm just kidding [LAUGH]. 1:43 Next up, the next tip is use window.request animation frame., 1:45 which tells the browser that stuff is going to 1:49 need to be animated before the next repaint is done. 1:51 I'm not going to go over all of the 1:55 different techniques that he goes through in this article. 1:57 But there are some do's and some don't's which are just a bunch 1:59 of great tips if you are trying 2:03 to implement parallax scrolling on your pages. 2:05 >> Very nice stuff. 2:09 Well next up is picture fill. 2:10 This is a JavaScript poly fill from the responsive images community group. 2:12 >> Oh yeah, the RICG. 2:19 >> Exactly. 2:20 Of course, it can be very difficult to create responsive images properly. 2:21 Because, you have to load in a couple of different image assets and that 2:26 can be, somewhat expensive, because the browser 2:31 can't render something it doesn't know about. 2:34 So if you use media queries you have to actually 2:36 load in all the different images that you might need. 2:39 Which is bad because that uses up a lot of bandwidth. 2:42 >> So much work. 2:45 >> The picture fill, poly fill, is basically filling in for an element 2:46 that doesn't quite exist yet, but it's 2:53 basically an evolution of the image element. 2:55 Where it has the attributes source set and the sizes attribute. 2:58 So, the sizes attribute is a little bit complex to explain here. 3:05 But basically it's sort of a replacement 3:09 for using media queries to control your images. 3:12 And then the source set defines which 3:16 images should be displayed at different widths. 3:19 So, let's look at this stand alone demo, and I'll come out of full screen here. 3:23 And right here we have a picture of a couple of soldiers greeting the President. 3:28 And if we resize the browser, the image gets smaller. 3:35 But not only does it get smaller, the image is actually 3:40 being cropped in closer to the important part of the picture. 3:44 Because at small sizes, if you just resized the 3:48 larger image it would be pretty difficult to see. 3:52 So you can actually have different images that are cropped differently 3:56 and not just resized, which is a pretty big advantage here. 4:00 This is also great for high-resolution displays. 4:04 Anyway, you can check out this JavaScript polyfill and you can start 4:07 using it in browsers today, even if they don't support these new attributes. 4:11 >> Today, is tomorrow. 4:16 >> It is. 4:18 >> Tomorrow is already here. 4:19 Next step we have a project called style stats. 4:21 This is a really interesting site that you can drop a url into. 4:24 It will go out and grab the style sheets. 4:28 And give you some really interesting statistics about the page. 4:31 Now the example that I gave it was the bootstrap framework website. 4:35 It contains two style sheets and comes in at 117 K. 4:40 Over on the right here there is a nice listing of all the 4:44 different colors that are used on the 4:48 website along with their corresponding hex values. 4:49 Now this can be good if you are creating a style guide which 4:53 is something that we have mentioned on previous, episodes of the Treehouse show. 4:55 Which you should be completely familiar with by this point. 4:59 So there's also some really nice ideas here. 5:04 Most identifiable selector and just some nice 5:07 information about this site, totally unique font sizes. 5:10 26 font sizes on getbootstrap.com. 5:13 That is a lot of font sizes. 5:17 >> That is. 5:18 >> I think. 5:19 I don't actually know if that's a lot comparatively. 5:19 It, it could be a low number, it could be a high number. 5:21 I don't know but I do have the number. 5:23 Anyway, go ahead and plug your site in here and get the statistics. 5:25 If you want to you can also check out the source code to the document if you 5:29 would like to check it out on GitHub and 5:33 just kinda learn about how they implemented this feature. 5:35 And you can find a link to that in 5:38 our show notes, which you can get to at youtube.com/gotreehouse. 5:39 Also check out teamtreehouse.com/show for a 30 day free trial of treehouse. 5:43 >> Next up is this really cool post called why and how to avoid hamburger menus. 5:49 Well first. 5:55 >> I would not wanna avoid hamburger menus. 5:55 I love hamburgers. 5:57 >> I know, they're so delicious. 5:58 Well. 5:59 >> I'm hungry right now. 5:59 >> These hamburgers >> For hamburgers. 6:00 >> These hamburger menus are these little three line menus. 6:02 >> Cuz their delicious. 6:06 >> That you've probably spotted in various web apps. 6:06 Facebook is a pretty good example. 6:10 The iPhone app for Facebook has this little three line menu. 6:12 And when you tap it,. 6:17 You get something that looks like this. 6:20 So you open up this little side menu that has a bunch of stuff. 6:21 And the three lines here are supposed to be 6:26 iconography that represents different menu items that you can select. 6:30 So it kind of looks like a hamburger with the two buns 6:35 and the patty, and that's where the term hamburger menu comes from. 6:38 However, there's a couple of problems with the hamburger menu. 6:44 They're saying it has lower discoverability, it's less efficient, 6:48 it clashes with platform navigation patterns, and it's not glancible. 6:52 It's lower discoverability because you basically can't 6:57 find stuff that is out of sight. 7:00 I mean you can find it, but it's a lot more difficult. 7:02 And it's less efficient because it's another tap or click to get to this menu. 7:06 When really you could just be presenting these things all at once. 7:14 >> I would like to have a hamburger presented to me. 7:17 >> Another problem is that it clashes with platform navigation patterns. 7:20 So in other words there's all these nice design 7:25 patterns that are already implemented in iOs and android and 7:28 other mobile platforms, such as the back button or 7:32 the share button and so on, on these search bars. 7:35 However, the hamburger menu never really had a place 7:39 there and it was never designed to be there. 7:43 So we are sort of tacking these on as an additional design pattern. 7:47 When that's not how the entire design was conceived together. 7:52 So it doesn't totally make sense. 7:57 >> I would like to tack on an order of fries to the hamburger. 7:59 >> So what should you do instead of using the hamburger menu? 8:04 Well. 8:10 >> Hotdog menu. 8:10 >> [LAUGH] One option is to use a tab bar like the one you see here. 8:11 So you could have this tab bar down at the bottom of the screen, and you can select 8:17 different different views, rather than going to the hamburger menu. 8:23 And if I scroll down here there it is. 8:31 It says, another solution is to review your information architecture. 8:36 So a way to get around this is to actually 8:40 just think about how you're organizing content in an app. 8:43 And basically redo it rather than relying on that menu. 8:48 Anyway it's a really cool post. 8:52 There's a lot more in depth here that we did not get into. 8:53 So definitely be sure to check that out. 8:56 >> Next up we have a blog post by David Walsh on finding unused CSS. 9:00 This project is called uncss or uncss. 9:05 Now, the purpose of this project is it goes to your website, 9:09 and then looks at all of the different styles on the page, and. 9:14 >> And then any CSS that's unused, it allows you to resell on Craigslist. 9:17 >> Yes. 9:22 That is the perfect perfect idea. 9:22 And then, you get a lot of really lowball offers from HTML tags, when that happens. 9:25 >> Mm-hm. 9:30 >> So it looks at all the CSS on 9:31 your page which can really accumulate as a site grows. 9:33 You know, maybe you're just not using certain selectors or certain styles. 9:36 And this will tell you what those are. 9:39 And give you some nice output and you can go 9:41 take care of that or you know, do something else. 9:44 Maybe just leave it let it, let it accumulate, whatever. 9:46 As long as you know it's there you can decide what to do with it. 9:49 You can also interact with this programatically if you're using NodeJS. 9:52 Or you can just use the command and parse the output yourself. 9:57 So that's it, cool cool project unCSS or uns. 10:02 Check it out. 10:06 >> Very nice stuff. 10:08 Well next up. 10:08 Is this grunt task called grunt email design workflow. 10:09 And, like I said, it is a grunt task 10:15 that allows you to compile your SCSS to, to CSS. 10:19 It builds e-mail templates and then it inlines all of your CSS. 10:24 >> Isn't that a bad idea Nick? 10:29 >> In this case it's exactly what you want. 10:32 Because when you're designing e-mail templates, a 10:35 lot of, kind of, older stuff that 10:38 you have to do for order browsers, 10:40 like tables and inline CSS definitely apply here. 10:43 Because a lot of e-mail clients don't 10:46 have the same rendering capabilities as modern browsers. 10:48 So you have to do a lot of ugly stuff, and that can be pretty difficult. 10:52 >> Well, I set it up. 10:56 You knocked 'em down. 10:56 That was beautiful. 10:57 >> Mm. 10:58 So it in lines your CSS and then it uploads any images to a c, a CDN. 10:59 >> Content Delivery Network. 11:05 >> Thank you Jason. 11:07 And it sends you a test email to your inbox. 11:08 Well, as do all that. 11:12 It basically strings together a couple of 11:14 different tools including node, grunt and ruby. 11:16 Actually those are the things you have to install the 11:19 tools and strings together are premailer which inlines the CSS. 11:22 Mailgun, which sends an email. 11:27 So this is a service you can sign up 11:30 for, and it's an email service for developers as. 11:32 >> It's wonderful actually, well done. 11:36 Wonderful service. 11:38 It's great. 11:39 They're not sponsoring the show, by the way. 11:39 We should get that out of the way. 11:41 We just kinda happened to ramble onto this. 11:42 Mailgun's great for outbound delivery, because 11:43 ensuring your email's actually make it 11:46 to who they're going to make it to can be quite an issue. 11:48 And also, it lets you receive emails into your app. 11:50 >> So this makes it really easy to automate 11:53 that process and just put it right into your build. 11:55 It also uses Litmus, which is a service that allows 11:59 you to test the email across clients, browsers and devices. 12:03 And then you can use Rackspace Cloud as your CDN. 12:08 So it strings all of these tools together 12:13 and just automates the whole process of sending out 12:16 these e-mails, which can be a real pain if 12:20 you're building anything more than a trivial web app. 12:22 Now if you've never heard of Grunt before, if you're totally new 12:27 to this, you should definitely check out this post from Chris Coyer. 12:30 It's linked right here. 12:34 And it's called, Grunt for People who 12:35 Think Things Like Grunt are Weird and Hard. 12:38 >> [LAUGH]. 12:40 >> And, I was one of those people until 12:42 I read this post and it's really pretty great. 12:44 You should definitely check that out. 12:46 If you're new it will totally automate a lot of your front end development. 12:49 >> Yeah, you know, for a lot of front end stuff we have these great tools 12:53 to work with that when you're making pages 12:57 for browsers, or you know, mobile browsers, desktop browsers. 12:59 But a lot of that falls apart with email. 13:02 So it's nice to be able to use some of the tools that you are used to. 13:04 >> Definitely. 13:07 Well, that's all we have time for this week. 13:08 I am @nickrp on Twitter. 13:10 >> And I am @jseifer. 13:12 And for more information on anything we talked 13:13 about, check out our show notes on youtube.com/gotreehouse. 13:14 Also, sign up for a 30 day free trial of treehouse at teamtreehouse.com/show. 13:18 >> And of course, if you'd like to 13:24 see more videos like this, one about web design, 13:26 web development, mobile business and so much more, 13:28 be sure to use that link to sign up. 13:31 Teamtreehouse.com/show. 13:33 Thank you so much for watching, and we will see you next week. 13:36 [MUSIC] 13:40

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

Sign up