I'm Nick Pettit. I'm Jason Seifer. 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 error messages,

the usual dose of responsive design, and our app review is "Dash."

[Nick Pettit] Let's check it out.

?music? [The Treehouse Show]

[Nick Pettit] First up is the 4 H's of writing error messages.

This is a really cool post, and let's just get right into it.

The 4 H's are error messages need to be: Human, Helpful, Humorous, and Humble.

So, let's just break each one of those down really quick.

What do we mean when we say "Human?"

Well, this error message from twitter says, "Error unauthorized."

That really doesn't make a lot of sense.

It doesn't seem like it was written for people,

and actually it doesn't even seem like it would make sense to anyone but a developer.

[Jason Seifer] It makes perfect sense to me.

[Nick Pettit] Well, you're a developer, Jason. So, of course, it does.

[Jason Seifer] But, it's on the lower end of the human scale.

[Nick Pettit] The Firefox error message here is, of course, a better example,

where they say, "Well, this is embarrassing."

I mean, that's something that is conversational, something that people would say in real life.

So, next up is "Helpful."

Is the error message actually helping the person solve the problem?

So, if something goes wrong in the application, does it help them make it right?

If they entered bad data, are you telling them,

"Hey, you actually needed to enter this other thing."

[Jason Seifer] For example, if passwords didn't match,

are you saying the passwords didn't match,

or couldn't sign you up for the site.

[Nick Pettit] Exactly. That's exactly right.

Next up, is "Humorous."

So, when Last.fm goes down, it's always amusing. It says,

"Holy moly, we just blew a fuse. Need...more...amps."

I mean--you know, it's pretty funny.

I really like this example from Gmail as well.

When you go ahead and type in your user name and you have too many periods

or a bunch of other different pieces of punctuation,

it says, "A fan of punctuation! Alas, user names can't have consecutive periods."

So, pretty nifty.

The last one is "Humble."

Basically, it's just saying that you should be apologetic when something goes wrong.

Because often times when something goes wrong in a piece of software,

the user will often feel like they caused the problem.

They're like, "Ah, geez. I broke it. I must be stupid. I must not know how to use this."

When really, it's probably the application.

[Jason Seifer] So, you shouldn't say, "Error. This is probably your fault."

[Nick Pettit] That's pretty much it, Jason. You basically want to apologize to the user and say,

"Ah, we're sorry. Something went wrong. We're going to try to fix that as soon as we can."

[Jason Seifer] Well, that's legit.

[Nick Pettit] Yeah.

[Jason Seifer] Yeah, cool. Nice bunch of tips there.

I thought it was going to be more along--you know--dodgeball tips, but whatever.

[Nick Pettit] No, no. Not quite.

[Jason Seifer] Next up we have a project called "jHERE."

This is billed as maps made easy.

This is a jQuery plug-in that provides a layer of abstraction over on the HERE map's API.

So, there's a bunch of different things that you can do when working with the HERE map's API,

and using this jQuery plug-in, you get a very, very easy and simple way

of working with what can be a really complicated API.

Now, if you take a look at the documentation for jHERE,

it's very simple and quick to include on your page,

and making a map is really easy.

This is just a couple of lines of code,

drop it into your page, and there are different options that you can have as well.

Very, very simple to use and--yeah, check that out--jHERE.

It uses the HERE map's API which you don't see a lot of people using,

but they do provide really good maps.

[Nick Pettit] Pretty nifty.

So, next up is a blog post about fun and performance.

For those of you who are more advanced, this might be old news,

but it's always good to remind ourselves about techniques

that provide good front-end performance.

So, I won't go through all these tips, but the first 2 talk about resource packaging

and using a single host's name, so obviously you want to try to reduce

the number of resources that you have as much as possible

and try to reduce those http requests and serve them all on a single host name.

Another tip is to load JavaScript asynchronously.

So, for example, you can go ahead and load in all of your html and css

and actually display something on the page that the user can actually see

and then in that split second after the page loads,

you can go ahead and load in your JavaScript,

and they won't really know the difference.

It will appear as though the page loaded very quickly,

when actually you're still loading in that functionality.

[Jason Seifer] That's something that I think is going to be a bit more useful

when you've got the plug-ins for saying, "Hey, like us on Facebook." "Post this on Twitter."

Load up your page first, and then put in the social buttons,

because that can slow a page down if you wait for everything to load.

[Nick Pettit] Especially if you have a lot of social buttons,

and you just want people to post your stuff all over the Internet,

then yeah--it's going to take a little while for all of those to load in,

so it's good to do it asynchronously.

[Jason Seifer] Nice.>>Yep.

[Jason Seifer] Next up is going to be our app review.

[Nick Pettit] Let's check it out.

?music? [APP REVIEW]

[Jason Seifer] Our app review this week is an app called "Dash."

Dash is a simple OS10 application that is a snippet manager and documentation browser.

Now, as we usually say--Dash is not sponsoring the show. This is a paid application.

Shame on them, but this is incredibly useful.

This is the Dash website right here.

But what it really lets you do is download your different documentation,

and then you've got this one window where you have all of your documentation

on the left, and then you can search through everything.

So, let's say you wanted to get the jQuery documentation for the Ajax method.

You just type in ".ajax," and it will very, very quickly filter through everything

and show you the matching methods in the documentation that it has available.

It also has options to Google the method you're looking for

or search stack overflow.

You can also set up a short-cut key to launch Dash from anywhere and search,

and then you can even set up your own snippets--

if you have a piece of code that you really like or grab it from the clipboard--

create a new snippet, and you can search from that as well.

In addition to what it comes built in with, you can always get more documentation.

There is a ton of different options for documentation, and then you can

also create your own using a specific format that they have on the site.

So, this is a really awesome application.

I just found it recently, and I've been using it basically nonstop.

So, yeah--check that out. We'll have a link to that in the show notes.

You can also get it in the Mac app store, just searching for "Dash."

[Nick Pettit] I think that's really cool, especially when you're searching for

a particular method, and you have lots of different JavaScript libraries installed,

it might be good to go ahead and compare methods.

Maybe for the project that you're working on, you don't actually need

all of the robustness of jQuery, and you can say, "Oh, well this smaller library

actually has the thing that I need already."

And I really like the code snippets feature, too.

It's good for organizing your code, especially over several years of development,

where you've worked on a project like 2 years ago, and you wrote this really cool thing.

It's good to remember that that's there, and that you can go ahead and use that, so--

[Jason Seifer] Oh, one other really nice feature--all the documentation works off-line,

so you don't have to be connected to the Internet. >>Whoa >>Yeah.

[Nick Pettit] That's good for when you're coding on an airplane.

[Jason Seifer] Exactly>>Although a lot of those have WiFi now.

[Jason Seifer] Which is the only time that I'm off line.>>Yeah.

[Nick Pettit] Next up is Foo Table, and Foo Table is a jQuery plug-in

that makes tables look really good at smaller mobile screen sizes.

[Jason Seifer] I thought it was pronounced "footable."

[Nick Pettit] It's actually not pronounced "footable." It's Foo Table--

[Jason Seifer] Okay. >>Believe it or not. >>Oh.

So, tables are notoriously bad on mobile screens.

Basically, when you resize the browser or resize your screen or your looking at a mobile screen,

it tends to look pretty bad.

Tables tend to cause a lot of horizontal scrolling,

and there just is so much data that you want to display,

but it just doesn't fit on the screen.

So, that has always been a challenge.

Foo Table aims to solve all of that,

and they basically do it by hiding some of the data.

So, it hides certain columns at different resolutions,

which in responsive web design we call "break points,"

and then the rows become expandable to show the data that's hidden.

So, you see these little + and - buttons there.

So, if a user is looking at a particular piece of data and they want to go ahead

and learn more about that, they can click on the little + button and expand it.

So, I think it's a pretty elegant solution for handling tables on mobile screens.

[Jason Seifer] That's awesome. Really, really useful.>>Yeah, pretty cool.

[Jason Seifer] Next up we are going to talk about an article on css tricks

on recreating the BERG Cloud buttons using only css and html.

So, over on the css tricks--also, no shame on them--they are a sponsor of Treehouse--

shame on us for doing this shameless self-promotion--

but there's some really cool buttons that they have over on the BERG Cloud,

and, as they say in the article, the BERG Cloud buttons are pretty sweet-looking.

So, the article just goes over how to recreate these kind of 3-D-ish buttons

with backgrounds using just a little tiny bit of markup.

And it goes through, tells you how to use the css box shadow attribute,

and different classes, and then finally you can go and see the final version

over on a CodePen link.

Look at that, look at that animation.>>Wow>>I know.

Incredible. It's like we're living in the future>>It's amazing.

[Jason Seifer] Using no images to create these buttons--pure css and html.

[Nick Pettit] That's awesome.>>Yeah, awesome post.

[Nick Pettit] So, next up is a blog post over on Design Shack

about a GitHub project that I believe is called "Focal Point."

It allows for intelligent cropping of responsive images.

So, what does that mean? Well, basically when you normally resize a responsive design,

the images will flex in scale, but sometimes images can get so small

that it's hard to really see what is relevant in the image.

So instead, this takes the approach of cropping the image.

Of course, the problem with that is that if you just kind of crop an image randomly

or--well not randomly--but with the normal focal point,

you might cut out what's actually important in the image.

It could be over on the right or the left or what have you.

This allows you to actually set a focal point for the cropping.

So for each one of your images, you basically can take a grid that looks like this,

and you would have your normal focal point which is in the middle,

and you can move it up and to the right, for example.

Now, the code for this is done in a class name that looks like this.

So, "right-3," and "up-3," and that's going to go ahead and change the focal point

for when an image is cropped.

So, on the left here you can see this original image,

and on the right you can see what it would looks like when it's cropped.

So, it maintains what's actually interesting about the image when it gets cropped

and flexed downward.

[Jason Seifer} That's amazing.>>Yeah.>>Not only is it a great idea for a plug-in--

css and JavaScript--but the site did an amazing explanation of it as well.

Those illustrations were extremely helpful.

[Nick Pettit] Yeah, it's actually a pretty complicated idea,

but that does make it really easy to understand.

Pretty nifty. >>Yeah.

[Jaon Seifer] Next up we have a project called TinyNav.js.

This is a very small piece of JavaScript that is also for responsive design.

It will take a navigation item that you have--say an unordered list with a bunch of list items--

and then on a hand-held device or when the screen shrinks to too small a size,

it will replace your navigation with a select drop down

with the same attributes as those links.

Also, if you are on a current page,

it will actually put that one as the selected attribute.

Now, you may be saying to yourself, "Hey, a lot of these plug-ins exist out there already."

"Why would I use this one?"

Well, the main advantage of TinyNav.js is that it's small.

It's only 443 bytes minified and gzipped.>>Wow.>>I know. That's tiny.

That's probably where they got the name, "TinyNav.js.">>Yeah.>>

So, I guess that makes sense. Yeah--anyway, there's a few options that you can go through,

including adding styles, and it's pretty a easy, pretty simple plug-in.

So, check that one out. That works all the way down to IE6.

[Nick Pettit] Wow.>>I know>>That's amazing.>>It is.

[Nick Pettit] So, Jason, what have we learned today?

[Jason Seifer] I think we learned that hair grows back, and we're all happy about that.

[Nick Pettit] Yep, I'm feeling pretty good.

I am @nickrp on Twitter.>>And I am @jseifer.

Thanks so much for tuning in to this episode of The Treehouse Show.

For show notes or more information on anything that we talked about,

check out our YouTube Channel at youtube.com/gotreehouse.

[Nick Pettit] And, of course, if you'd like to see more videos like this one

and learn about web design, web development, mobile development, or starting a business,

be sure to check us out at teamtreehouse.com.

Thanks so much for watching, and we'll see you next week.

?music? [The Treehouse Show]

?music? [treehouse]

If you'd like to see more advanced videos and tutorials like this one,

go to teamtreehouse.com and start learning for free.

?music?