Episode 81: Outdated UX Patterns, Learn Angular JS, Lazy Ads

I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:01 >> And you're watching The Treehouse Show, your weekly dose of internets 0:02 where we talk about all things web design, web development, and more. 0:04 >> In this episode, we'll be talking about outdated UX 0:08 patterns, how to learn AngularJS, lazily loading ads, and more. 0:10 >> Let's. 0:16 Check it out! 0:16 First up we have a project called Launch Rocket, Launch Rocket is this really nice 0:22 preference pane for Mac OSX 10 that 0:27 enables you to easily start and stop services. 0:29 That you've installed with Home Brew. 0:33 Now if we take a look at the GitHub project 0:35 here, you can see a nice screen shot of LaunchRocket. 0:38 It'll give you a listing of all 0:41 the different services that you have installed. 0:43 You can start or stop them as well as remove them, and there's even 0:45 a really nice preference here to run it as Root, if you have to. 0:49 Now it shows you, like I said, if everything is running. 0:54 And it's actually super easy to install. 0:57 Now, this does require a project called homebrew-cask. 1:00 home-brew Cask is a project that's actually really interesting and allows you 1:03 to install Different types of applications, 1:08 more GY based applications with home grid. 1:11 Now there's tons of formula in there for things like Google Chrome, Adobe 1:13 Creative Suite, just a ton of stuff that you may not have installed already. 1:17 Anyway, there's a link to that in the show notes that goes along with Launch Rocket. 1:21 So, make sure you check it out. 1:24 Really nice project, and something that you may want to have installed. 1:25 >> Very nice stuff. 1:29 Well, next up is JQuery Notebook. 1:30 If you need to embed a wissy wig text editor into your Website or web 1:33 appiclation now WYSIWYG stands for What You See Is What You Get. 1:38 >> Kinda like us. 1:45 >> Exactly. 1:46 And you can go ahead an click on the demo 1:47 here on the get hub page to see how that works. 1:50 So here's a JQuery notebook. 1:53 Demo page. 1:56 And I can go ahead and just type some text here. 1:57 And, we can highlight things and then bold them, 2:01 make them italicized, underline them, change them to different level headings. 2:07 We can even do ordered lists or unordered lists. 2:13 Pretty nice rich text editor here and its also very simple to use. 2:17 Like I said its a j query plugin. 2:22 Not a whole lot to say about it. 2:25 One more thing I do want to add is that 2:26 you can do all of those same things with command key. 2:28 So they have some nice little shortcuts here along with 2:32 a few other additional options if you Want to use them. 2:35 They're cool stuff. 2:39 Definitely check that one out. 2:40 >> Nick, when you first said that project's name, I thought it was a J 2:43 query plugin that would automatically insert different clips 2:45 from the movie The Notebook into your webpage. 2:48 >> Sorry to disappoint. 2:50 >> It was like, I don't want to cry every time I go to this website. 2:51 Next up we have a project called Tether. 2:56 Tether is a great project that quote, marries dom elements for life. 2:58 Now, >> You and me. 3:03 >> Yeah. 3:03 [LAUGH] We, if we were dom elements, and we used 3:04 this plug-in it would probably still make me Cry, so 3:06 anyway tether is it's really nice so it basically any 3:11 element you can attach it or tether it to another element. 3:15 Now, you'll see on the side of the screen here 3:19 you can actually interact with this demo as we're scrolling through. 3:21 Where it says action one, two, and three 3:24 stays tethered to this element here on the left. 3:27 Now, I can even scroll through inside of this demo 3:31 and you see that, once again, those actions stay tethered. 3:34 Now if we take a look at the documentation here, we can see 3:37 that there are just a ton of different options that you can do. 3:41 You can tell it which Parts of the 3:44 different elements you wanna have it attached to. 3:46 And then I'm, I'm actually scrolling here and 3:49 you can see that these stay tethered as well. 3:51 We are targeting the yellow box with the green box and attached to top right. 3:53 Now you can attach in a bunch of different positions and it is super easy to use. 3:59 Now we'll have a link. 4:05 To tether inside of the show notes which you can check out at youtube dot 4:07 com slash go tree house or search for us itunes at the tree house show. 4:10 >> Very cool stuff. 4:15 Well next up is outdated UX patterns and alternatives. 4:15 This is a really cool blog post that highlights 4:19 some outdated UX patterns and then identifies a few alternatives. 4:21 Just as the title implies. 4:27 The first one is Carousels, so, you've seen this before, there's a 4:30 few dots at the bottom, or maybe numbers, and there's two arrows 4:34 on the left and right sides, and you kind of can click 4:37 through each item in the carousel and see what's next or previous. 4:40 This is kind of annoying because, you can't really see everything at once, you 4:47 may not necessarily be interested in the 4:51 item that's currently being presented on the carousel. 4:53 So one thing they suggest to do instead is to prioritize the content. 4:56 So for example, if you have a marketing page, you might want to 4:59 include all that on one page so that it's visible all at once. 5:02 And users can scroll through the content at their leisure. 5:06 >> Carousel? 5:10 More like I don't carousel right? 5:11 >> Ooh next one is large background images. 5:13 This is something that you see quite a lot around the Internet and they say that it 5:18 doesn't really add a whole lot for a 5:23 users who's screen is smaller then 1024 pixels across. 5:26 So, a couple of alternatives they offer are context wear 5:31 image sizing pretty smart and another thing we've talked about on 5:35 the show previously is zurb interchange so that's a way to 5:38 switch out your images intelligently based on the resolution and context. 5:43 Another counter argument is listed here actually a 5:48 blog post on the treehouse blog called creating responsive. 5:51 Websites with photo backgrounds, pretty interesting stuff. 5:55 There's a couple more listed out in this article. 6:00 We're not going to go through all of them 6:02 here, but definitely check that one out, very nice stuff. 6:04 >> Very cool. 6:07 Next up here there is a blog post called' How to Learn AngularjS. 6:08 Now this is a super in depth post which we're not going to 6:13 cover everything but this goes to everything 6:17 you need to know about learning Angular. 6:19 JS. 6:21 So it talks through the main parts: 6:22 directives, controllers, scopes, services and dependency injections. 6:23 Now one of the nice things about this tutorial as opposed 6:28 to some others is you can actually see and interact with and 6:30 change everything Write inline on the post, and then just click 6:34 Run with JavaScript, and it will work right there on the page. 6:38 Now, this is a very very thorough introduction to angular JS. 6:42 >> Yeah, they really cover all the angles here. 6:48 Oh, I get it. 6:50 Cause it's called angular. 6:51 >> That's right. 6:52 >> You're right. 6:53 >> You're getting smarter. 6:53 >> Yeah. 6:54 Sorry, I didn't get it at first. 6:55 I thought that was going to make me a little bit obtuse. 6:56 So anyway, yeah, like I said, just a ton, ton of depth in this article. 6:59 We really can't cover everything on here, but go ahead and read 7:04 it if you've been learning If you've been wanting to learn, angular JS. 7:06 >> I like your joke there, Jason. 7:10 That was a cute one. 7:12 >> You're right. 7:13 >> Wow. 7:16 Well, moving on, next up is this wonderful article from Google ventures 7:17 called, Why You Should Move That Button 3 Pixels To The Left. 7:23 It's basically talking about pixel perfection and why it's 7:27 important and some instances where maybe it's not so important. 7:30 So the first thing is, It's not design for design's sake. 7:35 They're basically saying you need to explain to the rest of 7:39 the team why designers should spend time on fit and finish. 7:42 And that users are going to understand the difference between functional 7:47 aspects of your app and just delightful aspects of your app. 7:50 It's very important. 7:54 One thing that that does do is build trust 7:55 so it increases the trust users have in your app. 7:58 In your brands in general. 8:02 If you pay attention to the details, they know that 8:03 they can trust you to handle other, much more important aspects. 8:06 Particularly with the payment examples they offer here, such as. 8:11 Mint, Square, and Simple. 8:16 Not necessarily payment, but financial. 8:18 So, that's pretty, that's a pretty good point there. 8:21 They have a couple of others here. 8:26 One that I really like is avoid customization icebergs. 8:28 They're basically saying, you know, a native control Will work much better if 8:32 that's really all that you have time for rather than creating a custom 8:37 control where you have to worry about the active states, the hover states, 8:41 when it's pushed down, when it's disabled, all kinds of stuff like that. 8:45 And if you're not really gonna have time to address each one of 8:50 those specific states, it's much better to just go with a native control thats 8:54 Going to work all the time, so very cool article really insightful stuff that, 8:58 of this is from Google ventures so definitely something to take a look at. 9:03 They have a lot of experience with this. 9:08 >> Yeah, you know we, we even talked 9:10 about some frameworks on here that don't address 9:11 certain elements with custom ui's cause it can 9:13 be so difficult to Go through and implement. 9:16 >> Very true. 9:19 >> Next up, we have a project called Lazy Ads. 9:20 Now, this is a very, very interesting project that 9:23 lets you deliver ads asynchronously without modifying the ad code. 9:26 Now, why in the world would you wanna do that? 9:31 Well, something that we talk about a lot 9:33 here on the Treehouse show is responsive design. 9:35 Now, depending on the site that you have, your 9:38 ad may not make sense for all different browsers 9:41 and all different resolutions, and it might still have 9:43 to be shown with different media queries or not. 9:47 So the problem with some ads is that, let's say you have ad 9:50 on a smaller browser that you're trying to hide with a media query. 9:55 Well the ad is still going to load, and the code is 9:59 still going to load and then it's going to be hidden later. 10:00 Now this project, lazy ads will go through and without any code on your part it won't 10:03 even go fetch the ad which means that your 10:07 users are going to have a much quicker experience. 10:10 Now. 10:14 The way that they do it is pretty easy. 10:15 You just include the lazy ad loader code, and then enclose the 10:17 ad script inside of a DIV with the data attribute for lazy ad. 10:22 Now, it goes even further than that, if you want to 10:27 you can even specify the width and the height, or media queries. 10:30 Now this works on IE seven and up, and this is a great solution. 10:35 For basically responsive advertisements. 10:39 >> Very nice. 10:43 Well, next up is CSShake, which is just some CSS classes 10:44 to move your DOM, as it says on the page here. 10:48 If I scroll down, here are the basic selection of classes that they offer. 10:52 They have a basic shake, slow shake, little shake 10:57 Or take fixed horizontal, fixed vertical, and so on. 11:01 You can make stuff shake really crazily. 11:04 So this might be useful if you're trying to 11:08 follow a couple of popular design patterns where maybe you 11:10 want to draw attention to a particular element, or you 11:14 want to show that elements are in a different state. 11:18 For example, when you, hold down on your icons on the 11:21 iPhone, all of the icons will start to shake and it 11:27 kind of represents that, hey, these are now in an editable 11:30 state where you can drag them around, delete them, and so on. 11:34 So it's kind of an interesting idea there that 11:37 you might want to carry over to the web. 11:40 There's a couple of variations that you can add here so let's select a shake. 11:43 There we go. 11:48 Hard shake and you can kind of combine them that's kind of interesting. 11:49 And then here's how to use it. 11:54 It's really easy. 11:56 You just include the CSS. 11:57 Shake and then you can go ahead and apply these classes. 11:59 So very cool stuff. 12:04 They also offer SAS mix-ins if you want to go that route. 12:05 Definitely be sure to check that out if you want to shake things up. 12:09 >> Oh, very nice. 12:13 The CSS shake sounds kind of like a dance doesn't it? 12:15 >> It does a little bit. 12:18 >> Do the CSS shake. 12:19 Do the Java Script Jig. 12:21 You're going places Jason. 12:24 >> Give each other an HTML high five after. 12:25 >> Bam. 12:27 Alright. 12:28 >> You got web served. 12:28 >> I am @nickrp on Twitter. 12:30 >> And I am @jseifer. 12:31 For more information on anything we talked 12:32 about check out our show notes at youtube.com/gotreehouse, 12:34 or search for us in iTunes and please rate us by searching for The Treehouse Show. 12:38 And of course, if you'd like to see more videos like this one, 12:42 maybe even much better videos, be sure to check us out at teamtreehouse.com. 12:45 Thanks so much for watching. 12:51 And we will see you next week. 12:53

You need to sign up for Treehouse in order to set up Workspace

Sign up