1 00:00:01,230 --> 00:00:04,970 I'm Nick Pettit. I'm Jason Seifer. And you're watching the Treehouse Show-- 2 00:00:04,970 --> 00:00:08,119 your weekly dose of Internets, where we talk about all things web design, 3 00:00:08,119 --> 00:00:09,720 web development, and more. 4 00:00:10,240 --> 00:00:12,360 [Jason Seifer] In this episode, we'll be talking about error messages, 5 00:00:12,360 --> 00:00:17,290 the usual dose of responsive design, and our app review is "Dash." 6 00:00:17,290 --> 00:00:18,970 [Nick Pettit] Let's check it out. 7 00:00:18,970 --> 00:00:24,590 ?music? [The Treehouse Show] 8 00:00:24,590 --> 00:00:29,610 [Nick Pettit] First up is the 4 H's of writing error messages. 9 00:00:29,610 --> 00:00:34,330 This is a really cool post, and let's just get right into it. 10 00:00:34,330 --> 00:00:42,040 The 4 H's are error messages need to be: Human, Helpful, Humorous, and Humble. 11 00:00:42,910 --> 00:00:45,870 So, let's just break each one of those down really quick. 12 00:00:45,870 --> 00:00:47,760 What do we mean when we say "Human?" 13 00:00:47,760 --> 00:00:53,650 Well, this error message from twitter says, "Error unauthorized." 14 00:00:53,650 --> 00:00:56,170 That really doesn't make a lot of sense. 15 00:00:56,170 --> 00:00:59,420 It doesn't seem like it was written for people, 16 00:00:59,420 --> 00:01:04,120 and actually it doesn't even seem like it would make sense to anyone but a developer. 17 00:01:05,230 --> 00:01:06,260 [Jason Seifer] It makes perfect sense to me. 18 00:01:06,260 --> 00:01:09,540 [Nick Pettit] Well, you're a developer, Jason. So, of course, it does. 19 00:01:10,830 --> 00:01:12,730 [Jason Seifer] But, it's on the lower end of the human scale. 20 00:01:12,730 --> 00:01:17,160 [Nick Pettit] The Firefox error message here is, of course, a better example, 21 00:01:17,160 --> 00:01:19,240 where they say, "Well, this is embarrassing." 22 00:01:19,240 --> 00:01:24,210 I mean, that's something that is conversational, something that people would say in real life. 23 00:01:24,210 --> 00:01:26,270 So, next up is "Helpful." 24 00:01:27,060 --> 00:01:31,450 Is the error message actually helping the person solve the problem? 25 00:01:31,950 --> 00:01:38,340 So, if something goes wrong in the application, does it help them make it right? 26 00:01:38,340 --> 00:01:40,760 If they entered bad data, are you telling them, 27 00:01:40,760 --> 00:01:43,520 "Hey, you actually needed to enter this other thing." 28 00:01:43,520 --> 00:01:46,020 [Jason Seifer] For example, if passwords didn't match, 29 00:01:46,020 --> 00:01:48,270 are you saying the passwords didn't match, 30 00:01:48,270 --> 00:01:50,260 or couldn't sign you up for the site. 31 00:01:50,260 --> 00:01:52,890 [Nick Pettit] Exactly. That's exactly right. 32 00:01:53,640 --> 00:01:55,660 Next up, is "Humorous." 33 00:01:55,660 --> 00:02:00,080 So, when Last.fm goes down, it's always amusing. It says, 34 00:02:00,080 --> 00:02:05,000 "Holy moly, we just blew a fuse. Need...more...amps." 35 00:02:05,000 --> 00:02:07,780 I mean--you know, it's pretty funny. 36 00:02:07,780 --> 00:02:10,009 I really like this example from Gmail as well. 37 00:02:10,759 --> 00:02:16,060 When you go ahead and type in your user name and you have too many periods 38 00:02:16,060 --> 00:02:19,150 or a bunch of other different pieces of punctuation, 39 00:02:19,150 --> 00:02:25,800 it says, "A fan of punctuation! Alas, user names can't have consecutive periods." 40 00:02:26,350 --> 00:02:28,950 So, pretty nifty. 41 00:02:29,660 --> 00:02:30,750 The last one is "Humble." 42 00:02:30,750 --> 00:02:35,490 Basically, it's just saying that you should be apologetic when something goes wrong. 43 00:02:35,490 --> 00:02:39,800 Because often times when something goes wrong in a piece of software, 44 00:02:39,800 --> 00:02:42,520 the user will often feel like they caused the problem. 45 00:02:42,520 --> 00:02:47,790 They're like, "Ah, geez. I broke it. I must be stupid. I must not know how to use this." 46 00:02:47,790 --> 00:02:50,180 When really, it's probably the application. 47 00:02:50,180 --> 00:02:53,350 [Jason Seifer] So, you shouldn't say, "Error. This is probably your fault." 48 00:02:53,350 --> 00:02:59,410 [Nick Pettit] That's pretty much it, Jason. You basically want to apologize to the user and say, 49 00:02:59,410 --> 00:03:04,210 "Ah, we're sorry. Something went wrong. We're going to try to fix that as soon as we can." 50 00:03:04,210 --> 00:03:05,280 [Jason Seifer] Well, that's legit. 51 00:03:05,280 --> 00:03:06,100 [Nick Pettit] Yeah. 52 00:03:06,100 --> 00:03:07,990 [Jason Seifer] Yeah, cool. Nice bunch of tips there. 53 00:03:07,990 --> 00:03:13,290 I thought it was going to be more along--you know--dodgeball tips, but whatever. 54 00:03:13,290 --> 00:03:15,730 [Nick Pettit] No, no. Not quite. 55 00:03:15,730 --> 00:03:18,530 [Jason Seifer] Next up we have a project called "jHERE." 56 00:03:18,530 --> 00:03:21,720 This is billed as maps made easy. 57 00:03:21,720 --> 00:03:29,060 This is a jQuery plug-in that provides a layer of abstraction over on the HERE map's API. 58 00:03:29,750 --> 00:03:33,670 So, there's a bunch of different things that you can do when working with the HERE map's API, 59 00:03:33,670 --> 00:03:40,110 and using this jQuery plug-in, you get a very, very easy and simple way 60 00:03:40,110 --> 00:03:44,330 of working with what can be a really complicated API. 61 00:03:45,140 --> 00:03:49,400 Now, if you take a look at the documentation for jHERE, 62 00:03:49,400 --> 00:03:53,360 it's very simple and quick to include on your page, 63 00:03:53,360 --> 00:03:56,840 and making a map is really easy. 64 00:03:56,840 --> 00:03:58,670 This is just a couple of lines of code, 65 00:03:58,670 --> 00:04:05,350 drop it into your page, and there are different options that you can have as well. 66 00:04:07,040 --> 00:04:11,160 Very, very simple to use and--yeah, check that out--jHERE. 67 00:04:12,000 --> 00:04:14,660 It uses the HERE map's API which you don't see a lot of people using, 68 00:04:14,660 --> 00:04:16,649 but they do provide really good maps. 69 00:04:16,649 --> 00:04:18,149 [Nick Pettit] Pretty nifty. 70 00:04:18,810 --> 00:04:22,079 So, next up is a blog post about fun and performance. 71 00:04:22,079 --> 00:04:26,030 For those of you who are more advanced, this might be old news, 72 00:04:26,030 --> 00:04:29,120 but it's always good to remind ourselves about techniques 73 00:04:29,120 --> 00:04:32,860 that provide good front-end performance. 74 00:04:33,380 --> 00:04:38,540 So, I won't go through all these tips, but the first 2 talk about resource packaging 75 00:04:38,540 --> 00:04:43,070 and using a single host's name, so obviously you want to try to reduce 76 00:04:43,070 --> 00:04:46,780 the number of resources that you have as much as possible 77 00:04:46,780 --> 00:04:52,990 and try to reduce those http requests and serve them all on a single host name. 78 00:04:54,120 --> 00:04:57,610 Another tip is to load JavaScript asynchronously. 79 00:04:57,610 --> 00:05:02,500 So, for example, you can go ahead and load in all of your html and css 80 00:05:02,500 --> 00:05:07,490 and actually display something on the page that the user can actually see 81 00:05:07,490 --> 00:05:10,340 and then in that split second after the page loads, 82 00:05:10,340 --> 00:05:12,590 you can go ahead and load in your JavaScript, 83 00:05:12,590 --> 00:05:15,830 and they won't really know the difference. 84 00:05:15,830 --> 00:05:17,930 It will appear as though the page loaded very quickly, 85 00:05:17,930 --> 00:05:21,130 when actually you're still loading in that functionality. 86 00:05:21,130 --> 00:05:23,510 [Jason Seifer] That's something that I think is going to be a bit more useful 87 00:05:23,510 --> 00:05:28,730 when you've got the plug-ins for saying, "Hey, like us on Facebook." "Post this on Twitter." 88 00:05:28,730 --> 00:05:31,770 Load up your page first, and then put in the social buttons, 89 00:05:31,770 --> 00:05:35,220 because that can slow a page down if you wait for everything to load. 90 00:05:35,220 --> 00:05:37,540 [Nick Pettit] Especially if you have a lot of social buttons, 91 00:05:37,540 --> 00:05:41,770 and you just want people to post your stuff all over the Internet, 92 00:05:41,770 --> 00:05:44,260 then yeah--it's going to take a little while for all of those to load in, 93 00:05:44,260 --> 00:05:46,220 so it's good to do it asynchronously. 94 00:05:46,220 --> 00:05:47,590 [Jason Seifer] Nice.>>Yep. 95 00:05:47,590 --> 00:05:50,090 [Jason Seifer] Next up is going to be our app review. 96 00:05:50,640 --> 00:05:51,900 [Nick Pettit] Let's check it out. 97 00:05:51,900 --> 00:05:56,600 ?music? [APP REVIEW] 98 00:05:56,600 --> 00:06:00,680 [Jason Seifer] Our app review this week is an app called "Dash." 99 00:06:00,680 --> 00:06:07,220 Dash is a simple OS10 application that is a snippet manager and documentation browser. 100 00:06:07,880 --> 00:06:12,190 Now, as we usually say--Dash is not sponsoring the show. This is a paid application. 101 00:06:13,470 --> 00:06:16,940 Shame on them, but this is incredibly useful. 102 00:06:16,940 --> 00:06:18,400 This is the Dash website right here. 103 00:06:18,400 --> 00:06:23,340 But what it really lets you do is download your different documentation, 104 00:06:23,340 --> 00:06:27,740 and then you've got this one window where you have all of your documentation 105 00:06:27,740 --> 00:06:31,060 on the left, and then you can search through everything. 106 00:06:31,060 --> 00:06:36,410 So, let's say you wanted to get the jQuery documentation for the Ajax method. 107 00:06:36,410 --> 00:06:42,760 You just type in ".ajax," and it will very, very quickly filter through everything 108 00:06:42,760 --> 00:06:48,200 and show you the matching methods in the documentation that it has available. 109 00:06:48,200 --> 00:06:51,360 It also has options to Google the method you're looking for 110 00:06:51,360 --> 00:06:53,210 or search stack overflow. 111 00:06:54,230 --> 00:06:59,260 You can also set up a short-cut key to launch Dash from anywhere and search, 112 00:06:59,260 --> 00:07:02,290 and then you can even set up your own snippets-- 113 00:07:02,290 --> 00:07:06,420 if you have a piece of code that you really like or grab it from the clipboard-- 114 00:07:06,420 --> 00:07:08,730 create a new snippet, and you can search from that as well. 115 00:07:09,840 --> 00:07:14,670 In addition to what it comes built in with, you can always get more documentation. 116 00:07:14,670 --> 00:07:21,250 There is a ton of different options for documentation, and then you can 117 00:07:21,250 --> 00:07:25,230 also create your own using a specific format that they have on the site. 118 00:07:26,020 --> 00:07:29,120 So, this is a really awesome application. 119 00:07:29,120 --> 00:07:33,140 I just found it recently, and I've been using it basically nonstop. 120 00:07:33,140 --> 00:07:36,450 So, yeah--check that out. We'll have a link to that in the show notes. 121 00:07:36,450 --> 00:07:40,180 You can also get it in the Mac app store, just searching for "Dash." 122 00:07:40,180 --> 00:07:44,000 [Nick Pettit] I think that's really cool, especially when you're searching for 123 00:07:44,000 --> 00:07:48,920 a particular method, and you have lots of different JavaScript libraries installed, 124 00:07:48,920 --> 00:07:52,620 it might be good to go ahead and compare methods. 125 00:07:52,620 --> 00:07:55,330 Maybe for the project that you're working on, you don't actually need 126 00:07:55,330 --> 00:07:59,870 all of the robustness of jQuery, and you can say, "Oh, well this smaller library 127 00:07:59,870 --> 00:08:02,070 actually has the thing that I need already." 128 00:08:02,070 --> 00:08:04,630 And I really like the code snippets feature, too. 129 00:08:04,630 --> 00:08:09,970 It's good for organizing your code, especially over several years of development, 130 00:08:09,970 --> 00:08:13,700 where you've worked on a project like 2 years ago, and you wrote this really cool thing. 131 00:08:13,700 --> 00:08:18,400 It's good to remember that that's there, and that you can go ahead and use that, so-- 132 00:08:18,400 --> 00:08:22,320 [Jason Seifer] Oh, one other really nice feature--all the documentation works off-line, 133 00:08:22,320 --> 00:08:25,090 so you don't have to be connected to the Internet. >>Whoa >>Yeah. 134 00:08:25,090 --> 00:08:27,680 [Nick Pettit] That's good for when you're coding on an airplane. 135 00:08:27,680 --> 00:08:29,570 [Jason Seifer] Exactly>>Although a lot of those have WiFi now. 136 00:08:29,570 --> 00:08:32,190 [Jason Seifer] Which is the only time that I'm off line.>>Yeah. 137 00:08:33,380 --> 00:08:37,700 [Nick Pettit] Next up is Foo Table, and Foo Table is a jQuery plug-in 138 00:08:37,700 --> 00:08:43,280 that makes tables look really good at smaller mobile screen sizes. 139 00:08:43,280 --> 00:08:44,840 [Jason Seifer] I thought it was pronounced "footable." 140 00:08:44,840 --> 00:08:49,170 [Nick Pettit] It's actually not pronounced "footable." It's Foo Table-- 141 00:08:49,170 --> 00:08:51,390 [Jason Seifer] Okay. >>Believe it or not. >>Oh. 142 00:08:52,150 --> 00:08:56,680 So, tables are notoriously bad on mobile screens. 143 00:08:56,680 --> 00:09:04,830 Basically, when you resize the browser or resize your screen or your looking at a mobile screen, 144 00:09:04,830 --> 00:09:07,650 it tends to look pretty bad. 145 00:09:07,650 --> 00:09:12,290 Tables tend to cause a lot of horizontal scrolling, 146 00:09:12,290 --> 00:09:15,970 and there just is so much data that you want to display, 147 00:09:15,970 --> 00:09:17,740 but it just doesn't fit on the screen. 148 00:09:18,560 --> 00:09:20,770 So, that has always been a challenge. 149 00:09:20,770 --> 00:09:22,920 Foo Table aims to solve all of that, 150 00:09:22,920 --> 00:09:28,060 and they basically do it by hiding some of the data. 151 00:09:28,060 --> 00:09:32,560 So, it hides certain columns at different resolutions, 152 00:09:32,560 --> 00:09:35,190 which in responsive web design we call "break points," 153 00:09:35,190 --> 00:09:41,230 and then the rows become expandable to show the data that's hidden. 154 00:09:41,230 --> 00:09:44,320 So, you see these little + and - buttons there. 155 00:09:44,320 --> 00:09:49,350 So, if a user is looking at a particular piece of data and they want to go ahead 156 00:09:49,350 --> 00:09:54,530 and learn more about that, they can click on the little + button and expand it. 157 00:09:54,530 --> 00:10:01,640 So, I think it's a pretty elegant solution for handling tables on mobile screens. 158 00:10:01,640 --> 00:10:04,600 [Jason Seifer] That's awesome. Really, really useful.>>Yeah, pretty cool. 159 00:10:04,600 --> 00:10:08,590 [Jason Seifer] Next up we are going to talk about an article on css tricks 160 00:10:08,590 --> 00:10:15,830 on recreating the BERG Cloud buttons using only css and html. 161 00:10:16,380 --> 00:10:20,910 So, over on the css tricks--also, no shame on them--they are a sponsor of Treehouse-- 162 00:10:20,910 --> 00:10:24,610 shame on us for doing this shameless self-promotion-- 163 00:10:24,610 --> 00:10:29,620 but there's some really cool buttons that they have over on the BERG Cloud, 164 00:10:29,620 --> 00:10:34,970 and, as they say in the article, the BERG Cloud buttons are pretty sweet-looking. 165 00:10:34,970 --> 00:10:40,840 So, the article just goes over how to recreate these kind of 3-D-ish buttons 166 00:10:40,840 --> 00:10:45,910 with backgrounds using just a little tiny bit of markup. 167 00:10:47,140 --> 00:10:51,320 And it goes through, tells you how to use the css box shadow attribute, 168 00:10:51,320 --> 00:10:56,590 and different classes, and then finally you can go and see the final version 169 00:10:56,590 --> 00:10:58,700 over on a CodePen link. 170 00:10:58,870 --> 00:11:01,770 Look at that, look at that animation.>>Wow>>I know. 171 00:11:01,770 --> 00:11:05,120 Incredible. It's like we're living in the future>>It's amazing. 172 00:11:05,120 --> 00:11:09,990 [Jason Seifer] Using no images to create these buttons--pure css and html. 173 00:11:10,720 --> 00:11:11,810 [Nick Pettit] That's awesome.>>Yeah, awesome post. 174 00:11:12,610 --> 00:11:16,010 [Nick Pettit] So, next up is a blog post over on Design Shack 175 00:11:16,010 --> 00:11:20,330 about a GitHub project that I believe is called "Focal Point." 176 00:11:20,330 --> 00:11:25,480 It allows for intelligent cropping of responsive images. 177 00:11:25,480 --> 00:11:31,040 So, what does that mean? Well, basically when you normally resize a responsive design, 178 00:11:31,040 --> 00:11:36,820 the images will flex in scale, but sometimes images can get so small 179 00:11:36,820 --> 00:11:41,100 that it's hard to really see what is relevant in the image. 180 00:11:41,100 --> 00:11:44,830 So instead, this takes the approach of cropping the image. 181 00:11:44,830 --> 00:11:50,090 Of course, the problem with that is that if you just kind of crop an image randomly 182 00:11:50,090 --> 00:11:53,770 or--well not randomly--but with the normal focal point, 183 00:11:53,770 --> 00:11:56,800 you might cut out what's actually important in the image. 184 00:11:56,800 --> 00:12:00,370 It could be over on the right or the left or what have you. 185 00:12:00,370 --> 00:12:05,380 This allows you to actually set a focal point for the cropping. 186 00:12:06,020 --> 00:12:11,710 So for each one of your images, you basically can take a grid that looks like this, 187 00:12:11,710 --> 00:12:17,050 and you would have your normal focal point which is in the middle, 188 00:12:17,050 --> 00:12:20,870 and you can move it up and to the right, for example. 189 00:12:21,800 --> 00:12:27,440 Now, the code for this is done in a class name that looks like this. 190 00:12:27,440 --> 00:12:33,780 So, "right-3," and "up-3," and that's going to go ahead and change the focal point 191 00:12:33,780 --> 00:12:36,480 for when an image is cropped. 192 00:12:36,480 --> 00:12:38,780 So, on the left here you can see this original image, 193 00:12:38,780 --> 00:12:42,360 and on the right you can see what it would looks like when it's cropped. 194 00:12:42,360 --> 00:12:48,020 So, it maintains what's actually interesting about the image when it gets cropped 195 00:12:48,020 --> 00:12:50,540 and flexed downward. 196 00:12:50,540 --> 00:12:55,460 [Jason Seifer} That's amazing.>>Yeah.>>Not only is it a great idea for a plug-in-- 197 00:12:55,460 --> 00:13:00,110 css and JavaScript--but the site did an amazing explanation of it as well. 198 00:13:00,110 --> 00:13:02,140 Those illustrations were extremely helpful. 199 00:13:02,140 --> 00:13:04,530 [Nick Pettit] Yeah, it's actually a pretty complicated idea, 200 00:13:04,530 --> 00:13:08,620 but that does make it really easy to understand. 201 00:13:09,470 --> 00:13:10,920 Pretty nifty. >>Yeah. 202 00:13:10,920 --> 00:13:13,870 [Jaon Seifer] Next up we have a project called TinyNav.js. 203 00:13:13,870 --> 00:13:19,080 This is a very small piece of JavaScript that is also for responsive design. 204 00:13:19,080 --> 00:13:24,570 It will take a navigation item that you have--say an unordered list with a bunch of list items-- 205 00:13:24,570 --> 00:13:29,860 and then on a hand-held device or when the screen shrinks to too small a size, 206 00:13:29,860 --> 00:13:33,260 it will replace your navigation with a select drop down 207 00:13:33,260 --> 00:13:35,500 with the same attributes as those links. 208 00:13:36,690 --> 00:13:38,380 Also, if you are on a current page, 209 00:13:38,380 --> 00:13:41,550 it will actually put that one as the selected attribute. 210 00:13:42,130 --> 00:13:47,250 Now, you may be saying to yourself, "Hey, a lot of these plug-ins exist out there already." 211 00:13:47,250 --> 00:13:48,840 "Why would I use this one?" 212 00:13:48,840 --> 00:13:53,010 Well, the main advantage of TinyNav.js is that it's small. 213 00:13:53,010 --> 00:13:59,480 It's only 443 bytes minified and gzipped.>>Wow.>>I know. That's tiny. 214 00:13:59,480 --> 00:14:03,330 That's probably where they got the name, "TinyNav.js.">>Yeah.>> 215 00:14:03,330 --> 00:14:07,070 So, I guess that makes sense. Yeah--anyway, there's a few options that you can go through, 216 00:14:07,070 --> 00:14:12,290 including adding styles, and it's pretty a easy, pretty simple plug-in. 217 00:14:14,070 --> 00:14:16,270 So, check that one out. That works all the way down to IE6. 218 00:14:16,270 --> 00:14:19,380 [Nick Pettit] Wow.>>I know>>That's amazing.>>It is. 219 00:14:19,380 --> 00:14:21,510 [Nick Pettit] So, Jason, what have we learned today? 220 00:14:21,510 --> 00:14:24,750 [Jason Seifer] I think we learned that hair grows back, and we're all happy about that. 221 00:14:24,750 --> 00:14:26,600 [Nick Pettit] Yep, I'm feeling pretty good. 222 00:14:26,600 --> 00:14:30,530 I am @nickrp on Twitter.>>And I am @jseifer. 223 00:14:30,530 --> 00:14:33,540 Thanks so much for tuning in to this episode of The Treehouse Show. 224 00:14:33,540 --> 00:14:36,490 For show notes or more information on anything that we talked about, 225 00:14:36,490 --> 00:14:40,950 check out our YouTube Channel at youtube.com/gotreehouse. 226 00:14:40,950 --> 00:14:44,180 [Nick Pettit] And, of course, if you'd like to see more videos like this one 227 00:14:44,180 --> 00:14:49,610 and learn about web design, web development, mobile development, or starting a business, 228 00:14:49,610 --> 00:14:52,470 be sure to check us out at teamtreehouse.com. 229 00:14:52,470 --> 00:14:55,500 Thanks so much for watching, and we'll see you next week. 230 00:14:56,750 --> 00:14:58,420 ?music? [The Treehouse Show] 231 00:14:58,420 --> 00:15:02,190 ?music? [treehouse] 232 00:15:02,190 --> 00:15:06,020 If you'd like to see more advanced videos and tutorials like this one, 233 00:15:06,020 --> 00:15:09,740 go to teamtreehouse.com and start learning for free. 234 00:15:09,740 --> 00:15:30,000 ?music?