I'm Nick Petitt. >>And I'm Jason Seiffer. >>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 flat UI colors,

things you shouldn't be doing with jQuery,

usability, and much more. >>Let's check it out.

[? music ?]

[The Treehouse Show]

Well, first up is flat UI colors, and, of course,

we've talked about flat UI a little bit on the show. >>Talked so much.

>>It's basically the opposite of skeuomorphism.

So skeuopmorphism is where— >>It's right up there with CSS frameworks,

on the list of things we talk about a lot on here.

>>And icon fonts. >>And responsive websites.

>>That's right. Anyway, skeuomorphism is where stuff looks super realistic.

In a digital interface, it's basically trying to mirror a real-world

interface, so something like iCal on OS X,

where it has all this leather and papery texture and stuff,

whereas flat design is basically a response to that.

So it's what you see in, like, Windows 8 and

a lot of other websites these days.

So these flat UI colors basically allow you to draw upon this

pre-made color palette and create your website

with flat UI in mind.

So they just have these really nice, well put-together colors that

go really well together, and you can click on each one of these.

So I'll click on Midnight Blue here,

and it'll say Copied.

So if you click on one of these, it will copy it to your Clipboard.

And you can choose the format up here.

So I've chosen hexadecimal with the hash, or pound, sign there.

And so that's what's been copied into my Clipboard.

So it's a pretty handy tool.

I will admit I actually used this this week. >>Oh, you're willing to admit that?

>>I am willing to admit it. I know, big admission here.

No, I used it to build a website earlier this week.

This is Jason's surprised face. And it worked really well.

I was able to just click, copy these colors in, and it sped up my development a little bit,

because I was able to just put together the color scheme really quickly

and try out different things. >>I like some of these names here.

>>Yeah. >>Wet Asphalt. >>That's right. They should name one after you, Jason.

>>This one's called Nephritis. That sounds like a disease.

Sorry, I can't come to work today. My nephritis is flaring up.

>>They have Peter River. I mean, I don't understand why it's not Jason River.

It's obviously— >>Yeah. >>You know. >>Jason River— >>Jason.

>>Selling tickets. >>That's right. >>Next up, over on the Flippin' Awesome Blog,

we have 5 Things You Should Stop Doing With jQuery.

This is a wonderful list of, you guessed it, things that you should doing with jQuery

and, more importantly, why you should stop doing them.

Now we're not going to get into everything that they say on the show—

I'm sorry, say on the blog post here, but number one, stop

using Document Ready. It's 2013. We don't have to use Document Ready all the time.

The reason that you would want to use Document Ready is,

back in the day, when you put all of your scripts in the head of a web page,

it would have to wait until the rest of the page and scripts have loaded.

>>But, of course, now you put all of your scripts towards the bottom

and know that the document is indeed ready

by the time you're ready to execute that jQuery.

>>Yeah. Unless you're using the async attribute.

>>Boom. >>Next, choose the right iterator for the job.

jQuery provides a wealth of different iterators that you can use,

depending on what you need to do. So there's a nice description

of each of the different ones, as well as the context

in which you would use them. I'm a big fan of the map iterator,

which will iterate through an array, add that all to a new one.

Boom. Done. Anyway, a bunch of great advice on here.

Just head on over to the blog post at flippinawesome.org.

And you can also find it in the show notes on YouTube at youtube.com/gotreehouse

or on iTunes.

>>iTunes. >>Search for Treehouse. Leave us reviews.

>>On iTunes. >>Yeah. >>All right. Next up is the Young Persons

Guide to Programming in Minecraft.

Of course, Minecraft is the popular computer game that was created,

I think, a couple years ago and was developed in a very open fashion.

People could actually participate in the alpha and the beta,

and it's since been released, but it's a pretty cool game.

>>If I'm not specifically a young person,

can I still read this guide and get something out of it?

>>I think so, Jason. I don't know why it's specifically targeted at young people,

but, of course, yeah, you can get something out of it.

So Minecraft is this computer game where you mine stuff,

and then you craft stuff. So that's kind of an explanation of Minecraft.

Getting into what this article is actually about, basically, you can

create what are called mods, or modifications, for Minecraft,

and one such mod is called Scriptcraft.

And in Scriptcraft, you can actually program in the game,

using simple JavaScript statements.

And using those, you can add new items, you can change

the behavior of the game, and you can actually build metagames on top of Minecraft.

Build these simpler, you know, simple games within Minecraft.

It suggests learning JavaScript and then jumping into it.

Of course, you can learn JavaScript on teamtreehouse.com.

>>Shameless self-plug. >>That's right.

And then, after you've learned JavaScript, you can jump into

Scriptcraft, and they teach you how to do variables, functions, and

a whole variety of other things in Minecraft.

And eventually you will be able to actually build stuff.

So I think this is pretty neat, you know. It's not specifically related to

web development, but, of course, JavaScript is a very popular language

in the web-development space.

It's what we use to make things happen on the front end of the browser.

And I think this is a really cool way to get into JavaScript

and get yourself familiar with the language.

And that will make you a stronger programmer

when it comes to stuff on the web. >>Very nice. >>Interesting stuff. >>

Next up, we have a tool called Framer. This is a prototyping tool for animation

and interaction on desktop and mobile.

Now this is being billed as an alternative to Flash or Keynote when

prototyping an application, and it's going to be used

more for the interaction of the site.

So they've got some great examples here on the site.

So you click through. First example is the Google Search application,

and if I mouse in here, you can see, boom, it automatically animates up.

And you can kind of just get a feel for how the application's going to work.

The next example that they have is something that you should be familiar with:

Facebook. Pretty much everybody's on Facebook,

so you click that little three-button menu we've talked about before

on the show, and it kind of shows you how the news feed and events and

basically, everything on the side of the page is going to work.

So this is really not going to be for creating full applications.

It's going to be used just to get an idea

of how the interactions and animations are going to play out on the site.

And interaction and animation is quickly becoming a lot bigger

in the field of creating applications, so it's something to keep on the radar,

in case this is what you're doing. >>And I think it actually pairs really nicely

with flat design in that, you know, it's much easier to create

more complex animations, because you're not spending so much time

getting the textures or the round corners or

all these different design details just right.

But you can actually communicate a lot with nice smooth animation.

So I like it. I think it's pretty cool. >>I think pairs really nicely with a port wine.

>>So you, Jason. >>Thank you.

Next up is a Usability Checklist. It's in beta.

I'm not really sure what's in beta specifically.

>>The checklist? >>Yeah, it looks like the checklist itself is in beta.

>>Maybe there's more things they'll want to add to the checklist.

>>It's possible, but I really like this checklist quite a lot.

Basically, before you launch a website and you want to make sure that

everything is of quality, you can go through this checklist

and just kind of get a sanity check and say, like, what is the first impression

when people hit the home page?

Or is my site easy to navigate?

Am I hitting all the check boxes here with accessibility?

And am I doing a good job with search, etcetera, etcetera, etcetera.

It's a pretty exhaustive checklist, and I think it's really good

even for beginners or people that are much more advanced with

web development, because there are so many things to remember these days,

I mean, there is so much stuff that goes into a website

that it's great to just have a nice handy checklist like this to make sure

you're covering all the bases.

>>Yeah, definitely. >>So, pretty cool stuff.

>>Next up, we have an application called Ghostlab.

Now this is a paid application. They're not sponsoring the show,

full disclosure. Just thought that this was cool and that we would mention it.

So what this does, it's pretty interesting. You set up a site

inside of Ghostlab, you know, drag it in, and then it will launch an HTTP server for you.

You can then connect a browser to it,

or multiple browsers is where it really shines.

And then, as you're scrolling through on one browser,

it automatically updates all the other browsers.

>>That's pretty amazing. >>Yeah. This is wonderful if you were trying to test

mobile sites, because even as you're filling in a form on one browser,

it'll automatically fill it in on another as well.

And, if that weren't enough, you can automatically debug the stuff live.

Now you are going to need a browser that supports JavaScript

in order to get this to work. But definitely go ahead and check it out.

Synchronized testing is really, really the big deal, as well as inspection.

You can see immediately what's causing the problem in the browser

if you're getting some weird behavior or otherwise.

Immediately inspect it and see what's going on.

So. >>This pairs really nicely with that Usability Checklist,

because you can go through and make sure you're

covering all those check boxes in every browser.

>>Also, a Chardonnay. >>Hmm. Next up, we've got some handy—

We've got some Handy Sass Mixins.

Basically, Sass is a language that compiles to CSS.

So it can be read by the browser, but it's a much easier way to

write your styling, because you can use things like variables

and these pieces of code that are called mixins.

So you can mix in this Sass code into your Sass code very fluidly.

They have mixins here that are for responsive breakpoints.

So if you're building a website that uses responsive design, which really,

almost any website you're building should probably be using responsive design.

That's a handy mixin to use.

They also have mixins for targeting devices with retina displays or

high-resolution displays, and that's actually pretty simple to do.

There's just a lot of little steps here you got to remember,

and so that just encapsulates all of them really easily, and you can go ahead

and use it here as a Sass mixin, and you just say I want to go ahead and

include this 2x version of the image,

and it will go ahead and expand out that Sass into this CSS here.

They have a couple of others. There's a clear fix, one for box sizing,

border radii, which, I mean, that can get really complicated

if you're working with a lot of different browser shares,

so it covers all those. But pretty cool stuff, and if you use Sass,

this is definitely a handy set of mixins for you to use.

>>That would pair pretty well with Ghostlab, which we just talked about,

because it does support Sass. >>Or a nice Merlot.

>>I would have suggested a Pinot, but you know, your taste is your taste.

Next up, we have a JavaScript library called Hammer.js.

This is a library for multi-touch gestures, and I think it's incredibly well named.

Also, I really, really love the art on the site.

>>Conceptualist. >>Exactly. So this is going to be really useful if

you're working on, you know, phone, tablet, any device that supports multi-touch.

The Hammer JavaScript library will allow you to very easily attach elements—

attach certain events to elements.

So if somebody is swiping left, you can attach that to a specific div on the page,

capture that, and perform some sort of functionality

when somebody swipes left.

Now, this is a great library, and it's pretty small.

It's only 3 kilobytes when gzipped.

So check this out. They've got really thorough documentation, and

it is a great library.

So that's about all we got today. >>That is it for this week's episode.

I'm @nickrp on Twitter. >>And I am @jseifer.

If you like this show, please rate us in iTunes. Search for the Treehouse Show.

You can also find show notes and more on YouTube at youtube.com/gotreehouse.

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

about iOS, Android, HTML, CSS, business, and so much more,

Ruby, of course— >>Of course. >>This guy right here.

Be sure to check us out at teamtreehouse.com.

Thanks so much for watching, and we'll see you next week.

Stay tuned for our wine review podcast.

[? music ?]