Will Silverlight 5's P/Invoke Implementation Support Mac?

Short answer: No

COM & P/Invoke are available on Windows to trusted apps

(From the MIX 2011 session Advanced Features in Silverlight 5)

A well-designed cheat sheet of the git workflow. I'm seeing more and more git/mercurial/dvcs tutorials; it may be time to end my love affair with Subversion.

Otomata

Otomata is a generative sequencer. It employs a cellular automaton type logic I’ve devised to produce sound events.

Would be neat to be able to change the scale/key used on the fly (or based on some collision of cells).

Simple .htaccess Tester

Great for testing RewriteRule, it gives you a line-by-line summary of which rules matched.

Knockout JS

An MVVM implementation in JavaScript. Looking at their examples, one complaint I have is that getters and setters on observable properties are a bit clunky (syntactically). To increment a variable you have to do this.varname(this.varname() + 1)

Converting XML to JSON in JavaScript

Useful, though not 100% bulletproof. Since JSON doesn't have anything like XML namespaces, the output wouldn't differentiate between <a:foo/> and <b:foo/>.

Workflow.js: Async Workflows in JavaScript With Iterators & Generators

When performing an asynchronous action in JavaScript, it usually involves calling a function and passing in a callback as an argument. This works well; there's no messy subscribe/unsubscribe event handling, and anonymous functions allow you to put all the code in one place. There is a bit of trouble if you want to chain multiple asynchronous actions together, though:

function doThreeThings() {
    doFirstThing(function(result1) {
        // process result 1
        doSecondThing(function(result2) {
            //process result 2
            doThirdThing(function(result3) {
                //process result 3
            });
        });
    });
}

It would be more straightforward to maintain (and write) if we could use a more imperative style (even though the actions are asynchronous):

function doThreeThings()
{
    var result1 = doFirstThing(); // asynchronously!
    //process result 1
    var result2 = doSecondThing(result1);
    //process result 2
    var result3 = doThirdThing(result2);
    //process result 3
}

A few months ago, while working on a Silverlight application at work, one of our consultants was faced with a similar problem. We were using a SOAP-based data synchronization API, and it required 8-10 sequential asynchronous calls to different services. Rather than try to nest that many callbacks or use chained event handlers, he implemented a coroutine pattern using .NET generators (i.e. the yield keyword). The technique is described in detail on Jeremy Likness' blog:

In summary, a coroutine is a subroutine or method with multiple entry and exit points that maintains state between calls ... The two keys to a coroutine are that you may enter it from places other than the beginning, and that it retains state when you enter it again after exiting.

We later moved to a lightweight implementation of this pattern from Jeremy's Jounce framework.

Is the same thing possible in JavaScript? Javascript 1.7 has support for iterators and generators, but there is one catch: Firefox 2+ is the only browser that supports it. Without any strong-typing overhead, the core pieces of the coroutine pattern are surprisingly simple. Let's take a look at the most basic workflow action, a pause:

var pause = function(waitTime) {
    var w = new wf.WorkflowAction();
    w.invoke = function() {
        setTimeout(function() {
            w.invoked();
        }, waitTime);
    }
    return w;
}

What is this function doing? It returns a WorkflowAction object. The WorkflowAction object is a building block for an asynchronous action. We define an invoke() method, which will be called to kick off our action. When the asynchronous operation is completed (in this case setTimeout), invoked() is called.

To build a workflow, we do some work, then yield the asynchronous actions back to the workflow controller:

var helloWorldWorkflow = function() {
    $("#output").append("<div>Get Ready!</div>");
    yield wf.pause(1000);
    $("#output").append("<div>Hello</div>");
    yield wf.pause(1000);
    $("#output").append("<div>World!</div>");
}

// Execute the workflow when a button is clicked
$(document).ready(function() {
    $("#goButton").click(function() {
        var workflow = helloWorldWorkflow();
        wf.executeWorkflow(workflow);
    })
});

Hello World Demo Page

Count To 5 Demo Page

(demos require Firefox 2+)

The workflow function is written as just a series of steps, instead of nested callbacks. When the JavaScript interpreter reaches the yield statement, it passes control back to our workflow controller (wf.executeWorkflow), which waits for invoked() to be called. Once that happens, the controller asks our generator for the next action. To illustrate, here's a simplified version of the controller logic:

var executeWorkflow = function(workflow)
{   
    try {
        var currentAction = workflow.next();
        currentAction.invoked = function() {
            currentAction.invoked = function(){};
            executeWorkflow(workflow);
        };
        currentAction.invoke();
    }
    catch(err if err instanceof StopIteration){
        doneCb();
    }
}

Now for something more fun. Translation Party is a site that uses google's translation service. You type in an english sentence or phrase, and it is translated to japanese, then back to english. It keeps doing this until it reaches "equilibrium", that is, a phrase that yields the same english text two iterations in a row. Here is a poor man's version of translation party written with workflow.js:

// Returns an action object that fetches a translation
var googleTranslate = function(text, fromLang, toLang) {
    var w = new wf.WorkflowAction();
    w.invoke = function() {
        google.language
            .translate(text, fromLang, toLang, function(result) {
                w.result = result;
                w.invoked();
            });
    };
    return w;
}

var translationPartyWorkflow = function(text)
{
    var prevEnglish = text;
    var equilibrium = false;

    $("#output").html("");
    $("#goButton").attr("disabled","disabled");

    for (var i = 0; i < 20 && !equilibrium; i++) {
        var action1 = googleTranslate(prevEnglish, "en", "ja");
        yield action1;

        var japanese = action1.result.translation;
        $("#output").append("<div>Japanese: " + japanese + "</div>");

        var action2 = googleTranslate(japanese, "ja", "en");
        yield action2;

        var english = action2.result.translation;
        $("#output").append("<div>English: " + english + "</div>");

        equilibrium = english == prevEnglish;
        prevEnglish = english;
    }

    if (equilibrium)
        $("#output > div:last").css({"color":"#090"});
    else
        $("<div>No equilibrium after 20 iterations!</div>")
            .css({"color":"#900"})
            .appendTo("#output");

    $("#goButton").removeAttr("disabled");
}

Poor Man's Translation Party Demo Page

Also included in workflow.js is a jQuery plugin to aid the creation of WorkflowAction objects:

// Wait for #myElement to be clicked
var clickAction = yield $("#myElement").workflow("event", "click");

// clickAction.result now holds the event args

// Perform an ajax call asynchronously
var ajaxAction = yield $().workflow("ajax", url, settings);

// ajaxAction.result now holds the returned data

// Alias of wf.pause()
yield $().workflow("pause", 1000);

Download workflow.js

Emscripten 1.0 & JavaScript PDF Renderer Demo

Emscripten is a tool to compile LLVM assembly to JavaScript (let that sink in for a second). The demo here is a 100% JavaScript PDF renderer, that was compiled from Poppler.

Amazing.

Lorem Pixum: Lipsum generator for images

Here's a random grayscale 400 x 100 image in the "nature" category:

Random nature image

Diagnosing Character Encoding Problems

It happens to everybody. After whipping up a prototype of a program that in some way deals with text, everything appears to be working fine. Using your favorite lipsum snippet (or perhaps "The quick brown fox jumps over the lazy dog"), your output looks great. But eventually, you get some input with non-ASCII characters; an angled apostrophe or quotation mark, or some text in another language. You start seeing empty boxes, question marks, or garbled symbols. You know there's a character encoding issue somewhere, but where? Here are some common symptoms, along with likely explanations for what you're seeing.

The Garbled Trio: When text is encoded with UTF-8, characters with unicode values outside the ASCII range (i.e., greater than 0x7F) use multiple bytes. For example, the "right single quote" character would be encoded in UTF-8 as the 3-byte sequence 0xE2 0x80 0x99. If that 3-byte sequence is interpreted as something other than UTF-8 (one of the single-byte encodings like ISO-8859-1), you'll see 3 distinct characters instead of one where that single quote is supposed to be: itâ€™s instead of it’s. The same thing would happen for the left single quote (â€˜), left double quote(â€œ), right double quote (â€), and emdash (â€”) just to name a few.

The Unicode Replacement Character (): The "question mark in a diamond" character is called the unicode replacement character. When a modern UTF-8 parser encounters an invalid byte sequence, it will replace the offending character with this one. The likely reason for this is the raw text is stored in some single-byte encoding, but your program is being asked to interpret it as UTF-8 (the inverse of the "garbled trio" scenario).

For example, if your input is encoded in windows1252 and there's a "right single quote" character, its byte value would be 0x92. When interpreted as UTF-8, 0x92 is a "continuation" byte, and is only allowed to appear after a special "start-multibyte-character" byte. When it appears after a normal letter, that's not valid UTF-8, so the parser replaces it with the replacement character. For more about the UTF-8 algorithm, the wikipedia page has a great explanation.

Note: Some UTF-8 parsers replace invalid byte sequences with an actual question mark, instead of the unicode replacement character. And some others used to try to replace it with the proper character by interpreting it as some single-byte-encoded character. Modern parsers don't try to "fix" things in that way though; it's a security risk.

Empty Boxes: The empty box (a.k.a. the "replacement glyph") plays a similar role to the unicode replacement character, but it manifests itself in a slightly different situation. When a text stream is perfectly valid unicode, but the font being used to render the text does not contain a glyph for the specified code point, you see the replacement glyph. This is a subtle difference; with the replacement glyph, there's actually nothing wrong with the character encoding of the underlying text, it's just that there's no suitable glyph available in the font to display it.

One complication is that sometimes the replacement glyph is the "question mark in a diamond" character, making it harder to tell if you have a font problem or a character encoding problem.

Alternating Empty Boxes: Similar to the Garbled Trio, this occurs when UTF-16 (or other 2-byte encoding like UCS2) is interpreted as a single-byte encoding. In UTF-16, all characters, including those in the ASCII range, are encoded using two bytes. The capital letter "A" would be encoded as the two bytes 0x00 0x41. The 0x00 is the "nul" character, which doesn't have a glyph representation, thus the empty boxes. In some cases, you may see alternating question marks of doom instead of empty boxes; this would happen if the parser chose to replace the "nul" characters instead of passing it on the font rendering routine.

Note: On newer operating systems (and with some fonts), the replacement glyph is a box with 4 hex digits in it, which represent which unicode code point it was trying to display.

I hope this helps somebody who is pulling their hair out trying to figure out where a good character went bad.

System.Lazy in .NET 4.0

Easier (and substantially less ugly) thread-safe lazy-loading singletons.

HTML5 Experiment: Slime Volleyball

Since reading Mark Pilgrim's excellent book Dive Into HTML5, I've been wanting to experiment with HTML5's canvas element. The canvas's 2D drawing API lends itself well to classic 2D platformers and mini games. For my experiment, I'll attempt to clone the classic game Slime Volleyball. Not only is it a fun game with a simple mechanic, but the graphics are nothing more than circles, so I can spend my time coding and not in photoshop ;)

The general strategy for creating a game like this is to set up a game loop, where for each frame (every 20 miliseconds or so) the game objects are drawn to the canvas, and the state of each game object is updated to prepare for the next frame. After setting up my HTML page which will hold my canvas (and detect browser support for it), I started with a slimevb.Game object that did nothing except paint the background every frame:

function init(wrapper) 
{    
    var canvas = document.createElement("canvas");
    canvas.setAttribute("width", "640px");
    canvas.setAttribute("height", "300px");
    wrapper.appendChild(canvas);
    ctx  = canvas.getContext('2d');

    timer = window.setInterval(mainLoop, 20);
};

function mainLoop()
{
    // Draw the background.
    ctx.fillStyle = "rgb(0,0,255)";
    ctx.fillRect(0,0,640,250);
    ctx.fillStyle = "rgb(200,200,200)";
    ctx.fillRect(0,250,640,50);
};

Next, I added a player object that would represent the player's slime. The game object holds an instance of the player object, and the player's draw method is called from mainLoop() each frame. Since the slimes are just circles or parts of circles, the entire draw method for a slime is a few calls to the canvas's arc function:

function draw(ctx)
{
    var eyeOffset = Math.sin(Math.PI / 4) * (playerRadius - eyeRadius);

    // Draw yellow player semicircle
    ctx.fillStyle = "rgb(255,255,0)";
    ctx.beginPath();
    ctx.arc(x, y, playerRadius, 0, Math.PI, true);
    ctx.fill();

    // Draw eye outline
    ctx.fillStyle = "rgb(255,255,255)";
    ctx.beginPath();
    ctx.arc(x + eyeOffset, y - eyeOffset, eyeRadius, 0, Math.PI * 2, true);
    ctx.fill();

    // Draw pupil
    ctx.fillStyle = "rgb(0,0,0)";
    ctx.beginPath();
    ctx.arc(x + eyeOffset, y - eyeOffset, eyeRadius / 4, 0, Math.PI * 2, true);
    ctx.fill();
};

Note that the player keeps track of its own x and y coordinate. At this point, we have a slime on a background, but it doesn't respond to user input or move yet. To handle movement, I added keyup and keydown handlers to the player object. The velx and vely variables hold the current velocity in the x and y directions, and those values are altered when the arrow keys are pressed:

function keyDown(e)
{
    if (typeof keyMap[e.keyCode] !== "undefined") 
    {
        direction = keyMap[e.keyCode];
        if (!isKeyDown[direction])
        {
            isKeyDown[direction] = true;
            switch(direction)
            {
                case LEFT:
                    velx -= speed;
                    break;
                case RIGHT:
                    velx += speed;
                    break;
                case UP:
                    if (y == groundY)
                    {
                        vely -= jumpSpeed;
                    }
                    break;
            }
        }

        e.preventDefault();
        e.stopPropagation();
        return false;
    }
    return true;
};

function keyUp(e)
{
    if (typeof keyMap[e.keyCode] !== "undefined") 
    {
        direction = keyMap[e.keyCode];
        isKeyDown[direction] = false;

        switch(direction)
        {
            case LEFT:
                velx += speed;
                break;
            case RIGHT:
                velx -= speed;
                break;
        }

        e.preventDefault();
        e.stopPropagation();
        return false;
    }
    return true;
};

There was one gotcha when implementing the keyDown handler. When a key is held down, the keyDown event will start to repeat after a few seconds. That's what the isKeyDown array is for; I'll ignore keyDown events if I already know the key is down. I just have to make sure to set the proper value to false in the keyUp handler. Also of note is the jump handling -- I only want the up arrow key to register when player is currently on the ground, and when they do jump I modify vely to reflect upward movement (a negative value).

Now that I am handling input and updating the internal state of my player, I have to use that state to modify the player's x and y values, so that when the draw method is called the player will move to a different spot. This is accomplished with the player's move() method. It modifies the x and y coordinates based on the current values of velx and vely, and does some bounds checking so I don't go off screen. I have to implement "gravity" here too -- when the player jumps, I want them to fall back to the ground. Each frame, I add an amount to vely to offset the negative "jump" velocity, and set that velocity to 0 when they hit the ground.

function move()
{
    x += velx;
    y += vely;

    vely += gravity;

    if (x - playerRadius < 0)   // left edge of screen
        x = playerRadius;

    if (x + playerRadius > 640) // right edge of screen
        x = 640 - playerRadius;

    if (y >= groundY)
    {
        y = groundY;
        vely = 0;
    }
};

Take a look at the finished result here. There's a slime on a background that you can control using the left, right, and up arrow keys. It seems to perform decently -- I was initially worried that redrawing the whole screen each frame would result in low frame rates or flickering. It's certainly possible to calculate redraw rectangles and just redraw portions that I know will be changing. Buffering could also be accomplished with an off-screen canvas.

Next up: adding the ball, and collision detection.

The post office sells new massless stamps.

Today I went to the post office to mail my wedding invitations. A couple of days ago, my fiance took one of the invitations to the post office to get weighed so we could figure out the postage. The invitations weighed exactly 1 ounce and so the postage was 88 cents (due to being an oversized envelope).

My fiance was skeptical that the postage would be that low, so we took it to a different post office to get it weighed. This time the scale said 1.10 ounces. That would push the postage to $1.29 per envelope, quite the difference. The woman there said to leave the invitation with her and her manager would weigh it later and call us.

The manager did call us, and said 88 cents was actually correct -- they had forgotten to zero out the scale. Whew! Saves us a bunch of money. At that point I was glad we did our due diligence.

Today, when I went to actually send the invitations (with all of the postage now on the envelopes), the same woman weighed the same invitation again and it was back up to 1.10 ounces. The post office woman accused me of adding more things to the envelope, which I couldn't have because the envelope was sealed when she weighed it yesterday. Since the readout on the scale was to the hundredths-of-an-ounce, I asked if the scale was actually measuring hundredths (I never saw a reading between 1.00 and 1.10). I got some blank stares. I asked how the rounding on the scale worked. More blank stares.

I asked if it could be the stamps -- if somehow the invitation was teetering on the edge between 1.0 and 1.1. My hypothesis was that the actual invitation weighed something like 1.03 ounces, and the stamps pushed it to 1.05 and it then got rounded up. The post office lady then took two stamps and weighed them by themselves. The scale read out 0.00. "See?," she said, "couldn't have been the stamps."

Facepalm

Luckily the story has a happy ending. One of the times she weighed the invitation after zeroing out her scale for the 6th time it came out to 1.00 ounce. So she said she would "hand cancel" them -- i.e. make sure they go out.

kSnap & Translate

Note to self: never blog about work again.

In search of the click track

Plots of measure duration in pop songs, neat.

The End of the Financial World as We Know It

On the S.E.C:

Created to protect investors from financial predators, the commission has somehow evolved into a mechanism for protecting financial predators with political clout from investors. (The task it has performed most diligently during this crisis has been to question, intimidate and impose rules on short-sellers — the only market players who have a financial incentive to expose fraud and abuse.)

Scientists extract images directly from brain

Researchers from Japan’s ATR Computational Neuroscience Laboratories have developed new brain analysis technology that can reconstruct the images inside a person’s mind and display them on a computer monitor, it was announced on December 11. According to the researchers, further development of the technology may soon make it possible to view other people’s dreams while they sleep.

« Previous Page Next Page »