[The Treehouse Show]

Hi, I'm Nick Pettit. >>And I'm Jason Seifer. >>And you're watching The Treehouse Show,

your weekly dose of Internet, where we talk about all things web design,

web development, and more.

[Seifer] In this episode, we'll be going over brand new CSS techniques,

the usual roundup of responsive design techniques,

and command line tools for web developers.

[Pettit] Let's check it out.

[The Treehouse Show]

[Pettit] First up is Simple Grid,

which is a barebones grid created for developers

who need a barebones grid.

[Seifer] So this is going to be something that gives you a lot to work with,

something that's complicated and gives you everything

you need to start doing a CSS framework?

[Pettit] It's barebones. >>Okay. >>Yeah. That's it, Jason.

The other cool thing about barebones grid is that it's also responsive,

as you would expect with most CSS grids these days.

When I was talking to Jason before the show, I said,

"What really is different about this grid?"

and we couldn't quite figure it out, but the thing is,

it is very simple, so it's probably a really good learning tool

if you are trying to figure out how to use something more complex

like Twitter Bootstrap, for example,

or if you're just trying to build your own grid from scratch.

[Seifer] It's also really lightweight, which is really nice

maybe if you are just prototyping a site.

[Pettit] Yeah. And I think it's very important for CSS grids like this

to be lightweight, especially when they're responsive

and trying to deliver content to mobile devices.

[Seifer] When you say "barebones" I think of the word "bear" and then space, "bones."

Like the bones of a bear rather than a lightweight grid.

[Pettit] Jason, you're pretty.

[Seifer] Next up is BootMetro.

This is a metro-style web framework.

This is going to include CSS, HTML, and JavaScript

if you want to start coding websites like Metro.

This is going to be much more important now that

Windows 8 has officially been released.

[Pettit] So, just for a second, "Metro" meaning

the design language used by Microsoft. >>Yes.

The design language used by Microsoft, not--

it has nothing to do with clothes or style or anything like that. >>Got it.

[Seifer] So there's a bunch of different demos on the site that you can go over.

One thing that you'll see in a lot of Windows Metro apps

is something called this application bar,

and you can see it over on the bottom of the screen right here.

There are just tons of different tool bars

and things that you can add into your application.

They include different styling for tables

as well as dropdowns and kind of everything

that you would be expecting out of a framework these days.

So pretty easy. You can find the link to this BootMetro

in the show notes at youtube.com/gotreehouse.

[Pettit] Pretty nifty. Next up is typeset.css,

and this is just a style sheet that--

well, they describe it as a no-nonsense CSS typographic reset

for user-generated content such as blog posts

or comments or form posts, etcetera.

And you can go ahead and click through on the left side here

and see the different kinds of styling that typeset.css provides.

It is as described. It's just a really simple

set of styling for user-generated content.

Just so there's not stuff that's breaking the page

or going really far outside the bounds of a particular content area, etcetera.

So pretty nice. >>So this is something that you would use,

maybe, instead of a full framework if you just want

to reset the styles on your blog comments and maybe forum threads.

Anywhere where people can actually enter stuff.

You just use that part rather than something like Bootstrap or BootMetro,

which is a whole complicated framework.

[Pettit] Exactly. Just pretty simple and straightforward.

So next up, we're going to check out web trends.

[Web Trends]

Like many websites, the site for Time Magazine has gone responsive,

and we've seen this happen with Boston Globe, USA Today,

which we covered on a previous episode, and now Time Magazine

has made their website responsive as well.

[Seifer] It almost seems like making a website responsive

is a web trend in itself.

[Pettit] That could be the case, Jason.

So if we look at Time Magazine's website,

it looks like a pretty standard news website,

but if we go ahead and resize the browser here,

[Seifer] Whoa! >>And make it a little bit smaller,

you can see how, as we resize it, Time will respond--

not the concept of time itself, but Time Magazine.

That would be crazy.

Anyway, looking at the mobile version of Time here,

I think that there are a couple things that they didn't get quite right.

I really would much rather see just this view,

just the top news story with a picture and the top headline,

or maybe something more like this, where I get the top four headlines.

If you look up at the top here, they have the logo,

which I think is a little bit too large and branded.

Then they have this search box here,

which I don't really think is appropriate to show in this particular view.

I think it might go better down towards the bottom or something,

just because, when people come to a news site,

I don't think they're really looking to search immediately.

I think they're looking moreso to browse.

It's more of a passive activity where-- >>More like people

are going to be consuming the content rather than

be trying to enter things into it as soon as they hit a site.

[Pettit] Exactly. I think people are just hitting a site

to go ahead--or hitting a news site to go ahead and browse

and just see what the latest stuff is.

They don't necessarily want to go there to immediately search for an article

that they have in mind, or search for a topic that they're interested in.

So that seems a little bit off.

I also think these dropdown menus are a little much.

I think they could have consolidated this in some other way,

maybe put these topics down towards the bottom.

I don't know. The dropdown menus just seem wrong for this small of a screen.

[Seifer] Now, if you could change one thing about this,

what do you think it would be? >>I think I would just try to simplify it.

I think what's apparent here is that they took a pre-existing website

and then tried to make it responsive.

Which is a perfectly legitimate approach,

as long as you do it right and you make the mobile version really simple.

The reason you want to do mobile first

when you're doing responsive web designs and then working your way up

to those desktop layouts is so that you concentrate

on the core experience and make something really, really simple,

and then you add things on top of that as you go up to larger screen sizes.

So I think they got that a little bit wrong here.

It looks pretty cluttered for a mobile website.

I mean, this big feedback button is kind of ridiculous for a mobile site.

Anyway, there's a chance you could go wrong with a responsive site.

[Seifer] Interesting. So if you want to check this out,

maybe the old version, would that be going back in time?

[Pettit] That's very good, Jason. >>Thanks. >>I'm impressed.

I'm proud of you. >>No problem. So that was web trends.

Next up, we have an article on Smashing Magazine called,

"Powerful Command Line Tools for Developers."

This is actually a great article if you're maybe just getting into

how to use the terminal or the command line.

Check it out and get reaquainted with some

of the different tools available to you.

The first thing that they go over is a tool called Curl.

Curl will fetch web pages, files, and anything you need from the command line.

There are a ton of different options and things that you can do with Curl,

and there's a nice introduction on here.

There's also introduction to other tools such as

Ngrep, Netcat, Sshuttle, which is going to be for doing SSH tunneling

to your different servers, which also works with DNS.

Finally, there's also something called Siege,

which is an HTTP benchmarking tool.

You can do this to do testing of your web application

from the command line, so it'll go through and simulate

a bunch of different rapid connections to your web application.

From there, using that data, you can figure out what you need to optimize inside your app.

Anyway, it's a great roundup, and they actually tell you

how to use these tools on the site, so check that out.

[Pettit] That's really handy. You know, one thing I've said on the show before,

and I want to re-emphasize, is that I feel like a lot of designers

are sometimes afraid to use the terminal, they think it's just

really scary, and they'd rather stick to their HTMLing and CSSing

and Photoshop and stuff, but it's a really, really useful tool,

and it can make you a lot more independent

and make you a really powerful asset to a team of designers and developers.

[Seifer] So I guess if I were going to redo my Halloween costume,

and I was going to a party full of web designers,

I could be a terminal. >>That's right. >>And that would scare everybody.

[Pettit] That is pretty scary to some people.

Next up, and I'm going to say this wrong.

I think it's Macky-Sue? Makisu?

It's Japanese. >>I have nothing to offer.

[Pettit] Basically, this is a set of menus,

or dropdown menus, and I'll go ahead and toggle this

so you can see-- >>Wow, it rolls up! >>how these fold up

and how these fold back down, and each one of these

is just a different style or different pacing of animation.

They're titled after different types of sushi,

which I think is pretty cool.

If we go ahead and go over to the GitHub page,

it says it's an experimental CSS 3D dropdown concept,

and you can actually use it as, you guessed it, a jQuery plugin.

Now, when I first saw this, I thought, what the heck is the application of this?

And I think you'd want to use this on pages

that might be a little bit more flashy in your app.

So say, for example, you had a web application

that was like a subscription app, and you had a plans page,

and you wanted to show all of the features of the app.

You might say, learn more, and you can go ahead and click,

and it'll fold down like a sushi menu and show you

all of the features that you'll get with each different kind of plan.

I think it's a little bit flashy, but sometimes you do need that.

[Seifer] It's an interesting experiment. >>Yeah, I know.

As an experiment, it is very cool.

[Seifer] It's really cool to see what you can do with CSS these days. >>Definitely.

[Seifer] Finally, over on Kaushik Gopal's online journal,

there is "Yet Another Newb Guide to Git."

Now, if you don't know Git, or you're looking to learn,

this is just a fantastic starting point,

with casual references all the way up to intermediate and advanced uses of Git.

[Pettit] Who's Git? I've heard of this person,

but I don't know who this person is.

[Seifer] Git is a source control management system

that's pretty popular, works with GitHub,

and there's actually a walkthrough of how to use GitHub on here, as well.

[Pettit] Very cool. >>So if you know somebody who is wanting to learn Git,

definitely check out this page, which, again, you'll find in our show notes.

[Pettit] Awesome stuff. Now Jason, what did we learn today?

[Seifer] We learned nothing, Nick. >>Absolutely nothing?

[Seifer] We learned that the Web is a barren wasteland

full of time-wasting opportunities and cat pictures.

[Pettit] You should go to a library. >>Exactly.

If you want more information on anything we talked about

this week, head on over to our show notes at youtube.com/gotreehouse.

[Pettit] And, of course, if you'd like to follow us on Twitter,

I am @NICKRP. >>And I am @JSEIFER.

[Pettit] And if you'd like to check out more videos like this one

and learn about web design, web development, business, iOS or Android,

be sure to check us out at teamtreehouse.com.

Thanks so much for watching, and we'll see you next week.

[The Treehouse Show]