My Favorite Web Development Tools
As a web developer I have used a lot of tools over the years for developing sites. The first one I used was Microsoft Word back in the late 90`s which was as horrible as it sounds. Next I went bare bones and started using Notepad to write code. While using Notepad I drooled over Dreamweaver, but my boss at the time would not buy it for me. Once I realized that I was really serious about the Web I decided to purchase it myself. It was great for a while.
Over time, I realized that although Dreamweaver filled many of my needs but it was very bloated, too many panels and options. It`s preview function which used the Presto Layout Engine rendered dramatically different then IE and Netscape and also was not realtime. It was fine for developing static pages, but once I started working with CMS`s and Javascript it increasingly became useless. I switched to Adobe GoLive for a little because it offered Smart Object integration with Photoshop and Illustrator an awesome feature that saved a lot of time with image editing but its preview had the same limitations as Dreamweaver. Before long I gave up on the big guns Dreamweaver and GoLive and went to smaller tools like TopStyle, Textmate .
It wasn`t until around early 2007 until I found a set of tools that I loved;Coda
Coda is a all in one Code Editor, its goal is one window web development. It has its own terminal, code editor, CSS editor, realtime preview, and even reference books.
You could develop your whole site without opening up another program. In many ways it is like Dreamweaver but without the bloat and far more Mac like. I`ve been using it about two years and its fantastic, here are some of my favorite things about it.
Excellent User Interface
Coda shares a great trait with other great Mac software, it has a beautiful user interface that encourages productivity by pretty much staying out of your way. From the moment I opened it up I was impressed with the way that it presented the sites I set up as screenshots taped up on a graphite board making it really easy to identify sites visually instead of having to remember what I named them. It provides immense window space for tackling tasks like running terminal commands and coding. Its tabbed interface is excellent and works similarily to browsers tabbed interfaces for instance to open a new tab you press CMD-T just like in Safari and Firefox, they are also reorderable.
Text Editor
Coda`s text editor is based on SubthaEdit a collaborative text editor and like SubthaEdit if two or more people are using Coda, you can both work on the same document at the same time and see each other`s changes in realtime. I never really got to play with this feature because I am usually the only member of my team using Coda, but the few times that I did I can tell you that collaborative editing is awesome. Coda has many of the basic features that you would expect in a text editor like syntax highlighting, find/replace, and code completion but what sets it apart is the thoughtfulness of its implementation.
It is full of little details, one of my favorite being bracket highlighting. When you move your cursor to the end or beginning bracket a blue flash beacon pops up at the other bracket letting you know exactly where it is. This is very useful when editing large blocks of complex code.
Excellent Find and Replace
Coda`s Find/Replace is on of the best one`s I have used. As everything in Coda, the interface for it is intuitive and stay`s out of the way by opening gracefully at the top of the window. Coda highlights the words you are looking for with a quick animated pop and highlights them, which really makes words easy to find. They make it easy to add variables to your queries. For instance say you want to replace all of your <h1> tags with , rather then first replace the start tags then replace the end tags. You can replace them all in a feel swoop by typing <p> > <h2> > </h2>. Finally it is blazingly fast, even on large complex documents. Just recently they added the ability to find/replace throughout projects which I haven`t tried yet. Another great thing is the intuitive way that allows you to choose the scope of your search, which seems simple but I am always shocked by how unintuitive it is in other text editor`s
Split View
Being able to look at two documents in the same window is a great feature. Often times I need to compare my code to another page and being able too look at them at the same time saves a lot of time. I especially like that it can be configured to split vertical or horizontally. If you are on a big monitor you will really appreciate the vertical split.
Blockededit
A very nifty feature for creating/editing large similar blocks of code like lists. For instance say you have to create a list. You can place all of the list items in your code, select them via block edit, then write a list tag, Coda will add the same code to each element in your list.
Built In Terminal
The terminal is an indispensable tool in web development, being able to open it in the same window as my project is very convenient primarily when I am multitasking in two different terminal sessions. Having a terminal window assigned to a project eliminates a lot of confusion and prevents me from running commands in the wrong place.
CSS Edit
Coda has a decent CSS Editor built in for most it will be enough, but CSSEdit has my heart.
Live Preview
This is CSSEdit`s killer feature to me. CSSEdit uses Webkit to provide a preview of the page you are working on meaning that it looks and works exactly how it will in a browser. It is like a hybrid of WYSIWYG and hand coding meaning that I nudge the width, height, margin, padding of an element and watch the element move in realtime in CSSEdit`s Preview window rather then refreshing and because it uses Webkit I know that it will at the very least look exactly the same in Safari and Google Chrome. This feature really helps with getting your layouts pixel perfect. Too truly appreciate it you should work with two monitors
X-Ray Inspector
Another awesome feature is the XRay Inspector. It allows you to select any element on the page and tell you every style that effects the element, even across multiple style sheets. It is extremely useful when working on large sites that you did not build yourself. This feature is in free tools like Firebug, Webkit Inspector and the Web Developer Plugin, but those implementations are not quite as functional as this one. For instance once you click on the selector you want CSSEdit will open the file and take you directly to that element. You can also construct new selectors from the X-Ray Inspector and not just simple base selectors, when appropriate it will create descendant selectors as well. I`m a little ashamed to admit it but I didn`t fully understand the power of descendent selectors until I started using CSSEdit. CSSEdit generates fantastic CSS.
Grouping
CSSEdit makes it really easy to put your selectors into groups. Even better you can organize your selectors using the Style Panel, meaning that you can just slide them where you want them rather then cut and paste.
Search
You can search for certain selectors like all of the selectors that reference p tags, or you can search for specific code like every selector that has a width of 27 pixels. What makes it so functional is that the Style Panel will filter out the selectors for you only displaying the ones that match your result.
XScope
XScope is marketed as a design tool, but it also fantastic for when you are converting a design from a PSD to web page. It is a package of tools that can measure elements, sample colors, and a really cool tool named Dimensions that can automatically detect the size of or between objects. Like my other favorite tools it has a beautiful interface and simple to learn and use.
Conclusion
I only talked about the features that I really liked for these programs, but there are more great features in all of them. If you are looking for great inexpensive tools for the Mac you won`t be sorry trying them out for a while. There are other great tools out availiable, I have been looking at Espresso an all in one editor from MacRabbit the creators of CSSEdit, i`m not sold on it yet but I think in a few updates it may give my current toolset a run for its money.
Enjoy this post? Share it with others.
