Posts in Category "Web Development"

How do you parse your log files?

Posted on November 1, 2005 by Christian Cantrell | Comments (9)

I’ve been playing around with different ways to parse log files and generate server reports. I currently have Webalizer, Analog, Omniture, and mod_log_sql in place. Unfortunately, I can’t find one package that provides everything I want. Anyone have any suggestions?

JavaScript Flash Tag Update

Posted on August 18, 2005 by Christian Cantrell | Comments (0)

If you use the JavaScript Flash Tag object for rendering Flash tags client-side, I just checked in an update you might want to grab. I added a missing parameter (which is useful for Flash Player 8) and fixed a bug that was cropping up on older versions of Internet Explorer. You can grab the new source and read the revision notes here.

The API hasn’t changed at all, so you can drop it right in to your existing code with no problems.

Search + Ajax = MXNA Suggest

Posted on August 5, 2005 by Christian Cantrell | Comments (2)

I’m experimenting with making the MXNA search more useful, so I decided to borrow some ideas from Google and build MXNA Suggest. MXNA Suggest lets you search interactively by suggesting terms that other people have searched for in the past as you type. The terms MXNA Suggest returns are ordered by relevance, which is determined by the number of times people have searched for them. In addition to being a potentially useful search interface, it’s also an interesting research tool. It’s sort of a quick and even fun way to see what terms are most popular in the Macromedia community.

MXNA Suggest is still very much in an "alpha" stage which means I’ve just been hacking away at it in my free time, and therefore it has not been thoroughly tested. That said, it does seem to work pretty well, although it took a lot of work to get it that way. I’m a big Ajax/JavaScript fan, but it can get very frustrating when developing across browsers and platforms (even with all the most modern browsers). If you view the source code, you’ll see areas where I had to branch based on browser, and if you use it enough, you might even find a bug or two I haven’t fixed yet (for instance, in Safari, hitting the up and down arrow will make the selection jump two items at a time instead of one because Safari throws two key down events for the arrow keys for some reason I couldn’t possibly begin to explain).

Continue reading…

JavaScript Support for Eclipse

Posted on August 2, 2005 by Christian Cantrell | Comments (7)

I’m looking for a good JavaScript plugin for Eclipse. I see there are several out there. Can anyone recommend one in particular?

History Management in RIAs

Posted on July 20, 2005 by Christian Cantrell | Comments (7)

I’ve been doing a lot of experimentation with RIAs recently. First, Mike Chambers and I experimented with integrating Flash and Ajax. Then, I did some work to support deep linking in both Flash and Ajax applications. The next challenge was history management.

History management refers to the ability for users to navigate backward and forward using their browsers’ integrated history buttons. We’ve all been doing this for as long as we’ve been browsing the web. In fact, it’s something most of us take for granted, and even depend on (I know I do).

The problem with history management is that it is not always compatible with Rich Internet Applications. One of the distinguishing features of RIAs is that they eliminate the need for total page refreshes by loading data in the background and updating only portions of page. In most cases, this is done without creating a new entry in the browser’s history table, which means you can’t use your browsers’ forward and back buttons to navigate an RIA. Typically, clicking the back button will take you back to the page you were on before visiting the RIA, regardless of how much you had been interacting with the RIA in the meantime.

Flex automatically addresses this issue using a hidden frame which invisibly creates entries in the browsers’ history table as users navigate a Flex application. It’s a very seamless and elegant approach which seems to work quite well, so I decided to borrow some of the same concepts and apply them to MXNA’s Category Click Feed Report.

The Category Click Feed Report has become our sandbox for RIA experimentation. In the latest build, I added some initial support for history management. To see it in action, go to the report, click around on the categories and feeds, then use your browsers’ back and forward buttons to navigate through your history. If all goes according to plan, you should get the best of both the RIA and standard web interface worlds.

The technique I’m using is slightly different than the one Flex uses. Since Flex only needs to worry about history mangement in Flash, it loads a piece of Flash content in a hidden frame which is able to communicate with the main SWF. MXNA, on the other hand, is a combination of both Flash and JavaScript/HTML, so I needed a more generic approach. The technique I settled on (at least for this first, very experimental version) is basically an Ajax history manager which I’ve extended with the Flash / JavaScript Integration Kit so that it talks to Flash, as well. It seems to work fine on all the browsers I have sitting around me (Firefox, Safari, and IE), but it hasn’t gone through a thorough QA cycle. If you find any issues, please let me know. And if you want the code, it’s all availble by viewing the source of the page (and the Flash chart). None of it is obfuscated, so you’re welcome to it.

Using JavaScript to Render Flash Tags

Posted on June 24, 2005 by Christian Cantrell | Comments (9)

The first time I embedded a piece of Flash into a ColdFusion application, I wrote a ColdFusion custom tag to render the Flash tag for me. Yesterday, I wrote a JavaScript class that essentially does the same thing, but renders the Flash tag client-side rather than generating it on the server. Why encapsulate the process of writing out a Flash tag?

  1. Flash tags are complicated. They have a lot of different options. The FlashTag class supports 17 different properties. You can set the ones you need (only four are required), and defaults are used for the rest. Also, the FlashTag JavaScript class validates the information you set on it to make sure all the values are supported (if not, it throws exceptions).
  2. Flash vars can be a pain. Flash vars are passed into Flash movies at load-time, and have to be formatted as a URL encoded string. The FlashTag makes setting Flash vars much easier (see code below).
  3. Encapsulation is good. What if you wanted to change something across all your Flash tags? Wouldn’t it be better to change it one place?

Here’s some sample code. First, load the required classes like this:

<script type="text/javascript" src="/path/to/Exception.js"></script>
<script type="text/javascript" src="/path/to/FlashTag.js"></script>

The Exception class is required so that the FlashTag class can throw exceptions if something goes wrong. Now, create an instance of the FlashTag and write it out:

<script type="text/javascript">
// The arguments below are path, width, height, and Flash Player version number.
var tag = new FlashTag('/path/to/flashContent.swf', 300, 300, '7,0,14,0');
tag.write(document);
// or
document.write(tag.toString());
</script>

You can set properties like this:

tag.setBgcolor('ff0000');
tag.setMenu(false);

You can add Flash vars like this…

tag.addFlashVar('someName', 'some value');

… or like this…

tag.addFlashVars('a=b&b=c&a=c');

Why use JavaScript rather than rending Flash tags server-side? JavaScript runs everywhere whereas ColdFusion only runs on a ColdFusion server which makes the JavaScript solution more versatile. Also, using JavaScript allows you to render Flash dynamically and on demand, after the page has loaded, which is becoming more relevant as internet applications become richer and more interactive.

I wrote the FlashTag JavaScript class as part of the Flash / JavaScript Integration Kit. You can grab the source from Subversion here:

I tested it fairly well, but if you find a bug, let me know and I’ll get it fixed right away.

Update: As “sang” points out in the comments, this is also a good way to keep your pages W3C/XHTML compliant.

Deep Linking in Flash and AJAX Applications

Posted on June 20, 2005 by Christian Cantrell | Comments (5)

A couple of weeks ago, Jon Udell made a post entitled "Web-friendly rich Internet apps, continued" in which he asks the questions "can rich Internet apps be web-friendly?" He mentions MXNA, and specifically, the experimental MXNA Category Click Feed Report which combines Flash and JavaScript/AJAX techniques to make the page more dynamic, interactive, and responsive.

But Jon wanted more out of the experience. From his post:

If I link to the aggregator, it defaults to the Macromedia category and to Kevin Lynch’s blog. You can navigate to the Technology category, and thence to my blog, but there are no URLs exposed for these, so I can’t link from here to there. In this case it’s not a Flash issue, it’s a DHTML issue. But the principle is exactly the same. Toolkits and frameworks for building rich Internet apps ought to make support for deep linking a no-brainer for developers. It should be the rule, not the exception.

That sounded like a good idea to us, so we did it. Although the Category Click Feed Report initially defaults to one weblog (currently set to mine), you can navigate to other feeds, and bookmark or link directly to that feed’s report. For example, check out John Udell’s report. Or Kevin’s. Or Mike Chambers’. Notice how the state of both the Flash and the JavaScript portion of the application are captured.

Continue reading…

Flash / JS Integration Kit Released Under an Open License

Posted on June 15, 2005 by Christian Cantrell | Comments (11)

Mike blogged the news yesterday, but just in case you avoid his blog in favor of mine, I’ll blog the news, too. As you might have noticed from Kevin Lynch’s Flash Platform white paper, we recently released the Flash / JavaScript Integration Kit (beta). The kit allows you to call JavaScript functions from Flash, and to call ActionScript functions from JavaScript. Not only can you invoke functions seamlessly across environments, but you can also pass most data types back and forth, as well, such as:

  • Objects
  • Arrays
  • Strings
  • Numbers
  • Booleans
  • Dates
  • nulls
  • undefined

The Flash / JavaScript Integration Kit works across all major platforms and browsers, and is available over at osflash.org for free under an open license based on the Apache 1.1 software license. Here are all the important links:

Submit any bugs or feature requests at the development site. Check out the integration kit in action over at MXNA. And finally, if you build something cool with the kit, let me know.

What Have We Learned From the Google Web Accelerator?

Posted on June 1, 2005 by Christian Cantrell | Comments (7)

At the beginning of May, Google launched their Web Accelerator beta. A couple of weeks later, the beta was suspended with the message "Thank you for your interest in Google Web Accelerator. We have currently reached our maximum capacity of users and are actively working to increase the number of users we can support." The Web Accelerator had been receiving a lot of criticism around the web because of some of the techniques it was using to speed up browsing, like pre-fetching. In theory, pre-fetching URLs is not a bad thing, and according to the RFCs, Google was doing the right thing. In practice, however, it caused all kinds of problems since browsers were pre-fetching links in admin applications that would do things like cause records to be automatically deleted or otherwise altered.

Continue reading…

Which Firefox Extensions Do You Use?

Posted on May 27, 2005 by Christian Cantrell | Comments (21)

One of the primary reasons I love Firefox so much is the all the extensions that are available. Here’s a list of all the extensions I have installed, and that I use on a regular basis:

  • Feed Your Reader: Lets external
    applications and web based aggregators use RSS autodscovery (extremely useful).
  • HTML Validator: Adds HTML validation to the View Page Source of the browser.
  • MeasureIt: Draw out a ruler to get the pixel width and height of any elements
    on a webpage.
  • Scribe: Ads Word Processor like functionality to web forms, including opening
    and saving for entries as files. (Good for weblog posting.)
  • Aardvark: Allows cleaning up a page prior to printing it. Also has page analysis
    tools for web developers (which is mainly what I use it for — I hate printers).
  • Web Developer: Adds a menu and a toolbar with various web developer tools.
  • Live HTTP Headers: View HTTP headers of a page and while browsing.
  • SpellBound: Adds spell checker support to web forms and extensions.

What extensions am I missing that you can’t live without?