Tip:
Highlight text to annotate it
X
[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 TotalSpaces.
[Nick] Let's check it out!
[telegraph sound] [♪ music playing ♪] [The treehouse Show]
[Jason] The first thing that we're going to be talking about this week is jQuery fundamentals.
You can find this at jqfundamentals.com. [http://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 of 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, 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 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.
It goes through all of the jQuery basics with links to 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.
Once again, that's jqfundamentals.com.
It's always worth it to brush up on JavaScript.
[Nick] That's pretty cool, Jason.
I know some of those words. [Jason] Yeah. [ Nick] Pretty nifty.
[Jason] Like the 'j'. [Nick] Yeah. [Jason] That's pretty good.
[Nick] Next up is Yeoman, available at http://yeoman.io/packagemanager.html.
Basically, Yeoman is a package manager for modern web work flows.
It's a command-line tool that you go ahead and install.
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 of 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 take out all of the steps that can be
a little bit tedious when you start a new application.
So, it's kind of cool to have that automated.
[Nick] Yo, man!
[Jason] Next up is something called Bower which is pretty similar to Yeoman,
[http://twitter.github.com/bower/]
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 Bower-install jQuery,
and 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.
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--gives you just enough to get you started with a project.
So, check that out.
You can find that on Twitter's github at http://Twitter.github.com/bower.
[Nick] Pretty nifty. Next up is This Is Responsive.
That's actually the name of the project--This Is Responsive.
You can check it out at:
http://bradfrost.github.com/this-is-responsive/index.html.
It's really easy to remember.
[Jason] This dash hurts dash my dash brain just 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 is constantly changing and evolving.
When you click on 'Patterns', for example, you can go ahead
and check out 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.
And then finally, there's news about responsive design.
So they just have a nice news feed 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.
It can be 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!
[♪ music playing ♪] [APP PREVIEW]
[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] You know, I 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 just--I thought I was just dumb or something and missed a setting.
[Jason] Yeah, I felt ashamed too, and I kept it to myself. [Nick laughs]
[Jason] But great news! There's a new app called Total Spaces
that brings back the grid spaces to OS 10 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. Do it 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 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 twelve dollars.
And you can get that at https://totalspaces.binaryage.com.
Really worth it and you 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 Color Sense 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 plug-in for Xcode,
and it's best demonstrated with this little YouTube video that they have, right here.
Basically, as you're typing in code, it will give you a
real-time color selector that's the same OS 10 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 hexadecimal values or--
honestly, I don't know what they do in the--
[Jason] RGB--is that a thing?
[Nick] iOS well--I think they might use RGB just by looking at this video.
Pretty nifty stuff, actually.
So you can go ahead and get that on GitHub at:
https://github.com/omz/ColorSense-for-Xcode.
[Jason] I showed that to an iOS developer friend of mine,
and he really was pretty impressed by it.
So, that means it's great.
[Nick] Sounds like it's useful.
[Jason] Next up is something called Underscore CLI.
[https://github.com/ddopson/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--
[Nick] Not you. [Jason] Not me.
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.
And 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 ddopson.
We can find the link to that in the show notes on our YouTube page.
[Nick] So, be sure to check it out. [Jason] Yeah.
[Nick] Alright, cool. Next up is Modern UI Icons
available at http://modernuiicons.com.
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 .design Source.
I'm just going to go ahead and pick a couple of these icons here.
Let's say you were building maybe a photo app, or a clock app, or something like that.
So I'll pick a couple there, and 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.
Apparently, this is an application that allows you to travel through time,
so you can go backwards and forwards as needed.
And 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 an Nyan Cat icon all ready to go.
[Nick] That's really important because you're going to 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 missed grid spaces,
and there are some cool projects coming out for Windows Phone.
If you want to catch us on Twitter, I'm @jseifer. [Nick] And I'm @nickrp.
Thanks so much for tuning in to this episode of The Treehouse Show.
For show notes and more, check out our YouTube account
at http://youtube.com/gotreehouse/.
[Nick] And, 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 http://teamtreehouse.com.
Thanks so much for watching, and we'll see you next time.
[♪ music playing ♪] [The Treehouse Show]