1 00:00:00,000 --> 00:00:03,750 [Nick] Hi! I'm Nick Pettit. [Jason] I'm Jason Seifer. 2 00:00:03,750 --> 00:00:05,910 [Nick] And you're watching the Treehouse Show-- 3 00:00:05,910 --> 00:00:09,120 your weekly dose of internets where we talk about all things web design, 4 00:00:09,120 --> 00:00:10,740 web development, and more. 5 00:00:10,740 --> 00:00:13,800 [Jason] In this episode, we'll be going over front-end package managers. 6 00:00:13,800 --> 00:00:17,020 the usual dose of responsive web design, 7 00:00:17,020 --> 00:00:19,510 and our app of the week is TotalSpaces. 8 00:00:19,510 --> 00:00:21,050 [Nick] Let's check it out! 9 00:00:21,050 --> 00:00:26,690 [telegraph sound] [? music playing ?] [The treehouse Show] 10 00:00:26,690 --> 00:00:31,310 [Jason] The first thing that we're going to be talking about this week is jQuery fundamentals. 11 00:00:31,310 --> 00:00:34,580 You can find this at jqfundamentals.com. [http://jqfundamentals.com] 12 00:00:34,580 --> 00:00:41,350 This is an extremely well-written tutorial on not only Jquery, but JavaScript as well. 13 00:00:41,350 --> 00:00:44,100 When you're going through the site, there are a couple of introductions here. 14 00:00:44,100 --> 00:00:46,780 It goes over all of the basics of JavaScript. 15 00:00:46,780 --> 00:00:49,630 This is going to be something that you want to point newer developers towards-- 16 00:00:49,630 --> 00:00:53,470 maybe if they're not too familiar with JavaScript or even jQuery. 17 00:00:53,470 --> 00:00:58,000 Now, in order to learn jQuery itself, you need to know a bit of JavaScript, 18 00:00:58,000 --> 00:00:59,380 and a bit of programming. 19 00:00:59,380 --> 00:01:03,650 So, there are interactive examples all through jqfundamentals.com 20 00:01:03,650 --> 00:01:05,660 that will let you learn at your own pace. 21 00:01:05,660 --> 00:01:07,550 It's a pretty good resource, 22 00:01:07,550 --> 00:01:10,170 and there's even a built-in editor to go through 23 00:01:10,170 --> 00:01:12,070 and try all of the different things. 24 00:01:12,070 --> 00:01:16,500 It goes through all of the jQuery basics with links to documentation, 25 00:01:16,500 --> 00:01:21,250 what the dollar-sign selector is, and pretty much everything that you need to know. 26 00:01:21,250 --> 00:01:26,450 It goes all the way through to traversing and manipulating the DOM, 27 00:01:26,450 --> 00:01:30,160 events and delegation, as well as effects and AJAX. 28 00:01:30,160 --> 00:01:34,200 This is a really, really great resource, so make sure to check that out. 29 00:01:34,200 --> 00:01:37,330 Once again, that's jqfundamentals.com. 30 00:01:37,330 --> 00:01:40,170 It's always worth it to brush up on JavaScript. 31 00:01:40,170 --> 00:01:41,170 [Nick] That's pretty cool, Jason. 32 00:01:41,170 --> 00:01:45,370 I know some of those words. [Jason] Yeah. [ Nick] Pretty nifty. 33 00:01:45,370 --> 00:01:47,200 [Jason] Like the 'j'. [Nick] Yeah. [Jason] That's pretty good. 34 00:01:47,200 --> 00:01:56,700 [Nick] Next up is Yeoman, available at http://yeoman.io/packagemanager.html. 35 00:01:56,700 --> 00:02:03,780 Basically, Yeoman is a package manager for modern web work flows. 36 00:02:03,780 --> 00:02:08,320 It's a command-line tool that you go ahead and install. 37 00:02:08,320 --> 00:02:13,450 The Ruby Community has benefited from having a package manager 38 00:02:13,450 --> 00:02:15,100 as well as several other communities. 39 00:02:15,100 --> 00:02:19,600 There hasn't really been a great package manager for handling all of these 40 00:02:19,600 --> 00:02:26,490 JavaScript dependencies--like jQuery or adding in frameworks like Twitter Bootstrap-- 41 00:02:26,490 --> 00:02:29,860 and really putting all of those things together and 42 00:02:29,860 --> 00:02:33,070 tying up all the loose ends for creating a new web project. 43 00:02:33,070 --> 00:02:38,170 Usually, you have to go and find all of those pieces and put them together yourself, 44 00:02:38,170 --> 00:02:42,740 or you go and download the latest version of, say, HTML5 Boilerplate. 45 00:02:42,740 --> 00:02:46,170 But this is a much better way to manage those dependencies 46 00:02:46,170 --> 00:02:48,780 as you're actually working on the project. 47 00:02:48,780 --> 00:02:51,840 [Jason] So this is going to 'bootstrap' the project? 48 00:02:51,840 --> 00:02:55,130 [Nick] It is going to 'bootstrap' the project-- 49 00:02:55,130 --> 00:02:57,520 not the same thing as Twitter Bootstrap, of course. 50 00:02:57,520 --> 00:03:01,030 But, yeah, it's a really great way to go ahead and get started 51 00:03:01,030 --> 00:03:03,110 on your next web project. 52 00:03:03,110 --> 00:03:05,840 [Jason] What I like about Yeoman is that it's interactive, 53 00:03:05,840 --> 00:03:08,640 so it sort of lets you go through and choose what you actually do want in the project. 54 00:03:08,640 --> 00:03:11,200 It really gives you the ability to customize anything 55 00:03:11,200 --> 00:03:14,870 and just take out all of the steps that can be 56 00:03:14,870 --> 00:03:17,630 a little bit tedious when you start a new application. 57 00:03:17,630 --> 00:03:19,770 So, it's kind of cool to have that automated. 58 00:03:19,770 --> 00:03:21,770 [Nick] Yo, man! 59 00:03:21,770 --> 00:03:26,440 [Jason] Next up is something called Bower which is pretty similar to Yeoman, 60 00:03:26,440 --> 00:03:28,440 [http://twitter.github.com/bower/] 61 00:03:28,440 --> 00:03:31,410 although it is just for your front-end stack of different JavaScripts. 62 00:03:31,440 --> 00:03:34,060 So, if you want to have a version of jQuery, 63 00:03:34,060 --> 00:03:37,190 you would just Bower-install jQuery, 64 00:03:37,190 --> 00:03:40,100 and this will use npm to install that. 65 00:03:40,100 --> 00:03:45,590 It creates a manifest file called 'package.json'--I believe that's what it is-- 66 00:03:45,590 --> 00:03:51,020 yes, package.json--that specifies all of the different dependencies to your project. 67 00:03:51,020 --> 00:03:52,660 This is by Twitter. 68 00:03:52,660 --> 00:03:56,510 This is a pretty low-level thing--a little bit more low-level than Yeoman. 69 00:03:56,510 --> 00:04:01,570 So, it's not going to go through and install Bootstrap for you, 70 00:04:01,570 --> 00:04:04,840 but you could specify just the JavaScript as a dependency. 71 00:04:04,840 --> 00:04:09,210 Interesting framework--gives you just enough to get you started with a project. 72 00:04:09,210 --> 00:04:10,630 So, check that out. 73 00:04:10,630 --> 00:04:16,019 You can find that on Twitter's github at http://Twitter.github.com/bower. 74 00:04:16,019 --> 00:04:20,649 [Nick] Pretty nifty. Next up is This Is Responsive. 75 00:04:20,649 --> 00:04:23,630 That's actually the name of the project--This Is Responsive. 76 00:04:23,630 --> 00:04:24,950 You can check it out at: 77 00:04:24,950 --> 00:04:32,460 http://bradfrost.github.com/this-is-responsive/index.html. 78 00:04:32,460 --> 00:04:35,120 It's really easy to remember. 79 00:04:35,120 --> 00:04:40,670 [Jason] This dash hurts dash my dash brain just looking at it. 80 00:04:40,670 --> 00:04:44,090 [Nick] Exactly. Basically, if you just Google 'This Is Responsive,' 81 00:04:44,090 --> 00:04:45,760 you can probably find it pretty easily and, of course, 82 00:04:45,760 --> 00:04:49,740 you can check out the show notes on our show. 83 00:04:49,740 --> 00:04:51,810 [Jason] So, what does this do exactly? 84 00:04:51,810 --> 00:04:54,920 This gives you patterns, resources and news for 85 00:04:54,920 --> 00:04:57,920 creating responsive web experiences. 86 00:04:57,920 --> 00:04:59,730 [Nick] Exactly. You always want to keep up with the latest stuff 87 00:04:59,730 --> 00:05:04,010 in responsive web design because it is constantly changing and evolving. 88 00:05:04,010 --> 00:05:07,850 When you click on 'Patterns', for example, you can go ahead 89 00:05:07,850 --> 00:05:11,130 and check out all the latest stuff in laying out your site, 90 00:05:11,130 --> 00:05:14,320 creating navigation, tables, and so on. 91 00:05:14,320 --> 00:05:21,550 When you click on 'Resources', there are all sorts of great design tools. 92 00:05:21,550 --> 00:05:24,310 So if you're just mocking-up your responsive site, 93 00:05:24,310 --> 00:05:27,310 you can go ahead and check out the tools there. 94 00:05:27,310 --> 00:05:30,810 And then finally, there's news about responsive design. 95 00:05:30,810 --> 00:05:34,200 So they just have a nice news feed for all the latest stuff 96 00:05:34,200 --> 00:05:36,890 in the world of responsiveness. 97 00:05:36,890 --> 00:05:40,970 So, it's basically just a site that kind of packages-up all the different things 98 00:05:40,970 --> 00:05:44,080 happening in responsive design because it's kind of all over the place right now. 99 00:05:44,080 --> 00:05:46,980 Everybody's talking about it. Everybody's innovating. 100 00:05:46,980 --> 00:05:49,830 It can be really difficult to keep up with the latest stuff. 101 00:05:49,830 --> 00:05:51,850 [Jason] Yeah, responsive design is always evolving-- 102 00:05:51,850 --> 00:05:54,180 kind of like the front page to that site. 103 00:05:54,180 --> 00:05:56,890 [Nick] Exactly. Constantly changing. 104 00:05:56,890 --> 00:05:58,890 [Jason] So, speaking of constantly changing-- 105 00:05:58,890 --> 00:06:00,800 how about we do our app of the week? 106 00:06:00,800 --> 00:06:02,800 [Nick] Let's check it out! 107 00:06:02,800 --> 00:06:07,390 [? music playing ?] [APP PREVIEW] 108 00:06:07,390 --> 00:06:10,370 [Jason] Our app of the week this week is Total Spaces. 109 00:06:10,370 --> 00:06:14,700 Now, I'm not sure about you, Nick, but I really, really miss 110 00:06:14,700 --> 00:06:18,680 the grid spaces that were available up until Lion came out. 111 00:06:18,680 --> 00:06:21,840 [Nick] You know, I thought they just disappeared or something, 112 00:06:21,840 --> 00:06:24,840 and then there was some kind of setting I was missing, 113 00:06:24,840 --> 00:06:26,670 but I never actually talked about it with anybody. 114 00:06:26,670 --> 00:06:30,480 I just--I thought I was just dumb or something and missed a setting. 115 00:06:30,480 --> 00:06:32,860 [Jason] Yeah, I felt ashamed too, and I kept it to myself. [Nick laughs] 116 00:06:32,860 --> 00:06:35,310 [Jason] But great news! There's a new app called Total Spaces 117 00:06:35,310 --> 00:06:39,100 that brings back the grid spaces to OS 10 Lion. 118 00:06:39,100 --> 00:06:41,200 Something that's really awesome about it is-- 119 00:06:41,200 --> 00:06:45,990 so I've got it installed right now, and you're going to see a crazy flip animation-- 120 00:06:45,990 --> 00:06:48,150 Boom! Did you see that? That was a cube. [Nick] Whoa! 121 00:06:48,150 --> 00:06:49,800 [Jason] Here we go. Do it again. 122 00:06:49,800 --> 00:06:52,450 So, it gives you a little grid for your spaces. 123 00:06:52,450 --> 00:06:56,820 You can have a whole bunch more grids than you 124 00:06:56,820 --> 00:06:59,820 actually need to get anything done. 125 00:06:59,820 --> 00:07:03,320 I think it supports up to 16 grid spaces or even more. 126 00:07:03,320 --> 00:07:05,190 But the really nice thing about it--at least for me-- 127 00:07:05,190 --> 00:07:10,080 is that you can configure the time it takes to switch between different spaces. 128 00:07:10,080 --> 00:07:14,190 This is something that, strangely, has bothered me since Lion came out-- 129 00:07:14,190 --> 00:07:16,980 that the spaces animation was just a little bit too slow for me. 130 00:07:16,980 --> 00:07:20,050 I don't know. I know that's a 'me' issue. I'm working on it. 131 00:07:20,050 --> 00:07:22,150 But anyway, check out Total Spaces. 132 00:07:22,150 --> 00:07:25,150 This is a paid app. It's only twelve dollars. 133 00:07:25,150 --> 00:07:27,800 And you can get that at https://totalspaces.binaryage.com. 134 00:07:27,800 --> 00:07:30,930 Really worth it and you probably know if you need it because I've been missing this. 135 00:07:30,930 --> 00:07:33,850 Where has this been all my life since Lion came out? 136 00:07:33,850 --> 00:07:36,310 [Nick] It is pretty sweet. I have missed it as well. 137 00:07:36,310 --> 00:07:39,310 Next up is Color Sense for Xcode. 138 00:07:39,310 --> 00:07:42,540 Now, I confess, I am not an iOS developer myself, 139 00:07:42,540 --> 00:07:45,520 but this does look like a pretty nifty tool. 140 00:07:45,520 --> 00:07:48,520 It's basically a plug-in for Xcode, 141 00:07:48,520 --> 00:07:53,710 and it's best demonstrated with this little YouTube video that they have, right here. 142 00:07:53,710 --> 00:07:58,370 Basically, as you're typing in code, it will give you a 143 00:07:58,370 --> 00:08:03,020 real-time color selector that's the same OS 10 color selector 144 00:08:03,020 --> 00:08:04,400 that you're probably already familiar with. 145 00:08:04,400 --> 00:08:10,140 You can go ahead and click on that and then select the color that you want to use 146 00:08:10,140 --> 00:08:14,540 instead of actually typing in hexadecimal values or-- 147 00:08:14,540 --> 00:08:16,730 honestly, I don't know what they do in the-- 148 00:08:16,730 --> 00:08:19,010 [Jason] RGB--is that a thing? 149 00:08:19,010 --> 00:08:23,290 [Nick] iOS well--I think they might use RGB just by looking at this video. 150 00:08:23,290 --> 00:08:25,580 Pretty nifty stuff, actually. 151 00:08:25,580 --> 00:08:28,990 So you can go ahead and get that on GitHub at: 152 00:08:28,990 --> 00:08:37,380 https://github.com/omz/ColorSense-for-Xcode. 153 00:08:37,380 --> 00:08:39,919 [Jason] I showed that to an iOS developer friend of mine, 154 00:08:39,919 --> 00:08:41,360 and he really was pretty impressed by it. 155 00:08:41,360 --> 00:08:43,480 So, that means it's great. 156 00:08:43,480 --> 00:08:44,930 [Nick] Sounds like it's useful. 157 00:08:44,930 --> 00:08:47,720 [Jason] Next up is something called Underscore CLI. 158 00:08:47,720 --> 00:08:49,720 [https://github.com/ddopson/underscore-cli] 159 00:08:49,720 --> 00:08:52,850 This is a really useful command-line utility that's going to let you 160 00:08:52,850 --> 00:08:58,500 pipe JSON into it--and by 'JSON' I mean JavaScript objects-- 161 00:08:58,500 --> 00:08:59,500 [Nick] Not you. [Jason] Not me. 162 00:08:59,500 --> 00:09:00,840 I'm not going to be piped into your command line. 163 00:09:00,840 --> 00:09:02,380 [Nick] I was confused by that. 164 00:09:02,380 --> 00:09:04,470 [Jason] Yeah, it's going to let you pipe JSON into it, 165 00:09:04,470 --> 00:09:06,210 and then it will format things for you. 166 00:09:06,210 --> 00:09:08,570 This is going to be extremely useful when you're working 167 00:09:08,570 --> 00:09:12,230 with different web APIs or anything that's going to output JSON. 168 00:09:12,230 --> 00:09:17,740 And what's really nice about it is that in addition to just outputting this, 169 00:09:17,740 --> 00:09:21,510 coloring it for you, and making it look a little bit prettier, 170 00:09:21,510 --> 00:09:25,340 you can actually do different queries on the JSON objects if-- 171 00:09:25,340 --> 00:09:28,340 let's say you're looking for a whole bunch of different titles. 172 00:09:28,340 --> 00:09:31,790 You can pipe to that and say, hey, just give me the titles, 173 00:09:31,790 --> 00:09:33,300 and it will do that for you. 174 00:09:33,300 --> 00:09:40,000 It's a very, very simple utility, and that is also available on GitHub by ddopson. 175 00:09:40,000 --> 00:09:45,730 We can find the link to that in the show notes on our YouTube page. 176 00:09:45,730 --> 00:09:47,980 [Nick] So, be sure to check it out. [Jason] Yeah. 177 00:09:47,980 --> 00:09:51,760 [Nick] Alright, cool. Next up is Modern UI Icons 178 00:09:51,760 --> 00:09:55,090 available at http://modernuiicons.com. 179 00:09:55,090 --> 00:09:58,830 This is for Windows phones, actually, 180 00:09:58,830 --> 00:10:03,200 so it's really cool that there are projects happening for Windows devices. 181 00:10:03,200 --> 00:10:08,830 Basically, it's just a collection of icons that are all created in Expression Design, 182 00:10:08,830 --> 00:10:12,420 and you can go ahead and download them and see the .design Source. 183 00:10:12,420 --> 00:10:16,180 I'm just going to go ahead and pick a couple of these icons here. 184 00:10:16,180 --> 00:10:23,580 Let's say you were building maybe a photo app, or a clock app, or something like that. 185 00:10:23,580 --> 00:10:26,210 So I'll pick a couple there, and when I click on those, 186 00:10:26,210 --> 00:10:29,130 they appear up here, so you see a nice little preview 187 00:10:29,130 --> 00:10:31,530 of what that's actually going to look like. 188 00:10:31,530 --> 00:10:35,800 Apparently, this is an application that allows you to travel through time, 189 00:10:35,800 --> 00:10:38,800 so you can go backwards and forwards as needed. 190 00:10:38,800 --> 00:10:45,300 And again, it's really cool to see stuff happening in the Windows Phone space. 191 00:10:45,300 --> 00:10:48,740 [Jason] Particularly, I like that if I'm developing a Windows Phone application, 192 00:10:48,740 --> 00:10:51,790 I have an Nyan Cat icon all ready to go. 193 00:10:51,790 --> 00:10:55,230 [Nick] That's really important because you're going to use that all the time. 194 00:10:55,230 --> 00:10:56,630 [Jason] Yeah. Every app needs it. [Nick] Definitely. 195 00:10:56,630 --> 00:10:59,630 [Jason] So, it's probably a good point to wrap up. 196 00:10:59,630 --> 00:11:03,820 I guess today we learned that we all missed grid spaces, 197 00:11:03,820 --> 00:11:07,780 and there are some cool projects coming out for Windows Phone. 198 00:11:07,780 --> 00:11:12,540 If you want to catch us on Twitter, I'm @jseifer. [Nick] And I'm @nickrp. 199 00:11:12,540 --> 00:11:15,180 Thanks so much for tuning in to this episode of The Treehouse Show. 200 00:11:15,180 --> 00:11:17,890 For show notes and more, check out our YouTube account 201 00:11:17,890 --> 00:11:20,930 at http://youtube.com/gotreehouse/. 202 00:11:20,930 --> 00:11:23,690 [Nick] And, of course, this show is brought to you by Treehouse-- 203 00:11:23,690 --> 00:11:26,970 the best way to learn web design, web development, and more. 204 00:11:26,970 --> 00:11:30,470 You can check us out at http://teamtreehouse.com. 205 00:11:30,470 --> 00:11:33,030 Thanks so much for watching, and we'll see you next time. 206 00:11:33,030 --> 00:11:36,030 [? music playing ?] [The Treehouse Show]