Treehouse Show Episode 10 – jQuery Fundamentals

treehouseShow10

In the tenth episode of The Treehouse Show, Nick Pettit (@nickrp) and Jason Seifer (@jseifer) talk about jQuery Fundamentals, package managers, and the app review of the week is Total Spaces.

Here are the links mentioned in this week’s episode:

jQuery Fundamentals
http://jqfundamentals.com

Yeoman
http://yeoman.io

Bower
http://twitter.github.com/bower/

This is Responsive
http://bradfrost.github.com/this-is-responsive/index.html

Total Spaces
http://totalspaces.binaryage.com

ColorSense
https://github.com/omz/ColorSense-for-Xcode

Underscore CLI
https://github.com/ddopson/underscore-cli

Modern UI Icons
http://modernuiicons.com

Video Transcription

Nick: Hi, 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 more.

Jason: In this episode we’ll be going over front-end package managers,
the usual dose of responsive web design, and our app of the week
is Total Spaces.

Nick: Let’s check it out.

Jason: The first thing that we’re going to be talking about this week
is JQuery fundamentals. You can find this at jqfundamentals.com
.This is an extremely well written tutorial on, not only JQuery
but JavaScript as well. When you’re going through the site,
there are a couple introductions here. It goes over all of the
basics of JavaScript. This is going to be something that you
want to point newer developers towards, maybe if they’re not too
familiar with JavaScript or even JQuery.

Now, in order to learn JQuery itself, well you need to know a
bit of JavaScript and a bit of programming. So there are
interactive examples all through jqfundamentals.com that will
let you kind of learn at your own pace. It’s a pretty good
resource and there’s even a built-in editor to go through and
try all of the different things. So, it goes through all of the
JQuery basics with links to the documentation, what the dollar
sign selector is, and pretty much everything that you need to
know.

It goes all the way through to traversing and manipulating the
DOM, events and delegation, as well as effects and AJAX. This is
a really, really great resource, so make sure to check that out,
and once again that’s jqfundamentals.com, always worth it to
brush up on JavaScript.

Nick: That’s pretty cool Jason. I know some of those words.

Jason: Yeah.

Nick: Yeah, pretty nifty.

Jason: Like the J.

Nick: Yeah.

Jason: That’s pretty good.

Nick: Yeah, all right. Next up is Yeoman, available at
yeoman.io/packagemanager.html. Basically, Yeoman is a package
manager for modern web workflows. So, it’s a command line tool
that you go ahead and install. Well, the Ruby community has
benefited from having a package manager as well as several other
communities.

There hasn’t really been a great package manager for handling
all of these JavaScript dependencies like JQuery or adding in
frameworks like Twitter Bootstrap and really putting all those
things together, and tying up all the loose ends for creating a
new web project.

Usually you have to go and find all of those pieces and put them
together yourself, or you go and download the latest version of,
say, HTML5 Boilerplate. But this is a much better way to manage
those dependencies as you’re actually working on the project.

Jason: So this is going to bootstrap the project?

Nick: It is going to bootstrap the project. Not the same thing as Twitter
Bootstrap of course, but, yeah, it’s a really great way to go
ahead and get started on your next web project.

Jason: What I like about Yeoman is that it’s interactive, so it sort
of lets you go through and choose what you actually do want in
the project. It really gives you the ability to customize
anything and just kind of take out all the steps that can be a
little bit tedious when you start a new application, so kind of
cool to have that automated.

Nick: Yeoman.

Jason: Next up is something called Bower, which is pretty similar to
Yeoman, although it is just for your front-end stack of
different JavaScripts. So, if you want to have a version of
JQuery, you would just say, “Bower, install JQuery.” This will
use NPM to install that. It creates a manifest file called
package.JSON. I believe that’s what it is. Yes, package.JSON.
That specifies all of the different dependencies to your
project.

Now, this is by Twitter. This is a pretty low level thing, a
little bit more low level than Yeoman, so it’s not going to go
through and install Bootstrap for you. But you could specify
just the JavaScript as a dependency. Interesting framework, it
gives you just enough to get you started with a project. So,
check that out. You can find that on Twitter’s GitHub at
Twitter.github.com/Bower.

Nick: Pretty nifty. Next up, is This is Responsive. That’s actually the
name of the project, This is Responsive, and you can check it
out at bradfrost.github.com/this-is-responsive/index.html, so
really easy to remember.

Jason: This-hurts-my-brain looking at it.

Nick: Exactly. Basically, if you just Google “This is Responsive” you can
probably find it pretty easily, and of course you can check out
the show notes on our show.

Jason: So, what does this do exactly? This gives you patterns,
resources, and news for creating responsive web experiences.

Nick: Exactly. You always want to keep up with the latest stuff in
responsive web design, because it’s constantly changing and
evolving. When you click on Patterns, for example, you can go
ahead and check all the latest stuff in laying out your site,
creating navigation, tables, and so on. When you click on
Resources, there are all sorts of great design tools. So if
you’re just mocking up your responsive site, you can go ahead
and check out the tools there.

Then finally, there’s news about responsive designs. So, they
just have a nice newsfeed for all the latest stuff in the world
of responsiveness. So, it’s basically just a site that kind of
packages up all the different things happening in responsive
design, because it’s kind of all over the place right now.
Everybody’s talking about it. Everybody’s innovating, and it can
it can really difficult to keep up with the latest stuff.

Jason: Yeah, responsive design is always evolving. Kind of like the
front page to that site.

Nick: Exactly, constantly changing.

Jason: So, speaking of constantly changing, how about we do our app of
the week?

Nick: Let’s check it out.

Jason: Our app of the week this week is Total Spaces. Now, I’m not
sure about you, Nick, but I really, really miss the grid spaces
that were available up until Lion came out.

Nick: I just thought they just disappeared or something, and then there was
some kind of setting I was missing. But I never actually talked
about it with anybody. I thought I was just dumb or something
and missed a setting.

Jason: Yeah, I felt the shame too and I kept it to myself. But great
news, there’s a new app called Total Spaces that brings back the
grid spaces to OSX Lion. Something that’s really awesome about
it is – so, I’ve got it installed right now and you’re going to
see a crazy flip animation. Boom. Did you see that? That was a
cube.

Nick: Whoa.

Jason: Here we go, and again. So, it gives you a little grid for your
spaces. You can have a whole bunch more grids than you actually
need to get anything done. I think it supports up to 16
different grid spaces, or even more. But the really nice thing
about it, at least for me, is that you can configure the time it
takes to switch between different spaces. This is something that
strangely has bothered me since Lion came out, that the spaces
animation was just a little bit too slow for me.

I don’t know. I know that’s a me issue. I’m working on it. But
anyway, check out Total Spaces. This is a paid app. It’s only
$12 and you can get that at totalspaces.binaryage.com. Really
worth it, and you’d probably know if you need it because I’ve
been missing this. Where has this been all my life since Lion
came out?

Nick: It is pretty sweet. I have missed it as well. Next up is ColorSense
for Xcode. Now, I confess, I am not an iOS developer myself, but
this does look like a pretty nifty tool. It’s basically a plugin
for Xcode, and it’s best demonstrated with this little YouTube
video that they have right here.

So, basically, as you’re typing in code, it will give you a real-
time color selector that’s the same OSX color selector that
you’re probably already familiar with. You can go ahead and
click on that and then select the color that you want to use,
instead of actually typing in hex decimal values or – honestly I
don’t know what they do in the…

Jason: RGB, is that a thing?

Nick: iOS world, I think they might use RGB just by looking at this video,
but pretty nifty stuff actually. So, you can go ahead and get
that on GitHub at github.com/OMZ/colorsense/4/xcode.

Jason: I showed that to an iOS developer friend of mine and he was
pretty impressed by it, so that means it’s great.

Nick: It sounds like it’s useful.

Jason: Next up is something called Underscore CLI. This is a really
useful command line utility that’s going to let you pipe JSON
into it, and by JSON I mean JavaScript Objects, not me.

Nick: Not you.

Jason: I’m not going to be piped into your command line.

Nick: I was confused by that.

Jason: Yeah. It’s going to let you pipe JSON into it, and then it will
format things for you. This is going to be extremely useful when
you’re working with different web APIs or anything that’s going
to output JSON. What’s really nice about it is that in addition
to just outputting this, coloring it for you, and making it look
a little bit prettier, you can actually do different queries on
the JSON objects if, let’s say you’re looking for a whole bunch
of different titles.

You can pipe to that and say, “Hey, just give me the titles,”
and it will do that for you. It’s a very, very simple utility
and that is also available on GitHub by D. Dobson. We can find a
link to that in the show notes on our YouTube page.

Nick: So, be sure to check it out.

Jason: Yeah.

Nick: All right, cool. Next up is Modern UI Icons available at
modernuiicons.com, and this is for Windows phones actually, so
it’s really cool that there are projects happening for Windows
devices. Basically, it’s just a collection of icons that are all
created in Expression Design, and you can go ahead and download
them and see the dot design source. So, I’m just going to go
ahead and pick a couple of these icons here.

Let’s say you were building maybe like a photo app or a clock
app or something like that. So, I’ll pick a couple there. When I
click on those they appear up here, so you see a nice little
preview of what that’s actually going to look like. So,
apparently this is an application that allows you to travel
through time. So, you can go backwards and forwards as needed.
Again, it’s really cool to see stuff happening in the Windows
phone space.

Jason: Particularly, I like that if I’m developing a Windows phone
application, I have a [inaudible 00:10:49] icon all ready to go.

Nick: That’s really important because you’re going use that all the time.

Jason: Yeah. Every app needs it.

Nick: Definitely.

Jason: So, it’s probably a good point to wrap up. I guess, today we
learned that we all miss grid spaces and there are some cool
projects coming out for Windows phone. Now, if you want to catch
us on Twitter, I’m @JSeifer.

Nick: I’m @NickRP.

Jason: Thanks so much for tuning into this episode of the Treehouse
Show. For show notes and more, check out our YouTube account at
YouTube.com/GoTreehouse.

Nick: Of course, this show is brought to you by Treehouse, the best way to
learn web design, web development and more. You can check us out
at teamtreehouse.com. Thanks so much for watching. We’ll see you
next time.

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from either HTML, CSS or Wordpress.

Start learning

Treehouse

Our mission is to bring affordable Technology education to people everywhere, in order to help them achieve their dreams and change the world.

Comments

Comments are closed.