1
00:00:01,500 --> 00:00:03,160
I'm Nick Pettit. >>I'm Jason Seifer.

2
00:00:03,160 --> 00:00:06,080
[Petit] And you're watching the Treehouse Show, your weekly dose of internets

3
00:00:06,080 --> 00:00:09,270
where we talk about all things web design, web development, and more.

4
00:00:09,270 --> 00:00:12,680
[Seifer] In this episode, we'll be talking about HTML5 features,

5
00:00:12,680 --> 00:00:16,680
responsive CSS modules, Sass, and more.

6
00:00:16,680 --> 00:00:18,130
[Petit] Let's check it out!

7
00:00:22,130 --> 00:00:24,330
[The Treehouse Show]

8
00:00:24,330 --> 00:00:29,490
First up is this really cool blog called Movies in Color,

9
00:00:29,490 --> 00:00:32,549
and it's basically a bunch of still frames from movies

10
00:00:32,549 --> 00:00:36,510
and then a breakdown of the color palette of that still frame.

11
00:00:36,510 --> 00:00:40,100
So really good place to just get some inspiration

12
00:00:40,100 --> 00:00:43,470
for creating a color palette for your next web design.

13
00:00:43,470 --> 00:00:47,100
So let's take a quick look. >>[Seifer] Check it out. That first.

14
00:00:47,100 --> 00:00:51,260
There's a picture of me and you right there. >>[Petit] Yup. That's me and that's Jason.

15
00:00:51,260 --> 00:00:55,770
And there's a breakdown of the light, medium, and dark colors,

16
00:00:55,770 --> 00:01:00,500
and then they give a general spectrum of the entire color palette.

17
00:01:00,500 --> 00:01:04,129
So if we scroll down here. Here's another— >>[Seifer] We were just kids back then.

18
00:01:04,129 --> 00:01:06,750
—really nice frame here. We're just exploring the ocean.

19
00:01:06,750 --> 00:01:10,320
And again, light, medium, dark, and general spectrum,

20
00:01:10,530 --> 00:01:15,400
and I think it's a really cool way to get a good idea

21
00:01:15,400 --> 00:01:17,040
of what a nice color palette looks like

22
00:01:17,150 --> 00:01:24,660
because in this particular frame, you can see the fish here is orange,

23
00:01:24,660 --> 00:01:27,390
and it's set against a blue background and that's actually

24
00:01:27,390 --> 00:01:32,550
a really nice complementary color palette rather that using orange and blue together.

25
00:01:32,550 --> 00:01:35,430
So I think movies are good place to draw an inspiration from

26
00:01:35,430 --> 00:01:39,780
because they spend a whole lot of time thinking about each one of these shots,

27
00:01:39,780 --> 00:01:43,270
each one of these frames and really getting the colors just right.

28
00:01:43,270 --> 00:01:45,850
So, why not draw some inspiration from it?

29
00:01:45,850 --> 00:01:48,050
[Seifer] Yeah. Really cool site. >>[Petit] Yeah. Really cool.

30
00:01:48,050 --> 00:01:53,110
[Seifer] Next up, we have a blog post called 5 HTML5 Features That You Need To Know.

31
00:01:53,110 --> 00:01:56,250
Now there are more than 5 features that you should be aware of,

32
00:01:56,250 --> 00:01:59,800
but this blog post is just concentrating on 5 of them.

33
00:01:59,800 --> 00:02:03,590
First one is pretty interesting. It's about DNS Prefetching.

34
00:02:03,590 --> 00:02:07,260
Each time your browser needs to look up a different resource—

35
00:02:07,260 --> 00:02:12,520
say if you're using a Google font or a separate analytic service—

36
00:02:12,520 --> 00:02:15,930
well, you're computer has to look up the DNS address for it

37
00:02:15,930 --> 00:02:19,350
so DNS will turn a domain name into an IP address.

38
00:02:19,560 --> 00:02:21,670
Each one of those request actually incurs

39
00:02:21,670 --> 00:02:24,200
a little bit of time on the client site to look that up.

40
00:02:24,320 --> 00:02:31,450
Now if you put in the prefetch attribute right here, link rel=dns-prefetch,

41
00:02:31,450 --> 00:02:34,250
your browser will do that in the background

42
00:02:34,250 --> 00:02:37,900
before those resources are necessarily used.

43
00:02:37,900 --> 00:02:41,360
And the same thing can actually be done with links.

44
00:02:41,360 --> 00:02:44,690
So that's a really interesting feature that you need to know.

45
00:02:44,690 --> 00:02:48,540
Something else that's cool is the Download Attribute.

46
00:02:48,540 --> 00:02:52,840
Before when you linked to files, you didn't necessarily have the choice

47
00:02:52,840 --> 00:02:55,850
about whether or not it was downloaded by your browser.

48
00:02:55,850 --> 00:02:59,920
You could send out different headers for it, but there was no specific guarantee.

49
00:02:59,920 --> 00:03:02,940
You can use the download attribute

50
00:03:02,940 --> 00:03:06,260
and cause the browser to download your file for you

51
00:03:06,260 --> 00:03:09,430
and even give it a specific filename.

52
00:03:09,430 --> 00:03:11,880
You can have Regular Expressions in your input tags.

53
00:03:11,880 --> 00:03:14,410
Just give it a pattern right inside the input.

54
00:03:14,410 --> 00:03:18,330
That will save a lot of help with JavaScript plugins, and finally

55
00:03:18,330 --> 00:03:21,940
the Datalist Element is something that's really awesome.

56
00:03:21,970 --> 00:03:24,400
If you've seen a search field or an input field

57
00:03:24,400 --> 00:03:26,840
that has something be autocompleted,

58
00:03:26,870 --> 00:03:32,620
the datalist attribute can accomplish the same exact thing using only HTML5.

59
00:03:32,620 --> 00:03:36,650
So you don't need to spend a lot of time doing round trips to the server or

60
00:03:36,650 --> 00:03:41,410
even including extra JavaScript, which will save on your page load times.

61
00:03:41,410 --> 00:03:43,540
Anyway, there's a bit more to this article.

62
00:03:43,540 --> 00:03:46,940
If you want to see a little bit more in depth how to use these different attributes,

63
00:03:46,940 --> 00:03:50,130
find it in our show notes at youtube.com/gotreehouse

64
00:03:50,130 --> 00:03:52,130
or in iTunes where you should rate us.

65
00:03:52,130 --> 00:03:54,640
If you haven't already, search for the Treehouse Show. Thank you.

66
00:03:55,640 --> 00:03:57,570
[Petit] Yes. Thank you. >>[Seifer] Thank you.

67
00:03:57,570 --> 00:04:00,460
[Petit] I really like the download attribute. >>[Seifer] Yeah.

68
00:04:00,460 --> 00:04:03,880
[Petit] And there's nothing more annoying than clicking a download link

69
00:04:03,880 --> 00:04:08,230
and then having the browser like open up a new tab and take you to this

70
00:04:08,230 --> 00:04:12,730
whole different web page and then it starts downloading or something weird like that.

71
00:04:12,730 --> 00:04:16,149
It's really nice just be able to click the button and know that you're

72
00:04:16,149 --> 00:04:18,980
going to get that file downloaded immediately.

73
00:04:18,980 --> 00:04:20,600
So really nice user experience there.

74
00:04:20,600 --> 00:04:23,640
[Seifer] I can of something a little more annoying. >>[Petit] What's that?

75
00:04:23,640 --> 00:04:26,620
[Seifer] When somebody does this right before you're about to make a really good point.

76
00:04:27,980 --> 00:04:31,780
It's kind of annoying. >>[Petit] Yeah. That's really, really annoying.

77
00:04:32,350 --> 00:04:35,720
Next up, is this CSS file or CSS framework.

78
00:04:35,740 --> 00:04:40,730
I'm not really sure what to call it. It's basically a CSS file. And it's called Pure.

79
00:04:42,130 --> 00:04:46,850
It's self-described as a set of small, responsive CSS modules

80
00:04:46,850 --> 00:04:49,300
that you can use in every web project.

81
00:04:50,300 --> 00:04:52,230
Thank you for the contribution, Jason.

82
00:04:53,850 --> 00:04:59,690
If we scroll down here, it has a really small file size. So that's very nice.

83
00:04:59,690 --> 00:05:03,680
It should make a page load pretty quick even if you didn't include it.

84
00:05:04,680 --> 00:05:08,710
And you can create responsive layouts and you can customize it quite a bit

85
00:05:08,710 --> 00:05:11,230
to create your own look and feel, so you can customize the colors,

86
00:05:11,230 --> 00:05:14,700
customize the border radius, or whatever you want.

87
00:05:14,770 --> 00:05:18,620
So let's go ahead and take a look at a quick example here.

88
00:05:18,620 --> 00:05:23,990
I'm going to jump into their forms, and if we scroll down here,

89
00:05:23,990 --> 00:05:26,520
they have a couple of different examples of forms.

90
00:05:26,520 --> 00:05:32,930
There's a compact inline form, a form that is stacked, and they even have

91
00:05:32,930 --> 00:05:38,100
this really neat multi-column form that when you resize the browser

92
00:05:38,100 --> 00:05:40,770
or when you look at it on a mobile device, it will actually

93
00:05:40,770 --> 00:05:44,650
compact itself down into a single column.

94
00:05:44,650 --> 00:05:50,050
So really pretty interesting concept because it's basically a set of

95
00:05:50,050 --> 00:05:52,460
responsive design patterns.

96
00:05:52,540 --> 00:05:54,390
We have this design patterns that

97
00:05:54,390 --> 00:05:58,720
are already well established on a desktop layout.

98
00:05:58,900 --> 00:06:04,260
So for example, when you're looking at search results and a search engine,

99
00:06:04,260 --> 00:06:07,460
you always know that there's going to be pagination down at the bottom,

100
00:06:07,460 --> 00:06:11,750
and that's generally going to look and feel the same way or follow the same model

101
00:06:11,750 --> 00:06:14,650
where there's forward and back buttons and a bunch of numbers.

102
00:06:14,650 --> 00:06:18,060
That's a design pattern, but these design patterns

103
00:06:18,060 --> 00:06:21,510
are less well established on mobile devices.

104
00:06:22,510 --> 00:06:26,010
That's your cue, Jason. >>[Seifer] I'm faking you out. >>[Petit] You've missed it.

105
00:06:26,340 --> 00:06:29,830
Oh, I missed it. You faked me out. That's good. That's good.

106
00:06:29,830 --> 00:06:31,880
That's it. That's like double annoying.

107
00:06:33,010 --> 00:06:37,410
But that's basically what a design pattern is

108
00:06:37,410 --> 00:06:41,450
and these are not really well established on mobile devices.

109
00:06:41,450 --> 00:06:48,490
So it's nice to have this CSS file that sets up a couple of good examples.

110
00:06:48,490 --> 00:06:50,890
[Seifer] Yeah. And easy to reuse.

111
00:06:50,890 --> 00:06:53,600
Next up, we have something called Popcorn.js.

112
00:06:53,600 --> 00:06:58,410
Popcorn.js is a really interesting project by Mozilla.

113
00:06:58,410 --> 00:07:05,540
This let's you essentially have JavaScript integration between video and the web.

114
00:07:05,540 --> 00:07:07,100
So, what does that mean?

115
00:07:07,100 --> 00:07:10,310
Well, there some really cool examples on the site of things that you can do.

116
00:07:10,310 --> 00:07:13,420
One of the things that they have—by the way, most of these examples

117
00:07:13,420 --> 00:07:16,200
that they have on the page require Firefox in order to work

118
00:07:16,890 --> 00:07:18,180
but forget about that for now.

119
00:07:18,180 --> 00:07:20,200
One of the really interesting examples that hey have on the page

120
00:07:20,200 --> 00:07:24,420
is a talk given by Linus Torvalds,

121
00:07:24,420 --> 00:07:29,770
and it's synced up with slides from the same talk using only JavaScript

122
00:07:29,770 --> 00:07:32,700
and the slides are synced up separately from the video.

123
00:07:32,700 --> 00:07:36,860
So essentially using their JavaScript API, you have access to all sorts of different

124
00:07:36,860 --> 00:07:39,740
callbacks and things you can do to manipulate videos

125
00:07:39,740 --> 00:07:41,940
and web pages at the same time.

126
00:07:41,940 --> 00:07:45,860
Now you can take a look at the documentation over in the API page.

127
00:07:45,860 --> 00:07:47,580
It's really, really easy to get going.

128
00:07:47,580 --> 00:07:52,150
You just include the Popcorn script in your website, and then if you want

129
00:07:52,150 --> 00:07:54,800
to make a quick footnote, this is how easy it is.

130
00:07:54,800 --> 00:07:58,530
Just a couple lines of code here, add in the start and end,

131
00:07:58,530 --> 00:08:02,150
and what you want the target to be as well as the text.

132
00:08:02,150 --> 00:08:05,100
So super simple to get started.

133
00:08:05,100 --> 00:08:09,790
Really, really interesting if you're looking to integrate web video and your pages

134
00:08:09,790 --> 00:08:12,110
and make everything all sorts of interactive.

135
00:08:12,110 --> 00:08:14,040
I'm not sure of any sites that do that yet,

136
00:08:14,040 --> 00:08:16,700
but maybe we'll watch for them pretty soon.

137
00:08:16,700 --> 00:08:20,770
[Petit] Yeah. That's really interesting because normally to do something like that,

138
00:08:20,770 --> 00:08:24,130
you would've had to actually burn the slides right into the video.

139
00:08:24,130 --> 00:08:29,080
[Seifer] Yeah. >>[Petit] But using this, I can totally imagine a situation where the slides

140
00:08:29,080 --> 00:08:31,940
are not only synced up with the video but actually maybe have some

141
00:08:31,940 --> 00:08:37,730
sort of interactive element to them where like they show an in browser example—

142
00:08:37,730 --> 00:08:39,600
[Seifer] Yeah. >>[Petit] —of what the person's talking about, maybe

143
00:08:39,600 --> 00:08:42,090
there's links that you can click on to read more.

144
00:08:42,090 --> 00:08:45,940
So that's pretty good use case— >>[Seifer] Yeah.

145
00:08:45,940 --> 00:08:47,760
[Petit] —of that particular feature. >>[Seifer] Really awesome.

146
00:08:47,770 --> 00:08:49,680
[Petit] So it's only for Firefox right now.

147
00:08:49,680 --> 00:08:54,370
[Seifer] Well, not just for Firefox but in order to get the best experience,

148
00:08:54,370 --> 00:09:00,860
you'll need a nightly version of Firefox and yes, some of the latest HTML5 features.

149
00:09:00,860 --> 00:09:03,420
So not necessarily going to work with older browsers,

150
00:09:03,420 --> 00:09:04,820
but I'm excited to see where it's going to go.

151
00:09:04,820 --> 00:09:06,860
[Petit] Yeah. No. That's very cool.

152
00:09:06,860 --> 00:09:11,510
So next up is a Sass Style Guide from Chris Coyier

153
00:09:11,510 --> 00:09:14,130
over at CSS-Tricks—friend of the show.

154
00:09:14,130 --> 00:09:19,080
And if we scroll down the pager, basically what Chris is saying

155
00:09:19,080 --> 00:09:24,010
in this blog post is that we've had CSS style guides, so in other words,

156
00:09:24,010 --> 00:09:29,630
we've had style guides that basically tell us how we should be using CSS

157
00:09:30,630 --> 00:09:34,080
and this is a style guide for Sass.

158
00:09:34,080 --> 00:09:38,260
So what he's saying is you should list your extends first than your

159
00:09:38,260 --> 00:09:42,850
regular styles next and then your includes and so on.

160
00:09:42,850 --> 00:09:48,030
One thing that I really like that he suggests is to only include

161
00:09:48,030 --> 00:09:52,650
a maximum level of 3 levels of nesting.

162
00:09:52,650 --> 00:09:57,770
So a maximum level of 3 levels of nesting, and then—

163
00:09:57,770 --> 00:10:02,600
[Seifer] That solid advice, by the way, anywhere not just in Sass. >>[Petit] Yeah. No.Totally.

164
00:10:02,600 --> 00:10:06,930
If you nest any more than that in Sass, it's going to start to get really confusing.

165
00:10:06,930 --> 00:10:12,150
Also, related to nesting, he suggest that the maximum length of something

166
00:10:12,150 --> 00:10:17,740
that's nested is should only be around 50 lines because after that,

167
00:10:17,740 --> 00:10:23,840
I mean it starts to get really confusing to figure out where you're starting

168
00:10:23,840 --> 00:10:28,130
a nesting point and where it's kind of ending, and if you're in the middle

169
00:10:28,130 --> 00:10:31,790
of the huge code block and you don't know that it's nested inside,

170
00:10:31,790 --> 00:10:33,510
something else that could be really confusing.

171
00:10:33,510 --> 00:10:35,590
So, all really good advice.

172
00:10:35,590 --> 00:10:39,220
There's a lot more in this particular blog post, but I'd go

173
00:10:39,220 --> 00:10:41,550
ahead and check it out if you're using Sass.

174
00:10:41,550 --> 00:10:43,210
[Seifer] Very nice. >>[Petit] Yup.

175
00:10:43,210 --> 00:10:47,350
[Seifer] Next up, we have a website called Screensiz.es

176
00:10:47,350 --> 00:10:50,520
This is just a really quick utility site that you may want to refer to

177
00:10:50,520 --> 00:10:53,750
when you're developing pretty much any web site.

178
00:10:53,750 --> 00:10:55,990
It goes through and lists different devices.

179
00:10:55,990 --> 00:11:01,040
You can order them by popularity, width, height, and pixels of their display

180
00:11:01,040 --> 00:11:05,170
and just a whole bunch of stuff including pixel density, device width,

181
00:11:05,170 --> 00:11:08,210
operating system, and even the physical size of the device.

182
00:11:08,210 --> 00:11:13,050
Now this works for smart phones, tablets, and even monitors.

183
00:11:13,050 --> 00:11:16,100
So it goes through and tells you of the display density

184
00:11:16,100 --> 00:11:19,740
and screen size of a ChromeBook, different models, and MacBook Pros,

185
00:11:19,740 --> 00:11:21,990
different Dells, just a few of them.

186
00:11:21,990 --> 00:11:27,550
So great site—something good to refer to while you're going through

187
00:11:27,550 --> 00:11:30,320
and developing your sites, especially good if you're developing something

188
00:11:30,320 --> 00:11:33,180
responsive and want of target, specific devices.

189
00:11:33,740 --> 00:11:35,550
[Petit] Very nice. >>[Seifer] Yes, check that one out.

190
00:11:35,550 --> 00:11:40,490
[Petit] Next up is a cool blog post called the Principles of Flat Design.

191
00:11:40,490 --> 00:11:44,530
Now once again we've talked about this quite a bit on the show here. >>[Seifer] Yeah.

192
00:11:44,530 --> 00:11:49,740
[Petit] And Flat Design is basically the opposite of skeuomorphism.

193
00:11:49,740 --> 00:11:55,800
That said, I don't think it's really one or the other and I certainly don't think

194
00:11:55,800 --> 00:11:59,880
that flat design is the end all be all future of design.

195
00:11:59,880 --> 00:12:01,520
It's just kind of a design trend.

196
00:12:01,520 --> 00:12:06,480
We've seen these types of things come and go with like the shiny Web 2.0 look.

197
00:12:07,480 --> 00:12:10,960
We've seen the grunge trend kind of come and go,

198
00:12:10,960 --> 00:12:15,090
and I think this is a little bit of a response to all that.

199
00:12:15,870 --> 00:12:19,160
[Seifer] It's also worth noting that it can be complementary to skeuomorphism. >>[Petit] Yeah.

200
00:12:19,680 --> 00:12:23,670
[Seifer] You can combine skeuomorphism and Flat Design when laying out your pages.

201
00:12:23,670 --> 00:12:25,350
[Petit] Totally. Absolutely.

202
00:12:25,350 --> 00:12:30,430
I think Flat Design is a little bit of response to all of the embellishments

203
00:12:30,430 --> 00:12:35,100
that we've seen with the Web 2.0 look or the grunge look

204
00:12:35,100 --> 00:12:38,510
or so many other trends or looks that we've seen.

205
00:12:38,510 --> 00:12:41,390
[Seifer] Lots of use of textures. Things like that. >>[Petit] Yeah. Exactly.

206
00:12:41,390 --> 00:12:46,370
So this is a much simpler approach to designing websites.

207
00:12:46,370 --> 00:12:50,260
And, one of the first principles that they suggest is no added effects.

208
00:12:50,260 --> 00:12:52,980
So exactly like I was just saying.

209
00:12:52,980 --> 00:12:57,670
You should avoid drop shadows, bevels, embossing, any kind of gradients

210
00:12:57,670 --> 00:13:01,310
or anything else that would add depth to the page.

211
00:13:01,310 --> 00:13:03,830
You want it to be very flat.

212
00:13:03,830 --> 00:13:07,640
Another thing that they suggest is using very simple elements.

213
00:13:07,640 --> 00:13:12,160
So I think that's obvious, but basically you don't want to create

214
00:13:12,160 --> 00:13:15,070
iconography that is very intricately detailed.

215
00:13:15,070 --> 00:13:19,480
You want something that's super simple that's basically just a representation

216
00:13:19,480 --> 00:13:23,690
of the thing that you're trying to represent.

217
00:13:23,690 --> 00:13:28,160
And then, another tip they say is to really focus on your typography.

218
00:13:28,160 --> 00:13:31,150
When there are fewer things on the page,

219
00:13:31,150 --> 00:13:35,220
the user's attention is drawn much more to typography.

220
00:13:35,220 --> 00:13:40,590
So it's really important to think about that a lot and get it right.

221
00:13:40,590 --> 00:13:46,910
There are a whole bunch of more tips here, but it's a really pretty good blog post

222
00:13:46,910 --> 00:13:53,420
that summarizes all things that have come together to make flat design what it is.

223
00:13:53,420 --> 00:13:58,380
[Seifer] Very nice. >>[Petit] Yup. >>[Seifer] And speaking of design—not necessarily flat design—

224
00:13:58,380 --> 00:14:02,220
next up, we have post called the Starters Guide to iOS Design,

225
00:14:02,220 --> 00:14:04,470
and this is absolutely incredible.

226
00:14:04,470 --> 00:14:06,760
It goes through everything that you need to know

227
00:14:06,760 --> 00:14:09,430
when you get started designing for iOS,

228
00:14:09,430 --> 00:14:12,650
talking about pixel density, screen sizes, and how it all relates.

229
00:14:12,650 --> 00:14:15,630
It is incredibly, incredibly thorough.

230
00:14:15,630 --> 00:14:20,210
So the author goes through, and he talks about developing

231
00:14:20,210 --> 00:14:23,430
with a retina display and without a retina display.

232
00:14:23,430 --> 00:14:26,130
He's even going through and telling you the different jargon that you

233
00:14:26,130 --> 00:14:28,970
need to know while working with the different devices.

234
00:14:28,970 --> 00:14:32,240
So I'm not going to be able to go through and show you this entire article

235
00:14:32,240 --> 00:14:36,020
because it's incredibly long and it goes through every single part of the

236
00:14:36,020 --> 00:14:41,540
design process including story boarding, pixel density, screen size, ratios—

237
00:14:41,540 --> 00:14:43,350
basically everything you need to know.

238
00:14:43,350 --> 00:14:47,370
Incredibly thorough blog post, and if you are new to iOS design

239
00:14:47,370 --> 00:14:50,190
or even thinking about getting into it, definitely read this.

240
00:14:50,190 --> 00:14:52,180
You can find it in the show notes. >>[Petit] Yeah.

241
00:14:52,180 --> 00:14:56,490
It is a long blog post but it is very readable because there's a lot of pictures

242
00:14:56,490 --> 00:15:00,420
that really helped it breakdown all the concepts that they're talking about.

243
00:15:00,420 --> 00:15:02,080
[Seifer] Yeah. >>[Petit] Very cool stuff.

244
00:15:02,080 --> 00:15:05,270
I think that's all about we have for you this week. Nick, who are you on Twitter?

245
00:15:05,270 --> 00:15:07,940
[Petit] I am @NickRP. >>[Seifer] And I am @JSeifer.

246
00:15:07,940 --> 00:15:10,430
For more information on anything we talked about on this show,

247
00:15:10,430 --> 00:15:13,840
you can check out our show notes at youtube.com/gotreehouse

248
00:15:13,840 --> 00:15:17,550
or search for us in iTunes, check us out at the Treehouse Show

249
00:15:17,550 --> 00:15:19,320
and please leave us a rating.

250
00:15:19,320 --> 00:15:24,690
[Petit] And of course, if you like to see more videos like this one about iOS, Android,

251
00:15:24,690 --> 00:15:28,370
starting your own business, making websites, and so much more,

252
00:15:28,370 --> 00:15:32,050
be sure to check us out at teamtreehouse.com.

253
00:15:32,050 --> 00:15:35,830
Thank you so much for watching and we'll see you next week.