Treehouse Show Episode 11 – Moment.js and HTML5

treehouseShow11

In this episode of The Treehouse Show, Nick Pettit (@nickrp) and Jason Seifer (@jseifer) talk about Moment.js, jQuery joyride, and discuss web trends.

Here are the links for the week:

Moment.js
http://momentjs.com/

jQuery joyride
http://www.zurb.com/playground/jquery-joyride-feature-tour-plugin

Emmet for Sublime
https://github.com/sergeche/emmet-sublime

USA Today Beta
http://beta.usatoday.com/

iPhone 5 Web Site Teardown
https://docs.google.com/document/pub?id=1GWTMLjqQsQS45FWwqNG9ztQTdGF48hQYpjQHR_d1WsI

Fresco JS
http://www.frescojs.com

7 html5 Features You Might Not Know
http://www.aaronlumsden.com/articles/7-html5-features-that-you-may-not-know-about/

CSS Values
http://cssvalues.com/

Video Transcription

Nick: I’m Nick Pettit.

Jason: I’m Jason Seifer.

Nick: 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.

Jason: So, Nick, how often do you work with dates and times in
JavaScript?

Nick: All the time, really.

Jason: Well, I’ve got great news for you. There is a library called
moment.js. 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 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 plugin 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 and 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. So, 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. I’m sorry.

Jason: Me too. No, that was good. I liked that.

Nick: All right.

Jason: I really like the library, though.

Nick: Yeah. It’s very cool.

Jason: It’s a joy to use.

Nick: Next up is jQuery Joyride. Let’s say 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 webpage 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 popup 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, so pretty nifty. 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 plugins or help. So, I’m
really happy that this plugin exists.

Jason: Yeah, the onboarding process to a web app is very, very
important because it’s the first thing your users are going to
see when they go to your website. This is also something called
the “blank slate experience”. So, you kind of 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 plugin 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-sublime. Emmet-sublime is
a plugin 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. I do that all
the time.

Jason: So now, you’ve got this rock 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

p”, and
if you press 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 entering what you need.

It’s very, very difficult to explain, so check out the GitHub
project page at github.com/sergeche/emmet-sublime, and install
it in Sublime, read the tutorial, good to go.

Nick: I’m 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 redesign, 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. As iPhone and iPad apps continue to
grow in popularity, everyone’s kind of 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 redesign.

You can go ahead and scroll up and down the page as you might
expect and you can go ahead and 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 here.

When you go ahead and click on the photo up at the top, you can
just flip through these amazing full-screen photos that just
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 is 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, so good job, USA Today. If you want to check that out,
it’s at beta.usatoday.com.

Nick: Check it out.

Jason: Next up, I’m sure everybody has heard of the iPhone 5 by now,
but we’re going to be talking about some interesting things that
we did. There’s a breakdown 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: So wait a second. We have animated JPEGs now?

Jason: Yes. It’s kind of strange. They’re actually using JPEGs at a
really high quality smooshed down into really specific parts,
basically key frames. Let me see if I can pull up the Apple
website here so that you can see what this is talking about.
They did this a certain way on the 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 five megs.

Nick: Wow.

Jason: Yeah. 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 here, apple.com/iphone. If you
scroll down on the design page, there’s a little slide to unlock
screen and that animation takes only one megabyte and we have it
right here. The way this works is that they’re actually
compressing…

Here’s one key frame, first one, and all of the different parts
that are animated are in the second key frame, 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 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 divs
rather than the previous example that we saw where they have
each individual frame?

Jason: Right.

Nick: So that compresses a lot better. I think that one was actually around
one megabyte…

Jason: Correct.

Nick: …rather than five, so pretty interesting technique rather than
using, say, 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. All right. Next up is Fresco, and it’s basically just
another lightBox.

Jason: So why are we talking about it?

Nick: It’s a really good one. I know there’s a million different lightBox
plugins. That’s basically where you click on an image and a sort
of faux window comes up in the browser that shows you a larger
version of that image. Oftentimes they’ll have a gallery you can
kind of flip through in that lightBox mode. But this lightBox
plugin 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 go ahead and click on an image, you can go
ahead and cycle through a gallery here. They have thumbnail
previews down at the bottom, and if you use your keyboard, you
can go ahead and cycle through the images that way as well.
Another nice thing that they’re doing is supporting videos.

So, you can go ahead and drop in, say, a YouTube or Vimeo video.
They also have this nice zoom feature where you can go ahead and
zoom in on a particular image and kind of pan around and look at
it in more detail.

Jason: So the big selling point, I’m guessing, is that it’s
responsive, the responsive take on all the different lightBox
plugins?

Nick: It’s also retina ready, which is kind of the big craze in things that
we’ve been talking about in previous episodes. So, in other
words, it is just another lightBox plugin, but it’s really well
done and has all of the modern features that you might expect.

Jason: That’s awesome.

Nick: Yep.

Jason: Next up, there are seven HTML5 features that you may not know
about.

Nick: Whoa.

Jason: I know. We’re going to talk about all seven of them, and read
the blog post right now.

Nick: Let’s do it.

Jason: No, we’re not actually going to talk about all of them. I’m
just going to pick out a couple of them to tell you about.
Something that I think is pretty awesome is the HTML5 auto-focus
attribute. So when you land on a webpage, you can specify that a
certain input has auto-focus. This means when you go there, if
there’s a text box, 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 in
to HTML5?

Jason: Yes.

Nick: That’s pretty cool.

Jason: 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: Yes, me too. Yeah, I’m proud of that.

Nick: Cool.

Jason: So, you can find more on that in the show notes.

Nick: Very cool stuff. Next up is CSS Values available at cssvalues.com.
Basically, this is just a big input box where you can go ahead
and type in a CSS property. So, I’m going to go ahead and type
in, say, “background”. When you type that in it will go ahead
and bring up that CSS property and show you all of the values
that you can go ahead and put in there.

That’s pretty cool, because especially with CSS3 properties I
often times forget which values I can put in, what order they
should go in. So, this is just a really hand 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 go ahead and 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: Yeah, check out this background property, everybody.

Nick: Pretty cool.

Jason: So, 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 youtube.com/gotreehouse.

Nick: The 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
teamtreehouse.com. Thank you so much for watching, and we’ll see
you next week.

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from either HTML, CSS or Wordpress.

Start learning

Treehouse

Our mission is to bring affordable Technology education to people everywhere, in order to help them achieve their dreams and change the world.

Comments

Comments are closed.