Episode 113: API Responses, Font Compression, Tab Styles

I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:01 >> And, you're watching the Treehouse show, your weekly dose of internet where 0:02 we talk about all things web design, web development, and more. 0:05 >> For a free month's trial of Treehouse, head on over to teamtreehouse.com/show. 0:08 In this episode we'll be talking about API responses, responsive images, 0:13 font compression, and more. 0:19 >> Let's check it out. 0:21 [MUSIC] 0:22 First up, we'll be talking about a project called DataCollection.js. 0:27 This is a JavaScript library for manipulating data from API responses. 0:32 Now, you may occasionally run into a situation where you return a bunch of 0:39 data from a server. 0:43 Maybe it's through Ajax, or you're getting Jason, or something like that. 0:45 So, you may want to transform all of that data in a certain way. 0:50 Let's say, for example, we have a list of characters, that comes back. 0:55 Let's say it's a movie or something like that. 1:00 And. we want to sort them by age. 1:02 or find out the max age of one of the characters. 1:04 or sort them by last name. 1:07 or something like that. 1:08 Well, we can use a data collection. 1:09 And, then sort and filter based on that. 1:13 Now, here is an example. 1:16 If we wanna find the top age, we could say this chart object that we have, 1:18 and we query it, and we look for the max age. 1:22 Same thing, if we wanna look for unique locations, 1:26 we have this wonderful little query language that filters using JavaScript. 1:30 Now, there are tons of different options that you can use here. 1:35 You can filter it to find a certain gender, or 1:39 even an age less than or equal to 40. 1:43 Now, if we scroll down here, we can see all of the different methods that we have. 1:47 You can define different indexes depending on what data you'll be querying. 1:54 And, if you want to know how to do all of the different queries, 1:58 that is unfortunately all the way at the bottom here. 2:01 Here we go, the different filters. 2:05 So, the is filter, make sure that a certain attribute is certain. 2:07 So, let's say we want to find all the characters whose age is 30, 2:12 or not equal to something. 2:14 We also have filters for greater than, greater than or 2:17 equal to, as well as less than, and less than or equal to. 2:20 There's also a contains filter, so 2:23 we can see if a certainly element contains a certain value. 2:26 This works on strings or arrays. 2:30 And, it also has an equivalent that is case insensitive. 2:32 This only works for string comparisons. 2:37 Now this is pretty easy to use and it's a great little tool. 2:41 So, check it out in the show notes which you can get to at YouTube.com/gotreehouse. 2:45 And, also search for us on iTunes, we are the Tree House Show. 2:49 >> Very nice. Well, 2:53 next up is an article over on the Opera Developer Blog, 2:53 called Native Responsive Images. 2:58 Now, if you've done any kind of responsive design, 3:01 you've probably dealt with responsive images, in some form or another. 3:04 Maybe you've set them to be a fluid width, so 3:08 that they fill up their container and just set their size to 100%, and so on. 3:12 This article goes into a lot of depth about the quest for 3:18 native responsive images. 3:23 In other words, some sort of element that we can use on webpages that's 3:25 like the image element, but actually serves up the correct asset, depending on 3:30 the size of the screen, or how many pixels there are, and so on. 3:36 And, up to this point we've pretty much been either serving just one resource, 3:41 so we've been serving up the same image for all different sizes. 3:47 Or, you might have a situation where you have to serve multiple images. 3:51 Bu,t those images actually get loaded up on every device, no matter what the size. 3:56 Both situations aren't that great. 4:02 Now, this is, like I said, a very in-depth article that I'm 4:04 gonna scroll down to the bottom here, that says, can I use it today? 4:09 And, it's actually talking about, for the most part, the picture element, but 4:14 also the source set attribute, which allows you to use multiple images. 4:19 Now, the source set is already supported in browsers since Chrome 34, 4:24 Opera 21, and it will be supported in Safari 8. 4:30 However, the picture element which is a little bit more interesting for a couple 4:34 of reasons, it's going to be shipped in a few weeks from the time of this recording. 4:40 So, you might actually already have it by the time you're watching this. 4:47 It will be shipped in Chrome 38, Opera 25, and Firefox 33. 4:50 So, be sure to pay attention to that, 4:56 because the picture element will probably play an important role in the future. 4:59 Now, as for Internet Explorer, 5:04 of course, historically, Internet Explorer has lagged behind on some things. 5:06 They've been ahead on others. 5:11 But, it's not in Internet Explorer in this point, it's under consideration. 5:13 So, the IE development team, however, has, seem to be pretty receptive to this, 5:20 so it's anticipated that it will change to end development shortly, or, 5:26 at least, hopefully. 5:31 So anyway, this is a really in-depth article basically chronicling the whole 5:33 story of native responsive images, and it's really worth the read because a lot 5:38 has been going on in a very short amount of time in this particular space. 5:43 And, if you haven't been paying attention, this is a good way to get all caught up. 5:48 >> It's cool that, browser vendors are being you know, 5:52 so on top of supporting that stuff. 5:55 >> They are. 5:57 It's, it's good because it's important. 5:58 I mean, there's this huge proliferation of devices everywhere and, yeah, 6:00 it's hard to get responsive images onto all of them. 6:06 >> I guess you could say the browser vendors are being very responsive. 6:08 >> They are. 6:12 >> Next up, we have an article on the Lickety Split blog about optimizing your 6:14 font downloads when you are using Twitter Bootstrap and Font-Awesome. 6:19 So, this actually doesn't apply only to Font-Awesome and Bootstrap. 6:25 But, did you know, that by default, 6:30 some Apache installations do not compress font files by default. 6:33 >> What? 6:40 >> Yeah. 6:41 So, you can actually turn on HTTP compression and gzipping. 6:41 It's only a few lines if you have certain mods installed, 6:46 like mod-deflate, and here is an example demonstration. 6:50 We've got, all right, font-awesome in here, and bootstrap in here. 6:55 Then without any compression going on, this is the download, 6:58 it's 540 k, optimized it's 207 k. 7:05 That is a 62% savings or 330 k, just for 7:10 a very, very small change to your Apache configuration. 7:15 Now, this is also this also works with Nginx and 7:21 the trick is adding SVGs and font files to the default compression. 7:24 Now, here would be the configuration code that you use. 7:30 Add output filters. 7:34 Here's the regular text, HTML, CSS, and JavaScript. 7:36 You can just go ahead and add in SVG and XML, and different fonts. 7:39 And, then boom, you are good to go. 7:44 Another good thing to install is mod page speed, which will do some of those things 7:47 for you, and there are also equivalents in Nginx and IIS. 7:51 So, go ahead and check that out. 7:57 We'll have a link up in the show notes, and also, don't forget to join us for 7:58 a free month's trial of TreeHouse at teamtreehouse.com/show. 8:02 >> Very nice stuff. 8:08 Well, next up is a wonderful blog post over on the codrops blog 8:08 called Tab Styles Inspiration. 8:13 Now, if you want to learn how all of these different tabs work, and 8:16 sort of what the thinking behind them was, you can maybe check out the blog post. 8:22 But, that's boring, let's actually look at the demo. 8:26 So, here is one style of tabs. 8:30 That's pretty cool. 8:34 Here's another style. 8:36 So, you can actually click on these, and it will change what's down here. 8:37 Normally, that would be maybe a full webpage, so that's cool. 8:42 Here's another style if you want to kinda underline things, 8:45 have a little bit of animation here. 8:49 Here's another one. 8:50 Here's one where the tabs are sort of on the top. 8:54 Anyway, thought this was a really cool post. 8:59 Not a whole lot to say about it, but 9:03 I thought there were a ton of really wonderful tab styles here that- 9:05 >> Ooh, look at that. 9:10 >> Are a lot different than some of the more traditional things that you've seen. 9:11 So, maybe you wanna, so maybe you want to rip off CSS tricks here, and 9:16 have some tabs exactly like Chris Quarles website. 9:20 Here's exactly how to do them. 9:24 And, you can download the source code from the article, and 9:26 that is, of course, included in the show notes, a link to that. 9:31 >> Very nice. 9:36 Let's let's tab on over to the next tab, tab. 9:36 {LAUGH]. 9:42 >> We're gonna be talking about advanced objects in JavaScript. 9:43 Now, there are a ton of different ways to create objects in JavaScript. 9:46 And, in this extremely thorough blog post they are demonstrated. 9:49 Now, this goes from very, very simple, to just creating a function, 9:55 to create a JavaScript object, and then using the prototype property to create it. 10:00 And, then return a new one and then, all right, we have a new product, and 10:06 we're setting the type to Apple. 10:10 And, then we can call product dot type, and we see Apple printed to the screen. 10:12 Now, there are tons and tons of ways to do this, and 10:17 this blog post gets more advanced with how you actually go through and 10:22 create these different JavaScript objects. 10:26 So, the one was a setter, now we can go through and define a getter. 10:28 Instead of calling prototype later, 10:33 we can actually define it to its own function here. 10:35 And, then the getter will be the different type, and the setter as well. 10:40 We defined getter and setter earlier. 10:44 Now, this walks through with defining properties, 10:47 instead of just doing prototypes. 10:51 We can use object.define property to the prototype of product, and so 10:53 on and so forth. 10:58 Now, this gets extremely complicated, but 10:59 is also a very, very in-depth guide to creating advanced objects in JavaScript. 11:02 Now, you'll see a lot of JavaScript libraries will do various forms of object 11:07 manipulation and creation, different classes, libraries for classes. 11:12 I know CoffeeScript does it a certain way. 11:17 And, if you want some background into how some of these libraries will create these 11:18 advanced objects, I definitely recommend checking out this article. 11:22 And, that is about all we have time for this week. 11:26 Who are you on Twitter, Nick? 11:28 >> I am @nickrp. 11:29 >> And I am @jseifer. 11:30 For more information on anything we talked about, 11:31 check out our show notes at youtube.com/gotreehouse. 11:33 You can also get us on iTunes. 11:36 We are the Treehouse Show, and please rate us. 11:37 And, of course, if you'd like to see more videos like this one about web design, 11:39 web development, mobile business and so much more, be sure to check us out at 11:43 teamtreehouse.com/show to get a free month of Treehouse. 11:47 Thank you so much for watching, and we will see you next week. 11:54 [MUSIC] 11:57