I'm Nick Pettit.

>> I'm Jason Seifer.

>> And, you're watching the Treehouse show, your weekly dose of internet where

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

>> For a free month's trial of Treehouse, head on over to teamtreehouse.com/show.

In this episode we'll be talking about API responses, responsive images,

font compression, and more.

>> Let's check it out.

[MUSIC]

First up, we'll be talking about a project called DataCollection.js.

This is a JavaScript library for manipulating data from API responses.

Now, you may occasionally run into a situation where you return a bunch of

data from a server.

Maybe it's through Ajax, or you're getting Jason, or something like that.

So, you may want to transform all of that data in a certain way.

Let's say, for example, we have a list of characters, that comes back.

Let's say it's a movie or something like that.

And. we want to sort them by age.

or find out the max age of one of the characters.

or sort them by last name.

or something like that.

Well, we can use a data collection.

And, then sort and filter based on that.

Now, here is an example.

If we wanna find the top age, we could say this chart object that we have,

and we query it, and we look for the max age.

Same thing, if we wanna look for unique locations,

we have this wonderful little query language that filters using JavaScript.

Now, there are tons of different options that you can use here.

You can filter it to find a certain gender, or

even an age less than or equal to 40.

Now, if we scroll down here, we can see all of the different methods that we have.

You can define different indexes depending on what data you'll be querying.

And, if you want to know how to do all of the different queries,

that is unfortunately all the way at the bottom here.

Here we go, the different filters.

So, the is filter, make sure that a certain attribute is certain.

So, let's say we want to find all the characters whose age is 30,

or not equal to something.

We also have filters for greater than, greater than or

equal to, as well as less than, and less than or equal to.

There's also a contains filter, so

we can see if a certainly element contains a certain value.

This works on strings or arrays.

And, it also has an equivalent that is case insensitive.

This only works for string comparisons.

Now this is pretty easy to use and it's a great little tool.

So, check it out in the show notes which you can get to at YouTube.com/gotreehouse.

And, also search for us on iTunes, we are the Tree House Show.

>> Very nice. Well,

next up is an article over on the Opera Developer Blog,

called Native Responsive Images.

Now, if you've done any kind of responsive design,

you've probably dealt with responsive images, in some form or another.

Maybe you've set them to be a fluid width, so

that they fill up their container and just set their size to 100%, and so on.

This article goes into a lot of depth about the quest for

native responsive images.

In other words, some sort of element that we can use on webpages that's

like the image element, but actually serves up the correct asset, depending on

the size of the screen, or how many pixels there are, and so on.

And, up to this point we've pretty much been either serving just one resource,

so we've been serving up the same image for all different sizes.

Or, you might have a situation where you have to serve multiple images.

Bu,t those images actually get loaded up on every device, no matter what the size.

Both situations aren't that great.

Now, this is, like I said, a very in-depth article that I'm

gonna scroll down to the bottom here, that says, can I use it today?

And, it's actually talking about, for the most part, the picture element, but

also the source set attribute, which allows you to use multiple images.

Now, the source set is already supported in browsers since Chrome 34,

Opera 21, and it will be supported in Safari 8.

However, the picture element which is a little bit more interesting for a couple

of reasons, it's going to be shipped in a few weeks from the time of this recording.

So, you might actually already have it by the time you're watching this.

It will be shipped in Chrome 38, Opera 25, and Firefox 33.

So, be sure to pay attention to that,

because the picture element will probably play an important role in the future.

Now, as for Internet Explorer,

of course, historically, Internet Explorer has lagged behind on some things.

They've been ahead on others.

But, it's not in Internet Explorer in this point, it's under consideration.

So, the IE development team, however, has, seem to be pretty receptive to this,

so it's anticipated that it will change to end development shortly, or,

at least, hopefully.

So anyway, this is a really in-depth article basically chronicling the whole

story of native responsive images, and it's really worth the read because a lot

has been going on in a very short amount of time in this particular space.

And, if you haven't been paying attention, this is a good way to get all caught up.

>> It's cool that, browser vendors are being you know,

so on top of supporting that stuff.

>> They are.

It's, it's good because it's important.

I mean, there's this huge proliferation of devices everywhere and, yeah,

it's hard to get responsive images onto all of them.

>> I guess you could say the browser vendors are being very responsive.

>> They are.

>> Next up, we have an article on the Lickety Split blog about optimizing your

font downloads when you are using Twitter Bootstrap and Font-Awesome.

So, this actually doesn't apply only to Font-Awesome and Bootstrap.

But, did you know, that by default,

some Apache installations do not compress font files by default.

>> What?

>> Yeah.

So, you can actually turn on HTTP compression and gzipping.

It's only a few lines if you have certain mods installed,

like mod-deflate, and here is an example demonstration.

We've got, all right, font-awesome in here, and bootstrap in here.

Then without any compression going on, this is the download,

it's 540 k, optimized it's 207 k.

That is a 62% savings or 330 k, just for

a very, very small change to your Apache configuration.

Now, this is also this also works with Nginx and

the trick is adding SVGs and font files to the default compression.

Now, here would be the configuration code that you use.

Add output filters.

Here's the regular text, HTML, CSS, and JavaScript.

You can just go ahead and add in SVG and XML, and different fonts.

And, then boom, you are good to go.

Another good thing to install is mod page speed, which will do some of those things

for you, and there are also equivalents in Nginx and IIS.

So, go ahead and check that out.

We'll have a link up in the show notes, and also, don't forget to join us for

a free month's trial of TreeHouse at teamtreehouse.com/show.

>> Very nice stuff.

Well, next up is a wonderful blog post over on the codrops blog

called Tab Styles Inspiration.

Now, if you want to learn how all of these different tabs work, and

sort of what the thinking behind them was, you can maybe check out the blog post.

But, that's boring, let's actually look at the demo.

So, here is one style of tabs.

That's pretty cool.

Here's another style.

So, you can actually click on these, and it will change what's down here.

Normally, that would be maybe a full webpage, so that's cool.

Here's another style if you want to kinda underline things,

have a little bit of animation here.

Here's another one.

Here's one where the tabs are sort of on the top.

Anyway, thought this was a really cool post.

Not a whole lot to say about it, but

I thought there were a ton of really wonderful tab styles here that-

>> Ooh, look at that.

>> Are a lot different than some of the more traditional things that you've seen.

So, maybe you wanna, so maybe you want to rip off CSS tricks here, and

have some tabs exactly like Chris Quarles website.

Here's exactly how to do them.

And, you can download the source code from the article, and

that is, of course, included in the show notes, a link to that.

>> Very nice.

Let's let's tab on over to the next tab, tab.

{LAUGH].

>> We're gonna be talking about advanced objects in JavaScript.

Now, there are a ton of different ways to create objects in JavaScript.

And, in this extremely thorough blog post they are demonstrated.

Now, this goes from very, very simple, to just creating a function,

to create a JavaScript object, and then using the prototype property to create it.

And, then return a new one and then, all right, we have a new product, and

we're setting the type to Apple.

And, then we can call product dot type, and we see Apple printed to the screen.

Now, there are tons and tons of ways to do this, and

this blog post gets more advanced with how you actually go through and

create these different JavaScript objects.

So, the one was a setter, now we can go through and define a getter.

Instead of calling prototype later,

we can actually define it to its own function here.

And, then the getter will be the different type, and the setter as well.

We defined getter and setter earlier.

Now, this walks through with defining properties,

instead of just doing prototypes.

We can use object.define property to the prototype of product, and so

on and so forth.

Now, this gets extremely complicated, but

is also a very, very in-depth guide to creating advanced objects in JavaScript.

Now, you'll see a lot of JavaScript libraries will do various forms of object

manipulation and creation, different classes, libraries for classes.

I know CoffeeScript does it a certain way.

And, if you want some background into how some of these libraries will create these

advanced objects, I definitely recommend checking out this article.

And, that is about all we have time for this week.

Who are you on Twitter, Nick?

>> I am @nickrp.

>> And I am @jseifer.

For more information on anything we talked about,

check out our show notes at youtube.com/gotreehouse.

You can also get us on iTunes.

We are the Treehouse Show, and please rate us.

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/show to get a free month of Treehouse.

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

[MUSIC]