My tools for web development on OSX

I am the first developer in my office to make a serious push to switch from windows. First I went to my good old ubuntu and all was well. Recently however I switched to OSX at the home and found it to be the perfect setup for me. The switch however was not without it’s trials. I had to find new tools to do the same tasks I had been doing on other operating systems.

I have been using OS X almost exclusively as my desktop and development environment for a little over 6 months now. I have reached a point where I have finally settled into a grove and I am now getting asked what tools I feel are the best to get the job done. I figured that now is as good of a time as any to list the tools I can’t live without on OSX.

Before I start. Let me tell you how I like my web development environment setup. It is a fairly simple setup. I like to have a web browser open in one screen for checking my progress, a ftp client and a text editor open in another screen. I typically do not do image creation, that is handled by other team members, but if it is required I like to do that work on a separate virtual desktop. I do not run any services on my development machine. Instead I have a test server setup exactly like my production server. I sFTP into that server and do all my work there directly. Once I have reached a point where I am ready to commit my code to our repository. I simply download the folder off my test server and commit the changes.

So without further ado, here is my list of must have applications and plugins for web development.

1. 

   TextMate – This is the single greatest code editor I have ever used. It has many great features such as auto indentation, auto pairing of brackets, clipboard history, auto completion, column selection, tabs, foldable code blocks, recordable macros, themable syntax colors, shell support, support for over 50 languages, full regex support for searching, and you can write plugins in many common languages. That is only the tip of the hat. I learn something new about TextMate every day. It also works very well as an editor when using xcode (My favorite IDE on OS X). Prior to TextMate I was a die hard vim fan. When I moved to the mac I found that vim just did not have the same feel to it (I used gvim and not vim via the console). I tried many alternatives including Dreamweaver CS3, jEdit, TextWrangler, Smultron, Coda, and even XCode. I found them to either be too heavy or not “unixy” enough for me. TextMate fit the bill, it is without a doubt the most powerful and intuitive editor I have ever used. The downside is this is NOT free software. But well worth the $54.00.

 

2. 

   CyberDuck – This is a free and open source (GPL) FTP application. CyberDuck is great because it fits the look and feel of OSX, and integrates with TextMate. Just open a connection and right click on a file and choose edit. TextMate will open with the file. Saving the file automatically uploads back to the server. This is great because I can just click save and reload my browser to see the changes immediately. Prior to selecting CyberDuck I tried and failed at finding any good sftp/ftp applications that were in the price range I feel an application like this should be. For some reason people think a simple ftp application should be $30.00. This is crazy. I also tried a few free and open source products such as filezilla. But it just felt like it did not belong on my OS X desktop. I did notice that for larger batches of files filezilla appeared to upload faster then CyberDuck, but for the most part this is a non issue to me.

 

3. 

   scplugin – At my workplace we use Subversion to control all of our source code. Most of the people at work use tortoiseSVN on Windows XP. I have for the most part used that when I was on windows and used the console svn command when I was on linux. On OS X about 90% of the time I still use the console for SVN commits and checkouts. I have however recently began playing with scplugin. It works just like tortoiseSVN does on windows. It integrates SVN functionality right into finder. It works great and I can see it quickly becoming the way I access SVN in the future. scplugin is free and open source under the MIT license. Another great alternative is RapidSVN

 

4. 

   GIMP on OS X – My work recently bought me the Adobe CS3 Suite so I am now using PhotoShop, Flash, and Designer when I need to do graphical work (which is very rare). But before that when I needed to create a quick graphic I would use GIMP. GIMP is free and open source under the GPL license. has always worked great for me on linux and has every feature anyone could want for web work. The OS X version is a little quirky. It uses the X11 application which doesn’t have the best track record in OS X and makes the clipboard a little screwy. But its a great solution to those of you who can’t afford PhotoShop. Another promising alternative is SeaShore. This open source application takes GIMP and creates a native cocoa OS X application. If you can’t deal with using X11, give it a try.

 

5. 

   Firefox and it’s plugins – I am mentioning firefox to point out the great extensions out there that you can use to improve your development process. These are my list of must have firefox extensions when doing web development.
     

   1. Firebug – Firebug is the single most important extension I use in Firefox. It allows me to quickly debug and test javascript, examine the and insert into the DOM, check and change CSS, review the input and output of request, and tons more. When I’m working a AJAX projects this is the best way to see what is being sent to the browser and the fastest way to find errors. Without this extension, my development times would probably be triple. A quick note that you can get similar features by turning on developer mode in safari. It is close, but not as easy to use in my opinion.

    

   2. FireCookie – FireCookie is an extension to the FireBug extension. It adds the ability to edit, examine, and delete cookies. This is a small, but very useful feature.

    

   3. CodeBurner – CoderBurner is yet another extension to FireBug. This one adds documentation to just about any HTML or CSS element, attribute, or property you can think of. It also gives you great information about the compatibility of these features. I can’t live without this.

    

   4. MeasureIt – This extension allows you to measure areas of your webpage or create a ruler on the screen. This is great if you are trying to size an image or decide how much bigger you want to expand a div.

    

   5. ColorZilla – Finally, we have ColorZilla. This extension is great for finding out what color is under your cursor. If you find a color you want to match this makes it really easy. This is great if one of our developers sends me an image and I want to match a color on the page.

    

6. 

   Viscosity – This is an openVPN client for OS X. Because my test server is at my employers datacenter, I need vpn access to reach it. When we decided to restrict outside access directly to the servers and setup vpn, I selected and setup openVPN. While openVPN has a great windows and linux client, it was hard to find a good graphical client for OS X. The first application I found was Tunnelblick. This free and open source (GPL license) application works great but is a little short on polish. I quickly found Viscosity and found it has all that polish and more. The downside is Viscosity is not free and open source. However it also will not break the bank. For a quick $9.00 you get what is in my opinion the best openVPN client ever made. They have a free trial so give it a shot.

You will notice that I did not mention terminal.app. While a good terminal is a must for web development, the terminal apple provides is more than adequate. I am satisfied with it and do not feel the need to seek out a replacement. Other noteworthy tools are inkscape, openoffice draw, and of course all the mainstay but expensive Adobe Suite products.

So what applications do you use?