OSX Webdev, doing it better than Dreamweaver

So I wanted to get rid of Dreamweaver. And I did. But you want to know why, and how… and I’m going to tell you who, even though you didn’t ask.

Who?

This article is written for people using OSX as a development platform. It’s also primarily directed at small to medium sized web development, from freelancers to small design firms. It’s for people who’ve been using Dreamweaver because they thought it was the standard. It’s for people who want to buck the status quo. It’s for people who don’t want to shell out big bucks for a bunch of features that are actually detrimental to the web. It’s for people who care about web standards. It’s for geeks, to be sure, as you have to have some geek in you to even want to tackle this project.

Why?

First and foremost, Dreamweaver is bloated with features that I won’t use. Timelines, poorly embedded javascript, table features that I can’t stand, WYSIWYG editing modes that I’ll never use, etc. I found myself stripping Dreamweaver down to the bare essentials, just a text editor with code highlighting and completion and enjoying it’s superb project management. But the more I used it the more I realized that there were several tools, inexpensive and highly specialized ones, that were better suited to these tasks. Simple, unbloated tools that anybody could get and use. Secondly, I really like being different, and I’ll admit that I partially just wanted to do something that wasn’t the norm in my industry. Maybe I just want attention. But the fact of the matter is that what I’ve found is, in many ways, superior to a Dreamweaver development platform. I’m not the first to realize this, by any means. I’m probably not even the first to write about it. But I couldn’t find much in the way of actually putting together a full development platform without Dreamweaver. Upon closer inspection, though, TextMate was way ahead of me, having already integrated Transmit and enough Applescript and drag and drop to handle just about any application.

How?

Here’s a quick rundown of the tools we’re going to mention in more detail.

TextMate: The guts of the operation, a text editor with all the features of the main Dreamweaver editor.
Transmit: An FTP program with the ability to mirror sites, sync files, edit in textmate directly from the server (with auto upload on save) and automatically upload files to appropriate directories on save to a mirrored local directory.
CSSEdit: An amazing little CSS Editor, specialized, lightweight, yet feature packed.
XyleScope: An awesome tool for analyzing and tracking down CSS problems.
Color Schemer Studio: A great tool for putting together websmart palettes.
Firefox with the ReloadEvery, Web Developer, JSView, Firebug and EditCSS addons: I’ll be writing a post specifically about Firefox and web development using these extensions and a few others, but there are plenty of such articles out there already, so if you’re not already using these extensions, go look them up at https://addons.mozilla.org/extensions.php.

Now, on to how it all works together…

I’ve already spent some time in my other series gushing on about the specific features of TextMate. I’m going to give a basic overview of how this setup can effectively replace the areas of Dreamweaver that I consider to be it’s strengths.

Code Highlighting

TextMate comes with an amazing number of code highlighting languages. It can set the current language based on the file extension, and the language is easily changed by a pop-up menu at the bottom of the edit screen. Each theme, and you can build your own easily, allows for customization of the highlighting.

Code completion

TextMate allows for completion of code in two ways. You can press escape to complete a partial word with a word you’ve typed previously. You can also use Snippets. Snippets allow for extremely powerful code completion, using tab stops and variables, as well as shell commands and the power of UNIX text handling.

Code Indentation

Also built right into TextMate. It’s very customizable and can work with spaces or tabs. And it’s smarter than Dreamweaver’s, at least in my experience so far. Especially when editing CSS files.

Color picker

The current distribution of TextMate has a command to pull up the system color picker and insert an RGB color into your current document. It works pretty well, and can be triggered via key sequence and/or tab trigger. However, I like to use programs like Color Schemer Studio for putting together palettes and creating websmart colors from my choices. Turns out I can easily drag and drop colors directly from Color Schemer right into my current document. Color Schemer also exports HTML and CSS color palettes that I can open right next to my document.

Live preview

There are a plethora of ways to go about this. You can open a Web Preview window and pipe the output through an appropriate processor, such as PHP, with an auto update interval. You can also set this to point to a local server while you’re working. What I actually prefer is to open Firefox and/or Safari and point them either to a local server/file or my remote testing server/live server, depending on my current workflow, and use the command “Refresh Running Browsers” from within TextMate. This will reload the foreground page in both browsers. You can combine this with an Upload on Save command to see your changes as you make them on a live site. This command also works with Xylescope. There is also an extension available for Firefox that will reload a page every so many seconds/minutes. This can be used to create a live preview of CSS/XHTML changes as well.

CSS Interface

I consider the Dreamweaver CSS dialog box to be a nuisance. It kept me from learning the ins and outs of CSS for quite a while. But a good CSS editor with code completion and a text based interface can speed up your coding and really enhance the experience. CSSEdit is a great tool for the job. It’s a relatively simple task to add CSSEdit to context menus in TextMate, Transmit and Finder.

Drag and Drop File Linking

It’s built in to TextMate. From a project window or Finder window, I just drag a file into TextMate and it will create the appropriate link for me. If I drag a CSS file, it creates a link to the CSS file with the appropriate elements, if I drag an image, it can find the dimensions and insert an appropriate tag.

Project Management

I can create a project as easily as creating a directory in Finder, clicking the TextMate button I added via AppleScript, and saving the project. I do need to then set up a site in Transmit with a Docksend on the local directory. It’s a different way of doing it than Dreamweaver, but the results are the same. And Transmit allows for column view on the files/directories, as opposed to Dreamweaver’s tree view.

Cmd-Shift-U

This one is easy with TextMate and Transmit. Simply add the keystroke trigger to the built in “Upload with Docksend” command in the Transmit bundle and away you go. If the file exists in a local directory that is part of a Docksend enabled site, it will upload to the appropriate directory on that site. You don’t even need to have that site open in either program. You could edit the file straight from the finder, and upload it.

Upload on Save

I have TextMate set up with a project variable called UPLOAD_ON_SAVE. I’ve replaced the normal CMD-S function with one that checks for this variable, and after saving the current document, if the variable is set to TRUE it will send the file with Docksend (Transmit).

Upload Dependent Files

This took a little research and work on my part. You can easily have dragged and dropped files uploaded at the time they are dropped, but what about manually added files, or pre-existing links that have been modified? You have to write a script that scrapes the file after saving it, pulls out references to CSS files, image files, swf files, quicktime files, etc. with their relative paths and create an upload list. Then the files should be checked for their last modified date/time and uploaded accordingly. A little more complex, but once it’s set up it could easily be linked to a confirmation dialog and run on File Save with auto upload, or CMD-Shift-U.

File Check in/Check out

You can use shell scripting set up as commands to run on the current filename in a mirrored remote directory, and even use a file structure identical to Dreamweaver’s, allowing you to work on projects with Dreamweaver users on any platform. One thing I’m working on right now is a simple script to automatically download and check out the most current version of a file directly from TextMate. You can attach these commands to File Save and upload commands to check files back in after you edit them.

This was a basic overview of the setup. If you have specific questions, it will help me decide where to go into more detail. Hope this article will be of use to somebody, but if nothing else, it serves as great notes for my own reference!

cssedit» dreamweaver» firefox» osx» standards» textmate» webdesign» webdev» xylescope»