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