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