Episode 5: JavaScript Tools

Hi, I'm Nick Pettit. >>I'm Jason Seifer. >>And you're watching The Treehouse Show. 0:01 Your weekly dose of Internets where we talk about all things web design, web development, and more. 0:05 In this episode, we're going to be going over subtle patterns that you can use in your webpages, 0:10 design patterns in JavaScript, and the usual interesting roundup 0:14 of JavaScript projects as well as coding tools. 0:18 Let's get into it. 0:21 [The Treehouse Show] 0:26 First up is subtle patterns at subtlepatterns.com. 0:28 This is a collection of--you guessed it--subtle patterns that you can use as background images 0:33 for your webpages and these are all free. 0:40 You can go ahead and just look at them in a list or as thumbnails. 0:42 And this may be a little bit too subtle to come across on YouTube 0:46 but I promise you that all of these gray areas are actually really nice patterns. 0:52 Now this is always nice to include in your webpages because it adds just a little bit of texture 0:59 to the backgrounds and, you know, makes it seem like a--I guess, a richer visual experience. 1:06 Kind of ties the site together. >>Yeah. Really ties the room together. 1:13 Like that lamp from Ikea. >>Yeah. Or maybe a rug perhaps. 1:18 So next up we're going to be talking about understanding design patterns in JavaScript. 1:23 This is a blog post over on the Nettuts+ blog talking about why you want to understand design patterns 1:29 in the JavaScript programming language. 1:37 The reason you would want to understand design patterns in JavaScript 1:39 is that so you could actually implement them on your own JavaScript sites 1:43 or work with existing JavaScript libraries and actually understand what's going on. 1:46 This is an excellent blog post for people who have kind of dabbled in some JavaScript 1:52 and really want to understand how the language works. 1:57 It goes over the different types of design patterns available in JavaScript, 2:01 how to deal with privacy of classes and attributes, 2:04 and what happens inside of design patterns while you're building your applications. 2:09 This is all part of a book by Addy Osmani. 2:14 And you can go ahead and read that book called Learning JavaScript Design Patterns. 2:18 There's a link to it at the end of the article. Great blog post. 2:22 I definitely recommend reading it if you want to brush up on your JavaScript. 2:27 Really, really cool stuff. Next up is Zoomooz.js. 2:31 That's zoom and then zoom spelled backwards dot js. 2:36 This is a really cool project that allows you to zoom or skew or scale your webpages 2:42 with just a little piece of JavaScript. 2:48 So you go ahead and click on this stuff and you can actually zoom the entire webpage. 2:51 Now, I don't know how to zoom out so I'm just going to go ahead and refresh the page here. 2:58 You can actually find this project on github and it's a jQuery plugin. 3:02 So if you just put jQuery on to your site, you can go ahead and drop it right in there. 3:08 Kids these days with their JavaScripts and their zooming and rotating. 3:13 And their jQuery using plugins stuff. >>Get off of our web forums. >>Yeah. 3:17 Next up we have an app called Prototypes. 3:23 What this is going to do is let you turn your static designs into tappable iPhone prototypes. 3:26 Now it's worth nothing that this is a paid application. 3:32 They're not sponsoring The Treehouse Show. >>Shame on them. >>Shame on them. 3:34 But what this is, this is great. You upload a static version of your website. 3:38 And then you can actually turn this into a tappable application. More for demos. 3:42 You want to show somebody how your site's going to work, 3:48 maybe get some feedback on the application and--boom, you use Prototypes. 3:50 Just drag and drop into the application, kind of work with the behavior a little bit. 3:55 And you're good to go. That's prototypesapp.com. >>Pretty cool stuff. 3:58 A common question that we get a lot at Treehouse is, when can I use this HTML5 element 4:03 or this CSS thing or whatever it may be and usually the place we direct them to is caniuse.com. 4:13 This is a really nifty reference where you can go ahead and just look at CSS properties 4:23 or HTML5 elements and when you click into an individual property or element 4:29 you will be presented with a really nice table that shows you the support in various browsers 4:37 and their various versions. 4:43 It will also give you kind of a status update in terms of what percentage of browsers support that, 4:46 which is really nice, so if you're thinking about, 4:52 Do I want to go ahead and jump into the future with this CSS3 rounded corner thing? 4:54 Is it really going to be seen by a large percentage of people? 5:01 Of course, that actually depends more so on your users and who's actually visiting your website 5:05 but it's still nice to get a good idea before you embark on a new web project 5:12 whether or not something's actually going to be used before you have traffic. 5:17 And stay tuned after the show. 5:21 Nick and I are actually going to read off every single CSS and HTML property 5:23 as well as the browsers that it supports right after the show. 5:27 This is going to be our special six-and-a-half hour long episode of The Treehouse Show. 5:31 Pretty exciting. >>Next up is Cookie.js. 5:35 This simplifies cookies in JavaScript so what that does is it gives you an abstraction 5:38 when working with cookies in JavaScript. 5:44 It does not require jQuery and you have one single interface, cookie.set. 5:46 Set the key, the value. It could be anything. You know, hash or object. 5:53 Anything that JavaScript supports can be put inside of this cookie. 5:57 A few different options and just a really, really nice library for working with cookies in the browser. 6:01 Pretty nifty. Next up is Gauge.coffee and this is a project that's available on github. 6:06 It allows you to create these really neat gauges that are animated. 6:14 So if you want to show, I don't know, maybe how many people have visited your site lately. 6:20 You can go ahead and put a gauge on your website that will represent that. 6:25 The nice thing about this is that you can go ahead and customize it with all these little sliders here 6:28 where you can change maybe the animation speed, the angle at which the gauge is at, or the font size. 6:34 All sorts of stuff. And then you can go ahead and just drop the code right into your website. 6:42 And it's actually available as a jQuery plugin, but jQuery is not required. 6:47 I think it adds about 50 horsepower to your website. 6:54 Yeah, at least. It's going to make your website run a lot faster. 6:56 Just having that gauge on there because it's says the numbers. >>No. No. 7:00 You know it's true. >>That's terrible advice. Don't listen to us. 7:04 So next up over on the SitePoint blog is a discussion of using an HTML5 Shim 7:06 or Internet Explorer emulation mode. 7:13 So what this means is if you want to add certain HTML5 features 7:16 that maybe are available in something like Internet Explorer 7 or 8 7:20 well you can use JavaScript for an HTML5 Shim. 7:24 It's just a piece of JavaScript that you install on the site 7:27 and it allows those browsers to work with your HTML5 elements. 7:32 So you can also accomplish certain things by putting Internet Explorer into emulation mode 7:36 for IE7 or IE8, and there's actually a bizarre IE5 emulation mode. 7:41 I don't know why you'd ever want to emulate that but you have the option. 7:46 So the problem is, if you use one of these emulation modes and then somebody has your site 7:49 in an iframe on their site but they're in something like Internet Explorer 7 emulation, 7:54 well the HTML5 Shim, or if you put your site into Internet Explorer 9 mode, is not going to work. 7:59 It's going to be IE7 mode all the way down. 8:06 So in other words, if you have your stuff in an iframe in somebody else's website 8:08 they are using Internet Explorer 7 emulation mode 8:13 that's actually going to cascade down to your iframe. 8:18 Exactly. >>Got it. >>So the solution is a bit of a strange one. 8:21 You have to use the HTML5 Shim in all of the different versions 8:26 all the way up to Internet Explorer 9. 8:30 So there's an interesting article about this with a little bit more depth in discussion 8:33 over on the SitePoint blog, and you can find that link in the show notes for The Treehouse Show. 8:37 Very cool stuff. Well, that is it for this week's episode of The Treehouse Show. 8:42 Thank you so much for watching, and if you have any cool tips, tricks, or tools be sure to tweet us. 8:48 I'm @nickrp. >>I'm @jseifer. 8:54 Thanks everybody for tuning in and we will see you next time. >>See you later. 8:57

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

Sign up