Episode 132: Polygon Art, Colors, Scrolling

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:04 >> In this episode, we'll be talking about polygon art, colors, scrolling, and more. 0:07 >> Let's check it out. 0:12 [MUSIC] 0:14 First up is this really cool post about animated polygon art. 0:19 You're probably thinking, what the heck is that? 0:25 >> What the heck is that? 0:27 >> Well, this is. 0:27 This is what the heck that is. 0:28 It is polygon artwork that is animated. 0:30 >> I'd be lion if I'd say I wasn't impressed. 0:35 [BLANK_AUDIO] 0:38 Get it? Cuz it's a lion. 0:39 >> Yeah, I got the joke. 0:40 So, this is just one SVAG file and you're probably thinking, wow. 0:43 Well, how the heck are they animating every individual triangle, 0:48 that's all one SVAG. 0:52 Well, it's using this pretty cool library called TimelineMax by GreenSock. 0:54 So, we can click on that and it will open up the site for TimelineMax and 1:02 you can download it on GetHub, or you can just download the zip if you prefer. 1:07 And basically, this, this library allows you to do what's called tweening, 1:13 so you can do animations between one point and another. 1:21 And that, turns out, gives you pretty fine control, so you can take something 1:27 like this SVG, and you can break it apart into it's individual components. 1:32 Or in this case, individual triangles and you can animate them one by one. 1:36 So, here is the JavaScript to do that and it's surprisingly light weight. 1:42 It's just using that TimelineMax library. 1:50 And then, the HTML is a little bit more complicated, but 1:54 that's actually just because that's one SVG file, so that's all that's there. 1:58 You can also-. 2:05 >> Man, that's impressive. 2:05 >> You were just waiting for that, weren't you? 2:06 >> Well, yeah. I was sitting on that. 2:10 >> Yeah, yeah. 2:11 >> It's just a, it's just a lion button. 2:12 >> So, you can make this guy appear or disappear. 2:15 So, pretty similar to the lion. 2:18 This just makes all the polygons appear or disappear all at one time. 2:20 And, you can also make these interactive. 2:24 So, I can hover over this and it breaks apart. 2:26 Or-. >> Oh, what a tough break. 2:30 >> When I roll the mouse off of it, it all comes back together. 2:32 So, anyway, I thought this was pretty cool. 2:37 It's a nice way to spruce up some polygon SVGs 2:41 just by adding a little bit of animation. 2:45 >> Yeah, and you know, this article might be not available soon. 2:48 So, check it out before it's poly-gone. 2:52 [BLANK_AUDIO] 2:54 Next up, we have a little jQuery plugin called Unveil, 2:57 that is used to lazy load images using jQuery or zepto.js. 3:02 Now, lazy loading is the act of loading images only when you scroll down the page, 3:08 thereby decreasing load times of the rest of the page, 3:13 which is really good for mobile users or people with slow internet connections. 3:16 Cuz think about it, if you have a retina image, 3:22 that is quite a lot to download on a page. 3:24 So, what's really nice about this library is that it is less than 1k and 3:28 very easy to use. 3:33 So, let's say you have your images on the page here. 3:35 Just give it a jQuery or a Zepto selector and call the Unveil method. 3:38 By the way, I think it should be called Veil 3:44 because it's like you're not unveiling. 3:46 It's you're like veiling it until it's ready. 3:47 Mm. 3:50 Anyway, you can also give it a, a threshold in pixels. 3:50 So normally, when the images are loaded or 3:53 unveiled, it would be just when it's scrolled to. 3:58 But, if you wanna give some padding in pixels, 4:00 you can do that by passing an argument to the Unveil method. 4:03 You also get a call back if you want to, 4:07 that you can do other things inside of the unveiled image. 4:10 So, here is a little demo on the page, and 4:15 you can kinda scroll down quickly to see these images coming in or can you? 4:18 That's how quickly the plugin works. 4:22 It is compatible with all browsers IE7 and up, and that is pretty much it. 4:24 Very easy-to-use plugin, very quick, so 4:29 go ahead and check it out if you wanna unveil some images. 4:31 >> Thanks for unveiling that, Jason. 4:34 Okay. 4:38 Next one is this really cool blog post called It's Only Color from Thoughtbot, 4:39 and it's an article all about color theory, 4:44 the color wheel, and how to choose color palettes for your website. 4:48 So, if you're designing a site and you kinda just feel like you have no clue. 4:52 Maybe you're a developer and you're picking, and 4:57 that's something that is just new to you. 5:00 Well, there's a couple of techniques that you can use to think about color. 5:03 And, these are techniques that have been already established for 5:10 a really long time in the art world. 5:14 And so, it makes sense to bring them to web design. 5:18 There's this color wheel here. 5:22 And, the article sort of goes through and explains what the color wheel is, 5:25 where it came from. 5:29 And, it explains primary, secondary, and tertiary colors. 5:31 So, primary of course, is yellow, red, blue. 5:34 Secondary is orange, violet, green. 5:38 And, tertiary is yellow-orange, red-orange, red-violet, blue-violet, 5:40 blue-green, and yellow-green. 5:45 So, you can see that there on the color wheel with those helpful 5:47 triangles to kinda figure that out. 5:50 And, there's a some vocabulary words as well. 5:52 Hue, tint, shade, and saturation, just to kind of set things up. 5:56 And then, it explains how to choose a color palette. 6:01 So maybe, one way you're starting out is with a black and white website, and 6:04 then you can think about, you know, what parts of the website are text? 6:09 What are images, and how should these different things, 6:14 maybe need to be highlighted or de-emphasized? 6:17 And then, it tells you to draw inspiration from the world around you, 6:21 and maybe look at classic works of art and draw inspiration from those. 6:26 So, here is an example of that. 6:31 You can look at the colors that are being used in this image, and 6:33 it picks them out there. 6:37 And then, you can apply those to a webpage. 6:39 Because, like I said before, a lot of this has already been figured out. 6:42 And, it's been figured out in very analytical and technical terms. 6:46 So, if that's the way that you think, 6:51 which it certainly is the way that I think about color. 6:53 It's a pretty useful way for you to apply color to your website. 6:56 Anyway, really cool article. 7:01 Definitely be sure to check this one out. 7:02 >> You know, I was gonna make an off color joke during that. 7:04 >> Mm. 7:07 >> But, I didn't wanna upset you. 7:09 [BLANK_AUDIO] 7:10 Glad you're keeping it light hearted, Jason. 7:13 >> Next up, we have-. 7:18 >> Don't wanna saturate the show with too many jokes. 7:18 >> Yeah. 7:22 Might have to pull down the shade or something on that one? 7:23 >> Hm. 7:26 >> Next up, we have a jQuery plugin called scrollSpeed. 7:27 This will allow you to use jQuery to programmatically scroll down a web page 7:30 control the speed and steps of scrolling on your webpage. 7:35 What does that mean? 7:40 Well, let's go ahead and check this out. 7:41 Here is a page with a lot of text, and I'm just going to do a very small scroll here. 7:43 And, you'll notice it goes all the way down the page, like a lot. 7:48 So, this has been scroll-jacked. 7:52 And, if you really wanna piss off your users, this is the plugin to do it. 7:55 Now, there are legitimate reasons to jack the scrolling. 7:59 Let's say, you know, you have one of those sites that has, what is it? 8:02 Parallax scrolling. 8:06 Change the, you know, the units with which to scroll down the page. 8:07 Anyway, this is very, very easy to use. 8:12 Just include jQuery, and then call jQuery.scrollSpeed. 8:13 And, you give it two units. 8:17 The first is the step which defaults to 100 units and 8:18 the speed which is 800 milliseconds. 8:21 So, you can play around with that, see which one is better for 8:23 your particular page. 8:26 And, if you want to, you can also use Custom Easing as a third argument. 8:28 And, that's it. 8:31 It's just a really quick easy to use plug-in. 8:32 And, so if you want to use that, check that out. 8:35 We'll have a link in the show notes right below the video. 8:36 >> Very cool stuff. 8:39 Well next up, is an article called Design Last. 8:40 Now, traditionally, most web sites have been putting design first, 8:45 and they maybe design this beautifully responsive layout. 8:51 And then, they try to cram that into some sort of developmental process, 8:55 and I don't know. 9:00 I, I think that is still very valid, but 9:01 this article sort of makes an argument for doing things the opposite way, 9:05 and thinking about how you can design maybe your HTML and your content. 9:11 First, which is still true in the other process, and 9:18 then start to build around that. 9:22 So, this is actually a really long article, but I'm just going to-. 9:24 >> TLDR. 9:30 >> Scroll down to the list, as it says here. 9:32 So first, is content, and it's says, 9:36 this is the only constant across all of your devices. 9:41 So, of course, that's where you want to start. 9:44 You want to start with content, and then you want to describe it using HTML. 9:47 And then, once you have the content nailed down, 9:53 that's when you can start moving in to other parts of the design. 9:57 Anyway, it's a really cool blog post. 10:00 Definitely be sure and check this one out. 10:03 It presents a lot of ideas about thinking about how design and development relates 10:04 to one another, that I haven't really seen questioned in a pretty long time. 10:10 So, very cool stuff. 10:14 Anyway, that's all we have time for this week. 10:15 I am @nickrp on Twitter. 10:18 >> And, I am @jseifer. 10:19 For more information on anything we talked about, 10:20 check out the show notes below this video. 10:23 Thank you so much for watching, and we will see you next week. 10:25 [MUSIC] 10:27 [LAUGH]. 10:35 >> [LAUGH] Wow, it looks like your laptop's on fire there, Jason. 10:37 >> Yeah, kind of like us with those jokes. 10:42