1
00:00:01,490 --> 00:00:05,410
I'm Nick Pettit. >>I'm Jason Seifer. >>And you're watching the Treehouse Show,

2
00:00:05,410 --> 00:00:08,380
your weekly dose of Internets, where we talk about all things web design,

3
00:00:08,380 --> 00:00:10,510
web development, and more.

4
00:00:10,510 --> 00:00:14,640
>>In this episode, we'll be talking about HTML5 and CSS3 login forms,

5
00:00:14,640 --> 00:00:17,550
setting up Sublime Text 2, and much, much more.

6
00:00:17,550 --> 00:00:19,730
>>Let's check it out!

7
00:00:19,730 --> 00:00:25,040
[? music ?] [The Treehouse Show]

8
00:00:25,040 --> 00:00:28,030
First up is this really cool blog post

9
00:00:28,030 --> 00:00:30,140
over on Codrops

10
00:00:30,140 --> 00:00:33,390
>>I thought it was "cod-rops." >>Or cough drops?

11
00:00:33,390 --> 00:00:38,760
I don't know. It's basically a login and registration form

12
00:00:38,760 --> 00:00:41,590
built in HTML5 and CSS3.

13
00:00:41,590 --> 00:00:45,580
So let's go ahead and take a look at the demo here,

14
00:00:45,580 --> 00:00:49,490
and here you can see there is a login form.

15
00:00:49,490 --> 00:00:54,610
So we can go ahead and type in an email address or user name,

16
00:00:54,610 --> 00:00:57,720
and then we can go ahead and type in a password,

17
00:00:57,720 --> 00:01:00,330
and then I can say

18
00:01:00,330 --> 00:01:04,110
login—oh, actually, I don't have an account.

19
00:01:04,110 --> 00:01:06,580
So I need to go ahead and register.

20
00:01:06,580 --> 00:01:08,870
So I'll hit Join Us

21
00:01:08,870 --> 00:01:12,140
and there you can see it just switches right over

22
00:01:12,140 --> 00:01:16,720
to the signup form, and I can go ahead and type in 

23
00:01:16,720 --> 00:01:19,670
all of my information and sign up.

24
00:01:19,670 --> 00:01:23,200
So— >>There must be a lot of JavaScript going on back there.

25
00:01:23,200 --> 00:01:25,850
>>You would think that, Jason — >>That is what I would think.

26
00:01:25,850 --> 00:01:28,460
>>You can actually switch back and forth between these 2 forms,

27
00:01:28,460 --> 00:01:33,031
and you would think that it's actually JavaScript driving that.

28
00:01:33,310 --> 00:01:38,450
Of course, there are other bits of animation here.

29
00:01:38,450 --> 00:01:40,450
So there's 3 different demos.

30
00:01:40,450 --> 00:01:45,730
But in fact, it's actually not JavaScript driving that at all.

31
00:01:45,730 --> 00:01:52,740
>>What? >>So we can go ahead and go back to the Codrops article,

32
00:01:52,740 --> 00:02:01,350
Right here it says that it's actually the pseudo class Target in CSS3 that is driving all of this.

33
00:02:01,350 --> 00:02:05,370
>>Wow. >>So, basically, it's not using JavaScript at all. 

34
00:02:05,370 --> 00:02:13,610
It's actually being driven off of just CSS3, animations, etc., and it's pretty cool.

35
00:02:13,610 --> 00:02:17,870
It's a little bit advanced, so I recommend you go and check out the article,

36
00:02:17,870 --> 00:02:20,120
and just break it down—see how it works; it's pretty cool.

37
00:02:20,120 --> 00:02:23,450
>>That's really amazing that you can do that without using any JavaScript.

38
00:02:23,450 --> 00:02:26,810
>>Yep, definitely a cool technique.

39
00:02:26,810 --> 00:02:30,910
>>So next up we have a project called xy.CSS.

40
00:02:30,910 --> 00:02:33,730
Now this is extremely interesting.

41
00:02:33,730 --> 00:02:35,810
This is a percentage-based,

42
00:02:35,810 --> 00:02:40,370
liquid layout, columnar layout, design matrix.

43
00:02:40,370 --> 00:02:42,760
>>I understood some of those words. >>Yeah, a lot of words there.

44
00:02:42,760 --> 00:02:45,760
What do they mean? Well, let's say you have a web page, right,

45
00:02:45,760 --> 00:02:48,010
and you want columns on it—maybe in a grid.

46
00:02:48,010 --> 00:02:51,110
If you're designing it with a percentage-based layout,

47
00:02:51,110 --> 00:02:53,590
well, that's going to be pretty difficult to do,

48
00:02:53,590 --> 00:02:55,800
you know, to keep those columns centered.

49
00:02:55,800 --> 00:02:59,070
So what this does is, it actually gives you a responsive way

50
00:02:59,070 --> 00:03:01,430
of keeping 2 columns on the page, say,

51
00:03:01,430 --> 00:03:05,850
25% and 75%, and as you resize your browser or go to different sizes,

52
00:03:05,850 --> 00:03:08,270
that ratio will be maintained.

53
00:03:08,270 --> 00:03:10,440
>>That's pretty amazing. >>Yeah, it is, so and

54
00:03:10,440 --> 00:03:15,250
it's even done semantically with HTML5 and the different tags.

55
00:03:15,250 --> 00:03:18,560
So it gives you a certain number of grid columns,

56
00:03:18,560 --> 00:03:21,100
I believe it's 12 different grids,

57
00:03:21,100 --> 00:03:23,700
and then if you want 1 column up to 9 columns,

58
00:03:23,700 --> 00:03:27,750
you use the grid_ and then the number of columns that you want.

59
00:03:27,750 --> 00:03:30,300
It is extremely easy to use,

60
00:03:30,300 --> 00:03:33,270
and there's just a ton of different options.

61
00:03:33,270 --> 00:03:35,530
You see a little demo here. 

62
00:03:35,530 --> 00:03:37,610
Click on the basic example.

63
00:03:37,610 --> 00:03:39,850
You can see this layout right here.

64
00:03:39,850 --> 00:03:42,850
If I were to resize the browser, which I'm not right now—

65
00:03:42,850 --> 00:03:45,120
not for any particular reason, I'm just not—

66
00:03:45,120 --> 00:03:48,740
it would actually keep the ratios when you resized it.

67
00:03:48,740 --> 00:03:50,950
Anyway, great project, xy.CSS.

68
00:03:50,950 --> 00:03:54,500
>>Next up is this really cool post

69
00:03:54,500 --> 00:03:56,990
over on the David Walsh blog.

70
00:03:56,990 --> 00:03:59,400
He's a friend of the show.

71
00:03:59,400 --> 00:04:02,020
If we go ahead and scroll down the post here,

72
00:04:02,020 --> 00:04:09,860
we can take a look at CSS @supports, which is basically a new CSS directive

73
00:04:09,860 --> 00:04:15,590
that, I believe, is available in Firefox, Chrome, and Opera right now, 

74
00:04:15,590 --> 00:04:20,980
in the nightly builds—so this isn't actually available in the normal shipping builds

75
00:04:20,980 --> 00:04:24,150
that you would find on the websites, you actually have to go and get the nightly builds,

76
00:04:24,150 --> 00:04:30,380
but it's this new CSS directive that allows you to determine

77
00:04:30,380 --> 00:04:35,380
whether or not the browser supports a certain property and a certain value.

78
00:04:35,380 --> 00:04:40,550
So you first go ahead and check for that and then, if it does

79
00:04:40,550 --> 00:04:44,910
support those particular properties and values, you can apply styling.

80
00:04:44,910 --> 00:04:52,540
So this is very similar to the way the media directive, or media query would actually work

81
00:04:52,540 --> 00:04:58,610
because you can go ahead and conditionally apply CSS based on, well, certain conditions.

82
00:04:58,610 --> 00:05:03,160
Basically, you can detect whether or not the browser supports those features

83
00:05:03,160 --> 00:05:08,130
and then only apply them if the browser actually indeed does support those features.

84
00:05:08,130 --> 00:05:12,810
So, pretty cool, I mean it's much better than doing feature detection

85
00:05:12,810 --> 00:05:16,360
or browser sniffing and trying to figure that stuff out 

86
00:05:16,360 --> 00:05:20,520
with all sorts of JavaScript beforehand, because you can just

87
00:05:20,520 --> 00:05:22,540
go ahead and do it right in the CSS.

88
00:05:22,540 --> 00:05:25,730
So that's cool, because you don't have to change your code

89
00:05:25,730 --> 00:05:29,660
as browsers support new things; you can just basically say

90
00:05:29,660 --> 00:05:34,190
if this browser supports these particular properties,

91
00:05:34,190 --> 00:05:39,470
go ahead and apply this new property, now that it works in this browser.

92
00:05:39,470 --> 00:05:42,370
>>Yeah, make the text blink. >>Yeah. >>Add a marquee.

93
00:05:42,370 --> 00:05:44,980
>>Of course, I mean that's what we all want to do.

94
00:05:44,980 --> 00:05:48,190
>>On a serious note, though, that does seem like a much cleaner way

95
00:05:48,190 --> 00:05:51,120
to do it than we have right now. >>Very cool.

96
00:05:51,120 --> 00:05:57,300
>>So next up, we have a blog post from Alex MacCaw on setting up Sublime Text 2.

97
00:05:57,300 --> 00:06:01,590
Sublime Text 2 is a text editor that seems to be all the rage these days.

98
00:06:01,590 --> 00:06:05,580
A lot of people are switching to that, and the reason being it's a great editor.

99
00:06:05,580 --> 00:06:08,800
It's what we use on Treehouse for most of our screencasts.

100
00:06:08,800 --> 00:06:12,920
Anyway, Alex walks you through how to set up Sublime Text 2.

101
00:06:12,920 --> 00:06:15,070
He doesn't walk you through absolutely everything,

102
00:06:15,070 --> 00:06:17,630
but just some of his preferences and options.

103
00:06:17,630 --> 00:06:22,360
First thing that you're going to want to do is install Package Control for Sublime Text.

104
00:06:22,360 --> 00:06:26,250
Package Control is, basically, a package management system

105
00:06:26,250 --> 00:06:30,350
that lets you install plugins and themes right inside of Sublime Text, 

106
00:06:30,350 --> 00:06:33,940
without leaving it or messing around with downloads and things like that.

107
00:06:33,940 --> 00:06:39,250
From there, he walks you installing some themes, how to extend the editor

108
00:06:39,250 --> 00:06:43,780
with sidebar enhancements, and then the whole tabs-versus-spaces debate—

109
00:06:43,780 --> 00:06:47,470
I'm not going to tell you what the right answer is, because there is no right answer—

110
00:06:47,470 --> 00:06:51,470
anyway, goes through; this is a really nice introduction for somebody

111
00:06:51,470 --> 00:06:55,240
who is setting up Sublime Text for the first time and maybe hasn't done it yet.

112
00:06:55,240 --> 00:06:58,740
Yeah, great text editor. >>Very cool stuff.

113
00:06:58,740 --> 00:07:02,090
Next up— >>Wait, wait— >>Sorry— >>I'm going to dock you, Nick. >>You may.

114
00:07:02,090 --> 00:07:04,990
>>We're going to do something new this week. I know that we're a tech show,

115
00:07:04,990 --> 00:07:11,460
but very briefly we're going to take a look at the weather for the week. >>Let's take a look.

116
00:07:11,460 --> 00:07:16,330
[5-Day Seifercast] [? music ?]

117
00:07:16,330 --> 00:07:19,480
Well, it looks like we have a very handsome week ahead.

118
00:07:19,480 --> 00:07:25,010
>>Umm, indeed. Next up is Metrize Icons.

119
00:07:25,010 --> 00:07:29,390
So if you're familiar with Microsoft's Metro style,

120
00:07:29,390 --> 00:07:32,670
>>which you should be because we talked about it here on the show before—

121
00:07:32,670 --> 00:07:35,260
>>We have talked about it on the show, so if you'd been watching the show.

122
00:07:35,260 --> 00:07:37,420
Basically, you would know about that,

123
00:07:37,420 --> 00:07:41,870
basically it's just an icon set for the Metro style.

124
00:07:41,870 --> 00:07:47,010
So if you're designing Metro-style apps for, say, a Windows phone

125
00:07:47,010 --> 00:07:53,480
or maybe you're designing a web app that is targeting Windows phones,

126
00:07:53,480 --> 00:07:58,070
then this is a really cool icon set that you'll want to check out.

127
00:07:58,070 --> 00:08:02,440
It has all of the things that you would typically expect—your social icons,

128
00:08:02,440 --> 00:08:07,110
for YouTube and Twitter, and basically anything else 

129
00:08:07,170 --> 00:08:10,110
you could want out of a decent icon set.

130
00:08:10,110 --> 00:08:12,710
>>There's no Treehouse icon. >>No, there's not.

131
00:08:12,710 --> 00:08:15,460
I thought that was a little bit weird, but—

132
00:08:15,460 --> 00:08:18,720
>>I'm not docking any points, but I might not mention it again.

133
00:08:18,720 --> 00:08:23,360
>>But in all seriousness, it is a pretty nice icon set.

134
00:08:23,360 --> 00:08:26,820
Not a whole lot to say about it other than it's really nice.

135
00:08:26,820 --> 00:08:31,160
>>It would go well with the flat UI theme that we talked about on last week's show.

136
00:08:31,160 --> 00:08:34,650
>>Oh, I see the narratives kind of weaving together here.

137
00:08:34,650 --> 00:08:37,150
>>Full circle, everybody, full circle—Treehouse Show, that's our motto.

138
00:08:37,150 --> 00:08:40,690
Next up, we have a project called Magic Suggest.

139
00:08:40,690 --> 00:08:45,400
This is an auto-suggest combination bootstrap theme using jQuery.

140
00:08:45,400 --> 00:08:47,400
What do all those words mean?

141
00:08:47,400 --> 00:08:50,870
It means this: If you've got a text box right here and you want

142
00:08:50,870 --> 00:08:53,380
to find something—just type in something right here—

143
00:08:53,380 --> 00:08:57,140
Boom! Click it, right in the box there.

144
00:08:57,140 --> 00:08:59,190
And you get a little tab where you talk about—

145
00:08:59,190 --> 00:09:03,610
and you can have as many different options as are in the dropdown there.

146
00:09:03,610 --> 00:09:07,540
As you would expect, since it's built on jQuery, very extensible,

147
00:09:07,540 --> 00:09:11,450
very easy to use and drop right into an existing site.

148
00:09:11,450 --> 00:09:19,370
>>Very cool. Well, next up is this really amazing article about CSS masking.

149
00:09:19,370 --> 00:09:23,400
Now I will warn you, this is a little bit more advanced than we have time

150
00:09:23,400 --> 00:09:27,670
to really dig into here on the show, so I do recommend that you check out the article,

151
00:09:27,670 --> 00:09:32,450
which you can check out in our Show Notes on YouTube or iTunes.

152
00:09:32,450 --> 00:09:35,230
However, let's take a look really quick.

153
00:09:35,230 --> 00:09:44,780
So basically you can go ahead and mask various images or, say, SVGs

154
00:09:44,780 --> 00:09:48,660
inside of your CSS, using the clip-path property.

155
00:09:48,660 --> 00:09:51,580
>>Yeah, I think we've all been in the situation where we have an image

156
00:09:51,580 --> 00:09:55,870
on our web page, and we think it would be great if I could add 

157
00:09:55,870 --> 00:09:57,850
a bunch of slices to it.

158
00:09:57,850 --> 00:10:01,150
Maybe make it circular—like a circular mask.

159
00:10:01,150 --> 00:10:05,320
>>I have actually been in that situation, and—

160
00:10:05,320 --> 00:10:07,280
>>We've all been there; it's nothing to be ashamed of.

161
00:10:07,280 --> 00:10:10,670
>>Yeah, and this would have been really handy.

162
00:10:10,670 --> 00:10:14,650
So basically what they're suggesting is instead of just including

163
00:10:14,650 --> 00:10:18,570
that type of transparency in a PNG image, you would 

164
00:10:18,570 --> 00:10:21,160
actually include it as a mask.

165
00:10:21,160 --> 00:10:25,420
Now why would you do this, why wouldn't you just use a PNG?

166
00:10:25,420 --> 00:10:29,390
Well, if we're looking at an image like the one displayed here,

167
00:10:29,390 --> 00:10:32,590
it's actually a really complicated JPEG image

168
00:10:32,590 --> 00:10:37,380
which would not compress nicely at all in, say, a 24-bit PNG.

169
00:10:37,380 --> 00:10:42,210
Now at this size it might, but if it were much larger, it would be

170
00:10:42,210 --> 00:10:48,330
much more convenient to just go ahead and apply a clip-mask like we've done here.

171
00:10:48,330 --> 00:10:54,100
So that can actually save a lot of bandwidth by using a JPEG and then applying

172
00:10:54,100 --> 00:10:56,470
a mask on top of it.

173
00:10:56,470 --> 00:10:59,680
You can, of course, apply a mask to other page elements.

174
00:10:59,680 --> 00:11:06,000
So here is a scrolling list that has sort of a jagged edge on the top and bottom,

175
00:11:06,000 --> 00:11:11,940
and you can even animate these clip-paths, so if I go ahead and hover over this,

176
00:11:11,940 --> 00:11:15,780
we have this really novel and annoying animation—

177
00:11:15,780 --> 00:11:17,780
>>This is what the web has been missing.

178
00:11:17,780 --> 00:11:21,810
>>Yeah, I think so, I think this plus blink and marquee 

179
00:11:21,810 --> 00:11:23,580
is really what we've been missing.

180
00:11:23,580 --> 00:11:26,380
>>I think that we're ushering in a new era of banner ads.

181
00:11:26,380 --> 00:11:30,790
>>It's very possible. However, I'm sure that there is actually

182
00:11:30,790 --> 00:11:33,530
a real legitimate application for this.

183
00:11:33,530 --> 00:11:36,500
I'm sure there's actually something really cool that you can do with this.

184
00:11:36,500 --> 00:11:40,210
Like with any new piece of technology, it's always kind of difficult

185
00:11:40,210 --> 00:11:44,500
to see how you might apply that in the real world, but there's 

186
00:11:44,500 --> 00:11:48,180
plenty to discover there, so definitely check out the article

187
00:11:48,180 --> 00:11:50,570
and see how you might want to use it on your site.

188
00:11:50,570 --> 00:11:52,750
>>So, I think that's all we have for this week.

189
00:11:52,750 --> 00:11:57,030
Nick, are you on Twitter? >>I am @nickrp. >>And I am @jseifer.

190
00:11:57,030 --> 00:11:59,100
For more background on anything we talked about,

191
00:11:59,100 --> 00:12:02,920
you can check out the Show Notes at youtube.com/gotreehouse.

192
00:12:02,920 --> 00:12:06,000
We are also in iTunes. Just search for the Treehouse Show.

193
00:12:06,000 --> 00:12:09,490
>>And, of course, if you'd like to see more videos like this one,

194
00:12:09,490 --> 00:12:13,650
be sure to check us out at teamtreehouse.com.

195
00:12:13,650 --> 00:12:15,960
Thanks so much for watching, and we'll see you next week.

196
00:12:15,960 --> 00:12:18,960
[? music ?] [The Treehouse Show]