Episode 124: JavaScript Frameworks, Icons, Text on Images

>> 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 >> In this episode, we'll be talking about icons, performance of popular JavaScript 0:08 frameworks, design considerations with text on images, and more. 0:12 >> Let's check it out. 0:16 [MUSIC] 0:17 First up is Evil Icons, this says it is a simple and 0:22 clean SVG icon pack with the code to support Rails, Sinatra and Node JS. 0:26 I know that because it says it right here on the website. 0:33 So convenient. 0:35 Down here, they have the regular style of icons you can get them in small, 0:37 medium or large sizes. 0:42 I looked at these kinda carefully, and 0:45 I don't really see any differences between these small, medium, and large sizes. 0:46 And that's kinda interesting, because they are SVGs. 0:51 You would expect to see, maybe, differences in the line weight, 0:55 and things of that nature. 1:00 And maybe there is, maybe they're just so well-designed, I'm not noticing it. 1:02 But you can get them in those different sizes. 1:05 Then, of course, it is free and open, and 1:09 I guess the regular style is the only style. 1:12 So you can go ahead [LAUGH] and 1:14 click on Getting Started here, there's a number of ways to get this. 1:16 You can use them with the, the Grunt plugin. 1:21 Gulp is coming soon, and you can install them with Rails using the gem Evil Icons, 1:25 and like it said earlier, it is available through Sinatra as well. 1:32 Anyway pretty cool stuff. 1:37 >> Maybe they're just misunderstood icons and not necessarily evil. 1:39 >> Maybe, it's, it's possible. 1:43 SVG is a really good way to go with icons because of course they're 1:46 infinitely scalable and they have an infinite amount of resolution. 1:50 So these are gonna look good on retina displays and 1:54 high DPI devices as well as devices that are just, I don't know, regular. 1:57 A depth screen, we'll say. 2:04 And you know, they'll look good at all different screen resolutions. 2:07 You can blow them up really big and they'll still look great. 2:10 So, definitely check this out because you do wanna be using SVGs wherever possible. 2:13 >> Was there an icon for tact in that set? 2:20 >> I don't know what you're talking about Jason? 2:24 >> Eye contact. 2:27 [BLANK_AUDIO] 2:27 Next up, 2:31 we have an article on the performance of popular JavaScript frameworks. 2:32 This article takes a look at the specific load times of Angular, 2:36 Backbone and Ember JS. 2:41 Now as we all know, speed matters especially perceived website load speed, 2:44 and that is what this article went into. 2:50 What they did is they took the same application and 2:54 they benchmark the initial load time. 2:58 And when I say the initial load time, 3:01 that means the time it took for the JavaScript framework to get set up and 3:03 load the initial application state, or render start. 3:08 This is the moment in the web page test timeline view 3:14 where the to-do application UI first appears. 3:18 Now, what they're saying is these tests can and 3:22 can't tell us about certain things, and this is just intended to 3:24 establish a best case scenario on initial load and render times for each framework. 3:27 There are a ton of different variables to take into account when you 3:34 are doing benchmarks, and also choosing what framework to use. 3:37 So, what is the TLDR with the average first render time? 3:42 Well, backbone provided a consistent quickest first render. 3:46 Also, it had the smallest script size. 3:52 So, that is the immediate conclusion, but 3:55 remember, there is a lot more to take into account when choosing a framework. 3:58 However, this is interesting, so 4:01 definitely take a little bit more in depth look. 4:03 They have a spreadsheet on there with how they did it and 4:05 they tested it across different devices as well. 4:06 >> So not necessarily an indicator of every application's performance, but 4:09 definitely a good barometer of kinda where their performance might end up. 4:14 >> Exactly. 4:18 >> Very cool stuff. 4:19 Well, next up is an article from CSS-Tricks called 4:20 Design Considerations: Text on Images. 4:23 Of course, putting text on top of images is very, 4:26 very popular, such as in this advertisement for 4:30 Treehouse, and down here they have a couple different ways you can do that. 4:33 So with this method, you might want to tint the image, and 4:37 that's not totally obvious in terms of your run of the mill CSS. 4:43 The way you do it is you use multiple background images, but you can't just use 4:49 any background image because you can't really use a solid color here so 4:54 you actually have to use a linear gradient, 4:57 except your gradation is just from one color to the exact same color. 5:00 And if you drop the opacity on both those colors you'll get something like this, 5:06 and of course, you can tint that any color that you want. 5:09 Now when you combine that with text, you get something like this. 5:14 My suggestion here is to use white text whenever possible, 5:18 in fact that's almost always what you want to use. 5:23 You might be able to get away with a light color, but in general, 5:25 it's hard to put a darker color on top of any kind of photograph. 5:31 There's full-page images. 5:35 So how do you do that? 5:38 Well, in general, you'll set the background, and then the background size 5:39 property to the keyword cover, and that's going to do exactly what it sounds like. 5:44 It's going to cover the page, and it may crop off parts of 5:51 the image depending on the aspect ration of the image and the viewport. 5:56 And if you want this to maintain kinda just the top of the page, you can, 6:02 and then have it sort of go away when you scroll down, so have it be cut off. 6:09 You can do that by setting a height of 100 vh. 6:14 So that will kinda measure the height of the viewport. 6:19 And that's in percentage, so it'll be 100% of the viewport. 6:22 And then when you scroll down, you'll see the rest of the web page. 6:26 You could put text in a box, just like this. 6:30 So in general here, you can kinda 6:34 do a light color text on dark, or the other way around. 6:37 It really doesn't matter because you're not quite as dependent on the image in 6:42 this case. 6:46 And then they also talk about blurring the backgrounds a little bit. 6:47 That's pretty cool. 6:52 One that I really like is what they're calling Floor Fade here. 6:54 And that's where you have that same linear gradient, but 6:57 you're going from top to bottom, and towards the bottom you 7:01 have the gradient a little bit darker than you do towards the top. 7:06 And then you put your text down, and it's a subtle effect I 7:10 believe Facebook does this or at least they did for a little while. 7:13 And you have sort of the darker part of the image down here, 7:17 it's very subtle, you can't really tell that there's necessarily a gradient there, 7:20 but it does make the text a lot more readable. 7:24 >> Kinda makes it pop. 7:28 >> It does. 7:29 It makes the text pop. 7:30 A very cool article. 7:32 This, this is a lot of stuff that I've done from time to time on 7:34 different websites, but I've never thought about it, like, like this. 7:37 It, it's really nice to kinda have it in a big list of all of 7:42 the different ways you can put text on top of an image. 7:45 Really cool, really cool stuff. 7:48 >> Next up, we have a post called the offline cookbook. 7:51 This is an extremely, extremely thorough blog post that talks all about AppCache. 7:56 AppCache gives you the ability to have applications work 8:03 when the browser is offline using service workers. 8:07 >> Oh, AppCache. 8:12 Right, I, I thought that was just like another name for like venture capital. 8:12 You know, gettin' cash to, to start your app idea. 8:16 >> We should trademark that. 8:21 >> Yeah, yeah, AppCache. 8:22 >> But like spell it differently. 8:23 Maybe leave out a letter, or something. 8:25 >> Yeah. 8:26 >> So anyway there are a lot of 8:28 things to take into account when getting your website to work offline. 8:31 And this all works using caching. 8:36 Now, we're gonna take a look at just a couple of these different things because 8:38 there are a ton of different points in the process where you 8:43 might have to cache something and also delete it from the cache. 8:48 Now, what's great about this particular post is, 8:54 it tells you when you would want to use these different methods. 8:57 For example, this one on the installation of an application. 9:02 This is ideal for CSS, images, fonts, JavaScript, and 9:08 templates, basically anything you consider static to that version of your site. 9:13 So, what happens is you go to the site, the service worker goes, 9:18 the install event happens, it reaches out to the network, grabs what it needs, 9:23 put it inside of the cache and then the activate event is fired. 9:29 Now, this is the code that makes that all work. 9:34 This works using promises. 9:38 Now, here is another method. 9:41 You can do this also on installation and not as a dependency. 9:43 This is going to be ideal for bigger resources that 9:47 aren't needed straight away, like assets for the later levels of a game. 9:50 So maybe the earlier levels you fetch initially, and then wait for 9:54 just a couple minutes and 9:58 then get the bigger assets, and it shows you the code right there as well. 10:00 Now there are, like I said, a ton of different scenarios where you 10:06 might want to use these different caches, or even delete the different caches. 10:09 This isn't something that is going to be straight away available to use in 10:14 all browsers, however it should be landing in Chrome in January or 10:19 February of 2015 or 015, as Nick says. 10:22 We'll have a link in the show notes of this article, 10:27 I recommend checking it out if you need to make your web app work offline. 10:29 >> That was so money. 10:33 Next up is an article about responsive type. 10:36 Of course, if you've ever tried to make 10:41 type on a responsive website stretch all the way across. 10:44 >> Haven't we all? 10:48 >> Viewport, it's a little bit tricky to 10:49 do because on some devices it might break in different places, and 10:52 you might get stuff like this where it kinda drops down to the next line. 10:58 And that may or may not be what you want. 11:02 You might want the text to just go all the way across and 11:05 completely fill the viewport, no matter what the size of the device is. 11:07 Well, how do you do that? 11:12 There's a couple of different techniques, and 11:14 most of them rely on setting dozens of break points or using JavaScript. 11:16 There's a lot of stuff that I've seen over the years and they all work okay, 11:23 but none of them are very simple, and 11:28 they do tend to add a lot of code to your application or website. 11:30 So, what do you do? 11:35 Well, there's actually a very simple solution, and it's to use this unit, and 11:37 we talked about this earlier in the show, called viewport width, or 11:41 viewport height, or vmin or vmax. 11:46 And basically what this will do if you have 11:50 1vw, this is 1% of the viewport width. 11:55 So, this is a number between 1 and 100, 11:59 and that's gonna be a percentage of the viewport width and viewport height. 12:03 Now, if you set this unit to a font size 12:09 of some text, it will take the viewport width, and 12:14 apply that to the text as the different responsive sizes change. 12:20 So- >> Very clever. 12:25 >> What does that look like? 12:26 Well, let's take a look at this demo here. 12:27 And here is a demo on Codepen, that's linked in the article. 12:31 And I want you to check out this text here up at the top. 12:36 If you resize the browser, well, the viewport width is changing, 12:39 and that unit is based on the viewport width, so it also changes. 12:45 >> Did you write that copy? 12:49 >> I did not write this copy. 12:51 >> So would it be fair to say it's not your type? 12:53 >> It's not my type at all. 12:55 Anywho, that's all we have time for this week. 13:01 I am @nickrp on Twitter. 13:04 >> And I am @jseifer, for more information on anything we talked about check out 13:06 the show notes right below this video. 13:09 Thanks so much for tuning in and we will see you next week. 13:11 [MUSIC] 13:16 [BLANK_AUDIO] 13:21

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

Sign up