Episode 110: Chrome Dev Tools, heatmap.js, Device Mockups

I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:01 >> And you're watching The Treehouse Show. 0:02 Your weekly dose of Internets where we talk about all things web design, 0:03 web development and more. 0:06 >> For a free months trial of Treehouse head on over to teamtreehouse.com/show. 0:08 In this episode we'll be talking about the [SOUND] Chrome dev tools, 0:13 [SOUND] dynamic heat maps, [SOUND] device mockups and more. 0:17 >> Let's check it out. 0:20 [MUSIC] 0:21 First up is this really cool article that allows you to 0:26 change the chrome depth tools over to a dark medium. 0:30 >> Kind of like the Treehouse show. 0:34 >> That's right. 0:35 >> A bit of a dark theme. 0:36 >> Yeah, we, we've kind of changed the theme, in here. 0:37 Anyway, if you're looking at the Chrome dev tools all day long, which many of us 0:41 are, you'll kind of get a little bit fatigued because it's, black text 0:46 on a white background, which can be, kind of bright and kind of hard on your eyes. 0:51 But if you're looking at them all day you can change it over to this dark theme and 0:56 this article shows you exactly, how to do that. 1:00 So step one, enable develop, developer tools experiments. 1:03 Basically you just go to, chrome://flags in your address bar. 1:10 You enable, the Developer Tools experiments, then you Enable, 1:15 custom UI themes. 1:20 And this shows you in more detail how to do that. 1:22 And then you can Download a theme. 1:25 And the theme that they're using here is DevTools Theme, Zero Dark, 1:27 Matrix, that sounds super cool and hackerish. 1:32 And then you can install the theme- 1:36 >> Is that a candy? 1:38 Hackerish? >> [LAUGH] By 1:39 opening your Developer Tools. 1:40 And that's it, it's pretty simple and 1:42 straightforward and it should give you something that looks just like this. 1:44 So, pretty cool, I like using a dark theme in, my text editor so 1:49 like when I'm using, Sublime text or something like that, I, I do like to, 1:54 keep it on a dark theme, so I'm glad that I can do it and the dev tool now as well. 1:59 >> I like to use a dark theme when interacting with Nick. 2:03 Next up we have a project called heatmap.js. 2:07 As you might expect from the name, this is dynamic heat maps for your webpages. 2:11 Now what exactly is a heatmap? 2:18 Well if you look at the right side of the screen here, you can see my mouse pointer. 2:20 And as I move it along. 2:25 Oh, look at that. 2:26 We got a little trail. 2:27 >> What is happening? 2:28 >> And then if I leave it in one place for a little while it will change color to 2:29 represent where, the mouse pointer is on the screen. 2:32 >> And of course if you try this on the Treehouse show, 2:36 just the whole screen just turns red. 2:38 >> Yeah. >> Yeah. 2:40 >> It's like, like your emotional state. 2:40 >> Mm-hm. >> Now heat maps are very, 2:44 very easy to use. 2:46 You just this is version two of the product, so just drop it in. 2:46 It is, very small, only three kilobytes gzipped. 2:50 You can see there is, a heat map displaying right there, 2:54 under the number of kilobytes gzipped and this also supports 40,000 data points. 2:58 It's very, very easy to use. 3:05 You can see right here, all you do is create a heat map and give it a container. 3:06 And then, you can also use it to set the data. 3:11 Now, if we look at the documentation, 3:14 you can see there are not a lot of things that you, need to do to get started. 3:17 You just create it and you can also register any plug-ins that you have. 3:21 Then you can add and set data and also get values and send values. 3:24 [SOUND] So here are, some plug-ins that you can use. 3:31 For example if you want to use it with, Google Maps. 3:33 You can, give it a little heatmap layer plug-in. 3:36 >> Oh, that's what that is. 3:39 I thought you could control the weather. 3:40 >> no. That's gonna be version three. 3:43 This is only, version two. 3:44 >> Oh, okay. Nice. 3:46 >> Yeah but for right, you know, if you have data on, let's say, 3:46 population, or I know how much ice cream being sold in a certain place. 3:50 You can put it on the heat map and you're good to go. 3:54 So, we'll have a link to that in the show notes, which you can get to 3:56 at youtube.com/gotreehouse or search for us on iTunes. 4:00 We're The Treehouse show. 4:02 And also don't forget to check us out at www.teamtreehouse.com/show. 4:03 >> For a free month. 4:08 >> Yeah. Free month of, of treehouse. 4:10 >> Very cool stuff. 4:12 Well, next up, is, HTML 5 device mockups. 4:12 This is a GitHub repo and, well, reading is boring, so 4:17 let's just click on the demo here. 4:21 Basically, it's a little piece of code, which you can see right here and, 4:24 you can use this to render a physical device. 4:30 So, for example, here I have an iPhone 5. 4:34 And, of course, right here, you can actually put your own content. 4:37 So you could put your own content, inside of a screen here and- 4:41 >> Maybe a screen shot. 4:46 Maybe, maybe pictures of, of Nick and I. 4:47 >> And, and just render it as straight up HTML. 4:50 So that's pretty cool. 4:53 You can also do it on an iPad if you want. 4:55 Maybe a little, a little bit to the, larger view of in Jason or iMac. 4:57 That's, that's nice, there's Macbook Pro several Android devices, 5:02 Surface and, if you click on devices that have multiple colors, 5:09 you can actually do it, in other colors. 5:13 So, there's a different colored, iPhone. 5:15 You can do it in landscape. 5:19 And still change colors. 5:22 Pretty cool stuff. 5:23 Now if we go back to the GitHub Repo and you actually click on, the device mockups. 5:25 Here you can drill down into any one of these, folders and actually see 5:32 there is the PNG image, of the iMac that we were looking at earlier. 5:38 So, you actually have images, of all of these devices, so 5:43 it's doing, you know, any kind of clever CSS styling. 5:48 Where it's actually, maybe doing a border radius to get the rounded corners here and 5:52 a gradient on the little stand. 5:57 No, it's actually just an image. 5:59 So, it renders the image and then you can overlay, 6:01 your own content right onto the screen there. 6:05 Now, why would you want something like this? 6:09 Well, maybe you have a web App or an iPhone App that you want to demonstrate. 6:11 And, you have a marketing page, like a home page for 6:18 example and you wanna just have a nice device there that actually shows the App, 6:21 or something like that and you can, go ahead and use this, so, pretty cool. 6:26 >> Some cool features on there. 6:31 >> Yep. >> It maintains the devices aspect ration 6:31 when scaled. 6:34 >> Mm-hm. 6:35 >> And, you can bind to the home button. 6:35 For click events if you want to. 6:38 >> Right, there is a little java script event on the home button so 6:40 if you actually wanna have something, happen there maybe something specific, or 6:43 maybe just, like, a fun easter egg or something like that- 6:47 >> Yeah, maybe you get a different picture of, of, of Nick and myself. 6:49 >> That's right. >> When you click on that. 6:52 >> Mm-hm. 6:53 >> Next up, we have the comprehensive beginners guide to AngularJS. 6:55 I know that, because it is the title of the blog post. 7:00 This is a very, very thorough guide and 7:04 it can take 33 minutes to read, so get comfortable. 7:06 I am going to read this word for word. 7:09 >> I'm ready. 7:11 >> No I'm just kidding about that. 7:12 Not actually gonna go through and 7:14 read this word for word, but this is a wonderful introduction to AngularJS. 7:15 Now, AngularJS is a great front end 7:19 framework from Google that's been getting a lot of headway, recently. 7:21 Now, one thing that I really like about this guide, is that it kind of 7:26 walks you through the quote unquote the old way of creating Apps and 7:30 gives you examples in JQuery, of what will happen and 7:34 how you would start to code a single page application. 7:37 Now, it'll show you, hey, okay, I click on this element. 7:41 And then I go through this API and look at this. 7:44 It returns, back a list of comments. 7:47 And then this person creates a DIV and more DIVs for 7:49 all these comments and links. 7:52 And, adds attributes and classes to it. 7:54 And then appends it to the DOM and says hey, this actually looks kind of gross. 7:57 But, this is actually how we coded for a very long time. 8:01 Until these JavaScript web frameworks came along. 8:05 Now it discusses the bigger problems that AngularJS starts to solve. 8:09 And then shows you how to refactor everything. 8:13 So here's an example that we have here. 8:17 Look at that I typed some, test text into this text box right here. 8:19 And it shows up in this div immediately. 8:24 Now, what code did that? 8:27 Well, this is the code that was used to accomplish that. 8:29 You'll notice it's just a div with an input with 8:32 this really weird NG-model which is Angular code and 8:35 it says it's my text and then we can just go through and display it in here. 8:39 So that is the very minimum AngularJS application. 8:45 Now as it goes through, says, okay, let's go on to step two and 8:50 make the App more complicated. 8:54 [SOUND] And look at that. 8:56 Now it supports markdown. 9:00 Ooh. 9:02 So how do we do that? 9:03 Well, we add a custom filter to our Angular module. 9:03 Now this walks through and, makes the application way, way more enhanced. 9:07 Like I said, we're not gonna go through everything, but 9:13 it is a wonderful introduction, especially great if you have not, used AngularJS yet, 9:14 so go ahead and check it out. 9:20 We will have a link, in the show notes. 9:21 >> Very nice stuff. 9:24 Well next up is an article called Enduring CSS, writing style sheets for 9:24 rapidly changing long lived projects. 9:30 An alternate title might have been Immortal CSS if you want CSS, 9:34 to live forever, this is a good way to do it. 9:38 >> Or Highlander CSS, there can be only one- 9:42 >> That's correct. 9:44 >> CSS style sheet. 9:45 >> Or, or Vampire CSS you know these, these are all options, for, the title. 9:46 Anyway, I'm getting ahead of myself. 9:50 Basically this describes how to architect your CSS for 9:52 a large scale project that's maybe going to be around for a long time. 9:59 You might have multiple team members working on it and, 10:03 it's basically gonna be a big mess if you don't structure things correctly. 10:07 This is a pretty in depth article I highly encourage you to, read the whole thing but 10:13 there’s one thing I want to point out here and it’s called fun here and 10:18 really you just wanna make sure that you have fun when your coding your CSS that’s, 10:23 that’s pretty much the secret, no I’m kidding. 10:26 [LAUGH] This is an acronym. 10:28 That stands for flat hierarchy of selectors. 10:30 Utility styles and then name spaced component. 10:35 So, that forms fun right there. 10:41 >> It does form fun. 10:44 >> So, flat hierarchy of selectors, is pretty straightforward. 10:44 It's basically just saying, make sure you only use classes or 10:50 use only classes, for selectors, except in specific circumstances. 10:55 Never nest selectors, unless it's essential. 11:01 And avoid IDs as much as you possibly can. 11:04 Or complete avoidance, of IDs as styling hooks. 11:09 And, basically what this is saying is that you only wanna make your selectors, 11:14 as specific as you need to make them. 11:19 So that you're not fighting selectors specificity, 11:21 which is a very difficult word to say. 11:25 When you are, laying on your styles. 11:27 >> That also helps with performance with DOM rendering. 11:30 >> Yes it does. 11:33 It, it's a, it's a little bit fractional in most cases, but 11:35 if you do have a really large project it could start to add up. 11:39 So that, that is a good point. 11:42 You can also have utility styles here. 11:44 And these are basically, single responsibility styles. 11:47 So, say for instance you have a class called, 11:52 W100, that might be, used to set the width of an element to 100%. 11:56 Or maybe a table class that set something to display table. 12:03 And table layout fixed. 12:08 And it says they should have no reliance ,on other selectors or 12:10 specific structures. 12:14 So you just make this one class selector, width 100 or 12:16 w100 and it sets the width to 100%. 12:20 And by using these and combining these, you can, basically create more 12:23 mergent behavior just by, putting these together in different ways. 12:28 >> That sounds fun. 12:33 >> It is. 12:35 It's the U in fun, it puts the U in fun literally in this case. 12:35 basically, you wanna make sure that this styles are something that you 12:41 don't modify in anyway so once you add them to the project. 12:46 And they start to get used in various places. 12:50 It could be very difficult to change that behavior and extract it out later. 12:53 So make sure that you, create these utility classes with the intention of 12:58 using them the way they were intended to be used and not modifying them or 13:03 hacking them later on. 13:08 The last thing N, is name spacing component- 13:10 >> Or Nick. 13:14 >> So, that, that's right. 13:14 >> Put the nick in fun. 13:16 >> basically- 13:17 >> Like the Treehouse show. 13:19 >> You wanna make sure, that you name space your components so 13:20 you don't have any naming conflicts. 13:24 Well what does that mean? 13:26 Well, maybe you have like a shopping cart component and, 13:27 you also have this other, navigation component or something like that. 13:32 And for whatever reason, you need a wrapper class on both of them. 13:36 Well, it might be pretty tricky to figure out whether a class is meant for, 13:42 that navigation element or the shopping cart if it's just called, wrapper. 13:50 I mean what could be, even more confusing is if you had like, wrapper one and 13:54 wrapper, two or something like that. 13:59 But here- 14:02 >> Now when he says wrapper he means like container elements not like, 14:03 you know musical performers. 14:08 >> Right. 14:10 That's, that's, that's not politically correct. 14:12 >> I just wanted to clarify that. 14:14 >> That's good. 14:17 That's good I was getting confused myself, [SOUND] but basically if you 14:18 have a shopping cart, you might wanna name space it like this sc, so sc-wrapper. 14:23 Could, mean that it's the shopping cart wrapper. 14:30 so, anyway, that's just part of the article. 14:35 I definitely recommend you read the whole thing, but it's pretty, pretty in-depth 14:37 and, pretty good advice, I, I think, for architecting the CSS of, large projects. 14:42 Anyway, that's all we have time for today. 14:47 I'm- >> I guess you could say that's a wrap. 14:50 >> That, that is a rap, I am at NickRP on twitter. 14:52 >> And I am at JSeifer. 14:55 For more information on anything we talked about check out our show notes at 14:56 YouTube.com/gotreehouse or search for us on Itunes, we are the Treehouse show. 14:59 >> And of course if you'd like to see more videos like this one about web design, 15:04 web development, mobile business and, so much more, be sure to check us 15:09 out at Teamtreehouse.com/show, for a free month of Treehouse. 15:14 Thank you so much for watching and we will see you next week. 15:19 [MUSIC] 15:22

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

Sign up