Episode 83: Web Icons, Webshims, jQuery Coding Standards

I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:01 >> And you're watching The Treehouse Show, your weekly dose of internets 0:02 where we talk about all things web design, web development, and more. 0:05 >> In this episode we'll be talking about 0:08 web Icon, webshims, JQuery Coding Standards, and more. 0:10 >> Let's check it out. 0:15 [MUSIC] 0:15 >> First up we're gonna be talking about the iconic web icon system. 0:21 Now this is just to be clear. 0:25 A paid project and they are not sponsoring the show. 0:28 But people have been talking about it quite a bit lately. 0:31 So we're gonna through and take a look at 0:33 why people have been talking so much about Iconic. 0:35 So we talked about ton of different icon systems on 0:38 the show here before but why talk about this one? 0:41 Well its interesting because as it says on the site right here, which 0:45 verifies that I can read it is much more than a static icon set. 0:48 So, these are actually different pieces of SVGs that are layered 0:53 together to create what you see as the icons on the screen. 0:59 Now, one of the benefits that you get when all these icons are in a bunch of 1:03 different pieces is that you can style these 1:07 elements and you can style different parts of it. 1:09 So, if we take a look at this camera right here we can see that the lens, the 1:12 barrel, the glass, all of these different things are different parts of the icon. 1:17 So, you can make them different colors if you choose to. 1:22 You see an example right here where there are just tons of different colors 1:26 inside these icons, and you can even create different themes for the icon set. 1:29 So, here it is, contained, multi toned, ton of different things. 1:35 Now, one other great thing about this icon set is it is responsive and scalable. 1:39 So it's a few different sizes, 16x16, 32x32, and 128x128. 1:45 Now you can do the. 1:51 You can see how it reacts to responsive resizing. 1:52 If we drag the slider right here, you can see that the smallest size, the details 1:56 that aren't important, are hidden and then, as 2:00 it gets larger, we get more and more detail. 2:03 into these large icons. 2:06 So we'll have a link in the show notes to the iconic icon set. 2:08 Now, as I said they're not sponsoring the show. 2:12 We just thought it was a really cool project so make sure to check it out. 2:13 >> Very nice stuff. 2:17 Well, next up is first time user experiences. 2:18 This is a Tumblr blog. 2:22 That, I think it's called a tumblelog. 2:23 >> Tumblelog? 2:26 >> Yeah. 2:27 Tumb, tumblog. 2:27 >> That makes more sense. 2:28 This is a tumblelog that basically categorizes and catalogs first time user 2:29 experiences or the blank slate, which is something that we've talked about before. 2:37 Basically, they take an existing app, and this 2:43 looks like it's some kind of running app, 2:47 and they say what they think is good about it and what they think should be improved. 2:50 And this is a really important and subtle part of building user experiences. 2:55 So, this is a really great blog to keep up with. 3:00 If you are trying to build up the blank slate 3:03 in your app, or the empty state in your app. 3:06 So for example on this running app they say that, the 3:09 app defers its intro until after a person selects try Strava. 3:13 I guess that's the name of the app. 3:18 And it doesn't force people to see that, that 3:21 intro tour until after they've gotten started with it. 3:25 It also offers a limited functionality trial so you can try out the app. 3:29 So, that's pretty cool. 3:34 And then, they offer a couple of things for improvement. 3:36 There's a whole bunch more posts here. 3:40 It's a pretty nice blog. 3:42 I love the nice big screen shots here and 3:44 how detailed they are for each individual user experience. 3:46 >> Yeah. 3:51 >> Definitely worth checking out. 3:51 >> Definitely. 3:53 You know, we talk about white slates here all the time. 3:53 So, that's great for further in-depth reading. 3:55 >> Definitely. 3:58 >> Next up, we have a project called Web shim or maybe it's Webs him. 3:58 I'm not really Sure how to pronounce it but this is a poly-fill that 4:01 lets you reliably use HTML-5 features across 4:06 browsers even if native support is lacking. 4:09 >> You know, Jason, I just looked at it again, I think it says we BS him. 4:12 >> Oh. 4:16 Treehouse show theme. 4:17 >> That must be it. 4:19 So this gives you just a ton of different things that you'll use, if you 4:21 want to start using HTML 5, but maybe 4:24 for business reasons you're limited to older browsers. 4:26 And you really start want, really want to start using these HTML 5 features, 4:29 you can see bunch of different things 4:33 are supported here, you can support Geo location. 4:35 And it's very, very easy to use. 4:38 You know, you throw this webshim or web BSHIM library into your 4:40 project, start it up and you are pretty much ready to go. 4:43 You just call the different attributes that you want to start, so if we 4:47 wanna use the polyfils we call this 4:52 polyfill method, that sets up everything for us. 4:53 And currently, it supports these features equiscript five, geolocation, 4:57 canvas, forms, media elements, tracked file readers, and details. 5:01 So we talk a lot about polyfills, and here's an 5:05 actual project that you can use in your own projects. 5:08 You can find a link to this in the show notes, which you can get to is at 5:11 youtube.com/gotreehouse, or search for us on iTunes, we're The 5:13 Treehouse Show, and make sure to subscribe and rate us. 5:17 >> Very nice. 5:21 Well next up is WireFi. 5:21 This is a very simple front end framework that allows you to prototype your apps 5:23 before you go on to maybe a more 5:29 robust front up framework like Bootstrap or Foundation. 5:31 So here's what the homepage looks like. 5:36 It says build intuitive powerful wireframes for smarter web development. 5:38 Let's take a look at the Lists example here. 5:43 And, you can see that they're basically just 5:48 styling this using almost no classes at all. 5:51 In fact, this is what it looks like when there's no classes. 5:55 So, they've opted for no bullet points here, just 5:58 some spacing to indicate where each element is nested. 6:01 If you apply some classes, you can start to get some basic styling. 6:07 So if you want maybe square bullet points, you can apply the square class and so on. 6:11 So. 6:16 It just provides some super basic stylings so 6:17 that you can wire frame your app using code. 6:20 So you can create these really quick 6:24 prototypes without having to include all of 6:26 the classes that you might find in 6:29 Foundation, Bootstrap and other [INAUDIBLE] and frameworks. 6:32 So pretty cool stuff. 6:35 >> Yeah, that, that's great. 6:36 Next up we have a post on jQuery coding standards and best practices. 6:37 Now, as you might expect from that title, you're going to learn 6:43 how you should be programming jQuery if you aren't doing these things already. 6:46 Now, in addition to just Best Practices, it's kind of going 6:51 over things that are gonna be more performance improvements, as well. 6:55 So first up is just great advice like store and cache your jQuery variables. 6:58 Which means that if your doing a selector, like 7:05 grabbing my div in jQuery, assign that to a variable 7:07 so that you don't have to perform this look 7:10 up and applying jQuery to each element every single time. 7:12 Every sing, every time you go back and 7:16 use my div, you would use the variable instead. 7:18 Now then it goes through it talks about the 7:21 different selectors and what is slow and what is fast. 7:23 Now in the most general sense you wanna use I.D. Selectors when you can, or when 7:27 you're using Class Selectors don't use the element type in your Class Selector. 7:33 Now it goes through and has just a ton of 7:38 different advice for selectors, DOM Manipulation, events, even AJAX requests. 7:40 So too much to go through here on the show, but really these 7:47 are things you should be doing if you're using jQuery in your projects. 7:51 >> Next up is the Random User Generator, which is a plugin for Photoshop 7:55 that allows you to generate pictures of random people with some random names. 8:01 So they have a little example here of what 8:07 it will look like once it's actually installed in Photoshop. 8:10 So you can choose if you just want to generate man, woman or both. 8:13 And you can click the New Random User button. 8:17 To generate some different photos and different names. 8:20 This is really helpful if you're trying to prototype an app. 8:24 And maybe you're using wireFi, for example, 8:28 and you want to actually include some images. 8:31 So, you could do this in your Photoshop mockups, or you 8:35 could actually carry these over to your code, if you wanted to. 8:37 so. 8:41 This is helpful if you don't wanna just include, you know lot 8:42 of maps, some texts, and a bunch of boxes for your prototype. 8:46 You actually want to include real copy and real images to get 8:50 an idea of what the app is actually going to look like. 8:54 And kind of test its limitations, see what your margins, padding 8:56 and all that sort of stuff looks like, with real information. 9:00 So that's pretty nice. 9:03 It's easy to install, and you can basically, just 9:05 use it as simply as the example shows you. 9:10 You just click the New User button or New Random User, and it will generate 9:14 a some text that, and an image that you can paste directly into your document. 9:20 >> So, check this out. 9:25 See, see the little this little box on 9:26 the site there where it says Random User Generator? 9:28 >> Uh-huh. 9:30 >> If you move that ready? 9:31 Look. 9:33 Look at that. 9:33 Look at that. 9:33 >> Whoa 9:34 >> Oh, look there's a kitten waving at you. 9:34 Huh. 9:36 >> Look at that. 9:37 >> Who ever even knew that? 9:37 >> I'm just going to use that for everything instead. 9:39 >> Yeah, I had to really pause for a second to see it. 9:41 >> Very nice. 9:46 >> Get it? 9:47 >> I get it. 9:47 I got the joke. 9:48 >> Yeah. 9:49 Next up we have a project called Scroll Magic, oooo. 9:50 >> Magic! 9:55 >> Yeah. 9:56 This is one of those paralax scrolling libraries, look at 9:56 this there's a there's a magic top hat on the site. 9:59 >> What? 10:02 >> And if I start scrolling down. 10:02 What? 10:04 Look at that, it's a wand. 10:04 That's ScrollMagic. 10:06 But that's not all. 10:08 You were saying you want more? 10:09 Hey, we got more buddy. 10:10 Check this out. 10:12 We can fade, we can move, we can spin, scale, adjust text properties. 10:12 Pin if you wanna, don't have to. 10:18 Look at this. 10:20 Just a ton of different possible options for parallax scrolling on your site. 10:21 We're seeing a lot more sites use parallax effects these days. 10:24 So here it, here is ScrollMagic. 10:28 Boom, that's it. 10:31 Do, do you need more than the examples? 10:32 Do you need more than that? 10:34 Cuz I, I don't have any more. 10:35 And that's all I got. 10:36 And all I got's ScrollMagic. 10:37 >> You can use magic to impress your friends. 10:39 >> Yeah. 10:42 I hope you're all impressed. 10:43 >> Next up is a post from the Mozilla Hacks blog on The Gamepad API. 10:45 So, if you were to work, there's actually a W3C specification, that's in draft 10:51 form right now, for adding Gamepad controllers to your site. 10:57 Now, why would you do this? 11:03 Well, if you're working on an HTML5 game or maybe you're building a project in 11:05 WEB-DL, you might wanna provide an alternative 11:09 control scheme other than the mouse and keyboard. 11:12 So, that you can open up your game to new audiences. 11:15 Say that you want to attract more than just the PC gaming 11:19 crowd, and you want to try to get console users into your game. 11:22 This is a great way to do that. 11:26 Alternatively, Gamepads could also be used as an alternative controller for something 11:28 that's like a living room experience, or the ten foot experience, and you can 11:35 use that to navigate some kind 11:38 of entertainment experience where you're trying to 11:41 maybe choose a, a video to watch on like Netflix or something like that. 11:44 Now it has okay ish browser support right now, it, 11:48 it works in Firefox and it works in Google chrome chrome it works out 11:54 of the box, there's a couple of small [INAUDIBLE] right now but 12:00 with Firefox you actually have to enable it until Firefox 28 is released. 12:04 And the current version is Firefox 27. 12:10 So, that should be coming soon by default. 12:13 [CROSSTALK] 12:14 >> Actually, it just came out the other day. 12:15 >> Did it really, Jason? 12:16 >> Yeah. 12:18 >> Thank you so much. 12:18 >> Okay. 12:19 >> Wow. 12:21 So it's enabled by default now. 12:22 That's really cool. 12:24 And you can use the game pad API in 12:25 a couple of different ways, you can detect, you 12:28 know, the analog, control sticks, the different buttons the 12:31 different triggers and d pads, bumpers, that kind of stuff. 12:36 And it will map those to an array and you 12:39 can use that in your game or in your entertainment experience. 12:44 So here's what that object looks like, there's a bunch of 12:49 stuff in this object, I definitely recommend you check it out. 12:52 Don't have time to go into all of it on the show here, 12:57 but, if you're building an html five game it's definitely worth taking a look. 13:00 >> Yeah. 13:04 I'm personally really happy that I implemented the Konami 13:05 code on my website way back in the day. 13:08 >> Smart. 13:10 Well, that's all we have time for today, I'm @nickrp on Twitter. 13:11 >> And I am @jseifer. 13:15 For more information on anything we talked about 13:16 check out our show notes which you can get 13:18 to at youtube.com/gotreehouse or search for us in iTunes 13:19 and please rate us, we are The Treehouse Show. 13:23 >> And of course, if you'd like to see more videos like this one about web 13:26 design, web development, mobile business, and so much 13:29 more, be sure to check us out at teamtreehouse.com. 13:32 Thank you so much for watching and we will see you next week. 13:36 [MUSIC]. 13:38