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