writes on November 20, 2012

Share with your friends


In this episode of The Treehouse Show, Nick Pettit (@nickrp) and Jason Seifer (@jseifer) talk about Twitter Bootstrap, relogo, Alfred, and more.

Here are the links for the week:

Bootstrap 2.2.0








Video Transcript

Nick Nick: Hi, I’m Nick Pettit.

Jason Jason: And I’m Jason Seifer.

Nick: And you’re watching the Treehouse show, your weekly dose of internets
where we talk about all things web design, web development and

Jason: In this episode we’ll be talking about Twitter Bootstrap,
Relogo and our app review is Alfred.

Nick: Let’s get into it. First up is Twitter Bootstrap which is now in
version 2.2.0.

Jason: Oh, wow.

Nick: If you go over to the Get Bootstrapped blog you can check out the
release notes. I really like this trend of including a TLDR.
They say there that are four new examples templates; they added
media component, new typographic scale, fix that box shadow, mix
in bug thingy and they fixed some Z index issues. Let’s go ahead
and look at the first couple highlights here. They added four
new templates to the doc including a narrow marketing page, a
sign in form, a sticky footer and a fancy carousel which is
great because I hate those un-fancy carousels. Basically that’s
just really nice if you’re trying to create some of those things
such as a sticky footer because when you’re trying to make some
of things it’s sometimes a little tricky to figure out exactly
how to do them. It’s nice that they have an example of how to do
them in Twitter Bootstrap. The other thing that I really like as
a designer is that they have this new variable driven
typographic scale based on base font size and base line height.

Jason: As a dev eloper I have no clue how those things relate to each

Nick: Basically if you’re coding along in your styling you can set
something based on the base font size or the base line height
which means the first time you set it. Or something like that. I
know what I’m talking about.

Jason: So instead of using Twitter’s defaults you can change them to
your own and have that work in your own document?

Nick: Exactly.

Jason: Very nice. One thing that I kind of like about it you remember
how we talked about Bower a couple episodes ago? If you don’t
remember that check out our YouTube channel at Bower is a package management system
for your website and they’ve included support for Twitter
Bootstrap into Bower so that’s cool. Also of note is that jQuery
and plug-ins were updated to 1.8.1. Next keeping along the whole
bootstrap is something called Bootbox dot js. I know it’s very
close to beatbox but we’re not going to beatbox on this show.
Our superiors denied that request. This takes the whole idea of
bootstraps modals and alerts and lets you do alert, confirm and
let’s you have dialogues on them. What does that mean? If you
click ‘run the example’ here on the site this is just a default
alert box. You see it says ‘hallo world’ but it has an OK
button. In regular Twitter bootstrap you can click out of there
and the modal will dismiss so you have the option to specify
that no, you can’t dismiss this. You have to hit OK. There’s the
same thing for confirms and prompting things. There are also a
ton of different options that you have on the site. You can put
dynamic content in there; they have an example, “Changes with
jQuery” yes and a ton of different stuff. This is Bootbox.js.

Nick: That’s a really nice addition to Twitter Bootstrap because while
those modal windows are sometimes annoying they’re also
sometimes very necessary and when you do want to display them a
lot of times you don’t want people to be able to click out of
them and dismiss them. It really is a point where…

Jason: It’s my website. Not yours.

Nick: That’s right. And you have to show them who’s boss. It’s really a
point where the user has to make a decision about one thing or
another before they can continue using the app so it’s nice that
they allow that functionality.

Jason: It’s very dashing.

Nick: It is. Next up is Dashing. If you go to their website you can see
that it’s an exceptionally handsome dashboard framework and you
can tell that because there’s a little bowtie right here on
their website. Basically it’s a dashboard framework, just like
it says. You can go ahead and plug in your data sources and put
together a drag and drop interface of a bunch of different
dashboard widgets. It’s really easy to put together. I think
bosses everywhere are going to love this; it’s got widgets, it’s
got dashboards, it’s got APIs and it’s got drag and drop. It’s
really got all the buzz words going for it. That’s really a win-

Jason: From what I understand it’s also pretty easy to pipe your own
information in there.

Nick: Exactly. Like I said, you can plug in those data sources and put
together dashboards really quickly.

Jason: I feel like a bowtie is a moustache for your suit.

Nick: That’s an interesting point of view, Jason.

Jason: Let that marinate while we go to the app of the week. Our app
review this week is an app called Alfred which you can get at
AlfredApp dot com. Alfred is an application that is completely
ingrained to my way of life; not even just how I work on the
computer. You can tell it’s awesome based solely on the icon
which is a top hat with a magnifying glass. What does Alfred do?
It lets you assign a shortcut to Alfred which brings up a really
small search box in the middle of your screen. If we can cut to
my computer here we’ll show you what that is. Let’s say you want
to launch Safari. You can press the Alfred shortcut, which in my
case is ‘command space’, and then just start typing in the name
of the application you want to launch. ‘Safari’, press that and
press ‘enter’ and that would launch Safari. In addition to just
launching applications it also gives you access to contacts as
well as files and things like that. The really nice part about
Alfred is you can have it do things for you based on these
actions. If you find a file you can press another button and
then with just one command you can launch that, email that,
anything. There’s a lot of stuff that goes on in Allred. I
recommend that you download the trial and give it a chance;
really read the documentation and see what’s going on there.
Completely invaluable.

Nick: It’s like a more advanced version of the Spotlight functionality in
Mac OS 10?

Jason: It’s like Spotlight on steroids.

Nick: It sounds like you’re more reliant on Alfred than Batman. Moving on,
next up is Relogo. This is basically a new type of relative link
that you can put in the top of your website in the head section.
You drop in Relogo, you drop in an SVG version of your logo and
then people can go ahead and find the SVG version of your logo
rather than going to Google image search, typing in logo for
such and such thing or company and then taking the terrible gif
version that’s in the footer or something like that. I find that
that’s very common when people are putting together marketing
materials; they’ll just Google for the logo and they’ll get a
terrible version of it rather than going to the press or media
page and getting the high quality version of that image. This is
a great way to just consolidate all that and provide people with
the latest and greatest high quality version of your logo. It’s
in vector format so it’ll be good for any size media.

Jason: I think it’s worth noting this is a proposed standard. Some
very smart designers said, ‘This is happening a lot. Maybe we
should make this a standard.’

Nick: You could start including it in your website. It’s not really going
to do anything yet but by including it you’re basically casting
your vote saying, ‘Yes. I think this is a good idea and yes,
there should be some sort of mechanism to support this.’ For
example, Google might go ahead and start supporting this
standard in their Google image search and you can go ahead and
say, ‘I am searching for logos’ and it will bring up all of
these. So there are other ways that this could be supported but
if you start including it now and everybody starts doing it it
can be a thing that is useful to everybody.

Jason: Next up we have something called jq. This is, at it says on
the website, a lightweight and flexible command line JSON
parser. We’ve talked about command line JSON parsers and
processors on the show before; this goes that extra mile.
Instead of just getting JSON from an external website this
actually lets you process and parse it and output it into a
different format. This is going to be really, really useful when
you’re trying to massage different data streams and maybe change
something around. You get a JSON list of users and your
application calls them ‘people’. You would use something like jq
to redo that format. Really interesting, really technical
application. It’s written in C and it’s kind of cross platform;
you should be able to upload it to any server very easily and
have it just work. We’ll have a link to that in the show notes
but you can get it at stedolan dot github dot com slash jq.

Nick: Very cool stuff. Next up is Gridlover and if you love grids you’re
going to love this.

Jason: I have a bumper sticker that says ‘I heart grids’.

Nick: That’s a complete lie.

Jason: The heart means love.

Nick: Gridlover is the tool to establish a type system with modular scale
and vertical rhythm to build upon. Go ahead and launch Gridlover
right here. Let’s do it. When you click on this you can get
these little sliders up at the top of the page. You can adjust
things like the body font size, align height or the scale factor
of the fonts. Then you can grab the CSS for this and that’s
pretty handy if you’re trying to quickly visually experiment
with different typographic settings. Sometimes when you’re just
doing this all on CSS or CSS framework it can be difficult to
quickly experiment with this because you’re constantly changing
values in your text editor, then going back to the browser and
hitting ‘refresh’ and wondering if that was a good change or
not. With this tool you can go ahead and just use these sliders
in a wissy wig interface, if you will, and see the results
immediately. I think it’s really a pretty cool tool for
designers to do type settings.

Jason: I don’t know if you should limit that to just designers or
everybody that loves grids.

Nick: I think everyone loves grids so it’s probably for everybody.

Jason: Next up we have a framework called Bonsai. This is a JavaScript
library and graphics API with an SVG renderer that lets you make
cool shapes and animate them or not animate them if you don’t
want to. They have some really fun examples on the screen right
there. Look at all these circles. You want circles on your
website flying out at you? Boom. You’ve got them. Use Bonsai
dot js. You want to play Pong on your website? Boom. Use Bonsai
dot js. Pretty easy and pretty intuitive graphics library to
use. That’s about all I have to say for Bonsai; it’s a pretty
interesting graphics library.

Nick: With retina displays it’s really great to see the development of SVG
tools like this because I think more and more people are going
to want to include vector graphics on their website to respond
to all sorts of different displays regardless of how many pixels
they have. I’m glad to see that there are tools like this coming
out. It’s really cool.

Jason: Definitely.

Nick: That’s it for this week. If you want to follow us on Twitter I’m at

Jason: And I am at JSeifer. If you want more information on anything
that we talked about you can check out the show notes on our
YouTube channel at YouTube dot com slash Go Treehouse.

Nick: Of course, if you’d like to see more videos like this one about web
design, web development, business, IOS or Android you can check
us out at TeamTreehouse dot com. That’s it for this week. See
you soon.

Leave a Reply