1
00:00:00,037 --> 00:00:10,615
[SOUND].

2
00:00:10,615 --> 00:00:14,174
Well, I guess, I'm Nick Pettit.

3
00:00:14,174 --> 00:00:15,293
>> I'm Jason Seifer.

4
00:00:15,293 --> 00:00:18,209
>> And you're watching the Treehouse show,
your weekly dose of internets

5
00:00:18,209 --> 00:00:21,144
where we talk about all things web design,
web development, and more.

6
00:00:21,144 --> 00:00:24,421
>> In this episode, we will be talking
about the share

7
00:00:24,421 --> 00:00:29,540
icon, direct uploads to Amazon S3, the Web
Starter Kit, and more.

8
00:00:29,540 --> 00:00:30,467
>> Let's check it out.

9
00:00:30,467 --> 00:00:35,497
[MUSIC]

10
00:00:35,497 --> 00:00:41,500
>> Well, first up is a blog post called
Share, the icon that no one agrees on.

11
00:00:41,500 --> 00:00:43,230
Now if you
>> I disagree with that.

12
00:00:43,230 --> 00:00:48,460
If you've used Apple's iOS or Mac OS X,
Google

13
00:00:48,460 --> 00:00:54,370
Android, Windows 8, or been on any web
pages, you might have seen

14
00:00:54,370 --> 00:00:59,580
that there's a bunch of different icons
for the same thing, sharing something.

15
00:00:59,580 --> 00:01:03,970
Whether that's over email or SMS or on a
social network, and so

16
00:01:03,970 --> 00:01:09,470
on, nobody seems to agree on what this
particular icon should look like.

17
00:01:09,470 --> 00:01:14,350
Now awhile back there was actually a
standard sort of being

18
00:01:14,350 --> 00:01:19,840
developed for what the share icon should
look like and I think Google Android.

19
00:01:19,840 --> 00:01:23,770
Adopted that particular one, at least from
what I remember, but there

20
00:01:23,770 --> 00:01:27,080
is also, now there's open share icon, and
I think there's one

21
00:01:27,080 --> 00:01:33,050
other one that's competing, but now these
different operating systems have also

22
00:01:33,050 --> 00:01:38,870
implemented their own share icons, so
across the board they're all different.

23
00:01:38,870 --> 00:01:42,770
This is pretty fascinating sort of as a
design discussion because.

24
00:01:42,770 --> 00:01:46,240
It's interesting how quickly we all
settled on say

25
00:01:46,240 --> 00:01:49,560
the hamburger menu for slide out menus but
how.

26
00:01:49,560 --> 00:01:51,560
>> You get hungry every time you mention
the

27
00:01:51,560 --> 00:01:55,040
hamburger menu, it's like, sure I'll like
a hamburger.

28
00:01:55,040 --> 00:01:57,860
>> But you know for something like sharing
that's so common,there

29
00:01:57,860 --> 00:02:03,850
still not a standard for this or sort of a
defacto icon.

30
00:02:03,850 --> 00:02:05,530
>> I would share a burger with you.

31
00:02:05,530 --> 00:02:07,830
>> I'd, I'd share a burger with you too.

32
00:02:07,830 --> 00:02:09,040
Sound, sounds delicious.

33
00:02:09,040 --> 00:02:09,419
>> It'd be nice.

34
00:02:09,419 --> 00:02:10,518
>> Yeah.

35
00:02:10,518 --> 00:02:11,666
>> Once in a while.

36
00:02:11,666 --> 00:02:12,464
>> Down here we have.

37
00:02:12,464 --> 00:02:13,692
>> Doesn't have to be every weekend.

38
00:02:13,692 --> 00:02:18,508
Just once in a while.

39
00:02:18,508 --> 00:02:24,493
Down here we have whats called the, the
uploader icon in IOS 7 so you

40
00:02:24,493 --> 00:02:30,688
can click to say upload something or share
it which sort of corresponds

41
00:02:30,688 --> 00:02:37,040
to the download icon here in, pre IOS 7
operating systems.

42
00:02:37,040 --> 00:02:41,400
There is the outgoing tray, so they sort
of switched icons there.

43
00:02:41,400 --> 00:02:47,960
There is the three dots for Android, where
it sort of looks like this, and so on.

44
00:02:47,960 --> 00:02:52,170
Anyway, really interesting article,
doesn't feature any hamburgers

45
00:02:52,170 --> 00:02:56,130
at all, I'm sorry Jason, but it's, pretty
interesting.

46
00:02:56,130 --> 00:02:56,235
>> Hm.

47
00:02:56,235 --> 00:02:58,020
[INAUDIBLE]
>> Definitely worth the read.

48
00:02:58,020 --> 00:02:58,990
Thanks for sharing.

49
00:02:58,990 --> 00:02:59,600
>> You're welcome.

50
00:02:59,600 --> 00:03:03,070
>> Next up we have a project called
evaporate dot js.

51
00:03:03,070 --> 00:03:08,120
Evaporate dot js is a JavaScript library
for directly

52
00:03:08,120 --> 00:03:11,940
uploading files to amazon s three from
your webpage.

53
00:03:11,940 --> 00:03:15,420
Now this is as great great library because
it

54
00:03:15,420 --> 00:03:22,120
supports, it supports resumable uploads
using the upload multipart functionality.

55
00:03:22,120 --> 00:03:25,620
The reason that is so useful is because if
you are uploading a

56
00:03:25,620 --> 00:03:30,370
1000 megabyte file or one gigabyte, as
some people might say, and you've

57
00:03:30,370 --> 00:03:35,050
only uploaded the first 900 megabytes, and
then for some reason your network

58
00:03:35,050 --> 00:03:39,690
connection fails, normally you would have
to restart the upload from the beginning.

59
00:03:39,690 --> 00:03:42,360
However, that is not so with EvaporateJS.

60
00:03:42,360 --> 00:03:49,040
It does the upload in small chunks and
then carry on from where it left off.

61
00:03:50,140 --> 00:03:52,680
It is super easy to include in your page.

62
00:03:52,680 --> 00:03:56,350
Just include the evaporate.js file.

63
00:03:56,350 --> 00:03:58,960
You also have to set up your S3 bucket

64
00:03:58,960 --> 00:04:03,840
with this configuration to allow upload's
from other domains.

65
00:04:03,840 --> 00:04:07,110
There is example application that is
included.

66
00:04:07,110 --> 00:04:12,020
But we are not going to show that because
we would have to enter our personal Amazon

67
00:04:12,020 --> 00:04:14,350
web server keys and the buckets and I do

68
00:04:14,350 --> 00:04:16,960
not feel comfortable revealing that
information on the show.

69
00:04:16,960 --> 00:04:18,260
>> Lets just put them out there.

70
00:04:18,260 --> 00:04:21,200
Lets just get it all out in the open.

71
00:04:21,200 --> 00:04:23,640
>> So basically it's a great.

72
00:04:23,640 --> 00:04:26,720
Great plugin for uploading, very easy to
use.

73
00:04:26,720 --> 00:04:28,190
Go on and check it out in the show notes
on YouTube

74
00:04:28,190 --> 00:04:31,580
dot com slash go treehouse, you can also
search for us in iTunes.

75
00:04:31,580 --> 00:04:35,520
We are the treehouse show and join us for
one free

76
00:04:35,520 --> 00:04:39,390
month of treehouse by going to team
treehouse dot com slash show.

77
00:04:39,390 --> 00:04:40,000
>> Very nice stuff.

78
00:04:40,000 --> 00:04:43,320
Well next up is Google's web starter kit.

79
00:04:43,320 --> 00:04:46,870
This goes along with their web
fundamentals, it's

80
00:04:46,870 --> 00:04:52,310
a Boilerplate and tooling for multi-device
development, so

81
00:04:52,310 --> 00:04:54,330
you can download the kit right here and

82
00:04:54,330 --> 00:04:57,340
it's currently in Beta, where does that
get you?

83
00:04:57,340 --> 00:05:02,230
Well, there's a multi device responsive
boilerplate

84
00:05:02,230 --> 00:05:04,860
template and it has a very high

85
00:05:04,860 --> 00:05:08,310
page speed insights performance score, so
its

86
00:05:08,310 --> 00:05:10,990
gonna be very performant, that's very
cool.

87
00:05:10,990 --> 00:05:14,120
There's cross device synchronization.

88
00:05:14,120 --> 00:05:14,670
What?

89
00:05:14,670 --> 00:05:15,800
That's pretty amazing.

90
00:05:15,800 --> 00:05:22,020
Live browser reloading, sass support, a
report with page speed insights.

91
00:05:23,036 --> 00:05:25,890
There's even a built in HTTP server.

92
00:05:25,890 --> 00:05:27,320
So, it's pretty amazing.

93
00:05:27,320 --> 00:05:30,320
There's a lot of stuff going on here, and
we're not gonna

94
00:05:30,320 --> 00:05:34,590
talk about all of them, but I do want to
flip over

95
00:05:34,590 --> 00:05:40,140
to the documentation here and then, there
should be

96
00:05:40,140 --> 00:05:45,990
a link right here: Set Up Web Starter Kit,
and then, right here pick a layout.

97
00:05:45,990 --> 00:05:51,200
You can pick between index.html and
basic.html and they're

98
00:05:51,200 --> 00:05:53,560
going to do two different things for you
here.

99
00:05:53,560 --> 00:05:57,970
Index is good for a default starting point
and includes a slide out

100
00:05:57,970 --> 00:06:04,050
menu and to choose it all you have to do
is remove the basic.html.

101
00:06:04,050 --> 00:06:09,430
File and then basic is more basic it has
no navigation

102
00:06:09,430 --> 00:06:14,360
and its very simple but it's also
responsive so if we scroll down here you

103
00:06:14,360 --> 00:06:19,410
can kinda see what this looks like so here
is that particular layout

104
00:06:19,410 --> 00:06:23,900
in dot html and then heres what that slide
out menu looks like.

105
00:06:23,900 --> 00:06:25,410
On mobile devices.

106
00:06:25,410 --> 00:06:26,860
>> What kinda menu is that?

107
00:06:26,860 --> 00:06:30,200
>> I think it's a hamburger menu, Jason.

108
00:06:30,200 --> 00:06:30,280
>> Hm.

109
00:06:30,280 --> 00:06:32,020
And it's called a slider?

110
00:06:32,020 --> 00:06:33,045
That's like a mini burger.

111
00:06:33,045 --> 00:06:33,320
>> Mm-hm.

112
00:06:33,320 --> 00:06:37,920
>> I'm just getting hungrier with each,
each story we do.

113
00:06:37,920 --> 00:06:39,870
Anyway, that's about it, check it out.

114
00:06:39,870 --> 00:06:42,540
It's called the web starter kit, very cool
stuff.

115
00:06:42,540 --> 00:06:42,860
>> Yeah.

116
00:06:42,860 --> 00:06:44,470
One, one thing to note on that, it's

117
00:06:44,470 --> 00:06:46,480
not meant to replace something like
Bootstrap or

118
00:06:46,480 --> 00:06:49,210
Foundation, it's really supposed to be a
starter

119
00:06:49,210 --> 00:06:50,940
kit, kind of showing you the bare minimum.

120
00:06:50,940 --> 00:06:53,680
>> It's actually more similar to HTML5
Boiler Plate.

121
00:06:53,680 --> 00:06:54,930
>> Ooh, H5BP.

122
00:06:54,930 --> 00:06:56,490
>> Yeah.

123
00:06:56,490 --> 00:06:57,100
Okay.

124
00:06:57,100 --> 00:07:00,900
>> Next up we have a book called
JavaScript Allonge.

125
00:07:00,900 --> 00:07:03,180
This is a book on reading java script, and
it

126
00:07:03,180 --> 00:07:06,450
is completely free if you want to read it
online.

127
00:07:06,450 --> 00:07:10,040
However, you could purchase the e-book if
you wanted to.

128
00:07:10,040 --> 00:07:11,910
This is something, again, we're not going
to get

129
00:07:11,910 --> 00:07:15,880
into everything because look at this large
table of contents.

130
00:07:15,880 --> 00:07:17,780
There is a lot going on.

131
00:07:17,780 --> 00:07:18,575
>> Til DR.

132
00:07:18,575 --> 00:07:18,824
[CROSSTALK].

133
00:07:18,824 --> 00:07:21,500
>> Yeah, look at that cup of coffee, that
looks delicious.

134
00:07:21,500 --> 00:07:25,190
Something you would maybe want to eat
after a burger.

135
00:07:25,190 --> 00:07:29,300
So this is, this has just a, a lot of
great info

136
00:07:29,300 --> 00:07:34,790
about JavaScript, and here is the
reasoning the author wrote the book.

137
00:07:34,790 --> 00:07:36,050
It says, there are plenty of

138
00:07:36,050 --> 00:07:38,570
good directions for writing JavaScript
programs.

139
00:07:38,570 --> 00:07:40,330
If you follow them without alteration or

140
00:07:40,330 --> 00:07:43,570
deviation you'll be satisfied, but
software is complex

141
00:07:43,570 --> 00:07:47,430
and has a lot of side effects which is why
you need to read this book.

142
00:07:47,430 --> 00:07:48,860
So anyway, check out the book.

143
00:07:48,860 --> 00:07:50,820
We'll have a link to it in the show notes.

144
00:07:50,820 --> 00:07:53,160
When I say check it out, that doesn't
imply that you have to return it.

145
00:07:53,160 --> 00:07:55,740
You can just read it on the website and
you'll be fine.

146
00:07:55,740 --> 00:07:56,550
>> You don't need a library card.

147
00:07:56,550 --> 00:07:56,670
>> Yeah.

148
00:07:56,670 --> 00:07:58,000
It's not like a library.

149
00:07:58,000 --> 00:07:59,120
>> Nice.

150
00:07:59,120 --> 00:08:00,790
Next up is one post called, what every

151
00:08:00,790 --> 00:08:04,450
front end developer should know about
webpage rendering.

152
00:08:04,450 --> 00:08:10,860
Well that is a mouth full, hamburger maybe
I could go for that Yeah sounds good.

153
00:08:11,990 --> 00:08:17,290
Basically there are two fundamental things
that I would like to point out repaints

154
00:08:17,290 --> 00:08:23,980
and reflows so a repaint is when a style

155
00:08:23,980 --> 00:08:30,270
changes that does not affect the elements
position on a page so for example.

156
00:08:30,270 --> 00:08:34,720
A change in background color border color
visibility so whether

157
00:08:34,720 --> 00:08:39,350
or not something is actually visible on
the page a

158
00:08:39,350 --> 00:08:45,130
reflow however is when something actually
changes in the layout

159
00:08:45,130 --> 00:08:49,320
and you have to reflow all of the elements
recalculate everything.

160
00:08:49,320 --> 00:08:56,360
And basically repaint the page but this is
a lot more expensive where as repaints

161
00:08:56,360 --> 00:09:02,740
do have a little bit of a performance hit
but there not as bad as a reflow so

162
00:09:02,740 --> 00:09:05,190
those are the two kind of performance hits

163
00:09:05,190 --> 00:09:08,970
that can happen in rendering a webpage and
here's

164
00:09:08,970 --> 00:09:12,050
a little walk through of how exactly a

165
00:09:12,050 --> 00:09:14,880
browser renders a webpage it's pretty
helpful to know.

166
00:09:14,880 --> 00:09:14,970
But.

167
00:09:14,970 --> 00:09:16,010
>> It's five steps.

168
00:09:16,010 --> 00:09:20,860
>> Down here, we also have how how to
optimize

169
00:09:22,090 --> 00:09:26,350
this this repaints and reflows.

170
00:09:26,350 --> 00:09:31,580
Here we go, practical advice on
optimization, and there's a couple of

171
00:09:31,580 --> 00:09:37,180
helpful tips there such as the ranking of
selector specificity.

172
00:09:37,180 --> 00:09:40,480
Anyway, really cool article, very helpful
and.

173
00:09:40,480 --> 00:09:42,930
Very important to know if you are a
front-end developer or a

174
00:09:42,930 --> 00:09:48,320
designer and you're trying to optimize the
rendering performance of a webpage.

175
00:09:48,320 --> 00:09:50,300
Especially important for mobile devices.

176
00:09:50,300 --> 00:09:50,810
>> Yeah.

177
00:09:50,810 --> 00:09:51,745
Lot of great tips in there.

178
00:09:51,745 --> 00:09:52,770
>> Um-hm.

179
00:09:52,770 --> 00:09:55,250
>> Next up, we have a project called
ODYSSEY.

180
00:09:55,250 --> 00:09:57,270
This is billed as a simple way for

181
00:09:57,270 --> 00:10:01,590
journalists, designers, and creators to
weave interactive stories.

182
00:10:01,590 --> 00:10:02,680
What does that mean?

183
00:10:02,680 --> 00:10:06,159
I have no idea, let's scroll down the page
and see if it provides an example.

184
00:10:07,410 --> 00:10:10,360
Wow, no, this is actually really cool.

185
00:10:10,360 --> 00:10:11,540
So, just like you say.

186
00:10:11,540 --> 00:10:16,040
You pick a template, craft your story, and
then you can tell your own story.

187
00:10:16,040 --> 00:10:16,790
Check this out, though.

188
00:10:16,790 --> 00:10:21,260
They have examples over in the
documentation.

189
00:10:21,260 --> 00:10:26,901
It provides a bunch of different options
for creating

190
00:10:26,901 --> 00:10:32,801
sort of like the, oh man [SOUND] Paralax
scrolling.

191
00:10:32,801 --> 00:10:34,030
>> That's the word.

192
00:10:34,030 --> 00:10:40,410
>> Yeah so if we head on over to the
documentation you can see it has a lot of

193
00:10:40,410 --> 00:10:44,770
different options for creating a parallax
scrolling sort of effect,

194
00:10:44,770 --> 00:10:48,360
and it also allows you to weave together
different multimedia.

195
00:10:49,760 --> 00:10:50,910
Create are

196
00:10:53,070 --> 00:10:59,830
maps so you can take people on a literal

197
00:10:59,830 --> 00:11:06,230
odyssey through the world, and you can
also add videos to it.

198
00:11:06,230 --> 00:11:10,180
Let's see if we can get their editor on
here.

199
00:11:10,180 --> 00:11:12,550
There we go, examples.

200
00:11:12,550 --> 00:11:17,910
Here is a list of examples making use of
templates, and here we are.

201
00:11:17,910 --> 00:11:21,510
We see a map and there is some picking
going on here.

202
00:11:21,510 --> 00:11:23,630
You can tell that because it says it.

203
00:11:23,630 --> 00:11:27,310
Here's an example of spinning and you'll
notice as we walk through the page.

204
00:11:27,310 --> 00:11:30,680
All of this behavior is being generated
from that

205
00:11:30,680 --> 00:11:35,830
one mark down file and then being
processed by odyssey.

206
00:11:35,830 --> 00:11:39,050
This is a very cool project that will
allow you to create these great

207
00:11:39,050 --> 00:11:42,880
visualizations with next to no code as
long as you follow the mark down.

208
00:11:42,880 --> 00:11:45,090
Make sure to check it out in the show
notes.

209
00:11:45,090 --> 00:11:45,790
>> Very nice stuff.

210
00:11:45,790 --> 00:11:47,970
Well I am @nickrp on Twitter.

211
00:11:47,970 --> 00:11:48,900
>> And I am @jseifer.

212
00:11:48,900 --> 00:11:50,510
For more information on anything we talked

213
00:11:50,510 --> 00:11:54,000
about check out our show notes at
youtube.com/gotreehouse.

214
00:11:54,000 --> 00:11:57,090
You could also search for us on iTunes we
are the Treehouse Show.

215
00:11:57,090 --> 00:12:00,520
>> And of course if you'd like to try out
Treehouse for

216
00:12:00,520 --> 00:12:05,304
free for thirty days be sure to check us
out at teamtreehouse.com/show.

217
00:12:06,520 --> 00:12:09,410
Thank you so much for watching and we will
see you next week.

218
00:12:11,500 --> 00:12:16,620
>> You wanna go get a burger?