1
00:00:01,170 --> 00:00:03,180
>>I'm Nick Pettit. >>I'm Jason Seifer.

2
00:00:03,180 --> 00:00:05,160
And you're watching The Treehouse Show, 

3
00:00:05,160 --> 00:00:08,189
your weekly dose of Internets where we talk about all things web design,

4
00:00:08,189 --> 00:00:10,440
web development, and more.

5
00:00:10,440 --> 00:00:13,050
In this episode, we'll be going over a few different tip and tricks

6
00:00:13,050 --> 00:00:14,670
to use in your day-to-day coding.

7
00:00:14,670 --> 00:00:17,520
We'll also be giving you an overview of what's new in Mountain Lion

8
00:00:17,520 --> 00:00:20,000
as well as Rails 4.0.

9
00:00:20,000 --> 00:00:23,950
Let's get into it.

10
00:00:23,950 --> 00:00:26,950
[The Treehouse Show]

11
00:00:26,950 --> 00:00:30,900
First up is Sprite Cow, available at spritecow.com.

12
00:00:30,900 --> 00:00:37,170
Sprite Cow is a pretty nifty tool that you can use to help split up your images on your website.

13
00:00:37,170 --> 00:00:40,030
Oftentimes you'll want to create a sprite

14
00:00:40,030 --> 00:00:42,950
to go ahead and increase front-end performance.

15
00:00:42,950 --> 00:00:46,480
You'll put all of your tiny images into one big image

16
00:00:46,480 --> 00:00:48,990
then go ahead and upload it to Sprite Cow, 

17
00:00:48,990 --> 00:00:54,580
and then you can click on each one of those individual images to get the CSS coordinates

18
00:00:54,580 --> 00:00:57,320
to set the background image for them.

19
00:00:57,320 --> 00:01:02,500
Now, this is pretty nifty because it takes a lot of time to actually do this manually

20
00:01:02,500 --> 00:01:04,810
and create all of those CSS coordinates;

21
00:01:04,810 --> 00:01:07,580
you have to go into Photoshop, calculate all of the pixels, 

22
00:01:07,580 --> 00:01:09,340
it's actually a real pain.

23
00:01:09,340 --> 00:01:13,200
So, instead of doing that, you can just upload your image to Sprite Cow,

24
00:01:13,200 --> 00:01:17,690
it will map it all out for you, and then you can just go ahead and use that in your CSS file.

25
00:01:17,690 --> 00:01:22,660
>>Incredibly, incredibly useful, especially CSS sprites in general,

26
00:01:22,660 --> 00:01:25,500
the process of, you know, taking, like you said, a bunch of tiny images,

27
00:01:25,500 --> 00:01:32,150
putting in 1 big image overall reduce the number of HTTP requests to your server when serving a webpage.

28
00:01:32,150 --> 00:01:35,880
And that will really increase front-end performance by quite a bit.

29
00:01:35,880 --> 00:01:39,000
Those HTTP requests are actually pretty expensive,

30
00:01:39,000 --> 00:01:42,590
so if you're just requesting 1 image, which is your sprite map,

31
00:01:42,590 --> 00:01:46,770
instead of requesting a bunch of tiny images, you will increase front-end performance.

32
00:01:46,770 --> 00:01:49,240
Next up, we're going to be talking about Mountain Lion,

33
00:01:49,240 --> 00:01:51,750
the new operating system released from Apple.

34
00:01:51,750 --> 00:01:55,730
Mountain Lion just came out, and a couple things developers are going to need to take into account--

35
00:01:55,730 --> 00:02:00,250
one thing is Gatekeeper. If you submit your applications to the Mac App Store,

36
00:02:00,250 --> 00:02:04,070
well you're probably already aware of Gatekeeper, but if you don't, 

37
00:02:04,070 --> 00:02:07,380
you'll need to be aware that your users have to actually check a box 

38
00:02:07,380 --> 00:02:11,990
inside system preferences to allow untrusted applications to run.

39
00:02:11,990 --> 00:02:15,600
Other interesting things inside of Mountain Lion are the Notification Center

40
00:02:15,600 --> 00:02:19,040
because, let's face it, we don't have enough distractions day-to-day already,

41
00:02:19,040 --> 00:02:24,000
we now need notifications on our phones and our desktops all at the same time.

42
00:02:24,000 --> 00:02:25,840
Thanks, Mountain Lion, for adding that.

43
00:02:25,840 --> 00:02:32,690
Also new, Xcode 4.4, which is going to bring you up to speed with iOS version 6.0 SDK 

44
00:02:32,690 --> 00:02:36,330
as well as a ton of other features and gigabytes in the download.

45
00:02:36,330 --> 00:02:42,290
Game Center is finally on the Mac. Everyone knows Macs can't play games.

46
00:02:42,290 --> 00:02:44,520
>>Yeah, I thought Macs couldn't play games.

47
00:02:44,520 --> 00:02:47,240
They just had that little hockey-puck mouse--

48
00:02:47,240 --> 00:02:49,790
>>Yeah, just the one button. >>Yeah. >>Exactly.

49
00:02:49,790 --> 00:02:50,870
You couldn't play games.

50
00:02:50,870 --> 00:02:57,730
Also new is Safari 6.0. Safari 6.0 is actually an exciting release web developers.

51
00:02:57,730 --> 00:03:02,590
Some things that it sports are the Web Audio API, CSS Filters, 

52
00:03:02,590 --> 00:03:08,720
HTML5 Web Notifications, so you can actually have webpages notify you too 

53
00:03:08,720 --> 00:03:10,380
instead of just your phone.

54
00:03:10,380 --> 00:03:13,280
There's also HTML5 Timed Text Tracks.

55
00:03:13,280 --> 00:03:17,940
This is very useful for adding things like subtitles to, you know, videos on websites.

56
00:03:17,940 --> 00:03:19,330
I don't know where we would find any of those.

57
00:03:19,330 --> 00:03:22,430
>>Possibly on Team Treehouse.com.

58
00:03:22,430 --> 00:03:24,580
>>Shameless self-promotion.

59
00:03:24,580 --> 00:03:28,670
Also, Safari 6.0 supports the latest JavaScript Standard.

60
00:03:28,670 --> 00:03:31,660
It also has, probably my favorite feature--

61
00:03:31,660 --> 00:03:34,660
I can't figure out a legitimate use for it, but as far as pranks go,

62
00:03:34,660 --> 00:03:39,850
there's Private Browsing Detection built into the JavaScript engine.

63
00:03:39,850 --> 00:03:42,230
>>So when people visit your website, you could actually detect

64
00:03:42,230 --> 00:03:48,260
if they're in private browsing mode, and you could say, like, hey, look behind you--

65
00:03:48,260 --> 00:03:49,350
>>Yeah, look out behind you--

66
00:03:49,350 --> 00:03:50,340
>>Whatcha looking at buddy?

67
00:03:50,340 --> 00:03:54,850
>>I can't actually think of a legitimate use for this other than pranking people.

68
00:03:54,850 --> 00:03:56,630
>>That's a legitimate use.

69
00:03:56,630 --> 00:04:01,830
>>And finally there is a Redesigned Web Inspector in Safari 6.0.

70
00:04:01,830 --> 00:04:06,280
If you would like to read a little bit more about what's new in Mountain Lion,

71
00:04:06,280 --> 00:04:12,720
Ars Technica has a 28-page summary of what's going on written by John Siracusa.

72
00:04:12,720 --> 00:04:16,459
Go ahead and devour all 28 pages should you choose to.

73
00:04:16,459 --> 00:04:18,910
Little bit more depth than we went into on here.

74
00:04:18,910 --> 00:04:23,390
>>Just a little bit, like 28 pages worth of more depth.

75
00:04:23,390 --> 00:04:26,250
>>Yeah, 27-1/2 more pages worth.

76
00:04:26,250 --> 00:04:31,140
>>Next up is TinyPNG, available at tinypng.org.

77
00:04:31,140 --> 00:04:36,430
This is a really nifty tool that can decrease the file size of your PNG images.

78
00:04:36,430 --> 00:04:42,310
Basically, browsers support PNGs a little bit differently than what's available in, say,

79
00:04:42,310 --> 00:04:44,370
an image editing app like Photoshop.

80
00:04:44,370 --> 00:04:50,180
You can actually have indexed PNG images that support alpha transparency

81
00:04:50,180 --> 00:04:52,750
within most modern browsers.

82
00:04:52,750 --> 00:04:57,810
However, a program like Photoshop won't actually export it this way.

83
00:04:57,810 --> 00:05:03,380
So what you can do is export the image normally, as you would in Photoshop, 

84
00:05:03,380 --> 00:05:10,650
and then you upload it to tinypng.org, and it will actually output the indexed PNG 

85
00:05:10,650 --> 00:05:15,380
with alpha transparency, and then you can go ahead and use that on your webpages.

86
00:05:15,380 --> 00:05:17,020
>>Now why would I want to do something like that, Nick?

87
00:05:17,020 --> 00:05:19,850
Well, it's going to decrease file size pretty dramatically.

88
00:05:19,850 --> 00:05:25,930
We have this picture of a cute little panda here eating some grass or bamboo or whatever--

89
00:05:25,930 --> 00:05:27,980
What do pandas eat, actually?

90
00:05:27,980 --> 00:05:31,210
>>I don't know. Remind me to Google that later. 

91
00:05:31,210 --> 00:05:33,060
>>All right, well, he's eating this green stuff here,

92
00:05:33,060 --> 00:05:42,060
and this image is actually 57K, and it's cut down to 17K when it's an indexed PNG with alpha transparency.

93
00:05:42,060 --> 00:05:44,990
>>That's quite a savings. >>Yeah, that is pretty nifty.

94
00:05:44,990 --> 00:05:48,600
>>And that's pretty easy, too. Just go and upload the file. Boom. Done.

95
00:05:48,600 --> 00:05:51,320
>>Done. >>Done. >>Done. >>Instant.

96
00:05:51,320 --> 00:05:57,660
>>Next up, Ruby on Rails 4.0 is going to be coming out at some point in the future,

97
00:05:57,660 --> 00:06:02,600
but we give you a little bit of an update on what's been going on in Rails 4.0.

98
00:06:02,600 --> 00:06:08,060
So, kind of the over-arcing idea of Rails 4.0 is that it's going to be 

99
00:06:08,060 --> 00:06:11,450
more of an evolutionary than revolutionary release.

100
00:06:11,450 --> 00:06:15,340
It's not going to be something where they intend to rewrite everything.

101
00:06:15,340 --> 00:06:19,270
If you've had any apps that you've upgraded from Rails 2 to Rails 3,

102
00:06:19,270 --> 00:06:23,970
going from Rails 3 to Rails 4 is going to be a much less painful experience.

103
00:06:23,970 --> 00:06:27,760
Some things that you're going to encounter--and this is all subject to change, by the way--

104
00:06:27,760 --> 00:06:31,250
there is a Barebones ActiveModel Implementation,

105
00:06:31,250 --> 00:06:34,770
so if you want to get a model that's not backed by the database,

106
00:06:34,770 --> 00:06:37,140
it will be much quicker and simpler to do.

107
00:06:37,140 --> 00:06:41,450
There's a smaller and optional ActionController Implementation

108
00:06:41,450 --> 00:06:44,220
for creating things like APIs. 

109
00:06:44,220 --> 00:06:49,340
There's expanded support for PostgreSQL--I never know how to pronounce that one.

110
00:06:49,340 --> 00:06:54,000
>>Postgre-- >>PostgreSQL? >>Let's move on. >>Okay, let's move on.

111
00:06:54,000 --> 00:06:58,790
There's expanded support for that particular database's native types.

112
00:06:58,790 --> 00:07:01,820
There is a queue being built into Rails.

113
00:07:01,820 --> 00:07:05,780
Oftentimes when you are coding a web application,

114
00:07:05,780 --> 00:07:09,640
you might want something to happen outside of the repressed response cycle.

115
00:07:09,640 --> 00:07:13,720
Maybe you go through and update a bunch of people's statuses to something else,

116
00:07:13,720 --> 00:07:16,240
and this is something that's going to take way too long to do 

117
00:07:16,240 --> 00:07:19,010
if you're just going to a webpage and waiting for that request to complete.

118
00:07:19,010 --> 00:07:21,200
So what you can do is use something called a queue,

119
00:07:21,200 --> 00:07:24,560
which is a separate process that operates on your apps environment.

120
00:07:24,560 --> 00:07:28,810
Rails 4.0 is going to have one built into Rails that you can optionally use.

121
00:07:28,810 --> 00:07:33,630
What else is interesting about that is that it will be integrated with Action Mailer,

122
00:07:33,630 --> 00:07:37,230
so optionally, should you choose to use the queue,

123
00:07:37,230 --> 00:07:40,510
all of your e-mails can head straight into the queue 

124
00:07:40,510 --> 00:07:43,530
rather than on the normal request response cycle,

125
00:07:43,530 --> 00:07:46,240
so if someone signs up to your website, you want to send them a welcome e-mail,

126
00:07:46,240 --> 00:07:48,940
drop it in the queue, it will go out in another second or 2.

127
00:07:48,940 --> 00:07:51,530
>>That's pretty awesome. I bet people are going to be 

128
00:07:51,530 --> 00:07:56,020
queuing up to download Rails 4 when it's released. 

129
00:07:56,020 --> 00:07:57,250
>>Well done.

130
00:07:57,250 --> 00:08:07,260
>>All right. Next up is Spin.js, available at fgnass.github.com/spin.js.

131
00:08:07,260 --> 00:08:08,950
>>That's easy enough to remember.

132
00:08:08,950 --> 00:08:11,270
>>Yeah, I've got it, got it memorized.

133
00:08:11,270 --> 00:08:17,060
Spin.js is basically a piece of JavaScript that you can go ahead and drop into your website, 

134
00:08:17,060 --> 00:08:25,390
and it will create this little AJAXy-looking spinner without any kind of images or external CSS required.

135
00:08:25,390 --> 00:08:28,540
Now, this is pretty nifty because you can actually go ahead

136
00:08:28,540 --> 00:08:33,789
and go on the site and make all sorts of adjustments to what the spinner actually looks like.

137
00:08:33,789 --> 00:08:38,850
You can drag these sliders here and increase the length or width of the lines here,

138
00:08:38,850 --> 00:08:42,220
you can increase the radius, the speed, you can add a shadow,

139
00:08:42,220 --> 00:08:44,100
all sorts of cool stuff.

140
00:08:44,100 --> 00:08:48,270
This is pretty useful if you've ever created any kind of AJAX application 

141
00:08:48,270 --> 00:08:53,820
that needs some sort of loading animation in between and, you know,

142
00:08:53,820 --> 00:08:58,540
it's very customizable, so not anything crazy--

143
00:08:58,540 --> 00:09:00,430
>>I like it. >>--but still pretty nifty.

144
00:09:00,430 --> 00:09:02,440
>>I like it, it doesn't require jQuery.

145
00:09:02,440 --> 00:09:09,270
>>That's right. You can actually use it as a jQuery plugin should you choose to, 

146
00:09:09,270 --> 00:09:13,900
but it doesn't require jQuery like so many things seem to these days.

147
00:09:13,900 --> 00:09:17,270
>>Yeah, jQuery's everywhere. >>It's everywhere. >> It's everywhere. >>You can't escape it.

148
00:09:17,270 --> 00:09:20,580
>>Next up, more on the Rails front. 

149
00:09:20,580 --> 00:09:25,580
There is talk about the new release of Phusion Passenger 4.0.

150
00:09:25,580 --> 00:09:31,220
Phusion Passenger is one of the most widely used deployment servers for Rails, 

151
00:09:31,220 --> 00:09:34,590
and version 4.0 is going to be coming out soon.

152
00:09:34,590 --> 00:09:39,070
The Phusion guys talked about preview release 1 coming out very shortly.

153
00:09:39,070 --> 00:09:43,830
Interesting things in Phusion Passenger 4.0 are going to be rolling restarts.

154
00:09:43,830 --> 00:09:48,390
What this means is when you roll out a new version of the code for your application, 

155
00:09:48,390 --> 00:09:53,970
normally what would happen is your application kind of stops while everything gets reloaded, 

156
00:09:53,970 --> 00:09:56,100
the new code gets reloaded and served.

157
00:09:56,100 --> 00:10:01,940
In Phusion Passenger 4.0, what's going to happen is all of the requests are going to finish,

158
00:10:01,940 --> 00:10:06,920
and then as new ones come in the code will be loaded into those requests.

159
00:10:06,920 --> 00:10:10,470
What this means is that overall there is going to be almost no lag time

160
00:10:10,470 --> 00:10:12,590
when you roll out a new version of your code.

161
00:10:12,590 --> 00:10:15,750
Other things are mass deployment.

162
00:10:15,750 --> 00:10:18,130
If you are hosting more than Rails application,

163
00:10:18,130 --> 00:10:20,690
you can just point Phusion Passenger at a directory,

164
00:10:20,690 --> 00:10:24,840
and it will load up all of the different Rails applications and subdirectories

165
00:10:24,840 --> 00:10:27,790
pointed at their own particular domain name; 

166
00:10:27,790 --> 00:10:31,170
that is, the name of the application directory where they are installed.

167
00:10:31,170 --> 00:10:33,590
Finally, a couple things for debugging.

168
00:10:33,590 --> 00:10:38,350
There is a live IRB console that you can attach to existing live requests 

169
00:10:38,350 --> 00:10:43,250
to inspect what's going on, and there is also deployment error resistance.

170
00:10:43,250 --> 00:10:46,490
If there is some sort of error when deploying a new version of your code, 

171
00:10:46,490 --> 00:10:52,930
it will freeze all of the instances and give you a lot more opportunities to debug what's going on.

172
00:10:52,930 --> 00:10:55,530
>>This really sounds pretty irresistible. 

173
00:10:55,530 --> 00:10:58,240
>>I personally cannot resist it.

174
00:10:58,240 --> 00:11:00,960
>>Anyway, rolling right along.

175
00:11:00,960 --> 00:11:08,000
We're going to talk about UI Cloud, available at ui-cloud.com

176
00:11:08,000 --> 00:11:14,070
Basically, this is a search engine or a browser where you can go ahead and browse

177
00:11:14,070 --> 00:11:16,770
all sorts of UI-designed patterns.

178
00:11:16,770 --> 00:11:20,880
So you just head over to ui-cloud.com, and you can go ahead and type in 

179
00:11:20,880 --> 00:11:24,050
something like progress bar or download button, 

180
00:11:24,050 --> 00:11:30,630
and you can browse this gallery of all these rated progress bars.

181
00:11:30,630 --> 00:11:35,200
So if you want to make sure you have the absolute best progress bar possible, 

182
00:11:35,200 --> 00:11:40,690
you can find the one that has 5 stars and make sure that you go ahead and rip it off--

183
00:11:40,690 --> 00:11:45,230
--I mean--get inspired by it and go ahead and use it on your website.

184
00:11:45,230 --> 00:11:49,840
>>If we were to rearrange the web design alphabet, I'd put you and I together.

185
00:11:49,840 --> 00:11:51,780
>>Wow.

186
00:11:51,780 --> 00:11:53,410
>>Next up we have Iconmonstr. 

187
00:11:53,410 --> 00:11:57,620
Iconmonstr is a bunch of free and simple icons for your website.

188
00:11:57,620 --> 00:12:03,940
You can go over to iconmonstr.com with no e and just kind of scroll through all these icons.

189
00:12:03,940 --> 00:12:05,890
They're all free to use in your application.

190
00:12:05,890 --> 00:12:09,960
You can also sort them by popularity or randomness.

191
00:12:09,960 --> 00:12:16,050
The most popular icon as of this time of recording is somebody slipping on a puddle.

192
00:12:16,050 --> 00:12:20,180
>>Thanks for that important update, Jason.

193
00:12:20,180 --> 00:12:23,330
>>I'm not really sure where you would need that in your web application,

194
00:12:23,330 --> 00:12:26,960
but if you do, there you go--iconmonstr.com.

195
00:12:26,960 --> 00:12:32,100
>>That's really cool. You know, I really like using icons in web designs, 

196
00:12:32,100 --> 00:12:36,860
especially if you're like a developer and you're not entirely confident in your design skills.

197
00:12:36,860 --> 00:12:39,810
A similar thing is using like CSS grids.

198
00:12:39,810 --> 00:12:44,930
It allows you to create a design without stepping too far outside your comfort zone.

199
00:12:44,930 --> 00:12:47,930
Same thing with icons. You can go ahead and use imagery that's familiar to everybody,

200
00:12:47,930 --> 00:12:51,230
and you don't have to actually design it yourself.

201
00:12:51,230 --> 00:12:52,730
>>Get things done quicker.

202
00:12:52,730 --> 00:12:56,760
>>That's right. One important thing to be aware of with iconmonstr is

203
00:12:56,760 --> 00:13:00,560
there's different licensing on different icons, 

204
00:13:00,560 --> 00:13:04,010
so you want to go ahead and click into each one and make sure that you read

205
00:13:04,010 --> 00:13:08,350
the license agreement before just going ahead and ripping it off.

206
00:13:08,350 --> 00:13:09,970
>>Sounds pretty smart. >>Exactly.

207
00:13:09,970 --> 00:13:12,710
That's it for this week's episode of The Treehouse Show.

208
00:13:12,710 --> 00:13:14,170
Thank you so much for watching.

209
00:13:14,170 --> 00:13:17,770
If you have any tips, tricks, or tools that you would like to submit to us,

210
00:13:17,770 --> 00:13:23,100
just tweet us on Twitter; I don't know where else they would actually tweet us,

211
00:13:23,100 --> 00:13:25,100
but I'm @NICKRP on Twitter.

212
00:13:25,100 --> 00:13:29,910
>>I am @JSEIFER. Thanks everybody for joining us, and we'll see you next time.

213
00:13:29,910 --> 00:13:31,770
>>See you later.

214
00:13:31,770 --> 00:13:34,120
[The Treehouse Show]

215
00:13:34,120 --> 00:13:40,280
[?music?]