1 00:00:00,000 --> 00:00:01,400 [whirring sound] 2 00:00:01,400 --> 00:00:05,040 I'm Nick Pettit... >>and I'm Jason Seifer... >>and you're watching The Treehouse Show, 3 00:00:05,040 --> 00:00:07,800 your weekly dose of internets where we talk about all things web design, 4 00:00:07,800 --> 00:00:09,780 web development, and more. 5 00:00:09,780 --> 00:00:13,480 In this episode we'll be talking about Twitter Bootstrap, relogo, 6 00:00:13,480 --> 00:00:15,720 and our app review is Alfred. 7 00:00:15,720 --> 00:00:18,260 Let's get into it. 8 00:00:18,610 --> 00:00:21,450 [beeping sound] 9 00:00:21,800 --> 00:00:23,950 [The Treehouse Show] 10 00:00:23,950 --> 00:00:29,710 First up is Twitter Bootstrap, which is now in version 2.2.0. [http://goo.gl/9pfCq] 11 00:00:29,710 --> 00:00:32,740 Oh, wow! >>Ooh! [both chuckle] 12 00:00:32,740 --> 00:00:38,300 If you go over to the Get Bootstrap blog, you can check out the release notes. 13 00:00:38,300 --> 00:00:41,610 I really like this trend of including a tl;dr. 14 00:00:41,610 --> 00:00:44,910 They say that there are 4 new example templates. 15 00:00:44,910 --> 00:00:48,340 They added media component, new typographic scale, 16 00:00:48,340 --> 00:00:54,770 fixed that box-shadow mixin bug thingy, and they fixed some z-index issues. 17 00:00:54,770 --> 00:00:58,210 Let's just go ahead and look at the first couple highlights here. 18 00:00:58,210 --> 00:01:03,360 They added 4 new templates to the docs, including a narrow marketing page, 19 00:01:03,360 --> 00:01:07,120 a sign-in form, a sticky footer, and a fancy carousel, 20 00:01:07,120 --> 00:01:10,380 which is great because I hate those unfancy carousels. 21 00:01:10,380 --> 00:01:14,980 Basically, that's just really nice if you're trying to create some of those things 22 00:01:14,980 --> 00:01:17,620 such as a sticky footer, 23 00:01:17,620 --> 00:01:19,200 because when you're trying to make some of those things, 24 00:01:19,200 --> 00:01:23,290 it's sometimes a little tricky to figure out exactly how to do them. 25 00:01:23,290 --> 00:01:28,050 So it's nice that they have an example of how to do them in Twitter Bootstrap. 26 00:01:28,050 --> 00:01:30,400 The other thing that I really like as a designer 27 00:01:30,400 --> 00:01:36,820 is that they have this new variable-driven typographic scale based on baseFontSize 28 00:01:36,820 --> 00:01:39,310 and baseLineHeight. 29 00:01:39,310 --> 00:01:42,310 [Seifer] As a developer, I have no clue how those things relate to each other. 30 00:01:42,310 --> 00:01:46,510 Basically, if you're coding along and you're styling, 31 00:01:46,510 --> 00:01:52,320 you can go ahead and set something based on the baseFontSize or the baseLineHeight, 32 00:01:52,320 --> 00:01:58,150 which means the first time you set it or something like that. 33 00:01:58,150 --> 00:01:59,650 I know what I'm talking about. 34 00:01:59,650 --> 00:02:02,910 So instead of using Twitter's defaults, you can change them to your own 35 00:02:02,910 --> 00:02:06,960 and have that work in your own documents? >>Exactly. >>Very nice. 36 00:02:06,960 --> 00:02:08,400 One thing that I kind of like about it, 37 00:02:08,400 --> 00:02:12,030 do you remember how we talked about Bower a couple episodes ago? >>I do. 38 00:02:12,030 --> 00:02:14,260 If you don't remember that, check out our YouTube channel 39 00:02:14,260 --> 00:02:16,520 at YouTube.com/gotreehouse. 40 00:02:16,520 --> 00:02:21,190 Bower is a package management system for your website, 41 00:02:21,190 --> 00:02:26,650 and they've included support for Twitter Bootstrap into Bower, so that's cool. 42 00:02:26,650 --> 00:02:32,050 Very cool stuff. >>Also of note is that jQuery and plugins were updated to 1.8.1. 43 00:02:32,050 --> 00:02:38,460 Next up, keeping along the whole Bootstrap theme, is something called Bootbox.js. 44 00:02:38,460 --> 00:02:41,130 [http://bootboxjs.com] I know, I know, it's very close to beatbox, 45 00:02:41,130 --> 00:02:43,630 but we're not going to beatbox on this show. >>Thank goodness. 46 00:02:43,630 --> 00:02:47,840 Yeah. Our superiors denied that request. [both chuckle] 47 00:02:47,840 --> 00:02:51,200 This takes the whole idea of Bootstrap's modals and alerts 48 00:02:51,200 --> 00:02:55,660 and lets you do alert, confirm, and have dialogs on them. 49 00:02:55,660 --> 00:02:57,600 So what does that mean? 50 00:02:57,600 --> 00:03:03,130 If you click Run example here on the site, this is just kind of a default alert box. 51 00:03:03,130 --> 00:03:06,450 You see it says Hello world! but it has an OK button. 52 00:03:06,450 --> 00:03:11,380 In regular Twitter Bootstrap, you can click out of there 53 00:03:11,380 --> 00:03:15,670 and the modal will dismiss, so you actually have the option to specify 54 00:03:15,670 --> 00:03:19,370 that no, you can't just dismiss this, you have to hit OK. 55 00:03:19,370 --> 00:03:24,550 There's the same thing for confirms and prompting things, 56 00:03:24,550 --> 00:03:28,670 and there is also a ton of different options that you have on the site. 57 00:03:28,670 --> 00:03:32,000 You can put dynamic content in there. 58 00:03:32,000 --> 00:03:35,330 They have an example that changes with jQuery. 59 00:03:35,330 --> 00:03:37,260 Yeah, just a ton of different stuff. 60 00:03:37,260 --> 00:03:39,940 This is Bootbox.js. 61 00:03:39,940 --> 00:03:41,840 That's a really nice addition to Twitter Bootstrap 62 00:03:41,840 --> 00:03:46,180 because while those modal windows are sometimes annoying, 63 00:03:46,180 --> 00:03:48,760 they're also sometimes very necessary. 64 00:03:48,760 --> 00:03:51,990 And when you do want to display them, a lot of times you don't want people 65 00:03:51,990 --> 00:03:54,660 to be able to just click out of them and dismiss them. 66 00:03:54,660 --> 00:03:57,600 It really is a point where-- >>It's my website, not yours. 67 00:03:57,600 --> 00:04:00,240 That's right, and you have to show them who's boss. >>Exactly. 68 00:04:00,240 --> 00:04:04,060 It's really a point where the user has to make a decision about one thing or another 69 00:04:04,060 --> 00:04:06,940 before they can continue using apps. 70 00:04:06,940 --> 00:04:10,790 So it's nice that they allow that functionality. >>Definitely. 71 00:04:10,790 --> 00:04:13,220 Pretty cool. >>It's very dashing. >>It is. 72 00:04:13,220 --> 00:04:15,220 Next up is Dashing. [http://shopify,github.com/dashing/] 73 00:04:15,220 --> 00:04:19,920 If you go to their website, you can see that it's an exceptionally handsome 74 00:04:19,920 --> 00:04:23,710 dashboard framework, and you can tell that because there's a little bow tie right here 75 00:04:23,710 --> 00:04:26,170 on the website. >>[Seifer] That is dashing. >>[Pettit] That is. 76 00:04:26,170 --> 00:04:30,440 Basically, it's a dashboard framework, just like it says. 77 00:04:30,440 --> 00:04:33,120 You can go ahead and plug in your data sources 78 00:04:33,120 --> 00:04:39,520 and put together a drag and drop interface of a bunch of different dashboard widgets. 79 00:04:39,520 --> 00:04:43,410 [Seifer] Wow. >>[Pettit] It's just really easy to put together. 80 00:04:43,410 --> 00:04:48,240 I think bosses everywhere are going to love this because it's got widgets, 81 00:04:48,240 --> 00:04:51,740 it's got dashboards, it's got-- >>It's got everything. 82 00:04:51,740 --> 00:04:54,540 It's got APIs and it's got drag and drop. 83 00:04:54,540 --> 00:04:57,500 It's really got all the buzzwords going for it, 84 00:04:57,500 --> 00:05:00,900 and that's really a win-win-win. 85 00:05:00,900 --> 00:05:05,650 From what I understand, it's also pretty easy to pipe your own information in there. >>Exactly. 86 00:05:05,650 --> 00:05:08,520 You can just, like I said, plug in those data sources 87 00:05:08,520 --> 00:05:12,080 and go ahead and put together dashboards really quickly. 88 00:05:12,080 --> 00:05:15,580 I feel like a bow tie is a mustache for your suit. 89 00:05:15,580 --> 00:05:17,920 That's an interesting point of view, Jason. 90 00:05:17,920 --> 00:05:21,730 Let that one marinate while we go to the app of the week. >>I'm going to think about that. 91 00:05:21,730 --> 00:05:25,480 [electronic whirring] [??] 92 00:05:25,480 --> 00:05:27,370 [App Review] 93 00:05:27,370 --> 00:05:31,000 Our app review this week is an app called Alfred, 94 00:05:31,000 --> 00:05:34,200 which you can get at alfredapp.com. [http://www.alfredapp.com/] 95 00:05:34,200 --> 00:05:38,580 Alfred is an application that is completely ingrained to my way of life-- 96 00:05:38,580 --> 00:05:41,370 not even just how I work on the computer. 97 00:05:41,370 --> 00:05:45,990 You can tell it's awesome based solely on the icon, which is a top hat with a magnifying glass. 98 00:05:45,990 --> 00:05:47,920 What does Alfred do? 99 00:05:47,920 --> 00:05:53,670 It lets you assign a shortcut to Alfred, which brings up a really small search box 100 00:05:53,670 --> 00:05:55,290 in the middle of your screen. 101 00:05:55,290 --> 00:05:57,740 So if we can cut to my computer here, we'll show you what that is. 102 00:05:57,740 --> 00:06:00,910 Let's say you want to launch Safari. 103 00:06:00,910 --> 00:06:05,610 You can press the Alfred shortcut, which in my case is Command space, 104 00:06:05,610 --> 00:06:08,480 and then just start typing in the name of the application you want to launch. 105 00:06:08,480 --> 00:06:14,110 So Safari, press that, and then you can press Enter, and that would launch Safari. 106 00:06:14,110 --> 00:06:19,590 In addition to just launching applications, it also gives you access to contacts 107 00:06:19,590 --> 00:06:23,800 as well as files and things like that. 108 00:06:23,800 --> 00:06:27,570 The really nice part about Alfred is that you can have it do things for you 109 00:06:27,570 --> 00:06:30,310 based on these actions. 110 00:06:30,310 --> 00:06:32,900 So if you find a file, you can press another button 111 00:06:32,900 --> 00:06:37,790 and then with just one command launch that, email that, anything. 112 00:06:37,790 --> 00:06:41,220 There's kind of a lot of stuff that goes on in Alfred. 113 00:06:41,220 --> 00:06:44,330 I recommend that you download the trial and give it a chance, 114 00:06:44,330 --> 00:06:46,680 really read the documentation and see what's going on there. 115 00:06:46,680 --> 00:06:48,350 Completely invaluable. 116 00:06:48,350 --> 00:06:53,960 So it's like a more advanced version of the Spotlight functionality in Mac OS X. 117 00:06:53,960 --> 00:06:55,870 Yeah. It's like Spotlight on steroids. 118 00:06:55,870 --> 00:06:59,990 It sounds like you're more reliant on Alfred than Batman. 119 00:07:01,390 --> 00:07:03,070 Touche. >>All right. Moving on. 120 00:07:03,070 --> 00:07:07,280 Next up is relogo. [http://relogo.org] 121 00:07:07,280 --> 00:07:13,030 This is basically a new type of relative link that you can put in the top of your website 122 00:07:13,030 --> 00:07:16,020 in the head section. 123 00:07:16,020 --> 00:07:23,230 You drop in rel="logo" and you drop in an SVG version of your logo 124 00:07:23,230 --> 00:07:28,520 and then people can go ahead and find the SVG version of your logo 125 00:07:28,520 --> 00:07:32,040 rather than, say, going to Google Image Search, 126 00:07:32,040 --> 00:07:37,190 typing in logo for such and such thing or company, 127 00:07:37,190 --> 00:07:43,350 and then taking the terrible GIF version that's in the footer or something like that. 128 00:07:43,350 --> 00:07:45,980 I find that that's very common. 129 00:07:45,980 --> 00:07:50,320 When people are putting together marketing materials, they'll just Google for the logo 130 00:07:50,320 --> 00:07:56,470 and they'll get the terrible version of it rather than going to, say, the press or media page 131 00:07:56,470 --> 00:07:59,600 and getting the high quality version of that image. 132 00:07:59,600 --> 00:08:03,770 So this is a great way to just kind of consolidate all that 133 00:08:03,770 --> 00:08:09,360 and provide people with the latest and greatest high quality version of your logo. 134 00:08:09,360 --> 00:08:15,730 And it's in vector format, so it will be good for any size of media. 135 00:08:15,730 --> 00:08:19,540 I think it's worth nothing this is a proposed standard. >>Yes. 136 00:08:19,540 --> 00:08:23,190 So some very smart designers said, "Hey, this is happening a lot." 137 00:08:23,190 --> 00:08:25,800 "Maybe we should make this a standard." 138 00:08:25,800 --> 00:08:28,790 So you could start including it in your website. 139 00:08:28,790 --> 00:08:31,110 It's not really going to do anything yet, 140 00:08:31,110 --> 00:08:34,380 but by including it, you're basically casting your vote, saying, 141 00:08:34,380 --> 00:08:40,210 "Yes, I think this is a good idea and, yes, there should be some sort of mechanism 142 00:08:40,210 --> 00:08:42,380 "to go ahead and support this." 143 00:08:42,380 --> 00:08:45,750 Say, for example, Google might start supporting this standard 144 00:08:45,750 --> 00:08:48,650 in their Google Image Search and you can say, 145 00:08:48,650 --> 00:08:51,630 "I am searching for logos." 146 00:08:51,630 --> 00:08:53,630 It will go ahead and bring up all of these. 147 00:08:53,630 --> 00:08:56,440 There's other ways that this could be supported, 148 00:08:56,440 --> 00:09:00,490 but if you start including it now and everybody starts doing it, 149 00:09:00,490 --> 00:09:04,610 it can be a thing that is useful to everybody. >>That's pretty awesome. 150 00:09:04,610 --> 00:09:07,630 Yeah. >>Next up we have something called jq. [http://stedolan.github.com/jq/] 151 00:09:07,630 --> 00:09:14,740 This is, as it says on the website, a lightweight and flexible command-line JSON parser. 152 00:09:14,740 --> 00:09:19,630 We've talked about command-line JSON parsers and processors on the show before. 153 00:09:19,630 --> 00:09:26,010 This goes that extra mile where instead of just getting JSON from an external website, 154 00:09:26,010 --> 00:09:32,200 this actually lets you process and parse it and output it into a different format. 155 00:09:32,200 --> 00:09:37,360 So this is going to be really, really useful where you're trying to massage different data streams 156 00:09:37,360 --> 00:09:39,670 and maybe change something around. 157 00:09:39,670 --> 00:09:44,900 Say you get a JSON list of users and your application calls them people. 158 00:09:44,900 --> 00:09:48,360 You would use something like jq to redo that format. 159 00:09:48,360 --> 00:09:51,850 Really interesting, really technical application. 160 00:09:51,850 --> 00:09:55,170 It's written in C and it's kind of cross-platform. 161 00:09:55,170 --> 00:09:59,360 You should be able to upload it to any server very easily and have it just work. 162 00:09:59,360 --> 00:10:07,060 We'll have a link to that in the show notes, but you can get it at stedolan.github.com/jq. 163 00:10:07,060 --> 00:10:08,640 Very cool stuff. 164 00:10:08,640 --> 00:10:11,430 Next up is Gridlover. [http://www.gridlover.net/] 165 00:10:11,430 --> 00:10:15,260 If you love grids, then you're going to love this because it's called Gridlover. >>Don't we all? 166 00:10:15,260 --> 00:10:20,020 I have a bumper sticker that says "I 'heart' grids." >>That's a complete lie. 167 00:10:20,020 --> 00:10:22,410 The heart means love. [Pettit chuckles] 168 00:10:22,410 --> 00:10:27,610 Gridlover is the tool to establish a type system with modular scale 169 00:10:27,610 --> 00:10:29,620 and vertical rhythm to build upon. 170 00:10:29,620 --> 00:10:32,920 Go ahead and Launch Gridlover right here. Let's do it. 171 00:10:32,920 --> 00:10:40,030 When you click on this, you can get these little sliders up at the top of the page. 172 00:10:40,030 --> 00:10:44,780 You can adjust things like the body font size, the line height, 173 00:10:44,780 --> 00:10:50,270 or the scale factor of the fonts, 174 00:10:50,270 --> 00:10:54,030 and then you can go ahead and grab the CSS for this. 175 00:10:54,030 --> 00:10:58,830 That's pretty handy if you're just trying to quickly visually experiment 176 00:10:58,830 --> 00:11:01,480 with different typographic settings 177 00:11:01,480 --> 00:11:04,590 because sometimes when you're just doing this all in CSS 178 00:11:04,590 --> 00:11:10,460 or you're doing this with a CSS framework, it can be difficult to quickly experiment with this 179 00:11:10,460 --> 00:11:13,340 because you're constantly changing values in your text editor 180 00:11:13,340 --> 00:11:16,260 then going back to the browser and hitting Refresh 181 00:11:16,260 --> 00:11:19,820 and wondering if that was a good change or not. 182 00:11:19,820 --> 00:11:23,440 This way, with this tool, you can go ahead and just use these sliders 183 00:11:23,440 --> 00:11:30,230 in sort of a WYSIWYG interface, if you will, and see the results immediately. 184 00:11:30,230 --> 00:11:35,410 I think it's really a pretty cool tool for designers to go ahead and do typesettings. 185 00:11:35,410 --> 00:11:39,290 I don't know if you should limit that to just designers or everybody that loves grids. 186 00:11:39,290 --> 00:11:45,440 I think everyone loves grids, so it's probably for everybody. 187 00:11:45,440 --> 00:11:50,590 [chuckles] Next up we have a framework called Bonsai. [http://bonsaijs.org/] 188 00:11:50,590 --> 00:11:55,890 This is a JavaScript library and graphics API with an SVG renderer 189 00:11:55,890 --> 00:12:01,100 that lets you make cool shapes and animate them--or not animate them if you don't want to. 190 00:12:01,100 --> 00:12:02,570 [Pettit] That's amazing. 191 00:12:02,570 --> 00:12:05,930 [Seifer] They have some really fun examples on the screen right there. You see that? 192 00:12:05,930 --> 00:12:08,890 Look at all these circles. You want circles on your website flying out at you? 193 00:12:08,890 --> 00:12:11,470 [Pettit] Boom, you've got them. >>[Seifer] Yeah. Use Bonsai.js. 194 00:12:11,470 --> 00:12:15,300 You want to play Pong on your website? Boom, use Bonsai.js. 195 00:12:15,300 --> 00:12:19,780 Pretty easy and pretty intuitive graphics library to use. 196 00:12:19,780 --> 00:12:22,080 So that's about all I have to say for Bonsai. 197 00:12:22,080 --> 00:12:24,290 It's a pretty interesting graphics library. 198 00:12:24,290 --> 00:12:26,880 With retina displays taking over the world, 199 00:12:26,880 --> 00:12:30,080 it's really great to see the development of SVG tools like this 200 00:12:30,080 --> 00:12:34,770 because I think more and more people are going to want to include vector graphics 201 00:12:34,770 --> 00:12:40,200 in their website to respond to all sorts of different displays, 202 00:12:40,200 --> 00:12:43,350 regardless of how many pixels they have. >>Right. 203 00:12:43,350 --> 00:12:48,340 So I'm glad to see that there's tools like this coming out. It's really cool. >>Definitely. 204 00:12:48,340 --> 00:12:49,820 That's it for this week. 205 00:12:49,820 --> 00:12:53,560 If you want to follow us on Twitter, I'm @nickrp... >>and I am @jseifer. 206 00:12:53,560 --> 00:12:56,630 If you want more information on anything that we talked about, 207 00:12:56,630 --> 00:12:59,010 you can check out the show notes on our YouTube channel 208 00:12:59,010 --> 00:13:01,890 at YouTube.com/gotreehouse. 209 00:13:01,890 --> 00:13:05,640 And of course if you'd like to see more videos like this one about web design, 210 00:13:05,640 --> 00:13:08,620 web development, business, iOS, or Android, 211 00:13:08,620 --> 00:13:11,100 you can check us out at TeamTreehouse.com. 212 00:13:11,100 --> 00:13:14,510 That's it for this week. See you soon. 213 00:13:14,510 --> 00:13:17,430 [beeping sound] [The Treehouse Show]