Useful applications for MacOS X

Some of the useful applications/utilities I use on my Macbook Pro:

  • Textmate
  • Notepad++ used to be my favorite code editor an year ago when I was a Windows user. I still feel Notepad++ is the best GUI based text editor, very useful and lightweight. But Textmate is equally good and when you get used to it, you’ll realize the power it offers to you.
  • Adium
  • Probably the best messenger client on Mac. Supports all the major IM services.
  • DiffMerge
  • A simple but useful diff utility for Mac. Allows to merge content. Editing is possible while viewing the diff.
  • Disk Inventory X
  • Visual representation of all files on your Mac. Files are represented as blocks. Block size represents the size of the file. Very handy when you need to clear up some disk space.
  • iTerm
  • Perhaps a better terminal application than the one bundled with Mac.
  • JustLooking
  • Very useful and lightweight image viewer. This is a must as the default image viewing utility in Mac, Preview, is short of a lot of features.
  • Breakaway
  • A pretty useful application that pauses the music in iTunes when you hit the mute button or pull out your headphones.
  • Clyppan
  • Clipboard history application for Mac that keeps a list of text you have copied to the clipboard and allows you to paste it again by selecting it from the list within Clyppan.
  • EverNote
  • Just started using but seems to be a nice tool for keeping notes. A good alternative for OneNote on Windows.
  • Miro
  • The best internet video application. Watch or download online videos including YouTube. Nice interface.
  • CyberDuck
  • CyberDuck is a nice and simple FTP utility. You can edit text files remotely without downloading. Also supports drag and drop.
  • Firefox/Chrome
  • My favorite browsers on both Mac and Windows. Generally I use Firefox for development purpose due to the large set of development tools available for it.
  • iTunes
  • Probably the best music player for Mac.
  • Folx
  • A nice download utility for Mac.
  • Parallels
  • Parallel Desktop allows you to run any other OS in a virtual machine. I use it to run windows as web developers can’t live without windows 😛 The other best alternative to Parallels is VMware Fusion.
  • Stickies
  • When you need to take quick short notes on yellow paper 🙂
  • Entourage
  • My email client. Thunderbird is a free(maybe better) alternative but since I started with Entourage, was too lazy to shift 😛
  • VLC
  • The best video player on any platform.
  • Photoshop
  • No need to say that Photoshop is the best image editing tool available. Only problem: It’s not free.

YUI Lightbox

While working on my last project (Floating Cart for Yahoo! stores) at Yahoo!, I came across an application called Lightbox. The reason it drew my attention was incompatibility with our application. Our customers who had lightbox were facing issues using the Floating Cart. The problem was not with the lightbox application, but the javascript framework called Prototype that was used to create the application. I’ll post the details about this in some other post, let’s move to lightbox for now.

So you must be wondering what lightbox is? It’s a simple but useful application to overlay images on the current page. Simply speaking, if you are on a webpage with multiple image thumbnails which link to the actual images, using lightbox the images will open up on the same page in a modal window. To add this feature, you just need to add the lightbox script (and all dependencies) to your website. There are multiple versions of lightbox available on the internet but this one is the most popular. It uses Prototype javascript Framework and Scriptaculous Effects Library.

This weekend I spent a few hours trying to create my own version of lightbox using YUI 2. Its a very basic implementation and uses the Panel widget from YUI. I also added a few effects to it. Since ContainerEffect contains only SLIDING and FADING effects, I added a few of mine.

The demo can be viewed here: YUI Lightbox Demo

Installation

The lightbox script can be downloaded from here: lightbox.js lightbox.css

To make lightbox work, you need to add the following YUI javascript and CSS files to your page:

<script src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/container/container.js" type="text/javascript"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/animation/animation-min.js" type="text/javascript"></script>

Initialize

Use the following code within script tags in your HTML page to initialize lightbox:

function initLightbox() {
    var lightbox = new YAHOO.odhyan.Lightbox;
    lightbox.init();
}
YAHOO.util.Event.on(window, 'load', initLightbox);

HTML to use

Its very easy to add lightbox to any of your links. Just add a classname of yui-lightbox to your anchor element.

<img src="img/image1_thumb.jpg" alt="" />

For better understanding, view the code of index.html

You can customize the lightbox style by adding your own styles to lightbox.css

This is not the first lightbox implementation using YUI. There already exists one and can be viewed here.

Links