Twitter Bootstrap and Javascript for Cats – Treehouse Show Ep. 6

In this episode The Treehouse Show, Nick Pettit and Jason Seifer talk about the latest in Bootstrap, the web framework from Twitter. They also discuss JavaScript gauges, JavaScript for cats, and more.

Here are the links mentioned in this week’s episode:

Safari, Chrome Ship Proposed High-Resolution Image Solution

http://www.webmonkey.com/2012/08/safari-chrome-now-support-high-resolution-im…

Bootstrap 2.1.0 Released

http://blog.getbootstrap.com/2012/08/20/bootstrap-2-1-0-released/

Date Picker for Bootstrap

http://www.dangrossman.info/2012/08/20/a-date-range-picker-for-twitter-bootst…

JS Reload

http://www.2ality.com/2012/08/jsreload.html

BigVideo.js

http://dfcb.github.com/BigVideo.js/

JavaScript for Cats

http://jsforcats.com/

Underscores

http://underscores.me/

cdnjs

http://cdnjs.com/

JustGage

http://justgage.com/

Video Transcription

Nick: Hi. Nick Pettit.

Jason: I’m Jason Seifer

Nick: And you’re watching the Treehouse Show, your weekly dose of Internets
where we talk about things web design, web development and more.

Jason: In this episode, we’ll be going over a new proposed solution for
web browsers, for high-resolution images, new versions of Twitter boot
strap and the usual roundup of interesting JavaScript plugins.

So let’s go ahead and get started.

Nick: Believe it or not the W3C is actually working on CSS for…

Jason: I don’t believe it.

Nick: You should believe because it’s happening. Basically there’s been a
lot of high-resolution devices coming out from Apple, namely. There’s the
iPad.

Jason: iPhone.

Nick: iPhone and now the new Retina display MacBook Pros and of course,
there’s a lot of other device manufacturers coming out with high-resolution
devices. And the W3C decided that the best way to deal with this would be
with CSS. And fortunately Safari and Chrome are now shipping this new
proposed high-resolution image solution.

It’s available in Safari 6 and Chrome 21 in the form of the image set value
that you apply to background images so basically you have a low resolution
image or a normal resolution image and then you have your hi-res version
and you have an additional value where you can kind of specify what
resolution each one of those images is at.

Jason: This seems to be like a little bit better of a solution to me than
the JavaScript plugins that you’ve been talking about. I think it’s really
cool that they’ll have it right in CSS rather than the kind of hacky stuff
that we’ve been having to do with JavaScript. Not to demean those plugins
at all because they’re wonderful.

Nick: Yes, I know, I totally agree. I mean, going in and trying to detect
with JavaScripts seems a little bit messy and it’s nice to have a native
built-in solution.

Jason: Although we are probably going to have to deal with detection for a
long time.

Nick: For a little bit.

Jason: Next stop, we’ve talked about Twitter Bootstrap on the show and
Version 2.1.0 has just been released. New in this version of Twitter
Bootstrap is new documentations, something called the affix plugin, which
is going to literally sidebar on your screen, stay with you as you scroll.
The submenus on drop downs, block buttons, new image styles, fluid grid
offsets, a new nav bar, and this is pretty big, increased font size and
line height.

So if you are interested in Bootstrap, or you currently have Bootstrap, go
ahead, check it out and upgrade.

Nick: Pretty cool stuff. Now speaking of Bootstrap, Dan Grossman has this
really cool date range picker that’s designed for, you guessed it, Twitter
Bootstrap. Basically, he’s working on Improvely and he needed this date
range picker so he went ahead and created one. We have reservation dates
here as one example where we can go ahead and select a start date and an
end date and it will apply them in real time. That’s pretty cool.

And then there’s also predefined ranges so you can pick things like today,
yesterday, the last 7 days and it will go ahead and update those in real
time. Now, this does require jQuery or relies on jQuery. That’s not really
a huge deal. I think lots of sites include jQuery these days.

Jason: Yes. Something like 80% of the top websites include jQuery. And
something like 90% of all the statistics I tell you are not true.

Next up, you know what I really hate, Nick, is pressing buttons when I’m
developing things, primarily reload button. Isn’t it such a drag to tap
that or press command [R]?

Nick: It is.

Jason: I have wonderful news for you. There is a new plugin kind of system
called Reload so this uses no .JS, Grunt, and it works on Safari. What it
does is it watches certain directories for you, you tell it what files to
watch and as soon as one of those files changes, you know CSS or
JavaScript, it goes through and reloads your web browser for you. Boom.
Done. You can get back to the important stuff like browsing the Internet.

Nick: Browsing Reddit, Facebook, etc. That’s really important. That’s cool.

Hey, I remember there being, you know, similar features on lots of other
frameworks and things and when you’re working with SAS you can go ahead and
tell it to watch the directory. Similar things like that but this seems
like a more generalized solution.

So when you’re developing HTML and CSS, it can go ahead and do that for
you.

Jason: It’s similar to a paid application called Library Load which does
the same thing SAS and CSS and that one’s actually pretty cool because if
you modify CSS files in Live Reload, you don’t even have to reload the
page. That’s why it’s called Live Reload.

Nick: Wow.

Jason: Fancy.

Nick: Aptly named.

Next up is BigVideo.js and this is really cool. Basically you can apply a
background image to your website that is a giant video. It requires jQuery,
jQuery UI and actually several other things like Video.js API in order for
it to work and in my opinion I think it’s more of a novelty than anything
else.

I don’t really see a legitimate use for this. I think it’s kind of, I don’t
know, I guess if you had a video that’s really, really subtle, maybe like a
galaxy with star background and had like…

Jason: Music video.

Nick: …little twinkling lights, probably not a music video.

Jason: No, this would be awesome on my MySpace page.

Nick: Yeah, Definitely.

Jason: Gigantic video of me in the background.

Nick: Yeah. I don’t see a legit use for this but none the less, it is
really, really cool.

Jason: Next up, I’m just going to move on from there since we disagree
pretty heavily on that.

There is an introduction for new programmers to JavaScript called
JavaScript for Cats. There’s not really much to say about this but it is a
wonderful, wonderful and free introduction to the JavaScript programming
languages and it uses Cats. So there’s literally nothing not to like about
this website.

Go ahead if you got somebody who’s interested in learning JavaScript or if
you want to learn JavaScript, take a look at JSforCats.com

Nick: Jason, I can’t think of anywhere else that I might go to learn
JavaScript.

Jason: Me neither.

Nick: Any other than TeamTreehouse.com

Jason: No, I don’t think that’s a thing.

Nick: I think TeamTreehouse.com is where you could learn JavaScript.

Jason: I’m pretty sure you just made that up.

Nick: Yes.

Next up is Underscores which is not a WordPress theme. It’s a starter team
or it’s a way to create themes for WordPress. So basically go to
Underscores.me and you go ahead and type in the name of your theme so I’ll
call mine maybe…

Jason: Call it Jason.

Nick: Treehouse theme…Okay, I’ll go ahead and call it Jason and then you
can go ahead and type in advanced options such as your [slug], the [author
URI] description, etc., and you hit Generate.

Now, this is not a WordPress theme. Like I said, it’s just a starter theme
but it has lots of well commented HTML 5 templates. It has a nice 404
template, and lots of other cool CSS to go ahead and just get you started
developing a WordPress theme.

Jason: That’s really great because it can be kind of tedious to start
developing your own WordPress theme, specially having to go and take a
theme and modify and get everything out of there that’s already
implemented.

Nick: Absolutely.

Jason: Next stop we have something called CDNJS.com. CDNJS is a CDN or
Content Delivery Network for hosting JavaScript libraries.

Google CDN and Microsoft CDN already host JavaScript libraries for you.
What this one does is hosts some of the less popular libraries for using
application. There is a huge list of things that have a decent amount of
followers and you’ll probably be using in your apps so if you are using a
CDN or if you’re not using a CDN right now, go ahead and check out
CDNJS.com. It’s really easy to just throw that piece of JavaScript in your
website and boom, done.

Boom, done.

Nick: Boom.

Jason: Boom.

Nick: Boom. Next up is JustGage @ JustGage.com. Gage is spelled G-A-G-E and
JustGage is basically a JavaScript plugin that allows you to create nice
animated, clean looking gages.

Now we’ve seen this before, Jason.

Jason: That’s true.

Nick: We’ve seen these gages appear elsewhere. We’ve covered them in the
past on the show.

Jason: Gages are pretty hot right now.

Nick: They are and we saw this new piece of JavaScript that allows you to
create gages and we started talking about what legitimate use is for gages
might be.

Jason: We couldn’t readily think of any but we did come up with maybe using
the login process to a website, start typing in your user name, gage starts
to spike up about 50%, type in password 75%. Sign-in.

Nick: Maybe as you’re scrolling down the page a gage can tell you how close
you are to the bottom.

Jason: Or how fast you’re scrolling.

Nick: That’s a good one. It’ll be like a scroll speed limit or speedometer.

Jason: Yes. You don’t want to scrolling speeding ticket.

Nick: I hate those. You could have the X and Y position of your mouse as
gages.

Jason: These are all legitimate uses.

Nick: That might be really nice.

Jason: Probably the best one that we thought up is the gage that starts at
100% when you sign up for a dating website and slowly goes down as you fill
out your profile and upload pictures.

Nick: Yeah. The more it learns about you…

Jason: The less it likes you.

Nick: …the less it likes you. Actually, there is a lot of legitimate uses
for gages. But I think they’re very specific use cases.

Jason: Yes. We’re being a little harsh.

Nick: A little bit. One particular that I really like is on the Google Web
Fonts directory, when you go to pick fonts and you click on Quick Use, they
have this really nice gage over on the right side that tells you how that
font might impact your page load time.

So it’s kind of nice. It’s kind of, I guess, a different way of presenting
quantitative of information like that.

Jason: yeah. Maybe download sizes as you assemble a custom JavaScript
library or framework.

Nick: Exactly.

Jason: Things like that.

Nick: So Jason, what did we learn today?

Jason: We learned that gages are awesome.

Nick: And I think that I learned you can’t do JavaScripts without cats.

Jason: Pretty useful information.

Nick: Definitely.

Jason: I think we all learned something here today.

Nick: That is it for this week’s episode. Please go ahead and follow us. I
am @nickrp at Twitter.

Jason: I’m @jseifer on Twitter.

Nick: Thanks so much for joining us and we will see you next week.

Treehouse

Our mission is to bring affordable Technology education to people everywhere, in order to help them achieve their dreams and change the world.

Comments

Comments are closed.