You've already started watching Episode 113: API Responses, Font Compression, Tab Styles
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 internet where
-
0:05
we talk about all things web design, web development, and more.
-
0:08
>> For a free month's trial of Treehouse, head on over to teamtreehouse.com/show.
-
0:13
In this episode we'll be talking about API responses, responsive images,
-
0:19
font compression, and more.
-
0:21
>> Let's check it out.
-
0:22
[MUSIC]
-
0:27
First up, we'll be talking about a project called DataCollection.js.
-
0:32
This is a JavaScript library for manipulating data from API responses.
-
0:39
Now, you may occasionally run into a situation where you return a bunch of
-
0:43
data from a server.
-
0:45
Maybe it's through Ajax, or you're getting Jason, or something like that.
-
0:50
So, you may want to transform all of that data in a certain way.
-
0:55
Let's say, for example, we have a list of characters, that comes back.
-
1:00
Let's say it's a movie or something like that.
-
1:02
And. we want to sort them by age.
-
1:04
or find out the max age of one of the characters.
-
1:07
or sort them by last name.
-
1:08
or something like that.
-
1:09
Well, we can use a data collection.
-
1:13
And, then sort and filter based on that.
-
1:16
Now, here is an example.
-
1:18
If we wanna find the top age, we could say this chart object that we have,
-
1:22
and we query it, and we look for the max age.
-
1:26
Same thing, if we wanna look for unique locations,
-
1:30
we have this wonderful little query language that filters using JavaScript.
-
1:35
Now, there are tons of different options that you can use here.
-
1:39
You can filter it to find a certain gender, or
-
1:43
even an age less than or equal to 40.
-
1:47
Now, if we scroll down here, we can see all of the different methods that we have.
-
1:54
You can define different indexes depending on what data you'll be querying.
-
1:58
And, if you want to know how to do all of the different queries,
-
2:01
that is unfortunately all the way at the bottom here.
-
2:05
Here we go, the different filters.
-
2:07
So, the is filter, make sure that a certain attribute is certain.
-
2:12
So, let's say we want to find all the characters whose age is 30,
-
2:14
or not equal to something.
-
2:17
We also have filters for greater than, greater than or
-
2:20
equal to, as well as less than, and less than or equal to.
-
2:23
There's also a contains filter, so
-
2:26
we can see if a certainly element contains a certain value.
-
2:30
This works on strings or arrays.
-
2:32
And, it also has an equivalent that is case insensitive.
-
2:37
This only works for string comparisons.
-
2:41
Now this is pretty easy to use and it's a great little tool.
-
2:45
So, check it out in the show notes which you can get to at YouTube.com/gotreehouse.
-
2:49
And, also search for us on iTunes, we are the Tree House Show.
-
2:53
>> Very nice. Well,
-
2:53
next up is an article over on the Opera Developer Blog,
-
2:58
called Native Responsive Images.
-
3:01
Now, if you've done any kind of responsive design,
-
3:04
you've probably dealt with responsive images, in some form or another.
-
3:08
Maybe you've set them to be a fluid width, so
-
3:12
that they fill up their container and just set their size to 100%, and so on.
-
3:18
This article goes into a lot of depth about the quest for
-
3:23
native responsive images.
-
3:25
In other words, some sort of element that we can use on webpages that's
-
3:30
like the image element, but actually serves up the correct asset, depending on
-
3:36
the size of the screen, or how many pixels there are, and so on.
-
3:41
And, up to this point we've pretty much been either serving just one resource,
-
3:47
so we've been serving up the same image for all different sizes.
-
3:51
Or, you might have a situation where you have to serve multiple images.
-
3:56
Bu,t those images actually get loaded up on every device, no matter what the size.
-
4:02
Both situations aren't that great.
-
4:04
Now, this is, like I said, a very in-depth article that I'm
-
4:09
gonna scroll down to the bottom here, that says, can I use it today?
-
4:14
And, it's actually talking about, for the most part, the picture element, but
-
4:19
also the source set attribute, which allows you to use multiple images.
-
4:24
Now, the source set is already supported in browsers since Chrome 34,
-
4:30
Opera 21, and it will be supported in Safari 8.
-
4:34
However, the picture element which is a little bit more interesting for a couple
-
4:40
of reasons, it's going to be shipped in a few weeks from the time of this recording.
-
4:47
So, you might actually already have it by the time you're watching this.
-
4:50
It will be shipped in Chrome 38, Opera 25, and Firefox 33.
-
4:56
So, be sure to pay attention to that,
-
4:59
because the picture element will probably play an important role in the future.
-
5:04
Now, as for Internet Explorer,
-
5:06
of course, historically, Internet Explorer has lagged behind on some things.
-
5:11
They've been ahead on others.
-
5:13
But, it's not in Internet Explorer in this point, it's under consideration.
-
5:20
So, the IE development team, however, has, seem to be pretty receptive to this,
-
5:26
so it's anticipated that it will change to end development shortly, or,
-
5:31
at least, hopefully.
-
5:33
So anyway, this is a really in-depth article basically chronicling the whole
-
5:38
story of native responsive images, and it's really worth the read because a lot
-
5:43
has been going on in a very short amount of time in this particular space.
-
5:48
And, if you haven't been paying attention, this is a good way to get all caught up.
-
5:52
>> It's cool that, browser vendors are being you know,
-
5:55
so on top of supporting that stuff.
-
5:57
>> They are.
-
5:58
It's, it's good because it's important.
-
6:00
I mean, there's this huge proliferation of devices everywhere and, yeah,
-
6:06
it's hard to get responsive images onto all of them.
-
6:08
>> I guess you could say the browser vendors are being very responsive.
-
6:12
>> They are.
-
6:14
>> Next up, we have an article on the Lickety Split blog about optimizing your
-
6:19
font downloads when you are using Twitter Bootstrap and Font-Awesome.
-
6:25
So, this actually doesn't apply only to Font-Awesome and Bootstrap.
-
6:30
But, did you know, that by default,
-
6:33
some Apache installations do not compress font files by default.
-
6:40
>> What?
-
6:41
>> Yeah.
-
6:41
So, you can actually turn on HTTP compression and gzipping.
-
6:46
It's only a few lines if you have certain mods installed,
-
6:50
like mod-deflate, and here is an example demonstration.
-
6:55
We've got, all right, font-awesome in here, and bootstrap in here.
-
6:58
Then without any compression going on, this is the download,
-
7:05
it's 540 k, optimized it's 207 k.
-
7:10
That is a 62% savings or 330 k, just for
-
7:15
a very, very small change to your Apache configuration.
-
7:21
Now, this is also this also works with Nginx and
-
7:24
the trick is adding SVGs and font files to the default compression.
-
7:30
Now, here would be the configuration code that you use.
-
7:34
Add output filters.
-
7:36
Here's the regular text, HTML, CSS, and JavaScript.
-
7:39
You can just go ahead and add in SVG and XML, and different fonts.
-
7:44
And, then boom, you are good to go.
-
7:47
Another good thing to install is mod page speed, which will do some of those things
-
7:51
for you, and there are also equivalents in Nginx and IIS.
-
7:57
So, go ahead and check that out.
-
7:58
We'll have a link up in the show notes, and also, don't forget to join us for
-
8:02
a free month's trial of TreeHouse at teamtreehouse.com/show.
-
8:08
>> Very nice stuff.
-
8:08
Well, next up is a wonderful blog post over on the codrops blog
-
8:13
called Tab Styles Inspiration.
-
8:16
Now, if you want to learn how all of these different tabs work, and
-
8:22
sort of what the thinking behind them was, you can maybe check out the blog post.
-
8:26
But, that's boring, let's actually look at the demo.
-
8:30
So, here is one style of tabs.
-
8:34
That's pretty cool.
-
8:36
Here's another style.
-
8:37
So, you can actually click on these, and it will change what's down here.
-
8:42
Normally, that would be maybe a full webpage, so that's cool.
-
8:45
Here's another style if you want to kinda underline things,
-
8:49
have a little bit of animation here.
-
8:50
Here's another one.
-
8:54
Here's one where the tabs are sort of on the top.
-
8:59
Anyway, thought this was a really cool post.
-
9:03
Not a whole lot to say about it, but
-
9:05
I thought there were a ton of really wonderful tab styles here that-
-
9:10
>> Ooh, look at that.
-
9:11
>> Are a lot different than some of the more traditional things that you've seen.
-
9:16
So, maybe you wanna, so maybe you want to rip off CSS tricks here, and
-
9:20
have some tabs exactly like Chris Quarles website.
-
9:24
Here's exactly how to do them.
-
9:26
And, you can download the source code from the article, and
-
9:31
that is, of course, included in the show notes, a link to that.
-
9:36
>> Very nice.
-
9:36
Let's let's tab on over to the next tab, tab.
-
9:42
{LAUGH].
-
9:43
>> We're gonna be talking about advanced objects in JavaScript.
-
9:46
Now, there are a ton of different ways to create objects in JavaScript.
-
9:49
And, in this extremely thorough blog post they are demonstrated.
-
9:55
Now, this goes from very, very simple, to just creating a function,
-
10:00
to create a JavaScript object, and then using the prototype property to create it.
-
10:06
And, then return a new one and then, all right, we have a new product, and
-
10:10
we're setting the type to Apple.
-
10:12
And, then we can call product dot type, and we see Apple printed to the screen.
-
10:17
Now, there are tons and tons of ways to do this, and
-
10:22
this blog post gets more advanced with how you actually go through and
-
10:26
create these different JavaScript objects.
-
10:28
So, the one was a setter, now we can go through and define a getter.
-
10:33
Instead of calling prototype later,
-
10:35
we can actually define it to its own function here.
-
10:40
And, then the getter will be the different type, and the setter as well.
-
10:44
We defined getter and setter earlier.
-
10:47
Now, this walks through with defining properties,
-
10:51
instead of just doing prototypes.
-
10:53
We can use object.define property to the prototype of product, and so
-
10:58
on and so forth.
-
10:59
Now, this gets extremely complicated, but
-
11:02
is also a very, very in-depth guide to creating advanced objects in JavaScript.
-
11:07
Now, you'll see a lot of JavaScript libraries will do various forms of object
-
11:12
manipulation and creation, different classes, libraries for classes.
-
11:17
I know CoffeeScript does it a certain way.
-
11:18
And, if you want some background into how some of these libraries will create these
-
11:22
advanced objects, I definitely recommend checking out this article.
-
11:26
And, that is about all we have time for this week.
-
11:28
Who are you on Twitter, Nick?
-
11:29
>> I am @nickrp.
-
11:30
>> And I am @jseifer.
-
11:31
For more information on anything we talked about,
-
11:33
check out our show notes at youtube.com/gotreehouse.
-
11:36
You can also get us on iTunes.
-
11:37
We are the Treehouse Show, and please rate us.
-
11:39
And, of course, if you'd like to see more videos like this one about web design,
-
11:43
web development, mobile business and so much more, be sure to check us out at
-
11:47
teamtreehouse.com/show to get a free month of Treehouse.
-
11:54
Thank you so much for watching, and we will see you next week.
-
11:57
[MUSIC]
You need to sign up for Treehouse in order to download course files.
Sign up