Episode 10: jQuery Fundamentals

[Nick] Hi! I'm Nick Pettit. [Jason] I'm Jason Seifer. 0:00 [Nick] And you're watching the Treehouse Show-- 0:03 your weekly dose of internets where we talk about all things web design, 0:05 web development, and more. 0:09 [Jason] In this episode, we'll be going over front-end package managers. 0:10 the usual dose of responsive web design, 0:13 and our app of the week is TotalSpaces. 0:17 [Nick] Let's check it out! 0:19 [telegraph sound] [? music playing ?] [The treehouse Show] 0:21 [Jason] The first thing that we're going to be talking about this week is jQuery fundamentals. 0:26 You can find this at jqfundamentals.com. [http://jqfundamentals.com] 0:31 This is an extremely well-written tutorial on not only Jquery, but JavaScript as well. 0:34 When you're going through the site, there are a couple of introductions here. 0:41 It goes over all of the basics of JavaScript. 0:44 This is going to be something that you want to point newer developers towards-- 0:46 maybe if they're not too familiar with JavaScript or even jQuery. 0:49 Now, in order to learn jQuery itself, you need to know a bit of JavaScript, 0:53 and a bit of programming. 0:58 So, there are interactive examples all through jqfundamentals.com 0:59 that will let you learn at your own pace. 1:03 It's a pretty good resource, 1:05 and there's even a built-in editor to go through 1:07 and try all of the different things. 1:10 It goes through all of the jQuery basics with links to documentation, 1:12 what the dollar-sign selector is, and pretty much everything that you need to know. 1:16 It goes all the way through to traversing and manipulating the DOM, 1:21 events and delegation, as well as effects and AJAX. 1:26 This is a really, really great resource, so make sure to check that out. 1:30 Once again, that's jqfundamentals.com. 1:34 It's always worth it to brush up on JavaScript. 1:37 [Nick] That's pretty cool, Jason. 1:40 I know some of those words. [Jason] Yeah. [ Nick] Pretty nifty. 1:41 [Jason] Like the 'j'. [Nick] Yeah. [Jason] That's pretty good. 1:45 [Nick] Next up is Yeoman, available at http://yeoman.io/packagemanager.html. 1:47 Basically, Yeoman is a package manager for modern web work flows. 1:56 It's a command-line tool that you go ahead and install. 2:03 The Ruby Community has benefited from having a package manager 2:08 as well as several other communities. 2:13 There hasn't really been a great package manager for handling all of these 2:15 JavaScript dependencies--like jQuery or adding in frameworks like Twitter Bootstrap-- 2:19 and really putting all of those things together and 2:26 tying up all the loose ends for creating a new web project. 2:29 Usually, you have to go and find all of those pieces and put them together yourself, 2:33 or you go and download the latest version of, say, HTML5 Boilerplate. 2:38 But this is a much better way to manage those dependencies 2:42 as you're actually working on the project. 2:46 [Jason] So this is going to 'bootstrap' the project? 2:48 [Nick] It is going to 'bootstrap' the project-- 2:51 not the same thing as Twitter Bootstrap, of course. 2:55 But, yeah, it's a really great way to go ahead and get started 2:57 on your next web project. 3:01 [Jason] What I like about Yeoman is that it's interactive, 3:03 so it sort of lets you go through and choose what you actually do want in the project. 3:05 It really gives you the ability to customize anything 3:08 and just take out all of the steps that can be 3:11 a little bit tedious when you start a new application. 3:14 So, it's kind of cool to have that automated. 3:17 [Nick] Yo, man! 3:19 [Jason] Next up is something called Bower which is pretty similar to Yeoman, 3:21 [http://twitter.github.com/bower/] 3:26 although it is just for your front-end stack of different JavaScripts. 3:28 So, if you want to have a version of jQuery, 3:31 you would just Bower-install jQuery, 3:34 and this will use npm to install that. 3:37 It creates a manifest file called 'package.json'--I believe that's what it is-- 3:40 yes, package.json--that specifies all of the different dependencies to your project. 3:45 This is by Twitter. 3:51 This is a pretty low-level thing--a little bit more low-level than Yeoman. 3:52 So, it's not going to go through and install Bootstrap for you, 3:56 but you could specify just the JavaScript as a dependency. 4:01 Interesting framework--gives you just enough to get you started with a project. 4:04 So, check that out. 4:09 You can find that on Twitter's github at http://Twitter.github.com/bower. 4:10 [Nick] Pretty nifty. Next up is This Is Responsive. 4:16 That's actually the name of the project--This Is Responsive. 4:20 You can check it out at: 4:23 http://bradfrost.github.com/this-is-responsive/index.html. 4:24 It's really easy to remember. 4:32 [Jason] This dash hurts dash my dash brain just looking at it. 4:35 [Nick] Exactly. Basically, if you just Google 'This Is Responsive,' 4:40 you can probably find it pretty easily and, of course, 4:44 you can check out the show notes on our show. 4:45 [Jason] So, what does this do exactly? 4:49 This gives you patterns, resources and news for 4:51 creating responsive web experiences. 4:54 [Nick] Exactly. You always want to keep up with the latest stuff 4:57 in responsive web design because it is constantly changing and evolving. 4:59 When you click on 'Patterns', for example, you can go ahead 5:04 and check out all the latest stuff in laying out your site, 5:07 creating navigation, tables, and so on. 5:11 When you click on 'Resources', there are all sorts of great design tools. 5:14 So if you're just mocking-up your responsive site, 5:21 you can go ahead and check out the tools there. 5:24 And then finally, there's news about responsive design. 5:27 So they just have a nice news feed for all the latest stuff 5:30 in the world of responsiveness. 5:34 So, it's basically just a site that kind of packages-up all the different things 5:36 happening in responsive design because it's kind of all over the place right now. 5:40 Everybody's talking about it. Everybody's innovating. 5:44 It can be really difficult to keep up with the latest stuff. 5:46 [Jason] Yeah, responsive design is always evolving-- 5:49 kind of like the front page to that site. 5:51 [Nick] Exactly. Constantly changing. 5:54 [Jason] So, speaking of constantly changing-- 5:56 how about we do our app of the week? 5:58 [Nick] Let's check it out! 6:00 [? music playing ?] [APP PREVIEW] 6:02 [Jason] Our app of the week this week is Total Spaces. 6:07 Now, I'm not sure about you, Nick, but I really, really miss 6:10 the grid spaces that were available up until Lion came out. 6:14 [Nick] You know, I thought they just disappeared or something, 6:18 and then there was some kind of setting I was missing, 6:21 but I never actually talked about it with anybody. 6:24 I just--I thought I was just dumb or something and missed a setting. 6:26 [Jason] Yeah, I felt ashamed too, and I kept it to myself. [Nick laughs] 6:30 [Jason] But great news! There's a new app called Total Spaces 6:32 that brings back the grid spaces to OS 10 Lion. 6:35 Something that's really awesome about it is-- 6:39 so I've got it installed right now, and you're going to see a crazy flip animation-- 6:41 Boom! Did you see that? That was a cube. [Nick] Whoa! 6:45 [Jason] Here we go. Do it again. 6:48 So, it gives you a little grid for your spaces. 6:49 You can have a whole bunch more grids than you 6:52 actually need to get anything done. 6:56 I think it supports up to 16 grid spaces or even more. 6:59 But the really nice thing about it--at least for me-- 7:03 is that you can configure the time it takes to switch between different spaces. 7:05 This is something that, strangely, has bothered me since Lion came out-- 7:10 that the spaces animation was just a little bit too slow for me. 7:14 I don't know. I know that's a 'me' issue. I'm working on it. 7:16 But anyway, check out Total Spaces. 7:20 This is a paid app. It's only twelve dollars. 7:22 And you can get that at https://totalspaces.binaryage.com. 7:25 Really worth it and you probably know if you need it because I've been missing this. 7:27 Where has this been all my life since Lion came out? 7:30 [Nick] It is pretty sweet. I have missed it as well. 7:33 Next up is Color Sense for Xcode. 7:36 Now, I confess, I am not an iOS developer myself, 7:39 but this does look like a pretty nifty tool. 7:42 It's basically a plug-in for Xcode, 7:45 and it's best demonstrated with this little YouTube video that they have, right here. 7:48 Basically, as you're typing in code, it will give you a 7:53 real-time color selector that's the same OS 10 color selector 7:58 that you're probably already familiar with. 8:03 You can go ahead and click on that and then select the color that you want to use 8:04 instead of actually typing in hexadecimal values or-- 8:10 honestly, I don't know what they do in the-- 8:14 [Jason] RGB--is that a thing? 8:16 [Nick] iOS well--I think they might use RGB just by looking at this video. 8:19 Pretty nifty stuff, actually. 8:23 So you can go ahead and get that on GitHub at: 8:25 https://github.com/omz/ColorSense-for-Xcode. 8:28 [Jason] I showed that to an iOS developer friend of mine, 8:37 and he really was pretty impressed by it. 8:39 So, that means it's great. 8:41 [Nick] Sounds like it's useful. 8:43 [Jason] Next up is something called Underscore CLI. 8:44 [https://github.com/ddopson/underscore-cli] 8:47 This is a really useful command-line utility that's going to let you 8:49 pipe JSON into it--and by 'JSON' I mean JavaScript objects-- 8:52 [Nick] Not you. [Jason] Not me. 8:58 I'm not going to be piped into your command line. 8:59 [Nick] I was confused by that. 9:00 [Jason] Yeah, it's going to let you pipe JSON into it, 9:02 and then it will format things for you. 9:04 This is going to be extremely useful when you're working 9:06 with different web APIs or anything that's going to output JSON. 9:08 And what's really nice about it is that in addition to just outputting this, 9:12 coloring it for you, and making it look a little bit prettier, 9:17 you can actually do different queries on the JSON objects if-- 9:21 let's say you're looking for a whole bunch of different titles. 9:25 You can pipe to that and say, hey, just give me the titles, 9:28 and it will do that for you. 9:31 It's a very, very simple utility, and that is also available on GitHub by ddopson. 9:33 We can find the link to that in the show notes on our YouTube page. 9:40 [Nick] So, be sure to check it out. [Jason] Yeah. 9:45 [Nick] Alright, cool. Next up is Modern UI Icons 9:47 available at http://modernuiicons.com. 9:51 This is for Windows phones, actually, 9:55 so it's really cool that there are projects happening for Windows devices. 9:58 Basically, it's just a collection of icons that are all created in Expression Design, 10:03 and you can go ahead and download them and see the .design Source. 10:08 I'm just going to go ahead and pick a couple of these icons here. 10:12 Let's say you were building maybe a photo app, or a clock app, or something like that. 10:16 So I'll pick a couple there, and when I click on those, 10:23 they appear up here, so you see a nice little preview 10:26 of what that's actually going to look like. 10:29 Apparently, this is an application that allows you to travel through time, 10:31 so you can go backwards and forwards as needed. 10:35 And again, it's really cool to see stuff happening in the Windows Phone space. 10:38 [Jason] Particularly, I like that if I'm developing a Windows Phone application, 10:45 I have an Nyan Cat icon all ready to go. 10:48 [Nick] That's really important because you're going to use that all the time. 10:51 [Jason] Yeah. Every app needs it. [Nick] Definitely. 10:55 [Jason] So, it's probably a good point to wrap up. 10:56 I guess today we learned that we all missed grid spaces, 10:59 and there are some cool projects coming out for Windows Phone. 11:03 If you want to catch us on Twitter, I'm @jseifer. [Nick] And I'm @nickrp. 11:07 Thanks so much for tuning in to this episode of The Treehouse Show. 11:12 For show notes and more, check out our YouTube account 11:15 at http://youtube.com/gotreehouse/. 11:17 [Nick] And, of course, this show is brought to you by Treehouse-- 11:20 the best way to learn web design, web development, and more. 11:23 You can check us out at http://teamtreehouse.com. 11:26 Thanks so much for watching, and we'll see you next time. 11:30 [? music playing ?] [The Treehouse Show] 11:33

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

Sign up