I'm Nick Petit.

>> I'm Jason Seifer.

>> And you're watching the treehouse show.

Your weekly dose of internets.

Where we talk about all things web design, web developement, and more.

>> In this episode, we'll be talking about type face differences,

static maps, water marks, and more.

>> Let's check it out.

[MUSIC]

First up is a tool called Tiff.

This is a type diff tool that visually contrasts the differences

between two fonts.

That sentences was meant to be read and not said.

So we have Font A here, which is Georgia, and Font B.

We can type in whatever we want.

Let's just do what the example says.

Times New Roman, and we’ll hit display.

And look at that.

Is this a 3D image or is this a webpage?

No, it’s actually just these two different fonts

being overlaid on top of one another.

And it shows you the differences between the two.

With blue and red here.

You can also look at what that looks like if they're side-by-side.

So that might give you a little bit better of an idea

of what some of the differences are.

If you're just sort of looking for the really obvious things,

like the different hooks, here.

But, if you overlay them,

you can even see the subtle differences between some of these curves.

Anyway, not a whole lot to say about this.

But I thought it was an interesting tool for comparing two different fonts.

And it does support google web fonts.

So if you want to put any of those in there, and

see the difference between the two, you can.

>> Yeah, go ahead, check it out.

>> Check it out.

>> Next up we have a project for using static maps.

Now, all of the popular mapping services support using a static map as an image.

And this website gives you a very nice interface to using a static map API.

So go ahead and on the left side of the screen here.

There is places to enter your API key.

The location that you want, zoom level and just 10 attributes about the map.

Let's go ahead and

see if we can use one that doesn't require an API key like Google.

Okay.

So, here are all of the different options.

You can give it the retina 2X size.

And then, if you want to, you can just grab this image right here, and

save it and then you are good to go.

Just implement that on your web page.

That will give you the HTML you need to use to generate the static map.

Or a link to the initial map.

Directions, and the CSS, as well.

Again, not a whole lot to say about this particular site.

But it is very easy to use,

should you just need a quick, one-off way to grab some static maps for your website.

>> Very nice stuff.

Well, next step is Makerbook.

This is a hand-picked directory of the best free resources for creatives.

So if you identify as a creative, then this is the website for you.

So, we can click on something like Textures here.

And we'll get a whole list of really nice places to get textures.

There's Subtle Patterns, and The Pattern Library, and a whole bunch of others.

I think we've covered actually at least Subtle Patterns.

Probably The Pattern Library as well on The Treehouse Show.

Let's just click on one of these so

you can see kinda What you're getting into here.

So this is subtle patterns.

Which I really like for getting these nice kind of subtle textured backgrounds.

And they've got a whole bunch of them on this site.

But let's go back to the main resource here and go back and

look at some of these other categories.

We can look at something like Colors here.

And there's of course Adobe Color CC.

That's a really good tool.

And then there's Color Lovers, that is a pretty good one as well.

I like to check that out from time to time.

There is fonts, which of course Google Fonts,

Font Squirrel, and a couple of other familiar ones are there.

Google fonts is really great, if you've never given that a try,

be sure to check that out.

Anyway, there's couple of other categories, here, but,

I'll let you check those out on your own.

I thought this was just a really nice resource of resources.

And, since it is hand-picked,

you know that these are probably gonna be pretty good.

Much better than a Google search.

>> Right.

Much better than robot-picked.

>> Yes. >> Next up,

we have a project called watermark.js.

This is really interesting.

This is a piece of JavaScript, for adding watermarks to images in the browser.

So you can see this right here.

This is made with this piece of JavaScript.

We've got one image with a watermark on the bottom right.

And it is using this piece of JavaScript right here.

To create this composite image.

And you can see we can actually drag this image around and save it if you want to.

So not a lot of code is required to actually create this image.

Specify the two images and then which Image goes where.

They're using the image in the lower right corner.

And then what to do when you're done with it.

Okay.

Append it to this particular dom element.

That supports alpha transparency.

You can even implement your own text.

You have to give it a piece of JavaScript that tells you where the text goes,

what it is, and some different attributes about that text.

Now you can go ahead and

check out the documentation for all the different options that it has.

Now, what's interesting about this plug-in,

this only supports browsers IE 10 and up.

And kind of the latest versions of Chrome and Firefox.

Chrome 42 and Firefox 38.

Because it requires some different APIs that haven't been implemented until

relatively recently by different browser vendors.

So if those browsers are browsers you are targeting for support.

Go ahead and check out this plugin.

We'll have a link to it in the show notes.

>> This is really cool.

This is actually good for say photography websites.

Where watermarking is very common,

since you don't want people to steal your photos.

This way you wouldn't have to create an Adobe Photoshop action to put

the watermark on all of your images.

You could just put it right in here.

I think, probably, the thing to be careful of is you probably want to either minify,

or at least obfuscate your JavaScript a little bit.

Because somebody that is clever could go in and

just look at the original source image and pull up the path for that.

So you do have to be careful there.

But other than that I think it's pretty cool, pretty useful.

>> I would say it hits the watermark.

>> It does, it's a new high watermark you could say.

Next up is WebPonize and Jason and I were talking about this.

We're really sad that we didn't think of this because It's just a pretty amazing.

>> Yeah, this is a wonderful pun.

>> Pretty amazing pun.

You could say web-pun-ize.

>> Ooo.

>> Ouch.

This is a Mac OS app for converting images into WebP.

Now some of you might be wondering right away, well what the heck is WebP?

It's actually a newer image format.

And down here towards the bottom of the page there's an article called

introduction to WebP.

Where you can read a little bit more about it.

But it's a new image format by Google.

And it's kind of like JPEG, in that it's good for photographs.

But the compression tends to be a lot better.

At least the compression ration where you're comparing

image quality to file size, tends to be a lot better.

So this is a MAC OS 10 app.

Sorry Windows users for converting any type of image into the WebP format.

Now if you do decide to use this, make sure that

you check out CanIUse.com or some other compatibility table.

To make sure that you'll be able to actually use WebP on your web pages.

Because it's not supported in every browser yet.

There's also some inconsistencies with older browsers.

And you basically want to make sure that you are using this to

progressively enhance an experience.

And that you have some kind of fallback in place if WebP isn't supported.

Anyway I thought this was a really neat tool.

Because WebP is a new and emerging format.

Could catch on, it might not.

If you do want to create a fallback for this, one great way to do that

is to use, I think either the source set element, or the picture element.

You can actually specify different image sources and

they can be different file types.

So that's a good way to kinda implement a fall back.

You'd of course need a poly fill for those too.

But that’s a way you can kind of tie together all of that browser

inconsistency.

Anyway, I think that’s it for- >> That’s it.

>> This week.

>> Yeah.

>> It’s kinda sad.

>> It was good show.

>> Yeah, we had a good run, >> You know,

we went out there, we gave it >> Bare minimum and here we are.

>> Yep.

Well that's all we have time for this week.

I am @nickrp on Twitter.

>> And I am @jseifer.

For more information on anything we talked about check out the show notes right below

this video.

Thanks everybody for watching and we will see you next week.

[MUSIC]