1
00:00:00,000 --> 00:00:03,400
>>I'm Nick Pettit.  >> I'm Jason Seifer.

2
00:00:03,400 --> 00:00:05,300
>>And you're watching the Treehouse show,

3
00:00:05,300 --> 00:00:08,500
your weekly dose of Internets where we talk about all things Web design,

4
00:00:08,500 --> 00:00:10,550
Web development, and more.

5
00:00:10,550 --> 00:00:13,630
>>In this episode, we'll be talking about responsive techniques,

6
00:00:13,630 --> 00:00:16,590
JavaScript MVC Frameworks, and a whole lot more.

7
00:00:16,590 --> 00:00:18,580
>>Let's check it out.

8
00:00:21,180 --> 00:00:24,590
[The Treehouse Show]

9
00:00:24,590 --> 00:00:27,060
>>Nick, do you remember a few weeks ago,

10
00:00:27,060 --> 00:00:30,680
where we talked about Firefox 16 Beta and the cool new developer features it had?

11
00:00:30,680 --> 00:00:32,340
>>I don't remember at all.

12
00:00:32,340 --> 00:00:34,590
>>Oh, it was pretty much a black out day for me, too,

13
00:00:34,590 --> 00:00:38,530
but the good news is Firefox 16 Final has been released.

14
00:00:38,530 --> 00:00:40,640
This includes really cool features,

15
00:00:40,640 --> 00:00:43,280
such as the new developer toolbar,

16
00:00:43,280 --> 00:00:47,370
unprefixed CSS3 transitions,

17
00:00:47,370 --> 00:00:52,200
and animations, transitions, and transforms,

18
00:00:52,200 --> 00:00:55,390
as well as gradients and debugger breakpoints 

19
00:00:55,390 --> 00:00:57,290
do not cache on page reload,

20
00:00:57,290 --> 00:00:59,700
as well as the usual roundup of fixes,

21
00:00:59,700 --> 00:01:02,440
so head on over to GetFirefox.com

22
00:01:02,440 --> 00:01:05,160
 to update your Firefox browser.

23
00:01:05,160 --> 00:01:07,270
>>Sweet; very cool stuff.

24
00:01:07,270 --> 00:01:11,230
Next up is this really cool tool called Responsivator.

25
00:01:11,230 --> 00:01:13,520
Wanted to make sure I was saying that right.

26
00:01:13,520 --> 00:01:15,250
>>Kind of like the word responsive and elevator.

27
00:01:15,250 --> 00:01:18,110
>>Exactly; thank you, Jason.

28
00:01:18,110 --> 00:01:20,280
Basically, it's this tool

29
00:01:20,280 --> 00:01:22,500
that can show you what your Web site looks like 

30
00:01:22,500 --> 00:01:25,340
at various media query breakpoints,

31
00:01:25,340 --> 00:01:28,310
so when when you're designing a responsive site,

32
00:01:28,310 --> 00:01:31,010
you want to check what the site looks like

33
00:01:31,010 --> 00:01:33,740
at a couple of different widths,

34
00:01:33,740 --> 00:01:36,340
and you can just scroll from left to right

35
00:01:36,340 --> 00:01:39,730
and in this case, we're looking at Microsoft's Web site.

36
00:01:39,730 --> 00:01:41,530
You can actually view random Web sites

37
00:01:41,530 --> 00:01:43,460
that are known to be responsive

38
00:01:43,460 --> 00:01:45,250
and will look really great here.

39
00:01:45,250 --> 00:01:47,800
But let's go ahead and type in, say,

40
00:01:47,800 --> 00:01:51,080
the BostonGlobe.com

41
00:01:51,080 --> 00:01:54,430
and we'll click Responsivate.

42
00:01:54,430 --> 00:01:58,580
And here we can see the Boston Globe looks great

43
00:01:58,580 --> 00:02:00,580
at these various resolutions,

44
00:02:00,580 --> 00:02:02,560
and it even gives you a little bit of a description

45
00:02:02,560 --> 00:02:05,520
as to what this resolution might encapsulate,

46
00:02:05,520 --> 00:02:07,320
such as a phone,

47
00:02:07,320 --> 00:02:09,949
a small or a large tablet,

48
00:02:09,949 --> 00:02:12,920
and of course, desktop displays.

49
00:02:12,920 --> 00:02:14,220
So pretty nifty.

50
00:02:14,220 --> 00:02:17,770
You should definitely try to always use the real device,

51
00:02:17,770 --> 00:02:21,690
such as a phone or a tablet when you're testing responsive sites,

52
00:02:21,690 --> 00:02:24,970
but this is a handy tool just to check something real quick,

53
00:02:24,970 --> 00:02:27,390
kind of as you're developing the site.

54
00:02:27,390 --> 00:02:29,950
>>That would probably also be really good for presentations to clients

55
00:02:29,950 --> 00:02:32,600
if you want to show them everything you've been working on

56
00:02:32,600 --> 00:02:35,670
and just have 1 quick spot to look at all the different resolutions.

57
00:02:35,670 --> 00:02:38,820
>>Rather than bringing in your whole device test suite

58
00:02:38,820 --> 00:02:42,380
and saying, "Why can't I hold all of these phones?"

59
00:02:42,380 --> 00:02:44,610
All right, cool.

60
00:02:44,610 --> 00:02:46,550
>>We're there for you.

61
00:02:46,550 --> 00:02:48,690
>>Yup, trying to resolve awkward situation.

62
00:02:48,690 --> 00:02:50,740
>>Or create them.

63
00:02:50,740 --> 00:02:53,460
Next up, over on the Eventual Consistency blog

64
00:02:53,460 --> 00:02:59,160
is a really great blog post on 8 ways to make your single-page web app faster.

65
00:02:59,160 --> 00:03:01,670
This is a collection of techniques

66
00:03:01,670 --> 00:03:05,110
more for when you're working with a JavaScript MVC Framework

67
00:03:05,110 --> 00:03:08,000
and we're going to talk about that a little bit later, too.

68
00:03:08,000 --> 00:03:11,690
But there's some great tips in here, like avoiding reflowing the dom,

69
00:03:11,690 --> 00:03:15,460
because that is going to slow your site down a lot

70
00:03:15,460 --> 00:03:18,210
if you keep having to reflow everything.

71
00:03:18,210 --> 00:03:20,670
Really getting to know the framework that you're using,

72
00:03:20,670 --> 00:03:22,460
a lot of the frameworks these days,

73
00:03:22,460 --> 00:03:24,710
you know, backbone, spine, ember, 

74
00:03:24,710 --> 00:03:26,890
will have little tips and techniques to use

75
00:03:26,890 --> 00:03:28,960
to keep everything quick.

76
00:03:28,960 --> 00:03:32,750
Finally, your templates use web sockets

77
00:03:32,750 --> 00:03:34,600
when you're supposed to.

78
00:03:34,600 --> 00:03:38,110
One really big one is to, as they say, stop hoarding,

79
00:03:38,110 --> 00:03:41,300
which means, hey, yes, it's great and quick 

80
00:03:41,300 --> 00:03:44,520
to put something in memory if you need to access it later,

81
00:03:44,520 --> 00:03:48,850
but on older browsers or systems that don't have a lot of memory,

82
00:03:48,850 --> 00:03:52,350
this can become kind of cumbersome and actually slow down your page.

83
00:03:52,350 --> 00:03:54,630
So there's techniques to get around that,

84
00:03:54,630 --> 00:03:57,620
such as pagination of large collections and things like that.

85
00:03:57,620 --> 00:04:00,620
Definitely recommend reading this whole post,

86
00:04:00,620 --> 00:04:02,620
because there's some really, really good tips in here,

87
00:04:02,620 --> 00:04:04,950
and we'll have that in the show notes 

88
00:04:04,950 --> 00:04:08,500
at our YouTube channel at YouTube.com/gotreehouse.

89
00:04:08,500 --> 00:04:11,400
>>All right, Go Treehouse.

90
00:04:11,400 --> 00:04:15,210
Next up is Patternify; again, I want to make sure I'm saying this right.

91
00:04:15,210 --> 00:04:17,750
Patternify.

92
00:04:17,750 --> 00:04:20,660
>>It could be Pattern-if-why.

93
00:04:20,660 --> 00:04:22,310
>>Clever.

94
00:04:22,310 --> 00:04:25,410
and it's this tool

95
00:04:25,410 --> 00:04:27,610
that allows you to create patterns

96
00:04:27,610 --> 00:04:30,550
that you can use in your CSS.

97
00:04:30,550 --> 00:04:33,200
So it looks a little bit funky,

98
00:04:33,200 --> 00:04:36,110
so let me go ahead and explain each part of this.

99
00:04:36,110 --> 00:04:39,210
Over on the left here, we have this grid

100
00:04:39,210 --> 00:04:41,040
and in this grid,

101
00:04:41,040 --> 00:04:45,300
we can go ahead and place these dots, just like that,

102
00:04:45,300 --> 00:04:48,240
and over on the right, we'll get a preview

103
00:04:48,240 --> 00:04:50,750
of what that pattern will ultimately look like.

104
00:04:50,750 --> 00:04:52,230
There's some numbers here,

105
00:04:52,230 --> 00:04:54,810
and we can adjust the size of this pattern,

106
00:04:54,810 --> 00:04:56,340
for example.

107
00:04:56,340 --> 00:05:00,290
And they also have some pre-built patterns down here,

108
00:05:00,290 --> 00:05:04,820
so if you click, you can kind of see what those patterns might end up looking like,

109
00:05:04,820 --> 00:05:06,400
and then you can, of course, 

110
00:05:06,400 --> 00:05:09,550
go ahead and get the Base64 encoded version

111
00:05:09,550 --> 00:05:13,210
or click to download the png.

112
00:05:13,210 --> 00:05:16,130
This is pretty nifty

113
00:05:16,130 --> 00:05:19,390
 and often times, when you're coding up your CSS,

114
00:05:19,390 --> 00:05:23,270
you'll want to go ahead and include patterns like this

115
00:05:23,270 --> 00:05:25,890
in maybe the backgrounds of your site

116
00:05:25,890 --> 00:05:28,160
or in various page elements,

117
00:05:28,160 --> 00:05:30,250
just to give them a little bit of texture,

118
00:05:30,250 --> 00:05:32,700
because when you add texture to page elements, 

119
00:05:32,700 --> 00:05:36,010
it actually increases the depth of the site.

120
00:05:36,010 --> 00:05:38,150
It makes it look more visually rich.

121
00:05:38,150 --> 00:05:40,350
Textures are also an interesting way

122
00:05:40,350 --> 00:05:42,460
to augment gradients,

123
00:05:42,460 --> 00:05:47,340
so if you're creating, say, a CSS3 gradient from one color to another,

124
00:05:47,340 --> 00:05:50,180
and you're getting maybe some color banding

125
00:05:50,180 --> 00:05:53,650
in a really subtle looking gradient that goes

126
00:05:53,650 --> 00:05:55,980
from one very similar color to another similar color,

127
00:05:55,980 --> 00:05:58,160
it's good to layer 

128
00:05:58,160 --> 00:06:02,120
a pattern or maybe a noisy pattern on top of that,

129
00:06:02,120 --> 00:06:04,950
and that will kind of mitigate some of that color banding,

130
00:06:04,950 --> 00:06:07,390
and it also just makes it look like it has more colors

131
00:06:07,390 --> 00:06:09,480
 and look more visually rich.

132
00:06:09,480 --> 00:06:11,930
So Patternify, really cool tool

133
00:06:11,930 --> 00:06:14,090
for making those patterns very quickly.

134
00:06:14,090 --> 00:06:16,290
>>I know some of those words.

135
00:06:16,290 --> 00:06:21,700
Next up is a really, really interesting site called TodoMVC.

136
00:06:21,700 --> 00:06:24,300
I really love this project.

137
00:06:24,300 --> 00:06:27,960
What this does is it takes your classic to-do list application,

138
00:06:27,960 --> 00:06:30,990
and it shows you how to do it

139
00:06:30,990 --> 00:06:34,700
using a whole bunch of different JavaScript MVC frameworks.

140
00:06:34,700 --> 00:06:38,530
They have backbone.js, spine, YUI,

141
00:06:38,530 --> 00:06:40,420
batman.js,

142
00:06:40,420 --> 00:06:44,760
and these are all of the different stable applications that they have, 

143
00:06:44,760 --> 00:06:47,350
and what you can do is you can actually click into any of these

144
00:06:47,350 --> 00:06:50,670
and see how an entire application looks

145
00:06:50,670 --> 00:06:53,250
that is coded in this framework.

146
00:06:53,250 --> 00:06:56,290
They're using the same project, the TodoMVC,

147
00:06:56,290 --> 00:06:59,980
and you can see how this works in each of these different frameworks.

148
00:06:59,980 --> 00:07:01,790
This is incredibly beneficial 

149
00:07:01,790 --> 00:07:04,640
if you're going to be evaluating some of these frameworks

150
00:07:04,640 --> 00:07:08,270
or if you're just picking a new one to learn and to experiment,

151
00:07:08,270 --> 00:07:10,600
get to see how it actually looks.

152
00:07:10,600 --> 00:07:12,490
So, love this project.

153
00:07:12,490 --> 00:07:14,910
This is at ToDoMVC.com

154
00:07:14,910 --> 00:07:18,850
or TodoMVC; that might help you remember it a little bit better.

155
00:07:18,850 --> 00:07:20,710
Whatever.

156
00:07:20,710 --> 00:07:22,810
So yeah, check that out, kind of love it.

157
00:07:22,810 --> 00:07:25,830
>>Wow, that sounds a lot better than the Post-It notes

158
00:07:25,830 --> 00:07:28,160
I've been using and just sticking all over my monitor.

159
00:07:28,160 --> 00:07:33,270
Next up is CSS FilterLab

160
00:07:33,270 --> 00:07:36,260
and this is a project from Adobe

161
00:07:36,260 --> 00:07:41,470
that allows you to see what various CSS filters will end up looking like,

162
00:07:41,470 --> 00:07:43,100
so up here on the left,

163
00:07:43,100 --> 00:07:45,690
you can go ahead and add in a filter,

164
00:07:45,690 --> 00:07:50,810
and I've gone ahead and added a few filters here already.

165
00:07:50,810 --> 00:07:53,140
And with this filter here, for example,

166
00:07:53,140 --> 00:07:56,800
we can go ahead and blur this image.

167
00:07:56,800 --> 00:07:59,650
And then we have some controls here to go ahead 

168
00:07:59,650 --> 00:08:02,990
and adjust the intensity of the filter. 

169
00:08:02,990 --> 00:08:04,780
Now, in this case,

170
00:08:04,780 --> 00:08:09,370
we're using a blur so there's just 1 value that we're adjusting,

171
00:08:09,370 --> 00:08:11,310
but down here at the bottom, 

172
00:08:11,310 --> 00:08:16,560
you can see that it also gives you the code for that filter,

173
00:08:16,560 --> 00:08:20,470
so you can go ahead and just copy that right into your Web site.

174
00:08:20,470 --> 00:08:22,270
So it's kind of nice,

175
00:08:22,270 --> 00:08:24,500
because CSS filters are fairly new,

176
00:08:24,500 --> 00:08:27,310
and it might be a little bit confusing 

177
00:08:27,310 --> 00:08:29,770
to work with the syntax right away, 

178
00:08:29,770 --> 00:08:32,549
but this way, you can kind of quickly experiment 

179
00:08:32,549 --> 00:08:36,690
and then go ahead and see what that code ends up looking like, 

180
00:08:36,690 --> 00:08:39,169
so you don't have to just code up everything yourself 

181
00:08:39,169 --> 00:08:42,159
from memory or from documentation.

182
00:08:42,159 --> 00:08:45,240
So really cool; I love WYSIWYG tools like this.

183
00:08:45,240 --> 00:08:47,240
I mean, they do slow you down a little bit,

184
00:08:47,240 --> 00:08:51,320
but they also help you explore things in a different way.

185
00:08:51,320 --> 00:08:54,730
and allow you to explore design ideas that you might not have

186
00:08:54,730 --> 00:08:57,360
been exploring just in code.

187
00:08:57,360 --> 00:08:59,710
>>I think this one is particularly awesome

188
00:08:59,710 --> 00:09:03,550
just because of the key frames and animation they give you.

189
00:09:03,550 --> 00:09:05,240
>>Yes, that's very true.

190
00:09:05,240 --> 00:09:08,380
You can also go ahead and animate stuff here over time

191
00:09:08,380 --> 00:09:12,140
and hit this little play button, so that's pretty nifty, as well.

192
00:09:12,140 --> 00:09:14,340
>>Yeah, that's awesome.

193
00:09:14,340 --> 00:09:16,240
Next up, there's a site called DBPatterns.

194
00:09:16,240 --> 00:09:20,520
This is a service that allows you to create, share, and explore

195
00:09:20,520 --> 00:09:23,110
 database models on the Web.

196
00:09:23,110 --> 00:09:27,120
So this is going to be useful if you are designing a Web application

197
00:09:27,120 --> 00:09:29,290
and I mean the back end.

198
00:09:29,290 --> 00:09:31,300
Maybe you're starting to work with the database 

199
00:09:31,300 --> 00:09:33,520
and set up all of your different models and things like that.

200
00:09:33,520 --> 00:09:36,500
You're going to want to go through and really set up a database layout 

201
00:09:36,500 --> 00:09:38,570
and how things might work.

202
00:09:38,570 --> 00:09:40,850
So what DBPatterns is going to do 

203
00:09:40,850 --> 00:09:43,440
is it has a list of patterns on there,

204
00:09:43,440 --> 00:09:45,410
and you can show them or add new ones,

205
00:09:45,410 --> 00:09:48,680
but let's take a look at the user roles and permissions one.

206
00:09:48,680 --> 00:09:50,110
You can click into these,

207
00:09:50,110 --> 00:09:53,840
and it will show you what the database schema might look like.

208
00:09:53,840 --> 00:09:56,960
This is something that somebody has done before,

209
00:09:56,960 --> 00:09:59,510
and they said, "Hey, yeah, that looks pretty cool. I like it."

210
00:09:59,510 --> 00:10:01,900
Then you can fork this

211
00:10:01,900 --> 00:10:03,580
if you need to add something to it

212
00:10:03,580 --> 00:10:05,930
or just use it as it is.

213
00:10:05,930 --> 00:10:09,420
So right now, it's a pretty sparse collection

214
00:10:09,420 --> 00:10:11,180
of patterns,

215
00:10:11,180 --> 00:10:13,280
but I'm imagining that they're going to be 

216
00:10:13,280 --> 00:10:15,180
adding a lot more,

217
00:10:15,180 --> 00:10:17,130
and you can go ahead and add them, too.

218
00:10:17,130 --> 00:10:19,900
So that is at DBPatterns.com

219
00:10:19,900 --> 00:10:21,970
Make sure to check that one out.

220
00:10:21,970 --> 00:10:23,160
>>That's really cool.

221
00:10:23,160 --> 00:10:26,360
I'll be sure to look at all those before I go to the next party,

222
00:10:26,360 --> 00:10:29,320
because I've got to have something to talk about.

223
00:10:29,320 --> 00:10:33,740
Yeah, I can just go ahead and talk to people about database patterns.

224
00:10:33,740 --> 00:10:35,860
>>It's going to be my Halloween costume.

225
00:10:35,860 --> 00:10:37,350
>>Sweet!

226
00:10:37,350 --> 00:10:40,110
All right, next up is PFold,

227
00:10:40,110 --> 00:10:42,810
which is a paper-like unfolding effect

228
00:10:42,810 --> 00:10:46,330
and for this, we're actually going to switch over the Jason's laptop,

229
00:10:46,330 --> 00:10:51,170
because for some reason, this is not working in my version of Chrome.

230
00:10:51,170 --> 00:10:56,060
I don't know why, but I promise you it works just fine in Chrome and in Safari.

231
00:10:56,060 --> 00:11:00,010
It's saying that CSS 3D transforms

232
00:11:00,010 --> 00:11:03,640
are not supported in my browser, which is a lie.

233
00:11:03,640 --> 00:11:05,950
So basically,

234
00:11:05,950 --> 00:11:08,560
PFold is just this paper-like unfolding effect

235
00:11:08,560 --> 00:11:11,410
like I said, and you can go ahead 

236
00:11:11,410 --> 00:11:14,810
and click on the various effects here,

237
00:11:14,810 --> 00:11:17,630
and see what this looks like.

238
00:11:17,630 --> 00:11:20,010
Here's another example.

239
00:11:20,010 --> 00:11:23,670
And there's really not a whole lot to say,

240
00:11:23,670 --> 00:11:26,790
but you can go ahead and check out the code

241
00:11:26,790 --> 00:11:29,180
and include this in your own Web site

242
00:11:29,180 --> 00:11:32,440
and the places you might use this might be

243
00:11:32,440 --> 00:11:34,640
if you have maybe say 

244
00:11:34,640 --> 00:11:36,600
a thumbnail

245
00:11:36,600 --> 00:11:38,570
for an image or something

246
00:11:38,570 --> 00:11:42,030
and you want to look at the caption for that image,

247
00:11:42,030 --> 00:11:43,750
you can maybe unfold it or--

248
00:11:43,750 --> 00:11:45,320
>>How about an address book? 

249
00:11:45,320 --> 00:11:47,560
>>An address book might be a good example,

250
00:11:47,560 --> 00:11:49,050
if you want to view more details,

251
00:11:49,050 --> 00:11:51,420
so basically where you have a small amount of information

252
00:11:51,420 --> 00:11:54,570
and then you want to see more about that

253
00:11:54,570 --> 00:11:56,640
or if you want to see more details.

254
00:11:56,640 --> 00:11:59,630
It might also be cool for maybe mapping applications.

255
00:11:59,630 --> 00:12:02,720
I'm not sure how well that would work out,

256
00:12:02,720 --> 00:12:06,710
but it definitely brings to mind the idea of unfolding a map

257
00:12:06,710 --> 00:12:09,670
or folding it back up if you wanted to show an address.

258
00:12:09,670 --> 00:12:13,300
Maybe, like you said, an address book.

259
00:12:13,300 --> 00:12:15,190
>>I like it.

260
00:12:15,190 --> 00:12:17,610
So Nick, do you know what we learned today?

261
00:12:17,610 --> 00:12:19,600
>>What did we learn today, Jason?

262
00:12:19,600 --> 00:12:22,880
>>We learned that it's important to learn your responsive techniques

263
00:12:22,880 --> 00:12:25,790
and your JavaScript MVC Frameworks.

264
00:12:25,790 --> 00:12:27,420
>>Very cool stuff.

265
00:12:27,420 --> 00:12:29,690
If you want to check up out on Twitter,

266
00:12:29,690 --> 00:12:32,350
I am @NickRP. >>I am at JSeifer.

267
00:12:32,350 --> 00:12:35,350
We want to thank you so much for tuning into this episode of The Treehouse Show.

268
00:12:35,350 --> 00:12:37,050
For show notes and more,

269
00:12:37,050 --> 00:12:39,070
check out our YouTube Channel

270
00:12:39,070 --> 00:12:41,220
at YouTube.com/GoTreehouse.

271
00:12:41,220 --> 00:12:44,500
>>And of course, if you want to see more videos like this one

272
00:12:44,500 --> 00:12:46,100
and learn all about Web design,

273
00:12:46,100 --> 00:12:49,370
Web development, business, IOS, and Android,

274
00:12:49,370 --> 00:12:52,520
be sure to check us out at TeamTreehouse.com.

275
00:12:52,520 --> 00:12:55,070
Thanks so much for watching, and we'll see you next week.

276
00:12:55,070 --> 00:12:58,070
[The Treehouse Show]