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

web Icon, webshims, JQuery Coding Standards, and more.

>> Let's check it out.

[MUSIC]

>> First up we're gonna be talking about the iconic web icon system.

Now this is just to be clear.

A paid project and they are not sponsoring the show.

But people have been talking about it quite a bit lately.

So we're gonna through and take a look at

why people have been talking so much about Iconic.

So we talked about ton of different icon systems on

the show here before but why talk about this one?

Well its interesting because as it says on the site right here, which

verifies that I can read it is much more than a static icon set.

So, these are actually different pieces of SVGs that are layered

together to create what you see as the icons on the screen.

Now, one of the benefits that you get when all these icons are in a bunch of

different pieces is that you can style these

elements and you can style different parts of it.

So, if we take a look at this camera right here we can see that the lens, the

barrel, the glass, all of these different things are different parts of the icon.

So, you can make them different colors if you choose to.

You see an example right here where there are just tons of different colors

inside these icons, and you can even create different themes for the icon set.

So, here it is, contained, multi toned, ton of different things.

Now, one other great thing about this icon set is it is responsive and scalable.

So it's a few different sizes, 16x16, 32x32, and 128x128.

Now you can do the.

You can see how it reacts to responsive resizing.

If we drag the slider right here, you can see that the smallest size, the details

that aren't important, are hidden and then, as

it gets larger, we get more and more detail.

into these large icons.

So we'll have a link in the show notes to the iconic icon set.

Now, as I said they're not sponsoring the show.

We just thought it was a really cool project so make sure to check it out.

>> Very nice stuff.

Well, next up is first time user experiences.

This is a Tumblr blog.

That, I think it's called a tumblelog.

>> Tumblelog?

>> Yeah.

Tumb, tumblog.

>> That makes more sense.

This is a tumblelog that basically categorizes and catalogs first time user

experiences or the blank slate, which is something that we've talked about before.

Basically, they take an existing app, and this

looks like it's some kind of running app,

and they say what they think is good about it and what they think should be improved.

And this is a really important and subtle part of building user experiences.

So, this is a really great blog to keep up with.

If you are trying to build up the blank slate

in your app, or the empty state in your app.

So for example on this running app they say that, the

app defers its intro until after a person selects try Strava.

I guess that's the name of the app.

And it doesn't force people to see that, that

intro tour until after they've gotten started with it.

It also offers a limited functionality trial so you can try out the app.

So, that's pretty cool.

And then, they offer a couple of things for improvement.

There's a whole bunch more posts here.

It's a pretty nice blog.

I love the nice big screen shots here and

how detailed they are for each individual user experience.

>> Yeah.

>> Definitely worth checking out.

>> Definitely.

You know, we talk about white slates here all the time.

So, that's great for further in-depth reading.

>> Definitely.

>> Next up, we have a project called Web shim or maybe it's Webs him.

I'm not really Sure how to pronounce it but this is a poly-fill that

lets you reliably use HTML-5 features across

browsers even if native support is lacking.

>> You know, Jason, I just looked at it again, I think it says we BS him.

>> Oh.

Treehouse show theme.

>> That must be it.

So this gives you just a ton of different things that you'll use, if you

want to start using HTML 5, but maybe

for business reasons you're limited to older browsers.

And you really start want, really want to start using these HTML 5 features,

you can see bunch of different things

are supported here, you can support Geo location.

And it's very, very easy to use.

You know, you throw this webshim or web BSHIM library into your

project, start it up and you are pretty much ready to go.

You just call the different attributes that you want to start, so if we

wanna use the polyfils we call this

polyfill method, that sets up everything for us.

And currently, it supports these features equiscript five, geolocation,

canvas, forms, media elements, tracked file readers, and details.

So we talk a lot about polyfills, and here's an

actual project that you can use in your own projects.

You can find a link to this in the show notes, which you can get to is at

youtube.com/gotreehouse, or search for us on iTunes, we're The

Treehouse Show, and make sure to subscribe and rate us.

>> Very nice.

Well next up is WireFi.

This is a very simple front end framework that allows you to prototype your apps

before you go on to maybe a more

robust front up framework like Bootstrap or Foundation.

So here's what the homepage looks like.

It says build intuitive powerful wireframes for smarter web development.

Let's take a look at the Lists example here.

And, you can see that they're basically just

styling this using almost no classes at all.

In fact, this is what it looks like when there's no classes.

So, they've opted for no bullet points here, just

some spacing to indicate where each element is nested.

If you apply some classes, you can start to get some basic styling.

So if you want maybe square bullet points, you can apply the square class and so on.

So.

It just provides some super basic stylings so

that you can wire frame your app using code.

So you can create these really quick

prototypes without having to include all of

the classes that you might find in

Foundation, Bootstrap and other [INAUDIBLE] and frameworks.

So pretty cool stuff.

>> Yeah, that, that's great.

Next up we have a post on jQuery coding standards and best practices.

Now, as you might expect from that title, you're going to learn

how you should be programming jQuery if you aren't doing these things already.

Now, in addition to just Best Practices, it's kind of going

over things that are gonna be more performance improvements, as well.

So first up is just great advice like store and cache your jQuery variables.

Which means that if your doing a selector, like

grabbing my div in jQuery, assign that to a variable

so that you don't have to perform this look

up and applying jQuery to each element every single time.

Every sing, every time you go back and

use my div, you would use the variable instead.

Now then it goes through it talks about the

different selectors and what is slow and what is fast.

Now in the most general sense you wanna use I.D. Selectors when you can, or when

you're using Class Selectors don't use the element type in your Class Selector.

Now it goes through and has just a ton of

different advice for selectors, DOM Manipulation, events, even AJAX requests.

So too much to go through here on the show, but really these

are things you should be doing if you're using jQuery in your projects.

>> Next up is the Random User Generator, which is a plugin for Photoshop

that allows you to generate pictures of random people with some random names.

So they have a little example here of what

it will look like once it's actually installed in Photoshop.

So you can choose if you just want to generate man, woman or both.

And you can click the New Random User button.

To generate some different photos and different names.

This is really helpful if you're trying to prototype an app.

And maybe you're using wireFi, for example,

and you want to actually include some images.

So, you could do this in your Photoshop mockups, or you

could actually carry these over to your code, if you wanted to.

so.

This is helpful if you don't wanna just include, you know lot

of maps, some texts, and a bunch of boxes for your prototype.

You actually want to include real copy and real images to get

an idea of what the app is actually going to look like.

And kind of test its limitations, see what your margins, padding

and all that sort of stuff looks like, with real information.

So that's pretty nice.

It's easy to install, and you can basically, just

use it as simply as the example shows you.

You just click the New User button or New Random User, and it will generate

a some text that, and an image that you can paste directly into your document.

>> So, check this out.

See, see the little this little box on

the site there where it says Random User Generator?

>> Uh-huh.

>> If you move that ready?

Look.

Look at that.

Look at that.

>> Whoa

>> Oh, look there's a kitten waving at you.

Huh.

>> Look at that.

>> Who ever even knew that?

>> I'm just going to use that for everything instead.

>> Yeah, I had to really pause for a second to see it.

>> Very nice.

>> Get it?

>> I get it.

I got the joke.

>> Yeah.

Next up we have a project called Scroll Magic, oooo.

>> Magic!

>> Yeah.

This is one of those paralax scrolling libraries, look at

this there's a there's a magic top hat on the site.

>> What?

>> And if I start scrolling down.

What?

Look at that, it's a wand.

That's ScrollMagic.

But that's not all.

You were saying you want more?

Hey, we got more buddy.

Check this out.

We can fade, we can move, we can spin, scale, adjust text properties.

Pin if you wanna, don't have to.

Look at this.

Just a ton of different possible options for parallax scrolling on your site.

We're seeing a lot more sites use parallax effects these days.

So here it, here is ScrollMagic.

Boom, that's it.

Do, do you need more than the examples?

Do you need more than that?

Cuz I, I don't have any more.

And that's all I got.

And all I got's ScrollMagic.

>> You can use magic to impress your friends.

>> Yeah.

I hope you're all impressed.

>> Next up is a post from the Mozilla Hacks blog on The Gamepad API.

So, if you were to work, there's actually a W3C specification, that's in draft

form right now, for adding Gamepad controllers to your site.

Now, why would you do this?

Well, if you're working on an HTML5 game or maybe you're building a project in

WEB-DL, you might wanna provide an alternative

control scheme other than the mouse and keyboard.

So, that you can open up your game to new audiences.

Say that you want to attract more than just the PC gaming

crowd, and you want to try to get console users into your game.

This is a great way to do that.

Alternatively, Gamepads could also be used as an alternative controller for something

that's like a living room experience, or the ten foot experience, and you can

use that to navigate some kind

of entertainment experience where you're trying to

maybe choose a, a video to watch on like Netflix or something like that.

Now it has okay ish browser support right now, it,

it works in Firefox and it works in Google chrome chrome it works out

of the box, there's a couple of small [INAUDIBLE] right now but

with Firefox you actually have to enable it until Firefox 28 is released.

And the current version is Firefox 27.

So, that should be coming soon by default.

[CROSSTALK]

>> Actually, it just came out the other day.

>> Did it really, Jason?

>> Yeah.

>> Thank you so much.

>> Okay.

>> Wow.

So it's enabled by default now.

That's really cool.

And you can use the game pad API in

a couple of different ways, you can detect, you

know, the analog, control sticks, the different buttons the

different triggers and d pads, bumpers, that kind of stuff.

And it will map those to an array and you

can use that in your game or in your entertainment experience.

So here's what that object looks like, there's a bunch of

stuff in this object, I definitely recommend you check it out.

Don't have time to go into all of it on the show here,

but, if you're building an html five game it's definitely worth taking a look.

>> Yeah.

I'm personally really happy that I implemented the Konami

code on my website way back in the day.

>> Smart.

Well, that's all we have time for today, I'm @nickrp on Twitter.

>> And I am @jseifer.

For more information on anything we talked about

check out our show notes which you can get

to at youtube.com/gotreehouse or search for us in iTunes

and please rate us, we are The Treehouse Show.

>> And of course, if you'd like to see more videos like this one about web

design, web development, mobile business, and so much

more, be sure to check us out at teamtreehouse.com.

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

[MUSIC].