1
00:00:00,000 --> 00:00:02,000
[Nick] I'm Nick Pettit. [Jason] I'm Jason Seifer.

2
00:00:02,000 --> 00:00:04,730
[Nick] And you're watching the Treehouse Show, your weekly dose of Internet

3
00:00:04,730 --> 00:00:07,830
where we talk about all tings web design, web development, and more.

4
00:00:07,830 --> 00:00:10,890
[Jason] In this episode we'll be talking about the main element,

5
00:00:10,890 --> 00:00:14,460
jQuery calendaring, keystrokes, and more.

6
00:00:14,460 --> 00:00:16,140
[Nick] Let's check it out.

7
00:00:16,140 --> 00:00:20,910
[treehouse show]

8
00:00:20,910 --> 00:00:24,550
First up over on the HTML5 Doctor blog

9
00:00:24,550 --> 00:00:27,890
there is a cool blog post about the main element.

10
00:00:27,890 --> 00:00:32,470
You're probably familiar with the header element and the footer element—

11
00:00:32,470 --> 00:00:34,760
not to be confused with the head element.

12
00:00:34,760 --> 00:00:36,820
It's slightly different than the header element.

13
00:00:36,820 --> 00:00:40,710
But the main element is a compliment to a header and footer.

14
00:00:40,710 --> 00:00:45,810
So if we scroll down here, you can see some example code.

15
00:00:45,810 --> 00:00:49,140
Whereas before you might create your body

16
00:00:49,140 --> 00:00:51,110
and then you'd have the header,

17
00:00:51,110 --> 00:00:54,870
some div in the middle with all of your main content,

18
00:00:54,870 --> 00:00:57,610
and then a footer down at the bottom,

19
00:00:57,610 --> 00:01:04,250
well now you can go ahead and use the main element in between the header and footer.

20
00:01:04,250 --> 00:01:09,780
This, of course, is a new addition to a W3C specification,

21
00:01:09,780 --> 00:01:13,400
so it's not supported in every browser just yet,

22
00:01:13,400 --> 00:01:16,720
but you can probably go ahead and use like

23
00:01:16,720 --> 00:01:21,410
html5shiv or Modernizr or something like that

24
00:01:21,410 --> 00:01:26,630
to go ahead and actually get it into your document.

25
00:01:26,630 --> 00:01:28,040
They list one other tip here—

26
00:01:28,040 --> 00:01:31,590
you want to make sure that it is displayed as a block level element

27
00:01:31,590 --> 00:01:34,830
just in case browsers don't support it just yet.

28
00:01:34,830 --> 00:01:36,550
But—pretty cool.

29
00:01:36,550 --> 00:01:40,210
It adds a little bit more semantic value to your pages

30
00:01:40,210 --> 00:01:42,830
rather than just using div elements for everything.

31
00:01:42,830 --> 00:01:45,000
[Jason] You know—it makes a lot of sense when you put it in the context of—

32
00:01:45,000 --> 00:01:47,180
you know—we've got the header element and the footer element,

33
00:01:47,180 --> 00:01:49,430
how did we leave out the main element?

34
00:01:49,430 --> 00:01:51,220
[Nick] Exactly. [Jason] It just seems like an oversight

35
00:01:51,220 --> 00:01:53,170
now that—now that we have it.

36
00:01:53,170 --> 00:01:55,160
[Nick] It's the stuff between the header and footer sandwich.

37
00:01:55,160 --> 00:01:58,820
[Jason] Next up we have a project called Hand.js.

38
00:01:58,820 --> 00:02:03,960
This is a very interesting library that unifies all the different possible pointers.

39
00:02:03,960 --> 00:02:09,840
So it will unify mouse events, pointer events, and touch events.

40
00:02:09,840 --> 00:02:11,240
It's a polyfill.

41
00:02:11,240 --> 00:02:13,330
It does it transparently pretty much for you.

42
00:02:13,330 --> 00:02:18,720
It works on IE9 and up, Chrome, Firefox, Opera, and Safari.

43
00:02:18,720 --> 00:02:21,550
So there's actually a good blog post about it

44
00:02:21,550 --> 00:02:23,540
showing what you can do.

45
00:02:23,540 --> 00:02:27,120
So now you'll notice my pointer is in this box here,

46
00:02:27,120 --> 00:02:29,570
and it's just keeping track of what's going on,

47
00:02:29,570 --> 00:02:32,540
which is me—you know—moving this around in a circle here.

48
00:02:32,540 --> 00:02:34,850
And so what that code is doing—

49
00:02:34,850 --> 00:02:39,750
that will work whether I'm using a mouse, a touch input device, or a pen.

50
00:02:39,750 --> 00:02:41,980
And in order to track all that,

51
00:02:41,980 --> 00:02:44,870
you only need to use pointer events.

52
00:02:44,870 --> 00:02:50,320
So this is kind of a first step in a unification of all of these different possible—

53
00:02:50,320 --> 00:02:52,100
you know—pointer or touch events.

54
00:02:52,100 --> 00:02:54,070
I think it's a great idea

55
00:02:54,070 --> 00:02:56,050
and a really great first step.

56
00:02:56,050 --> 00:02:58,230
So go ahead and check that out—Hand.js.

57
00:02:58,230 --> 00:03:00,510
[Nick] Thanks. That's really handy, Jason.

58
00:03:00,510 --> 00:03:02,880
Thanks for the pointers.

59
00:03:02,880 --> 00:03:07,230
I'm glad that we're keeping in touch with the times.

60
00:03:07,230 --> 00:03:09,230
[laughter]

61
00:03:09,230 --> 00:03:11,210
All right, next up is—

62
00:03:11,210 --> 00:03:13,500
[Jason] I really got to hand it to you on that one.

63
00:03:13,500 --> 00:03:16,020
[Nick] Next up is a cool blog post—

64
00:03:16,020 --> 00:03:18,130
[Jason] Don't you go pointing that finger at me.

65
00:03:18,130 --> 00:03:21,350
[laughter]

66
00:03:21,350 --> 00:03:22,930
[Nick] Next up is a really cool— [Jason]You nailed it, get it?

67
00:03:22,930 --> 00:03:27,410
[Nick] Blog post called Height Equals Width with Pure CSS.

68
00:03:27,410 --> 00:03:30,040
We will move on here, I promise. [Jason] All right.

69
00:03:30,040 --> 00:03:33,290
[Nick] Basically— [Jason] I don't want to leave you hangnailing.

70
00:03:33,290 --> 00:03:39,670
[Nick] It allows you to maintain the aspect ratio of images when they get resized.

71
00:03:39,670 --> 00:03:43,540
Now traditionally you had to do this with JavaScript,

72
00:03:43,540 --> 00:03:47,230
but they're saying in this post that it feels kind of ugly

73
00:03:47,230 --> 00:03:52,740
to have to recalculate the height of an element in JavaScript.

74
00:03:52,740 --> 00:03:56,560
So the tip that they use is actually 4 years old.

75
00:03:56,560 --> 00:04:00,020
It was posted onto A List Apart.

76
00:04:00,020 --> 00:04:05,180
And then there's a followup on Stack Overflow a little while after.

77
00:04:05,180 --> 00:04:07,750
And, I guess, it just kind of got lost

78
00:04:07,750 --> 00:04:09,040
because I've never seen this before.

79
00:04:09,040 --> 00:04:11,050
Basically you use 2 elements.

80
00:04:11,050 --> 00:04:14,550
One has the class box and the other has the class content.

81
00:04:14,550 --> 00:04:19,820
And the one with content has an aspect ratio of 1:1,

82
00:04:19,820 --> 00:04:21,390
so it's square.

83
00:04:21,390 --> 00:04:27,450
The box you apply some CSS to to adjust the desired width,

84
00:04:27,450 --> 00:04:32,710
and then if you apply a position absolute to the content

85
00:04:32,710 --> 00:04:35,810
and say zero for the top, left, bottom, and right,

86
00:04:35,810 --> 00:04:37,810
it will actually fill the element.

87
00:04:37,810 --> 00:04:41,370
So this will maintain the aspect ratio.

88
00:04:41,370 --> 00:04:46,680
It's a little bit crazy and kind of complicated to explain,

89
00:04:46,680 --> 00:04:49,920
but this blog post does a really good job of articulating it.

90
00:04:49,920 --> 00:04:52,670
And they also have some other aspect ratios here

91
00:04:52,670 --> 00:04:57,060
such as 2_1, 1_2, 4_3, and 16_9

92
00:04:57,060 --> 00:05:00,840
with the appropriate padding that you'll need to implement it.

93
00:05:00,840 --> 00:05:02,740
So pretty cool stuff.

94
00:05:02,740 --> 00:05:05,160
It actually kind of reminds me of this technique

95
00:05:05,160 --> 00:05:10,300
that I saw on CodePen not too long ago called absolutes—

96
00:05:10,300 --> 00:05:12,100
not absolute positioning.

97
00:05:12,100 --> 00:05:14,910
It was like this technique that allowed you to center something

98
00:05:14,910 --> 00:05:18,310
vertically and horizontally at the same time.

99
00:05:18,310 --> 00:05:21,550
It used that same top, left, bottom, right set to zero.

100
00:05:21,550 --> 00:05:23,300
I think you could actually do that with this,

101
00:05:23,300 --> 00:05:26,670
you'd just have to set the margins to auto on all sides.

102
00:05:26,670 --> 00:05:28,190
But pretty cool.

103
00:05:28,190 --> 00:05:30,160
[Jason] Yeah, that's a really good tip.

104
00:05:30,160 --> 00:05:32,030
Really got to hand it to them.

105
00:05:32,030 --> 00:05:37,920
Next up we have a blog post on Get Tips for Beginners to Open Source Contributions.

106
00:05:37,920 --> 00:05:40,520
Now this is a blog post by a guy named Mark Berger,

107
00:05:40,520 --> 00:05:42,480
and it can be a little intimidating

108
00:05:42,480 --> 00:05:44,870
if you're new to contributing to Open Source

109
00:05:44,870 --> 00:05:46,400
and—you know—just how to work with git

110
00:05:46,400 --> 00:05:48,080
and how to keep everything in sync.

111
00:05:48,080 --> 00:05:52,430
[Nick] Or if you're a vegetarian and—you know—you're afraid of burgers like me.

112
00:05:52,430 --> 00:05:55,700
[Jason] You never told me about that, Nick.

113
00:05:55,700 --> 00:05:57,070
[Nick] I am a vegetarian.

114
00:05:57,070 --> 00:05:59,050
[Jason] No, your fear of burgers.

115
00:05:59,050 --> 00:06:01,150
[Nick] Oh, yeah. It's pretty scary.

116
00:06:01,150 --> 00:06:03,480
[Jason] We should talk about this sometime—maybe after the show.

117
00:06:03,480 --> 00:06:05,020
[Nick] Maybe.

118
00:06:05,020 --> 00:06:08,570
[Jason] So anyway, he goes into how to clone with SSH.

119
00:06:08,570 --> 00:06:11,900
He also says to never work on the master branch.

120
00:06:11,900 --> 00:06:14,620
Usually the project maintainers are going to be the ones

121
00:06:14,620 --> 00:06:16,330
that are committing to the master branch

122
00:06:16,330 --> 00:06:18,830
because that's where most of the development is kept.

123
00:06:18,830 --> 00:06:22,190
So what you want to do generally is work on your own branch

124
00:06:22,190 --> 00:06:24,110
and integrate the upstream changes,

125
00:06:24,110 --> 00:06:26,110
which he shows you how to do.

126
00:06:26,110 --> 00:06:29,280
Update the master to reflect mainstream

127
00:06:29,280 --> 00:06:32,480
because there is going to be constant commits to this repository.

128
00:06:32,480 --> 00:06:35,560
So you want to make sure that your work is in sync—

129
00:06:35,560 --> 00:06:40,440
not the '90s band, but in sync with the upstream master.

130
00:06:40,440 --> 00:06:42,240
And finally he tells you how to fix commits

131
00:06:42,240 --> 00:06:44,620
if you have a spelling error or something like that.

132
00:06:44,620 --> 00:06:47,250
So anyway, some really great tips in here,

133
00:06:47,250 --> 00:06:49,100
and you can find the link to that in the show notes,

134
00:06:49,100 --> 00:06:51,970
which you can get to at youtube.com/gotreehouse

135
00:06:51,970 --> 00:06:55,560
or on iTunes search for us at The Treehouse Show.

136
00:06:55,560 --> 00:06:57,080
[Nick] Very cool stuff.

137
00:06:57,080 --> 00:07:00,590
Well, next up is CLNDR.js.

138
00:07:00,590 --> 00:07:02,560
It's spelled C-L-N-D-R.

139
00:07:02,560 --> 00:07:06,460
So perhaps it's pronounced CLNDR.js.

140
00:07:06,460 --> 00:07:08,690
[Jason] It's hard to pronounce things without vowels. [Nick] Yeah, it is.

141
00:07:08,690 --> 00:07:13,820
It is a jQuery calendar plugin—just as the name implies.

142
00:07:13,820 --> 00:07:16,240
And it looks like they have a couple of events on this calendar—

143
00:07:16,240 --> 00:07:20,190
Persian Kitten Auction, Cat Frisbee, Kitten Demonstrations.

144
00:07:20,190 --> 00:07:23,800
So a lot of cat-related activities on this particular calendar.

145
00:07:23,800 --> 00:07:26,120
If we go ahead and scroll down,

146
00:07:26,120 --> 00:07:30,980
it will tell you that it's a jQuery plugin for creating calendars,

147
00:07:30,980 --> 00:07:34,710
and you do this using underscore.js templates.

148
00:07:34,710 --> 00:07:39,580
Of course, underscore.js is a templating tool.

149
00:07:39,580 --> 00:07:41,020
It does a couple of other things,

150
00:07:41,020 --> 00:07:43,930
but you can create HTML templates using it.

151
00:07:43,930 --> 00:07:48,920
And then you use CLDR.js to take the data from the calendar

152
00:07:48,920 --> 00:07:51,860
and plug it into your template,

153
00:07:51,860 --> 00:07:53,250
and you'll get something like this.

154
00:07:53,250 --> 00:07:55,590
So if we go ahead and scroll through here,

155
00:07:55,590 --> 00:07:57,610
we can go through the different months.

156
00:07:57,610 --> 00:07:59,540
And if we click on a particular highlighted day,

157
00:07:59,540 --> 00:08:02,590
we can see that there are events for that day.

158
00:08:02,590 --> 00:08:04,730
So pretty cool stuff.

159
00:08:04,730 --> 00:08:06,450
That took me back to the homepage.

160
00:08:06,450 --> 00:08:10,510
But yeah, it's a really nice calendar plugin,

161
00:08:10,510 --> 00:08:12,050
so be sure to check it out.

162
00:08:12,050 --> 00:08:14,310
[Jason] Pretty cool—very semantic.

163
00:08:14,310 --> 00:08:16,910
Next up we have a library called Mousetrap.

164
00:08:16,910 --> 00:08:22,230
This is a library that makes intersecting key presses in JavaScript very, very easy.

165
00:08:22,230 --> 00:08:24,970
Normally when you want to handle a key press in JavaScript

166
00:08:24,970 --> 00:08:27,600
you have to look up the number of the key.

167
00:08:27,600 --> 00:08:30,610
This lets you just write it out using a string.

168
00:08:30,610 --> 00:08:33,640
It also supports a lot of different functionality here.

169
00:08:33,640 --> 00:08:36,419
You can see they've got a couple of bindings upfront.

170
00:08:36,419 --> 00:08:39,200
So if I press the number 4 it highlights that line.

171
00:08:39,200 --> 00:08:41,080
X does that.

172
00:08:41,080 --> 00:08:44,630
And you get just a lot of different options in here.

173
00:08:44,630 --> 00:08:46,000
You use this bind function,

174
00:08:46,000 --> 00:08:49,220
and then you put the keystrokes that you want to use,

175
00:08:49,220 --> 00:08:54,770
and then anything inside will run when that particular command is invoked.

176
00:08:54,770 --> 00:08:59,540
Now it's pretty easy to use and has a lot of browser support.

177
00:08:59,540 --> 00:09:01,360
The nice thing about this library

178
00:09:01,360 --> 00:09:03,940
compared to some of the other libraries that do the same thing

179
00:09:03,940 --> 00:09:07,090
is that you can do sequences of keystrokes

180
00:09:07,090 --> 00:09:10,810
and also intercept multiple different keys.

181
00:09:10,810 --> 00:09:12,670
So a really great library.

182
00:09:12,670 --> 00:09:14,950
I'm loving it—check it out.

183
00:09:14,950 --> 00:09:16,480
[Nick] Very cool stuff.

184
00:09:16,480 --> 00:09:19,740
Well, next up is a blog post over on the Intercom blog called

185
00:09:19,740 --> 00:09:23,770
Why Cards are the Future of the Web.

186
00:09:23,770 --> 00:09:25,430
[Jason] Bold.

187
00:09:25,430 --> 00:09:27,990
[Nick] They describe cards as—

188
00:09:27,990 --> 00:09:30,650
I have no idea what's bold about that.

189
00:09:30,650 --> 00:09:32,010
[laughter]

190
00:09:32,010 --> 00:09:34,000
[Jason] The future is bold.

191
00:09:34,000 --> 00:09:36,050
[Nick] That's true. It's difficult to predict the future,

192
00:09:36,050 --> 00:09:38,230
so that is a little bit bold.

193
00:09:38,230 --> 00:09:43,510
They describe cards as basically a way to segment content

194
00:09:43,510 --> 00:09:46,030
from third-party services

195
00:09:46,030 --> 00:09:51,110
and basically just kind of aggregate it into a single feed.

196
00:09:51,110 --> 00:09:54,450
They're saying that Twitter is moving to cards,

197
00:09:54,450 --> 00:09:56,360
Goggle is moving to cards,

198
00:09:56,360 --> 00:09:58,130
everyone is moving to cards.

199
00:09:58,130 --> 00:10:02,610
Basically it's just a great way to give—you know—

200
00:10:02,610 --> 00:10:06,330
small pieces of information at a time

201
00:10:06,330 --> 00:10:08,970
and kind of aggregate them all together.

202
00:10:08,970 --> 00:10:11,420
It's just kind of like a design pattern.

203
00:10:11,420 --> 00:10:14,430
But I think it's an interesting concept that—

204
00:10:14,430 --> 00:10:17,900
they're saying that the web is kind of moving away

205
00:10:17,900 --> 00:10:21,530
from these single pages or these single documents where—

206
00:10:21,530 --> 00:10:26,460
you know—say you'd have to go to a single page just to see a tweet.

207
00:10:26,460 --> 00:10:28,330
You know—nobody—

208
00:10:28,330 --> 00:10:30,000
[Jason] Wow, what is this, 1996?

209
00:10:30,000 --> 00:10:32,540
[Nick] Right. Nobody every like hardly does that.

210
00:10:32,540 --> 00:10:35,410
[Jason] Right. [Nick] They just look at tweets in a stream.

211
00:10:35,410 --> 00:10:37,540
And they're saying—you know—it would be cool if you could

212
00:10:37,540 --> 00:10:40,940
take data from other resources and kind of aggregate that together.

213
00:10:40,940 --> 00:10:44,360
Google is doing this with Google Now.

214
00:10:44,360 --> 00:10:48,090
They're kind of taking information from disparate sources.

215
00:10:48,090 --> 00:10:52,310
So rather than—you know—providing you with like a Google search or something,

216
00:10:52,310 --> 00:10:54,500
they say like here's what the weather is like today,

217
00:10:54,500 --> 00:10:56,410
here's what traffic is like, here's—you know—

218
00:10:56,410 --> 00:10:58,610
all of these different things that you want to know about,

219
00:10:58,610 --> 00:11:02,270
and it's contextualized and personalized to you.

220
00:11:02,270 --> 00:11:04,050
An interesting post.

221
00:11:04,050 --> 00:11:06,000
I definitely agree.

222
00:11:06,000 --> 00:11:10,250
I mean—I think—I think the web is kind of moving in that direction,

223
00:11:10,250 --> 00:11:15,020
so I guess it highlights why it's important to—you know—

224
00:11:15,020 --> 00:11:19,850
have an API so people can get out your data and actually use it effectively.

225
00:11:19,850 --> 00:11:21,670
[Jason] I'm not entirely sure I agree with it.

226
00:11:21,670 --> 00:11:23,010
I don't know if that's the future.

227
00:11:23,010 --> 00:11:25,630
I'm not really sure that that's in the—in the cards.

228
00:11:25,630 --> 00:11:31,220
Next up we have a project called ChocolateChip-UI.

229
00:11:31,220 --> 00:11:34,350
This is a mobile first web framework

230
00:11:34,350 --> 00:11:36,650
with a little tiny bit of a twist.

231
00:11:36,650 --> 00:11:39,650
It includes HTML, CSS, and JavaScript.

232
00:11:39,650 --> 00:11:44,660
The nice thing is it gives you a native look for your web applications.

233
00:11:44,660 --> 00:11:47,960
So you can see it looks a lot like Internet Explorer 7,

234
00:11:47,960 --> 00:11:50,610
and it's really easy to get started.

235
00:11:50,610 --> 00:11:52,150
But here's what you get.

236
00:11:52,150 --> 00:11:54,210
You get a bunch of different controls.

237
00:11:54,210 --> 00:11:57,300
So here's a segmented control, here's what a select list looks like,

238
00:11:57,300 --> 00:12:00,900
switches, ranges, deletable list—

239
00:12:00,900 --> 00:12:04,050
so all the things that you would expect from a mobile framework.

240
00:12:04,050 --> 00:12:06,540
[Nick] You know—this actually looks a lot more like IOS 7

241
00:12:06,540 --> 00:12:09,060
rather than Internet Explorer 7.

242
00:12:09,060 --> 00:12:11,080
[Jason] Yes—yes it does.

243
00:12:11,080 --> 00:12:13,080
[Nick] Just a little crack in there.

244
00:12:13,080 --> 00:12:16,780
[Jason] But the nice thing about it is there is also themes for Android

245
00:12:16,780 --> 00:12:18,860
so it will look more like a native Android app

246
00:12:18,860 --> 00:12:22,170
or even a Windows mobile app.

247
00:12:22,170 --> 00:12:25,020
So they've really designed this pretty well.

248
00:12:25,020 --> 00:12:29,360
The documentation is very thorough, and it's pretty easy to get stated.

249
00:12:29,360 --> 00:12:31,750
[Nick] And, of course, it's ChocolateChip-UI.

250
00:12:31,750 --> 00:12:33,270
[Jason] so it's delicious.

251
00:12:33,270 --> 00:12:35,560
[Nick] It's also the most delicious framework out there.

252
00:12:35,560 --> 00:12:37,340
Anyway, who are you on Twitter?

253
00:12:37,340 --> 00:12:39,420
[Jason] I am @jseifer, who are you?

254
00:12:39,420 --> 00:12:41,020
[Nick] I am @nickrp.

255
00:12:41,020 --> 00:12:43,380
[Jason] For more information on anything we talked about check out our show notes.

256
00:12:43,380 --> 00:12:45,990
You can get to them at youtube.com/gotreehouse.

257
00:12:45,990 --> 00:12:48,620
Also search for us in iTunes at The Treehouse Show

258
00:12:48,620 --> 00:12:50,370
and leave us a nice review.

259
00:12:50,370 --> 00:12:52,920
And, of course, if you would like to see more videos like this one about

260
00:12:52,920 --> 00:12:57,030
web design, web development, business, mobile, and so much more,

261
00:12:57,030 --> 00:13:00,500
be sure to check us out at teamtreehouse.com.

262
00:13:00,500 --> 00:13:04,460
Thank you so much for watching, and we'll see you next week.

263
00:13:04,460 --> 00:13:11,000
[treehouse show]