Episode 37: Sublime Text 2 and Login Forms

I'm Nick Pettit. >>I'm Jason Seifer. >>And you're watching the Treehouse Show, 0:01 your weekly dose of Internets, where we talk about all things web design, 0:05 web development, and more. 0:08 >>In this episode, we'll be talking about HTML5 and CSS3 login forms, 0:10 setting up Sublime Text 2, and much, much more. 0:14 >>Let's check it out! 0:17 [? music ?] [The Treehouse Show] 0:19 First up is this really cool blog post 0:25 over on Codrops 0:28 >>I thought it was "cod-rops." >>Or cough drops? 0:30 I don't know. It's basically a login and registration form 0:33 built in HTML5 and CSS3. 0:38 So let's go ahead and take a look at the demo here, 0:41 and here you can see there is a login form. 0:45 So we can go ahead and type in an email address or user name, 0:49 and then we can go ahead and type in a password, 0:54 and then I can say 0:57 login—oh, actually, I don't have an account. 1:00 So I need to go ahead and register. 1:04 So I'll hit Join Us 1:06 and there you can see it just switches right over 1:08 to the signup form, and I can go ahead and type in 1:12 all of my information and sign up. 1:16 So— >>There must be a lot of JavaScript going on back there. 1:19 >>You would think that, Jason — >>That is what I would think. 1:23 >>You can actually switch back and forth between these 2 forms, 1:25 and you would think that it's actually JavaScript driving that. 1:28 Of course, there are other bits of animation here. 1:33 So there's 3 different demos. 1:38 But in fact, it's actually not JavaScript driving that at all. 1:40 >>What? >>So we can go ahead and go back to the Codrops article, 1:45 Right here it says that it's actually the pseudo class Target in CSS3 that is driving all of this. 1:52 >>Wow. >>So, basically, it's not using JavaScript at all. 2:01 It's actually being driven off of just CSS3, animations, etc., and it's pretty cool. 2:05 It's a little bit advanced, so I recommend you go and check out the article, 2:13 and just break it down—see how it works; it's pretty cool. 2:17 >>That's really amazing that you can do that without using any JavaScript. 2:20 >>Yep, definitely a cool technique. 2:23 >>So next up we have a project called xy.CSS. 2:26 Now this is extremely interesting. 2:30 This is a percentage-based, 2:33 liquid layout, columnar layout, design matrix. 2:35 >>I understood some of those words. >>Yeah, a lot of words there. 2:40 What do they mean? Well, let's say you have a web page, right, 2:42 and you want columns on it—maybe in a grid. 2:45 If you're designing it with a percentage-based layout, 2:48 well, that's going to be pretty difficult to do, 2:51 you know, to keep those columns centered. 2:53 So what this does is, it actually gives you a responsive way 2:55 of keeping 2 columns on the page, say, 2:59 25% and 75%, and as you resize your browser or go to different sizes, 3:01 that ratio will be maintained. 3:05 >>That's pretty amazing. >>Yeah, it is, so and 3:08 it's even done semantically with HTML5 and the different tags. 3:10 So it gives you a certain number of grid columns, 3:15 I believe it's 12 different grids, 3:18 and then if you want 1 column up to 9 columns, 3:21 you use the grid_ and then the number of columns that you want. 3:23 It is extremely easy to use, 3:27 and there's just a ton of different options. 3:30 You see a little demo here. 3:33 Click on the basic example. 3:35 You can see this layout right here. 3:37 If I were to resize the browser, which I'm not right now— 3:39 not for any particular reason, I'm just not— 3:42 it would actually keep the ratios when you resized it. 3:45 Anyway, great project, xy.CSS. 3:48 >>Next up is this really cool post 3:50 over on the David Walsh blog. 3:54 He's a friend of the show. 3:56 If we go ahead and scroll down the post here, 3:59 we can take a look at CSS @supports, which is basically a new CSS directive 4:02 that, I believe, is available in Firefox, Chrome, and Opera right now, 4:09 in the nightly builds—so this isn't actually available in the normal shipping builds 4:15 that you would find on the websites, you actually have to go and get the nightly builds, 4:20 but it's this new CSS directive that allows you to determine 4:24 whether or not the browser supports a certain property and a certain value. 4:30 So you first go ahead and check for that and then, if it does 4:35 support those particular properties and values, you can apply styling. 4:40 So this is very similar to the way the media directive, or media query would actually work 4:44 because you can go ahead and conditionally apply CSS based on, well, certain conditions. 4:52 Basically, you can detect whether or not the browser supports those features 4:58 and then only apply them if the browser actually indeed does support those features. 5:03 So, pretty cool, I mean it's much better than doing feature detection 5:08 or browser sniffing and trying to figure that stuff out 5:12 with all sorts of JavaScript beforehand, because you can just 5:16 go ahead and do it right in the CSS. 5:20 So that's cool, because you don't have to change your code 5:22 as browsers support new things; you can just basically say 5:25 if this browser supports these particular properties, 5:29 go ahead and apply this new property, now that it works in this browser. 5:34 >>Yeah, make the text blink. >>Yeah. >>Add a marquee. 5:39 >>Of course, I mean that's what we all want to do. 5:42 >>On a serious note, though, that does seem like a much cleaner way 5:44 to do it than we have right now. >>Very cool. 5:48 >>So next up, we have a blog post from Alex MacCaw on setting up Sublime Text 2. 5:51 Sublime Text 2 is a text editor that seems to be all the rage these days. 5:57 A lot of people are switching to that, and the reason being it's a great editor. 6:01 It's what we use on Treehouse for most of our screencasts. 6:05 Anyway, Alex walks you through how to set up Sublime Text 2. 6:08 He doesn't walk you through absolutely everything, 6:12 but just some of his preferences and options. 6:15 First thing that you're going to want to do is install Package Control for Sublime Text. 6:17 Package Control is, basically, a package management system 6:22 that lets you install plugins and themes right inside of Sublime Text, 6:26 without leaving it or messing around with downloads and things like that. 6:30 From there, he walks you installing some themes, how to extend the editor 6:33 with sidebar enhancements, and then the whole tabs-versus-spaces debate— 6:39 I'm not going to tell you what the right answer is, because there is no right answer— 6:43 anyway, goes through; this is a really nice introduction for somebody 6:47 who is setting up Sublime Text for the first time and maybe hasn't done it yet. 6:51 Yeah, great text editor. >>Very cool stuff. 6:55 Next up— >>Wait, wait— >>Sorry— >>I'm going to dock you, Nick. >>You may. 6:58 >>We're going to do something new this week. I know that we're a tech show, 7:02 but very briefly we're going to take a look at the weather for the week. >>Let's take a look. 7:04 [5-Day Seifercast] [? music ?] 7:11 Well, it looks like we have a very handsome week ahead. 7:16 >>Umm, indeed. Next up is Metrize Icons. 7:19 So if you're familiar with Microsoft's Metro style, 7:25 >>which you should be because we talked about it here on the show before— 7:29 >>We have talked about it on the show, so if you'd been watching the show. 7:32 Basically, you would know about that, 7:35 basically it's just an icon set for the Metro style. 7:37 So if you're designing Metro-style apps for, say, a Windows phone 7:41 or maybe you're designing a web app that is targeting Windows phones, 7:47 then this is a really cool icon set that you'll want to check out. 7:53 It has all of the things that you would typically expect—your social icons, 7:58 for YouTube and Twitter, and basically anything else 8:02 you could want out of a decent icon set. 8:07 >>There's no Treehouse icon. >>No, there's not. 8:10 I thought that was a little bit weird, but— 8:12 >>I'm not docking any points, but I might not mention it again. 8:15 >>But in all seriousness, it is a pretty nice icon set. 8:18 Not a whole lot to say about it other than it's really nice. 8:23 >>It would go well with the flat UI theme that we talked about on last week's show. 8:26 >>Oh, I see the narratives kind of weaving together here. 8:31 >>Full circle, everybody, full circle—Treehouse Show, that's our motto. 8:34 Next up, we have a project called Magic Suggest. 8:37 This is an auto-suggest combination bootstrap theme using jQuery. 8:40 What do all those words mean? 8:45 It means this: If you've got a text box right here and you want 8:47 to find something—just type in something right here— 8:50 Boom! Click it, right in the box there. 8:53 And you get a little tab where you talk about— 8:57 and you can have as many different options as are in the dropdown there. 8:59 As you would expect, since it's built on jQuery, very extensible, 9:03 very easy to use and drop right into an existing site. 9:07 >>Very cool. Well, next up is this really amazing article about CSS masking. 9:11 Now I will warn you, this is a little bit more advanced than we have time 9:19 to really dig into here on the show, so I do recommend that you check out the article, 9:23 which you can check out in our Show Notes on YouTube or iTunes. 9:27 However, let's take a look really quick. 9:32 So basically you can go ahead and mask various images or, say, SVGs 9:35 inside of your CSS, using the clip-path property. 9:44 >>Yeah, I think we've all been in the situation where we have an image 9:48 on our web page, and we think it would be great if I could add 9:51 a bunch of slices to it. 9:55 Maybe make it circular—like a circular mask. 9:57 >>I have actually been in that situation, and— 10:01 >>We've all been there; it's nothing to be ashamed of. 10:05 >>Yeah, and this would have been really handy. 10:07 So basically what they're suggesting is instead of just including 10:10 that type of transparency in a PNG image, you would 10:14 actually include it as a mask. 10:18 Now why would you do this, why wouldn't you just use a PNG? 10:21 Well, if we're looking at an image like the one displayed here, 10:25 it's actually a really complicated JPEG image 10:29 which would not compress nicely at all in, say, a 24-bit PNG. 10:32 Now at this size it might, but if it were much larger, it would be 10:37 much more convenient to just go ahead and apply a clip-mask like we've done here. 10:42 So that can actually save a lot of bandwidth by using a JPEG and then applying 10:48 a mask on top of it. 10:54 You can, of course, apply a mask to other page elements. 10:56 So here is a scrolling list that has sort of a jagged edge on the top and bottom, 10:59 and you can even animate these clip-paths, so if I go ahead and hover over this, 11:06 we have this really novel and annoying animation— 11:11 >>This is what the web has been missing. 11:15 >>Yeah, I think so, I think this plus blink and marquee 11:17 is really what we've been missing. 11:21 >>I think that we're ushering in a new era of banner ads. 11:23 >>It's very possible. However, I'm sure that there is actually 11:26 a real legitimate application for this. 11:30 I'm sure there's actually something really cool that you can do with this. 11:33 Like with any new piece of technology, it's always kind of difficult 11:36 to see how you might apply that in the real world, but there's 11:40 plenty to discover there, so definitely check out the article 11:44 and see how you might want to use it on your site. 11:48 >>So, I think that's all we have for this week. 11:50 Nick, are you on Twitter? >>I am @nickrp. >>And I am @jseifer. 11:52 For more background on anything we talked about, 11:57 you can check out the Show Notes at youtube.com/gotreehouse. 11:59 We are also in iTunes. Just search for the Treehouse Show. 12:02 >>And, of course, if you'd like to see more videos like this one, 12:06 be sure to check us out at teamtreehouse.com. 12:09 Thanks so much for watching, and we'll see you next week. 12:13 [? music ?] [The Treehouse Show] 12:15

You need to sign up for Treehouse in order to set up Workspace

Sign up