Episode 144: WebP, Static Maps, Watermarks

I'm Nick Petit. 0:00 >> I'm Jason Seifer. 0:00 >> And you're watching the treehouse show. 0:01 Your weekly dose of internets. 0:03 Where we talk about all things web design, web developement, and more. 0:04 >> In this episode, we'll be talking about type face differences, 0:07 static maps, water marks, and more. 0:10 >> Let's check it out. 0:13 [MUSIC] 0:14 First up is a tool called Tiff. 0:19 This is a type diff tool that visually contrasts the differences 0:22 between two fonts. 0:26 That sentences was meant to be read and not said. 0:28 So we have Font A here, which is Georgia, and Font B. 0:34 We can type in whatever we want. 0:38 Let's just do what the example says. 0:40 Times New Roman, and we’ll hit display. 0:42 And look at that. 0:47 Is this a 3D image or is this a webpage? 0:50 No, it’s actually just these two different fonts 0:54 being overlaid on top of one another. 0:57 And it shows you the differences between the two. 1:00 With blue and red here. 1:04 You can also look at what that looks like if they're side-by-side. 1:06 So that might give you a little bit better of an idea 1:11 of what some of the differences are. 1:14 If you're just sort of looking for the really obvious things, 1:16 like the different hooks, here. 1:20 But, if you overlay them, 1:22 you can even see the subtle differences between some of these curves. 1:24 Anyway, not a whole lot to say about this. 1:28 But I thought it was an interesting tool for comparing two different fonts. 1:31 And it does support google web fonts. 1:36 So if you want to put any of those in there, and 1:39 see the difference between the two, you can. 1:41 >> Yeah, go ahead, check it out. 1:43 >> Check it out. 1:45 >> Next up we have a project for using static maps. 1:46 Now, all of the popular mapping services support using a static map as an image. 1:51 And this website gives you a very nice interface to using a static map API. 1:57 So go ahead and on the left side of the screen here. 2:02 There is places to enter your API key. 2:07 The location that you want, zoom level and just 10 attributes about the map. 2:09 Let's go ahead and 2:15 see if we can use one that doesn't require an API key like Google. 2:15 Okay. 2:19 So, here are all of the different options. 2:20 You can give it the retina 2X size. 2:22 And then, if you want to, you can just grab this image right here, and 2:24 save it and then you are good to go. 2:28 Just implement that on your web page. 2:30 That will give you the HTML you need to use to generate the static map. 2:33 Or a link to the initial map. 2:37 Directions, and the CSS, as well. 2:41 Again, not a whole lot to say about this particular site. 2:45 But it is very easy to use, 2:49 should you just need a quick, one-off way to grab some static maps for your website. 2:51 >> Very nice stuff. 2:57 Well, next step is Makerbook. 2:58 This is a hand-picked directory of the best free resources for creatives. 3:00 So if you identify as a creative, then this is the website for you. 3:07 So, we can click on something like Textures here. 3:13 And we'll get a whole list of really nice places to get textures. 3:17 There's Subtle Patterns, and The Pattern Library, and a whole bunch of others. 3:23 I think we've covered actually at least Subtle Patterns. 3:29 Probably The Pattern Library as well on The Treehouse Show. 3:32 Let's just click on one of these so 3:35 you can see kinda What you're getting into here. 3:37 So this is subtle patterns. 3:40 Which I really like for getting these nice kind of subtle textured backgrounds. 3:41 And they've got a whole bunch of them on this site. 3:48 But let's go back to the main resource here and go back and 3:51 look at some of these other categories. 3:56 We can look at something like Colors here. 3:58 And there's of course Adobe Color CC. 4:01 That's a really good tool. 4:04 And then there's Color Lovers, that is a pretty good one as well. 4:06 I like to check that out from time to time. 4:11 There is fonts, which of course Google Fonts, 4:13 Font Squirrel, and a couple of other familiar ones are there. 4:16 Google fonts is really great, if you've never given that a try, 4:21 be sure to check that out. 4:24 Anyway, there's couple of other categories, here, but, 4:26 I'll let you check those out on your own. 4:29 I thought this was just a really nice resource of resources. 4:32 And, since it is hand-picked, 4:37 you know that these are probably gonna be pretty good. 4:38 Much better than a Google search. 4:42 >> Right. 4:43 Much better than robot-picked. 4:44 >> Yes. >> Next up, 4:46 we have a project called watermark.js. 4:47 This is really interesting. 4:49 This is a piece of JavaScript, for adding watermarks to images in the browser. 4:51 So you can see this right here. 4:58 This is made with this piece of JavaScript. 4:59 We've got one image with a watermark on the bottom right. 5:01 And it is using this piece of JavaScript right here. 5:05 To create this composite image. 5:08 And you can see we can actually drag this image around and save it if you want to. 5:11 So not a lot of code is required to actually create this image. 5:16 Specify the two images and then which Image goes where. 5:21 They're using the image in the lower right corner. 5:27 And then what to do when you're done with it. 5:29 Okay. 5:32 Append it to this particular dom element. 5:33 That supports alpha transparency. 5:37 You can even implement your own text. 5:39 You have to give it a piece of JavaScript that tells you where the text goes, 5:42 what it is, and some different attributes about that text. 5:46 Now you can go ahead and 5:51 check out the documentation for all the different options that it has. 5:52 Now, what's interesting about this plug-in, 5:57 this only supports browsers IE 10 and up. 5:58 And kind of the latest versions of Chrome and Firefox. 6:01 Chrome 42 and Firefox 38. 6:03 Because it requires some different APIs that haven't been implemented until 6:06 relatively recently by different browser vendors. 6:11 So if those browsers are browsers you are targeting for support. 6:14 Go ahead and check out this plugin. 6:19 We'll have a link to it in the show notes. 6:21 >> This is really cool. 6:22 This is actually good for say photography websites. 6:23 Where watermarking is very common, 6:27 since you don't want people to steal your photos. 6:28 This way you wouldn't have to create an Adobe Photoshop action to put 6:31 the watermark on all of your images. 6:36 You could just put it right in here. 6:38 I think, probably, the thing to be careful of is you probably want to either minify, 6:39 or at least obfuscate your JavaScript a little bit. 6:45 Because somebody that is clever could go in and 6:48 just look at the original source image and pull up the path for that. 6:52 So you do have to be careful there. 6:57 But other than that I think it's pretty cool, pretty useful. 6:58 >> I would say it hits the watermark. 7:03 >> It does, it's a new high watermark you could say. 7:05 Next up is WebPonize and Jason and I were talking about this. 7:09 We're really sad that we didn't think of this because It's just a pretty amazing. 7:14 >> Yeah, this is a wonderful pun. 7:20 >> Pretty amazing pun. 7:22 You could say web-pun-ize. 7:23 >> Ooo. 7:26 >> Ouch. 7:28 This is a Mac OS app for converting images into WebP. 7:28 Now some of you might be wondering right away, well what the heck is WebP? 7:34 It's actually a newer image format. 7:39 And down here towards the bottom of the page there's an article called 7:41 introduction to WebP. 7:46 Where you can read a little bit more about it. 7:47 But it's a new image format by Google. 7:50 And it's kind of like JPEG, in that it's good for photographs. 7:54 But the compression tends to be a lot better. 8:00 At least the compression ration where you're comparing 8:04 image quality to file size, tends to be a lot better. 8:07 So this is a MAC OS 10 app. 8:11 Sorry Windows users for converting any type of image into the WebP format. 8:13 Now if you do decide to use this, make sure that 8:21 you check out CanIUse.com or some other compatibility table. 8:25 To make sure that you'll be able to actually use WebP on your web pages. 8:30 Because it's not supported in every browser yet. 8:36 There's also some inconsistencies with older browsers. 8:39 And you basically want to make sure that you are using this to 8:43 progressively enhance an experience. 8:47 And that you have some kind of fallback in place if WebP isn't supported. 8:50 Anyway I thought this was a really neat tool. 8:57 Because WebP is a new and emerging format. 8:59 Could catch on, it might not. 9:03 If you do want to create a fallback for this, one great way to do that 9:05 is to use, I think either the source set element, or the picture element. 9:10 You can actually specify different image sources and 9:14 they can be different file types. 9:18 So that's a good way to kinda implement a fall back. 9:20 You'd of course need a poly fill for those too. 9:23 But that’s a way you can kind of tie together all of that browser 9:25 inconsistency. 9:30 Anyway, I think that’s it for- >> That’s it. 9:31 >> This week. 9:36 >> Yeah. 9:37 >> It’s kinda sad. 9:37 >> It was good show. 9:38 >> Yeah, we had a good run, >> You know, 9:39 we went out there, we gave it >> Bare minimum and here we are. 9:41 >> Yep. 9:45 Well that's all we have time for this week. 9:46 I am @nickrp on Twitter. 9:48 >> And I am @jseifer. 9:50 For more information on anything we talked about check out the show notes right below 9:51 this video. 9:54 Thanks everybody for watching and we will see you next week. 9:55 [MUSIC] 9:58