Here are the links mentioned in this week’s episode:
Safari, Chrome Ship Proposed High-Resolution Image Solution
Bootstrap 2.1.0 Released
Date Picker for Bootstrap
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
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
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
cool that they’ll have it right in CSS rather than the kind of hacky stuff
at all because they’re wonderful.
Nick: Yes, I know, I totally agree. I mean, going in and trying to detect
Jason: Although we are probably going to have to deal with detection for a
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
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
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
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: 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
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.
languages and it uses Cats. So there’s literally nothing not to like about
Nick: Jason, I can’t think of anywhere else that I might go to learn
Jason: Me neither.
Nick: Any other than TeamTreehouse.com
Jason: No, I don’t think that’s a thing.
Jason: I’m pretty sure you just made that up.
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
Jason: Next stop we have something called CDNJS.com. CDNJS is a CDN or
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
website and boom, done.
Nick: Boom. Next up is JustGage @ JustGage.com. Gage is spelled G-A-G-E and
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.
create gages and we started talking about what legitimate use is for gages
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
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.
library or framework.
Jason: Things like that.
Nick: So Jason, what did we learn today?
Jason: We learned that gages are awesome.
Jason: Pretty useful information.
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.