JavaScript: DOM quick reference

This is a rather handy quick reference to the JavaScript DOM interface.

Google Pages is migrating to Google Sites

The problem here is that Google Sites doesn't support JavaScript, which is going to make my tents puzzle unplayable. However, it turns out Google Gadgets is just what I need. I'll be looking into this over the next few evenings.

Variable capture in C# closures

You have to be careful about variable capture when constructing lambdas in C#.  The following code does not do what you might imagine:

var xs = new List<Action>();
for(var x = 0; x < 10; x++) {
   xs.Add(() => {Console.Write(x + " ");});
};
foreach (var a in xs) {
   a();
}

This prints the following: 10 10 10 10 10 10 10 10 10 10
The reason is that the variable x is captured by the lambdas, not the value of x at the time the lambda is created.

To avoid this situation we have to make a local copy of x for each lambda:

var xs = new List<Action>();
for(var x = 0; x < 10; x++) {
   var x_copy = x;
   xs.Add(() => {Console.Write(x_copy + " ");});
};
foreach (var a in xs) {
   a();
}

This prints 0 1 2 3 4 5 6 7 8 9 as expected.

Plants vs Zombies

"I know you're in there, I can smell your braiiiiins!"

I'm having a hoot playing this game.

Coin tossing problem

I saw aproblem posed at Lubos Motl's blog that started me thinking about this question: how likely is a run of h heads or more in k tosses of a fair coin?

I came up with a recurrence relation. Let P(h, k) = n(h, k) / 2^k be the probability, where n(h, k) is the number of sequences of length k containing a run of h or more heads.

If h > k then n(h, k) = 0. Otherwise we have two possibilities for a sequence containing h or more heads in a row:

• an initial run of h heads, followed by k-h "don't care" tosses or
  
• a prefix of length j < k-h-1 not containing a run of h heads, followed by a tail, followed by h heads, followed by k-j-h-1 "don't care" tosses.
  

Assuming now that h <= k, we have

n(h, k) = 2^(k-h) + sum (j in 0..k-h-1) (2^(k-j-h-1).nbar(h, j))

where nbar(h, j) = 2^j - n(h, j) is the number of sequences of length j that do not contain a run of h or more heads. This gives

n(h, k)
= 2^(k-h) + sum (j in 0..k-h-1) (2^(k-j-h-1).2^j - 2^(k-j-h-1).n(h, j))
= 2^(k-h) + (k-h).2^(k-h-1) - sum (j in 0..k-h-1) (2^(k-j-h-1).n(h, j))

Let's try this out. Consider the case h = 2.

• k = 2 sequences are {HH};
  n(2, 2) = 2^0 = 1.
  
• k = 3 sequences are {HH*, THH};
  n(2, 3) = 2^1 + 2^0 - 2^0.n(2, 0) = 3.
  
• k = 4 sequences are {HH**, THH*, *THH};
  n(2, 4) = 2^2 + 2.2^1 - 2^1.n(2, 0) - 2^0.n(2, 1) = 8.
  
• k = 5 sequences are {HH***, THH**, *THH*, T*THH, HTTHH}.
  n(2, 5) = 2^3 + 3.2^2 - 2^2.n(2, 0) - 2^1.n(2, 1) - 2^0.n(2, 2) = 19.
  
• ...
  

Play by web board games

I've recently discovered MaBiWeb, an on-line interface to a dozen or so "Euro"-board games. It's free, has a simple interface, and the pace is about right for me (one or two turns per day). Recommended.

Escaping code symbols in blog postings

I wrote two bookmarklets to help escape code symbols in <textarea>s in blog postings (e.g., convert < to &lt; and so forth): Escape and Unescape.

I used a bookmarklet editor to create them, then dragged the editor generated links on to my bookmark bar. To use them, I highlight the appropriate part of a textarea and click Escape or Unescape on the bookmark bar.

Here's Escape:

javascript:
(function(){
 var textareas=document.getElementsByTagName('textarea');
 for(var i=textareas.length-1;i>=0;i--){
   textarea=textareas[i];
   var start=textarea.selectionStart;
   var end=textarea.selectionEnd;
   var prefix=textarea.value.substring(0,start);
   var text=textarea.value.substring(start,end);
   var suffix=textarea.value.substring(end,textarea.value.length);
   text=text.replace(/&/g,'&');
   text=text.replace(/</g,'&lt;');
   text=text.replace(/>/g,'&gt;');
   text=text.replace(/"/g,'&quot;');
   textarea.value=prefix+text+suffix;
 }
}
)()

Here's Unescape:

javascript:
(function(){
 var textareas=document.getElementsByTagName('textarea');
 for(var i=textareas.length-1;i>=0;i--){
   textarea=textareas[i];
   var start=textarea.selectionStart;
   var end=textarea.selectionEnd;
   var prefix=textarea.value.substring(0,start);
   var text=textarea.value.substring(start,end);
   var suffix=textarea.value.substring(end,textarea.value.length);
   text=text.replace(/&lt;/g,'<');
   text=text.replace(/&gt;/g,'>');
   text=text.replace(/&quot;/g,'"');
   text=text.replace(/&amp;/g,'&');
   textarea.value=prefix+text+suffix;
 }
}
)()

To add these as links you need to perform the following substitutions:

s/ /%20/g;s/'/%27/g;s/"/%22/gs;s/&/%26/g;s/</%3c/g;s/>/%3e/g

By the way, if anyone knows how to identify in a bookmarklet which <textarea> in an HTML page has the focus, please let me know!

Me punting on the Cam in 2008.  (I just found this while rooting through my photo albums.)

WPF: StackPanel vs DockPanel and ScrollViewer

Mucking around with WPF (Microsoft's latest and nicest way of putting GUIs together), I spent an hour googling to find the following gem.

A StackPanel allows its children to occupy whatever space they need. Therefore, you will never see a scroll bar you have attached (via a ScrollViewer) to a child of a StackPanel unless you have explicitly set the ScrollViewer Height property. You won't see the scroll bar because the child will be under the impression it has all the room it needs.

A DockPanel, on the other hand, requests that its children limit themselves to the area in the window occupied by the DockPanel.

On the left you can see an application where a ScrollViewer is attached to a StackPanel in a child of a DockPanel. The scroll bar is visible because the StackPanel cannot be fully displayed in the area made available by the DockPanel. The document structure looks something like this:

DockPanel
 ...
 TabControl DockPanel.Dock=Top
   TabItem
     ScrollViewer
       StackPanel

On the right you can see the same application where the ScrollViewer's parent is a child of a StackPanel. The scroll bar is not shown because the child StackPanel thinks it has all the display area it needs. This document structure looks something like this:

StackPanel
 ...
 TabControl DockPanel.Dock=Top
   TabItem
     ScrollViewer
       StackPanel

JavaScript

I've been learning a bit about JavaScript (here are my notes).  It's essentially Lisp based on hash tables rather than lists.  Here's my implementation of the Tents puzzle you can play in your web browser, which uses the rather excellent jQuery library (highly recommended for all your web page manipulation).

Build your own HTPC/media centre

I built a home theatre PC (HTPC)/media centre about eighteen months ago.  It is fantastic!

Here are my notes on the construction.

Visual Studio Shortcuts

Here's my list of Visual Studio shortcuts for C#.

C#

I've been spending some time learning C#.  I spent two years as a post-doc researcher with Microsoft Research in Cambridge who have recruited some of the finest language researchers in the world.  I'm not a fan of OO languages, but the bright chaps and chapesses at MSR have been doing a decent job pushing functional programming and decent type systems into .NET and C#.  After Mercury, C# is now my second language of choice for large scale programming.

Here are some notes I've been making.

It's been a while

Good grief, I'm shocking at updating these things.

News since my last missive:

• I'm now married;
• I'm a second degree blackbelt in aikido;
• I've become a father.

Lawks.