Episode 4: LAMP on Mountain Lion

[treehouse™] 0:00 I'm Nick Pettit. >>I'm Jason Seifer. >>And you're watching the Treehouse show. [JASON SEIFER @JSEIFER] [NICK PETTIT @NICKRP] 0:02 Your weekly dose of Internets where we talk about all things 0:05 web design, web development, and more. 0:07 In this episode, we'll be going over Speed Limit, some things you can do for 0:10 responsive web design as well as how to add notification center support 0:13 to your website as well as quite a bit more. 0:17 Let's kick it off. 0:20 [THE treehouse SHOW] 0:26 The first thing we're going to be talking about is a tool called Speed Limit. 0:29 This is very similar to the Slowy application we talked about on episode one. [Speed Limit http://mschrag.github.com/] 0:32 Essentially, what this is, is a preference pane that will allow you limit your bandwidth. 0:37 It has a few different speeds 768k DSL, edge, 3D, and dial-up. 0:42 This is very useful for testing things like the EDGE Network in the iPhone Simulator, 0:49 and something that is actually pretty cool, this was brought to us 0:55 by Alex Hedley in our Treehouse members Facebook group. 0:58 So, thanks a lot for that, Alex. >>Very cool stuff. 1:01 Speeding right along, we have a really cool responsive web design bookmarklet 1:05 [Responsive Web Design Bookmarklet http://responsive.victorcoulon.fr/] at responsive.victorcoulon.fr, I believe. >>Coulon. >>Coulon. It's a French name. I'm really sorry. 1:11 Francais-->>And basically, it's a bookmarklet that you can go ahead 1:19 and drag up to your bookmark's tool bar and then when you click it on any website, 1:25 you can actually click through different device resolutions 1:30 and see how that page will be laid out on these different devices. 1:35 So, it's really a handy tool for previewing your website very quickly. 1:40 Of course, you want to always actually look at the stuff on a real device whenever possible, 1:44 but if you can't do that, this is the next best thing just to preview it really quick. 1:50 That is pretty awesome, very, very useful because it can be kind of a drag 1:55 previewing all these sites. As long as you can get a little bit of a preview 1:59 before testing it on the actual devices, a bit of a time saver. 2:02 Definitely. >>Next up, we have a blog post over on the fingertips blog-- 2:05 About how to add notification center support to your website or web application. [How to add notification center support http://www.fngtps.com] 2:11 There are a few different things that you have to do 2:16 if you want to be able to annoy your users 2:18 with popups and messages right from the web browser. 2:20 Step one is requesting permission, 2:24 and then you can actually manage the permissions on this applications in Safari. 2:27 You can't do that as well on Chrome. 2:31 Then there is just a little bit of JavaScript that this blog post walks you through 2:33 on how to implement this into the new notification center in OS10 Mountain Lion. 2:37 I'm so excited about getting more notifications everywhere. 2:44 I want to see Draw Something notifications on my desktop so that I can know 2:47 it's time to stop working, get back onto my iPhone, and play some games. 2:51 Exactly. We all want a break on a workday. >>I want more notifications everywhere. 2:56 Now for all of you IOS developers out there, 3:02 next up, we have a few tips and tricks about how to optimize your images. 3:05 Over on the Dwellable blog, they recently developed an iPhone and iPad App. 3:09 And what they discovered is that their homepage was actually loading really, really slowly, 3:15 and it's because they were loading up 512 x 512 images and they were just 3:20 serving these to any IOS device including an iPhone3. 3:25 Now a 512 x 512 image is actually higher resolution than the entire screen on an iPhone3. 3:30 So by using a little bit of objective-C code, which quite frankly is beyond 3:37 my designer understanding they were actually able to speed up 3:43 their application performance across all IOS devices. 3:47 Great idea, and they did it using convention over configuration. 3:50 Something also common to the rails world. 3:55 You'd know all about that wouldn't you Jason? >>I fake it pretty well. 3:57 Next up over on the coolest guy on the planet blog, which I think they should put 4:02 a disclaimer that can't be substantiated, is a blog post on installing the [Apache, MySQL, and PHP on Mountain Lion http://coolestguyplanettech.com/] 4:07 LAMP Stack on OS X Mountain lion. That would be Apache, MySQL, 4:11 PHP as well as phpMyAdmin. 4:16 So, in Mountain Lion, Apple actually disabled the GUI option for web sharing. 4:21 However, Apache is still installed on the system. 4:27 You just have to open up terminal and start it yourself. 4:31 Then there's a couple of configuration steps that you have to go through and boom-- 4:34 you've got Mountain Lion and Apache and PHP working. Done. 4:38 That's pretty nifty stuff. 4:42 I just want to say something to all the designers out there, 4:44 don't ever be afraid of the terminal. 4:47 I encounter so many designers that are just, as soon as the terminal comes up-- 4:49 >>Whoa. >>Yeah. >> I have no idea what I'm doing, but you can't be afraid of that. 4:53 You really just got to go ahead and dive in. 4:57 It's a lot easier than you think. >>Oh Yeah. Absolutely. 4:59 Next up is SideTap at sidetap.it. Oh, that's a little-- [Sidetap http://sidetap.it/] 5:02 Side tapping you. >>Thanks for the little side tap, Jason. >> 5:07 Basically, it's another mobile framework. I know. Ugh--another mobile framework. >>Ugh. 5:11 It actually said that on the sidetap.it site, but basically, it's a nifty little framework 5:17 that allows you to copy the UI design pattern of having a navigation list off to the side. 5:25 So you click this little button over on the left side of the App and then this little menu pops out. 5:33 This UI design pattern was popularized by the Facebook App 5:40 as well as, I believe, the Sparrow App. 5:44 Yup. Sparrow, Gmail, Facebook. 5:46 A lot of people have been using it even though I don't think it's actually 5:48 Apple official just yet, but it seems like maybe they'll include it at some point 5:52 just because so many people are using it. 5:57 It's a really interesting UI pattern. It seems to be pretty effective. >>Yeah. Definitely. 5:58 You know, especially with all these constraints on mobile browsers. >>Hmm. 6:02 Next up--Nick, don't you want to put a grid in your life? 6:06 Always, each and everyday. I need more organization. 6:09 Well, you're in luck. Gridster.js will allow you to put a grid in your life. [Gridster jQuery plugin http:/gridster.net/] 6:13 It literally says that right on the page--"Put a grid in your life" 6:18 This is "The mythical dragon drop multi-column grid." It's finally arrived. 6:21 It is a jQuery plugin that allows you to build intuitive draggable layouts 6:27 from elements spanning multiple columns. 6:32 These are a lot of words, but a demo would just be better. 6:34 If you can see this on the web page, I'm just dragging these things around 6:37 and my grid is being rearranged for me. 6:41 So this is gridster.net, very easy to set up and used with jQuery. 6:44 So, check that out--gridster.net. 6:50 I've tried to create things like that so many times over the years, 6:53 and it's actually incredibly difficult so I'm really glad that thing exists. 6:56 Next up is UI parade. 7:02 This is actually very similar to UI cloud that we talked about in last week's episode. [UI Parade http://www.uiparade.com/] 7:04 UI parade at uiparade.com, no dash this time, is basically just 7:09 a gallery of very nifty UI design patterns. 7:14 If you want to be inspired by these--inspired not ripped off--you can go ahead 7:19 and just click through here and see what other people are doing. 7:24 What's also nice is you can actually view the original source of where all the stuff came from. 7:28 So, you can kind of trace who you should give credit to 7:35 if you say--I made this, but i was inspired by so and so. 7:38 Pretty nifty stuff. They have a whole bunch of categories on the left side. 7:42 So, it's worth checking out before you go ahead and commit to the next project 7:46 or commit to the next design pattern in your project. 7:51 Really nice website. >>Yeah. Yeah. >>I'm very impressed by a lot of these things. 7:54 It's very well put together. 7:57 Finally, the last thing we're going to talk about is called PrismJS. 7:59 This is a lightweight extensible Syntax highlighter that is, [Prism http://prismjs.com] 8:04 "built with modern web standards in mind." 8:08 And basically, what you're going to use this for is Syntax highlighting on your website or blog. 8:12 It's just a piece of JavaScript you drop into your application, and it looks great. 8:17 There are some really nice things to start you off and if you can see this on the screen, 8:22 the highlighted text is great--very easy on the eyes and very easy to use. 8:27 I think that's kind of the highlight of the show so far, Jason. 8:34 I can't even think of a pun in time. That was wonderful. >>Thanks. 8:39 That's it for this week's episode. Thank you guys so much for watching. 8:45 If you have a tip, trick, or tool that you would like to submit to us, 8:49 please tweet @nickrp and I'm @jseifer. 8:52 We want you to thank everybody for joining us, and we will see you next time. 8:56 See you later. 8:59 [treehouse™] 9:01

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

Sign up