Here are the links for the week:
Backbone Memory Management Techniques
Brand identity style guides from around the world
Datepicker for Bootstrap
Creating Your Own Sublime Text 2 Plugin
Crumble – jQuery Feature Tours
Jim: I’m Jim Hoskins.
Jason: I’m Jason Seifer.
Jim: Welcome to the Treehouse Show, your weekly dose of internets, where
we talk about web design, web development, and more.
Jason: In this episode, we’ll be talking about memory management
techniques, wire frames, and micro java script frameworks.
Jim: Nick Pettit is out this week because he was actually attacked by a
group of his Twitter followers. #ouch.
Jason: First up this week, we have an article over on the Pay Dirt
blog about Backbone.js in practice. This is part one of an
unknown part series on preventing memory leaks in your
Backbone.js applications. Now, this blog post is going to go
through and tell you different things that you can do to prevent
memory leaks when writing Backbone.js applications. A lot of the
techniques that they go over in here don’t apply specifically
just to Backbone, more so to memory conservation techniques in
general. See, the problem is, when you’re working with a larger
framework or even any larger java script application, you have
to keep track of a lot of different things. As you’re going
through and writing your apps, things can become a little bit
cumbersome to keep track of. You might wind up with a memory
leak in different places. This blog post, as I said, goes over
just a few different ways to start preventing these. Go ahead
and check it out. We’ll have a link in the show notes where you
can actually read some of the code that I have now hyped up.
Jim: What’s a memory leak?
Jason: I forgot.
Jim: Okay. If you read the blog post, I’m sure you’ll find out. I have a
cool tool called Wireframe.cc. It’s pretty much what it is. It’s
a wire framing tool on the web. It’s pretty easy. It gives you a
nice little template, and you can just drag things out, and it
pops up a nice little menu with the different templates of
things that you might want to place. If maybe you wanted to put
a box there, and you can just quickly drag stuff out. Maybe
place a placeholder for an image, some text, and voila, you have
some wire frame. In case that wasn’t cool enough, I do actually
have the demo up here, so you can see what a more professionally
designed wire frame might look like.
Jim: It’s amazing. You can imagine what it really looks like. It’s
actually pretty cool. It even sort of, based on the aspect ratio
or size you’re doing, it will display different widgets that
would fit. Based on if it was really long, you’d get these sort
of scroll bars or sliders. Versus if it was a square, you
wouldn’t get those. You’d get text and other things. It’s pretty
smart, pretty easy to use, and it’s awesome.
Jason: Good. That’s pretty cool. Wire frames are really useful for
getting an idea of how sites are going to work, rather than just
plunging into a design.
Jim: Lets you sort of stay away from the details and worry about more of
the big picture of it.
Jason: Next up, speaking of design, over on the Logo Design Love blog,
there is a concatenation blog post about different brand
identity style guides from around the world. A brand identity or
style guide is going to tell you all of the different things
that you need to know when working with the brand’s logo or
their corporate identity and kind of the whole structure of how
they’re going to design the site. There it’s going to go through
different font sizes, images, where they can be placed, colors,
different ways of scaling the logo. There is just an absolutely
great compilation of all of these different possible brand
images from around the web. That includes really big companies
like Adobe, Cisco, Best Buy, just a ton of different ones.
Having a brand style guide is something that’s really important
for a company when it leaves just the original couple designers,
and you have more people working on a project. It gives them a
really good idea of how to work with the brand, while keeping
the whole corporate style in tact. Definitely check that out.
Jim: Okay. I have a cool little library here. It’s called Date Picker For
Jason: What does it do?
Jim: It’s a date picker for Bootstrap.
Jim: Wow. It’s amazing.
Jason: That’s a weird name.
Jim: It actually is really cool. If you’re using Bootstrap, which. . .
Jason: Most of the web is.
Jim: Yeah. You pretty much are now. Right? If you want a nice little tool
to turn your input boxes into proper date pickers, there it is.
It’s that easy. There are nice little options here. It’s
properly styled. It looks great. It works, and there’s a lot of
different little options. It’s all really well documented. If
you’re looking for a way to define the dates in your Bootstrap
sites, this is the easiest way that I found to do it. Check it
Jason: Very nice. Next up: If you use the Sublime Text 2 text
editor, there is a blog post over on the Mutually Human blog,
which is actually a really great blog name, on creating a plug-
in for Sublime Text 2. Now, for the most part, when you’re
working with Sublime Text, there’s just a ton of plug-ins and
options out there. Every once in a while, you’re going to run
into some functionality that maybe you wish you had that isn’t
available. In that case, go ahead and write it yourself. This
blog walks you through how to get set up starting to write a
Sublime Text 2 plug-in. Sublime Text plug-ins are written in
Python. If you don’t know that, maybe check out a tutorial that
we have linked to on a previous Tree House Show, which has a
link to a ton of different Python books that you can download
for free. Shameless self promotion.
Jim: Have you ever tried to prototype a mobile application?
Jim: It can be a little bit difficult, but one of the easiest ways
especially us as web developers can do it is through HTML as
sort of a prototyping tool. Now, a really cool thing that’s been
released is Ratchet. It’s a CSS and java script HTML framework,
not too unlike Bootstrap, which allows you to create common
components of mobile applications. Basically, with some simple
HTML, you can mock up how your mobile application will look and
has common things like different bars, list items with the
different widgets, buttons, switchers, and so on. Using some
very simple HTML, then including the java script and CSS, you
can actually prototype pretty well how a mobile application will
work in pretty simple terms. It even has some cool things like
galleries here that slide around.
Jason: Wow. Look at that.
Jim: Pop overs, and it even does sort of the page transitions if you want
to have something you can actually click or touch to move
around. The reason it kind of looks a little like Bootstrap is
because one of the developers of it was one of the developers
from Bootstrap. It looks kind of like it, but it’s a really cool
awesome tool for really quickly getting together some basic
Jason: Yeah. It seems like it would be a good way to get a feel for a
feature before you waste all the time coding it, if it’s just
going to be something you don’t want to work with anyway.
Jim: Yeah. Building the UI in mobile can be pretty time consuming. HTML is
pretty fast. You can get it together even in your hand. Try it
out and see if it works.
Jason: Nice. Next up, we have a java script plug-in called Crumble.
Crumble is going to let you do feature tours of a website. What
they call the blank slate experience, when you get to a web
application or website, can sometimes be intimidating for new
users, and you want to walk them through it. What Crumble is
going to do is give you little divs or boxes or call-outs to
call out different features of the site. Then, you can click on
it, then continue down the page. Just kind of click through the
tour. This is going to help you out a lot as a new user visits
your site. Just kind of give them a hint about where everything
is. Don’t just leave them hanging. I like it.
Jim: Yeah. It’s pretty cool.
Jason: That’s the way the cookie crumbles. We’re not getting into
taglines on this show?
Jim: Yeah. That was a good try. It was fine. How big is your java script
Jason: It’s average.
Jim: Cool. We all know that when it comes to bandwidth, less is more. If
you’re using a J-query, you may or may not realize it’s pretty
large. If you’re not using every part of it, maybe you should
consider a smaller framework, a micro framework. If you want to
find one, microjs.com is a great repository of frameworks that
do various tasks that are very, very small. It’s nice and
searchable. If you just want to have maybe a Dom utility for
maybe manipulating the elements on your page, much like you use
with J-query but smaller, it gives you some different tools. It
even tells you how big they are, so you can measure them against
what they’re worth. Zepto would be 4K, but there’s some smaller
ones that may do less but exactly what you need, that would be
smaller. It’s a really large repository of very small tools.
Jason: That’s really important because we’re getting into things today
where your mobile device maybe might not have a lot of bandwidth
if you’re just on an edge connection. Really, when you get to
that point, every kilobyte helps.
Jim: Oh, yeah. I was on vacation, and I had a lot of edge networks. All of
a sudden, I was appreciating very fast pages that I kind of take
for granted in my Wi-Fi and 4G lifestyle here.
Jason: It’s an adjustment.
Jim: It is.
Jason: That’s it. That’s all we got for you this week. Jim, who are
you on Twitter?
Jim: I’m @JimRHoskins on Twitter.
Jason: I am @JSeifer. If you want more information on anything that we
talked about this week, head on over to our show notes at
Jim: This episode was brought to you by Tree House, the best way to learn
how to develop and design websites and mobile applications.
Check us out at Teamtreehouse.com.
Jason: We’ll catch you next week. [music].