Episode 112: Icons, Responsive Images, Timesheets

I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:01 >> And, you're watching The Treehouse Show, your weekly dose of 0:02 internet where we talk about all things web design, web development, and more. 0:04 >> For a free month trial of Treehouse, check us out at teamtreehouse.com/show. 0:08 In this episode, 0:14 we'll be talking about icons, responsive images, time sheets, and more. 0:15 >> Let's check it out. 0:20 [MUSIC] 0:21 First up, we have this great article over on CSS tricks titled Favicons, 0:26 Touch Icons, Tile Icons, etc. 0:32 What all do you need? 0:35 That's a very good question and in fact, 0:37 this article is formatted in the form of questions and answers. 0:40 It's pretty cool. 0:45 I'll get to that in a second, though. 0:46 Basically, a Favicon or sometimes pronounced Fave icon, is short for 0:48 Favorite Icon and it was introduced in 1999 by Internet Explorer 5. 0:54 >> The trend setting browser. 0:59 >> And, it was standardized by the W3C a few months later. 1:01 And, they're basically small graphics that represent the website. 1:07 So, you see them here in various browsers on a Mac, and 1:11 that's sort of what they end up looking like. 1:15 Since then, 1:19 most desktop browsers have followed the trend and used Favicon's in some way. 1:20 I know that, because it says it right here, and the internet can't lie. 1:25 >> That is very true. 1:29 Right here, we have a bunch of questions and answers. 1:32 And, I thought this was pretty cool only because favicons are sort of 1:35 this weird and sometimes mysterious file format that's not 1:39 really as well understood as it should be by most web designers and developers. 1:44 And, most people don't really know how to use them properly, so 1:49 there's a lot of misinformation out there about what is true and what is not. 1:53 First question is what is the primary favicon file? 1:58 Well, it's favicon.ico and just to make sure that is not a png image. 2:01 That's just renamed. 2:09 It's actually a different file format. 2:10 Next question is what dimensions should a favicon be? 2:13 >> Three dimensions. 2:18 >> Well, that's actually almost correct because there's a couple of 2:19 different dimensions listed out here and then None of the above and 2:23 the an, answer actually is None of the above. 2:26 And, that's because. 2:30 And, favicom can actually contain multiple graphics, so 2:32 three dimensions was almost right Jason. 2:36 You're, you're doing good. 2:38 I'm going to give you half credit for that one, so half of a gold star. 2:39 Question, what is the purpose of a favicom.png? 2:43 And, the answer is it's complicated, just like in Jason's status on Facebook. 2:48 Anyway, there's a bunch more questions here. 2:55 It's really kind of a cool way to format a blog post because, again, like I said, 2:57 there's a lot of misinformation about. 3:01 How favicons should be used. 3:03 How they should be formatted. 3:05 So, it's a good way to test your own knowledge and actually go through each 3:07 quiz question and say, you know, what do I really know about favicons. 3:11 And, perhaps, you might be surprised. 3:16 There's a couple of interesting answers in there. 3:19 >> Is it complicated, Nick? 3:21 All right, it's not simple. 3:24 >> We're fine. 3:27 Next up, we have project called FocusPoint. 3:28 jQuery FocusPoint. 3:31 This is a plugin for, I don't wanna say responsive images, but 3:33 it's for responsive cropping. 3:37 So, this plug-in will dynamically crop images to 3:40 fill available space without cutting out the image's subject. 3:43 Now, what in the world does that mean? 3:48 Well, let's say you have this particular image. 3:50 This is two people in the rain, and when you re-size the browser, 3:53 if you are trying to use responsive images, well. 3:59 You might not get the focus point of the image in the frame, but if you use 4:02 FocusPoint, you can get there faces rather than their mid sections in the frame. 4:09 >> Hm, I feel like that, that happens to me all of the time on my Facebook or 4:12 Twitter when I post an image and it crops the wrong part of it. 4:16 That's pretty interesting. 4:19 >> Yeah, Facebook could be using this plugin. 4:20 >> Yeah. >> The only drawback would be you have to 4:23 actually set the focus point yourself. 4:25 So here, let's go ahead and check out this, this full screen demo, right. 4:28 There's this picture of a lizard right here. 4:32 Now, if I, if I go out of full screen and I start to resize my browser. 4:34 You can see as the browser is resized, the lizards head 4:39 stays in focus rather than being cropped to some sort of strange dimension. 4:44 So, if we go back to the code well you do have to calculate your images focus point 4:51 and once you do and include the java script and css. 4:56 You have to create a container for it. 5:01 And then, using data attributes, which you give it a focus on the x and 5:03 y coordinates. 5:07 And then, put in your images width and height and 5:08 also in data attributes below that put in your image. 5:12 And then, all you have to do is call the focus point method and you are good to go. 5:16 Now, automatically images are refocused when the window is resized, but 5:23 you can turn that off if you want to, 5:28 and you can also change how often images are refocused when the window is resized. 5:31 You know, maybe in case you wanna improve performance, and it may or may not matter. 5:37 Should you encounter a scenario where you wanna recalculate the focus automatically, 5:42 you can call the adjustFocus method, and that is it. 5:47 So really cool plugin. 5:51 Very, very easy to use. 5:52 If you wanna check it out, it is in the show notes at youtube.com/gotreehouse. 5:53 You can also search for us on iTunes. 5:57 We are The Treehouse Show. 5:59 And, make sure to join us for a 30-day free trial at teamtreehouse.com/show. 6:01 Very nice stuff. 6:07 But, that's a pretty interesting plug in. 6:08 I'm sure I would do it for every single image on my site, but maybe if you 6:10 were creating a marketing page, and you had this nice big hero image, 6:15 you wanted to make sure it still looked good at various sizes, would be a good. 6:19 >> Yeah. 6:22 Use for that. 6:23 Anyway, pretty cool. 6:24 Next up is a wonderful article over on the Codrops blog called 6:25 Making SVGs Responsive with CSS. 6:31 Now, basically, there's a lot of different ways to embed an SVG into a page. 6:35 You could use HTML5 and inline it with the svg tag. 6:43 The other commonly used techniques are to use the image tag to use the object tag, 6:48 you could even put it into an iframe and use it as a CSS background image. 6:54 So, there's a couple different techniques there and the thing about SVGs is that 7:00 there isn't really one single technique that's gonna work perfectly and 7:06 responsibly on every single browser. 7:11 And, that's exactly what this article is all about. 7:14 Now, I'm going to go ahead and scroll down the page here to demo. 7:18 Actually, let me just go ahead and find it. 7:25 There we go. 7:28 And, it shows all of the various ways that you can embed an SVG on the page. 7:31 Now, there's another interesting part of this article, and it basically 7:38 describes how to change an SVG as the size of the browser changes. 7:44 So, not only would you want to actually resize an image, or 7:49 in this case an SVG, but you may actually want to change what it looks like because. 7:55 There's some pretty fine text on this particular SVG and 8:01 I'm not sure you could make this much smaller and still have the text legible. 8:05 So, you might wanna actually lose the text at smaller sizes. 8:09 Well, how would you do that and what would it look like? 8:13 Here is that particular demo adaptive SVGs with media queries and 8:17 I'm gonna come out of full screen here just so I can resize this. 8:21 So, I'll resize my browser here and look at that. 8:25 Check that out. 8:30 So, it actually changes. 8:30 >> Wow. 8:32 >> To something that looks like that. 8:33 So, text is still pretty legible there. 8:35 >> And, there's your desktop folder. 8:37 >> And then, it changes once again. 8:39 Yes, that is my desktop folder. 8:41 And, if you get a little bit smaller I don't think we can. 8:43 I think it changes one more time, but the way that this is 8:47 happening is media queries are actually on the SVG itself. 8:50 And, these are not separate SVGs. 8:56 It's actually just filling and drawing the SVG slightly differently every time. 8:59 So, it's maybe filling in this particular area with a different color and 9:06 you're actually just seeing the same SVG just colored differently. 9:13 And, that's a pretty clever use of resources because when you're loading 9:16 a page, of course, you want to try to keep the page wait as low as possible, and 9:20 you don't want to load in a ton of different SVGs. 9:25 So, this is a great way to just load in one SVG and 9:28 have it work for multiple screen resolutions. 9:33 Thought that was a pretty good idea. 9:35 >> Very nice. >> Mm-hm. 9:37 >> Next up, we have a project called timesheet.js. 9:38 Now, as you might expect from the name this is a project that let's you 9:41 generate timesheets on your webpage. 9:44 Now, what's really cool about timesheet.js is it has absolutely no dependencies. 9:47 This is just pure javascript, so you don't 9:53 need J Query you don't need Angular JS all you need is time sheet dot JS. 9:56 Simply include this script, give it an array of different times and 10:01 boom you get this nice little time sheet right here. 10:07 Now, you can see if we look at the data down here in from 2002, 10:11 to September 2002, we had a freaking awesome time. 10:17 And, that is represented by this green bar right here. 10:22 This is all generated using an array of different dates and times. 10:25 Now, if you wanna check out the code. 10:30 You can hit the fork me on get hub button. 10:31 And, you can see in the source there is just not a ton to this. 10:35 It is very, very simple, if you want to go through and read and 10:39 see how they did that. 10:42 Now, if you're saying, 10:43 hey, I want to customize how this looks, well, the SAS is included. 10:45 You can change the timesheet classes and 10:49 the different bubbles to be the different colors that you want. 10:53 Anyway, this is a really cool project. 10:58 Not too much to say about it. 11:00 Very, very easy to use and 11:01 very easy to get started with if you wanna customize it. 11:04 So, go ahead and check that out in the Show Notes. 11:06 Very cool, well next up is CSS guidelines. 11:09 I know that because it says it right here on the webpage. 11:14 >> Ooh. >> Basically, this is a. 11:17 >> That is invalid CSS, I'm pretty sure. 11:19 >> Yes, it is. 11:21 That's not an actual CSS property, or value, or 11:22 a selector, but it does look pretty nice on the page. 11:26 >> Should be squiggled red. 11:30 >> Right here, it says CSS guidelines is a document by me, Harry Roberts, 11:31 that's not me. 11:37 I am a Consultant Front-End Architect from the UK, and he's available for 11:38 hire, so you can go ahead and, and hire Harry right there, but this. 11:42 >> Harry didn't pay us to say that by the way. 11:46 >> No, no. 11:48 >> We just will read literally anything on the webpage. 11:49 >> We will read it and 11:50 assume it's the truth because it's the Internet, and it's not wrong, so. 11:52 >> Never been wrong for me. 11:58 >> This is a style guide, 11:59 and I think a good place to start with this is what is a style guide. 12:02 Well, a code, a coding style guide, note, not a visual style guide is 12:06 a valuable tool for teams that maybe need to build and 12:12 maintain projects for a reasonable length of time. 12:17 Or maybe, you have a lot of new staff that comes onboard regularly, anyway, 12:20 it's basically a way to keep teams in sync. 12:26 And, make sure that everybody is writing clean in a maintainable carrier that 12:29 people will be able to understand, whether they're new or whether they're 12:33 coming on to a project that they haven't worked on before and so on. 12:37 And, it starts out with syntax and formatting. 12:41 So, very granular and basic stuff. 12:44 In this particular style guide it says you want to use four spaces and no tabs, 12:47 80 character wide columns, multi-line CSS, meaningful use of white space and so on. 12:52 It explains how multiple files should be used and I thought this was pretty cool. 12:58 Maybe, having a Table of Contents in your CSS, as a comment that actually 13:03 explains what each folder is and what each CSS file is. 13:08 Anyway, this is a pretty large style guide. 13:14 And, you could of course create your own style guide, if you wanted to. 13:16 But, if you don't have that kind of time and you just wanna go ahead and 13:20 use a pre-built CSS style guide, this is a, pretty good one to use. 13:24 >> Yeah, there's. >> So, just go ahead and pick it up. 13:29 >> There's lot of style guides for many different programming languages. 13:31 And, very, very useful, just to keep everybody on the same page. 13:33 >> That is correct. 13:37 Anyway, that's all we have time for. 13:38 I am @nickrp on Twitter. 13:40 >> And, I am @jseifer. 13:42 For more information on anything we talked about, 13:43 check out our show notes at youtube.com/gotreehouse. 13:45 You can also find us on iTunes. 13:49 We are The Treehouse Show and please don't forget to rate us. 13:50 >> And, of course, if you'd like to see more videos like this one about web 13:54 design, web development, mobile business, and so much more, be sure to check us out 13:56 at teamtreehouse.com/show for a free month of Treehouse. 14:01 Thank you so much for watching, and we will see you next week. 14:07 [MUSIC] 14:10

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

Sign up