1
00:00:00,430 --> 00:00:01,240
I'm Nick Pettit.

2
00:00:01,240 --> 00:00:02,300
>> I'm Jason Seifer.

3
00:00:02,300 --> 00:00:05,100
>> And you're watching the Treehouse Show,
your weekly dose of internets,

4
00:00:05,100 --> 00:00:08,490
where we talk about all things web design,
web development, and more.

5
00:00:08,490 --> 00:00:11,300
>> The Treehouse Show is brought to you by
Treehouse.

6
00:00:11,300 --> 00:00:13,360
If you wanna learn web design, web
development, and so

7
00:00:13,360 --> 00:00:16,118
much more, check out
teamtreehouse.com/show

8
00:00:16,118 --> 00:00:18,300
for a 30-day free trial.

9
00:00:18,300 --> 00:00:19,820
In this episode we'll be talking about a
web

10
00:00:19,820 --> 00:00:25,140
design field manual, asynchronous scripts,
file uploads, and more.

11
00:00:25,140 --> 00:00:26,322
>> Let's check it out.

12
00:00:26,322 --> 00:00:31,324
[MUSIC].

13
00:00:31,324 --> 00:00:34,580
First up is designing for the web.

14
00:00:34,580 --> 00:00:39,060
Which is a field manual for web design.

15
00:00:39,060 --> 00:00:43,050
Now, if you're not familiar, web design
has just hit version 1.0.

16
00:00:43,050 --> 00:00:46,310
So we're out of the beta period for web
design.

17
00:00:46,310 --> 00:00:46,490
>> We were.

18
00:00:46,490 --> 00:00:46,720
>> Which is.

19
00:00:46,720 --> 00:00:47,580
>> In it for a while.

20
00:00:47,580 --> 00:00:48,000
>> Yeah.

21
00:00:48,000 --> 00:00:49,390
So this is really great.

22
00:00:49,390 --> 00:00:50,750
>> We were in it to win it.

23
00:00:50,750 --> 00:00:53,555
>> You can see that they're using a
hamburger menu, which as we

24
00:00:53,555 --> 00:00:57,120
discussed in the previous episode is maybe
something you don't want to do.

25
00:00:57,120 --> 00:00:58,430
So maybe they'll take that out in V2.

26
00:00:58,430 --> 00:01:02,330
>> Yeah, are we sure this is Version 1.0?

27
00:01:02,330 --> 00:01:04,850
>> That's what it says.

28
00:01:04,850 --> 00:01:05,095
>> Huh.

29
00:01:05,095 --> 00:01:05,360
>> V1.0.0

30
00:01:05,360 --> 00:01:08,890
>> Summer of 2014 or Oh Fourteen, as Nick
says.

31
00:01:08,890 --> 00:01:10,936
>> Any web design manual would incomplete

32
00:01:10,936 --> 00:01:13,470
without starting with a quote from Steve
Jobs.

33
00:01:13,470 --> 00:01:14,820
So there that is.

34
00:01:14,820 --> 00:01:20,130
Then, you have some resources here, to
learn about web design.

35
00:01:20,130 --> 00:01:22,320
Maybe share your stuff on Dribble.

36
00:01:22,320 --> 00:01:25,020
Check out some responsive design patterns.

37
00:01:25,020 --> 00:01:27,510
Learn things on Medium.

38
00:01:27,510 --> 00:01:29,010
Lots of great stuff in here.

39
00:01:29,010 --> 00:01:32,200
So definitely be sure to check out those
links.

40
00:01:32,200 --> 00:01:36,568
There's then a whole list of style guides,
do's

41
00:01:36,568 --> 00:01:41,740
and don'ts, and you can learn about style
guides there.

42
00:01:41,740 --> 00:01:43,220
>> Do make a style guide.

43
00:01:43,220 --> 00:01:45,170
>> Don't use hamburger menus.

44
00:01:45,170 --> 00:01:47,710
Then, there's this list of resources
about-.

45
00:01:47,710 --> 00:01:50,960
>> Every time you say hamburger menu, I, I
want a hamburger.

46
00:01:50,960 --> 00:01:52,710
>> You're just, super hungry I guess.

47
00:01:52,710 --> 00:01:53,290
>> Yeah.

48
00:01:53,290 --> 00:01:53,610
>> Yeah.

49
00:01:53,610 --> 00:01:55,420
>> For a hamburger.

50
00:01:55,420 --> 00:01:58,306
>> There's [LAUGH] some resources here,
where

51
00:01:58,306 --> 00:02:00,911
you can learn more about style guides.

52
00:02:00,911 --> 00:02:03,267
So, these are all of the style guides

53
00:02:03,267 --> 00:02:08,400
from companies like MailChimp, Mozilla,
Salesforce, and so on.

54
00:02:08,400 --> 00:02:12,640
You can learn about process and lots of
other cool stuff.

55
00:02:12,640 --> 00:02:15,860
So there's quite a few more sections here.

56
00:02:15,860 --> 00:02:18,700
Lots of really amazing resources.

57
00:02:18,700 --> 00:02:21,440
I know I was making fun of this, but it's
actually pretty cool,

58
00:02:21,440 --> 00:02:26,120
so definitely be sure to check out this
field manual of web design.

59
00:02:26,120 --> 00:02:27,758
>> Yeah, we've talked about a lot of those
things on

60
00:02:27,758 --> 00:02:29,937
the show too, so that's you know, it's
nice to be validated.

61
00:02:29,937 --> 00:02:31,050
>> Mmm.

62
00:02:31,050 --> 00:02:33,160
>> That was a web design joke.

63
00:02:33,160 --> 00:02:34,010
Get it?

64
00:02:34,010 --> 00:02:34,920
>> Validation.

65
00:02:36,170 --> 00:02:38,140
>> Next up we have a blog post by

66
00:02:38,140 --> 00:02:44,380
Ilia Gregorich on the script-injected
async scripts are considered harmful.

67
00:02:44,380 --> 00:02:48,290
So what is a script-injected async script?

68
00:02:48,290 --> 00:02:49,960
So here's an example up here.

69
00:02:49,960 --> 00:02:52,714
You have a script embedded in the page
where you are just going

70
00:02:52,714 --> 00:02:56,590
to get a little piece of JavaScript that
you are including on your page.

71
00:02:56,590 --> 00:03:02,110
And that is bad because it blocks the rest
of the request from going through while

72
00:03:02,110 --> 00:03:07,420
that Java Script is requested, the dom can
not be properly rendered.

73
00:03:07,420 --> 00:03:11,274
So, the good way to do it is to create a
script variable in

74
00:03:11,274 --> 00:03:17,160
Java Script, give it the source and then
append the child to the document.

75
00:03:17,160 --> 00:03:20,100
Now, what is the difference between the
two?

76
00:03:20,100 --> 00:03:23,640
Well in the bad example, the DOM
construction is block, but in

77
00:03:23,640 --> 00:03:27,550
the good example there were more were, the
request had happened asynchronously.

78
00:03:27,550 --> 00:03:33,770
Now that is great, but it does come at a
little cost which is that

79
00:03:33,770 --> 00:03:39,810
the css object model is also blocked while
that script is gotten and retrieved.

80
00:03:39,810 --> 00:03:42,630
And then nothing else on the page can be
rendered.

81
00:03:42,630 --> 00:03:44,769
So, the solution after all of this is

82
00:03:44,769 --> 00:03:48,240
to add this little async attribute right
here.

83
00:03:48,240 --> 00:03:52,840
And when you add the async attribute, the
CSS object model is

84
00:03:52,840 --> 00:03:58,460
not blocked while the JavaScript is
fetched and rendered into the page.

85
00:03:58,460 --> 00:04:01,050
So that is the long story short, that's
the TLDR.

86
00:04:01,050 --> 00:04:05,540
For information and background, go ahead
and check out this blog post.

87
00:04:05,540 --> 00:04:08,096
>> Well, if I can inject myself into this
next

88
00:04:08,096 --> 00:04:11,260
segment, I'd like to talk about the scroll
up bar.

89
00:04:11,260 --> 00:04:12,870
That was pretty bad.

90
00:04:12,870 --> 00:04:13,900
>> It was.

91
00:04:13,900 --> 00:04:15,110
>> The scroll up bar which is

92
00:04:15,110 --> 00:04:19,400
this design pattern that currently growing
in popularity.

93
00:04:19,400 --> 00:04:25,900
So if we head over to the New York Times
website, you can look at the navigation

94
00:04:25,900 --> 00:04:32,920
bar right here and when I scroll down the
page, bam, it pops to the top of the page.

95
00:04:32,920 --> 00:04:36,640
And as I scroll up and down, it stays
there.

96
00:04:36,640 --> 00:04:40,560
So this has been dubbed the Scroll Up Bar.

97
00:04:40,560 --> 00:04:42,720
Or actually I should say, the thing we're

98
00:04:42,720 --> 00:04:44,990
gonna talk about later is the scroll up
bar.

99
00:04:44,990 --> 00:04:48,590
But this has become a popular design
pattern, to have

100
00:04:48,590 --> 00:04:51,770
this fixed position bar at the top of the
page.

101
00:04:51,770 --> 00:04:54,968
Forbes does a very similar thing, and it's
kind

102
00:04:54,968 --> 00:04:58,134
of spreading all over the, all over the
place.

103
00:04:58,134 --> 00:05:00,267
The problem is that this takes up

104
00:05:00,267 --> 00:05:04,340
some precious screen real estate on mobile
devices.

105
00:05:04,340 --> 00:05:10,460
So, the suggested solution in this blog
post is to instead hide that bar

106
00:05:10,460 --> 00:05:17,040
as you're scrolling down when you scroll
back up reveal the bar again.

107
00:05:17,040 --> 00:05:19,578
So see when you scroll up, disappears.

108
00:05:19,578 --> 00:05:22,710
And when you scroll back down, it
reappears.

109
00:05:22,710 --> 00:05:24,280
So why would you want to do that?

110
00:05:24,280 --> 00:05:31,200
Well, right here at the end, scrolling up
won't necessarily mean the user wants the

111
00:05:31,200 --> 00:05:38,550
navigation, but 100% of the people wanting
the navigation will be scrolling up.

112
00:05:38,550 --> 00:05:40,960
So it's a little bit confusing -.

113
00:05:40,960 --> 00:05:41,850
>> The math.

114
00:05:41,850 --> 00:05:43,440
I think it checks out.

115
00:05:43,440 --> 00:05:44,856
>> To to think about.

116
00:05:44,856 --> 00:05:47,856
But that's actually a really good
explanation

117
00:05:47,856 --> 00:05:50,470
of why you would want to do that.

118
00:05:50,470 --> 00:05:53,350
Anyway, I thought this was a pretty cool
design pattern.

119
00:05:53,350 --> 00:05:56,040
So, definitely something to think about.

120
00:05:56,040 --> 00:05:58,640
>> And, uh,yeah, if you want to read more
about that or check

121
00:05:58,640 --> 00:06:02,280
out the sample, you can get to it at show
notes at youtube.com/gotreehouse.

122
00:06:02,280 --> 00:06:03,830
Also, if you'd like to sign up for a

123
00:06:03,830 --> 00:06:08,620
30 day free trial of treehouse, check out
teamtreehouse.com/show.

124
00:06:08,620 --> 00:06:11,780
Next up we have a project called angular
file upload.

125
00:06:11,780 --> 00:06:13,910
This is a really, really interesting
project.

126
00:06:13,910 --> 00:06:18,798
It's a JavaScript library that allows you
to have multiple,

127
00:06:18,798 --> 00:06:25,040
simultaneous, stable, and resumable
uploads via the HTML 5 file API.

128
00:06:25,040 --> 00:06:28,220
Now, we've talked about different upload
libraries on this show before.

129
00:06:28,220 --> 00:06:30,170
Well, what makes this different?

130
00:06:30,170 --> 00:06:34,750
There's actually a server side component
to this, as well, that is written in PHP.

131
00:06:34,750 --> 00:06:39,250
And, what it does is it breaks up the
different files into smaller chunks.

132
00:06:39,250 --> 00:06:41,520
Now, when it uploads those chunks it does
so

133
00:06:41,520 --> 00:06:45,220
separately, and then reassembles them
later on the server.

134
00:06:45,220 --> 00:06:49,312
This allows you to have some really cool
behavior, like being able to pause and

135
00:06:49,312 --> 00:06:53,630
resume file uploads on the client and the
server and come back to it later.

136
00:06:53,630 --> 00:06:56,780
This is great if say the network
connection drops out while your users

137
00:06:56,780 --> 00:06:58,990
is uploading files or they accidentally
close

138
00:06:58,990 --> 00:07:00,460
the browser tab or something like that.

139
00:07:00,460 --> 00:07:04,580
>> Or maybe somebody picks up the phone at
home and kills your internet connection.

140
00:07:04,580 --> 00:07:05,180
>> Oh, yeah.

141
00:07:05,180 --> 00:07:08,100
That was a thing back in the days of
modems.

142
00:07:08,100 --> 00:07:09,180
Remember those?

143
00:07:09,180 --> 00:07:10,990
>> Was that, do people not use those
things anymore?

144
00:07:10,990 --> 00:07:11,330
>> No they don't.

145
00:07:11,330 --> 00:07:12,510
>> Oh.

146
00:07:12,510 --> 00:07:13,400
>> Welcome to 2014, Nick.

147
00:07:13,400 --> 00:07:16,035
So there is a demo on the site where you

148
00:07:16,035 --> 00:07:19,095
can upload a file or folder and if you
want to

149
00:07:19,095 --> 00:07:23,430
you can actually check out the
documentation for the angular

150
00:07:23,430 --> 00:07:27,650
part of it and also it is completely
available on GitHub.

151
00:07:27,650 --> 00:07:28,810
So go ahead and check that out.

152
00:07:28,810 --> 00:07:31,287
We'll also have a link to that in the show
notes.

153
00:07:31,287 --> 00:07:32,605
>> Very cool stuff.

154
00:07:32,605 --> 00:07:35,100
Well next up is compressor.io.

155
00:07:35,100 --> 00:07:38,820
Maybe you've used images on a website
before and you were like man.

156
00:07:38,820 --> 00:07:40,730
>> Never received images on a website.

157
00:07:40,730 --> 00:07:44,260
>> These images are really, really big and
taking up a lot of space.

158
00:07:44,260 --> 00:07:47,030
Yeah I'm sure that's why you probably
don't use them.

159
00:07:47,030 --> 00:07:52,570
Well compressor.io as you might imagine,
compresses images.

160
00:07:52,570 --> 00:07:58,440
So here is a before and after of this
picture of an iguana.

161
00:07:58,440 --> 00:08:02,090
And I can move the slider back and forth
and.

162
00:08:02,090 --> 00:08:03,820
>> I don't see anything that's different.

163
00:08:03,820 --> 00:08:05,270
>> You might not see any change at all.

164
00:08:05,270 --> 00:08:06,330
>> I see no changes.

165
00:08:06,330 --> 00:08:10,250
>> And that's what you would want though
with a good compression library.

166
00:08:10,250 --> 00:08:11,752
You want to see -
>> Nothing.

167
00:08:11,752 --> 00:08:15,037
>> Absolutely no change from the
compressed version and

168
00:08:15,037 --> 00:08:18,790
the original version, other than a smaller
file size.

169
00:08:18,790 --> 00:08:20,910
So one of these images, is 700k.

170
00:08:20,910 --> 00:08:23,460
And the other one is 250k.

171
00:08:23,460 --> 00:08:29,000
And it's compressing it by 64% in this
particular case.

172
00:08:29,000 --> 00:08:32,825
However, they claim, that Compressor can
compress

173
00:08:32,825 --> 00:08:36,050
images up to 90% which is pretty insane.

174
00:08:37,560 --> 00:08:39,220
>> I like that there's two different
options for it.

175
00:08:39,220 --> 00:08:44,600
You know, lossless and lossy where if you
don't mind if little bits of the image

176
00:08:44,600 --> 00:08:48,100
don't look quite as good you know, to get
a little bit more compression out of it.

177
00:08:48,100 --> 00:08:50,150
You can actually enable that feature as
well.

178
00:08:50,150 --> 00:08:51,050
So that's pretty cool.

179
00:08:51,050 --> 00:08:52,410
>> It's, it's pretty amazing.

180
00:08:52,410 --> 00:08:58,940
So why would you use this if you can use
something like JPEG, p, PING, GIF, or SVG?

181
00:08:58,940 --> 00:09:02,700
Well, it actually compresses the files
even more.

182
00:09:02,700 --> 00:09:06,015
So, if we go to the About page, it's
actually

183
00:09:06,015 --> 00:09:09,925
using several open source libraries to do
this and some

184
00:09:09,925 --> 00:09:14,600
things that are coming next are batch
uploading, increasing the

185
00:09:14,600 --> 00:09:19,960
maximum file size limit, an offline
desktop version, and more.

186
00:09:19,960 --> 00:09:23,194
So it'd be really great if we could get
something like this

187
00:09:23,194 --> 00:09:26,730
into say, Grunt or Gulp or one of those
front end task runners.

188
00:09:26,730 --> 00:09:27,880
>> Ooh very nice.

189
00:09:27,880 --> 00:09:28,660
Very good idea.

190
00:09:28,660 --> 00:09:32,940
>> But you can try it by clicking the try
it button and right now you can just drag

191
00:09:32,940 --> 00:09:39,990
and drop your images right onto this area
and it will go ahead and compress them.

192
00:09:39,990 --> 00:09:41,300
>> Ver, very, very cool.

193
00:09:41,300 --> 00:09:42,340
>> Pretty amazing.

194
00:09:42,340 --> 00:09:45,650
>> Next up we have a Hacker's Guide to
Git.

195
00:09:45,650 --> 00:09:47,360
Now i'm not completely sure that we should
trust

196
00:09:47,360 --> 00:09:50,550
this because the website it's on is called
wildly inaccurate.

197
00:09:50,550 --> 00:09:54,530
But it does have some really great advice
about using GIT.

198
00:09:54,530 --> 00:09:56,162
Now, this is not going to be a

199
00:09:56,162 --> 00:09:59,946
full tutorial to GIT although it is very
thorough.

200
00:09:59,946 --> 00:10:04,607
This tutorial focuses on real world work
and what you will be doing most

201
00:10:04,607 --> 00:10:10,320
of the time as a quote-unquote hacker, or
somebody who codes and uses GIT.

202
00:10:10,320 --> 00:10:11,750
So it's a great tutorial.

203
00:10:11,750 --> 00:10:13,420
Walks you through initializing a Git

204
00:10:13,420 --> 00:10:16,840
repository, goes through the different
tree objects,

205
00:10:16,840 --> 00:10:21,340
explains how to merge and what all the
different parts of Git really are.

206
00:10:21,340 --> 00:10:24,958
I am not gonna get into this whole thing
because it is a very, very

207
00:10:24,958 --> 00:10:27,437
long tutorial and this is a relatively
short

208
00:10:27,437 --> 00:10:29,730
show but trust me it is worth reading.

209
00:10:29,730 --> 00:10:31,660
Check it out in the show notes.

210
00:10:31,660 --> 00:10:34,690
And that is about all we have time for
today, Nick who are you on Twitter?

211
00:10:34,690 --> 00:10:36,820
>> I am @nickrp
>> And I am @jseifer.

212
00:10:36,820 --> 00:10:38,310
For more information on anything we talked

213
00:10:38,310 --> 00:10:40,510
about check out our show notes at
YouTube.com/gotreehouse.

214
00:10:40,510 --> 00:10:44,900
You can also search for us in iTunes we
are the Treehouse Show.

215
00:10:44,900 --> 00:10:45,980
Don't forget for a free

216
00:10:45,980 --> 00:10:48,760
month of Treehouse, check out
teamtreehouse.com/show.

217
00:10:48,760 --> 00:10:51,170
>> Of course, if you'd like to see more

218
00:10:51,170 --> 00:10:54,120
videos like this one about web design, web
development,

219
00:10:54,120 --> 00:10:56,870
mobile business and so much more, you can
check

220
00:10:56,870 --> 00:11:01,490
us out at teamtreehouse.com/show and get a
free month.

221
00:11:01,490 --> 00:11:04,255
Thank you so much for watching, and we
will see you next week.

222
00:11:04,255 --> 00:11:11,189
[MUSIC]