You've already started watching Episode 9: HTML5 Boilerplate
In this 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.
-
0:02
I'm Nick Pettit. >>I'm Jason Seifer.
-
0:04
[Nick Pettit]: and you're watching The Treehouse Show,
-
0:06
your weekly dose of Internets where we talk about all things web design,
-
0:09
web development, and more.
-
0:11
[Jason Seifer]: In this episode, we'll be talking about the
-
0:13
latest JavaScript project and some JavaScript books,
-
0:16
the new Firefox beta,
-
0:18
and our app review of the week is Moom.
-
0:20
[Nick Pettit]: Let's check it out.
-
0:22
[?music playing?]
-
0:28
[Jason Seifer]: The first project that we're going to be talking about this week
-
0:30
is something called, 'Holder.js.'
-
0:33
Holder.js is a piece of JavaScript
-
0:35
that does image placeholders
-
0:37
for your website.
-
0:39
The way it works is, you give it an image tag,
-
0:41
and for the source, you specify the path
-
0:43
to Holder.js.
-
0:45
Add a slash, and then specify the width and height
-
0:48
that you want the placeholder image.
-
0:50
This is going to be very, very useful
-
0:52
when developing sites,
-
0:54
and you maybe don't have all of the images
-
0:56
that you're going to be using in the final product,
-
0:58
but you can say something like, "Okay, an ad's going to be here,
-
1:00
it's going to be this size,"
-
1:03
and it will flow right into your content
-
1:05
without, really, any work on your part.
-
1:07
There are some great examples at the site
-
1:09
of all different size placeholder images,
-
1:11
and you can see right here, it's very, very easy
-
1:14
to use with this image tag--just drop in the source
-
1:16
and the path, and you are good to go.
-
1:19
This weighs in at only 5 kilobytes,
-
1:22
so not really too much to put into your site,
-
1:24
especially if you're only showing it to a few people,
-
1:27
since this really is something that you're only going to be using
-
1:29
in development of a new site.
-
1:31
[Nick Pettit]: That's really, really cool.
-
1:33
See, I always like to develop in the browser
-
1:35
with HTML and CSS, so that makes it
-
1:37
a lot easier to just drop in a placeholder image,
-
1:39
instead of trying to box it out
-
1:43
with a full-colored div that looks really ugly, so--
-
1:46
[Jason Seifer]: Yeah, and especially when the cat placeholders
-
1:49
are taking too long to load.
-
1:51
[Nick Pettit]: That's true. Those cat placeholders every time.
-
1:54
[Jason Seifer]: Always a big concern.
-
1:56
[Nick Pettit]: Alright. Next up is Picturefill,
-
1:59
which is a piece of JavaScript that will allow you
-
2:01
to make your responsive web images
-
2:04
load a lot more quickly.
-
2:07
Basically, it mimics the proposed
-
2:10
picture element, and it uses divs
-
2:13
instead of the picture element, just for the sake of
-
2:15
safety and cross-browser compatibility.
-
2:19
So, if I go ahead and click here
-
2:21
on their github page,
-
2:23
we have a little example here,
-
2:25
and I can show you a demo of how this works.
-
2:27
When I resize my web browser here,
-
2:30
it will go ahead and load in different images
-
2:34
based on the size of the browser.
-
2:37
[Jason Seifer]: Hey, there's Mike the frog. Hey, Mike. >>[Nick Pettit]: Hey, look at that.
-
2:39
Now, this is handy,
-
2:41
because you don't want to load in
-
2:43
a really huge image
-
2:45
if all you really need is a small image
-
2:48
for iPhone or an iPad, or something like that.
-
2:50
[Jason Seifer]: That's something, especially, that you'll have to
-
2:52
take into account on mobile connections. >>[Nick Pettit]: That's right.
-
2:55
[Jason Seifer]: This is also similar to a project we talked about in the last episode
-
2:58
of The Treehouse Show, however, it uses divs
-
3:00
instead of the figure and picture elements. >>[Nick Pettit]: That's right.
-
3:04
[Jason Seifer]: Next up, is a website called whatthekey.com--
-
3:08
oh, I'm sorry, whatthekeycode.com.
-
3:11
If you've ever gone and developed
-
3:13
an app in JavaScript,
-
3:15
occasionally you will need to listen for a key code event.
-
3:18
This can be a bit difficult to go through and look up
-
3:21
the key code every time,
-
3:23
so you can just go to whatthekeycode.com,
-
3:25
type any key, and it will immediately
-
3:27
give you the JavaScript key code. Take a look at it here.
-
3:30
I'm going to just go press some keys,
-
3:31
and you can see as I am pressing them
-
3:33
on the site,
-
3:35
it is displaying the different numbers. [Nick Pettit]: That's pretty handy.
-
3:38
[Jason Seifer]: It is, and that's whatthekeycode.com
-
3:41
in case you forget. [Nick Pettit]: Got it memorized.
-
3:44
Wait, what was that again? [Jason Seifer]: whatthekeycode.com.
-
3:47
[Nick Pettit]: Okay, I got it this time.
-
3:49
Next up, is normalize.css
-
3:52
at necolas.github.com/normalize.css.
-
3:57
I think that's how you pronounce it. [Jason Seifer]: Good enough.
-
3:59
[Nick Pettit]: Basically, when you're coding websites,
-
4:02
you need to drop in some reset CSS.
-
4:05
Reset CSS will remove the default styling that the browser applies,
-
4:09
and it will remove all that default padding
-
4:11
and margin and, basically, create a level playing field,
-
4:14
so that it's easier to code your websites
-
4:17
across different browsers.
-
4:20
So, after you drop in your reset CSS,
-
4:22
you can go ahead and apply your own styling
-
4:25
on top of that.
-
4:27
Normalize is interesting, because it's
-
4:30
a modern HTML5-ready alternative
-
4:32
to CSS resets.
-
4:34
So, basically, there's been a lot of CSS resets
-
4:36
in the past,
-
4:38
and this is just the latest and greatest one.
-
4:40
[Jason Seifer]: This is the reset of the future.
-
4:42
[Nick Pettit]: That's right.
-
4:44
[Jason Seifer]: The present-future of past resets.
-
4:47
[Nick Pettit]: Tomorrow is today.
-
4:49
[Jason Seifer]: Well, I think that is a great time to segue-way
-
4:51
to our app review of the week.
-
4:53
[Nick Petti]: Let's check it out.
-
4:55
[?music playing?]
-
5:00
[Jason Seifer]: This week the app we're going to be taking a look at
-
5:02
is called, 'Moom' by Many Tricks,
-
5:04
and you can get that at manytricks.com/moom.
-
5:08
So, what does Moom do?
-
5:10
This is something that has turned out to be
-
5:13
an invaluable app for me.
-
5:15
This is an OS10 application
-
5:17
where--you see this little zoom button on the top left?
-
5:20
It gives you a menu right there.
-
5:22
Below that menu, is a few buttons
-
5:24
and a grid.
-
5:26
What this lets you do is, you can draw on this grid,
-
5:28
and it will resize the topmost window
-
5:31
to be the size of that grid.
-
5:34
It can also take it to fullscreen,
-
5:36
and this is very useful
-
5:38
if you've got something
-
5:40
like a text editor and a
-
5:42
Markdown editor side by side.
-
5:44
You can go ahead, click in there, it's got predefined sizes,
-
5:46
or you can define your own.
-
5:48
One thing that's really, really useful
-
5:51
about Moom is that you can even assign
-
5:53
custom key codes to the different sizes
-
5:56
and have it apply to different applications.
-
5:58
Myself, when I'm coding a site
-
6:00
using Rails, I've got a terminal open,
-
6:02
text editor, and a browser, and with 1 keystroke
-
6:04
you can have these all resized
-
6:06
to your preferred dimensions and layout.
-
6:09
Like I said, this can be extremely useful when going
-
6:12
from a laptop with an external monitor,
-
6:15
back and forth between the laptop--
-
6:17
save you the time of resizing all these things.
-
6:19
This is not a sponsored review of the show,
-
6:24
this is just something that I find invaluable.
-
6:26
[Nick Pettit]: Shame on them. [Jason Seifer]: Shame on them, indeed.
-
6:29
[Nick Pettit]: You know, that's really interesting,
-
6:31
because one of the very few features from Windows,
-
6:33
particularly Windows 7, that I really like,
-
6:36
is that you can drag
-
6:38
windows to the left and right of the screen,
-
6:41
or I think you can drag them to the top
-
6:43
or something like that, and it will make them go fullscreen
-
6:45
or take up 1 side of the screen or the other,
-
6:48
so you can look at things side-by-side,
-
6:50
but that brings this functionality to--
-
6:53
[Jason Seifer]: Oh, this does that, too, I didn't even mention it.
-
6:55
[Nick Pettit]: --brings it to Mac OS10, so that's pretty nifty.
-
6:58
Next up is HTML5 Boilerplate
-
7:02
and, speaking of CSS reset code,
-
7:05
this is actually kind of the
-
7:07
ultimate reset, in a way.
-
7:09
It's basically some HTML,
-
7:12
some CSS, and a few other things
-
7:14
that will give you a good, solid foundation
-
7:16
for building an HTML 5.0 future-ready website.
-
7:21
[Jason Seifer]: Now, this is brand new, right?
-
7:23
[Nick Pettit]: It's not brand new, Jason. I'm so glad you mentioned that.
-
7:26
This is, actually, the 4.0 version,
-
7:28
but if you haven't checked out Boilerplate before,
-
7:30
you should definitely take a look.
-
7:32
It's available at html5boilerplate.com,
-
7:36
and in version 4.0,
-
7:38
look at that,
-
7:40
they're using normalize.css,
-
7:43
a modern HTML5-ready alternative to CSS resets, which we just discussed.
-
7:48
It also includes the latest versions
-
7:50
of jQuery and Modernizr,
-
7:53
and it loads them in via Google CDN,
-
7:55
so you know that it's going to be
-
7:57
super-duper fast and super-reliable.
-
8:00
So, if you're starting a new web project,
-
8:02
Boilerplate is a pretty good
-
8:04
way to go, and then you can go ahead and
-
8:07
drop in your other features on top of that.
-
8:10
[Jason Seifer]: Nice. So next up, Firefox Beta 16--
-
8:14
Firefox 16 Beta 1
-
8:16
has just recently been released.
-
8:18
Something that's really useful for developers
-
8:21
in this version, is a new console
-
8:24
that's going to let you have a command line
-
8:26
interface to Firefox itself.
-
8:28
What can you do with that?
-
8:30
Well, I'm glad you asked.
-
8:32
You can go through and actually control
-
8:34
different parts of the browser experience.
-
8:36
You can manipulate the showing of the inspector.
-
8:39
So, you can say something like "inspect,"
-
8:42
give it a CSS path to what you want to inspect,
-
8:44
and it will bring that right up.
-
8:46
You can clear the console and open the console
-
8:49
from the command line.
-
8:51
Something that I find really interesting,
-
8:53
though, is you can resize the browser as well
-
8:56
by just saying "resize to" and give it different dimensions.
-
9:00
This is going to be really useful when,
-
9:02
say, testing your responsive designs
-
9:04
inside of the Firefox browser.
-
9:07
And finally, another feature that I really like
-
9:10
is the option to have screenshots
-
9:12
right from the command line,
-
9:14
and you can even give it different IDs
-
9:17
of what you want to have screenshots of,
-
9:19
and Firefox will save them for you.
-
9:21
So, pretty interesting developments for developers
-
9:24
in the latest beta of Firefox.
-
9:27
So, check that out if you get the chance.
-
9:29
Still need to be testing on Firefox.
-
9:31
[Nick Pettit]: That's pretty nifty.
-
9:33
Next up, just a quick little thing,
-
9:36
JSbooks, available at jsbooks.revolunet--like revolution, I guess--.com,
-
9:44
and in a previous episode
-
9:47
we covered something pretty similar to this
-
9:49
that showed a whole bunch of useful Python books.
-
9:52
Well, this is just a list of
-
9:54
all the best JavaScript books.
-
9:57
JavaScript, of course, being the language
-
9:59
that creates the behavioral layer
-
10:02
in HTML, CSS, and JavaScript.
-
10:05
So, pretty nifty
-
10:07
if you're looking to learn with books.
-
10:10
Of course, if you want to learn about JavaScript
-
10:12
on video, you should check out teamtreehouse.com.
-
10:16
[Jason Seifer]: Shameless self-promotion. >>[Nick Pettit]: Shameless.
-
10:18
[Jason Seifer]: Next up,
-
10:20
just another quick heads-up.
-
10:22
There is a theme that recently gained popularity.
-
10:24
This is a theme for your text editors,
-
10:26
and this is called the 'Tomorrow' theme,
-
10:28
and it is pretty, without being overbearing.
-
10:32
It has different configurations for
-
10:36
Vim, TextMate, Sublime--whatever you're using these days.
-
10:39
There's dark and light versions,
-
10:41
and pretty much any editor
-
10:44
that has gained popularity recently
-
10:46
will have a version of the Tomorrow theme.
-
10:48
Very pleasant to look at
-
10:50
and easy on the eyes, which is something that you're going to be looking for
-
10:52
when you stare at text all day.
-
10:55
[Nick Pettit]: Very, very true. When you do look at text all day long,
-
10:58
you definitely want to have a pretty nice-looking theme.
-
11:00
Seems like a small thing, but it really does
-
11:04
affect the way you work.
-
11:06
So, Jason, what have we learned today?
-
11:08
[Jason Seifer]: We learned that Firefox is pretty awesome
-
11:11
for its developer tools in the latest beta,
-
11:13
and that we should all check that out.
-
11:15
[Nick Pettit]: I would have to agree.
-
11:17
Thank you guys so much for watching. I'm @NICKRP on Twitter.
-
11:20
[Jason Seifer]: I'm @JSEIFER. Thanks so much for tuning in
-
11:22
to this episode of The Treehouse Show.
-
11:24
For show notes and more,
-
11:26
check out our YouTube channel
-
11:28
at YouTube.com/gotreehouse.
-
11:30
[Nick Pettit]: This episode was brought to you by Treehouse,
-
11:33
the best way to learn web design, web development,
-
11:35
mobile business, and more.
-
11:37
You can check us out at teamtreehouse.com
-
11:39
We'll see you next week.
-
11:42
[?music playing?]
You need to sign up for Treehouse in order to download course files.
Sign up