1 00:00:00,000 --> 00:00:02,000 [The Treehouse Show] 2 00:00:02,000 --> 00:00:05,190 Hi, I'm Nick Pettit. >>And I'm Jason Seifer. >>And you're watching The Treehouse Show, 3 00:00:05,190 --> 00:00:08,430 your weekly dose of Internet, where we talk about all things web design, 4 00:00:08,430 --> 00:00:10,530 web development, and more. 5 00:00:10,530 --> 00:00:13,920 [Seifer] In this episode, we'll be going over brand new CSS techniques, 6 00:00:13,920 --> 00:00:17,050 the usual roundup of responsive design techniques, 7 00:00:17,050 --> 00:00:19,710 and command line tools for web developers. 8 00:00:19,710 --> 00:00:25,130 [Pettit] Let's check it out. 9 00:00:25,130 --> 00:00:27,470 [The Treehouse Show] 10 00:00:27,470 --> 00:00:29,880 [Pettit] First up is Simple Grid, 11 00:00:29,880 --> 00:00:33,600 which is a barebones grid created for developers 12 00:00:33,600 --> 00:00:35,610 who need a barebones grid. 13 00:00:35,610 --> 00:00:38,050 [Seifer] So this is going to be something that gives you a lot to work with, 14 00:00:38,050 --> 00:00:40,840 something that's complicated and gives you everything 15 00:00:40,840 --> 00:00:43,490 you need to start doing a CSS framework? 16 00:00:43,490 --> 00:00:48,560 [Pettit] It's barebones. >>Okay. >>Yeah. That's it, Jason. 17 00:00:48,560 --> 00:00:53,940 The other cool thing about barebones grid is that it's also responsive, 18 00:00:53,940 --> 00:00:58,910 as you would expect with most CSS grids these days. 19 00:00:58,910 --> 00:01:01,180 When I was talking to Jason before the show, I said, 20 00:01:01,180 --> 00:01:03,640 "What really is different about this grid?" 21 00:01:03,640 --> 00:01:07,000 and we couldn't quite figure it out, but the thing is, 22 00:01:07,000 --> 00:01:11,980 it is very simple, so it's probably a really good learning tool 23 00:01:11,980 --> 00:01:15,580 if you are trying to figure out how to use something more complex 24 00:01:15,580 --> 00:01:17,560 like Twitter Bootstrap, for example, 25 00:01:17,560 --> 00:01:22,590 or if you're just trying to build your own grid from scratch. 26 00:01:22,590 --> 00:01:24,610 [Seifer] It's also really lightweight, which is really nice 27 00:01:24,610 --> 00:01:27,900 maybe if you are just prototyping a site. 28 00:01:27,900 --> 00:01:30,720 [Pettit] Yeah. And I think it's very important for CSS grids like this 29 00:01:30,720 --> 00:01:33,940 to be lightweight, especially when they're responsive 30 00:01:33,940 --> 00:01:38,260 and trying to deliver content to mobile devices. 31 00:01:38,260 --> 00:01:43,120 [Seifer] When you say "barebones" I think of the word "bear" and then space, "bones." 32 00:01:43,120 --> 00:01:46,500 Like the bones of a bear rather than a lightweight grid. 33 00:01:46,500 --> 00:01:49,110 [Pettit] Jason, you're pretty. 34 00:01:49,110 --> 00:01:51,320 [Seifer] Next up is BootMetro. 35 00:01:51,320 --> 00:01:53,990 This is a metro-style web framework. 36 00:01:53,990 --> 00:01:57,130 This is going to include CSS, HTML, and JavaScript 37 00:01:57,130 --> 00:02:00,820 if you want to start coding websites like Metro. 38 00:02:00,820 --> 00:02:02,780 This is going to be much more important now that 39 00:02:02,780 --> 00:02:05,310 Windows 8 has officially been released. 40 00:02:05,310 --> 00:02:07,500 [Pettit] So, just for a second, "Metro" meaning 41 00:02:07,500 --> 00:02:11,280 the design language used by Microsoft. >>Yes. 42 00:02:11,280 --> 00:02:13,600 The design language used by Microsoft, not-- 43 00:02:13,600 --> 00:02:17,590 it has nothing to do with clothes or style or anything like that. >>Got it. 44 00:02:17,590 --> 00:02:20,480 [Seifer] So there's a bunch of different demos on the site that you can go over. 45 00:02:20,480 --> 00:02:23,840 One thing that you'll see in a lot of Windows Metro apps 46 00:02:23,840 --> 00:02:26,400 is something called this application bar, 47 00:02:26,400 --> 00:02:28,960 and you can see it over on the bottom of the screen right here. 48 00:02:28,960 --> 00:02:31,120 There are just tons of different tool bars 49 00:02:31,120 --> 00:02:34,670 and things that you can add into your application. 50 00:02:34,670 --> 00:02:37,550 They include different styling for tables 51 00:02:37,550 --> 00:02:39,850 as well as dropdowns and kind of everything 52 00:02:39,850 --> 00:02:44,590 that you would be expecting out of a framework these days. 53 00:02:44,590 --> 00:02:48,070 So pretty easy. You can find the link to this BootMetro 54 00:02:48,070 --> 00:02:52,770 in the show notes at youtube.com/gotreehouse. 55 00:02:52,770 --> 00:02:56,900 [Pettit] Pretty nifty. Next up is typeset.css, 56 00:02:56,900 --> 00:03:00,520 and this is just a style sheet that-- 57 00:03:00,520 --> 00:03:06,290 well, they describe it as a no-nonsense CSS typographic reset 58 00:03:06,290 --> 00:03:09,750 for user-generated content such as blog posts 59 00:03:09,750 --> 00:03:12,780 or comments or form posts, etcetera. 60 00:03:12,780 --> 00:03:16,950 And you can go ahead and click through on the left side here 61 00:03:16,950 --> 00:03:23,300 and see the different kinds of styling that typeset.css provides. 62 00:03:23,300 --> 00:03:27,260 It is as described. It's just a really simple 63 00:03:27,260 --> 00:03:30,620 set of styling for user-generated content. 64 00:03:30,620 --> 00:03:34,190 Just so there's not stuff that's breaking the page 65 00:03:34,190 --> 00:03:40,600 or going really far outside the bounds of a particular content area, etcetera. 66 00:03:40,600 --> 00:03:43,490 So pretty nice. >>So this is something that you would use, 67 00:03:43,490 --> 00:03:46,150 maybe, instead of a full framework if you just want 68 00:03:46,150 --> 00:03:51,560 to reset the styles on your blog comments and maybe forum threads. 69 00:03:51,560 --> 00:03:53,420 Anywhere where people can actually enter stuff. 70 00:03:53,420 --> 00:03:57,130 You just use that part rather than something like Bootstrap or BootMetro, 71 00:03:57,130 --> 00:03:59,110 which is a whole complicated framework. 72 00:03:59,110 --> 00:04:02,620 [Pettit] Exactly. Just pretty simple and straightforward. 73 00:04:02,620 --> 00:04:09,490 So next up, we're going to check out web trends. 74 00:04:09,490 --> 00:04:12,680 [Web Trends] 75 00:04:12,680 --> 00:04:17,570 Like many websites, the site for Time Magazine has gone responsive, 76 00:04:17,570 --> 00:04:21,670 and we've seen this happen with Boston Globe, USA Today, 77 00:04:21,670 --> 00:04:24,480 which we covered on a previous episode, and now Time Magazine 78 00:04:24,480 --> 00:04:27,350 has made their website responsive as well. 79 00:04:27,350 --> 00:04:30,120 [Seifer] It almost seems like making a website responsive 80 00:04:30,120 --> 00:04:32,460 is a web trend in itself. 81 00:04:32,460 --> 00:04:34,540 [Pettit] That could be the case, Jason. 82 00:04:34,540 --> 00:04:37,980 So if we look at Time Magazine's website, 83 00:04:37,980 --> 00:04:40,760 it looks like a pretty standard news website, 84 00:04:40,760 --> 00:04:44,260 but if we go ahead and resize the browser here, 85 00:04:44,260 --> 00:04:47,930 [Seifer] Whoa! >>And make it a little bit smaller, 86 00:04:47,930 --> 00:04:54,080 you can see how, as we resize it, Time will respond-- 87 00:04:54,080 --> 00:04:58,530 not the concept of time itself, but Time Magazine. 88 00:04:58,530 --> 00:05:00,440 That would be crazy. 89 00:05:00,440 --> 00:05:05,100 Anyway, looking at the mobile version of Time here, 90 00:05:05,100 --> 00:05:10,750 I think that there are a couple things that they didn't get quite right. 91 00:05:10,750 --> 00:05:15,440 I really would much rather see just this view, 92 00:05:15,440 --> 00:05:21,590 just the top news story with a picture and the top headline, 93 00:05:21,590 --> 00:05:25,160 or maybe something more like this, where I get the top four headlines. 94 00:05:25,160 --> 00:05:28,090 If you look up at the top here, they have the logo, 95 00:05:28,090 --> 00:05:31,020 which I think is a little bit too large and branded. 96 00:05:31,020 --> 00:05:34,120 Then they have this search box here, 97 00:05:34,120 --> 00:05:38,490 which I don't really think is appropriate to show in this particular view. 98 00:05:38,490 --> 00:05:43,610 I think it might go better down towards the bottom or something, 99 00:05:43,610 --> 00:05:45,970 just because, when people come to a news site, 100 00:05:45,970 --> 00:05:49,920 I don't think they're really looking to search immediately. 101 00:05:49,920 --> 00:05:51,820 I think they're looking moreso to browse. 102 00:05:51,820 --> 00:05:55,640 It's more of a passive activity where-- >>More like people 103 00:05:55,640 --> 00:05:58,310 are going to be consuming the content rather than 104 00:05:58,310 --> 00:06:02,020 be trying to enter things into it as soon as they hit a site. 105 00:06:02,020 --> 00:06:04,680 [Pettit] Exactly. I think people are just hitting a site 106 00:06:04,680 --> 00:06:07,500 to go ahead--or hitting a news site to go ahead and browse 107 00:06:07,500 --> 00:06:10,230 and just see what the latest stuff is. 108 00:06:10,230 --> 00:06:13,410 They don't necessarily want to go there to immediately search for an article 109 00:06:13,410 --> 00:06:16,910 that they have in mind, or search for a topic that they're interested in. 110 00:06:16,910 --> 00:06:18,830 So that seems a little bit off. 111 00:06:18,830 --> 00:06:22,610 I also think these dropdown menus are a little much. 112 00:06:22,610 --> 00:06:26,910 I think they could have consolidated this in some other way, 113 00:06:26,910 --> 00:06:30,310 maybe put these topics down towards the bottom. 114 00:06:30,310 --> 00:06:36,020 I don't know. The dropdown menus just seem wrong for this small of a screen. 115 00:06:36,020 --> 00:06:38,200 [Seifer] Now, if you could change one thing about this, 116 00:06:38,200 --> 00:06:42,310 what do you think it would be? >>I think I would just try to simplify it. 117 00:06:42,310 --> 00:06:46,590 I think what's apparent here is that they took a pre-existing website 118 00:06:46,590 --> 00:06:50,280 and then tried to make it responsive. 119 00:06:50,280 --> 00:06:53,060 Which is a perfectly legitimate approach, 120 00:06:53,060 --> 00:06:57,170 as long as you do it right and you make the mobile version really simple. 121 00:06:57,170 --> 00:06:59,200 The reason you want to do mobile first 122 00:06:59,200 --> 00:07:02,560 when you're doing responsive web designs and then working your way up 123 00:07:02,560 --> 00:07:05,860 to those desktop layouts is so that you concentrate 124 00:07:05,860 --> 00:07:09,110 on the core experience and make something really, really simple, 125 00:07:09,110 --> 00:07:14,950 and then you add things on top of that as you go up to larger screen sizes. 126 00:07:14,950 --> 00:07:17,930 So I think they got that a little bit wrong here. 127 00:07:17,930 --> 00:07:20,840 It looks pretty cluttered for a mobile website. 128 00:07:20,840 --> 00:07:26,010 I mean, this big feedback button is kind of ridiculous for a mobile site. 129 00:07:26,010 --> 00:07:32,530 Anyway, there's a chance you could go wrong with a responsive site. 130 00:07:32,530 --> 00:07:35,890 [Seifer] Interesting. So if you want to check this out, 131 00:07:35,890 --> 00:07:39,950 maybe the old version, would that be going back in time? 132 00:07:39,950 --> 00:07:42,650 [Pettit] That's very good, Jason. >>Thanks. >>I'm impressed. 133 00:07:42,650 --> 00:07:47,210 I'm proud of you. >>No problem. So that was web trends. 134 00:07:47,210 --> 00:07:49,700 Next up, we have an article on Smashing Magazine called, 135 00:07:49,700 --> 00:07:53,610 "Powerful Command Line Tools for Developers." 136 00:07:53,610 --> 00:07:56,780 This is actually a great article if you're maybe just getting into 137 00:07:56,780 --> 00:07:59,470 how to use the terminal or the command line. 138 00:07:59,470 --> 00:08:01,500 Check it out and get reaquainted with some 139 00:08:01,500 --> 00:08:04,010 of the different tools available to you. 140 00:08:04,010 --> 00:08:06,660 The first thing that they go over is a tool called Curl. 141 00:08:06,660 --> 00:08:11,500 Curl will fetch web pages, files, and anything you need from the command line. 142 00:08:11,500 --> 00:08:14,690 There are a ton of different options and things that you can do with Curl, 143 00:08:14,690 --> 00:08:17,670 and there's a nice introduction on here. 144 00:08:17,670 --> 00:08:19,960 There's also introduction to other tools such as 145 00:08:19,960 --> 00:08:27,990 Ngrep, Netcat, Sshuttle, which is going to be for doing SSH tunneling 146 00:08:27,990 --> 00:08:33,340 to your different servers, which also works with DNS. 147 00:08:33,340 --> 00:08:35,340 Finally, there's also something called Siege, 148 00:08:35,340 --> 00:08:38,440 which is an HTTP benchmarking tool. 149 00:08:38,440 --> 00:08:42,480 You can do this to do testing of your web application 150 00:08:42,480 --> 00:08:45,710 from the command line, so it'll go through and simulate 151 00:08:45,710 --> 00:08:48,900 a bunch of different rapid connections to your web application. 152 00:08:48,900 --> 00:08:54,630 From there, using that data, you can figure out what you need to optimize inside your app. 153 00:08:54,630 --> 00:08:57,300 Anyway, it's a great roundup, and they actually tell you 154 00:08:57,300 --> 00:09:00,410 how to use these tools on the site, so check that out. 155 00:09:00,410 --> 00:09:03,170 [Pettit] That's really handy. You know, one thing I've said on the show before, 156 00:09:03,170 --> 00:09:06,980 and I want to re-emphasize, is that I feel like a lot of designers 157 00:09:06,980 --> 00:09:11,230 are sometimes afraid to use the terminal, they think it's just 158 00:09:11,230 --> 00:09:15,080 really scary, and they'd rather stick to their HTMLing and CSSing 159 00:09:15,080 --> 00:09:18,220 and Photoshop and stuff, but it's a really, really useful tool, 160 00:09:18,220 --> 00:09:21,100 and it can make you a lot more independent 161 00:09:21,100 --> 00:09:27,380 and make you a really powerful asset to a team of designers and developers. 162 00:09:27,380 --> 00:09:30,240 [Seifer] So I guess if I were going to redo my Halloween costume, 163 00:09:30,240 --> 00:09:32,520 and I was going to a party full of web designers, 164 00:09:32,520 --> 00:09:36,040 I could be a terminal. >>That's right. >>And that would scare everybody. 165 00:09:36,040 --> 00:09:39,270 [Pettit] That is pretty scary to some people. 166 00:09:39,270 --> 00:09:41,240 Next up, and I'm going to say this wrong. 167 00:09:41,240 --> 00:09:45,590 I think it's Macky-Sue? Makisu? 168 00:09:45,590 --> 00:09:48,460 It's Japanese. >>I have nothing to offer. 169 00:09:48,460 --> 00:09:51,520 [Pettit] Basically, this is a set of menus, 170 00:09:51,520 --> 00:09:55,910 or dropdown menus, and I'll go ahead and toggle this 171 00:09:55,910 --> 00:10:00,420 so you can see-- >>Wow, it rolls up! >>how these fold up 172 00:10:00,420 --> 00:10:03,050 and how these fold back down, and each one of these 173 00:10:03,050 --> 00:10:08,120 is just a different style or different pacing of animation. 174 00:10:08,120 --> 00:10:10,980 They're titled after different types of sushi, 175 00:10:10,980 --> 00:10:14,840 which I think is pretty cool. 176 00:10:14,840 --> 00:10:18,820 If we go ahead and go over to the GitHub page, 177 00:10:18,820 --> 00:10:24,510 it says it's an experimental CSS 3D dropdown concept, 178 00:10:24,510 --> 00:10:28,850 and you can actually use it as, you guessed it, a jQuery plugin. 179 00:10:28,850 --> 00:10:33,990 Now, when I first saw this, I thought, what the heck is the application of this? 180 00:10:33,990 --> 00:10:37,090 And I think you'd want to use this on pages 181 00:10:37,090 --> 00:10:39,460 that might be a little bit more flashy in your app. 182 00:10:39,460 --> 00:10:43,910 So say, for example, you had a web application 183 00:10:43,910 --> 00:10:48,250 that was like a subscription app, and you had a plans page, 184 00:10:48,250 --> 00:10:51,210 and you wanted to show all of the features of the app. 185 00:10:51,210 --> 00:10:53,890 You might say, learn more, and you can go ahead and click, 186 00:10:53,890 --> 00:10:58,070 and it'll fold down like a sushi menu and show you 187 00:10:58,070 --> 00:11:02,720 all of the features that you'll get with each different kind of plan. 188 00:11:02,720 --> 00:11:07,540 I think it's a little bit flashy, but sometimes you do need that. 189 00:11:07,540 --> 00:11:09,740 [Seifer] It's an interesting experiment. >>Yeah, I know. 190 00:11:09,740 --> 00:11:11,640 As an experiment, it is very cool. 191 00:11:11,640 --> 00:11:15,970 [Seifer] It's really cool to see what you can do with CSS these days. >>Definitely. 192 00:11:15,970 --> 00:11:21,060 [Seifer] Finally, over on Kaushik Gopal's online journal, 193 00:11:21,060 --> 00:11:24,920 there is "Yet Another Newb Guide to Git." 194 00:11:24,920 --> 00:11:27,710 Now, if you don't know Git, or you're looking to learn, 195 00:11:27,710 --> 00:11:30,950 this is just a fantastic starting point, 196 00:11:30,950 --> 00:11:37,200 with casual references all the way up to intermediate and advanced uses of Git. 197 00:11:37,200 --> 00:11:40,150 [Pettit] Who's Git? I've heard of this person, 198 00:11:40,150 --> 00:11:42,130 but I don't know who this person is. 199 00:11:42,130 --> 00:11:45,830 [Seifer] Git is a source control management system 200 00:11:45,830 --> 00:11:48,630 that's pretty popular, works with GitHub, 201 00:11:48,630 --> 00:11:51,360 and there's actually a walkthrough of how to use GitHub on here, as well. 202 00:11:51,360 --> 00:11:55,040 [Pettit] Very cool. >>So if you know somebody who is wanting to learn Git, 203 00:11:55,040 --> 00:11:59,520 definitely check out this page, which, again, you'll find in our show notes. 204 00:11:59,520 --> 00:12:03,320 [Pettit] Awesome stuff. Now Jason, what did we learn today? 205 00:12:03,320 --> 00:12:05,890 [Seifer] We learned nothing, Nick. >>Absolutely nothing? 206 00:12:05,890 --> 00:12:07,780 [Seifer] We learned that the Web is a barren wasteland 207 00:12:07,780 --> 00:12:10,430 full of time-wasting opportunities and cat pictures. 208 00:12:10,430 --> 00:12:13,810 [Pettit] You should go to a library. >>Exactly. 209 00:12:13,810 --> 00:12:15,910 If you want more information on anything we talked about 210 00:12:15,910 --> 00:12:21,140 this week, head on over to our show notes at youtube.com/gotreehouse. 211 00:12:21,140 --> 00:12:23,280 [Pettit] And, of course, if you'd like to follow us on Twitter, 212 00:12:23,280 --> 00:12:26,120 I am @NICKRP. >>And I am @JSEIFER. 213 00:12:26,120 --> 00:12:29,250 [Pettit] And if you'd like to check out more videos like this one 214 00:12:29,250 --> 00:12:33,780 and learn about web design, web development, business, iOS or Android, 215 00:12:33,780 --> 00:12:36,870 be sure to check us out at teamtreehouse.com. 216 00:12:36,870 --> 00:12:41,820 Thanks so much for watching, and we'll see you next week. 217 00:12:41,820 --> 00:12:45,820 [The Treehouse Show]