1 00:00:00,280 --> 00:00:01,120 I'm Nick Pettit. 2 00:00:01,120 --> 00:00:02,130 >> I'm Jason Seifer. 3 00:00:02,130 --> 00:00:05,030 >> And you're watching The Treehouse Show, your weekly dose of internets 4 00:00:05,030 --> 00:00:08,460 where we talk about all things web design, web development, and more. 5 00:00:08,460 --> 00:00:10,070 >> In this episode we'll be talking about 6 00:00:10,070 --> 00:00:15,020 web Icon, webshims, JQuery Coding Standards, and more. 7 00:00:15,020 --> 00:00:15,830 >> Let's check it out. 8 00:00:15,830 --> 00:00:21,054 [MUSIC] 9 00:00:21,054 --> 00:00:25,951 >> First up we're gonna be talking about the iconic web icon system. 10 00:00:25,951 --> 00:00:28,240 Now this is just to be clear. 11 00:00:28,240 --> 00:00:31,530 A paid project and they are not sponsoring the show. 12 00:00:31,530 --> 00:00:33,640 But people have been talking about it quite a bit lately. 13 00:00:33,640 --> 00:00:35,810 So we're gonna through and take a look at 14 00:00:35,810 --> 00:00:38,980 why people have been talking so much about Iconic. 15 00:00:38,980 --> 00:00:41,850 So we talked about ton of different icon systems on 16 00:00:41,850 --> 00:00:45,060 the show here before but why talk about this one? 17 00:00:45,060 --> 00:00:48,980 Well its interesting because as it says on the site right here, which 18 00:00:48,980 --> 00:00:53,840 verifies that I can read it is much more than a static icon set. 19 00:00:53,840 --> 00:00:59,440 So, these are actually different pieces of SVGs that are layered 20 00:00:59,440 --> 00:01:03,540 together to create what you see as the icons on the screen. 21 00:01:03,540 --> 00:01:07,250 Now, one of the benefits that you get when all these icons are in a bunch of 22 00:01:07,250 --> 00:01:09,630 different pieces is that you can style these 23 00:01:09,630 --> 00:01:12,020 elements and you can style different parts of it. 24 00:01:12,020 --> 00:01:17,130 So, if we take a look at this camera right here we can see that the lens, the 25 00:01:17,130 --> 00:01:22,770 barrel, the glass, all of these different things are different parts of the icon. 26 00:01:22,770 --> 00:01:26,440 So, you can make them different colors if you choose to. 27 00:01:26,440 --> 00:01:29,910 You see an example right here where there are just tons of different colors 28 00:01:29,910 --> 00:01:35,240 inside these icons, and you can even create different themes for the icon set. 29 00:01:35,240 --> 00:01:39,480 So, here it is, contained, multi toned, ton of different things. 30 00:01:39,480 --> 00:01:45,350 Now, one other great thing about this icon set is it is responsive and scalable. 31 00:01:45,350 --> 00:01:49,250 So it's a few different sizes, 16x16, 32x32, and 128x128. 32 00:01:51,230 --> 00:01:52,640 Now you can do the. 33 00:01:52,640 --> 00:01:56,060 You can see how it reacts to responsive resizing. 34 00:01:56,060 --> 00:02:00,050 If we drag the slider right here, you can see that the smallest size, the details 35 00:02:00,050 --> 00:02:03,430 that aren't important, are hidden and then, as 36 00:02:03,430 --> 00:02:06,240 it gets larger, we get more and more detail. 37 00:02:06,240 --> 00:02:08,030 into these large icons. 38 00:02:08,030 --> 00:02:12,190 So we'll have a link in the show notes to the iconic icon set. 39 00:02:12,190 --> 00:02:13,930 Now, as I said they're not sponsoring the show. 40 00:02:13,930 --> 00:02:17,710 We just thought it was a really cool project so make sure to check it out. 41 00:02:17,710 --> 00:02:18,450 >> Very nice stuff. 42 00:02:18,450 --> 00:02:22,020 Well, next up is first time user experiences. 43 00:02:22,020 --> 00:02:23,715 This is a Tumblr blog. 44 00:02:23,715 --> 00:02:26,260 That, I think it's called a tumblelog. 45 00:02:26,260 --> 00:02:27,000 >> Tumblelog? 46 00:02:27,000 --> 00:02:27,275 >> Yeah. 47 00:02:27,275 --> 00:02:28,570 Tumb, tumblog. 48 00:02:28,570 --> 00:02:29,830 >> That makes more sense. 49 00:02:29,830 --> 00:02:37,480 This is a tumblelog that basically categorizes and catalogs first time user 50 00:02:37,480 --> 00:02:43,570 experiences or the blank slate, which is something that we've talked about before. 51 00:02:43,570 --> 00:02:47,530 Basically, they take an existing app, and this 52 00:02:47,530 --> 00:02:50,120 looks like it's some kind of running app, 53 00:02:50,120 --> 00:02:55,700 and they say what they think is good about it and what they think should be improved. 54 00:02:55,700 --> 00:03:00,920 And this is a really important and subtle part of building user experiences. 55 00:03:00,920 --> 00:03:03,780 So, this is a really great blog to keep up with. 56 00:03:03,780 --> 00:03:06,740 If you are trying to build up the blank slate 57 00:03:06,740 --> 00:03:09,700 in your app, or the empty state in your app. 58 00:03:09,700 --> 00:03:13,080 So for example on this running app they say that, the 59 00:03:13,080 --> 00:03:18,930 app defers its intro until after a person selects try Strava. 60 00:03:18,930 --> 00:03:21,140 I guess that's the name of the app. 61 00:03:21,140 --> 00:03:25,610 And it doesn't force people to see that, that 62 00:03:25,610 --> 00:03:29,630 intro tour until after they've gotten started with it. 63 00:03:29,630 --> 00:03:34,690 It also offers a limited functionality trial so you can try out the app. 64 00:03:34,690 --> 00:03:36,390 So, that's pretty cool. 65 00:03:36,390 --> 00:03:40,150 And then, they offer a couple of things for improvement. 66 00:03:40,150 --> 00:03:42,070 There's a whole bunch more posts here. 67 00:03:42,070 --> 00:03:44,110 It's a pretty nice blog. 68 00:03:44,110 --> 00:03:46,910 I love the nice big screen shots here and 69 00:03:46,910 --> 00:03:51,790 how detailed they are for each individual user experience. 70 00:03:51,790 --> 00:03:51,930 >> Yeah. 71 00:03:51,930 --> 00:03:53,090 >> Definitely worth checking out. 72 00:03:53,090 --> 00:03:53,580 >> Definitely. 73 00:03:53,580 --> 00:03:55,790 You know, we talk about white slates here all the time. 74 00:03:55,790 --> 00:03:58,230 So, that's great for further in-depth reading. 75 00:03:58,230 --> 00:03:58,940 >> Definitely. 76 00:03:58,940 --> 00:04:01,820 >> Next up, we have a project called Web shim or maybe it's Webs him. 77 00:04:01,820 --> 00:04:06,067 I'm not really Sure how to pronounce it but this is a poly-fill that 78 00:04:06,067 --> 00:04:09,467 lets you reliably use HTML-5 features across 79 00:04:09,467 --> 00:04:12,755 browsers even if native support is lacking. 80 00:04:12,755 --> 00:04:16,671 >> You know, Jason, I just looked at it again, I think it says we BS him. 81 00:04:16,671 --> 00:04:17,546 >> Oh. 82 00:04:17,546 --> 00:04:19,229 Treehouse show theme. 83 00:04:19,229 --> 00:04:21,152 >> That must be it. 84 00:04:21,152 --> 00:04:24,672 So this gives you just a ton of different things that you'll use, if you 85 00:04:24,672 --> 00:04:26,432 want to start using HTML 5, but maybe 86 00:04:26,432 --> 00:04:29,510 for business reasons you're limited to older browsers. 87 00:04:29,510 --> 00:04:33,880 And you really start want, really want to start using these HTML 5 features, 88 00:04:33,880 --> 00:04:35,510 you can see bunch of different things 89 00:04:35,510 --> 00:04:38,920 are supported here, you can support Geo location. 90 00:04:38,920 --> 00:04:40,260 And it's very, very easy to use. 91 00:04:40,260 --> 00:04:43,760 You know, you throw this webshim or web BSHIM library into your 92 00:04:43,760 --> 00:04:47,430 project, start it up and you are pretty much ready to go. 93 00:04:47,430 --> 00:04:52,015 You just call the different attributes that you want to start, so if we 94 00:04:52,015 --> 00:04:53,900 wanna use the polyfils we call this 95 00:04:53,900 --> 00:04:57,100 polyfill method, that sets up everything for us. 96 00:04:57,100 --> 00:05:01,490 And currently, it supports these features equiscript five, geolocation, 97 00:05:01,490 --> 00:05:05,540 canvas, forms, media elements, tracked file readers, and details. 98 00:05:05,540 --> 00:05:08,400 So we talk a lot about polyfills, and here's an 99 00:05:08,400 --> 00:05:11,550 actual project that you can use in your own projects. 100 00:05:11,550 --> 00:05:13,885 You can find a link to this in the show notes, which you can get to is at 101 00:05:13,885 --> 00:05:17,510 youtube.com/gotreehouse, or search for us on iTunes, we're The 102 00:05:17,510 --> 00:05:20,139 Treehouse Show, and make sure to subscribe and rate us. 103 00:05:21,300 --> 00:05:21,850 >> Very nice. 104 00:05:21,850 --> 00:05:23,970 Well next up is WireFi. 105 00:05:23,970 --> 00:05:29,220 This is a very simple front end framework that allows you to prototype your apps 106 00:05:29,220 --> 00:05:31,730 before you go on to maybe a more 107 00:05:31,730 --> 00:05:36,320 robust front up framework like Bootstrap or Foundation. 108 00:05:36,320 --> 00:05:38,600 So here's what the homepage looks like. 109 00:05:38,600 --> 00:05:43,880 It says build intuitive powerful wireframes for smarter web development. 110 00:05:43,880 --> 00:05:48,280 Let's take a look at the Lists example here. 111 00:05:48,280 --> 00:05:51,470 And, you can see that they're basically just 112 00:05:51,470 --> 00:05:55,130 styling this using almost no classes at all. 113 00:05:55,130 --> 00:05:58,500 In fact, this is what it looks like when there's no classes. 114 00:05:58,500 --> 00:06:01,600 So, they've opted for no bullet points here, just 115 00:06:01,600 --> 00:06:07,000 some spacing to indicate where each element is nested. 116 00:06:07,000 --> 00:06:11,190 If you apply some classes, you can start to get some basic styling. 117 00:06:11,190 --> 00:06:16,590 So if you want maybe square bullet points, you can apply the square class and so on. 118 00:06:16,590 --> 00:06:17,350 So. 119 00:06:17,350 --> 00:06:20,860 It just provides some super basic stylings so 120 00:06:20,860 --> 00:06:24,900 that you can wire frame your app using code. 121 00:06:24,900 --> 00:06:26,550 So you can create these really quick 122 00:06:26,550 --> 00:06:29,520 prototypes without having to include all of 123 00:06:29,520 --> 00:06:32,390 the classes that you might find in 124 00:06:32,390 --> 00:06:35,030 Foundation, Bootstrap and other [INAUDIBLE] and frameworks. 125 00:06:35,030 --> 00:06:36,120 So pretty cool stuff. 126 00:06:36,120 --> 00:06:37,650 >> Yeah, that, that's great. 127 00:06:37,650 --> 00:06:43,260 Next up we have a post on jQuery coding standards and best practices. 128 00:06:43,260 --> 00:06:46,580 Now, as you might expect from that title, you're going to learn 129 00:06:46,580 --> 00:06:51,350 how you should be programming jQuery if you aren't doing these things already. 130 00:06:51,350 --> 00:06:55,420 Now, in addition to just Best Practices, it's kind of going 131 00:06:55,420 --> 00:06:58,650 over things that are gonna be more performance improvements, as well. 132 00:06:58,650 --> 00:07:05,410 So first up is just great advice like store and cache your jQuery variables. 133 00:07:05,410 --> 00:07:07,270 Which means that if your doing a selector, like 134 00:07:07,270 --> 00:07:10,880 grabbing my div in jQuery, assign that to a variable 135 00:07:10,880 --> 00:07:12,700 so that you don't have to perform this look 136 00:07:12,700 --> 00:07:16,520 up and applying jQuery to each element every single time. 137 00:07:16,520 --> 00:07:18,170 Every sing, every time you go back and 138 00:07:18,170 --> 00:07:21,830 use my div, you would use the variable instead. 139 00:07:21,830 --> 00:07:23,150 Now then it goes through it talks about the 140 00:07:23,150 --> 00:07:27,150 different selectors and what is slow and what is fast. 141 00:07:27,150 --> 00:07:33,720 Now in the most general sense you wanna use I.D. Selectors when you can, or when 142 00:07:33,720 --> 00:07:38,340 you're using Class Selectors don't use the element type in your Class Selector. 143 00:07:38,340 --> 00:07:40,640 Now it goes through and has just a ton of 144 00:07:40,640 --> 00:07:47,610 different advice for selectors, DOM Manipulation, events, even AJAX requests. 145 00:07:47,610 --> 00:07:51,490 So too much to go through here on the show, but really these 146 00:07:51,490 --> 00:07:55,790 are things you should be doing if you're using jQuery in your projects. 147 00:07:55,790 --> 00:08:01,370 >> Next up is the Random User Generator, which is a plugin for Photoshop 148 00:08:01,370 --> 00:08:07,240 that allows you to generate pictures of random people with some random names. 149 00:08:07,240 --> 00:08:10,360 So they have a little example here of what 150 00:08:10,360 --> 00:08:13,220 it will look like once it's actually installed in Photoshop. 151 00:08:13,220 --> 00:08:17,450 So you can choose if you just want to generate man, woman or both. 152 00:08:17,450 --> 00:08:20,210 And you can click the New Random User button. 153 00:08:20,210 --> 00:08:24,560 To generate some different photos and different names. 154 00:08:24,560 --> 00:08:28,560 This is really helpful if you're trying to prototype an app. 155 00:08:28,560 --> 00:08:31,480 And maybe you're using wireFi, for example, 156 00:08:31,480 --> 00:08:35,000 and you want to actually include some images. 157 00:08:35,000 --> 00:08:37,700 So, you could do this in your Photoshop mockups, or you 158 00:08:37,700 --> 00:08:40,340 could actually carry these over to your code, if you wanted to. 159 00:08:41,850 --> 00:08:42,720 so. 160 00:08:42,720 --> 00:08:46,820 This is helpful if you don't wanna just include, you know lot 161 00:08:46,820 --> 00:08:50,270 of maps, some texts, and a bunch of boxes for your prototype. 162 00:08:50,270 --> 00:08:54,110 You actually want to include real copy and real images to get 163 00:08:54,110 --> 00:08:56,700 an idea of what the app is actually going to look like. 164 00:08:56,700 --> 00:09:00,810 And kind of test its limitations, see what your margins, padding 165 00:09:00,810 --> 00:09:03,980 and all that sort of stuff looks like, with real information. 166 00:09:03,980 --> 00:09:05,650 So that's pretty nice. 167 00:09:05,650 --> 00:09:10,450 It's easy to install, and you can basically, just 168 00:09:10,450 --> 00:09:14,380 use it as simply as the example shows you. 169 00:09:14,380 --> 00:09:20,100 You just click the New User button or New Random User, and it will generate 170 00:09:20,100 --> 00:09:25,960 a some text that, and an image that you can paste directly into your document. 171 00:09:25,960 --> 00:09:26,900 >> So, check this out. 172 00:09:26,900 --> 00:09:28,730 See, see the little this little box on 173 00:09:28,730 --> 00:09:30,530 the site there where it says Random User Generator? 174 00:09:30,530 --> 00:09:31,230 >> Uh-huh. 175 00:09:31,230 --> 00:09:33,180 >> If you move that ready? 176 00:09:33,180 --> 00:09:33,510 Look. 177 00:09:33,510 --> 00:09:33,870 Look at that. 178 00:09:33,870 --> 00:09:34,200 Look at that. 179 00:09:34,200 --> 00:09:34,260 >> Whoa 180 00:09:34,260 --> 00:09:36,730 >> Oh, look there's a kitten waving at you. 181 00:09:36,730 --> 00:09:37,330 Huh. 182 00:09:37,330 --> 00:09:37,673 >> Look at that. 183 00:09:37,673 --> 00:09:39,151 >> Who ever even knew that? 184 00:09:39,151 --> 00:09:41,319 >> I'm just going to use that for everything instead. 185 00:09:41,319 --> 00:09:46,553 >> Yeah, I had to really pause for a second to see it. 186 00:09:46,553 --> 00:09:47,284 >> Very nice. 187 00:09:47,284 --> 00:09:47,902 >> Get it? 188 00:09:47,902 --> 00:09:48,646 >> I get it. 189 00:09:48,646 --> 00:09:49,641 I got the joke. 190 00:09:49,641 --> 00:09:50,533 >> Yeah. 191 00:09:50,533 --> 00:09:55,490 Next up we have a project called Scroll Magic, oooo. 192 00:09:55,490 --> 00:09:56,190 >> Magic! 193 00:09:56,190 --> 00:09:56,628 >> Yeah. 194 00:09:56,628 --> 00:09:59,596 This is one of those paralax scrolling libraries, look at 195 00:09:59,596 --> 00:10:02,108 this there's a there's a magic top hat on the site. 196 00:10:02,108 --> 00:10:02,750 >> What? 197 00:10:02,750 --> 00:10:04,370 >> And if I start scrolling down. 198 00:10:04,370 --> 00:10:04,540 What? 199 00:10:04,540 --> 00:10:06,740 Look at that, it's a wand. 200 00:10:06,740 --> 00:10:08,800 That's ScrollMagic. 201 00:10:08,800 --> 00:10:09,940 But that's not all. 202 00:10:09,940 --> 00:10:10,880 You were saying you want more? 203 00:10:10,880 --> 00:10:12,050 Hey, we got more buddy. 204 00:10:12,050 --> 00:10:12,910 Check this out. 205 00:10:12,910 --> 00:10:18,310 We can fade, we can move, we can spin, scale, adjust text properties. 206 00:10:18,310 --> 00:10:20,830 Pin if you wanna, don't have to. 207 00:10:20,830 --> 00:10:21,130 Look at this. 208 00:10:21,130 --> 00:10:24,980 Just a ton of different possible options for parallax scrolling on your site. 209 00:10:24,980 --> 00:10:28,450 We're seeing a lot more sites use parallax effects these days. 210 00:10:28,450 --> 00:10:31,290 So here it, here is ScrollMagic. 211 00:10:31,290 --> 00:10:32,170 Boom, that's it. 212 00:10:32,170 --> 00:10:34,200 Do, do you need more than the examples? 213 00:10:34,200 --> 00:10:35,620 Do you need more than that? 214 00:10:35,620 --> 00:10:36,660 Cuz I, I don't have any more. 215 00:10:36,660 --> 00:10:37,310 And that's all I got. 216 00:10:37,310 --> 00:10:38,350 And all I got's ScrollMagic. 217 00:10:39,940 --> 00:10:42,630 >> You can use magic to impress your friends. 218 00:10:42,630 --> 00:10:43,040 >> Yeah. 219 00:10:43,040 --> 00:10:44,340 I hope you're all impressed. 220 00:10:45,640 --> 00:10:51,910 >> Next up is a post from the Mozilla Hacks blog on The Gamepad API. 221 00:10:51,910 --> 00:10:57,870 So, if you were to work, there's actually a W3C specification, that's in draft 222 00:10:57,870 --> 00:11:03,900 form right now, for adding Gamepad controllers to your site. 223 00:11:03,900 --> 00:11:05,230 Now, why would you do this? 224 00:11:05,230 --> 00:11:09,985 Well, if you're working on an HTML5 game or maybe you're building a project in 225 00:11:09,985 --> 00:11:12,830 WEB-DL, you might wanna provide an alternative 226 00:11:12,830 --> 00:11:15,800 control scheme other than the mouse and keyboard. 227 00:11:15,800 --> 00:11:19,370 So, that you can open up your game to new audiences. 228 00:11:19,370 --> 00:11:22,750 Say that you want to attract more than just the PC gaming 229 00:11:22,750 --> 00:11:26,840 crowd, and you want to try to get console users into your game. 230 00:11:26,840 --> 00:11:28,222 This is a great way to do that. 231 00:11:28,222 --> 00:11:35,190 Alternatively, Gamepads could also be used as an alternative controller for something 232 00:11:35,190 --> 00:11:38,810 that's like a living room experience, or the ten foot experience, and you can 233 00:11:38,810 --> 00:11:41,360 use that to navigate some kind 234 00:11:41,360 --> 00:11:44,210 of entertainment experience where you're trying to 235 00:11:44,210 --> 00:11:48,890 maybe choose a, a video to watch on like Netflix or something like that. 236 00:11:48,890 --> 00:11:54,420 Now it has okay ish browser support right now, it, 237 00:11:54,420 --> 00:12:00,480 it works in Firefox and it works in Google chrome chrome it works out 238 00:12:00,480 --> 00:12:04,230 of the box, there's a couple of small [INAUDIBLE] right now but 239 00:12:04,230 --> 00:12:10,310 with Firefox you actually have to enable it until Firefox 28 is released. 240 00:12:10,310 --> 00:12:13,320 And the current version is Firefox 27. 241 00:12:13,320 --> 00:12:14,785 So, that should be coming soon by default. 242 00:12:14,785 --> 00:12:15,130 [CROSSTALK] 243 00:12:15,130 --> 00:12:16,970 >> Actually, it just came out the other day. 244 00:12:16,970 --> 00:12:18,070 >> Did it really, Jason? 245 00:12:18,070 --> 00:12:18,730 >> Yeah. 246 00:12:18,730 --> 00:12:19,870 >> Thank you so much. 247 00:12:19,870 --> 00:12:21,030 >> Okay. 248 00:12:21,030 --> 00:12:21,530 >> Wow. 249 00:12:22,850 --> 00:12:24,710 So it's enabled by default now. 250 00:12:24,710 --> 00:12:25,830 That's really cool. 251 00:12:25,830 --> 00:12:28,490 And you can use the game pad API in 252 00:12:28,490 --> 00:12:31,710 a couple of different ways, you can detect, you 253 00:12:31,710 --> 00:12:36,210 know, the analog, control sticks, the different buttons the 254 00:12:36,210 --> 00:12:39,670 different triggers and d pads, bumpers, that kind of stuff. 255 00:12:39,670 --> 00:12:44,120 And it will map those to an array and you 256 00:12:44,120 --> 00:12:49,000 can use that in your game or in your entertainment experience. 257 00:12:49,000 --> 00:12:52,673 So here's what that object looks like, there's a bunch of 258 00:12:52,673 --> 00:12:57,490 stuff in this object, I definitely recommend you check it out. 259 00:12:57,490 --> 00:13:00,240 Don't have time to go into all of it on the show here, 260 00:13:00,240 --> 00:13:04,520 but, if you're building an html five game it's definitely worth taking a look. 261 00:13:04,520 --> 00:13:05,130 >> Yeah. 262 00:13:05,130 --> 00:13:08,590 I'm personally really happy that I implemented the Konami 263 00:13:08,590 --> 00:13:10,970 code on my website way back in the day. 264 00:13:10,970 --> 00:13:11,890 >> Smart. 265 00:13:11,890 --> 00:13:15,180 Well, that's all we have time for today, I'm @nickrp on Twitter. 266 00:13:15,180 --> 00:13:16,250 >> And I am @jseifer. 267 00:13:16,250 --> 00:13:18,110 For more information on anything we talked about 268 00:13:18,110 --> 00:13:19,520 check out our show notes which you can get 269 00:13:19,520 --> 00:13:23,250 to at youtube.com/gotreehouse or search for us in iTunes 270 00:13:23,250 --> 00:13:26,170 and please rate us, we are The Treehouse Show. 271 00:13:26,170 --> 00:13:29,120 >> And of course, if you'd like to see more videos like this one about web 272 00:13:29,120 --> 00:13:32,400 design, web development, mobile business, and so much 273 00:13:32,400 --> 00:13:36,550 more, be sure to check us out at teamtreehouse.com. 274 00:13:36,550 --> 00:13:38,652 Thank you so much for watching and we will see you next week. 275 00:13:38,652 --> 00:13:46,110 [MUSIC].