Episode 17: Bootstrap, relogo, and Alfred

[whirring sound] 0:00 I'm Nick Pettit... >>and I'm Jason Seifer... >>and you're watching The Treehouse Show, 0:01 your weekly dose of internets where we talk about all things web design, 0:05 web development, and more. 0:07 In this episode we'll be talking about Twitter Bootstrap, relogo, 0:09 and our app review is Alfred. 0:13 Let's get into it. 0:15 [beeping sound] 0:18 [The Treehouse Show] 0:21 First up is Twitter Bootstrap, which is now in version 2.2.0. [http://goo.gl/9pfCq] 0:23 Oh, wow! >>Ooh! [both chuckle] 0:29 If you go over to the Get Bootstrap blog, you can check out the release notes. 0:32 I really like this trend of including a tl;dr. 0:38 They say that there are 4 new example templates. 0:41 They added media component, new typographic scale, 0:44 fixed that box-shadow mixin bug thingy, and they fixed some z-index issues. 0:48 Let's just go ahead and look at the first couple highlights here. 0:54 They added 4 new templates to the docs, including a narrow marketing page, 0:58 a sign-in form, a sticky footer, and a fancy carousel, 1:03 which is great because I hate those unfancy carousels. 1:07 Basically, that's just really nice if you're trying to create some of those things 1:10 such as a sticky footer, 1:14 because when you're trying to make some of those things, 1:17 it's sometimes a little tricky to figure out exactly how to do them. 1:19 So it's nice that they have an example of how to do them in Twitter Bootstrap. 1:23 The other thing that I really like as a designer 1:28 is that they have this new variable-driven typographic scale based on baseFontSize 1:30 and baseLineHeight. 1:36 [Seifer] As a developer, I have no clue how those things relate to each other. 1:39 Basically, if you're coding along and you're styling, 1:42 you can go ahead and set something based on the baseFontSize or the baseLineHeight, 1:46 which means the first time you set it or something like that. 1:52 I know what I'm talking about. 1:58 So instead of using Twitter's defaults, you can change them to your own 1:59 and have that work in your own documents? >>Exactly. >>Very nice. 2:02 One thing that I kind of like about it, 2:06 do you remember how we talked about Bower a couple episodes ago? >>I do. 2:08 If you don't remember that, check out our YouTube channel 2:12 at YouTube.com/gotreehouse. 2:14 Bower is a package management system for your website, 2:16 and they've included support for Twitter Bootstrap into Bower, so that's cool. 2:21 Very cool stuff. >>Also of note is that jQuery and plugins were updated to 1.8.1. 2:26 Next up, keeping along the whole Bootstrap theme, is something called Bootbox.js. 2:32 [http://bootboxjs.com] I know, I know, it's very close to beatbox, 2:38 but we're not going to beatbox on this show. >>Thank goodness. 2:41 Yeah. Our superiors denied that request. [both chuckle] 2:43 This takes the whole idea of Bootstrap's modals and alerts 2:47 and lets you do alert, confirm, and have dialogs on them. 2:51 So what does that mean? 2:55 If you click Run example here on the site, this is just kind of a default alert box. 2:57 You see it says Hello world! but it has an OK button. 3:03 In regular Twitter Bootstrap, you can click out of there 3:06 and the modal will dismiss, so you actually have the option to specify 3:11 that no, you can't just dismiss this, you have to hit OK. 3:15 There's the same thing for confirms and prompting things, 3:19 and there is also a ton of different options that you have on the site. 3:24 You can put dynamic content in there. 3:28 They have an example that changes with jQuery. 3:32 Yeah, just a ton of different stuff. 3:35 This is Bootbox.js. 3:37 That's a really nice addition to Twitter Bootstrap 3:39 because while those modal windows are sometimes annoying, 3:41 they're also sometimes very necessary. 3:46 And when you do want to display them, a lot of times you don't want people 3:48 to be able to just click out of them and dismiss them. 3:51 It really is a point where-- >>It's my website, not yours. 3:54 That's right, and you have to show them who's boss. >>Exactly. 3:57 It's really a point where the user has to make a decision about one thing or another 4:00 before they can continue using apps. 4:04 So it's nice that they allow that functionality. >>Definitely. 4:06 Pretty cool. >>It's very dashing. >>It is. 4:10 Next up is Dashing. [http://shopify,github.com/dashing/] 4:13 If you go to their website, you can see that it's an exceptionally handsome 4:15 dashboard framework, and you can tell that because there's a little bow tie right here 4:19 on the website. >>[Seifer] That is dashing. >>[Pettit] That is. 4:23 Basically, it's a dashboard framework, just like it says. 4:26 You can go ahead and plug in your data sources 4:30 and put together a drag and drop interface of a bunch of different dashboard widgets. 4:33 [Seifer] Wow. >>[Pettit] It's just really easy to put together. 4:39 I think bosses everywhere are going to love this because it's got widgets, 4:43 it's got dashboards, it's got-- >>It's got everything. 4:48 It's got APIs and it's got drag and drop. 4:51 It's really got all the buzzwords going for it, 4:54 and that's really a win-win-win. 4:57 From what I understand, it's also pretty easy to pipe your own information in there. >>Exactly. 5:00 You can just, like I said, plug in those data sources 5:05 and go ahead and put together dashboards really quickly. 5:08 I feel like a bow tie is a mustache for your suit. 5:12 That's an interesting point of view, Jason. 5:15 Let that one marinate while we go to the app of the week. >>I'm going to think about that. 5:17 [electronic whirring] [??] 5:21 [App Review] 5:25 Our app review this week is an app called Alfred, 5:27 which you can get at alfredapp.com. [http://www.alfredapp.com/] 5:31 Alfred is an application that is completely ingrained to my way of life-- 5:34 not even just how I work on the computer. 5:38 You can tell it's awesome based solely on the icon, which is a top hat with a magnifying glass. 5:41 What does Alfred do? 5:45 It lets you assign a shortcut to Alfred, which brings up a really small search box 5:47 in the middle of your screen. 5:53 So if we can cut to my computer here, we'll show you what that is. 5:55 Let's say you want to launch Safari. 5:57 You can press the Alfred shortcut, which in my case is Command space, 6:00 and then just start typing in the name of the application you want to launch. 6:05 So Safari, press that, and then you can press Enter, and that would launch Safari. 6:08 In addition to just launching applications, it also gives you access to contacts 6:14 as well as files and things like that. 6:19 The really nice part about Alfred is that you can have it do things for you 6:23 based on these actions. 6:27 So if you find a file, you can press another button 6:30 and then with just one command launch that, email that, anything. 6:32 There's kind of a lot of stuff that goes on in Alfred. 6:37 I recommend that you download the trial and give it a chance, 6:41 really read the documentation and see what's going on there. 6:44 Completely invaluable. 6:46 So it's like a more advanced version of the Spotlight functionality in Mac OS X. 6:48 Yeah. It's like Spotlight on steroids. 6:53 It sounds like you're more reliant on Alfred than Batman. 6:55 Touche. >>All right. Moving on. 7:01 Next up is relogo. [http://relogo.org] 7:03 This is basically a new type of relative link that you can put in the top of your website 7:07 in the head section. 7:13 You drop in rel="logo" and you drop in an SVG version of your logo 7:16 and then people can go ahead and find the SVG version of your logo 7:23 rather than, say, going to Google Image Search, 7:28 typing in logo for such and such thing or company, 7:32 and then taking the terrible GIF version that's in the footer or something like that. 7:37 I find that that's very common. 7:43 When people are putting together marketing materials, they'll just Google for the logo 7:45 and they'll get the terrible version of it rather than going to, say, the press or media page 7:50 and getting the high quality version of that image. 7:56 So this is a great way to just kind of consolidate all that 7:59 and provide people with the latest and greatest high quality version of your logo. 8:03 And it's in vector format, so it will be good for any size of media. 8:09 I think it's worth nothing this is a proposed standard. >>Yes. 8:15 So some very smart designers said, "Hey, this is happening a lot." 8:19 "Maybe we should make this a standard." 8:23 So you could start including it in your website. 8:25 It's not really going to do anything yet, 8:28 but by including it, you're basically casting your vote, saying, 8:31 "Yes, I think this is a good idea and, yes, there should be some sort of mechanism 8:34 "to go ahead and support this." 8:40 Say, for example, Google might start supporting this standard 8:42 in their Google Image Search and you can say, 8:45 "I am searching for logos." 8:48 It will go ahead and bring up all of these. 8:51 There's other ways that this could be supported, 8:53 but if you start including it now and everybody starts doing it, 8:56 it can be a thing that is useful to everybody. >>That's pretty awesome. 9:00 Yeah. >>Next up we have something called jq. [http://stedolan.github.com/jq/] 9:04 This is, as it says on the website, a lightweight and flexible command-line JSON parser. 9:07 We've talked about command-line JSON parsers and processors on the show before. 9:14 This goes that extra mile where instead of just getting JSON from an external website, 9:19 this actually lets you process and parse it and output it into a different format. 9:26 So this is going to be really, really useful where you're trying to massage different data streams 9:32 and maybe change something around. 9:37 Say you get a JSON list of users and your application calls them people. 9:39 You would use something like jq to redo that format. 9:44 Really interesting, really technical application. 9:48 It's written in C and it's kind of cross-platform. 9:51 You should be able to upload it to any server very easily and have it just work. 9:55 We'll have a link to that in the show notes, but you can get it at stedolan.github.com/jq. 9:59 Very cool stuff. 10:07 Next up is Gridlover. [http://www.gridlover.net/] 10:08 If you love grids, then you're going to love this because it's called Gridlover. >>Don't we all? 10:11 I have a bumper sticker that says "I 'heart' grids." >>That's a complete lie. 10:15 The heart means love. [Pettit chuckles] 10:20 Gridlover is the tool to establish a type system with modular scale 10:22 and vertical rhythm to build upon. 10:27 Go ahead and Launch Gridlover right here. Let's do it. 10:29 When you click on this, you can get these little sliders up at the top of the page. 10:32 You can adjust things like the body font size, the line height, 10:40 or the scale factor of the fonts, 10:44 and then you can go ahead and grab the CSS for this. 10:50 That's pretty handy if you're just trying to quickly visually experiment 10:54 with different typographic settings 10:58 because sometimes when you're just doing this all in CSS 11:01 or you're doing this with a CSS framework, it can be difficult to quickly experiment with this 11:04 because you're constantly changing values in your text editor 11:10 then going back to the browser and hitting Refresh 11:13 and wondering if that was a good change or not. 11:16 This way, with this tool, you can go ahead and just use these sliders 11:19 in sort of a WYSIWYG interface, if you will, and see the results immediately. 11:23 I think it's really a pretty cool tool for designers to go ahead and do typesettings. 11:30 I don't know if you should limit that to just designers or everybody that loves grids. 11:35 I think everyone loves grids, so it's probably for everybody. 11:39 [chuckles] Next up we have a framework called Bonsai. [http://bonsaijs.org/] 11:45 This is a JavaScript library and graphics API with an SVG renderer 11:50 that lets you make cool shapes and animate them--or not animate them if you don't want to. 11:55 [Pettit] That's amazing. 12:01 [Seifer] They have some really fun examples on the screen right there. You see that? 12:02 Look at all these circles. You want circles on your website flying out at you? 12:05 [Pettit] Boom, you've got them. >>[Seifer] Yeah. Use Bonsai.js. 12:08 You want to play Pong on your website? Boom, use Bonsai.js. 12:11 Pretty easy and pretty intuitive graphics library to use. 12:15 So that's about all I have to say for Bonsai. 12:19 It's a pretty interesting graphics library. 12:22 With retina displays taking over the world, 12:24 it's really great to see the development of SVG tools like this 12:26 because I think more and more people are going to want to include vector graphics 12:30 in their website to respond to all sorts of different displays, 12:34 regardless of how many pixels they have. >>Right. 12:40 So I'm glad to see that there's tools like this coming out. It's really cool. >>Definitely. 12:43 That's it for this week. 12:48 If you want to follow us on Twitter, I'm @nickrp... >>and I am @jseifer. 12:49 If you want more information on anything that we talked about, 12:53 you can check out the show notes on our YouTube channel 12:56 at YouTube.com/gotreehouse. 12:59 And of course if you'd like to see more videos like this one about web design, 13:01 web development, business, iOS, or Android, 13:05 you can check us out at TeamTreehouse.com. 13:08 That's it for this week. See you soon. 13:11 [beeping sound] [The Treehouse Show] 13:14

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

Sign up