LearnSVG Hacking | Treehouse Show Ep 29


writes on February 26, 2013

In this episode of The Treehouse Show, Nick Pettit (@nickrp) and Jason Seifer (@jseifer) talk about Toolbar.js, Stately, Dropzone.js, Labels in Input Fields, Sassaparilla and more.

Here are the links for the week:

A Primer to Front-end SVG Hacking




Labels in Input Fields

JavaScript function compatibility table


Video Transcription

Nick: I’m Nick Pettit.

Jason: I’m Jason Seifer.

Nick: You’re watching the Tree House Show, your weekly dose of internets,
where we talk about all things web design, web development, and

Jason: In this episode, we’ll be taking a look at SVG’s, Java script
uploads, and responsive frameworks.

Nick: Let’s check it out. First up is a primer to front-end SVG hacking.
This is a really cool blog post that is basically just an
introduction about how to include SVG’s into your website. Of
course, you can put SVG’s anywhere where you can put images, but
it’s a little bit tricky. Sometimes, there can be some tricky
things with praise full degradation. It’s not quite as straight
forward as it might seem. This is a really amazing blog post. It
teaches you how to actually include images in your CSS as
something that’s base-64 encoded. Really great way to get
started with SVG’s, which are really good if you’re trying to
create a website that’s going to be retina ready, or ready for
high DPI displays.

Jason: Yeah. Very nice. Really good post. I definitely learned a
couple things there.

Nick: Check it out.

Jason: Next up, we have a project called Toolbar.js. This is really
interesting. This is a j-query plug-in that creates tool tip
style tool bars. Now, what does that mean? There’s a great
example on the site. Here is this little gear icon. You can
click on that. Then boom, you get a little pop-up with different
possible functions for tool bar. This uses the bootstrap icons
from the Twitter bootstrap framework, which we pretty much can’t
get enough of and talk about here on the show constantly. It
supports a bunch of different configurations. It can be on the
top or bottom of the tool bar. Then, it’s pretty easy to
customize the number of items inside the tool bar. It really
just has a little bit of HTML and markup that you use. It can be
horizontal. Vertical tool bar is on the right or left. Then,
there are of course tool bars that can be triggered by a link.
Then, it has just a couple of different options for hiding the
tool bar on click and things like that. This is Toolbar.js, and
you can find a link to that in our show notes at

Nick: Check it out. Next up is a really cool project from Intridea, called
Stately, which is basically an icon font that allows you to
create maps of the United States. Let’s say that you wanted to
make a graph of the 2012 presidential election, or you want to
show where all Intrideans are throughout the United States. You
can go ahead and do that. You can go ahead and scroll down here,
copy and paste this markup into your page, and you can go ahead
and style Stately using a couple different styles here. Let me
give some examples. You can, of course, style individual states.
This is pretty useful if you just want to quickly generate a map
of the United States and show some data about different states.
Of course, we can’t do this for the entire world. It’s just
useful if you live in the United States, or you want to show
data about the United States. Nonetheless, it’s still pretty

Jason: Yeah. Pretty cool how you can customize it too, just via CSS.

Nick: Yeah. Yeah. It makes it really simple. You don’t have to install any
kind of crazy java script mapping plug-ins or use Google maps or
anything like that. It’s very simple and straight forward.

Jason: You just have to make sure that you have your list in order.

Nick: That’s right.

Jason: And don’t leave any states out.

Nick: That’s right.

Jason: Unless it’s Florida. That’s OK.

Nick: Yeah. You can take out Florida. That’s fine.

Jason: Next up, we have a project called Dropzone.js. This is a j-
query library that kind of abstracts the HTML 5 file upload API
right into your j-query plug-in, so you can drag and drop
uploads right onto your page. Now, the other cool thing about it
is it supports image thumb nailing, which is pretty awesome. You
can just drop an image right there, then it will upload it and
automatically generate an image for you. It’s very, very easy to
use. You just include a couple of java scripts. Then, you can
also add just a class to your different form fields for files
and dropping them. Then, it automatically creates it. You can
also create the drop zones programmatically in java script tag.
One of the really nice things about the plug-in is it just
abstracts everything away for you. You only need to remember one
API and not bother with just a ton of different java scripts on
your page. Check that out. Nick, have you seen the new show, The
Real Developer’s World?

Nick: I have not, but I have a feeling that we’re going to see a clip of it
right now.

Jason: That’s true. Nick, you know you could save yourself a keystroke
if you typed in 60 instead of 1-0-0.

Nick: What if I wanted to type in minute 15?

Jason: Just do 75. You still save a keystroke.

Unknown female: Yeah, or you could just save yourself some hand movement
and type in 77, because no one cares about those extra two

Jason: She’s right. I’ve been wasting hand movement my entire life.
Yeah. It’s not very good.

Nick: No. That was actually terrible.

Jason: Yeah. What’s next?

Nick: Next up are labels in input fields. Apparently, it’s not such a good
idea. This is a blog post that’s titled, “Labels in Input Fields
Aren’t Such a Good Idea.” Basically, they’re saying that you
should actually use labels as they were originally intended. For
example, you shouldn’t put a label inside of a form field, like
so. You often see this design pattern where the text is kind of
grayed out, and it says something like, ‘Email address,’ or
whatever you’re supposed to put into that form field. As soon as
you click, it’s gone. The argument that’s being made in this
blog post is that although you might be saving some space by
removing that label, you’re actually making a more confusing
interface. In this particular example, they have a reference
URL, then they have two inputs. One says, ‘The Encyclopedia of
Life,’ and the next says, ‘Wikipedia.’ You’re supposed to put a
URL in the first spot and a URL in the second spot. The problem
is, as soon as you click, you lose what you were supposed to put
in there. It can be easy to just kind of forget or get your
URL’s crossed, or not really know where you were supposed to put

Jason: Right.

Nick: It’s a pretty good blog post. It makes a really good insight into the
user experience of forms. Further down in the post, they talk
about the rise of the HTML 5 placeholder, which leaves room for
further abuse of this particular design pattern. Very
interesting post for people that are interested in the user
experience, or UX.

Jason: I guess the big takeaway to that is maybe use placeholders for
examples, and that labels are really good for accessibility and
screen readers and things like that.

Nick: Exactly.

Jason: Next up, we have something called the JS compatibility table.
This is a really great table, listing the compatibility of
different built-in java script functions in a grid with
different browsers across the top. You can see, if we take a
look at it here, there’s all of the different java script
functions available on the left. As you scroll down, you can
keep a view of what browsers do and don’t support these
different functions. There is just a ton of different java
script functions that you can use. Then, you can even filter it
by typing in something like ‘geo’, and it will show you a list
of all the different browsers that support that. Although, that
didn’t exactly work for me right there. Trust me that it
actually does, later.

Nick: I trust you, Jason.

Jason: You can configure all the different browsers that you want at
the top of the screen, which is great. Yeah. We’ll have that in
the show notes as well.

Nick: Pretty cool.

Jason: It’s really useful if you’re developing a java script library
or something.

Nick: Yes. Definitely. I thought tables were bad, but apparently, tables
are now good.

Jason: They’re good for tabular data.

Nick: According to Jason. Alright. next up is Sarsaparilla. I think I’m
saying that right.

Jason: Sounds like a parade.

Nick: Yeah. Or a root beer or something. It says, ‘”tart your next project
faster”, or “Start your next web project faster with
Sarsaparilla.” Now, this is basically some sass files that you
can go ahead and include in your website to start a project
faster, exactly as it implies. Now, looking at their
documentation on Git, they say this is in fact, not a boiler
plate or a theme. I kind of disagree with that a little bit.
It’s definitely not a theme, but it certainly is some nice
default styling to go ahead and get your website going, which I
feel like is exactly what a boiler plate is. It’s OK to call it
that. The other thing that is really nice is it sets up your
fonts just great. It says here that, ‘A method to produce the
perfect book.’ They give an awesome example of typography.
Sassaparilla is just great at that.

Jason: Nice. I think the big draw here is that it lets you work in
pixels in your SAAS files, but it gets translated to EM’s when
it’s compiled.

Nick: Yes, which is super important.

Jason: Yeah. That’s going to be great for your responsive sites.

Nick: Exactly.

Jason: I think that’s all we’ve got for today. If you want to get some
background on what we talked about, check out our show notes at

Nick: Who are you on Twitter?

Jason: I am @Jseifer. Can’t forget about that.

Nick: I’m @NickRP. Of course, if you’d like to see more videos like this
one about web design, web development, mobile development, or
business, be sure to check us out at Teamtreehouse.com. See you
next week, and thanks for watching.

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

Comments are closed.

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