1
00:00:00,000 --> 00:00:01,230
[The Treehouse Show]

2
00:00:01,230 --> 00:00:03,400
I'm Nick Pettit. >>I'm Jason Seifer. 

3
00:00:03,400 --> 00:00:05,120
And you're watching The Treehouse Show,

4
00:00:05,120 --> 00:00:08,170
your weekly dose of Internets where we talk about all things web design,

5
00:00:08,170 --> 00:00:09,960
web development and more.

6
00:00:09,960 --> 00:00:12,920
In this episode we'll be talking about accessibility,

7
00:00:12,920 --> 00:00:15,570
CSS architecture, and printing.

8
00:00:15,570 --> 00:00:18,050
Let's check it out.

9
00:00:18,370 --> 00:00:21,720
[morse code beeping sound]

10
00:00:21,720 --> 00:00:23,990
[The Treehouse Show]

11
00:00:23,990 --> 00:00:27,530
First up we have some big news. >>Huge news.

12
00:00:27,530 --> 00:00:32,049
The Treehouse Show is now available on iTunes as a podcast.

13
00:00:32,049 --> 00:00:34,340
Christmas came early. >>That's right.

14
00:00:34,340 --> 00:00:38,550
You can go ahead and head over to iTunes, type in Treehouse Show,

15
00:00:38,550 --> 00:00:41,030
and you should be able to find us there. [trhou.se/Z1McIE]

16
00:00:41,030 --> 00:00:45,670
We have a podcast available in HD and in standard definition.

17
00:00:45,670 --> 00:00:50,380
So every Tuesday if you would prefer to watch The Treehouse Show on iTunes

18
00:00:50,380 --> 00:00:54,960
instead of YouTube or on the Treehouse site, it's now available there as well.

19
00:00:54,960 --> 00:00:59,240
That will sync to your phones, your iPods, whatever you kids have these days.

20
00:00:59,240 --> 00:01:00,660
That's right. 

21
00:01:00,660 --> 00:01:05,410
And if you like the show, please be sure to head over there and give us a review, 

22
00:01:05,410 --> 00:01:10,290
a rating, subscribe to us. >>Yeah. If you don't like the show, don't rate it. >>Yeah.

23
00:01:10,290 --> 00:01:13,070
No. We're just kidding. Sort of.

24
00:01:13,070 --> 00:01:16,230
First up we have something called Pixi.js.

25
00:01:16,230 --> 00:01:20,220
This is a pretty interesting project. It's really, really cool.

26
00:01:20,220 --> 00:01:24,730
[goodboydigital.com/pixi-js-has-landed] What this does is a cross-browser implementation

27
00:01:24,730 --> 00:01:27,950
of webGL, canvas, and mobile.

28
00:01:27,950 --> 00:01:33,250
So you get a 2D webGL renderer with seamless canvas fallback

29
00:01:33,250 --> 00:01:36,490
that lets it work across all modern browsers.

30
00:01:36,490 --> 00:01:41,610
That's certainly a lot of words, but what you really want to see is demos.

31
00:01:41,610 --> 00:01:45,380
So check out what you can accomplish using Pixi.js.

32
00:01:45,380 --> 00:01:51,060
One of the examples that they have on their site is a game, which is pretty amazing.

33
00:01:51,060 --> 00:01:54,370
This is all done in JavaScript.

34
00:01:54,370 --> 00:01:57,470
You expect it to be a lot heavier or a lot slower to run,

35
00:01:57,470 --> 00:02:01,230
but it's actually really, really quick and pretty fun to play.

36
00:02:01,230 --> 00:02:04,230
We'll have a link to that in the show notes, 

37
00:02:04,230 --> 00:02:10,070
which you can also get on iTunes as well as our YouTube channel.

38
00:02:10,070 --> 00:02:13,290
Anyway, a bunch of great stuff and actually very easy to program for.

39
00:02:13,290 --> 00:02:15,860
So check that out. That's Pixi.js.

40
00:02:15,860 --> 00:02:20,290
Very cool stuff. Man, JavaScript is getting pretty fast these days. >>Yeah.

41
00:02:20,290 --> 00:02:24,350
Or pixie fast. >>Very good, Jason. >>Thank you.

42
00:02:24,350 --> 00:02:27,800
Next up is the Sublime Web Inspector.

43
00:02:27,800 --> 00:02:33,470
If you're familiar with Sublime Text, which just released its third version--

44
00:02:33,470 --> 00:02:35,390
I think it's still in beta, though.

45
00:02:35,390 --> 00:02:40,110
If you're familiar with Sublime Text and you're familiar with the Web Inspector

46
00:02:40,110 --> 00:02:45,670
in, say, Google Chrome or in Firefox, then you're going to love this

47
00:02:45,670 --> 00:02:49,730
because it puts 2 and 2 together, bam, right in 1 interface.

48
00:02:49,730 --> 00:02:53,300
Basically it's just a plugin for Sublime [sokolovstas.github.io/SublimeWebInspector]

49
00:02:53,300 --> 00:02:57,890
that allows you to debug JavaScript right inside of the text editor.

50
00:02:57,890 --> 00:03:03,500
So it basically closes the feedback loop between the browser and the text editor

51
00:03:03,500 --> 00:03:05,450
so you don't have to bounce back and forth.

52
00:03:05,450 --> 00:03:07,760
You can go ahead and set breakpoints.

53
00:03:07,760 --> 00:03:10,580
There's actually a console in there.

54
00:03:10,580 --> 00:03:15,270
It looks like there is interactivity. That's a headline on the page here.

55
00:03:15,270 --> 00:03:20,530
There's a debugger and a whole bunch more stuff,

56
00:03:20,530 --> 00:03:22,720
and you can go ahead and install it.

57
00:03:22,720 --> 00:03:27,110
It's available on GitHub, and if you like it, you should support it by donating.

58
00:03:27,110 --> 00:03:29,070
Very cool stuff. >>Yeah.

59
00:03:29,070 --> 00:03:31,220
If you've ever used the LiveReload plugin, 

60
00:03:31,220 --> 00:03:33,610
which we've talked about on previous Treehouse Shows,

61
00:03:33,610 --> 00:03:37,580
which I don't know if we mentioned the entire archive is in our iTunes feed,

62
00:03:37,580 --> 00:03:41,990
you could go back and check them out to see what we have to say about LiveReload.

63
00:03:41,990 --> 00:03:45,880
iTunes. >>[chuckles] Did we mention that yet? >>I think we did.

64
00:03:45,880 --> 00:03:49,620
Next up we have a project called Intro.js.

65
00:03:49,620 --> 00:03:53,660
This is "Better introductions for websites and features

66
00:03:53,660 --> 00:03:56,850
"with a step-by-step guide for your projects." [usablica.github.io/intro.js]

67
00:03:56,850 --> 00:03:59,240
There is a nice demo on here. You click Show me how.

68
00:03:59,240 --> 00:04:01,420
You can highlight sections of the page,

69
00:04:01,420 --> 00:04:03,890
and as you're going through you click Next,

70
00:04:03,890 --> 00:04:06,860
and it will go through and highlight different sections of your page,

71
00:04:06,860 --> 00:04:09,220
skip it, and whatever.

72
00:04:09,220 --> 00:04:11,670
This is, as you would expect, very, very easy to use.

73
00:04:11,670 --> 00:04:14,330
You can get the code on GitHub as well.

74
00:04:14,330 --> 00:04:19,399
So this would be really useful in the blank slate of a web application.

75
00:04:19,399 --> 00:04:22,710
A user gets to your site, they have no idea what to do--

76
00:04:22,710 --> 00:04:25,210
Or maybe they haven't entered in any data at all

77
00:04:25,210 --> 00:04:27,540
and it's basically just blank.

78
00:04:27,540 --> 00:04:31,870
Say it's a to-do list app. They haven't typed in any to-dos yet.

79
00:04:31,870 --> 00:04:34,000
It's just blank and they need to know what to do.

80
00:04:34,000 --> 00:04:38,830
So this would be a great way to introduce them to your site.

81
00:04:38,830 --> 00:04:41,230
I see what they did there. >>Yeah.

82
00:04:41,230 --> 00:04:45,070
And this will also be available in the show notes on our iTunes feed.

83
00:04:45,070 --> 00:04:48,350
Thanks, Jason. That was a really good intro to Intro.js.

84
00:04:48,350 --> 00:04:50,110
iTunes.

85
00:04:50,110 --> 00:04:55,050
Next up is this really amazing article from Denise Jacobs over on SitePoint

86
00:04:55,050 --> 00:04:58,680
called CSS Architectures: New Best Practices.

87
00:04:58,680 --> 00:05:00,680
[sitepoint.com/css-architectures-new-best-practices]

88
00:05:00,680 --> 00:05:04,430
Basically it's just a collection of all the latest best practices in CSS.

89
00:05:04,430 --> 00:05:07,750
You want to reset your page with normalize.css

90
00:05:07,750 --> 00:05:11,730
so that you create a level playing field for cross-browser development.

91
00:05:11,730 --> 00:05:13,720
Very good tip there.

92
00:05:13,720 --> 00:05:20,100
If you're still using a clear fix that looks like this to clear your floated elements,

93
00:05:20,100 --> 00:05:23,030
Denise says, "We really need to talk,"

94
00:05:23,030 --> 00:05:27,820
and she suggests a few other solutions there.

95
00:05:27,820 --> 00:05:30,550
There's just lots of great tips in here.

96
00:05:30,550 --> 00:05:33,640
I highly recommend you check it out.

97
00:05:33,640 --> 00:05:36,940
Ooh! Icon element. That's another good tip there.

98
00:05:36,940 --> 00:05:41,150
And get on the CSS3 train. I think we've talked a lot about CSS3 on the show.

99
00:05:41,150 --> 00:05:46,410
But of course CSS3 can do a lot to enhance your front end performance,

100
00:05:46,410 --> 00:05:48,560
reduce the amount of images that you're using.

101
00:05:48,560 --> 00:05:50,820
There's a million different benefits there.

102
00:05:50,820 --> 00:05:52,500
Very cool article.

103
00:05:52,500 --> 00:05:56,370
If you're new to web development, this would be especially useful to you.

104
00:05:56,370 --> 00:05:58,740
[imitates train whistle] Woo-woo! >>Woo!

105
00:05:58,740 --> 00:06:01,000
That was me getting on the CSS3 train. >>Cool.

106
00:06:01,000 --> 00:06:03,750
Next up we have a project called Desant.

107
00:06:03,750 --> 00:06:06,760
This is an open source landing page creator.

108
00:06:06,760 --> 00:06:09,350
It's actually feature-packed.

109
00:06:09,350 --> 00:06:14,290
[desantapp.com] This is a ready-to-go application that you could check out.

110
00:06:14,290 --> 00:06:16,960
What you're going to do is set up different landing pages

111
00:06:16,960 --> 00:06:19,710
where you'll track things like where it's coming from,

112
00:06:19,710 --> 00:06:22,390
different people's IP addresses.

113
00:06:22,390 --> 00:06:25,400
You can track your sign-ups, users' locations,

114
00:06:25,400 --> 00:06:29,710
and then you can export all this data pretty easily.

115
00:06:29,710 --> 00:06:33,270
This is, like I said, really easy to use, really quick,

116
00:06:33,270 --> 00:06:37,670
and it's available on GitHub, so you can go ahead and clone this repository

117
00:06:37,670 --> 00:06:41,650
and then start tracking your users and setting up landing pages.

118
00:06:41,650 --> 00:06:45,550
That's pretty cool. >>Yeah. >>It seems like a lot of stuff is over on GitHub these days.

119
00:06:45,550 --> 00:06:49,660
Yeah. >>Huh. Strange. If you're new, maybe you should check out GitHub.

120
00:06:49,660 --> 00:06:51,990
Yeah, but what's not available on GitHub 

121
00:06:51,990 --> 00:06:54,600
is going to be our show notes in the iTunes feed.

122
00:06:54,600 --> 00:06:58,940
That's on iTunes. >>Right. >>Yeah. iTunes. >>Search for The Treehouse Show.

123
00:06:58,940 --> 00:07:00,690
Treehouse Show. Okay.

124
00:07:00,690 --> 00:07:03,590
Next up is Color Oracle.

125
00:07:03,590 --> 00:07:09,470
Color Oracle is an app that's available for Mac OS X as well as Windows.

126
00:07:09,470 --> 00:07:12,680
[colororacle.org] It looks like it's even available for Linux. Pretty cool.

127
00:07:12,680 --> 00:07:19,380
It allows you to see what your website or your application--

128
00:07:19,380 --> 00:07:25,330
basically your entire screen--might look like to someone that has a color impairment.

129
00:07:25,330 --> 00:07:31,340
So in other words, if I were looking at a fairly colorful web page here--

130
00:07:31,340 --> 00:07:37,680
let's see if I can find one. There we go. Pixi.js has a pretty colorful page.

131
00:07:37,680 --> 00:07:41,470
I've gone ahead and installed the app here,

132
00:07:41,470 --> 00:07:43,350
and when I click through here, 

133
00:07:43,350 --> 00:07:50,060
I can see what these different color vision impairments might look like.

134
00:07:50,060 --> 00:07:55,750
There's some color available but other colors are not.

135
00:07:55,750 --> 00:07:59,110
I'll go ahead and switch it back to Normal Vision here,

136
00:07:59,110 --> 00:08:01,470
flip back to Color Oracle.

137
00:08:01,470 --> 00:08:07,530
This is really useful if you want to make your website-- >>More accessible?

138
00:08:07,530 --> 00:08:11,870
more accessible and look better for people that have color vision impairments.

139
00:08:11,870 --> 00:08:15,880
Of course colorblindness is actually really common,

140
00:08:15,880 --> 00:08:20,830
and so it's really important to make sure that your site has enough contrast

141
00:08:20,830 --> 00:08:23,630
in light and dark values.

142
00:08:23,630 --> 00:08:27,090
In other words, you don't want to have 2 elements that are 2 different colors

143
00:08:27,090 --> 00:08:32,380
right next to one another if they're actually the same lightness and darkness.

144
00:08:32,380 --> 00:08:36,460
You want to make sure the lightness and darkness is what's differentiating those

145
00:08:36,460 --> 00:08:38,309
and not just the color.

146
00:08:38,309 --> 00:08:41,169
A good way to test that is with a tool like Color Oracle,

147
00:08:41,169 --> 00:08:43,929
or you could even just look at your web page in black and white.

148
00:08:43,929 --> 00:08:45,560
That's a really good idea. >>Yeah.

149
00:08:45,560 --> 00:08:48,270
We talk a lot about responsiveness on the show,

150
00:08:48,270 --> 00:08:52,950
so this is a whole other spectrum of that gamut. >>Yes, it is.

151
00:08:52,950 --> 00:08:54,340
A lot of words.

152
00:08:54,340 --> 00:08:56,750
Next up we have an article called Printing The Web.

153
00:08:56,750 --> 00:08:59,350
This is by Hans Christian. [drublic.de/blog]

154
00:08:59,350 --> 00:09:02,080
What he's doing in this article is going through and talking about

155
00:09:02,080 --> 00:09:04,160
a lot of different techniques that you can use

156
00:09:04,160 --> 00:09:07,450
when you're formatting your web pages for printing.

157
00:09:07,450 --> 00:09:12,000
This is something that gets left out a lot when you're writing your CSS,

158
00:09:12,000 --> 00:09:14,870
but there's actually a wealth of things that you can control--

159
00:09:14,870 --> 00:09:16,430
things like page orientation.

160
00:09:16,430 --> 00:09:18,860
You can specify that if somebody is printing out your page

161
00:09:18,860 --> 00:09:20,780
it should be done in landscape.

162
00:09:20,780 --> 00:09:24,980
You can even control where certain page breaks happen or don't happen.

163
00:09:24,980 --> 00:09:30,220
Hans goes through and he's got just a ton of different suggestions

164
00:09:30,220 --> 00:09:32,570
and improvements that you can make to your content.

165
00:09:32,570 --> 00:09:37,610
As an example, somebody is not going to be able to see a link in the content immediately,

166
00:09:37,610 --> 00:09:45,420
so if you want to, you can put the title or the URL right after the formatting of the link.

167
00:09:45,420 --> 00:09:53,530
Anyway, great article and you can check that out in the show notes on YouTube or iTunes.

168
00:09:53,530 --> 00:09:56,660
Mainly on iTunes. >>Right. [trhou.se/Z1McIE]

169
00:09:56,660 --> 00:10:00,140
If you haven't checked out iTunes yet, you should. >>Yeah. You should probably do that.

170
00:10:00,140 --> 00:10:02,240
This joke is getting tired. All right.

171
00:10:02,240 --> 00:10:05,270
I think that's all I've got. >>I think that's it.

172
00:10:05,270 --> 00:10:08,420
I am @nickrp on Twitter. >>And I am @jseifer.

173
00:10:08,420 --> 00:10:13,570
If you like this podcast, you can subscribe to it on YouTube at youtube.com/gotreehouse

174
00:10:13,570 --> 00:10:16,270
or on iTunes. >>Very cool stuff.

175
00:10:16,270 --> 00:10:19,230
And of course if you'd like to see more videos like this one,

176
00:10:19,230 --> 00:10:22,910
be sure to check us out at teamtreehouse.com.

177
00:10:22,910 --> 00:10:26,380
Thanks so much for watching, and we'll see you next week.

178
00:10:27,200 --> 00:10:29,180
[morse code beeping sound] [The Treehouse Show]

179
00:10:29,180 --> 00:10:31,000
[beeping continues]