1 00:00:00,400 --> 00:00:01,200 >> I'm Nick Pettit. 2 00:00:01,200 --> 00:00:02,050 >> I'm Jason Seifer. 3 00:00:02,050 --> 00:00:03,590 >> And you're watching the Treehouse show. 4 00:00:03,590 --> 00:00:06,670 Your weekly dose of internets, where we talk about all things web design, 5 00:00:06,670 --> 00:00:08,360 web development, and more. 6 00:00:08,360 --> 00:00:12,877 >> In this episode, we'll be talking about icons, performance of popular JavaScript 7 00:00:12,877 --> 00:00:16,593 frameworks, design considerations with text on images, and more. 8 00:00:16,593 --> 00:00:17,551 >> Let's check it out. 9 00:00:17,551 --> 00:00:22,713 [MUSIC] 10 00:00:22,713 --> 00:00:26,955 First up is Evil Icons, this says it is a simple and 11 00:00:26,955 --> 00:00:33,210 clean SVG icon pack with the code to support Rails, Sinatra and Node JS. 12 00:00:33,210 --> 00:00:35,370 I know that because it says it right here on the website. 13 00:00:35,370 --> 00:00:37,700 So convenient. 14 00:00:37,700 --> 00:00:42,620 Down here, they have the regular style of icons you can get them in small, 15 00:00:42,620 --> 00:00:45,120 medium or large sizes. 16 00:00:45,120 --> 00:00:46,710 I looked at these kinda carefully, and 17 00:00:46,710 --> 00:00:51,680 I don't really see any differences between these small, medium, and large sizes. 18 00:00:51,680 --> 00:00:55,200 And that's kinda interesting, because they are SVGs. 19 00:00:55,200 --> 00:01:00,890 You would expect to see, maybe, differences in the line weight, 20 00:01:00,890 --> 00:01:02,120 and things of that nature. 21 00:01:02,120 --> 00:01:05,800 And maybe there is, maybe they're just so well-designed, I'm not noticing it. 22 00:01:05,800 --> 00:01:09,530 But you can get them in those different sizes. 23 00:01:09,530 --> 00:01:12,950 Then, of course, it is free and open, and 24 00:01:12,950 --> 00:01:14,870 I guess the regular style is the only style. 25 00:01:14,870 --> 00:01:16,610 So you can go ahead [LAUGH] and 26 00:01:16,610 --> 00:01:21,370 click on Getting Started here, there's a number of ways to get this. 27 00:01:21,370 --> 00:01:25,070 You can use them with the, the Grunt plugin. 28 00:01:25,070 --> 00:01:32,510 Gulp is coming soon, and you can install them with Rails using the gem Evil Icons, 29 00:01:32,510 --> 00:01:37,920 and like it said earlier, it is available through Sinatra as well. 30 00:01:37,920 --> 00:01:39,900 Anyway pretty cool stuff. 31 00:01:39,900 --> 00:01:43,930 >> Maybe they're just misunderstood icons and not necessarily evil. 32 00:01:43,930 --> 00:01:46,505 >> Maybe, it's, it's possible. 33 00:01:46,505 --> 00:01:50,180 SVG is a really good way to go with icons because of course they're 34 00:01:50,180 --> 00:01:54,890 infinitely scalable and they have an infinite amount of resolution. 35 00:01:54,890 --> 00:01:57,900 So these are gonna look good on retina displays and 36 00:01:57,900 --> 00:02:04,200 high DPI devices as well as devices that are just, I don't know, regular. 37 00:02:04,200 --> 00:02:05,530 A depth screen, we'll say. 38 00:02:07,060 --> 00:02:10,990 And you know, they'll look good at all different screen resolutions. 39 00:02:10,990 --> 00:02:13,780 You can blow them up really big and they'll still look great. 40 00:02:13,780 --> 00:02:20,660 So, definitely check this out because you do wanna be using SVGs wherever possible. 41 00:02:20,660 --> 00:02:23,190 >> Was there an icon for tact in that set? 42 00:02:24,480 --> 00:02:27,260 >> I don't know what you're talking about Jason? 43 00:02:27,260 --> 00:02:27,892 >> Eye contact. 44 00:02:27,892 --> 00:02:31,903 [BLANK_AUDIO] 45 00:02:31,903 --> 00:02:32,459 Next up, 46 00:02:32,459 --> 00:02:36,960 we have an article on the performance of popular JavaScript frameworks. 47 00:02:36,960 --> 00:02:41,800 This article takes a look at the specific load times of Angular, 48 00:02:41,800 --> 00:02:44,590 Backbone and Ember JS. 49 00:02:44,590 --> 00:02:50,100 Now as we all know, speed matters especially perceived website load speed, 50 00:02:50,100 --> 00:02:54,580 and that is what this article went into. 51 00:02:54,580 --> 00:02:58,670 What they did is they took the same application and 52 00:02:58,670 --> 00:03:01,680 they benchmark the initial load time. 53 00:03:01,680 --> 00:03:03,480 And when I say the initial load time, 54 00:03:03,480 --> 00:03:08,820 that means the time it took for the JavaScript framework to get set up and 55 00:03:08,820 --> 00:03:14,420 load the initial application state, or render start. 56 00:03:14,420 --> 00:03:18,130 This is the moment in the web page test timeline view 57 00:03:18,130 --> 00:03:22,140 where the to-do application UI first appears. 58 00:03:22,140 --> 00:03:24,690 Now, what they're saying is these tests can and 59 00:03:24,690 --> 00:03:27,890 can't tell us about certain things, and this is just intended to 60 00:03:27,890 --> 00:03:34,060 establish a best case scenario on initial load and render times for each framework. 61 00:03:34,060 --> 00:03:37,850 There are a ton of different variables to take into account when you 62 00:03:37,850 --> 00:03:42,180 are doing benchmarks, and also choosing what framework to use. 63 00:03:42,180 --> 00:03:46,700 So, what is the TLDR with the average first render time? 64 00:03:46,700 --> 00:03:52,000 Well, backbone provided a consistent quickest first render. 65 00:03:52,000 --> 00:03:55,240 Also, it had the smallest script size. 66 00:03:55,240 --> 00:03:58,030 So, that is the immediate conclusion, but 67 00:03:58,030 --> 00:04:01,460 remember, there is a lot more to take into account when choosing a framework. 68 00:04:01,460 --> 00:04:03,320 However, this is interesting, so 69 00:04:03,320 --> 00:04:05,380 definitely take a little bit more in depth look. 70 00:04:05,380 --> 00:04:06,970 They have a spreadsheet on there with how they did it and 71 00:04:06,970 --> 00:04:09,580 they tested it across different devices as well. 72 00:04:09,580 --> 00:04:14,390 >> So not necessarily an indicator of every application's performance, but 73 00:04:14,390 --> 00:04:18,770 definitely a good barometer of kinda where their performance might end up. 74 00:04:18,770 --> 00:04:19,570 >> Exactly. 75 00:04:19,570 --> 00:04:20,330 >> Very cool stuff. 76 00:04:20,330 --> 00:04:23,494 Well, next up is an article from CSS-Tricks called 77 00:04:23,494 --> 00:04:26,710 Design Considerations: Text on Images. 78 00:04:26,710 --> 00:04:30,810 Of course, putting text on top of images is very, 79 00:04:30,810 --> 00:04:33,250 very popular, such as in this advertisement for 80 00:04:33,250 --> 00:04:37,520 Treehouse, and down here they have a couple different ways you can do that. 81 00:04:37,520 --> 00:04:43,860 So with this method, you might want to tint the image, and 82 00:04:43,860 --> 00:04:49,390 that's not totally obvious in terms of your run of the mill CSS. 83 00:04:49,390 --> 00:04:54,310 The way you do it is you use multiple background images, but you can't just use 84 00:04:54,310 --> 00:04:57,370 any background image because you can't really use a solid color here so 85 00:04:57,370 --> 00:05:00,510 you actually have to use a linear gradient, 86 00:05:00,510 --> 00:05:06,720 except your gradation is just from one color to the exact same color. 87 00:05:06,720 --> 00:05:09,340 And if you drop the opacity on both those colors you'll get something like this, 88 00:05:09,340 --> 00:05:14,650 and of course, you can tint that any color that you want. 89 00:05:14,650 --> 00:05:18,960 Now when you combine that with text, you get something like this. 90 00:05:18,960 --> 00:05:23,340 My suggestion here is to use white text whenever possible, 91 00:05:23,340 --> 00:05:25,990 in fact that's almost always what you want to use. 92 00:05:25,990 --> 00:05:31,370 You might be able to get away with a light color, but in general, 93 00:05:31,370 --> 00:05:35,970 it's hard to put a darker color on top of any kind of photograph. 94 00:05:35,970 --> 00:05:38,640 There's full-page images. 95 00:05:38,640 --> 00:05:39,700 So how do you do that? 96 00:05:39,700 --> 00:05:44,900 Well, in general, you'll set the background, and then the background size 97 00:05:44,900 --> 00:05:51,640 property to the keyword cover, and that's going to do exactly what it sounds like. 98 00:05:51,640 --> 00:05:56,550 It's going to cover the page, and it may crop off parts of 99 00:05:56,550 --> 00:06:02,470 the image depending on the aspect ration of the image and the viewport. 100 00:06:02,470 --> 00:06:09,590 And if you want this to maintain kinda just the top of the page, you can, 101 00:06:09,590 --> 00:06:14,180 and then have it sort of go away when you scroll down, so have it be cut off. 102 00:06:14,180 --> 00:06:17,730 You can do that by setting a height of 100 vh. 103 00:06:19,180 --> 00:06:22,850 So that will kinda measure the height of the viewport. 104 00:06:22,850 --> 00:06:26,600 And that's in percentage, so it'll be 100% of the viewport. 105 00:06:26,600 --> 00:06:30,450 And then when you scroll down, you'll see the rest of the web page. 106 00:06:30,450 --> 00:06:34,080 You could put text in a box, just like this. 107 00:06:34,080 --> 00:06:37,220 So in general here, you can kinda 108 00:06:37,220 --> 00:06:42,150 do a light color text on dark, or the other way around. 109 00:06:42,150 --> 00:06:46,090 It really doesn't matter because you're not quite as dependent on the image in 110 00:06:46,090 --> 00:06:47,660 this case. 111 00:06:47,660 --> 00:06:52,520 And then they also talk about blurring the backgrounds a little bit. 112 00:06:52,520 --> 00:06:54,040 That's pretty cool. 113 00:06:54,040 --> 00:06:57,350 One that I really like is what they're calling Floor Fade here. 114 00:06:57,350 --> 00:07:01,602 And that's where you have that same linear gradient, but 115 00:07:01,602 --> 00:07:06,027 you're going from top to bottom, and towards the bottom you 116 00:07:06,027 --> 00:07:10,818 have the gradient a little bit darker than you do towards the top. 117 00:07:10,818 --> 00:07:13,695 And then you put your text down, and it's a subtle effect I 118 00:07:13,695 --> 00:07:17,650 believe Facebook does this or at least they did for a little while. 119 00:07:17,650 --> 00:07:20,540 And you have sort of the darker part of the image down here, 120 00:07:20,540 --> 00:07:24,630 it's very subtle, you can't really tell that there's necessarily a gradient there, 121 00:07:24,630 --> 00:07:28,340 but it does make the text a lot more readable. 122 00:07:28,340 --> 00:07:29,540 >> Kinda makes it pop. 123 00:07:29,540 --> 00:07:30,520 >> It does. 124 00:07:30,520 --> 00:07:32,470 It makes the text pop. 125 00:07:32,470 --> 00:07:34,240 A very cool article. 126 00:07:34,240 --> 00:07:37,870 This, this is a lot of stuff that I've done from time to time on 127 00:07:37,870 --> 00:07:42,370 different websites, but I've never thought about it, like, like this. 128 00:07:42,370 --> 00:07:45,340 It, it's really nice to kinda have it in a big list of all of 129 00:07:45,340 --> 00:07:48,940 the different ways you can put text on top of an image. 130 00:07:48,940 --> 00:07:51,940 Really cool, really cool stuff. 131 00:07:51,940 --> 00:07:56,120 >> Next up, we have a post called the offline cookbook. 132 00:07:56,120 --> 00:08:03,130 This is an extremely, extremely thorough blog post that talks all about AppCache. 133 00:08:03,130 --> 00:08:07,790 AppCache gives you the ability to have applications work 134 00:08:07,790 --> 00:08:12,260 when the browser is offline using service workers. 135 00:08:12,260 --> 00:08:12,890 >> Oh, AppCache. 136 00:08:12,890 --> 00:08:16,490 Right, I, I thought that was just like another name for like venture capital. 137 00:08:16,490 --> 00:08:21,320 You know, gettin' cash to, to start your app idea. 138 00:08:21,320 --> 00:08:22,310 >> We should trademark that. 139 00:08:22,310 --> 00:08:23,890 >> Yeah, yeah, AppCache. 140 00:08:23,890 --> 00:08:25,290 >> But like spell it differently. 141 00:08:25,290 --> 00:08:26,710 Maybe leave out a letter, or something. 142 00:08:26,710 --> 00:08:27,210 >> Yeah. 143 00:08:28,440 --> 00:08:31,220 >> So anyway there are a lot of 144 00:08:31,220 --> 00:08:36,380 things to take into account when getting your website to work offline. 145 00:08:36,380 --> 00:08:38,298 And this all works using caching. 146 00:08:38,298 --> 00:08:43,420 Now, we're gonna take a look at just a couple of these different things because 147 00:08:43,420 --> 00:08:48,590 there are a ton of different points in the process where you 148 00:08:48,590 --> 00:08:54,060 might have to cache something and also delete it from the cache. 149 00:08:54,060 --> 00:08:57,120 Now, what's great about this particular post is, 150 00:08:57,120 --> 00:09:02,540 it tells you when you would want to use these different methods. 151 00:09:02,540 --> 00:09:08,930 For example, this one on the installation of an application. 152 00:09:08,930 --> 00:09:13,370 This is ideal for CSS, images, fonts, JavaScript, and 153 00:09:13,370 --> 00:09:18,660 templates, basically anything you consider static to that version of your site. 154 00:09:18,660 --> 00:09:23,190 So, what happens is you go to the site, the service worker goes, 155 00:09:23,190 --> 00:09:29,090 the install event happens, it reaches out to the network, grabs what it needs, 156 00:09:29,090 --> 00:09:34,490 put it inside of the cache and then the activate event is fired. 157 00:09:34,490 --> 00:09:38,120 Now, this is the code that makes that all work. 158 00:09:38,120 --> 00:09:40,100 This works using promises. 159 00:09:41,380 --> 00:09:43,080 Now, here is another method. 160 00:09:43,080 --> 00:09:47,050 You can do this also on installation and not as a dependency. 161 00:09:47,050 --> 00:09:50,040 This is going to be ideal for bigger resources that 162 00:09:50,040 --> 00:09:54,500 aren't needed straight away, like assets for the later levels of a game. 163 00:09:54,500 --> 00:09:58,690 So maybe the earlier levels you fetch initially, and then wait for 164 00:09:58,690 --> 00:10:00,560 just a couple minutes and 165 00:10:00,560 --> 00:10:06,120 then get the bigger assets, and it shows you the code right there as well. 166 00:10:06,120 --> 00:10:09,740 Now there are, like I said, a ton of different scenarios where you 167 00:10:09,740 --> 00:10:14,120 might want to use these different caches, or even delete the different caches. 168 00:10:14,120 --> 00:10:19,020 This isn't something that is going to be straight away available to use in 169 00:10:19,020 --> 00:10:22,840 all browsers, however it should be landing in Chrome in January or 170 00:10:22,840 --> 00:10:27,580 February of 2015 or 015, as Nick says. 171 00:10:27,580 --> 00:10:29,250 We'll have a link in the show notes of this article, 172 00:10:29,250 --> 00:10:33,470 I recommend checking it out if you need to make your web app work offline. 173 00:10:33,470 --> 00:10:35,040 >> That was so money. 174 00:10:36,330 --> 00:10:41,140 Next up is an article about responsive type. 175 00:10:41,140 --> 00:10:44,470 Of course, if you've ever tried to make 176 00:10:44,470 --> 00:10:48,630 type on a responsive website stretch all the way across. 177 00:10:48,630 --> 00:10:49,165 >> Haven't we all? 178 00:10:49,165 --> 00:10:52,730 >> Viewport, it's a little bit tricky to 179 00:10:52,730 --> 00:10:58,180 do because on some devices it might break in different places, and 180 00:10:58,180 --> 00:11:02,030 you might get stuff like this where it kinda drops down to the next line. 181 00:11:02,030 --> 00:11:05,120 And that may or may not be what you want. 182 00:11:05,120 --> 00:11:07,870 You might want the text to just go all the way across and 183 00:11:07,870 --> 00:11:12,740 completely fill the viewport, no matter what the size of the device is. 184 00:11:12,740 --> 00:11:14,050 Well, how do you do that? 185 00:11:14,050 --> 00:11:16,570 There's a couple of different techniques, and 186 00:11:16,570 --> 00:11:23,780 most of them rely on setting dozens of break points or using JavaScript. 187 00:11:23,780 --> 00:11:28,350 There's a lot of stuff that I've seen over the years and they all work okay, 188 00:11:28,350 --> 00:11:30,460 but none of them are very simple, and 189 00:11:30,460 --> 00:11:35,020 they do tend to add a lot of code to your application or website. 190 00:11:35,020 --> 00:11:37,000 So, what do you do? 191 00:11:37,000 --> 00:11:41,810 Well, there's actually a very simple solution, and it's to use this unit, and 192 00:11:41,810 --> 00:11:46,421 we talked about this earlier in the show, called viewport width, or 193 00:11:46,421 --> 00:11:49,280 viewport height, or vmin or vmax. 194 00:11:50,370 --> 00:11:52,829 And basically what this will do if you have 195 00:11:55,470 --> 00:11:59,830 1vw, this is 1% of the viewport width. 196 00:11:59,830 --> 00:12:03,610 So, this is a number between 1 and 100, 197 00:12:03,610 --> 00:12:09,290 and that's gonna be a percentage of the viewport width and viewport height. 198 00:12:09,290 --> 00:12:14,790 Now, if you set this unit to a font size 199 00:12:14,790 --> 00:12:20,370 of some text, it will take the viewport width, and 200 00:12:20,370 --> 00:12:25,270 apply that to the text as the different responsive sizes change. 201 00:12:25,270 --> 00:12:26,240 So- >> Very clever. 202 00:12:26,240 --> 00:12:27,340 >> What does that look like? 203 00:12:27,340 --> 00:12:31,340 Well, let's take a look at this demo here. 204 00:12:31,340 --> 00:12:36,080 And here is a demo on Codepen, that's linked in the article. 205 00:12:36,080 --> 00:12:39,730 And I want you to check out this text here up at the top. 206 00:12:39,730 --> 00:12:45,300 If you resize the browser, well, the viewport width is changing, 207 00:12:45,300 --> 00:12:49,590 and that unit is based on the viewport width, so it also changes. 208 00:12:49,590 --> 00:12:51,380 >> Did you write that copy? 209 00:12:51,380 --> 00:12:53,670 >> I did not write this copy. 210 00:12:53,670 --> 00:12:55,890 >> So would it be fair to say it's not your type? 211 00:12:55,890 --> 00:12:57,510 >> It's not my type at all. 212 00:13:01,675 --> 00:13:04,730 Anywho, that's all we have time for this week. 213 00:13:04,730 --> 00:13:06,370 I am @nickrp on Twitter. 214 00:13:06,370 --> 00:13:09,850 >> And I am @jseifer, for more information on anything we talked about check out 215 00:13:09,850 --> 00:13:11,710 the show notes right below this video. 216 00:13:11,710 --> 00:13:16,624 Thanks so much for tuning in and we will see you next week. 217 00:13:16,624 --> 00:13:21,226 [MUSIC] 218 00:13:21,226 --> 00:13:24,199 [BLANK_AUDIO]