1 00:00:01,000 --> 00:00:03,340 I'm Nick Pettit. >>And I'm Jason Seifer. 2 00:00:03,340 --> 00:00:06,390 And you're watching the Treehouse Show, your weekly dose of Internets 3 00:00:06,390 --> 00:00:09,770 where we talk about all things web design, web development, and more. 4 00:00:09,770 --> 00:00:12,880 In this episode, we'll be talking about flat UI colors, 5 00:00:12,880 --> 00:00:17,330 things you shouldn't be doing with jQuery, usability, and much more. 6 00:00:17,330 --> 00:00:19,090 Let's check it out. 7 00:00:22,090 --> 00:00:24,260 [The Treehouse Show] 8 00:00:25,260 --> 00:00:28,640 Well first step is flat UI colors and of course 9 00:00:28,640 --> 00:00:32,330 we've talked about flat UI a little bit on the show so basically-- 10 00:00:32,330 --> 00:00:35,620 Talk so much. >>The opposite of skeuomorphism. 11 00:00:35,620 --> 00:00:37,610 So skeuomorphism is where-- 12 00:00:37,610 --> 00:00:39,650 It's right up there with CSS framework some. 13 00:00:39,650 --> 00:00:43,710 There's a list of things that we talked about a lot in here. >>And, icon fonts. 14 00:00:43,710 --> 00:00:46,290 And responsive websites. >>That's right. 15 00:00:46,290 --> 00:00:52,930 Anyway, skeuomorphisms is where stuff looks super realistic in a digital interface. 16 00:00:52,930 --> 00:00:56,950 It's basically trying to mirror a real world interface so something 17 00:00:56,950 --> 00:01:02,440 like iCAl on OS X where it has almost a leather and papery texture and stuff 18 00:01:02,440 --> 00:01:07,830 whereas flat design is basically a response to that so it's what you see in 19 00:01:07,830 --> 00:01:12,330 like Windows 8 and you know lot of other websites these days. 20 00:01:12,970 --> 00:01:17,530 So these flat UI colors basically allow you to 21 00:01:17,530 --> 00:01:20,640 draw upon this premade color palette 22 00:01:20,650 --> 00:01:24,900 and create your website with flat UI in mind. 23 00:01:24,900 --> 00:01:31,650 So it just have this really nice, well put together colors that go really well together 24 00:01:31,650 --> 00:01:34,440 and you can click on each one of these. 25 00:01:34,440 --> 00:01:41,420 So I'll click on midnight blue here and it'll say copied. 26 00:01:41,420 --> 00:01:45,470 So if you click on one of this, it will copy at your clipboard 27 00:01:45,470 --> 00:01:47,570 and you can choose the format up here. 28 00:01:47,570 --> 00:01:52,440 So I've chosen hexadecimal with the hash or # sign there 29 00:01:52,440 --> 00:01:56,370 and so that what's been copied into my clipboard. 30 00:01:56,370 --> 00:02:02,070 So it's a pretty handy tool. I will admit I actually use this week. 31 00:02:02,070 --> 00:02:04,640 Oh, you are willing to admit that? >>I am willing to admit it. 32 00:02:04,640 --> 00:02:06,640 I know big admission here. 33 00:02:06,640 --> 00:02:12,330 No. I used it to build a website earlier this week. This is Jason's surprise face. 34 00:02:12,330 --> 00:02:17,170 And it worked really well. I was able to just like click, copy these colors in. 35 00:02:17,170 --> 00:02:20,820 And it speed up my development a little bit because I was able to just like 36 00:02:20,820 --> 00:02:24,110 put together the color scheme really quickly and try out different things. 37 00:02:24,110 --> 00:02:29,920 I like some of these names here. >>Yeah! >>Wet asphalt. >>That's right. 38 00:02:30,920 --> 00:02:35,080 They should name one after you, Jason. >>This one's called Nephritis. 39 00:02:35,080 --> 00:02:39,540 That sounds like a disease. >>Or, >>Sorry I can't come to work today. 40 00:02:39,540 --> 00:02:40,820 My nephritis is flaring up. 41 00:02:40,820 --> 00:02:45,520 If Peter River, I mean I don't understand why it's not Jason River. >>Yeah. 42 00:02:45,520 --> 00:02:49,060 Yeah. >>Jason River. >>Jason. >>Selling tickets. >>That's right. 43 00:02:49,060 --> 00:02:51,230 Next stop over on the flippin' awesome blog, 44 00:02:51,230 --> 00:02:54,940 we have 5 things you should stop doing with jQuery. 45 00:02:54,970 --> 00:02:58,060 This is a wonderful list of, you guess it, 46 00:02:58,060 --> 00:03:00,320 things that you should stop doing with jQuery 47 00:03:00,420 --> 00:03:03,680 and more importantly why you should stop doing them. 48 00:03:03,680 --> 00:03:06,760 Now we're not going to get in to everything that they say on the show. 49 00:03:06,760 --> 00:03:12,220 I'm sorry. Say on the blog post here but number 1 stop using document ready. 50 00:03:12,220 --> 00:03:16,100 It's 2013. We don't have to use document ready all the time. 51 00:03:16,100 --> 00:03:20,000 The reason that you would want to use document ready is back in the day 52 00:03:20,000 --> 00:03:22,630 when you put all of your scripts in the head of a web page, 53 00:03:22,630 --> 00:03:27,210 it would have to wait until the rest of the page and scripts have loaded. 54 00:03:27,210 --> 00:03:30,310 But of course now you put all of your scripts towards the bottom. >>Right. 55 00:03:30,310 --> 00:03:33,080 And you know that the document is indeed ready 56 00:03:33,080 --> 00:03:35,140 by the time you are ready to execute that jQuery. 57 00:03:35,140 --> 00:03:38,640 Yeah. Unless you are using the async attribute. >>Boom! 58 00:03:38,640 --> 00:03:41,530 Next choose the right iterator for the job. 59 00:03:41,530 --> 00:03:44,860 jQuery provides a wealth of different iterators 60 00:03:44,860 --> 00:03:47,180 that you can use depending on what you need to do. 61 00:03:47,180 --> 00:03:50,080 So if there is a nice description of each and the different ones 62 00:03:50,080 --> 00:03:52,760 as well as the context in which you would use them.] 63 00:03:52,760 --> 00:03:56,660 Big fan of the map iterator which will iterate through an array. 64 00:03:56,660 --> 00:04:01,590 Add that all to a new one. Boom! Done. Anyway, bunch of graded vise on here. 65 00:04:01,590 --> 00:04:05,130 Just head on over to the blog post @flippinawesome.com 66 00:04:05,130 --> 00:04:08,330 and you can also find it in the show notes on youtube 67 00:04:08,330 --> 00:04:12,510 at youtube.com/gotreehouse or on itunes. 68 00:04:12,510 --> 00:04:16,250 Itunes. >>Search for treehouse, leave us reviews. >>On itunes. >>Yup. 69 00:04:16,250 --> 00:04:22,590 All right. Next up is the young person's guide to programming and minecraft. 70 00:04:22,750 --> 00:04:25,880 Of course minecraft is the popular compute game 71 00:04:25,880 --> 00:04:28,690 that was created I think a couple of years ago 72 00:04:28,690 --> 00:04:32,090 and was developed in a very open fashion. 73 00:04:32,130 --> 00:04:35,570 People could actually participate in the alpha and the beta 74 00:04:35,570 --> 00:04:37,910 and it since been released, 75 00:04:37,920 --> 00:04:40,010 but it's pretty cool game. 76 00:04:40,010 --> 00:04:43,390 Nick, if I am not specifically a young person, 77 00:04:43,390 --> 00:04:45,650 can I still read this guide and get something out of it? 78 00:04:45,650 --> 00:04:47,770 I think so, Jason. 79 00:04:47,770 --> 00:04:50,520 I don't know why it's specifically targeted at young people 80 00:04:50,520 --> 00:04:52,890 but of course, yeah, you can get something out of it. 81 00:04:52,890 --> 00:04:58,170 So minecraft is a computer game where you mine stuff and then you craft stuff. 82 00:04:58,170 --> 00:05:00,130 So that's kind of an explanation of minecraft 83 00:05:00,130 --> 00:05:02,930 getting into what this article is actually about. 84 00:05:02,930 --> 00:05:10,330 Basically, you can create what are called Mods or modifications for minecraft 85 00:05:10,330 --> 00:05:15,390 and one such Mod is called ScriptCraft and in ScriptCraft, 86 00:05:15,390 --> 00:05:20,800 you can actually program in the game using simple JavaScript statements 87 00:05:20,800 --> 00:05:22,790 and in choosing those, you can add new items, 88 00:05:22,790 --> 00:05:27,150 you can change the behavior of the game and you can actually build meta-games 89 00:05:27,150 --> 00:05:33,720 on top of minecraft, build this simpler, simple games within minecraft. 90 00:05:35,720 --> 00:05:38,450 Suggest learning JavaScript and then jumping into it. 91 00:05:38,450 --> 00:05:42,080 Of course you can learn JavaScript on teamtreehouse.com 92 00:05:42,080 --> 00:05:43,850 Shameless self blog. >>That's right. 93 00:05:44,850 --> 00:05:49,030 And then after you learn JavaScript, you can jump into SciptCraft 94 00:05:49,030 --> 00:05:53,360 and they teach you how to do variables, functions, 95 00:05:53,360 --> 00:05:57,900 and a whole variety above there are other things in minecraft 96 00:05:57,900 --> 00:06:01,490 and eventually you will be able to actually build stuff. 97 00:06:02,330 --> 00:06:09,160 So I think this is pretty neat--it's not specifically related to web development 98 00:06:09,380 --> 00:06:12,490 but of course JavaScript is a very popular language 99 00:06:12,490 --> 00:06:14,940 and the web development space. 100 00:06:14,940 --> 00:06:20,050 That's what we use to make things happen on the front end of the browser. 101 00:06:20,050 --> 00:06:24,710 And I think this is a really cool way to get into JavaScript 102 00:06:24,710 --> 00:06:26,920 and get yourself familiar with the language 103 00:06:26,960 --> 00:06:29,250 and that will make you a stronger programmer 104 00:06:29,780 --> 00:06:31,120 when it comes to stuff on the web. 105 00:06:31,120 --> 00:06:35,400 Very nice. >>Interesting stuff. >>Next up, we have a tool called framer. 106 00:06:35,400 --> 00:06:42,100 This is a prototyping tool for animation and interaction on desktop and mobile. 107 00:06:42,100 --> 00:06:46,650 Now this is being build as an alternative to flash or keynote 108 00:06:46,650 --> 00:06:48,530 when prototyping an application 109 00:06:48,530 --> 00:06:52,490 and it's going to be used more for the interaction of the site. 110 00:06:52,490 --> 00:06:56,050 So to get some great examples here on the site, so you click through. 111 00:06:56,550 --> 00:07:01,890 First example is the Google search application 112 00:07:02,480 --> 00:07:05,480 and if I've mouse in here, easy boom. 113 00:07:05,480 --> 00:07:08,700 It automatically animates up and you can kinda just get a feel 114 00:07:08,700 --> 00:07:10,960 for how the applications going to work. 115 00:07:10,960 --> 00:07:15,360 The next example that they have is something that you should be familiar with 116 00:07:15,360 --> 00:07:17,760 facebook, pretty much everybody is on facebook 117 00:07:17,760 --> 00:07:21,750 so you click little three button menu we've talked about before on the show 118 00:07:21,750 --> 00:07:24,780 and it kinda shows you how the newsfeed and events 119 00:07:24,780 --> 00:07:27,360 and basically everything on this side of the page is going to work. 120 00:07:27,360 --> 00:07:32,180 So this is really not going to be for creating full applications. 121 00:07:32,180 --> 00:07:35,660 It's going to be used just to get an idea of how the interactions 122 00:07:35,660 --> 00:07:37,580 and animations are going to play out on the site. 123 00:07:37,580 --> 00:07:40,710 And interaction and animation is quickly becoming 124 00:07:40,710 --> 00:07:44,320 a lot bigger in the field of creating applications. 125 00:07:44,320 --> 00:07:47,510 So let me keep up on the radar in case this is what you're doing. 126 00:07:47,510 --> 00:07:52,330 And I think it actually pairs really nicely with flat design in that, you know, 127 00:07:52,330 --> 00:07:55,900 it's much easier to create a more complex animations 128 00:07:55,900 --> 00:07:58,970 because you're not spending so much time like getting with the textures 129 00:07:58,970 --> 00:08:03,290 all around the corners of all these different design details just right 130 00:08:03,290 --> 00:08:07,810 but you can actually communicate a lot with nice, smooth animations so I like it. 131 00:08:07,810 --> 00:08:11,760 I think it's pretty cool. >>I think it pairs really nicely with a port wine. 132 00:08:12,760 --> 00:08:14,800 So are you, Jason. >>Thank you. 133 00:08:14,800 --> 00:08:19,610 Next up, is a usability checklist, it's in beta. 134 00:08:19,610 --> 00:08:23,330 Not really sure what's in beta specifically. >>The checklist. >>Yeah. 135 00:08:23,330 --> 00:08:25,130 That looks like the checklist itself is in beta. 136 00:08:25,130 --> 00:08:27,350 Maybe there's more things I want to add in the checklist. 137 00:08:27,350 --> 00:08:31,590 It's possible but I really like this checklist quite a lot 138 00:08:31,590 --> 00:08:36,039 basically before you launch your website 139 00:08:36,039 --> 00:08:40,480 and, you know, you want to make sure that everything is of quality. 140 00:08:40,480 --> 00:08:45,180 You can go through this checklist and just kind of get a sanity check 141 00:08:45,180 --> 00:08:51,780 and say like, you know, what is the first impression when people hit the homepage? 142 00:08:51,780 --> 00:08:54,510 or, you know, is my site easy to navigate? 143 00:08:54,510 --> 00:08:58,750 am I hitting all the check boxes here with accessibility? 144 00:08:58,750 --> 00:09:03,920 and, you know, am I doing a good job with search, etc. etc. etc. 145 00:09:03,920 --> 00:09:10,620 It's a pretty exhaustive checklist and I think it's really good even for beginners 146 00:09:10,620 --> 00:09:13,830 or people that are much more advance with web development 147 00:09:13,830 --> 00:09:16,370 because there's so many things to remember in these days. 148 00:09:16,370 --> 00:09:21,020 I mean there's so much stuff that goes into a website that it's great to just have 149 00:09:21,020 --> 00:09:24,980 a nice handy checklist like this to make sure you're covering all the basics. 150 00:09:24,980 --> 00:09:27,620 Yeah. Definitely. >>So, pretty cool stuff. 151 00:09:27,620 --> 00:09:33,910 Next up, we have an application called Ghostlab. Now this is a paid application. 152 00:09:33,910 --> 00:09:37,480 They're not sponsoring the show, full disclosure, just thought that this was cool 153 00:09:37,480 --> 00:09:39,110 not we would mention it. 154 00:09:39,110 --> 00:09:44,180 So what this does, it's pretty interesting, you set up a site inside of Ghostlab, 155 00:09:44,180 --> 00:09:48,700 you know, drag it in and then it will launch an HTTP server for you. 156 00:09:49,090 --> 00:09:51,030 You can then connect the browser to it 157 00:09:51,590 --> 00:09:53,970 or multiple browsers is where it really shines 158 00:09:54,000 --> 00:09:56,850 and then as you're scrolling through on one browser, 159 00:09:56,850 --> 00:09:59,460 it automatically updates all the other browsers. 160 00:09:59,840 --> 00:10:01,100 That's pretty amazing. >>Yeah. 161 00:10:01,100 --> 00:10:04,570 This is wonderful if you are trying to test mobile sites. 162 00:10:04,720 --> 00:10:07,670 Because as your filling in a form on one browser, 163 00:10:07,670 --> 00:10:12,530 it'll automatically fill it in on another as well and if that weren't enough, 164 00:10:12,530 --> 00:10:15,640 you can automatically debug the stuff live. 165 00:10:15,640 --> 00:10:17,580 Now you are going to need a browser that supports 166 00:10:17,580 --> 00:10:21,980 JavaScript in order to get this to work but definitely go ahead and check it out. 167 00:10:21,980 --> 00:10:27,550 Synchronize testing is really really the big deal as well as inspection. 168 00:10:27,550 --> 00:10:31,460 You can see immediately what's causing the problem in the browser 169 00:10:31,460 --> 00:10:33,790 if you're getting some weird behavior or otherwise, 170 00:10:33,790 --> 00:10:36,520 immediately inspect it and see what's going on. 171 00:10:36,520 --> 00:10:41,160 So. >>This pair is really nicely with that usability checklist. 172 00:10:41,160 --> 00:10:43,700 Because you can go through and make sure you're 173 00:10:43,700 --> 00:10:47,410 covering all those check boxes in every browser. 174 00:10:47,410 --> 00:10:50,590 Also, a chardonnay. >>Hmmm. 175 00:10:51,300 --> 00:10:54,600 Next up, we've got some handy-->>From the wine region-- 176 00:10:55,590 --> 00:10:59,080 We've got-- >>of France. >>Some Handy Sass Mixins 177 00:10:59,850 --> 00:11:07,470 And basically Sass is a language that compiles to CSS 178 00:11:07,470 --> 00:11:12,560 so it can be read by the browser but it's a much easier way to write your styling 179 00:11:12,560 --> 00:11:18,820 because you can use things like variables and these pieces of code 180 00:11:18,820 --> 00:11:24,760 that are called Mixins so you can mix in this Sass code 181 00:11:24,760 --> 00:11:27,940 into your Sass code very fluidly. 182 00:11:28,770 --> 00:11:32,540 They have Mixins here that are for responsive breakpoints, 183 00:11:32,540 --> 00:11:37,560 so if you're building websites that uses responsive design 184 00:11:37,560 --> 00:11:39,940 which really almost any website you're building 185 00:11:39,940 --> 00:11:44,200 should probably be using responsive design as a handy Mixin to use. 186 00:11:45,150 --> 00:11:51,040 They also have Mixins for targeting devices with retina displays 187 00:11:51,040 --> 00:11:55,710 or high resolution displays and that's actually pretty simple to do. 188 00:11:55,990 --> 00:11:59,520 There's just a lot of little steps here you got to remember 189 00:11:59,520 --> 00:12:02,750 and so that just encapsulates all of them really easily 190 00:12:02,750 --> 00:12:07,380 and then you can go ahead and use it here as a Sass Mixin and you just say it 191 00:12:07,380 --> 00:12:11,010 you know, I want to go ahead and include this 2x version of the image 192 00:12:11,010 --> 00:12:16,380 and it will go ahead and expand out that Sass into this CSS here. 193 00:12:16,380 --> 00:12:20,500 They have a couple of others. There is that Clearfix, one for box sizing, 194 00:12:21,110 --> 00:12:24,380 border radius which I mean that can get really complicated 195 00:12:24,380 --> 00:12:29,420 if you're working with the lot of different browser shares that covers all those 196 00:12:30,490 --> 00:12:33,200 but pretty cool stuff and, you know, if you use Sass. 197 00:12:33,200 --> 00:12:36,380 This is definitely a handy side of Mixins for use. 198 00:12:36,380 --> 00:12:39,170 That would pair pretty well with Ghostlab which we just talked 199 00:12:39,170 --> 00:12:40,720 about because it does support Sass. 200 00:12:41,060 --> 00:12:44,670 Or a nice ???. >>I would have suggested a ???. 201 00:12:44,670 --> 00:12:46,390 But you know your taste is your taste. 202 00:12:47,830 --> 00:12:51,440 Next up, we have a JavaScript library called Hammer.js 203 00:12:51,440 --> 00:12:57,300 This is a library for multitouch gestures and I think It's incredibly well named. 204 00:12:57,300 --> 00:13:02,760 Also, I really really love the art on the site. >>You can touch this. >>Exactly. 205 00:13:02,760 --> 00:13:06,040 So this is going to be useful if you're working on 206 00:13:06,040 --> 00:13:09,200 phone, tablet, any device that supports multitouch. 207 00:13:09,200 --> 00:13:15,300 The Hammer Javascript library will allow you to very easily attach elements 208 00:13:15,300 --> 00:13:18,540 attach certain events to elements. 209 00:13:18,540 --> 00:13:23,590 So if somebody is swiping left, you can attach that to a specific DIV on a page, 210 00:13:23,590 --> 00:13:27,840 capture that and perform some sort of functionality when somebody swipes left. 211 00:13:27,840 --> 00:13:33,180 Now this is a great library and it's pretty small. It's only 3 kb when GZIP. 212 00:13:33,610 --> 00:13:36,090 So check this out--they've got really thorough documentation 213 00:13:36,090 --> 00:13:39,240 and it is a great library. 214 00:13:39,240 --> 00:13:43,730 So that's about all we got today. >>That is it for this week's episode. 215 00:13:43,730 --> 00:13:46,670 I'm @nickrp on twitter. >>And I am @jseifer. 216 00:13:46,670 --> 00:13:51,020 If you like this show, please rate us in itunes. Search for the Treehouse Show. 217 00:13:51,020 --> 00:13:56,220 You can also find show notes and more on youtube @youtube.com/gotreehouse. 218 00:13:56,220 --> 00:14:01,490 And of course if you like to see more videos like this one about iOS, android, 219 00:14:01,490 --> 00:14:06,540 HTML, CSS, business and so much more, Ruby of course. 220 00:14:06,540 --> 00:14:11,400 Of course. >>This guy right here. Be sure to check us out @teamtreehouse.com 221 00:14:11,400 --> 00:14:13,580 Thank you so much for watching and we'll see you next week. 222 00:14:13,580 --> 00:14:17,170 Stay tune for rewind/review podcast.