Developing Web Sites on OS X Faster & Easier

I often get asked what I use to develop web pages and other types of documents on OS X. Sometimes it is from new users, who have switched from a Windows environment who genuinely want advice. Sometimes it is a loaded question from a developer with a Windows bias and outdated information who thinks that developing on OS X is more difficult and clunky compared to Windows (or Linux). In some cases it is (such as if you are trying to develop for a Windows .NET system) because OS X is a Unix derivative, Windows’ naming schemes (such as the path separator and old text encoding) makes it a pain. However, for apache development, most web libraries and applications simply need to be configured and installed for OS X’s flavor of unix to work. Many offer native precompiled apps. At one point setting up a basic Web Server in OS X was a simple matter of dropping files in /{username}/Sites/ and going to System Preferences>Sharing>{selecting} Web Server. However, because Apple now confuses simplicity with ease [1. a subject I comment on from time to time.]— it has followed a trend of removing a lot of the convenience features for starting standard unix services such, from the default install of OS X. Now, things are less straight forward for developers who just want to toss up a quick php server to develop locally, and some people now need help setting this stuff up, and would rather not have to learn the terminal commands. Others, like me, know the terminal all too well, but are tired of having to edit file after file (taking care not to make a single mistake) and restart services when throwing a few switches and typing a few lines in the terminal is so much faster and practically immune to error.
No matter what your angle is, I get asked often enough how to get started or what I use, that I have decided to write it down so I can point people to this article. While not exhaustive (I do not have unlimited funds to try every IDE, or app that increase productivity), this is what I currently use. For the most part I like it, but try to avoid being too biased because I realize everyone has different needs and different preferences on how things should work. So, as usual: YMMV.

If you do not like spending a bit of money for things you can do just as easily in the command line and do not value saving app switching because “cmd-tab” and “cmd-r” and “sudo vi /etc/apache2/extra/httpd-vhosts.conf” are second nature to you, then you will probably have a lot of criticism of what I write and find this article a waste of your time. You can stop reading now. However, if you like things that are easy to setup, offer decent online or contextual documentation to learn the app while you use it, yet still offer fine grain control over how things are setup while emphasizing user efficiency  advanced users need, then keep reading…
Okay, now that we got rid of the people who like things complicated lets start with the apps that aren’t IDEs but focus on speeding up setting up your environment.
672ce9e46d9d294d554575820512003c
CodeKit by Incident57 ($29)
CodeKit does many things, all of them geared to save you time. First off, it has a built in web server that allows you to preview html project pages and instantly refreshes them upon each save. This feature isn’t unique, and many IDEs now do this, usually this only works on the same computer. CodeKit allows other devices on the same network to preview web pages, and auto refreshes. This means you can preview your responsive site on both your Tablet and your phone while creating it on your Mac simply by navigating to the URL provided.
41257c547210aa5b6862df837cb97634
The only limitation is that it does not have a built in php interpreter so you have to configure external web server software (such as the built in Apache server, MAMP, or XAMPP) that does support php.
The second feature, can be a huge timesaver. CodeKit uses Bower to automatically install most web frameworks, libraries and package managers for CSS, JS and PHP: CompassFoundationJQueryBackboneJSAngularJSComposer are all installable with a click.
dcb7d1ff7ea31936a0bead17ba19c01b
This means you no longer have to download the packages you need, and go through the install steps. This alone saves at least a few minutes for each package. Sure, you can configure a shared external directory and import a config file pointing to the directories, but CodeKit can also do this as well, and give you a quick glance at what is common. Which means even this one step is no longer needed. Judging from how much of the drudgery of setting up a development environment is removed, I assumed that the developer of this app made it because he tired of the setup process himself and decided to do something about it. Checking out the about page ( http://incident57.com/codekit/about.htm l) reaffirmed my belief that the best apps are the ones made by people who made them for them to use then realized others must have the same problem. So, a big thank you to @bdkjones who states he wanted to make Panic (maker of Coda 2, Transmit, Status Board, Prompt and Unison) jealous. Considering how great Panic apps have been over the past decade or so, it was a lofty goal. Only @cabel of Panic can tells us if he’s succeeding.
746c185e1adeb3e039318950bc3e878f
VirtualHostX by Click On Tyler ($29 edu/ $49 personal / $89 company assigned [per seat])
VirtualHostX is an App that indirectly fixes a big shortcoming of CodeKit being unable to preview php pages. Currently, if you want to setup web serving on Mavericks without dropping your project into the /Library/Web Server/Documents/ directory, you have to edit either apaches the httpd.conf or extra/httpd-vhosts.conf file. (You can also down load MAMP or XAMPP or another all in one solution and configure it, somewhat, but I prefer separate packages installed with homebrew). So, this is what a very basic vhosts entry looks like:
<Directory “/Users/username/websites/kittypix/”>
Allow From All
AllowOverride All
Options +Indexes
</Directory>
<VirtualHost *:80>
ServerName “kittypix.local
DocumentRoot “/Users/username/websites/kittypix/”
</VirtualHost>
The problem is, one tiny mistake in this entry, and the virtual host will not work. Also, usually you have to drop into root mode to even edit it in vi since, sadly, most apps will not allow you to edit files you do not own, nor offer to drop into super user mode to save changes. So, you edit a file (and sure it only takes a few minutes) then restart apache, but then you make one stray mark error (like forgetting the last slash in the path) and nothing works. So, you go back and look and fix it and restart apache again…and again if there was another error or you forgot something. Pretty soon what should have taken 5 minutes just cost you 15. Now imagine you have multiple sites you are working on and switch machines which switches paths and suddenly this has taken hours off your productive time with grunt work. Well, after literally a decade of this back and forth, I got fed up. (After all I have gone through 5 Macs {and one self built triple boot Win/Linux/Hackintosh} in the last decade alone, and probably another 10 hard drives — I kid you not.) Enter VirtualHostX:
6e3818ec93c28ab32ebb766aabac957c
Now I can setup each virtual host once with no errors, add another vhost anytime, with no errors, and switching paths later is as easy as navigating the open-save dialog. Did I also mention it can backup you configurations to it’s own .vhx file, so you can easily move configs to a new machine/drive. To me, this all means $50 well spent. It works with built-in Apache, MAMP, XAMPP and Zend Server CE.
9ac22b64d4a869239ed0a5cf60aef8ca
It is yet another tool that you don’t NEED but you might want because it will save you time with each use.
homebrew-title
Homebrew Open Source project started by Max Howell (free)
If any recent Open Source OS X developer deserves a free drink and our eternal gratitude, it is Max Howell for his creation of the package manager OS X should have been bundled with OS X from the start. Homebrew is essentially the OS X equivalent of RedHat Linux’s RedHat Package Manager or package managers for Debian such as Advanced Package Tool “apt.” My days of having to install Unix/Linux distributions and follow install and setup guides (and sometimes find the right notes on how to install into OS X instead of Linux, BSD or another Unix variant) that could take a day vanished once I was clued in to the existence of Homebrew. Installing it is the hardest part, but very straight forward: Homebrew has a step by step web page to guide you through it. After that to find ( brew search <package name) and install ( brew install <package-name> ) other software with a single line of code is a short and clear affair that takes less than 30 minutes. Homebrew handles installing dependencies, updates, upgrades, and pretty much anything, and paces it into its own /usr/local/Cellar directory and links the binaries to the appropriate places for you. It will also warn you if its packages conflict with OS X’s default software installs or other packages, and recommend corrective actions to take to avoid problems. In the time it has taken you to read this far into this article you could have had Homebrew up and running. Just don’t forget to run brew doctor after installing it to see what else you might have to do. A word of advice: be ready to edit your ~/.profile or ~/ .bash_profile to include a GitHub key so you don’t hit the anonymous hourly connection limit.
phpstorm-logo
PHPStorm by JetBrains ($99 personal license)
My review and praise of Coda 2 still stands, but I had gotten to a point where I wished I had NetBean’s or Eclipse’s convenience features of being able to go to a method declaration or refactor method names easily, or do those powerfully convenient things that the big companies can afford to outfit their coders with. But I cannot justify spending as much or more than my machine’s cost to make personal projects easier. And to address the elephant in the room: someone who will remain anonymous said to me, “why not grab a cracked version?” Yes, I could get a cracked version or even take a license key and the software with me when I leave a contract where they have blessed their contract developers with the tools that make the most of their time, but then I would be one of those sucky people that leech off the hard work of people they should respect and support. I think people who make great software should be paid for making tools that make life easier (and payment can only encourage them to make more great tools available). So, no thanks.
Anyway, back to PHPStorm which is one of many JetBrains developer tools. It has all those bells and whistles and lacks the things I don’t like about NetBeans & Eclipse which is a less than straight-forward path to unlocking/configuring the advanced features. Maybe this has changed, but I gave up after a few tries with each. The guides were poorly written at the time and couldn’t be followed unless you already understood the product. [2. More on that some other time. ]
PHPStorm handles all sorts of things and the preferences tabs is vast and not at all bloated in terms of layout. And when I say “vast” I mean — well just look:
phpStorm Settings
In app this is one scrollable list. And within each of the list items some items, such as the all important “code style”, has subsettings and tabs within that:
code style
The fact that this has so many features could be daunting to find one specific setting, so there is a search field above with live updating (which is how I found the spaces, smart tabs and indents for this screen shot). This abundance of customizability (even in where the divided panes (that can show the console, terminal, DBs, projects, etc.) are locating within the IDE window means being to configure your setup just the way to like it. I suspect no 2 developer’s settings are exactly the same if you had a room of 100 or even 500 PHPStorm users — Unless it was a dev team’s defined standard for spaces vs tab stops, etc. I could write a complete article about all its features, but you could just go to PHPStorm’s documentation or the features page.
Conclusion
Will all this software make you WebDev Extraordinaire? No. It takes time and more time focusing on developing sites to do that. However using these tools has saved me time that I have used improve my skills faster than I could have without them. As I said, this is what I use and like, and none of it is needed, but much of it can make an 8 hour day as productive as someone else’s full work week.
Sometimes I wish I could just think of what I want some site or software to do, and how to look and behave and it just figures out how to do it. But until then, I will work to make the necessary but non-influential janitorial work and setting up and building of custom solutions easier. I still think people should change a tire at least once or compile and install at least one app from source code so they understand what goes into it and can even do it if needed. But short of writing shell scripts to handle each part of this (like a script that edits a vhosts file just by including the path and domain ) — which also takes much time — these are among the best tools to offload the drudgery and let you focus on actually getting things done.
Thanks for reading.
Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s