Episode 43: SVG and Icon Fonts, Typography and CSS Sliders

I'm Nick Petitt. >>And I'm Jason Seiffer. >>And you're watching the Treehouse Show, 0:01 your weekly dose of Internets, where we talk about all 0:05 things web design, web development, and more. 0:07 >>In this episode, we'll be talking about flat UI colors, 0:09 things you shouldn't be doing with jQuery, 0:12 usability, and much more. >>Let's check it out. 0:15 [? music ?] 0:18 [The Treehouse Show] 0:21 Well, first up is flat UI colors, and, of course, 0:24 we've talked about flat UI a little bit on the show. >>Talked so much. 0:28 >>It's basically the opposite of skeuomorphism. 0:32 So skeuopmorphism is where— >>It's right up there with CSS frameworks, 0:35 on the list of things we talk about a lot on here. 0:39 >>And icon fonts. >>And responsive websites. 0:42 >>That's right. Anyway, skeuomorphism is where stuff looks super realistic. 0:45 In a digital interface, it's basically trying to mirror a real-world 0:50 interface, so something like iCal on OS X, 0:55 where it has all this leather and papery texture and stuff, 0:59 whereas flat design is basically a response to that. 1:02 So it's what you see in, like, Windows 8 and 1:05 a lot of other websites these days. 1:09 So these flat UI colors basically allow you to draw upon this 1:12 pre-made color palette and create your website 1:19 with flat UI in mind. 1:22 So they just have these really nice, well put-together colors that 1:25 go really well together, and you can click on each one of these. 1:29 So I'll click on Midnight Blue here, 1:34 and it'll say Copied. 1:39 So if you click on one of these, it will copy it to your Clipboard. 1:41 And you can choose the format up here. 1:45 So I've chosen hexadecimal with the hash, or pound, sign there. 1:47 And so that's what's been copied into my Clipboard. 1:52 So it's a pretty handy tool. 1:56 I will admit I actually used this this week. >>Oh, you're willing to admit that? 1:59 >>I am willing to admit it. I know, big admission here. 2:03 No, I used it to build a website earlier this week. 2:06 This is Jason's surprised face. And it worked really well. 2:11 I was able to just click, copy these colors in, and it sped up my development a little bit, 2:14 because I was able to just put together the color scheme really quickly 2:19 and try out different things. >>I like some of these names here. 2:23 >>Yeah. >>Wet Asphalt. >>That's right. They should name one after you, Jason. 2:27 >>This one's called Nephritis. That sounds like a disease. 2:32 Sorry, I can't come to work today. My nephritis is flaring up. 2:37 >>They have Peter River. I mean, I don't understand why it's not Jason River. 2:41 It's obviously— >>Yeah. >>You know. >>Jason River— >>Jason. 2:44 >>Selling tickets. >>That's right. >>Next up, over on the Flippin' Awesome Blog, 2:47 we have 5 Things You Should Stop Doing With jQuery. 2:51 This is a wonderful list of, you guessed it, things that you should doing with jQuery 2:55 and, more importantly, why you should stop doing them. 3:00 Now we're not going to get into everything that they say on the show— 3:03 I'm sorry, say on the blog post here, but number one, stop 3:06 using Document Ready. It's 2013. We don't have to use Document Ready all the time. 3:10 The reason that you would want to use Document Ready is, 3:15 back in the day, when you put all of your scripts in the head of a web page, 3:18 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 3:27 and know that the document is indeed ready 3:29 by the time you're ready to execute that jQuery. 3:33 >>Yeah. Unless you're using the async attribute. 3:35 >>Boom. >>Next, choose the right iterator for the job. 3:37 jQuery provides a wealth of different iterators that you can use, 3:41 depending on what you need to do. So there's a nice description 3:45 of each of the different ones, as well as the context 3:49 in which you would use them. I'm a big fan of the map iterator, 3:51 which will iterate through an array, add that all to a new one. 3:54 Boom. Done. Anyway, a bunch of great advice on here. 3:58 Just head on over to the blog post at flippinawesome.org. 4:01 And you can also find it in the show notes on YouTube at youtube.com/gotreehouse 4:05 or on iTunes. 4:10 >>iTunes. >>Search for Treehouse. Leave us reviews. 4:12 >>On iTunes. >>Yeah. >>All right. Next up is the Young Persons 4:14 Guide to Programming in Minecraft. 4:19 Of course, Minecraft is the popular computer game that was created, 4:22 I think, a couple years ago and was developed in a very open fashion. 4:27 People could actually participate in the alpha and the beta, 4:32 and it's since been released, but it's a pretty cool game. 4:35 >>If I'm 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. I don't know why it's specifically targeted at young people, 4:45 but, of course, yeah, you can get something out of it. 4:50 So Minecraft is this computer game where you mine stuff, 4:53 and then you craft stuff. So that's kind of an explanation of Minecraft. 4:57 Getting into what this article is actually about, basically, you can 5:00 create what are called mods, or modifications, for Minecraft, 5:05 and one such mod is called Scriptcraft. 5:10 And in Scriptcraft, you can actually program in the game, 5:13 using simple JavaScript statements. 5:17 And using those, you can add new items, you can change 5:20 the behavior of the game, and you can actually build metagames on top of Minecraft. 5:23 Build these simpler, you know, simple games within Minecraft. 5:28 It suggests learning JavaScript and then jumping into it. 5:33 Of course, you can learn JavaScript on teamtreehouse.com. 5:38 >>Shameless self-plug. >>That's right. 5:42 And then, after you've learned JavaScript, you can jump into 5:44 Scriptcraft, and they teach you how to do variables, functions, and 5:48 a whole variety of other things in Minecraft. 5:54 And eventually you will be able to actually build stuff. 5:57 So I think this is pretty neat, you know. It's not specifically related to 6:01 web development, but, of course, JavaScript is a very popular language 6:08 in the web-development space. 6:12 It'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:19 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. >>Very nice. >>Interesting stuff. >> 6:29 Next up, we have a tool called Framer. This is a prototyping tool for animation 6:33 and interaction on desktop and mobile. 6:39 Now this is being billed as an alternative to Flash or Keynote when 6:42 prototyping an application, and it's going to be used 6:47 more for the interaction of the site. 6:50 So they've got some great examples here on the site. 6:52 So you click through. First example is the Google Search application, 6:55 and if I mouse in here, you can see, boom, it automatically animates up. 7:02 And you can kind of just get a feel for how the application's going to work. 7:07 The next example that they have is something that you should be familiar with: 7:10 Facebook. Pretty much everybody's on Facebook, 7:15 so you click that little three-button menu we've talked about before 7:17 on the show, and it kind of shows you how the news feed and events and 7:21 basically, everything on the side of the page is going to work. 7:25 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 7:31 of how the interactions and animations are going to play out on the site. 7:34 And interaction and animation is quickly becoming a lot bigger 7:37 in the field of creating applications, so it's something to keep on the radar, 7:42 in case this is what you're doing. >>And I think it actually pairs really nicely 7:45 with flat design in that, you know, it's much easier to create 7:49 more complex animations, because you're not spending so much time 7:54 getting the textures or the round corners or 7:57 all these different design details just right. 8:00 But you can actually communicate a lot with nice smooth animation. 8:03 So I like it. I think it's pretty cool. >>I think pairs really nicely with a port wine. 8:07 >>So you, Jason. >>Thank you. 8:11 Next up is a Usability Checklist. It's in beta. 8:14 I'm not really sure what's in beta specifically. 8:19 >>The checklist? >>Yeah, it looks like the checklist itself is in beta. 8:22 >>Maybe there's more things they'll want to add to the checklist. 8:25 >>It's possible, but I really like this checklist quite a lot. 8:27 Basically, before you launch a website and you want to make sure that 8:31 everything is of quality, you can go through this checklist 8:38 and just kind of get a sanity check and say, like, what is the first impression 8:42 when people hit the home page? 8:48 Or is my site easy to navigate? 8:51 Am I hitting all the check boxes here with accessibility? 8:54 And am I doing a good job with search, etcetera, etcetera, etcetera. 8:58 It's a pretty exhaustive checklist, and I think it's really good 9:03 even for beginners or people that are much more advanced with 9:09 web development, because there are so many things to remember these days, 9:13 I mean, there is so much stuff that goes into a website 9:16 that it's great to just have a nice handy checklist like this to make sure 9:19 you're covering all the bases. 9:22 >>Yeah, definitely. >>So, pretty cool stuff. 9:25 >>Next up, we have an application called Ghostlab. 9:27 Now this is a paid application. They're not sponsoring the show, 9:32 full disclosure. Just thought that this was cool and that we would mention it. 9:35 So what this does, it's pretty interesting. You set up a site 9:38 inside of Ghostlab, you know, drag it in, and then it will launch an HTTP server for you. 9:43 You can then connect a browser to it, 9:48 or multiple browsers is where it really shines. 9:50 And then, as you're scrolling through on one browser, 9:54 it automatically updates all the other browsers. 9:57 >>That's pretty amazing. >>Yeah. This is wonderful if you were trying to test 9:59 mobile sites, because even as you're filling in a form on one browser, 10:03 it'll automatically fill it in on another as well. 10:07 And, if that weren't enough, you can automatically debug the stuff live. 10:10 Now you are going to need a browser that supports JavaScript 10:15 in order to get this to work. But definitely go ahead and check it out. 10:18 Synchronized 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 pairs 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. >>Hmm. Next up, we've got some handy— 10:47 We've got some Handy Sass Mixins. 10:54 Basically, Sass is a language that compiles to CSS. 10:58 So it can be read by the browser, but it's a much easier way to 11:07 write your styling, because you can use things like variables 11:11 and these pieces of code that are called mixins. 11:16 So you can mix in this Sass code into your Sass code very fluidly. 11:20 They have mixins here that are for responsive breakpoints. 11:28 So if you're building a website that uses responsive design, which really, 11:32 almost any website you're building should probably be using responsive design. 11:38 That's a handy mixin to use. 11:42 They also have mixins for targeting devices with retina displays or 11:45 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:56 and so that just encapsulates all of them really easily, and you can go ahead 11:59 and use it here as a Sass mixin, and you just say I want to go ahead and 12:04 include this 2x version of the image, 12:08 and it will go ahead and expand out that Sass into this CSS here. 12:11 They have a couple of others. There's a clear fix, one for box sizing, 12:16 border radii, which, I mean, that can get really complicated 12:20 if you're working with a lot of different browser shares, 12:24 so it covers all those. But pretty cool stuff, and if you use Sass, 12:28 this is definitely a handy set of mixins for you to use. 12:33 >>That would pair pretty well with Ghostlab, which we just talked about, 12:36 because it does support Sass. >>Or a nice Merlot. 12:39 >>I would have suggested a Pinot, but you know, your taste is your taste. 12:42 Next up, we have a JavaScript library called Hammer.js. 12:46 This is a library for multi-touch gestures, and I think it's incredibly well named. 12:51 Also, I really, really love the art on the site. 12:57 >>Conceptualist. >>Exactly. So this is going to be really useful if 13:01 you're working on, you know, phone, tablet, any device that supports multi-touch. 13:04 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 the page, 13:18 capture that, and perform some sort of functionality 13:23 when somebody swipes left. 13:26 Now, this is a great library, and it's pretty small. 13:28 It's only 3 kilobytes when gzipped. 13:30 So check this out. They've got really thorough documentation, and 13:33 it is a great library. 13:36 So that's about all we got today. >>That is it for this week's episode. 13:40 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 at youtube.com/gotreehouse. 13:51 >>And of course, if you'd like to see more videos like this one 13:56 about iOS, Android, HTML, CSS, business, and so much more, 13:59 Ruby, of course— >>Of course. >>This guy right here. 14:05 Be sure to check us out at teamtreehouse.com. 14:07 Thanks so much for watching, and we'll see you next week. 14:11 Stay tuned for our wine review podcast. 14:13 [? music ?] 14:17