I thought it’d make an interesting experiment to post my current top 10 apps for Web Design and Development on the Mac now at the beginning of the year, and then follow up at the end of the year to see what, if anything, changes.
So without further ado, here are my top 10 apps (in no particular order) for web design and development on the Mac:
1 MAMP, MAMP pro
It’s always best practice to develop and test everything locally before uploading to a server, and whilst the Mac comes with an Apache Server & MySQL already installed, I use MAMP. It’s quick to install and get up and running, and easilly configurable from it’s simple interface. An installation of MAMP gives you an Apache server with PHP and MySQL and the ability to locate the root level of your localhost server anywhere on your Mac. The basic MAMP installation is free but the paid for MAMP Pro is much more configurable and it allows you to setup multiple virtual hosts, and use Dynamic DNS.
developer: appsolute GmbH
Price: MAMP: free / MAMP Pro: €29.00
Developing and maintaining a project would be a nightmare without some kind of version control. I use Subversion, as it plays well with my choice of editor (Coda — see number 4). Subversion can be a struggle to learn, but once learnt it definitely makes life easier.
So now we’ve got the server environment and version control set up, what about working with MySQL?. I could use the command line or PHPMyAdmin which comes preinstalled in the MAMP package, however, on the Mac you can’t go wrong with SequelPro. It’s simple, powerful and free, giving you direct access to all your databases both local and remote.
developer: Panic Inc.
Although Coda has a built-in GUI for handling CSS I still find myself coding all my CSS in CSSEdit from Macrabbit which I have been using for much longer than Coda. In fact, CSSEdit is the app that taught me CSS. The main window is split in to 3 columns, the left column contains all your classes, ids, selectors etc., the right column is a GUI for building your styles and the central column is a text editor for any manual adjustment you would like to make. On top of this, the Preview window gives you a live preview of your site which changes in real time as you edit your CSS. And that only scratches the surface of what this little app is capable of. If your developing on the Mac and you don’t have CSSEdit get it now!
When you have been working with version control for some time there will come a point when you want to either compare or merge a document with a previously archived version. If you have the Apple Developer Tools installed (they’re on your Mac OS X install CD) you can use FileMerge. However, a far more elegant solution is Kaleidoscope. As well a having a fantastic interface, Kaleidoscope has the ability to compare image files. Kaliedoscope can also be configured to work as the default diff app for Versions, TextMate, Cornerstone, Subversion (command line), Git, Mercurial, Bazzar and with a bit of command line persuasion Coda.
Anyone who is familiar with Photoshop will instantly have some idea of where Pixelmator is coming from. That’s not to say that it is a direct copy and whilst not as poweful as PS, it has some features and functionalitiy that is in fact better. Pixelmator can only handle RGB but as I’m using it for web graphics that’s just fine. Pixelmator uses Apple’s in-built quartz filters for image effects, so if you have Apple’s Developer Tools installed and you know your way around Quartz Composer, you should be able to build your own. All the familiar features are here, selection tools, gradients, brushes (it even supports Photoshop brushes). It can open and save in the .PSD format although some features like layer effects are not supported. It’s not a complete replacement for Photoshop (one thing I miss is some kind of path tool), but it can do most things – and for the price (E29 from the app store – which includes a free upgrade when version 2.0 comes out) it’s just great!
developer: Pixelmator Team
Price: €29.00 (Mac app store special offer)
When it comes to designing icons I generally prefer to use a vector app. There are several alternative vector apps out there for Mac and each has it’s pros and cons. I am currently using Sketch which I got at a reduced price when I purchased the excellent Fontcase (see number 10). If you’re used to using Adobe Illustrator then this app can take a bit of getting used to, however, once learnt it’s really quite fun to use and for icon design it’s prefectly adequate. It creates files in it’s own .sketch format but it can export to .pdf, .eps. .svg, .jpg, .png and .tiff.
developer: Bohemian Coding
This small utitliy is great! Before uploading any images I always run them through ImageOptim — if fact I have an Automator action set up to process them and the upload to my server. Basically ImageOptim is a GUI for several command line utilities (PNGOUT, PNGCrush, OptiPNG, AdvPNG, JPEGOptim, Jpegtran & Gifsicle). Even after saving an image using Photoshop’s Save for Web feature you can make considerable savings on the size of images (PNGs in particular) by running them through ImageOptim.
developer: Kornel Lesiński
When it comes to Font Management the Mac’s built-in Font Book is not really up to the job — enter Fontcase. Fontcase is a kind of ‘iTunes for fonts’, it makes organizing, activating, and choosing fonts easy and enjoyable.
developer: Bohemian Coding
Whilst I’m not claiming these apps are the best out there — although one or two (Fontcase and CSSEdit spring to mind) probably are — I am using them all on a more or less daily basis. It will be interesting to see how that changes over the course of 2011.