1
00:00:00,420 --> 00:00:01,220
I'm Nick Pettit.

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

3
00:00:02,270 --> 00:00:03,700
>> And you're watching the Tree House
Show.

4
00:00:03,700 --> 00:00:05,470
Your weekly dose of internets where we
talk

5
00:00:05,470 --> 00:00:08,680
about all things web design, web
development, and more.

6
00:00:08,680 --> 00:00:13,250
>> For a free month of Tree House head on
over to teamtreehouse.com/show.

7
00:00:13,250 --> 00:00:16,735
In this episode, we'll be talking about
jQuery

8
00:00:16,735 --> 00:00:21,680
plug-ins, progress bars, HTTP API design
and more.

9
00:00:21,680 --> 00:00:22,714
>> Let's check it out.

10
00:00:22,714 --> 00:00:27,806
[MUSIC]

11
00:00:27,806 --> 00:00:31,471
First up is Selectize.js.

12
00:00:31,471 --> 00:00:38,130
Selectize is a hybrid of a text box and a
select box and it relies on jQuery and it

13
00:00:38,130 --> 00:00:45,070
allows you to tag things, create contact
lists, country selectors, and so on.

14
00:00:45,070 --> 00:00:47,330
>> Based on the name I thought it was just
a plug-in

15
00:00:47,330 --> 00:00:51,365
that allows you to select only the letter
I on a webpage.

16
00:00:51,365 --> 00:00:53,270
No you can select anything, actually.

17
00:00:53,270 --> 00:00:53,570
>> Get it?

18
00:00:53,570 --> 00:00:54,530
Select eyes?

19
00:00:54,530 --> 00:00:56,280
>> I, I understood the joke.

20
00:00:57,640 --> 00:01:01,630
It clocks in at seven kilobytes so that's
not as good as like,

21
00:01:01,630 --> 00:01:06,690
I don't know, five or six kilobytes, but
seven kilobytes is pretty small.

22
00:01:06,690 --> 00:01:08,080
Just kidding there.

23
00:01:08,080 --> 00:01:11,630
If we scroll down the page, we have this
couple of demos here.

24
00:01:11,630 --> 00:01:13,390
So I could tag stuff.

25
00:01:13,390 --> 00:01:18,460
Awesome, neat, Jason, Nick, treehouse.

26
00:01:18,460 --> 00:01:21,300
>> It's like magnetic poetry for a text
box.

27
00:01:21,300 --> 00:01:21,800
>> It is.

28
00:01:23,240 --> 00:01:26,630
We can scroll down further and go to email
contacts, so I

29
00:01:26,630 --> 00:01:31,480
can email Nikola Tesla, who knew that you
could email him still?

30
00:01:31,480 --> 00:01:32,300
That's pretty cool

31
00:01:32,300 --> 00:01:33,880
>> You may not get a response, but you can
email.

32
00:01:33,880 --> 00:01:38,750
And if you could talk to anyone living or
dead, are you a sorcerer?

33
00:01:38,750 --> 00:01:40,050
We can go to.

34
00:01:40,050 --> 00:01:42,420
>> For the record I would chose living.

35
00:01:42,420 --> 00:01:45,980
>> We can go to these select boxes here,
option

36
00:01:45,980 --> 00:01:49,090
groups all sorts cool stuff and each demo
has the

37
00:01:49,090 --> 00:01:52,120
code as you can see actually how it works
so

38
00:01:52,120 --> 00:01:56,700
for example you can reg x an email just
like that.

39
00:01:56,700 --> 00:02:00,030
And there's a bunch of different options
that you can set.

40
00:02:00,030 --> 00:02:03,020
Anyway, it's a really cool JQuery plugin,
so

41
00:02:03,020 --> 00:02:05,550
definitely be sure to check this one out.

42
00:02:05,550 --> 00:02:06,710
>> Very nice.

43
00:02:06,710 --> 00:02:09,930
Next up, we have a website called Pull
Push.

44
00:02:09,930 --> 00:02:14,200
Now, this is not a metaphor for mine and
Nick's relationship, this is a curated

45
00:02:14,200 --> 00:02:20,710
library of well maintained JQuery and
plain JavaScript plugins and libraries.

46
00:02:20,710 --> 00:02:26,030
Now, lots of these libraries you may have
seen before on this very treehouse show.

47
00:02:26,030 --> 00:02:29,370
And there is a nice little classification
on the left.

48
00:02:29,370 --> 00:02:33,120
This leans a little bit towards front end
plugins.

49
00:02:33,120 --> 00:02:39,200
We have responsive plugins, modal
dialogues, carousels, etc.

50
00:02:39,200 --> 00:02:40,580
Like I said, leans a little bit more
towards

51
00:02:40,580 --> 00:02:42,850
front end, and there are really not that
many to

52
00:02:42,850 --> 00:02:46,370
choose from within each category, which is
good because

53
00:02:46,370 --> 00:02:49,760
you can just come on over here to this
website.

54
00:02:49,760 --> 00:02:53,380
Head on over to the category of the plugin
you want, and boom, you have

55
00:02:53,380 --> 00:02:57,710
just a few choices, and you know they're
good because it is a curated library.

56
00:02:57,710 --> 00:03:00,800
>> And, it's on the internet, so, you've
gotta trust it, right?

57
00:03:00,800 --> 00:03:01,230
>> So you know it's good.

58
00:03:01,230 --> 00:03:01,790
Yeah.

59
00:03:01,790 --> 00:03:03,260
I trust everything on the internet.

60
00:03:03,260 --> 00:03:04,190
>> Mm.

61
00:03:04,190 --> 00:03:06,430
>> And that's it, that's all I have to say
about that.

62
00:03:06,430 --> 00:03:07,080
Very nice.

63
00:03:07,080 --> 00:03:10,400
Well, next up is Number Progress Bar.

64
00:03:10,400 --> 00:03:15,100
This is a progress bar similar to what you
might actually find in Android.

65
00:03:15,100 --> 00:03:21,830
The idea was inspired by this Number
Progress Bar, which is written in Android.

66
00:03:21,830 --> 00:03:25,910
So there's what that looks like and you
can see the Android code down here.

67
00:03:25,910 --> 00:03:29,930
So I'm going to make something very
similar in HTML and CSS.

68
00:03:29,930 --> 00:03:33,920
So if we go to the Github page here.

69
00:03:34,940 --> 00:03:38,560
Can scroll down and install it with Bower.

70
00:03:38,560 --> 00:03:41,050
And here's how you do it with HTML.

71
00:03:41,050 --> 00:03:44,300
So just a couple of div tags you need
there.

72
00:03:44,300 --> 00:03:46,460
And then here is CSS.

73
00:03:46,460 --> 00:03:49,540
And of course you can make your own
modifications to that.

74
00:03:49,540 --> 00:03:53,740
And then there's some JavaScript with
options.

75
00:03:53,740 --> 00:03:56,110
So, some of the options you can set is the

76
00:03:56,110 --> 00:04:01,120
style, the duration, the minimum and
maximum values, and so on.

77
00:04:01,120 --> 00:04:05,470
So, this is really cool if you are
creating a progress

78
00:04:05,470 --> 00:04:09,520
bar, you may also want to look into the
Progress Element.

79
00:04:09,520 --> 00:04:12,280
It could be a slightly more semantic way

80
00:04:12,280 --> 00:04:15,500
to .do this but if you're working in
browser

81
00:04:15,500 --> 00:04:17,840
that maybe doesn't support that or you're
in some

82
00:04:17,840 --> 00:04:20,300
situation where you just can't use the
progress element.

83
00:04:20,300 --> 00:04:22,520
This is a pretty good alternative to that.

84
00:04:22,520 --> 00:04:22,685
>> Very nice.

85
00:04:22,685 --> 00:04:23,820
>> Mm-hum.

86
00:04:23,820 --> 00:04:26,510
Next up, we have a, well not a blog post,

87
00:04:26,510 --> 00:04:31,370
a get hub repository with a guide on HTTP
API Design.

88
00:04:31,370 --> 00:04:36,880
When you are designing an HTTP API there
are a lot of do's

89
00:04:36,880 --> 00:04:42,840
and a lot of don'ts that go into having a
well maintained and well thought out API.

90
00:04:42,840 --> 00:04:47,050
This guide attempts to put all of those
into.

91
00:04:47,050 --> 00:04:51,940
An easy to follow list with a lot of good
information.

92
00:04:51,940 --> 00:04:58,470
So return appropriate status codes kind of
get into the nitty gritty of HTTP

93
00:04:58,470 --> 00:05:03,360
and what are you what you are suppose to
return for Git, Delete, and Patch Calls.

94
00:05:03,360 --> 00:05:07,130
This guide was taken from a lot of
Herokoos design

95
00:05:07,130 --> 00:05:09,970
and there's some very interesting things
you'll get from here.

96
00:05:09,970 --> 00:05:14,400
For example, accept serialized JSON in
request bodies.

97
00:05:14,400 --> 00:05:19,990
That is important, and also, you can have,
little JSON object right here.

98
00:05:19,990 --> 00:05:21,860
It's got an ID and a name.

99
00:05:21,860 --> 00:05:23,410
Another thing to keep in mind, instead of

100
00:05:23,410 --> 00:05:29,040
saying owner_email and owner_id like in
this example.

101
00:05:29,040 --> 00:05:32,330
You may as well give owner its own
property.

102
00:05:32,330 --> 00:05:36,230
Now this is actually a very, very long
guide with a lot of information.

103
00:05:36,230 --> 00:05:39,170
So we're not gonna get into all of that
here on the show.

104
00:05:39,170 --> 00:05:40,360
But we will have a link to the

105
00:05:40,360 --> 00:05:43,540
show notes which you can check out at
youtube.com/gotreehouse.

106
00:05:43,540 --> 00:05:46,180
You can also search for us in iTunes.

107
00:05:46,180 --> 00:05:47,690
We are The Treehouse Show.

108
00:05:47,690 --> 00:05:52,674
And don't forget to try Treehouse for 30
days free at teamtreehouse.com/show.

109
00:05:53,720 --> 00:05:54,820
Very nice stuff.

110
00:05:54,820 --> 00:05:57,990
Well next up is PROFOUNDGRID.

111
00:05:57,990 --> 00:06:01,500
It is the pro version of Found Grid.

112
00:06:01,500 --> 00:06:04,760
Actually I think it might say Profound
Grid.

113
00:06:04,760 --> 00:06:08,130
It's a responsive system for fixed and
fluid layouts.

114
00:06:08,130 --> 00:06:10,488
So if you're familiar with Foundation or
Bootstrap.

115
00:06:10,488 --> 00:06:12,390
Which are front-end frameworks.

116
00:06:12,390 --> 00:06:17,260
This is kind of a similar thing, but it
may be a little bit more

117
00:06:17,260 --> 00:06:22,480
lightweight if you just need a very simple
and semantic grid.

118
00:06:22,480 --> 00:06:24,240
So here are some examples.

119
00:06:24,240 --> 00:06:28,530
Wow, I feel like I'm playing, like space
invaders, or breakout, or something here.

120
00:06:28,530 --> 00:06:31,660
But if we can click on these, you can see.

121
00:06:31,660 --> 00:06:34,160
What this grid looks like, and you can
actually

122
00:06:34,160 --> 00:06:36,540
turn the grid on and off so you can

123
00:06:36,540 --> 00:06:39,270
see that these line up exactly like you
would

124
00:06:39,270 --> 00:06:43,640
expect with this to, with this 12 column
grid here.

125
00:06:43,640 --> 00:06:48,840
So I can click through, and you can see
what a couple of these look like.

126
00:06:48,840 --> 00:06:54,460
So you can hit the sides of the browser
window, if you want to, or create.

127
00:06:54,460 --> 00:06:57,990
Something with more of a max width.

128
00:06:57,990 --> 00:07:00,640
So, anyway, not a whole lot to say about
it.

129
00:07:00,640 --> 00:07:05,220
It's pretty lightweight though, pretty
cool stuff, and it allows

130
00:07:05,220 --> 00:07:09,290
you to customize it with SCSS, so that's
really nice.

131
00:07:09,290 --> 00:07:10,105
>> Oh, very, very nice.

132
00:07:10,105 --> 00:07:10,820
>> mm-hmm.

133
00:07:10,820 --> 00:07:12,750
>> Next up we have a blog post

134
00:07:12,750 --> 00:07:17,430
called slash page load times with CSS font
subsetting.

135
00:07:17,430 --> 00:07:19,930
What in the world does that mean?

136
00:07:19,930 --> 00:07:22,660
Well let me tell you what it means
[LAUGH].

137
00:07:22,660 --> 00:07:27,310
CSS font subsetting is taking only a
specific subset

138
00:07:27,310 --> 00:07:30,310
of the CSS font that you will be using.

139
00:07:30,310 --> 00:07:34,730
So the example that they really get into
here is with Google web fonts.

140
00:07:34,730 --> 00:07:38,240
Let's say you are using a Google web font
like Open Sans.

141
00:07:38,240 --> 00:07:41,090
Here is how you would normally embed that
font in your page.

142
00:07:41,090 --> 00:07:43,030
You would do a link with the references to

143
00:07:43,030 --> 00:07:46,360
the specific font and give it a relative
style sheet.

144
00:07:46,360 --> 00:07:48,780
But if you limit this to just certain

145
00:07:48,780 --> 00:07:52,295
characters, you can add a little ampersand
argument here.

146
00:07:52,295 --> 00:07:54,410
And the text that you want it to display.

147
00:07:55,430 --> 00:07:58,076
What, what that's going to do is serve

148
00:07:58,076 --> 00:08:02,720
only those specific characters from that
font style sheet.

149
00:08:02,720 --> 00:08:06,340
So what that will result in is a smaller
file

150
00:08:06,340 --> 00:08:11,150
size, resulting in a quicker overall
experience for your users.

151
00:08:11,150 --> 00:08:13,480
Now this article goes into a little more

152
00:08:13,480 --> 00:08:16,020
detail about how to embed that in your
page.

153
00:08:16,020 --> 00:08:18,810
It's a really a great tech, technique, and
also really

154
00:08:18,810 --> 00:08:24,350
important as mobile devices are more, more
on the web.

155
00:08:24,350 --> 00:08:25,160
>> Prevalent.

156
00:08:25,160 --> 00:08:27,710
>> Prevalent is the word that I was
looking for.

157
00:08:27,710 --> 00:08:28,650
So, yeah.

158
00:08:28,650 --> 00:08:31,430
That's about all we got time for today,
we, we are out of steam here.

159
00:08:31,430 --> 00:08:32,530
Nick, who are you on Twitter?

160
00:08:32,530 --> 00:08:33,660
>> I am @nickrp.

161
00:08:33,660 --> 00:08:34,620
>> And I am @jseifer.

162
00:08:34,620 --> 00:08:36,265
For more information on anything we talked

163
00:08:36,265 --> 00:08:39,330
about, check out our show notes at
youtube.com/gotreehouse.

164
00:08:39,330 --> 00:08:41,220
You can also search for us on iTunes.

165
00:08:41,220 --> 00:08:43,740
We're the Treehouse show, please don't
forget to rate us.

166
00:08:43,740 --> 00:08:45,110
And of course, if you'd like to see more

167
00:08:45,110 --> 00:08:48,250
videos like this one, about web design,
web development, mobile

168
00:08:48,250 --> 00:08:51,190
business and so much more, be sure to
check us

169
00:08:51,190 --> 00:08:57,750
out at teamtreehouse.com/show to get a
free 30 day trial.

170
00:08:57,750 --> 00:09:00,711
Thank you so much for watching, and we
will see you next week.

171
00:09:00,711 --> 00:09:07,474
[NOISE]