[The Treehouse Show]

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

Your weekly dose of Internets where we talk about all things

web design, web development, and more.

In this episode, we'll be going over a typing tutor for programmers.

We're going over different design tricks that you can use

in your applications as well as our first ever App review.

Ooooh. >>Let's get into it.

[The Treehouse Show]

As a developer, one thing that you're going to be doing a lot--

in fact, most of the time, is typing.

Now, normal typing tutors aren't going to get all of the extra special characters

that you need to type while coding such as brackets, colons, ampersands--

all the wonderful characters you have to type all the time.

Now, recently a website called typing.io came out, which features different

exercises to go through and practice your typing skills.

You can check that out over at typing.io.

A really great practice runs in here and just get your typing skills, pardon the pun, up to speed.

I see what you did there Jason. That's really clever actually.

Huh? >>Yeah. >>Huh. Oh, that was good.

Recently, there's a really cool article on TechCrunch about 5 design tricks

that Facebook uses to affect your privacy decisions.

It's really well worth the read, but I just want to go over just the first

couple of things that Facebook change recently.

First, they have this single button trick as TechCrunch calls it

where they used to have an allow and don't allow button

when an App was requesting permission for your information.

Now, they've simplified that to a single button which just says "Play game."

Now, I think that's actually pretty smart from a user's perspective because basically

you're just saying either you're going to hit the button or you're not going to.

All right, so it narrows the choices for the user and I think the don't allow button

is kind of strange actually when I see this weird button here.

But, it also doesn't give the user the chance to let's say deny that information from the App.

Right--not with the explicit button click.

They can hit the back button or go to a different website, but I missed the don't allow button.

I almost instinctively click it all the time because I don't want anybody

having all of my information that I already put on the Internet even more public.

It sometimes feels good to hit that don't allow button. >>Yeah.

Another trick that they're using is what TechCrunch calls the tiny gray font trick.

Basically, they used to have some bold fonts next to their allow and don't allow buttons,

and now they've reduced that to just tiny gray text.

So basically, they've taken the fine print and made it actually look like-- >>Even more fine.

Fine, fine print--which again, from a design perspective, I feel like it make sense.

It's not stuff that people are always going to necessarily read.

I feel like it's almost like an end user license agreement just in a very TLDR form.

Which means too long, didn't read for those of you listening and don't know what that---

That's the longer form of too long, didn't read or TLDR.

I find it really interesting how different designs can affect your decisions

and what you're going to do on a website.

Yeah, definitely, but well worth the read.

Next up, if you're looking to learn the Python language,

head on over to pythonbooks,revolunet.com.

There is a huge collection of different books to learn Python and Django

and even looking games with Python, and these are all completely free to read.

Select any one, just click it, and boom--good to go. Read up on your Python.

Python is actually a really cool language when you get into it,

very similar to Ruby, except in syntax.

Cool stuff. Next up is big screen.

Big screen is basically a little piece of JavaScript that you can include

on your website to access the JavaScript Fullscreen API.

So if you have a nice picture on your website and you want people to go ahead and click it

and enhance and let them see the the fullscreen image, you can go ahead and do that.

So pretty nifty, and I, just from a design perspective, love that they're including

"Why should I use it?" right down the webpage because that's exactly the question I had.

Why would you want to just drop this into a webpage, make sense in general.

But basically what big screen does that's really nice is it smoothes out

browser inconsistencies and a lot of bugs that prevents people from using

that JavaScript Fullscreen API very smoothly.

Yeah, I understand there's a lot of really minute details you have to

consider when you're going fullscreen.

I don't like considering minute details when I'm trying to create a masterpiece of a website.

You're thinking about the big picture. >>That's right. >>>Right.

I'm thinking about the big screen. I get it.

But it also makes it really easy to make images fullscreen from an iframe,

which I actually didn't know this apparently on the the Big Screen site

that they're saying that that's actually particularly difficult.

So, it's nice that they smooth that out as well and it also works for video, which is really cool.

It weighs in at just under 1 kilobyte when it's g-zipped and minified, which basically means

that it's not going to have much of an impact at all on your pageload times.

That's awesome. >>That's pretty much it for big screen.

Next up is our very first App Review.

[App Review]

The App that we're going to be taking a look a look at today is called Skitch.

Skitch is just a quick little App for drawing attention to what you're working on.

This is really useful in a client setting where you're doing some work for a client,

making some changes to a site, you can use Skitch to capture any area of your screen

and then add text or arrows or even some different shapes on there.

You can get this over at skitch.com. It was recently purchased by Evernote.

You'll see that there's different Evernote sharing options in the App,

and if I take Chrome at a fullscreen here, I can go ahead and bring up Skitch.

Now, I've got a shortcut key to do it. Here's what the App looks like.

This has a screenshot that I took earlier in the day of our live show Trello board

and if I wanted to call out a certain area of the screen, I can click the arrow button

and then draw something to it and then if I want to label it say,

"This is a part of the screen"--ain't that cool.

The nice thing about it though is you get this little drag me icon

and you can drag that anywhere you want to.

This could go into an email, it could go into Cloud App,

or pretty much wherever you want to do.

Skitch is a great App--I use it all the time, just for capturing parts of screens or whatever--

anything on the screen--it does full windows. You can do partial windows.

So check that out at skitch.com.

I find it really, really useful and pretty much integrated into

my muscle memory for day-to-day life--CMD + SHIFT + 5.

Once you start using it everyday, it become a little bit essential. >>Yeah.

It's pretty strange how it sneaks up on you like that. >>Pretty cool.

Next up is JS Plum, which is basically this really cool tool that allows you to create

these crazy-looking charts where you can drag these elements around

and maintain connections between them.

There's a couple of different type of charts.

I'll go ahead and just select a different one here where you can go ahead and drag

connections around and it says "Do you want to connect window 1 to window 2?"--

Yeah, absolutely. Let's go ahead and look at another one. That may includes some animation.

So if you click on stuff and it will smoothly animate around.

You can actually use this with a couple of different libraries.

You can use it with new tools or you can use it with YY3, but of course,

I think most people are going to be using it with jQuery just because

it's the most popular JavaScript library out there.

Yes, something like 80% of websites use jQuery now. >>Yeah.

The thing that I was impressed by this, you can also use it with different rendering modes.

So you can not only render with SVG, you can also do this with the Canvas or even VML,

which I thought was pretty nifty.

Oh, that's interesting. >>Yeah. >>But we don't hear much about VML anymore.

No, we don't. That's why--I saw that and I was like "Geez, that's crazy."

It's way backward compatibility. >>Uh-huh, way back.

But, it's pretty cool stuff, you can go ahead and download JS Plum

on GitHub and put it on your website.

So next time your boss ask you to go ahead and put together

a drag and drop interface, just let it out.

You can go ahead and make it really easy on yourself.

Visually, it reminds me a little bit of Yahoo! Pipes--not in functionality but more it lets you do.

Just in the front end of Yahoo! Pipes. >>Yeah. >>Yeah. Cool stuff.

So next up, there is a blog post on some web development tips.

This is some really, really useful information from a former engineer at Digg,

and as you go through, this maybe not so much for a beginner to take a look at

and then read the list, keeps some things in mind, but when you get to a

more intermediate level of doing web development, fantastic tips in here.

Just going to call out a couple of things.

I don't have time to go over the whole article in the show but things to keep in mind

unless you're using a framework, you are most likely not protecting yourself

against things like cross site request forgery attacks, especially AJAX request.

So you have to learn about how to use AJAX setups so that you

include your different tokens by default.

Performance site, something we talk about on the show a lot is spriting your assets.

On previous episodes, we've gone over a few tools

that you can use to make CSS spriting a lot easier.

And just generally, really, really great advice on dealing with kind of larger scale

of web applications and websites and what goes into actually developing them.

So keep that in mind, check it out. The link will be in the share notes over on our page.

Pretty cool stuff. Next up, I'd like to finish out by talking about--

Well, actually we have one more segment after me. I'm sorry.

I almost ended the show early there. It could have been a disaster.

Next up, we're going to talk about complex navigation patterns for responsive web design.

Now, this is something that I have actually given talks about in the past

because I think that as we move towards this new responsive web design era,

we have to develop--basically design patterns that are going to fit across mobile devices

including tablets and phones as well as desktops.

Because we've established a lot of design pattern that will work for desktops,

but we need to kind of modify those so that they work across a whole array of devices.

And I really like this blog post from Brad Frost when he talks about basically just that.

He show us as how navigation can be modified as a design pattern across various devices.

The one I'd like to highlight is down at the bottom here where on the

World Wildlife Fund's responsive website, they have these drop-down menus

where you can go ahead and look at species, places, and threats,

and then you can select something underneath that.

When you go down to the mobile size, they actually just have that top level

with navigation, so you click on that and it takes you to the category landing page

instead of actually having you drill into the other various topics.

So pretty cool stuff, well worth read, and I like that it also breaks down the pros and cons

of each because there's not necessarily always going to be one

really good solution that works for everything.

Yeah. We're still in the really early days of all these stuff, so--

For sure, I mean responsive website has been since around May of 2010, I think.

Wow, that's ancient in Internet years.

In Internet time, it does seem like a long time, but I think there's actually still

a whole lot more to discover there that we haven't really fully explored in terms of design.

One year is actually equal to 20 Internet years, just keep that in mind

when you're doing the Internet year math.

It's a cool factoid. Thanks for that Jason.

Next up, we're talking about that quick little project called Avgrund

and this is just a fun experiment, not that we would display on the show.

This is modal dialogues in jQuery and the cool thing about it is that it uses

CSS3 transforms to scale components of the background and blur things out

when you click the modal--nothing extremely useful about it, it's really just an experiment,

but it's so cool that you can do these things now and it's really smooth.

That's it, you can check out the code over on the GitHub

and again, the link will be in the share note so--

Really like it--Avgrund.

Very cool stuff. Well, that's it for this week's episode of The Treehouse Show.

Jason, what did we learn today?

We learned that there's no right way to do responsive web design. >>That's right.

We also learned that the boss is probably going to ask you

for a drag-and-drop interface very soon.

You should be prepared for that and I think that's pretty much it. >>Yeah.

I think that's about it. >>I feel good. >>I feel great. Never been better.

If you want to learn more about web design or web development, check out teamtreehouse.com.

And be sure to check out previous episodes at youtube.com/gotreehouse.

That's it for this week's episode. I'm Nick Pettit and I'm @nickrp on Twitter.

And I'm Jason Seifer and I'm @jseifer on Twitter. >>We'll see you next week.

[The Treehouse Show]