Foss River - 6/7/2008

Even though I wasn't feeling up for an adventure, it had definitely been too long since I went kayaking last. So I tagged along with Kennet, Boris, and Jeremy to the Foss River. Since my rack was broken, I even had to have them pick me up at my place.

We got to the takeout around 11:15AM and since we only had two small cars, we couldn't drop shuttle, so we continued on up to the putin.  Along the way, we spotted some wood that we'd defintely want to scout. The consensus, since none of us had paddled recently, was to putin at the FS 68 bridge across the Foss River.  Once we got there, one of us, who shall remain nameless, realized that he had left all of his gear in his car at the Park and Ride in Seattle.  So he had to stay with the down car while we went down river.

Once all the shuttling was taken care of, Kennet, Jeremy, and I put on in class I.  In the future, I'm never going to putin at the upper putin. It was all class I with lots (3-4) portages due to log jams.  It's much better to do the quick bushwack at the FS 6830 fork.

However, once we got to the main section of the river, it was great class III boogy water.  The Skykomish gauge was at 8,800 CFS when we left and came down to about 7,800 CFS by the time we got home.  This is probably the lowest I'd run it with snow melt unless I was really desparate.  Below this level, I think it wouldn't be as fun.

The river started to pick up and we started haven't to eddy hop down.  We also ran into the wood we saw from the road.  The first portage is really easy (at this level).  It's just a single large tree across the entire river.  I found an eddy directly above the log on river right.  The next portage was not mandatory, but it look really risky.  You'll see a small try (10 inch diameter base) coming in from river left.  Definitely get out to scout.  There's another, larger, tree down stream of it on the right.  We ended up portaging the small tree, and sneaking the river right tree on the left.  However, we had to make a ferry back to the right to finish the drop.

We soon came upon Ken & Barbie, the hardest drop on the run.  Remember, there's a tree coming in on river left above it.  I went first and totally *$#@ed up.  I ended up penciling into a fold, getting flipped vertically, then I missed 1 or 2 rolls.  I hadn't really looked at the runout, but it definitely is not a pool.  I had a scary moment trying to get away from the rootball on the river left, but managed to make my way river right.

After we all collected ourselves in the eddy directly across from the rootball on river right, we continued on down.  It definitely would have been worth a scout though.  I ended up going center and would most definitely have pinned at lower water.  The cleanest line is running left, but there are some holes there, so watch out.  I suggest finding an eddy, getting out, and having a look for yourself.

After that though, the river calms down quite a bit and returns to class III boogy water.  We decided to take out at the railroad bridge to save on time, but it was kind of moot because we had already taken so much time with the upper section.

Overall it was a very nice run.  I definitely need to check my outfitting though, because I did not feel snug in my boat.  I used to look down on this run a bit, but now I think it's a really good class IV section.  If you putin at the lower putin and take out at the railroad or car bridge, then you can definitely do a couple laps in a day.  It's not worth going to the Tye River, if you want to make it a longer trip, just run it again.

Getting the Permit

It's almost every paddler's dream to paddle down the Colorado River through the Grand Canyon.  There's just something special about being on a river for 3+ weeks, being gone from civilation, and seeing the amazing places that the Grand Canyon has to offer.  I first signed up on "The List" back in 2005.  At that point, there was a 10-20 year waiting list due to how the list was managed.  In 2006, they implemented a weighted lottery system.  This allowed those who had been on the list a long time to be weighted more than those who were relatively new.  When the list was implemented, I ended up with 8 "points" or tickets to use in the lottery.  Every year I would pick the dates I wanted, usually at the end of May or beginning of June, but I never won.  I wasn't that worried because every year I didn't win a spot, another point was added and I knew that eventually the probability would swing in my favor.

One of the reasons that the old list failed so miserably, was that over 50% of the permit winners cancelled their trips.  Those cancelled trips would be added to a recording that you could call into every Friday and then email or write a letter to the National Park Service (NPS) to add your name to a cancelled date.  People who knew this, because many didn't, and were willing to wait on the phone for 45 minutes a week, were able to get on the Grand almost every year.  With the new system, and its web based interface, everyone who has applied for the year gets an email notifying them of cancelled trips.

Most of the time I ignore these cancelled trip notifications, but for some reason, when I got one on October 19th, 2007, I decided to log on to their web site and apply for one of the cancelled trips.  Most of the trips were in December, January, and February.  I wasn't really interested in a winter trip, so I decided to apply for the latest date possible, March 5th, 2008.  I figured that Arizona probably has nice weather in March.

Now, I was excepting a "Sorry but you didn't win" email to come about a week later, but to my surprise, I actually won the permit.  That put me into a huge panic, because I had nothing setup.  I could have declined the permit, but I decided to see if I could put a trip together.  You only have a week to reserve the trip with a $400 deposit, so I had to work fast.  Afterwards, I looked to see how many "tickets" where in the system for the 3/5 cancellation permit.  As expected, of all the cancelled trips, that date, being the latest possible, had the most points towards it, 135.  Since I had 9 points at the time and there were two permits available for that date, my chances of winning were 13%.  I definitely sucked out with this one.

I started emailing all my kayaking friends, asking if they wanted to go.  I figured that most people couldn't take 3+ weeks of time off from work or school, so I wasn't expecting a lot of yeses.  I wasn't even sure that I could take that much time off from my job, but I was willing to buck the system to make this trip happen.  I also needed to find skilled rafters to row the rafts with the gear down river.  I didn't know any rafters, so I wasn't very optimistic.

We all know that kayakers will take a day off just because the water levels are right, so I should have known that if I dangled a big carrot like a Grand Canyon trip, people would make it happen.  Eight of my friends made the commitment, so I decided to fork up the cash for the deposit.

Over the next week or so, we found 7 more people to go.  Those who were my friends, had friends of their own who were interested.  In the end, we had 5 experienced rowers (well maybe 4 who were actually "experienced"), one rower who had rowed the Canyon before, an ER doctor, and an ER nurse.

Now that we had our crew, I just had to figure out how we were going to pull this off in such a short time span. 

Preparing for the Trip

Now that we had a permit and the group set, we had to make this trip happen.  Planning the logistics of a 3 week trip is toch enough, but a 3 week trip on a river totally cut off from civiliation was frightening.  Luckily, a friend of mine used to be a commercial raft guide on the Grand Canyon.  As soon as I got my permit, I started pestering him with questions.  His best advice was to go with an outfitting company for the raft gear and food.  Not only do they do a ton of work for you, they also know all the regulations.  So you're less likely to forget some important piece of equipment.

We ended up going with Professional River Outfitters (PRO).  They are probably the most expensive, but only by a little, and they have a very solid setup.  They will help you figure out what gear you need and have pre-written menus to choose from.  However, I don't recommend the Powell Meal Plan.  Their staff walked me through everything, and I felt very well taken care of.

With all the planning I was going, I was getting pretty burnt out, so I asked for help from the group.  In the end, we had coordinators for the following:

• General Logistics
• Booze
• Duty Roster
• Food
• Travel/Meeting
• Driving
• Kayak Gear
• Lodging

Everyone did a great job with their tasks and I felt a lot better about this trip actually being pulled off.  Since there was a ton of information to deceminate amongst the group, I started gathering it in a single document that I called the trip's God Book.  The idea was to take a couple copies on the trip, so we wouldn't have to remember anything.  PRO also gave us 2 binders with our menu and their Primer, which was invaluable.  With the addition of the trip God Book, we definitely had all the information we needed at our finger tips.

Now that most of the planning was either completed or well on its way, I had to figure out my own personal gear to bring.  I definitely wanted to kayak, even though I had heard that the Colorado River through the Grand Canyon was mostly flatwater.  Because I knew my back wouldn't be able to handle kayaking every day, I wanted to share a kayak with someone else so that the unused boat wouldn't be a burden to the group.  In the end, I worked out a deal with Chris, one of the rowers, to bring his boat.  That way he'd have one if he wanted to take a break from rowing for a while.

I had all the kayaking and on river gear I needed, like a wet and dry suit, but I didn't have a lot of viable camping gear.  Both the PRO Primer and the Grand Canyon Private Boater's Association's (GCPBA) personal gear list was very detailed and complete.  I ended up buying most of my personal gear at CampMor.com.  They have a great selection and are very competatively priced.

Now that everything was paid for, my gear was packed, and my heart racing with anticipation, I headed to the airport after work on Monday, March 3rd to begin an amazing journey down the Grand Canyon.

Wenatchee River - 6/14/2008

The Wenatchee River Festival was this weekend.  I wasn't planning on going, because the river level wasn't great, but I had offered to help out with the festival.  I arrived at the bridge above Snowblind (Goodwin St) around 11:30AM.  That's not a great putin, but it allows you to run Snowblind and Granny's.  It was already 80+ degrees out without a cloud in the sky.

Snowblind at that level, about 6800 cfs, is pretty tame.  I tried to surf a few waves, but my boat was either too slow or a guard wave screwed up my line.  I was a little disappointed because I thought Granny's would just be a fast, green wave.  However, when I got to Granny's I saw a very stable, although shallow wave.  I was quite surprised.  I was also surprised that there weren't that many people there.  Because the river festival was going on, I thought it would be really crowded, but there were only about 5 people there.

I stayed there for about a half an hour, catching the wave about 15 times.  I hit a couple blunts, backstabs, 1 or 2 bread 'n butters (a blunt/backstab combination).   I had a blast.  While  the wave can be better at lower flows, it was so much better than my expectations, I was elated.  And unlike Trinity at Drunkards when the rivers between 11,000 and 13,000 cfs, Granny's doesn't kill my back.  While I was there, it felt like the river was going down, which made the wave a little steeper.  However, when I got home and checked the gauge the level really just flattened out.

While I didn't want to stop, I was getting tired and had to go do my volunteer thing for the festival.  Once that was done, after a delicious burger from the grill, of course, I walked back up to my car on Goodwin Road.  This is actually a longer walk than I thought, I probably should have bummed a ride, but it was a great day to do it.

Once in my car, I picked up my boat at Riverside Park in Cashmere and drove to the Recyling Center on River St.  This is the lowest putin above Riverside Park and it's right above Granny's.  I rode the wave a few more times, but I think the sun and exertion were getting to me, so have one last great session on the wave, I called it quits and started to the take out.

After getting changed, I headed over to the festival to see what was going on.  Around 7pm I headed back home, making the mandatory stop at Heidle Burger for a blackberry milkshake and onion rings.

Dynamically Switch Locales in GWT

Like me, a lot of people want their GWT applications to be able to change locale on the fly. While mine still only has one locale, I wanted to make sure that it could expand to more if necessary. Here's how I implemented dynamic local switching.

First, I store my languages in an XML configuration file, along with some other stuff for the application. A language element looks like this:

<language default="true">
	<key>myapp.language.name.english</key>
	<abbreviation>en</abbreviation>
	<icon>us.gif</icon>
	<email>translation@email.com</email>
</language>

This allows me to dynamically display the available languages to users of my app using clickable graphics. I use country flags.

Then I store my localized strings in a Java XML properties file. Like this:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE properties SYSTEM "http://java.sun.com/dtd/properties.dtd">
<properties version="1.0">
	<comment>This is the English translation for MyApp</comment>
	<entry key="myapp.language.name.english">English</entry>
</properties>

On load of my application, I read the configuration file and get the default language (or use the user's last language choice from a cookie value or the browser's locale, see Get Locale via Javascript for more info). Then, on demand, I get the messages_.xml file, like above, for that language, using an increasingly general locale. If none is found, then it'll use messages.xml, which is the English language for my app.

Now, to make this dynamically change, you have implement a listener to all of the classes in your application that display localized text for when the user changes the language. Then you have to add those listeners, usually the class itself, to the class that handles the changes in language.

Get Locale via Javascript

Since a lot of websites need to be available in multiple languages, or localized, developers need a way to figure out what language the user prefers. Most modern browsers have a setting in their preferences or options that the user can change. If the user doesn't, then the browser most likely uses the operating system's locale (language and country) setting.

There are many ways to get this information. Most server-side programming languages can get the requester's locale from the request header. However, now that many sites use AJAX or GWT, developers need to be able to get this information on the client-side, i.e. using JavaScript.

Here's an implementation that I use when it's necessary for me to get the locale on the client-side.

if ( navigator ) {
    if ( navigator.language ) {
        return navigator.language;
    }
    else if ( navigator.browserLanguage ) {
        return navigator.browserLanguage;
    }
    else if ( navigator.systemLanguage ) {
        return navigator.systemLanguage;
    }
    else if ( navigator.userLanguage ) {
        return navigator.userLanguage;
    }
}

This JavaScript should work on most modern browsers. I know that it works in Firefox 1+ and Internet Explorer 5.5+. I haven't done any more compatibility testing than that though.

Google Web Toolkit Tooltip Extension

Using the Google Web Kit Google Group post, contrib: tooltip listener, as a guide, I came up with a little more general tooltip panel. You can specify a delay before showing the tooltip and/or a delay to automatically hide it after it opens. I've also included the CSS that I use.

CSS

/* Display's tooltips like in Eclipse */
.tooltip .gwt-HTML {
        border: 1px solid black;
        padding: 2px 3px 3px 3px;
        font-size: smaller;
        background-color: #ffffcc; /*Pale Weak Yellow*/
 
}

Java Code

public class TooltipPopup extends PopupPanel {
 
        /**
         * The default css class name for the tool tip
         */
        private static final String     DEFAULT_TOOLTIP_STYLE   = "tooltip";
 
        /**
         * The default delay, in milliseconds,
         */
        private static final int        DEFAULT_SHOW_DELAY              = 500;
 
        /**
         * The delay, in milliseconds, to display the tooltip
         */
        private int                                     showDelay;
 
        /**
         * The delay, in milliseconds, to hide the tooltip, after it is displayed
         */
        private int                                     hideDelay;
 
        /**
         * The timer to show the tool tip
         */
        private Timer                           showTimer;
 
        /**
         * The timer to hide the tool tip
         */
        private Timer                           hideTimer;
 
        /**
         * Creates a new Tool Tip with the default show delay and no auto hiding
         * @param sender The widget to create the tool tip for
         * @param relLeft The left offset from the <code>sender</code>
         * @param relTop The top offset from the <code>sender</code>
         * @param text The tool tip text to display
         * @param useRelTop If true, then use the relative top offset. If not, then
         *        just use the sender's offset height.
         */
        public TooltipPopup( Widget sender, int relLeft, int relTop, final String text, boolean useRelTop ) {
 
                super( true );
 
                this.showTimer = null;
                this.hideTimer = null;
 
                this.showDelay = DEFAULT_SHOW_DELAY;
                this.hideDelay = -1;
 
                HTML contents = new HTML( text );
                add( contents );
 
                int left = getPageScrollLeft() + sender.getAbsoluteLeft() + relLeft;
                int top = getPageScrollTop() + sender.getAbsoluteTop();
 
                if ( useRelTop ) {
                        top += relTop;
                }
                else {
                        top += sender.getOffsetHeight() + 1;
                }
 
                setPopupPosition( left, top );
                addStyleName( DEFAULT_TOOLTIP_STYLE );
        }
 
        /**
         * Creates a new Tool Tip
         * @param sender The widget to create the tool tip for
         * @param relLeft The left offset from the <code>sender</code>
         * @param relTop The top offset from the <code>sender</code>
         * @param text The tool tip text to display
         * @param useRelTop If true, then use the relative top offset. If not, then
         *        just use the senders offset height.
         * @param showDelay The delay, in milliseconds, before the popup is
         *        displayed
         * @param hideDelay The delay, in milliseconds, before the popup is hidden
         * @param styleName The style name to apply to the popup
         */
        public TooltipPopup( Widget sender, int relLeft, int relTop, final String text, boolean useRelTop,
                final int showDelay, final int hideDelay, final String styleName ) {
 
                this( sender, relLeft, relTop, text, useRelTop );
 
                this.showDelay = showDelay;
                this.hideDelay = hideDelay;
                removeStyleName( DEFAULT_TOOLTIP_STYLE );
                addStyleName( styleName );
        }
 
        /*
         * (non-Javadoc)
         * @see com.google.gwt.user.client.ui.PopupPanel#show()
         */
        public void show() {
 
                // Set delay to show if specified
                if ( this.showDelay > 0 ) {
                        this.showTimer = new Timer() {
 
                                /*
                                 * (non-Javadoc)
                                 * @see com.google.gwt.user.client.Timer#run()
                                 */
                                public void run() {
 
                                        TooltipPopup.this.showTooltip();
                                }
                        };
                        this.showTimer.schedule( this.showDelay );
                }
                // Otherwise, show the dialog now
                else {
                        showTooltip();
                }
 
                // Set delay to hide if specified
                if ( this.hideDelay > 0 ) {
                        this.hideTimer = new Timer() {
 
                                /*
                                 * (non-Javadoc)
                                 * @see com.google.gwt.user.client.Timer#run()
                                 */
                                public void run() {
 
                                        TooltipPopup.this.hide();
                                }
                        };
                        this.hideTimer.schedule( this.showDelay + this.hideDelay );
                }
        }
 
        /*
         * (non-Javadoc)
         * @see com.google.gwt.user.client.ui.PopupPanel#hide()
         */
        public void hide() {
 
                super.hide();
 
                // Cancel the show timer if necessary
                if ( this.showTimer != null ) {
                        this.showTimer.cancel();
                }
 
                // Cancel the hide timer if necessary
                if ( this.hideTimer != null ) {
                        this.hideTimer.cancel();
                }
        }
 
        /**
         * Show the tool tip now
         */
        private void showTooltip() {
 
                super.show();
        }
 
        /**
         * Get the offset for the horizontal scroll
         * @return The offset
         */
        private int getPageScrollLeft() {
 
                return DOM.getAbsoluteLeft( DOM.getParent( RootPanel.getBodyElement() ) );
        }
 
        /**
         * Get the offset for the vertical scroll
         * @return The offset
         */
        private int getPageScrollTop() {
 
                return DOM.getAbsoluteTop( DOM.getParent( RootPanel.getBodyElement() ) );
        }
}

Hiding/showing embedded flash in Firefox

Recently, I created an AJAX web site that had to hide and show a container that had a flash object element inside of it based on the user's actions.

I first created an html block like this:

<div id="flashContainer"><br />	<object></object></div>

Then I created the following two css classes.  As you can see, by default, my flash object is shown and the flash player runs.

/* Hide by default */
div#flashContainer {
	display: block;
	visibility: visible;
}
 
div#flashContainer.hide {
	display: none;
	visibility: hidden;
}

 Now, if I programmatically add the "hide" css class to the "flashContainer" element, then the flash player will disappear.  This works correctly in all the modern browsers I tested: Firefox, Internet Explorer, Safari 3, and Opera.

The problem arises when you try to hide the "flashContainer" element again.  In Internet Explorer, if you programmatically remove the "hide" css class, then the flash player shows the *.swf file at end of it's timeline (or if it's still playing, the correct spot in the timeline).  The same JavaScript run in Firefox (or any Gecko-based browser) to remove the "hide" css class will trigger the flash player to restart the flash file.  This may be what some people want, but for this project, it was very bad.

I finally figured out how to get around this issue by just using a simple CSS work-around.  Using the example above, if I change the CSS to the following, then all browsers will hide and show the "flashContainer" element without replaying the embedded flash file.

/* Hide by default */
div#flashContainer {
	height: auto;
	overflow: hidden;
}
 
div#flashContainer.hide {
	height: 0px;
}

Scrolling to an Element

Note: This is not my code, but a friend of mine's.

When writing AJAX websites, developers sometimes need to scroll to a particular element within the DOM on the page. The most common approach, using javascript, is:

/**
 * Scroll to an element (by id attribute or name attribute of the anchor tag )
 */
function scrollToElement( elementName ) {
	if ( elementName ) {
		window.location = "#" + elementName;
	}
}

However, this approach is not cross-browser compatible because some browsers will refresh the page. Since this is mostly necessary in an AJAX application, refreshing is most likely NOT desired.

So, my friend came up with the following JavaScript that I have found to work in most modern browsers.

/**
 * Scroll to an element (only works by id attribute)
 */
function scrollToElement(elementID)
{
	var theElement = document.getElementByID( elementID );
	if(theElement != null) {
		var selectedPosX = 0;
		var selectedPosY = 0;
 
		while( theElement != null ){
			selectedPosX += theElement.offsetLeft;
			selectedPosY += theElement.offsetTop;
			theElement = theElement.offsetParent;
		}
 
		window.scrollTo( selectedPosX, selectedPosY );
	}
 
}

If you use the prototype.js JavaScript, which I recommend, then you could rewrite the function above to use the CSS Class finder function, which would allow you to scroll to an element without needing the id attribute set.

XSLT for GWT

Here's a little lesson that I learned regarding client side XML and processing it. If your app requires any XML processing over about 50 nodes, use a native DOM implementation.

My app stores some Google Map locations in xml. Each location has the lat/long and an info node that I process in my app with XSLT to create the html for the marker window. Well, one file has 700+ of these location nodes, and when I wrapped AJAX-XSLT using the GWT, it took 2 full minutes to download the file, parse it, and process each location.

I switched to Sarissa, which is a JavaScript wrapper of the native DOM and XSLT support that most modern browsers have, and that same file now takes 4 seconds to do everything from download to processing. When I first got it working, I thought it was ignoring the xml file or something because it was so fast, but the Sarissa wrapper is doing it all, even remote DTD validation!

So, for those who need moderate to heavy use of XML, XSLT, and XPath for you apps, go with a native implementation like Sarissa. Don't have to redo all your work like I did.

My Implementation

If you would like to use my implementation, first go to http://sourceforge.net/projects/sarissa and download the latest release. You'll need to add these 3 files to your app:

• sarissa.js
• sarissa_dhtml.js
• sarissa_ieemu_xpath.js

NOTE: Not all of these files may be included in future releases of Sarissa.

Then download the GWT wrapper at gwt.sarissa.zip. Note, this has no affiliation with the gwt.components guys, I just used their package path because it was convenient. Also, my apps only needs to read xml, so I didn't port any of the write xml methods.

Using the Code

After downloading the zip file, just extract it into your source directory for your GWT project and the compiler should pick it up without any problems.

I've gotten a lot of reports that this code isn't working. It might be that Sarissa has upgraded and the new version is not backwards compatible. Also, if you're creating the XML file, it will probably be faster to build your data in JSON as JavaScript can read it natively through its code syntax. However, I know some people are getting XML from a third-party source and it would be less efficient to transform it into JSON and then to parse the XML using the browser's native XML and XSLT functions. Plus there isn't, as far as I know, a transformation language for JSON like XSLT.

In any case, here's an example for using the API I provided:

/*
 * Notes
 * - I wrote this free hand, so I may have made syntax errors
 * - Normally you wouldn't want to put all the parsing and processing code in the RequestCallback
 */
RequestBuilder rb = new RequestBuilder( RequestBuilder.POST, "path/to/ xml/file/xmlfile.xml" );
rb.setHeader( "Content-Type", "text/xml; charset=utf-8" );
 
try {
	rb.sendRequest( "", new RequestCallback() {
 
		/*
		 * (non-Javadoc)
		 * @see com.google.gwt.http.client.RequestCallback#onResponseReceived(com.google.gwt.http.client.Request,
 		 * 	com.google.gwt.http.client.Response)
		 */
		public void onResponseReceived( Request request, Response response ) {
 
			if ( response.getStatusCode() != STATUS_CODE_OK ) {
				 // Capture error
				 return;
			}
 
			try {
				// Example of parsing the xml content into native DOM
				Node xmlDoc = XML.parse( response.getText() );
 
				// Example of finding a list of nodes
				List nodes = xmlDoc.getNodes( "/xpath/to/nodes" );
				for ( Iterator ni = nodes.iterator(); ni.hasNext(); ) {
					 Node n = (Node) ni.next();
					 System.out.println( n.getNodeName() + " = " + n.getStringValue() );
				}
 
				// Example of finding one node or the first noe
				Node node = xmlDoc.getNode( "/xpath/to/nodes" );
 
				// Example of applying a XSL file (assuming it was downloaded before hand)
				String transformedText = XSLT.process( xmlDoc, xsltDoc );
				System.out.println( transformedText );
			 }
			 catch ( XMLParseException xmlpe ) {
				// Handle exception
			 }
			 catch ( XSLTParseException xsltpe ) {
				// Handle exception
			 }
		 }
	 } );
}
catch ( RequestException re ) {
	 // Handle exception
}