Episode 58: The Main Element, jQuery CLNDR, Keystrokes

[Nick] I'm Nick Pettit. [Jason] I'm Jason Seifer. 0:00 [Nick] And you're watching the Treehouse Show, your weekly dose of Internet 0:02 where we talk about all tings web design, web development, and more. 0:04 [Jason] In this episode we'll be talking about the main element, 0:07 jQuery calendaring, keystrokes, and more. 0:10 [Nick] Let's check it out. 0:14 [treehouse show] 0:16 First up over on the HTML5 Doctor blog 0:20 there is a cool blog post about the main element. 0:24 You're probably familiar with the header element and the footer element— 0:27 not to be confused with the head element. 0:32 It's slightly different than the header element. 0:34 But the main element is a compliment to a header and footer. 0:36 So if we scroll down here, you can see some example code. 0:40 Whereas before you might create your body 0:45 and then you'd have the header, 0:49 some div in the middle with all of your main content, 0:51 and then a footer down at the bottom, 0:54 well now you can go ahead and use the main element in between the header and footer. 0:57 This, of course, is a new addition to a W3C specification, 1:04 so it's not supported in every browser just yet, 1:09 but you can probably go ahead and use like 1:13 html5shiv or Modernizr or something like that 1:16 to go ahead and actually get it into your document. 1:21 They list one other tip here— 1:26 you want to make sure that it is displayed as a block level element 1:28 just in case browsers don't support it just yet. 1:31 But—pretty cool. 1:34 It adds a little bit more semantic value to your pages 1:36 rather than just using div elements for everything. 1:40 [Jason] You know—it makes a lot of sense when you put it in the context of— 1:42 you know—we've got the header element and the footer element, 1:45 how did we leave out the main element? 1:47 [Nick] Exactly. [Jason] It just seems like an oversight 1:49 now that—now that we have it. 1:51 [Nick] It's the stuff between the header and footer sandwich. 1:53 [Jason] Next up we have a project called Hand.js. 1:55 This is a very interesting library that unifies all the different possible pointers. 1:58 So it will unify mouse events, pointer events, and touch events. 2:03 It's a polyfill. 2:09 It does it transparently pretty much for you. 2:11 It works on IE9 and up, Chrome, Firefox, Opera, and Safari. 2:13 So there's actually a good blog post about it 2:18 showing what you can do. 2:21 So now you'll notice my pointer is in this box here, 2:23 and it's just keeping track of what's going on, 2:27 which is me—you know—moving this around in a circle here. 2:29 And so what that code is doing— 2:32 that will work whether I'm using a mouse, a touch input device, or a pen. 2:34 And in order to track all that, 2:39 you only need to use pointer events. 2:41 So this is kind of a first step in a unification of all of these different possible— 2:44 you know—pointer or touch events. 2:50 I think it's a great idea 2:52 and a really great first step. 2:54 So go ahead and check that out—Hand.js. 2:56 [Nick] Thanks. That's really handy, Jason. 2:58 Thanks for the pointers. 3:00 I'm glad that we're keeping in touch with the times. 3:02 [laughter] 3:07 All right, next up is— 3:09 [Jason] I really got to hand it to you on that one. 3:11 [Nick] Next up is a cool blog post— 3:13 [Jason] Don't you go pointing that finger at me. 3:16 [laughter] 3:18 [Nick] Next up is a really cool— [Jason]You nailed it, get it? 3:21 [Nick] Blog post called Height Equals Width with Pure CSS. 3:22 We will move on here, I promise. [Jason] All right. 3:27 [Nick] Basically— [Jason] I don't want to leave you hangnailing. 3:30 [Nick] It allows you to maintain the aspect ratio of images when they get resized. 3:33 Now traditionally you had to do this with JavaScript, 3:39 but they're saying in this post that it feels kind of ugly 3:43 to have to recalculate the height of an element in JavaScript. 3:47 So the tip that they use is actually 4 years old. 3:52 It was posted onto A List Apart. 3:56 And then there's a followup on Stack Overflow a little while after. 4:00 And, I guess, it just kind of got lost 4:05 because I've never seen this before. 4:07 Basically you use 2 elements. 4:09 One has the class box and the other has the class content. 4:11 And the one with content has an aspect ratio of 1:1, 4:14 so it's square. 4:19 The box you apply some CSS to to adjust the desired width, 4:21 and then if you apply a position absolute to the content 4:27 and say zero for the top, left, bottom, and right, 4:32 it will actually fill the element. 4:35 So this will maintain the aspect ratio. 4:37 It's a little bit crazy and kind of complicated to explain, 4:41 but this blog post does a really good job of articulating it. 4:46 And they also have some other aspect ratios here 4:49 such as 2_1, 1_2, 4_3, and 16_9 4:52 with the appropriate padding that you'll need to implement it. 4:57 So pretty cool stuff. 5:00 It actually kind of reminds me of this technique 5:02 that I saw on CodePen not too long ago called absolutes— 5:05 not absolute positioning. 5:10 It was like this technique that allowed you to center something 5:12 vertically and horizontally at the same time. 5:14 It used that same top, left, bottom, right set to zero. 5:18 I think you could actually do that with this, 5:21 you'd just have to set the margins to auto on all sides. 5:23 But pretty cool. 5:26 [Jason] Yeah, that's a really good tip. 5:28 Really got to hand it to them. 5:30 Next up we have a blog post on Get Tips for Beginners to Open Source Contributions. 5:32 Now this is a blog post by a guy named Mark Berger, 5:37 and it can be a little intimidating 5:40 if you're new to contributing to Open Source 5:42 and—you know—just how to work with git 5:44 and how to keep everything in sync. 5:46 [Nick] Or if you're a vegetarian and—you know—you're afraid of burgers like me. 5:48 [Jason] You never told me about that, Nick. 5:52 [Nick] I am a vegetarian. 5:55 [Jason] No, your fear of burgers. 5:57 [Nick] Oh, yeah. It's pretty scary. 5:59 [Jason] We should talk about this sometime—maybe after the show. 6:01 [Nick] Maybe. 6:03 [Jason] So anyway, he goes into how to clone with SSH. 6:05 He also says to never work on the master branch. 6:08 Usually the project maintainers are going to be the ones 6:11 that are committing to the master branch 6:14 because that's where most of the development is kept. 6:16 So what you want to do generally is work on your own branch 6:18 and integrate the upstream changes, 6:22 which he shows you how to do. 6:24 Update the master to reflect mainstream 6:26 because there is going to be constant commits to this repository. 6:29 So you want to make sure that your work is in sync— 6:32 not the '90s band, but in sync with the upstream master. 6:35 And finally he tells you how to fix commits 6:40 if you have a spelling error or something like that. 6:42 So anyway, some really great tips in here, 6:44 and you can find the link to that in the show notes, 6:47 which you can get to at youtube.com/gotreehouse 6:49 or on iTunes search for us at The Treehouse Show. 6:51 [Nick] Very cool stuff. 6:55 Well, next up is CLNDR.js. 6:57 It's spelled C-L-N-D-R. 7:00 So perhaps it's pronounced CLNDR.js. 7:02 [Jason] It's hard to pronounce things without vowels. [Nick] Yeah, it is. 7:06 It is a jQuery calendar plugin—just as the name implies. 7:08 And it looks like they have a couple of events on this calendar— 7:13 Persian Kitten Auction, Cat Frisbee, Kitten Demonstrations. 7:16 So a lot of cat-related activities on this particular calendar. 7:20 If we go ahead and scroll down, 7:23 it will tell you that it's a jQuery plugin for creating calendars, 7:26 and you do this using underscore.js templates. 7:30 Of course, underscore.js is a templating tool. 7:34 It does a couple of other things, 7:39 but you can create HTML templates using it. 7:41 And then you use CLDR.js to take the data from the calendar 7:43 and plug it into your template, 7:48 and you'll get something like this. 7:51 So if we go ahead and scroll through here, 7:53 we can go through the different months. 7:55 And if we click on a particular highlighted day, 7:57 we can see that there are events for that day. 7:59 So pretty cool stuff. 8:02 That took me back to the homepage. 8:04 But yeah, it's a really nice calendar plugin, 8:06 so be sure to check it out. 8:10 [Jason] Pretty cool—very semantic. 8:12 Next up we have a library called Mousetrap. 8:14 This is a library that makes intersecting key presses in JavaScript very, very easy. 8:16 Normally when you want to handle a key press in JavaScript 8:22 you have to look up the number of the key. 8:24 This lets you just write it out using a string. 8:27 It also supports a lot of different functionality here. 8:30 You can see they've got a couple of bindings upfront. 8:33 So if I press the number 4 it highlights that line. 8:36 X does that. 8:39 And you get just a lot of different options in here. 8:41 You use this bind function, 8:44 and then you put the keystrokes that you want to use, 8:46 and then anything inside will run when that particular command is invoked. 8:49 Now it's pretty easy to use and has a lot of browser support. 8:54 The nice thing about this library 8:59 compared to some of the other libraries that do the same thing 9:01 is that you can do sequences of keystrokes 9:03 and also intercept multiple different keys. 9:07 So a really great library. 9:10 I'm loving it—check it out. 9:12 [Nick] Very cool stuff. 9:14 Well, next up is a blog post over on the Intercom blog called 9:16 Why Cards are the Future of the Web. 9:19 [Jason] Bold. 9:23 [Nick] They describe cards as— 9:25 I have no idea what's bold about that. 9:27 [laughter] 9:30 [Jason] The future is bold. 9:32 [Nick] That's true. It's difficult to predict the future, 9:34 so that is a little bit bold. 9:36 They describe cards as basically a way to segment content 9:38 from third-party services 9:43 and basically just kind of aggregate it into a single feed. 9:46 They're saying that Twitter is moving to cards, 9:51 Goggle is moving to cards, 9:54 everyone is moving to cards. 9:56 Basically it's just a great way to give—you know— 9:58 small pieces of information at a time 10:02 and kind of aggregate them all together. 10:06 It's just kind of like a design pattern. 10:08 But I think it's an interesting concept that— 10:11 they're saying that the web is kind of moving away 10:14 from these single pages or these single documents where— 10:17 you know—say you'd have to go to a single page just to see a tweet. 10:21 You know—nobody— 10:26 [Jason] Wow, what is this, 1996? 10:28 [Nick] Right. Nobody every like hardly does that. 10:30 [Jason] Right. [Nick] They just look at tweets in a stream. 10:32 And they're saying—you know—it would be cool if you could 10:35 take data from other resources and kind of aggregate that together. 10:37 Google is doing this with Google Now. 10:40 They're kind of taking information from disparate sources. 10:44 So rather than—you know—providing you with like a Google search or something, 10:48 they say like here's what the weather is like today, 10:52 here's what traffic is like, here's—you know— 10:54 all of these different things that you want to know about, 10:56 and it's contextualized and personalized to you. 10:58 An interesting post. 11:02 I definitely agree. 11:04 I mean—I think—I think the web is kind of moving in that direction, 11:06 so I guess it highlights why it's important to—you know— 11:10 have an API so people can get out your data and actually use it effectively. 11:15 [Jason] I'm not entirely sure I agree with it. 11:19 I don't know if that's the future. 11:21 I'm not really sure that that's in the—in the cards. 11:23 Next up we have a project called ChocolateChip-UI. 11:25 This is a mobile first web framework 11:31 with a little tiny bit of a twist. 11:34 It includes HTML, CSS, and JavaScript. 11:36 The nice thing is it gives you a native look for your web applications. 11:39 So you can see it looks a lot like Internet Explorer 7, 11:44 and it's really easy to get started. 11:47 But here's what you get. 11:50 You get a bunch of different controls. 11:52 So here's a segmented control, here's what a select list looks like, 11:54 switches, ranges, deletable list— 11:57 so all the things that you would expect from a mobile framework. 12:00 [Nick] You know—this actually looks a lot more like IOS 7 12:04 rather than Internet Explorer 7. 12:06 [Jason] Yes—yes it does. 12:09 [Nick] Just a little crack in there. 12:11 [Jason] But the nice thing about it is there is also themes for Android 12:13 so it will look more like a native Android app 12:16 or even a Windows mobile app. 12:18 So they've really designed this pretty well. 12:22 The documentation is very thorough, and it's pretty easy to get stated. 12:25 [Nick] And, of course, it's ChocolateChip-UI. 12:29 [Jason] so it's delicious. 12:31 [Nick] It's also the most delicious framework out there. 12:33 Anyway, who are you on Twitter? 12:35 [Jason] I am @jseifer, who are you? 12:37 [Nick] I am @nickrp. 12:39 [Jason] For more information on anything we talked about check out our show notes. 12:41 You can get to them at youtube.com/gotreehouse. 12:43 Also search for us in iTunes at The Treehouse Show 12:45 and leave us a nice review. 12:48 And, of course, if you would like to see more videos like this one about 12:50 web design, web development, business, mobile, and so much more, 12:52 be sure to check us out at teamtreehouse.com. 12:57 Thank you so much for watching, and we'll see you next week. 13:00 [treehouse show] 13:04

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

Sign up