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

2
00:00:01,360 --> 00:00:02,200
>> I'm Jason Seifer.

3
00:00:02,200 --> 00:00:05,190
>> And you're watching the Treehouse Show,
your weekly dose of Internets.

4
00:00:05,190 --> 00:00:08,460
Where we talk about all things web design,
web development and more.

5
00:00:08,460 --> 00:00:10,700
>> For a free month of Treehouse head on
over

6
00:00:10,700 --> 00:00:15,180
to teamtreehouse.com/show to join Nick and
I over on Treehouse.

7
00:00:15,180 --> 00:00:16,920
In this episode of the Treehouse Show,
we'll be

8
00:00:16,920 --> 00:00:22,020
talking about pixels, web components, the
Hamburger menu and more.

9
00:00:22,020 --> 00:00:22,990
>> Let's check it out.

10
00:00:22,990 --> 00:00:28,485
[MUSIC]

11
00:00:28,485 --> 00:00:33,850
>> First up is this really cool article
called Pixels Are Expensive.

12
00:00:33,850 --> 00:00:36,604
>> Cuz they're not on a pixel sale.

13
00:00:36,604 --> 00:00:37,706
>> That's right.

14
00:00:37,706 --> 00:00:41,885
Actually, pixels are expensive is
referring to the idea

15
00:00:41,885 --> 00:00:46,270
that pixels are kinda expensive to render
in the browser.

16
00:00:46,270 --> 00:00:51,620
And it's a breakdown of how a browser
actually renders things.

17
00:00:51,620 --> 00:00:54,910
And somewhat of a reaction to article
called,

18
00:00:54,910 --> 00:00:58,450
What Every Frontend Developer Should Know
About Webpage Rendering.

19
00:00:58,450 --> 00:01:02,020
Which I believe we covered, on the show
previously.

20
00:01:02,020 --> 00:01:07,050
And, this person thinks that it missed out
on some crucial points.

21
00:01:07,050 --> 00:01:09,910
So, while this article is pretty good.

22
00:01:09,910 --> 00:01:11,890
It missed a couple things.

23
00:01:11,890 --> 00:01:16,346
So for example, step one is recalculating
style.

24
00:01:16,346 --> 00:01:20,463
And normally, this is actually a super
fast thing to do

25
00:01:20,463 --> 00:01:25,846
unless there's a DOM tree with thousands
upon thousands of elements.

26
00:01:25,846 --> 00:01:29,126
So, it's really not something that you
have to

27
00:01:29,126 --> 00:01:32,910
worry about unless you have a massive DOM
tree.

28
00:01:32,910 --> 00:01:35,220
Second is layout.

29
00:01:35,220 --> 00:01:38,055
And then, after that is repainting.

30
00:01:38,055 --> 00:01:41,292
And painting is actually where you'll
spend

31
00:01:41,292 --> 00:01:44,280
the majority of your time in the browser.

32
00:01:44,280 --> 00:01:49,260
So, that's anything where you're changing
layout property.

33
00:01:49,260 --> 00:01:52,920
Such as color, background, shadows, and so
on.

34
00:01:52,920 --> 00:01:57,620
Or anytime the geometry of the page has
changed and

35
00:01:57,620 --> 00:02:01,680
the pixels are now dirtied and need to be
fixed.

36
00:02:01,680 --> 00:02:04,980
Anyway, it's a really in depth article and
it also

37
00:02:04,980 --> 00:02:09,460
goes into how to avoid some of those
performance bottlenecks.

38
00:02:09,460 --> 00:02:10,060
And.

39
00:02:10,060 --> 00:02:13,190
>> Essentially you're putting the pixels
on layaway when you do that.

40
00:02:13,190 --> 00:02:14,510
>> Exactly.

41
00:02:14,510 --> 00:02:20,270
It's it's a really great article and I
highly recommend that you check it out.

42
00:02:20,270 --> 00:02:23,600
>> Next up we have a blog post from the
Telerik

43
00:02:23,600 --> 00:02:29,180
developer blog on why web components
aren't quite ready for production.

44
00:02:29,180 --> 00:02:32,920
Now, web components are just landing in
Chrome 36, so you

45
00:02:32,920 --> 00:02:35,280
might be saying, hey, what do you mean
they're not ready?

46
00:02:35,280 --> 00:02:36,030
They're out.

47
00:02:36,030 --> 00:02:37,340
>> They're in Chrome, in my browser.

48
00:02:37,340 --> 00:02:37,890
>> They're in Chrome.

49
00:02:37,890 --> 00:02:38,650
They're in my browser.

50
00:02:38,650 --> 00:02:39,770
Works on my machine.

51
00:02:39,770 --> 00:02:40,190
I'm using them.

52
00:02:40,190 --> 00:02:42,620
On my websites, web components.

53
00:02:42,620 --> 00:02:45,060
Hold your horses there buddy, let's get
into what's going on.

54
00:02:46,160 --> 00:02:49,230
So, browser support is obviously an issue
with

55
00:02:49,230 --> 00:02:54,000
web components not everything is supported
besides Chrome 36.

56
00:02:54,000 --> 00:02:57,930
So, bro, browsers that have partial
support are Firefox.

57
00:02:57,930 --> 00:03:03,600
But there are no web components at all in
Safari, or Internet Explorer.

58
00:03:03,600 --> 00:03:06,730
So, why not just use a polyfill?

59
00:03:06,730 --> 00:03:09,580
Because the Polymer team, Polymer is a
project

60
00:03:09,580 --> 00:03:12,320
we've gone over previously on the
Treehouse Show.

61
00:03:12,320 --> 00:03:15,030
So make sure you check out all previous
episodes.

62
00:03:15,030 --> 00:03:17,360
The Polymer team maintains a complete set

63
00:03:17,360 --> 00:03:21,270
of polyfills, collectively known as The
Platform.

64
00:03:21,270 --> 00:03:25,780
Now those implement a polyfill for web
components.

65
00:03:25,780 --> 00:03:30,770
But there can be some issues when working
with these polyfills.

66
00:03:30,770 --> 00:03:32,230
What are those issues?

67
00:03:32,230 --> 00:03:36,310
Well, let's take a look at one of them
which is actually pretty interesting.

68
00:03:36,310 --> 00:03:40,420
So, web components implement something
called the shadow dom.

69
00:03:40,420 --> 00:03:42,640
This is going to be a different dom.

70
00:03:42,640 --> 00:03:45,130
Then what is being shown on the page

71
00:03:45,130 --> 00:03:49,200
and is specific to each individual web
component.

72
00:03:49,200 --> 00:03:53,510
So what happens when you have a shadow DOM
where there

73
00:03:53,510 --> 00:03:58,070
is something like an h1 tag that is within
this shadow DOM?

74
00:03:58,070 --> 00:04:04,260
What does the query selector all return if
this is not on the page?

75
00:04:04,260 --> 00:04:07,740
Well, in a browser where that is not
supported, it

76
00:04:07,740 --> 00:04:11,270
returns 0 because it is not yet on the
page.

77
00:04:11,270 --> 00:04:17,220
However, if you are using a polyfill, well
this could be just another element.

78
00:04:17,220 --> 00:04:20,430
So if you ran query selector all.length.

79
00:04:20,430 --> 00:04:28,310
It should return 1, but if you add
polymers platform.js this actually works.

80
00:04:28,310 --> 00:04:30,655
So, this is actually pretty complicated.

81
00:04:30,655 --> 00:04:34,590
When implemented, you can see this very
large regular expression, to

82
00:04:34,590 --> 00:04:38,141
check all sorts of different CSS comments
and things like that.

83
00:04:38,141 --> 00:04:40,040
>> Wow, it doesn't look regular at all.

84
00:04:42,140 --> 00:04:45,090
>> And so, we can go on and see why this
stuff matters.

85
00:04:45,090 --> 00:04:45,950
Why does it matter?

86
00:04:45,950 --> 00:04:50,810
Well, everything is supported in all of
the different browsers.

87
00:04:50,810 --> 00:04:55,540
A great example is styling inside and
outside of a shadow DOM.

88
00:04:55,540 --> 00:05:00,110
As we can see in one browser it looks
completely different than in another.

89
00:05:00,110 --> 00:05:02,660
So, there hasn't been any sort of

90
00:05:02,660 --> 00:05:07,840
standardization on what this behavior
completely does yet.

91
00:05:07,840 --> 00:05:10,590
So, everybody is just sorta guessing at
the

92
00:05:10,590 --> 00:05:13,360
moment and nothing has been totally agreed
upon.

93
00:05:14,384 --> 00:05:20,842
Next polyfills are pretty big the polyfill
library comes in at 151k of JavaScript.

94
00:05:20,842 --> 00:05:23,272
Which as we've talked about before that
can be

95
00:05:23,272 --> 00:05:26,778
pretty big for mobile browsers and
especially slow connections.

96
00:05:26,778 --> 00:05:29,616
Anyway, we've already talked about this a
lot make sure to check

97
00:05:29,616 --> 00:05:32,960
it out in the show notes which you can get
to at youtube.com/gotreehouse.

98
00:05:32,960 --> 00:05:35,700
You can also search for us on iTunes,
we're the Treehouse Show.

99
00:05:35,700 --> 00:05:40,600
And don't forget to join us for a 30 day
free trial at teamtreehouse.com/show.

100
00:05:40,600 --> 00:05:45,610
>> Something we've talked about on the
show previously is the hamburger menu.

101
00:05:45,610 --> 00:05:46,370
>> Hamburger menu.

102
00:05:46,370 --> 00:05:46,770
>> Yup.

103
00:05:46,770 --> 00:05:47,390
Hamburger menu.

104
00:05:47,390 --> 00:05:47,680
>> Yeah.

105
00:05:47,680 --> 00:05:50,340
You know, it's pretty rare that we talk
about it though.

106
00:05:50,340 --> 00:05:52,476
>> I'd say we talk about it a medium
amount.

107
00:05:52,476 --> 00:05:55,033
Hm, well done.

108
00:05:55,033 --> 00:06:01,332
>> [LAUGH] You may be wondering where the
hamburger menu actually came from.

109
00:06:01,332 --> 00:06:04,043
Because, it sorta exploded in popularity.

110
00:06:04,043 --> 00:06:06,777
It's this little three-line menu that you
see on

111
00:06:06,777 --> 00:06:10,140
all sorts of websites and iPhone, and
Android apps.

112
00:06:10,140 --> 00:06:12,940
But where did it actually originate from?

113
00:06:12,940 --> 00:06:14,940
>> A restaurant in New York in the year
1900.

114
00:06:14,940 --> 00:06:18,830
>> There is this wonderful post on the

115
00:06:18,830 --> 00:06:22,580
Evernote blog call the origin of the
hamburger icon.

116
00:06:22,580 --> 00:06:26,468
And it turns out that this guy named Norm
Cox

117
00:06:26,468 --> 00:06:32,206
is the one that invented it for the
XeroxStar using interface.

118
00:06:32,206 --> 00:06:35,996
Which of course is well known for being
created

119
00:06:35,996 --> 00:06:41,647
at Xerox PARC and inspiring what
eventually became MacIntosh.

120
00:06:41,647 --> 00:06:46,445
And so here's a video that you can watch,
actually I don't think this is a video.

121
00:06:46,445 --> 00:06:49,725
But there's a link to this really great
video

122
00:06:49,725 --> 00:06:54,309
that sorta demonstrates where this
hamburger icon came from.

123
00:06:54,309 --> 00:06:57,754
And something that was sorta funny, that
Norm

124
00:06:57,754 --> 00:07:01,060
Cox said when he was emailed about it.

125
00:07:01,060 --> 00:07:05,810
Is that they used to call it the air vent
to keep the window

126
00:07:05,810 --> 00:07:10,370
cool, and that made the icon a little bit
more memorable as a result.

127
00:07:10,370 --> 00:07:13,210
But anyway, a pretty cool article.

128
00:07:13,210 --> 00:07:16,570
It's very short, definitely worth checking
out, definitely worth watching that

129
00:07:16,570 --> 00:07:20,240
video to see where the heck that icon
actually came from.

130
00:07:20,240 --> 00:07:22,790
>> Air vent not as tasty as a hamburger.

131
00:07:22,790 --> 00:07:23,930
>> It's not.

132
00:07:23,930 --> 00:07:27,240
>> Next up, we have a project called Papa
Parse.

133
00:07:27,240 --> 00:07:30,830
This is a JavaScript CSV parser.

134
00:07:30,830 --> 00:07:33,080
Quote, for big boys and girls.

135
00:07:33,080 --> 00:07:37,040
However, if you are not a big boy or girl,
you can still use this library.

136
00:07:37,040 --> 00:07:40,630
Now implementing a CSV parser you might
think is just

137
00:07:40,630 --> 00:07:45,430
as easy as calling split on a string in
JavaScript.

138
00:07:45,430 --> 00:07:49,140
But, if you have done that in any
language, you know it can be

139
00:07:49,140 --> 00:07:51,070
a lot more complicated than that, because

140
00:07:51,070 --> 00:07:54,200
there are just tons of different edge
cases.

141
00:07:54,200 --> 00:07:57,440
Now, this library, Papa Parse, makes it
very, very

142
00:07:57,440 --> 00:08:02,810
easy to convert CSV, comma separated
values into JSON.

143
00:08:02,810 --> 00:08:11,440
You can parse local CSV files, this works
in node and leave in the browser as well.

144
00:08:11,440 --> 00:08:14,720
Now, saying okay, well I don't know what
the delimiter

145
00:08:14,720 --> 00:08:17,090
is, maybe it's a comma, maybe it's not, I
don't know.

146
00:08:17,090 --> 00:08:18,300
I don't know what data I have.

147
00:08:18,300 --> 00:08:19,930
I don't know what users are throwing at
me.

148
00:08:19,930 --> 00:08:21,160
Hey, that's okay.

149
00:08:21,160 --> 00:08:23,103
Let Papa Parse parse it for you.

150
00:08:23,103 --> 00:08:25,121
And, and you'll be fine, you'll be, you'll
be good to go.

151
00:08:25,121 --> 00:08:27,847
Or you can tell it what the delimi,
delimiter is.

152
00:08:27,847 --> 00:08:30,230
Doesn't matter, you have options.

153
00:08:30,230 --> 00:08:32,190
Hey, I even have a file to Parse.

154
00:08:32,190 --> 00:08:33,120
All right, cool.

155
00:08:33,120 --> 00:08:33,510
Here you go.

156
00:08:33,510 --> 00:08:36,010
Just, just pass the file in and it's, it's
fine.

157
00:08:36,010 --> 00:08:36,400
What, what?

158
00:08:36,400 --> 00:08:40,340
The files not even on my server, that's
ok, throw it a URL, doesn't matter.

159
00:08:40,340 --> 00:08:42,010
Papa Parse will parse it.

160
00:08:42,010 --> 00:08:44,000
Anyway, tons, tons of different options.

161
00:08:44,000 --> 00:08:45,920
I can not hype this enough.

162
00:08:45,920 --> 00:08:46,280
Check it out.

163
00:08:46,280 --> 00:08:48,160
We'll have a link in the show notes.

164
00:08:48,160 --> 00:08:49,320
>> Very cool stuff.

165
00:08:49,320 --> 00:08:56,210
Well next up is this wonderful blog post
called no more put a skirt on it.

166
00:08:56,210 --> 00:09:00,080
And it's from Molly, an experienced
designer and teacher in San Francisco.

167
00:09:00,080 --> 00:09:06,860
And it talks about user avatars and how a
lot of them generally look pretty generic.

168
00:09:06,860 --> 00:09:10,080
So this is a Google Image search for user.

169
00:09:10,080 --> 00:09:13,810
And you come up with either generic or
neutral

170
00:09:13,810 --> 00:09:18,310
looking icons or icons that look like a
male.

171
00:09:18,310 --> 00:09:24,490
However, there's none that are explicitly
female, which obviously is not good.

172
00:09:24,490 --> 00:09:26,860
So what can do you do about it?

173
00:09:26,860 --> 00:09:31,470
Well, here's a picture of a historical
vacuum that we don't live in anymore.

174
00:09:31,470 --> 00:09:35,670
And here is this wonderful illustration
that says,

175
00:09:35,670 --> 00:09:39,410
a man plus decorations equals a woman,
right?

176
00:09:39,410 --> 00:09:41,740
Well, not exactly.

177
00:09:41,740 --> 00:09:44,490
And here are some wonderful historical
vacuum

178
00:09:44,490 --> 00:09:48,000
examples of what that might look like.

179
00:09:48,000 --> 00:09:53,360
So, here we have Smurfs, and here we have
Pac Man and Mrs. Pac Man.

180
00:09:53,360 --> 00:09:56,340
And you can see just, sort of, basically
the same

181
00:09:56,340 --> 00:10:02,380
avatar with some decorations, like a hair
bow and some lipstick.

182
00:10:02,380 --> 00:10:03,620
So,
>> Was this is 1800s?

183
00:10:03,620 --> 00:10:04,580
>> Exactly.

184
00:10:04,580 --> 00:10:05,640
Not that great.

185
00:10:05,640 --> 00:10:07,040
So here's rule number one.

186
00:10:07,040 --> 00:10:09,480
If you're going for generic, then you need
to be truly generic.

187
00:10:09,480 --> 00:10:12,300
So, Netflix and Twitter do a really nice
job of this

188
00:10:12,300 --> 00:10:17,750
with their generic smiley faces, or with
their generic egg icon.

189
00:10:17,750 --> 00:10:22,005
But Facebook is definitely not generic,
and it's

190
00:10:22,005 --> 00:10:25,238
sorta kinda looks like a, a man there.

191
00:10:25,238 --> 00:10:28,760
It has sorta the same proportions as a
man, and

192
00:10:28,760 --> 00:10:32,150
kind of a haircut you might expect from a
male.

193
00:10:32,150 --> 00:10:36,070
You can also differentiate with color and
detail

194
00:10:36,070 --> 00:10:38,730
as long they're not any of these things.

195
00:10:38,730 --> 00:10:41,150
I'll let you read about on your own.

196
00:10:41,150 --> 00:10:43,300
One of, the things I really like, and

197
00:10:43,300 --> 00:10:46,470
I just mention this, is the weird
proportions.

198
00:10:46,470 --> 00:10:49,160
I mean, when you just add the decorations
to a

199
00:10:49,160 --> 00:10:54,300
weirdly proportioned stick figure, it's
just not gonna look good.

200
00:10:54,300 --> 00:10:57,070
Anyway, lot more detail in this post.

201
00:10:57,070 --> 00:11:01,040
It's a really great post and something I
hadn't really though about myself.

202
00:11:01,040 --> 00:11:06,090
I think it's a really wonderful look at
how to kind

203
00:11:06,090 --> 00:11:10,680
of diversify your, your icons, and make
them a little bit better.

204
00:11:10,680 --> 00:11:10,800
>> Yeah.

205
00:11:10,800 --> 00:11:12,830
She really attacks the issue head on.

206
00:11:12,830 --> 00:11:15,880
You know, she definitely doesn't skirt
around it.

207
00:11:15,880 --> 00:11:17,930
Not at all.

208
00:11:17,930 --> 00:11:22,690
>> Well, that is all we have time for this
week, I'm @nickrp on Twitter.

209
00:11:22,690 --> 00:11:23,620
>> And I am @jseifer.

210
00:11:23,620 --> 00:11:25,180
For more information on anything we talked

211
00:11:25,180 --> 00:11:28,400
about, check out our show notes at
youtube.com/gotreehouse.

212
00:11:28,400 --> 00:11:31,640
You can also search for us on iTunes, we
are the Treehouse Show.

213
00:11:31,640 --> 00:11:33,120
And don't forget to sign up for

214
00:11:33,120 --> 00:11:37,440
a three day free trial of Treehouse
teamtreehouse.com/show.

215
00:11:37,440 --> 00:11:39,320
>> And of course, if you'd like to see
more videos like

216
00:11:39,320 --> 00:11:40,700
this one about web design, web

217
00:11:40,700 --> 00:11:44,300
development, mobile business and so much
more.

218
00:11:44,300 --> 00:11:49,070
Be sure to check us out, just like Jason
said, at teamtreehouse.com/show.

219
00:11:49,070 --> 00:11:52,108
Thank you so much for watching and we will
see you next week.

220
00:11:52,108 --> 00:11:58,924
[SOUND]