1 00:00:00,240 --> 00:00:01,010 I'm Nick Pettit. 2 00:00:01,010 --> 00:00:02,090 >> I'm Jason Seifer. 3 00:00:02,090 --> 00:00:04,910 >> And you're watching The Treehouse Show, your weekly dose of internets 4 00:00:04,910 --> 00:00:08,080 where we talk about all things web design, web development, and more. 5 00:00:08,080 --> 00:00:10,680 >> In this episode, we'll be talking about outdated UX 6 00:00:10,680 --> 00:00:16,180 patterns, how to learn AngularJS, lazily loading ads, and more. 7 00:00:16,180 --> 00:00:16,660 >> Let's. 8 00:00:16,660 --> 00:00:17,300 Check it out! 9 00:00:22,800 --> 00:00:27,770 First up we have a project called Launch Rocket, Launch Rocket is this really nice 10 00:00:27,770 --> 00:00:29,980 preference pane for Mac OSX 10 that 11 00:00:29,980 --> 00:00:33,510 enables you to easily start and stop services. 12 00:00:33,510 --> 00:00:35,730 That you've installed with Home Brew. 13 00:00:35,730 --> 00:00:38,020 Now if we take a look at the GitHub project 14 00:00:38,020 --> 00:00:41,440 here, you can see a nice screen shot of LaunchRocket. 15 00:00:41,440 --> 00:00:43,210 It'll give you a listing of all 16 00:00:43,210 --> 00:00:45,400 the different services that you have installed. 17 00:00:45,400 --> 00:00:49,430 You can start or stop them as well as remove them, and there's even 18 00:00:49,430 --> 00:00:53,250 a really nice preference here to run it as Root, if you have to. 19 00:00:54,290 --> 00:00:57,530 Now it shows you, like I said, if everything is running. 20 00:00:57,530 --> 00:01:00,420 And it's actually super easy to install. 21 00:01:00,420 --> 00:01:03,606 Now, this does require a project called homebrew-cask. 22 00:01:03,606 --> 00:01:08,050 home-brew Cask is a project that's actually really interesting and allows you 23 00:01:08,050 --> 00:01:11,070 to install Different types of applications, 24 00:01:11,070 --> 00:01:13,830 more GY based applications with home grid. 25 00:01:13,830 --> 00:01:17,320 Now there's tons of formula in there for things like Google Chrome, Adobe 26 00:01:17,320 --> 00:01:21,420 Creative Suite, just a ton of stuff that you may not have installed already. 27 00:01:21,420 --> 00:01:24,450 Anyway, there's a link to that in the show notes that goes along with Launch Rocket. 28 00:01:24,450 --> 00:01:25,670 So, make sure you check it out. 29 00:01:25,670 --> 00:01:29,500 Really nice project, and something that you may want to have installed. 30 00:01:29,500 --> 00:01:30,210 >> Very nice stuff. 31 00:01:30,210 --> 00:01:33,280 Well, next up is JQuery Notebook. 32 00:01:33,280 --> 00:01:38,860 If you need to embed a wissy wig text editor into your Website or web 33 00:01:38,860 --> 00:01:45,660 appiclation now WYSIWYG stands for What You See Is What You Get. 34 00:01:45,660 --> 00:01:46,610 >> Kinda like us. 35 00:01:46,610 --> 00:01:47,780 >> Exactly. 36 00:01:47,780 --> 00:01:50,100 And you can go ahead an click on the demo 37 00:01:50,100 --> 00:01:53,810 here on the get hub page to see how that works. 38 00:01:53,810 --> 00:01:56,470 So here's a JQuery notebook. 39 00:01:56,470 --> 00:01:57,640 Demo page. 40 00:01:57,640 --> 00:02:01,940 And I can go ahead and just type some text here. 41 00:02:01,940 --> 00:02:07,370 And, we can highlight things and then bold them, 42 00:02:07,370 --> 00:02:13,290 make them italicized, underline them, change them to different level headings. 43 00:02:13,290 --> 00:02:17,230 We can even do ordered lists or unordered lists. 44 00:02:17,230 --> 00:02:22,530 Pretty nice rich text editor here and its also very simple to use. 45 00:02:22,530 --> 00:02:25,320 Like I said its a j query plugin. 46 00:02:25,320 --> 00:02:26,920 Not a whole lot to say about it. 47 00:02:26,920 --> 00:02:28,620 One more thing I do want to add is that 48 00:02:28,620 --> 00:02:32,020 you can do all of those same things with command key. 49 00:02:32,020 --> 00:02:35,700 So they have some nice little shortcuts here along with 50 00:02:35,700 --> 00:02:39,750 a few other additional options if you Want to use them. 51 00:02:39,750 --> 00:02:40,720 They're cool stuff. 52 00:02:40,720 --> 00:02:43,070 Definitely check that one out. 53 00:02:43,070 --> 00:02:45,450 >> Nick, when you first said that project's name, I thought it was a J 54 00:02:45,450 --> 00:02:48,240 query plugin that would automatically insert different clips 55 00:02:48,240 --> 00:02:50,540 from the movie The Notebook into your webpage. 56 00:02:50,540 --> 00:02:51,290 >> Sorry to disappoint. 57 00:02:51,290 --> 00:02:54,360 >> It was like, I don't want to cry every time I go to this website. 58 00:02:56,180 --> 00:02:58,210 Next up we have a project called Tether. 59 00:02:58,210 --> 00:03:03,210 Tether is a great project that quote, marries dom elements for life. 60 00:03:03,210 --> 00:03:03,910 Now, >> You and me. 61 00:03:03,910 --> 00:03:04,195 >> Yeah. 62 00:03:04,195 --> 00:03:06,320 [LAUGH] We, if we were dom elements, and we used 63 00:03:06,320 --> 00:03:11,770 this plug-in it would probably still make me Cry, so 64 00:03:11,770 --> 00:03:15,100 anyway tether is it's really nice so it basically any 65 00:03:15,100 --> 00:03:19,010 element you can attach it or tether it to another element. 66 00:03:19,010 --> 00:03:21,630 Now, you'll see on the side of the screen here 67 00:03:21,630 --> 00:03:24,950 you can actually interact with this demo as we're scrolling through. 68 00:03:24,950 --> 00:03:27,330 Where it says action one, two, and three 69 00:03:27,330 --> 00:03:31,020 stays tethered to this element here on the left. 70 00:03:31,020 --> 00:03:34,040 Now, I can even scroll through inside of this demo 71 00:03:34,040 --> 00:03:37,630 and you see that, once again, those actions stay tethered. 72 00:03:37,630 --> 00:03:41,280 Now if we take a look at the documentation here, we can see 73 00:03:41,280 --> 00:03:44,030 that there are just a ton of different options that you can do. 74 00:03:44,030 --> 00:03:46,650 You can tell it which Parts of the 75 00:03:46,650 --> 00:03:49,120 different elements you wanna have it attached to. 76 00:03:49,120 --> 00:03:51,240 And then I'm, I'm actually scrolling here and 77 00:03:51,240 --> 00:03:53,990 you can see that these stay tethered as well. 78 00:03:53,990 --> 00:03:59,230 We are targeting the yellow box with the green box and attached to top right. 79 00:03:59,230 --> 00:04:05,320 Now you can attach in a bunch of different positions and it is super easy to use. 80 00:04:05,320 --> 00:04:07,030 Now we'll have a link. 81 00:04:07,030 --> 00:04:10,280 To tether inside of the show notes which you can check out at youtube dot 82 00:04:10,280 --> 00:04:15,080 com slash go tree house or search for us itunes at the tree house show. 83 00:04:15,080 --> 00:04:15,780 >> Very cool stuff. 84 00:04:15,780 --> 00:04:19,690 Well next up is outdated UX patterns and alternatives. 85 00:04:19,690 --> 00:04:21,980 This is a really cool blog post that highlights 86 00:04:21,980 --> 00:04:27,750 some outdated UX patterns and then identifies a few alternatives. 87 00:04:27,750 --> 00:04:29,640 Just as the title implies. 88 00:04:30,800 --> 00:04:34,340 The first one is Carousels, so, you've seen this before, there's a 89 00:04:34,340 --> 00:04:37,760 few dots at the bottom, or maybe numbers, and there's two arrows 90 00:04:37,760 --> 00:04:40,930 on the left and right sides, and you kind of can click 91 00:04:40,930 --> 00:04:47,320 through each item in the carousel and see what's next or previous. 92 00:04:47,320 --> 00:04:51,170 This is kind of annoying because, you can't really see everything at once, you 93 00:04:51,170 --> 00:04:53,300 may not necessarily be interested in the 94 00:04:53,300 --> 00:04:56,200 item that's currently being presented on the carousel. 95 00:04:56,200 --> 00:04:59,480 So one thing they suggest to do instead is to prioritize the content. 96 00:04:59,480 --> 00:05:02,540 So for example, if you have a marketing page, you might want to 97 00:05:02,540 --> 00:05:06,270 include all that on one page so that it's visible all at once. 98 00:05:06,270 --> 00:05:10,650 And users can scroll through the content at their leisure. 99 00:05:10,650 --> 00:05:11,390 >> Carousel? 100 00:05:11,390 --> 00:05:13,800 More like I don't carousel right? 101 00:05:13,800 --> 00:05:18,750 >> Ooh next one is large background images. 102 00:05:18,750 --> 00:05:23,700 This is something that you see quite a lot around the Internet and they say that it 103 00:05:23,700 --> 00:05:26,420 doesn't really add a whole lot for a 104 00:05:26,420 --> 00:05:31,980 users who's screen is smaller then 1024 pixels across. 105 00:05:31,980 --> 00:05:35,970 So, a couple of alternatives they offer are context wear 106 00:05:35,970 --> 00:05:38,960 image sizing pretty smart and another thing we've talked about on 107 00:05:38,960 --> 00:05:43,210 the show previously is zurb interchange so that's a way to 108 00:05:43,210 --> 00:05:48,760 switch out your images intelligently based on the resolution and context. 109 00:05:48,760 --> 00:05:51,890 Another counter argument is listed here actually a 110 00:05:51,890 --> 00:05:55,970 blog post on the treehouse blog called creating responsive. 111 00:05:55,970 --> 00:06:00,370 Websites with photo backgrounds, pretty interesting stuff. 112 00:06:00,370 --> 00:06:02,750 There's a couple more listed out in this article. 113 00:06:02,750 --> 00:06:04,400 We're not going to go through all of them 114 00:06:04,400 --> 00:06:07,830 here, but definitely check that one out, very nice stuff. 115 00:06:07,830 --> 00:06:08,210 >> Very cool. 116 00:06:08,210 --> 00:06:13,150 Next up here there is a blog post called' How to Learn AngularjS. 117 00:06:13,150 --> 00:06:17,040 Now this is a super in depth post which we're not going to 118 00:06:17,040 --> 00:06:19,290 cover everything but this goes to everything 119 00:06:19,290 --> 00:06:21,630 you need to know about learning Angular. 120 00:06:21,630 --> 00:06:22,470 JS. 121 00:06:22,470 --> 00:06:23,900 So it talks through the main parts: 122 00:06:23,900 --> 00:06:28,670 directives, controllers, scopes, services and dependency injections. 123 00:06:28,670 --> 00:06:30,750 Now one of the nice things about this tutorial as opposed 124 00:06:30,750 --> 00:06:34,070 to some others is you can actually see and interact with and 125 00:06:34,070 --> 00:06:38,080 change everything Write inline on the post, and then just click 126 00:06:38,080 --> 00:06:42,310 Run with JavaScript, and it will work right there on the page. 127 00:06:42,310 --> 00:06:48,060 Now, this is a very very thorough introduction to angular JS. 128 00:06:48,060 --> 00:06:50,470 >> Yeah, they really cover all the angles here. 129 00:06:50,470 --> 00:06:51,150 Oh, I get it. 130 00:06:51,150 --> 00:06:52,480 Cause it's called angular. 131 00:06:52,480 --> 00:06:53,230 >> That's right. 132 00:06:53,230 --> 00:06:53,910 >> You're right. 133 00:06:53,910 --> 00:06:54,770 >> You're getting smarter. 134 00:06:54,770 --> 00:06:55,180 >> Yeah. 135 00:06:55,180 --> 00:06:56,930 Sorry, I didn't get it at first. 136 00:06:56,930 --> 00:06:59,870 I thought that was going to make me a little bit obtuse. 137 00:06:59,870 --> 00:07:04,530 So anyway, yeah, like I said, just a ton, ton of depth in this article. 138 00:07:04,530 --> 00:07:06,990 We really can't cover everything on here, but go ahead and read 139 00:07:06,990 --> 00:07:10,700 it if you've been learning If you've been wanting to learn, angular JS. 140 00:07:10,700 --> 00:07:12,480 >> I like your joke there, Jason. 141 00:07:12,480 --> 00:07:13,606 That was a cute one. 142 00:07:13,606 --> 00:07:16,882 >> You're right. 143 00:07:16,882 --> 00:07:17,704 >> Wow. 144 00:07:17,704 --> 00:07:23,600 Well, moving on, next up is this wonderful article from Google ventures 145 00:07:23,600 --> 00:07:27,140 called, Why You Should Move That Button 3 Pixels To The Left. 146 00:07:27,140 --> 00:07:30,650 It's basically talking about pixel perfection and why it's 147 00:07:30,650 --> 00:07:35,180 important and some instances where maybe it's not so important. 148 00:07:35,180 --> 00:07:39,310 So the first thing is, It's not design for design's sake. 149 00:07:39,310 --> 00:07:42,550 They're basically saying you need to explain to the rest of 150 00:07:42,550 --> 00:07:47,280 the team why designers should spend time on fit and finish. 151 00:07:47,280 --> 00:07:50,460 And that users are going to understand the difference between functional 152 00:07:50,460 --> 00:07:54,120 aspects of your app and just delightful aspects of your app. 153 00:07:54,120 --> 00:07:55,800 It's very important. 154 00:07:55,800 --> 00:07:58,690 One thing that that does do is build trust 155 00:07:58,690 --> 00:08:02,560 so it increases the trust users have in your app. 156 00:08:02,560 --> 00:08:03,990 In your brands in general. 157 00:08:03,990 --> 00:08:06,560 If you pay attention to the details, they know that 158 00:08:06,560 --> 00:08:11,910 they can trust you to handle other, much more important aspects. 159 00:08:11,910 --> 00:08:16,300 Particularly with the payment examples they offer here, such as. 160 00:08:16,300 --> 00:08:18,460 Mint, Square, and Simple. 161 00:08:18,460 --> 00:08:21,310 Not necessarily payment, but financial. 162 00:08:21,310 --> 00:08:25,030 So, that's pretty, that's a pretty good point there. 163 00:08:26,190 --> 00:08:28,150 They have a couple of others here. 164 00:08:28,150 --> 00:08:32,430 One that I really like is avoid customization icebergs. 165 00:08:32,430 --> 00:08:37,540 They're basically saying, you know, a native control Will work much better if 166 00:08:37,540 --> 00:08:41,720 that's really all that you have time for rather than creating a custom 167 00:08:41,720 --> 00:08:45,560 control where you have to worry about the active states, the hover states, 168 00:08:45,560 --> 00:08:50,430 when it's pushed down, when it's disabled, all kinds of stuff like that. 169 00:08:50,430 --> 00:08:54,260 And if you're not really gonna have time to address each one of 170 00:08:54,260 --> 00:08:58,360 those specific states, it's much better to just go with a native control thats 171 00:08:58,360 --> 00:09:03,510 Going to work all the time, so very cool article really insightful stuff that, 172 00:09:03,510 --> 00:09:08,220 of this is from Google ventures so definitely something to take a look at. 173 00:09:08,220 --> 00:09:10,110 They have a lot of experience with this. 174 00:09:10,110 --> 00:09:11,700 >> Yeah, you know we, we even talked 175 00:09:11,700 --> 00:09:13,970 about some frameworks on here that don't address 176 00:09:13,970 --> 00:09:16,620 certain elements with custom ui's cause it can 177 00:09:16,620 --> 00:09:19,370 be so difficult to Go through and implement. 178 00:09:19,370 --> 00:09:20,260 >> Very true. 179 00:09:20,260 --> 00:09:23,160 >> Next up, we have a project called Lazy Ads. 180 00:09:23,160 --> 00:09:26,340 Now, this is a very, very interesting project that 181 00:09:26,340 --> 00:09:31,500 lets you deliver ads asynchronously without modifying the ad code. 182 00:09:31,500 --> 00:09:33,730 Now, why in the world would you wanna do that? 183 00:09:33,730 --> 00:09:35,800 Well, something that we talk about a lot 184 00:09:35,800 --> 00:09:38,870 here on the Treehouse show is responsive design. 185 00:09:38,870 --> 00:09:41,050 Now, depending on the site that you have, your 186 00:09:41,050 --> 00:09:43,580 ad may not make sense for all different browsers 187 00:09:43,580 --> 00:09:47,820 and all different resolutions, and it might still have 188 00:09:47,820 --> 00:09:50,770 to be shown with different media queries or not. 189 00:09:50,770 --> 00:09:55,250 So the problem with some ads is that, let's say you have ad 190 00:09:55,250 --> 00:09:59,100 on a smaller browser that you're trying to hide with a media query. 191 00:09:59,100 --> 00:10:00,980 Well the ad is still going to load, and the code is 192 00:10:00,980 --> 00:10:03,550 still going to load and then it's going to be hidden later. 193 00:10:03,550 --> 00:10:07,800 Now this project, lazy ads will go through and without any code on your part it won't 194 00:10:07,800 --> 00:10:10,850 even go fetch the ad which means that your 195 00:10:10,850 --> 00:10:14,380 users are going to have a much quicker experience. 196 00:10:14,380 --> 00:10:15,470 Now. 197 00:10:15,470 --> 00:10:17,160 The way that they do it is pretty easy. 198 00:10:17,160 --> 00:10:22,360 You just include the lazy ad loader code, and then enclose the 199 00:10:22,360 --> 00:10:27,520 ad script inside of a DIV with the data attribute for lazy ad. 200 00:10:27,520 --> 00:10:30,290 Now, it goes even further than that, if you want to 201 00:10:30,290 --> 00:10:35,730 you can even specify the width and the height, or media queries. 202 00:10:35,730 --> 00:10:39,870 Now this works on IE seven and up, and this is a great solution. 203 00:10:39,870 --> 00:10:42,400 For basically responsive advertisements. 204 00:10:43,600 --> 00:10:44,200 >> Very nice. 205 00:10:44,200 --> 00:10:48,910 Well, next up is CSShake, which is just some CSS classes 206 00:10:48,910 --> 00:10:52,720 to move your DOM, as it says on the page here. 207 00:10:52,720 --> 00:10:57,360 If I scroll down, here are the basic selection of classes that they offer. 208 00:10:57,360 --> 00:11:01,190 They have a basic shake, slow shake, little shake 209 00:11:01,190 --> 00:11:04,570 Or take fixed horizontal, fixed vertical, and so on. 210 00:11:04,570 --> 00:11:08,000 You can make stuff shake really crazily. 211 00:11:08,000 --> 00:11:10,420 So this might be useful if you're trying to 212 00:11:10,420 --> 00:11:14,170 follow a couple of popular design patterns where maybe you 213 00:11:14,170 --> 00:11:18,050 want to draw attention to a particular element, or you 214 00:11:18,050 --> 00:11:21,730 want to show that elements are in a different state. 215 00:11:21,730 --> 00:11:27,570 For example, when you, hold down on your icons on the 216 00:11:27,570 --> 00:11:30,720 iPhone, all of the icons will start to shake and it 217 00:11:30,720 --> 00:11:34,180 kind of represents that, hey, these are now in an editable 218 00:11:34,180 --> 00:11:37,240 state where you can drag them around, delete them, and so on. 219 00:11:37,240 --> 00:11:40,340 So it's kind of an interesting idea there that 220 00:11:40,340 --> 00:11:41,690 you might want to carry over to the web. 221 00:11:43,090 --> 00:11:48,810 There's a couple of variations that you can add here so let's select a shake. 222 00:11:48,810 --> 00:11:49,950 There we go. 223 00:11:49,950 --> 00:11:54,100 Hard shake and you can kind of combine them that's kind of interesting. 224 00:11:54,100 --> 00:11:56,480 And then here's how to use it. 225 00:11:56,480 --> 00:11:57,380 It's really easy. 226 00:11:57,380 --> 00:11:59,350 You just include the CSS. 227 00:11:59,350 --> 00:12:04,440 Shake and then you can go ahead and apply these classes. 228 00:12:04,440 --> 00:12:05,460 So very cool stuff. 229 00:12:05,460 --> 00:12:09,750 They also offer SAS mix-ins if you want to go that route. 230 00:12:09,750 --> 00:12:13,540 Definitely be sure to check that out if you want to shake things up. 231 00:12:13,540 --> 00:12:15,470 >> Oh, very nice. 232 00:12:15,470 --> 00:12:18,300 The CSS shake sounds kind of like a dance doesn't it? 233 00:12:18,300 --> 00:12:19,080 >> It does a little bit. 234 00:12:19,080 --> 00:12:21,220 >> Do the CSS shake. 235 00:12:21,220 --> 00:12:22,530 Do the Java Script Jig. 236 00:12:24,200 --> 00:12:25,070 You're going places Jason. 237 00:12:25,070 --> 00:12:27,520 >> Give each other an HTML high five after. 238 00:12:27,520 --> 00:12:28,510 >> Bam. 239 00:12:28,510 --> 00:12:28,850 Alright. 240 00:12:28,850 --> 00:12:30,170 >> You got web served. 241 00:12:30,170 --> 00:12:31,680 >> I am @nickrp on Twitter. 242 00:12:31,680 --> 00:12:32,930 >> And I am @jseifer. 243 00:12:32,930 --> 00:12:34,590 For more information on anything we talked 244 00:12:34,590 --> 00:12:38,250 about check out our show notes at youtube.com/gotreehouse, 245 00:12:38,250 --> 00:12:42,710 or search for us in iTunes and please rate us by searching for The Treehouse Show. 246 00:12:42,710 --> 00:12:45,610 And of course, if you'd like to see more videos like this one, 247 00:12:45,610 --> 00:12:51,540 maybe even much better videos, be sure to check us out at teamtreehouse.com. 248 00:12:51,540 --> 00:12:53,130 Thanks so much for watching. 249 00:12:53,130 --> 00:12:54,510 And we will see you next week.