1 00:00:00,000 --> 00:00:01,050 [treehouse™] 2 00:00:02,100 --> 00:00:05,330 I'm Nick Pettit. >>I'm Jason Seifer. >>And you're watching the Treehouse show. [JASON SEIFER @JSEIFER] [NICK PETTIT @NICKRP] 3 00:00:05,330 --> 00:00:07,590 Your weekly dose of Internets where we talk about all things 4 00:00:07,590 --> 00:00:10,040 web design, web development, and more. 5 00:00:10,120 --> 00:00:13,790 In this episode, we'll be going over Speed Limit, some things you can do for 6 00:00:13,790 --> 00:00:17,820 responsive web design as well as how to add notification center support 7 00:00:17,820 --> 00:00:20,610 to your website as well as quite a bit more. 8 00:00:20,610 --> 00:00:22,170 Let's kick it off. 9 00:00:26,430 --> 00:00:28,570 [THE treehouse SHOW] 10 00:00:29,000 --> 00:00:32,610 The first thing we're going to be talking about is a tool called Speed Limit. 11 00:00:32,610 --> 00:00:37,410 This is very similar to the Slowy application we talked about on episode one. [Speed Limit http://mschrag.github.com/] 12 00:00:37,410 --> 00:00:42,760 Essentially, what this is, is a preference pane that will allow you limit your bandwidth. 13 00:00:42,760 --> 00:00:49,980 It has a few different speeds 768k DSL, edge, 3D, and dial-up. 14 00:00:49,980 --> 00:00:55,120 This is very useful for testing things like the EDGE Network in the iPhone Simulator, 15 00:00:55,120 --> 00:00:58,270 and something that is actually pretty cool, this was brought to us 16 00:00:58,270 --> 00:01:01,660 by Alex Hedley in our Treehouse members Facebook group. 17 00:01:01,660 --> 00:01:05,430 So, thanks a lot for that, Alex. >>Very cool stuff. 18 00:01:05,430 --> 00:01:11,970 Speeding right along, we have a really cool responsive web design bookmarklet 19 00:01:11,970 --> 00:01:19,420 [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. 20 00:01:19,420 --> 00:01:25,790 Francais-->>And basically, it's a bookmarklet that you can go ahead 21 00:01:25,790 --> 00:01:30,840 and drag up to your bookmark's tool bar and then when you click it on any website, 22 00:01:30,840 --> 00:01:35,370 you can actually click through different device resolutions 23 00:01:35,370 --> 00:01:40,300 and see how that page will be laid out on these different devices. 24 00:01:40,300 --> 00:01:44,780 So, it's really a handy tool for previewing your website very quickly. 25 00:01:44,780 --> 00:01:50,440 Of course, you want to always actually look at the stuff on a real device whenever possible, 26 00:01:50,440 --> 00:01:55,470 but if you can't do that, this is the next best thing just to preview it really quick. 27 00:01:55,470 --> 00:01:59,100 That is pretty awesome, very, very useful because it can be kind of a drag 28 00:01:59,100 --> 00:02:02,260 previewing all these sites. As long as you can get a little bit of a preview 29 00:02:02,260 --> 00:02:05,310 before testing it on the actual devices, a bit of a time saver. 30 00:02:05,310 --> 00:02:10,740 Definitely. >>Next up, we have a blog post over on the fingertips blog-- 31 00:02:11,090 --> 00:02:16,960 About how to add notification center support to your website or web application. [How to add notification center support http://www.fngtps.com] 32 00:02:16,960 --> 00:02:18,820 There are a few different things that you have to do 33 00:02:18,820 --> 00:02:20,800 if you want to be able to annoy your users 34 00:02:20,800 --> 00:02:24,890 with popups and messages right from the web browser. 35 00:02:24,890 --> 00:02:27,430 Step one is requesting permission, 36 00:02:27,430 --> 00:02:31,160 and then you can actually manage the permissions on this applications in Safari. 37 00:02:31,160 --> 00:02:33,990 You can't do that as well on Chrome. 38 00:02:33,990 --> 00:02:37,820 Then there is just a little bit of JavaScript that this blog post walks you through 39 00:02:37,820 --> 00:02:44,250 on how to implement this into the new notification center in OS10 Mountain Lion. 40 00:02:44,250 --> 00:02:47,190 I'm so excited about getting more notifications everywhere. 41 00:02:47,190 --> 00:02:51,290 I want to see Draw Something notifications on my desktop so that I can know 42 00:02:51,290 --> 00:02:56,760 it's time to stop working, get back onto my iPhone, and play some games. 43 00:02:56,760 --> 00:03:02,430 Exactly. We all want a break on a workday. >>I want more notifications everywhere. 44 00:03:02,430 --> 00:03:05,260 Now for all of you IOS developers out there, 45 00:03:05,260 --> 00:03:09,840 next up, we have a few tips and tricks about how to optimize your images. 46 00:03:09,840 --> 00:03:15,290 Over on the Dwellable blog, they recently developed an iPhone and iPad App. 47 00:03:15,290 --> 00:03:20,640 And what they discovered is that their homepage was actually loading really, really slowly, 48 00:03:20,640 --> 00:03:25,520 and it's because they were loading up 512 x 512 images and they were just 49 00:03:25,520 --> 00:03:30,160 serving these to any IOS device including an iPhone3. 50 00:03:30,160 --> 00:03:37,720 Now a 512 x 512 image is actually higher resolution than the entire screen on an iPhone3. 51 00:03:37,720 --> 00:03:43,940 So by using a little bit of objective-C code, which quite frankly is beyond 52 00:03:43,940 --> 00:03:47,490 my designer understanding they were actually able to speed up 53 00:03:47,490 --> 00:03:50,900 their application performance across all IOS devices. 54 00:03:50,900 --> 00:03:55,010 Great idea, and they did it using convention over configuration. 55 00:03:55,010 --> 00:03:57,430 Something also common to the rails world. 56 00:03:57,430 --> 00:04:01,600 You'd know all about that wouldn't you Jason? >>I fake it pretty well. 57 00:04:02,470 --> 00:04:07,060 Next up over on the coolest guy on the planet blog, which I think they should put 58 00:04:07,060 --> 00:04:11,590 a disclaimer that can't be substantiated, is a blog post on installing the [Apache, MySQL, and PHP on Mountain Lion http://coolestguyplanettech.com/] 59 00:04:11,590 --> 00:04:16,870 LAMP Stack on OS X Mountain lion. That would be Apache, MySQL, 60 00:04:16,870 --> 00:04:21,050 PHP as well as phpMyAdmin. 61 00:04:21,050 --> 00:04:27,580 So, in Mountain Lion, Apple actually disabled the GUI option for web sharing. 62 00:04:27,580 --> 00:04:31,050 However, Apache is still installed on the system. 63 00:04:31,050 --> 00:04:34,890 You just have to open up terminal and start it yourself. 64 00:04:34,890 --> 00:04:38,540 Then there's a couple of configuration steps that you have to go through and boom-- 65 00:04:38,540 --> 00:04:42,120 you've got Mountain Lion and Apache and PHP working. Done. 66 00:04:42,120 --> 00:04:44,750 That's pretty nifty stuff. 67 00:04:44,750 --> 00:04:47,070 I just want to say something to all the designers out there, 68 00:04:47,070 --> 00:04:49,280 don't ever be afraid of the terminal. 69 00:04:49,280 --> 00:04:53,130 I encounter so many designers that are just, as soon as the terminal comes up-- 70 00:04:53,130 --> 00:04:57,840 >>Whoa. >>Yeah. >> I have no idea what I'm doing, but you can't be afraid of that. 71 00:04:57,840 --> 00:04:59,570 You really just got to go ahead and dive in. 72 00:04:59,570 --> 00:05:02,160 It's a lot easier than you think. >>Oh Yeah. Absolutely. 73 00:05:02,160 --> 00:05:07,760 Next up is SideTap at sidetap.it. Oh, that's a little-- [Sidetap http://sidetap.it/] 74 00:05:07,760 --> 00:05:11,530 Side tapping you. >>Thanks for the little side tap, Jason. >> 75 00:05:11,530 --> 00:05:17,600 Basically, it's another mobile framework. I know. Ugh--another mobile framework. >>Ugh. 76 00:05:17,600 --> 00:05:25,240 It actually said that on the sidetap.it site, but basically, it's a nifty little framework 77 00:05:25,240 --> 00:05:33,460 that allows you to copy the UI design pattern of having a navigation list off to the side. 78 00:05:33,460 --> 00:05:40,300 So you click this little button over on the left side of the App and then this little menu pops out. 79 00:05:40,300 --> 00:05:44,150 This UI design pattern was popularized by the Facebook App 80 00:05:44,150 --> 00:05:46,950 as well as, I believe, the Sparrow App. 81 00:05:46,950 --> 00:05:48,820 Yup. Sparrow, Gmail, Facebook. 82 00:05:48,820 --> 00:05:52,020 A lot of people have been using it even though I don't think it's actually 83 00:05:52,020 --> 00:05:57,330 Apple official just yet, but it seems like maybe they'll include it at some point 84 00:05:57,330 --> 00:05:58,540 just because so many people are using it. 85 00:05:58,540 --> 00:06:02,420 It's a really interesting UI pattern. It seems to be pretty effective. >>Yeah. Definitely. 86 00:06:02,420 --> 00:06:06,000 You know, especially with all these constraints on mobile browsers. >>Hmm. 87 00:06:06,000 --> 00:06:09,830 Next up--Nick, don't you want to put a grid in your life? 88 00:06:09,830 --> 00:06:13,550 Always, each and everyday. I need more organization. 89 00:06:13,550 --> 00:06:18,400 Well, you're in luck. Gridster.js will allow you to put a grid in your life. [Gridster jQuery plugin http:/gridster.net/] 90 00:06:18,400 --> 00:06:21,890 It literally says that right on the page--"Put a grid in your life" 91 00:06:21,890 --> 00:06:27,540 This is "The mythical dragon drop multi-column grid." It's finally arrived. 92 00:06:27,540 --> 00:06:32,260 It is a jQuery plugin that allows you to build intuitive draggable layouts 93 00:06:32,260 --> 00:06:34,730 from elements spanning multiple columns. 94 00:06:34,730 --> 00:06:37,720 These are a lot of words, but a demo would just be better. 95 00:06:37,720 --> 00:06:41,420 If you can see this on the web page, I'm just dragging these things around 96 00:06:41,420 --> 00:06:44,660 and my grid is being rearranged for me. 97 00:06:44,660 --> 00:06:50,280 So this is gridster.net, very easy to set up and used with jQuery. 98 00:06:50,280 --> 00:06:53,180 So, check that out--gridster.net. 99 00:06:53,180 --> 00:06:56,890 I've tried to create things like that so many times over the years, 100 00:06:56,890 --> 00:07:02,660 and it's actually incredibly difficult so I'm really glad that thing exists. 101 00:07:02,660 --> 00:07:04,450 Next up is UI parade. 102 00:07:04,450 --> 00:07:09,260 This is actually very similar to UI cloud that we talked about in last week's episode. [UI Parade http://www.uiparade.com/] 103 00:07:09,260 --> 00:07:14,750 UI parade at uiparade.com, no dash this time, is basically just 104 00:07:14,750 --> 00:07:19,530 a gallery of very nifty UI design patterns. 105 00:07:19,530 --> 00:07:24,720 If you want to be inspired by these--inspired not ripped off--you can go ahead 106 00:07:24,720 --> 00:07:28,450 and just click through here and see what other people are doing. 107 00:07:28,450 --> 00:07:35,450 What's also nice is you can actually view the original source of where all the stuff came from. 108 00:07:35,450 --> 00:07:38,320 So, you can kind of trace who you should give credit to 109 00:07:38,320 --> 00:07:42,840 if you say--I made this, but i was inspired by so and so. 110 00:07:42,840 --> 00:07:46,270 Pretty nifty stuff. They have a whole bunch of categories on the left side. 111 00:07:46,270 --> 00:07:51,760 So, it's worth checking out before you go ahead and commit to the next project 112 00:07:51,760 --> 00:07:54,880 or commit to the next design pattern in your project. 113 00:07:54,880 --> 00:07:57,970 Really nice website. >>Yeah. Yeah. >>I'm very impressed by a lot of these things. 114 00:07:57,970 --> 00:07:59,680 It's very well put together. 115 00:07:59,680 --> 00:08:03,410 Finally, the last thing we're going to talk about is called PrismJS. 116 00:08:04,170 --> 00:08:08,320 This is a lightweight extensible Syntax highlighter that is, [Prism http://prismjs.com] 117 00:08:08,320 --> 00:08:12,040 "built with modern web standards in mind." 118 00:08:12,040 --> 00:08:17,090 And basically, what you're going to use this for is Syntax highlighting on your website or blog. 119 00:08:17,090 --> 00:08:22,610 It's just a piece of JavaScript you drop into your application, and it looks great. 120 00:08:22,610 --> 00:08:27,550 There are some really nice things to start you off and if you can see this on the screen, 121 00:08:27,550 --> 00:08:34,010 the highlighted text is great--very easy on the eyes and very easy to use. 122 00:08:34,010 --> 00:08:38,600 I think that's kind of the highlight of the show so far, Jason. 123 00:08:39,350 --> 00:08:45,730 I can't even think of a pun in time. That was wonderful. >>Thanks. 124 00:08:45,730 --> 00:08:49,020 That's it for this week's episode. Thank you guys so much for watching. 125 00:08:49,020 --> 00:08:52,400 If you have a tip, trick, or tool that you would like to submit to us, 126 00:08:52,400 --> 00:08:56,650 please tweet @nickrp and I'm @jseifer. 127 00:08:56,650 --> 00:08:59,770 We want you to thank everybody for joining us, and we will see you next time. 128 00:08:59,770 --> 00:09:01,450 See you later. 129 00:09:01,450 --> 00:09:05,100 [treehouse™]