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