Episode 57: CSS3 Multiple Backgrounds, Ember.js, Favicons

I'm Nick Pettit. >> I'm Jason Seifer. 0:00 [Nick] And you're watching The Treehouse Show, your weekly dose of 0:02 internet where we talk about all things web design, web development, and more. 0:04 [Jason] In this episode we'll be talking about CSS3, 0:08 multiple background images, Ember.js, Favicons, and more. 0:10 [Nick] Let's check it out. 0:15 [treehouse show] 0:17 [Nick] First up is a blog post from Philip Walton called 0:21 "Decoupling Your HTML, CSS, and JavaScript." 0:26 Of course, HTML, CSS, and JavaScript form the structural, 0:30 presentational, and behavioral layers of front end, 0:34 and it's important to try and separate them as much as you possibly can. 0:39 In this article he goes over a couple of different ways 0:44 that you can keep that clean separation. 0:47 I'm just going to talk about two here. 0:50 The first one is Overly Complex Selectors. 0:52 Now I've actually tweeted about this before. 0:56 You don't want to have CSS Selectors that are too complicated. 0:58 You want to have stuff that's actually pretty simple, 1:03 not necessarily tied to any specific HTML 1:06 with too many classes and too many IDs. 1:09 Rather, you want to try to create stuff that's reusable as much as possible. 1:13 It seems a little bit counterintuitive, 1:17 but after you do it for awhile, it starts to become second nature. 1:20 Next up are Classes With More Than One Responsibility. 1:23 It can be very tempting to try and roll in a bunch of 1:27 functionality into a single CSS class, 1:31 but you should try to separate their purposes a little bit. 1:34 So you might have one class that styles a button and then 1:38 if you have multiple button and colors, for example, 1:41 it might be good to create separate classes for each button color 1:44 and the different styles that go with each color. 1:47 And that way you have two separate classes, and you can apply them 1:50 to the same element, and then that makes your CSS a lot more reusable. 1:53 There's a bunch more tips in this article, so I highly recommend you check it out. 1:56 [Jason] Very nice. Really, really, thought-provoking material. >> [Nick] Yep. 2:00 [Jason] Next up we have a web site called explainshell.com. 2:04 This is really, really useful if you're unfamiliar with 2:08 command line arguments and what exactly they do. 2:11 So it's really great—you can put in practically any command 2:14 and then it'll give you a nice diagram of what it means. 2:17 Now this is a lot easier to see if you just 2:20 check out one of the examples on the site. 2:23 So here is the tar command, and you can click on that, 2:25 and it breaks it down for you with exactly what's going on. 2:29 So there's the command and then you can even 2:32 mouse over each of the different options, 2:35 and it will give you a description of what's going on here. 2:37 So it works with a lot of different commands. 2:41 I haven't found one yet that it hasn't worked with, 2:44 and check that out. explainshell.com. 2:47 [Nick] Huh. That's funny. I actually read that as "explains hell." 2:49 Because you know, the shell is a really scary place for a designer. 2:52 [Jason] No, that's legit. I read it that way, too. 2:57 [Nick] Oh, okay. But it's "explainshell." >> [Jason] Yeah. >> [Nick] All right. 3:00 Next up is another blog post over on Developer Drive 3:03 about CSS3 multiple background images. 3:06 Now in CSS3, you can actually have more than one 3:09 background applied to the same element, 3:13 so if you have some transparent images like some transparent 3:16 .pngs with an alpha layer, you could go ahead and stack those up, 3:20 and then you could even put like a gradient or a solid color behind them. 3:24 So— >> [Jason] Does that work with animated gifs? 3:28 Like, could I have multiple, like transparent animated gifs? 3:30 [Nick] I actually don't know, but I assume you could. 3:34 I don't see why not. >> [Jason] Sounds wonderful. 3:38 [Nick] That would be great. Yeah, just having multiple animated gifs. 3:40 Actually, that sounds terrible. 3:45 So, in this post they describe how you can use a couple of different 3:47 images and actually reuse the same image to create this nice little header here. 3:51 So I'm actually going to scroll down a bit—there we go. 3:56 So they have this grassy texture that they've applied multiple times, 3:59 and it just kind of repeats across, and then 4:04 they have other images that they've layered on top. 4:06 Now the cool thing about this is that the markup is actually fairly simple. 4:09 They just have this one header element, and then they have other images that they layered on top. 4:14 They need to use images there instead of background images 4:19 because they actually go on to animate those, 4:22 but the final demo looks pretty cool. 4:25 You can actually go ahead and spread out these elements, 4:29 and it has a little bit of interactivity when you go ahead and hover over, 4:31 but multiple background images are, you know, 4:36 a really cool way to maybe save a little bit of bandwidth, 4:38 and not use so many different images, or so many different 4:42 elements just to create the same look. So pretty nifty. 4:45 [Jason] I was just kidding about the multiple animated gifs. That's a terrible idea. 4:49 [Nick] It is. >> [Jason] Next up, Ember.js 1.0 has been released. 4:54 Ember.js is JavaScript like front end 4:58 application framework, and it recently hit the 1.0 milestone. 5:02 So, if you aren't using it yet, you should at least check it out. 5:06 Now they have a blog post showing kind of what went into it 5:09 and the thinking behind Ember.js. 5:13 It recently got a little bit of a face lift on the router. 5:16 Testing is great.There's an Ember inspector for Chrome. 5:20 But if you haven't checked out Ember.js, it's definitely worth taking a look at. 5:24 It allows you to write a loss less code when you're creating your JavaScript applications. 5:29 It has really interesting templating languages 5:33 and overall just makes things a lot smoother. So check that out. 5:36 We'll have a link in the Show Notes, which you can get to at 5:39 youtube.com/gotreehouse or in iTunes. 5:41 Search for us at The Treehouse Show. >> [Nick] Oh, that's pretty cool. 5:44 Now something I learned from one of my coworkers, 5:47 Andrew Trockley, is that in the U.K., they actually say "rooter." 5:49 [Jason] Hmm. >> [Nick] So if you're confused by Jason saying "router," that's what he meant. 5:53 That's the translation. >> [Jason] My apologies. >> [Nick] Yep. Anyway. 5:58 A Favicon cheat sheet is next, and it's basically— 6:02 it's just this really cool list of ways that you can implement 6:06 Favicons, or "fave icons" onto your site. 6:10 It was compiled from a list of several different resources, 6:14 and this is actually really handy because it's more difficult than 6:18 it would seem to implement a good Favicon. 6:22 You have to get the HTML right for a variety of hardware and software devices. 6:25 You also need to make sure that you have the right images, 6:31 and of course you also need to make sure that you have 6:34 retina images for higher-resolution displays. 6:37 And then there's the actual ICO file itself. 6:40 You need to make sure that you're using the right 6:44 file format, again depending on the hardware 6:46 or software device that you're targeting. 6:48 After that they list out a bunch of helpful tools that can help you 6:50 create Favicons and a bunch of other stuff. Oh. Wow. 6:53 Even how to Force a Favicon Refresh, and that's something that's actually super difficult. 6:58 Every time I'm putting together Favicons, 7:03 I'm always having trouble like getting the browser to let go of 7:06 a particular Favicon I've introduced so that I can use a new one. 7:09 That's kind of crazy. So. 7:14 A really cool list and super helpful. 7:16 [Jason] And to go along with that list is 7:19 a library called Favico.js. 7:22 [Nick] Wow. That's a wonderful segue. 7:24 [Jason] Wasn't it? And Favico.js is pretty interesting. 7:26 It gives you a bunch of options for working with Favicons 7:30 or "fave icons" as we say here on The Treehouse Show. 7:32 You can do things like add badges to your Favicon with 7:36 different numbers; you can have different animations go along with it. 7:40 I mean, check this out. Look, are you ready for pop animation? See that? 7:44 [Nick] Whoa. >> [Jason] Look, it keeps popping. 7:47 Wow. Oh. I should call a doctor. 7:49 You can change the color of the Favicon. 7:51 You don't even have to animate. Anyway. 7:54 It's really, really easy to use as you would expect from 7:57 basically any plugin we talk about here on The Treehouse Show. 8:00 So check it out. Favico.js. 8:03 [Nick] Very cool stuff. Well next up. 8:06 If you're an iOS developer, we we have something for you. 8:08 iOS Dev Tools is this wonderful list of— 8:11 you guessed it—iOS Dev Tools, and it's basically 8:15 inspiration for your next app. 8:18 You can get iOS Fonts for your typography. 8:21 There's also a bunch of cool design resources that you can go ahead and use. 8:25 And then there's Images, Icons, Editors, 8:30 Documentation, and you get the idea. 8:33 But it's basically just this really wonderful list of 8:37 tools that you can use to make your next iPhone app, 8:39 which of course is something that we teach on Treehouse, 8:43 so be sure to check us out at teamtreehouse.com. 8:46 [Jason] Oh, I like that. That was a really nice segue. 8:48 [Nick] Really nice segue there. 8:51 [Jason] It's also pretty important now that iOS 7 is coming out, and it's going to be taken over. 8:53 [Nick] Definitely. >> [Jason] Why do they call it iOS? 8:55 Why can't it be uOS or weOS? That sounds a lot nicer and more inclusive. 8:58 [Nick] Mm-hmm. [Jason] Next up we have a website called UIBox. 9:02 This is a curated library of HTML, CSS, and JavaScript components. 9:06 So check it out. We can have a tag here. 9:12 We click on "accordion," and we have a bunch of different options for menus and toggles. 9:15 These are mostly going to be jQuery plugins, but 9:21 there's also some different backbone options. 9:24 Look, we've got one there. Backbone auto complete. 9:27 So it's just a great place to go to either get some inspiration 9:29 for something or find that perfect library that you've been looking for. 9:33 [Nick] Yeah, that's a really nice set of design patterns. 9:37 Of course we've covered that before. 9:40 There's stuff like Pattern Tap, and I think there's one more 9:42 that I can't think of the name of—but 9:45 [Jason] You can't get enough. >> [Nick] Yeah. 9:46 [Jason] I can't get enough. I'll sometimes spend a whole Saturday just browsing these components and crying deeply. 9:48 [Nick] Yep. >> [Jason] So that's about all we have time for. 9:53 I'm @jseifer on Twitter. 9:55 I'm @nickrp. You sound like you're going to say something. >> [Jason] Yeah, I did. 9:57 For more information on anything we talked about, 10:01 check out our Show Notes at youtube.com/gotreehouse, 10:03 or search for us in iTunes at The Treehouse Show. 10:06 [Nick] And of course, if you'd like to see more videos like this one, 10:09 except these videos are actually much, much better, 10:12 be sure to check us out at teamtreehouse.com, 10:14 and thanks so much for watching, and we'll see you next week. 10:17 [treehouse show] 10:20 [laughter] 10:28

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

Sign up