1
00:00:00,450 --> 00:00:01,210
I'm Nick Pettit.

2
00:00:01,210 --> 00:00:02,190
>> I'm Jason Seifer.

3
00:00:02,190 --> 00:00:04,800
>> And, you're watching The Treehouse
Show, your weekly dose of

4
00:00:04,800 --> 00:00:08,280
internet where we talk about all things
web design, web development, and more.

5
00:00:08,280 --> 00:00:14,250
>> For a free month trial of Treehouse,
check us out at teamtreehouse.com/show.

6
00:00:14,250 --> 00:00:15,010
In this episode,

7
00:00:15,010 --> 00:00:20,390
we'll be talking about icons, responsive
images, time sheets, and more.

8
00:00:20,390 --> 00:00:21,347
>> Let's check it out.

9
00:00:21,347 --> 00:00:26,372
[MUSIC]

10
00:00:26,372 --> 00:00:32,341
First up, we have this great article over
on CSS tricks titled Favicons,

11
00:00:32,341 --> 00:00:35,050
Touch Icons, Tile Icons, etc.

12
00:00:35,050 --> 00:00:37,670
What all do you need?

13
00:00:37,670 --> 00:00:40,190
That's a very good question and in fact,

14
00:00:40,190 --> 00:00:45,830
this article is formatted in the form of
questions and answers.

15
00:00:45,830 --> 00:00:46,440
It's pretty cool.

16
00:00:46,440 --> 00:00:48,060
I'll get to that in a second, though.

17
00:00:48,060 --> 00:00:54,440
Basically, a Favicon or sometimes
pronounced Fave icon, is short for

18
00:00:54,440 --> 00:00:59,150
Favorite Icon and it was introduced in
1999 by Internet Explorer 5.

19
00:00:59,150 --> 00:01:01,660
>> The trend setting browser.

20
00:01:01,660 --> 00:01:07,520
>> And, it was standardized by the W3C a
few months later.

21
00:01:07,520 --> 00:01:11,250
And, they're basically small graphics that
represent the website.

22
00:01:11,250 --> 00:01:15,555
So, you see them here in various browsers
on a Mac, and

23
00:01:15,555 --> 00:01:19,180
that's sort of what they end up looking
like.

24
00:01:19,180 --> 00:01:20,050
Since then,

25
00:01:20,050 --> 00:01:25,310
most desktop browsers have followed the
trend and used Favicon's in some way.

26
00:01:25,310 --> 00:01:29,240
I know that, because it says it right
here, and the internet can't lie.

27
00:01:29,240 --> 00:01:30,840
>> That is very true.

28
00:01:32,840 --> 00:01:35,700
Right here, we have a bunch of questions
and answers.

29
00:01:35,700 --> 00:01:39,240
And, I thought this was pretty cool only
because favicons are sort of

30
00:01:39,240 --> 00:01:44,200
this weird and sometimes mysterious file
format that's not

31
00:01:44,200 --> 00:01:49,540
really as well understood as it should be
by most web designers and developers.

32
00:01:49,540 --> 00:01:53,320
And, most people don't really know how to
use them properly, so

33
00:01:53,320 --> 00:01:58,040
there's a lot of misinformation out there
about what is true and what is not.

34
00:01:58,040 --> 00:02:01,538
First question is what is the primary
favicon file?

35
00:02:01,538 --> 00:02:09,360
Well, it's favicon.ico and just to make
sure that is not a png image.

36
00:02:09,360 --> 00:02:10,670
That's just renamed.

37
00:02:10,670 --> 00:02:13,400
It's actually a different file format.

38
00:02:13,400 --> 00:02:18,190
Next question is what dimensions should a
favicon be?

39
00:02:18,190 --> 00:02:19,680
>> Three dimensions.

40
00:02:19,680 --> 00:02:23,580
>> Well, that's actually almost correct
because there's a couple of

41
00:02:23,580 --> 00:02:26,430
different dimensions listed out here and
then None of the above and

42
00:02:26,430 --> 00:02:30,540
the an, answer actually is None of the
above.

43
00:02:30,540 --> 00:02:32,020
And, that's because.

44
00:02:32,020 --> 00:02:36,055
And, favicom can actually contain multiple
graphics, so

45
00:02:36,055 --> 00:02:38,510
three dimensions was almost right Jason.

46
00:02:38,510 --> 00:02:39,300
You're, you're doing good.

47
00:02:39,300 --> 00:02:43,550
I'm going to give you half credit for that
one, so half of a gold star.

48
00:02:43,550 --> 00:02:48,210
Question, what is the purpose of a
favicom.png?

49
00:02:48,210 --> 00:02:55,650
And, the answer is it's complicated, just
like in Jason's status on Facebook.

50
00:02:55,650 --> 00:02:57,970
Anyway, there's a bunch more questions
here.

51
00:02:57,970 --> 00:03:01,730
It's really kind of a cool way to format a
blog post because, again, like I said,

52
00:03:01,730 --> 00:03:03,800
there's a lot of misinformation about.

53
00:03:03,800 --> 00:03:05,920
How favicons should be used.

54
00:03:05,920 --> 00:03:07,500
How they should be formatted.

55
00:03:07,500 --> 00:03:11,760
So, it's a good way to test your own
knowledge and actually go through each

56
00:03:11,760 --> 00:03:16,940
quiz question and say, you know, what do I
really know about favicons.

57
00:03:16,940 --> 00:03:19,240
And, perhaps, you might be surprised.

58
00:03:19,240 --> 00:03:21,800
There's a couple of interesting answers in
there.

59
00:03:21,800 --> 00:03:22,790
>> Is it complicated, Nick?

60
00:03:24,900 --> 00:03:26,020
All right, it's not simple.

61
00:03:27,150 --> 00:03:27,650
>> We're fine.

62
00:03:28,820 --> 00:03:31,390
Next up, we have project called
FocusPoint.

63
00:03:31,390 --> 00:03:33,420
jQuery FocusPoint.

64
00:03:33,420 --> 00:03:37,900
This is a plugin for, I don't wanna say
responsive images, but

65
00:03:37,900 --> 00:03:40,648
it's for responsive cropping.

66
00:03:40,648 --> 00:03:43,930
So, this plug-in will dynamically crop
images to

67
00:03:43,930 --> 00:03:48,990
fill available space without cutting out
the image's subject.

68
00:03:48,990 --> 00:03:50,510
Now, what in the world does that mean?

69
00:03:50,510 --> 00:03:53,950
Well, let's say you have this particular
image.

70
00:03:53,950 --> 00:03:59,930
This is two people in the rain, and when
you re-size the browser,

71
00:03:59,930 --> 00:04:02,740
if you are trying to use responsive
images, well.

72
00:04:02,740 --> 00:04:09,000
You might not get the focus point of the
image in the frame, but if you use

73
00:04:09,000 --> 00:04:12,960
FocusPoint, you can get there faces rather
than their mid sections in the frame.

74
00:04:12,960 --> 00:04:16,190
>> Hm, I feel like that, that happens to
me all of the time on my Facebook or

75
00:04:16,190 --> 00:04:19,870
Twitter when I post an image and it crops
the wrong part of it.

76
00:04:19,870 --> 00:04:20,780
That's pretty interesting.

77
00:04:20,780 --> 00:04:23,870
>> Yeah, Facebook could be using this
plugin.

78
00:04:23,870 --> 00:04:25,720
>> Yeah.
>> The only drawback would be you have to

79
00:04:25,720 --> 00:04:28,640
actually set the focus point yourself.

80
00:04:28,640 --> 00:04:32,390
So here, let's go ahead and check out
this, this full screen demo, right.

81
00:04:32,390 --> 00:04:34,370
There's this picture of a lizard right
here.

82
00:04:34,370 --> 00:04:39,240
Now, if I, if I go out of full screen and
I start to resize my browser.

83
00:04:39,240 --> 00:04:44,320
You can see as the browser is resized, the
lizards head

84
00:04:44,320 --> 00:04:49,990
stays in focus rather than being cropped
to some sort of strange dimension.

85
00:04:51,290 --> 00:04:56,540
So, if we go back to the code well you do
have to calculate your images focus point

86
00:04:56,540 --> 00:05:01,080
and once you do and include the java
script and css.

87
00:05:01,080 --> 00:05:03,230
You have to create a container for it.

88
00:05:03,230 --> 00:05:07,350
And then, using data attributes, which you
give it a focus on the x and

89
00:05:07,350 --> 00:05:08,820
y coordinates.

90
00:05:08,820 --> 00:05:12,040
And then, put in your images width and
height and

91
00:05:12,040 --> 00:05:16,160
also in data attributes below that put in
your image.

92
00:05:16,160 --> 00:05:23,580
And then, all you have to do is call the
focus point method and you are good to go.

93
00:05:23,580 --> 00:05:28,320
Now, automatically images are refocused
when the window is resized, but

94
00:05:28,320 --> 00:05:31,700
you can turn that off if you want to,

95
00:05:31,700 --> 00:05:37,120
and you can also change how often images
are refocused when the window is resized.

96
00:05:37,120 --> 00:05:42,440
You know, maybe in case you wanna improve
performance, and it may or may not matter.

97
00:05:42,440 --> 00:05:47,050
Should you encounter a scenario where you
wanna recalculate the focus automatically,

98
00:05:47,050 --> 00:05:51,320
you can call the adjustFocus method, and
that is it.

99
00:05:51,320 --> 00:05:52,390
So really cool plugin.

100
00:05:52,390 --> 00:05:53,870
Very, very easy to use.

101
00:05:53,870 --> 00:05:57,820
If you wanna check it out, it is in the
show notes at youtube.com/gotreehouse.

102
00:05:57,820 --> 00:05:59,510
You can also search for us on iTunes.

103
00:05:59,510 --> 00:06:01,400
We are The Treehouse Show.

104
00:06:01,400 --> 00:06:05,839
And, make sure to join us for a 30-day
free trial at teamtreehouse.com/show.

105
00:06:07,210 --> 00:06:08,310
Very nice stuff.

106
00:06:08,310 --> 00:06:10,470
But, that's a pretty interesting plug in.

107
00:06:10,470 --> 00:06:15,330
I'm sure I would do it for every single
image on my site, but maybe if you

108
00:06:15,330 --> 00:06:19,310
were creating a marketing page, and you
had this nice big hero image,

109
00:06:19,310 --> 00:06:22,680
you wanted to make sure it still looked
good at various sizes, would be a good.

110
00:06:22,680 --> 00:06:23,470
>> Yeah.

111
00:06:23,470 --> 00:06:24,380
Use for that.

112
00:06:24,380 --> 00:06:25,550
Anyway, pretty cool.

113
00:06:25,550 --> 00:06:31,100
Next up is a wonderful article over on the
Codrops blog called

114
00:06:31,100 --> 00:06:35,740
Making SVGs Responsive with CSS.

115
00:06:35,740 --> 00:06:43,030
Now, basically, there's a lot of different
ways to embed an SVG into a page.

116
00:06:43,030 --> 00:06:48,160
You could use HTML5 and inline it with the
svg tag.

117
00:06:48,160 --> 00:06:54,910
The other commonly used techniques are to
use the image tag to use the object tag,

118
00:06:54,910 --> 00:07:00,690
you could even put it into an iframe and
use it as a CSS background image.

119
00:07:00,690 --> 00:07:06,060
So, there's a couple different techniques
there and the thing about SVGs is that

120
00:07:06,060 --> 00:07:11,190
there isn't really one single technique
that's gonna work perfectly and

121
00:07:11,190 --> 00:07:14,620
responsibly on every single browser.

122
00:07:14,620 --> 00:07:18,810
And, that's exactly what this article is
all about.

123
00:07:18,810 --> 00:07:25,250
Now, I'm going to go ahead and scroll down
the page here to demo.

124
00:07:25,250 --> 00:07:27,200
Actually, let me just go ahead and find
it.

125
00:07:28,770 --> 00:07:29,400
There we go.

126
00:07:31,250 --> 00:07:38,510
And, it shows all of the various ways that
you can embed an SVG on the page.

127
00:07:38,510 --> 00:07:44,140
Now, there's another interesting part of
this article, and it basically

128
00:07:44,140 --> 00:07:49,850
describes how to change an SVG as the size
of the browser changes.

129
00:07:49,850 --> 00:07:55,120
So, not only would you want to actually
resize an image, or

130
00:07:55,120 --> 00:08:01,720
in this case an SVG, but you may actually
want to change what it looks like because.

131
00:08:01,720 --> 00:08:05,510
There's some pretty fine text on this
particular SVG and

132
00:08:05,510 --> 00:08:09,880
I'm not sure you could make this much
smaller and still have the text legible.

133
00:08:09,880 --> 00:08:13,390
So, you might wanna actually lose the text
at smaller sizes.

134
00:08:13,390 --> 00:08:17,000
Well, how would you do that and what would
it look like?

135
00:08:17,000 --> 00:08:21,470
Here is that particular demo adaptive SVGs
with media queries and

136
00:08:21,470 --> 00:08:25,440
I'm gonna come out of full screen here
just so I can resize this.

137
00:08:25,440 --> 00:08:30,150
So, I'll resize my browser here and look
at that.

138
00:08:30,150 --> 00:08:30,960
Check that out.

139
00:08:30,960 --> 00:08:32,820
So, it actually changes.

140
00:08:32,820 --> 00:08:33,380
>> Wow.

141
00:08:33,380 --> 00:08:35,470
>> To something that looks like that.

142
00:08:35,470 --> 00:08:37,700
So, text is still pretty legible there.

143
00:08:37,700 --> 00:08:39,440
>> And, there's your desktop folder.

144
00:08:39,440 --> 00:08:41,460
>> And then, it changes once again.

145
00:08:41,460 --> 00:08:43,610
Yes, that is my desktop folder.

146
00:08:43,610 --> 00:08:47,110
And, if you get a little bit smaller I
don't think we can.

147
00:08:47,110 --> 00:08:50,530
I think it changes one more time, but the
way that this is

148
00:08:50,530 --> 00:08:56,760
happening is media queries are actually on
the SVG itself.

149
00:08:56,760 --> 00:08:59,540
And, these are not separate SVGs.

150
00:08:59,540 --> 00:09:06,280
It's actually just filling and drawing the
SVG slightly differently every time.

151
00:09:06,280 --> 00:09:13,240
So, it's maybe filling in this particular
area with a different color and

152
00:09:13,240 --> 00:09:16,600
you're actually just seeing the same SVG
just colored differently.

153
00:09:16,600 --> 00:09:20,050
And, that's a pretty clever use of
resources because when you're loading

154
00:09:20,050 --> 00:09:25,250
a page, of course, you want to try to keep
the page wait as low as possible, and

155
00:09:25,250 --> 00:09:28,390
you don't want to load in a ton of
different SVGs.

156
00:09:28,390 --> 00:09:33,090
So, this is a great way to just load in
one SVG and

157
00:09:33,090 --> 00:09:35,820
have it work for multiple screen
resolutions.

158
00:09:35,820 --> 00:09:37,080
Thought that was a pretty good idea.

159
00:09:37,080 --> 00:09:38,450
>> Very nice.
>> Mm-hm.

160
00:09:38,450 --> 00:09:41,880
>> Next up, we have a project called
timesheet.js.

161
00:09:41,880 --> 00:09:44,910
Now, as you might expect from the name
this is a project that let's you

162
00:09:44,910 --> 00:09:47,780
generate timesheets on your webpage.

163
00:09:47,780 --> 00:09:53,000
Now, what's really cool about timesheet.js
is it has absolutely no dependencies.

164
00:09:53,000 --> 00:09:56,410
This is just pure javascript, so you don't

165
00:09:56,410 --> 00:10:01,430
need J Query you don't need Angular JS all
you need is time sheet dot JS.

166
00:10:01,430 --> 00:10:07,180
Simply include this script, give it an
array of different times and

167
00:10:07,180 --> 00:10:11,340
boom you get this nice little time sheet
right here.

168
00:10:11,340 --> 00:10:17,260
Now, you can see if we look at the data
down here in from 2002,

169
00:10:17,260 --> 00:10:22,060
to September 2002, we had a freaking
awesome time.

170
00:10:22,060 --> 00:10:25,290
And, that is represented by this green bar
right here.

171
00:10:25,290 --> 00:10:30,320
This is all generated using an array of
different dates and times.

172
00:10:30,320 --> 00:10:31,910
Now, if you wanna check out the code.

173
00:10:31,910 --> 00:10:35,430
You can hit the fork me on get hub button.

174
00:10:35,430 --> 00:10:39,460
And, you can see in the source there is
just not a ton to this.

175
00:10:39,460 --> 00:10:42,850
It is very, very simple, if you want to go
through and read and

176
00:10:42,850 --> 00:10:43,810
see how they did that.

177
00:10:43,810 --> 00:10:45,010
Now, if you're saying,

178
00:10:45,010 --> 00:10:49,600
hey, I want to customize how this looks,
well, the SAS is included.

179
00:10:49,600 --> 00:10:53,530
You can change the timesheet classes and

180
00:10:53,530 --> 00:10:58,350
the different bubbles to be the different
colors that you want.

181
00:10:58,350 --> 00:11:00,180
Anyway, this is a really cool project.

182
00:11:00,180 --> 00:11:01,500
Not too much to say about it.

183
00:11:01,500 --> 00:11:04,010
Very, very easy to use and

184
00:11:04,010 --> 00:11:06,520
very easy to get started with if you wanna
customize it.

185
00:11:06,520 --> 00:11:09,890
So, go ahead and check that out in the
Show Notes.

186
00:11:09,890 --> 00:11:14,130
Very cool, well next up is CSS guidelines.

187
00:11:14,130 --> 00:11:17,280
I know that because it says it right here
on the webpage.

188
00:11:17,280 --> 00:11:19,420
>> Ooh.
>> Basically, this is a.

189
00:11:19,420 --> 00:11:21,210
>> That is invalid CSS, I'm pretty sure.

190
00:11:21,210 --> 00:11:22,110
>> Yes, it is.

191
00:11:22,110 --> 00:11:26,150
That's not an actual CSS property, or
value, or

192
00:11:26,150 --> 00:11:30,440
a selector, but it does look pretty nice
on the page.

193
00:11:30,440 --> 00:11:31,690
>> Should be squiggled red.

194
00:11:31,690 --> 00:11:37,310
>> Right here, it says CSS guidelines is a
document by me, Harry Roberts,

195
00:11:37,310 --> 00:11:38,350
that's not me.

196
00:11:38,350 --> 00:11:42,560
I am a Consultant Front-End Architect from
the UK, and he's available for

197
00:11:42,560 --> 00:11:46,650
hire, so you can go ahead and, and hire
Harry right there, but this.

198
00:11:46,650 --> 00:11:48,330
>> Harry didn't pay us to say that by the
way.

199
00:11:48,330 --> 00:11:49,010
>> No, no.

200
00:11:49,010 --> 00:11:50,920
>> We just will read literally anything on
the webpage.

201
00:11:50,920 --> 00:11:52,800
>> We will read it and

202
00:11:52,800 --> 00:11:58,130
assume it's the truth because it's the
Internet, and it's not wrong, so.

203
00:11:58,130 --> 00:11:59,510
>> Never been wrong for me.

204
00:11:59,510 --> 00:12:02,120
>> This is a style guide,

205
00:12:02,120 --> 00:12:06,410
and I think a good place to start with
this is what is a style guide.

206
00:12:06,410 --> 00:12:12,470
Well, a code, a coding style guide, note,
not a visual style guide is

207
00:12:12,470 --> 00:12:17,280
a valuable tool for teams that maybe need
to build and

208
00:12:17,280 --> 00:12:20,890
maintain projects for a reasonable length
of time.

209
00:12:20,890 --> 00:12:26,340
Or maybe, you have a lot of new staff that
comes onboard regularly, anyway,

210
00:12:26,340 --> 00:12:29,750
it's basically a way to keep teams in
sync.

211
00:12:29,750 --> 00:12:33,410
And, make sure that everybody is writing
clean in a maintainable carrier that

212
00:12:33,410 --> 00:12:37,330
people will be able to understand, whether
they're new or whether they're

213
00:12:37,330 --> 00:12:41,970
coming on to a project that they haven't
worked on before and so on.

214
00:12:41,970 --> 00:12:44,510
And, it starts out with syntax and
formatting.

215
00:12:44,510 --> 00:12:47,830
So, very granular and basic stuff.

216
00:12:47,830 --> 00:12:52,530
In this particular style guide it says you
want to use four spaces and no tabs,

217
00:12:52,530 --> 00:12:58,330
80 character wide columns, multi-line CSS,
meaningful use of white space and so on.

218
00:12:58,330 --> 00:13:03,270
It explains how multiple files should be
used and I thought this was pretty cool.

219
00:13:03,270 --> 00:13:08,480
Maybe, having a Table of Contents in your
CSS, as a comment that actually

220
00:13:08,480 --> 00:13:14,310
explains what each folder is and what each
CSS file is.

221
00:13:14,310 --> 00:13:16,390
Anyway, this is a pretty large style
guide.

222
00:13:16,390 --> 00:13:20,690
And, you could of course create your own
style guide, if you wanted to.

223
00:13:20,690 --> 00:13:24,260
But, if you don't have that kind of time
and you just wanna go ahead and

224
00:13:24,260 --> 00:13:29,630
use a pre-built CSS style guide, this is
a, pretty good one to use.

225
00:13:29,630 --> 00:13:31,220
>> Yeah, there's.
>> So, just go ahead and pick it up.

226
00:13:31,220 --> 00:13:33,800
>> There's lot of style guides for many
different programming languages.

227
00:13:33,800 --> 00:13:37,280
And, very, very useful, just to keep
everybody on the same page.

228
00:13:37,280 --> 00:13:38,990
>> That is correct.

229
00:13:38,990 --> 00:13:40,719
Anyway, that's all we have time for.

230
00:13:40,719 --> 00:13:42,098
I am @nickrp on Twitter.

231
00:13:42,098 --> 00:13:43,420
>> And, I am @jseifer.

232
00:13:43,420 --> 00:13:45,310
For more information on anything we talked
about,

233
00:13:45,310 --> 00:13:49,050
check out our show notes at
youtube.com/gotreehouse.

234
00:13:49,050 --> 00:13:50,890
You can also find us on iTunes.

235
00:13:50,890 --> 00:13:54,010
We are The Treehouse Show and please don't
forget to rate us.

236
00:13:54,010 --> 00:13:56,990
>> And, of course, if you'd like to see
more videos like this one about web

237
00:13:56,990 --> 00:14:01,520
design, web development, mobile business,
and so much more, be sure to check us out

238
00:14:01,520 --> 00:14:07,540
at teamtreehouse.com/show for a free month
of Treehouse.

239
00:14:07,540 --> 00:14:10,325
Thank you so much for watching, and we
will see you next week.

240
00:14:10,325 --> 00:14:16,899
[MUSIC]