1
00:00:00,000 --> 00:00:03,610
I'm Jason Seifer, >>and I'm Nick Pettit.

2
00:00:03,610 --> 00:00:05,210
And you're watching the Treehouse Show. 

3
00:00:05,210 --> 00:00:07,890
Your weekly dose of internet where we talk about all things 

4
00:00:07,890 --> 00:00:10,730
web design, web development, and more. 

5
00:00:10,730 --> 00:00:13,780
In this week's episode we're going to be talking about responsive images,

6
00:00:13,780 --> 00:00:16,920
HTML5 form inputs, and more. 

7
00:00:16,920 --> 00:00:19,430
Let's check it out. 

8
00:00:19,430 --> 00:00:23,760
[radar noises] 

9
00:00:23,760 --> 00:00:26,090
[The Treehouse Show]

10
00:00:26,090 --> 00:00:29,490
First up is Midway.js,

11
00:00:29,490 --> 00:00:33,490
which is basically a piece of JavaScript that allows you to 

12
00:00:33,490 --> 00:00:37,030
position elements in the middle of your pages. 

13
00:00:37,030 --> 00:00:39,310
[Seifer] Hence, why they call it Midway.

14
00:00:39,310 --> 00:00:40,570
[Pettit] Exactly. 

15
00:00:40,570 --> 00:00:44,410
So if we scroll down here—we'll look at a live demo in just a second—

16
00:00:44,410 --> 00:00:46,220
but you can see the usage here. 

17
00:00:46,220 --> 00:00:48,420
You basically include Midway, 

18
00:00:48,420 --> 00:00:52,090
and then you add the class, "centerHorizontal,"

19
00:00:52,090 --> 00:00:55,360
or, "centerVertical," or both. 

20
00:00:55,360 --> 00:00:58,960
And then it will go ahead and center your elements. 

21
00:00:58,960 --> 00:01:00,530
So let's see a live example. 

22
00:01:00,530 --> 00:01:03,500
[Seifer] This is actually a lot harder than you would expect it to be.

23
00:01:03,500 --> 00:01:06,370
[Pettit] It is actually really hard and that's why it's so great that

24
00:01:06,370 --> 00:01:09,280
somebody made it easy.

25
00:01:09,280 --> 00:01:11,660
So if we go ahead and resize the browser here

26
00:01:11,660 --> 00:01:16,170
you can see that the element stays right in the middle of the page,

27
00:01:16,170 --> 00:01:20,180
and everything is centered perfectly. 

28
00:01:20,180 --> 00:01:24,270
So it's a pretty handy library, and it's a common problem

29
00:01:24,270 --> 00:01:27,670
on a lot of responsive sites, so definitely one to check out. 

30
00:01:27,670 --> 00:01:30,350
Yeah, and very easy to use. That's really awesome. >>Yep.

31
00:01:30,350 --> 00:01:34,460
Next up, over on the Zurb blog—we've talked about Zurb Foundation

32
00:01:34,460 --> 00:01:36,470
the CSS framework on this show before.

33
00:01:36,470 --> 00:01:39,580
Zurb Foundation recently had a new version release,

34
00:01:39,580 --> 00:01:44,240
and in it they added something called data-interchange for responsive images. 

35
00:01:44,240 --> 00:01:46,290
So something that you'll run into 

36
00:01:46,290 --> 00:01:50,270
is if you're serving up a responsive version of your site to a mobile browser

37
00:01:50,270 --> 00:01:55,110
a lot of people don't serve up smaller images to those particular browsers. 

38
00:01:55,110 --> 00:01:57,020
And—of course—you'd want to serve up smaller images 

39
00:01:57,020 --> 00:01:59,390
as to not take up a ton of bandwidth. >>Yes. 

40
00:01:59,390 --> 00:02:01,390
So the smallest possible size. >>Yep.

41
00:02:01,390 --> 00:02:04,060
And this is something we'll be getting into more on the show later.

42
00:02:04,060 --> 00:02:07,210
But anyway—in Zurb Foundation the latest release—

43
00:02:07,210 --> 00:02:09,729
they added something called data-interchange.

44
00:02:09,729 --> 00:02:15,470
And what it lets you do is serve up a small version of the image—

45
00:02:15,470 --> 00:02:18,050
and you can see all the way on the left the min-width 

46
00:02:18,050 --> 00:02:20,660
is 400 pixels on this image right here. 

47
00:02:20,660 --> 00:02:24,150
So as soon as the page loads it serves up the smallest one,

48
00:02:24,150 --> 00:02:27,290
and then you actually use media queries inside 

49
00:02:27,290 --> 00:02:31,550
the data-interchange attribute to serve up larger versions

50
00:02:31,550 --> 00:02:35,300
to browsers that are more likely on a better connection. 

51
00:02:35,300 --> 00:02:38,230
And it's really, really easy to use.

52
00:02:38,230 --> 00:02:40,950
You can see right here is the example—you can have an image,

53
00:02:40,950 --> 00:02:43,820
give it your source, and then just use this data-interchange—

54
00:02:43,820 --> 00:02:48,800
you can add as many as you want and have the media query right in there. 

55
00:02:48,800 --> 00:02:53,070
So in this example they are serving up the small JPEG on screens 

56
00:02:53,070 --> 00:02:58,380
that are a min-width of 768 pixels—so tablet-sized. 

57
00:02:58,380 --> 00:03:01,780
So really, really, really great plugin—

58
00:03:01,780 --> 00:03:04,320
extremely simple to use and takes care of a problem 

59
00:03:04,320 --> 00:03:06,370
that we're starting to see more and more. 

60
00:03:06,370 --> 00:03:09,860
So check that one out—really like this—Zurb Foundation is pretty cool.

61
00:03:09,860 --> 00:03:14,350
Yep, definitely. So over in the Six Revisions blog—

62
00:03:14,350 --> 00:03:16,560
way better than the Five Revisions blog—

63
00:03:16,560 --> 00:03:18,230
[Pettit] they've made a post called,

64
00:03:18,230 --> 00:03:22,370
"A Guide to the New HTML5 Form Input Types."

65
00:03:22,370 --> 00:03:27,570
Now—of course—in HTML5 there are several new input types for forms

66
00:03:27,570 --> 00:03:31,310
and this blog post just goes over some of them and also shows 

67
00:03:31,310 --> 00:03:34,270
how they look different on mobile devices. 

68
00:03:34,270 --> 00:03:38,390
The really nice thing about having these more-specific input types

69
00:03:38,390 --> 00:03:41,110
for things like dates and email addresses

70
00:03:41,110 --> 00:03:45,210
is that a lot of the validation can actually occur in the browser. 

71
00:03:45,210 --> 00:03:48,300
They say that it will reduce our reliance 

72
00:03:48,300 --> 00:03:51,770
on client-side and server-side scripting for validation.

73
00:03:51,770 --> 00:03:53,870
I do disagree with that a little bit. 

74
00:03:53,870 --> 00:03:57,340
I think you still should actually validate it server-side,

75
00:03:57,340 --> 00:04:03,580
but you may just have to run less strict validation on it because of this. 

76
00:04:03,580 --> 00:04:09,420
So the first example is the new date input type.

77
00:04:09,420 --> 00:04:12,750
And in this example you can see what it looks like 

78
00:04:12,750 --> 00:04:18,519
in HTML4 versus HTML5 on an iPhone.

79
00:04:18,519 --> 00:04:21,630
So when you go ahead and click on this particular element here

80
00:04:21,630 --> 00:04:25,010
it will bring up a date picker.

81
00:04:25,010 --> 00:04:30,040
They have a similar example for URLs where if you have a URL input type,

82
00:04:30,040 --> 00:04:31,810
it will actually change the keyboard.

83
00:04:31,810 --> 00:04:36,060
So instead of having a space, which you wouldn't have in a valid URL,

84
00:04:36,060 --> 00:04:40,620
it gives you a dot, a slash, and dot com,

85
00:04:40,620 --> 00:04:42,880
or other extensions. 

86
00:04:42,880 --> 00:04:46,790
There is also the email input type, which does a similar thing—

87
00:04:46,790 --> 00:04:50,700
changes the keyboard layout. 

88
00:04:50,700 --> 00:04:54,240
And if we scroll down a little bit further here in the post,

89
00:04:54,240 --> 00:05:00,200
they have an input types, demo, so I'll go ahead and open that up.

90
00:05:00,200 --> 00:05:02,970
And here we can see a couple of examples 

91
00:05:02,970 --> 00:05:06,360
of what these different input types actually look like.

92
00:05:06,360 --> 00:05:08,540
There's a couple of other ones here that are pretty neat.

93
00:05:08,540 --> 00:05:12,860
There's the color input type, which brings up a color picker.

94
00:05:12,860 --> 00:05:14,410
That's pretty neat.

95
00:05:14,410 --> 00:05:21,120
You can select a range, so if you want a number between 1 and 10

96
00:05:21,120 --> 00:05:23,620
and you just want a little slider, you can include that.

97
00:05:23,620 --> 00:05:26,630
And there are things like telephone numbers,

98
00:05:26,630 --> 00:05:29,100
dates—like we discussed, and so on.

99
00:05:29,100 --> 00:05:33,520
So pretty interesting stuff, and if you build a lot of forms—

100
00:05:33,520 --> 00:05:36,780
or actually any forms at all—this would be very useful to you. 

101
00:05:36,780 --> 00:05:39,900
Really, really nice—nice little overview they got there. >>Yeah definitely.

102
00:05:39,900 --> 00:05:42,780
Next up we have a project called Skrollr.

103
00:05:42,780 --> 00:05:45,950
This is Parallax scrolling for the masses. 

104
00:05:45,950 --> 00:05:49,420
It's actually a really well-done and easy-to-use plugin. 

105
00:05:49,420 --> 00:05:50,980
So let's check this one out here. 

106
00:05:50,980 --> 00:05:53,620
Here's the Skrollr webpage, and get ready for this,

107
00:05:53,620 --> 00:06:00,100
as I'm scrolling down the page—whoa—are we on a webpage or a rollercoaster?

108
00:06:00,100 --> 00:06:02,290
[Pettit] Amazing. [Seifer] I don't even know. 

109
00:06:02,290 --> 00:06:06,500
So here's an example of the transform scrolling—

110
00:06:06,500 --> 00:06:08,920
Parallax scrolling effect that we have there

111
00:06:08,920 --> 00:06:13,040
where you can scale, rotate, and other adjectives of any element. 

112
00:06:13,040 --> 00:06:15,320
Anyway, it supports all numeric properties, and—

113
00:06:15,320 --> 00:06:16,900
boy, the site sure is fun.

114
00:06:16,900 --> 00:06:18,810
You'll notice on the bottom of the screen there is an optional 

115
00:06:18,810 --> 00:06:20,530
progress bar that you can do.

116
00:06:20,530 --> 00:06:23,750
And it supports a bunch of different effects that you would figure out. 

117
00:06:23,750 --> 00:06:28,700
So this code is available on GitHub, where there are quite a few 

118
00:06:28,700 --> 00:06:31,690
instructions and examples of how to use it. 

119
00:06:31,690 --> 00:06:35,400
Anyway, go ahead and check it out—Skrollr—a wonderful plugin. 

120
00:06:35,400 --> 00:06:37,130
Very cool stuff. 

121
00:06:37,130 --> 00:06:40,660
Next up is Flippant.js,

122
00:06:40,660 --> 00:06:43,270
which is yet another JavaScript library. 

123
00:06:43,270 --> 00:06:48,640
And it allows you to—as the name implies—flip things over. 

124
00:06:48,640 --> 00:06:52,880
So, if I go ahead and click here on this modal—whoa.

125
00:06:52,880 --> 00:06:55,780
It brings up a modal that takes up the whole screen. 

126
00:06:55,780 --> 00:06:59,890
And we'll go ahead and click update—bam—it's right back. 

127
00:06:59,890 --> 00:07:03,380
You can also have this in the form of a smaller card.

128
00:07:03,380 --> 00:07:06,690
So I'll click that and—bam—it brings up a card. >>Bam.

129
00:07:06,690 --> 00:07:08,900
[Pettit] Let's see if this actually works here. 

130
00:07:08,900 --> 00:07:11,030
I'll type in test and hit update.

131
00:07:11,030 --> 00:07:17,300
And—oh, look at that—it does actually update these little cards here. 

132
00:07:17,300 --> 00:07:21,270
So pretty nifty—I think it's a really cool way 

133
00:07:21,270 --> 00:07:24,460
to just update small areas of the page.

134
00:07:24,460 --> 00:07:28,750
If you have a bunch of stuff on the page 

135
00:07:28,750 --> 00:07:30,720
and you just want to update individual pieces,

136
00:07:30,720 --> 00:07:34,000
having those little cards there is definitely a nifty way to do it. 

137
00:07:34,000 --> 00:07:39,730
I really like the animations that they are applying here.

138
00:07:39,730 --> 00:07:44,480
It's a really good way to build out that UI and create that metaphor. 

139
00:07:44,480 --> 00:07:46,640
[Seifer] Yeah really effective—I think. >>Yeah.

140
00:07:46,640 --> 00:07:53,390
So very cool stuff, and I believe it's available on—yeah—on GitHub.

141
00:07:53,390 --> 00:07:55,180
So very cool. >>Nice. 

142
00:07:55,180 --> 00:08:00,210
Next up—over on the Adioso blog there is a wonderful blog post

143
00:08:00,210 --> 00:08:06,420
on how you can actually make a complex webapp responsive and quick.

144
00:08:06,420 --> 00:08:10,050
Now in this blog post they walk through some of the challenges that they faced

145
00:08:10,050 --> 00:08:15,030
in getting their webapp to be very performant even on smaller devices. 

146
00:08:15,030 --> 00:08:19,290
So it really walks through—you know it shows you right here the different 

147
00:08:19,290 --> 00:08:22,270
devices that this had to work on and be responsive.

148
00:08:22,270 --> 00:08:28,370
So they don't go too far into what they did on the JavaScript side,

149
00:08:28,370 --> 00:08:32,140
but they did use the Zurb Foundation framework, which we mentioned earlier—

150
00:08:32,140 --> 00:08:34,909
Foundation is really knocking it out of the park.

151
00:08:34,909 --> 00:08:38,630
And so what they did, they imported only what they needed to,

152
00:08:38,630 --> 00:08:42,500
which is going to help page load times stay down.

153
00:08:42,500 --> 00:08:45,890
If the client—the less the client has to download, the better it is. 

154
00:08:45,890 --> 00:08:50,620
Anyway, it's really just a wonderful walkthrough that we don't have time for

155
00:08:50,620 --> 00:08:53,410
to do all the way on this show, but I really recommend checking it out. 

156
00:08:53,410 --> 00:08:56,090
You can find it in the show notes, on our YouTube channel 

157
00:08:56,090 --> 00:08:59,900
at YouTube.com/gotreehouse, or in iTunes search for The Treehouse Show. 

158
00:08:59,900 --> 00:09:06,750
And say Adioso to poor performance and hola to fast webpages. 

159
00:09:06,750 --> 00:09:10,050
That's Spanish, Jason—Spanish. 

160
00:09:10,050 --> 00:09:11,700
I am not fluent. 

161
00:09:11,700 --> 00:09:14,100
Next up is Progression.js.

162
00:09:14,100 --> 00:09:16,640
And if we go ahead and scroll down the page here,

163
00:09:16,640 --> 00:09:17,940
we can get right into the demo.

164
00:09:17,940 --> 00:09:22,520
We have a form—a couple form fields here—

165
00:09:22,520 --> 00:09:24,780
and I'll go ahead and click on the first one.

166
00:09:24,780 --> 00:09:28,460
And as I tab through the form and progress through it,

167
00:09:28,460 --> 00:09:32,390
you can see over on the right side, we have this little progress meter 

168
00:09:32,390 --> 00:09:35,930
that tells me how far along you are in the form. 

169
00:09:35,930 --> 00:09:40,980
Now when I first saw this, I thought it was actually a pretty stupid idea

170
00:09:40,980 --> 00:09:44,750
because, obviously, this form is pretty short,

171
00:09:44,750 --> 00:09:48,330
and I know that I'm only 3 form fields in.

172
00:09:48,330 --> 00:09:51,920
I don't really need a progress tool tip over here to tell me that.

173
00:09:51,920 --> 00:09:55,780
But Jason pointed out that it actually would be pretty useful 

174
00:09:55,780 --> 00:09:58,060
on very lengthy forms. 

175
00:09:58,060 --> 00:10:03,350
So if you have a really long form that takes up several screens

176
00:10:03,350 --> 00:10:06,180
of scrolling or you actually have to page through it,

177
00:10:06,180 --> 00:10:10,050
this would be an excellent time to use that kind of progress meter

178
00:10:10,050 --> 00:10:12,910
so that your users know how far along they are.

179
00:10:12,910 --> 00:10:15,610
It's actually really easy to use.

180
00:10:15,610 --> 00:10:18,870
You just go ahead and include jQuery 

181
00:10:18,870 --> 00:10:22,920
and then include the Progression CSS and JavaScript files.

182
00:10:22,920 --> 00:10:27,040
It recommends including these before the head section—

183
00:10:27,040 --> 00:10:29,900
maybe there's a technical reason that you need to do that,

184
00:10:29,900 --> 00:10:31,340
but I actually would recommend 

185
00:10:31,340 --> 00:10:35,340
including it towards the bottom of your page for faster load times.

186
00:10:35,340 --> 00:10:40,630
And then you can go ahead and create the form and then initiate the plugin 

187
00:10:40,630 --> 00:10:44,350
by using a normal jQuery selector.

188
00:10:44,350 --> 00:10:47,730
So you select the form and then apply Progression

189
00:10:47,730 --> 00:10:52,050
and then you can also initiate the plugin with all these various options

190
00:10:52,050 --> 00:10:56,850
such as tooltipwidth, tooltipposition, and so on. 

191
00:10:56,850 --> 00:11:00,760
So pretty nifty—again—if you're using forms 

192
00:11:00,760 --> 00:11:05,230
this would be a great thing to use with those HTML5 form elements. 

193
00:11:05,230 --> 00:11:07,090
Very nice. I like it. 

194
00:11:07,090 --> 00:11:10,510
I like being told that I'm making progress on something. >>Definitely.

195
00:11:10,510 --> 00:11:13,930
No matter how small and incremental that progress is—

196
00:11:13,930 --> 00:11:15,230
I like to know I'm almost there.

197
00:11:15,230 --> 00:11:17,930
I think we're about 80% through the show. >>Very nice. 

198
00:11:17,930 --> 00:11:21,150
Next up—over on Dave Rupert's blog.

199
00:11:21,150 --> 00:11:24,290
He has a blog post called, "Ughck. Images."

200
00:11:24,290 --> 00:11:27,920
Uh—I think that's how you pronounce it, I'm not sure. 

201
00:11:27,920 --> 00:11:31,110
If anybody knows how to pronounce this word, tweet me. 

202
00:11:31,110 --> 00:11:34,360
Anyway, as we were talking about a little bit earlier

203
00:11:34,360 --> 00:11:36,410
the web is in an interesting state right now

204
00:11:36,410 --> 00:11:39,110
where we have a lot of devices,

205
00:11:39,110 --> 00:11:42,140
and they do not always have fast connections. 

206
00:11:42,140 --> 00:11:44,950
Now images are a really huge part of the web, 

207
00:11:44,950 --> 00:11:47,790
and serving up different images to different browsers

208
00:11:47,790 --> 00:11:50,030
is a bit of a pain. 

209
00:11:50,030 --> 00:11:52,660
So he's got some interesting statistics on here.

210
00:11:52,660 --> 00:11:57,640
The average webpage in June 2013 or oh 13, as Nick says,

211
00:11:57,640 --> 00:12:02,290
was almost 1.5 Megs, and 60% of that was images. 

212
00:12:02,290 --> 00:12:06,550
Now responsive images could reduce the image asset weight by 72%,

213
00:12:06,550 --> 00:12:08,920
but not a lot of people use them.

214
00:12:08,920 --> 00:12:11,370
So he goes through some more concerns here 

215
00:12:11,370 --> 00:12:14,720
including choosing break points for responsive images

216
00:12:14,720 --> 00:12:17,330
and what in the world to do about this. 

217
00:12:17,330 --> 00:12:20,910
So what I found really awesome was this presentation here.

218
00:12:20,910 --> 00:12:24,100
It's his slides from a conference that he gave,

219
00:12:24,100 --> 00:12:27,170
and he goes through a ton of different techniques

220
00:12:27,170 --> 00:12:29,870
for reducing image weight on a page. 

221
00:12:29,870 --> 00:12:34,130
Anyway this is one of the best presentations that I've seen in awhile.

222
00:12:34,130 --> 00:12:37,670
The slides are just amazing and probably apply to something that 

223
00:12:37,670 --> 00:12:41,090
you're working on at this point in time. >>Probably. >>Probably.

224
00:12:41,090 --> 00:12:43,600
Anyway that's about all we have for this week.

225
00:12:43,600 --> 00:12:44,650
Nick, who are you on Twitter?

226
00:12:44,650 --> 00:12:47,580
I am @nickrp. >>And I am @jseifer.

227
00:12:47,580 --> 00:12:49,810
For more information on anything we talked about

228
00:12:49,810 --> 00:12:52,790
check out our show notes at youtube.com/gotreehouse

229
00:12:52,790 --> 00:12:55,590
or search for us on iTunes at The Treehouse Show. 

230
00:12:55,590 --> 00:12:58,260
And—of course—if you'd like to see more videos like this one 

231
00:12:58,260 --> 00:13:02,450
about web design, web development, mobile, business, and so much more

232
00:13:02,450 --> 00:13:05,640
be sure to check us out at teamtreehouse.com.

233
00:13:05,640 --> 00:13:08,620
Thanks so much for watching, and we'll see you next week. 

234
00:13:08,620 --> 00:13:14,580
[radar noises]