HTML5 Boilerplate | The Treehouse Show Ep. 9

treehouseShow9

In the ninth episode of The Treehouse Show, Nick Pettit (@nickrp) and Jason Seifer (@jseifer) talk about HTML5 Boilerplate, the new Firefox beta, and the app review of the week is Moom.

Here are the links mentioned in this week’s episode:

Holder.js
http://imsky.github.com/holder/

Picturefill
https://github.com/scottjehl/picturefill

What The Key Code
http://whatthekeycode.com/

Normalize.css
http://necolas.github.com/normalize.css/

Moom
http://manytricks.com/moom/

HTML5 Boilerplate 4.0
http://html5boilerplate.com/

https://github.com/h5bp/html5-boilerplate/blob/v4.0.0/CHANGELOG.md

Firefox 16 Beta

https://hacks.mozilla.org/2012/08/new-firefox-command-line-helps-you-develop-…

JSBooks
http://jsbooks.revolunet.com/

Tomorrow Theme
https://github.com/chriskempson/tomorrow-theme

Transcription

Nick Pettit: Hi, I’m Nick Pettit.

Jason Seifer: I’m Jason Seifer.

Nick: And you’re watching The Treehouse Show and 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 the latest JavaScript project
and some JavaScript books, the new Firefox Beta and our app review of the
week is Moom.

Nick: Well, let’s check it out.

Jason: The first project that we’re going to be talking about this week is
something called Holder.js. Holder.js is a piece of JavaScript that does
image placeholders for your website. The way it works is you give it an
image tag and for the source you specify the path to Holder.js, add a slash
and then specify the width and height that you want the placeholder image.
This is going to be very, very useful when developing sites and you maybe
don’t have all of the images that you’re going to be using in the final
product. But you could say something like, “Okay. An ad’s going to be here.
It’s going to be this size,” and it will flow right into your content
without really any work on your part.

There are some great examples at the site of all different size placeholder
images and you can see right here it’s very, very easy to use. With this
image tag, just drop in the source and the path, and you are good to go.
This weighs in at only 5 kilobytes, so not really too much to put into your
site, especially if you’re only showing it to a few people since this
really is something that you’re only going to be using in development of a
new site.

Nick: That’s really, really cool. See, I always like to develop in the
browser with HTML and css. So that makes it a lot easier to just drop in a
placeholder image instead of trying to box it out with a full-color div. It
looks really ugly.

Jason: Yeah. Especially when the cat placeholders are taking too long to
load.

Nick: That’s true. Those cat placeholders every time.

Jason: Always a big concern.

Nick: All right. Next up is Picturefill which is a piece of JavaScript that
will allow you to make your responsive web images load a lot more quickly.
Basically it mimics the proposed picture element and it uses divs instead
of the picture element just for the sake of safety and cross-browser
compatibility. So if I go ahead and click here on their github page, I have
a little example here. I can show you a demo of how this works. When I
resize my web browser here, it will go ahead load in different images based
on the size of the browser page.

Jason: Hey, there’s Mike the Frog. Hi, Mike.

Nick: Hey, look at that. Now this is handy because you don’t want to load
in a really huge image if all you really need is a small image for an
iPhone or an iPad or something like that.

Jason: That’s something especially that you’ll have to take into account on
mobile connections.

Nick: That’s right.

Jason: This is also similar to a project we talked about in the last
episode in The Treehouse Show, however it uses divs instead of the figure
and picture elements.

Nick: That’s right.

Jason: Next up is a website called whatthekeycode.com. If you’ve ever gone
and developed an app in JavaScript, occasionally you will need to listen
for a key code event. This can be a bit difficult to go through and look up
the key code every time, so you can just go to whatthekeycode.com, type any
key and it will immediately give you the JavaScript key code. We’ll take a
look at it here. I’m just going to go press some keys, and you can see as I
am pressing them on the site it is displaying the different numbers.

Nick: That’s pretty handy.

Jason: It is, and that’s whatthekeycode.com, in case you forget.

Nick: Got it memorized. Wait. What was that again?

Jason: Whatthekeycode.com.

Nick: OK. I’ve got it this time. Next up is normalize.css at
necolas.github.com/normalize.css. I think that’s how you pronounce it.

Jason: Good enough.

Nick: Basically, when you’re coding websites you need to drop in some reset
css. Reset css will remove the default styling that the browser applies and
it will remove all that default padding and margin and basically create a
level playing field so that it’s easier to code your websites across
different browsers. After you drop in your reset css, you can go ahead and
apply your own styling on top of that. Normalize is interesting because
it’s a modern HTML5-ready alternative to css reset. Basically there have
been a lot of css resets in the past, and this is just the latest and
greatest one.

Jason: This is the reset of the future.

Nick: That’s right.

Jason: The present future of past resets.

Nick: Tomorrow is today.

Jason: Well, I think that is a great time to segue to our app revue of the
week.

Nick: Let’s check it out.

Jason: This week the app we’re going to be taking a look at is called Moom
by Many Tricks. You can get that at manytricks.com/moom. So what does Moom
do? This is something that has turned out to be an invaluable app for me.
This is an OS10 application. You see this little zoom button on the top
left? It gives you a menu right there. Below that menu is a few buttons and
a grid. What this lets you do is you can draw on this grid and it will
resize the topmost window to be the size of that grid. It can also take you
to full screen.

This is very useful if you’ve got something like a text editor and a
markdown editor side by side. You can go ahead and click in there. It’s got
pre-defined sizes or you can define your own. One thing that’s really,
really useful about Moom is that you can even assign custom key codes to
the different sizes and have it apply to different applications. Myself,
when I’m coding a site using Rails I’ve got a terminal open, text editor
and a browser, and with one keystroke you can have these all resized to
your preferred dimensions and layout.

Like I said, this can be extremely useful when going from a laptop with an
external monitor back and forth between the laptop. It will save you the
time of resizing all these things. This is not a sponsored review of the
show. This is just something that I find invaluable.

Nick: Shame on them.

Jason: Shame on them, indeed.

Nick: That’s really interesting, because one of the very few features from
Windows, particularly Windows 7 that I really like, is that you can drag
windows to the left and right of the screen or I think you can drag them to
the top or something like that. It will make them go full screen or take up
one side of the screen or the other so you can look at things side by side.
That brings this functionality to Mac OS10.

Jason: This does that, too. I didn’t even mention it.

Nick: That’s pretty nifty. Next up is HTML5 Boilerplate. Speaking of css
reset code, this is actually kind of the ultimate reset in a way. It’s
basically some HTML, some css and a few other things that will give you a
good, solid foundation for building an HTML5 future-ready website.

Jason: This is brand new, right?

Nick: It’s not brand new, Jason. I’m so glad you mentioned that. This is
actually the 4.0 version. But if you haven’t checked out boilerplate
before, you should definitely take a look. It’s available at
html5boilerplate.com, and in version 4.0, look at that, they’re using
normalize.css, a modern HTML5-ready alterative to css resets which we just
discussed. It also includes the latest versions of jQuery and Modernizr,
and it loads them in via Google’s CDN so you know that it’s going to be
super-duper fast and super reliable. If you’re starting a new web project,
Boilerplate is a pretty good way to go and then you can go ahead and then
drop in your other features on top of that.

Jason: Nice. Next up is Firefox Beta 16. Firefox 16 Beta 1 has just
recently been released. Something that’s really useful for developers in
this version is a new console that’s going to let you have a command land
interface to Firefox itself. What can you do with that?

Well, I’m glad you asked. You can go through and actually control different
parts of the browser experience. You can manipulate the showing of the
inspector. You can say something like ‘inspect’, give it a css path to what
you want to inspect and it will bring that right up. You can clear the
console and open the console from the command line. Something that I find
really interesting, though, is you can resize the browser as well by just
saying ‘resize to’ and give it different dimensions.

This is going to be really useful when, say, testing your responsive
designs inside of the Firefox browser. Finally, another feature that I
really like is the option to have screenshots right from the command line.
You can even give it different IDs of what you want to have screenshots of
and Firefox will save them for you. Pretty interesting developments for
developers in the latest Beta of Firefox. Check that out if you get the
chance. It still needs to be testing on Firefox.

Nick: That’s pretty nifty. Next up, just a quick little thing, JSbooks,
available at jsbooks.revolunet.com. In a previous episode we covered
something pretty similar to this that showed a whole bunch of useful python
books. This is just a list of all the best JavaScript books. JavaScript, of
course, meaning the language that creates the behavioral layer in HTML, css
and JavaScript. Pretty nifty if you are looking to learn with books. Of
course, if you want to learn about JavaScript on video, you should check
out teamtreehouse.com.

Jason: Shameless self-promotion.

Nick: Shameless.

Jason: Next up, just another quick heads up. There is a theme that recently
gained popularity. This is a theme for your text editors. This is called
‘The Tomorrow Theme,’ and it is pretty without being overbearing. It has
different configurations for Vim, TextMate, Sublime, whatever you’re using
these days. There are dark and light versions. Pretty much any editor that
has gained popularity recently will have a version of the Tomorrow Theme.
It’s pleasant to look at and easy on the eyes, which is something you’re
going to be looking when you stare at text all day.

Nick: Very, very true. When you do look at text all day long, you
definitely want to have a pretty nice looking theme. It seems like a small
thing, but it really does affect the way you work. So, Jason, what did we
learn today?

Jason: We learned that Firefox is pretty awesome for its developer tools in
the latest Beta, and that we should all check that out.

Nick: I would have to agree. Thank you guys so much for watching. I’m
@NICKRP on Twitter.

Jason: I’m @JSEIFER. Thanks so much for tuning into this episode of The
Treehouse Show. For Tree notes and more, check out our YouTube channel at
youtube.com/gotreehouse.

Nick: This episode was brought to you by Treehouse, the best way to learn
web design, web development, mobile, business and more. You can check us
out at teamtreehouse.com. We’ll see you next week.

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

One comment on “HTML5 Boilerplate | The Treehouse Show Ep. 9

  1. Hi
    Nice post it is really informative & given links are valuable.

    Thanks for sharing

    WRSBuilder.com