1
00:00:00,150 --> 00:00:02,150
I'm Nick Pettit. >> I'm Jason Seifer.

2
00:00:02,150 --> 00:00:04,200
[Nick] And you're watching The Treehouse Show, your weekly dose of

3
00:00:04,200 --> 00:00:08,580
internet where we talk about all things web design, web development, and more.

4
00:00:08,580 --> 00:00:10,790
[Jason] In this episode we'll be talking about CSS3,

5
00:00:10,790 --> 00:00:15,730
multiple background images, Ember.js, Favicons, and more.

6
00:00:15,730 --> 00:00:17,730
[Nick] Let's check it out.

7
00:00:17,730 --> 00:00:21,900
[treehouse show]

8
00:00:21,900 --> 00:00:26,110
[Nick] First up is a blog post from Philip Walton called

9
00:00:26,110 --> 00:00:30,740
"Decoupling Your HTML, CSS, and JavaScript."

10
00:00:30,740 --> 00:00:34,750
Of course, HTML, CSS, and JavaScript form the structural,

11
00:00:34,750 --> 00:00:39,180
presentational, and behavioral layers of front end,

12
00:00:39,180 --> 00:00:44,220
and it's important to try and separate them as much as you possibly can.

13
00:00:44,220 --> 00:00:47,700
In this article he goes over a couple of different ways

14
00:00:47,700 --> 00:00:50,270
that you can keep that clean separation.

15
00:00:50,270 --> 00:00:52,630
I'm just going to talk about two here.

16
00:00:52,630 --> 00:00:56,200
The first one is Overly Complex Selectors.

17
00:00:56,200 --> 00:00:58,580
Now I've actually tweeted about this before.

18
00:00:58,580 --> 00:01:03,540
You don't want to have CSS Selectors that are too complicated.

19
00:01:03,540 --> 00:01:06,180
You want to have stuff that's actually pretty simple,

20
00:01:06,180 --> 00:01:09,110
not necessarily tied to any specific HTML

21
00:01:09,110 --> 00:01:13,310
with too many classes and too many IDs.

22
00:01:13,310 --> 00:01:17,870
Rather, you want to try to create stuff that's reusable as much as possible.

23
00:01:17,870 --> 00:01:20,170
It seems a little bit counterintuitive,

24
00:01:20,170 --> 00:01:23,080
but after you do it for awhile, it starts to become second nature.

25
00:01:23,080 --> 00:01:27,960
Next up are Classes With More Than One Responsibility.

26
00:01:27,960 --> 00:01:31,390
It can be very tempting to try and roll in a bunch of

27
00:01:31,390 --> 00:01:34,250
functionality into a single CSS class,

28
00:01:34,250 --> 00:01:38,470
but you should try to separate their purposes a little bit.

29
00:01:38,470 --> 00:01:41,730
So you might have one class that styles a button and then

30
00:01:41,730 --> 00:01:44,300
if you have multiple button and colors, for example,

31
00:01:44,300 --> 00:01:47,620
it might be good to create separate classes for each button color

32
00:01:47,620 --> 00:01:50,280
and the different styles that go with each color.

33
00:01:50,280 --> 00:01:53,150
And that way you have two separate classes, and you can apply them

34
00:01:53,150 --> 00:01:56,940
to the same element, and then that makes your CSS a lot more reusable.

35
00:01:56,940 --> 00:02:00,850
There's a bunch more tips in this article, so I highly recommend you check it out.

36
00:02:00,850 --> 00:02:04,550
[Jason] Very nice. Really, really, thought-provoking material. >> [Nick] Yep.

37
00:02:04,550 --> 00:02:08,250
[Jason] Next up we have a web site called explainshell.com.

38
00:02:08,250 --> 00:02:11,160
This is really, really useful if you're unfamiliar with

39
00:02:11,160 --> 00:02:14,170
command line arguments and what exactly they do.

40
00:02:14,170 --> 00:02:17,330
So it's really great—you can put in practically any command

41
00:02:17,330 --> 00:02:20,630
and then it'll give you a nice diagram of what it means.

42
00:02:20,630 --> 00:02:23,850
Now this is a lot easier to see if you just

43
00:02:23,850 --> 00:02:25,850
check out one of the examples on the site.

44
00:02:25,850 --> 00:02:29,280
So here is the tar command, and you can click on that,

45
00:02:29,280 --> 00:02:32,900
and it breaks it down for you with exactly what's going on.

46
00:02:32,900 --> 00:02:35,900
So there's the command and then you can even

47
00:02:35,960 --> 00:02:37,670
mouse over each of the different options,

48
00:02:37,670 --> 00:02:41,130
and it will give you a description of what's going on here.

49
00:02:41,130 --> 00:02:44,770
So it works with a lot of different commands.

50
00:02:44,770 --> 00:02:47,010
I haven't found one yet that it hasn't worked with,

51
00:02:47,010 --> 00:02:49,540
and check that out. explainshell.com.

52
00:02:49,540 --> 00:02:52,740
[Nick] Huh. That's funny. I actually read that as "explains hell."

53
00:02:52,740 --> 00:02:57,130
Because you know, the shell is a really scary place for a designer.

54
00:02:57,130 --> 00:03:00,260
[Jason] No, that's legit. I read it that way, too.

55
00:03:00,260 --> 00:03:03,800
[Nick] Oh, okay. But it's "explainshell." >> [Jason] Yeah. >> [Nick] All right.

56
00:03:03,900 --> 00:03:06,310
Next up is another blog post over on Developer Drive

57
00:03:06,310 --> 00:03:09,850
about CSS3 multiple background images.

58
00:03:09,850 --> 00:03:13,510
Now in CSS3, you can actually have more than one

59
00:03:13,510 --> 00:03:16,120
background applied to the same element,

60
00:03:16,120 --> 00:03:20,230
so if you have some transparent images like some transparent

61
00:03:20,230 --> 00:03:24,870
.pngs with an alpha layer, you could go ahead and stack those up,

62
00:03:24,870 --> 00:03:28,690
and then you could even put like a gradient or a solid color behind them.

63
00:03:28,690 --> 00:03:30,900
So— >> [Jason] Does that work with animated gifs?

64
00:03:30,900 --> 00:03:34,930
Like, could I have multiple, like transparent animated gifs?

65
00:03:34,930 --> 00:03:38,650
[Nick] I actually don't know, but I assume you could.

66
00:03:38,650 --> 00:03:40,410
I don't see why not. >> [Jason] Sounds wonderful.

67
00:03:40,410 --> 00:03:45,336
[Nick] That would be great. Yeah, just having multiple animated gifs.

68
00:03:45,336 --> 00:03:47,350
Actually, that sounds terrible.

69
00:03:47,350 --> 00:03:51,140
So, in this post they describe how you can use a couple of different

70
00:03:51,140 --> 00:03:56,950
images and actually reuse the same image to create this nice little header here.

71
00:03:56,950 --> 00:03:59,410
So I'm actually going to scroll down a bit—there we go.

72
00:03:59,410 --> 00:04:04,610
So they have this grassy texture that they've applied multiple times,

73
00:04:04,610 --> 00:04:06,610
and it just kind of repeats across, and then

74
00:04:06,610 --> 00:04:09,770
they have other images that they've layered on top.

75
00:04:09,770 --> 00:04:14,340
Now the cool thing about this is that the markup is actually fairly simple.

76
00:04:14,340 --> 00:04:19,140
They just have this one header element, and then they have other images that they layered on top.

77
00:04:19,140 --> 00:04:22,089
They need to use images there instead of background images

78
00:04:22,089 --> 00:04:25,500
because they actually go on to animate those,

79
00:04:25,500 --> 00:04:29,110
but the final demo looks pretty cool.

80
00:04:29,110 --> 00:04:31,600
You can actually go ahead and spread out these elements,

81
00:04:31,600 --> 00:04:36,130
and it has a little bit of interactivity when you go ahead and hover over,

82
00:04:36,130 --> 00:04:38,900
but multiple background images are, you know,

83
00:04:38,900 --> 00:04:42,000
a really cool way to maybe save a little bit of bandwidth,

84
00:04:42,000 --> 00:04:45,200
and not use so many different images, or so many different

85
00:04:45,200 --> 00:04:49,050
elements just to create the same look. So pretty nifty.

86
00:04:49,050 --> 00:04:54,150
[Jason] I was just kidding about the multiple animated gifs. That's a terrible idea.

87
00:04:54,150 --> 00:04:58,940
[Nick] It is. >> [Jason] Next up, Ember.js 1.0 has been released.

88
00:04:58,940 --> 00:05:02,480
Ember.js is JavaScript like front end

89
00:05:02,480 --> 00:05:06,280
application framework, and it recently hit the 1.0 milestone.

90
00:05:06,280 --> 00:05:09,770
So, if you aren't using it yet, you should at least check it out.

91
00:05:09,770 --> 00:05:13,530
Now they have a blog post showing kind of what went into it

92
00:05:13,530 --> 00:05:16,830
and the thinking behind Ember.js.

93
00:05:16,830 --> 00:05:20,580
It recently got a little bit of a face lift on the router.

94
00:05:20,580 --> 00:05:24,990
Testing is great.There's an Ember inspector for Chrome.

95
00:05:24,990 --> 00:05:29,170
But if you haven't checked out Ember.js, it's definitely worth taking a look at.

96
00:05:29,170 --> 00:05:33,770
It allows you to write a loss less code when you're creating your JavaScript applications.

97
00:05:33,770 --> 00:05:36,190
It has really interesting templating languages

98
00:05:36,190 --> 00:05:39,760
and overall just makes things a lot smoother. So check that out.

99
00:05:39,760 --> 00:05:41,890
We'll have a link in the Show Notes, which you can get to at

100
00:05:41,890 --> 00:05:44,720
youtube.com/gotreehouse or in iTunes.

101
00:05:44,720 --> 00:05:47,720
Search for us at The Treehouse Show. >> [Nick] Oh, that's pretty cool.

102
00:05:47,720 --> 00:05:49,920
Now something I learned from one of my coworkers,

103
00:05:49,920 --> 00:05:53,650
Andrew Trockley, is that in the U.K., they actually say "rooter."

104
00:05:53,650 --> 00:05:58,420
[Jason] Hmm. >> [Nick] So if you're confused by Jason saying "router," that's what he meant.

105
00:05:58,420 --> 00:06:02,530
That's the translation. >> [Jason] My apologies. >> [Nick] Yep. Anyway.

106
00:06:02,530 --> 00:06:06,440
A Favicon cheat sheet is next, and it's basically—

107
00:06:06,440 --> 00:06:10,490
it's just this really cool list of ways that you can implement

108
00:06:10,490 --> 00:06:14,220
Favicons, or "fave icons" onto your site.

109
00:06:14,220 --> 00:06:18,320
It was compiled from a list of several different resources,

110
00:06:18,320 --> 00:06:22,750
and this is actually really handy because it's more difficult than

111
00:06:22,750 --> 00:06:25,970
it would seem to implement a good Favicon.

112
00:06:25,970 --> 00:06:31,100
You have to get the HTML right for a variety of hardware and software devices.

113
00:06:31,100 --> 00:06:34,800
You also need to make sure that you have the right images,

114
00:06:34,800 --> 00:06:37,200
and of course you also need to make sure that you have

115
00:06:37,200 --> 00:06:40,980
retina images for higher-resolution displays.

116
00:06:40,980 --> 00:06:44,200
And then there's the actual ICO file itself.

117
00:06:44,200 --> 00:06:46,880
You need to make sure that you're using the right

118
00:06:46,880 --> 00:06:48,880
file format, again depending on the hardware

119
00:06:48,880 --> 00:06:50,880
or software device that you're targeting.

120
00:06:50,880 --> 00:06:53,860
After that they list out a bunch of helpful tools that can help you

121
00:06:53,860 --> 00:06:58,810
create Favicons and a bunch of other stuff. Oh. Wow.

122
00:06:58,810 --> 00:07:03,730
Even how to Force a Favicon Refresh, and that's something that's actually super difficult.

123
00:07:03,730 --> 00:07:06,000
Every time I'm putting together Favicons,

124
00:07:06,000 --> 00:07:09,540
I'm always having trouble like getting the browser to let go of

125
00:07:09,540 --> 00:07:14,270
a particular Favicon I've introduced so that I can use a new one.

126
00:07:14,270 --> 00:07:16,270
That's kind of crazy. So.

127
00:07:16,270 --> 00:07:19,290
A really cool list and super helpful.

128
00:07:19,290 --> 00:07:22,040
[Jason] And to go along with that list is

129
00:07:22,040 --> 00:07:24,740
a library called Favico.js.

130
00:07:24,740 --> 00:07:26,740
[Nick] Wow. That's a wonderful segue.

131
00:07:26,740 --> 00:07:30,000
[Jason] Wasn't it? And Favico.js is pretty interesting.

132
00:07:30,000 --> 00:07:32,990
It gives you a bunch of options for working with Favicons

133
00:07:32,990 --> 00:07:36,780
or "fave icons" as we say here on The Treehouse Show.

134
00:07:36,780 --> 00:07:40,390
You can do things like add badges to your Favicon with

135
00:07:40,390 --> 00:07:44,220
different numbers; you can have different animations go along with it.

136
00:07:44,220 --> 00:07:47,050
I mean, check this out. Look, are you ready for pop animation? See that?

137
00:07:47,050 --> 00:07:49,360
[Nick] Whoa. >> [Jason] Look, it keeps popping.

138
00:07:49,360 --> 00:07:51,360
Wow. Oh. I should call a doctor.

139
00:07:51,360 --> 00:07:54,390
You can change the color of the Favicon.

140
00:07:54,390 --> 00:07:57,340
You don't even have to animate. Anyway.

141
00:07:57,340 --> 00:08:00,260
It's really, really easy to use as you would expect from

142
00:08:00,260 --> 00:08:03,780
basically any plugin we talk about here on The Treehouse Show.

143
00:08:03,780 --> 00:08:06,730
So check it out. Favico.js.

144
00:08:06,730 --> 00:08:08,730
[Nick] Very cool stuff. Well next up.

145
00:08:08,730 --> 00:08:11,770
If you're an iOS developer, we we have something for you.

146
00:08:11,770 --> 00:08:15,870
iOS Dev Tools is this wonderful list of—

147
00:08:15,870 --> 00:08:18,730
you guessed it—iOS Dev Tools, and it's basically

148
00:08:18,730 --> 00:08:21,920
inspiration for your next app.

149
00:08:21,920 --> 00:08:25,040
You can get iOS Fonts for your typography.

150
00:08:25,040 --> 00:08:30,150
There's also a bunch of cool design resources that you can go ahead and use.

151
00:08:30,150 --> 00:08:33,760
And then there's Images, Icons, Editors,

152
00:08:33,760 --> 00:08:37,400
Documentation, and you get the idea.

153
00:08:37,400 --> 00:08:39,400
But it's basically just this really wonderful list of

154
00:08:39,400 --> 00:08:43,390
tools that you can use to make your next iPhone app,

155
00:08:43,390 --> 00:08:46,500
which of course is something that we teach on Treehouse,

156
00:08:46,500 --> 00:08:48,700
so be sure to check us out at teamtreehouse.com.

157
00:08:48,700 --> 00:08:51,400
[Jason] Oh, I like that. That was a really nice segue.

158
00:08:51,400 --> 00:08:53,400
[Nick] Really nice segue there.

159
00:08:53,400 --> 00:08:55,900
[Jason] It's also pretty important now that iOS 7 is coming out, and it's going to be taken over.

160
00:08:55,900 --> 00:08:58,190
[Nick] Definitely. >> [Jason] Why do they call it iOS?

161
00:08:58,190 --> 00:09:02,790
Why can't it be uOS or weOS? That sounds a lot nicer and more inclusive.

162
00:09:02,790 --> 00:09:06,400
[Nick] Mm-hmm. [Jason] Next up we have a website called UIBox.

163
00:09:06,400 --> 00:09:12,530
This is a curated library of HTML, CSS, and JavaScript components.

164
00:09:12,530 --> 00:09:15,320
So check it out. We can have a tag here.

165
00:09:15,320 --> 00:09:21,170
We click on "accordion," and we have a bunch of different options for menus and toggles.

166
00:09:21,170 --> 00:09:24,720
These are mostly going to be jQuery plugins, but

167
00:09:24,720 --> 00:09:27,050
there's also some different backbone options.

168
00:09:27,050 --> 00:09:29,540
Look, we've got one there. Backbone auto complete.

169
00:09:29,540 --> 00:09:33,130
So it's just a great place to go to either get some inspiration

170
00:09:33,130 --> 00:09:37,970
for something or find that perfect library that you've been looking for.

171
00:09:37,970 --> 00:09:40,510
[Nick] Yeah, that's a really nice set of design patterns.

172
00:09:40,510 --> 00:09:42,510
Of course we've covered that before.

173
00:09:42,510 --> 00:09:45,380
There's stuff like Pattern Tap, and I think there's one more

174
00:09:45,380 --> 00:09:46,430
that I can't think of the name of—but

175
00:09:46,430 --> 00:09:48,430
[Jason] You can't get enough. >> [Nick] Yeah.

176
00:09:48,430 --> 00:09:53,040
[Jason] I can't get enough. I'll sometimes spend a whole Saturday just browsing these components and crying deeply.

177
00:09:53,040 --> 00:09:55,580
[Nick] Yep. >> [Jason] So that's about all we have time for.

178
00:09:55,580 --> 00:09:57,170
I'm @jseifer on Twitter.

179
00:09:57,170 --> 00:10:01,920
I'm @nickrp. You sound like you're going to say something. >> [Jason] Yeah, I did.

180
00:10:01,920 --> 00:10:03,470
For more information on anything we talked about,

181
00:10:03,470 --> 00:10:06,350
check out our Show Notes at youtube.com/gotreehouse,

182
00:10:06,350 --> 00:10:09,290
or search for us in iTunes at The Treehouse Show.

183
00:10:09,290 --> 00:10:12,170
[Nick] And of course, if you'd like to see more videos like this one,

184
00:10:12,170 --> 00:10:14,690
except these videos are actually much, much better,

185
00:10:14,690 --> 00:10:17,430
be sure to check us out at teamtreehouse.com,

186
00:10:17,430 --> 00:10:20,470
and thanks so much for watching, and we'll see you next week.

187
00:10:20,470 --> 00:10:28,200
[treehouse show]

188
00:10:28,200 --> 00:10:33,400
[laughter]