1 00:00:00,340 --> 00:00:01,160 I'm Nick Pettit. 2 00:00:01,160 --> 00:00:02,160 >> I'm Jason Seifer. 3 00:00:02,160 --> 00:00:04,800 >> And, you're watching The Treehouse Show, your weekly dose of internets, 4 00:00:04,800 --> 00:00:07,950 where we talk about all things web design, web development, and more. 5 00:00:07,950 --> 00:00:12,905 >> In this episode, we'll be talking about polygon art, colors, scrolling, and more. 6 00:00:12,905 --> 00:00:14,468 >> Let's check it out. 7 00:00:14,468 --> 00:00:19,606 [MUSIC] 8 00:00:19,606 --> 00:00:25,010 First up is this really cool post about animated polygon art. 9 00:00:25,010 --> 00:00:27,020 You're probably thinking, what the heck is that? 10 00:00:27,020 --> 00:00:27,650 >> What the heck is that? 11 00:00:27,650 --> 00:00:28,550 >> Well, this is. 12 00:00:28,550 --> 00:00:30,280 This is what the heck that is. 13 00:00:30,280 --> 00:00:35,070 It is polygon artwork that is animated. 14 00:00:35,070 --> 00:00:38,042 >> I'd be lion if I'd say I wasn't impressed. 15 00:00:38,042 --> 00:00:39,693 [BLANK_AUDIO] 16 00:00:39,693 --> 00:00:40,800 Get it? Cuz it's a lion. 17 00:00:40,800 --> 00:00:42,220 >> Yeah, I got the joke. 18 00:00:43,240 --> 00:00:48,725 So, this is just one SVAG file and you're probably thinking, wow. 19 00:00:48,725 --> 00:00:52,871 Well, how the heck are they animating every individual triangle, 20 00:00:52,871 --> 00:00:54,259 that's all one SVAG. 21 00:00:54,259 --> 00:01:02,149 Well, it's using this pretty cool library called TimelineMax by GreenSock. 22 00:01:02,149 --> 00:01:07,179 So, we can click on that and it will open up the site for TimelineMax and 23 00:01:07,179 --> 00:01:13,580 you can download it on GetHub, or you can just download the zip if you prefer. 24 00:01:13,580 --> 00:01:21,532 And basically, this, this library allows you to do what's called tweening, 25 00:01:21,532 --> 00:01:27,125 so you can do animations between one point and another. 26 00:01:27,125 --> 00:01:32,019 And that, turns out, gives you pretty fine control, so you can take something 27 00:01:32,019 --> 00:01:36,784 like this SVG, and you can break it apart into it's individual components. 28 00:01:36,784 --> 00:01:42,550 Or in this case, individual triangles and you can animate them one by one. 29 00:01:42,550 --> 00:01:50,150 So, here is the JavaScript to do that and it's surprisingly light weight. 30 00:01:50,150 --> 00:01:54,560 It's just using that TimelineMax library. 31 00:01:54,560 --> 00:01:58,990 And then, the HTML is a little bit more complicated, but 32 00:01:58,990 --> 00:02:05,060 that's actually just because that's one SVG file, so that's all that's there. 33 00:02:05,060 --> 00:02:05,980 You can also-. 34 00:02:05,980 --> 00:02:06,940 >> Man, that's impressive. 35 00:02:06,940 --> 00:02:10,520 >> You were just waiting for that, weren't you? 36 00:02:10,520 --> 00:02:11,470 >> Well, yeah. I was sitting on that. 37 00:02:11,470 --> 00:02:12,050 >> Yeah, yeah. 38 00:02:12,050 --> 00:02:13,470 >> It's just a, it's just a lion button. 39 00:02:15,600 --> 00:02:18,550 >> So, you can make this guy appear or disappear. 40 00:02:18,550 --> 00:02:20,110 So, pretty similar to the lion. 41 00:02:20,110 --> 00:02:24,060 This just makes all the polygons appear or disappear all at one time. 42 00:02:24,060 --> 00:02:26,170 And, you can also make these interactive. 43 00:02:26,170 --> 00:02:30,350 So, I can hover over this and it breaks apart. 44 00:02:30,350 --> 00:02:32,290 Or-. >> Oh, what a tough break. 45 00:02:32,290 --> 00:02:37,410 >> When I roll the mouse off of it, it all comes back together. 46 00:02:37,410 --> 00:02:41,040 So, anyway, I thought this was pretty cool. 47 00:02:41,040 --> 00:02:45,810 It's a nice way to spruce up some polygon SVGs 48 00:02:45,810 --> 00:02:48,400 just by adding a little bit of animation. 49 00:02:48,400 --> 00:02:52,250 >> Yeah, and you know, this article might be not available soon. 50 00:02:52,250 --> 00:02:54,211 So, check it out before it's poly-gone. 51 00:02:54,211 --> 00:02:57,398 [BLANK_AUDIO] 52 00:02:57,398 --> 00:03:02,753 Next up, we have a little jQuery plugin called Unveil, 53 00:03:02,753 --> 00:03:08,060 that is used to lazy load images using jQuery or zepto.js. 54 00:03:08,060 --> 00:03:13,240 Now, lazy loading is the act of loading images only when you scroll down the page, 55 00:03:13,240 --> 00:03:16,890 thereby decreasing load times of the rest of the page, 56 00:03:16,890 --> 00:03:22,120 which is really good for mobile users or people with slow internet connections. 57 00:03:22,120 --> 00:03:24,900 Cuz think about it, if you have a retina image, 58 00:03:24,900 --> 00:03:28,050 that is quite a lot to download on a page. 59 00:03:28,050 --> 00:03:33,110 So, what's really nice about this library is that it is less than 1k and 60 00:03:33,110 --> 00:03:35,300 very easy to use. 61 00:03:35,300 --> 00:03:38,060 So, let's say you have your images on the page here. 62 00:03:38,060 --> 00:03:44,590 Just give it a jQuery or a Zepto selector and call the Unveil method. 63 00:03:44,590 --> 00:03:46,220 By the way, I think it should be called Veil 64 00:03:46,220 --> 00:03:47,528 because it's like you're not unveiling. 65 00:03:47,528 --> 00:03:50,170 It's you're like veiling it until it's ready. 66 00:03:50,170 --> 00:03:50,670 Mm. 67 00:03:50,670 --> 00:03:53,890 Anyway, you can also give it a, a threshold in pixels. 68 00:03:53,890 --> 00:03:58,260 So normally, when the images are loaded or 69 00:03:58,260 --> 00:04:00,750 unveiled, it would be just when it's scrolled to. 70 00:04:00,750 --> 00:04:03,160 But, if you wanna give some padding in pixels, 71 00:04:03,160 --> 00:04:07,440 you can do that by passing an argument to the Unveil method. 72 00:04:07,440 --> 00:04:10,830 You also get a call back if you want to, 73 00:04:10,830 --> 00:04:15,850 that you can do other things inside of the unveiled image. 74 00:04:15,850 --> 00:04:18,780 So, here is a little demo on the page, and 75 00:04:18,780 --> 00:04:22,400 you can kinda scroll down quickly to see these images coming in or can you? 76 00:04:22,400 --> 00:04:24,990 That's how quickly the plugin works. 77 00:04:24,990 --> 00:04:29,830 It is compatible with all browsers IE7 and up, and that is pretty much it. 78 00:04:29,830 --> 00:04:31,570 Very easy-to-use plugin, very quick, so 79 00:04:31,570 --> 00:04:34,500 go ahead and check it out if you wanna unveil some images. 80 00:04:34,500 --> 00:04:36,670 >> Thanks for unveiling that, Jason. 81 00:04:38,320 --> 00:04:39,260 Okay. 82 00:04:39,260 --> 00:04:44,960 Next one is this really cool blog post called It's Only Color from Thoughtbot, 83 00:04:44,960 --> 00:04:48,610 and it's an article all about color theory, 84 00:04:48,610 --> 00:04:52,860 the color wheel, and how to choose color palettes for your website. 85 00:04:52,860 --> 00:04:57,920 So, if you're designing a site and you kinda just feel like you have no clue. 86 00:04:57,920 --> 00:05:00,270 Maybe you're a developer and you're picking, and 87 00:05:00,270 --> 00:05:03,770 that's something that is just new to you. 88 00:05:03,770 --> 00:05:10,460 Well, there's a couple of techniques that you can use to think about color. 89 00:05:10,460 --> 00:05:14,700 And, these are techniques that have been already established for 90 00:05:14,700 --> 00:05:18,040 a really long time in the art world. 91 00:05:18,040 --> 00:05:21,630 And so, it makes sense to bring them to web design. 92 00:05:22,720 --> 00:05:25,260 There's this color wheel here. 93 00:05:25,260 --> 00:05:29,470 And, the article sort of goes through and explains what the color wheel is, 94 00:05:29,470 --> 00:05:31,050 where it came from. 95 00:05:31,050 --> 00:05:34,290 And, it explains primary, secondary, and tertiary colors. 96 00:05:34,290 --> 00:05:38,180 So, primary of course, is yellow, red, blue. 97 00:05:38,180 --> 00:05:40,810 Secondary is orange, violet, green. 98 00:05:40,810 --> 00:05:45,501 And, tertiary is yellow-orange, red-orange, red-violet, blue-violet, 99 00:05:45,501 --> 00:05:47,210 blue-green, and yellow-green. 100 00:05:47,210 --> 00:05:50,400 So, you can see that there on the color wheel with those helpful 101 00:05:50,400 --> 00:05:52,880 triangles to kinda figure that out. 102 00:05:52,880 --> 00:05:56,210 And, there's a some vocabulary words as well. 103 00:05:56,210 --> 00:06:01,440 Hue, tint, shade, and saturation, just to kind of set things up. 104 00:06:01,440 --> 00:06:04,520 And then, it explains how to choose a color palette. 105 00:06:04,520 --> 00:06:09,500 So maybe, one way you're starting out is with a black and white website, and 106 00:06:09,500 --> 00:06:14,440 then you can think about, you know, what parts of the website are text? 107 00:06:14,440 --> 00:06:17,510 What are images, and how should these different things, 108 00:06:17,510 --> 00:06:21,103 maybe need to be highlighted or de-emphasized? 109 00:06:21,103 --> 00:06:26,430 And then, it tells you to draw inspiration from the world around you, 110 00:06:26,430 --> 00:06:31,420 and maybe look at classic works of art and draw inspiration from those. 111 00:06:31,420 --> 00:06:33,460 So, here is an example of that. 112 00:06:33,460 --> 00:06:37,450 You can look at the colors that are being used in this image, and 113 00:06:37,450 --> 00:06:39,530 it picks them out there. 114 00:06:39,530 --> 00:06:42,690 And then, you can apply those to a webpage. 115 00:06:42,690 --> 00:06:46,470 Because, like I said before, a lot of this has already been figured out. 116 00:06:46,470 --> 00:06:51,070 And, it's been figured out in very analytical and technical terms. 117 00:06:51,070 --> 00:06:53,250 So, if that's the way that you think, 118 00:06:53,250 --> 00:06:56,350 which it certainly is the way that I think about color. 119 00:06:56,350 --> 00:07:01,070 It's a pretty useful way for you to apply color to your website. 120 00:07:01,070 --> 00:07:02,620 Anyway, really cool article. 121 00:07:02,620 --> 00:07:04,910 Definitely be sure to check this one out. 122 00:07:04,910 --> 00:07:07,970 >> You know, I was gonna make an off color joke during that. 123 00:07:07,970 --> 00:07:09,390 >> Mm. 124 00:07:09,390 --> 00:07:10,802 >> But, I didn't wanna upset you. 125 00:07:10,802 --> 00:07:13,554 [BLANK_AUDIO] 126 00:07:13,554 --> 00:07:15,810 Glad you're keeping it light hearted, Jason. 127 00:07:18,000 --> 00:07:18,710 >> Next up, we have-. 128 00:07:18,710 --> 00:07:20,780 >> Don't wanna saturate the show with too many jokes. 129 00:07:22,810 --> 00:07:23,870 >> Yeah. 130 00:07:23,870 --> 00:07:26,190 Might have to pull down the shade or something on that one? 131 00:07:26,190 --> 00:07:27,160 >> Hm. 132 00:07:27,160 --> 00:07:30,790 >> Next up, we have a jQuery plugin called scrollSpeed. 133 00:07:30,790 --> 00:07:35,430 This will allow you to use jQuery to programmatically scroll down a web page 134 00:07:35,430 --> 00:07:40,380 control the speed and steps of scrolling on your webpage. 135 00:07:40,380 --> 00:07:41,610 What does that mean? 136 00:07:41,610 --> 00:07:43,510 Well, let's go ahead and check this out. 137 00:07:43,510 --> 00:07:48,840 Here is a page with a lot of text, and I'm just going to do a very small scroll here. 138 00:07:48,840 --> 00:07:52,530 And, you'll notice it goes all the way down the page, like a lot. 139 00:07:52,530 --> 00:07:55,020 So, this has been scroll-jacked. 140 00:07:55,020 --> 00:07:59,340 And, if you really wanna piss off your users, this is the plugin to do it. 141 00:07:59,340 --> 00:08:02,770 Now, there are legitimate reasons to jack the scrolling. 142 00:08:02,770 --> 00:08:06,478 Let's say, you know, you have one of those sites that has, what is it? 143 00:08:06,478 --> 00:08:07,990 Parallax scrolling. 144 00:08:07,990 --> 00:08:12,380 Change the, you know, the units with which to scroll down the page. 145 00:08:12,380 --> 00:08:13,740 Anyway, this is very, very easy to use. 146 00:08:13,740 --> 00:08:17,340 Just include jQuery, and then call jQuery.scrollSpeed. 147 00:08:17,340 --> 00:08:18,850 And, you give it two units. 148 00:08:18,850 --> 00:08:21,703 The first is the step which defaults to 100 units and 149 00:08:21,703 --> 00:08:23,885 the speed which is 800 milliseconds. 150 00:08:23,885 --> 00:08:26,990 So, you can play around with that, see which one is better for 151 00:08:26,990 --> 00:08:28,195 your particular page. 152 00:08:28,195 --> 00:08:31,735 And, if you want to, you can also use Custom Easing as a third argument. 153 00:08:31,735 --> 00:08:32,569 And, that's it. 154 00:08:32,569 --> 00:08:35,095 It's just a really quick easy to use plug-in. 155 00:08:35,095 --> 00:08:36,962 And, so if you want to use that, check that out. 156 00:08:36,962 --> 00:08:39,790 We'll have a link in the show notes right below the video. 157 00:08:39,790 --> 00:08:40,540 >> Very cool stuff. 158 00:08:40,540 --> 00:08:45,050 Well next up, is an article called Design Last. 159 00:08:45,050 --> 00:08:51,010 Now, traditionally, most web sites have been putting design first, 160 00:08:51,010 --> 00:08:55,200 and they maybe design this beautifully responsive layout. 161 00:08:55,200 --> 00:09:00,490 And then, they try to cram that into some sort of developmental process, 162 00:09:00,490 --> 00:09:01,900 and I don't know. 163 00:09:01,900 --> 00:09:05,760 I, I think that is still very valid, but 164 00:09:05,760 --> 00:09:11,450 this article sort of makes an argument for doing things the opposite way, 165 00:09:11,450 --> 00:09:18,360 and thinking about how you can design maybe your HTML and your content. 166 00:09:18,360 --> 00:09:22,380 First, which is still true in the other process, and 167 00:09:22,380 --> 00:09:24,780 then start to build around that. 168 00:09:24,780 --> 00:09:30,965 So, this is actually a really long article, but I'm just going to-. 169 00:09:30,965 --> 00:09:32,270 >> TLDR. 170 00:09:32,270 --> 00:09:36,310 >> Scroll down to the list, as it says here. 171 00:09:36,310 --> 00:09:41,040 So first, is content, and it's says, 172 00:09:41,040 --> 00:09:44,720 this is the only constant across all of your devices. 173 00:09:44,720 --> 00:09:47,160 So, of course, that's where you want to start. 174 00:09:47,160 --> 00:09:53,470 You want to start with content, and then you want to describe it using HTML. 175 00:09:53,470 --> 00:09:57,120 And then, once you have the content nailed down, 176 00:09:57,120 --> 00:10:00,670 that's when you can start moving in to other parts of the design. 177 00:10:00,670 --> 00:10:03,360 Anyway, it's a really cool blog post. 178 00:10:03,360 --> 00:10:04,690 Definitely be sure and check this one out. 179 00:10:04,690 --> 00:10:10,230 It presents a lot of ideas about thinking about how design and development relates 180 00:10:10,230 --> 00:10:14,000 to one another, that I haven't really seen questioned in a pretty long time. 181 00:10:14,000 --> 00:10:15,920 So, very cool stuff. 182 00:10:15,920 --> 00:10:18,270 Anyway, that's all we have time for this week. 183 00:10:18,270 --> 00:10:19,880 I am @nickrp on Twitter. 184 00:10:19,880 --> 00:10:20,930 >> And, I am @jseifer. 185 00:10:20,930 --> 00:10:23,070 For more information on anything we talked about, 186 00:10:23,070 --> 00:10:25,610 check out the show notes below this video. 187 00:10:25,610 --> 00:10:27,464 Thank you so much for watching, and we will see you next week. 188 00:10:27,464 --> 00:10:35,372 [MUSIC] 189 00:10:35,372 --> 00:10:37,240 [LAUGH]. 190 00:10:37,240 --> 00:10:42,031 >> [LAUGH] Wow, it looks like your laptop's on fire there, Jason. 191 00:10:42,031 --> 00:10:43,690 >> Yeah, kind of like us with those jokes.