Episode 42: Flat UI Colors, Don't do's with jQuery and Usability

I'm Nick Pettit. >>And I'm Jason Seifer. 0:01 And you're watching the Treehouse Show, your weekly dose of Internets 0:03 where we talk about all things web design, web development, and more. 0:06 In this episode, we'll be talking about flat UI colors, 0:09 things you shouldn't be doing with jQuery, usability, and much more. 0:12 Let's check it out. 0:17 [The Treehouse Show] 0:22 Well first step is flat UI colors and of course 0:25 we've talked about flat UI a little bit on the show so basically-- 0:28 Talk so much. >>The opposite of skeuomorphism. 0:32 So skeuomorphism is where-- 0:35 It's right up there with CSS framework some. 0:37 There's a list of things that we talked about a lot in here. >>And, icon fonts. 0:39 And responsive websites. >>That's right. 0:43 Anyway, skeuomorphisms is where stuff looks super realistic in a digital interface. 0:46 It's basically trying to mirror a real world interface so something 0:52 like iCAl on OS X where it has almost a leather and papery texture and stuff 0:56 whereas flat design is basically a response to that so it's what you see in 1:02 like Windows 8 and you know lot of other websites these days. 1:07 So these flat UI colors basically allow you to 1:12 draw upon this premade color palette 1:17 and create your website with flat UI in mind. 1:20 So it just have this really nice, well put together colors that go really well together 1:24 and you can click on each one of these. 1:31 So I'll click on midnight blue here and it'll say copied. 1:34 So if you click on one of this, it will copy at your clipboard 1:41 and you can choose the format up here. 1:45 So I've chosen hexadecimal with the hash or # sign there 1:47 and so that what's been copied into my clipboard. 1:52 So it's a pretty handy tool. I will admit I actually use this week. 1:56 Oh, you are willing to admit that? >>I am willing to admit it. 2:02 I know big admission here. 2:04 No. I used it to build a website earlier this week. This is Jason's surprise face. 2:06 And it worked really well. I was able to just like click, copy these colors in. 2:12 And it speed up my development a little bit because I was able to just like 2:17 put together the color scheme really quickly and try out different things. 2:20 I like some of these names here. >>Yeah! >>Wet asphalt. >>That's right. 2:24 They should name one after you, Jason. >>This one's called Nephritis. 2:30 That sounds like a disease. >>Or, >>Sorry I can't come to work today. 2:35 My nephritis is flaring up. 2:39 If Peter River, I mean I don't understand why it's not Jason River. >>Yeah. 2:40 Yeah. >>Jason River. >>Jason. >>Selling tickets. >>That's right. 2:45 Next stop over on the flippin' awesome blog, 2:49 we have 5 things you should stop doing with jQuery. 2:51 This is a wonderful list of, you guess it, 2:54 things that you should stop doing with jQuery 2:58 and more importantly why you should stop doing them. 3:00 Now we're not going to get in to everything that they say on the show. 3:03 I'm sorry. Say on the blog post here but number 1 stop using document ready. 3:06 It's 2013. We don't have to use document ready all the time. 3:12 The reason that you would want to use document ready is back in the day 3:16 when you put all of your scripts in the head of a web page, 3:20 it would have to wait until the rest of the page and scripts have loaded. 3:22 But of course now you put all of your scripts towards the bottom. >>Right. 3:27 And you know that the document is indeed ready 3:30 by the time you are ready to execute that jQuery. 3:33 Yeah. Unless you are using the async attribute. >>Boom! 3:35 Next choose the right iterator for the job. 3:38 jQuery provides a wealth of different iterators 3:41 that you can use depending on what you need to do. 3:44 So if there is a nice description of each and the different ones 3:47 as well as the context in which you would use them.] 3:50 Big fan of the map iterator which will iterate through an array. 3:52 Add that all to a new one. Boom! Done. Anyway, bunch of graded vise on here. 3:56 Just head on over to the blog post @flippinawesome.com 4:01 and you can also find it in the show notes on youtube 4:05 at youtube.com/gotreehouse or on itunes. 4:08 Itunes. >>Search for treehouse, leave us reviews. >>On itunes. >>Yup. 4:12 All right. Next up is the young person's guide to programming and minecraft. 4:16 Of course minecraft is the popular compute game 4:22 that was created I think a couple of years ago 4:25 and was developed in a very open fashion. 4:28 People could actually participate in the alpha and the beta 4:32 and it since been released, 4:35 but it's pretty cool game. 4:37 Nick, if I am not specifically a young person, 4:40 can I still read this guide and get something out of it? 4:43 I think so, Jason. 4:45 I don't know why it's specifically targeted at young people 4:47 but of course, yeah, you can get something out of it. 4:50 So minecraft is a computer game where you mine stuff and then you craft stuff. 4:52 So that's kind of an explanation of minecraft 4:58 getting into what this article is actually about. 5:00 Basically, you can create what are called Mods or modifications for minecraft 5:02 and one such Mod is called ScriptCraft and in ScriptCraft, 5:10 you can actually program in the game using simple JavaScript statements 5:15 and in choosing those, you can add new items, 5:20 you can change the behavior of the game and you can actually build meta-games 5:22 on top of minecraft, build this simpler, simple games within minecraft. 5:27 Suggest learning JavaScript and then jumping into it. 5:35 Of course you can learn JavaScript on teamtreehouse.com 5:38 Shameless self blog. >>That's right. 5:42 And then after you learn JavaScript, you can jump into SciptCraft 5:44 and they teach you how to do variables, functions, 5:49 and a whole variety above there are other things in minecraft 5:53 and eventually you will be able to actually build stuff. 5:57 So I think this is pretty neat--it's not specifically related to web development 6:02 but of course JavaScript is a very popular language 6:09 and the web development space. 6:12 That's what we use to make things happen on the front end of the browser. 6:14 And I think this is a really cool way to get into JavaScript 6:20 and get yourself familiar with the language 6:24 and that will make you a stronger programmer 6:26 when it comes to stuff on the web. 6:29 Very nice. >>Interesting stuff. >>Next up, we have a tool called framer. 6:31 This is a prototyping tool for animation and interaction on desktop and mobile. 6:35 Now this is being build as an alternative to flash or keynote 6:42 when prototyping an application 6:46 and it's going to be used more for the interaction of the site. 6:48 So to get some great examples here on the site, so you click through. 6:52 First example is the Google search application 6:56 and if I've mouse in here, easy boom. 7:02 It automatically animates up and you can kinda just get a feel 7:05 for how the applications going to work. 7:08 The next example that they have is something that you should be familiar with 7:10 facebook, pretty much everybody is on facebook 7:15 so you click little three button menu we've talked about before on the show 7:17 and it kinda shows you how the newsfeed and events 7:21 and basically everything on this side of the page is going to work. 7:24 So this is really not going to be for creating full applications. 7:27 It's going to be used just to get an idea of how the interactions 7:32 and animations are going to play out on the site. 7:35 And interaction and animation is quickly becoming 7:37 a lot bigger in the field of creating applications. 7:40 So let me keep up on the radar in case this is what you're doing. 7:44 And I think it actually pairs really nicely with flat design in that, you know, 7:47 it's much easier to create a more complex animations 7:52 because you're not spending so much time like getting with the textures 7:55 all around the corners of all these different design details just right 7:58 but you can actually communicate a lot with nice, smooth animations so I like it. 8:03 I think it's pretty cool. >>I think it pairs really nicely with a port wine. 8:07 So are you, Jason. >>Thank you. 8:12 Next up, is a usability checklist, it's in beta. 8:14 Not really sure what's in beta specifically. >>The checklist. >>Yeah. 8:19 That looks like the checklist itself is in beta. 8:23 Maybe there's more things I want to add in the checklist. 8:25 It's possible but I really like this checklist quite a lot 8:27 basically before you launch your website 8:31 and, you know, you want to make sure that everything is of quality. 8:36 You can go through this checklist and just kind of get a sanity check 8:40 and say like, you know, what is the first impression when people hit the homepage? 8:45 or, you know, is my site easy to navigate? 8:51 am I hitting all the check boxes here with accessibility? 8:54 and, you know, am I doing a good job with search, etc. etc. etc. 8:58 It's a pretty exhaustive checklist and I think it's really good even for beginners 9:03 or people that are much more advance with web development 9:10 because there's so many things to remember in these days. 9:13 I mean there's so much stuff that goes into a website that it's great to just have 9:16 a nice handy checklist like this to make sure you're covering all the basics. 9:21 Yeah. Definitely. >>So, pretty cool stuff. 9:24 Next up, we have an application called Ghostlab. Now this is a paid application. 9:27 They're not sponsoring the show, full disclosure, just thought that this was cool 9:33 not we would mention it. 9:37 So what this does, it's pretty interesting, you set up a site inside of Ghostlab, 9:39 you know, drag it in and then it will launch an HTTP server for you. 9:44 You can then connect the browser to it 9:49 or multiple browsers is where it really shines 9:51 and then as you're scrolling through on one browser, 9:54 it automatically updates all the other browsers. 9:56 That's pretty amazing. >>Yeah. 9:59 This is wonderful if you are trying to test mobile sites. 10:01 Because as your filling in a form on one browser, 10:04 it'll automatically fill it in on another as well and if that weren't enough, 10:07 you can automatically debug the stuff live. 10:12 Now you are going to need a browser that supports 10:15 JavaScript in order to get this to work but definitely go ahead and check it out. 10:17 Synchronize testing is really really the big deal as well as inspection. 10:21 You can see immediately what's causing the problem in the browser 10:27 if you're getting some weird behavior or otherwise, 10:31 immediately inspect it and see what's going on. 10:33 So. >>This pair is really nicely with that usability checklist. 10:36 Because you can go through and make sure you're 10:41 covering all those check boxes in every browser. 10:43 Also, a chardonnay. >>Hmmm. 10:47 Next up, we've got some handy-->>From the wine region-- 10:51 We've got-- >>of France. >>Some Handy Sass Mixins 10:55 And basically Sass is a language that compiles to CSS 10:59 so it can be read by the browser but it's a much easier way to write your styling 11:07 because you can use things like variables and these pieces of code 11:12 that are called Mixins so you can mix in this Sass code 11:18 into your Sass code very fluidly. 11:24 They have Mixins here that are for responsive breakpoints, 11:28 so if you're building websites that uses responsive design 11:32 which really almost any website you're building 11:37 should probably be using responsive design as a handy Mixin to use. 11:39 They also have Mixins for targeting devices with retina displays 11:45 or high resolution displays and that's actually pretty simple to do. 11:51 There's just a lot of little steps here you got to remember 11:55 and so that just encapsulates all of them really easily 11:59 and then you can go ahead and use it here as a Sass Mixin and you just say it 12:02 you know, I want to go ahead and include this 2x version of the image 12:07 and it will go ahead and expand out that Sass into this CSS here. 12:11 They have a couple of others. There is that Clearfix, one for box sizing, 12:16 border radius which I mean that can get really complicated 12:21 if you're working with the lot of different browser shares that covers all those 12:24 but pretty cool stuff and, you know, if you use Sass. 12:30 This is definitely a handy side of Mixins for use. 12:33 That would pair pretty well with Ghostlab which we just talked 12:36 about because it does support Sass. 12:39 Or a nice ???. >>I would have suggested a ???. 12:41 But you know your taste is your taste. 12:44 Next up, we have a JavaScript library called Hammer.js 12:47 This is a library for multitouch gestures and I think It's incredibly well named. 12:51 Also, I really really love the art on the site. >>You can touch this. >>Exactly. 12:57 So this is going to be useful if you're working on 13:02 phone, tablet, any device that supports multitouch. 13:06 The Hammer Javascript library will allow you to very easily attach elements 13:09 attach certain events to elements. 13:15 So if somebody is swiping left, you can attach that to a specific DIV on a page, 13:18 capture that and perform some sort of functionality when somebody swipes left. 13:23 Now this is a great library and it's pretty small. It's only 3 kb when GZIP. 13:27 So check this out--they've got really thorough documentation 13:33 and it is a great library. 13:36 So that's about all we got today. >>That is it for this week's episode. 13:39 I'm @nickrp on twitter. >>And I am @jseifer. 13:43 If you like this show, please rate us in itunes. Search for the Treehouse Show. 13:46 You can also find show notes and more on youtube @youtube.com/gotreehouse. 13:51 And of course if you like to see more videos like this one about iOS, android, 13:56 HTML, CSS, business and so much more, Ruby of course. 14:01 Of course. >>This guy right here. Be sure to check us out @teamtreehouse.com 14:06 Thank you so much for watching and we'll see you next week. 14:11 Stay tune for rewind/review podcast. 14:13

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

Sign up