Switch: web nerddom

December 30, 2006

One of my trades is being a web nerd. I build and mess with websites. Either from scratch or based on some engine. Be it a blog or CMS or who knows what. So one of the first thing I did in Mac OS X was to set up a web development environment where I could continue messing with websites.

I’ve noticed a trend over the past few years. Macheads used to be almost exclusively in the domain of advertising and creative design. And maybe also sound engineering. But in the past years after the release of Mac OS X, it’s become “cool” for web nerds to be working on a Mac. Perhaps even not so much for client or hardcore backend developers (it’s kinda hard to write a Windows GUI program in Mac OS X), but exactly for web nerds who build websites.

Rationale

I think the primary driver for Mac-webnerd love was the release of Mac OS X, derived from NEXTSTEP. Before Mac OS X, I’m not totally sure what was under the hood of the GUI. But I don’t think it was anything incredible really worth talking about from a web nerddom perspective. It was proprietary and not really compatible with the rest of the world and the two large “mass-market kingdoms” of software, the Windows and *NIX worlds.

With Mac OS X, what you got running under the hood is a nice *NIX-like system. With its quirks, for sure, but it’s much closer to *NIX-servers that will are eventually powering many production websites than any Windows box could ever be.

Another contributor to webnerd love is of course the Intel switch which meant that machines got a lot faster and nicer and it was now much more feasible to run virtual machines with Windows, Linux and other OS-es within Mac OS X, so you could instantly check out your work in a multitude of environments – this is essential if you’re working on web frontend development and need to check stuff with multiple browsers or several platforms.

So without more theory blabber, I’ll take a look at the elements of my web toolkit that I’ve found handy on Mac OS X. It’s quite meager comparing to the real web pros and stars, but it does the trick for me. I’m oriented on backend development so you won’t find any hardcore HTML/CSS tools here. I don’t know too much about frontend engineering so I’ll happily leave this trade to the pros.

Terminal

A good terminal is one of the most important nerd tools, and OSX shines here, with its very fine terminal. The Windows built-in shell is a joke. I can actually get nicer terminal in Windows with PuTTY for remote systems than I can get for my local system. I’m sure you can install all sorts of emulation toolkits like Cygwin or Unixutils and get local Bash shell and whatnot, but why bother when a proper terminal with proper Bash is on Mac OS X out of the box.

The OSX terminal is the first one that I’ve ever seen that can deliver proper CJK (Chinese, Japanese, Korean) characters in the terminal window. On Windows, I have no idea how to make it work. On Linux, I probably could have made it work with tons of extra font packs. On OS X, it’s just there. (I’ve found one character set that doesn’t work for me on OS X out of the box – Georgian. How do I get Georgian characters without messing anything else up?)

Filesystem tools

I want to be able to navigate the filesystem. I’m the kind of nerd who you can put behind any fancy system, but who knows that in its guts, there’s still a bunch of files organized in folders/directories. I don’t understand all the details, but I want to be able to at least navigate myself to those files for the peace of my mind.

In OS X, Finder is kinda nice but it has its shortcomings. It doesn’t show me hidden files (e.g .profile in my home directory), or even if it does, it doesn’t let me do anything on those (like right-click and edit). I have to use special commands in my text editor to do that.

By default, Finder doesn’t have a global shortcut for opening itself from any other application. In Windows, there’s only one global key shortcut that I use, but it’s hyper-useful. Winkey+E opens Windows Explorer no matter what else I’m currently doing. So it’s handy to get to my filesystem. Finder doesn’t have this – the best I can do is click with mouse on the Dock icon. However, with Quicksilver it took me exactly 10 seconds to figure out how to create a global shortcut Mac+E (appears unused in most apps) to open a Finder window.

mucommander and file operations

There are some things in Finder that I’ve not got used to yet. In Windows Explorer, you can right-click and drag and drop stuff somewhere and upon release, a context menu opens that asks if you want to move or copy. On OS X, you need to memorize that if you drag, it moves, and if you Alt-drag, it copies… except if you’re working across different volumes, in which case it copies in any case.

And to make things worse, if you’re “copying” folders with same name over each other, then the contents of the destination folder gets OVERWRITTEN, instead of new content being added to old. This is seriously sick.

So for more fine-grained filesystem operations, I got muCommander that presents the familiar Norton/FAR/Windows Commander two-pane interface and navigation. It can also do simple SFTP operations, although it doesn’t work with more complicated setups like ssh portforwarded tunnels, in which case, enter the next app…

Cyberduck SFTP

Cyberduck. A simple (S)FTP program. Nothing more interesting, but does the job fine differently from mucommander that pukes on more complicated setups and simply doesn’t work, e.g if you’re tunneling through localhost and portforwarding server into several other servers.

Text editor

A text editor is the basic webnerd tool, since most of the things you’re working with are source files, configuration or scripts or any other plaintext stuff that requires editing. The built-in TextEdit is too stripped-down, but TextWrangler does the job nicely for me. People around me also rave about TextMate, maybe I’ll have to give it a run one day, although I haven’t found anything really missing in TextWrangler, perhaps only folding code blocks.

Apache and MySQL

Enough of the external utilities. The real deal, the server! We want to run code! Oh yes.

Enter MAMP. Like LAMP means Linux-Apache-MySQL-PHP, a popular setup for running web applications, MAMP is the same thing but on Mac OS X.

OSX has Apache bundled with it, and looks like PHP too, but the Apache version is old and doesn’t have important modules like mod_ssl by default bundled with it (or there is no default example config for them). Whatever the case, MAMP is easier to manage and configure as it’s totally self-contained and you know where to find and keep everything.

Oh my oh my… now THAT is actually THE easiest Apache-MySQL-PHP setup that I have literally EVER seen. You download the program, drop it in Application folders, and run. Zero configuration – everything is pre-configured with reasonable values. phpMyAdmin to administer MySQL is bundled and pre-configured, so you can start messing with databases right away.

Beautiful. Simply beautiful. All developer servers should be easy like that.

Oh, and mod_ssl is bundled by default in MAMP’s recent versions. If you want to build SSL-enabled websites, say with client certificate authentication, then that’s handy. In Win32, I understand these days you can run it too, but you need to download external libraries from three different places and spend a ton of time configuring. In MAMP, the only thing you need to configure is the site keys and certificates.

For running Apache with SSL enabled, I haven’t found how to do it in GUI though. You need to go to terminal and then…

/Applications/MAMP/bin/apache2/bin$ ./apachectl stop
/Applications/MAMP/bin/apache2/bin$ sudo ./apachectl startssl

In the latter command, you need to use sudo because I’ve used the default HTTPS port of 443, and you need to use sudo for binding to ports lower than 1024. (So you also need to use sudo to stop it later.) You could also use a higher port, but if you’re using Firefox 2, it has decided to become your nanny and you need to manually enter the selected port number in about:config in the setting network.security.ports.banned.override. (I have yet to understand what’s the rationale or security logic for this, since I can’t imagine what or how it makes secure, comparing to the “allow all ports for HTTPS” logic.)

Perl vs MAMP/MySQL/Mac OS X

One of the software that I build sites and blogs with is Movable Type, so my next challenge was to get it working on OSX. And since I already had MySQL as part of MAMP, it obviously made sense to reuse the same server also for MT databases.

Perl is core part of OSX, but my default, it doesn’t have the MySQL module. You need to install it yourself from CPAN. CPAN is bundled with OSX and this would be otherwise fine, but it requires the MySQL developer libraries that are not bundled in OSX, as MySQL itself is also not there.

I ended up going the hard way, installing the whole mysql-dev developer package from MySQL.com (but not running it, just installing). After this, the Perl MySQL DBD compiled and installed fine.

Now another problem arose. Looks like it’s hardcoded in the MySQL DBD module that when talking with localhost, it expects the socket to sit in /tmp/mysql.sock. Which is indeed the default location in most cases, but MAMP places the socket under its own directory. And you can’t create a permanent symlink in /tmp either, because the socket gets re-created every time that MAMP/MySQL gets run, and the previous link is no longer valid.

So what I ended up doing is, as usual, ugly but works. I put the following piece of code in my .profile. (.profile is a little Bash script in your home directory that gets run every time you open the terminal, assuming you haven’t changed the default config and replaced Bash with something else.)

if test -S /Applications/MAMP/tmp/mysql/mysql.sock
then
	if test -S /tmp/mysql.sock
	then
		rm /tmp/mysql.sock
	fi
	ln /Applications/MAMP/tmp/mysql/mysql.sock /tmp/mysql.sock
fi

What this does: it checks if the MAMP MySQL socket exists (meaning that MySQL is running). If so, it nukes the previous socket in /tmp if it exists, and links the MAMP one to /tmp. After doing this, Perl can connect to the MAMP MySQL just fine. (Of course, this requires that you run the terminal once before connecting to any Perl MySQL application, but I do this anyway.)

Fink package management

Sometimes you need some Unix tools that are not part of the default OS X installation. You could of course just pull them individually from Darwinports or something, but the preferred solution for this seems to be Fink, a complete package management and installation system. It installs everything in the self-contained /sw root directory, so if you don’t like Fink, I suppose you could just nuke /sw and get rid of its apps.

So… there. That’s how I build sites these days. :)

UPDATE: a reader sent me the following about hidden files.

I stumbled on one of your blog entries while looking for quick setup notes for SSL and MAMP. Assuming you haven’t found it already (old blog entry), there is a Dashboard widget that shows hidden files in Finder.