Episode 122: Lazy Image Loading, Underlining Text, Scrolling

I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:01 >> And you're watching The Treehouse Show, your weekly dose of internet where we 0:02 talk about all things web design, web development, and more. 0:05 >> In this episode we'll be talking about lazy loading images, underlining text, 0:08 scrolling and more. 0:13 >> Let's check it out. 0:14 [MUSIC] 0:16 First up is a CSS and JavaScript library called lazysizes. 0:21 So, if you've ever tried to use source sets and 0:27 load in some responsive friendly images. 0:31 You've probably encountered a little bit of difficulty and 0:35 lazysizes sort of makes that easier but it also is a lazy loader. 0:38 So, images that are not currently visible on screen can be 0:44 loaded in later on as they're needed. 0:48 So, if we scroll down here, you can see that it’s pretty easy to install. 0:52 You just get the lazysizes minified Java Script file, and 0:57 include it onto your webpage. 1:02 And then inside of images or iframes, you can use the data source and 1:04 data source set attributes, and load in things. 1:10 So, why is this so great? 1:15 Well, there’s a couple of demos, but I just want to highlight one in particular. 1:17 When I clicked that link there, you might have saw that this image was a little bit 1:22 pixellated and blurry, but I came up pretty quickly and then it got clear. 1:28 Well this is called LQIP, it's a technique called low quality image placeholder 1:33 and basically it will load in a low quality version of an image and 1:42 then when the higher quality version comes in, it will be replaced. 1:47 So this, as it says, might increase measured time until they unload a bit. 1:53 It dramatically increases perceived performance which, a lot of times, 1:59 can be more important than actual performance, showing maybe a loading bar, 2:03 or something like that, to let the user know that stuff is going on and 2:08 when they see images pop in really quickly onto the page. 2:12 You can know that oh the website's loading things are happening pretty fast, and 2:15 then if those images pop into high quality maybe a second later it's not really 2:19 all that noticeable. 2:25 In fact it looks like the web page loaded much faster. 2:26 >> And it draws attention to the image. 2:29 >> It does. 2:31 Anyway, this is a wonderful technique and 2:32 a wonderful collection of JavaScript and CSS to make that happen. 2:36 >> Perfect. 2:41 And while you're using that, go ahead and 2:42 use ScrollIt.js which is the next little project that we're talking about. 2:44 Now if you look at this website right here, 2:48 I can scroll down and I am currently using my trackpad to scroll through. 2:50 Nothing much to see here, it's pretty simple. 2:56 Everything scrolls as expected. 2:59 However, if I use the arrow keys to scroll down here, you'll notice that it jumps me 3:01 to the different sections of this web page, and it does that very smoothly. 3:06 Now, this is a very very small plugin. 3:13 It is one kilobyte minified, and it's also very configurable. 3:17 So, just include jQuery and ScollIt.js. 3:23 Give your divs, or your different elements, the scroll index attribute. 3:26 And then put some scroll in navigation up top, and then you are good to go. 3:32 All you have to do is call scroll it. 3:37 Now of course it has some different options. 3:40 You can give different up and down keys, as well as specify the easing scroll time, 3:42 the active class and what happens on the page change. 3:49 Not too much to say about it, 3:53 but it is a simple plug in that is also extremely useful. 3:54 So make sure to check that out as well. 3:58 >> Very nice stuff. 4:00 Well, next up we have this really cool CSS technique that allows you to 4:01 underline links but actually have breaks in between where 4:07 words crossover the, the line or, or where letters cross over the line. 4:12 So, for example, in Safari or in the IOS 8 message's app, 4:17 you'll notice that when things like this g here, or this p 4:25 crossover the bottom line there, it actually breaks up the line whereas. 4:31 Normally on a web page, 4:37 it looks like something like this, a line just crosses straight through. 4:38 Well, if you want to get links looking this way on your website, this is for you. 4:42 So here's kind of a 3D, 2D example of how this all gets sandwiched together. 4:48 So, right now I'm looking at a 3D view. 4:55 If I click this. 4:57 You can see that it all sort of comes together. 4:59 So, basically what they're doing here is they're creating this 5:03 little line here as a background image, and then on top of that, 5:06 they are layering in some text that has a text shadow on top of it, 5:11 and it's the same color as the webpage background. 5:18 So, when you put that all together, 5:23 it looks like that it's actually cutting through that line. 5:25 So, if you scroll down here, 5:30 they have a tone of Stylus, which is a CSS preprocessor. 5:31 And, you can use this Stylus code to create the same effect on your website. 5:39 So definitely be sure to check this one out. 5:45 >> Very nice. 5:47 Next up, we have a collection of tips on how to scroll. 5:48 Now, this sounds like it might be self explanatory, but 5:53 this is focused more on the art of story telling using different scroll effects. 5:57 Now this is- >> I didn't even know you could scroll web 6:03 pages until just now. 6:05 This really changed my life. 6:06 >> Wow [LAUGH]. 6:07 No won, no wonder some of those, some of those web page scrollings were, 6:08 were going so slow. 6:11 >> Eh. >> Just sitting there stared at 6:12 the one web page? 6:13 Why isn't this working? 6:14 >> Yeah. >> Cuz you have to scroll Nick. 6:15 >> Well. 6:16 >> Anyway. 6:17 This is a great collection of tips from Mike Bostock. 6:18 I hope I am pronouncing that right. 6:22 Tip number one is prefer scrolling to clicking. 6:25 Now, the reason that you should scroll instead of 6:30 click is because you want visual indication of additional contents. 6:34 So as we're looking at this webpage, you can kind of see how on the bottom of 6:39 the screen there can be more words below there, but 6:44 if you were just clicking through you may not know when to stop clicking. 6:47 Also allow a rapid, incrementable, I'm sorry, 6:53 allow rapid, incremental, reversible scrolling. 6:57 Don't do something that frustrates readers, sometimes called scroll jacking, 7:00 where you actually take control of scrolling and 7:05 make the browser's report do something different. 7:09 Anyway, he has a tone of different tips here like providing instantaneous and 7:13 consistent feedback. 7:18 What's really great about some of these tips is that he shows you with examples, 7:20 for example, from the New York Times with this shark and minnow video. 7:25 As we're scrolling through here, there is a video on the screen, but 7:30 the text as we scroll. 7:33 Goes to the top of the screen, giving us visual indications of what is happening. 7:35 Anyway, this is a great collection of user experience tips that I 7:40 really recommend that you check out. 7:43 >> Very nice stuff. 7:45 Well, next up is Furtive. 7:46 This is a forward-thinking, CSS micro-framework. 7:48 I know that cuz it says it right here, but it's actually very small at 2.5 kilobytes. 7:52 So, how is this TSS framework so small? 7:57 Well first, they do cut out a lot of features that you 8:01 might expect from a more robust framework like Bootstrap or 8:04 Foundations such as tabs and all that kind of nice stuff. 8:09 But there is a responsive grid system. 8:13 There's buttons, there's form stylings, media objects, 8:17 tables, colors and all sorts of cool stuff in here. 8:21 And one of the interesting ways they're cutting out tone of code that you 8:26 would normally need for 8:31 grid system, is they are doing some forward thinking by using flexbox. 8:32 So, one important thing to point out about Furtive, 8:38 is it's not going to work in every browser that people are using right now. 8:40 So, it's gonna leave out a couple of older browsers. 8:46 But if you're okay with that, you've looked at your analytics and you know 8:49 that the people using your website will definitely be happy about a faster loading 8:55 site rather than one that’s a huge range of browsers, this one might be for you. 9:01 And even if that’s not the case, 9:06 it’s still fun to experiment with just to get familiar with flexbox and 9:08 kind of get a preview of what CSS frameworks might look like in the future. 9:12 Because I'm pretty sure foundation is actually moving in this direction as well. 9:17 >> Oh. >> I think they're gonna 9:21 start using flexbox. 9:22 >> So I'm looking at caniuse.com and 9:23 it looks like flexbox is not supported on IE versions earlier than ten. 9:25 >> So- >> Which is relatively recent. 9:30 >> Pretty cutting edge. 9:32 So definitely use caution when using this particular CSS framework, 9:33 it might break for a lot of people but- 9:39 >> It's only two kilobytes. 9:42 >> It is pretty fascinating to see a grid system and 9:43 all that other stuff done in such a small package so- 9:46 >> The future is today. 9:51 And it's small. 9:52 >> It is. 9:54 Well I think that's all we have time for this week. 9:55 I am @nickrp on Twitter. 9:58 >> And I am @jseifer. 9:59 For more information on anything we talked about, 10:00 check out the links in the show notes right below this video. 10:02 We wanna thank everybody for watching and we will talk to you next week 10:05 [MUSIC] 10:08

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

Sign up