The web development apps we use and recommend
Below is a list of Mac apps we use on pretty much a daily basis for web development tasks. There are lots of lists like this on the net, but we'd like to share ours. If you're in the field, or perhaps if you are starting out, the following list may be handy. I've only listed apps that we use at least once a week (or really come in handy when we need them) and that we use directly for web development.
Some of the apps are free, many are open source and some are commercial. Software that saves us time and frustration is worth spending a few dollars on we reckon.
For website development and coding:
Coda
http://www.panic.com/coda/
Commercial
This app is now at the core of our development. It's similar to Dreamweaver in that it allows you to manage separate sites and has built in FTP management, but it's uncluttered and lightweight. Some features I like in particular are the inclusion of code 'Clips' (snippits of code you reuse), live collaboration (which we actually use!) and quick find and replace functions. It's direct compeditor is Espresso - it's a great editor too, but Coda fit my workflow better for some reason.
CSSEdit
http://macrabbit.com/cssedit/
Commercial
This program allows you to analyse any website and edit its CSS on the fly, previewing your changes as you make them. Yes, you can already do that with some browsers, but what CSSEdit also allows you to do is inspect elements on a page and it will tell you what styles apply to it. It's a great program if you can't easily test out styling changes (like you don't have a development copy) and you are changing the design - you can test our your CSS edits first and then apply them confidently later. It's being integrated into Espresso in the future, so you can't buy it stand alone anymore, but bundled in it is still good value.
Smultron
http://sourceforge.net/projects/smultron/
http://www.peterborgapps.com/smultron/
Free and Commercial versions
A pretty simple editor, but not lacking in features. Great for quickly looking at code or making a few changes like a find and replace. I use it for quick note taking as well as it loads blazingly fast.
For creating designs and image/photo editing:
Adobe Illustrator
http://www.adobe.com/products/illustrator.html
Commercial
Although some people stick to Photoshop to develop web designs, we find that we prefer creating mockups in Adobe Illustrator. One tip here - find the 'snap to pixel grid' option and use it. A feature in particular that we use all the time is the artboards. If for example we have a home page design, we can quickly copy it and create another artboard to work on an inner page design. Then it's a simple matter of exporting PDFs or PNGs for previews for clients, with Illustrator using the artboards to create the pages/images.
Adobe Photoshop
http://www.adobe.com/products/photoshop.html
Commercial
I won't write much about Photoshop, it's pretty much essential for web development work. One thing we're finding we are using more of are Actions to automatically generate graphics.
Pixelmator
http://www.pixelmator.com/
Commercial
For quick image editing tasks like resizing, cropping and colour correction, Photoshop can feel a bit heavy on a system. Although not a complete Photoshop replacement, Pixelmator is still full of features and is really quick to open. If you haven't opened Photoshop for a while it can sometimes take 15 or so seconds to open (so you leave it open all day), whereas Pixelmator only takes two or three seconds, at most. The future version of this app looks like it will have a ton more features, so keep your eye on it.
For testing:
Virtualbox
http://www.virtualbox.org/
Free
Lets cut to the chase. Virtualbox is needed to run Windows, which then runs the various versions of Internet Explorer. Internet Explorer 8 and 9 are pretty good in terms of CSS problems, but IE7 and of course IE6 need to be whipped into shape. VirtualBox seems to be updated very regularly (which is a good thing).
We use IETester to run multiple versions of Internet Explorer under Windows.
Integrity
http://peacockmedia.co.uk/integrity/
Free
This program is great at checking a site for broken links and resources. It's quick, but detailed in its analysis. Great for catching that mislinked page or for finding broken external links.
For uploading/connecting to servers:
Cyberduck
Although Coda has FTP functionality built in, Cyberduck is a great FTP program to quickly get into a server. If you select a file and edit it with a text editor, saving the file will cause Cyberduck to re-upload the changed file. Although we haven't use it as such, it handles all sorts of protocols for managing files with 'cloud' based services such as Google Docs and Amazon's S3. It also means you get that cute little guy on your dock.
CoRD
http://cord.sourceforge.net/
Free
Although we prefer working on Linux/Unix based systems, there have been times where we've needed to log into Windows servers. This program does this effectively.
For running a server and database management:
MAMP
http://www.mamp.info/en/
Free and Commercial (MAMP Pro)
Simply put, the best way to run an Apache, PHP and MySQL environment on a Mac machine. Unless you are setting up a production server, don't bother with anything else. It's also pretty easy to set up multiple development sites on one machine.
Sequel Pro
To create and manage MySQL databases, Sequel Pro is just awesome. The application has lots of small features like sql auto-completion, powerful exporting and a user interface that has clearly been refined over time.
For creating screencasts:
ScreenFlow
http://www.telestream.net/screen-flow/
Commercial
We are keen on doing more screencasting in the future and after testing out quite a few programs for the purpose, we felt that ScreenFlow was the most intuitive and flexible for our needs. There have been occasions where a screen recording and upload to youtube has been quicker than trying to explain some instructions in an email. It's been well worth the cost.
Present Your Apps
http://www.eternalstorms.at/utilities/presentyourapps/
Free
Although ScreenFlow has a feature built in to hide your desktop icons, you still have visible your menu bar (and dock if you don't set it to autohide). Present Your Apps simply allows you hide both the menu bar and dock, making the application you are recording the only thing on the page. This is one of those simple programs that solves a problem elegantly.
Some extra apps we use on a regular basis:
ColorSnapper
http://colorsnapper.com/
Commercial
Anytime we work on a CSS document, we're selecting and entering in colour codes. This program sits on the menu bar and allows you to quickly pick a colour from your screen which it then copies to your clipboard. The program keeps a list of your recently picked colours for handy reselection.
PixFit
http://pixf.it/
Commercial
This handy app allows you to quickly take an on screen measuremen. It has a few different modes; if you single click, it inteligently looks at the screen and will measure the gap between areas. If you drag around something, it will snap around objects. Holding down shift puts it into more a manual mode. Like Colorsnapper, this app sits in the menu bar and can be triggered by a shortcut key. After a measure, it will copy to the clipboard a height and width (in pixels), ready to be pasted into a stylesheet. A lightweight app that does one task, and does it well.
Structurer
http://net.tutsplus.com/freebies/others/free-mac-utility-app-structurer/
Free
Now this is an interesting program! When you start up a new project, a common task is to create a series of folders to store your designs, resources and the website itself. Structurer allows you to create templates for these structures and create them quickly. It allows you to create template files to populate your folders with, as well as automatically download and extract Framework/CMS zips from the web into folders. With this, I just type in the name of the client folder I want and one click fills it will all the files and folders I need to start.
YemuZip
http://www.yellowmug.com/yemuzip/
Free
Zipping up files on a Mac using the feature built into the Finder includes extra unwanted files like .DS_Store. YemuZip is a quick zipping program that allows you to zip up a folder without including such files. Handy.
SiteSucker
On occasion, we've needed to download a complete site for offline viewing or for backup purposes. When we've not had FTP access, this program has allowed us to do that.
Finally, a couple of browser plugins we wouldn't go without:
Aardvark
http://karmatics.com/aardvark/
The most useful browser plugin for me by far. A quick trigger of the bookmarklet and I can quickly see how a web page is constructed. Once you use this, you can't live without it. It is available as a plugin for Firefox or a Bookmarklet for all major browsers.
Web Developer toolbar
A handy plugin available for Chrome as well as for Firefox that does lot of things, like turning off stylesheets, showing Topographical Information, page validation and a bunch of other handy stuff.
Well there is our list of the apps we use regularly, hopefully there is something on it for you!
- Ryan
Disclaimer: I'm not affiliated with the developers of these programs, we just think they are great. Their icons have been used for reference only and only used to identify them. We're assuming that developers won't mind their logos being used when we're recommending them, but if you are the copyright holder of these logos and you don't want them on this page please let us know!
Final note: if you ever need an easy way to extract an application icon and save it as an image, this tip works a treat and was used to extract the above images.