My Personal Web Development Environment

With Coda being released, I found it interesting all of the applications they've brought together into a single interface. It's almost a mash-up of applications (but in a good way). Coda brings together the most common parts of web developers arsenal in a new and from all the talk, profound kind of way. Coda contains modules for HTML or code editing - which is an integrated version of SubEthaEdit, a visual CSS editor, an FTP client (Transmit no less), a command line terminal, and something new to apps of this nature - books! Look up references for HTML/CSS/Javascript/PHP are all built into Coda, all which are by No Starch Press - very cool.

After my initial impression of Coda and reading Daring Fireballs post on Coda, I was curious if I would end up turning myself over to such an application knowing I would be trading simplicity for feature sets. Below is my current web work environment

TextMate
A powerhouse of a text editor has eased my pains in writing code, from simple stuff like closing my brackets for me, wrapping lines of text in li tags and even more advanced editing like formatting a chunk of selected text using regular expressions. TextMate also has a huge array of built-in commands called Bundles which perform various tasks on your selections. and work with everything from HTML, PHP to C++ and Java. TextMate also has a project feature which allows you to work with a set of files, build out your file structure all in a single tabbed window. TextMate is only $25 from MacroMates


CSSEdit
My indispensable CSS editor. A truly 'Mac' application with a beautiful interface that lets me work how I want, and a complete CSS editing solution. Even if you don't know how to write CSS, CSSEdit still makes it easy to generate a CSS file using its visual editor. Along with visual editing, you are able to see your CSS being applied to your html file in real time with CSSEdit's preview mode - it's like watching a professional do all the work in front of you. What's awesome about the preview is you dont have to save your file to see the changes, it's on the fly previews! So Cool! New to the latest release is a CSS rule generator - if you want to really see how to target a specific element with conditions, you can build them with this new feature. CSSEdit is developed by the guys a MacRabbit Software, and costs a measly $25 bucks. Get it now!

Transmit
You need to get your files from here to there. There are so many FTP clients available for the Mac, some built into text editors, many are stand alone apps - but none really compare to the quality and ease of use of Transmit. The amazing coders at Panic truly have the best FTP client on earth. At it's most basic, it's a drag and drop interface where you move files from the left pane window (your files), to the right pane window (their files). How easy! To coin Roger Ebert, "It's not what it's about, it's how it's about it." Transmit just feels right and works like you'd want it to. You can also use Transmit to edit files on the server for quick changes or even getting into files that need root access. I'm not going to go through the tons of awesome features of Transmit, but will tell you it simply rocks. Transmit costs $30 bucks but you can try it for 15 days.

Terminal
Yes, the free one that comes with your Mac OS. Even if you aren't a UNIX guru, and trust me I'm nowhere near one, but there are times when logging into the server is more useful or even the only way to get some tasks done. Have to chown a directory or file? Pretty much the only way to do that, especially if sudo is necessary. Sometimes its easier to deal with MySQL over the command-line rather than having to go through the setup of phpMyAdmin on your web server. Terminal is also most useful for editing those files you need root access for like httpd.conf or other configuration files. There other more powerful Terminal apps out there, but I use it only when I have to so this app suits me just fine.

MAMP
When developing sites for clients, it gets tedious real fast when updating single file to check for changes. The steps are, make changes in your editor, upload file to server, refresh browser to see changes.. repeat as needed. A better way is to run a local web server right on your very computer you are developing on. The quickest and simplest way to do this is turning on Web Sharing in your System Preferences Sharing module. But this only turns on your Apache web server which may be fine if you are working with a static HTML/CSS based site. As soon as you get into dynamic pages using PHP or other scripting language - there are configurations and setups to go through which are often complicated and advanced for many users. Add a database to the mix, you've now stacked more management and setup time onto your dev environment. A quick and dirty way to get all this rolled into a simple application is called MAMP (Mac/Apache/MySQL/PHP). Installing MAMP setups each of these services into its own instance far away from your main system so there is no conflict with your initial setup. MAMP also pre-configures everything so you can just dive right and code away, and check your results using the same technologies many great websites employ locally and easily.

One of the reasons I like using MAMP is that it supports both PHP4 & PHP5, though not simultaneous. If you are developing applications for both, you can change which version you want to load with Apache by simply changing setting in the preferences of the MAMP app, and boom - MAMP reboots the servers and you can start developing in an alternate environment. It is noted that MAMP is not ideal for production environment. MAMP is absolutely free

Console
If you do any type of dynamic web development and just cannot figure out why your app isn't maybe outputting anything - Console is your friend. Like the Terminal, this app comes with your system and is found in your Utilities folder. Console gives you insight to what is either happening on your system or what isn't by watching what is being written to your log files in various folders on your computer. Apache writes access and error logs which can be used to see where referrals requests are coming from and an error log to see what files didn't get transmitted. PHP also has a log file which is invaluable for checking what errors are being output.

Character Converter
Ever copy and paste text from Word or even from your web browser into an HTML file, only render certain character as garbled text? Ever have to look up character codes for those pesky trademark or copyright icons? This little service menu utility from Kavasoft saves me much hassle and annoyance. Since HTML only understand the standard alphabet, numbers and a few punctuation, you must encode many other specialized characters with a special formatting. All you do is select the character in question and issue a commend+&, and boom! - it outputs the correct HTML character code. Makes moving copy from one format to another nice and easy. Character Converter only costs $9.99 but is worth it.

Adobe Illustrator
I know most people use Photoshop for their art/web design software, but I use Illustrator 99% of the time. Illustrator lets me get almost of all the elements I need - and a lot quicker - than designing in Photoshop. Also, because Illustrator is vector based, it's much more flexible when I want to edit elements either major or minor. Just like Photoshop, Illustrator has most of the same slice-based features and uses the same Save for Web module. I simply setup my page dimension, and start designing my interface, this web site in particular was created completely in Illustrator. Because web pages are very structured, Illustrator actually makes designing for them easier with with boxes much easier than you would in Photoshop. Don't get me wrong, I do use Photoshop in my web workflow, obviously for photo re-touching but also to add other enhancements that Illustrators toolset doesn't cover quite as well like filters. When I do need to bring my layout into Photoshop I can export it from Illustrator with layers and maintain the same level of editability.

Another great use is when I am designing HTML emails for my clients - I design the entire layout and export the sliced file, HTML and all into a folder. I like that it writes out the complete HTML code for me using tables since email clients are fragmented with their CSS support, I know my layout will render properly this way. Illustrator is a professional graphics program and may be overkill for some, Adobe offers FireWorks which is a vector based program focused on web design. If I remember it correctly, it's like Image Ready is to Photoshop as FireWorks is to Freehand - I could be wrong though.

What do you think of Coda, and what is in your web workflow?