Essential Mac OS X Web Development Tools

Well, I’ve been at it now for over 5 years so its about time I published a list of my fav Mac OS X apps for web development, environment control and productivity. The only caveat I have is that the following is not meant to be a comprehensive or authoritative in any way.It’s just an unranked list of free or (mostly) inexpensive apps that I have come to rely on for every day web dev use.

Important note about ‘free’ software
I have created, released and maintained some free/open source software, and, honestly, it’s a lot of hard work. It’s also a passion and its fun to turn a hobby into something that can help make someone else’s life just a little easier.

So, for the apps in my list below that are free and/or developed by a lone soldier, if you try them out and decide to add them to your daily toolbox, may I suggest you take a few moments from your busy schedule to actually make a donation (or complete a full purchase) to show your support for the hard-working folks who made or maintain these great tools – thanks!

 

Productivity


 

Alfred (free)

In short, Alfred by Running with Crayons is a launcher and a finder for your Mac.

You must use a launcher like Alfred, else, I fear your days as a productive member of our guild are numbered.

In Alfred’s own words, “Alfred is an award-winning productivity application for Mac OS X, which aims to save you time in searching your local computer and the web. Whether it’s maps, Amazon, eBay, Wikipedia, you can feed your web addiction quicker than ever.”

As a footnote, I started out using Quicksilver years ago but development for that product ceased a while back. But as I check their site today, it looks like development may have picked back up again. Consider this an honorable mention.

 

iTerm2 (free)

You need a good terminal emulator and while the native Terminal app ain’t bad, it’s clearly missing some juice.

iTerm2 by George Nachman is a fork of the iTerm project. It’s a wonderful replacement for the OS X native Terminal app and the self-proclaimed “successor” of the original iTerm app.

Hands down my favorite feature is the powerful split pane controls. Specifically, the way that iTerm2 lets me control where a new pane will appear without leaving the current window or opening a new tab is awesome. I can open a new pane right next to the current pane, or below it, or above it – whatever I want. In the screen shot I provided, I’m demonstrating an example of 3 panes all opened in the same window, with no tabs.

And that screen grab is an example of an actual use cases for me: I’m executing a script in one pane, maybe tailing a log in another and editing another script or searching around the file system for something else in the 3rd, all in the same window. Sometimes I even do those three things for more than one service at the same time and set up 2 windows with 3 panes each. No matter how I want it, iTerm2 makes it easy to set up (or modify on the fly) a workspace that’s easy to manage using simple keyboard shortcuts.

This understated feature makes my life so much easier. Of course there are many other features but when you combine that type of split pane control with a great window manager (see below), I can rapidly cycle through a large number of panes, tabs or windows with ease. Sweet.

This app will run on the Leopard, Snow Leopard, or Lion platforms. I also run it on Mountain Lion (no problems for me).

In their own words “Its focus is on performance, internationalization, and supporting innovative features that make your life better.”

Amen.

 

Development


 

PhpStorm (free, $99)

For web development, my primary languages are PHP, jQuery/Javascript, HTML and CSS.

When I first started doing PHP development full-time, Eclipse was popular along with NetBeans. To me, they were only okay, and like most web IDEs, they had some neat features along with some obvious drawbacks.

To be direct, my experience using these IDEs was not positive. And, the generalizations I had heard are true: ‘Beans was a resource hog and Eclipse debugger was wonky and inconsistent.

Some folks at work started using IntelliJ products and liked them so I gave PhpStorm from JetBrains a shot – and I haven’t looked back.

If you’re going to call yourself a proper IDE, the one feature that must work, to me, is live debugging using breakpoints. Sure, PHP is a scripting language, but, those other IDEs all say they have that feature and it works. For me? It never worked on Eclipse for more than a few days in a row and with NetBeans the feature worked for 2 weeks and then never worked again.

Now, I can already hear the various factions pounding their swords against their shields and shouting war cries. But, I can read and follow directions. And I got the feature working in both IDEs. And, the reality is, without my having done anything to change the configuration, the feature stopped working in both IDEs after a very short period of time. I even completely ripped my entire dev environment apart and set it back up again from scratch, because I thought I’d done something wrong, but, the debugger stayed wonky in Eclipse and never worked again in NetBeans.

Sorry, but, I don’t have time for that nonsense.

PhpStorm’s visual debugger features? Winner. It just works. As you can tell by now, I’m all about that. You should be too. Why aren’t you? I followed the setup instructions, got the visual debugger working as expected with breakpoints, it’s never not worked in over 2 years of upgrades or even modifications to my local php dev environment. It also doesn’t crush my CPU or chew up all of my RAM, even when I’m beating on the debugger like it’s a rented mule.

And PhpStorm’s editor and source control integration is just superior. In JetBrain’s own words, “PhpStorm is a lightweight and smart PHP IDE focused on developer productivity that deeply understands your code, provides smart code completion, quick navigation and on-the-fly error checking. It is always ready to help you shape your code, run unit-tests or provide visual debugging.”

I completely agree. I cycle through files and windows and blast out commands with ease using PhpStorm. Sure, by now, I’m just familiar with it, but, in conjunction with all of these other apps listed here (and their long list of shortcuts), my mind isn’t cluttered by using PhpStorm.

PhpStorm is fast becoming a mature product, composed of the most common yet powerful IDE features available in the world today, like:

  • Multiple Language feature support
  • Multiple debugger profiles
  • PHP UML Support
  • Code Completion
  • Find Usages or Unused Code and other inspections
  • Refactoring
  • Database Support
  • Source Control Integration
  • Diff Tools
  • Deploy Utilities
  • Tons of Plugins

For a full list of details, check out their Features page here.

PhpStorm offers a 30 day free trial, free classroom or open source project licensing options and academic ($29), personal ($99) or commercial ($199) licensing as well.

NOTE: my current shop is also heavy into the Scala and we all use IntelliJ as our JAVA IDE of choice.

 

TextMate ($52)

This is more of an honorable mention, but, the great PHP text editor TextMate deserves a nod.

It was my defacto choice for PHP script and tool dev long before I started doing PHP web dev full-time.

I still have it installed. I still use it for raw php scripting. I still use the “mate” shell script shortcut for quickly opening text files from the command line (though most times I just use vim).

Sure, I can’t remember all of the shortcuts like I used to but that doesn’t slow me down much.

It just works. Catching on to the theme here yet?

 

LiveReload ($9.99)

Let me break down the most repeated process in web development for non-pre-compiled scripting languages:

  • Add/Change Code
  • Save File
  • Refresh Web Page

Now, what if I told you I could improve that process by 33.3%? Well, LiveReload developed by Andrey Tarantsov eliminates that last step, which saves you time and more importantly prevents carpal tunnel syndrome!

Pretty cool you say? Well, tell your Windows and Linux buddies because it works on those platforms too. And, LiveReload’s browser plugins are compatible with Chrome, Firefox, Safari, mobile Safari (iPad, iPhone) and even Opera.

But, what about those pre-compiled folks? Got some Coffee script or LESS/SASS in use? No problem, pre-compiled languages are covered and you can even execute custom scripts or commands with each change detected by LiveReload.

I just improved your pre-compiled project process by 50%. You’re welcome, friendo.

You can purchase LiveReload via the Apple App Store.

 

Source Control


 

Git & GitHub (free)

In my opinion, Git (developed by Linus Torvalds) and it’s counter part GitHub (from GitHub, Inc.) are the two best things to happen in software engineering since the idea of controlling source itself was first suggested. Seriously.

Ok, let me calm down a bit and explain. I am not a source control expert. However, I do have experience using (or managing projects that used) VSS, StarTeam, CVS, Perforce and SVN over the years and nothing is as fast or as powerful or as enjoyable to use as Git.

The Philosophy

Git’s design is a great example of the Unix design philosophy: many small programs. Originally designed to be a toolkit, when it became program, it became a collection of many small components.

And that design philosophy is reflected in the usage philosophy:

  • Commit early, commit often
  • Each commit represents one idea or one whole change (easier to read or revert)
  • Each branch represents one feature (or topic) (easier to read or merge)
  • Your local working directory, index and local repo are scratch pads.

GitHub also has its own philosophy called GitHub Flow which has suggestions that I use in all of my projects.

Why Git?

Is Git perfect? Heck no. Some of the terminology is totally confusing, even more so if you’re coming from SVN. And, yes, there is such a thing as Git Hell (I’ve been there). Is Git any good? Heck yes! It’s awesome. It’s powerful. It affords me a sense freedom that I have not experienced using other version/source control systems. The three stand-out features for me are it’s blazing speed, distributed development support and automatic safeguards against code corruption (accidental or malicious). Other hallmarks are: strong support for non-linear development, compatibility with existing protocols, efficient at handling large projects, cryptographic authentication of history and of course those pluggable merge strategies.

Clearly, Git’s performance and flexibility makes it the right tool for any team of developers (i.e. bob, alice, david and clair) that contribute code to a centralized “truth” repository (aka “origin”) regardless of their physical locations. And to me, it doesn’t matter if your project is a massively decentralized open source project or a highly focused and centralized for profit commercial venture, Git and GitHub will work for you.

What To Expect

Coming from SVN, some of the Git commands and terminology felt askew. I used immersion techniques (videos, setup guides, usage guides, etc.) to dive in. Another part of the learning curve is that Git has so many useful (and sometimes redundant) commands that it feels like there is no one right way to use Git. I strongly suggest that you invest time early on learning what each command does using an experimental project. Lastly, Git command-line output definitely lacks a certain level of usability and can appear noisy to new eyes. This is especially true if you don’t use a color scheme (check out this quick guide on how to add color to git). But as your eyes adjust, you’ll find that when Git runs into a problem, it nearly always provides the steps to take to resolve any issue (they’re just hard to locate initially).

Migration Suggestions

For those migrating to Git from SVN, I suggest you bookmark gitready.com’s Converting from SVN page. In fact, if you don’t like reading man pages in a terminal, just bookmark gitready.com because it’s a great online resource for both the uninitiated or the experienced user.

The reality is, our migration from SVN to Git was not difficult at all. Git definitely makes it easy to slurp up SVN branches and history. Again, a nod to its stellar performance.

And, the community is robust. To say Git is popular is an understatement.

Try Git and GitHub.

 

Gitx (free)

Gitx by Pieter de Bie is a git GUI made for Mac OS X. In Gitx’s own words, “It currently features a history viewer much like gitk and a commit GUI like git gui. But then in silky smooth OS X style!”

I do most of my git commands by hand, but, when it comes to committing my changes, I have developed the habit of using Gitx’s diff and history features for determining what messages I want to attach to the files I want to commit.

For example, maybe I worked on a bunch of files in a flurry of ADD induced activity (no joke, I have ADD), but, I don’t want to commit all of those changes in a single commit. Gitx makes it easy to cherry pick the files I want for each individual commit, keeping my history uncluttered.

Gitx’s Features:

  • Detailed history viewer
  • Nice commit GUI, allowing hunk- and line-wise staging
  • Fast workflow
  • Explore tree of any revision
  • Nice Aqua interface
  • Paste commits to gist.github.com
  • QuickLook integration

I code daily so I use this app daily.

 

Databases


 

Sequel Pro (free)

I was introduced to Sequel Pro by North of Three when I started working at my latest gig about 2 years ago.

I should first state that I have used a few different database Application clients for accessing, testing or designing databases. For MySQL I’ve used Workbench from MySQL (note: the latest version is totally worth looking into), NaviCat and of course that lovable scruffy pal phpMysqlAdmin (though, it’s not a client app).

Sequel Pro does a lot of small things right and to me those small things add up to one great big thing. And from the first day I used it, I just liked it better than all the rest. I actually preferred it over other clients even though it was prone to crashing (again, this is back in 2010). The 2011 releases were much more stable and I have not seen stability problems since.

One thing that I think made it stand out was it’s usability – since day 1 they recognized that in order to speed up development for their users, they had to provide features, like, a ton of useful hot keys.

[rant]
Personally, I hate using the mouse and this was the first database app that understood that to a developer these seemingly small details are actually a big deal. Especially when you have to repeat actions/commands over and over all day long.

I should preface this anti-mouse rant by saying, if I have to constantly switch between using the mouse and the keyboard to accomplish something that I have to repeat over and over again, I’m going to hate you and your app. Sure, hot keys are “nice to haves” that we can offer in the “next release” but seriously, if you’re making an application for a developer, hot keys and other usability features should be very high on your list.
[/rant]

Okay, so in addition to starting out strong there are now power user bundles that you can download to adorn your Sequel Pro experience with even more slick features, like, copying table data as JSON, or to show you a report of all the current connections to your server.

And, while I have given the latest MySQL Workbench a test drive, I still find Sequel Pro easier to use for my most common tasks.

 

Web Services


 

httpClient (free)

Okay, I don’t even remember how I found this one, but, I started using it over 3 years ago. And, if there is a tool I have used the most on this list, this is it. httpClient from Celestial Teapot Software is my go to test tool for verifying web pages and http services.

httpClient is also available for download via the Apple App Store

It doesn’t matter if you’re verifying a local service, developing against a remote service or doing a quick and dirty test of production, this client gets it done and has the features to cover all of the use cases I’ve come across.

Of course, it provides all of the basic HTTP methods, but, includes many more features, like:

  • Basic Authentication.
  • Custom HTTP request headers with pre-populated names and values (i.e. date format strings or User-Agent strings).
  • Support for sending request bodies with POST or PUT.
  • Follows or ignores redirects.
  • optional syntax highlighting.
  • optional text wrap.
  • ability to save each client window as a document (.httpclient) that can be reopened later.

 

Charles ($50)

Can’t tell if the problem has to do with the data sent or the data received? Use a proxy! Need much more than a proxy? Use Charles from Karl von Randow (at XK72).

The feature I have used the most is the mapping of remote request URIs to a different web host (or protocol, port, path, etc.) in a mixed production/stage environment. The screen shot show how to edit a mapping.

It’s the best way I know how to test changes to back-end services that are hosted on your stage environment alongside other services in your production environment without deploying those backend changes.

Charles is a feature-rich proxy application that has more options than I have ever needed in a proxy server. It’s developed for the Mac, Linux/Unix and Windows platforms and has features like:

  • SSL Proxying: see requests and responses in plaintext.
  • Bandwidth Throttling: simulate slow connections, including latency.
  • AJAX debugging: view XML and JSON requests and responses as tree or text.
  • AMF: view the contents of Flash and Flex Remoting messages as a tree.
  • Record/Replay: to regression test back-end changes.
  • W3C Validation: for HTML, CSS and RSS/Atom responses.

Unfortunately, to buy Charles you need to fork out $50. Fortunately, they do offer a free 30 day trial.

Granted, if I used more of those handy-dandy features, I’d say that price point isn’t bad. After all, those features are based on a lot of low level socket development and if you’ve ever messed around with socket programming, and I have, you know how hairy that can be.

If I were the product manager for Charles, I’d slice some of basic proxy functionality into a lighter offering priced around $15. I’d be willing to bet that no matter what their sales volume is today, it would increase.

 

MockSMTP ($15.99)

Simply put: it’s an SMTP server designed for testing your web app email functionality, all in your local dev env.

I believe that good software solves a common problem experienced by many and returns developer focus back to the task at hand: shipping code! And as Xilinius themselves put it “The idea for MockSMTP emerged to solve a recurrent problem encountered when developing web apps here at Xilinus: finding a quick way to test e-mails sent by applications.”

MockSMTP isn’t free but Xilinius does offer a free trial and after using this app for only a few weeks, it drastically improved my ability to test email notifications and alerts for one web project without pissing off Ops or causing me to set up elaborate email filters to keep the spam away. Thank you!

 

FileZilla (free)

I don’t always use a FTP client, but when I do, I use FileZilla.

FileZilla is an ancient (harkens back to 2001) but honorable app. Yes, I know of the security criticisms and counter-arguments. Yes, I know how to use rsync.

But, it’s free, it works, it’s fast and the development has not ceased. In fact, a new beta was released just last week!

From the FileZilla wikipedia page: “FileZilla is free and cross-platform FTP software, consisting of FileZilla Client and FileZilla Server. Binaries are available for Windows, Linux, and Mac OS X. It supports FTP, SFTP, and FTPS (FTP over SSL/TLS). As of 18 April 2011, FileZilla Client was the 7th most popular download of all time from SourceForge.net. Support for SFTP (SSH File Transfer Protocol) is not implemented in Filezilla Server.”

Right on.

I’ve tried a few of those other clients. That “duck” one…maybe? I just remembered that it sucked.

I dunno, maybe there are some clients that are better in some way that I just don’t care about yet. I’m still willing to learn.

Until then, I have to transfer these files, stat!

 

Window Management


 

SizeUp (free, $13)

This app, along with the one that follows, are the two newest apps in my tool belt.

Once I saw how easy it was to use, I was hooked.

First, a diversion: what’s the best new Microsoft Windows feature? Easy, drag a window to the edge of your display and boom is snaps into place. Drag a second, boom, now you’re setup side-by-side…however, notice the verb ‘drag’? Yes, you must use the mouse to achieve this wondrous feat, which to me turns that into a fail – I hate the mouse!

Well, fear not Mac addicts, with a flash of your chubby digits SizeUp from Irradiated Software will snap the current window into one of a variety of super useful places on your screen.

SizeUp allows you to quickly position a window to fill exactly half the screen (splitscreen), a quarter of the screen (quadrant), full screen, or centered via the menu bar or configurable system-wide shortcuts. Similar to “tiled windows” functionality available on other operating systems.

But wait! I have dual monitors! Ha! No problem says SizeUp. You can move windows from one monitor to another, from one Space to another, and even restore a window to its original size and position (SnapBack) with a flick of your fingers.

SizeUp offers an unlimited free trial and a 60 day money back guarantee. Within 15 minutes I knew that their $13 app was a no brainer for me.

Priceless.

 

Stay ($15)

Staying with windows management apps (all puns intended), for about the same price I strongly suggest the other most recent addition to my arsenal called Stay from Cordless Dog.

I like to keep everything orderly and organized, including my desktop and application windows. Typically, I invest a little bit of thought and time into how I want things optimized, then I set things up and I get to work. I also only want to set things up ONCE.

But, since I use a laptop for work, my work environment changes constantly. That means, with each environment change (office, home or on the road) I often find myself wasting time just resizing windows.

The problem is, each of these location types has their own display configuration. For example, if I’m sitting in a meeting, it’s the laptop screen only. At my desk it’s the laptop screen and an attached monitor. And, when I work from home, it’s a dual monitor setup and no laptop screen. So with each context change comes some amount of time repositioning each window.

Sure, SizeUp helps a lot, but, for my most common application windows, what I really need is something that recognizes my current environment configuration and automagically restores those most common app windows to the size, position and even the monitor that I want for each situation.

As Stay puts it “If you’re fastidious about keeping your windows tidy, Stay is for you. Stay ensures that your windows are always where you want them to be, even as you connect and disconnect displays.”

Stay just works in all 3 of my environment configurations, period.


DISCLOSURE: I have not been compensated in any way (no bribes, not even a t-shirt!) to write about any of these apps. I just dig ’em and want to share how I make it through my day.


Like the same apps? Know of some better ones? Add your own thoughts and suggestions in the comments section. I’d love to hear what tools you use and why!

5 Comments on "Essential Mac OS X Web Development Tools"

  1. If you use Windows the best MySQL Client is dbForge Studio for MySQL – with superior set of functions! Great Product! Read more here: http://www.devart.com/dbforge/mysql/studio/

  2. mark robinson | April 18, 2013 at 9:08 am |

    You can check some more better then Sequel Pro FREE tool – Valentina Studio, it works as with mySQL/mariaDB, so with postgreSQL and SQLite http://www.valentina-db.com/en/valentina-studio-overview

  3. Thanks Curmudgeon for the feedback. And, I’ll have to give Cyberduck another try.

  4. I’ve found that Filezilla is a good ftp client – if you’re on Windows. On Mac, it’s a lot slower, much uglier, and no more stable than Cyberduck. The duck, btw, also has superior facility with S3

  5. Great tools, most of them are new to me. since I just started using MAC less than an year now. Thanks for sharing.

Comments are closed.

%d bloggers like this: