LearnAccessibility, CSS Architecture, and Web Printing | Treehouse Show Ep 34


writes on April 9, 2013

In this episode of The Treehouse Show, Nick Pettit (@nickrp) and Jason Seifer (@jseifer) talk about accessibility, CSS architectures, and web printing.

Here are the links for the week:

The Treehouse Show on iTunes!


Sublime Web Inspector


CSS Architectures: New Best Practices


Color Oracle

Printing the Web

Each week, we’ll release:

– New episodes of ‘The Treehouse Show’ – up to date news and tips on web design, coding, and more.
– ‘Quick Tip’ videos – these are short how-to videos on today’s most relevant web technologies.
– and much more!

Video 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 talking about accessibility, CSS
architecture and printing.

Nick: Let’s check it out. First up, we have some big news.

Jason: Huge news.

Nick: The Treehouse Show is now available on iTunes as a podcast.

Jason: Christmas came early.

Nick: That’s right. You can go ahead and head over to iTunes, type in
Treehouse Show and you should be able to find us there. We have a podcast
available in HD and in standard definition, sp every Tuesday, if you would
prefer to watch The Treehouse Show on iTunes, instead of YouTube or on the
Treehouse site, it’s now available there as well.

Jason: That’ll sync to your phones, your iPods, whatever you kids have
these days.

Nick: That’s right and if you like the show, please be sure to head over
there and give us a review, a rating, subscribe to us.

Jason: If you don’t like the show, don’t rate it.

Nick: Yeah.

Jason: No, we’re just kidding, sort of. So first up we have something
called pixi.js. This is a pretty interesting project and it’s really,
really cool. So what this does is a cross-browser implementation of webGL,
canvas, and mobile. So you get a 2D webGL renderer, with seamless canvas
callback that lets it work across all modern browsers.

Now that’s certainly a lot of words, but what you really want to see is
demos, so check out what you can accomplish using pixi.js. One of the
examples that they have on their site is a game which is pretty amazing and
this is all done in JavaScript, and you would expect it to be a lot
heavier, a lot slower to run, but it’s actually really, really quick and
pretty fun to play.

So we’ll have a link to that in the show notes, which you can also get on
iTunes, as well as our YouTube channel, anyway, a bunch of great stuff and
actually very easy to program for you. So check that out, that’s pixi.js.

Nick: Very cool stuff. Man, JavaScript is getting pretty fast these days.

Jason: Yeah, or pixie fast.

Nick: Very good, Jason.

Jason: Thank you.

Nick: Next up is the Sublime Web Inspector. Now if you’re familiar with
Sublime Text, which just released its third version. I think it’s still in
beta though.

Jason: Yeah.

Nick: If you’re familiar with Sublime Text, and you’re familiar with the
Web Inspector, and say Google Chrome or in Firefox, then you’re going to
love this, because it puts two and two together, bam, right in one
interface. Basically, it’s just a plugin for Sublime that allows you to
debug JavaScript right inside of the text editor. So it basically closes
the feedback loop between the browser and the text editor, so you don’t
have to bounce back and forth. You can go ahead and set breakpoints.

There’s actually a console in there, looks like there’s interactivity;
that’s a headline on the page here. There’s a debugger, and a whole bunch
more stuff and you can go ahead, and install it. It’s available on GitHub,
and if you like it you should support it by donating. Very cool stuff.

Jason: Yeah, if you’ve ever used the LiveReload plugin, which we’ve talked
about on previous Treehouse shows, which I don’t know if we mentioned, the
entire archive is in our iTunes feed, you could go back, and check them out
to see what we have to say about LiveReload.

Nick: iTunes.

Jason: Did we mention that yet?

Nick: I think we did.

Jason: Next up, we have a project called Intro.js. This is “better
introductions for websites and features with a step-by-step guide for your
projects.” So there is a nice demo on here. You click show me how, and you
can highlight sections of the page, as you’re going through. You click next
and it’ll go through, and highlight different sections of your page, skip
it and whatever. This is as you would expect, very, very easy to use. You
can get the code on GitHub, as well. So this is for something, you know
it’d be really useful in the blank slate of a web application. A user gets
to your site; they have no idea what to do.

Nick: Or maybe they haven’t entered in any data at all, and it’s basically
just blank. Say it’s a to-do list app. They haven’t typed in any to-dos
yet. It’s just blank and they need to know what to do.

Jason: So this would be a great way to introduce them to your site.

Nick: I see what they did there.

Jason: Yeah. And this’ll also be available in the show notes on our iTunes

Nick: Thanks, Jason. That was a really good intro to Intro.js, iTunes, so
next up is this really amazing article from Denise Jacobs over on Site
Point, called CSS Architectures: New Best Practices. Basically, it’s just a
collection of all the latest best practices in CSS; you want to reset your
page with normalize.css, so that you create a level playing field for a
cross-browser development, a very good tip there. If you’re still using a
clearfix that looks like this, to clear your floated elements, Denise says
“we really need to talk,” and she suggests a few other solutions there, and
there’s just lots of great tips in here. I highly recommend you check it
out. Icon element, that’s another good tip there, and get on the CSS3

I think we’ve talked a lot about CSS3 on the show, but of course, CSS3 can
do a lot to enhance your frontend performance, reduce the amount of images
that you’re using. I mean there are a million different benefits there, so
very cool article. If you’re new to web development, this would be
especially useful to you.

Jason: That was me getting on the CSS3 train.

Nick: Cool.

Jason: Next up we have a project called Desant. This is an open source
landing page creator and it’s actually feature packed, so this is a ready-
to-go application that you could check out. And what you’re going to do is
set up different landing pages, where you’ll track things like where it’s
coming from, different people’s IP addresses. You can track your sign ups,
user’s locations, and then you can export all this data pretty easily. This
is like I said, really easy to use, really quick and it’s available on
GitHub, so you can go ahead, and clone this repository and then start
tracking your users, and setting up landing pages.

Nick: That’s pretty cool. It seems like a lot of stuff is over on GitHub
these days. Strange, if you’re new, maybe you should check out GitHub.

Jason: Yeah, but what’s not available on GitHub is going to be our show
notes in the iTunes feed.

Nick: That’s on iTunes.

Jason: Right.

Nick: Yeah, iTunes.

Jason: Search for the Treehouse Show.

Nick: Treehouse Show, okay. Next up is Color Oracle. Color Oracle is an app
that’s available for Mac OS10, as well as Windows, and it looks like it’s
even available for Linux, pretty cool. Basically it allows you to see what
your website or your application, basically your entire screen, might look
like to someone that has a color impairment, so in other words, if I were
looking at a fairly colorful webpage here; let’s see if I can find one.
There we go. Pixi.js has a pretty colorful page. I’ve gone ahead and
installed the app here, and when I click through here, I can see what these
different color vision impairments might look like. So there’s some color
available, but other colors are not.

Now I’ll go ahead, and switch it back to normal vision here, flip back to
Color Oracle. This is really useful if you want to make your website . . .

Jason: More accessible.

Nick: . . . more accessible and look better for people that have color
vision impairments. Of course, color blindness is actually really common,
and so it’s really important to make sure that your site has enough
contrast in light and dark values. So in other words you don’t want to have
two elements that are two different colors right next to one another. If
they’re actually the same lightness and darkness, you want to make sure the
lightness and darkness is what’s differentiating those, and not just the
color. So a good way to test that is with a tool like Color Oracle, or you
could even just look at your webpage in black and white.

Jason: That’s a really good idea.

Nick: Yeah.

Jason: You know we talk a lot about responsiveness on the show, so this is
a whole other spectrum of that gamut.

Nick: Yes, it is.

Jason: A lot of words. Next up we have an article called Printing for the
Web. This is by Hans Christian, and what he’s doing in this article is
going through, and talking about a lot of different techniques that you can
use when you’re formatting your webpages for printing. This is something
that gets left out a lot, when you’re writing your CSS. But there’s
actually a wealth of things that you can control, things like page
orientation, you can specify that if somebody’s printing out your page, it
should be done in landscape. You can even control where certain page breaks
happen or don’t happen.

So Hans goes through, and he’s got just a ton of different suggestions and
improvements that you can make to your content. As an example, somebody is
not going to be able to see a link in the content immediately, so if you
want to you can put the title or the URL, right after the formatting of the
link. So anyway great article, and you can check that out in the show notes
on YouTube or iTunes.

Nick: Mainly on iTunes.

Jason: Right.

Nick: You know so if you haven’t checked out iTunes yet, you should.

Jason: Yeah, you should probably do that.

Nick: This joke is getting tired, all right.

Jason: I think that’s all I’ve got.

Nick: I think that’s it. I am @nickrp on Twitter.

Jason: And I am @jseifer. If you like this podcast, you can subscribe to it
on YouTube at www.youtube.com/gotreehouse/ or on iTunes.

Nick: Very cool stuff, and of course, if you’d like to see more videos like
this one, be sure to check us out at www.teamtreehouse.com. Thanks so much
for watching, and we’ll see you next week.

Announcer: If you’d like to see more advanced videos and tutorials like
this one, go to www.teamtreehouse.com and start learning for free.

2 Responses to “Accessibility, CSS Architecture, and Web Printing | Treehouse Show Ep 34”

  1. webtecmart on April 13, 2013 at 8:20 am said:

    very informative video, like it…

  2. Thanks for sharing this video. i hope you bring something more unique every week for us to learn from.

Leave a Reply

You must be logged in to post a comment.

man working on his laptop

Are you ready to start learning?

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Start a Free Trial
woman working on her laptop