The Mac Web Developer’s toolkit

by Milind Alvares

The Mac Web Developer’s toolkit

by Milind Alvares on March 22, 2010

Post image for The Mac Web Developer’s toolkit

[tweetmeme]If there’s an area of professionalism on the Mac, completely covered by third party apps, it’s web development. There’s so many applications and services covering every intricate stage in web development—which as you know is a multi-stage process—that a developer would be a fool to still hold on to their PC workflow.

While I’m not an advanced javascript or PHP coder, I think know my way around things enough to know what’s good and what can be ignored. If you’re interested in checking out the whole scene, there’s an extensive roundup of 60 apps on AppStorm. What we’d like to give you with is a workflow of apps that go well together.

Getting a rough idea

So where does web design start? HTML? No. It’s the drawing board. I start with my trusty old whiteboard, hanging on the wall. Pen and paper should do fine, too.

For demonstration purposes only; via NathanealB on Flickr

Once you’ve figured out how the site navigates through, it’s time to take the project to Photoshop. Or wait, there’s an equally adept tool specially geared for Mac users, Pixelmator. While Pixelmator will not get you those exact pixels you might want to impress your clients with, it’s certainly capable at producing good mockups which you can code later. This is very fitting with the current trend, which avoids the bitmap mockups in favour of directly creating to functional web pages with the right interaction. Still, that’s not dissing Photoshop, it’s certainly the better tool.

The Coding Platform

Once you’ve done with your design, it’s time to put it into practice. Coda was my weapon of choice, but I’ve since moved on to using Espresso for all my coding. There are pros and cons to both. Coda is definitely a better for a one-app one-window based workflow, as it encompasses a site manager, FTP, editor, CSS editor, and even comes with an SSH terminal. CSSEdit on the other hand beat’s Coda’s pants in terms of pure CSS editing, and Espresso’s FTP site manager makes Coda’s look like some home grown nonsense (okay not that bad). Moreover, Espresso is definitely more ‘modern’ with its editor, with code-collapsing and other cool features. Read about my switch to Espresso, if you’re interested in knowing more.

There’s one editor I’m not not very familiar with, and that’s Flux, by the Escapers. It’s a application kind of like Coda, but has this pathetic drop shadow, inner shadows and useless effects applied to every bit of UI that I find completely unnerving. I did use it a couple of times though, and from what I can feel it’s quite a powerful client. I just can’t bring myself to actually using it.

Of course, you can do it all for free using TextEdit. But if you’re looking for something more geared for code, you can’t go wrong with Bare Bones’ BBEdit. It’s got everything from an FTP manager, code collapsing, GREP; the works. That said, I’m not very comfortable with its general look. It’s feels old, cluttered, and I much too much prefer to work with Espresso. Your mileage may vary.

Where would a Web developer be without an FTP manager?

If you’re looking for a good FTP client, try CyberDuck. If you’re looking for a free FTP client, try CyberDuck. Feature rich? CyberDuck. This open source client encompasses everything an FTP client should have, and more. However, user interface is kind uninteresting, so if you’re looking for a better workflow in an FTP client, try Flow. It’s ultra-slick, mac-like, and comes with some cool features that make life easier. With recent versions, Flow has become quite stable, and usable; many of you should be having a copy from the MacHeist nanoBundle. I personally shuttle between the two clients depending on my mood for the day.

Image Sharing

In this age of rapid internet sharing, it’s crucial to have something to share your mockups. Skitch was the original with the concept of quickly grabbing screenshots, adding tiny bits of markup, and sending it across over the web. LittleSnapper is the norm these days, with a much better way to organise your screenshots, grabbing web pages, and ties with the internet service Ember. LittleSnapper does come at a price though—$40 for the software, and if you use the Ember service often enough, $25 per year.

If you’re looking for a free alternative, Skitch is still a really good client. It’s more private, better ways to interact for two or more designers exchanging mockups, and plugs in to a reliable and free internet backend. You can use Paparazzi to grab full web pages, thereby covering LittleSnapper’s feature-set.

There is also the latest kid on the block, Jing, created by Techsmith. It’s a service similar to what Skitch has shows so far, and also provides a reliable way to share shots. What’s unique, is that you can also share video screencaptures, a great functionality considering the app is free.

One other great way to share images though, is to use Droplr—or the soon to be released Cloud app, or Tiny Grab whenever that opens up to the public. Droplr allows you to share links, images, and files, just just dragging it to the menubar. A tiny url is copied to your clipboard, ready to be sent across. Preshit has on more than one occasion sent me stuff using these services, and they work.

Xscope

The Iconfactory has created a tool that will give you specific figures of everything on your screen. With Xscope, you get instant dimensions of any shapes you hover over, rulers that you can place on your desktop, screen overlays to guage how things will look on a smaller display, guides, frames, and other bells and whistles. If your work depends on pixel perfection, this is a highly recommended tool. I however don’t use it. Since all I care about are sizes of screen elements, I use the Cmd+Shift+4 shortcut to bring up the screenshot cursor, and approximately measure any element of my choosing. Crude, I know, but it works.

ShinyDroplets

Created by the good folks at ShinyFrog software, these little droplets are icons you add to your Finder toolbar, and are a must have if you use different apps for your coding work. Just select a compatible file, “index.php” perhaps, and click the Coda button. If you want to open them in Espresso instead, just drag and drop them into the Espresso button. Or TextMate, or Xcode, get it? Crucial functionality, for free.

Snippets, Swatches, and Clips

Here’s two little apps from the same developer that make life a whole lot easier. Residing in your menubar, Snippet and Swatch from Fuel Collective were designed for handling code and colour. If you’re frequently pasting in certain bits of code, be it Javascript, PHP, or even something in Obj-C, Snippet will provide a ready bin, easily accessible, and stays out of the way until required. Swatch on the other hand does a similar thing, only with colour. There’s a new kid in town, and I’m yet to figure out whether it fits into my workflow—Snippets from Lucky Ants.

There is one other type of app that comes in handy when coding. And that’s a clipboard manager. I’ve reviewed a bunch of these, and iClip and Clips are two solid standalone options. You can of course use Quicksilver (or Launchbar) to have access to clipboard history, which is what I’ve been using lately.

Testing Websites

Testing your sites across varied browsers, comparing versions, and having detailed statistics, is what Litmus is known for. And they have a native Mac app ‘Alkaline‘ with all of its functionality. It’s a little expensive for someone who doesn’t do this for a living, but if you’re constantly working on sites, this is a must have tool; if you can afford it. We don’t do any IE testing for iXyr sites, but if I do need to check something in that ratty browser I switch over to my Parallels install. I’ve heard about ie4osx but it refuses to work right for me.

iPhone Simulator: I mostly use the iPhone simulator to grab a screenshot because I’m too lazy to store a transparent PNG somewhere. But when the time comes to test out a web page for the iPhone, it’s [sometimes] much quicker just to load it within the simulator. Some might argue that you can change your browser agent in Safari to get an iPhone-ised page. First, it’s not the same size. And second, you have fonts that Mobile Safari will not have access to. If space is not a constraint on your hard drive, it’s nice to have it installed (along with Xcode for when you get Cocoa fever).

Changes

One app I only recently came across, was Changes. Originally by Skorpiostech, Changes now belongs to the Connected Flow family, by Frasier Speirs. Unlike subversion apps like Versions or Cornerstone, Changes is extremely in its approach. The reason I found it, was because Preshit and me were working on the new About us page. Every time someone made a change, we’d save a different file. So to keep track of what exactly was changed, I’d load both the files in, and know exactly what code was different. I could then move that code using the app, or manually adjust things myself. Changes also allows you to compare two directories as well, and integrates into Coda, Espresso and others (although I think it requires some subversioning used on the backend). At $50 though, it’s priced a little out there.

Color

I don’t know how to work the colour charts, mostly messing around with the Photoshop colour palette to get my colour schemes. I’ve looked at Kuler, and whatnot, but never really got comfortable with judging a design by looking at small colour squares. But if it is your cup of tea, ColourSchemer Studio is the way to go. It’s so far the most comprehensive tool on the desktop. It costs a bit though, at $50 for a license. If you’re looking for something free though, there’s Adobe’s Kuler community. Not only can you access it from the browser, you can even download the Kuler plugin for your OS X Color Picker, and have access to it in every application.

Then there are some aspects of web development that go beyond my skills. And for that I asked Preshit to help me out.

Web-servers and Databases

PHP and MySQL are arguably the most commonly used scripting language-database combo on the internet today. A majority of developers today still prefer and use PHP/MySQL for their projects. Milind mentions a variety of different text editors above to code your pages, but you still need a webserver to test your code and what better tool to build and test your project on your Mac than MAMP. This amazing free app from appsolute GmbH is a “one-click-solution for setting up your personal webserver“. And they’re serious. Setting it up only requires you to download the app and launching it and you have a fully functional Apache, MySQL and PHP server running on your Mac. It’s a great no-hassle solution if you want to concentrate on your project without worrying about advanced configuration and settings. There’s also a PRO version with advanced features that costs $60.

if you’re not a fan of MAMP, there’s always XAMPP for you.

Database managers

MAMP above already ships with PhpMyAdmin, a web-based frontend for your MySQL databases. But if you still need native power to handle those databases, there’s Sequel Pro, a long known free app that’s an open-source project based off CocoaMySQL. Sequel Pro also happens to be my personal weapon of choice agains’t the database management hassles. If you’re looking for some more power, there’s Querious from Araelium group that costs $29 but only works with MySQL v5 and later. The Apple Blog had a good showdown between these two last year.

Multiple sites

MAMP is a great and easy solution for your personal webserver and to build and test your websites locally on your machine. But many a times, you need to work on multiple websites and you have to deal with paths like http://localhost/website1/ and http://localhost/website2/ to keep the files separate. Moreover, MAMP requires you to have the files in the htdocs folder, which isn’t really what I prefer. I like to keep my files in the ‘Sites’ directory and there’s a neat little tool by Tyler Hall. Called VirtualHostX, the app is nothing short of magic. The app allows you to run virtual hosts on your Mac with a few clicks. VirtualHostX works along with MAMP/XAMPP or even Mac OS X’s built in Apache server and lets you host multiple websites on your Mac, even allowing you to choose the root directory to store the files. If you’re even minutely serious about local web-development, you’d regret not giving this a try. It’s a keeper.

VirtualHostX is one of the most important tools of my web-development workflow. Unlike Milind, I’m still sticking to Coda as my code editor and set up my local websites with the format domainname.local. So a working copy of my weblog resides on my machine as preshit.local.

Adding spice

There are of course a lot of other tools that would not only aid web developers, but professionals in general. One would need TextExpander to quickly type out paragraphs of repetitive text, ForeverSave to make sure you don’t lose documents to system failures, apps that help you concentrate, and a selection of Services that would aid in smoothening it all out.

That’s our view on the subject. I’m sure you have your own, and we’d love to hear them.

{ 15 comments… read them below or add one }

Bob

Nice roundup like the detail. But coda doesnt do the auto filling that I like so I perfer textmate thats all i got.

   

Morgan Roderick

Currently, these are the tools I favour:

- Textmate
- Git / Mercurial / SVN
- Araxis Merge (expensive, but worth every penny)
- Browsers galore (Safari, WebKit nightly, Chrome, Firefox, Firefox nightly, Opera)
- Parallels Desktop / VMWare Fusion / VirtualBox for testing in Windoze browsers (IE, Firefox, Chrome, Safari)
- CocoaMySQL, MySQL
- Ruby (on Rails), Nanoc, Webby
- Apache, Passenger

   

Johan

In MAMP, you actually can change the site root directory (i.e., you don’t have to use “htdocs” or “www”). Simple check the MAMP preferences, go to the “Apache” tab and change the document root directory. I’ve set it to “/Users/Johan/Sites” and that works wonderful.

I tried to use Espresso for a while, but switched back to Coda. I can’t put my finger on it, but there was something I didn’t like with Espresso. I put my faith into Coda 2.0 instead.

   

Joe Prudish

I would add TextMate, CSSEdit and Snippets

   

Rishi

On the subject of measuring onscreen items, the LittleSnapper “Snap Area” function, combined with zooming in (ctrl+scroll) allows you to measure things very simply (http://grab.by/3egd). Oh yeh, TinyGrab is really, realy, REALLY good :D

   

Raj

espresso + cssedit + transmit

All you ever need.

   

Mr.Mark

+1 from me.

I would add another one though: Terminal for any SSH jobs you need to do. Also MAMP here on my Mac for a quick setup of a local version of the website being developed. I also use TextEdit for when I’ve exported a database for transferring it to the online version of the website to replace any URL’s or database table names.

   

Luke Hartman

Thanks for the overview. One little suggestion: the screenshot keyboard shortcut is shift+cmd+4, not opt+cmd+4 as in the article.

   

Erik Pettersson

As of this moment I use the folloing apps when doing web development:
- Coda
- Textmate (new to me)
- Sequel Pro
- Apache + MySQL (installed via Macports)
- RegExr
- Versions
- Terminal (MySQL, Github etc.)
- VMware Fusion (running Win XP for testing in IE7-8)
- Photoshop CS4

   

Rizky

i have to add TextMate to the list as well. they got bundles (plugins) for everything. from code hints for most of the web’s programming languages to integration with popular source control softwares. so far, i dont see any editor/IDE that can match this.

for comparing files i also recommends FileMerge. this comes for free with the Apple Developer Tools. btw, TextMate’s SVN and Git bundle uses FileMerge for resolving conflicted files.

and also, one of the latest addition to my toolkit is ImageOptim for compressing image files. if ur into front-end performance optimization u should get this app.

   

Robert

Defo, TextMate is the best text editor for Mac. I switched from Coda to TextMate+SVN with no regret so far.

   

jobbogamer

If you’re using a Mac, Apple bundles a handy application called FileMerge in with the Developer tools. It’s hidden under Developer > Applications > Utilities, and does just about everything you mentioned about Changes above. It lets you compare two files together, points out the changes and lets you merge changes from one document to the other. Pretty sweet, considering it comes free with the Developer tools.

   

DemoGeek

I’m currently trying to decide between Coda and Expresso before I take out my credit card. I like both of them (don’t want to buy both of course!). Both has some nice features but both of them have something missing as well. I was leaning more towards Espresso for the slim-down interface look but their Sugars are sometimes hard to work with.

No CodeSense for some of the sugars even when they are installed properly. Have to change the language of the file sometimes, everytime I open them. Missing the matching braces features (that it does only for CSS, why not have them for all languages?). Highlighting the matching tag feature…and a few more. Some of these features Coda has I think but I like the feel of Espresso better.

I’m just so confused to commit at this point. Any suggestions to overcome the Espresso limitations?

   

Phil Nelson

This is a good list, and matches about 60% of what I use to make websites in OS X. I personally still roll with Coda, and I’d add to the list my own app for compressing PNGs, PNGPress: http://itunes.apple.com/us/app/pngpress/id416848846?mt=12&ls=1

   

Eduardo

Thanks for the overview. I am still like a newbie in Mac world but with many years in my developer road. anyway the list of applications is very rich and I already installed some of them in my new mac.

   

Leave a Comment

We'd love it if you would add your opinion to the article or discussion, whether positive or negative. We reserve the right to moderate comments at our discretion.

Previous post:

Next post: