Episode 23: Writing Error Messages, Navigation, and Documentation

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