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