You are here

23 Essential Tools For Web Development on a Mac

    Every web developer has their own favorite platform to create in. Some prefer Linux, while other prefer Windows or Mac. One thing is for certain though: each platform has a passionate rabid community behind it. Those web developers who prefer the Mac are no different, and for good reason:

    The Mac boasts some excellent software for web development.

    Here are some essential bits of software that every Mac-owning web developer should have in their toolkits. From text editors to command line tools, here is the best Cupertino has to offer to aid the web developer, soup to nuts.

    Text Editors

    When it comes to text editors, there are quite a few choices to choose from. Some are free, some are paid, but like any bit of software it all comes down to the developer’s preference. The same is true between the two most popular text editors for the Mac, Textmate and BBEdit.

    Textmate

    Project Window With Tabs

    Textmate is one of the most popular of the text editors. It has a bevy of features, like file tabbing for having multiple files open in a project, works with xcode, and integrates with FTP clients. It also comes equipped with “bundles” that allows you to have multiple different configurable languages. (This post is actually being written and published in Textmate.)

    Textmate isn’t free, however, and costs $59. Check out Textmate’s manual to get a better feel for how Textmate works.

    BBEdit

    Project Window With Tabs BBEdit

    BBEdit is another full-featured text editor that is very similar to Textmate in terms of features. The BBEdit product page even has a section for web developers to see the benefits of BBEdit. For those Mac users who think BBEdit is better than Textmate, it’s usually because BBEdit is a Cocoa application, and TextMate is a Unix application. Without getting into the nitty-gritty between the two editors, the main differences between the two applications are 1) look-and-feel and 2) price. BBEdit is a steep $125, more than double the price of TextMate.

    Test Environments

    It’s important to have a good test environment on the mac, especially if you’re programming with a dynamic language. Since the majority web development is done in PHP or Rails, it’s best to set up a test environment with the likes of Apache and MySQL. There is one tool that makes this all very easy.

    MAMP

    Controllcenter MAMP

    MAMP is a quick and painless way to set up Macintosh, Apache, MySQL and PHP in the same environment. What used to be a tedious process now literally takes just a few seconds between downloading MAMP and installing the software. Instantly you’ve got a fully-functional web testing environment for your PHP applications. It also comes locked and loaded with PHP extensions like Zend, and you can specify different cacheing types like APC, eAccelerator or XCache.

    You can apparently use MAMP to run a Rails environment as well.

    Update: Thanks to some savvy commenters, I’m adding Aptana to the list. Aptana is a programming environment for languages like PHP, Rails, Java, Ajax, Javascript and others. The software also comes with optional plugins like Adobe AIR and an iPhone environment. The community edition is 100% Open Source, and they have a Pro Edition with paid support and a few extra features.

    FTP

    Cyberduck

    Cyberduck
    Photo by ClausM

    Cyberduck is an incredibly user friendly FTP client that’s provided for free and licensed under GPL. It can be used in many different settings, like FTP, SFTP, WebDAV and Amazon S3 straight out of the box. Cyberduck also integrates seamlessly with essential Mac functionality, like Bonjour, iDisk, Growl, AppleScript, Spotlight and even Quick Look to instantly see the guts of the file with a tap of the spacebar.

    My favorite aspect of Cyberduck (aside from the free-ness), is the fact that it integrates easily with many text editors like Textmate. As an added bonus, Cyberduck also allows you to use Quicksilver to access your FTP bookmarks. Very handy.

    Transmit

    Transmit mac ftp

    If Cyberduck is a cadillac of FTP clients, than Panic’s Transmit is a Rolls-Royce. It offers almost all of the same functionality as Cyberduck, but adds a little more robustness for advanced user. For example, you can edit any remote file (even a picture or graphic) in any software using Transmit.

    The only downside to Transmit is that it costs $29.95, whereas Cyberduck is free.

    Code Editors

    Text editors offer a simple, no-frills approach to programmers. However, sometimes developers prefer to use software that has more of an interface than the traditional text editor. Here are some code editors that allow you to do things with more of a visual approach and allow for greater functionality.

    cssedit

    Cssedit mac

    cssedit is a CSS editor with a fantastic user interface. It has the look and feel of a Mac application, which makes the experience of editing CSS much more enjoyable. It has nice built in features like being able to extract stylesheets and learn from other other websites, an inline visual editor, and you can even edit css inside of ajax.

    cssedit will cost you almost $43, but if you’re a sucker for beautiful interfaces, this software might be exactly what you’re looking for.

    Coda

    Coda

    If you’re building a site from scratch, it’s nice to have a program like Coda where you can manage all the files and FTP functionality from within one program. Built by Panic, the same guys who develop Transmit, Coda is a one-stop solution for web developer. Within code you can manage files, ftp to a server, preview the code, use a css editor (like cssedit), and even use Terminal all from within Coda. And if that weren’t enough, they’ve thrown in a copy of The Programmer’s Desk Reference from within the software.

    Changes

    Changes diff mac

    Changes is a nifty application that lets you visually browse changes to your code base. Instead of having to use a subversion to manage your code base (though Changes works with svn and other repository software), you can use Changes. This is great for sites that have multiple developers working on them and want to make sure their code is up to date. You can use your favorite text editor like Textmate or BBEdit to edit files.

    Collaboration

    Any web developer knows that collaboration is a huge part of web development.From asking questions in forums or IRC channels, to working in a code base that is shared among other developers, programmers need fraternization with other developers.

    Colloquy

    Colloquy

    IRC is an old skool method of chatting online, and has been the method of choice for programmers and developers to communicate. Many major projects like Wordpress use IRC to provide support for their open source projects.

    Colloquy is an extremely helpful IRC client for the Mac. It’s open source, allows for plugins and styles, and even has an iphone interface. Robust, elegant and powerful.

    SubEthaEdit

    Subethaedit

    SubEthaEdit is a collaborative text editor for the Mac. You can use the software as a text editor, note-taker and for co-writing text. It integrates with Bonjour, iChat and Mail, but isn’t limited to those integrations. SubEthaEdit also has a fairly robust editing syntax for many different languages. So really, this is a swiss-army tool for developers that work in a collaborative environment that share code often. It’s not free (around $54), but SubEthaEdit could be well worth the price given its usefulness.

    Skype

    Skype Tool
    Photo by Huasonic.

    While it’s not typically thought of as a web developer’s tool, Skype can be a lifesaver. Not only can it save lots of coin on your cellphone bill, Skype adds a lot of features that a traditional phone can’t touch. For example, Skype has a pane for text messaging and sharing files. The ability to share snippets of code while you’re talking is essential. While the video feature might not be that useful to web developers (who’d want to see my ugly mug?!), some might find it useful as well.

    Oh, and did I mention it was free?

    Command Line

    The command line is not for the faint of heart. It can be incredibly useful, and incredibly frustrating for new users. So much functionality and power in one little window, yet the learning curve can be steep.

    Terminal

    The built-in Terminal is a great place to start when working with the command line. There’s a great guide to learning Terminal, but essentially Terminal is a bare-bones tool that allows you to do just about… anything. I’d recommend you read the tutorial for a better explanation (as it’s outside the scope of this article). I’d also recommend snagging the Quicksilver plugin for Terminal to help speed your usage.

    iTerm

    Iterm

    If you’re looking for a way to ease the pain of using the command line and Terminal, try iTerm. iTerm is a “Terminal emulation program” that adds a bit more functionality and user friendliness to Terminal. It offers features like multiple tabs, bonjour support, bookmarks, and much more.

    Database Managment

    Managing databases can be a pickle for the casual developer. If you’re just wanting a simple install of Drupal, creating a database is a necessary evil. It’s nice to have software that can add an interface that doesn’t require you to know SQL to help with functions like creating a database, adding users, or creating tables and rows.

    phpMyAdmin

    Php my Admin mac Programmer
    Photo by jeromejtk

    phpMyAdmin is the kindly old grandfather of database management scripts. Not necessarily hip to an attractive user interface, phpMyAdmin still has the skills to pay the bills. You can manage your databases locally using this stable script. It ships with MAMP, so installation is a breeze. If you’re not MAMP, then you’ll have to configure PHP to run on your Mac, which is a much more involved process. Still, phpMyAdmin is a tried and tested solution for managing databases with a UI.

    CocoaMySQL

    Cocamysql web development

    CocalMySQL is a database tool developed specifically for Mac with Cocoa. It has the elegant look and feel of a true Mac application, and is laden with features. CocoaMySQL is much easier than phpMyAdmin on almost all fronts; it’s easier to setup, has a much more intuitive interface, and runs more like a Mac program. The software is also licensed under the free GPL license.

    Image Editing

    Photo editing and design creation may not be at the core of a web developer’s responsibility, but there are some instances where it’s handy to have a solid photo editor that is nearly comparable to Photoshop, but won’t break the bank.

    Gimp

    Gimp osx Aperture
    Gimp used with Aperture

    Gimp is the closest thing to Photoshop that Mac users can get with a $0 price tag. It has many features and has the ability to be extended with Gimp plugins.

    Gimp is an application application for developing for web development. While it isn’t quite as useful and feature-rich as Photoshop, it comes pretty close. Note: You’ll need Apple’s X11 environment installed.

    Seashore

    Seashore is equivalent of a little brother to Gimp. While it’s code base is based off of Gimp, it doesn’t aim to be as robust or functional. Seashore is meant to meet the needs of “normal” computer users, not to be a replacement for a professional image editor. The software is only a tiny 5.4 MB in size and unlike Gimp doesn’t require having X11 installed. If your image-editing needs are modest, try Seashore.

    Pixelmator

    Pixelmator

    Pixelmator is a beautiful image editing program for the mac. It’s incredibly intuitive and useful, but doesn’t have all the features of a Gimp or Photoshop. It’s got all the layer editing and retouching tools that we’ve grown to love, and the interface is gorgeous. The only downside to Pixelmator is the $59 price tag, which is still a drop in the bucket compared to Photoshop.

    Miscellaneous

    Here’s a collection of tools that every web developer should have on their Mac, but don’t necessarily fit into one category. These programs are just as useful as the other applications in the list, just harder to categorize.

    Firefox

    Firefox mac
    Firefox 3 on a Mac. Photo by hawkfb

    Unless you’ve been living under a rock for the last few years, you’ve probably heard of Firefox. Not only is Firefox an excellent web browser, the real power of the browser lies in the ability to add extensions that aid in the web development process. Here are a few must-haves for developers and programmers.

    • Firebug – A swiss army extension that provides diagnostics of all kinds on web pages, javascript, css and more.
    • Web Developer – Another swiss-army extension for developers. You can do just about anything with this tool, like disable scripts and styles, find broken links and images, check Whois of websites, display form information, and so much more.
    • YSlow – this is a Fiebug extension (yes, an extension of an extension), YSlow adds diagnostics that show what’s slowing your webpage down. It provides a “report card” of sorts to help you work on issues that slow your site down.
    • Greasemonkey – Greasemonkey is a gateway extension of sorts. With Greasemonkey, you can add literally just about any sort of functionality via userscripts.

    There are any number of web developer extensions that one could add to Firefox. It’s just a matter of finding the right one.

    Quicksilver

    Quicksilver mac Developer
    Quicksilver photo by bwana.

    Quicksilver is a launcher tool that does so much more for developers. If you’re wanting to save time and keyboard strokes, consider giving Quicksilver reign over your computer. For more information as to what Quicksilver is, check out Lifehacker’s introduction to the Mac launcher.

    The real beauty of Quicksilver lies in the countless plugins with software that many web developers already use.

    Xcode

    Xcode
    Photo by barcoder96

    Xcode is Apple’s development package. This gi-normous 900mb download adds tons upon tons of system mojo that you’ll probably have to eventually install to your system that you’ll probably use down the line. Many serious development software like SVN and the like use dependancies that Xcode takes care of. Xcode is free for the taking.

    Isolator

    Isolator for mac developer concentration

    While Isolator isn’t a crucial application for developers, it’s quite handy for blocking out distractions while you’re getting work done. Isolator is a free program that blocks out everything but the single application you’re working on. This gives a distraction-free environment for writing, programming, or whatever else needs your attention. Just tap the keyboard command cmd + shift + I (or use the toolbar menu) to start/stop Isolator.

    Spaces

    Spaces mac

    Spaces is a handy built-in application for Leopard users. It allows you to set up virtual “spaces” for different screens on your computer. This is helpful for developers because you can separate your work flow into different panes. For example, you could have ftp and terminal open in one space, Textmate in another, Firefox in the third and Gimp or Photoshop in the fourth. It’s easy to toggle between the spaces using the command ctrl + arrow, or you can use ctrl + the number of the space you want to switch to.

    Nobody likes to toggle through tons of different applications at a time. Spaces effectively clears up much of your work area, allowing you to segment your applications into whichever configuration you’re most comfortable with.

© 2014 Web Jackalope