Episode 11: Moment.js and HTML5

[Nick] I'm Nick Pettit. [Jason] I'm Jason Seifer. 0:00 [Nick] And you're watching The Treehouse Show, 0:03 your weekly dose of internets where we talk about all things web design, 0:05 web development, and more. 0:08 [Jason] In this episode we'll be talking about working with dates and times 0:10 in JavaScript, the iPhone 5 website tear-down, 0:13 and a new segment called Web Trends. 0:16 [Nick] Let's check it out! 0:18 [? music playing ?] [The Treehouse Show] 0:20 [Jason] So Nick, how often do you work with dates and times in JavaScript? 0:26 [Nick] All of the time, really. 0:30 [Jason] Well, I've got great news for you. 0:31 There is a library called Moment.js. [http://momentjs.com] 0:32 Now, this is not a brand new library. 0:35 but Moment.js is a library that lets you format, display, 0:37 and manipulate JavaScript dates and times. 0:41 It's got a great API for doing all of the above things. 0:44 Something that can be kind of cumbersome when you're dealing with 0:48 JavaScript dates and times is formatting. 0:52 This is going to give you a bunch of different formatting codes 0:54 to work with the dates and times. 0:57 There's also a plug-in for using strftime with Moment.js. 0:59 Something else that can be a little bit weird when you're working with 1:05 JavaScript dates and times is manipulating them-- 1:08 adding time, subtracting time, and all sorts of things like that. 1:10 Moment.js provides a really great library that's cross-platform 1:13 and helps ease the pain when working with dates and times in different browsers. 1:18 You can check that out at Moment.js.com. 1:22 [Nick] That's pretty cool, Jason. I'm glad we took a moment to talk about that. 1:26 That was too easy. [Jason] Me, too. [Nick] I'm sorry. 1:29 [Jason] No, that was good. I liked that. I really liked the library though. 1:32 [Nick] Yeah. It's very cool. Next up-- 1:36 [Jason] It's a joy to use. 1:37 [Nick] Next up is jQuery Joyride. [http://goo.gl/cnvY5] 1:39 Let's say that you're working on an application, 1:43 and you want to create this really cool onboarding experience 1:45 where people can just go to the app and click through 1:48 and take a tour and see each part of the application 1:53 or each part of the web page that you're presenting. 1:57 That's pretty difficult to do, but that's exactly what jQuery Joyride does. 2:00 It makes it really easy to create these little pop-up windows here, 2:05 and you can go ahead and have a button that the user can click on. 2:09 As you click through, it will take you to different parts of the web page and highlight them. 2:14 Pretty nifty, and again, this is something that's kind of difficult to do 2:22 on your own if you're just coding it up without any kind of plug-ins or help. 2:27 So, I'm really happy that this plug-in exists. 2:33 [Jason] Yeah. You know, the onboarding process to a web app 2:35 is very, very important because it's the first thing that 2:38 your users are going to see when they go to your website. 2:41 This is also something called the 'blank slate' experience. 2:43 So, you want to give them a little push in the right direction-- 2:46 maybe even have some fake data there the first time they enter a web application. 2:50 [Nick] Just so they can get an idea of what kind of data they should be putting in. 2:53 [Jason] Also, let's face it--who wouldn't want to use a plug-in called Joyride? 2:56 [Nick] It sounds amazing. [Jason] I know. It's like, let's steal a car and just make this work. 2:59 Next up we have something called Emmet for Sublime. 3:03 [https://github.com/sergeche/emmet-sublime] 3:06 Emmet Sublime is a plug-in for Sublime Text to do Emmet coding. 3:08 Now, you may have heard of this before as Zen Coding. 3:13 Are you familiar with Zen Coding, Nick? 3:16 [Nick] Yeah. That's where I sit on a rock with a rake, 3:18 and I kind of drag it around in the sand and think about function calls and-- 3:22 yeah, I do that all the time. 3:25 [Jason] Yeah, so now you've got this rock right in Sublime Text. 3:27 No. Zen Coding is something a little different. 3:31 It gives you a certain syntax when writing HTML and CSS 3:33 to make writing these a lot quicker in your browser. 3:36 So, let's say you wanted to write an H1 tag followed by a div, 3:40 and then maybe a paragraph. 3:43 You would say 'H1>div>p', and if you type all that in and then press the Tab key, 3:46 this will format that all for you right in Sublime Text, adding in 3:53 the tags and positioning the cursor right through there, so you can enter the content 3:57 and drag it all through, enter what you need. 4:01 It's very, very difficult to explain, so check out the GitHub project page-- 4:05 http://github.com/sergeche/emmet-sublime. 4:11 Install it in Sublime. Read the tutorial. Good to go. 4:16 [Nick] I am ready to do Zen Coding. 4:20 [Jason] You'll feel a lot better and more at peace with yourself. 4:22 [Nick] That's important. So next up-- 4:24 USA Today has recently gone through a pretty cool re-design, 4:27 which you can check out at beta.usatoday.com. 4:30 We're going to take a look at it in a new segment we call Web Trends. 4:34 [? music playing ?] [WEB TRENDS] 4:38 As iPhone and iPad apps continue to grow in popularity, 4:44 everyone is expecting these really smooth and fluid experiences 4:47 where the page doesn't refresh, and you just move 4:52 from one piece of content to the next. 4:55 That's exactly what USA Today has done with their recent re-design. 4:57 You can scroll up and down the page as you might expect, 5:02 and you can swipe from one section of news to another. 5:06 Here, for example, in their weather interface, 5:13 they have all sorts of really cool buttons like you might expect to find 5:17 in a more native application experience. 5:21 Another cool feature that they have is their photo gallery. 5:26 When you click on the photo up at the top, 5:29 you can flip through these amazing full-screen photos that 5:34 take up the entire browser window. 5:38 I assume that they're probably using some CSS3 animations 5:40 to get that cool flipping effect across the entire screen. 5:45 [Jason] It's really amazing how far that a newspaper website 5:49 has been able to come for the web. 5:53 Traditionally--I hate to say this--newspapers don't have the best design. 5:57 [Nick] That's true. 6:01 [Jason] But the interaction and the UI are absolutely fantastic on this. 6:02 I'd like to hear more--maybe some blog posts--from them to see 6:06 what they're doing on the back end to make this work. 6:09 [Nick] It's really taken a consumption experience--or a static experience-- 6:12 and turned it into something that's a lot more engaging and interactive 6:17 and gets people to really involve themselves with the content. 6:21 [Jason] It makes me feel like we're actually living in the year 2012. 6:25 [Nick] That's amazing, actually. 6:28 [Jason] Yeah. Good job, USA Today. 6:30 If you want to check that out it's at http://beta.USAToday.com. 6:32 [Nick] Check it out! 6:37 [Jason] Next up--I'm sure everybody has heard of the iPhone 5 by now. 6:38 We're going to be talking about some interesting things that we did. 6:43 There's a break down of how Apple does the iPhone 5 website. 6:46 They have some really interesting techniques to make their videos work 6:51 in a cross-browser and standards-compliant sort of way. 6:54 They're using JPEGs, JSON, and the canvas element to simulate video. 6:57 [Nick] Wait a second. We have animated JPEGs now? 7:04 [Jason] Yeah. It's kind of strange. 7:07 They're actually using JPEGs at a really high quality, 7:09 smooshed down into really specific parts--basically keyframes. 7:13 Let me see if I can pull up the Apple website so that you can see what this is talking about. 7:19 They did this a certain way on the old Retina MacBook Pro site, 7:25 and what that was--see that right there? 7:29 That's just a series of JPEGs to open the Retina MacBook Pro 7:32 on the Retina MacBook Pro page. 7:37 [Nick] So they actually have a picture for each individual frame of that MacBook opening. 7:38 [Jason] Yes. [Nick] Which probably doesn't compress very well at all. 7:43 [Jason] No. So that little animation that you saw was 5 megabytes. 7:46 That can be kind of rough depending on your bandwidth situation. 7:50 Now, the new one that they have for the iPhone 5-- 7:54 let me see if I can pull this up--Apple.com/iphone. 7:58 If you scroll down on the Design page, 8:08 there's a little slide-to-unlock screen, 8:11 and that animation takes only 1 megabyte, and we have it right here. 8:14 The way this works is that they're actually compressing-- 8:21 here's one keyframe, the first one. 8:25 All of the different parts that are animated are in the second keyframe 8:26 and the third one, and then finally the last frame is a different frame as well. 8:31 This is all done--kind of strange--Base64 encoded and using Canvas 8:36 with a little bit of JavaScript. 8:41 There's a lot more going on on this page. 8:43 We'll have it in the show notes that you can find on our YouTube channel. 8:45 Definitely read this if you're interested to see how Apple did it. 8:49 [Nick] So, they're basically taking this image and just taking the DIFS 8:51 rather than in the previous example we saw where they have each individual frame. 8:55 [Jason] Right. [Nick] So that compresses a lot better. 9:00 I think that one was actually around 1 megabyte rather than 5. [Jason] Correct. 9:02 [Nick] Pretty interesting technique rather than using HTML5 video, 9:06 which is still pretty good, but you'd probably get some MPEG compression artifacts there, 9:11 whereas with this technique it looks really crisp and clean. [Jason] Exactly. 9:15 [Nick] Very cool stuff. [Jason] Go Apple. [Nick] Well done. 9:19 Alright. Next up is Fresco JS, and it's basically just another Lightbox but-- 9:22 [Jason] So why are we talking about it? 9:29 [Nick] It's a really good one. 9:30 I know there are a million different Lightbox plug-ins-- 9:32 that's basically where you click on an image, and a faux window comes up 9:35 in the browser that shows you a larger version of that image, 9:40 and oftentimes they'll have a gallery that you can 9:43 flip through in that Lightbox mode. 9:47 But, this Lightbox plug-in is actually pretty good, 9:48 and it's available at FrescoJS.com. 9:51 The thing that makes it so cool is that it's responsive, 9:55 it's really beautifully done, and it's also ready for retina displays. 10:00 So, if you click on an image, 10:06 you can cycle through a gallery, here. 10:07 They have thumbnail previews down at the bottom, 10:12 and if you use your keyboard, 10:17 you can cycle through the images that way as well. 10:18 Another nice thing that they're doing is supporting videos, 10:22 so you can drop in a YouTube or Vimeo video. 10:26 They also have this nice zoom feature where you can 10:31 zoom in on a particular image and pan around and look at it in more detail. 10:34 [Jason] The big selling point I'm guessing is that it's responsive-- 10:41 the responsive take on all of the different Lightbox plug-ins. 10:43 [Nick] It's also retina-ready which is the big craze in things 10:46 that we've been talking about in previous episodes. 10:50 So, in other words, it is just another Lightbox plug-in, 10:52 but it's really well done and has all of the modern features that you might expect. 10:55 [Jason] That's awewome. [Nick] Yep. 11:01 [Jason] Next up, there are 7 HTML5 features that you may not know about. 11:02 [Nick] Whoa! [Jason] I know! 11:07 We're going to talk about all 7 of them and read the blog posts right now. 11:09 [Nick] Let's do it! [Jason laughs] 11:12 [Jason] No, we're not actually going to talk about all of them. 11:13 I'm going to pick out a couple of them to tell you about. 11:16 Something that I think is pretty awesome is the HTML5 autofocus attribute. 11:18 When you land on a webpage, you can specify 11:23 that a certain input has autofocus. 11:26 This means when you go there, if there's a textbox-- 11:29 maybe a search field--your character will be 11:31 immediately focused when you go to the page. 11:36 Users don't have to click in there. 11:37 [Nick] That's different than how it used to be done 11:38 where you would drop in some JavaScript and have to do it that way. 11:42 This is now built into HTML5. [Jason] Yes. [Nick] Pretty cool! 11:45 [Jason] And the other thing that I'm liking is the HTML5 spell-check attribute. 11:49 You can specify that content DIVs or inputs don't need to have spell-check enabled. 11:53 [Nick] I'm going to be honest. This is going to save me a lot of embarrassment. 12:00 [Jason laughing] Yes, me too. And I'm proud of that. [Nick] Cool! 12:02 You can find more on that in the show notes. 12:08 [Nick] Very cool stuff. Next up is CSS Values, 12:10 available at http://cssvalues.com/. 12:14 Basically, this is just a big input box where you can type in a CSS property. 12:18 I'm going to type in 'background.' 12:26 When you type that in, it will bring up that CSS property 12:30 and show you all of the values that you can put in there. 12:36 That's pretty cool because--especially with CSS3 properties-- 12:40 I oftentimes forget which values I can put in, what order they should go in. 12:44 This is just a really handy reference where you can type in that CSS property 12:50 and figure out if you're doing it correctly. 12:55 They also link directly to W3C info, the Mozilla developer network info, 12:57 and you can get a permalink to that specific property 13:03 on CSS values, should you want to send it to a friend. 13:08 [Jason] Yeah. Or post it on your Facebook timeline. [Nick] Exactly. 13:12 [Jason] I know. Check out this background property everybody. 13:14 [Nick] Pretty cool. [Jason laughs] 13:15 [Jason] I think that's about a good place to wrap up for the day. 13:18 [Nick] Definitely. Jason, what did we learn today? 13:21 [Jason] Today we learned that newspaper websites can be awesome, 13:24 and HTML5 has some interesting features that we might not know about. 13:27 [Nick] Cool stuff! [Jason] If you want to catch me on Twitter, I'm @jseifer. 13:31 [Nick] I'm @nickrp. 13:35 [Jason] Thanks so much for tuning in. 13:36 For more show notes or more information on anything that we talked about today, 13:38 check out our YouTube channel at http://YouTube.com/gotreehouse/. 13:41 [Nick] And this show is, of course, brought to you by Treehouse-- 13:46 the best way to learn web design, web development, 13:48 how to start a business, iPhone and Android apps, and more. 13:51 You can check us out at http://teamtreehouse.com. 13:55 Thank you so much for watching, and we'll see you next week! 13:58 [? music playing ?] 14:01

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

Sign up