1 00:00:00,250 --> 00:00:01,040 I'm Nick Pettit. 2 00:00:01,040 --> 00:00:02,000 >> I'm Jason Seifer. 3 00:00:02,000 --> 00:00:05,190 >> And you're watching The Treehouse Show, your weekly dose of internet where we 4 00:00:05,190 --> 00:00:08,000 talk about all things web design, web development, and more. 5 00:00:08,000 --> 00:00:13,530 >> For a free month's trial of Treehouse, head on over to teamtreehouse.com/show. 6 00:00:13,530 --> 00:00:16,290 In this episode we'll be talking about DPI, 7 00:00:16,290 --> 00:00:19,920 responsive charts, media queries, and more. 8 00:00:19,920 --> 00:00:21,144 >> Let's check it out. 9 00:00:21,144 --> 00:00:26,222 [MUSIC] 10 00:00:26,222 --> 00:00:29,560 First up is the designers guide to DPI. 11 00:00:29,560 --> 00:00:30,740 What does that mean? 12 00:00:30,740 --> 00:00:33,590 Well, DPI is dots per inch. 13 00:00:33,590 --> 00:00:37,970 And it's an important topic that designers have been talking about quite a lot. 14 00:00:37,970 --> 00:00:44,250 Because these days you can't rely on every single screen having the same 15 00:00:44,250 --> 00:00:49,360 pixel density, the same amount of pixels packed into the same area. 16 00:00:49,360 --> 00:00:50,770 It tends to vary. 17 00:00:50,770 --> 00:00:55,490 For example, we have retina iPhones and eye iPads now, and 18 00:00:55,490 --> 00:00:59,080 even retina displays on computers like this one. 19 00:00:59,080 --> 00:01:00,790 >> There only gonna get more dense. 20 00:01:00,790 --> 00:01:06,090 >> They are, at least that's the rumor or the speculation, so. 21 00:01:06,090 --> 00:01:10,480 This is a really good time to start learning about DPI and 22 00:01:10,480 --> 00:01:16,210 what it means to you as a designer or a developer if you haven't done so already. 23 00:01:16,210 --> 00:01:18,990 This is a fairly basic guide, but 24 00:01:18,990 --> 00:01:24,800 it's good that it's basic because DPI can be somewhat confusing if you're new to it. 25 00:01:24,800 --> 00:01:30,650 So there's an explanation about what is DPI and what is PPI, or pixels 26 00:01:30,650 --> 00:01:36,540 per inch, and it goes in depth there with some really great illustrations. 27 00:01:36,540 --> 00:01:41,590 Then it goes on to say what the impact on your design might be, so. 28 00:01:41,590 --> 00:01:45,960 Basically anything that is at a higher pixel, 29 00:01:45,960 --> 00:01:51,710 density is going to appear smaller on the screen, or physically smaller. 30 00:01:51,710 --> 00:01:54,730 At least in general as sort of a general rule. 31 00:01:54,730 --> 00:01:57,662 There's a more detailed explanation there. 32 00:01:57,662 --> 00:02:00,960 There is a difference between the screen resolution and 33 00:02:00,960 --> 00:02:04,400 what the screen's actual native resolution is. 34 00:02:04,400 --> 00:02:07,280 And then it also talks about what's 4k, 35 00:02:07,280 --> 00:02:11,590 what are monitor hertz, what's a retina display, and so on. 36 00:02:11,590 --> 00:02:16,080 Basically, everything that you might need to know as a designer. 37 00:02:16,080 --> 00:02:20,670 So this is a really great in-depth article about all of 38 00:02:20,670 --> 00:02:25,150 these newer screens and kind of what they mean for design. 39 00:02:25,150 --> 00:02:26,510 But anyway, great article. 40 00:02:26,510 --> 00:02:28,130 Be sure to check that one out. 41 00:02:28,130 --> 00:02:29,050 >> Yeah. Also good, you know, 42 00:02:29,050 --> 00:02:31,050 if you're a designer send it to some developers so 43 00:02:31,050 --> 00:02:33,680 you guys can establish some common ground. 44 00:02:33,680 --> 00:02:37,010 >> Mm-hm. Yeah. >> Put the we in DPI, not make it so one sided. 45 00:02:37,010 --> 00:02:37,870 >> Yeah. Maybe, 46 00:02:37,870 --> 00:02:40,930 maybe some day we'll form an understanding. 47 00:02:40,930 --> 00:02:44,590 Next up we have a project called Chartist.JS. 48 00:02:44,590 --> 00:02:49,700 As you might expect from the name this is a JavaScript library for charts. 49 00:02:49,700 --> 00:02:53,000 But the spin on it is that they are responsive. 50 00:02:53,000 --> 00:02:57,290 And this little guy with the top hat and pitchfork pointing at the chart. 51 00:02:57,290 --> 00:03:01,540 And you can also see this chart even supports CSS animations. 52 00:03:01,540 --> 00:03:02,850 Look at that. 53 00:03:02,850 --> 00:03:03,710 >> It is, it is happening. 54 00:03:03,710 --> 00:03:04,560 >> Wow. I know. 55 00:03:04,560 --> 00:03:07,070 So very, very easy to use. 56 00:03:07,070 --> 00:03:08,200 They're also customizable. 57 00:03:08,200 --> 00:03:10,260 A few different kinds of charts are supported. 58 00:03:10,260 --> 00:03:13,550 We've got line charts, bar charts, pie charts. 59 00:03:13,550 --> 00:03:16,220 Oh, I'm kinda hungry now talking about pie charts. 60 00:03:16,220 --> 00:03:17,130 >> Yeah. 61 00:03:17,130 --> 00:03:18,493 >> Any hamburger venues on this site? 62 00:03:18,493 --> 00:03:19,061 [CROSSTALK] I, I don't think so. 63 00:03:19,061 --> 00:03:22,920 >> You know how much of that pie chart is a pie chart? 64 00:03:22,920 --> 00:03:25,190 >> How much? >> 100% of it. 65 00:03:25,190 --> 00:03:26,270 Yeah. The whole thing. 66 00:03:26,270 --> 00:03:26,890 >> I'm pretty hungry. 67 00:03:26,890 --> 00:03:27,820 >> The whole things a pie. 68 00:03:27,820 --> 00:03:29,710 >> Now that you said that. 69 00:03:29,710 --> 00:03:32,360 >> Oh. >> So here is a CSS animation example. 70 00:03:32,360 --> 00:03:33,070 Look at that. We, 71 00:03:33,070 --> 00:03:35,590 the, I don't exactly what this is, what this is doing. 72 00:03:35,590 --> 00:03:38,120 But these, these results are absolutely insane and 73 00:03:38,120 --> 00:03:40,930 not typical for what the chart usually should display. 74 00:03:40,930 --> 00:03:41,830 >> Wow. >> So you should have 75 00:03:41,830 --> 00:03:45,560 a very strong emotional reaction to what's going on here and I, 76 00:03:45,560 --> 00:03:49,250 I mean with the chart not with the tension between nick and myself. 77 00:03:49,250 --> 00:03:54,150 But it is responsive so lets see what happens when I resize the browser. 78 00:03:54,150 --> 00:03:55,540 What. 79 00:03:55,540 --> 00:03:59,040 This chart is getting smaller. 80 00:03:59,040 --> 00:04:00,460 Oh, look at that different chart. 81 00:04:00,460 --> 00:04:02,530 No it didn't, it didn't change. 82 00:04:02,530 --> 00:04:05,300 It's in a different spot on the page. 83 00:04:05,300 --> 00:04:07,440 It had to move when the browser moved. 84 00:04:07,440 --> 00:04:12,010 Okay, anyway, so any CSS3 animations are supported. 85 00:04:12,010 --> 00:04:16,340 And actually we can look at the API documentation, 86 00:04:16,340 --> 00:04:20,170 no that's not what I wanted, I wanted to the examples, live coating. 87 00:04:20,170 --> 00:04:23,960 You can actually edit the examples on the site which is pretty awesome, so 88 00:04:23,960 --> 00:04:25,180 here are the different labels. 89 00:04:25,180 --> 00:04:26,100 Like, so. 90 00:04:26,100 --> 00:04:29,740 For example, instead of Monday we'll change that to Nickday and 91 00:04:29,740 --> 00:04:31,630 you can see that, that change is right there. 92 00:04:31,630 --> 00:04:34,930 And then we can mess around with the numbers and 93 00:04:34,930 --> 00:04:39,210 the changes are directly reflected on the chart right there. 94 00:04:39,210 --> 00:04:41,640 So you can see really, really simple to use. 95 00:04:41,640 --> 00:04:44,780 You just give it some data and then call Chartist and 96 00:04:44,780 --> 00:04:48,010 the kind of chart that you want to use. 97 00:04:48,010 --> 00:04:53,890 Here's a pie chart example, and I think we can just say Chartist.Pie. 98 00:04:53,890 --> 00:04:56,260 Instead of a line chart, we're using a pie chart here. 99 00:04:56,260 --> 00:04:58,080 Anyway, very, very easy to use. 100 00:04:58,080 --> 00:05:00,845 We'll have a link to this in the show notes which you can check out at 101 00:05:00,845 --> 00:05:05,480 youtube.com/gotreehouse/ or search for us in iTunes, we are The Treehouse Show. 102 00:05:05,480 --> 00:05:10,194 And don't forget to join us for a free month's trial at teamtreehouse.com/show. 103 00:05:11,390 --> 00:05:12,150 Very cool stuff. 104 00:05:12,150 --> 00:05:17,170 Well next up if this wonderful blog post from Brad Frost. 105 00:05:17,170 --> 00:05:19,680 That was really difficult to say for some reason. 106 00:05:19,680 --> 00:05:25,060 It's called Seven Habits of Highly Effective Media Queries of course. 107 00:05:25,060 --> 00:05:30,140 I think that's a play on the title of book Seven Habits of Highly Effective People I 108 00:05:30,140 --> 00:05:31,600 think is the title of the book. 109 00:05:31,600 --> 00:05:32,899 >> Think you're thinking of Twilight. 110 00:05:34,700 --> 00:05:35,550 I think you're right. 111 00:05:35,550 --> 00:05:40,160 I think, I think Twilight is actually what I was thinking of there. 112 00:05:40,160 --> 00:05:45,730 anyway, this blog post is a little older, but it's still perfectly good. 113 00:05:45,730 --> 00:05:49,730 Let's go down and look at some of these seven habits. 114 00:05:49,730 --> 00:05:53,780 First one I wanna point out is, let the content determine the break points. 115 00:05:53,780 --> 00:05:57,580 And I think this is really great advice that Brad Frost is giving here, and 116 00:05:57,580 --> 00:06:03,540 he says, every time you see 320px, 480px, and so on, used as breakpoint values, 117 00:06:03,540 --> 00:06:07,380 a kitten got its head bitten off by an angel, or something like that. 118 00:06:07,380 --> 00:06:10,470 Wow, that sounds really horrible, so don't do that. 119 00:06:10,470 --> 00:06:16,980 You should use breakpoints that are basically based on the content 120 00:06:16,980 --> 00:06:22,940 of the page because these preset break points are just based on popular devices. 121 00:06:22,940 --> 00:06:29,220 So for example 320 is an iPhone and portrait, 480 is an iPhone and landscape, 122 00:06:29,220 --> 00:06:36,450 768 is an iPad in portrait and so on, because these actual dimensions could be 123 00:06:36,450 --> 00:06:41,910 irrelevant in you know, a week's time or a year's time or something like that. 124 00:06:41,910 --> 00:06:44,250 New devices come out all the time. 125 00:06:44,250 --> 00:06:49,090 So, it's much better to tailor your content to the breakpoints and 126 00:06:49,090 --> 00:06:50,170 not the other way around. 127 00:06:50,170 --> 00:06:55,060 Or, or I should say, it's better to tailor your breakpoints to the content. 128 00:06:55,060 --> 00:06:56,420 Excuse me. 129 00:06:56,420 --> 00:07:01,210 It's not a good idea to use these preset ones, just because they could change. 130 00:07:01,210 --> 00:07:07,360 They, they may not mean anything in a year's time or something like that. 131 00:07:07,360 --> 00:07:09,680 >> Also media queries sparkle in the daylight. 132 00:07:11,100 --> 00:07:14,220 >> That is something that I think you just made up. 133 00:07:15,440 --> 00:07:18,290 You should treat layout as an enhancement. 134 00:07:18,290 --> 00:07:23,250 So for example if you're building a mobile first responsive site, 135 00:07:23,250 --> 00:07:26,850 which you probably should be doing in this day and age, 136 00:07:26,850 --> 00:07:32,160 you wanna make sure that layout is just sort of treated as an enhancement. 137 00:07:32,160 --> 00:07:36,680 So you build your very simple mobile-first styles for 138 00:07:36,680 --> 00:07:40,420 the web, and says that right here. 139 00:07:40,420 --> 00:07:44,920 And you can then enhance that with layout later on. 140 00:07:44,920 --> 00:07:50,940 So when you go up to these larger desktop styles you can start to add layouts. 141 00:07:52,120 --> 00:07:53,490 Last thing I'm gonna point out here. 142 00:07:53,490 --> 00:07:55,180 There's a couple more you should check out. 143 00:07:55,180 --> 00:07:59,460 But last thing I'm gonna, for now is the idea of using major and 144 00:07:59,460 --> 00:08:00,490 minor break points. 145 00:08:00,490 --> 00:08:07,700 So, for example, you might have a website that has a single column layout on mobile. 146 00:08:07,700 --> 00:08:10,040 And then expands into maybe two or 147 00:08:10,040 --> 00:08:15,910 three columns on larger desktop devices or perhaps tablets. 148 00:08:15,910 --> 00:08:19,410 Those types of dramatic changes do need a breakpoint, but 149 00:08:19,410 --> 00:08:23,210 you can also have smaller breakpoints in between if you 150 00:08:23,210 --> 00:08:27,770 just wanna change small parts of the site, such as a, a font size. 151 00:08:27,770 --> 00:08:33,480 Or maybe the navigation might switch from horizontal to vertical, and so on. 152 00:08:33,480 --> 00:08:38,500 And you can do smaller breakpoints in these sort of minor breakpoints, 153 00:08:38,500 --> 00:08:45,220 as Brad Frost points out here, instead of doing dramatic changes and 154 00:08:45,220 --> 00:08:50,540 trying to squeeze those minor changes into the more dramatic breakpoints. 155 00:08:50,540 --> 00:08:52,400 Anyway, really good article. 156 00:08:52,400 --> 00:08:54,560 Be sure to check this one out. 157 00:08:55,610 --> 00:08:56,570 >> Very nice. 158 00:08:56,570 --> 00:08:59,010 Next up we have a project called Victor.JS. 159 00:08:59,010 --> 00:09:06,660 This is a JavaScript two D vector maps library for Node.js and the browser. 160 00:09:06,660 --> 00:09:10,030 I know that because it says it in the header of this web page. 161 00:09:10,030 --> 00:09:13,670 One thing I'm just going to point out that is of little to no relevance to what we're 162 00:09:13,670 --> 00:09:16,740 talking about, is that you can click anywhere on this page right here and 163 00:09:16,740 --> 00:09:20,610 that little thing will follow to the points that you just clicked on. 164 00:09:20,610 --> 00:09:23,060 >> I think that's really the most important thing here. 165 00:09:23,060 --> 00:09:26,250 >> If you take one thing away from the Treehouse Show, 166 00:09:26,250 --> 00:09:29,660 it is well it's not this particular thing. 167 00:09:29,660 --> 00:09:32,780 I think, I think it'll be a, a deep sense of sadness and regret. 168 00:09:32,780 --> 00:09:33,340 Anyway. 169 00:09:33,340 --> 00:09:35,840 This is very, very easy to use. 170 00:09:35,840 --> 00:09:39,590 You simply install it using Node.js or at the browser. 171 00:09:39,590 --> 00:09:41,420 It's very easy to use with Bower. 172 00:09:41,420 --> 00:09:45,630 And then you can create new vector. 173 00:09:45,630 --> 00:09:48,970 I'm sorry. New x and y coordinates with Victor. 174 00:09:48,970 --> 00:09:53,140 So why would you use this library instead of just creating your own 175 00:09:53,140 --> 00:09:54,710 JavaScript object for it? 176 00:09:54,710 --> 00:09:58,640 Well, you get all sorts of maths that go along with it. 177 00:09:58,640 --> 00:10:03,260 So you create your point and then you can go through and add to the point. 178 00:10:03,260 --> 00:10:05,680 You can have all this math done for you. 179 00:10:05,680 --> 00:10:10,850 You can for example, right here, create a new vector and then add to 180 00:10:10,850 --> 00:10:16,540 the x coordinate another vector coordinate, and then call to string. 181 00:10:16,540 --> 00:10:19,610 You'll get these particular values. 182 00:10:19,610 --> 00:10:22,770 Now you don't need to call to string, you can have all that math done for 183 00:10:22,770 --> 00:10:23,870 you right there. 184 00:10:23,870 --> 00:10:27,340 Now this also works, not just with addition, but 185 00:10:27,340 --> 00:10:33,640 you can do rotation you can do all sorts of different math calculations. 186 00:10:33,640 --> 00:10:34,990 And this is very easy to use. 187 00:10:34,990 --> 00:10:37,160 The documentation is also very thorough. 188 00:10:37,160 --> 00:10:38,490 So, make sure to check that out. 189 00:10:38,490 --> 00:10:40,460 We will have a link in the show notes. 190 00:10:42,080 --> 00:10:44,680 >> Very nice. I like the fact that it's called Victor, 191 00:10:44,680 --> 00:10:51,090 because there's probably other JavaScript objects that might be a, a vector and 192 00:10:51,090 --> 00:10:55,920 could conflict with the names, so it's pretty clever and it's, it's nice that 193 00:10:55,920 --> 00:10:59,850 they called it Victor just so you can sort of remember that it is actually a vector. 194 00:10:59,850 --> 00:11:02,260 >> You could say it's the winning name for the library. 195 00:11:02,260 --> 00:11:03,560 >> It just, it was the Victor. 196 00:11:04,840 --> 00:11:10,490 Next up is an article called Pure CSS parallax scrolling websites. 197 00:11:10,490 --> 00:11:14,890 Of course, parallax scrolling websites have been popular for quite some time now. 198 00:11:14,890 --> 00:11:20,290 That's basically where a website might have multiple layers of depth, 199 00:11:20,290 --> 00:11:22,750 or at least the appearance of such and. 200 00:11:22,750 --> 00:11:23,810 >> Like an onion. 201 00:11:23,810 --> 00:11:24,640 >> Right. 202 00:11:24,640 --> 00:11:26,430 Or like our relationship. 203 00:11:26,430 --> 00:11:29,370 And when you scroll down the page there's sort of 204 00:11:29,370 --> 00:11:34,390 multiple components that parallax with one another or move at different speeds. 205 00:11:34,390 --> 00:11:37,730 This is sort of like when you're riding in a car or 206 00:11:37,730 --> 00:11:42,100 a train and you look at something that's close to you and it moves by very quickly. 207 00:11:42,100 --> 00:11:46,110 While something that's far away moves by much more slowly, or 208 00:11:46,110 --> 00:11:50,050 at least it has the perception of doing that because of perspective. 209 00:11:50,050 --> 00:11:51,730 >> Like our time together. 210 00:11:51,730 --> 00:11:55,835 >> Indeed. [SOUND] The parallax is typically handled 211 00:11:55,835 --> 00:12:01,282 with JavaScript and that's actually not very perfomant. 212 00:12:01,282 --> 00:12:04,436 It's listening to the scroll event and 213 00:12:04,436 --> 00:12:07,940 it does a couple of things once a scroll happens. 214 00:12:07,940 --> 00:12:11,950 And it triggers lots of reflows and repaints, and 215 00:12:11,950 --> 00:12:15,206 that's just not good for performance. 216 00:12:15,206 --> 00:12:21,200 So typically ends up with lower frame rates than what might be desirable. 217 00:12:21,200 --> 00:12:23,830 >> So are you saying that they can be done in pure CSS? 218 00:12:23,830 --> 00:12:29,050 >> That is exactly what this article describes how to do. 219 00:12:29,050 --> 00:12:31,800 Now, there's a bunch of theory here but that's boring. 220 00:12:31,800 --> 00:12:35,330 Let's go ahead and jump into a demo. 221 00:12:35,330 --> 00:12:40,500 I'm going to do this in Safari because, actually I'll switch back to the article, 222 00:12:40,500 --> 00:12:44,620 here, it points out that this technique is broken in Chrome 37. 223 00:12:44,620 --> 00:12:49,000 And at the time of this recording I am indeed using Chrome 37 here. 224 00:12:49,000 --> 00:12:51,680 So I have to switch to a different browser. 225 00:12:51,680 --> 00:12:53,320 But here's what the demo looks like. 226 00:12:53,320 --> 00:13:00,870 You can scroll down the page and it's parallaxing all of this with pure CSS. 227 00:13:00,870 --> 00:13:01,880 Now- >> Wow. 228 00:13:01,880 --> 00:13:04,060 >> How the heck are they doing that? 229 00:13:04,060 --> 00:13:10,890 Because it's not using any kind of JavaScript event to listen to the scroll. 230 00:13:10,890 --> 00:13:15,020 So, how are they able to get these layers of scroll? 231 00:13:15,020 --> 00:13:18,080 >> Magic. >> Well, if you click on this debug mode. 232 00:13:19,240 --> 00:13:19,750 >> What? 233 00:13:19,750 --> 00:13:23,340 >> It will show you exactly what's actually going on here. 234 00:13:23,340 --> 00:13:23,840 >> Wow. 235 00:13:23,840 --> 00:13:29,020 >> Basically they are placing these elements on to different planes, and 236 00:13:29,020 --> 00:13:34,610 then translating them using the transform property. 237 00:13:34,610 --> 00:13:42,050 So it's moving these different layers into the z-plane, or the depth of the page. 238 00:13:42,050 --> 00:13:46,310 And then when you actually look at it straight on, 239 00:13:46,310 --> 00:13:49,590 looking at it from straight on here. 240 00:13:49,590 --> 00:13:54,660 It looks like some layers are moving slower and 241 00:13:54,660 --> 00:13:58,570 some layers are moving faster and you get that nice parallax effect. 242 00:13:58,570 --> 00:14:01,640 Anyway, this article goes into a lot more depth 243 00:14:01,640 --> 00:14:05,450 as to how this particular effect is achieved. 244 00:14:05,450 --> 00:14:07,540 Highly recommend you check it out. 245 00:14:07,540 --> 00:14:09,940 And I think that's all we have time for. 246 00:14:09,940 --> 00:14:11,180 >> Well that is, who are you on Twitter? 247 00:14:11,180 --> 00:14:12,320 >> I am @nickrp. 248 00:14:12,320 --> 00:14:13,450 >> And I am @jseifer. 249 00:14:13,450 --> 00:14:16,075 For more information on anything that we talked about, check out our show notes at 250 00:14:16,075 --> 00:14:20,940 www.youtube.com/gotreehouse/ or search for us on iTunes, we are The Treehouse Show. 251 00:14:20,940 --> 00:14:23,690 >> And of course, if you'd like to see more videos like this one about web 252 00:14:23,690 --> 00:14:28,590 design, web development, mobile, business, and so much more, be sure to check us 253 00:14:28,590 --> 00:14:34,270 out at teamtreehouse.com/show and get a month free. 254 00:14:34,270 --> 00:14:37,443 Thank you so much for watching, and we will see you next week. 255 00:14:37,443 --> 00:14:47,443 [MUSIC]