Episode 3: Rails 4 and OS X Mountain Lion

>>I'm Nick Pettit. >>I'm Jason Seifer. 0:01 And you're watching The Treehouse Show, 0:03 your weekly dose of Internets where we talk about all things web design, 0:05 web development, and more. 0:08 In this episode, we'll be going over a few different tip and tricks 0:10 to use in your day-to-day coding. 0:13 We'll also be giving you an overview of what's new in Mountain Lion 0:14 as well as Rails 4.0. 0:17 Let's get into it. 0:20 [The Treehouse Show] 0:23 First up is Sprite Cow, available at spritecow.com. 0:26 Sprite Cow is a pretty nifty tool that you can use to help split up your images on your website. 0:30 Oftentimes you'll want to create a sprite 0:37 to go ahead and increase front-end performance. 0:40 You'll put all of your tiny images into one big image 0:42 then go ahead and upload it to Sprite Cow, 0:46 and then you can click on each one of those individual images to get the CSS coordinates 0:48 to set the background image for them. 0:54 Now, this is pretty nifty because it takes a lot of time to actually do this manually 0:57 and create all of those CSS coordinates; 1:02 you have to go into Photoshop, calculate all of the pixels, 1:04 it's actually a real pain. 1:07 So, instead of doing that, you can just upload your image to Sprite Cow, 1:09 it will map it all out for you, and then you can just go ahead and use that in your CSS file. 1:13 >>Incredibly, incredibly useful, especially CSS sprites in general, 1:17 the process of, you know, taking, like you said, a bunch of tiny images, 1:22 putting in 1 big image overall reduce the number of HTTP requests to your server when serving a webpage. 1:25 And that will really increase front-end performance by quite a bit. 1:32 Those HTTP requests are actually pretty expensive, 1:35 so if you're just requesting 1 image, which is your sprite map, 1:39 instead of requesting a bunch of tiny images, you will increase front-end performance. 1:42 Next up, we're going to be talking about Mountain Lion, 1:46 the new operating system released from Apple. 1:49 Mountain Lion just came out, and a couple things developers are going to need to take into account-- 1:51 one thing is Gatekeeper. If you submit your applications to the Mac App Store, 1:55 well you're probably already aware of Gatekeeper, but if you don't, 2:00 you'll need to be aware that your users have to actually check a box 2:04 inside system preferences to allow untrusted applications to run. 2:07 Other interesting things inside of Mountain Lion are the Notification Center 2:11 because, let's face it, we don't have enough distractions day-to-day already, 2:15 we now need notifications on our phones and our desktops all at the same time. 2:19 Thanks, Mountain Lion, for adding that. 2:24 Also new, Xcode 4.4, which is going to bring you up to speed with iOS version 6.0 SDK 2:25 as well as a ton of other features and gigabytes in the download. 2:32 Game Center is finally on the Mac. Everyone knows Macs can't play games. 2:36 >>Yeah, I thought Macs couldn't play games. 2:42 They just had that little hockey-puck mouse-- 2:44 >>Yeah, just the one button. >>Yeah. >>Exactly. 2:47 You couldn't play games. 2:49 Also new is Safari 6.0. Safari 6.0 is actually an exciting release web developers. 2:50 Some things that it sports are the Web Audio API, CSS Filters, 2:57 HTML5 Web Notifications, so you can actually have webpages notify you too 3:02 instead of just your phone. 3:08 There's also HTML5 Timed Text Tracks. 3:10 This is very useful for adding things like subtitles to, you know, videos on websites. 3:13 I don't know where we would find any of those. 3:17 >>Possibly on Team Treehouse.com. 3:19 >>Shameless self-promotion. 3:22 Also, Safari 6.0 supports the latest JavaScript Standard. 3:24 It also has, probably my favorite feature-- 3:28 I can't figure out a legitimate use for it, but as far as pranks go, 3:31 there's Private Browsing Detection built into the JavaScript engine. 3:34 >>So when people visit your website, you could actually detect 3:39 if they're in private browsing mode, and you could say, like, hey, look behind you-- 3:42 >>Yeah, look out behind you-- 3:48 >>Whatcha looking at buddy? 3:49 >>I can't actually think of a legitimate use for this other than pranking people. 3:50 >>That's a legitimate use. 3:54 >>And finally there is a Redesigned Web Inspector in Safari 6.0. 3:56 If you would like to read a little bit more about what's new in Mountain Lion, 4:01 Ars Technica has a 28-page summary of what's going on written by John Siracusa. 4:06 Go ahead and devour all 28 pages should you choose to. 4:12 Little bit more depth than we went into on here. 4:16 >>Just a little bit, like 28 pages worth of more depth. 4:18 >>Yeah, 27-1/2 more pages worth. 4:23 >>Next up is TinyPNG, available at tinypng.org. 4:26 This is a really nifty tool that can decrease the file size of your PNG images. 4:31 Basically, browsers support PNGs a little bit differently than what's available in, say, 4:36 an image editing app like Photoshop. 4:42 You can actually have indexed PNG images that support alpha transparency 4:44 within most modern browsers. 4:50 However, a program like Photoshop won't actually export it this way. 4:52 So what you can do is export the image normally, as you would in Photoshop, 4:57 and then you upload it to tinypng.org, and it will actually output the indexed PNG 5:03 with alpha transparency, and then you can go ahead and use that on your webpages. 5:10 >>Now why would I want to do something like that, Nick? 5:15 Well, it's going to decrease file size pretty dramatically. 5:17 We have this picture of a cute little panda here eating some grass or bamboo or whatever-- 5:19 What do pandas eat, actually? 5:25 >>I don't know. Remind me to Google that later. 5:27 >>All right, well, he's eating this green stuff here, 5:31 and this image is actually 57K, and it's cut down to 17K when it's an indexed PNG with alpha transparency. 5:33 >>That's quite a savings. >>Yeah, that is pretty nifty. 5:42 >>And that's pretty easy, too. Just go and upload the file. Boom. Done. 5:44 >>Done. >>Done. >>Done. >>Instant. 5:48 >>Next up, Ruby on Rails 4.0 is going to be coming out at some point in the future, 5:51 but we give you a little bit of an update on what's been going on in Rails 4.0. 5:57 So, kind of the over-arcing idea of Rails 4.0 is that it's going to be 6:02 more of an evolutionary than revolutionary release. 6:08 It's not going to be something where they intend to rewrite everything. 6:11 If you've had any apps that you've upgraded from Rails 2 to Rails 3, 6:15 going from Rails 3 to Rails 4 is going to be a much less painful experience. 6:19 Some things that you're going to encounter--and this is all subject to change, by the way-- 6:23 there is a Barebones ActiveModel Implementation, 6:27 so if you want to get a model that's not backed by the database, 6:31 it will be much quicker and simpler to do. 6:34 There's a smaller and optional ActionController Implementation 6:37 for creating things like APIs. 6:41 There's expanded support for PostgreSQL--I never know how to pronounce that one. 6:44 >>Postgre-- >>PostgreSQL? >>Let's move on. >>Okay, let's move on. 6:49 There's expanded support for that particular database's native types. 6:54 There is a queue being built into Rails. 6:58 Oftentimes when you are coding a web application, 7:01 you might want something to happen outside of the repressed response cycle. 7:05 Maybe you go through and update a bunch of people's statuses to something else, 7:09 and this is something that's going to take way too long to do 7:13 if you're just going to a webpage and waiting for that request to complete. 7:16 So what you can do is use something called a queue, 7:19 which is a separate process that operates on your apps environment. 7:21 Rails 4.0 is going to have one built into Rails that you can optionally use. 7:24 What else is interesting about that is that it will be integrated with Action Mailer, 7:28 so optionally, should you choose to use the queue, 7:33 all of your e-mails can head straight into the queue 7:37 rather than on the normal request response cycle, 7:40 so if someone signs up to your website, you want to send them a welcome e-mail, 7:43 drop it in the queue, it will go out in another second or 2. 7:46 >>That's pretty awesome. I bet people are going to be 7:48 queuing up to download Rails 4 when it's released. 7:51 >>Well done. 7:56 >>All right. Next up is Spin.js, available at fgnass.github.com/spin.js. 7:57 >>That's easy enough to remember. 8:07 >>Yeah, I've got it, got it memorized. 8:08 Spin.js is basically a piece of JavaScript that you can go ahead and drop into your website, 8:11 and it will create this little AJAXy-looking spinner without any kind of images or external CSS required. 8:17 Now, this is pretty nifty because you can actually go ahead 8:25 and go on the site and make all sorts of adjustments to what the spinner actually looks like. 8:28 You can drag these sliders here and increase the length or width of the lines here, 8:33 you can increase the radius, the speed, you can add a shadow, 8:38 all sorts of cool stuff. 8:42 This is pretty useful if you've ever created any kind of AJAX application 8:44 that needs some sort of loading animation in between and, you know, 8:48 it's very customizable, so not anything crazy-- 8:53 >>I like it. >>--but still pretty nifty. 8:58 >>I like it, it doesn't require jQuery. 9:00 >>That's right. You can actually use it as a jQuery plugin should you choose to, 9:02 but it doesn't require jQuery like so many things seem to these days. 9:09 >>Yeah, jQuery's everywhere. >>It's everywhere. >> It's everywhere. >>You can't escape it. 9:13 >>Next up, more on the Rails front. 9:17 There is talk about the new release of Phusion Passenger 4.0. 9:20 Phusion Passenger is one of the most widely used deployment servers for Rails, 9:25 and version 4.0 is going to be coming out soon. 9:31 The Phusion guys talked about preview release 1 coming out very shortly. 9:34 Interesting things in Phusion Passenger 4.0 are going to be rolling restarts. 9:39 What this means is when you roll out a new version of the code for your application, 9:43 normally what would happen is your application kind of stops while everything gets reloaded, 9:48 the new code gets reloaded and served. 9:53 In Phusion Passenger 4.0, what's going to happen is all of the requests are going to finish, 9:56 and then as new ones come in the code will be loaded into those requests. 10:01 What this means is that overall there is going to be almost no lag time 10:06 when you roll out a new version of your code. 10:10 Other things are mass deployment. 10:12 If you are hosting more than Rails application, 10:15 you can just point Phusion Passenger at a directory, 10:18 and it will load up all of the different Rails applications and subdirectories 10:20 pointed at their own particular domain name; 10:24 that is, the name of the application directory where they are installed. 10:27 Finally, a couple things for debugging. 10:31 There is a live IRB console that you can attach to existing live requests 10:33 to inspect what's going on, and there is also deployment error resistance. 10:38 If there is some sort of error when deploying a new version of your code, 10:43 it will freeze all of the instances and give you a lot more opportunities to debug what's going on. 10:46 >>This really sounds pretty irresistible. 10:52 >>I personally cannot resist it. 10:55 >>Anyway, rolling right along. 10:58 We're going to talk about UI Cloud, available at ui-cloud.com 11:00 Basically, this is a search engine or a browser where you can go ahead and browse 11:08 all sorts of UI-designed patterns. 11:14 So you just head over to ui-cloud.com, and you can go ahead and type in 11:16 something like progress bar or download button, 11:20 and you can browse this gallery of all these rated progress bars. 11:24 So if you want to make sure you have the absolute best progress bar possible, 11:30 you can find the one that has 5 stars and make sure that you go ahead and rip it off-- 11:35 --I mean--get inspired by it and go ahead and use it on your website. 11:40 >>If we were to rearrange the web design alphabet, I'd put you and I together. 11:45 >>Wow. 11:49 >>Next up we have Iconmonstr. 11:51 Iconmonstr is a bunch of free and simple icons for your website. 11:53 You can go over to iconmonstr.com with no e and just kind of scroll through all these icons. 11:57 They're all free to use in your application. 12:03 You can also sort them by popularity or randomness. 12:05 The most popular icon as of this time of recording is somebody slipping on a puddle. 12:09 >>Thanks for that important update, Jason. 12:16 >>I'm not really sure where you would need that in your web application, 12:20 but if you do, there you go--iconmonstr.com. 12:23 >>That's really cool. You know, I really like using icons in web designs, 12:26 especially if you're like a developer and you're not entirely confident in your design skills. 12:32 A similar thing is using like CSS grids. 12:36 It allows you to create a design without stepping too far outside your comfort zone. 12:39 Same thing with icons. You can go ahead and use imagery that's familiar to everybody, 12:44 and you don't have to actually design it yourself. 12:47 >>Get things done quicker. 12:51 >>That's right. One important thing to be aware of with iconmonstr is 12:52 there's different licensing on different icons, 12:56 so you want to go ahead and click into each one and make sure that you read 13:00 the license agreement before just going ahead and ripping it off. 13:04 >>Sounds pretty smart. >>Exactly. 13:08 That's it for this week's episode of The Treehouse Show. 13:09 Thank you so much for watching. 13:12 If you have any tips, tricks, or tools that you would like to submit to us, 13:14 just tweet us on Twitter; I don't know where else they would actually tweet us, 13:17 but I'm @NICKRP on Twitter. 13:23 >>I am @JSEIFER. Thanks everybody for joining us, and we'll see you next time. 13:25 >>See you later. 13:29 [The Treehouse Show] 13:31 [?music?] 13:34

You need to sign up for Treehouse in order to set up Workspace

Sign up