1
00:00:01,520 --> 00:00:03,510
[Nick Pettit] I'm Nick Pettit. >>[Jason Seifer] I'm Jason Seifer.

2
00:00:03,510 --> 00:00:05,000
[Nick Pettit] And you're watching the Treehouse Show. 

3
00:00:05,000 --> 00:00:10,070
Your weekly dose of Internets where we talk about all things Web design, Web development, and more.

4
00:00:10,070 --> 00:00:12,280
[Jason Seifer] In this episode of the Treehouse Show, we'll be talking about

5
00:00:12,280 --> 00:00:17,310
icon fonts, the Flight Javascript framework, and a new CSS grid.

6
00:00:17,310 --> 00:00:19,830
[Nick Pettit] Let's check it out!

7
00:00:19,830 --> 00:00:25,860
[The treehouse Show] ?[music]?

8
00:00:25,860 --> 00:00:28,860
First up, is this really cool blog post from a Line 25 called, 

9
00:00:28,860 --> 00:00:34,160
"How to Create a Simple Collapsing Header Effect."

10
00:00:34,160 --> 00:00:38,270
This is a relatively new trend that we've been seeing where the page header or

11
00:00:38,270 --> 00:00:43,290
banner would gradually shorten and disappear when you scroll up the page.

12
00:00:43,290 --> 00:00:48,180
The main idea is to use a fixed position header and banner, 

13
00:00:48,180 --> 00:00:54,150
and then use a relatively positioned content <div> below fixed position header and banner <div>s.

14
00:00:54,150 --> 00:00:59,790
The header <div> is given a higher Z index to make this kind of design possible.

15
00:00:59,790 --> 00:01:01,350
[Jason Seifer] You know--this is a really cool trend that

16
00:01:01,350 --> 00:01:05,910
we're seeing--you know--here in 2013 or '13 as the kids say.

17
00:01:05,910 --> 00:01:11,860
[Nick Pettit] That's right. That is the 2013 design trend--#2013 trend.

18
00:01:11,860 --> 00:01:14,980
[Jason Seifer] Next up we have a project called Textillate.js.

19
00:01:14,980 --> 00:01:21,580
Textillate is a jQuery plugin that let's you apply CSS 3 animation to any text.

20
00:01:21,580 --> 00:01:27,870
it works via data attributes, so you can use any CSS 3 effect that you can think of to make it work.

21
00:01:27,870 --> 00:01:33,310
An example that we see on the site is data in effect equals rolling.

22
00:01:33,310 --> 00:01:36,900
Now if you're not satisfied by just using the data effects, 

23
00:01:36,900 --> 00:01:41,710
you can call them programatically as well via jQuery functions--you know--be it

24
00:01:41,710 --> 00:01:44,530
in the header or footer--you know--whatever.

25
00:01:44,530 --> 00:01:47,820
Wherever you place the Java Script, you can just throw one of these functions in,

26
00:01:47,820 --> 00:01:50,740
and chain them together like you would expect from any jQuery plugin.

27
00:01:51,920 --> 00:02:00,450
[Nick Pettit] Pretty cool. Next up is this really cool blog post from Fog Creek called, "Trello uses an icon font and so can you!"

28
00:02:00,450 --> 00:02:08,600
[Narrator] And how. >>[Nick Pettit] Trello recently converted their icons from a CSS sprite image to an icon font.

29
00:02:08,600 --> 00:02:14,210
They saved space because icon fonts are smaller, it's easier to style them via CSS,

30
00:02:14,210 --> 00:02:17,630
and shadows and gradients can be easily applied.

31
00:02:17,630 --> 00:02:22,040
The posts on the Trello blog is a walk through of how they did it.

32
00:02:22,040 --> 00:02:29,270
Naming glyphs or letters, applying hints, converting to different formats in loading into browsers.

33
00:02:29,270 --> 00:02:34,790
Not every browser supports all font types, so it's necessary to convert them.

34
00:02:34,790 --> 00:02:40,340
It's very time consuming to do this, but the payoff is actually pretty huge.

35
00:02:40,340 --> 00:02:44,050
[Jason Seifer] Yeah. You know--especially switching over from CSS spriting.

36
00:02:44,050 --> 00:02:46,240
[Nick Pettit] I mean--I think the thing that I like the most about it

37
00:02:46,240 --> 00:02:52,110
is that this is very similar to SVGs in that you can use those to support high resolution displays.

38
00:02:52,110 --> 00:02:54,650
[Jason Seifer] Yeah. That's pretty awesome. >>[Nick Pettit] Pretty cool.

39
00:02:54,650 --> 00:02:58,450
[Jason Seifer] Next up we have a--another font called Blokk.

40
00:02:58,450 --> 00:03:02,100
Blokk is just block lettering.

41
00:03:02,100 --> 00:03:06,020
So if you don't want to use the Lorem Ipsum placeholder text,

42
00:03:06,020 --> 00:03:09,920
this is a font to display blocks instead of words.

43
00:03:09,920 --> 00:03:13,160
Now this might look--you know--quite a bit better on your screen.

44
00:03:13,160 --> 00:03:18,490
You know--maybe people don't want to see the text or are confused by the bits of Latin,

45
00:03:18,490 --> 00:03:20,160
So go ahead and use the Blokk font.

46
00:03:20,970 --> 00:03:25,050
[Nick Pettit] No, that's a really interesting point because on the one hand I feel like

47
00:03:25,050 --> 00:03:29,190
you should actually use Lorem Ipsum text because it actually shows you

48
00:03:29,190 --> 00:03:33,320
visually what text will look like on the page,

49
00:03:33,320 --> 00:03:38,300
because text kind of adds a little bit of texture to Web pages.

50
00:03:38,300 --> 00:03:41,770
But, at the same time you're right; the Lorem Ipsum text does 

51
00:03:41,770 --> 00:03:43,820
have a tendency to confuse clients.

52
00:03:43,820 --> 00:03:48,660
They think--you know--, "Why is this Latin stuff all over my Web page?" So--

53
00:03:48,660 --> 00:03:50,030
[Jason Seifer] Yeah, "This isn't the copy I sent you."

54
00:03:50,030 --> 00:03:56,000
[Nick Pettit] Yeah. Exactly. So the Blokk font definitely does a good job of replacing that.

55
00:03:56,000 --> 00:03:58,160
Next up is back stretch.

56
00:03:58,160 --> 00:04:01,160
Back stretch is a jQuery plugin--

57
00:04:01,160 --> 00:04:01,710
[Jason Seifer] I'm doing one of those right now.

58
00:04:01,710 --> 00:04:03,270
[Nick Pettit] Doing a little back stretch? >>[Jason Seifer] Yeah.

59
00:04:03,270 --> 00:04:08,480
[Nick Pettit] It's a jQuery plugin that allows you to add a dynamically resized.

60
00:04:08,480 --> 00:04:13,260
slideshow capable background image to any page or element.

61
00:04:13,260 --> 00:04:16,850
Images are fetched after other content has been loaded.

62
00:04:16,850 --> 00:04:20,720
So, it goes ahead and helps with load time.

63
00:04:20,720 --> 00:04:26,960
This can be useful when designing certain types of sites such as portfolio sites for example.

64
00:04:26,960 --> 00:04:32,890
I think the really cool thing about this is that when you go ahead and resize the browser-- >>[Jason Seifer] Mm-hmm.

65
00:04:32,890 --> 00:04:37,510
you can actually see the background image resized with the page.

66
00:04:37,510 --> 00:04:42,400
So it does--you know--all that complicated math for you so--pretty neat.

67
00:04:42,400 --> 00:04:44,870
[Jason Seifer] Yeah. I could definitely see a use for that. >>[Nick Pettit] Definitely. 

68
00:04:44,870 --> 00:04:48,790
[Jason Seifer] Next up we have a new JavaScript framework called Flight.

69
00:04:48,790 --> 00:04:52,640
Flight is an event drive Web framework from Twitter.

70
00:04:52,640 --> 00:04:56,090
Now, it's interesting because it's organized around the DOM model,

71
00:04:56,090 --> 00:05:00,720
and takes a modular approach to organizing behavior so smaller components

72
00:05:00,720 --> 00:05:03,160
can be strung together to form an application.

73
00:05:03,160 --> 00:05:10,090
Components enforce a strict separation of concerns and they can't be referenced by other components.

74
00:05:10,090 --> 00:05:14,010
And components can be attached to elements via the attach to method,

75
00:05:14,010 --> 00:05:17,830
and functional mix ins are supported so that behavior 

76
00:05:17,830 --> 00:05:21,340
isn't clobbered if you decide to write over a different function.

77
00:05:21,340 --> 00:05:28,230
Now this is going to be a really interesting entrant--I think--into the arena of JavaScript frameworks

78
00:05:28,230 --> 00:05:30,990
because it is so modular and easily testable.

79
00:05:30,990 --> 00:05:34,800
Plus--you know--it's got the backing of Twitter, so it'll be interesting to see where it goes.

80
00:05:34,800 --> 00:05:37,720
And Twitter apparently uses this all around their own site.

81
00:05:37,720 --> 00:05:41,140
[Nick Pettit] You know--I can really see this taking flight.

82
00:05:41,140 --> 00:05:44,290
[Jason Seifer] Oh, that's why they named it that. >>[Nick Pettit] Yep. Exactly. >>[Jason Seifer] Hunh.

83
00:05:44,290 --> 00:05:46,470
I thought it was something else. >>[Nick Pettit] Boom.

84
00:05:46,470 --> 00:05:55,280
Next up is Unsemantic, which is a new CSS framework that is the successor to the 960 grid system.

85
00:05:55,280 --> 00:05:58,320
It works in a similar way, but instead of being a set of columns, 

86
00:05:58,320 --> 00:06:01,730
it's entirely based on percentages. >>[Jason Seifer] Wow! That's really cool.

87
00:06:01,730 --> 00:06:05,020
Something that is actually pretty cool about it--I think--is the author

88
00:06:05,020 --> 00:06:08,540
of Unsemantic is the same author as 960 GS

89
00:06:08,540 --> 00:06:12,680
So, he can legitimately call it the successor to 960 GS.

90
00:06:12,680 --> 00:06:14,670
[Nick Pettit] And if you're building responsive Web sites,

91
00:06:14,670 --> 00:06:18,460
this would be--you know--a really good framework to go ahead and try to use.

92
00:06:18,460 --> 00:06:20,760
['90's Web Guy] Whoa, whoa, whoa. Hey Nicky P! Did you just say responsive?

93
00:06:20,760 --> 00:06:23,270
[Nick Pettit] I did. >>[Jason Seifer] Hey '90's Web design guy.

94
00:06:23,270 --> 00:06:25,000
['90s Web Guy] Jason--theme song. 

95
00:06:25,000 --> 00:06:27,400
?[music]?

96
00:06:27,400 --> 00:06:31,240
['90's Web Guy] Yeah. >>[Jason Seifer] Nice. >>['90's Web Guy] Nice. So--heard you talking about responsive stuff.

97
00:06:31,240 --> 00:06:35,480
Wanted to let you know that responsive Web sites is something 

98
00:06:35,480 --> 00:06:39,510
that we take into account in the Photoshop Deep Dive.

99
00:06:39,510 --> 00:06:41,310
[Jason Seifer] Okay. >>[Nick Pettit] All right. >>['90's Web Guy] Photoshop Deep Dive.

100
00:06:41,310 --> 00:06:43,360
Allison is our expert teacher.

101
00:06:43,360 --> 00:06:47,640
She's been rocking it; we have the whole thing up there now including

102
00:06:47,640 --> 00:06:52,880
guest appearance by yours truly in the old slices and safer Web stage.

103
00:06:52,880 --> 00:06:58,240
Need a clip--we got a clip--got a clip here--slice like a ninja, I cut like a razor blade.

104
00:06:58,240 --> 00:07:01,810
[Jason Seifer] I think we can actually play a clip; you don't have to reenact a clip.

105
00:07:01,810 --> 00:07:04,490
['90's Web Guy] Well I think Real Player was kind of buffering--you never trust that thing Jason.

106
00:07:04,490 --> 00:07:10,340
All right so--slice like a ninja, cut like a razor blade, boom. Careful. Whew. Pssh. >>[Jason Seifer] All right.

107
00:07:10,340 --> 00:07:13,570
Whew. Shh. Clip.

108
00:07:13,570 --> 00:07:19,640
[Deep Dive--Photoshop Foundations: Slices and Save for the Web Introduction to Slicing with Allison Grayce] ?[music]?

109
00:07:19,640 --> 00:07:22,370
[Allison Grayce] If you are creating anything in Photoshop to be used on the Web,

110
00:07:22,370 --> 00:07:25,290
it's important to think about how they should be properly saved--

111
00:07:25,290 --> 00:07:28,310
like what file type they should be and what size they should be.

112
00:07:28,310 --> 00:07:32,760
Knowing this type of information will make you much more invaluable as a designer.

113
00:07:32,760 --> 00:07:37,050
['90's Web Guy] Did somebody say slicing images?

114
00:07:37,050 --> 00:07:39,570
[Allison Grayce] Oh. Hey '90's web guy. >>['90's Web Guy] What's up?

115
00:07:39,570 --> 00:07:43,750
[Allison Grayce] What's going on? >>['90's Web Guy] Well--I thought I heard you talk about slicing up images.

116
00:07:43,750 --> 00:07:47,520
And slicing happens to be--pssh--my specialty.

117
00:07:47,520 --> 00:07:50,780
[Allison Grayce] Really? >>['90's Web Guy] So--you want some help or-- >>[Allison Grayce] That'd be great.

118
00:07:50,780 --> 00:07:52,040
['90's Web Guy] All right. Cool. Cool. 

119
00:07:52,040 --> 00:07:58,070
So--the only way to get a button--with rounded corners--is to design it in Photoshop first--right?

120
00:07:58,780 --> 00:08:01,690
And then you slice like a ninja, cut like a razor blade.

121
00:08:01,690 --> 00:08:04,690
And then you put them back together with a table--right?

122
00:08:04,690 --> 00:08:10,720
So, you've got your left side, your right side, put them on either side of a table cell where the button label goes.

123
00:08:10,720 --> 00:08:16,000
Now--it's super tricky because the rounded images match the background color of the middle cell.

124
00:08:16,000 --> 00:08:19,580
That's where the label-- >>[Allison Grayce] No, no, no, no, no. >>['90's Web Guy] What am I doing? What?

125
00:08:19,580 --> 00:08:22,830
[Allison Grayce] We don't really do it like that anymore. >>['90's Web Guy] Huh? >>[Allison Grayce] No.

126
00:08:22,830 --> 00:08:30,360
With improvements in CSS, many graphics that we used to have to slice up--like a razor blade-- >>['90's Web Guy] Yeah. 

127
00:08:30,360 --> 00:08:33,669
[Allison Grayce] --can now entirely be created in code.

128
00:08:33,669 --> 00:08:37,080
So--instead of all those extra images, we can just declare a border radius

129
00:08:37,080 --> 00:08:40,000
of--let's say--5 pixels and be done with it

130
00:08:40,000 --> 00:08:43,659
['90's Web Guy] Entirely in code--that's crazy talk--right? >>[Allison Grayce] I know.

131
00:08:44,690 --> 00:08:49,650
['90's Web Guy] So there it is--right? Photoshop Deep Dive coming at ya; it's all out there. It's fantastic.

132
00:08:49,650 --> 00:08:52,030
[Jason Seifer] Yeah. That's pretty cool. >>['90's Web Guy] Me--I'm thinking--in the future

133
00:08:52,030 --> 00:08:58,180
I might do a Deep Dive; it could be Lotus Notes, or it could be this new thing--mobile technology.

134
00:08:58,180 --> 00:09:00,420
Perhaps you've heard of it? >>[Jason Seifer] It may be the future.

135
00:09:00,420 --> 00:09:03,000
['90's Web Guy] We've got the old "PalmV' right here that I'm rocking.

136
00:09:03,000 --> 00:09:06,450
[Nick Pettit] I think you mean the Palm 5? >>['90's Web Guy] Five?

137
00:09:06,450 --> 00:09:10,750
Nick--one color on this. Not 5. Let's not go crazy--okay?

138
00:09:10,750 --> 00:09:13,240
[Nick Pettit] All right. Leave it to the expert. >>['90's Web Guy] We have the stylus and everything.

139
00:09:13,240 --> 00:09:16,990
All right. '90's guy out. '90s web guy on Twitter. Whoop, whoop.

140
00:09:17,360 --> 00:09:21,430
[Jason Seifer] I guess he was going to answer a page on his beeper.

141
00:09:21,430 --> 00:09:23,490
[Nick Pettit] Probably code 1543.

142
00:09:23,490 --> 00:09:25,680
[Jason Seifer] What is beeper code 1543?

143
00:09:25,680 --> 00:09:28,510
[Nick Pettit] Jason I think that's--that's just for you and me. They'll have to look it up.

144
00:09:28,510 --> 00:09:29,840
[Jason Seifer] Hmm. All right. >>[Nick Pettit] All right.

145
00:09:29,840 --> 00:09:34,400
[Jason Seifer] Well--that about wraps it up. Thanks so much for tuning into this episode of the Treehouse show.

146
00:09:34,400 --> 00:09:40,100
For show notes and more, check out our YouTube channel at YouTube.com/gotreehouse.

147
00:09:40,100 --> 00:09:44,820
[Nick Pettit] And of course on Twitter, I am @NickRP. >>[Jason Seifer] And I am @JSeifer.

148
00:09:44,820 --> 00:09:46,770
['90's Web Guy] And I am @90sWebGuy.

149
00:09:46,770 --> 00:09:49,390
[Jason Seifer] How'd he get back there? >>[Nick Pettit] I don't know.

150
00:09:49,390 --> 00:09:51,780
This episode was brought to you by Treehouse. 

151
00:09:51,780 --> 00:09:56,450
The best way to learn how to design and develop for the Web and mobile.

152
00:09:56,450 --> 00:09:59,530
Be sure to check us out at TeamTreehouse.com.

153
00:09:59,530 --> 00:10:05,160
Thank you so much for watching, and we'll see you next week.

154
00:10:05,160 --> 00:10:10,910
[treehouse] ?[music]?

155
00:10:10,910 --> 00:10:14,560
If you'd like to see more advanced videos and tutorials like this one,

156
00:10:14,560 --> 00:10:18,380
go to TeamTreehouse.com and start learning for free.

157
00:10:18,380 --> 00:10:39,040
?[music]?