Episode 65: Contrast Ratio, Favicons, Offline Web Apps

I'm Nick Pettit. >> I'm Jason Seifer. 0:00 >> And you're watching The Treehouse Show, your weekly dose of internets, 0:02 where we talk about all things web design, web development and more. 0:04 >> In this episode we'll be talking about 0:08 contrast ratio, favicons, offline web apps and more. 0:09 >> Let's check it out. 0:14 [MUSIC] 0:15 First up is a tool called contrast ratio. 0:20 Now if you're building a website and you're wondering if whether or not your 0:24 text contrasts against your background then this 0:28 is probably the tool you want to use. 0:30 >> So you're saying you shouldn't use 0:32 light grey text on a light grey background. 0:33 >> Probably not it's not going to be very legible. 0:36 >> Hmm, but what if you're just trying to trick your users into squinting. 0:38 That would be actually pretty terrible. 0:42 So, here we have a background, and it's set to white. 0:45 That's over on the left side here, and over on the 0:49 right, we have the text color, and that's using an HSLA value. 0:52 That's set to black, and it's slightly transparent. 0:57 So that's the text that you see. Over here. 1:02 Now in the middle we have, this number 8.6, and that's a rating according 1:05 to the WCAG 2.0 guidelines. >> What does that stand for? 1:11 >> That stands for web content accessibility guidelines. 1:15 Yep. 1:20 And if we go ahead and change this color, so I'm going to, set 1:21 the background to green here, and we'll change this 1:26 color over here to orange, it's going to give me a pretty terrible rating, 1:31 it's gonna say this actually fails WCAG, and it gives me a sad face there. 1:36 >> Yeah that, that fails a lot of things. 1:41 >> But. 1:43 If I were to reset this, and set the 1:44 background color to white and the text color to black, we'll get a really high 1:49 rating here, and we'll say this passes AAA level for any size text. 1:54 So it has good contrast. 2:00 So, pretty nifty tool. 2:02 And good for testing whether or not you have enough contrast with your text. 2:03 >> Yeah, that's, that's really useful. 2:07 >> Hm. >> Especially, you know? 2:09 In case you need to be told not to have a green background and orange text. 2:10 >> Just in case. >> Right. 2:13 Next up, we have something called the real Favicon Generator. 2:16 Now, this is a really nice site where you 2:20 can input your current website, and it will tell you. 2:22 How your favicon looks, and also give you different code 2:25 to put into your site. >> Wow, for real? 2:27 >> Yeah. 2:30 It'll also give you different ratings, to see if it works 2:30 well on Android browsers, or Windows mobile phones, things like that. 2:33 >> Really? >> Yeah. 2:37 >> Wow. 2:38 >> So, gotta, gotta little demo here. You can either submit your favicon. 2:38 It'll Generate the different ones for you. 2:42 Or you can check your existing Favicon. I'll just enter cnn.com right here. 2:45 And okay so I gave it cnn.com to 2:50 check the different Favicon. And said hey, alright great. 2:53 The overview is yeah it looks great on desktop. 2:57 Yeah looks great on IOS. 2:59 Yeah looks fine on some cases on Windows 8. 3:01 But uh-oh, This is not well designed for Android. 3:03 So then it goes through and it kinda grades you and tells you what's going on. 3:08 You know, obviously green means it's good. 3:11 Red, hey you need a little bit of work on here. 3:13 And it will give you suggestions saying 3:15 hey upload this size picture and even more suggestions for different PNG sizes. 3:18 Then it also breaks down with IOS sizes. 3:24 As well as Windows 8, and boy it doesn't have the 3:27 Android on here, but it can make some optimizations for that too. 3:31 Anyway, check it out. 3:37 We'll have a link to that in the show notes, 3:38 which you can get to at youtube.com/gotreehouse or search for us 3:40 in iTunes at The Treehouse Show. 3:43 That is wonderful, well next up is ion icons and 3:46 if you like icon fonts you're going to love this. 3:49 >> I love icon fonts. >> It's an icon font. 3:52 Now it says the premium icon font for ionic framework now what the heck is that? 3:54 If you click through, it's actually a 3:59 framework that's coming soon, fall of 2013. 4:01 Not much time left. And it's going to 4:05 be a bunk between HTML-5 and native apps and you can go ahead and sign up. 4:08 With your email address to get notified. 4:13 However, these icons are already available, and as Andrew Chalkley 4:16 said, this is the fam fam fam of our time. 4:20 Fam fam fam, of course, being a popular icon set of yesteryear. 4:23 But these are the new ones, and they're super flat. 4:28 And if we scroll down here you can see 4:31 that a lot of these look very much like icons like you might find in IOS 7. 4:33 So of course if this is gonna be the bond between HTML 4:39 5 and native apps, you definitely need to use some of those. 4:42 If we scroll down further, you can see all the typical things that you would expect. 4:46 And, got some play buttons here, got some social icons, 4:50 all that good stuff, it's a pretty good icon font, 4:54 it seems like it's pretty comprehensive, so, definitely be sure to check it out. 4:58 >> Huh, I guess you could say you could keep your eye on it. 5:02 That's a good one, Jason. >> Get it? 5:06 Cuz it's called [INAUDIBLE]. >> Yeah, I think we got it. 5:07 >> Next up we have a really handy 5:10 table here for equality in JavaScript with zeros. 5:13 >> So if you're ever laying in bed one night 5:18 and you're like, man I really can't figure out if null 5:20 is equal to zero in JavaScript. You can just go right to this website. 5:24 >> Yeah. 5:29 >> And figure it out. 5:29 >> And I'm sorry I didn't send this to you yesterday. 5:30 >> Yeah. 5:32 >> It's weird cuz he was telling me about how he couldn't 5:33 go to sleep, because he couldn't think about the quality of zeroes. 5:36 >> So, so tired today. 5:39 >> JavaScript. 5:40 Anyway, no, so [LAUGH] this is a, this is a nice 5:41 site where Surprisingly, Javascript equality can be a little bit strange. 5:43 like, if we take a look at the site, they have the number zero. 5:48 And is that equal to zero? 5:53 Well, yes, this chart says it's true. 5:55 Is also equal to the string zero. The array with the only element 5:58 zero, An empty array but not an object [UNKNOWN]. 6:03 So, if you are confused about why some value in JavaScript is may 6:08 be returning something strange, you might have 6:13 run into one of these different scenarios, 6:15 and you should look it up on here just to see what's going on. 6:18 Now, it's not just a quality, they also have it for triple equal sign which is 6:21 quality and the same object And it also works for addition and multiplication. 6:26 So, anyway this is a really, really handy chart. 6:33 Next time you're programming a web app in JavaScript, 6:36 refer to it in case you're getting 6:39 some strange behavior that you can't figure out. 6:40 You might have hit one of these weird little edge cases. 6:42 >> Hm, that's a really handy reference. 6:44 Or you can just read it for fun after 6:47 you're done with the phone book or the dictionary. 6:48 >> Yeah, if you have enough time. 6:51 >> Hm, really nice stuff. Alright, well next up is. 6:53 >> We're really nailing the jokes today. 6:56 >> Next up is a blog post from Ethan Marcotte. 6:58 I still don't know how to pronounce his last name. 7:03 It's Marcot or Marcot I'm really sorry. 7:04 But anyways, it's a blog post from Ethan, leave it at that. 7:09 And Ethan of course, is the creator of responsive web design, which is a 7:12 technique that allows you to create web pages that work on a variety of. 7:17 Different screen resolutions. 7:22 Now that's actually what the blog post is about. 7:24 There's been a little bit of controversy in the 7:27 web design world recently. Luke. 7:29 Another difficult last name. 7:33 [UNKNOWN] I believe is how you say it, wrote a blog post. 7:34 And he's basically saying that he thinks people have become too dependent 7:39 On screen sizes or the, the width of the screen 7:44 for determining other functionality, such as touch capabilities. 7:49 Ethan says, you know, of course you shouldn't 7:55 determine other functionality based on the screen resolution. 7:57 And, he makes a point here where he says, 8:01 you know, rather than seeing that as a hindrance. 8:04 He sees the screen resolution as being a foundation for building up other things. 8:07 So instead of seeing it as, you know a drawback. 8:14 He really sees it as 8:19 a way to actually start your design. 8:20 You know, you start your design with The screen, 8:24 and then as other things become available to us. 8:27 Later on with the new standards that are upcoming. 8:31 I think there's. 8:34 I'm trying to think of the name of it. 8:35 It's a W3C standard and he did link to it in here. 8:36 It's the net info API. 8:39 So as other things like that become available and new capabilities become 8:42 available on hardware devices It might be okay to do 8:45 that later on, but I think he's very right in 8:48 stating that we really should stick to responsive web design 8:51 as being a tool for web designing for a screen. 8:56 Because that's really the, the common 8:59 thread amongst all of these different devices. 9:01 >> Yeah. 9:04 And you know when you get to the point where 9:05 you need to add different behavior and things like that. 9:06 You can use a polyfil, 9:09 you know, if you don't wanna rely on touch. 9:11 Use a polyfil that we've talked about on previous episodes of this show. 9:12 Or we'll say, hey, if touch is available use that. 9:15 If not, go ahead and fall back to the click handlers or somethin' like that. 9:17 >> Exactly. 9:21 You're saying that a small screen doesn't necessarily mean it's a touch device. 9:21 >> Yeah. Maybe someone just resized their browser. 9:25 >> Exactly. 9:27 >> I mean I, sometimes I browse the web with my browser that big. 9:28 It's just. >> Yeah. 9:30 >> It's not a statement. It's just sometimes that's [INAUDIBLE]. 9:31 >> Yeah, instead of using browser tabs, that's usually what I do. 9:33 I just have like 9:35 Eight really skinny browsers across, across the screen. 9:36 >> Yeah, yeah, yeah. 9:39 >> Love browsing the web that way. >> Huh. 9:40 [LAUGH] Next up we have a project called Offline. 9:42 This is a JavaScript library from Hubspot that makes 9:47 handling offline interactions with your web apps much easier. 9:50 Now, one thing that's interesting about, you know, where we are today, 9:54 you can have a web app that handles a whole bunch of data. 9:56 You know, you're posting to 9:59 a server, getting things back right on the page without leaving it. 10:01 You know, maybe it's heavy into AJAX, 10:04 maybe it's using WebSockets, something like that. 10:05 Now, what this library does is, 10:08 it'll monitor the connectivity of your application. 10:09 Goes offline. 10:13 It can display a message to somebody. 10:14 And you can decide how you hand, wanna handle it at that point. 10:16 Now, as you expect [UNKNOWN] from basically everything that we 10:19 cover on here, it is very, very simple to use. 10:22 You can see 10:25 if the step, if the connection is available immediately, you 10:26 can intercept requests, specify how long of a delay you want. 10:29 And then you can say, hey what should we do when we are online, what happens when 10:33 we're reconnecting, what happens when we're reconnected and you 10:38 can also intercept AJAX requests if you want to. 10:41 Anyway this is a really, really handy 10:44 library and something that you should be using. 10:46 In your web applications you can't always assume that people are 10:48 going to be connected this day and age. 10:51 So yeah, just check that out, offline.js, you'll 10:54 find a link to it in the show notes. 10:56 >> You know that reminds me that the FAA recently decided that we can 10:57 go ahead and leave electronic devices on, while we're in any phase of flight. 11:01 >> Oh, good. 11:07 >> So if you know, the person is using your web app maybe, their on 11:08 their Or on the runway, and as they take off, they're just like totally zoned out. 11:12 And it disconnects from the internet. But that might be a perfect use for it. 11:17 >> The, yeah. There you go. 11:22 >> Yeah. 11:23 Well, next up is Snazzy Maps, and recently 11:24 Google just released The 3.0 version of their 11:28 Google Maps Javascript API, and in that, you 11:33 can actually apply different colors to the maps. 11:36 Snazzy Maps is basically just a set of themes or different 11:38 color schemes that you can apply to your maps. 11:43 Now, there's a lot of different colors on a map that you need to set, so 11:45 this is actually pretty nice, because It has 11:49 all those colors set and adjusted for you. 11:52 And as we discussed earlier contrast on any of these is 11:55 very important, so it's nice that that's already done for you. 11:59 And look at that, whoa! 12:02 I can actually drag these around and see 12:03 what different parts of the world look like. 12:05 >> Wow. 12:07 In any one 12:07 of these themes. 12:08 Not much to say about it, but it is pretty nice that a lot of these themes are 12:09 already made available to you so definitely be sure 12:13 to check that out if you're working with Google maps. 12:16 >> Yeah. 12:18 Well I think that about wraps it up for today. 12:19 Nick, who are you on Twitter? 12:20 >> I'm @nickrp. >> And I'm @jseifer. 12:21 If you want anymore information On anything we talked about, 12:23 be sure to check out our show notes at youtube.com/gotreehouse. 12:26 Or search for us at iTunes at the Treehouse Show. 12:29 >> And, of course, 12:32 if you'd like to see videos that are even better than this one, hard to imagine. 12:33 >> Go anywhere else on the internet. 12:37 [LAUGH] 12:39 >> Or, if you want to learn more about web design, web development, 12:40 business, mobile, and so much more, be sure to check us out at TeamTreeHouse.com. 12:43 Thanks so much for watching, and we hope to see you next week. 12:48 [MUSIC] 12:52 >> I like your face. >> I like your face. 12:59

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

Sign up