I'm Nick Pettit. >>I'm Jason Seifer.

[Nick Pettit]: 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 Seifer]: 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 Pettit]: Let's check it out.

[?music playing?]

[Jason Seifer]: 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 can 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 Pettit]: 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-colored div that looks really ugly, so--

[Jason Seifer]: Yeah, and especially when the cat placeholders

are taking too long to load.

[Nick Pettit]: That's true. Those cat placeholders every time.

[Jason Seifer]: Always a big concern.

[Nick Pettit]: Alright. 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,

we have a little example here,

and I can show you a demo of how this works.

When I resize my web browser here,

it will go ahead and load in different images

based on the size of the browser.

[Jason Seifer]: Hey, there's Mike the frog. Hey, Mike. >>[Nick Pettit]: 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 iPhone or an iPad, or something like that.

[Jason Seifer]: That's something, especially, that you'll have to

take into account on mobile connections. >>[Nick Pettit]: That's right.

[Jason Seifer]: This is also similar to a project we talked about in the last episode

of The Treehouse Show, however, it uses divs

instead of the figure and picture elements. >>[Nick Pettit]: That's right.

[Jason Seifer]: Next up, is a website called whatthekey.com--

oh, I'm sorry, 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. Take a look at it here.

I'm going to just go press some keys,

and you can see as I am pressing them

on the site,

it is displaying the different numbers. [Nick Pettit]: That's pretty handy.

[Jason Seifer]: It is, and that's whatthekeycode.com

in case you forget. [Nick Pettit]: Got it memorized.

Wait, what was that again? [Jason Seifer]: whatthekeycode.com.

[Nick Pettit]: Okay, I got it this time.

Next up, is normalize.css

at necolas.github.com/normalize.css.

I think that's how you pronounce it. [Jason Seifer]: Good enough.

[Nick Pettit]: 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.

So, 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 resets.

So, basically, there's been a lot of CSS resets

in the past,

and this is just the latest and greatest one.

[Jason Seifer]: This is the reset of the future.

[Nick Pettit]: That's right.

[Jason Seifer]: The present-future of past resets.

[Nick Pettit]: Tomorrow is today.

[Jason Seifer]: Well, I think that is a great time to segue-way

to our app review of the week.

[Nick Petti]: Let's check it out.

[?music playing?]

[Jason Seifer]: This week the app we're going to be taking a look at

is called, 'Moom' by Many Tricks,

and 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

where--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 it to fullscreen,

and this is very useful

if you've got something

like a text editor and a

Markdown editor side by side.

You can go ahead, click in there, it's got predefined 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 1 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--

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 Pettit]: Shame on them. [Jason Seifer]: Shame on them, indeed.

[Nick Pettit]: You know, 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, and it will make them go fullscreen

or take up 1 side of the screen or the other,

so you can look at things side-by-side,

but that brings this functionality to--

[Jason Seifer]: Oh, this does that, too, I didn't even mention it.

[Nick Pettit]: --brings it to Mac OS10, so that's pretty nifty.

Next up is HTML5 Boilerplate

and, 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 HTML 5.0 future-ready website.

[Jason Seifer]: Now, this is brand new, right?

[Nick Pettit]: 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 alternative to CSS resets, which we just discussed.

It also includes the latest versions

of jQuery and Modernizr,

and it loads them in via Google CDN,

so you know that it's going to be

super-duper fast and super-reliable.

So, if you're starting a new web project,

Boilerplate is a pretty good

way to go, and then you can go ahead and

drop in your other features on top of that.

[Jason Seifer]: Nice. So next up, 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 line

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.

So, 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.

And finally, another feature that I really like

is the option to have screenshots

right from the command line,

and you can even give it different IDs

of what you want to have screenshots of,

and Firefox will save them for you.

So, pretty interesting developments for developers

in the latest beta of Firefox.

So, check that out if you get the chance.

Still need to be testing on Firefox.

[Nick Pettit]: That's pretty nifty.

Next up, just a quick little thing,

JSbooks, available at jsbooks.revolunet--like revolution, I guess--.com,

and in a previous episode

we covered something pretty similar to this

that showed a whole bunch of useful Python books.

Well, this is just a list of

all the best JavaScript books.

JavaScript, of course, being the language

that creates the behavioral layer

in HTML, CSS, and JavaScript.

So, pretty nifty

if you're looking to learn with books.

Of course, if you want to learn about JavaScript

on video, you should check out teamtreehouse.com.

[Jason Seifer]: Shameless self-promotion. >>[Nick Pettit]: Shameless.

[Jason Seifer]: Next up,

just another quick heads-up.

There is a theme that recently gained popularity.

This is a theme for your text editors,

and 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's dark and light versions,

and pretty much any editor

that has gained popularity recently

will have a version of the Tomorrow theme.

Very pleasant to look at

and easy on the eyes, which is something that you're going to be looking for

when you stare at text all day.

[Nick Pettit]: Very, very true. When you do look at text all day long,

you definitely want to have a pretty nice-looking theme.

Seems like a small thing, but it really does

affect the way you work.

So, Jason, what have we learned today?

[Jason Seifer]: We learned that Firefox is pretty awesome

for its developer tools in the latest beta,

and that we should all check that out.

[Nick Pettit]: I would have to agree.

Thank you guys so much for watching. I'm @NICKRP on Twitter.

[Jason Seifer]: I'm @JSEIFER. Thanks so much for tuning in

to this episode of The Treehouse Show.

For show notes and more,

check out our YouTube channel

at YouTube.com/gotreehouse.

[Nick Pettit]: 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.

[?music playing?]