In my last post I talked about Beyond Compare and using it to replace the Dreamweaver synchronization feature. It got me thinking about a missing feature in DW. I've been using file comparison programs for quite a while, but only recently discovered Beyond Compare. I used to use Windiff and had my own extension for Dreamweaver MX that allowed me to use Windiff to compare two files. Now that Dreamweaver 8 has the feature, the extension is no longer needed. . .or is it? Dreamweaver 8 has many cool file compare features, but lacks one I like to use: compare a file in your site with a file somewhere else on the system. I reworked the extension to address this. As an added bonus, it works back to Dreamweaver MX and DW MX 2004 (and maybe earlier.)

Find it in my list of extensions at http://www.tom-muck.com/extensions/. It's a free download. I have not tested on the Mac. If anyone runs into issues, please let me know.

There was a discussion on a Dreamweaver list the other day about local/remote file synchronization in Dreamweaver 8. This is a touchy issue with Dreamweaver, because Dreamweaver has had an incredibly inconsistent history with the Synchronization feature. At one point, it simply did not work. For those who have not used it, you can find it in the semi-hidden Files menu when you click on the icon in the right corner of the Files panel under Site > Synchronize. For this to work semi-properly, you need to check the box in the site setup under the Remote Info tab that says "Maintain Synchronization Information".  There are some problems with this feature and other site management features in DW:

1. Checking this box also causes little files to be scattered all over your local site -- dwsync.xml. They are contained within the _notes folders that DW scatters all over your site. This causes problems when using source control software -- the software reports changes in these files. Dreamweaver is like a bad dog leaving little piles of poop all over your site.
2. The extra DW-droppings also cause problems using the synchronization feature when you have "Show Hidden Files" checked in the Files menu -- you see many of the droppings showing up as files that are different between local and remote.
3. When you change your clock settings, files will show as different. I made the mistake of leaving DW open the evening that the clock rolled back for Daylight Savings Time and when I did a synchronization the next day, Dreamweaver reported over 1000 files had changed. That made it quite difficult to find the 3 files that actually had changed.
4. When using other programs to modify content, DW does not always seem to know about the change.
5. DW's GET and PUT does not always work right, leaving you thinking that a file had been updated when in fact it has not.

There is a technote about the "Dreamweaver droppings" here, and one way to avoid them: http://www.macromedia.com/cfusion/knowledgebase/index.cfm?id=91b33859, however it also renders synchronization useless.

I have always been one to use DW for as much of my work as possible, because I hate to have too many programs open for simple day-to-day operations, but I have come to the realization that DW simply cannot be trusted to handle this seemingly simple operation. I now use Beyond Compare on Windows for this (there is probably a similar program for Mac). Beyond Compare is a file comparison program that will do a comparison of files or folders locally or over an FTP connection. The comparisons can be simple (using the file date) or more detailed (using a binary compare).

I did a simple synchronization preview in Dreamweaver this morning to test it out once more and DW reported 128 files had changed in my site. I knew this was not accurate, so I revved up Beyond Compare and did the same comparison -- it turns out only 14 files were different, and I also got the report that 3 files were newer on the remote server, 4 files newer on local server, 4 files were orphans on the local, and 3 files orphans on the remote. Much better than trying to wade through Dreamweaver's erroneous report that 128 files had changed.

As an added bonus, Dreamweaver 8 now contains file comparison, so Beyond Compare can be used directly from the files panel in Dreamweaver for quick local/remote comparisons. Beyond Compare is also great from the Desktop or file system because you can right-click a file, choose it for compare, and then right-click another file to compare to.

Maybe Dreamweaver 9 will address the problems with synchronization. If a $30 program called Beyond Compare can do it, Macromedia should be able to do it.

I finally got a moment to breathe since the move and I've posted my files from my MAX session on Advanced CSS. For those of you that attended my sessions, this particular PDF was created from the actual Power Point Presentation used at MAX. It is more accurate than the one you can download from the Macromedia attendee support area (mainly due to the fact that I couldn't cover everything I wanted to in an hour and I had to remove a few things). I did leave in an extra example (shown after the final Thank You slide) even though I didn't have time in the session to cover it. It's a negative margins "Real World Example" and you may at least enjoy deconstructing the code.

Since the files used were actual client sites, I simply link to them and don't provide them as a download. The files are located at my W3Conversions site. One day, it will actually be completed with tasty treats. It will have a style switcher (represented now by the different designs you'll see when you refresh the pages). I feel certain that one day I'll have time to work on my own sites. Really. Until then, all I can offer there are the MAX files.

Part 1 of this post showed the server-side code for a browser resize tracker. This part will show the client-side script. This can go on any type of page -- php, coldfusion, html, etc. The scripts consist of several functions:

• getBrowserSize() -- called in the onload and onresize event to capture the browser size and pass to the server-side page
• getSize() -- gets the size of the browser window
• passFields() -- takes an array of fields (fieldname, value, fieldname, value, etc) and a URL and passes the fields to the URL as querystring variables
• resetSizeTimer() -- creates a timer so that when the browser is resized, only one event is recorded (browser resizing typically fires the onResize event numerous times in succession.)

In addition, we set a global variable to act as a flag for the resize timer. The code is pretty straightforward, and can be placed in the head of any file:

<script>
var size_timer = false;

// Subroutine to get the size of the window
function getSize() {
 var myWidth = 0, myHeight = 0;
 if(typeof(window.innerWidth) == 'number') {
  //Non-IE
  myWidth = window.innerWidth;
  myHeight = window.innerHeight;
 }else if(document.documentElement &&
  (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
  //IE 6+ in 'standards compliant mode'
  myWidth = document.documentElement.clientWidth;
  myHeight = document.documentElement.clientHeight;
 } else if(document.body && (document.body.clientWidth || document.body.clientHeight)) {
  //IE 4 compatible
  myWidth = document.body.clientWidth;
  myHeight = document.body.clientHeight;
 }
 return [myWidth, myHeight];
}

// Pass fields to server given a URL and fields in name/value pairs
function passFields(url,args) {
 url += "?";
 for(var i=0; i<args.length; i=i+2) {
  url += args[i] + "=" + args[i+1] + "&";
 }
 //Set up the AJAX communication
 if (window.XMLHttpRequest) {
  req = new XMLHttpRequest();
 } else if (window.ActiveXObject) {
  req = new ActiveXObject("Microsoft.XMLHTTP");
 }
 try {
  // Pass the URL to the server
  req.open("GET", url, true);
  req.send(null);
 }catch(e) {
 //nothing;
 }
}
function resetSizeTimer() {
 size_timer = false;
}

// Get the size and pass to the server
function getBrowserSize() {
 if(size_timer)return;
 size_timer = true;
 self.setTimeout('resetSizeTimer()',1000);
 var theArray = getSize();
 var url = "getBrowserSize.php";
 var args = new Array();
 args.push("width");
 args.push(theArray[0]);
 args.push("height");
 args.push(theArray[1]);
 args.push("screenwidth");
 args.push(screen.width);
 args.push("screenheight");
 args.push(screen.height);
 args.push("pagename");
 args.push(window.location);
 passFields(url, args);
}

</script>

All you need to do is to add the getBrowserSize() function to the onload and onresize events of the <body> tag:

<body onload="getBrowserSize();" onresize="getBrowserSize();">

Now, when you browse the page, the server records the browser size upon load and upon resize. Typical information would look like this:

The technique is handy and can be used for any other situation where you need to pass client-side information to the server.

Cross posted at Tom-Muck.com

It's always interesting to find out about viewing habits of web visitors. One of the things that is hard to determine when building a web page is how big to make your pages. Do you assume the user has 1280x1024? Do you assume 800x600? Do you assume that the user will have a fully maximized browser? One way to find out this information is to read the properties via JavaScript and store them. AJAX gives a web developer a valuble tool that allows the server to communicate with the browser in real time based on client-side events (such as resizing). I wrote a little script that I can insert on a page to track the resizing made by a user in relation to his screen resolution. After getting this information from a variety of users, I can run queries on the data and get some insight into browsing habits and adjust my page designs accordingly (or have them adjusted by a designer, in my case.) The code will be presented for ColdFusion and PHP.

First, I create a table in my database to store the information. The following is for SQL Server:

CREATE TABLE BrowserSize (
 browsersize_id int IDENTITY (1, 1) NOT NULL ,
 browsersize_width int NULL ,
 browsersize_height int NULL ,
 browsersize_screenwidth int NULL ,
 browsersize_screenheight int NULL ,
 IP varchar (50) NULL ,
 pagename varchar (255) NULL
)

The following is the equivalent for MySQL:

CREATE TABLE BrowserSize (
 browsersize_id int AUTO_INCREMENT PRIMARY KEY NOT NULL ,
 browsersize_width int NULL ,
 browsersize_height int NULL ,
 browsersize_screenwidth int NULL ,
 browsersize_screenheight int NULL ,
 IP varchar (50) NULL ,
 pagename varchar (255) NULL
);

You could also add a timestamp field, if you want to track times.

Next, I create a server-side page to grab the information and pass it to the database. The information will be passed in the URL. The code is self-explanatory. Basically, we pass width, height, screenwidth, screenheight, and page location in the URL, and insert it into our database table, along with the IP address of the user. The following is for ColdFusion:

<cfparam name="url.width" default=0>
<cfparam name="url.height" default=0>
<cfparam name="url.screenwidth" default=0>
<cfparam name="url.screenheight" default=0>
<cfparam name="url.pagename" default="">
<cfset url.width = val(url.width)>
<cfset url.height = val(url.height)>
<cfset url.screenwidth = val(url.screenwidth)>
<cfset url.screenheight = val(url.screenheight)>
<cfset ip = cgi.REMOTE_ADDR>

<cftry>
<cfquery datasource="yourdsn">
INSERT INTO browserSize
(browsersize_width
, browsersize_height
, browsersize_screenwidth
, browsersize_screenheight
, IP
, pagename)
VALUES
(#url.width#
,#url.height#
,#url.screenwidth#
,#url.screenheight#
,'#ip#'
,'#url.pagename#')
</cfquery>
<cfcatch>
<!--- do nothing --->
</cfcatch>
</cftry>

The following is for PHP:

<?php
$_GET["width"] = isset($_GET["width"]) ? intval($_GET["width"]) : 0;
$_GET["height"] = isset($_GET["height"]) ? intval($_GET["height"]) : 0;
$_GET["screenwidth"] = isset($_GET["screenwidth"]) ? intval($_GET["screenwidth"]) : 0;
$_GET["screenheight"] = isset($_GET["screenheight"]) ? intval($_GET["screenheight"]) : 0;
$pagename = isset($_GET['pagename']) ? $_GET['pagename'] : "";
$ip = isset($_SERVER['REMOTE_ADDR']) ? $_SERVER['REMOTE_ADDR'] : "";

$conn = mysql_connect("localhost", "username", "password");
$query_rs = sprintf("INSERT INTO browserSize
(browsersize_width
, browsersize_height
, browsersize_screenwidth
, browsersize_screenheight
, IP
, pagename)
VALUES (%s, %s, %s, %s, '%s', '%s')"
,$_GET["width"]
,$_GET["height"]
,$_GET["screenwidth"]
,$_GET["screenheight"]
,$ip
,$pagename);
mysql_select_db("cwtest");
$rs = mysql_query($query_rs);
?>

Both of the pages can be run in the browser to test (saved as getBrowserSize.cfm and getBrowserSize.php respectively). If the values of 0 are inserted in the database, everything is working. I'll post the client-side AJAX code in Part 2.

I've been slammed due to MAX (first getting ready for my sessions and then recovering from the lack of sleep and catching up on work after it). I have several things I'd like to post, but all in good time.

One thing I did want to make sure to help spread the news about is open source ColdFusion applications. I don't write CF code. But I find it very easy to understand and style around. I really love working with it. There are some great apps out there right now -- and they're open source. The first time I encountered these was through a project some of my co-workers at CMX started working on, CFOpen.org. This site lets CF developers post their code and work on their apps with other developers. Pretty cool.

Now, Brian Rinaldi has created a list of Open Source CF Applications. Instead of starting from scratch, you may want to check out what's already been created and add to that instead. There's a great variety of cool apps, including -- blogs, wikis, AJAX implementation and more. Long live ColdFusion!