Episode 34: Accessibility, CSS Architecture, and Web Printing

[The Treehouse Show] 0:00 I'm Nick Pettit. >>I'm Jason Seifer. 0:01 And you're watching The Treehouse Show, 0:03 your weekly dose of Internets where we talk about all things web design, 0:05 web development and more. 0:08 In this episode we'll be talking about accessibility, 0:09 CSS architecture, and printing. 0:12 Let's check it out. 0:15 [morse code beeping sound] 0:18 [The Treehouse Show] 0:21 First up we have some big news. >>Huge news. 0:23 The Treehouse Show is now available on iTunes as a podcast. 0:27 Christmas came early. >>That's right. 0:32 You can go ahead and head over to iTunes, type in Treehouse Show, 0:34 and you should be able to find us there. [trhou.se/Z1McIE] 0:38 We have a podcast available in HD and in standard definition. 0:41 So every Tuesday if you would prefer to watch The Treehouse Show on iTunes 0:45 instead of YouTube or on the Treehouse site, it's now available there as well. 0:50 That will sync to your phones, your iPods, whatever you kids have these days. 0:54 That's right. 0:59 And if you like the show, please be sure to head over there and give us a review, 1:00 a rating, subscribe to us. >>Yeah. If you don't like the show, don't rate it. >>Yeah. 1:05 No. We're just kidding. Sort of. 1:10 First up we have something called Pixi.js. 1:13 This is a pretty interesting project. It's really, really cool. 1:16 [goodboydigital.com/pixi-js-has-landed] What this does is a cross-browser implementation 1:20 of webGL, canvas, and mobile. 1:24 So you get a 2D webGL renderer with seamless canvas fallback 1:27 that lets it work across all modern browsers. 1:33 That's certainly a lot of words, but what you really want to see is demos. 1:36 So check out what you can accomplish using Pixi.js. 1:41 One of the examples that they have on their site is a game, which is pretty amazing. 1:45 This is all done in JavaScript. 1:51 You expect it to be a lot heavier or a lot slower to run, 1:54 but it's actually really, really quick and pretty fun to play. 1:57 We'll have a link to that in the show notes, 2:01 which you can also get on iTunes as well as our YouTube channel. 2:04 Anyway, a bunch of great stuff and actually very easy to program for. 2:10 So check that out. That's Pixi.js. 2:13 Very cool stuff. Man, JavaScript is getting pretty fast these days. >>Yeah. 2:15 Or pixie fast. >>Very good, Jason. >>Thank you. 2:20 Next up is the Sublime Web Inspector. 2:24 If you're familiar with Sublime Text, which just released its third version-- 2:27 I think it's still in beta, though. 2:33 If you're familiar with Sublime Text and you're familiar with the Web Inspector 2:35 in, say, Google Chrome or in Firefox, then you're going to love this 2:40 because it puts 2 and 2 together, bam, right in 1 interface. 2:45 Basically it's just a plugin for Sublime [sokolovstas.github.io/SublimeWebInspector] 2:49 that allows you to debug JavaScript right inside of the text editor. 2:53 So it basically closes the feedback loop between the browser and the text editor 2:57 so you don't have to bounce back and forth. 3:03 You can go ahead and set breakpoints. 3:05 There's actually a console in there. 3:07 It looks like there is interactivity. That's a headline on the page here. 3:10 There's a debugger and a whole bunch more stuff, 3:15 and you can go ahead and install it. 3:20 It's available on GitHub, and if you like it, you should support it by donating. 3:22 Very cool stuff. >>Yeah. 3:27 If you've ever used the LiveReload plugin, 3:29 which we've talked about on previous Treehouse Shows, 3:31 which I don't know if we mentioned the entire archive is in our iTunes feed, 3:33 you could go back and check them out to see what we have to say about LiveReload. 3:37 iTunes. >>[chuckles] Did we mention that yet? >>I think we did. 3:41 Next up we have a project called Intro.js. 3:45 This is "Better introductions for websites and features 3:49 "with a step-by-step guide for your projects." [usablica.github.io/intro.js] 3:53 There is a nice demo on here. You click Show me how. 3:56 You can highlight sections of the page, 3:59 and as you're going through you click Next, 4:01 and it will go through and highlight different sections of your page, 4:03 skip it, and whatever. 4:06 This is, as you would expect, very, very easy to use. 4:09 You can get the code on GitHub as well. 4:11 So this would be really useful in the blank slate of a web application. 4:14 A user gets to your site, they have no idea what to do-- 4:19 Or maybe they haven't entered in any data at all 4:22 and it's basically just blank. 4:25 Say it's a to-do list app. They haven't typed in any to-dos yet. 4:27 It's just blank and they need to know what to do. 4:31 So this would be a great way to introduce them to your site. 4:34 I see what they did there. >>Yeah. 4:38 And this will also be available in the show notes on our iTunes feed. 4:41 Thanks, Jason. That was a really good intro to Intro.js. 4:45 iTunes. 4:48 Next up is this really amazing article from Denise Jacobs over on SitePoint 4:50 called CSS Architectures: New Best Practices. 4:55 [sitepoint.com/css-architectures-new-best-practices] 4:58 Basically it's just a collection of all the latest best practices in CSS. 5:00 You want to reset your page with normalize.css 5:04 so that you create a level playing field for cross-browser development. 5:07 Very good tip there. 5:11 If you're still using a clear fix that looks like this to clear your floated elements, 5:13 Denise says, "We really need to talk," 5:20 and she suggests a few other solutions there. 5:23 There's just lots of great tips in here. 5:27 I highly recommend you check it out. 5:30 Ooh! Icon element. That's another good tip there. 5:33 And get on the CSS3 train. I think we've talked a lot about CSS3 on the show. 5:36 But of course CSS3 can do a lot to enhance your front end performance, 5:41 reduce the amount of images that you're using. 5:46 There's a million different benefits there. 5:48 Very cool article. 5:50 If you're new to web development, this would be especially useful to you. 5:52 [imitates train whistle] Woo-woo! >>Woo! 5:56 That was me getting on the CSS3 train. >>Cool. 5:58 Next up we have a project called Desant. 6:01 This is an open source landing page creator. 6:03 It's actually feature-packed. 6:06 [desantapp.com] This is a ready-to-go application that you could check out. 6:09 What you're going to do is set up different landing pages 6:14 where you'll track things like where it's coming from, 6:16 different people's IP addresses. 6:19 You can track your sign-ups, users' locations, 6:22 and then you can export all this data pretty easily. 6:25 This is, like I said, really easy to use, really quick, 6:29 and it's available on GitHub, so you can go ahead and clone this repository 6:33 and then start tracking your users and setting up landing pages. 6:37 That's pretty cool. >>Yeah. >>It seems like a lot of stuff is over on GitHub these days. 6:41 Yeah. >>Huh. Strange. If you're new, maybe you should check out GitHub. 6:45 Yeah, but what's not available on GitHub 6:49 is going to be our show notes in the iTunes feed. 6:51 That's on iTunes. >>Right. >>Yeah. iTunes. >>Search for The Treehouse Show. 6:54 Treehouse Show. Okay. 6:58 Next up is Color Oracle. 7:00 Color Oracle is an app that's available for Mac OS X as well as Windows. 7:03 [colororacle.org] It looks like it's even available for Linux. Pretty cool. 7:09 It allows you to see what your website or your application-- 7:12 basically your entire screen--might look like to someone that has a color impairment. 7:19 So in other words, if I were looking at a fairly colorful web page here-- 7:25 let's see if I can find one. There we go. Pixi.js has a pretty colorful page. 7:31 I've gone ahead and installed the app here, 7:37 and when I click through here, 7:41 I can see what these different color vision impairments might look like. 7:43 There's some color available but other colors are not. 7:50 I'll go ahead and switch it back to Normal Vision here, 7:55 flip back to Color Oracle. 7:59 This is really useful if you want to make your website-- >>More accessible? 8:01 more accessible and look better for people that have color vision impairments. 8:07 Of course colorblindness is actually really common, 8:11 and so it's really important to make sure that your site has enough contrast 8:15 in light and dark values. 8:20 In other words, you don't want to have 2 elements that are 2 different colors 8:23 right next to one another if they're actually the same lightness and darkness. 8:27 You want to make sure the lightness and darkness is what's differentiating those 8:32 and not just the color. 8:36 A good way to test that is with a tool like Color Oracle, 8:38 or you could even just look at your web page in black and white. 8:41 That's a really good idea. >>Yeah. 8:43 We talk a lot about responsiveness on the show, 8:45 so this is a whole other spectrum of that gamut. >>Yes, it is. 8:48 A lot of words. 8:52 Next up we have an article called Printing The Web. 8:54 This is by Hans Christian. [drublic.de/blog] 8:56 What he's doing in this article is going through and talking about 8:59 a lot of different techniques that you can use 9:02 when you're formatting your web pages for printing. 9:04 This is something that gets left out a lot when you're writing your CSS, 9:07 but there's actually a wealth of things that you can control-- 9:12 things like page orientation. 9:14 You can specify that if somebody is printing out your page 9:16 it should be done in landscape. 9:18 You can even control where certain page breaks happen or don't happen. 9:20 Hans goes through and he's got just a ton of different suggestions 9:24 and improvements that you can make to your content. 9:30 As an example, somebody is not going to be able to see a link in the content immediately, 9:32 so if you want to, you can put the title or the URL right after the formatting of the link. 9:37 Anyway, great article and you can check that out in the show notes on YouTube or iTunes. 9:45 Mainly on iTunes. >>Right. [trhou.se/Z1McIE] 9:53 If you haven't checked out iTunes yet, you should. >>Yeah. You should probably do that. 9:56 This joke is getting tired. All right. 10:00 I think that's all I've got. >>I think that's it. 10:02 I am @nickrp on Twitter. >>And I am @jseifer. 10:05 If you like this podcast, you can subscribe to it on YouTube at youtube.com/gotreehouse 10:08 or on iTunes. >>Very cool stuff. 10:13 And of course if you'd like to see more videos like this one, 10:16 be sure to check us out at teamtreehouse.com. 10:19 Thanks so much for watching, and we'll see you next week. 10:22 [morse code beeping sound] [The Treehouse Show] 10:27 [beeping continues] 10:29

You need to sign up for Treehouse in order to set up Workspace

Sign up