1
00:00:00,440 --> 00:00:01,270
I'm Nick Pettit.

2
00:00:01,270 --> 00:00:02,240
>> I'm Jason Seifer.

3
00:00:02,240 --> 00:00:05,442
>> And, you're watching the Treehouse
show, your weekly dose of internet where

4
00:00:05,442 --> 00:00:08,143
we talk about all things web design, web
development, and more.

5
00:00:08,143 --> 00:00:13,935
>> For a free month's trial of Treehouse,
head on over to teamtreehouse.com/show.

6
00:00:13,935 --> 00:00:19,298
In this episode we'll be talking about API
responses, responsive images,

7
00:00:19,298 --> 00:00:21,650
font compression, and more.

8
00:00:21,650 --> 00:00:22,684
>> Let's check it out.

9
00:00:22,684 --> 00:00:27,968
[MUSIC]

10
00:00:27,968 --> 00:00:32,988
First up, we'll be talking about a project
called DataCollection.js.

11
00:00:32,988 --> 00:00:39,540
This is a JavaScript library for
manipulating data from API responses.

12
00:00:39,540 --> 00:00:43,910
Now, you may occasionally run into a
situation where you return a bunch of

13
00:00:43,910 --> 00:00:45,790
data from a server.

14
00:00:45,790 --> 00:00:50,520
Maybe it's through Ajax, or you're getting
Jason, or something like that.

15
00:00:50,520 --> 00:00:55,190
So, you may want to transform all of that
data in a certain way.

16
00:00:55,190 --> 00:01:00,440
Let's say, for example, we have a list of
characters, that comes back.

17
00:01:00,440 --> 00:01:02,500
Let's say it's a movie or something like
that.

18
00:01:02,500 --> 00:01:04,710
And.
we want to sort them by age.

19
00:01:04,710 --> 00:01:07,060
or find out the max age of one of the
characters.

20
00:01:07,060 --> 00:01:08,630
or sort them by last name.

21
00:01:08,630 --> 00:01:09,830
or something like that.

22
00:01:09,830 --> 00:01:13,490
Well, we can use a data collection.

23
00:01:13,490 --> 00:01:16,700
And, then sort and filter based on that.

24
00:01:16,700 --> 00:01:18,030
Now, here is an example.

25
00:01:18,030 --> 00:01:22,660
If we wanna find the top age, we could say
this chart object that we have,

26
00:01:22,660 --> 00:01:26,240
and we query it, and we look for the max
age.

27
00:01:26,240 --> 00:01:30,440
Same thing, if we wanna look for unique
locations,

28
00:01:30,440 --> 00:01:35,960
we have this wonderful little query
language that filters using JavaScript.

29
00:01:35,960 --> 00:01:39,820
Now, there are tons of different options
that you can use here.

30
00:01:39,820 --> 00:01:43,300
You can filter it to find a certain
gender, or

31
00:01:43,300 --> 00:01:47,880
even an age less than or equal to 40.

32
00:01:47,880 --> 00:01:54,280
Now, if we scroll down here, we can see
all of the different methods that we have.

33
00:01:54,280 --> 00:01:58,710
You can define different indexes depending
on what data you'll be querying.

34
00:01:58,710 --> 00:02:01,990
And, if you want to know how to do all of
the different queries,

35
00:02:01,990 --> 00:02:05,080
that is unfortunately all the way at the
bottom here.

36
00:02:05,080 --> 00:02:07,990
Here we go, the different filters.

37
00:02:07,990 --> 00:02:12,010
So, the is filter, make sure that a
certain attribute is certain.

38
00:02:12,010 --> 00:02:14,990
So, let's say we want to find all the
characters whose age is 30,

39
00:02:14,990 --> 00:02:17,530
or not equal to something.

40
00:02:17,530 --> 00:02:20,060
We also have filters for greater than,
greater than or

41
00:02:20,060 --> 00:02:23,890
equal to, as well as less than, and less
than or equal to.

42
00:02:23,890 --> 00:02:26,850
There's also a contains filter, so

43
00:02:26,850 --> 00:02:30,230
we can see if a certainly element contains
a certain value.

44
00:02:30,230 --> 00:02:32,590
This works on strings or arrays.

45
00:02:32,590 --> 00:02:37,470
And, it also has an equivalent that is
case insensitive.

46
00:02:37,470 --> 00:02:41,110
This only works for string comparisons.

47
00:02:41,110 --> 00:02:45,200
Now this is pretty easy to use and it's a
great little tool.

48
00:02:45,200 --> 00:02:49,180
So, check it out in the show notes which
you can get to at YouTube.com/gotreehouse.

49
00:02:49,180 --> 00:02:52,010
And, also search for us on iTunes, we are
the Tree House Show.

50
00:02:53,100 --> 00:02:53,700
>> Very nice.
Well,

51
00:02:53,700 --> 00:02:58,580
next up is an article over on the Opera
Developer Blog,

52
00:02:58,580 --> 00:03:01,880
called Native Responsive Images.

53
00:03:01,880 --> 00:03:04,560
Now, if you've done any kind of responsive
design,

54
00:03:04,560 --> 00:03:08,950
you've probably dealt with responsive
images, in some form or another.

55
00:03:08,950 --> 00:03:12,020
Maybe you've set them to be a fluid width,
so

56
00:03:12,020 --> 00:03:18,390
that they fill up their container and just
set their size to 100%, and so on.

57
00:03:18,390 --> 00:03:23,490
This article goes into a lot of depth
about the quest for

58
00:03:23,490 --> 00:03:25,800
native responsive images.

59
00:03:25,800 --> 00:03:30,980
In other words, some sort of element that
we can use on webpages that's

60
00:03:30,980 --> 00:03:36,330
like the image element, but actually
serves up the correct asset, depending on

61
00:03:36,330 --> 00:03:41,850
the size of the screen, or how many pixels
there are, and so on.

62
00:03:41,850 --> 00:03:47,700
And, up to this point we've pretty much
been either serving just one resource,

63
00:03:47,700 --> 00:03:51,620
so we've been serving up the same image
for all different sizes.

64
00:03:51,620 --> 00:03:56,755
Or, you might have a situation where you
have to serve multiple images.

65
00:03:56,755 --> 00:04:02,270
Bu,t those images actually get loaded up
on every device, no matter what the size.

66
00:04:02,270 --> 00:04:04,948
Both situations aren't that great.

67
00:04:04,948 --> 00:04:09,530
Now, this is, like I said, a very in-depth
article that I'm

68
00:04:09,530 --> 00:04:14,553
gonna scroll down to the bottom here, that
says, can I use it today?

69
00:04:14,553 --> 00:04:19,856
And, it's actually talking about, for the
most part, the picture element, but

70
00:04:19,856 --> 00:04:24,570
also the source set attribute, which
allows you to use multiple images.

71
00:04:24,570 --> 00:04:30,569
Now, the source set is already supported
in browsers since Chrome 34,

72
00:04:30,569 --> 00:04:34,742
Opera 21, and it will be supported in
Safari 8.

73
00:04:34,742 --> 00:04:40,949
However, the picture element which is a
little bit more interesting for a couple

74
00:04:40,949 --> 00:04:47,443
of reasons, it's going to be shipped in a
few weeks from the time of this recording.

75
00:04:47,443 --> 00:04:50,562
So, you might actually already have it by
the time you're watching this.

76
00:04:50,562 --> 00:04:56,564
It will be shipped in Chrome 38, Opera 25,
and Firefox 33.

77
00:04:56,564 --> 00:04:59,081
So, be sure to pay attention to that,

78
00:04:59,081 --> 00:05:04,450
because the picture element will probably
play an important role in the future.

79
00:05:04,450 --> 00:05:06,930
Now, as for Internet Explorer,

80
00:05:06,930 --> 00:05:11,960
of course, historically, Internet Explorer
has lagged behind on some things.

81
00:05:11,960 --> 00:05:13,430
They've been ahead on others.

82
00:05:13,430 --> 00:05:20,340
But, it's not in Internet Explorer in this
point, it's under consideration.

83
00:05:20,340 --> 00:05:26,053
So, the IE development team, however, has,
seem to be pretty receptive to this,

84
00:05:26,053 --> 00:05:31,122
so it's anticipated that it will change to
end development shortly, or,

85
00:05:31,122 --> 00:05:33,043
at least, hopefully.

86
00:05:33,043 --> 00:05:38,159
So anyway, this is a really in-depth
article basically chronicling the whole

87
00:05:38,159 --> 00:05:43,350
story of native responsive images, and
it's really worth the read because a lot

88
00:05:43,350 --> 00:05:48,031
has been going on in a very short amount
of time in this particular space.

89
00:05:48,031 --> 00:05:52,310
And, if you haven't been paying attention,
this is a good way to get all caught up.

90
00:05:52,310 --> 00:05:55,870
>> It's cool that, browser vendors are
being you know,

91
00:05:55,870 --> 00:05:57,540
so on top of supporting that stuff.

92
00:05:57,540 --> 00:05:58,110
>> They are.

93
00:05:58,110 --> 00:06:00,430
It's, it's good because it's important.

94
00:06:00,430 --> 00:06:06,420
I mean, there's this huge proliferation of
devices everywhere and, yeah,

95
00:06:06,420 --> 00:06:08,970
it's hard to get responsive images onto
all of them.

96
00:06:08,970 --> 00:06:12,830
>> I guess you could say the browser
vendors are being very responsive.

97
00:06:12,830 --> 00:06:13,330
>> They are.

98
00:06:14,450 --> 00:06:19,800
>> Next up, we have an article on the
Lickety Split blog about optimizing your

99
00:06:19,800 --> 00:06:25,890
font downloads when you are using Twitter
Bootstrap and Font-Awesome.

100
00:06:25,890 --> 00:06:30,330
So, this actually doesn't apply only to
Font-Awesome and Bootstrap.

101
00:06:30,330 --> 00:06:33,960
But, did you know, that by default,

102
00:06:33,960 --> 00:06:40,870
some Apache installations do not compress
font files by default.

103
00:06:40,870 --> 00:06:41,390
>> What?

104
00:06:41,390 --> 00:06:41,930
>> Yeah.

105
00:06:41,930 --> 00:06:46,080
So, you can actually turn on HTTP
compression and gzipping.

106
00:06:46,080 --> 00:06:50,280
It's only a few lines if you have certain
mods installed,

107
00:06:50,280 --> 00:06:55,080
like mod-deflate, and here is an example
demonstration.

108
00:06:55,080 --> 00:06:58,970
We've got, all right, font-awesome in
here, and bootstrap in here.

109
00:06:58,970 --> 00:07:05,490
Then without any compression going on,
this is the download,

110
00:07:05,490 --> 00:07:10,880
it's 540 k, optimized it's 207 k.

111
00:07:10,880 --> 00:07:15,430
That is a 62% savings or 330 k, just for

112
00:07:15,430 --> 00:07:21,170
a very, very small change to your Apache
configuration.

113
00:07:21,170 --> 00:07:24,390
Now, this is also this also works with
Nginx and

114
00:07:24,390 --> 00:07:30,700
the trick is adding SVGs and font files to
the default compression.

115
00:07:30,700 --> 00:07:34,580
Now, here would be the configuration code
that you use.

116
00:07:34,580 --> 00:07:36,130
Add output filters.

117
00:07:36,130 --> 00:07:39,050
Here's the regular text, HTML, CSS, and
JavaScript.

118
00:07:39,050 --> 00:07:44,490
You can just go ahead and add in SVG and
XML, and different fonts.

119
00:07:44,490 --> 00:07:47,370
And, then boom, you are good to go.

120
00:07:47,370 --> 00:07:51,080
Another good thing to install is mod page
speed, which will do some of those things

121
00:07:51,080 --> 00:07:57,100
for you, and there are also equivalents in
Nginx and IIS.

122
00:07:57,100 --> 00:07:58,810
So, go ahead and check that out.

123
00:07:58,810 --> 00:08:02,240
We'll have a link up in the show notes,
and also, don't forget to join us for

124
00:08:02,240 --> 00:08:08,080
a free month's trial of TreeHouse at
teamtreehouse.com/show.

125
00:08:08,080 --> 00:08:08,940
>> Very nice stuff.

126
00:08:08,940 --> 00:08:13,880
Well, next up is a wonderful blog post
over on the codrops blog

127
00:08:13,880 --> 00:08:16,990
called Tab Styles Inspiration.

128
00:08:16,990 --> 00:08:22,460
Now, if you want to learn how all of these
different tabs work, and

129
00:08:22,460 --> 00:08:26,900
sort of what the thinking behind them was,
you can maybe check out the blog post.

130
00:08:26,900 --> 00:08:30,420
But, that's boring, let's actually look at
the demo.

131
00:08:30,420 --> 00:08:34,710
So, here is one style of tabs.

132
00:08:34,710 --> 00:08:36,020
That's pretty cool.

133
00:08:36,020 --> 00:08:37,940
Here's another style.

134
00:08:37,940 --> 00:08:42,090
So, you can actually click on these, and
it will change what's down here.

135
00:08:42,090 --> 00:08:45,510
Normally, that would be maybe a full
webpage, so that's cool.

136
00:08:45,510 --> 00:08:49,370
Here's another style if you want to kinda
underline things,

137
00:08:49,370 --> 00:08:50,720
have a little bit of animation here.

138
00:08:50,720 --> 00:08:54,500
Here's another one.

139
00:08:54,500 --> 00:08:57,730
Here's one where the tabs are sort of on
the top.

140
00:08:59,610 --> 00:09:03,040
Anyway, thought this was a really cool
post.

141
00:09:03,040 --> 00:09:05,580
Not a whole lot to say about it, but

142
00:09:05,580 --> 00:09:10,580
I thought there were a ton of really
wonderful tab styles here that-

143
00:09:10,580 --> 00:09:11,352
>> Ooh, look at that.

144
00:09:11,352 --> 00:09:16,419
>> Are a lot different than some of the
more traditional things that you've seen.

145
00:09:16,419 --> 00:09:20,829
So, maybe you wanna, so maybe you want to
rip off CSS tricks here, and

146
00:09:20,829 --> 00:09:24,490
have some tabs exactly like Chris Quarles
website.

147
00:09:24,490 --> 00:09:26,640
Here's exactly how to do them.

148
00:09:26,640 --> 00:09:31,780
And, you can download the source code from
the article, and

149
00:09:31,780 --> 00:09:36,390
that is, of course, included in the show
notes, a link to that.

150
00:09:36,390 --> 00:09:36,934
>> Very nice.

151
00:09:36,934 --> 00:09:42,226
Let's let's tab on over to the next tab,
tab.

152
00:09:42,226 --> 00:09:43,258
{LAUGH].

153
00:09:43,258 --> 00:09:46,130
>> We're gonna be talking about advanced
objects in JavaScript.

154
00:09:46,130 --> 00:09:49,600
Now, there are a ton of different ways to
create objects in JavaScript.

155
00:09:49,600 --> 00:09:55,790
And, in this extremely thorough blog post
they are demonstrated.

156
00:09:55,790 --> 00:10:00,800
Now, this goes from very, very simple, to
just creating a function,

157
00:10:00,800 --> 00:10:06,820
to create a JavaScript object, and then
using the prototype property to create it.

158
00:10:06,820 --> 00:10:10,320
And, then return a new one and then, all
right, we have a new product, and

159
00:10:10,320 --> 00:10:12,220
we're setting the type to Apple.

160
00:10:12,220 --> 00:10:17,770
And, then we can call product dot type,
and we see Apple printed to the screen.

161
00:10:17,770 --> 00:10:22,270
Now, there are tons and tons of ways to do
this, and

162
00:10:22,270 --> 00:10:26,730
this blog post gets more advanced with how
you actually go through and

163
00:10:26,730 --> 00:10:28,912
create these different JavaScript objects.

164
00:10:28,912 --> 00:10:33,140
So, the one was a setter, now we can go
through and define a getter.

165
00:10:33,140 --> 00:10:35,560
Instead of calling prototype later,

166
00:10:35,560 --> 00:10:40,260
we can actually define it to its own
function here.

167
00:10:40,260 --> 00:10:44,930
And, then the getter will be the different
type, and the setter as well.

168
00:10:44,930 --> 00:10:46,550
We defined getter and setter earlier.

169
00:10:47,940 --> 00:10:51,560
Now, this walks through with defining
properties,

170
00:10:51,560 --> 00:10:53,770
instead of just doing prototypes.

171
00:10:53,770 --> 00:10:58,740
We can use object.define property to the
prototype of product, and so

172
00:10:58,740 --> 00:10:59,450
on and so forth.

173
00:10:59,450 --> 00:11:02,030
Now, this gets extremely complicated, but

174
00:11:02,030 --> 00:11:07,960
is also a very, very in-depth guide to
creating advanced objects in JavaScript.

175
00:11:07,960 --> 00:11:12,940
Now, you'll see a lot of JavaScript
libraries will do various forms of object

176
00:11:12,940 --> 00:11:17,260
manipulation and creation, different
classes, libraries for classes.

177
00:11:17,260 --> 00:11:18,870
I know CoffeeScript does it a certain way.

178
00:11:18,870 --> 00:11:22,210
And, if you want some background into how
some of these libraries will create these

179
00:11:22,210 --> 00:11:26,050
advanced objects, I definitely recommend
checking out this article.

180
00:11:26,050 --> 00:11:28,320
And, that is about all we have time for
this week.

181
00:11:28,320 --> 00:11:29,620
Who are you on Twitter, Nick?

182
00:11:29,620 --> 00:11:30,500
>> I am @nickrp.

183
00:11:30,500 --> 00:11:31,750
>> And I am @jseifer.

184
00:11:31,750 --> 00:11:33,470
For more information on anything we talked
about,

185
00:11:33,470 --> 00:11:36,036
check out our show notes at
youtube.com/gotreehouse.

186
00:11:36,036 --> 00:11:37,550
You can also get us on iTunes.

187
00:11:37,550 --> 00:11:39,900
We are the Treehouse Show, and please rate
us.

188
00:11:39,900 --> 00:11:43,840
And, of course, if you'd like to see more
videos like this one about web design,

189
00:11:43,840 --> 00:11:47,915
web development, mobile business and so
much more, be sure to check us out at

190
00:11:47,915 --> 00:11:54,080
teamtreehouse.com/show to get a free month
of Treehouse.

191
00:11:54,080 --> 00:11:57,237
Thank you so much for watching, and we
will see you next week.

192
00:11:57,237 --> 00:12:03,984
[MUSIC]