Tip:
Highlight text to annotate it
X
[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]