Make a Quick Pandora OS X Widget

by Ian

Pandora LogoI’ll admit it, I’m a Pandora addict. My own personal DJ is, in my opinion, pretty awesome. I listen to it almost all day too: on the train (iPhone App), at work, at home. So I’ve been looking for a way to play Pandora on my OS X desktop but haven’t found anything I really like. Then recently I read about Safari’s Web Clips and a lightbulb went off: I could use a Pandora Web Clip!

It’s actually super easy to do, and I’d recommend it for pretty much any webpage you use passively on a regular basis but which takes up valuable browser tabs and hog memory.

Fig. 1

Fig. 1

Examples include Pandora, obviously, but also Gmail, Facebook, Twitter etc. Of course you could always download applications for all that but in my opinion it’s nice to not have to go through the hassle of installing Apps and cluttering your Applications folder with stuff.

Well let’s get on with the action!

Direct your Safari browser to http://pandora.com and once the page loads, go to FILE > OPEN IN DASHBOARD [Fig. 1]. Now you’ll have the option to select a certain area of the page, which means you can select only the music player. Now just select the area you want, which for me is the Pandora player and none of the other stuff. Now once you’ve selected the area you’ll see a purple ADD button in the upper right corner of Safari [Fig. 2].

Fig. 2

Fig. 2

Fig. 3

Fig. 3

The Dashboard will open automatically and you will see the widget. Now wait for it to load and you’ll be able to play music through it. The default setting is to only play music in the Dashboard which isn’t necessarily helpful. Your next step is to click on the (i)nformation symbol in the lower right corner of the new widget [Fig. 3] and uncheck “Only play audio in Dashboard.” This will keep Pandora playing even when you are not in the dashboard and you can get rid of that extra tab you’ve always got up.

Congrats, you’ve done it!

Friday Quickie: Google’s Page Speed rocks

by jeff

Yesterday Google released their Firefox add-on, Page Speed. Until now, this compliment to Firebug was closed source and only used internally by Google. Now it’s free and open source – and it’s pretty cool.

What’s it do?

Page Speed adds new tabs to the Firebug panel letting you “record” a page load, saving metrics on everything the browser pulled down. Then Page Speed examines the recorded metrics and provides a detailed performance analysis, including suggestions for tweaking your code. It will even find unused CSS in your style sheets and tell you precisely which lines you can remove.

Page Speed - recording
Page Speed - analysis

There are loads of desktop applications and web sites that can give you similar stats and speed tips, but Page Speed’s integration with Firebug, robust data collection and smart analytical abilities really stand out. It’s no wonder Google used it internally.

Last month I wrote about 10 Firefox Add-ons for Web Designers. Less than a full day after its release, Page Speed is definitely #11 on that list, and easily in the top 5 must-haves.

Video: The Vendor Client Relationship

by jeff

As designers, we constantly deal with requests that would never fly in retail or service industries. Here’s a funny, and all too true look at the relationship between clients and vendors.

The Vendor Client relationship – in real world situations

“Sir… we’re not the Taco Stand.”

“I had beef. Same thing as I had here.”

“You had the filet!”

“Yeah, cow.”

10 Best CSS Practices to Improve Your Code

by jeff

I’ve written another article for Webdesigner Depot on CSS best practices. Here’s an excerpt:

It’s really easy to find yourself wondering how your CSS got to be such a mess. Sometimes it’s the result of sloppy coding from the start, sometimes it’s because of multiple hacks and changes over time. Whatever the cause, it doesn’t have to be that way. Writing clean, super-manageable CSS is simple when you start off on the right foot and make your code easier to maintain and edit later on.

Here are 11 tips for speeding up the process, writing CSS that is slimmer, faster and less likely to give you a headache.

Check out the full article here »

Friday Quickie: Lorem Ipsum generator round-up

by jeff

A recent comment on my post 10 Firefox Add-ons for Web Designers got me thinking about all of the Lorem Ipsum generators I’ve come across, and which ones I use regularly.

LoreM9:
I think that “dummy lipsum” add-on has to be the 11th add-on for web-designers! ^_^

What is lorem ipsum?

It is “a common piece of text used as mock-content when testing a given page layout or font.” It’s especially useful when you need to show how text will appear in your designs, but don’t have actual content. The fact that lorem ipsum is “dummy” text that has no readable meaning helps assure that people reviewing your design are not distracted by reading the content, and instead pay attention to the design itself.

You know all those times you’ve shown a design concept to your client or management and they’ve pointed out grammatical or spelling changes, despite you telling them that the text is just a placeholder? Irritating, isn’t it? Use lorem ipsum and you’ll nip that issue in the bud. Beware though, with lorem ipsum you’ll still hear comments like “What language is that? I don’t speak Latin, and I don’t think our customers do either…”

You might like a Firefox add-on, a desktop app, or maybe you prefer a web-based generator. Here’s a list with something for everyone:

Firefox Add-ons

Desktop apps

OSX

Windows

Linux

Web-based

Well, that’s my quick list. If you have one you’d  like to add, drop it into the comments.


building