Dreamweaver Article

Configuring Third-Party File Compare

Overview of the New File Compare Feature in Dreamweaver 8

Historically, Dreamweaver has appealed to both web designers and developers and, with few exceptions, many of the features in Dreamweaver tend to appeal to one camp or the other. Rarely, however, does a feature in the product serve the needs of both classes of user.

The file compare feature in Dreamweaver 8 is one of those rare features that has universal appeal. Whether you are tweaking CSS code for your page layout or updating your ColdFusion component code, file compare will likely become one of your favorite new tools in your web utility belt.

Difference (often referred to as just "diff") or merge utilities are very similar to simple text editors, except there are always two visible edit windows side-by-side. Each text editor typically features line numbering. When a text file is loaded in each of the two text editors, colors and other formatting are used to visually highlight differences between the files.

A couple of rules to consider when performing a file comparison include:

• File compare applications are intended to compare text files, not binary files such as images or movies. The file compare feature works well for many text file types you might edit in Dreamweaver, such as HTML, CSS, XML, ASP.NET, ColdFusion, and PHP.
• Dreamweaver 8 does not ship with a file comparison utility, but it instead allows you to integrate with many popular third-party applications—many of which are free to download. Significantly more powerful commercial applications are available such as Araxis Merge supporting advanced features such as three-way comparison, richer visual feedback, automatic merging, and folder comparison.
• Some file comparison utilities will help you merge your changes in addition to merely visualizing the differences. These applications are typically referred to as merge utilities.

Some examples of when you might want to use the file compare feature include:

1. To remind yourself of previous changes you may not have worked on for an extended period of time.
2. To help compare and understand changes made by a colleague to a file when collaborating together.
3. To verify the changes you made to a file before pushing it to the server. For example, did you leave in any extra comments or debugging code at the very bottom of the file that you may have forgotten about?

In my experience using Dreamweaver 8 so far, integrating file compare into my workflow has helped increase the quality of my code by reminding me to eliminate bloated code or debugging information. It's very easy to forget about snippets of code that you intended to remove at a later date. Fortunately, computers are much better at parsing code and highlighting changes than humans.

The following screen shot is an example of how the file compare utility, FileMerge, helps to visually compare modifications to an HTML file. In this case, the original file is displayed in the right-side text editor view and the updated version on the left side. At the bottom, FileMerge displays that it has detected two blocks of code that are different.

Figure 1. Two different versions of a document being compared in FileMerge

Downloading Third-Party Merge Utilities

A Google search for "diff" or merge utilities reveals an impressive number of applications ranging from open source options to professional grade (around $100) options. For Windows, there are a variety of free tools available, including WinDiff, WinMerge, and ExamDiff. Though any of these will suffice, I have opted to use WinMerge for this article due to its ease of use and powerful feature set. For the Mac, I recommend the utility FileMerge provided by Apple on its Development Tools website. You can download these using the links in the Requirements section of this article.

In the next sections, I will show you how to install WinMerge for Windows and FileMerge for Mac OS X.

Page 2 of 7

Previous Page

Next Page