I'm Nick Pettit.

>> I'm Jason Seifer.

>> And, you're watching The Treehouse Show, your weekly dose of internets,

where we talk about all things web design, web development, and more.

>> In this episode, we'll be talking about polygon art, colors, scrolling, and more.

>> Let's check it out.

[MUSIC]

First up is this really cool post about animated polygon art.

You're probably thinking, what the heck is that?

>> What the heck is that?

>> Well, this is.

This is what the heck that is.

It is polygon artwork that is animated.

>> I'd be lion if I'd say I wasn't impressed.

[BLANK_AUDIO]

Get it? Cuz it's a lion.

>> Yeah, I got the joke.

So, this is just one SVAG file and you're probably thinking, wow.

Well, how the heck are they animating every individual triangle,

that's all one SVAG.

Well, it's using this pretty cool library called TimelineMax by GreenSock.

So, we can click on that and it will open up the site for TimelineMax and

you can download it on GetHub, or you can just download the zip if you prefer.

And basically, this, this library allows you to do what's called tweening,

so you can do animations between one point and another.

And that, turns out, gives you pretty fine control, so you can take something

like this SVG, and you can break it apart into it's individual components.

Or in this case, individual triangles and you can animate them one by one.

So, here is the JavaScript to do that and it's surprisingly light weight.

It's just using that TimelineMax library.

And then, the HTML is a little bit more complicated, but

that's actually just because that's one SVG file, so that's all that's there.

You can also-.

>> Man, that's impressive.

>> You were just waiting for that, weren't you?

>> Well, yeah. I was sitting on that.

>> Yeah, yeah.

>> It's just a, it's just a lion button.

>> So, you can make this guy appear or disappear.

So, pretty similar to the lion.

This just makes all the polygons appear or disappear all at one time.

And, you can also make these interactive.

So, I can hover over this and it breaks apart.

Or-. >> Oh, what a tough break.

>> When I roll the mouse off of it, it all comes back together.

So, anyway, I thought this was pretty cool.

It's a nice way to spruce up some polygon SVGs

just by adding a little bit of animation.

>> Yeah, and you know, this article might be not available soon.

So, check it out before it's poly-gone.

[BLANK_AUDIO]

Next up, we have a little jQuery plugin called Unveil,

that is used to lazy load images using jQuery or zepto.js.

Now, lazy loading is the act of loading images only when you scroll down the page,

thereby decreasing load times of the rest of the page,

which is really good for mobile users or people with slow internet connections.

Cuz think about it, if you have a retina image,

that is quite a lot to download on a page.

So, what's really nice about this library is that it is less than 1k and

very easy to use.

So, let's say you have your images on the page here.

Just give it a jQuery or a Zepto selector and call the Unveil method.

By the way, I think it should be called Veil

because it's like you're not unveiling.

It's you're like veiling it until it's ready.

Mm.

Anyway, you can also give it a, a threshold in pixels.

So normally, when the images are loaded or

unveiled, it would be just when it's scrolled to.

But, if you wanna give some padding in pixels,

you can do that by passing an argument to the Unveil method.

You also get a call back if you want to,

that you can do other things inside of the unveiled image.

So, here is a little demo on the page, and

you can kinda scroll down quickly to see these images coming in or can you?

That's how quickly the plugin works.

It is compatible with all browsers IE7 and up, and that is pretty much it.

Very easy-to-use plugin, very quick, so

go ahead and check it out if you wanna unveil some images.

>> Thanks for unveiling that, Jason.

Okay.

Next one is this really cool blog post called It's Only Color from Thoughtbot,

and it's an article all about color theory,

the color wheel, and how to choose color palettes for your website.

So, if you're designing a site and you kinda just feel like you have no clue.

Maybe you're a developer and you're picking, and

that's something that is just new to you.

Well, there's a couple of techniques that you can use to think about color.

And, these are techniques that have been already established for

a really long time in the art world.

And so, it makes sense to bring them to web design.

There's this color wheel here.

And, the article sort of goes through and explains what the color wheel is,

where it came from.

And, it explains primary, secondary, and tertiary colors.

So, primary of course, is yellow, red, blue.

Secondary is orange, violet, green.

And, tertiary is yellow-orange, red-orange, red-violet, blue-violet,

blue-green, and yellow-green.

So, you can see that there on the color wheel with those helpful

triangles to kinda figure that out.

And, there's a some vocabulary words as well.

Hue, tint, shade, and saturation, just to kind of set things up.

And then, it explains how to choose a color palette.

So maybe, one way you're starting out is with a black and white website, and

then you can think about, you know, what parts of the website are text?

What are images, and how should these different things,

maybe need to be highlighted or de-emphasized?

And then, it tells you to draw inspiration from the world around you,

and maybe look at classic works of art and draw inspiration from those.

So, here is an example of that.

You can look at the colors that are being used in this image, and

it picks them out there.

And then, you can apply those to a webpage.

Because, like I said before, a lot of this has already been figured out.

And, it's been figured out in very analytical and technical terms.

So, if that's the way that you think,

which it certainly is the way that I think about color.

It's a pretty useful way for you to apply color to your website.

Anyway, really cool article.

Definitely be sure to check this one out.

>> You know, I was gonna make an off color joke during that.

>> Mm.

>> But, I didn't wanna upset you.

[BLANK_AUDIO]

Glad you're keeping it light hearted, Jason.

>> Next up, we have-.

>> Don't wanna saturate the show with too many jokes.

>> Yeah.

Might have to pull down the shade or something on that one?

>> Hm.

>> Next up, we have a jQuery plugin called scrollSpeed.

This will allow you to use jQuery to programmatically scroll down a web page

control the speed and steps of scrolling on your webpage.

What does that mean?

Well, let's go ahead and check this out.

Here is a page with a lot of text, and I'm just going to do a very small scroll here.

And, you'll notice it goes all the way down the page, like a lot.

So, this has been scroll-jacked.

And, if you really wanna piss off your users, this is the plugin to do it.

Now, there are legitimate reasons to jack the scrolling.

Let's say, you know, you have one of those sites that has, what is it?

Parallax scrolling.

Change the, you know, the units with which to scroll down the page.

Anyway, this is very, very easy to use.

Just include jQuery, and then call jQuery.scrollSpeed.

And, you give it two units.

The first is the step which defaults to 100 units and

the speed which is 800 milliseconds.

So, you can play around with that, see which one is better for

your particular page.

And, if you want to, you can also use Custom Easing as a third argument.

And, that's it.

It's just a really quick easy to use plug-in.

And, so if you want to use that, check that out.

We'll have a link in the show notes right below the video.

>> Very cool stuff.

Well next up, is an article called Design Last.

Now, traditionally, most web sites have been putting design first,

and they maybe design this beautifully responsive layout.

And then, they try to cram that into some sort of developmental process,

and I don't know.

I, I think that is still very valid, but

this article sort of makes an argument for doing things the opposite way,

and thinking about how you can design maybe your HTML and your content.

First, which is still true in the other process, and

then start to build around that.

So, this is actually a really long article, but I'm just going to-.

>> TLDR.

>> Scroll down to the list, as it says here.

So first, is content, and it's says,

this is the only constant across all of your devices.

So, of course, that's where you want to start.

You want to start with content, and then you want to describe it using HTML.

And then, once you have the content nailed down,

that's when you can start moving in to other parts of the design.

Anyway, it's a really cool blog post.

Definitely be sure and check this one out.

It presents a lot of ideas about thinking about how design and development relates

to one another, that I haven't really seen questioned in a pretty long time.

So, very cool stuff.

Anyway, that's all we have time for this week.

I am @nickrp on Twitter.

>> And, I am @jseifer.

For more information on anything we talked about,

check out the show notes below this video.

Thank you so much for watching, and we will see you next week.

[MUSIC]

[LAUGH].

>> [LAUGH] Wow, it looks like your laptop's on fire there, Jason.

>> Yeah, kind of like us with those jokes.