Episode 91: Path Animation, Sidebar Transitions, Icons

>> I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:01 >> And you're watching The Treehouse Show, your weekly dose of Internets, 0:02 where we talk about all things web design, web development, and more. 0:05 >> In this episode we'll be talking 0:08 about animation, sidebar transitions, icons, and more. 0:09 >> Let's check it out. 0:14 [MUSIC] 0:14 First up there's this really amazing post about advanced animation paths. 0:20 Now, if you've ever tried to do CSS animations and 0:24 tried to animate something along a path or a curve. 0:28 You know that it's pretty much impossible. 0:32 It's very, very difficult to get that to look right. 0:34 >> Don't say impossible, Nick. 0:37 Nothing's impossible. 0:39 >> You're right, and that's where this blog post comes in. 0:40 Basically, you can create these advanced animation paths, just 0:43 like you see with this roller coaster demo on CodePen. 0:47 Whoa, look at that. 0:51 >> What? 0:53 >> Basically the way it works, is you draw a path, 0:54 or a motion route, and you can do that as an svg. 0:59 And then, you can use tween js, and basically 1:04 step through each part of the path. 1:10 So there's a pretty good illustration here of what this code is doing. 1:15 Basically, it takes the current point and previous point, 1:19 and over time, it will move an object along that svg curve. 1:24 So there's quite a lot of JavaScript here, but that's basically what it does. 1:30 And, you can create these really amazing curving animations like that. 1:34 So, if you wanna view this on codepen, you can do that. 1:40 Or you can go to the Git-repo, and see exactly how this all works. 1:44 >> That looks like a pretty fun rollercoaster, I gotta say. 1:50 >> It does. 1:52 We should go on it together. 1:53 >> We should do that. 1:54 >> We can get some cotton candy, ice cream afterwards. 1:55 >> Make a day of it. 1:57 >> Hm. 1:58 Seems nice. 1:59 >> Really spend some time together, turn off our phones. 1:59 Next up we have a project called Velocity.js. 2:02 Velocity.js is a drop-in replacement for jQuery's 2:05 .animate function which provides a lot better performance. 2:09 Now, if we look at the site right here, you'll see a performance comparison. 2:14 And if we look at this drop down here, 2:18 we've got jQuery and the number of elements right here. 2:21 And then if we click on over to velocity and start, you'll see that it is much 2:26 smoother so, with velocity it's actually going very smoothly back and forth. 2:32 It's actually kinda hypnotizing but you can potentially see 2:37 some jaggyness as we're looking at the jQuery version. 2:41 So, the way that velocity works is it's really just a drop-in replacement. 2:45 Instead of calling .animate, you call .velocity. 2:49 Now, the way that velocity works is it using request animation 2:53 frame, and also it uses jQuery's effects queue to work on this. 2:58 Now, there's a, a bunch of demos on here, but 3:03 pretty much for the most part it is a drop-in replacement. 3:06 You just add velocity to your project, change 3:09 the instances of animate with velocity, and boom! 3:11 You have better performance right off the bat. 3:15 Now, you can find a link to velocity in 3:17 our show notes, which you can get to at youtube.com/gotreehouse. 3:18 Or search for us in iTunes. 3:22 We are the treehouse show. 3:23 Oh, and please rate us. 3:25 >> Very nice stuff. 3:26 Well, next up is this amazing post on the codrops blog. 3:27 Called sidebar transitions. 3:31 So, you're probably familiar with the sidebar off canvas hamburger menus 3:34 that come on the left and right sides of the page. 3:40 Well, these are transitions that basically make that look a lot fancier. 3:44 So you can push the page or it can just slide in. 3:49 But there is more advanced ones that use rotations and 3D effects. 3:53 So you can rotate the whole page. 3:58 Or you can do a 3D rotate, in or rotate out. 4:00 And there's also a few that will scale the page. 4:04 I thought that was pretty interesting. 4:07 And there's a couple others here. 4:11 Let's click through. 4:13 Look at that. 4:15 Pretty amazing. 4:16 So if we head over to the Codrops article. 4:18 You can view the demo that we were just looking at, 4:22 or you can download the source and see exactly how this works. 4:25 It's just basic combination of HTML, and a few perspective, 4:30 or, excuse me, transforms and transitions. 4:36 So, pretty cool stuff. 4:40 >> Yeah, that is pretty cool. 4:42 >> Mm-hm. 4:43 >> Next up, we have a couple of posts 4:44 about icons that are free to download and use. 4:46 The first set is called feather. 4:51 And this is, quote, a growing collection of beautifully simple icons. 4:53 And you can get that in Photoshop, csh, svg and web font format. 4:57 Not a whole lot to say about this. 5:02 It's just a bunch of different standard icons around here. 5:04 They're pretty minimalist. 5:08 And also pretty nice looking. 5:09 So, yeah, go ahead and download that if you need some icons for your project. 5:11 It's MIT licensed so you can do pretty much whatever you want with it. 5:16 >> Very nice stuff. 5:20 Well, speaking of icons, we've covered Iconic in 5:21 the past which is a paid icon set. 5:25 You can use it for free if you're 5:28 doing it for, or using it for non-commercial purposes. 5:31 But if you are using it for commercial purposes, you do need to pay for it. 5:33 However, it just went open source. 5:37 Which means you can head over to GitHub, and you can look at all the 5:40 different files including the svg's that make up this icon set. 5:45 So that's a pretty amazing change because it's means that more people 5:51 will be able to contribute to iconic, if they'd like to do so. 5:56 And, to just review, Iconic is just a very robust icon set, we'll 6:01 go back to the pro page here, allows you to do a bunch of pretty amazing stuff. 6:06 They scale the icons appropriately, let's see, there it is. 6:12 And you can color them individually. 6:17 It's pretty awesome. 6:20 So definitely be sure to check that out. 6:21 And if you have a good idea for an icon, 6:24 it's a good opportunity to get involved with Open Source. 6:27 >> Can we get a, an icon of both of us? 6:30 Like, separate icons. 6:33 Not one, one Nick and Jason. 6:34 I'm just gonna move on. 6:36 Next up, we have Google Web Fundamentals. 6:37 Google put up a Web Fundamentals page, which is a handbook. 6:41 For best practices when making websites. 6:44 Now if you go through this book, it says a bunch of 6:47 things that we have already talked about on the Treehouse Show at length. 6:52 So they go into multi device layouts with responsive web design. 6:56 They go through fundamentals. 7:01 Patterns, Navigation and Action Patterns. 7:02 You know, you'll see a little bit about the App Bar, Tab Bar, Navigation Drawer. 7:05 Kinda like what we just went over, the Codrops article. 7:10 Basically if you watch the Treehouse Show, you'll be you know, set 7:13 for the future, and the future is now, according to Google Web Fundamentals. 7:17 >> Tomorrow is today. 7:21 >> And yesterday is already gone. 7:23 But make sure you catch up on every previous episode 7:25 of the Treehouse Show, I think is the point there. 7:27 >> Hm. 7:29 >> Anyway, go ahead and scroll through the book. 7:30 Definitely read everything here. 7:33 There's great sections on optimizing performance you 7:35 know the rendering path, and optimizing content efficiently. 7:37 anyway, just a ton of stuff on here. 7:42 We can't go into everything, but for the most part, really, if you 7:43 have been watching the Treehouse Show, 7:46 we've already pointed you in this direction. 7:48 Google is now solidifying it, so. 7:50 >> Very nice stuff. 7:53 Well, next up is a color picker. 7:54 In fact, this is an eight bit color picker, 7:56 meaning there are just 256 colors in the palette, so 7:59 if I click on one of these colors here, 8:02 you can see that we get this nice color picker. 8:05 And there's just 256 colors in this palette. 8:09 So I can click one of these and it will change the color, and over 8:13 on the right side I can see the hexadecimal value for this color as well. 8:17 So this might be pretty nice if you maybe are building out a social network and 8:22 you want users to be able to customize 8:28 the colors on their homepage or something like that. 8:30 You can go ahead and use this color picker to do that. 8:33 And the nice thing is that it has no dependencies not even jQueries. 8:36 >> Wow. 8:42 >> So you don't need to include anything else in order to get this 8:42 color picker, you can just install it 8:46 using Bower, or Component if you prefer that. 8:48 And then you create a div with 8:51 a class eight-bit-color-picker, and then call the detect 8:53 on the eight bit color picker in your 8:57 JavaScript, and wala, you get something like this. 8:59 If we look at the documentation, here we have the EightBitColorPicker constructor. 9:03 And you can send it an array of 256 strings in 9:08 hexadecimal format if you would like to create a new color palette. 9:13 So, you're not limited to the color palette that you see here. 9:17 You can actually do something completely different. 9:21 If say, you are in that situation 9:24 I described, you're creating this social network. 9:26 You wanna have users customize their profile pages, and you wanna limit 9:28 them to specific colors that work with the rest of your design. 9:32 You can do that. 9:36 >> And if you don't want the colors to work 9:37 with the rest of your design, you don't have to. 9:39 I think we all remember MySpace. 9:41 >> Mm-hm. 9:42 You can just leave the default, and let people go to town on everything. 9:42 >> Yeah, that was a, I'm really glad the web has come so far since then. 9:45 >> Mm-hm. 9:48 >> Next step, we have a JavaScript plugin called Ice. 9:48 This is a really, really interesting 9:54 plugin for anything that is contenteditable. 9:56 This is from the New York Times, and it's really easy to explain with a demo. 10:00 So here is, you know, a little, a little section right here. 10:04 We can edit all of these different text fields here. 10:07 So say I'm writing things. 10:11 And you'll see that it underline that in blue. 10:13 Now you can actually show and hide the different changes to the article here. 10:16 So if I hide the changes it shows you the actual, current text. 10:22 Or you can show the changes and it will show 10:26 you what was crossed out, what was added, and when. 10:28 Now, what's interesting about this is it has multi-user support. 10:31 So you can theoretically, track all the 10:34 changes to everything down to each individual user. 10:36 Now, this works with anything that is contenteditable on the web. 10:40 And it is really, really cool, it's simple super to use, you just create the tracker. 10:45 And it works, you give it the element that you 10:50 want to track changes to, and a current user object. 10:53 In this case it has an id and a name associated with it. 10:57 And then just call the start tracking function and you're good to go. 11:00 And it also supports plugins if you want to add those in as well. 11:04 Anyway, really really great plugin. 11:09 Definitely useful if, for example, you are creating a content management system on 11:11 the web, and wanna make sure that you can see who has changed what. 11:16 We'll I think that's about all that we have time for. 11:20 Nick, who are you on Twitter? 11:22 >> I am @nickrp. 11:23 >> And I am @jseifer. 11:24 For more information on anything that we've talked 11:25 about, check out the show notes at youtube.com/gotreehouse. 11:27 Or the search for us in iTunes, we're 11:30 the Treehouse Show, and don't forget to rate us. 11:31 Also, if you'd like to try out Treehouse free for 11:34 a month, use the link right in the show notes here. 11:36 And, of course, if you'd like to see more videos like this 11:39 one about web design, web development, mobile business, and so much more. 11:41 Be sure to check us out at teamtreehouse.com and use the 11:45 free link in the show notes to get a free month. 11:49 Thank you so much for watching, and we will see ya next week. 11:52 [MUSIC] 11:55

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

Sign up