Episode 40: iTunes Scrolling and Mobile Shelving

[MUSIC] 0:00 >> I'm Nick Pettit. >> I'm Jason Seifer. 0:01 >> And you're watching the Treehouse Show, you're weekly dose of Internet 0:03 where we talk about all things web design, web development, and more. 0:06 >> In this episode we'll be talking about 0:10 iTunes style scrolling, Javascript package managers, and mobile shelving. 0:12 >> Let's check it out. 0:17 [MUSIC] 0:18 >> First up is this really cool iTunes scroller on CodePen. 0:24 Now, you might have seen this before, I think. 0:29 >> In iTunes. 0:32 >> In iTunes. They call it [CROSSTALK] 0:33 >> Duh. 0:35 >> They call it Cover Flow. >> Right. 0:36 >> I think. 0:37 And it's basically this design pattern where you see album art and you 0:38 can kind of swipe through it, and, well, let me just show you. 0:43 >> Almost like it was the late 90s, and you were looking through posters at 0:46 a record store. >> Exactly. 0:49 So, here we have this pen in Codepen. 0:52 It's a really cool site for sharing code. 0:55 And basically we can just go ahead and scroll through this album art 0:58 and it'll kind of swipe to the next piece of artwork and 1:03 it will animate smoothly, and you'll also notice on the left and right 1:08 sides as it kind of falls out of the queue here it will 1:11 go ahead and fade out. So that's, that's pretty cool. 1:15 The html is actually quite basic, it's just a bunch of links with images. 1:19 And, then if we look at the CSS it starts to get a little bit more interesting. 1:25 Basically they're using 3D Transforms and Transitions. 1:32 And they're adding classes using JavaScript 1:37 as we go from one album to the next. 1:41 So, as we go through here the classes are actually being changed by 1:44 this code here, so it adds left hit in, left, middle, right, etc. 1:48 and then as it adds those classes, a transition happens in CSS. 1:54 So, this isn't like a framework or anything, 2:00 it's just an interesting piece of code, and this 2:03 is a popular design pattern, and this is, seems like a pretty good way to do it, so. 2:06 >> I have not heard of a single 2:12 one of those bands that they're using as examples. 2:13 >> Really? 2:15 >> Really. 2:16 I'm stuck in the late 90s as far as music goes. 2:17 >> Evidently. [LAUGH] 2:20 >> Next up, we have a JavaScript library called Sly. 2:21 Now, this implements exactly what we were just talking 2:24 about, the coverflow-ish style transitions into a jQuery plugin, and. 2:27 >> Hey look at that, it's not just a bunch of code, it's actually a plugin. 2:32 >> I know. 2:35 >> You can use. >> And now, it, it segues, right? 2:36 >> Yeah, that was, that was very nice Jason. 2:38 >> I mean, our transition, not the vehicle. 2:39 so. 2:42 Yeah, if you take a look they have a nice little demo on 2:43 the page that I'm just using the, the scrolling right here on my 2:45 MacBook's track-pad, but you can also use the buttons to go back and 2:50 forth on the top it shows you where it goes, you hit next, 2:54 or even go straight to the end. 2:57 Now, this is interesting, it works as a jQuery plugin. 3:00 It does depend on jQuery 1.7+ but that's 3:04 probably something that you should be on anyway. 3:08 Now it's interesting, it does work in every desktop browser, even in 3:10 IE 6 but that's due to being an accident rather than completely on purpose. 3:15 Now what's 3:22 really interesting about this plugin is it will use jQuery's animation function if 3:23 it's available but if your browser supports CSS 3, it will use that instead. 3:27 This is going to be really important for performance 3:34 reasons, because if you're on a mobile browser for example, 3:37 it will offload the animations the GPU instead of the 3:41 CPU which will save your mobile web browser battery life. 3:44 >> Well, and it'll also have higher frame rates. 3:48 >> Yeah. 3:51 >> The animation will look a lot smoother. 3:51 >> So, great plugin, check that out. Sly. 3:53 >> And, actually, I'm curious how, how are 3:56 they doing the detection of CSS 3 features? 3:58 Do you know? 4:02 Did you look into that? 4:02 >> I'm not, 100% sure I think they're using feature detection. 4:04 >> Okay, cuz I was curious if they 4:07 were using the, the @supports rule, which we covered 4:09 in a previous episode. 4:13 >> We do, you should go back and check that out, but @support is 4:15 only in the latest edge versions of most browsers of this point so its doubtful. 4:18 >> That's right. 4:22 So, next up is jQuery Shapeshift. 4:23 Now, if your familiar with the jQuery 4:27 masonry plugin this will be familiar to you. 4:29 Or if you're just familiar with Pinterest, 4:32 the popular website for I guess pinning various 4:34 stuff, for lack of a better term this will also be familiar to you. 4:39 Basically it's this jQuery plugin that can take a bunch of various size divs like 4:42 this, or various sized block-level elements, and 4:49 it will arrange them into this nice grid. 4:52 And the important thing to notice here is that even if things are different 4:55 heights, it can go ahead and arrange them nicely and kind of get rid of 4:59 that space in between. 5:04 The other cool thing that Shapeshift can do is, you can actually drag and 5:06 drop things, and it will reflow the 5:09 logical order, which is actually pretty impressive. 5:12 I, I'm kinda blown away by this. 5:16 Of course, Masonry did all of this, but it did not do the drag 5:19 and drop stuff, so this is actually 5:23 a little bit better than that previous plugin. 5:25 So, if you wanna go ahead and create kind of a, a Pinterest-style 5:29 layout for your website, this would be a pretty good way to do it. 5:33 >> I think if I could choose one superpower, it 5:36 wouldn't necessarily be shapeshifting, but that would be up there. 5:39 For sure. 5:43 >> Next up we have a plug in called Packery. 5:43 This is a jQuery plug in that is also the sequel to Masonry. 5:46 It's by the same author. 5:50 Now we generally don't talk about commercial 5:51 products on the show, but this one is so good we just had to let you know about it. 5:54 Also Masonry has, you know, a huge 5:58 following a lot of people are probably using. 6:00 So Packery does pretty much everything that Nick was talking 6:03 about in the last plugin, Shapeshift but it gives you some 6:06 more options, and it also gives you different methods and 6:11 events to chain the different behavior together should you want it. 6:14 So, just like the Shapeshift plugin, you can drag and drop your different divs. 6:19 You can also keep everything bound to a certain location. 6:24 The nice thing about the Packery plugin, ton 6:29 of different options, you can work with the different 6:31 events, so once the layout had been arranged execute 6:33 different events and attach it to your different divs. 6:36 So relatively inexpensive plugins check it out it'll 6:40 be in the show notes which you can 6:43 get to on our YouTube channel or iTunes. 6:44 >> Look at that Jason you just keep one uping me. 6:46 >> [LAUGH] 6:49 >> Just every link here. No, it's cool. 6:50 Next up is yet another cool thing on CodePen. 6:53 I don't think Jason has a plugin for this one. 6:56 >> I don't. 6:58 >> Basically it's just this little peeling sticker. 7:00 So, you can hover over this sticker, and it 7:03 will go ahead and peel off, and you can go 7:06 ahead and reveal text, or maybe an image beneath it. 7:09 This might be kind of cool for a number of things. 7:13 I like it because the animation doesn't just play automatically, you actually have 7:16 to engage with the element on the page in order to see the animation. 7:20 A lot of times having to many animations on your page can 7:24 be distracting, but this is nice because you're actually interacting with it. 7:27 And the way that they're 7:32 doing this is with CSS transitions and transforms. 7:34 So they have a couple of different divs here, which, it's not totally semantic. 7:39 In fact it's acutally fairly unsemantic, but that's okay, it's, 7:45 it's cool enough that I'll, I'll let this one slide. 7:49 >> [LAUGH] 7:52 >> I'm apparently the semantic police now here. 7:53 But basically if you go ahead and wrap 7:56 this element here with this let's see 8:00 where is it, yeah, this circle_wrapper class, it 8:03 will actually mask off part of this div which is rounded with CSS border radii. 8:07 And the other thing that they're doing is, they are rotating this element. 8:13 So you see this sticky here, they have it rotated 45 degrees. 8:18 That's why we have this cut in the upper right here. 8:22 And then as 8:25 you hover over it, it actually rotates it. 8:26 So that's how we get that kind of cool peeling effect where it 8:28 looks like it's going from the upper right down to the, the bottom there. 8:32 So pretty nifty. Little piece of code there. 8:36 And I also like that it, it doesn't use JavaScript. 8:38 Of course this won't work in really old browsers 8:41 like IE 6, but nonetheless, it's, it's pretty cool. 8:44 >> So good thing that you didn't cite them, being a member 8:48 of the Semantic Police. 8:51 Hopefully, you won't report them to the SBI, either. 8:53 [LAUGH] Next up on the text pro blog we have an article on package managers. 8:56 This is an introductory guide for the front end developer. 9:02 Now a package manager they're talking about is going to let you kind of 9:06 concatenate all you CSS, JavaScript's, and HTML files into a single project and 9:11 then it uses node MPM and a couple projects to watch what you do. 9:17 Now, the reason you would wanna use something 9:21 like a package manager is when you're ready to 9:24 deploy your website, the package manager will be able 9:26 to concatenate and minify all your JavaScript's and CSS. 9:29 And just make that, you know, maybe gzip your assets. 9:33 Gives you a lot more performance on the 9:36 front end, after going through and optimizing your assets. 9:37 >> So, 9:41 TLDR, this will make your website load faster. 9:41 >> Yes, that is the wonderful TLDR. 9:44 >> Got it. 9:46 >> And this article goes over absolutely everything 9:47 you need to do to get up and running. 9:50 It talks about installing node eve-, you know, even 9:52 on Windows, goes over what a package manager is. 9:55 How NPM, or the node package manager will arrange your project. 9:59 And then walks through the different projects that you can use 10:04 to manage all of your different packages. So great article. 10:06 Check this out. 10:12 It's a little bit too long to go in depth here 10:12 on the show, but again, it'll be in the show notes. 10:14 >> Very cool stuff. 10:17 Well, next up is a design search engine. 10:18 Where you can go ahead and type in stuff if you're looking for inspiration. 10:21 So let's, let's check it out here. 10:26 It looks like the default search must be something to do with hand 10:28 lettering, because if you scroll through here they've 10:31 got a lot of really nice hand-drawn letters. 10:33 That's pretty cool. 10:37 But let's say we were looking for inspiration 10:38 for icons, we needed to create an icon set. 10:40 Looks like I've already searched for that. 10:44 Funny how that is. >> [LAUGH] 10:46 >> So if I go ahead and type in icons 10:48 and hit enter, it will go ahead and send the request, 10:50 and there it goes. 10:57 So, we can scroll down here, and it's not perfect 10:59 it'll give you some things that aren't quite relevant, like 11:03 this this shelf, I don't now why that came up, 11:06 or this, this logo here, but in general it's pretty good. 11:09 If we scroll down you can see that it's brought back a ton of different 11:12 icon sets, and I think this is probably 11:16 curated to some degree or another, because it's, 11:20 it's really, really nice in terms of the results that it brings back. 11:22 >> Yeah. 11:26 >> It doesn't bring back just a bunch of junk. 11:26 So, it's a little bit better than using, say, Google image search. 11:28 You know, to look for, inspiration. 11:33 >> Yeah. Really great site. 11:35 Next up we have a library called Snap.js. 11:37 Now, if you've watched previous episodes of the Treehouse Show, we've talked 11:41 about the pattern where you hit the little three bar icon and then 11:44 a shelf will slide out from the left or right of your website, possibly. 11:47 Top or bottom. 11:52 Snap.js is a library for creating this transitions, in JavaScript. 11:52 And we can just check out a demo right here. 11:59 Here's the default demo, this page not very interesting, but click the icon. 12:02 Boom. Comes right out the side. 12:06 >> Wow. 12:08 >> Yeah, isn't that crazy and as you'd 12:08 expect, ton of different options, you can open 12:11 this on the left. Or the right. 12:13 We call that being ambidextrous in the field of JavaScript plugins. 12:15 anyway, ton of different option, ton of different class names that you 12:19 can use, different settings, basically whatever 12:22 you need to create these style menus. 12:24 Now, this is a pattern than, you know, we've talked about before is really taking 12:26 hold a lot these days and and a lot of sites are transitioning towards it. 12:31 So, there you go Snap.js. 12:34 >> Very cool stuff. Well, 12:36 I think that's it for this weeks episode. I'm am @nickrp on Twitter. 12:38 >> And I am @jesifer. 12:41 You like this podcast please rate us on iTunes. 12:43 Search for the Treehouse Show. 12:45 You can get show notes and more 12:47 on iTunes or our YouTube channel at youtube.com/gotreehouse. 12:48 >> And, of course, if you'd like to see more videos like this one and 12:52 learn about web design, web development, mobile IOS, 12:56 Android, business, and a whole bunch of other 13:00 stuff, be sure to check us out at teamtreehouse.com. 13:03 Thanks so much for watching and we'll see you next week. 13:06

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

Sign up