The Pothoven Post

PeepNotes - my Rails Rumble 2009 entry

2009-08-25T08:38:00.007-04:00

This past weekend I took part in Rails Rumble 2009 and help create a site called PeepNote.

If you're not familiar with Rails Rumble, I'll borrow the introduction from their web site:

The Rails Rumble is a 48 hour web application development competition. As a contestant, your team gets one weekend to design, develop, and deploy the best web property that you can, using the awesome power of Ruby and Rails.

Two of my teammates have written up nice articles on our experience, so I encourage you to read them:

Rails Rumble 09 is over by Brian Burridge

48 Hours & The Creation of PeepNote by Josh Hemsley

Additionally, you can find out more information on PeepNote and recent developments on the PeepNote blog.

In the meantime, here is the promotional video:

Other articles on PeepNote:
Rails Rumble Competition: Peepnote (Designer's Couch)

If you like PeepNote, PLEASE VOTE FOR US!

Managing Tags in Rails

2009-08-13T10:44:00.007-04:00

In this article I'm going to document a small piece of the administration component of the Ruby Rails Review that I wrote. On Ruby Rails Review we kept a collection of interesting articles regarding Ruby on Rails, and these articles were tagged with various tags so that if you went to browse the articles you could filter them by the various tags.

Of course, there's no reason to implement that whole tagging system ourselves since there are plug-ins for that. To make the articles taggable we used the acts_as_taggable_on plug-in. This article just gives a method for easily editing the tags for a given article which works much like the Blogger labeling I used when writing this article.

For Ruby Rails Review, the article editor form is shown below, though I've dimmed out everything but the tagging sections:

As you can see, there is a text field where you can type in tags in a comma separated list, as well a list of all currently defined tags. Selected tags are shown in blue and underlined to give a visual indication that they are selected, but all tags are clickable to either select or deselect them. As tags from the list at the bottom are selected or deselected, they are added or removed from the text field. If you enter tags in the text field they are either selected or added (or deselected if you remove a tag) from the tag list below.

So, how do we do this?

First, the form code looks like this:


<% form_for @article_detail, :url => { :action => "update", :id => @article_detail.article_id } do |f| %>
   ...
   <%= f.text_field :tag_list, :onchange => "updateTagList(this.value);" %>
   ...
<% end %>
<div id="tags" style="margin-top:30px;">
<% @tags.each do |tag|%>
<div class="tag<%= ' selectedTag' if @article_detail.tag_list.index(tag.name) %>" onclick="selectTag(this);"><%= tag.name %></div>
<% end %>
</div>

You'll also need a little bit of CSS added to make the selected tags stand out (added to your main.css). I happened to make them blue and underlined, but you can make them highlighted or whatever you please:


.selectedTag {
      color: #247CD4;
      text-decoration: underline;
}

Finally, add the necessary JavaScript in either your application.js or a separate JavaScript file of you choosing:


function selectTag(tagElem) {
    tagElem.toggleClassName('selectedTag');
    var selected_tags = buildTagList();
    $('article_detail_tag_list').value = selected_tags;
    $('article_detail_tag_list').focus();
};

function updateTagList(selected_tags) {
    selected_tags = selected_tags.split(',');
    var tags = $H();
    $$('.tag').each(function(tag) { 
        tags.set(tag.innerHTML, tag);
        tag.removeClassName("selectedTag");
    });
    selected_tags.each(function(tagName) {
        tagName = tagName.strip();
        var tag = tags.get(tagName);
        if (tag) {
            tag.addClassName("selectedTag");
        } else {
            $('tags').insert('<div class="tag selectedTag" onclick="selectTag(this);">'+tagName+'</div>');
        }
    });
};

function buildTagList(tag) {
    var selected_tags = [];
    $$('.selectedTag').each(function(tagElem) {
        selected_tags.push(tagElem.innerHTML);
    });
    if (tag) {
        if (selected_tags.indexOf(tag) === -1) {
            selected_tags.push(tag);
        } else {
            selected_tags = selected_tags.without(tag);
        }
    }
    selected_tags = selected_tags.join(',');
    return selected_tags;
}

That's it! Now you can easily maintain the tags on your taggable items.

RailsRumble '09

2009-08-10T13:28:00.002-04:00

I plan to participate in this year's Rails Rumble with team Agile Nomads on August 22nd.

Acts as Conference coverage on Ruby Rails Review

2009-02-06T11:42:00.000-05:00

2009-01-26T12:15:00.005-05:00

Connect with other attendees

Ruby tip to handle missing records

2009-01-08T11:47:00.004-05:00

Here's quick and simple tip to cleanly handle non-existent records in Ruby.

By default if you try to use find(id) to fetch a record from your database and the id doesn't exist you'll get a RecordNotFound error like:


>> r = Record.find(9999)
ActiveRecord::RecordNotFound: Couldn't find Record with ID=9999
        from /usr/lib/ruby/gems/1.8/gems/activerecord-2.1.1/lib/active_record/base.rb:1383:in `find_one'
        from /usr/lib/ruby/gems/1.8/gems/activerecord-2.1.1/lib/active_record/base.rb:1366:in `find_from_ids'
        from /usr/lib/ruby/gems/1.8/gems/activerecord-2.1.1/lib/active_record/base.rb:541:in `find'
        from (irb):3

You could wrap it with a begin and rescue and have the rescue clause create a new record such as:


begin
  r = Record.find(id)
rescue
  r = Record.new
end

Or you could simply use find_by_id which will return nil if the record is not found and re-write it as:


r = Record.find_by_id(id) || Record.new

Merb and Rails Merge

2008-12-23T21:26:00.002-05:00

The competing Ruby frameworks, Rails and Merb, have decided to join forces!

Here is the announcement from Rails creator David Heinemeier Hansson and the similar announcement from the Merb perspective from Yehuda Katz.

Keep up with all the latest Ruby and Rails news at Ruby Rails Review.

Ruby on Rails News Site

2008-12-16T09:01:00.005-05:00

I haven't been very active on this blog recently, but I've been keeping plenty active on other endeavors. One of which is the Ruby Rails Review which my friend, Brian Burridge, announced last week.

As he mentioned in the announcement I created a very easy to use CMS tool which allows us to drag-and-drop the news stories all over the page for placement (or addition and removal), as well as a bookmarklet to simplify the process of adding new stories. I've very happy with how it turned out, unfortunately no one gets to see it but he and I.

2008-09-15T15:32:00.000-04:00

Find me at:

Campfire activity notifier for Gnome, KDE, or console

2008-09-09T11:39:00.006-04:00

The 37signals blog points out a simply Ruby script for KDE that will give you a visual notification when a new message is posted to a Campfire chat room.

I have modified that script to work for Gnome as well as KDE, and additionally a text console. I also made a few other additions such as:

Allow you to specify a specific chat room(s) as a command line argument

Multiple chats rooms can be monitored concurrently using threading

Added the Campfire logo to the notifications

Added some initial status messages to display login status, room topic, and current people in the room

Display of the last 3 messages of the current day's transcript so you know what's going on without need to login

Filter out ads

Here is my version of the script:


#!/usr/bin/env ruby

# == Synopsis
#      Program to monitor a campfire chat room
#      Modified from code provided at: http://www.snailbyte.com/2007/09/13/campfire-activity-notifier-for-kde/
#
# == Usage
#      campfireMonitor [roomName] [roomName] ...
#
# == Author
#      Steven Pothoven and Snailbyte Ltd.

require 'rubygems'
require 'tinder'
require "cgi"

class App
  VERSION = '0.1.1'

  def initialize arguments, stdin
    # default settings
    campfireSubdomain = 'mySubdomain'
    campfireUsername = 'user@email.com'
    campfirePassword = 'password'
    roomNames = ['Room1', 'Room2']
    if arguments.length > 0
      roomNames = arguments
    end

    @ui = 'gnome'
    @campfireIconPath = '/path/to/campfire-logo.png'
    # define you favorite audio player and audio file here for audio notifications
    @soundCommand = 'mplayer /usr/share/sounds/pop.wav'
  

    @campfire = Tinder::Campfire.new campfireSubdomain
    if @campfire.login campfireUsername, campfirePassword
      alert nil, "CampfireMonitor", "Successfully logged in #{campfireUsername}"
      @rooms = roomNames.collect { |roomName| @campfire.find_room_by_name roomName }
      # remove any invalid rooms
      @rooms.delete(nil);
      @rooms.each do |room|
        notify room, "CampfireMonitor", "Entered room."
        notify room, "CampfireMonitor", "Topic is: #{room.topic}.".gsub("'","")
        notify room, "CampfireMonitor", "Current users are:  #{room.users}.".gsub("'","")
      end
    else
      alert nil, "CampfireMonitor", "Failed to log in #{campfireUsername}"
    end
  end

  # display notifcation message
  def notify room, user, msg
    if msg and msg.size > 0
      msg = CGI.unescapeHTML(msg);
      if @ui == 'kde'
        system "dcop knotify default notify eventname \'#{user}\' \'#{''+room.name+': ' unless room.nil?} #{msg}\' '' '' 16 2"
      elsif @ui == 'gnome'
        system "notify-send -i #{@campfireIconPath} '#{user}' '#{''+room.name+': ' unless room.nil?} #{msg}'"
      else
        puts "#{room.name+':' unless room.nil?}#{user} - #{msg}"
      end
    end
  end
  
  # notify with sound
  def alert room, user, msg
    notify room, user, msg
    if @soundCommand and @soundCommand.length > 0
      system @soundCommand
    end
  end

  def run
    # first get any missed messages for today
    threads = []
    @rooms.each do |room|
      thread = Thread.new do
        room.transcript(Date.today).last(3).each do |m|
          if !m.nil? and m[:message] and m[:message].size > 1
            notify room, m[:person], m[:message].gsub("'","")
          end
        end
      end
      threads << thread
    end
    threads.each { |thread| thread.join}

    # listen for more messages
    threads = []
    @rooms.each do |room|
      thread = Thread.new do
        notify room, "CampfireMonitor", "Waiting for messages..."
        room.listen do |m|
          if !m.nil? and m[:message].size > 1
            unless m[:person] == "Ad"
              alert room, m[:person], m[:message].gsub("'","")
            end
          end
        end
      end
      threads << thread
    end
    threads.each { |thread| thread.join}

  end
end

app = App.new(ARGV, STDIN)
app.run

I'm sure you can think of plenty more customizations such as command-line options for all the default settings, etc. But I wanted to keep it fairly simple.

One last thing, here is the cropped version of the Campfire logo I use for my notifications (campfire-logo.png):

Google Chrome (Chromium) JavaScript speed

2008-09-02T19:33:00.001-04:00

Today Google announced and released their own web browser named Chrome (aka Chromium). They even made a nice comic book to describe the advantages of it.

One of the key features they advertise is faster JavaScript execution due to the V8 JavaScript VM. So, I decided to test it using my JS-BogoMips test.

Here are the results of my tests (Windows Vista on Intel® Core™2 Quad Q6600):
Firefox 3:
JS-BogoMIPS (3x) = (0.436779 + 0.446775 + 0.450888) / 3 = 0.444814

Chrome:
JS-BogoMIPS (3x) = (2.758552 + 2.884791 + 2.881541) / 3 = 2.841628

which is a 6.4x speed increase!

Steven Pothoven for President

2008-07-16T15:46:00.000-04:00

Keystroke and Field Validation with JavaScript

2008-05-06T08:52:00.006-04:00

Yesterday, I provided a simple tool to demonstrate the differences between keydown and keypress events. Today, I'm going to apply that knowledge toward making a lightweight form validation library. This library will prevent invalid characters from being entered in form input elements which is useful toward preventing malicious data from being entered (think XSS), as well as ensuring data integrity (data is in the valid format, all required fields present, etc.).

Sample Form:

Alpha		Invalid
Alphanumeric*		Invalid
Date		Date must be yyyy-mm-dd
Decimal		Invalid decimal
Digit		Invalid digit
Email		Invalid email address
Hostname		Invalid hostname
IP address		Invalid IP address
Integer		Invalid Integer
Punctuation		Invalid punctuation
Real number		Invalid real number
Time		Invalid time
Whitespace		Invalid whitespace
custom type format		Invalid

* denotes required field.

The form above should only allow valid characters in each input field - this is your keystroke validation. Furthermore, for fields that require a specific format, when you leave a field with invalid formatted data it should provide an immediate visual indication of the error by setting a fieldWithErrors CSS class on invalid fields. Additionally, a fv:onInvalid event is fired on the invalid element to allow custom events handlers to provide additional actions. For example, enter a number in the date field and tab out. The field will be outlined in red from the fieldWithErrors CSS class and the message, "Date must be yyyy-mm-dd" will be shown by the handling of the fv:onInvalid event. Note: the CSS class will be removed automatically when the field is corrected, and a corresponding fv:onValid event will be fired to allow the custom code to clean up after itself.

Validation rules are defined as Regular Expressions. If you are not familiar with Regular Expressions here is a good reference. Additionally, many predefined regex rules for various validations can be found at the regex library.

Several common data types and formats are defined by default in the library, but it also provide the mechanism to add you own data types. In the custom entry, the type entry allows you to specify an on-the-fly keystroke validation regular expression, and the format entry allows you to specify an on-the-fly field format validation regular expression.

The Validate Form button demonstrates the action you would want to perform before a form submission. It invokes a validateAllFields function which just runs all the field validations (and invokes corresponding CSS rules and issues events). It also returns an array of the invalid field names in case you want to build a list of errors (like the Rails flash messages).

Usage Instructions

Sample Usage:


<script src="javascript/formValidation.js"></script>
<script>
   var vf = new FormValidation();
   vf.addValidationForField("date", "date", "date");
</script>

addValidationForField requires 3 parameters:

The identifer of the field to add validation for

The name of the data type to use for keystroke validation

The name of the data format to use for field validation

In this sample all the names are the same, but they usually wouldn't be.

Just doing the above will prevent invalid characters from being entered in the data field and can indicate when the field is invalid.

When a field is changed, the format validation is run and will do two things.

It will mark invalid fields are the fieldWithErrors CSS class. This can be used to appropriately highlight the error to the user. For example, the following CSS rule will outline the field in red:
```
.fieldWithErrors {
    border: 3px solid red;
}
```

An event will also be issued in the field to indicate whether or not the field is valid. The events to watch for are fv:onInvalid and fv:onValid. These events can be used to hide/show error messages such the following which will display a pre-defined error message:
```
$$('input').each(function(inputElem) {
    inputElem.observe("fv:onInvalid", function() {
        $(this.identify() + "-error").show();}.bind(inputElem));
    inputElem.observe("fv:onValid", function() {
        $(this.identify() + "-error").hide();}.bind(inputElem));
});
```
Or any number of other actions. For example, you may wish to display a popup error message such as those provided by Prototype Window or add messages to an error flash area as commonly done in Rails apps or toggle the submit button as enabled/disabled. Using these events allows you to add whatever actions you desire when the
validation fails (or passes).

Download
formValidation.js

keydown vs. keypress (in JavaScript)

2008-05-05T16:26:00.009-04:00

In my next post, I intend to discuss a validation library which performs keystroke and field level validation for HTML forms using JavaScript and regular expressions. However, before you can correctly understand how the validation works, as well as when you can test for various validation conditions, you have to recognize the different behaviors between the keydown and keypress events.

In the following text fields, type whatever you like and notice the different behaviors in the table below it.

Event	charCode	keyCode	Display	Shifted?
Keydown
Keypress

Some notable problem keys when dealing with JavaScript keystroke validation are the arrow keys and other editing keys (delete, home, end, insert) which should be allowed in order to edit a field value, however they can appear to be punctuation symbols which may not be desired in the field. Function keys and number pad keys are also problematic.

Here are some key observations regarding keypress events:

Firefox sends regular keys as charCodes and special keys as keyCodes

Safari sends both charCode and keyCode for regular keys but does not issue keypress events for special keys

Internet Explorer does not send charCodes, only keyCodes, and does not issue keypress events for special keys

Opera does not send charCodes, only keyCodes, but also issues keypress events for special keys making it impossible to distinguish between some keys such as '-' vs. Insert and '.' vs. Delete

Konqueror will send both charCode and keyCode for regular keys, but only keyCode for special keys

Bluetooth Proximity Monitor (improved)

2008-05-02T14:37:00.002-04:00

About a month ago, a friend of mine pointed out a bluetooth proximity program for windows which would lock your desktop when you walked away by polling your mobile phone's proximity to your computer. I thought that sounded fun to try as I have a bluetooth enabled phone and laptop, however, I'm running Linux, not Windows. After a quick search on Google I found a Bluetooth Proximity Monitor script for Linux. It worked pretty well as it was, but I've made a few adjustments to it to improve it for my purposes.

The original script is written for KDE or other window managers that use xscreensaver. Since I'm currently running in Gnome, I had to switch the commands to use gnome-screensaver instead.

While changing the screensaver commands, I also added the ability to toggle my instant messenger (Pidgin) from 'available' to 'away'

The original script has a single THRESHOLD value to toggle between being near and far. I decided I needed separate NEAR and FAR thresholds. This is due to the wide variance of proximity I can have while I'm sitting at my desk. Just turning in my chair so that my body was between the phone and the laptop could change my RSSI (proximity value) from -1 to -18, so I need a fairly high threshold to prevent that. On the other hand, setting the threshold high could allow my system to unlock when I'm still 30 feet away. So making separate thresholds allows the proximity monitor not to trigger just because I turned in my chair, but also not unlock until I've actually returned to my desk.

With the higher away threshold, it's possible (though uncommon) to totally leave the bluetooth range before it triggers that you've gone away. So, I also added a little logic to trigger the change in proximity if you were previously in near proximity, but now your bluetooth can no longer be pinged (out of range, turned off, etc).

Finally, I alter the proximity check interval depending on if you're near or far. The motivation for this was an attempt to reduce power demands a little in order to prolong the battery life. I haven't done any actual tests to determine if it helped or not. Basically, if you're at your desk, it only checks every 5 seconds to make sure you're still there. If you've walked away it switches to check every 2 seconds in order to be more responsive to when you return.

In the end, my version of the bluetooth proximity monitor script looks like:


#!/bin/sh

DEVICE="00:1A:8A:61:6C:FE"
CHECK_INTERVAL=5
NEAR_THRESHOLD=-1
FAR_THRESHOLD=-22
PID=0
START_CMD='/usr/bin/gnome-screensaver'
FAR_CMD='/usr/bin/gnome-screensaver-command -l && purple-remote setstatus?status=away '
NEAR_CMD='/usr/bin/gnome-screensaver-command -d &&  purple-remote setstatus?status=available'
HCITOOL="/usr/bin/hcitool"
DEBUG="/var/log/btproximity.log"

connected=0

function msg {
    echo "$1" >> $DEBUG
}

function msgn {
    echo -n "$1" >> $DEBUG
}

function check_connection {
    connected=0;
    found=0
    for s in `$HCITOOL con`; do
        if [[ "$s" == "$DEVICE" ]]; then
            found=1;
        fi
    done
    if [[ $found == 1 ]]; then
        connected=1;
    else
#       msgn 'Attempting connection...'
        if [ -z "`$HCITOOL cc $DEVICE 2>&1`" ]; then
#            msg 'Connected.'
            connected=1;
        else
            msg "ERROR: Could not connect to device $DEVICE."
        fi
    fi
}

function check_xscreensaver {
    PID=`ps -C gnome-screensaver --no-heading | awk '{ print $1 }'`
    if [ "$PID" == "" ];  then
        $START_CMD &
    fi
}

check_connection

while [[ $connected -eq 0 ]]; do
    check_connection
    sleep 1
done

name=`$HCITOOL name $DEVICE`
msg "Monitoring proximity of \"$name\" [$DEVICE]";

state="near"
while /bin/true; do

    check_xscreensaver
    check_connection

    if [[ $connected -eq 1 ]]; then
        rssi=`$HCITOOL rssi $DEVICE | sed -e 's/RSSI return value: //g'`

        if (( $rssi <= $FAR_THRESHOLD )); then
            if [[ "$state" == "near" ]]; then
                msg "*** Device \"$name\" [$DEVICE] has left proximity (signal: $rssi)"
                state="far"
                $FAR_CMD > /dev/null 2>&1
   CHECK_INTERVAL=2
            fi
        elif (( $rssi >= $NEAR_THRESHOLD )); then
            if [[ "$state" == "far" ]]; then
                msg "*** Device \"$name\" [$DEVICE] is within proximity (signal: $rssi)"
                state="near"
                $NEAR_CMD > /dev/null 2>&1
                $START_CMD &
   CHECK_INTERVAL=5
            fi
        fi
#        msgn "RSSI = $rssi, "
    elif [[ "$state" == "near" ]]; then     
            msg "*** Device \"$name\" [$DEVICE] is no longer detectable"
            state="far"
            $FAR_CMD > /dev/null 2>&1
            CHECK_INTERVAL=2
    fi
#    msg "state = $state, PID = $PID, sleep = $CHECK_INTERVAL"

    sleep $CHECK_INTERVAL
done

Using JavaScript in blogs without
Click this to be busy for 3 seconds.

Get to the code already!


/**
 * busyProcess
 * 
 * Add a busy indicator over an element while running the function it invokes
 * @param {Object} element clicked on to invoke the task
 * @param {Function} function to invoke after adding visual indicator
 */       
function busyProcess(element, func) {
   var busyIndicator = new Element("div", {id: "busy"});
   busyIndicator.setStyle({zIndex: "100",
                           position: "absolute",
                           fontWeight:"bold",
                           height: "16px"});
   Position.clone($(element), busyIndicator, {setWidth: false, setHeight: false});
   busyIndicator.innerHTML = ' Processing...';
   document.body.appendChild(busyIndicator);           

   // function needs to be deferred in order for the browser to render the
   // busy indicator, but we need to wrap it in order to remove the busy indicator
   // when it's done
   func = func.wrap(
      function(proceed) {
         proceed();
         busyIndicator.remove();
      });
   func.defer();
}

Ok, so how does it work?

The function takes in two arguments. The first is the element clicked on. This is used as the location of the popup processing indicator as the item clicked on is what invoked the action for the user. Since the prototype $() function is used, this can be an element id as well. The second argument is the function to invoke.

busyProcess starts by building the processing indicator. This can be customized to your preferences. Just be sure the indicator has a z-index greater than anything other layers on the screen, and that is has absolute positioning. I then utilize the prototype Position.clone to position the indicator over the element clicked on.

Now we get to the more interesting part. The indicator needs to go away when the task is done. But how do we know when it's done? You could make the task issue a custom event and register an event listener here to catch it in order to remove the processing indicator. However, then any function you use busyProcess with will need to issue that event when it's done. That could get messy, and easy to forget. So, instead we wrap the original function to have it remove the processing indicator when it's done.

So, how do you use this?

For a simple example, let's assume we want to sort some large table by different columns when the user clicks on little triangle icons indicating ascending or descending.
For simplicity I'm just going to add the code inline on an onclick attribute in the HTML. As a general practice I usually try to register event handlers in my JavaScript code so that the HTML has no JavaScript in it.


<td id="zipcode">Zip Code
<img src="images/sort-asc.gif" alt="ascending sort icon" 
     onclick="busyProcess(this, function() {sortTableBy(this.up('td').identify());}.bind(this));" />
</td>

I intentionally made that a little more complicated than it had to be just to demonstrate that you can use inline anonymous functions as well.

Optional (but useful) addition

In order to give a more obvious indication that work is being done and to prevent the user from clicking on anything else until it's done you may want to either darken or lighten the rest of the page. To do this, add another layer at the beginning of the busyProcess function like:


   var lightenScreen = new Element("div", {id: "lightenScreen",
                                          'class': "lightenBackground"});
   document.body.appendChild(lightenScreen);

where the lightenBackground class is defined in CSS as:


.lightenBackground {
    background-color: white;
    opacity: 0.5; /* Safari, Opera */
    -moz-opacity: 0.50; /* FireFox */
    filter: alpha(opacity = 50); /* IE */
    z-index: 20;
    height: 100%;
    width: 100%;
    background-repeat: repeat;
    position: fixed;
    top: 0px;
    left: 0px;
    cursor: wait;
}

or the corresponding darkening version:


.darkenBackground {
 background-color: black;
 opacity: 0.2; /* Safari, Opera */
 -moz-opacity: 0.20; /* FireFox */
 filter: alpha(opacity = 20); /* IE */
 z-index: 20;
 height: 100%;
 width: 100%;
 background-repeat: repeat;
 position: fixed;
 top: 0px;
 left: 0px;
 cursor: wait;
}

Just be sure to remove this layer as part of the wrap by adding the line: lightenScreen.remove();

acts_as_conference - day 1

2008-02-08T18:00:00.000-05:00

I attended the acts_as_conference conference on Ruby on Rails. It was put on by Rails for All whose founder, Robert Dempsey had previously given a free class on Ruby on Rails in Tampa, where I live, for free which was my first real exposure to RoR, and how I learned about this conference.

The conference was attended by around 150 people. There were some technical glitches, particularly with WiFi access for everyone, but overall it ran smoothly.

Here are the topics covered with a brief summary of each:

Advanced DSLs in Ruby - Neal Ford

A DSL is a domain specific languages. Basically this is about building fluent (readable) interfaces and improve abstraction by eliminating noise.

So you can type:


recipe = Recipe.new "Spicy Bread"
recipe.add 200.grams.of Flour
recipe.add 1.lb.of Nutmeg

instead of something like:


recipe = Recipe.new("Spicy Bread")
flour = new Ingredient("Flour")
flour.setMeasurement("grams")
flour.setAmount(200)
recipe.add(flour)
nutmeg = new Ingredient("Nutmeg")
nutmeg.setMeasurement("lb")
nutmeg.setAmount(1)
recipe.add(nutmeg)

This works by using a few techniques. First extending the Numeric class to allow the numbers to converted based on the measurement type to a common measurement in grams, and add an of function to build a new Ingredient object


class Numeric
def gram
 self
end
alias_method :grams, :gram

def pound
 self * 453.59237
end
alias_method :lb, :pound
alias_method :lbs, :pound
alias_method :pounds, :pound

def of ingredient
 if ingredient.kind_of String?
   ingredient = new Ingredient(ingredient)
 end
 ingredient.quantity = self
 ingredient
end
end

The reason you can create the Ingredient without surrounding the Ingredient name with quotes is by type transmogrification which uses of the const_missing construct:


class Object
def self.const_missing(sym)
 eval "Ingredient.new(sym.to_s)"
end
end

Neal added some additional techniques like using bubble method in order to build a nutrition profile for the recipe as you build the recipe.
Overall, the presentation was very interesting to see how you can manipulate Ruby to make ever more readable code. However, in general I don't think it's worth the effort or the confusion for new developers trying to figure out how the code even works.

Working with others: Best Practices for Rails Teams - Luke Francl

Luke discussed some of the issues that can arise in a team environment, specifically for Rails. He had a nice handout which unfortunately isn't available in softcopy form. Here are the bullet points.

Migrations - Migrations have a tendency to stop working (what he calls migration decay). So, use the schema.rb as the authoritative source for your database schema. When creating the database on another system run rake db:schema:load instead of running the migrations.
Seed Data - Loading seed data in your migrations can break as the models change and fixtures are for test data. Luke recommends using db-populate to populate seed data along with ActiveRecord::Base.create_or_update
```
def self.create_or_update(options = {})
id = options.delete(:id)
record = find_by_id(id) || new
record.id = id
record.attributes = options
record.save!
record
end
```
3rd party code - vendor everything using gemsonrails
Security - HTML escape everything in your views with h. There are several XSS plugins that can be used as well. Mass assignments (ex. LineItem.new(params[:line_item])) can be dangerous, be sure to protect your attributes with:
- :attr_protected - attributes you can't write to (via mass parameter assignment)
- :attr_accessible - attributes you can write to

Source control - The source code is the life of your project. Be sure to use source control management (SCM). Commit atomic changes, not batches of changes with informative messages.

Bug tracking - Use a bug tracker that has some workflow for various states of completion as well as email integration to inform interested parties and SCM integration to link code fixes to bugs.

Continuous integration - Tis ties everything together. Verifies that new code doesn't break anything else right away, ensures all libraries and code packages are available, etc.

Rails on AIR - Peter Armstrong

This was mostly about using Flex and using Flex Builder (Eclipse). Flex is way to build Flash applications without knowing Flash and AIR allows your Flash application to run as a stand alone desktop applications. Frankly, I wasn't too interested in this. It seems like a lot of work for not much gain. Yes, Flash is installed in like 99% of browsers, however there are drawbacks to using it in web apps. For example, you site with not be indexable be search engines which can reduce the traffic to your site, and I've been able to accomplish most everything I would need to use Flash for with HTML/CSS/JavaScript.

Keynote - Dan Benjamin

Dan provided some tips for developing good software development and interface design:

As Simple As Possible, But No Simpler
Focus on Creating a Great User Experience
Anticipate User Actions
Think Like your Users
You're Probably Not as Good of a Designer as you Think
Develop for One Scenario, Not for Ten
Good Code Does Not Impress Users
Don't Release a Beta
Apologize (for any problem)
Just Ship It

"simplicity is the key to happiness in the modern world"

That's all for day 1. Watch for day two which has these topics:

JRuby - Charles Nutter
Shining a Light on the Dark Magic of ActiveRecord - Anthony Eden
Smarticus University: BDD With RSpec - Bryan Liles
Adding Media to Your Rails Application - Dave Naffis and Josh Owens
Lessons from the Trenches – Learning from the Rails Bootcamp - Charles Brian Quinn
Keynote - Obie Fernandez

My ImageFlow with Lightbox packaged sample

2008-01-22T22:28:00.000-05:00

Per a request from Clemens to my last post, I've packaged my revised version of ImageFlow and Lightbox2.

In addition, I've made my sample application issue an Ajax request to get the list of images to demonstrate how you can dynamically build the photo album. Here is the code:


// sample application
var MyApp = function() {
 var imgTemplate = new Template('');

    function initializeAlbum(response) {
        var imageList;
        var imgHTML = '';

        try {
            imageList = response.responseJSON; 
        } catch (e) {
            console.error(e, "\n", response.responseText);
        }

        // IE bug : for all other browsers an imageList.each() works great here,
        // however IE doesn't like it so we revert to a for loop
        for (var i = 0; i < imageList.length; i++) {
            var filename = imageList[i];
            // IE bug : IE computes an incorrect value for imageList.length resulting 
            // in undefined filenames in the loop, check for that
            if (filename) {
                // for simplicity, extract the base filename for the caption.  
                // Caption could also be defined for each image in the JSON response data.
                var caption = filename.split('/').pop().split('.')[0].gsub("%20", " ");
                imgHTML += imgTemplate.evaluate({filename : filename, caption : caption});
            }
        }

        $('images').innerHTML = imgHTML;
        // IE bug : IE needs a moment to let the innerHTML change register before proceeding
        // so we add a small timeout to let it catch its breath
        setTimeout(ImageFlow.initialize, 10);
    }

    return {
        loadAlbum : function(albumName) {
            $('startButton').hide();
            $('photoAlbum').show();
            var myAjax = new Ajax.Request('imageList.php?albumName=' + albumName, {
                method: 'get',
                onSuccess: initializeAlbum
                });
        }
    };

}();

The initial button you see in the sample application, invokes the loadAlbum() function when clicked as shown:


<input type="button" value="Click here to load photo album" onclick="MyApp.loadAlbum('FlickrEyeCandy');"></input>

Download the packaged sample application shown below.

Update January 23, 3pm EST: It was reported that the sample application didn't work in IE. This was due to some deficiencies in IE which I have accounted for now. I have pointed them out in the code with the comments beginning with IE bug

ImageFlow with Lightbox Lite

2008-01-18T16:42:00.000-05:00

I like the idea of using ImageFlow with Lightbox2, however, I don't like that it required a tweaked version of ImageFlow, nor that I then had to modify my image list to wrap the Lightbox2 elements around them. Additionally, Lightbox2 adds a lot of functionality that's not being using in this case (all the next/previous image controls, image caching, etc), and it also wants to initialize itself during the window.onload event which I don't want in my Ajax apps.

So, wrote my own Lightbox Lite. Well, technically, I extracted my own Lightbox Lite from the Lightbox2 code with a few modifications.

To begin with, I added this block of HTML to my web page. The Lightbox2 code constructs this dynamically in its initialize function, but I don't see the advantage of that vs just hard coding it into the page to begin with.


<div id="photo" style="display:none">
    <div id="lightbox">
    <div id="outerImageContainer">
        <div id="imageContainer">
            <img id="lightboxImage" style="display:none"></img>
            <div id="imageloading">
                <img src="images/loadingImage.gif">
            </div>
        </div>
    </div>
    <div id="imageDataContainer" style="display:none">
        <div id="imageData">
             <div id="imageDetails">
                 <span id="imagecaption"></span>
             </div>
             <div id="imageBottomNav" onclick="LightBoxLite.reset();" style="float:right" >
                 <img src="images/close-button.png" alt="Close" title="Close">
             </div>
        </div>
    </div>
    </div>
</div>

Then I added the relevant CSS rules to my stylesheet:


#photo {
 z-index: 51;
 position: absolute;
 top: 5px;
 left: 1px;
 width: 100%;
}

#outerImageContainer {
 background-color: white;
 width: 250px;
 height: 250px;
 margin: 0 auto;
}

#imageContainer {
 padding-top: 10px;
}

#imageloading {
 position: absolute;
 top: 40%;
 left: 47.5%;
}

#imageDataContainer {
 font: 10px Verdana, Helvetica, sans-serif;
 background-color: white;
 margin: 0 auto;
 line-height: 1.4em;
 overflow: auto;
 width: 100%;
 padding-bottom: 5px;
}

#imageData {
 padding: 0 10px;
 color: #666;
}

#imageData #imageDetails {
 width: 80%;
 float: left;
 text-align: left;
}

#imageData #imageCaption {
 font-weight: bold;
}

Next I added the Lightbox Lite code to my JavaScript (note, you still need prototype.js and script.aculo.us):


LightBoxLite = function() {
    
    var borderSize = 10;
    var resizeDuration = 0.6;
    
    /**
     * resizeImageContainer
     *
     * @param {Number} desired width
     * @param {Number} desired height
     */
    function resizeImageContainer( imgWidth, imgHeight) {

        // get current width and height
        var widthCurrent = $('outerImageContainer').getWidth();
        var heightCurrent = $('outerImageContainer').getHeight();

        // get new width and height
        var widthNew = (imgWidth  + (borderSize * 2));
        var heightNew = (imgHeight  + (borderSize * 2));

        // scalars based on change from old to new
        var xScale = ( widthNew / widthCurrent) * 100;
        var yScale = ( heightNew / heightCurrent) * 100;

        // calculate size difference between new and old image, and resize if necessary
        var wDiff = widthCurrent - widthNew;
        var hDiff = heightCurrent - heightNew;

        if (!( hDiff === 0)) {
            new Effect.Scale('outerImageContainer', yScale, {scaleX: false, duration: resizeDuration, queue: 'front'}); 
        }
        if (!( wDiff === 0)) {
            new Effect.Scale('outerImageContainer', xScale, {scaleY: false, delay: resizeDuration, duration: resizeDuration}); 
        }

        $('imageDataContainer').style.width = widthNew + "px";

        showImage();
    }
    
    /**
     * updateDetails
     * 
     */
    function updateDetails() {
        var caption = $('lightboxImage').src.split('/').pop().split('.')[0].gsub("%20", " ");
        $('imagecaption').innerHTML = caption; 
        
        new Effect.Parallel(
            [ new Effect.SlideDown( 'imageDataContainer', { sync: true, duration: resizeDuration, from: 0.0, to: 1.0 }), 
              new Effect.Appear('imageDataContainer', { sync: true, duration: resizeDuration }) ] 
        );
    }
    
    /**
     * showImage
     * Display image and begin preloading neighbors.
     */
    function showImage() {
        $('imageloading').hide();
        new Effect.Appear('lightboxImage', { duration: resizeDuration, queue: 'end', afterFinish: updateDetails });
    }
    
    function checkForPreloadComplete(imgPreloader) {
        if (imgPreloader.complete) {
            $('lightboxImage').src = imgPreloader.src;
            resizeImageContainer(imgPreloader.width, imgPreloader.height);
        } else {
            setTimeout(checkForPreloadComplete.bind(this, imgPreloader), 100);
        }
    }
    return {
        /**
         * displayImage
         * display an image in a lightbox
         *
         * @param {String} URL of image
         */
        displayImage : function(imageUrl) {
            $('imageloading').show();
            $('lightboxImage').hide()
            $('imageDataContainer').hide()
            $('photo').show();

            var imgPreloader = new Image();
            imgPreloader.src = imageUrl;

            // once image is preloaded, resize image container
            setTimeout(checkForPreloadComplete.bind(this, imgPreloader), 100);
        },
        
        reset : function() {
            $('photo').hide();
            $('imageloading').show();
            $('lightboxImage').hide()
            $('imageDataContainer').hide()
            $('lightboxImage').src = "";
            $('outerImageContainer').style.width = "250px";
            $('outerImageContainer').style.height = "250px";
            
            
        }
    };
}();

The only alteration you have to do to your ImageFlow images is to add a call to the LightBoxLite.displayImage function in the longdesc attribute of your images, which should currently have the address of the original image to display when you click on it in the image flow. So, instead of:


<img src="reflect.php?img=myimage.jpg" longdesc="myimage.jpg" alt="myimage" />

It becomes:


<img src="reflect.php?img=myimage.jpg" longdesc="javascript:LightBoxLite.displayImage('myimage.jpg')" alt="myimage" />

Here is an example of it being used.

Update January 20: I tweaked a couple CSS rules to correctly center the loading indicator for Internet Explorer.

Update January 23: I received a request to package my modifications. See my new blog entry where I have done that in addition to demonstrating how to add Ajax to receive the image list.

ImageFlow (improved)

2008-01-17T17:08:00.000-05:00

Finn Rudolph has created a very nice "cover flow" type of control in JavaScript called ImageFlow (which is an improvement of Michael L. Perry's Cover flow).

It's a very nice package and quite easy to use! However, it currently has a few code shortcomings. My primary issues with it was that it defined everything in a global scope (with common names that easily clash with other functions) and that it assumes the photos are in a static page and thus initializes itself when the web page loads. The later issue was the biggest thing I needed to fix since I wanted to use it in an Ajax application where I'm getting the images as a result of an XMLHttpRequest.

I added an "ImageFlow" scoping around the whole package so that all the variables and particularly the functions aren't global to my whole application (and potentially clashing).

I added "var" declarations for many of the variables which didn't specify "var" so that they would not become fully global variables, but only global to the ImageFlow scope.

I changed the "onload" function to be an "initialize()" function so that I could execute it when my page was ready

I made all the variables and functions totally private to ImageFlow with the only publicly visible function being "intialize()"

Since the images in the image flow div are now loaded sometime after the page is loaded, I added a check to the initialize function determine when all images are really loaded (otherwise some would be sized wrong).

Now, whenever you're ready for the ImageFlow to be displayed, just call "ImageFlow.initialize()"

If you're interested in these updates, you can download my altered imageflow.js. I have also submitted them to Finn, so hopefully they will be adopted into the official version.

NOTE: The file was updated on January 18, 10:00am EST after running it through JSLint -- which I should have done before posting it originally.

Update January 18: I've added a new article describing the addition of a scaled down version of Lightbox2 without modifying ImageFlow.

2008-01-11T08:53:00.001-05:00

Accordion select list

2007-12-19T15:35:00.000-05:00

Kevin Miller has created an accordion widget using prototype and script.aculo.us. In this article I'll demonstrate how to build a selection list that has sub-sections utilizing the accordion control.

Here is a demonstation comparing a basic select list control and the accordion select list:

To make the control work, you first add a read-only text box with the drop down button image floating to the right of it, for example:


<span style="float: right">
 <img id="accSelectToggle" src="images/btn_dropdown.png" width="21" height="16" alt="Expand list" title="Expand list" />
</span>
<input type="text" id="accSelect" title="List" readonly="readonly" value="Option 1.1" />

You then define a div which contains the accordion control, such as:


<div id="accSelectOptions" class="accordion_container" style="display: none">
<h1 class="accordion_toggle">Category 1</h1>
<div class="accordion_content">
<ul>
 <li value="option11">Option 1.1</li>
 <li value="option12">Option 1.2</li>
 <li value="option13">Option 1.3</li>
</ul>
</div>
...
</div>

Add your preferred CSS styling. In my example the CSS looks like:


#accSelect {
 width: 169px;
 height: 14px;
 border-style: none;
 padding-left: 4px;
}

.accordion_container {
 z-index: 10;
 position: absolute;
 width: 198px;
 border: solid 1px black;
}

.accordion_toggle {
 display: block;
 padding: 0.3em 0.5em;
 font-weight: normal;
 font-size: 1em;
 text-decoration: none;
 outline: none;
 border-bottom: 1px solid #def;
 color: #000000;
 cursor: pointer;
 margin: 0px;
 background-image: url('images/expand.gif');
 background-position: 99% 50%;
 background-repeat: no-repeat;
 padding-right: 5px;
 background-color: #9BE;
}

.accordion_toggle_active {
 color: #ffffff;
 font-weight: bolder;
 background-image: url('images/ns-expand.gif');
 background-color: #47B;
}

.accordion_content {
 background-color: #ffffff;
 overflow: auto;
 display: block;
}

.accordion_content ul {
 padding-left: 1em;
 margin: 0;
 padding-right: 0;
 padding-bottom: 0px;
 list-style-type: none
}

.accordion_content li {
 margin: auto;
 padding: 0px;
}

.highlight {
 background-color: #DDD;
}

And finally add a little JavaScript to make the magic happen:


    function  toggleAccordionSelect(event) {
        var image = event.target;
        var collapseIcon = "images/btn_dropdown-selected.png";
        var expandIcon = "images/btn_dropdown.png";

        if ($('accSelectOptions').style.display === 'none') {
            image.src = collapseIcon;
            image.alt = "Collapse List";
            image.title = "Collapse List";
            $('accSelectOptions').show();
        }
        else {
            image.src = expandIcon;
            image.alt = "Expand List";
            image.title = "Expand List";
            $('accSelectOptions').hide();
        }
    }

    function toggleHighlight(event) {
        var item = event.target;
        item.toggleClassName('highlight');
    }
    
    function selectAccordionOption(event) {
        var selectedOption = Event.element(event);

        // update the selection input field value to the selected display value
        $('accSelect').value = selectedOption.innerHTML;

        // internal value is stored as an attribute, do whatever you need to with it
        var realValue = selectedOption.getAttribute('value');
        
        // hide the accordion list
        toggleAccordionSelect({target: $('accSelectToggle')});       
    }
    

    var accordionSelect = new accordion('accSelectOptions', {
        classNames : {
            toggle : 'accordion_toggle',
            toggleActive : 'accordion_toggle_active',
            content : 'accordion_content'
            },
        onEvent : 'mousedown'
        });

    // By default, open first accordion in the drop down
    var accordionToggles = $$('#accSelectOptions .accordion_toggle');
    accordionSelect.activate(accordionToggles[0]);

    // register event observers        
    Event.observe('accSelectToggle', 'mousedown', toggleAccordionSelect);
    $$('#accSelectOptions .accordion_content li').each(function(accSelectOption) {
        Event.observe(accSelectOption, 'mousedown', selectAccordionOption);
        Event.observe(accSelectOption, 'mouseover', toggleHighlight);
        Event.observe(accSelectOption, 'mouseout', toggleHighlight);
    });

Aborting Ajax requests (for prototype.js)

2007-12-19T14:24:00.001-05:00

Sometimes your slick Ajax application may have submitted a request that you no longer care about and want to abort. For example, perhaps you've implemented a type-ahead feature and the user has now typed another character prior to the first results returning. Or perhaps you fetch values for other parts of a form based on user selections and the user changed their choice prior to the first response returning.

I was surprised to see that the prototype.js library does not include an abort method for its Ajax.Request object. So, here's my implementation of Ajax.Request.abort():


/**
 * Ajax.Request.abort
 * extend the prototype.js Ajax.Request object so that it supports an abort method
 */
Ajax.Request.prototype.abort = function() {
    // prevent and state change callbacks from being issued
    this.transport.onreadystatechange = Prototype.emptyFunction;
    // abort the XHR
    this.transport.abort();
    // update the request counter
    Ajax.activeRequestCount--;
};

To use this function, you need to keep a handle on the Ajax request you want to abort. So, somewhere in you code you'll have something like:


    var myAjaxRequest = new Ajax.Request(requestUrl, {[request options]});

If you want to abort that request, simply call:


    myAjaxRequest.abort();

Update - Feb. 22, 2008:

It was pointed out in the comments that the Ajax.activeRequestCount can occasionally become negative. I have been able to replicate that situation, while at the same time confirming that it does not consistently happen. This leads me to believe that it's most likely a timing issue such as the abort is issued after the response has already started to be received and/or processed so that both the response processing decrements the counter as well as the abort.

My personal work-around for this is to add these lines to the end of my onComplete handler:


if (Ajax.activeRequestCount < 0) {
    Ajax.activeRequestCount = 0;
}

I don't want to remove the counter decrement from the abort function or else cleanly aborted requests will leave the activeRequestCount > 0 when there are no real outstanding requests.

If anyone has a better solution, I'd be interested to hear from you.

Performance-based Web App Functionality

2007-12-13T11:36:00.000-05:00

In the development of some CPU intensive web applications, I've come to realize that sometimes I need to throttle down some of the features of the application in order to maintain good response times for a better user experience. So, I've added what I refer to as jsBogoMips to some of my applications.

The above example shows throttling of visual effects, but it can be used to throttle other things as well. For example, in the application I actually developed this for, while it does use script.aculo.us visual effects, what I really needed to be throttled was the generation of an SVG chart from an arbitrary amount data elements received in XML data. So, based on the jsBogoMips value, I control how many data points are charted.

If you're interested in some alterative JavaScript performance testing, you might also be interested in Celtic Kane's JavaScript Speed Test and Performance Tests for Opera 9.5.

Bishop Swap Puzzle

2007-10-02T12:31:00.000-04:00

As one final tribute to the 7th Guest chess puzzles, I've added the Bishop Swap Puzzle

GIVE IT A TRY!

Summary of Puzzle Experience

Each of these puzzles had unique problems which were fun to work out and gained in complexity (though each whole puzzle only took a couple hours to code, so they weren't terribly complex).

The 8 Queens Puzzle wasn't moving any pieces, so I could just put the queen wherever the user clicked. The only complexity was to check for conflicting queens in all directions and remove them. Of course, my initial goal wasn't to make an interactive game, but a solution generator so my wife's move selection strategy was key, but very simple to implement.

The Knight Puzzle added the animation for user moves which was more visually interesting. However, since there's only one open square, you don't have to worry about multiple moves for any given piece. The piece can either be moved to the open square or it can't. There were two interesting algorithms necessary for the knight puzzle. The first is pretty simple and is just the computation of valid "L" shaped moves which is done taking the absolute value of the differences of the coordinates of the piece to move and the blank square. If the absolute value of the differences is 1 & 2 (or 2 & 1), then it's valid.
The second algorithm is a little more interesting. It is how to determine if all the pieces are in the correct location. For this, I added a little weighting of the row and column indicies as follows:
- let the computedValue = (row * 2) + (column * 3)
- not done if:
  - any white knights have a computedValue > 10
  - any black knights have a computedValue < 10
  - any piece has a computedValue == 10
The following matrix demonstrates this:

y\x 0 1 2 3 4
0 0 3 6 9 12
1 2 5 8 11 14
2 4 7 10 13 16
3 6 9 12 15 18
4 8 11 14 17 20

The Bishop Puzzle added the potential of multiple moves for any given bishop selection. So, I had to keep track of what piece was selected, determine which possible moves were available, and when multiple moves are available, highlight them and allow the user to select one.

y\x	0	1	2	3	4
0	0	3	6	9	12
1	2	5	8	11	14
2	4	7	10	13	16
3	6	9	12	15	18
4	8	11	14	17	20

Knight Swap Puzzle

2007-09-27T10:08:00.007-04:00

I decided to write another 7th Guest inspired game, the Knight Swap game.

This time I added some animations from the Script.aculo.us library to make it a little more visually interesting.

GIVE IT A TRY!

Eight Queens Puzzle

2007-09-25T11:00:00.001-04:00

Recently, my wife decided to re-visit some of our old games and was playing The 7th Guest. Several of the puzzles in that games are chess based, and one is the Eight Queens Puzzle.

I decided it would be a fun and fairly simple task to build a JavaScript implementation of that game which would also attempt to solve it.

My first pass merely randomly placed queens on the board (and subsequently removed the conflicting pieces) as a brut force method to stumble upon the solution. I let that version run all day and it never found a solution -- which according to the Wikipedia entry, there are 92 of.

Then I added the logic she used to solve the puzzle which was to only add a new queen if it either didn't remove any others, or only removed one other queen. That technique worked surprisingly well usually only requires the program to take from the 10s to the low 100s of attempts before it has a solution and it much less complex that the solution described in the Wikipedia entry.

In only took a couple hours to build, and in the end, I have a very simple program which will allow you to try your hand at solving the puzzle yourself, or can quickly figure out a solution from whatever you have on the board when you give up.

GIVE IT A TRY!

Tips for new Samsung Sync Users

2007-08-22T16:07:00.002-04:00

As I mentioned earlier, I recently acquired a Samsung A707 which is provided by at&t/Cingular. In this article I'm going to recommend some software and other customizations to make it more useful.

Access high-speed Internet everywhere
I described this in my earlier article, Enjoying High Speed Wireless Connectivity Anywhere, so I won't do so again, but the important tip from that article is to download at&t Communications Manager to connect your laptop to the Internet via Bluetooth or USB.
Easily manage address book, calendar, email, multimedia, and more
You may think you need to buy a USB cable in order to connect with your phone and synchronize your address book, appointments, music library, etc., but the good news is that you don't! If you're laptop is equipped with Bluetooth (like mine is), simply download Samsung PC Studio (it's free!). It will run through a simple wizard to connect to your phone either via Bluetooth or USB (it also supports Infrared and Serial connections, but since the phone doesn't, that doesn't help).

Once you're connected you can manually manage your address book, email, etc. or you can synchronize them with Outlook/Outlook Express. You can use this application to configure an Internet connection as well, but it's easier with the at&t application (see tip 1).
The "Manage Multimedia Files" option allows you to copy music, photos, and videos to/from the phone -- including Podcasts.
Add useful apps to your phone
- Google Maps
  Other than making phone calls, one of the most useful thing a cell phone can do for you is help you find businesses while on the road. Google Maps is a "must have" application for this. Not only can if find local businesses by name or keywords, with a click of a button you can call them You can get directions to them including step-by-step instructions to get you there. It also adds real-time traffic information, can display satellite imagery, and provide navigation to move around the map and zoom in/out.
- GMail
  Yes, the Sync comes with a mobile email program which connects to Yahoo!, AOL, Windows Live Mail (aka Hotmail), Juno, NetZero, and more. However, the one service it lacks it my preference, GMail. Fortunately, Google has provided their own application which can be installed on your phone to access GMail accounts. Unfortunately, I haven't found anyway to make it the default email program so that your phone will tell you when you get new mail like it will for the other email types.
- Opera Mini
  The built in browser works fine for WAP/WML content, but when you need a more powerful browser, Opera Mini is the way to go. If you have iPhone envy and want a browser like it demonstrates showing the whole page and zooming in on pertinent sections, try the beta of version 4 which can do that too.
- mWebPlayer
  The Sync includes "XM Radio Mobile" which allows you to stream XM Radio content to your phone. The only problem is, you have to pay for the service. As an alternative, mWebPlayer will stream radio stations off the Internet (for free!). The free version of mWebPlayer doesn't save changes you make to the station list, however, since you can load your Live365.com favorites, it's quick and easy to just load that list each time you start the application.
- Instant Messaging
  The Sync includes an instant messaging application which can connect to either AIM, MSN, or Yahoo! However, it has two drawbacks. You can only connect to one at a time, and it uses your text messaging count for each message (which when you have unlimited data but limited text messages is rather stupid). Fortunately, there are a large number of IM clients out there which can connect to multiple IM communities at once and don't waste your messaging total. The biggest drawback is that, like the email, when you're using one of these apps you won't get notified when you're not using the phone and you get a message. You have to be running the application at the time. Since there are lots to choose from, I'm not specifying a particular one since I haven't evaluated them all, just follow the link and pick the one that sounds best to you.
- Games
  There's going to be plenty of times when you're waiting in some lobby and need something to do to pass the time. Here are a few staple games that are both free and well done.
  - Backgammon
    This is a nice implementation of an old favorite. The LITE version is free and fully functional except that you can't play against other people online.
  - Chess
    Another nice (and free) rendition of a timeless classic.
  - Tetris
    A good way to waste time.
Add useful URLs to add to your browser favorites
- Google
  Who can surf the net without Google?
- YouTube
  You too can watch everyone's homevideos on your cell phone (who needs an iPhone? -- the Sync can toggle between portrait and landscape too!)
- TV Guide
  Who wants to flip through a paper guide and translate it to the correct station number? Get a customized list of what's on right now for your TV provider.
- Bible
  Don't want to carry the Bible with you to church, no problem, get it online.
- Weather (NOAA)
  I happen to live in a hurricane zone, so when a hurricane it coming, I want to be able to get up-to-date weather reports.
- Java Applications
  Many of those aforementioned Java application, and many more can be downloaded from GetJar.com
- Palm Mobile Portal
  True, this isn't a Palm, but Palm does have a nice portal site for other mobile sites.
Free 411 Information
Add a contact to your address book for 1-800-GOOG-411 (1-800-466-4411) to get local business information.
Customize appearance
Using pictures you take or upload with PC Studio (tip 2), be sure to set the "Caller ID" field for your address book contacts to pictures of them which will show up when they call. Until you get a picture of your friend, the Dilbert characters work nicely. Also, customize your ring tone and wallpaper. To the right is a picture I took at Clearwater Beach (Florida) which has been resized to fit the screen (240x320) in case you don't have a picture of your own.

Automatically Minimize (Minify) JavaScript

2007-08-17T15:39:00.000-04:00

One of the 13 Simple Rules for Speeding Up Your Website is to Minify your JavaScript.

Sidenote: These rules can be easily checked using the YSlow add-on to Firebug.

The recommended tool to minify your JavaScript is JSMin. However, the default use of JSMin is to minimize your JavaScript in a separate step before you deploy your code and then have two JavaScript files - the original JavaScript you use to develop the code and the production "minified" version. For me the problem with that is the fact you have two versions to keep track of and keep in sync. Plus before you deploy your code, you need to make sure all your HTML pages use the minified filename not the original version.

Fortunately, there's a port of JSMin to PHP which allows you minify your JavaScript on the fly, but the usage instructions make it appear that you need to change your script source to point to separate PHP file for each JavaScript, or have a single PHP with all your JavaScript files hard-coded in it -- which is a nice option to get multiple JavaScript files with a single request.

What I'm going to show in this post is how to use jsmin-php to create a filter on your server so that all your JavaScript files are transparently minified as your retrieve them.

First off, download the current version of jsmin-php and save it in your directory. As the current version at the time of this writing is jsmin-1.1.0.php, I'll assume that is the file name.

Next, save the script below as jsmin.php:


<?php
// PHP filter to invoke JSMin on all JavaScript files
// see http://code.google.com/p/jsmin-php/
require_once('jsmin-1.1.0.php');

$js_file = pathinfo($_SERVER['ORIG_PATH_INFO']);
$js_path = substr($js_file['dirname'], 11);
$js_file = $js_file['basename'];

$charset = "utf-8";
$mime = "text/javascript";

header("Content-Type: $mime;charset=$charset");

// Output a minified version of JavaScript file
if (file_exists($js_file)) {
echo JSMin::minify(file_get_contents($js_file));
} else {
echo JSMin::minify(file_get_contents($js_path . '/' . $js_file));
}

?>

Note: If you change the name of this script, you'll probably need to change the 11 on the $js_path definition. That rips the script name (/jsmin.php/) off the beginning of the incoming path on the request so I can use a relative path to find scripts in a subdirectory. It should be the length of the script name plus 2 (for the leading and trailing '/'s).

Now, update your .htaccess file and add the lines:


# make all JavaScript files be minimized via JSMin
AddHandler jsmin .js
Action jsmin /jsmin.php

That should be it! If you fetch a JavaScript file from your server, it should now be minified.

Here are a few quick additions you could add to make YSlow happy.

At the beginning of jsmin.php, adding the line:


ob_start("ob_gzhandler");

should GZIP the output for you.

Also, where the Content-Type header is set, adding the following lines will add an expiration of 49 hours (needs to be > 48 hours to by sufficiently "far future" to make YSlow happy. If you really want to cut it close you could use (60 * 60 * 48) + 1):


$offset = 60 * 60 * 49;
$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
header($ExpStr);

Enjoying High-Speed Wireless Connectivity Anywhere

2007-08-15T15:55:00.001-04:00

In the interest of providing other technology posts other than just JavaScript code snippets, I thought I'd summarize my experience using at&t's 3G+ network. More than basic 3G, I actually get to utilize their HSDPA network here in Tampa where I live.

What's the difference? Well, according to the Wikipedia sources I linked to above, the standard 3G allows the transmission of 384 kbit/s for mobile systems whereas current HSDPA deployments support down-link speeds of 1.8, 3.6, 7.2 and 14.4 Mbit/s.

I recently acquired a Samsung A707 (aka Samsung Sync) which is a considerable improvement over my prior Motorola V180 -- though the V180 served me well as a basic phone, and even survived a fall into a river. I don't intend to review the A707 as there are plenty of other reviews out there (1, 2, 3, 4, 5), nor do I care to discuss the merits of one carrier's wireless technology over another's (ex HSDPA vs. EV-DO). All I want to talk about is my experience utilizing my phone to access the internet, particularly on my laptop and PocketPC through my phone, and what kind of performance I've seen.

Once I got the phone, I signed up for a MEdia Max bundle which gave me unlimited data on the phone. I plan on doing LOTS of data with the phone, so I can't have some sort of puny 1MB or 5MB limit.

To see what kind of bandwidth I could get on the cell phone, I pointed my Opera Mini browser to The Speed Test* and got results such as:

In the interest of full disclosure, that was one of the higher scores, however several other tests were in the same vicinity (ex. 2801.8kbps) so it could not be dismissed as an anomaly. The lower end of the scores were around 1913.5kbps. These are all respectable scores and inline with the statement that the initial HSDPA networks deployments support 3.6 Mbit/s peak with phase one deployments to eventually reach achieve peak data rates of 14.4 Mbit/s. Who says internet access on cell phones is slow!?

Now, it's all well and good that the phone can attain that high bandwidth and it certainly makes streaming videos off of YouTube or at&t's Cellular Video service to your cell phone work smoothly, but at some point, you just want a full size screen and keyboard for your internet access.

The A707 doesn't come with a USB cable, so I utilized its built-in Bluetooth. To me, the Bluetooth is actually nicer since I can leave myphone in my pocket or in my belt click and still connect your laptop to it. Plus, I can connect my laptop and PocketPC to it simultaneously which is nice too. However, it does drain the battery faster.

To use the phone for internet access via Bluetooth, you need to pair it to your laptop (or other Bluetooth enabled device). So, enable Bluetooth in the phone settings. I won't provide my own instructions for this as at&t has a nice tutorial online. Then you need to pair your phone and laptop together. Again, at&t provides vendor specific instructions for this. at&t has made a simple client called at&t Communication Manager which allows you to easily connect with the phone. Setup instructions are provided on the download page. The only thing I had to do special was manually select the GSM device (see Tools -> Settings... -> GSM -> Device Selection and select the Bluetooth Modem that was setup for me when I did the Bluetooth pairing). Once the Communication Manager finds your device, you simply click on the "Connect" button and you're in business.

My laptop is a few years old, so I believe it's built in Bluetooth is version 1, not version 2 which significantly limits it's bandwidth potential (see Wikipedia entry on Bluetooth). By accessing the internet via my cell phone via Bluetooth, I got speeds varying from around 274kbps to 347kbps.

These results are significantly reduced from the cell phone alone, though still tolerable for common internet tasks (reading email, viewing typical web pages, etc).

The results for my laptop are comparable to the results I saw on my Dell Axim x51v as well. I had to do a little more manual configuration to get the Axim connected to the internet through the phone, but once I got it working, I got results such as:

Just for comparison, the bandwidth I got at a local WiFi hotspot was around 1Mbps:

So the conclusion is that if WiFi is available, it's still the faster option (at least for me without a USB connection nor Bluetooth 2.0 speeds), but having the ability to have broadband speed internet access ANYWHERE I go (in the city) is certainly a convenience! And possibly it's more secure if you're in a public hotpost with packet sniffers lurking around.

I'd be interested to here if anyone has similar experience but using Bluetooth 2.0 instead. Is it faster? Is a USB connection faster?

*Note: I also verified my laptop speed results with Speedtest.net which has a really nice interface. However, since it's Flash based, it doesn't run in the cell phone browser.

Update - December 19, 2007:

I have replaced my laptop and am now running Red Hat Enterprise Linux on my new one. Therefore, I could no longer use the at&t Communications Manager to make a connection. Fortunately, I found these instructions for How to use a Bluetooth phone as [a] modem in Linux which were very helpful.

Synthesizing Events in JavaScript

2007-08-14T09:50:00.000-04:00

According to JavaScript: The Definitive Guide (4th ed), section 19.2.9 on Synthesizing Events, it says,

Unfortunately, at the time of this writing, the synthetic event API is not supported by Netscape 6, nor by the current version of Mozilla

But, it does work in the current version of Firefox (and IE). I had a situation where I needed to simulate events, so I wrote the following function to make it simple:


// simulateEvent
//
// simulate a user action
//
function simulateEvent(eventType, targetElement) {
    var event;
    targetElement = $(targetElement);
    
    if (targetElement) {
     // check for IE
     if (window.ActiveXObject) {
         event = document.createEventObject();
         targetElement.fireEvent("on"+eventType,event);
     } else {
         switch (eventType) {
             case "abort":
             case "blur":
             case "change":
             case "error":
             case "focus":
             case "load":
             case "reset":
             case "resize":
             case "scroll":
             case "select":
             case "submit":
             case "unload":
                 event = document.createEvent("HTMLEvents");
                 event.initEvent(eventType, "true", "true");
                 break;
             case "click":
             case "mousedown":
             case "mousemove":
             case "mouseout":
             case "mouseover":
             case "mouseup":
                 event = document.createEvent("MouseEvents");
                 event.initMouseEvent(eventType, true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
                 break;
         }
         targetElement.dispatchEvent(event);
     }
    }
};

Top Web Technologies

2007-03-08T13:17:00.000-05:00

Jim Rapoza of eWeek compiled his list of the Top Web Technologies of All Time as a collection of slides.

Here is his list:

XML
HTML
Netscape Navigator
HTTP
Apache
NCSA Mosaic
CERN httpd
Internet Explorer 3
NCSA httpd
Firefox
SSL
ViolaWWW
WAIS
CGI
Internet Information Server
Squid
Java
HotMetal
Flash
PHP
Dreamweaver
RSS
WebTrends
Blogger
PlaceWare
Lynx
Perl

While I would definitely concur on many items on the list, there are others that I would disagree with or substitute.

Regarding the standardized protocols and languages: XML, HTML, HTTP, RSS, SSL, Java, PHP, Perl, RSS, and even Flash, I have no objections. They are certainly the foundations of the web. However, I do think he's missing a biggie of JavaScript which, while it had a dubious start and I avoided it for quite a while, is shaping out to be the scripting language of Web 2.0.

Regarding his list of browsers: NCSA Mosaic, Netscape Navigator, and Internet Explorer, Firefox? Absolutely. ViolaWWW? I don't think so. Yes, it came out before NCSA Mosaic, but Mosaic was really more responsible for bringing the WWW to the masses, and if you really want to show the start of the web browsers, why not point to the actual original browser named WorldWideWeb by Tim Berners-Lee? Spyglass? Come on, it's just a commercial re-branding of NCSA Moasic. Yes, it became Internet Explorer, but you could just as well say NCSA Moasic became Internet Explorer and not bother to mention this interim step. Similarly, Netscape was first called Mosaic Netscape, so do we need to list that too? Is wasn't really significant in itself. Lynx? Sure, it comes in handy from time to time, but I don't think it's a top web technology. Opera? It's a nice browser and all, but I don't think it's ever made that much of an impact overall. Yes, it introduced some new ideas like mouse gestures, but I just don't think it was that significant. Why not Safari for the Mac, or Galleon or Konqueor on Linux? Same thing. They're nice, but more of an also ran than a top web technology.

Then we have our web servers: CERN httpd and NCSA httpd which begot Apache, no question. IIS? I guess in some circles, but Apache is still significantly more important. If it's on his list because it provides the .Net platform, what about Tomcat, JBoss, or other commercial products like WebSphere and BEA for J2EE? I don't think I'd put IIS on the list, but if I did, I think I'd be remiss not to include Tomcat or some of the other Java application servers.

Next are HTML editors HotMetal and DreamWeaver. Personally, I think the Netscape/Mozilla Composer and/or FrontPage had a wider impact toward bringing HTML editing and composition to the masses originally. Jim makes the comment that, nearly all serious Web developers now use Dreamweaver, but I know plenty of serious web developers who don't use Dreamweaver so I think that was a personal bias on his part.

Finally he have various web services like WAIS and Blogger. WAIS had it's place as a search technology (though more familiarly recognized as Gopher), but I think Yahoo and subsequently Google had a more significant impact in organizing the Web to make it useful to the masses. It's hard to classify it as a Web technology when Gopher/WAIS was essentially replaced by the web. Blogger is certainly important and can stay on the list, but if it is, I think some other services should also be on the list. For example, Yahoo's provision for free email (as well as Hotmail, GMail, and others) was more important toward getting people to use the web for online services. Also, services like MySpace are more significant toward advancing the collaboration ideas of Web 2.0. And is PlaceWare really more significant than all the other similar solutions? Why not CUSeeMe or NetMeeting?

Also, what about other key technologies that make the web work like databases (MySQL anyone?).

Just my thoughts. Any other suggestions?

The Truth about Global Warming?

2007-03-06T17:47:00.000-05:00

A local talk show personality, Todd Schnitt, has compiled a list of articles by respected scientists who dispute global warming.

It is virtually shoved down our throats that scientists are in complete agreement about global warming. Al Gore and the media assure us that there is an absolute consensus in the scientific community that humans are heating the planet and irreversible damage is looming as a result of man's carbon output. How about some intellectual honesty? Reasonable debate?
-- SchnittShow.com

It's nice to hear the other side of the story.

Simple draggable HTML using prototype.js

2007-03-01T14:19:00.000-05:00

I know there are plenty of JavaScript packages out there to allow you to create draggable elements on your HTML page, but to me, most of them appear to be overly complicated for a simple function and are often part of a larger framework that you may not need.

The solution I'm providing today does depends on the prototype.js package (I'm using version 1.5 currently) which allows the code size to stay smaller.

Here's how to make any HTML element draggable in 5 easy steps.

Add the class of draggable to whatever you want to move. Actually, you can use any class identifier you want, but draggable is what I'm looking for in my code.

Give your draggable element a position style (position: absolute; or position: relative;) and an initial top and left value. Generally, you'd want to put this in your styles in an external CSS with the draggable class, but the top and left values need to be set as an attribute in the HTML. Hint: setting the position to relative with the top and left values set to 0px will allow it to start located where it normally would be in the browser. You'll probably want to give it a higher z-index and solid background-color as well, but that's up to you.

Include the 3 drag event handling functions I'll describe below in your code somewhere

Have fun dragging window elements around.

The event handlers

Before you can use the following functions, you need to define some variables to hold some information during the drag. If you make the subsequent functions part of another containing object, you can simply prepend all occurrences of these variables in the functions with this. and they will be stored in the containing object instead.


var dragObj;
var cursorStartX;
var cursorStartY;
var elementStartX;
var elementStartY;
var dragGofn;
var dragStopfn;

startDrag

startDrag will initialize a mouse drag event. It captures the initial location of the mouse when beginning the drag in order to calculate movement later. It also captures the current coordinates of the dragged element for correct positioning as the location of the mouse are most likely not the origin of the element being dragged. Finally, it associates the additional event observers to the element to capture the mouse movement (onmousemove) and release of the mouse button (onmouseup).


function startDrag(event) { 
    dragObj = Event.element(event);
    // if the target of the event is not a "draggable" element, then search
    // through it's parents for an element that is draggable.
    // if we can't find a draggable element before reaching the root document
    // element, then bail out
    while (!Element.hasClassName(dragObj,"draggable")) {
         dragObj = $(dragObj).up('.draggable');
    }
    cursorStartX = Event.pointerX(event);
    cursorStartY = Event.pointerY(event);
    elementStartX = parseInt(dragObj.style.left, 10);
    elementStartY = parseInt(dragObj.style.top, 10);
    
    Event.observe(dragObj, 'mousemove', dragGofn);
    Event.observe(dragObj, 'mouseup', dragStopfn);
}

dragGo

Once the drag event has been initiated by the startDrag function, the dragGo function will update the location of the element being dragged so that it moves around the screen with the mouse.


function dragGo(event) { 

    var x, y;
    x = Event.pointerX(event);
    y = Event.pointerY(event);

    // move the target object
    dragObj.style.left = (x - cursorStartX + elementStartX) + "px";
    dragObj.style.top = (y - cursorStartY + elementStartY) + "px";
    
    Event.stop(event);
}

dragStop

Once the user has release the mouse button, we need to stop observing the mouse movements, so the dragStop function will un-register the event handlers.


function dragStop(event) { 
    // Stop capturing mousemove and mouseup events.
    Event.stopObserving(dragObj, 'mousemove', dragGofn);
    Event.stopObserving(dragObj, 'mouseup', dragStopfn);
    dragObj = null;

    Event.stop(event);
}

Registering the `draggable` elements

You're almost ready to start moving items on the screen, but first you have to register all your draggable elements to the startDrag function so that they will be notified of the drag events. So, we utilize prototype's element-by-classname selector to find all the draggable elements and associate the event listener to them.

Note: in order to un-register the event listeners, you have to have the handle to the event listener you used to register it originally. Thus, we used the variables dragGofn and dragStopfn to register and un-register the event listeners. These variables are defined here during the original event registration.


function registerEvents() {
    dragGofn = dragGo.bindAsEventListener();
    dragStopfn = dragStop.bindAsEventListener();
    
    $$(".draggable").each(function(draggableElem) {
        Event.observe(draggableElem, 'mousedown', startDrag.bindAsEventListener(), true);
    });
    
}

Note: the final true on the Event.observe tells prototype to request capturing instead of bubbling. This is necessary for this function to work in Safari (see Kir's blog)

Adding a Processing indicator with Prototype.js

2007-02-26T13:49:00.000-05:00

Here's a simple method to add a Processing/Loading/Working indicator to indicate when an Ajax request is being processed with prototype.js.

First, define a hidden div (or other preferred HTML element) which will be displayed to indicate that some background processing is going on. Mine happens to look like:


<div id="loading" style="display:none">Loading...
<div style="background-color: white; position: absolute; top: 0px; right: 0px; width: 5px; height: 5px; cursor:pointer;"
 onclick="$('loading').hide()"></div>
</div>

In my code, I added another div on the upper right corner which I can click to close this indicator in case something goes wrong with the Ajax event handling which I'll provide in a moment.

I then added a little CSS magic to make it look the way I wanted. In my case, I want the indicator to be on top of everything, centered on the page, with a processing image () on the right side of the text. The background color is white with a double gray border and large, bold font.


#loading {
 z-index: 100;
 position: absolute;
 top: 40%;
 left: 40%;
 background-image: url("../images/progress-running.gif");
 background-repeat: no-repeat;
 background-position: 5px;
 background-color: white;
 padding-left: 25px;
 padding-top: 8px;
 border-style: double;
 border-color: #c0c0c0;
 width: 120px;
 height: 30px;
 font-size: 1.5em;
 font-weight: bolder;
}

Ok, so now I have the indicator I want to popup. This can be tailored to your preferences. Now, you simply tell prototype to display it whenever it is processing an Ajax request. This is done by registering some event listeners to the prototype Ajax class.


  // register event listeners on the Ajax requests to show/hide the processing indicator
 Ajax.Responders.register({
    onCreate: function() {
  if (Ajax.activeRequestCount === 1) {
    $('loading').show();
   }
    },
    onComplete: function() {
   if (Ajax.activeRequestCount === 0) {
    $('loading').hide();
   }
    }
 });

That's it! Now you should get an indicator whenever you issue an Ajax request that goes away whenever the processing is done.

Cookies and Flash for local storage

2007-02-23T11:07:00.000-05:00

In previous posts I provided code for using cookies in JavaScript. I've now enhanced that code to utilize the flash storage mechanism which was described by Christoph Khouri, however his page seems to be down currently, so I'll provide the files you need. Note: this is the same technique used by the Dojo Storage module, without the need for Dojo which adds extra overhead costs.

Using flash storage alleviates the 4k size limit of cookies and initially provides 100k of storage seamlessly and can be increased to any size by the user. It also eliminates unnecessary network traffic as all the cookies are transmitted to the server all the time, and makes it harder for prying eyes to see what's being stored as vs browsing the cookies in the browser.

In order to use the flash storage, first, download flashStorage.zip which came from Christoph Khouri's site. Next, download my current cookies.js file.

Now, include the flashStorage JavaScript and my cookies.js JavaScript in the header of your HTML page:


<script type="text/javascript" src="jscript/flashStorage/swfobject.js">lt;script>
<script type="text/javascript" src="jscript/flashStorage/flashStorage.js"><script>
<script type="text/javascript" src="jscript/cookies.js"></script>

Next, somewhere in the body your page add the following code:


<div style="float: right;" id="storageHolder">
<embed type="application/x-shockwave-flash"
src="jscript/flashStorage/storage.swf" id="storageMovie" name="storageMovie" bgcolor="#ffffff" quality="high"
swliveconnect="true" wmode="transparent" height="137" width="214" />
</div>
<script type="text/javascript">
 var so = new SWFObject("jscript/flashStorage/storage.swf", "storageMovie", "50", "10", "8", "#ffffff");
 so.addParam("swLiveConnect", "true");
 so.addParam("wmode", "transparent");
 so.write("storageHolder");

//Initialize the flash storage by passing the id of the flash movie
Storage.init("storageMovie");
</script>

That's it! Now whenever you create a cookie like Cookies.create("myCookie", "myValue") it will actually store that in the flash storage instead. However, if you don't wish to include the Flash storage component, it will default to store the value in a browser cookie instead.

~~Maybe sometime in the future I'll add detection to see if the Flash plugin is installed in addition to the Storage object and default to standard cookies if Flash isn't installed.~~
Update: I've added a check for the Flash plugin being installed as a pre-requisite to using the Flash storage object in addition to the check for the JavaScript code/object being included. FYI, my check for Flash for those needing to do the same thing is:


var hasFlash = (navigator.plugins &&
              (navigator.plugins["Shockwave Flash"] || navigator.plugins["Shockwave Flash 2.0"])) ||
             (navigator.mimeTypes &&
              navigator.mimeTypes['application/x-shockwave-flash']);

Ajax Cross-Domain Issue

2007-02-23T09:15:00.001-05:00

A common solution to the XMLHttpRequest cross-domain issue (aka cross site scripting or XSS), where you can only communicate with the originating domain, is to configure Apache to use either mod_proxy or mod_rewrite for URL rewriting and a pass-through proxy.

With Apache you need to enable the proxy functions (configure --enable-proxy). If you want to handle it all with mod_proxy, then define you proxy settings in httpd.conf such as:


ProxyPass /doExt http://external.com/doAction
ProxyPassReverse /doExt http://external.com/doAction

If you want to use mod_rewrite then turn on mod_rewrite in httpd.conf or .htaccess with RewriteEngine on and define your rewriting rules such as:


RewriteRule ^/doExt$ http://external.com/doAction [P]

Then when you post to your server via /doExt, Apache will pass the request on to the external site.

That's all well and good if you have access to the Apache configuration or the server is already configured with the proper modules. But, when your on a hosted environment, that's not always feasible. Another solution would be to provide a proxy servlet to make the remote request for you and return the result. What I am providing is in Java and PHP, but it could be written you language of choice.

Java proxy

The following servlet class will invoke some external URL on behalf of the original request and return the result from the external request as the result of the original local request. Note: In the following code I hard-coded the real destination. However, it could be determined from a parameter in the original request just as easily.


import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.PrintWriter;
import java.net.URL;
import java.util.Enumeration;

/**
 * This is a simply proxy class in order to bypass AJAX security contraints.
 *
 */

public class ServerProxy extends javax.servlet.http.HttpServlet {

        private static final long serialVersionUID = 1L;

        public void doGet(javax.servlet.http.HttpServletRequest request,
                        javax.servlet.http.HttpServletResponse response)
                        throws javax.servlet.ServletException, java.io.IOException {
                performTask(request, response);
        }

        public void doPost(javax.servlet.http.HttpServletRequest request,
                        javax.servlet.http.HttpServletResponse response)
                        throws javax.servlet.ServletException, java.io.IOException {
                performTask(request, response);
        }

        public void performTask(javax.servlet.http.HttpServletRequest request,
                        javax.servlet.http.HttpServletResponse response)
                        throws javax.servlet.ServletException, java.io.IOException {

                // Get the external URL to invoke
                String realUrl = "http://www.external.com";

                // Copy the request parameters from the original request
                Enumeration paramNames = request.getParameterNames();
                String paramName;
                while (paramNames.hasMoreElements()) {
                        paramName = (String) paramNames.nextElement();
                        realUrl = realUrl.concat(paramName + "="
                                        + request.getParameter(paramName));
                        if (paramNames.hasMoreElements()) {
                                realUrl = realUrl.concat("&");
                        }
                }

                // real URL will be returning XML data
                response.setContentType("text/xml");
                PrintWriter out = response.getWriter();

                // invoke the real URL and copy the result into the response
                // for the original request
                URL real = new URL(realUrl);
                BufferedReader in = new BufferedReader(
                   new InputStreamReader(real.openStream()));
                String inputLine;
                while ((inputLine = in.readLine()) != null)
                        out.println(inputLine);
                in.close();

                return;
        }

}

PHP proxy

Here is a similar solution using PHP:


$remoteServer = "http://www.external.com";
$path = $_GET[”path”];
$proxyTarget = $remoteServer.$path;
$connection = curl_init($proxyTarget);
curl_setopt($connection, CURLOPT_HEADER, false);
curl_setopt($connection, CURLOPT_RETURNTRANSFER, true);
$data = curl_exec($connection);
curl_close($connection);
header(”Content-Type: text/xml”);
echo $data;

Google Apps Premier Edition, a good thing?

2007-02-23T08:50:00.000-05:00

I see on Google's Blog that they are announcing Google Apps Premier Edition which is a collection of the existing Google Apps (Gmail, Google Talk, Google Calendar, Page Creator, and Google Docs & Spreedsheets) which have additional collaboration features, APIs and support for which they will charge $50/yr per user.

I certainly think Google's apps are very useful, of high quality, and worthy of compensation and they certainly offer good service with a 99.9 percent uptime service-level agreement in which customers will receive credits for downtime. However, the reason I and so many others use Google apps is because they are free so I hope this is not a sign of things to come. In the blog entry for this announcement they say,

Google Apps also won't forget its roots anytime soon. The Standard and Education Editions will continue to be offered for free...

It's the "anytime soon" clause that causes me apprehension. Does that infer that there is a future plan to charge for their services? I've been migrating to Google more and more, I don't want to go through the trouble of migrating somewhere else.

Erasing all your cookies

2007-01-15T14:49:00.000-05:00

In a previous post I provided some [non-original] code to do basic cookie manipulation in JavaScript. Well, if you're now using cookies to save a whole bunch of user settings and preferences for your web application, you may want to provide an option to let users clear all their saved settings (or perhaps just provide a hidden hot-spot so you can clear your settings for testing purposes which is why I needed this function).

You could keep track of all your cookie names and call the eraseCookie function repeatedly yourself for each cookie. Or, you could name all your cookies with a common prefix for your whole application and use the following function to clear them all out for you.


function eraseCookiesStartingWith(prefix) {
 var allCookies = document.cookie.split(';');
 for(var i=0;i < allCookies.length;i++) {
  var aCookie = allCookies[i];
  // remove any whitespace from start of cookie name
  while (aCookie.charAt(0)==' ') aCookie = aCookie.substring(1,aCookie.length);
  var aCookieName = (aCookie.split('='))[0];
  if (aCookie.indexOf(prefix) == 0) {
   createCookie(aCookieName,"",-1);
  }
 }
}

Why is sliced bread such a great thing?

2006-11-27T11:00:00.000-05:00

I happened to be pondering why everything is compared to sliced bread (ie. "That's the greatest thing since sliced bread"), so I looked around a little and found this article to justify why everything is the greatest thing since sliced bread:

"Sliced bread was the culmination of a century of technological innovation."
-- http://www.engineerguy.com/comm/4263.htm

Using XML, XPath, and XSLT with JavaScript

2006-11-08T16:00:00.002-05:00

There are several JavaScript XML libraries available to try to provide a cross-browser XML library. I've previously cited zXML in my Inline SVG article, there's also Sarissa and XML for <Script> and I'm sure others.

However, when I started using them I discovered various problems and limitations with them for what I needed to do. So, I decided to write my own cross-browser XML routines. I wanted an XML library that was as lightweight as possible, doing just what I needed and utilizing as much of the built in browser capabilities as possible.

In this article, I will first present a simple XML class which just holds the XML DOM object returned from an AJAX request and provides functions to get and change node values based on XPaths. Secondly, I will give a simple XSLT class to preform XSL Transformations.

The complete code for the XML and XSL library is available here

XML

First off is the constructor which determined if we will be using IE (ActiveX) functions or W3C standard functions for XML manipulation and either stores the XML DOM returned as the responseXML from an XMLHttpRequest(XHR) or creates an empty DOM object for later manipulation.

//
// XML
//
function XML(xmlDom) {
this.isIE = window.ActiveXObject;
if (xmlDom != null) {
 this.xmlDom = xmlDom;
} else {
 // create an empty document
 if (this.isIE) {
    Try.these (
       function() { axDom = new ActiveXObject("MSXML2.DOMDocument.5.0"); },
       function() { axDom = new ActiveXObject("MSXML2.DOMDocument.4.0"); },
       function() { axDom = new ActiveXObject("MSXML2.DOMDocument.3.0"); },
       function() { axDom = new ActiveXObject("MSXML2.DOMDocument"); },
       function() { axDom = new ActiveXObject("Microsoft.XmlDom"); }
    );
    this.xmlDom = axDom;
 } else {
    this.xmlDom = document.implementation.createDocument("", "", null);
 }
}
};

In case you're not getting the XML data from an XHR response, I also provided a load function to load an XML file from an URL.

// load
//
// Loads an XML file from an URL
XML.prototype.load = function(url) {
 this.xmlDom.async = false;
 this.xmlDom.load(url);
};

Next, I want to be able to find a single node in the XML DOM based on an XPath. The getNode function will do that for me.

// getNode
//
// get a single node from the XML DOM using the XPath
XML.prototype.getNode = function(xpath) {
 if (this.isIE) {
    var result = this.xmlDom.selectSingleNode(xpath);
 } else {
    var evaluator = new XPathEvaluator();
    var result = evaluator.evaluate(xpath, this.xmlDom, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
 }
 return result;
};

More often, I don't need the actual DOM node object, but the value of that node, so I provide the getNodeValue a function to get the value of a node.

// getNodeValue
//
// get the value of a the element specified by the XPath in the XML DOM
XML.prototype.getNodeValue = function(xpath) {
 var value = null;
 try {
    var node = this.getNode(xpath);

    if (this.isIE &&amp; node) {
       value = node.text;
    } else if (!this.isIE && node.singleNodeValue) {
       value = node.singleNodeValue.textContent;
    }
 } catch (e) {}

 return value;
};

If you're just looking for a particular node/value, the previous functions are fine, but more often you need a group of node or node values (ex. all the book titles). So, the full JavaScript file also contains corresponding functions to get multiple nodes (getNodes) and node values as an array (getNodeValues).

At some point, you'll probably want to access this XML DOM as XML data (string), so we need a function to serialize the XML from the DOM to a String. The getNodeAsXml function will do that for you. If you pass in the root XPath ("/") it will serialize the complete XML file. Also, the included prettyPrintXml function can be used to escape the HTML characters.

// getNodeAsXml
//
// get the XML contents of a node specified by the XPath
XML.prototype.getNodeAsXml = function(xpath) {
 var str = null;
 var aNode = this.getNode(xpath);
 try {
    if (this.isIE) {
       str = aNode.xml;
    } else {
       var serializer = new XMLSerializer();
       str = serializer.serializeToString(aNode.singleNodeValue);
    }
 } catch (e) {
    str = "ERROR: No such node in XML";
 }
 return str;
};

So far, we've only read the XML data we received. But we may also want to change the contents of the XML. So, here are the functions necessary to change existing node values (updateNodeValue), add new nodes/values (insertNode), and delete existing nodes (removeNode).

Note: the XPaths used for node insertions cannot be overly complex as I wanted to keep this library simple.

// updateNodeValue
//
// update a specific element value in the XML DOM
XML.prototype.updateNodeValue = function(xpath, newvalue) {
 var node = this.getNode(xpath);
 var changeMade = false;
 newvalue = newvalue.trim();

 if (this.isIE &&amp; node) {
    if (node.text != newvalue) {
       node.text = newvalue;
       changeMade = true;
    }
 } else if (!this.isIE && node.singleNodeValue) {
    if (node.singleNodeValue.textContent != newvalue) {
       node.singleNodeValue.textContent = newvalue;
       changeMade = true;
    }
 } else {
    if (newvalue.length > 0) {
       this.insertNode(xpath);
       changeMade = this.updateNodeValue(xpath, newvalue);
    }
 }

 return changeMade;
};

// insertNode
//
// insert a new element (node) into the XML document based on the XPath
XML.prototype.insertNode = function(xpath) {
 var xpathComponents = xpath.split("/");
 var newChildName = xpathComponents.last();
 var parentPath = xpath.substr(0, xpath.length - newChildName.length - 1);
 var qualifierLoc = newChildName.indexOf("[");
 // remove qualifier for node being added
 if (qualifierLoc != -1) {
    newChildName = newChildName.substr(0, qualifierLoc);
 }
 var node = this.getNode(parentPath);
 var newChild = null;
 if (this.isIE && node) {
    newChild = this.xmlDom.createElement(newChildName);
    node.appendChild(newChild);
 } else if ((!this.isIE) && node.singleNodeValue) {
    newChild = this.xmlDom.createElement(newChildName);
    node.singleNodeValue.appendChild(newChild);
 } else {
    // add the parent, then re-try to add this child
    var parentNode = this.insertNode(parentPath);
    newChild = this.xmlDom.createElement(newChildName);
    parentNode.appendChild(newChild);
 }
 return newChild;
};

// removeNode
//
// remove an element (node) from the XML document based on the xpath
XML.prototype.removeNode = function(xpath) {
 var node = this.getNode(xpath);
 var changed = false;
 if (this.isIE &&amp; node) {
    node.parentNode.removeChild(node);
    changed = true;
 } else if ((!this.isIE) && node.singleNodeValue) {
    node.singleNodeValue.parentNode.removeChild(node.singleNodeValue);
    changed = true;
 }
 return changed;
};

You should now be able to fully read and manipulate XML using XPaths.

For any significant reformatting or processing of the XML, you'll probably want to utilize XSLT. So, next I'll provide a simple XSLT class. It will preload (into a DOM object) an XSL file in its constructor. This provides rapid transformations of new XML data passed in to it's transform function (including parameters).

First, the constructor which requires an URL pointing to the XSL file to be used for transformations. It does not accept a DOM object like the XML class did as it is assumed that the XSL (layout information) is more-or-less static and stored in a file whereas the XML data would most likely be dynamic and received via an XHR request.

//
// XSLT Processor
//
function XSLT(xslUrl) {
 this.isIE = window.ActiveXObject;
 if (this.isIE) {
    var xslDom = new ActiveXObject("MSXML2.FreeThreadedDOMDocument");
    xslDom.async = false;
    xslDom.load(xslUrl);
    if (xslDom.parseError.errorCode != 0) {
       var strErrMsg = "Problem Parsing Style Sheet:\n" +
          " Error #: " + xslDom.parseError.errorCode + "\n" +
          " Description: " + xslDom.parseError.reason + "\n" +
          " In file: " + xslDom.parseError.url + "\n" +
          " Line #: " + xslDom.parseError.line + "\n" +
          " Character # in line: " + xslDom.parseError.linepos + "\n" +
          " Character # in file: " + xslDom.parseError.filepos + "\n" +
          " Source line: " + xslDom.parseError.srcText;
         alert(strErrMsg);
       return false;
    }
    var xslTemplate = new ActiveXObject("MSXML2.XSLTemplate");
    xslTemplate.stylesheet = xslDom;
    this.xslProcessor = xslTemplate.createProcessor();
 } else {
    var xslDom = document.implementation.createDocument("", "", null);
    xslDom.async = false;
    xslDom.load(xslUrl);
    this.xslProcessor = new XSLTProcessor();
    this.xslProcessor.importStylesheet(xslDom);
}
};

Finally, the transform function will preform the XSL transformation and return the result. It accepts parameters to be passed to the XSL as an associative array of parameter name and value pairs.

// transform
//
// Transform an XML document
XSLT.prototype.transform = function(xml, params) {
 // set stylesheet parameters
 for (var param in params) {
    if (typeof params[param] != 'function') {
       if (this.isIE) {
          this.xslProcessor.addParameter(param, params[param]);
       } else {
          this.xslProcessor.setParameter(null, param, params[param]);
       }
    }
 }

 if (this.isIE) {
    this.xslProcessor.input = xml.xmlDom;
    this.xslProcessor.transform();
    var output = this.xslProcessor.output;
 } else {
    var resultDOM = this.xslProcessor.transformToDocument(xml.xmlDom);
    var serializer = new XMLSerializer();
    var output = serializer.serializeToString(resultDOM);
 }
 return output;
};

You should now be able to easily utilize XML and XSL on your web pages. An example usage of this XML/XSLT library would be to first build an XSLT object during the page initialization (onload).


xslProcessor = new XSLT(xslUrl);

Then, when XML responses are received from an AJAX request, process them. For example,

// get the XML data
try {
 var xmlData = new XML(request.responseXML);
} catch (e) {
 alert(request.responseText);
}

// get the username out of the XML
var userName = xmlData.getNodeValue('//userName');

// transform the XML to some HTML content
var newData = xslProcessor.transform(xmlData, {'param':'value'});
document.getElementById('someDiv').innerHTML = newData;

Update (February 27, 2007): I previously had a function in my XML class to generate valid HTML for the XML, but I've now modified it to use Oliver Becker's XML to HTML Verbatim Formatter with Syntax Highlighting stylesheet to format the XML. If that is not available, it will default to simply serialize the XML and convert the special characters. The code for this looks like:


/ Define a class variable which can be used to apply a style sheet to
// the XML for format it to HTML
XML.htmlFormatter = new XSLT("xsl/xmlverbatim.xsl");

// toHTML
//
// Transform the XML into formatted HTML
//
XML.prototype.toHTML = function() {
var html = null;
if (XML.htmlFormatter) {
 html = XML.htmlFormatter.transform(this);
} else {
 html = this.getNodeAsXml('/');
 if (html != null) {
  html = html.replace(/&/g, "&");
  html = html.replace(/</g, "&lt;");
  html = html.replace(/>/g, "&gt;<br/>");
 }
}
   return html;
}

As before, the complete package is available to download

Update (March 7, 2007): I have updated this package to utilize Google's AJAXSLT XSL-T implementation when a native JavaScript XSLT function is not available. I need to test it more before releasing it however.

Cross-browser inline SVG solved

2006-10-26T14:16:00.000-04:00

In three previous posts (1, 2, 3) I've discussed getting browser-side dynamically generated SVGs to render properly across browsers. I now have a solution which is working for me.

Below is a screenshot my test application now. The XML used as sample data and the XSLT to product the SVG data was provided earlier.

(Note: I was also able to add some linking between the SVG and HTML so that as you mouse over each bar it will be highlighted in the SVG and simultaneously highlighted the corresponding row in the HTML table.)

In order to make this work I used the embed tag for IE and the object tag for all other browsers (tested with Firefox and Opera). My HTML has a div named svgDiv which will dynamically be given the SVG to render. For Firefox I can create my object with the dynamic SVG in one step, but for Internet Explorer, I first have to embed a static, blank SVG (as mentioned earlier) and then replace the blank SVG with the dynamic SVG. However, I determined that this could not be done all in one JavaScript function. I found that if I programatically add the embedded blank SVG, and them immediately replace the blank SVG with the dynamic one, it would fail, but having something like an alert message between adding the blank SVG and replacing it with the dynamic SVG would work. The only explanation I could reason for this is that the actual addition of the embed element is not completed by the browser until the JavaScript reaches a pause in processing (ie. not flushed/committed), and that the need to create the alert popup causes the changes to be committed. (does anyone know how to make the browser commit the changes?). My solution to this problem was to add the blank SVG when the page is loaded (if IE) so that it will be available for me to replace when I'm ready.

When the page is loaded, if the browser is IE I call this function to add the blank SVG:

// embedBlankSVG
//
// add an <embed> tag to display a blank static SVG
// this is needed for IE to replace with dynamic content later
SVG.prototype.embedBlankSVG = function(width, height) {
 var svgEmbed = document.createElement('embed');
 svgEmbed.setAttribute('codebase', 'http://www.adobe.com/svg/viewer/install/');
 svgEmbed.setAttribute('classid', 'clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2');
 svgEmbed.setAttribute('pluginspage', 'http://www.adobe.com/svg/viewer/install/');
 svgEmbed.setAttribute('src', 'blank.svg');
 svgEmbed.setAttribute('width', width);
 svgEmbed.setAttribute('height', height);
 svgEmbed.setAttribute('type', 'image/svg+xml');
 svgEmbed.setAttribute('id', 'embeddedSVG');
 this.svgDiv.appendChild(svgEmbed);
};

Then, whenever I want to render a new SVG, I invoke this function:

// render
//
// render the dynamic SVG in the page
SVG.prototype.render = function() {
 var str = this.toString();
 
 if (this.isIE) {
    // For IE, we use an <embed> tab
  
    // build replacement SVG document
    var newSvgElement = document.createElement("svg");
    newSvgElement.setAttribute("xmlns", "http://www.w3.org/2000/svg");
    newSvgElement.setAttribute('xmlns:xlink', "http://www.w3.org/1999/xlink");
    newSvgElement.setAttribute("width", this.width);
    newSvgElement.setAttribute("height", this.height);
    newSvgElement.innerHTML = str;
  
    // replace blank SVG with new SVG
    domtodom(newSvgElement, 'embeddedSVG');
 } else {
    this.clearPage();
   
    // For all others (mainly Mozilla based), we use an <object> tag
    // with the SVG data added inline
  
    var svgObject = document.createElement('object');
    svgObject.setAttribute('name', 'svgObj');
    svgObject.setAttribute('codebase', 'http://www.adobe.com/svg/viewer/install/');
    svgObject.setAttribute('classid', 'clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2');
    svgObject.setAttribute('data', 'data:image/svg+xml,'+ str);
    svgObject.setAttribute('width', '850');
    svgObject.setAttribute('height', '350');
    svgObject.setAttribute('type', 'image/svg+xml');
    this.svgDiv.appendChild(svgObject);
 }
}

where the toString function produces SVG data from XML data (whether read from a file or returned in an XMLHttpRequest response) and the domtodom function comes from Chris Bayes' domtodom.js

This was tested in Firefox 2.0, IE 7.0, and Opera 9.02 (though the table highlighting isn't currently working in Opera. It says I have a Security Error: attempted to read protected variable).

Help requested

I would like to be able to correspondingly highlight bars in the graph when I mouse over the table rows, but every attempt to add the:


<script type="text/ecmascript">
<![CDATA[
...
]]>
</script>

to the SVG data (as described here) immediately causes Firefox to crash.

Updated 12/07/2006 per comment below

The comment below asked what the clearPage function does. Since I can't format it nicely in the comments section, I decided to update the post with it. It doesn't really do anything too profound which is why I didn't post it originally.


// clear out any old displayed data from the page
SVG.prototype.clearPage = function() {
 this.svgDiv.innerHTML = '';
 this.tableDiv.innerHTML = '';
 
 if (this.isIE) {
  this.embedBlankSVG(this.svgWidth, this.svgHeight);
 }
}

Additionally, while I'm updating this posting anyway, I was able to add JavaScript to my SVG through the XSLT (see Help Requested section) by adding it like this in the XSL:


<xsl:element name="script">
   <xsl:attribute name="type">
      <xsl:value-of select="'text/ecmascript'" />
   </xsl:attribute>
   <xsl:text>
   &lt;![CDATA[
 ...  
   ]]&gt;
   </xsl:text>
</xsl:element>

I haven't gotten it to do everything that I want yet, but at least the browser no longer immediately crashes.

Scalable Vector Graphics (SVG) Intro

2006-10-24T15:35:00.000-04:00

I ran across an introduction to SVG today entitled, Scalable Vector Graphics (SVG), Creating High-End 2D Graphics Using XML while I was looking for something else, but it gives a nice summary of SVG so I thought I'd share it. It covers the main questions:

What is SVG (and what is is not)?
How do you use SVG?
Why should you use SVG?

It's a few years old (2002), but still a nice article.

IE7, any real improvement?

2006-10-19T09:13:00.000-04:00

Now that IE7 is out, I will be 'upgrading' to it to ensure my web sites support it, but I wonder have much of an upgrade it really is -- especially since they've had 5 years to improve it.

I got an email this morning from eWEEK highlighting Jim Rapoza's glowing review of IE7. One one hand, he acknowledges that IE7 hasn't made any revolutionary step forward in the browser space, but has merely caught up as he says,

While we wouldn't yet call IE 7 one of the best browsers available today, Microsoft has greatly closed the distance between its browser and those of its competitors. Version 7 catches IE up with now-common browser features...

but after summarizing the key user interface and security enhancements, he makes this statement,

On the standards side, IE 7 does a much better job than previous versions of the product at supporting key standards, such as Cascading Style Sheets support and JavaScript. IE 7 still doesn't have perfect standards support, but it is much better than previous versions of the browser.

That statement puzzles me since according to this analysis which summarizes web browser standards support, I see very little improvement in standards support except in CSS 2.1 & 3 Basic Selectors.

To me, it sounds like Microsoft has merely put a new glossy finish on a rotting infrastructure (a whitewashed tomb so to speak) which is really disappointing to me, since after listening to this interview of the IE7 team by the Ajaxians last month, I was more optimistic about standards support.

Using Cookies in JavaScript

2006-10-05T10:19:00.000-04:00

Update (February 23, 2007): I have updated the cookies functionality below to utilize flash storage if available and fall back to cookies if not available. See Cookies and Flash for local storage

Whether you like them or not, cookies are an easy way store simple user specific information across web pages and sessions. Here are the basic JavaScript methods to create (and update), read, or delete (CRUD) cookies with JavaScript.


function createCookie(name, value, days) {
if (days) {
 var date = new Date();
 date.setTime(date.getTime()+(days*24*60*60*1000));
 var expires = "; expires="+date.toGMTString();
}
else {
 var expires = ";";
}
document.cookie = name + "=" + value + expires + "; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var cookies = document.cookie.split(';');
for(var i = 0; i < cookies.length;i++) {
 var cookie = cookies[i];
 while (cookie.charAt(0) == ' ') {
  cookie = cookie.substring(1, cookie.length);
 }
 if (cookie.indexOf(nameEQ) == 0) {
  return cookie.substring(nameEQ.length, cookie.length);
 }
}
return null;
}

function eraseCookie(name) {
createCookie(name, "", -1);
}

Detailed explanation of code how this code works is available here. This script was originally written by Scott Andrew.

Add/remove options to/from a select list

2006-10-05T10:09:00.000-04:00

In my past two posts I've show how to move options between select lists and reorder options in a list. Now, to round out my little series on selection list manipulation with JavaScript, I'll give simple functions to add a value or remove a value from a list.


// addSelectOption
//
// Add the single select option to the selection list with the id specified
//
function addSelectOption(selectId, value, display) {
 if (display == null) {
  display = value;
 }
    var anOption = document.createElement('option');
    anOption.value = value;
    anOption.innerHTML = display;
    document.getElementById(selectId).appendChild(anOption);
    return anOption;
}

// removeSelectOption
//
// Remove the option with the specified value from the list of options
// in the selection list with the id specified
//
function removeSelectOption(selectId, value) {
 var select = document.getElementById(selectId);
 var kids = select.childNodes; 
 var numkids = kids.length; 
 for (var i = 0; i < numkids; i++) {
      if (kids[i].value == value) {
   select.removeChild(kids[i]);
   break;
     }
    }
}

Move options up and down select lists

2006-10-04T14:33:00.000-04:00

In my previous post I showed how to move options in a select list from one list to another with JavaScript. Once you've moved them, you may want to reorder them if order is important. So, now I'll show how to do that.

First, define your control in HTML to look something like what is shown to the right where you have up and down buttons which will be used to move selected elements up and down in the list.

Your HTML will look something like:


<select id="orderedList" multiple="multiple"></select>
<img src="moveup.gif" alt="Move Up" onclick="moveOptionsUp('orderedList')" />
<img src="movedown.gif" alt="Move Down" onclick="moveOptionsDown('orderedList')" />

As you can see, I've added two image which when you click on them invoke the moveOptionsUp and moveOptionsDown function. The JavaScript for these functions looks like:


// moveOptionsUp
//
// move the selected options up one location in the select list
//
function moveOptionsUp(selectId) {
 var selectList = document.getElementById(selectId);
 var selectOptions = selectList.getElementsByTagName('option');
 for (var i = 1; i < selectOptions.length; i++) {
  var opt = selectOptions[i];
  if (opt.selected) {
   selectList.removeChild(opt);
   selectList.insertBefore(opt, selectOptions[i - 1]);
     }
    }
}

and


// moveOptionsDown
//
// move the selected options down one location in the select list
//
function moveOptionsDown(selectId) {
 var selectList = document.getElementById(selectId);
 var selectOptions = selectList.getElementsByTagName('option');
 for (var i = selectOptions.length - 2; i >= 0; i--) {
  var opt = selectOptions[i];
  if (opt.selected) {
   var nextOpt = selectOptions[i + 1];
   opt = selectList.removeChild(opt);
   nextOpt = selectList.replaceChild(opt, nextOpt);
   selectList.insertBefore(nextOpt, opt);
     }
    }
}

Unfortunately there's no insertAfter function for a node, so the moveOptionsDown function is a little funky.

Move options across select lists

2006-10-04T14:32:00.000-04:00

Perhaps you've seen controls like what is shown to the right where you have some list of items in one selection list and you can move them in and out of another by pressing the '<' and '>' buttons and you want to know how to do it.

Here's one way. First, define your select lists and buttons similarly to that shown below. In my case, I fill in the select options with AJAX, so I have no options defined in the HTML, but if you generated the HTML on the server, then you'll have options in the HTML as well.


   <select id="available" size="10" multiple="multiple"></select>
   <input type="button" value=">" 
          onclick="moveOptionsAcross($('available'), $('selected'))" />></input>
   <input type="button" value="<" 
          onclick="moveOptionsAcross($('selected'), $('available'))" /><</input>
   <select id="selected" size="10" multiple="multiple"></select>

Now include the following JavaScript code:


// moveOptionsAcross
//
// Move selected options from one select list to another
//
function moveOptionsAcross(fromSelectList, toSelectList) {
  var selectOptions = fromSelectList.getElementsByTagName('option');
  for (var i = 0; i < selectOptions.length; i++) {
     var opt = selectOptions[i];
     if (opt.selected) {
      fromSelectList.removeChild(opt);
      toSelectList.appendChild(opt);

 // originally, this loop decremented from length to 0 so that you
 // wouldn't have to worry about adjusting the index.  However, then
 // moving multiple options resulted in the order being reversed from when
 // was in the original selection list which can be confusing to the user.
 // So now, the index is adjusted to make sure we don't skip an option.
      i--;
     }
   }
}

You should now be able to select options in one list and press the appropriate button to move them to the other list.

Checkbox as Radio Buttons

2006-10-04T10:21:00.000-04:00

Sometimes you want the appearance of a checkbox on your form, but you want it to function like a radio button where only a single option can be selected at a time. The following JavaScript function will make a group of checkboxes function like a radiogroup.


function singleSelectCheckbox(checkbox) {
 var aGroup = checkbox.parentNode;
 var allInputs = aGroup.getElementsByTagName("input");
 for (var i = 0; i < allInputs.length; i++) {
  if (allInputs[i] == checkbox) {
   continue;
  } else {
   allInputs[i].checked = false;
  }
 }
}

This assumes you've placed the checkboxes to work as a radio button group in some sort of containing HTML element (a td or span or something like that).
Your HTML code would look something like:


<span>
<input onclick="singleSelectCheckbox(this)" type="checkbox">Option 1</input>
<input onclick="singleSelectCheckbox(this)" type="checkbox">Option 2</input>
<input onclick="singleSelectCheckbox(this)" type="checkbox">Option 3</input>
</span>

The move from Netgear MP101 to Xbox Media Center

2006-09-27T10:30:00.000-04:00

For some time now, I've been using a Netgear MP101 with the free TwonkyVision MusicServer. Unfortunately, the free version of MusicServer is no longer available from TwonkyVision as it is now part of the TwonkyMedia package, but you can still get it from places like the "Files" section of the NetgearMP101 Yahoo! Group. Even though the MP101 includes wireless B support, in order to have optimum playback performance, I used two Belkin Wireless G routers bridged together and connected the MP101 to the bridged router via ethernet. Using the matched routers to do the wireless communication gives significant communications improvements over using the wireless B.

Well, that was well and good for music, but I wanted to do more (view pictures, videos, etc). I first tried out MythTV and MediaPortal on a spare computer. They were ok, though a bit slow (particularly in startup time) and MythTV proved a little difficult to get working with the hardware I had. Though the biggest factor in not going that route was that my wife was not happy with the computer case sitting next to the entertainment center. Yes, I could buy a small form-factor case, motherboard, etc. and build a small PC to look like another audio component to fit in the entertainment canter, but I wanted to do this cheaply.

Then I ran into this article in Popular Science (printed edition) to build an "Xbox Media Monster". I knew you could hack Xboxes to run Linux or make them into media centers, but I thought you needed a modchip or good soldering skills (which I don't have), but apparently now you no longer need to do any hardware modifications! The instructions in the printed Popular Science article were a little too general, so I found more complete instructions here which include the specific part numbers you need for the original MechAssault.

So, I made a quick stop to GameStop to buy a used Xbox, an Action Replay memory device, and an original copy of the game MechAssault. Finding the original MechAssault was the only tricky part and required me to go to a second store. Then I simply followed the instructions and I was up and running XBMC (XBox Media Center) in no time. I used the XBMC BLINGBLING edition as it was the most up-to-date edition I could find.

I'm loving my Xbox Media Center now. Besides being able to view and stream my pictures, music, and videos from my Linux server, XBMC also contains a scripting ability for which many scripts are available to do things like view the latest videos on YouTube, Google Videos, or your favorite community video source, stream audio from Shoutcast, Live365, or other audio sources, view current weather radar, TV listings, etc. If there's a media source online, someone probably has a script to view it via XBMC.

XBMC can play video DVD and audio CDs (and rip them for you). You can use Xlink Kai to play games across the internet instead of a normal LAN (Local Area Network). Additionally, you can install Xbox apps like dvd2xbox to rip your Xbox games to the Xbox hard drive. Extracting your favorite game to the hard drive can help game performance. Another Xbox application you may want to try is MAMEoX to play your favorite classic arcade game on your Xbox.

XBMC includes a web server so you can remotely control your Xbox, and an FTP server to move files to/from your Xbox.

All in all, it's an impressive system for around $140 (for Xbox and all necessary accessories).

Creating Mashups

2006-09-21T13:48:00.000-04:00

For those of you interested in creating mashups (a website or web application that combines content from more than one source - wikipedia), then ProgrammableWeb is the place to go!

ProgrammableWeb showcases the latest mashup sites. For each site showcased, they provide a list of the mashup APIs used. They also have an API dashboard which provides a comprehensive database of API resources available to you as a developer and they have lots of tutorials and articles.

At the time of this writting, there are 1001 mashup sites showcased.

Using IE in Linux

2006-09-21T13:33:00.000-04:00

If you're a web developer, you mostly likely have multiple browsers installed, or readily available to you, to test your web pages with. This is even more essential if you're building AJAX applications as there are many norotious variances between JavaScript and CSS implementations - particularly between Internet Explorer and more W3C compliant browsers like Mozilla, Firefox, and Opera.

To use IE in Linux, you have a few options.

Use WINE (Windows Emulator)
Use a virtual machine like VMWARE
Connect remotely to a Windows machine with something like VNC, NX, or Citrix.

I've used all three of these methods, and they all have their pros and cons, which it not really the point of this article, but I'll provide a few.

WINE

pros

free, good performance and minimal memory requirements

cons

can be hard to setup, may not always work due to emulation problems (ex. APIs not implmented in WINE)

VMWARE

pros

fully supported, descent performance with sufficient hardware

cons

not free, resource intensive, takes longer to startup

Remote connection

pros

real windows machine

cons

requires a second machine, may have network latency

To address the "hard to setup" aspect of getting IE to run in WINE, I've used winetools before which works well, but it's really meant to set up a whole lot more than just IE. I've recently run across IEs4Linux which is a more straightforward method to simply set up IE in Linux under Wine.

Speeding up Linux

2006-09-21T12:30:00.000-04:00

I'm a happy Linux user and like to tweak my operating systems to get as much performance out of them as possible, though not at the expense of sacrificing too much user experience niceties.
This article posses 7 Ways to Speed Up Your Linux Desktop which in a nutshell are:

Use a Minimalistic Window Manager/Desktop Environment
Customizing GNOME, KDE, or Xfce
Get More RAM
Kill Unneeded Processes
Remove Virtual Terminals
Use “Small” Applications
Remove Start-Up Services

Like I said, I still want a nice user experience, so I'm sticking with KDE and Firefox for my browser (for many reasons, not the least of which is that I can synchronize bookmarks and plugins across multiple computers and OSes for a common Internet experience). However, the other tips can be useful.

Web Design Trends

2006-09-21T12:17:00.000-04:00

This article analyzes some of the current trends in web design. It breaks them down into the following 8 categories:

Web Desktop Style
Silver Orange Style
Apple Style
Microsoft Style
Magazine Style
Rounded Plain Style
Web 2.0 Design Style
Adobe / Macromedia Style

For each style, the distinctive elements for each style are described, a sample screenshot snippet is provided as well a links to sites illustrating these styles, then pros and cons for using each style is given. Perhaps this will be useful for deciding how to design your next webpage.

Web Metrics

2006-09-21T12:05:00.000-04:00

Good metrics for web sites are nearly as ellusive as good metrics in software development. The most frequently used metric in software is probably the lines of code (LOC) count which totally rewards inefficient, bloated, cut-n-paste style coding over well designed and reusable coding styles. Similarly, web metrics like hit counts and page views can similarly reward inefficient web coding styles (such as lots of extra page elements (graphics) to be downloaded, or excessive numbers of pages to be navigated to get the content).

This article has a nice sumary of some metrics like pageviews and reach and how redesigning some populate sites to use newer techniques like AJAX and RSS would significantly change their current metrics. It doesn't offer a solution for a good metric, but demonstrates the need for one.

In the aforementioned article, it has a link for specifically measuring AJAX applications with Analytics which is useful information.

No phishing allowed

2006-09-20T16:13:00.000-04:00

I ran across the OpenDNS.org service the other day from some technology video podcast where David Ulevitch (founder of OpenDNS) was being interviewed about it. You simply set the DNS in your router (or on your PC) to the following two addresses:

208.67.222.222
208.67.220.220

Then, whenever you attempt to access a phishing (scam) site, it will instead give you a message that the site you attempted to access was a phishing site.

This service will also correct obvious typos in your URL which can be handy too.

They also claim to be a faster DNS because the have "a really big, smart cache" and are "geographically distributed", however I don't see how accessing their regional server can be faster than the local DNS on your ISP network, but I'm currently using this service and it's plenty fast.

Tracking satellites

2006-08-09T11:04:00.000-04:00

I've always had a passing interest in tracking satellites. For over 10 years I've had STSORBIT PLUS Space Shuttle and Satellite Tracking Software by David H. Ransom, Jr. installed on my computer to bring up once in a while, particularly during Space Shuttle missions. However, it's kind of antiquated and requires manual fetching of the current orbital data ("TLEs" or "2-Line Elements") to use it.

Similarly, in my earlier post on using XPlanet to generate current satellite wallpaper I discuss how to build a dynamic wallpaper which shows satellite tracking over the current earth image (with current cloud cover) but it also requires fetching the TLEs.

However, now it appears I can drop STSPLUS in favor of an Ajax enabled online version which has lots of nice features and utilizes Google maps for the mapping.

Get request parameters through JavaScript

2006-07-12T15:10:00.000-04:00

This is not original content, I'm just a reciting information I found elsewhere (see original), but with more processing done on the client side in JavaScript for Ajax, it's sometimes necessary to be able to process parameters passed on the URL with JavaScript as you would with PHP, JSP, etc. on the server. So since I found a method to do it, I'm posting it here for my own benefit so I don't have to find it again. You can also download it here.


function getParameter ( queryString, parameterName ) {
   // Add "=" to the parameter name (i.e. parameterName=value)
   var parameterName = parameterName + "=";
   if ( queryString.length > 0 ) {
      // Find the beginning of the string
      begin = queryString.indexOf ( parameterName );
      // If the parameter name is not found, skip it, otherwise return the value
      if ( begin != -1 ) {
         // Add the length (integer) to the beginning
         begin += parameterName.length;
         // Multiple parameters are separated by the "&" sign
         end = queryString.indexOf ( "&" , begin );
      if ( end == -1 ) {
         end = queryString.length
      }
      // Return the string
      return unescape ( queryString.substring ( begin, end ) );
   }
   // Return "null" if no parameter has been found
   return "null";
   }
}

The queryString is obtained via var queryString = window.top.location.search.substring(1);

Follow up on inline SVG

2006-07-06T11:54:00.000-04:00

This is just a brief follow-up to my previous request for help.

I had built my XSLT to render the SVG as described in the article, Render dynamic graphs in SVG and my mouseover coloring events was modeled after the article, Add interactivity to your SVG, which were both articles from developerWorks.

So, my generated code for a bar in my graph looked like:

<svg:rect x="35" y="272.88" height="57.12" width="109" style="fill:rgb(49,0,0)">
<set attributeName="fill" from="rgb(49,0,0)" to="red" begin="mouseover" end="mouseout" />
</svg:rect>

However, after taking the advice from Martin Honnen (SVG Developers Yahoo! Group) my generated code for the same bar in the graph looks like:

<svg:rect x="35" y="272.88" height="57.12" width="109" fill="rgb(49,0,0)" onmouseover="evt.target.setAttribute('fill', 'red');" onmouseout="evt.target.setAttribute('fill','rgb(49,0,0)');"/>

The result is that the correct colorings are now displayed when rendered inline in IE, and the mouseover events work correctly in Firefox.

The only thing still not working is the mouseover events when rendered inline in IE.

Martin Honnen further suggested to start with a blank SVG placed in the page with the embed tag, and then access it to manipulate it with the getSVGDocument method (which should work in IE, Firefox 1.5+, and Opera 9) to add the content. However, my attempts at this method have not been successful to date.

IBM's Death Spiral

2006-07-06T11:24:00.000-04:00

Robert X. Cringley has a very interesting article on Why IBM is in Trouble.

"[IBM] has entered a death spiral of under-bidding and then under-delivering."

"decades no longer matter to publicly traded American companies. All that really matter are fiscal quarters."

I'm tempted to add my own personal editorial on the subject, but I don't want to put my job in jeopardy.

Help with dynamic inline SVG

2006-06-28T16:02:00.000-04:00

Normally, I like to post solutions to problems on this blog, but today I'm hoping someone can help me.

In a previous post I presented some methods to embed SVG inline after generating it from XML data. However, there's still a problem, particularly in Internet Explorer, which I discovered when I tried to add some event handling to the SVG. Let me walk through the problem.

First, we start out with some sample XML data like:

<?xml version="1.0" ?>
<SrmData>
<data>
<display_name>srmdb2</display_name>
<date>2006-04-30</date>
<processor_busy>19.04</processor_busy>
</data>
<data>
<display_name>srmxml05</display_name>
<date>2006-04-30</date>
<processor_busy>37.68</processor_busy>
</data>
<data>
<display_name>srmdev1</display_name>
<date>2006-04-30</date>
<processor_busy>26.6</processor_busy>
</data>
<data>
<display_name>srmxml01</display_name>
<date>2006-04-30</date>
<processor_busy>42.74</processor_busy>
</data>
<data>
<display_name>srmweb2</display_name>
<date>2006-04-30</date>
<processor_busy>1.66</processor_busy>
</data>
<data>
<display_name>srmweb1</display_name>
<date>2006-04-30</date>
<processor_busy>5.61</processor_busy>
</data>
<data>
<display_name>srmxml02</display_name>
<date>2006-04-30</date>
<processor_busy>22.74</processor_busy>
</data>
</SrmData>

Which I run through my XSLT and get the following SVG (notice the mouseover events):

<svg:svg baseProfile="full" width="850" height="350" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg:g>
<!--Now Draw the main X and Y axis-->
<svg:g style="stroke-width:3; stroke:black">
<!--X Axis-->
<svg:path d="M 30 330 L 830 330 Z" />
<!--Y Axis-->
<svg:path d="M 30 30 L 30 330 Z" />
</svg:g>
<svg:g style="fill:none; stroke:#B0B0B0; stroke-width:2; stroke-dasharray:2 4;text-anchor:end; font-size:12px; stroke-width:5; stroke:black ">
<!--Add dotted line at 50-->
<svg:path d="M 30 30 L 830 30 Z" />
<svg:path d="M 30 165 L 830165 Z" />
<!--Add Y-axis labels-->
<svg:text style="fill:black; stroke:none" x="20" y="30">
100 </svg:text>
<svg:text style="fill:black; stroke:none" x="20" y="165">
50 </svg:text>
<svg:text style="fill:black; stroke:none" x="20" y="330">
0 </svg:text>
</svg:g>
<svg:rect x="35" y="272.88" height="57.12" width="109" style="fill:rgb(49,0,0)">
<set attributeName="fill" from="rgb(49,0,0)" to="red" begin="mouseover" end="mouseout" />
</svg:rect>
<svg:g>
<svg:text style="fill:black; stroke:none" x="35" y="347" rotate="45" font-size="8">
srmdb2</svg:text>
</svg:g>
<svg:rect x="149" y="216.96" height="113.03999999999999" width="109" style="fill:rgb(96,0,0)">
<set attributeName="fill" from="rgb(96,0,0)" to="red" begin="mouseover" end="mouseout" />
</svg:rect>
<svg:g>
<svg:text style="fill:black; stroke:none" x="149" y="347" rotate="45" font-size="8">
srmxml05</svg:text>
</svg:g>
<svg:rect x="263" y="250.2" height="79.80000000000001" width="109" style="fill:rgb(68,0,0)">
<set attributeName="fill" from="rgb(68,0,0)" to="red" begin="mouseover" end="mouseout" />
</svg:rect>
<svg:g>
<svg:text style="fill:black; stroke:none" x="263" y="347" rotate="45" font-size="8">
srmdev1</svg:text>
</svg:g>
<svg:rect x="377" y="201.78" height="128.22" width="109" style="fill:rgb(109,0,0)">
<set attributeName="fill" from="rgb(109,0,0)" to="red" begin="mouseover" end="mouseout" />
</svg:rect>
<svg:g>
<svg:text style="fill:black; stroke:none" x="377" y="347" rotate="45" font-size="8">
srmxml01</svg:text>
</svg:g>
<svg:rect x="491" y="325.02" height="4.9799999999999995" width="109" style="fill:rgb(4,0,0)">
<set attributeName="fill" from="rgb(4,0,0)" to="red" begin="mouseover" end="mouseout" />
</svg:rect>
<svg:g>
<svg:text style="fill:black; stroke:none" x="491" y="347" rotate="45" font-size="8">
srmweb2</svg:text>
</svg:g>
<svg:rect x="605" y="313.17" height="16.830000000000002" width="109" style="fill:rgb(14,0,0)">
<set attributeName="fill" from="rgb(14,0,0)" to="red" begin="mouseover" end="mouseout" />
</svg:rect>
<svg:g>
<svg:text style="fill:black; stroke:none" x="605" y="347" rotate="45" font-size="8">
srmweb1</svg:text>
</svg:g>
<svg:rect x="719" y="261.78" height="68.22" width="109" style="fill:rgb(58,0,0)">
<set attributeName="fill" from="rgb(58,0,0)" to="red" begin="mouseover" end="mouseout" />
</svg:rect>
<svg:g>
<svg:text style="fill:black; stroke:none" x="719" y="347" rotate="45" font-size="8">
srmxml02</svg:text>
</svg:g>
</svg:g>
</svg:svg>

If I embed the above SVG from a static file (via <embed src="myfile.svg">), it is rendered correctly in IE as:
where in the above snapshot, the mouse is over the first bar so the mouseover event has changed it to bright red to highlight it.

The problem is that when it is rendered dynmically inline in Internet Explorer, as described in my previous post, it looks like:

where there is no coloring and no mouseover events. Both cases require the Adobe SVG Viewer to be installed to render it. So why is it rendered differently?

There is one interesting difference in how IE handles this. When using the embed tag, if you right click on the image, the pop-up context menu will look like this:

where it is obviously using the Adobe SVG Viewer as evidenced by the "About Adobe SVG Viewer..." menu option and other options such as copying, viewing, and saving the SVG. On the other hand, when using the inlined SVG method, the context menu will look like:

as it would on any other part of the web page. So even though the Adobe plugin rendered the image, it is not apparent.

Meanwhile, on the Firefox side of things, regardless of whether you embed a static SVG file, put the SVG directly inline (if you're using XHTML), or put it in an object tag, it always looks the same:
which is good except for the fact that the Firefox (Gecko) SVG rendering engine doesn't seem to support the mouseover events either.

As an alternative method, I tried PlotKit which can generate dynamic SVG graphs and charts. So, I built an HTML table from my XML data and told PlotKit to use that and in both IE and Firefox it worked correctly to give me a graph such as:
The context menu of this graph is like my inline approach and doesn't acknowledge the Adobe SVG Viewer, however, PlotKit was able to get coloring to work. The current version of PlotKit does not support events which made it both not acceptable for my overall solution as well as provided me no way to test if the mouseover would have worked with the approach used by PlotKit. However, since at least colors worked, I started investigating how he (Alastair Tse) was able to render the dynamic inline SVG in IE.

I found this note in one of his samples:
Note: With SVG, the most compatible way is NOT to put in SVG tags, but create the SVG element with Javascript. Therefore, instead of adding <svg> tag, we just have a <div> container and create the SVG element using SVGRenderer.SVG().

And looking at the PlotKit code I can see that his library is dynamically building the SVG using JavaScript DOM APIs to add each element.

Well, since I want to use XSLT to generate my SVG from XML and not write my own version of the PlotKit library to build my SVGs, I tried a hybrid approach. I used the DOM APIs to create a temporary DOM element. I assigned my generated SVG to that element's innerHTML in order to have the browser build a DOM tree out of my SVG. I then created an svg DOM element, and appended the first child DOM element of my SVG DOM (the first g element) to the svg DOM element and appened the svg DOM element to the document. Which I would think would be theoretically the same thing, but to no avail.

Does anyone out there know how to fix this? How can I make Internet Explorer render my dynamic inline SVG correctly in order to get proper coloring and event handling?

Update: See follow-up

OpenAjax Alliance

2006-06-26T12:05:00.000-04:00

I'm now a memeber of the OpenAjax Alliance (http://www.openajaxalliance.org/)

Compressing HTML, CSS, and JavaScript files

2006-06-03T22:56:00.000-04:00

Adding gzip compression to files received from your web server can enhance the network latency of your web application. As simple way to do this is to define a handler in your .htaccess file to compress your HTML, CSS, and JavaScript files. To do this, add these lines to your .htaccess file:


AddHandler application/x-httpd-php .css .html .js
php_value auto_prepend_file /path/to/gzip-page.php
php_flag zlib.output_compression On

where the path is specific to your installation.

The gzip-page.php is needed to define the content-type for the compressed data so that they are not assumed to be PHP files. The code should look something like:


<?php
$pathinfo = pathinfo($PHP_SELF);
$extension = $pathinfo['extension'];
switch ($extension) {
 case "css" :
  header("Content-type: text/css");
  break;
 case "html" :
  header("Content-type: text/html");
  break;
 case "js" :
  header("Content-type: text/javascript");
  break;

 default :
  break;
}
?>

Now all your HTML, CSS, and JavaScript content will be compressed if the browser supports compressed data (which most do). For Ajax applications this is most useful since you'll probably have a decent amount of JavaScript code to transmit and potentially a fair amount of CSS as well.

SVG in IE and Firefox

2006-06-01T13:50:00.000-04:00

As follow-on work to my previous post Inline dynamic SVG from XML with Ajax where I discussed how to incorporate dynamically generated SVG in your web page, I've been trying to figure out how to make IE correctly prompt you to install the SVG plugin. That is usually accomplished with the PLUGINSPAGE attribute of the embed tag (see http://developer.apple.com/quicktime/compatibility.html for a nice explanation of the technique), but I'm using the object tag (which is recommended since it complies with the W3C HTML specifications while embed does not and it allows the data to be added inline). Unfortunately, adding the codebase attribute of http://www.adobe.com/svg/viewer/install/ (the Adobe SVG Viewer install site) and the classid attribute of clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2 (the Adobe SVG Viewer ActiveX control id) didn't do what I had hoped for.

I haven't figured out how to make IE prompt for the plugin yet, but I did find this page which provides an alternative method to check for IE and alternate using the object or the embed (in his case or inline SVG in my example) rather than using the isASVInstalled() method I used.

In his example, Spartanicus uses the MS "uplevel revealed" conditional comment to define a CSS type as:


.svg{display:none}
*>.svg{display:inline}

Then his HTML looks like:


<!--[if IE]><embed src="img/butterfly_vector.svg" height="120" width="170"><![endif]-->
<object data="img/butterfly_vector.svg" type="image/svg+xml" class="svg" height="120" width="170"/>

Where the class of svg in the object version will causes it not to display if not in Internet Explorer.

It's an interesting technique, but in my case of inline generated SVG where I can't use the embed tag since I have no src so I'd have to insert the SVG inline for IE and then also have the wrapped object version. Unfortunately, the non-object version would still display the data in the SVG XML even though it would not be an SVG graphic which would look terrible. So, it doesn't really help me in this case, but I thought it was interesting.

Inline dynamic SVG from XML with Ajax

2006-05-27T15:39:00.000-04:00

I had this problem I was trying to solve for work, and surprisingly, I couldn't find the solution anywhere else online, so I solved it myself and now offer the fruits of my labor.

Problem: retrieve report data in XML format from a SOA application and generate an HTML textual representation of the report data (ex. a table) as well as a graphical representation (ex. bar graph, pie chart, etc) on the client side using Ajax.

Solution: ok, there's plenty of information online regarding generating the XMLHTTPRequest to fetch the XML data and render HTML, so I won't go into that here other than to say I utilized the prototype.js package to make my life a little simpler. Also, to make my XML manipulation easier cross-browser, I utilized the zXML package from Nickolas C. Zakas (co-author of Professional Ajax which is where I read about it). The one caveat regarding using the zXML package, is that I had to use it to parse the XML from the XMLHTTPRequest.responseText instead of using the pre-parsed XMLHTTPRequest.responseXML like so:


currentReportDOM = zXmlDom.createDocument();
currentReportDOM.async = false;
currentReportDOM.loadXML(request.responseText);

Ok, so I have the report XML data in a DOM object in the variable named currentReportDOM. For this example I chose to format the XML into SVG using XSLT. You could of course do direct manipulation of the DOM object in Javascript if you'd prefer. Nothing spectacular in the XSLT file so I won't show it's contents here, but I apply the XSLT as shown:


// first convert the XML to SVG using XSLT
var xslDom = zXmlDom.createDocument();
xslDom.async = false;
xslDom.load("chart.xsl");
var str = zXslt.transformToText(currentReportDOM.documentElement, xslDom);

Now, the str variable contains the SVG XML as a string, and here's where the difficulties start. If this was XHTML in Firefox, I could just paste in the SVG data in some div like:


$("reportSVGDiv").innerHTML = str;

However, since this needs to work cross-browser, and Internet Explorer doesn't handle .xhtml files, this is a .html file and when you do that in HTML Firefox no longer renders it as an SVG, but just as plain XML, and Internet Explorer doesn't know what to do with it either since it doesn't support SVG natively.

Most instructions for embedding inline SVG in an HTML page for Internet Explorer instruct you to use either an embed, an object, or an iframe and set the source as the SVG file. This works great as along as your SVG data is actually in a file and the file ends with either a .svg or a .svgz(compressed) extension. If it was in a file, I could add an object to my page dynamically with the SVG file like:


var svgObject = document.createElement('object');
svgObject.setAttribute('type', 'image/svg+xml');
svgObject.setAttribute('data', 'svgdata.svg');
$("reportSVGDiv").appendChild(svgObject);

And it would be rendered. However, in this case, the data was received as raw XML from a server and rendered to SVG by the browser. Theoretically, you could add the data to the object inline like this:


var svgObject = document.createElement('object');
svgObject.setAttribute('type', 'image/svg+xml');
svgObject.setAttribute('data', 'data:image/svg+xml,'+ str);
$("reportSVGDiv").appendChild(svgObject);

However, since you're no longer referencing a file with a .svg or .svgzextension, the IE MIME type handling -- which depends on file extensions, not the specified MIME type (image/svg+xml) -- won't recognize it as an SVG.

How to get it working in Internet Explorer:

To get Internet Explorer working you first have to install the Adobe SVG Viewer plugin so that IE can render SVGs. Then you have to define the svgnamespace in your HTML header like:


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">

Then in the head section add the following lines to associate the Adobe SVG viewer with the svg namespace (since Internet Explorer bases MIME types off of file extensions and we have no file in this case).


<object id="AdobeSVG" classid="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2"></object>
<?import namespace="svg" implementation="#AdobeSVG"?>

Now, as long as the SVG data you generate is tagged with the svg namespace (ex. <svg:svg>...</svg:svg>) then placing the SVG XML data in the innerHTML of some div will actually work! Additionally, you don't want the SVG embedded in an object tag in IE since Adobe SVG Viewer always disables scripting when it determines that the SVG file is embedded using the OBJECT tag.

How to get it working in Firefox:

Ironically, even though Firefox supports SVG natively (in XHTML) you can't just stick it in the HTML without embedding it in an object(or embed, or iframe). So, we have to build the object and add the SVG data inline as I demonstrated earlier, but I'll give the complete example now:


// remove any old charts
while ($("reportSVGDiv").hasChildNodes()) {
 $("reportSVGDiv").removeChild($("reportSVGDiv").firstChild);
}
var svgObject = document.createElement('object');
svgObject.setAttribute('name', 'svg');
svgObject.setAttribute('codebase', 'http://www.adobe.com/svg/viewer/install/');
svgObject.setAttribute('classid', 'clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2');
svgObject.setAttribute('data', 'data:image/svg+xml,'+ str);
svgObject.setAttribute('width', '1050');
svgObject.setAttribute('height', '550');
svgObject.setAttribute('type', 'image/svg+xml');
$("reportSVGDiv").appendChild(svgObject);

How to get it working cross-browser:

The last piece in the puzzle is how to determine when we're in IE with the Adobe SVG viewer installed, and when we're not. To do that, I use a method to check for the Adobe SVG viewer:


// isASVInstalled
//
// utililty function to check for Adobe SVG viewer
//
function isASVInstalled() {
try {
 var asv = new ActiveXObject("Adobe.SVGCtl");
 return true;
}
catch(e){ }
return false;
}

Putting it all together:

With all the pieces in place, my final Javascript function to render the SVG inline with dynamic XML data received via Ajax from an SOA looks like:


// toSVG
//
// convert the report XML data to a SVG (scalable vector graphic) image
//
function toSVG() {
// first convert the XML to SVG using XSLT
var xslDom = zXmlDom.createDocument();
xslDom.async = false;
xslDom.load("chart.xsl");
var str = zXslt.transformToText(currentReportDOM.documentElement, xslDom);

// check if we're using the AdobeSVG viewer (Internet Explorer)
if (isASVInstalled() ) {
 $("reportSVGDiv").innerHTML = straw;
} else {
// otherwise, we're assuming firebug/Mozilla which can render the SVG directly
// if this was true XHTML instead of HTML, then firebug would also render it directly
// using the inheriting above, however, since it has to be HTML to make IA happy,
// we then have to wrap the SVG in an  tag
// You can wrap the SVG in an  tag for IA as well if you include the SVG from
// a file with a .svg extension, but since we're generating it dynamically, we don't
// have a file.  The HTML spec supports loading the data inline, however, since IE's
// MIME types depend on file extensions, this doesn't work in IA.

// remove any old charts
while ($("reportSVGDiv").hasChildNodes()) {
 $("reportSVGDiv").removeChild($("reportSVGDiv").firstChild);
}
var svgObject = document.createElement('object');
svgObject.setAttribute('name', 'svg');
svgObject.setAttribute('codebase', 'http://www.adobe.com/svg/viewer/install/');
svgObject.setAttribute('classid', 'clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2');
svgObject.setAttribute('data', 'data:image/svg+xml,'+ straw);
svgObject.setAttribute('width', '1050');
svgObject.setAttribute('height', '550');
svgObject.setAttribute('type', 'image/svg+xml');
$("reportSVGDiv").appendChild(svgObject);
}
}

I hope this helps someone and saves them from the aggravation I encounted trying to get this to work!

Blog renamed

2006-05-27T14:08:00.000-04:00

I decided to rename my blog. Until now, it had been entitled Pothoven's Pansophy

When I originally named it, I picked pansophy because I wanted a word for knowledge or wisdom that started with 'P' for some alliteration with my name. So, looking up knowledge or wisdom in a thesaurus I found:

pansophy
\Pan"so*phy\, n. [Pan- + Gr. ? wisdom, ? wise: cf. F. pansophie.] Universal wisdom; esp., a system of universal knowledge proposed by Comenius (1592 -- 1671), a Moravian educator.

However, every time I look at it, it looks too much like pansy. So, I'm renaming the blog to Pothoven Post to sound more like a newspaper, but still with the alliteration.

Ajax: HTML vs XML responses

2006-04-20T10:06:00.000-04:00

A friend of mine has a discussion on his blog regarding returning straight HTML or XML in your AJAX responses (see What type of data should an Ajax call return?)

I voiced a comment regarding my appreciation for the direction used by Rico where XML is always returned, though it may contain an HTML snippet such as:


<ajax-response>
<response type="element" id="personInfo">
[valid XHTML here]
</response>
</ajax-response>

where the type="element" id="personInfo" indicates to Rico to replace the innerHTML of the element with id personInfo with the contents of the response.

Or alternatively:


<ajax-response>
<response type="object" id="formLetterUpdater">
[valid XML data here]
</response>
</ajax-response>

The type="object" id="formLetterUpdater" calls a JavaScript object registered under the name matching the id of formLetterUpdater. That Javascript would then process the contents of the response as XML to extract whatever data is necessary.

For either mechanism, multiple "response" clauses can be returned in a single "ajax-response" allowing multiple sections of a web page to be updated from a single AJAX action if necessary.

My apprehension about this method is that the server side processing has too much knowledge about how the data will be used (by dictating the ids). Of course, that might be able to be handled by having the AJAX response send which ids it wants data for.

Of these two mechanisms from Rico, I think the XML data mechanism has the most flexibility, as it describes the data in XML and the UI can extract what it needs and format it correctly whether by coding manual JavaScript DOM processing as indicated with the formLetterUpdater above, or by utilizing XSLT on the browser to format it as desired. Using XSLT provides multiple advantages for formatting and re-formatting the data for the user without the need to communicate with the server over and over to format the HTML. For example, switching themes, languages, or switching from a table to a graph.

Wrapping long strings with XSL 1.0

2006-04-18T13:43:00.000-04:00

For my recent work with XML and XSL, I needed to wrap strings when generating a text report. I found examples online to do it, but they depended on XSL 2.0 functions such as the string tokenizer. I needed a way to do it with plain old XSL 1.0, so the solution I came up with is below. This solution is a bit more complex than necessary since I needed the ability to add markup around the wrapped lines (the prefix and suffix). Additionally, I needed the ability to add different markup before and after wrapped lines as well (the hangingPrefix and hangingSuffix). I could have taken it out to simplify this example, however, I thought some people might find it useful. Additionally, it's designed for all the prefixes and suffixes to be optional anyway. Here's my solution (the second template called splitString is the entry point):


 <!-- recursive section of splitString... don't call directly -->
 <xsl:template name="firstString">
  <xsl:param name="string" />
  <xsl:param name="length" />
  <xsl:param name="currentpos" />
  <xsl:param name="prefix" />
  <xsl:param name="hangingPrefix" />
  <xsl:param name="suffix" />
  <xsl:param name="hangingSuffix" />
  <xsl:param name="padding" />

  <xsl:choose>
   <xsl:when test="substring($string, $currentpos, 1) = ' '">
    <xsl:value-of select="substring($string, 1, $currentpos - 1)" />
    <xsl:value-of select="$suffix" />
    <xsl:value-of select="$newline" />

    <xsl:call-template name="splitString">
     <xsl:with-param name="string" select="substring($string, $currentpos + 1)" />
     <xsl:with-param name="length" select="$length" />
     <xsl:with-param name="prefix" select="$hangingPrefix" />
     <xsl:with-param name="hangingPrefix" select="$hangingPrefix" />
     <xsl:with-param name="suffix" select="$hangingSuffix" />
     <xsl:with-param name="hangingSuffix" select="$hangingSuffix" />
     <xsl:with-param name="padding" select="$padding" />
    </xsl:call-template>
   </xsl:when>
   <xsl:when test="substring($string, $currentpos, 1) = '/'">
    <xsl:value-of select="substring($string, 1, $currentpos)" />
    <xsl:value-of select="$suffix" />
    <xsl:value-of select="$newline" />

    <xsl:call-template name="splitString">
     <xsl:with-param name="string" select="substring($string, $currentpos + 1)" />
     <xsl:with-param name="length" select="$length" />
     <xsl:with-param name="prefix" select="$hangingPrefix" />
     <xsl:with-param name="hangingPrefix" select="$hangingPrefix" />
     <xsl:with-param name="suffix" select="$hangingSuffix" />
     <xsl:with-param name="hangingSuffix" select="$hangingSuffix" />
     <xsl:with-param name="padding" select="$padding" />
    </xsl:call-template>
   </xsl:when>
   <xsl:otherwise>
    <xsl:call-template name="firstString">
     <xsl:with-param name="string" select="$string" />
     <xsl:with-param name="length" select="$length" />
     <xsl:with-param name="currentpos" select="$currentpos - 1" />
     <xsl:with-param name="prefix" select="$prefix" />
     <xsl:with-param name="hangingPrefix" select="$hangingPrefix" />
     <xsl:with-param name="suffix" select="$suffix" />
     <xsl:with-param name="hangingSuffix" select="$hangingSuffix" />
     <xsl:with-param name="padding" select="$padding" />
    </xsl:call-template>
   </xsl:otherwise>
  </xsl:choose>
 </xsl:template>

 <!-- split a string to a specified size.
  Note: there is no newline at the end of the last line to allow additions to the end of the line
  
  string: string to split
  length: max length string can be per line
  prefix: optional string to prepend to the first line
  hangingPrefix:  optional string to prepend subsequent lines with
  suffix: optional string to append to the end of the first line
  hangingSuffix:  optional string to append to subsequent lines
  padding: optional string to pad the last line of a splt string with to allow extra text to be added after it
 -->
 <xsl:template name="splitString">
  <xsl:param name="string" />
  <xsl:param name="length" select="$maxLineLength" />
  <xsl:param name="prefix" />
  <xsl:param name="hangingPrefix" select="$prefix" />
  <xsl:param name="suffix" />
  <xsl:param name="hangingSuffix" select="$suffix" />
  <xsl:param name="padding" />

  <xsl:choose>
   <xsl:when test="(string-length($prefix) +
           string-length($string) + 
           string-length($suffix)) > $length">
    <xsl:variable name="currentpos" select="$length - string-length($suffix)" />
    <xsl:choose>
     <xsl:when test="contains(substring($string, 1, $currentpos), ' ') or
         contains(substring($string, 1, $currentpos), '/')">
      <xsl:call-template name="firstString">
       <xsl:with-param name="string" select="concat($prefix, $string)" />
       <xsl:with-param name="length" select="$length" />
       <xsl:with-param name="currentpos" select="$currentpos" />
       <xsl:with-param name="prefix" select="$prefix" />
       <xsl:with-param name="hangingPrefix" select="$hangingPrefix" />
       <xsl:with-param name="suffix" select="$suffix" />
       <xsl:with-param name="hangingSuffix" select="$hangingSuffix" />
       <xsl:with-param name="padding" select="$padding" />
      </xsl:call-template>
     </xsl:when>
     <xsl:otherwise>
      <!-- no line split character within maximum line length -->
      <xsl:value-of select="$prefix" />
      <xsl:value-of select="substring($string, 1, $currentpos - string-length($prefix))" />
      <xsl:value-of select="$suffix" />
      <xsl:value-of select="$newline" />

      <xsl:call-template name="splitString">
       <xsl:with-param name="string" select="substring($string, $currentpos + 1 - string-length($prefix))" />
       <xsl:with-param name="length" select="$length" />
       <xsl:with-param name="prefix" select="$hangingPrefix" />
       <xsl:with-param name="hangingPrefix" select="$hangingPrefix" />
       <xsl:with-param name="suffix" select="$hangingSuffix" />
       <xsl:with-param name="hangingSuffix" select="$hangingSuffix" />
       <xsl:with-param name="padding" select="$padding" />
      </xsl:call-template>
     </xsl:otherwise>
    </xsl:choose>
   </xsl:when>

   <!--  less than $length chars left, just write them -->
   <xsl:otherwise>
    <xsl:value-of select="$prefix" />
    <xsl:value-of select="$string" />
    <xsl:value-of select="$suffix" />
    <xsl:value-of select="substring($padding, 1, ($length - string-length($prefix) - string-length($string) - string-length($suffix))) " />
   </xsl:otherwise>
  </xsl:choose>
 </xsl:template>

Sorting groups in XSL

2006-04-18T13:08:00.000-04:00

For some of my recent work I had to generate reports from XML using XSL. One of the techniques I had to use frequently was grouping data using the Muenchian Method.

The referenced web page shows an example of getting a group of contacts and sorting it by surname. That's all well and good if your only computing the group once and processing it straight-forward as shown. But what if the XML data is large so calculating the group is costly (in terms of memory and CPU) and you need to use it multiple times and the order is important because you're using it within the context of processing some larger processing loop (ex. 10 at a time associated with another value)?

For an example, let's just say you need to generate a report that has a cover sheet listing all the unique surnames in your file, then separate statistics for each surname such as how many people share that surname. This is a very contrived example, but at least it will demonstrate what I mean.

Using the example in the referenced web page, we could build a list of unique sorted surnames to use in various places in our XSL via:


<xsl:key name="contacts-by-surname" match="contact" use="surname"/>
<xsl:variable name="surnames" select="contact[count(. | key('contacts-by-surname', surname)[1]) = 1]/surname"/>

<xsl:template match="/">
  <xsl:call-template name="sortList">
     <xsl:with-param name="list" select="$surnames"/>
  </xsl:call-template>
 
  <!-- list is now sorted to use whenever necessary -->
  <xsl:for-each select="$surnames">
    [process sorted surname]
  </xsl:for-each>
</xsl:template>


<!-- sort list by the value of its current node -->
<xsl:template name="sortList">
 <xsl:param name="list"/>
 <xsl:for-each select="$list">
      <xsl:sort select="." />
 </xsl:for-each>
</xsl:template>

The call to sortList will sort it for all subsequent uses.

So, to see it in action, here is our sample data:


<records>
 <contact id="0001">
  <title>Mr</title>
  <forename>John</forename>
  <surname>Smith</surname>
 </contact>
 <contact id="0002">
  <title>Dr</title>
  <forename>Amy</forename>
  <surname>Jones</surname>
 </contact>
 <contact id="0003">
  <title>Mr</title>
  <forename>John</forename>
  <surname>Doe</surname>
 </contact>
 <contact id="0004">
  <title>Mr</title>
  <forename>Jack</forename>
  <surname>Smith</surname>
 </contact>
 <contact id="0005">
  <title>Mr</title>
  <forename>Mike</forename>
  <surname>Jordan</surname>
 </contact>
 <contact id="0006">
  <title>Mr</title>
  <forename>Jim</forename>
  <surname>Johnson</surname>
 </contact>
 <contact id="0007">
  <title>Mr</title>
  <forename>Randy</forename>
  <surname>Jones</surname>
 </contact>
 <contact id="0008">
  <title>Mr</title>
  <forename>Bobby</forename>
  <surname>Jones</surname>
 </contact>
 <contact id="0009">
  <title>Mr</title>
  <forename>Glenn</forename>
  <surname>Smith</surname>
 </contact>
 <contact id="0010">
  <title>Mr</title>
  <forename>Bill</forename>
  <surname>McDonnald</surname>
 </contact>

</records>

Here is the complete style sheet:


<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <xsl:output method="text" indent="no" omit-xml-declaration="yes" />

 <xsl:variable name="newline">
  <!-- Hex 10 is a line feed, and hex 13 is a carriage return -->
  <xsl:value-of select="'&#13;'" />
 </xsl:variable>

 <!-- Remove all whitespace from the source XML so that it is not echoed into the new report -->
 <xsl:strip-space elements="//*" />

 <xsl:key name="contacts-by-surname" match="contact" use="surname" />
 <xsl:variable name="surnames" select="//contact[count(. | key('contacts-by-surname', surname)[1]) = 1]/surname" />

 <xsl:template match="/">
  <xsl:text>Full list of surnames:</xsl:text>
  <xsl:value-of select="$newline" />
  <xsl:for-each select="//surname">
   <xsl:value-of select="." />
   <xsl:value-of select="' '" />
  </xsl:for-each>
  <xsl:value-of select="$newline" />
  <xsl:value-of select="$newline" />

  <xsl:text>List of unique surnames:</xsl:text>
  <xsl:value-of select="$newline" />
  <xsl:for-each select="$surnames">
   <xsl:value-of select="." />
   <xsl:value-of select="' '" />
  </xsl:for-each>
  <xsl:value-of select="$newline" />
  <xsl:value-of select="$newline" />

  <xsl:call-template name="sortList">
   <xsl:with-param name="list" select="$surnames" />
  </xsl:call-template>

  <!-- list is now sorted to use whenever necessary -->
  <xsl:text>List of unique surnames (sorted):</xsl:text>
  <xsl:value-of select="$newline" />
  <xsl:for-each select="$surnames">
   <xsl:value-of select="." />
   <xsl:value-of select="' '" />
  </xsl:for-each>
  <xsl:value-of select="$newline" />
  <xsl:value-of select="$newline" />

  <xsl:text>People per surname:</xsl:text>
  <xsl:value-of select="$newline" />
  <xsl:for-each select="$surnames">
   <xsl:variable name="surname" select="."/>
   <xsl:value-of select="$surname" />
   <xsl:value-of select="' ('" />
   <xsl:value-of select="count(//contact[surname = $surname])" />
   <xsl:value-of select="'):'" />
   <xsl:value-of select="$newline" />
   <xsl:for-each select="//contact[surname = $surname]">
    <xsl:sort select="forname"/>
    <xsl:value-of select="'   '" />
    <xsl:value-of select="forename" />
    <xsl:value-of select="$newline" />
   </xsl:for-each>
   <xsl:value-of select="$newline" />
  </xsl:for-each>


 </xsl:template>

 <!-- sort list by the value of its current node -->
 <xsl:template name="sortList">
  <xsl:param name="list" />
  <xsl:for-each select="$list">
   <xsl:sort select="." />
  </xsl:for-each>
 </xsl:template>

</xsl:stylesheet>

And here is the report:


Full list of surnames:
Smith Jones Doe Smith Jordan Johnson Jones Jones Smith McDonnald 

List of unique surnames:
Smith Jones Doe Jordan Johnson McDonnald 

List of unique surnames (sorted):
Doe Johnson Jones Jordan McDonnald Smith 

People per surname:
Doe (1):
   John

Johnson (1):
   Jim

Jones (3):
   Amy
   Randy
   Bobby

Jordan (1):
   Mike

McDonnald (1):
   Bill

Smith (3):
   John
   Jack
   Glenn

Mastering Ajax

2006-02-24T09:34:00.000-05:00

These were posted to Ajaxian and had some useful tidbits:

3 part series on Mastering AJAX:
http://www-128.ibm.com/developerworks/web/library/wa-ajaxintro1.html
http://www-128.ibm.com/developerworks/web/library/wa-ajaxintro2/
http://www-128.ibm.com/developerworks/java/library/wa-ajaxintro3/index.html

2 part series on using SOAP with AJAX
http://www-128.ibm.com/developerworks/webservices/library/ws-wsajax/
http://www-128.ibm.com/developerworks/webservices/library/ws-wsajax2/

See the round-up of 30 AJAX tutorials for more useful information.

I'm also in the process of reading Ajax in Action which is very well written.

Enabling JSP in Tomcat

2006-01-30T17:29:00.000-05:00

Sometimes you just want to enable a directory on your tomcat server to be able to run JSP pages without actually installing a WAR or EAR file. Here are the essential steps to enable a directory to execute JSP files.

For this example, I'm setting it up on a SuSE Linux system so your directory structure may vary.

Create a JSP directory in your tomcat webapps directory. In this case, the default webapps directory for Tomcat is /srv/www/tomcat5/base/webapps/ so I make a jsp directory there.

Under the jsp directory I create the basic webapp directory structure and create a directory named /srv/www/tomcat5/base/webapps/jsp/WEB-INF

In the WEB-INF directory, I create a basic deployment descriptor named web.xml which looks like:


<?xml version="1.0" encoding="ISO-8859-1"?>
PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/j2ee/dtds/web-app_2_3.dtd">
<web-app>
   <display-name>My JSPs<display-name>
</web-app>

In the tomcat configuration directory /etc/tomcat5/base/Catalina/localhost add the context path for the JSPs in a file named jsp.xml that looks like:
```
<Context path="/jsp" docBase="jsp"
        debug="0" reloadable="true" />
```

Restart Tomcat (rctomcat5 restart)

Create some sample JSP file in the jsp directory (/srv/www/tomcat5/base/webapps/jsp such as:


<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1><%= "Hello World" %><h1>       
</body>
</html>

Make sure it's working via http://localhost:8080/jsp/index.jsp

I run Tomcat under Apache via mod_jk so that I can utilize the SSL layer of Apache. So, to make the JSP transparently accessible from Apache, I update the /etc/apache2/conf.d/jk.conf and add the following lines:


    # Add the jsp directory
    Alias /jsp "/srv/www/tomcat5/base/webapps/jsp"
    <Directory "/srv/www/tomcat5/base/webapps/jsp">
        Options Indexes FollowSymLinks
        allow from all
    </Directory>
    JkMount /jsp ajp13
    JkMount /jsp/* ajp13
    <Location "/jsp/WEB-INF/">
        AllowOverride None
        deny from all 
    </Location>

After restarting Apache (rcapache2 restart) I can then reference the JSPs directly from Apache, such as http://localhost/jsp/index.jsp

Multimedia setup for SuSE 10

2006-01-30T12:51:00.000-05:00

This was a very useful resource for setting up multimedia capabilities for SuSE 10:
http://www.thejemreport.com/mambo/content/view/178/42/

Additionally, adding some of the extra Yast software sources from http://www.suseforums.net/index.php?showtopic=18575 or http://www.opensuse.org/Additional_YaST_Package_Repositories#External_YaST_Repositories is useful.

Current Earth image wallpaper

2006-01-30T11:16:00.000-05:00

When I'm using Windows, I use WeatherPulse to display the current satelite picture on my desktop (the "GOES E on Color" option). I'm very happy with it and wanted something similar on my SuSE Linux KDE desktop. To do that, I used XPlanet. Below are the setup steps I followed:

Install xplanet RPM if not already installed.

I made a .xplanet directory in my home directory in which I copied the config file from /usr/share/xplanet/config

In the [earth] section of the config file, I added the lines:


map=/home/username/.xplanet/earthmap4k.png
bump_map=/home/username/.xplanet/earthbump4k.png
bump_scale=5
cloud_map=/home/pothoven/.xplanet/clouds.jpg

To get the dynamic cloud map, I downloaded the download_clouds.pl Perl script from http://xplanet.sourceforge.net/clouds.php to my .xplanet directory. Note: you may wish to change this line in the script to suite your preferences:
```
my $MaxDownloadFrequencyHours = 1;
```

I then added this line to my crontab
```
0 * * * * cd /home/username/.xplanet; perl download_clouds.pl > /dev/null
```
to update the cloud information once an hour

To get the topography and enahanced coloring maps in my config, they can be purchased from J.H.T.'s Planetary Pixel Emporium (though a Google search for earthmap4k may reveal other sources).

If you want to track a satelite, such as the Hubble telescope or International Space Station (ISS), download the lastest tracking data with either:
```
wget -O science.tle http://www.celestrak.com/NORAD/elements/science.txt
```
for scientific satelites (Hubble) or:
```
wget -O stations.tle http://celestrak.com/NORAD/elements/stations.txt
```
for space stations (ISS). In the resulting science.tle file, you will see a section with the header "HST" (Hubble space telescope), place those lines in a file named hubble.tle which will then look like:
```
HST
1 20580U 90037B   06008.34262361  .00000587  00000-0  33114-4  0       5098
2 20580  28.4688  11.8178 0003636 285.4875  74.5312  14.99943058661070
```
If you also want to track the IST, also add the "ISS (ZARYA)" lines from the stations.tle file. These lines will look something like:
```
ISS (ZARYA)
1 25544U 98067A   06009.46434028  .00013978  00000-0  10043-3 0  1177
2 25544  51.6445 283.5661 0010748 133.7206 217.3373 15.73896465408147
```
Then, create a file named hubble in your .xplanet directory that contains:
```
20580 "" image=hubble.png transparent={0,0,0} trail={orbit,-10,0,5} color=green
```
for tracking the Hubble and/or:
```
25544 "" image=iss.png transparent={0,0,0} trail={orbit,-10,0,5} color=green
```
for tracking the space station. Finally, add this line to the [earth] clause of the config:
```
satellite_file=/home/username/.xplanet/hubble
```

Finally, set it up in KDE. right click on the background.

Select Configure Desktop.

Click on Background in the left hand panel.

In the Background group box, I have No picture selected.

Click on Advanced Options.

I have Use the following program for drawing the background checked.

Select XPlanet in the list.

Click on Modify.

My Command entry is:


xplanet  --config /home/username/.xplanet/config
      --geometry %xx%y --num_times 1 --output %f.jpg
      --latitude 27.96 --longitude -82.48 --radius 60 &&
      mv %f.jpg %f

(the latitude and longitude is for where I live -- adjust to suit)

My Preview cmd entry is the same as above.

I have my Refresh time set to 5 minutes if I'm tracking satellites, and 30 minutes if not.

Enjoy a dynamic updating picture of the earth such as:

Update - December 19, 2007

First off, I want to point out that XPlanet is an option for Windows as well. See XPlanet on Microsoft Windows. You can use the same Perl script to download the latest cloud cover image using ActivePerl. When you run XPlanet use the -fork option to have it periodically update the background.

Secondly, the instructions above were for KDE, but if you use Gnome, here are the instructions to get XPlanet to work with Gnome2.

Encoding email addresses

2006-01-25T13:53:00.000-05:00

Here is a handy online tool I use to encode email addresses on my web
pages so that spammers won't find it via automated searches.

http://automaticlabs.com/enkoderform/

Using XML in Ajax (with PHP)

2006-01-25T10:38:00.000-05:00

In support of my earlier post about using the XMLHttpRequest object for XML, here is a nice article demonstrating the use of the responseXML attribute of the XMLHttpRequest with PHP. Here is another.

Also, just for reference here are a few nice sites discussing developments in AJAX:
Ajaxian
AJAX blog
AJAX Matters
ajax info

As well as some good usage guideline articles:
Ajax Mistakes
XMLHttpRequest Usability Guidelines

Detecting email problems

2006-01-25T09:29:00.000-05:00

This is just a little tip for detecting email issues with your web
hosting provider. Myself and some friends of mine were experiencing
email loss with our hosting provider. So, in order to provide some
imperial data we set up a couple of automated processes to send
ourselves email every 5 minutes. We set up one process on the
provider's server which sent to an email account in question on the
provider's server, as well as an external control account. Then we set
up another process on another server outside of the hosting provider's
realm to send email to the same email account in question on the hosting
provider and the control account. The external email account was our
control set to monitor that all the email messages were actually
transmitted.

The setup (done on both the hosted server and the secondary server):

Make a test message such as:


Subject: 5min Test from [servername]
From: Automated Test <test@mydomain.com>

Test email.

The header information in the test message is useful for adding filters
to your email client. The blank line is necessary after the header
lines in order for sendmail to recognize it as a header.

We then set up a simple cron process


*/5 * * * * /usr/sbin/sendmail -i email@mydomain.com,control@gmail.com < testemail.txt

This will send out the message every 5 minutes (every minute divisible
by 5). Then it is just a matter of scanning the email received for
missing emails.
In the end, we were able to detect email loss as well as delayed email.
The hosting provider was then able to make some adjustments to stop the
loss. During peek load times, some email still gets lost for a hour or
two, but does eventually show up.

Ajax in practice

2006-01-23T10:49:00.000-05:00

In my research of using AJAX, I've run across plenty of nice examples. Most of the examples consist of the basics of building and using an XMLHttpRequest such as:


function createRequestObject() {
var ro;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
  ro = new ActiveXObject("Microsoft.XMLHTTP");
}else{
  ro = new XMLHttpRequest();
}
return ro;
}
var http = createRequestObject();

The use that XMLHttpRequest object to submit the request to the back-end server such as:


function sendRequest(action) {
 http.open('get', 'ajaxHandler.php?action='+action);
 http.onreadystatechange = handleResponse;
 http.send(null);
}

And finally some function to update the browser page based on the result:


function handleResponse() {
/* The XMLHttpRequest object has a property called readyState with several states:
    0: Uninitialized
    1: Loading
    2: Loaded
    3: Interactive
    4: Finished
*/
if(http.readyState == 4){
var response = http.responseText;
document.getElementById('divName').innerHTML = response;
}
}

That's all well and good, but is seems like a misuse of an XMLHttpRequest to send a plain text (or HTML) response. We have a perfect opportunity to separate presentation from data and everyone seems to mash them together on the back-end instead of letting the browser handle the rendering. At least the example here demonstrates using the responseXML property of the XMLHttpRequest object instead of only the text response which is nice.

One of the worst abuses that I've encountered so far seems to b e the Google Suggest implementation. In my past research of AJAX I ran across this excellent piece by Chris Justus about how Google used AJAX to implement Google Suggest. I must say, I'm disappointed with how the folks at Google did that. As Chris demonstrates, they actually return a JavaScript snippet which it then invoked by the browser to add the search suggestions.

Sample returned value:


sendRPCDone(frameElement, "fast bug", 
new Array("fast bug track", "fast bugs", "fast bug", "fast bugtrack"),
new Array("793,000 results", "2,040,000 results", "6,000,000 results", "7,910 results"),
new Array(""));

The actual sendRPCDone method is previously loaded in the web page, but they instruct the browser to invoke it was it gets the response. Obviously it works, and is very fast, but the data just seems too bound to the implementation. Why not just return the data in a format that can be used in this page, and possibly other functions? Something like:


<suggestions>
 <search>fast bug</search>
 <suggestion>
     <value>fast bug track</value>
     <occurs>793,000</occurs>
 </suggestion>
 <suggestion>
    <value>fast bugs</value>
    <occurs>2,040,000</occurs>
 </suggestion>
 <suggestion>
    <value>fast bug</value>
    <occurs>6,000,000</occurs>
 </suggestion>
 <suggestion>
    <value>fast bugtrack</value>
    <occurs>7,910</occurs>
 </suggestion>
</suggestions>

Publication

2006-01-20T14:07:00.000-05:00

I ran across this link to a paper based on my Master's thesis. My graduate advisor, Dr. David Workman, edited my paper and presented it at conference a couple years ago.

He has apparently turned it into the topic of a whole course which I became aware of when some of his students contacted me about the source code that was used in the program this paper discusses. Here is a link to the course information. The full text of the above mentioned paper is available from this course page.

It's nice to know that your work still has life after you graduate!

Changing FeedCreator.class.php for Podcasting

2006-01-20T10:25:00.000-05:00

As I mentioned in my Podcasting HowTo, I used Kai Blankenhorn's FeedCreator.class.php as the basis of my podcasting feed. In this posting I will detail my additions to his code to support podcasting and iTunes.

You may download the final file here

First, at line 31, I updated the change log:


v1.7.2-iTunes
  added support for iTunes tags
v1.7.2-podcast
  added support for podcast (added enclosure)
  made the Item category be an Array as you are allowed to specify
     multiple category elements in the RSS spec

Then, at what becomes line 173 (after the changelog changes), I added
these classes:


/**
* Version string.
**/
define("FEEDCREATOR_VERSION", "FeedCreator 1.7.2-iTunes");
/**
* An Enclosure is a part of an Item
*
* @author Steven Pothoven <steven@pothoven.net>
* @since 1.7.2-podcast
*/
class Enclosure {
 /**
  * Attributes of an enclosure
  */
 var $url, $length, $type = "audio/mpeg";
}
/**
* iTunes extensions to RSS 2.0
*
* @author Steven Pothoven <steven@pothoven.net>
* @since 1.7.2-iTunes
*/
class iTunes {
 /**
  * This tag can only be populated using iTunes specific categories.
  */
 var $category, $subcategory;
 /**
  * This tag should be used to note whether or not your Podcast contains explicit material.
  * There are 2 possible values for this tag: Yes or No
  */
 var $explicit;
 /*
  * At the Channel level, this tag is a short description that provides general information about the Podcast. It will appear next to your Podcast as users browse through listings of Podcasts
  * At the Item level, this tag is a short description that provides specific information for each episode.
  * Limited to 255 characters or less, plain text, no HTML
  */
 var $subtitle;
 /*
  * At the Channel level, this tag is a long description that will appear next to your Podcast cover art when a user selects your Podcast.
  * At the Item level, this tag is a long description that will be displayed in an expanded window when users click on an episode.
  * Limited to 4000 characters or less, plain text, no HTML
  */
 var $summary;
 /*
  * At the Channel level this tag contains the name of the person or company that is most widely attributed to publishing the Podcast and will be displayed immediately underneath the title of the Podcast.
  * If applicable, at the item level, this tag can contain information about the person(s) featured on a specific episode.
  */
 var $author;
 /*
  * This tag is for informational purposes only and will allow users to know the duration prior to download
  * The tag is formatted: HH:MM:SS
  */
 var $duration;
 /*
  * This tag allows users to search on text keywords
  * Limited to 255 characters or less, plain text, no HTML, words must be separated by spaces
  */
 var $keywords;
 /*
  * This tag contains the e-mail address that will be used to contact the owner of the Podcast for communication specifically about their Podcast on iTunes.
  * Required element specifying the email address of the owner.
  */
 var $owner_email;
 /*
  * Optional element specifying the name of the owner.
  */
 var $owner_name;
 /*
  * This tag specifies the artwork for the Channel and Item(s). This artwork can be larger than the maximum allowed by RSS.
  * Preferred size: 300 x 300 at 72 dpi
  * Minimum size: 170 pixels x 170 pixels square at 72 dpi
  * Format: JPG, PNG, uncompressed
  */
 var $image;
 /*
  * This tag is used to block a podcast or an episode within a podcast from being posted to iTunes. Only use this tag when you want a podcast or an episode to appear within the iTunes podcast directory.
  */
 var $block;
}

In the FeedItem class I added these lines at the new line 283:


      /**
       * Support for attachments
       */
      var $enclosure;
      /**
       * Support for iTunes
       */
      var $itunes;

In the _setFormat function, I added a new case at the new line 491:


          case "PODCAST":
              $this->_feed = new PodcastCreator();
              break;

In the createFeed function, I added the iTunes extentions at line
1102:


              /* iTunes add iTunes specific tags */
              if ($this->itunes!="") {
          if ($this->itunes->category!="") {
             $feed.= " <itunes:category text=\"".htmlspecialchars($this->itunes->category)."\">\n";
             if ($this->itunes->subcategory!="") {
                $feed.= " <itunes:category text=\"".htmlspecialchars($this->itunes->subcategory)."\"/>\n";
             }
             $feed.= "        </itunes:category>\n";
          }
          if ($this->itunes->explicit!="") {
             $feed.= " <itunes:explicit>".$this->itunes->explicit."</itunes:explicit>\n";
          }
          if ($this->itunes->subtitle!="") {
             $feed.= " <itunes:subtitle>".htmlspecialchars($this->itunes->subtitle)."</itunes:subtitle>\n";
          }
          if ($this->itunes->summary!="") {
             $feed.= " <itunes:summary>".htmlspecialchars($this->itunes->summary)."</itunes:summary>\n";
          }
          if ($this->itunes->author!="") {
             $feed.= " <itunes:author>".htmlspecialchars($this->itunes->author)."</itunes:author>\n";
          }
          if ($this->itunes->keywords!="") {
             $feed.= " <itunes:keywords>".htmlspecialchars($this->itunes->keywords)."</itunes:keywords>\n";
          }
          if ($this->itunes->owner_email!="") {
             $feed.= "        <itunes:owner>\n";
             $feed.= " <itunes:email>".$this->itunes->owner_email."</itunes:email>\n";
             if ($this->itunes->owner_name!="") {
                $feed.= " <itunes:name>".$this->itunes->owner_name."</itunes:name>\n";
             }
             $feed.= "        </itunes:owner>\n";
          }
          if ($this->itunes->image!="") {
             $feed.= " <itunes:link rel=\"image\" type=\"image/jpeg\" href=\"".$this->itunes->image."\">[image]</itunes:link>\n";
          }

and additional iTunes and podcast extensions at line 1154:


                /* podcasts add the enclosure element */
          if ($this->items[$i]->enclosure!="") {
             $feed.= " <enclosure url=\"".str_replace(" ", "%20", htmlspecialchars($this->items[$i]->enclosure->url)).                                "\" length=\"".htmlspecialchars($this->items[$i]->enclosure->length).                               "\" type=\"".htmlspecialchars($this->items[$i]->enclosure->type).                               "\"/>\n";
          }
                /* iTunes add iTunes specific tags */
          if ($this->items[$i]->itunes!="") {
              if ($this->items[$i]->itunes->category!="") {
                 $feed.= " <itunes:category text=\"".htmlspecialchars($this->items[$i]->itunes->category)."\">\n";
                 if ($this->items[$i]->itunes->subcategory!="") {
                    $feed.= " <itunes:category text=\"".htmlspecialchars($this->items[$i]->itunes->subcategory)."\"/>\n";
                 }
                 $feed.= "            </itunes:category>\n";
              }
              if ($this->items[$i]->itunes->explicit!="") {
                 $feed.= " <itunes:explicit>".$this->items[$i]->itunes->explicit."</itunes:explicit>\n";
              }
              if ($this->items[$i]->itunes->subtitle!="") {
                 $feed.= " <itunes:subtitle>".htmlspecialchars($this->items[$i]->itunes->subtitle)."</itunes:subtitle>\n";
              }
              if ($this->items[$i]->itunes->summary!="") {
                 $feed.= " <itunes:summary>".htmlspecialchars($this->items[$i]->itunes->summary)."</itunes:summary>\n";
              }
              if ($this->items[$i]->itunes->author!="") {
                 $feed.= " <itunes:author>".htmlspecialchars($this->items[$i]->itunes->author)."</itunes:author>\n";
              }
              if ($this->items[$i]->itunes->keywords!="") {
                 $feed.= " <itunes:keywords>".htmlspecialchars($this->items[$i]->itunes->keywords)."</itunes:keywords>\n";
              }
              if ($this->items[$i]->itunes->duration!="") {
                 $feed.= " <itunes:duration>".$this->items[$i]->itunes->duration."</itunes:duration>\n";
              }
              if ($this->items[$i]->itunes->image!="") {
                 $feed.= " <itunes:link rel=\"image\" type=\"image/jpeg\" href=\"".$this->items[$i]->itunes->image."\">[image]</itunes:link>\n";
              }

Finally, I added the PodcastCreator class at line 1235:


/**
* PodcastCreator is a FeedCreator that implements Podcast
*
* @see http://backend.userland.com/rss
* @since 1.7.2-podcast
* @author Steven Pothoven <steven@pothoven.net>
*/
class PodcastCreator extends RSSCreator20 {
function PodcastCreator() {
   parent::_setRSSVersion("2.0");
   parent::_setXMLNS("itunes=\"http://www.itunes.com/DTDs/Podcast-1.0.dtd\"");
}
}

Podcasting HowTo

2006-01-20T09:42:00.000-05:00

As I mentioned in my last post, I added podcasting to our church web site. Today I thought I'd share how I did that for those interested in doing something similar.

To start with, I place all the sermon MP3 files into a separate directory. The MP3 files themselves adhere to the naming standard of:

SermonDate_Speaker_Passage.mp3

Where the date is in YYMMDD format. So, this past weeks sermons file is named:

060115_John Keen_Mark 1;1-8.mp3

This makes it very easy add sermons to the list by just uploading the file. Note: the passage uses a ';' to delineate chapter and verse instead of a ':', this is because a ':' is not allowed in a filename on some systems (Windows). The code will correct that when displayed.

I started with a simple table to be shown on the web page. Shortly after that I thought an RSS feed of the contents would be handy so people could be motified of new sermons without visiting the web page. The RSS feed lead to the podcast feed, as they are nearly the same thing.

They all essentially do the same thing, so I'll skip right to the podcast version. However, I'll share one little tidbit from the web page version. From the table on the web page, you can either stream the MP3, or download the file. Streaming an MP3 file from your server doesn't take any special software. I wrote a simple PHP script which I name m3u.php which allows me to stream any MP3 file. The contents of the m3u.php looks like:


<?php
header("Content-Type: audio/x-mpegurl");
print 'http://www.hostname.com/path/to/mp3/' . $_GET['filename'];
?>

So, in my table code, invoke it as (in PHP):


<a href="sermons/m3u.php?filename=' . $filename . '">

To make the podcast feed, I started with Kai Blankenhorn's FeedCreator.class.php. It worked very well for the RSS feed, but it doesn't support the podcast extensions. So, I updated it to add the podcast and iTunes extensions to RSS. If you're interested, I'll be happy to provide my updated version. I'll summarize the changes in a separate post so I don't make this post too long.

Now, I'll walk through my podcast generating PHP class. First, I need a function to list all the files in my mp3 directory:


// Function list_dir will list all the files in a given directory
//
function list_dir($dirname)
{
   static $result_array = array();
   $handle=opendir($dirname);
   while ($file=readdir($handle)) {
      // ignore the current and parent directory references ('.' and '..')
      if (0 == strpos($file, '.')) {
         continue;
      }
      $result_array[]=$file;
   }
   closedir ($handle);
   return $result_array;
}

I then set up the common header portion of the podcast feed:


$rss = new UniversalFeedCreator();
// if cache is less than 12 hours (43200 seconds) old, use it
// this is because the feed only changes once a week to begin with, and this
// script does a lot of ID3 tag manipulation which can take a while
$rss->useCached("PODCAST", "sermons/podcast.xml", 43200);
$rss->title = "Seminole PCA Sermons";
$rss->description = "Recent sermons from the pulpit of Seminole Presbyterian Church";
$rss->language = "en-us";
$rss->link = "http://www.seminolepca.org";
$rss->webmaster = "webadmin@seminolepca.org";
$rss->docs = "http://blogs.law.harvard.edu/tech/rss";
$rss->syndicationURL = "http://www.seminolepca.org/".$PHP_SELF;
$rss->category = "Religion";

$image = new FeedImage();
$image->title = "Seminole PCA, Tampa, FL";
$image->url = "http://www.seminolepca.org/images/rss-SPC.jpg";
$image->link = "http://www.seminolepca.org";
$image->description = "Feed provided by seminolepca.org. Click to visit.";
$image->width = 144;
$image->height = 204;
$rss->image = $image;

$itunes = new iTunes();
$itunes->category = "Religion & Spirituality";
$itunes->subcategory = "Christianity";
$itunes->subtitle = $rss->description;
$itunes->owner_email = "church@seminolepca.org";
$itunes->owner_name = "Seminole Presbyterian Church";
$itunes->author = "Seminole Presbyterian Church";
$itunes->image = "http://www.seminolepca.org/images/podcast-SPC.jpg";
$rss->itunes = $itunes;

Now, I loop through my list of mp3 files to build the contents of the podcast feed:


// PHP code to dynamically generate RSS feed
//
// Start of code -------
$mp3dir="sermons/mp3";
// get a list of the "mp3" directory
$array=list_dir($mp3dir);
// reverse sort the array (puts newest sermon first)
rsort ($array);
reset ($array);

// for each file in the filelist, generate the appropriate HTML table code
foreach ($array as $filename) {
   // break apart the filename into the 3 data fields; date, speaker,
   // and subject using file naming convention:
   // YYMMDD_Speaker_Passage.mp3
   //
   $tok = strtok($filename, "_");
   $unixdate = mktime(0, 0, 0, substr($tok, 2, 2), substr($tok, 4, 2), substr($tok, 0, 2));
   $sermondate=date("F d, Y", $unixdate);
            
   $tok=strtok("_");
   $speaker=$tok;
   $tok=strtok(".");
   $passage=$tok;
   $chapter = strtok($passage, ";");
   $verse = strtok(".");
   if ($verse !== false) {
      $passage = $chapter . ':' . $verse;
   } else {
      $passage = $chapter;
   }

at this point in my PHP code, I also use the getid3 PHP library to ensure that all the ID3 tags are set correctly in the mp3 file. This is not important for actually generating the podcast feed, so I'll omit it here.


   $item = new FeedItem();
   $item->title = $speaker . ' on ' . $passage;
   $item->link = "http://www.seminolepca.org/" . $mp3dir . "/" . $filename;
   $item->description = $sermondate . ' - ' . $speaker . ' expounds on ' . $passage;
   $item->date = $unixdate;
   $item->source = "http://www.seminolepca.org";
   $item->author = $speaker;
   $item->enclosure = new Enclosure();
   $item->enclosure->url = "http://www.seminolepca.org/" . $mp3dir . "/" . $filename;
   $item->enclosure->length= $id3['filesize'];
   $item->category[] = $itunes->category;

   $item->itunes = new iTunes();
   $item->itunes->category = $itunes->category;
   $item->itunes->subcategory = $itunes->subcategory;
   $item->itunes->keywords = "Seminole Presbyterian Church PCA Reformed Christian Sermon Tampa Florida FL";
   $item->itunes->summary = $item->description;
   $item->itunes->author = $item->author;
   $item->itunes->duration = $id3['playtime_string'];
   $item->itunes->image = "http://www.seminolepca.org/images/podcast-SPC.jpg";
   $rss->addItem( $item);
}

Finally, I save feed for caching purposes and return it:


$rss->saveFeed("PODCAST", "sermons/podcast.xml");

The resulting podcast XML can be seen here.

Once that's working, go register you feed at the various podcast directories such as:
iPassage (if you podcasting sermons)
iPodder
Podcast.net
Podcast Alley
iTunes (HowTo)

I published my feed in iPodder, Podcast.net, and Podcast Alley and was automatically propagated to other directories including the iTunes Store.

For reference, here is the official Apple iTunes/Podcasting specification.

Podcasting

2006-01-19T17:13:00.000-05:00

One of the things I do outside of my job is maintain the website for my church. I attend Seminole Presbyterian Church (http://www.seminolepca.org). On that site I added podcasting for our sermons and was recently interviewed by a reporter at the St. Petersburg Times regarding the podcasting. You can read the article here or from the archive here.

I will be redesigning that page soon and will probably be incorporating some AJAX techniques, so I will be adding posts regarding AJAX soon.

About my blog

2006-01-19T16:53:00.000-05:00

Hello, my name is Steven Pothoven, welcome to my blog!

I am a software architect / software engineer for IBM. I have a Master's degree in Computer Science and have been working at IBM since 1995. My specialty is in object-oriented development using Java (J2EE) and I am also a IBM Certified Solution Developer for XML and Related Technologies. The natural progression of my career has moved me toward SOA (Service Oriented Architecture) as both Java and XML are key technologies.

This blog will primarily focus on various computer technologies as I happened to be researching various topics, or reading interesting articles.