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]