1
00:00:01,520 --> 00:00:03,610
>> I'm Nick Pettit >> I'm Jason Seifer >> 

2
00:00:03,610 --> 00:00:04,960
and you're watching The Treehouse Show,

3
00:00:04,960 --> 00:00:08,039
your weekly dose of internets where we talk about all things web design,

4
00:00:08,039 --> 00:00:09,580
web development and more.

5
00:00:09,580 --> 00:00:12,650
In this episode, we'll be talking about web typography, 

6
00:00:12,650 --> 00:00:14,230
CSS3 patterns

7
00:00:14,230 --> 00:00:15,800
and simple icons.

8
00:00:15,800 --> 00:00:18,530
Let's check it out.

9
00:00:18,530 --> 00:00:23,580
The Treehouse Show

10
00:00:23,580 --> 00:00:26,440
First up is typeplate.

11
00:00:26,440 --> 00:00:33,160
This is basically a typographic starter kit or a Sass mix-in

12
00:00:33,160 --> 00:00:36,110
that you can go ahead and include in your website.

13
00:00:36,110 --> 00:00:39,100
Now, I think it's worth noting, Nick, when you say, Sass mix-in,

14
00:00:39,100 --> 00:00:43,230
you mean the CSS framework, Sass.

15
00:00:43,230 --> 00:00:47,290
>> Correct >> Not a way of offering sassy comments

16
00:00:47,290 --> 00:00:48,970
into a normal shell, right?

17
00:00:48,970 --> 00:00:51,990
>> You're really mixing in the Sass right now, but >> Okay >> yes. 

18
00:00:51,990 --> 00:00:54,690
>> Just thought we would clarify that >> Thanks.

19
00:00:54,690 --> 00:01:01,800
Yes, so it's a Sass mix-in that allows you to basically set different typographic

20
00:01:01,800 --> 00:01:04,430
design patterns within your website.

21
00:01:04,430 --> 00:01:08,970
So if you're a developer and you have trouble setting your typographic 

22
00:01:08,970 --> 00:01:13,390
scales--so for example, as you start to get down to smaller

23
00:01:13,390 --> 00:01:15,810
and smaller font sizes, you have to change the line height,

24
00:01:15,810 --> 00:01:20,010
this is definitely for you because it allows you to do that

25
00:01:20,010 --> 00:01:23,630
in a quantitative way rather than just kind of

26
00:01:23,630 --> 00:01:27,280
eyeballing it and guessing and wondering if something looks right

27
00:01:27,280 --> 00:01:32,850
so this is a much faster way to go ahead and implement those nice

28
00:01:32,850 --> 00:01:37,840
typographic styles without having to worry about it a whole lot.

29
00:01:37,840 --> 00:01:44,430
As a developer, I like that because I can just assign line height and font size

30
00:01:44,430 --> 00:01:48,730
to a variable and then modify that for the different sizes in the CSS.

31
00:01:48,730 --> 00:01:52,970
As a designer, I like it because it means the developer can't go in

32
00:01:52,970 --> 00:01:54,660
and mess up your nice design.

33
00:01:54,660 --> 00:01:58,350
>> We're all about compromise here on The Treehouse Show >> Yes.

34
00:01:58,350 --> 00:02:03,370
Next up we have a blog post on HTML's new template tag.

35
00:02:03,370 --> 00:02:07,100
Now this is a pretty awesome thing and this is going to be 

36
00:02:07,100 --> 00:02:10,039
mostly used for client-side JavaScript libraries

37
00:02:10,039 --> 00:02:13,080
so there's a bunch of different JavaScript templating libraries

38
00:02:13,080 --> 00:02:16,630
that we have right now and they all work a certain way to 

39
00:02:16,630 --> 00:02:19,630
manipulate the DOM and let you have content in them.

40
00:02:19,630 --> 00:02:25,760
The new HTML5 template tag is going to be an actual tag called template

41
00:02:25,760 --> 00:02:29,790
and this isn't going to exist in the DOM at all

42
00:02:29,790 --> 00:02:34,610
so it's going to kind of sit inside of your page and then you can

43
00:02:34,610 --> 00:02:35,890
call it when you need to.

44
00:02:35,890 --> 00:02:38,980
This is something that's going to be more useful for

45
00:02:38,980 --> 00:02:44,900
template language authors to use to really speed up the site.

46
00:02:44,900 --> 00:02:49,510
Now there are a lot of different properties that a template is going to have

47
00:02:49,510 --> 00:02:53,790
so you call a template tag, you give it an Id, and then it sits there

48
00:02:53,790 --> 00:02:55,610
until you're ready to use it.

49
00:02:55,610 --> 00:03:00,350
Now what's really really nice about the template tag is 

50
00:03:00,350 --> 00:03:04,720
since it's sitting in the DOM and not being used and it's actually invisible,

51
00:03:04,720 --> 00:03:09,130
you don't have any performance penalties while it's just sitting there.

52
00:03:09,130 --> 00:03:12,780
Now this is something that's going to be very useful for the perception

53
00:03:12,780 --> 00:03:16,310
of speed so there's not going to be any page reflows or

54
00:03:16,310 --> 00:03:18,460
anything like that while you're using the template tag.

55
00:03:18,460 --> 00:03:20,990
Anyway, there's a great tutorial on how to use this over at 

56
00:03:20,990 --> 00:03:24,820
html5rocks.com and you can find that link in the show notes

57
00:03:24,820 --> 00:03:27,580
at youtube.com/gotreehouse.

58
00:03:27,580 --> 00:03:29,240
Very cool stuff.

59
00:03:29,240 --> 00:03:33,080
Nex up is a CSS3 patterns gallery.

60
00:03:33,080 --> 00:03:36,510
Now of course you can go ahead and use images to generate

61
00:03:36,510 --> 00:03:40,970
nice patterns and textures on your websites and your background images,

62
00:03:40,970 --> 00:03:44,340
but this is actually a way to do it with CSS.

63
00:03:44,340 --> 00:03:47,440
Now if you scroll through here, you'll see a bunch

64
00:03:47,440 --> 00:03:50,080
of really cool looking patterns.

65
00:03:50,080 --> 00:03:56,290
There's a rainbow pattern here, upholstery, zig-zags, arrows, etc.,

66
00:03:56,290 --> 00:04:02,340
so if I go ahead and click on one of these, it will give you the CSS

67
00:04:02,340 --> 00:04:05,470
that will actually generate this pattern.

68
00:04:05,470 --> 00:04:08,050
Now again, this isn't using any images.

69
00:04:08,050 --> 00:04:10,830
This is all being built in pure CSS. 

70
00:04:10,830 --> 00:04:14,550
Now what that means is that you'll get really fast load times

71
00:04:14,550 --> 00:04:18,860
because you're not loading in these images that need to repeat,

72
00:04:18,860 --> 00:04:23,080
you're not worrying about how they have to repeat across a background

73
00:04:23,080 --> 00:04:27,300
and if you are lining up the seams just right, and the other nice thing

74
00:04:27,300 --> 00:04:34,650
is that it's CSS, so it's all basically vector based and that means that

75
00:04:34,650 --> 00:04:39,130
you can scale up to these high DPI displays really nicely

76
00:04:39,130 --> 00:04:42,850
without worrying about any kind of jagged pixels.

77
00:04:42,850 --> 00:04:46,240
So, very cool stuff--definitely worth checking out.

78
00:04:46,240 --> 00:04:50,020
>> Jagged pixels sounds like a great album name >> I agree.

79
00:04:50,020 --> 00:04:53,360
for a web-- >> We're starting a band. >> Yeah, a web band.

80
00:04:53,360 --> 00:04:54,710
I don't if we mentioned that.

81
00:04:54,710 --> 00:04:58,400
>> Yeah. >> Jagged Pixels. >> First album. >> Coming this fall. >> Look for it.

82
00:04:58,400 --> 00:05:02,190
Next up, we have an article on CyPoint called the Beginner's Guide

83
00:05:02,190 --> 00:05:04,530
to JavaScript's Dates and Times.

84
00:05:04,530 --> 00:05:08,810
This is a great walkthrough about learning how to use the date and times

85
00:05:08,810 --> 00:05:13,120
in Javascript and it even goes so far as talking about some of the new 

86
00:05:13,120 --> 00:05:18,010
HTML5 date elements that you can attach to different inputs.

87
00:05:18,010 --> 00:05:20,680
Now it goes through, shows you very simply how to create

88
00:05:20,680 --> 00:05:25,830
a new JavaScript date and you can even do that with certain strings.

89
00:05:25,830 --> 00:05:29,380
So there's different options that you can give it--getting the date,

90
00:05:29,380 --> 00:05:33,470
getting the full year, getting the month, and you can even go so far as

91
00:05:33,470 --> 00:05:37,840
programmatically setting the date via a blank date object.

92
00:05:37,840 --> 00:05:41,270
So they walk through--they give a really nice walkthrough

93
00:05:41,270 --> 00:05:44,480
of just kind of getting started and an introduction to it.

94
00:05:44,480 --> 00:05:46,280
Once you get a little bit more advanced, I recommend

95
00:05:46,280 --> 00:05:49,090
using a library such as moment.js.

96
00:05:49,090 --> 00:05:52,800
That's a really great one that handles formatting and abstractions for you

97
00:05:52,800 --> 00:05:56,070
as well as the inconsistencies in different browsers.

98
00:05:56,070 --> 00:05:57,720
>> Very cool stuff. >> Yeah. 

99
00:05:57,720 --> 00:06:01,550
So, Nick, Paul Boag was in town and I had a chance to interview him.

100
00:06:01,550 --> 00:06:04,690
Cool. >> Check it out. >> Check it out. >>

101
00:06:04,690 --> 00:06:32,530
[?Music playing ?] 

102
00:06:32,530 --> 00:06:36,190
Strictly Business with Jason Seifer

103
00:06:36,190 --> 00:06:43,810
I'm Jason Seifer [Jason Seifer].

104
00:06:43,810 --> 00:06:45,650
I'm here with The Treehouse Show, and we're doing

105
00:06:45,650 --> 00:06:49,120
an interview today with the one and only Paul Boag.

106
00:06:49,120 --> 00:06:51,390
[Paul Boag] Paul, thank you very much for being here today.

107
00:06:51,390 --> 00:06:54,360
You're welcome.

108
00:06:54,360 --> 00:06:58,030
Web design.

109
00:07:02,570 --> 00:07:04,280
Yes.

110
00:07:14,110 --> 00:07:15,960
Ahhh.

111
00:07:20,910 --> 00:07:22,840
[Glasses clinking]

112
00:07:28,130 --> 00:07:29,350
Mobile.

113
00:07:31,160 --> 00:07:33,320
Oh, absolutely.

114
00:07:35,890 --> 00:07:37,730
Web development.

115
00:07:37,730 --> 00:07:40,950
Oh, no.

116
00:07:41,860 --> 00:07:43,090
[Glasses clinking]

117
00:07:47,000 --> 00:07:49,310
Ahh.

118
00:07:54,710 --> 00:07:57,560
Wow, Jason--thanks for asking the really hard-hitting questions.

119
00:07:57,560 --> 00:08:00,070
>> No problem. >> That was a really insightful interview. 

120
00:08:00,070 --> 00:08:05,290
Next up is Gumby, which is yet another CSS framework.

121
00:08:05,290 --> 00:08:08,880
We talk about lots of CSS frameworks here on the show but

122
00:08:08,880 --> 00:08:11,610
it's a very good one so we should take a look.

123
00:08:11,610 --> 00:08:16,150
If we go ahead and scroll down here on the Gumby 2 website,

124
00:08:16,150 --> 00:08:22,810
you will see that it's using Sass and Sass, of course, allows you

125
00:08:22,810 --> 00:08:27,490
generate your CSS and gives you all sorts of nice functionality

126
00:08:27,490 --> 00:08:28,280
on top of that.

127
00:08:28,280 --> 00:08:33,600
It's a very flexible framework, meaning that it will across a wide

128
00:08:33,600 --> 00:08:36,520
variety of screen resolutions.

129
00:08:36,520 --> 00:08:38,720
They tout it as being very simple.

130
00:08:38,720 --> 00:08:42,020
Of course, it should be--it's very robust.

131
00:08:42,020 --> 00:08:42,659
You got the idea.

132
00:08:42,659 --> 00:08:44,590
It's another CSS framework.

133
00:08:44,590 --> 00:08:46,240
It's a really good one.

134
00:08:46,240 --> 00:08:50,000
When choosing a CSS framework, you should definitely consult

135
00:08:50,000 --> 00:08:52,450
your doctor first--no, just kidding.

136
00:08:52,450 --> 00:08:55,390
You should definitely try out different types of CSS frameworks 

137
00:08:55,390 --> 00:08:59,830
to determine which one is the best for the project that you're working on

138
00:08:59,830 --> 00:09:03,110
and also the one that matches your own personal preferences

139
00:09:03,110 --> 00:09:08,270
because there are so many different nuances there and 

140
00:09:08,270 --> 00:09:14,550
while one, two or ten different CSS frameworks might be the right one

141
00:09:14,550 --> 00:09:18,540
>> for a particular project, it might not be the right one for you >> Exactly. 

142
00:09:18,540 --> 00:09:20,590
or your particular style so--

143
00:09:20,590 --> 00:09:24,450
If it takes more then four hours to implement a CSS framework, 

144
00:09:24,450 --> 00:09:27,210
>> you might want to consider using a different one. >> Yeah.

145
00:09:27,210 --> 00:09:32,800
But basically, there's not a best CSS framework so that's why

146
00:09:32,800 --> 00:09:34,540
we cover a whole bunch of them here on the show.

147
00:09:34,540 --> 00:09:37,200
>> And they're all useful. >> Very much so.

148
00:09:37,200 --> 00:09:40,560
Next up we have a quick plug-in called SVGeezy.

149
00:09:40,560 --> 00:09:46,890
This is a really great JavaScript plug-in that will look for SVG images

150
00:09:46,890 --> 00:09:51,180
on your site and if your browser does not support SVGs,

151
00:09:51,180 --> 00:09:55,100
it will roll back to a PNG version automatically.

152
00:09:55,100 --> 00:09:56,900
This is going to be good for older browsers.

153
00:09:56,900 --> 00:10:00,190
We're not going to name any names but older browsers

154
00:10:00,190 --> 00:10:02,110
that don't have SVG support.

155
00:10:02,110 --> 00:10:05,840
>> Netscape? >> Yeah. Mosaic--we're looking at you.

156
00:10:05,840 --> 00:10:09,970
So, very quick, there's a download on GitHub link,

157
00:10:09,970 --> 00:10:12,100
and you'll be able to find that in the show notes.

158
00:10:12,100 --> 00:10:15,750
Pretty cool--next up is simple icons.

159
00:10:15,750 --> 00:10:19,580
As the name implies, it's a simple set of icons.

160
00:10:19,580 --> 00:10:26,760
These are all in PNG format in 11 sizes from 16 pixels all the way up to

161
00:10:26,760 --> 00:10:34,680
4,096 pixels so if you have to go ahead and create a favicon for your 

162
00:10:34,680 --> 00:10:39,040
website and you want to try to use one of these, that might be

163
00:10:39,040 --> 00:10:44,540
a good way to go or if you need to include one of these in an 

164
00:10:44,540 --> 00:10:46,550
IMAX feature film, they have the resolution that 

165
00:10:46,550 --> 00:10:48,220
allows you to do that as well.

166
00:10:48,220 --> 00:10:54,130
So pretty cool stuff and in all seriousness, this is a way for you

167
00:10:54,130 --> 00:10:58,750
to go ahead and include an icon at normal size and also

168
00:10:58,750 --> 00:11:02,850
include the same file for retina resolutions.

169
00:11:02,850 --> 00:11:05,810
They get extra points for having The Treehouse logo in there. 

170
00:11:05,810 --> 00:11:08,200
>> Boom. >> Boom. >> Boom.

171
00:11:08,200 --> 00:11:10,800
So I think that's all we've got for this episode. 

172
00:11:10,800 --> 00:11:11,880
Nick, who are you on Twitter?

173
00:11:11,880 --> 00:11:12,930
I'm @Nickrp.

174
00:11:12,930 --> 00:11:14,560
And I'm @JSeifer.

175
00:11:14,560 --> 00:11:16,740
For show notes and more about anything we talked about,

176
00:11:16,740 --> 00:11:20,580
check out our YouTube channel at youtube.com/gotreehouse.

177
00:11:20,580 --> 00:11:23,670
And of course, if you'd like to see more videos like this one where

178
00:11:23,670 --> 00:11:27,400
we talk about web design, web development, starting a business

179
00:11:27,400 --> 00:11:31,620
and more, be sure to check us out at teamtreehouse.com.

180
00:11:31,620 --> 00:11:34,550
Thanks so much for watching, and we'll see you next week.

181
00:11:34,550 --> 00:11:37,550
The Treehouse Show