LearnBatch Icon Set, Bootstrap Goodies, JavaScript Shopping Cart | Treehouse Show Ep 20


writes on December 11, 2012

In this episode of The Treehouse Show, Jim Hoskins (@jimrhoskins) and Jason Seifer (@jseifer) talk about Bootstrap, Git Aliases, and Shopping Carts.

Here are the links for this week:


18 Useful Twitter Bootstrap Goodies You Should Know

Must Have Git Aliases: Advanced Examples






Video Transcript

Jim: I’m Jim Hoskins.

Jason: And I’m Jason Seifer.

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

Jason: In this episode we’ll be talking about Get-Aliases, shopping
carts, as well as offline Javascript. Nick Petit is out this
week due to injuries sustained by prolonged pokings on Facebook.

Jim: Jason?

Jason: Jim?

Jim: Do you like free things?

Jason: I love free things.

Jim: Do you like 300 free things?

Jason: I like 300 free things-

Jim: For the price-

Jason: 300 times more than I like one free thing.

Jim: Well, I’ve got something for you, Batch. Batch is a free icon set
that has some pretty awesome icons, and guess what, there’s 300
of them.

Jason: Wow.

Jim: So if you take a look, they are some pretty stylish icons and
actually what I really like about it is the variety. As you can
see there’s various speech bubbles that come with all
orientations of little pointy things. There are two separate
keys that are slightly different, little variations on
everything. I’ve never actually seen an icon set with two
different types of feather icon, for a pen and a fountain pen.

Jason: Well.

Jim: There’s a lot of different writing instruments there.

Jason: Well you never know what you’re going to need.

Jim: Yeah, well, what’s really great about them is they come pre-rendered
in PNG in various sizes, but they’re also distributed as
Photoshop layers as well as SPG, so they will scale well and
integrate into your Photoshop mock ups really nice. You can
apply layer styles to them, change the colors and export them
exactly how you want them to look.

Jason: Oh nice. So I guess I would use this in web apps or mobile
apps or something like that?

Jim: Yeah. It’s a really great set, pretty complete and you can probably
even sort of use some of the styles, if you need to, create your
own icons so that you can re-use some of the shapes if you
really need to get something that’s not in that massive pack of
300 different icons.

Jason: Oh, that’s pretty sweet. And free. Who doesn’t like free.

Jim: Love free.

Jason: I got 18 more free things for you Jim.

Jim: Okay.

Jason: The next post over on the Queness Blog is 18 Useful Twitter
Bootstrap Goodies that you should know. You might already know
about these, you might not, but it goes through and just kind of
concatenates a bunch of different resources for Twitter
Bootstrap. Twitter Bootstrap is the CSS framework that is just
slowly taking over the web. We talk about it-

Jim: Uh, slowly?

Jason: Okay, very quickly. We talk about it most weeks here on the
Treehouse Show. So they go through, they talk about tools for
wireframing and different generators and templates. They link
to one set of the famfamfam icon set. This is, not 300 free
icons, it’s, I think actually a little bit more, but there’s a
very small size and it works really well with the Twitter
Bootstrap buttons.
But there’s a ton of different resources out there for Bootstrap, just for
generating the different mark-up, different templates that you
need. There’s links to different buttons, to generate buttons
as well as a PSD for working with it in Photoshop.
There’s also about 14 more goodies that we’re not going to go over here on
the show, mainly due to time constraints and I don’t like saying
the word goodies repeatedly, but we’ll have a link to them in
our show notes which you can get at Youtube.com/gotreehouse.

Jim: It’s a lot of goodies.

Jason: It is.

Jim: And, you know, Bootstrap itself is pretty good too.

Jason: Yeah.

Jim: So goodies for goodies. Well, switching from design to a little bit
more development focused, we’ve got a great article here about
some of the must-have Get-Aliases. So if you ever use get on
the command line, you’ve got your built-in commands like log and
checkout and branch, but Get also allows you to create aliases
very easily for commonly used commands and options and this one
outlines a lot of good ones, for instance, looking at your log
in a very organized way, and a lot of different ones. They’re
just too many to go over.I haven’t had a chance to use all of
them, but I’ve implemented some of them and they are really nice
if you want to just do some pretty common operations on your
code like taking a look at the last few commits and being able
to see very quickly what happened as well as moving files in and
out of the index and committing them. So it’s a lot of the
commonly used operations sort of combined as Get-Aliases that
you can use very easily.

Jason: It’s a huge time saver.

Jim: Yeah.

Jason: If you haven’t gone through the process of setting up aliases
for commonly used commands.

Jim: I don’t have too many aliases because I find that if I overdo my
aliases I become completely dependent on them, and then as soon
as I get on a computer where I don’t have the aliases set up I’m
completely lost, but a lot of these are really good because they
are aliases that are pretty long and pretty unlikely for you to
type out when you really want them, for instance, the decoration
on the logs and things like that.

Jason: Do you think the plural of aliases is aliases?

Jim: I believe so, with an “es”, aliases.

Jason: Aliasi?

Jim: Aliasi.

Jason: Aliasite. Next up we’re going to be talking about a project
called Simple Cart. This is a completely free an open source
Javascript shopping cart. There’s a demo on the site right
here. This is super easy to integrate with your website, so if
you want to add a book to your cart, just hit this “Add to cart”
button. Look at that

Jim: Whoa.

Jason: It zooms all the way out and then it goes right into your
shopping cart right up there, and then you can change the number
of items that you want in there and click the checkout button,
and this actually will hook up to your Paypal account. There’s
a ton of different callbacks and it’s just super easy to
integrate on your site and you can get the link to SimpleCart JS
in the show notes which are at Youtube.com/gotreehouse. Tons of
documentation, easy to read source code, really great project.
This came out relatively recently and I see literally no reason
not to use it if you’re just looking for a simple shopping cart
for your site.

Jim: I think one thing you do want to watch out for, especially since it’s
a Javascript-based application is to really check those order if
you’re delivering either physical items or digital items because
you could really just change the Javascript on the page as a
client and maybe change the price from $9 to $.01.

Jason: Incredible bargain.

Jim: It’s a real bargain. So it’s something to look out for. Either
validate using some sort of, a little bit of server code or if
you’re selling shirts just take a look and make sure that they
paid enough for the shirt you’re sending out or whatever piece
of merchandise. That’s the only little “gotcha” versus sort of
a full back-end based ecommerce solution.

Jason: That’s a really good point.

Jim: Yeah.

Jason: It’s also not something that we totally advocate, you know,

Jim: Yeah, don’t steal. No. Okay. So, on mobile.

Jason: Mobile.

Jim: Mobile’s important. There’s this problem.

Jason: Like a phone?

Jim: Like your mobile phone.

Jason: Like a cellular phone?

Jim: Yeah, like a pocket computer?

Jason: Yeah.

Jim: With a touch screen on it. And so what happens when, for instance,
on a page when you normally have your on click event, there’s a
little problem, because the phone is actually waiting for you to
do a double click. So when you click it or when you tap it, you
actually don’t get your click event fired for about 300
milliseconds while it’s waiting to see if you’re going to do a
double click.

Jason: Oh my. And this is in Javascript?

Jim: This is in most mobile browsers, like mobile Safari or mobile Chrome
and it becomes a real problem because it makes your site, it
makes your page seem less responsive because you click it and
then there’s a little bit of a pause.

Jason: I wish there were some sort of workaround for that.

Jim: Oh I’ve got something called Fast Click, and it’s a really small,
really easy to use Javascript library that pretty much fixes it.
Basically using a different type of event it can replace the
touch event with the click event, making the text instantaneous.
Now this does have a little bit of a couple of things that you
need to work around. For instance, if you are doing a double
click you have to work around it because it’s going to fire your
click event immediately and there are a couple of other problems
because the click event that’s created using the Javascript
framework isn’t a real native one, so there are some things like
focusing on forms or certain actions that might be restricted,
but it actually has a built-in class that you can apply to the
elements where you need a real native click and it will fall
back to that slightly delayed real click, but it’s a nice sort
of drop-in solution. If you’re on a normal desktop browser it
doesn’t do anything, so it knows what browsers it needs to use
and it fixes it for you and makes your sites just a little bit

Jason: Oh, that’s fantastic.

Jim: Yeah, it’s really nice.

Jason: And fast.

Jim: Fast.

Jason: Next up we have a date picker for jQueary. Why another date
picker? This one’s called PickADate.js and the answer to “Why
another date picker?” is that this is responsive and
lightweight. It clocks in at just 3.3 kilobits, kilobytes, I’m
sorry, G-zipped and it just lets you turn any text element into
a little date pop-up, scroll through, pick everything. There’s
pretty easy code as well as just a ton of different options. It
works with the native html5 type=date element as well as, yeah,
just tons of different options for just clicking around and
finding different dates. It’s a really quick project, but like
we said, it’s lightweight and responsive and that’s

Jim: Wow. That makes picking a date on the internet really easy.

Jason: Yeah it does, a lot easier than it used to be.

Jim: Yeah. Okay.

Jason: We’ve all been there.

Jim: So, have you ever been filling out a form-

Jason: Yes.

Jim: And there’s so much stuff-

Jason: Yes.

Jim: And then you hit submit-

Jason: Yeah.

Jim: And it’s like “You dropped your internet. I couldn’t submit it.
You’re not online”?

Jason: Oh, yeah. Yeah-

Jim: Isn’t that lame.

Jason: Then you have to type everything in again.

Jim: I’ve got a solution.

Jason: What’s up?

Jim: What if the website your were typing everything in on told you when
you were offline?

Jason: Whoa!

Jim: So that’s where HeyOffline.js comes in. It does exactly that. If
you were to disconnect, it will pop up a nice little box saying
“Hey, you’re offline” but it does a couple of nicer things too.
You can set it up so it only triggers that pop-up box if they’ve
maybe filled in some text on a form, so if you’re just browsing
it won’t really yell at you for being offline, but if you start
filling in a form where you’re treading in that dangerous
territory of losing some information it can say “Hey, you
probably shouldn’t submit this because, well, you’re not
online.” And it has some nice, some really nice options. It
doesn’t require jQueary or anything else. It’s completely self-
contained, very small and very easy to use.

Jason: Oh, very-

Jim: Just drop it right in.

Jason: Very nice.

Jim: Yeah.

Jason: I like that it yells at you. “Hey!”

Jim: It does. “Hey, you’re offline!”

Jason: That’s a great tag line.

Jim: Perfect.

Jason: Makes it easy. Next up we have a WordPress theme called Bones.
This has probably one of the best graphics I’ve ever seen on a
theme website. Look, it’s got a guy made out of bones in a
tophat just throwing it around. Anyway, this is a starter theme
for WordPress development. This is not a framework, so you’re
just going to start with the Bones theme and then add onto it.
This is a mobile-first and responsive theme. It’s built off of
html5 Boilerplate so it gives you just a great starting point
when building a WordPress theme. It’s also made with LESS and
SAAS which is actually really great for developers, and the
selectors that they use are really fined tuned so that you can
see exactly what’s going on when working with a theme. This
theme is actually completely free so you can check it out over
on GitHub, clone it, contribute to it, whatever you want to do.
Anyway, great theme. Check that out, and once again, we will
have a link to that in the show notes.

Jim: Awesome man. That seems like a really good starting point for
building WordPress themes. It can be pretty tricky to get
started with. You have to take really full blown theme that’s
close and then try to change it, but starting from scratch with
something nice and clean and simplified-

Jason: Yeah, very lightweight.

Jim: That’s the way to go.

Jason: So that’s it, that’s all we have for you this episode. Jim,
who are you on Twitter?

Jim: I am jimrhoskins on Twitter.

Jason: And I am jseifer on Twitter. Thanks so much for tuning in to
this episode of the Treehouse Show. For show notes and more
check out our Youtube channel at Youtube.com/gotreehouse.

Jim: This episode of the Treehouse Show was brought to you by Treehouse,
the best way to learn how to design and develop for web and
mobile. Check us out at teamtreehouse.com.

Announcer: If you’d like to see more advanced videos and tutorials like
this one, go to teamtreehouse.com and start learning for free.


Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Get Started

Leave a Reply

You must be logged in to post a comment.

man working on his laptop

Are you ready to start learning?

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Start a Free Trial
woman working on her laptop