1
00:00:00,850 --> 00:00:01,580
I'm Nick Pettit.

2
00:00:01,580 --> 00:00:04,110
>> I'm Jason Seifer And your watching
The Treehouse Show.

3
00:00:04,110 --> 00:00:05,820
Your weekly dose of internets, where we
talk

4
00:00:05,820 --> 00:00:08,750
about all things web design, web
development and more.

5
00:00:08,750 --> 00:00:09,980
>> In this episode, we'll be talking

6
00:00:09,980 --> 00:00:15,400
about OAuth, CSS Zen Garden DevTools and
more.

7
00:00:15,400 --> 00:00:15,913
>> Let's check it out.

8
00:00:15,913 --> 00:00:22,452
[MUSIC]

9
00:00:22,452 --> 00:00:26,582
>> First up is this really cool web
site called Meet the Ipsums.

10
00:00:26,582 --> 00:00:31,066
Now, if you've ever been designing web
pages before, you might have

11
00:00:31,066 --> 00:00:35,680
needed to use some placeholder text in
place of the real thing.

12
00:00:35,680 --> 00:00:38,750
And that's where you usually use Lorem
Ipsum text

13
00:00:38,750 --> 00:00:41,240
to just kind of put in some filler text.

14
00:00:41,240 --> 00:00:43,950
This site offers a whole bunch of
different types of

15
00:00:43,950 --> 00:00:47,390
Lorem Ipsum text that they've gathered
from around the web.

16
00:00:47,390 --> 00:00:50,510
And let's go ahead and take a look.

17
00:00:50,510 --> 00:00:55,790
Look at that, you have normal lorem ipsum
text, but then you have coffee ipsum, cat

18
00:00:55,790 --> 00:01:01,005
ipsum, veggie ipsum, a whole bunch of
other different ones.

19
00:01:01,005 --> 00:01:05,950
If we scroll down here, you can see that
there are quite a few of them.

20
00:01:05,950 --> 00:01:09,120
So they've done a lot to put all these in
one place.

21
00:01:09,120 --> 00:01:12,620
There's even a Johnny Ipsum right there,
shameless plug.

22
00:01:12,620 --> 00:01:17,710
I did put that together based on things I
feel like Johnny I would say.

23
00:01:17,710 --> 00:01:20,610
But there's a whole bunch of 'em, and you
can just click on any one of these

24
00:01:20,610 --> 00:01:22,640
sites and go ahead and grab the Lorem

25
00:01:22,640 --> 00:01:25,530
Ipsum text and then paste it into your
website.

26
00:01:25,530 --> 00:01:27,030
So, a pretty nifty site.

27
00:01:27,030 --> 00:01:30,250
I think it's fun to use different types of
Lorem Ipsum text just

28
00:01:30,250 --> 00:01:35,300
because it adds a little bit more variety
to your day-to-day design work.

29
00:01:35,300 --> 00:01:37,360
>> And that's at meettheipsums.com.

30
00:01:37,360 --> 00:01:38,530
>> That is correct.

31
00:01:38,530 --> 00:01:40,620
>> I met the Ipsums recently.
>> Did you?

32
00:01:40,620 --> 00:01:42,980
>> I was at their house for dinner, and
it was delightful.

33
00:01:44,060 --> 00:01:47,720
Next up, we have a project called
tracking.js, which is

34
00:01:47,720 --> 00:01:51,200
built to change the way you interact with
your browser.

35
00:01:51,200 --> 00:01:53,980
Now, there's an interesting video that
they have on their page, but in essence,

36
00:01:53,980 --> 00:01:58,990
this guy is using two sticks that have
glowing orbs on the end of them.

37
00:01:58,990 --> 00:02:04,500
And then using the webcam, he can actually
interact with his browser in real time.

38
00:02:04,500 --> 00:02:06,930
>> Are those the Playstation Move, is
that what those are?

39
00:02:06,930 --> 00:02:07,580
>> I have no idea.

40
00:02:07,580 --> 00:02:08,600
>> I think that's what he's using.

41
00:02:08,600 --> 00:02:10,900
>> I don't game like you kids these
days do.

42
00:02:10,900 --> 00:02:12,050
>> I see.

43
00:02:12,050 --> 00:02:14,840
>> But they have a nice video on the
page here,

44
00:02:14,840 --> 00:02:18,670
which luckily for all of our viewers is
not loading right now.

45
00:02:18,670 --> 00:02:19,450
>> Awesome.

46
00:02:19,450 --> 00:02:24,100
>> but, but what's actually interesting
about this is, you can see when he's using

47
00:02:24,100 --> 00:02:30,210
this, you get the x, y and z coordinates
of what is going on in

48
00:02:30,210 --> 00:02:32,830
the different frames for the video.

49
00:02:32,830 --> 00:02:35,780
So once you have these different
coordinates, you can use

50
00:02:35,780 --> 00:02:38,800
them in JavaScript to do really cool
things on your pages.

51
00:02:38,800 --> 00:02:41,260
You could use this to potentially design
some

52
00:02:41,260 --> 00:02:45,640
sort of in-browser game or pretty much
anything.

53
00:02:45,640 --> 00:02:48,590
Anyway we'll have a link to that in the
show notes which you can get to

54
00:02:48,590 --> 00:02:52,460
at youtube.com/gotreehouse or on iTunes
search for us

55
00:02:52,460 --> 00:02:56,340
at the treehouse show and leave us
favorable reviews.

56
00:02:56,340 --> 00:02:58,040
>> Please.
>> Please.

57
00:02:58,040 --> 00:02:58,600
>> Please.

58
00:02:58,600 --> 00:03:00,380
>> If you like this show, that's one
way that you

59
00:03:00,380 --> 00:03:02,970
can, you know, thank us, by leaving us a
review in iTunes.

60
00:03:02,970 --> 00:03:04,830
It's better than money.

61
00:03:04,830 --> 00:03:08,070
>> I, I think they got it, Jason.
Alright.

62
00:03:08,070 --> 00:03:11,960
Next up is this really cool tool called
Webflow.

63
00:03:11,960 --> 00:03:14,740
And on the site it says, design responsive
web sites

64
00:03:14,740 --> 00:03:19,350
visually, so I assume this allows you to
do exactly that.

65
00:03:19,350 --> 00:03:21,350
If we go ahead and click on Start Demo

66
00:03:21,350 --> 00:03:25,820
here, it will load it up.
Whoa, look at that.

67
00:03:25,820 --> 00:03:26,340
>> Whoa!

68
00:03:26,340 --> 00:03:28,810
>> Pulls in the UI on the left and
right sides.

69
00:03:28,810 --> 00:03:30,390
>> Is this the internet or the future?

70
00:03:30,390 --> 00:03:34,570
>> You can go ahead and click on
Desktop View, Tablet View, or Phone View.

71
00:03:34,570 --> 00:03:36,690
So if I click on that, look at that.
>> What!

72
00:03:36,690 --> 00:03:40,230
>> It's a tablet.
Click on that, now we're on an iPhone.

73
00:03:40,230 --> 00:03:42,600
>> More like on a spaceship.
>> Tomorrow is today.

74
00:03:42,600 --> 00:03:44,390
>> In the future.
>> Truly.

75
00:03:44,390 --> 00:03:46,590
If we go ahead and click over on this
panel

76
00:03:46,590 --> 00:03:49,310
here we can go ahead and edit some of
these style attributes.

77
00:03:49,310 --> 00:03:52,705
So, if I, like, click on, oops, that's
actually a real link.

78
00:03:52,705 --> 00:03:53,910
>> Uh-oh!

79
00:03:53,910 --> 00:03:54,630
>> Don't click it!

80
00:03:54,630 --> 00:03:56,930
>> So, if we go ahead and click on one
of

81
00:03:56,930 --> 00:04:02,020
these, we can go ahead and change various
style attributes over here.

82
00:04:02,020 --> 00:04:07,300
And if we click on the navigator here, it
will actually show us where that

83
00:04:07,300 --> 00:04:11,820
element is in the DOM tree, so we can
traverse the entire DOM tree here.

84
00:04:11,820 --> 00:04:14,410
>> When you say navigator, do you mean
Netscape Navigator?

85
00:04:14,410 --> 00:04:17,500
>> Not exactly the same thing, but
close.

86
00:04:17,500 --> 00:04:20,600
And you can see that it has the entire
down tree here so we

87
00:04:20,600 --> 00:04:24,280
can go ahead and click on any one of
these, so that's pretty nifty.

88
00:04:24,280 --> 00:04:29,460
There's a bunch of other tools here that
we don't really have time to get into.

89
00:04:29,460 --> 00:04:32,580
For example you can toggle this responsive
grid

90
00:04:32,580 --> 00:04:34,508
and do a whole bunch of other cool stuff.

91
00:04:34,508 --> 00:04:36,810
But after you're all done,

92
00:04:36,810 --> 00:04:40,180
it will go ahead and output the code for
you.

93
00:04:40,180 --> 00:04:44,210
And I think, you know, overall, this is

94
00:04:44,210 --> 00:04:47,320
a very different way to design responsive
websites.

95
00:04:47,320 --> 00:04:50,850
Normally, people will lay stuff out in
Photoshop

96
00:04:50,850 --> 00:04:54,160
and then do all of their responsive grid
calculations.

97
00:04:54,160 --> 00:04:58,630
Or they will actually just design in the
browser and maybe

98
00:04:58,630 --> 00:05:03,020
take a mobile first approach, and then
scale up as needed.

99
00:05:03,020 --> 00:05:08,450
This tool is basically a WYSIWYG tool, or
what you see is what you

100
00:05:08,450 --> 00:05:14,190
get, where you lay out all the elements on
the page, and then you export the code.

101
00:05:14,190 --> 00:05:19,856
Now, the difference is, or so they claim,
this code is actually good.

102
00:05:19,856 --> 00:05:22,970
The problem with WYSIWYG tools
historically has been that

103
00:05:22,970 --> 00:05:26,070
the code that they produce is actually not
that great.

104
00:05:26,070 --> 00:05:28,080
>> We're looking at you Microsoft Front
Page.

105
00:05:28,080 --> 00:05:32,220
>> That's right.
But this is actually pretty good.

106
00:05:32,220 --> 00:05:35,390
It's it's a new class of tools that are
starting

107
00:05:35,390 --> 00:05:39,730
to emerge because designing responsive
sites can be really, really tricky.

108
00:05:39,730 --> 00:05:41,090
Because you have to design all the

109
00:05:41,090 --> 00:05:44,500
different proportions instead of thinking
in pixels.

110
00:05:44,500 --> 00:05:48,390
But this is a tool that might make it a
little bit easier.

111
00:05:48,390 --> 00:05:52,650
So I suggest giving it a try and seeing if
it works into your work flow.

112
00:05:52,650 --> 00:05:53,080
Or should I

113
00:05:53,080 --> 00:05:54,335
say, web flow?
>> Ooh.

114
00:05:54,335 --> 00:05:55,230
>> [SOUND] Bam.

115
00:05:55,230 --> 00:05:57,450
>> I see what you did there, that's
good.

116
00:05:57,450 --> 00:06:00,110
I like Web Flow, that's a good name.
>> Yeah, yeah it's nice.

117
00:06:00,110 --> 00:06:01,360
>> I feel like that's, you know, what
you

118
00:06:01,360 --> 00:06:03,980
get into when you're really rocking out
some webpages.

119
00:06:03,980 --> 00:06:04,870
>> Just a web flow.

120
00:06:04,870 --> 00:06:06,720
>> Don't interrupt my web flow, I got
this.

121
00:06:06,720 --> 00:06:10,370
>> See, Jason, as a professional you
have full license to coin your own terms.

122
00:06:10,370 --> 00:06:11,680
>> Alright, full license.

123
00:06:11,680 --> 00:06:16,820
>> So, web flow, is when you're just
really rocking out and making webpages.

124
00:06:16,820 --> 00:06:18,020
Look it up on Urban Dictionary.

125
00:06:20,550 --> 00:06:22,990
>> In a few days cuz we have to add it.
>> That's right.

126
00:06:22,990 --> 00:06:27,620
>> Next up, OAuth.io.
This is OAuth that just works.

127
00:06:27,620 --> 00:06:30,670
Like I said it's OAuth.io or Oauthio, that

128
00:06:30,670 --> 00:06:33,320
might be how you pronounce it, not really
sure.

129
00:06:33,320 --> 00:06:34,690
So one of the problems that you might

130
00:06:34,690 --> 00:06:38,230
run into when you're integrating OAuth
into your application.

131
00:06:38,230 --> 00:06:42,100
Is that there's different versions of
OAuth, which are slightly different

132
00:06:42,100 --> 00:06:46,030
to use and there's just a ton of different
OAuth providers and

133
00:06:46,030 --> 00:06:48,430
you need to submit different URL's, and
keys,

134
00:06:48,430 --> 00:06:50,460
and tokens, and a whole bunch of stuff.

135
00:06:50,460 --> 00:06:52,670
It can get kind of cumbersome to keep
track

136
00:06:52,670 --> 00:06:57,070
of everything and that's what OAuthio does
for you.

137
00:06:57,070 --> 00:06:59,500
This is actually a paid service and
they're not sponsoring the show.

138
00:06:59,500 --> 00:07:00,870
We just figured we should get that out
there.

139
00:07:00,870 --> 00:07:01,360
Just saw it.

140
00:07:01,360 --> 00:07:05,240
Thought it was cool.
Anyway it's very, very easy to use.

141
00:07:05,240 --> 00:07:08,680
You just go on, set up your keys with
OAuth.io.

142
00:07:08,680 --> 00:07:11,430
Configure your OAuth provider and bam.

143
00:07:11,430 --> 00:07:13,480
You're pretty much good to go.

144
00:07:13,480 --> 00:07:16,740
Just integrate a couple of their scripts
and you're ready to get rocking.

145
00:07:17,760 --> 00:07:21,220
anyway, there's a ton of different API
methods that you can use.

146
00:07:21,220 --> 00:07:25,420
There's a, there's a great API for getting
pretty much everything you need here.

147
00:07:25,420 --> 00:07:26,450
Anyway check that out.

148
00:07:26,450 --> 00:07:30,450
That's OAuth.io.
>> Very cool stuff.

149
00:07:30,450 --> 00:07:35,020
Well, next up is this fun CSS animation
tool called Stylie.

150
00:07:35,020 --> 00:07:36,710
I know it's fun and I

151
00:07:36,710 --> 00:07:40,450
know it's an animation tool because it
says that right on the webpage.

152
00:07:40,450 --> 00:07:41,760
Actually there's a lot of other tools like

153
00:07:41,760 --> 00:07:45,330
this that will help you create CSS3
animations.

154
00:07:45,330 --> 00:07:48,050
It can be pretty difficult particularly if
you

155
00:07:48,050 --> 00:07:52,020
want to create your own custom animation
curves.

156
00:07:52,020 --> 00:07:54,160
But this will, makes it a lot easier

157
00:07:54,160 --> 00:07:59,380
to create those very complex custom timing
functions.

158
00:07:59,380 --> 00:08:01,710
So, if you look here you can see that

159
00:08:01,710 --> 00:08:06,730
this little sphere or circle is moving
from left to right.

160
00:08:06,730 --> 00:08:11,120
And I can actually toggle these
coordinates here

161
00:08:11,120 --> 00:08:13,520
to make it move a little bit differently.

162
00:08:14,750 --> 00:08:17,420
But the really cool thing is over here.

163
00:08:17,420 --> 00:08:21,940
I can actually change the animation that's
happening over here.

164
00:08:21,940 --> 00:08:27,750
And we can do pretty standard stuff like
ease in, ease out, ease in quad, etcetera.

165
00:08:27,750 --> 00:08:31,120
All the things that you've come to expect.

166
00:08:31,120 --> 00:08:35,780
But there's actually a few things here
that are much more complex.

167
00:08:35,780 --> 00:08:38,330
So we're gonna try a bounce here.

168
00:08:38,330 --> 00:08:43,160
And if I move this down, you can see that

169
00:08:43,160 --> 00:08:46,620
it's actually bouncing along, which if you
were to code

170
00:08:46,620 --> 00:08:50,060
this up manually it would be very
difficult to do

171
00:08:50,060 --> 00:08:52,930
indeed, so if we click over here on the
CSS

172
00:08:52,930 --> 00:08:58,010
that it generates, and scroll down, you
can see just how many key frames you would

173
00:08:58,010 --> 00:09:04,530
actually need to create in order to create
a nice, fluid bounce like that, so.

174
00:09:04,530 --> 00:09:07,820
It's pretty incredible that this tool is
able to do that.

175
00:09:07,820 --> 00:09:11,880
All for you and I think it's definitely
worth checking out.

176
00:09:11,880 --> 00:09:13,880
>> Yeah, save you some time.
>> Yup.

177
00:09:13,880 --> 00:09:17,960
>> Next up, we have an article on the
David Walsh blog called Nine

178
00:09:17,960 --> 00:09:20,690
Mindblowing Canvas Demos.

179
00:09:20,690 --> 00:09:24,560
Now, if you don't want your mind blown
don't check out this article.

180
00:09:24,560 --> 00:09:27,140
>> Especially because it's gonna blow
your mind, nine times.

181
00:09:27,140 --> 00:09:29,570
>> Yeah.
So, maybe mentally prepare.

182
00:09:29,570 --> 00:09:33,470
Take a a warm bath or something, before
you, check out this article.

183
00:09:33,470 --> 00:09:37,510
Now we've talked about one of these
things, on, the Treehouse Show before.

184
00:09:37,510 --> 00:09:39,730
Just saying we're a little ahead of the
curve here.

185
00:09:39,730 --> 00:09:43,050
We talked about number two which was the
tear-able cloth.

186
00:09:43,050 --> 00:09:45,230
Now tearable like, you could tear
something.

187
00:09:45,230 --> 00:09:46,510
Not terrible cloth.

188
00:09:46,510 --> 00:09:48,490
>> Not as in, it was bad.
>> Right.

189
00:09:48,490 --> 00:09:49,100
>> Right.

190
00:09:49,100 --> 00:09:52,420
>> But anyway, there's like I said,
nine different mind-blowing demos.

191
00:09:52,420 --> 00:09:56,480
And I'm not gonna go through all of them
But there are really just a ton of things.

192
00:09:56,480 --> 00:09:58,330
Check that out, it immediately crashed
Chrome.

193
00:09:58,330 --> 00:09:59,720
Let me let me reload that.

194
00:09:59,720 --> 00:10:01,400
>> That's amazing.
>> I know.

195
00:10:01,400 --> 00:10:02,320
A wonderful demo.

196
00:10:02,320 --> 00:10:04,698
Isn't that, isn't that a great thing about
being live?

197
00:10:04,698 --> 00:10:08,340
[LAUGH] anyway, just go ahead and trust me
that more

198
00:10:08,340 --> 00:10:08,900
of these work.

199
00:10:08,900 --> 00:10:11,670
I'm not gonna go through and display any
more, but assuming

200
00:10:11,670 --> 00:10:13,670
that you can get it to work, they are
pretty cool.

201
00:10:13,670 --> 00:10:17,570
And we'll have that in the show notes.
>> Alright.

202
00:10:17,570 --> 00:10:19,770
>> Live TV, Nick.
>> Well, next up.

203
00:10:19,770 --> 00:10:21,440
>> That's what we're on right now.

204
00:10:21,440 --> 00:10:24,330
>> [LAUGH] That's what we wish we were
on right now.

205
00:10:24,330 --> 00:10:28,870
Next up is CSS Zen Garden.
Now, you might be thinking woah.

206
00:10:28,870 --> 00:10:30,610
>> Woah.
I've, I've heard of that before.

207
00:10:30,610 --> 00:10:31,630
Where have I heard of that?
>> Yeah.

208
00:10:31,630 --> 00:10:33,850
Nick, I've heard of that before.
>> You heard of it

209
00:10:33,850 --> 00:10:35,320
ten years ago.
>> What?

210
00:10:35,320 --> 00:10:38,670
>> CSS Zen Garden was actually created
back in 2003.

211
00:10:38,670 --> 00:10:39,940
>> '03, baby.

212
00:10:39,940 --> 00:10:45,280
And back then it was a really incredible
example of what you could do with CSS.

213
00:10:45,280 --> 00:10:50,090
A lot of contributors would take the exact
same HTML, and then they would

214
00:10:51,220 --> 00:10:55,230
apply their own styling to it, apply their
own CSS without changing the HTML.

215
00:10:55,230 --> 00:10:58,670
So that was the, the rule, it was that you
couldn't change the HTML.

216
00:10:58,670 --> 00:10:58,900
>> It was

217
00:10:58,900 --> 00:11:01,790
a great showcase of CSS at the time,
because this

218
00:11:01,790 --> 00:11:05,970
is kind of before there were best
practices for CSS integrated.

219
00:11:05,970 --> 00:11:06,380
>> Exactly.

220
00:11:06,380 --> 00:11:07,430
>> So, you know, it wasn't kind of, it

221
00:11:07,430 --> 00:11:09,400
wasn't a standard thing for companies to
be using

222
00:11:09,400 --> 00:11:11,080
CSS, so it was a great place to go

223
00:11:11,080 --> 00:11:14,460
to showcase your work and get best
practices established.

224
00:11:14,460 --> 00:11:18,070
>> And of course, over time, CSS became
you

225
00:11:18,070 --> 00:11:22,430
know, much more widespread, and best
practices were established.

226
00:11:22,430 --> 00:11:23,530
So, the

227
00:11:23,530 --> 00:11:28,580
CSS Zen Garden kind of fell out of favor,
and fell into disrepair.

228
00:11:28,580 --> 00:11:31,190
I guess nobody really cared, or people
forgot about it.

229
00:11:31,190 --> 00:11:32,970
>> Yeah, there wasn't really a need for
people to

230
00:11:32,970 --> 00:11:36,840
contribute once CSS became, a best
practice and a standard.

231
00:11:36,840 --> 00:11:42,060
>> Exactly, but the CSS Zen Garden has
been revived.

232
00:11:42,060 --> 00:11:42,810
>> All right!

233
00:11:42,810 --> 00:11:47,370
>> Now that we're living in this age of
CSS3, responsive web

234
00:11:47,370 --> 00:11:51,350
design, Retina Displays, and so many other
things that

235
00:11:51,350 --> 00:11:55,840
have thrown a wrench into what was
standard practice.

236
00:11:55,840 --> 00:12:01,540
So, it's a pretty exciting time to be
using CSS and

237
00:12:01,540 --> 00:12:04,490
CSS Zen Garden shows off all the cool
stuff you can do.

238
00:12:04,490 --> 00:12:10,980
So if we go ahead and click on maybe
another one of these, A Robot Named Jimmy.

239
00:12:10,980 --> 00:12:12,080
There it is.

240
00:12:12,080 --> 00:12:13,020
Bam.

241
00:12:13,020 --> 00:12:19,810
And the cool thing about this is, this is
exactly the same HTML.

242
00:12:19,810 --> 00:12:20,370
>> Scroll down.

243
00:12:20,370 --> 00:12:21,640
Look at what Jimmy has, look at what Jimmy
does.

244
00:12:21,640 --> 00:12:22,570
He disappears.

245
00:12:22,570 --> 00:12:23,010
>> Whoa.

246
00:12:23,010 --> 00:12:24,990
Look at that.
>> Thanks parallax scrolling.

247
00:12:24,990 --> 00:12:29,250
>> Incredible, but it's the exactly the
same HTML as this

248
00:12:29,250 --> 00:12:32,570
page that you're looking at here, even
though it looks super different.

249
00:12:32,570 --> 00:12:37,380
And that just kind of demonstrates the
power of CSS.

250
00:12:37,380 --> 00:12:37,680
So,

251
00:12:37,680 --> 00:12:40,470
I think it's really cool, and you can go
ahead and actually

252
00:12:40,470 --> 00:12:46,520
contribute new CSS files to this and yeah,
definitely check it out.

253
00:12:46,520 --> 00:12:48,790
>> I'm really glad to see that it's
back, you know?

254
00:12:48,790 --> 00:12:51,570
Now that we have all these great things
that we can do

255
00:12:51,570 --> 00:12:54,780
with CSS and there's so much available,
you might forget about something.

256
00:12:54,780 --> 00:12:56,220
>> There really is a need for it again.

257
00:12:56,220 --> 00:12:59,150
It's great that it's back.
>> Thanks, Dave Shay.

258
00:12:59,150 --> 00:13:00,090
>> Thanks.

259
00:13:00,090 --> 00:13:02,500
>> Next up, we have an article called
the

260
00:13:02,500 --> 00:13:08,920
Chrome DevTools Revolutions 2013, or 013,
as we say here on the show.

261
00:13:08,920 --> 00:13:10,710
So there are some new things here in the

262
00:13:10,710 --> 00:13:13,640
Chrome Dev tools that we're just gonna
through real quickly.

263
00:13:13,640 --> 00:13:16,290
First is the concept of work spaces.

264
00:13:16,290 --> 00:13:17,930
Work spaces are pretty interesting.

265
00:13:17,930 --> 00:13:23,090
They can let you map resources served from
a local web server, to files on disk.

266
00:13:23,090 --> 00:13:24,410
So this means that you can edit

267
00:13:24,410 --> 00:13:27,450
your different source files in the sources
panel,

268
00:13:27,450 --> 00:13:31,460
and those changes will persist right in
the files locally.

269
00:13:31,460 --> 00:13:34,730
So that's really, really awesome and just
great to use

270
00:13:34,730 --> 00:13:37,110
as you can see, you know you edit
something in

271
00:13:37,110 --> 00:13:39,360
your CSS rules on the left, they show that
in

272
00:13:39,360 --> 00:13:42,950
the dev tools right there, it's
immediately reflected in your editor.

273
00:13:44,170 --> 00:13:48,030
So let me go through and tell you how
exactly to make that work.

274
00:13:48,030 --> 00:13:53,280
You can also map folders to URLs, gives
you kinda the, the same idea there.

275
00:13:53,280 --> 00:13:57,440
You can even debug Sass in Chrome now
which is a hugely

276
00:13:57,440 --> 00:14:02,290
welcome edition since Sass is becoming,
you know, more and more widespread.

277
00:14:03,570 --> 00:14:08,830
Finally you can let's see, got Sass
debugging, and then just a whole bunch of

278
00:14:08,830 --> 00:14:12,230
things that you have in the Dev Tools, so
go ahead and check this out.

279
00:14:12,230 --> 00:14:13,320
Dev Tools have already been great.

280
00:14:13,320 --> 00:14:15,840
There's way too much to keep track of as
it is,

281
00:14:15,840 --> 00:14:19,110
so go ahead and check out this article in
the show notes.

282
00:14:19,110 --> 00:14:20,190
>> Very cool stuff.
>> Yeah.

283
00:14:20,190 --> 00:14:22,050
>> Well, that is it for this week.

284
00:14:22,050 --> 00:14:24,890
On Twitter, I am @nickrp.
>> And I am @jseifer.

285
00:14:24,890 --> 00:14:27,200
For more information on anything we talked
about, including

286
00:14:27,200 --> 00:14:31,200
show notes, check us out on Youtube at
youtube.com/gotreehouse.

287
00:14:31,200 --> 00:14:34,520
Or in iTunes, search for us at the Tree
House Show.

288
00:14:34,520 --> 00:14:36,200
And, don't forget to leave a review.

289
00:14:36,200 --> 00:14:37,380
>> Please.

290
00:14:37,380 --> 00:14:39,700
And, of course if you'd like to see more
videos like

291
00:14:39,700 --> 00:14:43,920
this one, about web design, web
development, mobile and so much more.

292
00:14:43,920 --> 00:14:44,346
Be sure

293
00:14:44,346 --> 00:14:46,782
to check us out at Teamtreehouse.com.

294
00:14:46,782 --> 00:14:48,831
Thanks so much for watching and we'll see
you next week.

295
00:14:48,831 --> 00:14:58,831
[MUSIC]