Episode 104: Pixels, Web Components, The Hamburger Menu

I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:01 >> And you're watching the Treehouse Show, your weekly dose of Internets. 0:02 Where we talk about all things web design, web development and more. 0:05 >> For a free month of Treehouse head on over 0:08 to teamtreehouse.com/show to join Nick and I over on Treehouse. 0:10 In this episode of the Treehouse Show, we'll be 0:15 talking about pixels, web components, the Hamburger menu and more. 0:16 >> Let's check it out. 0:22 [MUSIC] 0:22 >> First up is this really cool article called Pixels Are Expensive. 0:28 >> Cuz they're not on a pixel sale. 0:33 >> That's right. 0:36 Actually, pixels are expensive is referring to the idea 0:37 that pixels are kinda expensive to render in the browser. 0:41 And it's a breakdown of how a browser actually renders things. 0:46 And somewhat of a reaction to article called, 0:51 What Every Frontend Developer Should Know About Webpage Rendering. 0:54 Which I believe we covered, on the show previously. 0:58 And, this person thinks that it missed out on some crucial points. 1:02 So, while this article is pretty good. 1:07 It missed a couple things. 1:09 So for example, step one is recalculating style. 1:11 And normally, this is actually a super fast thing to do 1:16 unless there's a DOM tree with thousands upon thousands of elements. 1:20 So, it's really not something that you have to 1:25 worry about unless you have a massive DOM tree. 1:29 Second is layout. 1:32 And then, after that is repainting. 1:35 And painting is actually where you'll spend 1:38 the majority of your time in the browser. 1:41 So, that's anything where you're changing layout property. 1:44 Such as color, background, shadows, and so on. 1:49 Or anytime the geometry of the page has changed and 1:52 the pixels are now dirtied and need to be fixed. 1:57 Anyway, it's a really in depth article and it also 2:01 goes into how to avoid some of those performance bottlenecks. 2:04 And. 2:09 >> Essentially you're putting the pixels on layaway when you do that. 2:10 >> Exactly. 2:13 It's it's a really great article and I highly recommend that you check it out. 2:14 >> Next up we have a blog post from the Telerik 2:20 developer blog on why web components aren't quite ready for production. 2:23 Now, web components are just landing in Chrome 36, so you 2:29 might be saying, hey, what do you mean they're not ready? 2:32 They're out. 2:35 >> They're in Chrome, in my browser. 2:36 >> They're in Chrome. 2:37 They're in my browser. 2:37 Works on my machine. 2:38 I'm using them. 2:39 On my websites, web components. 2:40 Hold your horses there buddy, let's get into what's going on. 2:42 So, browser support is obviously an issue with 2:46 web components not everything is supported besides Chrome 36. 2:49 So, bro, browsers that have partial support are Firefox. 2:54 But there are no web components at all in Safari, or Internet Explorer. 2:57 So, why not just use a polyfill? 3:03 Because the Polymer team, Polymer is a project 3:06 we've gone over previously on the Treehouse Show. 3:09 So make sure you check out all previous episodes. 3:12 The Polymer team maintains a complete set 3:15 of polyfills, collectively known as The Platform. 3:17 Now those implement a polyfill for web components. 3:21 But there can be some issues when working with these polyfills. 3:25 What are those issues? 3:30 Well, let's take a look at one of them which is actually pretty interesting. 3:32 So, web components implement something called the shadow dom. 3:36 This is going to be a different dom. 3:40 Then what is being shown on the page 3:42 and is specific to each individual web component. 3:45 So what happens when you have a shadow DOM where there 3:49 is something like an h1 tag that is within this shadow DOM? 3:53 What does the query selector all return if this is not on the page? 3:58 Well, in a browser where that is not supported, it 4:04 returns 0 because it is not yet on the page. 4:07 However, if you are using a polyfill, well this could be just another element. 4:11 So if you ran query selector all.length. 4:17 It should return 1, but if you add polymers platform.js this actually works. 4:20 So, this is actually pretty complicated. 4:28 When implemented, you can see this very large regular expression, to 4:30 check all sorts of different CSS comments and things like that. 4:34 >> Wow, it doesn't look regular at all. 4:38 >> And so, we can go on and see why this stuff matters. 4:42 Why does it matter? 4:45 Well, everything is supported in all of the different browsers. 4:45 A great example is styling inside and outside of a shadow DOM. 4:50 As we can see in one browser it looks completely different than in another. 4:55 So, there hasn't been any sort of 5:00 standardization on what this behavior completely does yet. 5:02 So, everybody is just sorta guessing at the 5:07 moment and nothing has been totally agreed upon. 5:10 Next polyfills are pretty big the polyfill library comes in at 151k of JavaScript. 5:14 Which as we've talked about before that can be 5:20 pretty big for mobile browsers and especially slow connections. 5:23 Anyway, we've already talked about this a lot make sure to check 5:26 it out in the show notes which you can get to at youtube.com/gotreehouse. 5:29 You can also search for us on iTunes, we're the Treehouse Show. 5:32 And don't forget to join us for a 30 day free trial at teamtreehouse.com/show. 5:35 >> Something we've talked about on the show previously is the hamburger menu. 5:40 >> Hamburger menu. 5:45 >> Yup. 5:46 Hamburger menu. 5:46 >> Yeah. 5:47 You know, it's pretty rare that we talk about it though. 5:47 >> I'd say we talk about it a medium amount. 5:50 Hm, well done. 5:52 >> [LAUGH] You may be wondering where the hamburger menu actually came from. 5:55 Because, it sorta exploded in popularity. 6:01 It's this little three-line menu that you see on 6:04 all sorts of websites and iPhone, and Android apps. 6:06 But where did it actually originate from? 6:10 >> A restaurant in New York in the year 1900. 6:12 >> There is this wonderful post on the 6:14 Evernote blog call the origin of the hamburger icon. 6:18 And it turns out that this guy named Norm Cox 6:22 is the one that invented it for the XeroxStar using interface. 6:26 Which of course is well known for being created 6:32 at Xerox PARC and inspiring what eventually became MacIntosh. 6:35 And so here's a video that you can watch, actually I don't think this is a video. 6:41 But there's a link to this really great video 6:46 that sorta demonstrates where this hamburger icon came from. 6:49 And something that was sorta funny, that Norm 6:54 Cox said when he was emailed about it. 6:57 Is that they used to call it the air vent to keep the window 7:01 cool, and that made the icon a little bit more memorable as a result. 7:05 But anyway, a pretty cool article. 7:10 It's very short, definitely worth checking out, definitely worth watching that 7:13 video to see where the heck that icon actually came from. 7:16 >> Air vent not as tasty as a hamburger. 7:20 >> It's not. 7:22 >> Next up, we have a project called Papa Parse. 7:23 This is a JavaScript CSV parser. 7:27 Quote, for big boys and girls. 7:30 However, if you are not a big boy or girl, you can still use this library. 7:33 Now implementing a CSV parser you might think is just 7:37 as easy as calling split on a string in JavaScript. 7:40 But, if you have done that in any language, you know it can be 7:45 a lot more complicated than that, because 7:49 there are just tons of different edge cases. 7:51 Now, this library, Papa Parse, makes it very, very 7:54 easy to convert CSV, comma separated values into JSON. 7:57 You can parse local CSV files, this works in node and leave in the browser as well. 8:02 Now, saying okay, well I don't know what the delimiter 8:11 is, maybe it's a comma, maybe it's not, I don't know. 8:14 I don't know what data I have. 8:17 I don't know what users are throwing at me. 8:18 Hey, that's okay. 8:19 Let Papa Parse parse it for you. 8:21 And, and you'll be fine, you'll be, you'll be good to go. 8:23 Or you can tell it what the delimi, delimiter is. 8:25 Doesn't matter, you have options. 8:27 Hey, I even have a file to Parse. 8:30 All right, cool. 8:32 Here you go. 8:33 Just, just pass the file in and it's, it's fine. 8:33 What, what? 8:36 The files not even on my server, that's ok, throw it a URL, doesn't matter. 8:36 Papa Parse will parse it. 8:40 Anyway, tons, tons of different options. 8:42 I can not hype this enough. 8:44 Check it out. 8:45 We'll have a link in the show notes. 8:46 >> Very cool stuff. 8:48 Well next up is this wonderful blog post called no more put a skirt on it. 8:49 And it's from Molly, an experienced designer and teacher in San Francisco. 8:56 And it talks about user avatars and how a lot of them generally look pretty generic. 9:00 So this is a Google Image search for user. 9:06 And you come up with either generic or neutral 9:10 looking icons or icons that look like a male. 9:13 However, there's none that are explicitly female, which obviously is not good. 9:18 So what can do you do about it? 9:24 Well, here's a picture of a historical vacuum that we don't live in anymore. 9:26 And here is this wonderful illustration that says, 9:31 a man plus decorations equals a woman, right? 9:35 Well, not exactly. 9:39 And here are some wonderful historical vacuum 9:41 examples of what that might look like. 9:44 So, here we have Smurfs, and here we have Pac Man and Mrs. Pac Man. 9:48 And you can see just, sort of, basically the same 9:53 avatar with some decorations, like a hair bow and some lipstick. 9:56 So, >> Was this is 1800s? 10:02 >> Exactly. 10:03 Not that great. 10:04 So here's rule number one. 10:05 If you're going for generic, then you need to be truly generic. 10:07 So, Netflix and Twitter do a really nice job of this 10:09 with their generic smiley faces, or with their generic egg icon. 10:12 But Facebook is definitely not generic, and it's 10:17 sorta kinda looks like a, a man there. 10:22 It has sorta the same proportions as a man, and 10:25 kind of a haircut you might expect from a male. 10:28 You can also differentiate with color and detail 10:32 as long they're not any of these things. 10:36 I'll let you read about on your own. 10:38 One of, the things I really like, and 10:41 I just mention this, is the weird proportions. 10:43 I mean, when you just add the decorations to a 10:46 weirdly proportioned stick figure, it's just not gonna look good. 10:49 Anyway, lot more detail in this post. 10:54 It's a really great post and something I hadn't really though about myself. 10:57 I think it's a really wonderful look at how to kind 11:01 of diversify your, your icons, and make them a little bit better. 11:06 >> Yeah. 11:10 She really attacks the issue head on. 11:10 You know, she definitely doesn't skirt around it. 11:12 Not at all. 11:15 >> Well, that is all we have time for this week, I'm @nickrp on Twitter. 11:17 >> And I am @jseifer. 11:22 For more information on anything we talked 11:23 about, check out our show notes at youtube.com/gotreehouse. 11:25 You can also search for us on iTunes, we are the Treehouse Show. 11:28 And don't forget to sign up for 11:31 a three day free trial of Treehouse teamtreehouse.com/show. 11:33 >> And of course, if you'd like to see more videos like 11:37 this one about web design, web 11:39 development, mobile business and so much more. 11:40 Be sure to check us out, just like Jason said, at teamtreehouse.com/show. 11:44 Thank you so much for watching and we will see you next week. 11:49 [SOUND] 11:52

You need to sign up for Treehouse in order to set up Workspace

Sign up