Web Development Tips | Treehouse Show Episode 7

treehouseshow7

In this episode of The Treehouse Show, Nick Pettit (@nickrp) and Jason Seifer (@jseifer) talk about typing practice for programmers, design tricks FaceBook uses, and Python books. They also discuss BigScreen.js for full screen JavaScript, navigation patterns for responsive design, and more.

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

Typing Practice for Programmers
http://typing.io/

5 Design Tricks FaceBook Uses to Affect Your Privacy Decisions
http://techcrunch.com/2012/08/25/5-design-tricks-facebook-uses-to-affect-your-privacy-decisions/

Free Python Books
http://pythonbooks.revolunet.com/

BigScreen
http://brad.is/coding/BigScreen/

Skitch
http://skitch.com

jsPlumb
http://jsplumb.org/jquery/demo.html

Some Web Development Tips
http://duruk.net/some-web-development-tips/

Complex navigation patterns for responsive design
http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/

Avgrund
http://lab.hakim.se/avgrund/

Transcription:

Nick: I’m Nick Pettit.

Jason: I’m Jason Seifer.

Nick: And you’re watching the Treehouse Show, your weekly dose of internet,
where we talk about all things web design, web development, and
more.

Jason: In this episode, we’ll be going over a typing tutor for
programmers, be going over different design tricks that you can
use in your applications, as well as our first ever app review,
ooh.

Nick: Let’s get into it.

Jason: 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. Really great
practice runs in here. Just get your typing skills – pardon the
pun – up to speed.

Nick: I see what you did there, Jason. That’s very clever actually. Yeah.

Jason: I thought it was good.

Nick: Recently there was a really cool article on TechCrunch about five
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 changed
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
that 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, 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 newer button
here. But it also doesn’t give the users a chance to necessarily
deny that information from the app.

Jason: Right, not with an explicit button click. They can hit the Back
button or go to a different website, but I miss 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’ve
already put on the internet even more public.

Nick: It sometimes feels good to hit that Don’t Allow button.

Jason: Yeah.

Nick: Another trick that they’re using is what TechCrunch calls the “tiny
grey 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 grey text. So basically, they’ve taken
the fine print and made it actually look like…

Jason: Even more fine.

Nick: …fine, fine print, which again, from a design perspective, I feel
like it makes 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.

Jason: Which means, “too long, didn’t read,” for those of you
listening that don’t know what that abbreviation…

Nick: That’s the longer form of too long, didn’t read, or TLDR, yes.

Jason: I find it really interesting how different designs can affect
your decisions and what you’re going to do on a website.

Nick: Yeah, definitely, but well worth the read.

Jason: 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 making
games with Python, and these are all completely free to read.
Select anyone. 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.

Nick: Cool stuff. Next up is BigScreen. BigScreen 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 they can see the full screen image,
you can go ahead and do that, so pretty nifty.

I, just from a design perspective, love that they’re including
“Why should I use it?” right there on the webpage, because
that’s exactly the question I had. Why would you want to just
drop this into a webpage? It makes sense in general, but
basically what BigScreen does that’s really nice is it smooths
out browser inconsistencies and a lot of bugs that prevent
people from using that JavaScript FullScreen API very smoothly.

Jason: Yeah, I understand there are a lot of really minute details you
have to consider when you’re going full screen.

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

Jason: You’re thinking about the big picture.

Nick: That’s right. I’m thinking about the big screen. I got it. But it
also makes it really easy to make images full screen from an
iframe, which I actually didn’t know this. Apparently, on the
BigScreen site they’re saying that that’s actually particularly
difficult, so it’s nice that they smoothed that out as well. It
also works with video, which is really cool. It weighs in at
just under one 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 page load times.

Jason: That’s awesome.

Nick: That’s pretty much it for BigScreen. Next up is our very first app
review.

Jason: The app we’re going to be taking 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, so you’ll see that there’s
different Evernote sharing options in the app.

If I take Chrome out of full screen 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 is a screenshot that I took
earlier in the day of our live show [inaudible 00:06:31]. If I
wanted to call out a certain area of the screen, I can click the
arrow button and then draw something to it. Then if I want to
label it, say, “This is a part of the screen.” Isn’t that cool?
The nice thing about it, though, 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 a Cloud app, or pretty much
whatever you want to do.

Skitch is a great app. 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.
Skitch.dom, I find it really, really useful, and pretty much
integrated into my muscle memory for day-to-day life, command-
shift-5.

Nick: Once you start using it, it does become a little bit essential.

Jason: Yeah. It’s pretty strange how it sneaks up on you like that.

Nick: Pretty cool. Next up is jsPlumb, 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 are a couple of different types of charts.
I’m going to go ahead and just select a different one here,
where you can go ahead and drag connections around. It says do I
want to connect window one to window two? Yeah, absolutely,
let’s go ahead and look at another one. That maybe includes some
animation. So you can 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 MooTools or you can use it with YUI3. 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.

Jason: Yeah, something like 80% of websites use JQuery now.

Nick: Yeah. The thing that I was impressed by is you can also use it with
different rendering modes. So you can not only render this with
SVG, you can also do this with the Canvas, or even VML, which I
thought was pretty nifty.

Jason: Wow. That’s interesting.

Nick: Yeah.

Jason: You don’t hear much about VML anymore.

Nick: No, you don’t. That’s why I saw that and I thought, “Jeez, that’s
crazy.”

Jason: That’s way backward compatibility.

Nick: Mm-hmm, way back. But it’s pretty cool stuff. You can go ahead and
download jsPlumb on GitHub and put it in your website. So the
next time your boss asks you to go ahead and put together a drag
and drop interface…

Jason: Which never happens.

Nick: …you can go ahead and make it really easy on yourself.

Jason: Visually it reminds me a little bit of Yahoo Pipes. Not in
functionality, but in what it lets you do.

Nick: Just in the front end of Yahoo Pipes?

Jason: Yeah.

Nick: Yeah. Pretty cool stuff.

Jason: 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. As you go through, this is maybe not so much
for a beginner to take a look at. I mean, read the lists, keep
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 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’re most likely not
protecting yourself against things like cross-site request
forgery attacks, especially AJAX requests. So you have to learn
about how to use AJAX setup so that you include your different
tokens by default. Performance side, something we talk about on
the show 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.

Just generally, really, really great advice on dealing with kind
of larger scale 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 show notes over on our page.

Nick: Pretty cool stuff. Next up, I’d like to finish out by talking about -
well, actually you have more segment after me. I’m sorry. I
almost ended the show early there. That 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 patterns that will work for
desktops, but we need to kind of modify those so that they work
across a whole array of devices.

I really like this blog post from Brad Frost, where he talks
about basically just that. He shows 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
frets. Then you can select something underneath that.

When you go down to the mobile size, they actually just have
that top level of navigation. So you click on that and it takes
you to the category landing page, instead of actually having you
drill down into the other various topics. So, pretty cool stuff,
well worth the 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.

Jason: Yeah. We’re still in the really early days of all this stuff.

Nick: For sure. I mean, responsive web design has been around since around
May of 2010, I think.

Jason: Oh, wow. That’s ancient in internet years.

Nick: 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.

Jason: One year is actually equal to 20 internet years. Just keep that
in mind when you’re doing the internet year math.

Nick: That’s a cool factoid. Thanks for that, Jason.

Jason: Next up we’re talking about a quick little project called
Avgrund, and this is just a fun experiment I thought that we
would display on the show. This is Modal Dialog’s and JQuery.
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 show notes. So, really like it,
Avgrund.

Nick: Very cool stuff. Well, that’s it for this week’s episode of the
Treehouse Show. Jason, what did we learn today?

Jason: We learned that there’s no right way to do responsive web
design.

Nick: That’s right. We also learned that your boss is probably going to ask
you for a drag-and-drop interface very soon, and you should be
prepared for that. I think that’s pretty much it.

Jason: Yeah. I think that’s about it.

Nick: I feel good.

Jason: I feel great, never been better. If you want to learn more
about web design or web development, check out
teamtreehouse.com.

Nick: 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.

Jason: And I’m Jason Seifer, and I’m @jseifer on Twitter.

Nick: We’ll see you next week.

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.