1
00:00:00,230 --> 00:00:00,810
I'm Nick Petit.

2
00:00:00,810 --> 00:00:01,820
>> I'm Jason Seifer.

3
00:00:01,820 --> 00:00:03,330
>> And you're watching the treehouse show.

4
00:00:03,330 --> 00:00:04,640
Your weekly dose of internets.

5
00:00:04,640 --> 00:00:07,810
Where we talk about all things web design,
web developement, and more.

6
00:00:07,810 --> 00:00:10,360
>> In this episode, we'll be talking
about type face differences,

7
00:00:10,360 --> 00:00:13,470
static maps, water marks, and more.

8
00:00:13,470 --> 00:00:14,887
>> Let's check it out.

9
00:00:14,887 --> 00:00:19,907
[MUSIC]

10
00:00:19,907 --> 00:00:22,710
First up is a tool called Tiff.

11
00:00:22,710 --> 00:00:26,930
This is a type diff tool that
visually contrasts the differences

12
00:00:26,930 --> 00:00:28,390
between two fonts.

13
00:00:28,390 --> 00:00:32,930
That sentences was meant to be read and
not said.

14
00:00:34,050 --> 00:00:38,690
So we have Font A here,
which is Georgia, and Font B.

15
00:00:38,690 --> 00:00:40,310
We can type in whatever we want.

16
00:00:40,310 --> 00:00:42,018
Let's just do what the example says.

17
00:00:42,018 --> 00:00:47,842
Times New Roman, and we’ll hit display.

18
00:00:47,842 --> 00:00:50,430
And look at that.

19
00:00:50,430 --> 00:00:54,490
Is this a 3D image or is this a webpage?

20
00:00:54,490 --> 00:00:57,710
No, it’s actually just
these two different fonts

21
00:00:57,710 --> 00:01:00,150
being overlaid on top of one another.

22
00:01:00,150 --> 00:01:04,140
And it shows you
the differences between the two.

23
00:01:04,140 --> 00:01:06,900
With blue and red here.

24
00:01:06,900 --> 00:01:11,240
You can also look at what that
looks like if they're side-by-side.

25
00:01:11,240 --> 00:01:14,770
So that might give you
a little bit better of an idea

26
00:01:14,770 --> 00:01:16,780
of what some of the differences are.

27
00:01:16,780 --> 00:01:20,750
If you're just sort of looking for
the really obvious things,

28
00:01:20,750 --> 00:01:22,720
like the different hooks, here.

29
00:01:22,720 --> 00:01:24,110
But, if you overlay them,

30
00:01:24,110 --> 00:01:28,970
you can even see the subtle differences
between some of these curves.

31
00:01:28,970 --> 00:01:31,660
Anyway, not a whole lot to say about this.

32
00:01:31,660 --> 00:01:36,740
But I thought it was an interesting
tool for comparing two different fonts.

33
00:01:36,740 --> 00:01:39,250
And it does support google web fonts.

34
00:01:39,250 --> 00:01:41,650
So if you want to put any
of those in there, and

35
00:01:41,650 --> 00:01:43,210
see the difference between the two,
you can.

36
00:01:43,210 --> 00:01:45,420
>> Yeah, go ahead, check it out.

37
00:01:45,420 --> 00:01:46,880
>> Check it out.

38
00:01:46,880 --> 00:01:51,320
>> Next up we have a project for
using static maps.

39
00:01:51,320 --> 00:01:57,650
Now, all of the popular mapping services
support using a static map as an image.

40
00:01:57,650 --> 00:02:02,610
And this website gives you a very nice
interface to using a static map API.

41
00:02:02,610 --> 00:02:07,080
So go ahead and
on the left side of the screen here.

42
00:02:07,080 --> 00:02:09,950
There is places to enter your API key.

43
00:02:09,950 --> 00:02:15,160
The location that you want, zoom level and
just 10 attributes about the map.

44
00:02:15,160 --> 00:02:15,750
Let's go ahead and

45
00:02:15,750 --> 00:02:19,420
see if we can use one that doesn't
require an API key like Google.

46
00:02:19,420 --> 00:02:20,340
Okay.

47
00:02:20,340 --> 00:02:22,910
So, here are all of the different options.

48
00:02:22,910 --> 00:02:24,590
You can give it the retina 2X size.

49
00:02:24,590 --> 00:02:28,570
And then, if you want to, you can
just grab this image right here, and

50
00:02:28,570 --> 00:02:30,870
save it and then you are good to go.

51
00:02:30,870 --> 00:02:33,540
Just implement that on your web page.

52
00:02:33,540 --> 00:02:37,710
That will give you the HTML you need
to use to generate the static map.

53
00:02:37,710 --> 00:02:41,210
Or a link to the initial map.

54
00:02:41,210 --> 00:02:45,080
Directions, and the CSS, as well.

55
00:02:45,080 --> 00:02:49,240
Again, not a whole lot to say
about this particular site.

56
00:02:49,240 --> 00:02:51,520
But it is very easy to use,

57
00:02:51,520 --> 00:02:57,140
should you just need a quick, one-off way
to grab some static maps for your website.

58
00:02:57,140 --> 00:02:58,390
>> Very nice stuff.

59
00:02:58,390 --> 00:03:00,670
Well, next step is Makerbook.

60
00:03:00,670 --> 00:03:07,780
This is a hand-picked directory of
the best free resources for creatives.

61
00:03:07,780 --> 00:03:13,300
So if you identify as a creative,
then this is the website for you.

62
00:03:13,300 --> 00:03:16,590
So, we can click on something
like Textures here.

63
00:03:17,610 --> 00:03:23,010
And we'll get a whole list of
really nice places to get textures.

64
00:03:23,010 --> 00:03:29,430
There's Subtle Patterns, and The Pattern
Library, and a whole bunch of others.

65
00:03:29,430 --> 00:03:32,930
I think we've covered actually
at least Subtle Patterns.

66
00:03:32,930 --> 00:03:35,880
Probably The Pattern Library
as well on The Treehouse Show.

67
00:03:35,880 --> 00:03:37,010
Let's just click on one of these so

68
00:03:37,010 --> 00:03:40,110
you can see kinda What
you're getting into here.

69
00:03:40,110 --> 00:03:41,860
So this is subtle patterns.

70
00:03:41,860 --> 00:03:48,880
Which I really like for getting these
nice kind of subtle textured backgrounds.

71
00:03:48,880 --> 00:03:51,920
And they've got a whole
bunch of them on this site.

72
00:03:51,920 --> 00:03:56,290
But let's go back to the main
resource here and go back and

73
00:03:56,290 --> 00:03:58,530
look at some of these other categories.

74
00:03:58,530 --> 00:04:01,270
We can look at something like Colors here.

75
00:04:01,270 --> 00:04:04,870
And there's of course Adobe Color CC.

76
00:04:04,870 --> 00:04:06,570
That's a really good tool.

77
00:04:06,570 --> 00:04:11,190
And then there's Color Lovers,
that is a pretty good one as well.

78
00:04:11,190 --> 00:04:13,230
I like to check that
out from time to time.

79
00:04:13,230 --> 00:04:16,930
There is fonts,
which of course Google Fonts,

80
00:04:16,930 --> 00:04:21,380
Font Squirrel, and
a couple of other familiar ones are there.

81
00:04:21,380 --> 00:04:24,880
Google fonts is really great,
if you've never given that a try,

82
00:04:24,880 --> 00:04:26,820
be sure to check that out.

83
00:04:26,820 --> 00:04:29,270
Anyway, there's couple of
other categories, here, but,

84
00:04:29,270 --> 00:04:32,150
I'll let you check those out on your own.

85
00:04:32,150 --> 00:04:37,120
I thought this was just a really
nice resource of resources.

86
00:04:37,120 --> 00:04:38,590
And, since it is hand-picked,

87
00:04:38,590 --> 00:04:42,000
you know that these are probably
gonna be pretty good.

88
00:04:42,000 --> 00:04:43,980
Much better than a Google search.

89
00:04:43,980 --> 00:04:44,480
>> Right.

90
00:04:44,480 --> 00:04:46,441
Much better than robot-picked.

91
00:04:46,441 --> 00:04:47,319
>> Yes.
>> Next up,

92
00:04:47,319 --> 00:04:49,720
we have a project called watermark.js.

93
00:04:49,720 --> 00:04:51,630
This is really interesting.

94
00:04:51,630 --> 00:04:58,190
This is a piece of JavaScript, for adding
watermarks to images in the browser.

95
00:04:58,190 --> 00:04:59,850
So you can see this right here.

96
00:04:59,850 --> 00:05:01,810
This is made with this
piece of JavaScript.

97
00:05:01,810 --> 00:05:05,070
We've got one image with
a watermark on the bottom right.

98
00:05:05,070 --> 00:05:08,940
And it is using this piece
of JavaScript right here.

99
00:05:08,940 --> 00:05:11,070
To create this composite image.

100
00:05:11,070 --> 00:05:16,080
And you can see we can actually drag this
image around and save it if you want to.

101
00:05:16,080 --> 00:05:21,400
So not a lot of code is required
to actually create this image.

102
00:05:21,400 --> 00:05:27,550
Specify the two images and
then which Image goes where.

103
00:05:27,550 --> 00:05:29,920
They're using the image in
the lower right corner.

104
00:05:29,920 --> 00:05:32,020
And then what to do when
you're done with it.

105
00:05:32,020 --> 00:05:33,140
Okay.

106
00:05:33,140 --> 00:05:37,010
Append it to this particular dom element.

107
00:05:37,010 --> 00:05:39,250
That supports alpha transparency.

108
00:05:39,250 --> 00:05:42,100
You can even implement your own text.

109
00:05:42,100 --> 00:05:46,780
You have to give it a piece of JavaScript
that tells you where the text goes,

110
00:05:46,780 --> 00:05:51,140
what it is, and
some different attributes about that text.

111
00:05:51,140 --> 00:05:52,180
Now you can go ahead and

112
00:05:52,180 --> 00:05:57,020
check out the documentation for
all the different options that it has.

113
00:05:57,020 --> 00:05:58,700
Now, what's interesting
about this plug-in,

114
00:05:58,700 --> 00:06:01,260
this only supports browsers IE 10 and up.

115
00:06:01,260 --> 00:06:03,880
And kind of the latest versions
of Chrome and Firefox.

116
00:06:03,880 --> 00:06:06,610
Chrome 42 and Firefox 38.

117
00:06:06,610 --> 00:06:11,530
Because it requires some different APIs
that haven't been implemented until

118
00:06:11,530 --> 00:06:14,620
relatively recently by
different browser vendors.

119
00:06:14,620 --> 00:06:19,600
So if those browsers are browsers
you are targeting for support.

120
00:06:19,600 --> 00:06:21,200
Go ahead and check out this plugin.

121
00:06:21,200 --> 00:06:22,670
We'll have a link to it in the show notes.

122
00:06:22,670 --> 00:06:23,860
>> This is really cool.

123
00:06:23,860 --> 00:06:27,300
This is actually good for
say photography websites.

124
00:06:27,300 --> 00:06:28,860
Where watermarking is very common,

125
00:06:28,860 --> 00:06:31,070
since you don't want people
to steal your photos.

126
00:06:31,070 --> 00:06:36,030
This way you wouldn't have to create
an Adobe Photoshop action to put

127
00:06:36,030 --> 00:06:38,010
the watermark on all of your images.

128
00:06:38,010 --> 00:06:39,820
You could just put it right in here.

129
00:06:39,820 --> 00:06:45,390
I think, probably, the thing to be careful
of is you probably want to either minify,

130
00:06:45,390 --> 00:06:48,790
or at least obfuscate your
JavaScript a little bit.

131
00:06:48,790 --> 00:06:52,030
Because somebody that is
clever could go in and

132
00:06:52,030 --> 00:06:57,040
just look at the original source image and
pull up the path for that.

133
00:06:57,040 --> 00:06:58,460
So you do have to be careful there.

134
00:06:58,460 --> 00:07:02,100
But other than that I think it's
pretty cool, pretty useful.

135
00:07:03,140 --> 00:07:05,740
>> I would say it hits the watermark.

136
00:07:05,740 --> 00:07:09,080
>> It does,
it's a new high watermark you could say.

137
00:07:09,080 --> 00:07:14,110
Next up is WebPonize and Jason and
I were talking about this.

138
00:07:14,110 --> 00:07:20,790
We're really sad that we didn't think of
this because It's just a pretty amazing.

139
00:07:20,790 --> 00:07:22,300
>> Yeah, this is a wonderful pun.

140
00:07:22,300 --> 00:07:23,420
>> Pretty amazing pun.

141
00:07:23,420 --> 00:07:26,980
You could say web-pun-ize.

142
00:07:26,980 --> 00:07:28,010
>> Ooo.

143
00:07:28,010 --> 00:07:28,520
>> Ouch.

144
00:07:28,520 --> 00:07:33,210
This is a Mac OS app for
converting images into WebP.

145
00:07:34,360 --> 00:07:39,280
Now some of you might be wondering
right away, well what the heck is WebP?

146
00:07:39,280 --> 00:07:41,620
It's actually a newer image format.

147
00:07:41,620 --> 00:07:46,690
And down here towards the bottom of
the page there's an article called

148
00:07:46,690 --> 00:07:47,810
introduction to WebP.

149
00:07:47,810 --> 00:07:50,980
Where you can read a little
bit more about it.

150
00:07:50,980 --> 00:07:54,910
But it's a new image format by Google.

151
00:07:54,910 --> 00:08:00,800
And it's kind of like JPEG,
in that it's good for photographs.

152
00:08:00,800 --> 00:08:04,030
But the compression tends
to be a lot better.

153
00:08:04,030 --> 00:08:07,730
At least the compression
ration where you're comparing

154
00:08:07,730 --> 00:08:11,180
image quality to file size,
tends to be a lot better.

155
00:08:11,180 --> 00:08:13,770
So this is a MAC OS 10 app.

156
00:08:13,770 --> 00:08:21,860
Sorry Windows users for converting any
type of image into the WebP format.

157
00:08:21,860 --> 00:08:25,370
Now if you do decide to use this,
make sure that

158
00:08:25,370 --> 00:08:30,510
you check out CanIUse.com or
some other compatibility table.

159
00:08:30,510 --> 00:08:36,740
To make sure that you'll be able to
actually use WebP on your web pages.

160
00:08:36,740 --> 00:08:39,780
Because it's not supported
in every browser yet.

161
00:08:39,780 --> 00:08:43,920
There's also some inconsistencies
with older browsers.

162
00:08:43,920 --> 00:08:47,190
And you basically want to make
sure that you are using this to

163
00:08:47,190 --> 00:08:50,870
progressively enhance an experience.

164
00:08:50,870 --> 00:08:57,370
And that you have some kind of fallback
in place if WebP isn't supported.

165
00:08:57,370 --> 00:08:59,617
Anyway I thought this
was a really neat tool.

166
00:08:59,617 --> 00:09:03,290
Because WebP is a new and emerging format.

167
00:09:03,290 --> 00:09:05,010
Could catch on, it might not.

168
00:09:05,010 --> 00:09:10,120
If you do want to create a fallback for
this, one great way to do that

169
00:09:10,120 --> 00:09:14,700
is to use, I think either the source
set element, or the picture element.

170
00:09:14,700 --> 00:09:18,740
You can actually specify
different image sources and

171
00:09:18,740 --> 00:09:20,740
they can be different file types.

172
00:09:20,740 --> 00:09:23,300
So that's a good way to
kinda implement a fall back.

173
00:09:23,300 --> 00:09:25,850
You'd of course need a poly fill for
those too.

174
00:09:25,850 --> 00:09:30,069
But that’s a way you can kind of
tie together all of that browser

175
00:09:30,069 --> 00:09:31,967
inconsistency.

176
00:09:31,967 --> 00:09:36,480
Anyway, I think that’s it for-
>> That’s it.

177
00:09:36,480 --> 00:09:37,200
>> This week.

178
00:09:37,200 --> 00:09:37,890
>> Yeah.

179
00:09:37,890 --> 00:09:38,590
>> It’s kinda sad.

180
00:09:38,590 --> 00:09:39,410
>> It was good show.

181
00:09:39,410 --> 00:09:41,460
>> Yeah, we had a good run,
>> You know,

182
00:09:41,460 --> 00:09:45,780
we went out there, we gave it
>> Bare minimum and here we are.

183
00:09:45,780 --> 00:09:46,370
>> Yep.

184
00:09:46,370 --> 00:09:48,960
Well that's all we have time for
this week.

185
00:09:48,960 --> 00:09:50,850
I am @nickrp on Twitter.

186
00:09:50,850 --> 00:09:51,960
>> And I am @jseifer.

187
00:09:51,960 --> 00:09:54,660
For more information on anything we talked
about check out the show notes right below

188
00:09:54,660 --> 00:09:55,460
this video.

189
00:09:55,460 --> 00:09:58,474
Thanks everybody for watching and
we will see you next week.

190
00:09:58,474 --> 00:10:04,754
[MUSIC]