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

2
00:00:02,320 --> 00:00:05,900
I'm Nick Pettit. >>I'm Jason Seifer. >>And you're watching The Treehouse Show.

3
00:00:05,900 --> 00:00:08,690
Your weekly dose of Internets where we talk about all things

4
00:00:08,690 --> 00:00:11,330
web design, web development, and more.

5
00:00:11,330 --> 00:00:14,510
In this episode, we'll be going over a typing tutor for programmers.

6
00:00:14,510 --> 00:00:17,100
We're going over different design tricks that you can use

7
00:00:17,100 --> 00:00:20,500
in your applications as well as our first ever App review.

8
00:00:20,500 --> 00:00:22,590
Ooooh. >>Let's get into it.

9
00:00:26,750 --> 00:00:28,710
[The Treehouse Show]

10
00:00:29,650 --> 00:00:32,009
As a developer, one thing that you're going to be doing a lot--

11
00:00:32,009 --> 00:00:34,750
in fact, most of the time, is typing.

12
00:00:34,750 --> 00:00:39,360
Now, normal typing tutors aren't going to get all of the extra special characters

13
00:00:39,360 --> 00:00:43,940
that you need to type while coding such as brackets, colons, ampersands--

14
00:00:43,940 --> 00:00:46,520
all the wonderful characters you have to type all the time.

15
00:00:46,520 --> 00:00:52,020
Now, recently a website called typing.io came out, which features different

16
00:00:52,020 --> 00:00:56,100
exercises to go through and practice your typing skills.

17
00:00:56,100 --> 00:01:00,030
You can check that out over at typing.io.

18
00:01:00,030 --> 00:01:07,040
A really great practice runs in here and just get your typing skills, pardon the pun, up to speed.

19
00:01:07,040 --> 00:01:11,090
I see what you did there Jason. That's really clever actually.

20
00:01:11,090 --> 00:01:14,720
Huh? >>Yeah. >>Huh. Oh, that was good.

21
00:01:14,720 --> 00:01:19,420
Recently, there's a really cool article on TechCrunch about 5 design tricks

22
00:01:19,420 --> 00:01:23,480
that Facebook uses to affect your privacy decisions.

23
00:01:23,480 --> 00:01:27,200
It's really well worth the read, but I just want to go over just the first

24
00:01:27,200 --> 00:01:31,280
couple of things that Facebook change recently.

25
00:01:31,280 --> 00:01:35,650
First, they have this single button trick as TechCrunch calls it

26
00:01:35,650 --> 00:01:39,430
where they used to have an allow and don't allow button

27
00:01:39,430 --> 00:01:44,210
when an App was requesting permission for your information.

28
00:01:44,210 --> 00:01:49,850
Now, they've simplified that to a single button which just says "Play game."

29
00:01:49,850 --> 00:01:55,550
Now, I think that's actually pretty smart from a user's perspective because basically

30
00:01:55,550 --> 00:02:00,340
you're just saying either you're going to hit the button or you're not going to.

31
00:02:00,340 --> 00:02:06,380
All right, so it narrows the choices for the user and I think the don't allow button

32
00:02:06,380 --> 00:02:10,180
is kind of strange actually when I see this weird button here.

33
00:02:10,180 --> 00:02:18,330
But, it also doesn't give the user the chance to let's say deny that information from the App.

34
00:02:18,330 --> 00:02:20,810
Right--not with the explicit button click.

35
00:02:20,810 --> 00:02:26,210
They can hit the back button or go to a different website, but I missed the don't allow button.

36
00:02:26,210 --> 00:02:29,220
I almost instinctively click it all the time because I don't want anybody

37
00:02:29,220 --> 00:02:34,140
having all of my information that I already put on the Internet even more public.

38
00:02:34,140 --> 00:02:38,360
It sometimes feels good to hit that don't allow button. >>Yeah.

39
00:02:38,360 --> 00:02:44,200
Another trick that they're using is what TechCrunch calls the tiny gray font trick.

40
00:02:44,200 --> 00:02:50,180
Basically, they used to have some bold fonts next to their allow and don't allow buttons,

41
00:02:50,180 --> 00:02:53,990
and now they've reduced that to just tiny gray text.

42
00:02:53,990 --> 00:02:58,980
So basically, they've taken the fine print and made it actually look like-- >>Even more fine.

43
00:02:58,980 --> 00:03:05,600
Fine, fine print--which again, from a design perspective, I feel like it make sense.

44
00:03:05,600 --> 00:03:09,330
It's not stuff that people are always going to necessarily read.

45
00:03:09,330 --> 00:03:15,650
I feel like it's almost like an end user license agreement just in a very TLDR form.

46
00:03:15,650 --> 00:03:20,720
Which means too long, didn't read for those of you listening and don't know what that---

47
00:03:20,720 --> 00:03:24,950
That's the longer form of too long, didn't read or TLDR.

48
00:03:24,950 --> 00:03:29,230
I find it really interesting how different designs can affect your decisions

49
00:03:29,230 --> 00:03:30,940
and what you're going to do on a website.

50
00:03:30,940 --> 00:03:34,020
Yeah, definitely, but well worth the read.

51
00:03:34,020 --> 00:03:38,240
Next up, if you're looking to learn the Python language,

52
00:03:38,240 --> 00:03:43,000
head on over to pythonbooks,revolunet.com.

53
00:03:43,000 --> 00:03:48,590
There is a huge collection of different books to learn Python and Django

54
00:03:48,590 --> 00:03:52,920
and even looking games with Python, and these are all completely free to read.

55
00:03:52,920 --> 00:03:58,380
Select any one, just click it, and boom--good to go. Read up on your Python.

56
00:03:58,380 --> 00:04:01,800
Python is actually a really cool language when you get into it,

57
00:04:01,800 --> 00:04:04,360
very similar to Ruby, except in syntax.

58
00:04:04,360 --> 00:04:07,540
Cool stuff. Next up is big screen.

59
00:04:07,540 --> 00:04:10,870
Big screen is basically a little piece of JavaScript that you can include

60
00:04:10,870 --> 00:04:15,320
on your website to access the JavaScript Fullscreen API.

61
00:04:15,320 --> 00:04:20,630
So if you have a nice picture on your website and you want people to go ahead and click it

62
00:04:20,630 --> 00:04:25,120
and enhance and let them see the the fullscreen image, you can go ahead and do that.

63
00:04:25,120 --> 00:04:31,270
So pretty nifty, and I, just from a design perspective, love that they're including

64
00:04:31,270 --> 00:04:36,090
"Why should I use it?" right down the webpage because that's exactly the question I had.

65
00:04:36,090 --> 00:04:40,800
Why would you want to just drop this into a webpage, make sense in general.

66
00:04:40,800 --> 00:04:46,190
But basically what big screen does that's really nice is it smoothes out

67
00:04:46,190 --> 00:04:51,540
browser inconsistencies and a lot of bugs that prevents people from using

68
00:04:51,540 --> 00:04:55,330
that JavaScript Fullscreen API very smoothly.

69
00:04:55,330 --> 00:04:58,220
Yeah, I understand there's a lot of really minute details you have to

70
00:04:58,220 --> 00:05:00,530
consider when you're going fullscreen.

71
00:05:00,530 --> 00:05:05,380
I don't like considering minute details when I'm trying to create a masterpiece of a website.

72
00:05:05,380 --> 00:05:08,000
You're thinking about the big picture. >>That's right. >>>Right.

73
00:05:08,000 --> 00:05:12,150
I'm thinking about the big screen. I get it.

74
00:05:12,150 --> 00:05:17,830
But it also makes it really easy to make images fullscreen from an iframe,

75
00:05:17,830 --> 00:05:21,520
which I actually didn't know this apparently on the the Big Screen site

76
00:05:21,520 --> 00:05:24,330
that they're saying that that's actually particularly difficult.

77
00:05:24,330 --> 00:05:29,320
So, it's nice that they smooth that out as well and it also works for video, which is really cool.

78
00:05:29,320 --> 00:05:34,120
It weighs in at just under 1 kilobyte when it's g-zipped and minified, which basically means

79
00:05:34,120 --> 00:05:37,850
that it's not going to have much of an impact at all on your pageload times.

80
00:05:37,850 --> 00:05:40,760
That's awesome. >>That's pretty much it for big screen.

81
00:05:40,760 --> 00:05:43,580
Next up is our very first App Review.

82
00:05:45,880 --> 00:05:48,560
[App Review]

83
00:05:49,480 --> 00:05:52,340
The App that we're going to be taking a look a look at today is called Skitch.

84
00:05:52,340 --> 00:05:56,260
Skitch is just a quick little App for drawing attention to what you're working on.

85
00:05:56,260 --> 00:06:01,000
This is really useful in a client setting where you're doing some work for a client,

86
00:06:01,000 --> 00:06:06,110
making some changes to a site, you can use Skitch to capture any area of your screen

87
00:06:06,110 --> 00:06:10,280
and then add text or arrows or even some different shapes on there.

88
00:06:10,280 --> 00:06:15,560
You can get this over at skitch.com. It was recently purchased by Evernote.

89
00:06:15,560 --> 00:06:19,620
You'll see that there's different Evernote sharing options in the App,

90
00:06:19,620 --> 00:06:24,930
and if I take Chrome at a fullscreen here, I can go ahead and bring up Skitch.

91
00:06:24,930 --> 00:06:28,120
Now, I've got a shortcut key to do it. Here's what the App looks like.

92
00:06:28,120 --> 00:06:32,500
This has a screenshot that I took earlier in the day of our live show Trello board

93
00:06:32,500 --> 00:06:37,360
and if I wanted to call out a certain area of the screen, I can click the arrow button

94
00:06:37,360 --> 00:06:41,860
and then draw something to it and then if I want to label it say,

95
00:06:41,860 --> 00:06:46,020
"This is a part of the screen"--ain't that cool.

96
00:06:46,020 --> 00:06:49,330
The nice thing about it though is you get this little drag me icon

97
00:06:49,330 --> 00:06:51,880
and you can drag that anywhere you want to.

98
00:06:51,880 --> 00:06:55,980
This could go into an email, it could go into Cloud App,

99
00:06:55,980 --> 00:06:58,300
or pretty much wherever you want to do.

100
00:06:58,300 --> 00:07:05,360
Skitch is a great App--I use it all the time, just for capturing parts of screens or whatever--

101
00:07:05,360 --> 00:07:08,950
anything on the screen--it does full windows. You can do partial windows.

102
00:07:08,950 --> 00:07:10,750
So check that out at skitch.com.

103
00:07:10,750 --> 00:07:16,280
I find it really, really useful and pretty much integrated into

104
00:07:16,280 --> 00:07:18,810
my muscle memory for day-to-day life--CMD + SHIFT + 5.

105
00:07:18,810 --> 00:07:23,040
Once you start using it everyday, it become a little bit essential. >>Yeah.

106
00:07:23,040 --> 00:07:26,200
It's pretty strange how it sneaks up on you like that. >>Pretty cool.

107
00:07:26,200 --> 00:07:32,090
Next up is JS Plum, which is basically this really cool tool that allows you to create

108
00:07:32,090 --> 00:07:37,760
these crazy-looking charts where you can drag these elements around

109
00:07:37,760 --> 00:07:40,840
and maintain connections between them.

110
00:07:40,840 --> 00:07:44,460
There's a couple of different type of charts.

111
00:07:44,460 --> 00:07:48,540
I'll go ahead and just select a different one here where you can go ahead and drag

112
00:07:48,540 --> 00:07:53,530
connections around and it says "Do you want to connect window 1 to window 2?"--

113
00:07:53,530 --> 00:07:59,500
Yeah, absolutely. Let's go ahead and look at another one. That may includes some animation.

114
00:07:59,500 --> 00:08:02,990
So if you click on stuff and it will smoothly animate around.

115
00:08:02,990 --> 00:08:07,510
You can actually use this with a couple of different libraries.

116
00:08:07,510 --> 00:08:13,050
You can use it with new tools or you can use it with YY3, but of course,

117
00:08:13,050 --> 00:08:17,150
I think most people are going to be using it with jQuery just because

118
00:08:17,150 --> 00:08:20,320
it's the most popular JavaScript library out there.

119
00:08:20,320 --> 00:08:23,820
Yes, something like 80% of websites use jQuery now. >>Yeah.

120
00:08:23,820 --> 00:08:28,690
The thing that I was impressed by this, you can also use it with different rendering modes.

121
00:08:28,690 --> 00:08:35,440
So you can not only render with SVG, you can also do this with the Canvas or even VML,

122
00:08:35,440 --> 00:08:37,780
which I thought was pretty nifty.

123
00:08:37,780 --> 00:08:41,370
Oh, that's interesting. >>Yeah. >>But we don't hear much about VML anymore.

124
00:08:41,370 --> 00:08:45,910
No, we don't. That's why--I saw that and I was like "Geez, that's crazy." 

125
00:08:45,910 --> 00:08:49,320
It's way backward compatibility. >>Uh-huh, way back.

126
00:08:49,320 --> 00:08:54,720
But, it's pretty cool stuff, you can go ahead and download JS Plum

127
00:08:54,720 --> 00:08:57,440
on GitHub and put it on your website.

128
00:08:57,440 --> 00:09:00,990
So next time your boss ask you to go ahead and put together

129
00:09:00,990 --> 00:09:04,130
a drag and drop interface, just let it out.

130
00:09:04,130 --> 00:09:08,190
You can go ahead and make it really easy on yourself.

131
00:09:08,190 --> 00:09:14,070
Visually, it reminds me a little bit of Yahoo! Pipes--not in functionality but more it lets you do.

132
00:09:14,070 --> 00:09:17,890
Just in the front end of Yahoo! Pipes. >>Yeah. >>Yeah. Cool stuff.

133
00:09:17,890 --> 00:09:22,560
So next up, there is a blog post on some web development tips.

134
00:09:22,560 --> 00:09:28,400
This is some really, really useful information from a former engineer at Digg,

135
00:09:28,400 --> 00:09:33,290
and as you go through, this maybe not so much for a beginner to take a look at

136
00:09:33,290 --> 00:09:36,910
and then read the list, keeps some things in mind, but when you get to a

137
00:09:36,910 --> 00:09:41,420
more intermediate level of doing web development, fantastic tips in here.

138
00:09:41,420 --> 00:09:43,300
Just going to call out a couple of things.

139
00:09:43,300 --> 00:09:48,580
I don't have time to go over the whole article in the show but things to keep in mind

140
00:09:48,580 --> 00:09:53,130
unless you're using a framework, you are most likely not protecting yourself

141
00:09:53,130 --> 00:09:58,860
against things like cross site request forgery attacks, especially AJAX request.

142
00:09:58,860 --> 00:10:03,330
So you have to learn about how to use AJAX setups so that you

143
00:10:03,330 --> 00:10:05,640
include your different tokens by default.

144
00:10:05,640 --> 00:10:11,290
Performance site, something we talk about on the show a lot is spriting your assets.

145
00:10:11,290 --> 00:10:14,090
On previous episodes, we've gone over a few tools

146
00:10:14,090 --> 00:10:17,270
that you can use to make CSS spriting a lot easier.

147
00:10:17,270 --> 00:10:24,130
And just generally, really, really great advice on dealing with kind of larger scale

148
00:10:24,130 --> 00:10:28,420
of web applications and websites and what goes into actually developing them.

149
00:10:28,420 --> 00:10:33,510
So keep that in mind, check it out. The link will be in the share notes over on our page.

150
00:10:33,510 --> 00:10:38,070
Pretty cool stuff. Next up, I'd like to finish out by talking about--

151
00:10:38,070 --> 00:10:40,400
Well, actually we have one more segment after me. I'm sorry.

152
00:10:40,400 --> 00:10:43,240
I almost ended the show early there. It could have been a disaster.

153
00:10:43,240 --> 00:10:48,480
Next up, we're going to talk about complex navigation patterns for responsive web design.

154
00:10:48,480 --> 00:10:53,100
Now, this is something that I have actually given talks about in the past

155
00:10:53,100 --> 00:10:58,850
because I think that as we move towards this new responsive web design era,

156
00:10:58,850 --> 00:11:05,640
we have to develop--basically design patterns that are going to fit across mobile devices

157
00:11:05,640 --> 00:11:08,720
including tablets and phones as well as desktops.

158
00:11:08,720 --> 00:11:14,630
Because we've established a lot of design pattern that will work for desktops,

159
00:11:14,630 --> 00:11:20,430
but we need to kind of modify those so that they work across a whole array of devices.

160
00:11:20,430 --> 00:11:26,310
And I really like this blog post from Brad Frost when he talks about basically just that.

161
00:11:26,310 --> 00:11:33,330
He show us as how navigation can be modified as a design pattern across various devices.

162
00:11:33,330 --> 00:11:38,130
The one I'd like to highlight is down at the bottom here where on the

163
00:11:38,130 --> 00:11:43,750
World Wildlife Fund's responsive website, they have these drop-down menus

164
00:11:43,750 --> 00:11:48,210
where you can go ahead and look at species, places, and threats,

165
00:11:48,210 --> 00:11:50,910
and then you can select something underneath that.

166
00:11:50,910 --> 00:11:55,720
When you go down to the mobile size, they actually just have that top level

167
00:11:55,720 --> 00:12:01,080
with navigation, so you click on that and it takes you to the category landing page

168
00:12:01,080 --> 00:12:06,870
instead of actually having you drill into the other various topics.

169
00:12:06,870 --> 00:12:12,640
So pretty cool stuff, well worth read, and I like that it also breaks down the pros and cons

170
00:12:12,640 --> 00:12:15,660
of each because there's not necessarily always going to be one

171
00:12:15,660 --> 00:12:18,840
really good solution that works for everything.

172
00:12:18,840 --> 00:12:22,010
Yeah. We're still in the really early days of all these stuff, so--

173
00:12:22,010 --> 00:12:27,490
For sure, I mean responsive website has been since around May of 2010, I think.

174
00:12:27,490 --> 00:12:29,350
Wow, that's ancient in Internet years.

175
00:12:29,350 --> 00:12:33,260
In Internet time, it does seem like a long time, but I think there's actually still

176
00:12:33,260 --> 00:12:38,510
a whole lot more to discover there that we haven't really fully explored in terms of design.

177
00:12:38,510 --> 00:12:42,790
One year is actually equal to 20 Internet years, just keep that in mind

178
00:12:42,790 --> 00:12:44,810
when you're doing the Internet year math.

179
00:12:44,810 --> 00:12:47,880
It's a cool factoid. Thanks for that Jason.

180
00:12:47,880 --> 00:12:52,440
Next up, we're talking about that quick little project called Avgrund

181
00:12:52,440 --> 00:12:57,490
and this is just a fun experiment, not that we would display on the show.

182
00:12:57,490 --> 00:13:03,340
This is modal dialogues in jQuery and the cool thing about it is that it uses

183
00:13:03,340 --> 00:13:09,280
CSS3 transforms to scale components of the background and blur things out

184
00:13:09,280 --> 00:13:15,130
when you click the modal--nothing extremely useful about it, it's really just an experiment,

185
00:13:15,130 --> 00:13:18,990
but it's so cool that you can do these things now and it's really smooth.

186
00:13:18,990 --> 00:13:22,760
That's it, you can check out the code over on the GitHub

187
00:13:22,760 --> 00:13:25,980
and again, the link will be in the share note so--

188
00:13:25,980 --> 00:13:27,810
Really like it--Avgrund.

189
00:13:28,620 --> 00:13:32,650
Very cool stuff. Well, that's it for this week's episode of The Treehouse Show.

190
00:13:32,650 --> 00:13:35,000
Jason, what did we learn today?

191
00:13:35,000 --> 00:13:40,470
We learned that there's no right way to do responsive web design. >>That's right.

192
00:13:40,470 --> 00:13:43,950
We also learned that the boss is probably going to ask you

193
00:13:43,950 --> 00:13:46,440
for a drag-and-drop interface very soon.

194
00:13:46,440 --> 00:13:52,700
You should be prepared for that and I think that's pretty much it. >>Yeah.

195
00:13:52,700 --> 00:13:56,740
I think that's about it. >>I feel good. >>I feel great. Never been better.

196
00:13:56,740 --> 00:14:01,710
If you want to learn more about web design or web development, check out teamtreehouse.com.

197
00:14:01,710 --> 00:14:07,790
And be sure to check out previous episodes at youtube.com/gotreehouse.

198
00:14:07,790 --> 00:14:11,680
That's it for this week's episode. I'm Nick Pettit and I'm @nickrp on Twitter.

199
00:14:11,680 --> 00:14:15,760
And I'm Jason Seifer and I'm @jseifer on Twitter. >>We'll see you next week.

200
00:14:17,220 --> 00:14:18,800
[The Treehouse Show]