<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Xor News &#187; Web Technologies</title>
	<atom:link href="http://www.flester.com/blog/category/web-technologies/feed" rel="self" type="application/rss+xml" />
	<link>http://www.flester.com/blog</link>
	<description>You can't have it both ways</description>
	<lastBuildDate>Wed, 18 Aug 2010 03:51:20 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Iñtërnâtiônàlizætiøn</title>
		<link>http://www.flester.com/blog/2008/07/01/internationaliz%c3%a6ti%c3%b8n</link>
		<comments>http://www.flester.com/blog/2008/07/01/internationaliz%c3%a6ti%c3%b8n#comments</comments>
		<pubDate>Tue, 01 Jul 2008 13:29:01 +0000</pubDate>
		<dc:creator>mike</dc:creator>
				<category><![CDATA[Web Technologies]]></category>

		<guid isPermaLink="false">http://www.flester.com/blog/?p=50</guid>
		<description><![CDATA[This is a test, thanks, Sam.
A lot has changed in four years since Sam wrote that article. But there is still a lot of borked UTF-8 i18n handling out there.
So there &#8212; Iñtërnâtiônàlizætiøn. 
I&#8217;ll leave the RTL test to someone braver.
]]></description>
			<content:encoded><![CDATA[<p>This is a test, thanks, <a href="http://www.intertwingly.net/stories/2004/04/14/i18n.html">Sam</a>.<br />
A lot has changed in four years since Sam wrote that article. But there is still a lot of borked UTF-8 i18n handling out there.</p>
<p>So there &#8212; Iñtërnâtiônàlizætiøn. </p>
<p>I&#8217;ll leave the<a href="http://en.wikipedia.org/wiki/Right_to_left#Directionality"> RTL </a>test to someone braver.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.flester.com/blog/2008/07/01/internationaliz%c3%a6ti%c3%b8n/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Emergency web page readability improvements</title>
		<link>http://www.flester.com/blog/2008/04/07/emergency-web-page-readability-improvements</link>
		<comments>http://www.flester.com/blog/2008/04/07/emergency-web-page-readability-improvements#comments</comments>
		<pubDate>Mon, 07 Apr 2008 15:20:52 +0000</pubDate>
		<dc:creator>mike</dc:creator>
				<category><![CDATA[Web Technologies]]></category>

		<guid isPermaLink="false">http://www.flester.com/blog/2008/04/07/emergency-web-page-readability-improvements</guid>
		<description><![CDATA[Sometimes when I come across a web page that has colors that are hard to read I just move on to something else. If the website has flashing text or music that usually causes immediate apopletic tab death, and trying to remember never to use that website again. But other times the color thing is [...]]]></description>
			<content:encoded><![CDATA[<p>Sometimes when I come across a web page that has colors that are hard to read I just move on to something else. If the website has flashing text or music that usually causes immediate apopletic tab death, and trying to remember never to use that website again. But other times the color thing is getting in the way of something important. Enter wob and bow. If you take the wob and bow links here and drag them to your firefox tool bar, they will change the current page to either black text on a white backgroud (bow) or white text on a steel-blue background (wob). Instant readability. White on white text? No problem. Designer overstyled links so that you can&#8217;t find them? No problem. Background image interference? No problemo.</p>
<p><a href="javascript:(function() {var newSS, styles='* { background: #708090 ! important; color: white ! important} :link, :link * { color: #0000ee !important } :visited, :visited * { color: #551a0b !important }'; if (document.createStylesheet) { document.createStyleSheet(%22javascript:'%22+styles+%22'%22); } else { newSS=document.createElement('link'); newSS.rel='stylesheet'; newSS.href='data:text/css,'+escape(styles);document.getElementsByTagName(%22head%22)[0].appendChild(newSS);}})();">wob</a>, <a href="javascript:(function() {var newSS, styles='* { background: white !important; color: black ! important} :link, :link * { color: #0000ee !important } :visited, :visited * { color: #551a0b !important }'; if (document.createStylesheet) { document.createStyleSheet(%22javascript:'%22+styles+%22'%22); } else { newSS=document.createElement('link'); newSS.rel='stylesheet'; newSS.href='data:text/css,'+escape(styles);document.getElementsByTagName(%22head%22)[0].appendChild(newSS);}})();">bow</a></p>
<p>The javascript in the buttons will walk all the elements in the page and set the foreground and background, reset link colors for normal and visited links and should be cross-browser, but I only really use ff, so ymmv.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.flester.com/blog/2008/04/07/emergency-web-page-readability-improvements/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>JRuby Emissary Console part 2</title>
		<link>http://www.flester.com/blog/2007/12/31/jruby-emissary-console-part-2</link>
		<comments>http://www.flester.com/blog/2007/12/31/jruby-emissary-console-part-2#comments</comments>
		<pubDate>Mon, 31 Dec 2007 15:22:46 +0000</pubDate>
		<dc:creator>mike</dc:creator>
				<category><![CDATA[Web Technologies]]></category>

		<guid isPermaLink="false">http://www.flester.com/blog/?p=13</guid>
		<description><![CDATA[I&#8217;ve been continuing to debug the issues with the JRuby web-enabled console into our Emissary P2P Workflow System. I&#8217;ve spent an embarrassingly long time debugging this and trying to figure out what is going wrong. Finally I started just printing out object ids for things so see what I might have more than one instance [...]]]></description>
			<content:encoded><![CDATA[<p>I&#8217;ve been continuing to debug the issues with the JRuby web-enabled console into our <a href="http://flester.dyndns.org/trac/">Emissary P2P Workflow System</a>. I&#8217;ve spent an embarrassingly long time debugging this and trying to figure out what is going wrong. Finally I started just printing out object ids for things so see what I might have more than one instance of.</p>
<p>The issue is that sometimes the ruby context is being duplicated. So we get this type of behavior:<br />
<span id="more-13"></span><br />
=> i=5<br />
5<br />
=> i=6<br />
6<br />
=> i<br />
6<br />
=> i<br />
5</p>
<p>Now it I have finally figured out that all of this takes place with one instance of emissary.scripting.RubyConsole (my object that adapts into Jruby and sets up theglobals I want the user to have access to), one instance of org.jruby.javasupport.bsf.JRubyEngine that gets set up through the BSFManager code, one instance of org.jruby.Ruby naturally since there is one private instance of it inside JRubyEngine.</p>
<p>Once I started looking at the code in org.jruby.Ruby and seeing ThreadLocal and ThreadContext type of things, a little light bulb went off somewhere in the North East corner of south west North Dakota. So I changed all of my log4j output formatters to add the %t directive which is the thread name. I am serving up access to the JRuby console over an AJAX enabled web-page using my own high-performance MVC code run by Jetty. As soon as the thread name comes out, here is what we are getting:</p>
<p>31 Dec 14:27:23 DEBUG <strong>JettyListenerPool-10</strong> &#8211;  &#8211; eval(&#8217;i=5&#8242;) => 5 [java.lang.Long]<br />
31 Dec 14:27:45 DEBUG <strong>JettyListenerPool-11</strong> &#8211;  &#8211; eval(&#8217;i=6&#8242;) => 6 [java.lang.Long]<br />
31 Dec 14:27:56 DEBUG <strong>JettyListenerPool-11</strong> &#8211;  &#8211; eval(&#8217;i') => 6 [java.lang.Long]<br />
31 Dec 14:27:57 DEBUG <strong>JettyListenerPool-10</strong> &#8211;  &#8211; eval(&#8217;i') => 5 [java.lang.Long]</p>
<p>The highlighted item is the thread name. The order is not important. The number of different values I can get assigned to a variable named &#8220;i&#8221; is not important either. It all depends on how busy the Jetty server is and how many threads it decides to use in answering the HTTP AJAX requests coming in. As many threads as there are is how many different values for &#8220;i&#8221; that can be stored and retrieved.</p>
<p>Something is amiss in thread-local land.</p>
<p>I&#8217;m finding this code a little hard to follow. I&#8217;ve read several of Charles&#8217;s posts from 2006 on the performance considerations and looking up the context. I am continuing to hunt for the underlying reason for the several contexts and what actual object is being created on each thread. Without a fix for this I really cannot see how the JRuby console idea through BSF can be adapted to the web server environment.</p>
<p><b>Update:</b> Here is a comment from ThreadService that looks interesting:<br />
        // Must be called from main thread (it is currently, but this bothers me)<br />
        mainThread = Thread.currentThread();</p>
<p>Hmm. I guess that bother&#8217;s me too. Since the first time I call it, the call is coming from any one of my Jetty listener threads, and there is nothing special about it. I can&#8217;t see any other way around this at the moment. But it&#8217;s comforting to know it might bother someone besides me.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.flester.com/blog/2007/12/31/jruby-emissary-console-part-2/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>JRuby Emissary Console</title>
		<link>http://www.flester.com/blog/2007/12/23/jruby-emissary-console</link>
		<comments>http://www.flester.com/blog/2007/12/23/jruby-emissary-console#comments</comments>
		<pubDate>Sun, 23 Dec 2007 03:34:01 +0000</pubDate>
		<dc:creator>mike</dc:creator>
				<category><![CDATA[Web Technologies]]></category>

		<guid isPermaLink="false">http://www.flester.com/blog/?p=12</guid>
		<description><![CDATA[So our new JRuby console is pretty sporty. Created inside an Emissary P2P Workflow node, made accessible by our custom MVC stuff over Jetty, nice CSS and Javascript that makes it pretty nice to use, including command history on the up-arrow. 
But there is a small problem that is driving me bonkers.
Sometimes, more often while [...]]]></description>
			<content:encoded><![CDATA[<p>So our new JRuby console is pretty sporty. Created inside an <a href="http://flester.dyndns.org/trac/">Emissary P2P Workflow</a> node, made accessible by our custom MVC stuff over Jetty, nice CSS and Javascript that makes it pretty nice to use, including command history on the up-arrow. </p>
<p>But there is a small problem that is driving me bonkers.</p>
<p>Sometimes, more often while debugging something and doing a Shift-Reload on the JRuby Console web page, but sometimes without that &#8212; I get TWO JRuby environments and the interactions using AJAX alternate between them. Like this:</p>
<pre>
=> i=5
5
=> i=6
6
=> i
5
=> i
6
</pre>
<p>This doesn&#8217;t happen all the time and I really don&#8217;t know what is going on. There could very well be some fundamental thing about the Bean Scripting Framework&#8217;s BSFManager that I just don&#8217;t grok. In fact, after looking into the BSFManager a little, I&#8217;m worried about the multi-threaded nature of running that inside the emissary node. We could have multiple users each creating a JRuby console which could be living on separate HttpSessions. Should be ok as far as all of my code goes, but that BSFManager factory/singleton is starting to look suspiciously like an anti-pattern I once knew. </p>
]]></content:encoded>
			<wfw:commentRss>http://www.flester.com/blog/2007/12/23/jruby-emissary-console/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>JRuby scripting in Java</title>
		<link>http://www.flester.com/blog/2007/12/19/jruby-scripting-in-java</link>
		<comments>http://www.flester.com/blog/2007/12/19/jruby-scripting-in-java#comments</comments>
		<pubDate>Wed, 19 Dec 2007 04:08:31 +0000</pubDate>
		<dc:creator>mike</dc:creator>
				<category><![CDATA[Web Technologies]]></category>

		<guid isPermaLink="false">http://www.flester.com/blog/?p=11</guid>
		<description><![CDATA[Charles, Thomas, Ola  &#8212; You guys absolutely rock. I am really appreciating the work you have done on JRuby. Thanks also to Sun for supporting this work. 
Today I dropped bsf.jar and jruby.jar (1.1b1) into the Emissary P2P Workflow project&#8217;s lib directory. I wrote a few dozen lines of java to set up jruby [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://headius.blogspot.com/">Charles</a>, <a href="http://www.bloglines.com/blog/ThomasEEnebo">Thomas</a>, <a href="http://ola-bini.blogspot.com/">Ola </a> &#8212; You guys absolutely <b>rock</b>. I am really appreciating the work you have done on JRuby. Thanks also to Sun for supporting this work. </p>
<p>Today I dropped bsf.jar and <a href="http://jruby.sf.net/">jruby.jar</a> (1.1b1) into the <a href="http://flester.dyndns.org/trac">Emissary P2P Workflow</a> project&#8217;s lib directory. I wrote a few dozen lines of java to set up jruby as my ruby scripting language in the framework, create a context to run ruby in. I wrote  few more line to hook all of this into our custom high-performance <acronym name="Model View Controller">MVC</acronym> system and now we have a Ruby scripting console served up by Jetty, protected by our normal J2EE security mechanisms. The initial context gets a load of all the important objects inside an emissary node via  BSFManager.declareBean. This makes them available as globals in jruby (duh, once you remember to put the &#8220;$&#8221; in front on the ruby side). </p>
<p>While adding the important object from the Emissary namespace into the JRuby context, some of the object names we were binding things with turned out to be not-so-great for use in Ruby. So here is the little regex that we ended up using to clean up the names and make them nice.</p>
<pre>key = key.replaceAll("[-'\"?&gt;&lt;{\\\[\\]&#038;$!@#^*()+=]","");</pre>
<p>A little css, some <a href="http://www.mochikit.com/">MochiKit</a> and how I have an Ajax-enabled JRuby window into running Emissary code served up by our own embedded Jetty. The power this is going to unleash is hard to fathom at the moment but the ideas are coming fast and furious. </p>
]]></content:encoded>
			<wfw:commentRss>http://www.flester.com/blog/2007/12/19/jruby-scripting-in-java/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Testing With Clover</title>
		<link>http://www.flester.com/blog/2007/12/11/testing-with-clover</link>
		<comments>http://www.flester.com/blog/2007/12/11/testing-with-clover#comments</comments>
		<pubDate>Tue, 11 Dec 2007 04:34:52 +0000</pubDate>
		<dc:creator>mike</dc:creator>
				<category><![CDATA[Family]]></category>
		<category><![CDATA[Web Technologies]]></category>

		<guid isPermaLink="false">http://www.flester.com/blog/?p=10</guid>
		<description><![CDATA[So the boy and I were watching football last night. The game was a little slow so I had the laptop out and was working on some unit tests. He looked over and saw the Clover coverage graph and says &#8220;What&#8217;s that?&#8221;


So we had a discussion (he&#8217;s not a software developer at all) about unit [...]]]></description>
			<content:encoded><![CDATA[<p>So the boy and I were watching football last night. The game was a little slow so I had the laptop out and was working on some unit tests. He looked over and saw the <a href="http://www.cenqua.com/clover">Clover</a> coverage graph and says &#8220;What&#8217;s that?&#8221;<br />
<span id="more-10"></span></p>
<p><img src='/blog/wp-content/cloveroutput.jpg' alt='Clover Test Coverage' /></p>
<p>So we had a discussion (he&#8217;s not a software developer at all) about unit testing, codebase confidence, code coverage, test-first, and so forth. Nice. But it took him about 4 seconds to look over at the Clover chart and say &#8220;You&#8217;re not doing so well, huh?&#8221; I came up with some medium-lame explanations about how things in that initial view are divided up into components (java packages) and that I know some of the packages are more important than others. After bringing the codebase from basically no tests coverage to 45% coverage in the last year, it was a snap back to reality. 45% code coverage is not bad, really. I&#8217;ve been snooping at some large OSS projects that use Clover and we are up there with the big boys. But there&#8217;s a long way to go. And face the facts man: if you exercise some code but don&#8217;t assert the right stuff, you might as well not be doing anything at all.</p>
<p>So I explained a little more about code coverage to the boy and showed him how Clover allows me to drill down to the class and see where I need to write more tests. I showed him how the counts on the left show how many times each line was executed and that the red background means it didn&#8217;t get tested. It took him 1.8 seconds to notice an &#8220;if&#8221; statement that had an execution count greater than one but was red. So we had to have a discussion about execution paths.</p>
<p>Pretty sharp kid. </p>
]]></content:encoded>
			<wfw:commentRss>http://www.flester.com/blog/2007/12/11/testing-with-clover/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Shift Clickable Checkboxes</title>
		<link>http://www.flester.com/blog/2005/11/17/shift-clickable-checkboxes</link>
		<comments>http://www.flester.com/blog/2005/11/17/shift-clickable-checkboxes#comments</comments>
		<pubDate>Thu, 17 Nov 2005 20:28:52 +0000</pubDate>
		<dc:creator>mike</dc:creator>
				<category><![CDATA[Web Technologies]]></category>

		<guid isPermaLink="false">http://www.flester.com/blog/?p=5</guid>
		<description><![CDATA[One of the helpful little things that most desktop apps know how to do is handle the
shift-click in order to make multiple selections. The place where this is most obviously
missing when it comes to web forms is in a list of checkboxes.

Here is some pretty straightforward, unobtrusive javascript that you can include
in your page that [...]]]></description>
			<content:encoded><![CDATA[<p>One of the helpful little things that most desktop apps know how to do is handle the<br />
shift-click in order to make multiple selections. The place where this is most obviously<br />
missing when it comes to web forms is in a list of checkboxes.<br />
<span id="more-5"></span></p>
<p>Here is some pretty straightforward, unobtrusive javascript that you can include<br />
in your page that will intercept shift-clicks and make them work. If you click<br />
the first item in a list the shift click some item farther down the list, everything<br />
in between is filled in for you. You don&#8217;t have to do anything except include the<br />
javascript file in the head section of your page. All checkboxes on the page<br />
in groups of more than one are automatically taken care of.</p>
<p>When javascript isn&#8217;t enabled or the browser doesn&#8217;t support what we are<br />
trying to do here, the checkboxes should all work just as they normally do.</p>
<p>Here&#8217;a an example with two groups of checkboxes.</p>
<p><script type="text/javascript" src='/blog/wp-content/shiftclick.js'></script></p>
<form id="x" action="#" method="get">
          Group 1</p>
<input type="checkbox" name="acheck" value="f1"/>F1</p>
<input type="checkbox" name="acheck" value="f2"/>F2</p>
<input type="checkbox" name="acheck" value="f3"/>F3</p>
<input type="checkbox" name="acheck" value="f4"/>F4</p>
<input type="checkbox" name="acheck" value="f5"/>F5</p>
<input type="checkbox" name="acheck" value="f6"/>F6</p>
<input type="checkbox" name="acheck" value="f7"/>F7</p>
<input type="checkbox" name="acheck" value="f8"/>F8</p>
<input type="checkbox" name="acheck" value="f9"/>F9</p>
<input type="checkbox" name="acheck" value="f10"/>F10<br />
          Group 2</p>
<input type="checkbox" name="bcheck" value="f1"/>R1</p>
<input type="checkbox" name="bcheck" value="f2"/>R2</p>
<input type="checkbox" name="bcheck" value="f3"/>R3</p>
<input type="checkbox" name="bcheck" value="f4"/>R4</p>
<input type="checkbox" name="bcheck" value="f5"/>R5</p>
<input type="checkbox" name="bcheck" value="f6"/>R6</p>
<input type="checkbox" name="bcheck" value="f7"/>R7</p>
<input type="checkbox" name="bcheck" value="f8"/>R8</p>
<input type="checkbox" name="bcheck" value="f9"/>R9</p>
<input type="checkbox" name="bcheck" value="f10"/>R10<br />
	</form>
<hr />
<p><a href='/blog/wp-content/shiftclick.js' title='shiftclick.js'>Get the source</a></p>
<p>One or two caveats about this. When checkboxes are filled in automatically no other<br />
javascript handlers are called. This situation might be detectable and fixed, but that&#8217;s<br />
not clear at the moment. Also, if your checkboxes already have onclick handlers for<br />
something they are going to be wiped out and replace. That could use some work<br />
as well.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.flester.com/blog/2005/11/17/shift-clickable-checkboxes/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Summary/Detail Table</title>
		<link>http://www.flester.com/blog/2005/11/08/summarydetail-table</link>
		<comments>http://www.flester.com/blog/2005/11/08/summarydetail-table#comments</comments>
		<pubDate>Tue, 08 Nov 2005 22:50:14 +0000</pubDate>
		<dc:creator>mike</dc:creator>
				<category><![CDATA[Web Technologies]]></category>

		<guid isPermaLink="false">http://www.flester.com/blog/?p=4</guid>
		<description><![CDATA[Summary/Detail relationships can be difficult to display in HTML. The
amount of data can often be overwhelming. This is a client side
(JavaScript + CSS)  way to hide or display selective detail rows. It follows
the principle of unobtrusive Javascript and it pretty easy to use.

To use this feature you have to 

Give your table an id [...]]]></description>
			<content:encoded><![CDATA[<p>Summary/Detail relationships can be difficult to display in HTML. The<br />
amount of data can often be overwhelming. This is a client side<br />
(JavaScript + CSS)  way to hide or display selective detail rows. It follows<br />
the principle of unobtrusive Javascript and it pretty easy to use.<br />
<span id="more-4"></span></p>
<p>To use this feature you have to </p>
<ul>
<li>Give your table an id and add exptable to its classes.</li>
<li>Use thead and tbody to separate headers from content</li>
<li>Declare one column in the header row to be of class expcontrol</li>
<li>Grab the <a href="/blog/wp-content/exptable.js">javascript</a>, <a href="/blog/wp-content/exptable.css">css</a>, and <a href="/blog/wp-content/right.gif" >two</a> <a href="/blog/wp-content/down.gif">images</a> and include them in your page</li>
</ul>
<p>Here is a little table to fool around with to get an idea of how it works.<br />
The onclick handlers in the header control column and on the summary<br />
rows are all added dynamically, as are the image backgrounds for the<br />
control cells, and the titles.</p>
<p><script type="text/javascript" src="/blog/wp-content/exptable.js"></script></p>
<link rel="stylesheet" type="text/css" href="/blog/wp-content/exptable.css"/>
<table id="t" class="exptable">
<thead>
<tr>
<th class="expcontrol">+</th>
<th>Title</th>
<th>Author</th>
<th>Count</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr class="even summary">
<td></td>
<td>Charlotte&apos;s Web</td>
<td>E. B. White</td>
<td>36</td>
<td>2005-11-05</td>
</tr>
<tr class="detail">
<td>-</td>
<td>Some Pig</td>
<td>Charlotte</td>
<td>1</td>
<td>Sunday</td>
</tr>
<tr class="detail">
<td>-</td>
<td>Radiant</td>
<td>Templeton</td>
<td>2</td>
<td>Monday</td>
</tr>
<tr class="detail">
<td>-</td>
<td>Humble</td>
<td>Uncle</td>
<td>3</td>
<td>Monday</td>
</tr>
<tr class="odd summary">
<td></td>
<td>Red Sails To Capri</td>
<td>Ann Weil</td>
<td>24</td>
<td>2005-04-25</td>
</tr>
<tr class="detail">
<td>-</td>
<td>Chapter 1</td>
<td>Bob</td>
<td>3</td>
<td>Monday</td>
</tr>
<tr class="detail">
<td>-</td>
<td>Chapter 2</td>
<td>Bill</td>
<td>4</td>
<td>Tuesday</td>
</tr>
<tr class="even summary">
<td></td>
<td>Island of the Blue Dolphin</td>
<td>Scott O&#8217;Dell</td>
<td>12</td>
<td>2005-06-12</td>
</tr>
<tr class="detail">
<td>-</td>
<td>Return to the Island</td>
<td>Ulana</td>
<td>1</td>
<td>Friday</td>
</tr>
</tbody>
</table>
<p>Comments welcome. It still has a few imperfections, one place where the<br />
control column is hardcoded to be column 0. I may fix that later on.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.flester.com/blog/2005/11/08/summarydetail-table/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Sortable Tables</title>
		<link>http://www.flester.com/blog/2005/11/06/sortable-tables</link>
		<comments>http://www.flester.com/blog/2005/11/06/sortable-tables#comments</comments>
		<pubDate>Sun, 06 Nov 2005 23:01:59 +0000</pubDate>
		<dc:creator>mike</dc:creator>
				<category><![CDATA[Web Technologies]]></category>

		<guid isPermaLink="false">http://www.flester.com/blog/?p=3</guid>
		<description><![CDATA[Create client-side sortable tables with unobtrusive Javascript, css, xhtml and a stable sort.]]></description>
			<content:encoded><![CDATA[<p><script type="text/javascript" src="/blog/wp-content/sorttable.js"></script></p>
<link rel="stylesheet" type="text/css" href="/blog/wp-content/sorttable.css"/>
<p>The principle of <a href="http://www.kryogenix.org/code/browser/">unobtrusive javascript</a> has been around for a while, and the old sortable html table thing has been used all over the place. This version has been updated to </p>
<ul>
<li>work with tables that use thead and tbody to separate header rows from content rows, </li>
<li>works with tables that use odd/even styling for the data rows, </li>
<li> it has a fix for Safari browsers, </li>
<li>and it can use different sort types instead of the built in Javascript sort. Notably, the merge sort is<br />
a stable sort that is pretty fast. </li>
</ul>
<p><span id="more-3"></span></p>
<p>So, cut to the chase, I hear you saying. Alright. Here is a table to play with.</p>
<table id="t" class="sortable">
<thead>
<tr>
<th>Col1</th>
<th class="nosort">Col2</th>
<th>Col3</th>
<th>Col4</th>
<th>Col5</th>
<th>Col6</th>
<th>Col7</th>
</tr>
</thead>
<tbody>
<tr class="even">
<td>1</td>
<td>a</td>
<td>blue</td>
<td>Gamma</td>
<td>$1.23</td>
<td>12-25-2001</td>
<td>23 Skidoo</td>
</tr>
<tr class="odd">
<td>2</td>
<td>b</td>
<td>blue</td>
<td>Delta</td>
<td>$10.23</td>
<td>10-25-2001</td>
<td>45 Skidoo</td>
</tr>
<tr class="even">
<td>3</td>
<td>c</td>
<td>green</td>
<td>Rho</td>
<td>$100.23</td>
<td>12-01-01</td>
<td>23 Skidoo</td>
</tr>
<tr class="odd">
<td>4</td>
<td>d</td>
<td>red</td>
<td>Rho</td>
<td>$1.23</td>
<td>12-01-99</td>
<td>23 Lettermen</td>
</tr>
<tr class="even">
<td>5</td>
<td>e</td>
<td>yellow</td>
<td>Gamma</td>
<td>$1.45</td>
<td>12-01-1999</td>
<td>123 Bucklemyshoe</td>
</tr>
<tr class="odd">
<td>6</td>
<td>f</td>
<td>red</td>
<td>Alpha</td>
<td>$1.54</td>
<td>07-15-2005</td>
<td>2 Pickles</td>
</tr>
<tr class="even">
<td>7</td>
<td>a</td>
<td>yellow</td>
<td>gamma</td>
<td>$1.00</td>
<td>07-15-2005</td>
<td>12 Dozen</td>
</tr>
<tr class="odd">
<td>8</td>
<td>b</td>
<td>green</td>
<td>alpha</td>
<td>$23.00</td>
<td>07-15-05</td>
<td>12 Dozen</td>
</tr>
<tr class="even">
<td>9</td>
<td>c</td>
<td>blue</td>
<td>delta</td>
<td>$23.00</td>
<td>12-25-2001</td>
<td>23 Lettermen</td>
</tr>
<tr class="odd">
<td>10</td>
<td>d</td>
<td>blue</td>
<td>rho</td>
<td>$23.00</td>
<td>07-15-2005</td>
<td>23 Skidoo</td>
</tr>
<tr class="even">
<td>11</td>
<td>e</td>
<td>green</td>
<td>pi</td>
<td>$1.23</td>
<td>11-25-2003</td>
<td>1 Way</td>
</tr>
<tr class="odd">
<td>12</td>
<td>f</td>
<td>orange</td>
<td>Pi</td>
<td>$2.23</td>
<td>11-25-2004</td>
<td>37 Signals</td>
</tr>
</tbody>
</table>
<p>          <textarea id="logarea" rows="8" cols="65"></textarea></p>
<table>
<tr>
<td>
<input type='button' value="Merge Sort" onclick="setSortType('merge');"/>
       </td>
<td>
<input type='button' value="Shell Sort" onclick="setSortType('shell');"/>
      </td>
<td>
<input type='button' value="Default Sort" onclick="setSortType('default');"/>
     </td>
<td>
<input type='button' value="Clear Log" onclick="document.getElementById('logarea').value = '';"/>
    </td>
</tr>
</table>
<p>The reqiurements for using this are:</p>
<ol>
<li>Give your table an id attribute</li>
<li>Give your table a class sortable</li>
<li>Use thead and tbody in your table for header and body rows</li>
<li>Include the <a href="/blog/wp-content/sorttable.js" title="Get da Javascript">sorttable.js</a> javascript in the head of your document</li>
<li>Optinally grab the <a href="/blog/wp-content/sorttable.css" title="Get da css">sorttable.css</a> and include it as a starting point for your stuff.</li>
</ol>
<p>What, you were expecting more steps? Well you can set the sort type, change the<br />
arrows, add odd-even styling to the rows and more. <a href="http://catb.org/~esr/jargon/html/U/UTSL.html">UTSL </a>for that, man.</p>
<p>This page also includes a nice little trick to do logging when in a sort of debug mode.<br />
To turn on the logging, you just include a textarea on your page with an id of logarea.<br />
Like this:</p>
<pre><code>
<form id="myform" method="post" action="#">
         <texarea id="logarea"></textarea>
   </form>

</code></pre>
<p>When the textarea is present, log messages will be added to it. When it&#8217;s not there,<br />
nothing happens to the log messages.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.flester.com/blog/2005/11/06/sortable-tables/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Hi.</title>
		<link>http://www.flester.com/blog/2005/10/22/hi</link>
		<comments>http://www.flester.com/blog/2005/10/22/hi#comments</comments>
		<pubDate>Sat, 22 Oct 2005 10:02:37 +0000</pubDate>
		<dc:creator>mike</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[Web Technologies]]></category>

		<guid isPermaLink="false">http://www.flester.com/blog/2005/10/22/hi/</guid>
		<description><![CDATA[So I had this domain name and thought I better put some content on it before it started looking too suspicious.  I&#8217;ll be using this to experiment with DHTML/CSS/Javascript/Ajax and all sorts of cool web technologies. I&#8217;ll probably also put up some of my Bible charts and tools.
Thanks, ssf, for the nice image in [...]]]></description>
			<content:encoded><![CDATA[<p>So I had this domain name and thought I better put some content on it before it started looking too suspicious.  I&#8217;ll be using this to experiment with DHTML/CSS/Javascript/Ajax and all sorts of cool web technologies. I&#8217;ll probably also put up some of my Bible charts and tools.</p>
<p>Thanks, ssf, for the nice image in the header. It&#8217;s Lake Powell, Arizona with the water level 80 to 90 feet down from when I visited there as a teenager in 1978.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.flester.com/blog/2005/10/22/hi/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
