You've already started watching Episode 23: Writing Error Messages, Navigation, and Documentation
Episode 23: Writing Error Messages, Navigation, and Documentation
15:00 with Nick Pettit and Jason SeiferIn this episode of The Treehouse Show, Nick Pettit (@nickrp) and Jason Seifer (@jseifer) talk about writing error messages, navigation, and documentation.
-
0:01
I'm Nick Pettit. I'm Jason Seifer. And you're watching the Treehouse Show--
-
0:04
your weekly dose of Internets, where we talk about all things web design,
-
0:08
web development, and more.
-
0:10
[Jason Seifer] In this episode, we'll be talking about error messages,
-
0:12
the usual dose of responsive design, and our app review is "Dash."
-
0:17
[Nick Pettit] Let's check it out.
-
0:18
?music? [The Treehouse Show]
-
0:24
[Nick Pettit] First up is the 4 H's of writing error messages.
-
0:29
This is a really cool post, and let's just get right into it.
-
0:34
The 4 H's are error messages need to be: Human, Helpful, Humorous, and Humble.
-
0:42
So, let's just break each one of those down really quick.
-
0:45
What do we mean when we say "Human?"
-
0:47
Well, this error message from twitter says, "Error unauthorized."
-
0:53
That really doesn't make a lot of sense.
-
0:56
It doesn't seem like it was written for people,
-
0:59
and actually it doesn't even seem like it would make sense to anyone but a developer.
-
1:05
[Jason Seifer] It makes perfect sense to me.
-
1:06
[Nick Pettit] Well, you're a developer, Jason. So, of course, it does.
-
1:10
[Jason Seifer] But, it's on the lower end of the human scale.
-
1:12
[Nick Pettit] The Firefox error message here is, of course, a better example,
-
1:17
where they say, "Well, this is embarrassing."
-
1:19
I mean, that's something that is conversational, something that people would say in real life.
-
1:24
So, next up is "Helpful."
-
1:27
Is the error message actually helping the person solve the problem?
-
1:31
So, if something goes wrong in the application, does it help them make it right?
-
1:38
If they entered bad data, are you telling them,
-
1:40
"Hey, you actually needed to enter this other thing."
-
1:43
[Jason Seifer] For example, if passwords didn't match,
-
1:46
are you saying the passwords didn't match,
-
1:48
or couldn't sign you up for the site.
-
1:50
[Nick Pettit] Exactly. That's exactly right.
-
1:53
Next up, is "Humorous."
-
1:55
So, when Last.fm goes down, it's always amusing. It says,
-
2:00
"Holy moly, we just blew a fuse. Need...more...amps."
-
2:05
I mean--you know, it's pretty funny.
-
2:07
I really like this example from Gmail as well.
-
2:10
When you go ahead and type in your user name and you have too many periods
-
2:16
or a bunch of other different pieces of punctuation,
-
2:19
it says, "A fan of punctuation! Alas, user names can't have consecutive periods."
-
2:26
So, pretty nifty.
-
2:29
The last one is "Humble."
-
2:30
Basically, it's just saying that you should be apologetic when something goes wrong.
-
2:35
Because often times when something goes wrong in a piece of software,
-
2:39
the user will often feel like they caused the problem.
-
2:42
They're like, "Ah, geez. I broke it. I must be stupid. I must not know how to use this."
-
2:47
When really, it's probably the application.
-
2:50
[Jason Seifer] So, you shouldn't say, "Error. This is probably your fault."
-
2:53
[Nick Pettit] That's pretty much it, Jason. You basically want to apologize to the user and say,
-
2:59
"Ah, we're sorry. Something went wrong. We're going to try to fix that as soon as we can."
-
3:04
[Jason Seifer] Well, that's legit.
-
3:05
[Nick Pettit] Yeah.
-
3:06
[Jason Seifer] Yeah, cool. Nice bunch of tips there.
-
3:07
I thought it was going to be more along--you know--dodgeball tips, but whatever.
-
3:13
[Nick Pettit] No, no. Not quite.
-
3:15
[Jason Seifer] Next up we have a project called "jHERE."
-
3:18
This is billed as maps made easy.
-
3:21
This is a jQuery plug-in that provides a layer of abstraction over on the HERE map's API.
-
3:29
So, there's a bunch of different things that you can do when working with the HERE map's API,
-
3:33
and using this jQuery plug-in, you get a very, very easy and simple way
-
3:40
of working with what can be a really complicated API.
-
3:45
Now, if you take a look at the documentation for jHERE,
-
3:49
it's very simple and quick to include on your page,
-
3:53
and making a map is really easy.
-
3:56
This is just a couple of lines of code,
-
3:58
drop it into your page, and there are different options that you can have as well.
-
4:07
Very, very simple to use and--yeah, check that out--jHERE.
-
4:12
It uses the HERE map's API which you don't see a lot of people using,
-
4:14
but they do provide really good maps.
-
4:16
[Nick Pettit] Pretty nifty.
-
4:18
So, next up is a blog post about fun and performance.
-
4:22
For those of you who are more advanced, this might be old news,
-
4:26
but it's always good to remind ourselves about techniques
-
4:29
that provide good front-end performance.
-
4:33
So, I won't go through all these tips, but the first 2 talk about resource packaging
-
4:38
and using a single host's name, so obviously you want to try to reduce
-
4:43
the number of resources that you have as much as possible
-
4:46
and try to reduce those http requests and serve them all on a single host name.
-
4:54
Another tip is to load JavaScript asynchronously.
-
4:57
So, for example, you can go ahead and load in all of your html and css
-
5:02
and actually display something on the page that the user can actually see
-
5:07
and then in that split second after the page loads,
-
5:10
you can go ahead and load in your JavaScript,
-
5:12
and they won't really know the difference.
-
5:15
It will appear as though the page loaded very quickly,
-
5:17
when actually you're still loading in that functionality.
-
5:21
[Jason Seifer] That's something that I think is going to be a bit more useful
-
5:23
when you've got the plug-ins for saying, "Hey, like us on Facebook." "Post this on Twitter."
-
5:28
Load up your page first, and then put in the social buttons,
-
5:31
because that can slow a page down if you wait for everything to load.
-
5:35
[Nick Pettit] Especially if you have a lot of social buttons,
-
5:37
and you just want people to post your stuff all over the Internet,
-
5:41
then yeah--it's going to take a little while for all of those to load in,
-
5:44
so it's good to do it asynchronously.
-
5:46
[Jason Seifer] Nice.>>Yep.
-
5:47
[Jason Seifer] Next up is going to be our app review.
-
5:50
[Nick Pettit] Let's check it out.
-
5:51
?music? [APP REVIEW]
-
5:56
[Jason Seifer] Our app review this week is an app called "Dash."
-
6:00
Dash is a simple OS10 application that is a snippet manager and documentation browser.
-
6:07
Now, as we usually say--Dash is not sponsoring the show. This is a paid application.
-
6:13
Shame on them, but this is incredibly useful.
-
6:16
This is the Dash website right here.
-
6:18
But what it really lets you do is download your different documentation,
-
6:23
and then you've got this one window where you have all of your documentation
-
6:27
on the left, and then you can search through everything.
-
6:31
So, let's say you wanted to get the jQuery documentation for the Ajax method.
-
6:36
You just type in ".ajax," and it will very, very quickly filter through everything
-
6:42
and show you the matching methods in the documentation that it has available.
-
6:48
It also has options to Google the method you're looking for
-
6:51
or search stack overflow.
-
6:54
You can also set up a short-cut key to launch Dash from anywhere and search,
-
6:59
and then you can even set up your own snippets--
-
7:02
if you have a piece of code that you really like or grab it from the clipboard--
-
7:06
create a new snippet, and you can search from that as well.
-
7:09
In addition to what it comes built in with, you can always get more documentation.
-
7:14
There is a ton of different options for documentation, and then you can
-
7:21
also create your own using a specific format that they have on the site.
-
7:26
So, this is a really awesome application.
-
7:29
I just found it recently, and I've been using it basically nonstop.
-
7:33
So, yeah--check that out. We'll have a link to that in the show notes.
-
7:36
You can also get it in the Mac app store, just searching for "Dash."
-
7:40
[Nick Pettit] I think that's really cool, especially when you're searching for
-
7:44
a particular method, and you have lots of different JavaScript libraries installed,
-
7:48
it might be good to go ahead and compare methods.
-
7:52
Maybe for the project that you're working on, you don't actually need
-
7:55
all of the robustness of jQuery, and you can say, "Oh, well this smaller library
-
7:59
actually has the thing that I need already."
-
8:02
And I really like the code snippets feature, too.
-
8:04
It's good for organizing your code, especially over several years of development,
-
8:09
where you've worked on a project like 2 years ago, and you wrote this really cool thing.
-
8:13
It's good to remember that that's there, and that you can go ahead and use that, so--
-
8:18
[Jason Seifer] Oh, one other really nice feature--all the documentation works off-line,
-
8:22
so you don't have to be connected to the Internet. >>Whoa >>Yeah.
-
8:25
[Nick Pettit] That's good for when you're coding on an airplane.
-
8:27
[Jason Seifer] Exactly>>Although a lot of those have WiFi now.
-
8:29
[Jason Seifer] Which is the only time that I'm off line.>>Yeah.
-
8:33
[Nick Pettit] Next up is Foo Table, and Foo Table is a jQuery plug-in
-
8:37
that makes tables look really good at smaller mobile screen sizes.
-
8:43
[Jason Seifer] I thought it was pronounced "footable."
-
8:44
[Nick Pettit] It's actually not pronounced "footable." It's Foo Table--
-
8:49
[Jason Seifer] Okay. >>Believe it or not. >>Oh.
-
8:52
So, tables are notoriously bad on mobile screens.
-
8:56
Basically, when you resize the browser or resize your screen or your looking at a mobile screen,
-
9:04
it tends to look pretty bad.
-
9:07
Tables tend to cause a lot of horizontal scrolling,
-
9:12
and there just is so much data that you want to display,
-
9:15
but it just doesn't fit on the screen.
-
9:18
So, that has always been a challenge.
-
9:20
Foo Table aims to solve all of that,
-
9:22
and they basically do it by hiding some of the data.
-
9:28
So, it hides certain columns at different resolutions,
-
9:32
which in responsive web design we call "break points,"
-
9:35
and then the rows become expandable to show the data that's hidden.
-
9:41
So, you see these little + and - buttons there.
-
9:44
So, if a user is looking at a particular piece of data and they want to go ahead
-
9:49
and learn more about that, they can click on the little + button and expand it.
-
9:54
So, I think it's a pretty elegant solution for handling tables on mobile screens.
-
10:01
[Jason Seifer] That's awesome. Really, really useful.>>Yeah, pretty cool.
-
10:04
[Jason Seifer] Next up we are going to talk about an article on css tricks
-
10:08
on recreating the BERG Cloud buttons using only css and html.
-
10:16
So, over on the css tricks--also, no shame on them--they are a sponsor of Treehouse--
-
10:20
shame on us for doing this shameless self-promotion--
-
10:24
but there's some really cool buttons that they have over on the BERG Cloud,
-
10:29
and, as they say in the article, the BERG Cloud buttons are pretty sweet-looking.
-
10:34
So, the article just goes over how to recreate these kind of 3-D-ish buttons
-
10:40
with backgrounds using just a little tiny bit of markup.
-
10:47
And it goes through, tells you how to use the css box shadow attribute,
-
10:51
and different classes, and then finally you can go and see the final version
-
10:56
over on a CodePen link.
-
10:58
Look at that, look at that animation.>>Wow>>I know.
-
11:01
Incredible. It's like we're living in the future>>It's amazing.
-
11:05
[Jason Seifer] Using no images to create these buttons--pure css and html.
-
11:10
[Nick Pettit] That's awesome.>>Yeah, awesome post.
-
11:12
[Nick Pettit] So, next up is a blog post over on Design Shack
-
11:16
about a GitHub project that I believe is called "Focal Point."
-
11:20
It allows for intelligent cropping of responsive images.
-
11:25
So, what does that mean? Well, basically when you normally resize a responsive design,
-
11:31
the images will flex in scale, but sometimes images can get so small
-
11:36
that it's hard to really see what is relevant in the image.
-
11:41
So instead, this takes the approach of cropping the image.
-
11:44
Of course, the problem with that is that if you just kind of crop an image randomly
-
11:50
or--well not randomly--but with the normal focal point,
-
11:53
you might cut out what's actually important in the image.
-
11:56
It could be over on the right or the left or what have you.
-
12:00
This allows you to actually set a focal point for the cropping.
-
12:06
So for each one of your images, you basically can take a grid that looks like this,
-
12:11
and you would have your normal focal point which is in the middle,
-
12:17
and you can move it up and to the right, for example.
-
12:21
Now, the code for this is done in a class name that looks like this.
-
12:27
So, "right-3," and "up-3," and that's going to go ahead and change the focal point
-
12:33
for when an image is cropped.
-
12:36
So, on the left here you can see this original image,
-
12:38
and on the right you can see what it would looks like when it's cropped.
-
12:42
So, it maintains what's actually interesting about the image when it gets cropped
-
12:48
and flexed downward.
-
12:50
[Jason Seifer} That's amazing.>>Yeah.>>Not only is it a great idea for a plug-in--
-
12:55
css and JavaScript--but the site did an amazing explanation of it as well.
-
13:00
Those illustrations were extremely helpful.
-
13:02
[Nick Pettit] Yeah, it's actually a pretty complicated idea,
-
13:04
but that does make it really easy to understand.
-
13:09
Pretty nifty. >>Yeah.
-
13:10
[Jaon Seifer] Next up we have a project called TinyNav.js.
-
13:13
This is a very small piece of JavaScript that is also for responsive design.
-
13:19
It will take a navigation item that you have--say an unordered list with a bunch of list items--
-
13:24
and then on a hand-held device or when the screen shrinks to too small a size,
-
13:29
it will replace your navigation with a select drop down
-
13:33
with the same attributes as those links.
-
13:36
Also, if you are on a current page,
-
13:38
it will actually put that one as the selected attribute.
-
13:42
Now, you may be saying to yourself, "Hey, a lot of these plug-ins exist out there already."
-
13:47
"Why would I use this one?"
-
13:48
Well, the main advantage of TinyNav.js is that it's small.
-
13:53
It's only 443 bytes minified and gzipped.>>Wow.>>I know. That's tiny.
-
13:59
That's probably where they got the name, "TinyNav.js.">>Yeah.>>
-
14:03
So, I guess that makes sense. Yeah--anyway, there's a few options that you can go through,
-
14:07
including adding styles, and it's pretty a easy, pretty simple plug-in.
-
14:14
So, check that one out. That works all the way down to IE6.
-
14:16
[Nick Pettit] Wow.>>I know>>That's amazing.>>It is.
-
14:19
[Nick Pettit] So, Jason, what have we learned today?
-
14:21
[Jason Seifer] I think we learned that hair grows back, and we're all happy about that.
-
14:24
[Nick Pettit] Yep, I'm feeling pretty good.
-
14:26
I am @nickrp on Twitter.>>And I am @jseifer.
-
14:30
Thanks so much for tuning in to this episode of The Treehouse Show.
-
14:33
For show notes or more information on anything that we talked about,
-
14:36
check out our YouTube Channel at youtube.com/gotreehouse.
-
14:40
[Nick Pettit] And, of course, if you'd like to see more videos like this one
-
14:44
and learn about web design, web development, mobile development, or starting a business,
-
14:49
be sure to check us out at teamtreehouse.com.
-
14:52
Thanks so much for watching, and we'll see you next week.
-
14:56
?music? [The Treehouse Show]
-
14:58
?music? [treehouse]
-
15:02
If you'd like to see more advanced videos and tutorials like this one,
-
15:06
go to teamtreehouse.com and start learning for free.
-
15:09
?music?
You need to sign up for Treehouse in order to download course files.
Sign up