LearnTreehouse Show Episode 13 – LLJS, Navicons and Framework Flights


writes on October 23, 2012

In this episode of The Treehouse Show, Nick Pettit (@nickrp) and Jason Seifer (@jseifer) talk about LLJS, Navicons, and Framework Fights.

Here are the links for the week:


The Semantic, Responsive Navicon

JavaScript Stacktrace

PHP The Right Way




Framework Fight!

Setting Up My Perfect Developer Environment on OSX 10.8 Mountain Lion (DP3 Edition)

Video Transcription

Nick: I’m Nick Pettit.

Jason: I’m Jason Seifer.

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

Jason: In this episode we’ll be talking about JavaScript languages and
plug-ins, PHP best practices, and more.

Nick: Let’s check it out.

Jason: The first thing that we’re going to be talking about this week
is a project from Mozilla called LLJS, or Low Level JavaScript.
This is a really, really interesting project that is a dialect
of JavaScript that offers a C-like type system with manual
memory management.

Nick: I understood some of those words.

Jason: Yeah. Well, what’s interesting about it is that it compiles
down to the JavaScript, and if you like having types in your
JavaScript and C-like structures this will let you do that. It’s
right now a bit of an experiment, and the syntax is pretty
interesting. There are all sorts of stuff that you can run on
the site. We can’t get into everything here, but an interesting
project. Check it out, too much to summarize. It looks fun. This
is if you really, really want to nerd out with your languages,
give this a try.

Nick: Very cool stuff.

Jason: Similar to CoffeeScript.

Nick: Similar, right. So, over on Smashing Magazine they wrote this really
interesting post about this icon that I’ve been seeing all over
the place. But I guess I’ve never seen anyone actually talk
about it, or formalize it and say, “Hey, this is a thing.”
Basically, they’re calling it the Responsive Navicon.

Jason: Is that the little icon that shows what’s going on in like a
mobile application?

Nick: Kind of like that, yeah. It’s this little icon here that has those
three little lines and you see this in like the Facebook app, on
the IPhone. You see this really just all over the place. In some
instances, you’ll hit this and the app will slide over and you
can see navigation. Sometimes it will pop out a menu. But
basically it’s a design pattern that has been developing across
many different websites and apps that when you hit this icon it
will show you some sort of navigation.

So, I thought it was pretty cool that they went ahead and talked
about it for once. I haven’t heard anybody else really actually
formalize that, but I just think it’s been everybody kind of
just copying one another.

Jason: That’s interesting, because everybody does seem to use that.

Nick: Yeah, very interesting.

Jason: Cool. So, we’ll check that out. Next up is a project called
JavaScript Stack Trace. This is a piece of JavaScript that you
can include in your web pages that will give you a stack trace
when something goes wrong or when there’s an error in your
JavaScript. This can be really difficult in certain situations
where you have an error in one method in JavaScript and you’re
not exactly sure where it came from. So what this piece of
JavaScript does is it shows you the entire method call, and
stack change of what happened in JavaScript, letting you debug
things very, very easy.

Nick: So with that stack trace, it’ll show you from that first line where
something happened and go all the way back up and show you where
it ultimately ended up.

Jason: Exactly.

Nick: Got it.

Jason: You can get this at stacktracejs.com. There is documentation
and download links right there, as well as in our show notes.

Nick: Pretty nifty. So next up is PHP The Right Way, which is good, because
I don’t want to do PHP the wrong way.

Jason: Right.

Nick: PHP The Right Way is basically just really good documentation for
PHP, because I think there is a lot of bad documentation out
there and a lot of really old blog posts, just because PHP has
been around for so long. I think it is one of the easier back-
end languages to get into, and there’s kind of less of a barrier
to entry. So, a lot of people are using it and there’s a lot of
documentation out there.

So PHP The Right Way tries to fix all of that and just create
really nice documentation for PHP. So you can go ahead and
scroll through here and kind of see language highlights and
everything that you would want to know.

Jason: Yeah. That’s really good that it establishes some of the best
practices that you wouldn’t pick up when just reading the normal

Nick: Exactly.

Jason: Next up, I think everybody is excited. It’s our app of the

Nick: Let’s check it out.

Jason: Our app of the week this week is a project called Anvil. This
is a free application for managing Ruby web applications on OS
X. It’s really nice. It’s a menu bar application, and it uses
the POW server on the back end to spin up sites for you. So,
what you do is you drop something – like you click the plus
button, import your site into Anvil, and it will automatically
set up a local.dev version of the site, so you have my

Click that to turn it on and you can go to that right on your
browser. Really quick, doesn’t require too much messing around
with anything, and like I said, that’s a free download. You can
get that at Anvil for Mac.com.

Nick: That’s pretty amazing that we live in an age where you can manage web
applications from your menu bar. You just kind of surf and read
it, and then you say, “Oh, I’d better check up on that thing.”

Jason: I’d better do some work.

Nick: Yeah. So, next up is [Varimill 00:05:32].js.

Jason: I saw some awesome cat pictures, though, and read it the other

Nick: Oh, yeah?

Jason: Yeah.

Nick: I haven’t seen any of those.

Jason: I’ll show you later.

Nick: Ah, sweet. All right, [Varimill 00:05:40].js is basically a piece of
Java Script, or a jQuery plug-in that allows you to validate
email addresses. Now I know that sounds really lame, but if
you’ve ever tried to validate an email address before . . .

Jason: Yeah, don’t you make sure that there’s an @ character in it?

Nick: Not quite, because, Jason, that could be a Twitter handle for all we

Jason: Oh, that’s true.

Nick: Boom.

Jason: Email me @jseifer.

Nick: It’s actually really complicated to validate an email address when
somebody is typing it into a form. So, [Varimill 00:06:17].js
just makes it really easy to do that.

Jason: I think it’s also cool it handles typos.

Nick: Yeah. So if you type in .cmo instead of .com, for example, it will
actually say, “Hey, did you mean to type .com instead?” It will
offer you alternatives for your typo, so it’s pretty nice. It’s
very feature rich. It has a lot more to offer than what I’ve
seen from typical Java Script plug-ins that do the same thing.

Jason: Yeah, that’s really neat.

Nick: Pretty nifty.

Jason: Next up is a website called js2coffee.org. I really love this.
If you’re using CoffeeScript, which is a dialect of JavaScript .
. .

Nick: It’s what all the cool kids are using.

Jason: All of them, and some of the not cool kids, but we let them
anyway. Now, so this is a really nice site. It has two panels.
You can put your JavaScript on one side and it will show you the
equivalent CoffeeScript on the other side. It works also with
CoffeeScript to JavaScript. This can be pretty useful if maybe
you’re just learning CoffeeScript, and you want a bit of a
refresher on what’s actually happening in the code. So, check
that out. That’s at js2coffee.org. It’s super useful, not much
to say. I love coffee script.

Nick: Very cool stuff. Well, next up we have a blog post from Design Shack
where they compare Zurb Foundation to Twitter Bootstrap. I read
this whole post.

Jason: These are two frameworks we’ve gone over before on the
Treehouse Show.

Nick: Yes, that’s true.

Jason: So, watch all of our back episodes before you read this post.

Nick: Then you can read this post after you’ve gone through the
prerequisites . . .

Jason: Yeah.

Nick: Right? You can basically get down to the bottom where they have the
conclusion and they say, “Cut the crap. Who wins?” And they say,
“It’s difficult to declare a winner.” Now I don’t think there’s
any kind of surprise there. It’s kind of like going for two or
three seasons of “will they?” – “won’t they?” romance on
television, and then ultimately nothing happens. Basically, the
answer is to just . . .

Jason: I saw that show.

Nick: It’s all the shows, Jason.

Jason: Too many times.

Nick: Perhaps it’s the Treehouse Show?

Jason: I’m not trying to get involved in this framework fight, but
I’ve heard that Foundation has a great grid.

Nick: Yeah.

Jason: That’s what the design people say.

Nick: Exactly. Yeah. There are small differences, and larger differences,
but basically the answer is to try out both of them and see
which one you like better, because sometimes one is going to
work for one project and one is going to work better for another
project. The answer is it depends.

Jason: Try it on.

Nick: That’s right. Try before you buy.

Jason: That’s it. We’re going to end the show with a blog post on
setting up the perfect developer environment on OS X 10.8
Mountain Lion. Now, perfect is obviously a relative term. This
is just one man’s opinion with a blog. However, he does offer
some really good advice, and interesting defaults when setting
up a new development environment. He goes through installing X
code in iOS, as well as, even setting your sidebar icon size to
small in system preferences.

Nick: Wow!

Jason: I know.

Nick: That’s detail.

Jason: But other than that he does have a link to a really useful set
of dot files for setting up your terminal and commands, and as
well as using Alfred.app, which is one of my favorites, so great
blog post. Go ahead and give it a read. Again, try it on and see
if these preferences fit you, and then report back.

Nick: You can decide for yourself what’s perfect.

Jason: Exactly.

Nick: So Jason, what have we learned today?

Jason: We learned that three-line icons can be very important.

Nick: All right. Well, that’s it for this week’s episode of the Treehouse
Show. If you’d like to follow us on Twitter, I’m @nickrp.

Jason: And I’m @jseifer. We want to thank you so much for watching
this edition of the Treehouse Show. For show notes and more,
check out our YouTube channel at YouTube.com/gotreehouse.

Nick: Of course, if you’d like to see more videos like this one you can
check us out at team teamtreehouse.com. Thanks so much for
watching. See you next week.


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