The winning entries were:

1. Candle Flame by Arthurio
2. Rockford the Invincible by me
3. Castle Wolfenstein by Mathieu “p01″ Henri

And here’s the explanation of how I managed to get placed above p01’s entry. Quoting Wrayal, that month’s topic setter and therefore judge:

[On Castle Wolfenstein] Ok…maybe this one needs a little justification. A lot of people may have expected this to win. It was a fantastic script, don’t get me wrong! (”stop it! You are doing impossible things! What if reality find out?!” ;)) In particular, I thought the map showed exactly the sort of flair that would normally win. But we know you’re capable of this ;) you’ve set yourself too high a standard :P What can I say, it was a great script, but I’d be interested to see what else could be implemented - I liked the rockford entry for example for the many simultaneous actions.

For those unfamiliar with the title, Boulder Dash is a classic game from the 80’s. I used to play it a lot on my Atari 800XL when I was a kid. Since being hooked on programming, writing Boulder Dash clones (or derivatives) has become a habitual thing that I do when I get my hands on a new programming language. A friend (who incidentally is the author of BoulderCat) recently joked about this habit being my version of “Hello, world!“.

Since I had to fit everything in 20 effective lines of JavaScript, this of course is not a complete implementation of Boulder Dash. For instance, Rockford, the main character, never dies. You can freely move around the monsters and stop falling boulders with your head. I’ve therefore called the game “Rockford the Invincible”. Just “Boulder Dash” would have been too obvious.

Here’s the JavaScript code behind the curtains. Note that some lines have comments with line numbers in them. Those are the effective lines of JavaScript, as (somewhat loosely) dictated by the line-counting rules of the contest.

            function move(src, dest) {
/*01*/          g.cells[dest].className = g.cells[src].className;
/*02*/          g.cells[src].className = "e";
/*03*/          return (g.cells[dest].ser = g.ser) != g.ser;
            }

/*04*/      window.onload = function() {
/*05*/          g = {
                    w: 15,
                    h: 15,
                    ser: 0,
                    rules: {
                        od: function() {
/*06*/                      [[0, g.w, g.w], [g.w, (v = [-1, 1][g.ci]), g.w + v], [g.w, -v, g.w - v]].every(function(vs) {
/*07*/                          return ("wod".indexOf(g.cells[i + vs[0]].className) > -1 && g.cells[g.d = i + vs[1]].className == "e" && g.cells[i + vs[2]].className == "e") ? move(i, g.d) : true;
                            });
                        },
                        trbluvcm: function(o) {
/*08*/                      ([(m = (o >> 1) - 1), 0].every(function(dv) {
/*09*/                          return (g.cells[g.d = i + [-g.w, 1, g.w, -1][nv = (g.ci + dv) & 3]].className == "e") ? move(i, g.d, g.cells[i].className = g.k.charAt(nv + o)) : true;
                            })) ? g.cells[i].className = g.k.charAt(((g.ci - m) & 3) + o) : false;
                        },
                        qfkj: function() {
/*10*/                      ("esd".indexOf(g.cells[g.d = i + (nv = [[0, 0], [-g.w, 1], [1, 2], [g.w, 1], [-1, 3]][g.mouse ? (Math.abs(g.dx = (g.mouse.x >> 4) - (i % g.w)) > Math.abs(g.dy = (g.mouse.y >> 4) - Math.floor(i / g.w)) ? (g.dx > 0 ? 2 : 4) : (g.dy > 0 ? 3 : (g.dy < 0 ? 1 : 0))) : 0])[0]].className) > -1) ? move(i, g.d, g.cells[i].className = g.k.charAt(nv[1])) : g.cells[i].className = g.k.charAt(0);
                        }
                    },
                    cells: document.getElementsByTagName("td"),
                    maze: document.getElementById("maze")
                };

/*11*/          document.getElementById("cap").onmousedown = function(event) {
/*12*/              g.mouse = {
                        x: (g.evt = window.event || event).layerX || g.evt.x,
                        y: g.evt.layerY || g.evt.y
                    };
                };

/*13*/          setInterval(function() {
/*14*/              g.maze.className = "f_" + (++g.ser & 7);

/*15*/              for (i = 0; i < g.h * g.w; i++) {
/*16*/                  for (g.k in g.rules) {
/*17*/                      (g.cells[i].ser != g.ser) ? ((g.ci = g.k.indexOf(g.cells[i].className)) > -1 ? g.rules[g.k](g.ci & 4) : false) : false;
                        }
                    }
                }, 100);
            }

/*18*/      Array.prototype.every = Array.prototype.every || function(callback, that) {
/*19*/          for (var i = 0; i < this.length && callback.call(that || this, this[i]); i++);
/*20*/          return i == this.length;
            }

cleartool lsco -cvi -r -s | xargs -n1 cleartool diff -pred -ser |
    egrep -v "^(Files|Directories) are identical"

This Unix shell command will generate the diff output (which you can redirect to a file) recursively (-r) for all files that are checked out within the current directory, on the current view (-cvi).

The output is not exactly a unified diff file (I believe that it can’t be directly used with the patch command) but it still is a human-readable diff that spans multiple files.

The reason that I use -serial_format (-ser) and not -diff_format is that -diff_format suppresses the file headers and obviously a “unified diff” file doesn’t make sense when you don’t know where each individual file starts and ends.

If you don’t already know what color books are, there’s the Custom Colors dialog which appears when you click the Custom button on the Color Picker dialog. There, you can pick colors from a variety of color books which represent standard color catalogs by organizations like Pantone, Toyo, Trumatch, etc. The color book data is kept in files under the Presets/Color Books folder of your Photoshop installation. On Windows, they have the .acb extension.

To extract data, just pass in the filename of a color book. The resulting XML will go to standard output. To capture to a file, just redirect the output:

acb2xml focoltone.acb > focoltone.xml

For long filenames or filenames with spaces, quote the filenames:

acb2xml "PANTONE process coated.acb" > "PANTONE process coated.xml"

The resulting output will look something like this:

<?xml version="1.0" encoding="UTF-8"?>
<color-book version="1.0" xmlns="http://magnetiq.com/ns/2007/05/colorbook">
    <version>1</version>
    <id>0bb9</id>
    <title><![CDATA[$$$/colorbook/FOCOLTONE/title=FOCOLTONE]]></title>
    <prefix><![CDATA[$$$/colorbook/FOCOLTONE/prefix=FOCOLTONE ]]></prefix>
    <postfix><![CDATA[$$$/colorbook/FOCOLTONE/postfix=]]></postfix>
    <description><![CDATA[$$$/colorbook/FOCOLTONE/description=]]></description>
    <colors>860</colors>
    <page-size>5</page-size>
    <page-offset>2</page-offset>
    <color-space>CMYK</color-space>
    <color>
        <name>1070</name>
        <alias><![CDATA[1070  ]]></alias>
        <cyan>100</cyan>
        <magenta>0</magenta>
        <yellow>0</yellow>
        <black>0</black>
    </color>
    <color>
        <name>1071</name>
        <alias><![CDATA[1071  ]]></alias>
        <cyan>0</cyan>
        <magenta>100</magenta>
        <yellow>0</yellow>
        <black>0</black>
    </color>
    ...

ACB2XML currently supports CMYK, RGB and Lab color spaces.

Known Issues

• Some textual information is enclosed in CDATA blocks, instead of doing proper XML escaping. While this has no harm whatsoever, I may fix it in the future.

Legalese

Adobe® and Photoshop® are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.

This is a programming experiment that dates back to 2002. Having played around with POP3 for a while (see E-Res-Q), I just wanted to prove to myself that POP3/FTP protocol translation could work (and I guess I also had more free time back then). Burrito is certainly not a utility that would appeal to the general public, due to its obscure function. The only real-life scenario I can think of is an employee trying to circumvent the company firewall that blocks POP3 traffic (which is something I’ve experienced first-hand).

Very Brief Usage Instructions

The About tab has an Check for update button which takes you back to this site to tell you that you’re using the most recent version of Burrito (since I currently don’t have any intentions of releasing updates).

In the Options tab, you can determine how you’ll be passing the POP3 username and server to your FTP server. The password that you use for the FTP connection is used as the POP3 server password, so Burrito doesn’t have to know your password in advance. However, the POP3 username and password must be combined and used as the FTP username. You can change the username-server separator here (defaults to “\”).

You can also configure how filenames for individual messages are to be composed. The default is to use the name of the sender, followed by a dash, followed by the message subject. The default file extension is “.eml”. After copying files to your local disk, you should be able to simply double click to view them in Outlook Express. Use “.msg” etc. to match whatever e-mail client you’re actually using.

By default, Burrito listens on port 21, on all IP addresses. The Security tab allows you to tweak the FTP server listen settings.

Here’s how a typical FTP client configuration looks like (I use Total Commander):

And here’s how your e-mail messages appear as files in your FTP client:

For every FTP connection you establish with Burrito, it will typically open a POP3 connection to the server that specified in the FTP username. It has a connection sharing feature for when multiple FTP clients access the same POP3 account.

Because Burrito doesn’t download entire messages until you attempt to do an FTP-copy, simply listing and deleting messages are typically faster than a normal POP3 client. Therefore, it can actually be used for cleaning up a POP3 account after it gets choked by a huge messages or spam.

Cool? I guess so. Pointless? Probably :)

Known Issues

• After the system wakes up from hibernation/suspension, the FTP listen port becomes unresponsive. Momentarily chaning the FTP server listen mode in the Security tab to some other mode may (depending on the mode change) reset the listen port.

Take a look at the URL of a typical Easynews download:

http://downloads.members.easynews.com/news/7/a/3 *snip*
/7a38dcc18a67ac805cff5abc5ef36d12011d39e6b.iso/foo.ISO

The file is inside a folder whose name contains a bunch of hexadecimal digits. Let’s break down the digits as follows:

7a38dcc18a67ac805cff5abc5ef36d12
0
11d39e6b

I discovered that the first block of 32 characters (7a38dcc18a67ac805cff5abc5ef36d12) is the MD5 checksum for the file, and the last block of 8 characters (11d39e6b) is the CRC32 checksum. The zero in between probably has no significance.

Comparing either of these to the checksum you get for the downloaded copy should give you enough confidence that your download is intact. For getting the MD5 checksum, you could use Microsoft’s File Checksum Integrity Verifier utility on Windows:

fciv -a "foo.ISO" -md5
//
// File Checksum Integrity Verifier version 2.05.
//
7a38dcc18a67ac805cff5abc5ef36d12 foo.iso

If this matches what’s in the folder name, it is safe to assume that your download is intact. Alternatively, you can use a SFV utility to compare the CRC32 checksums. The number following the filename in the SFV file below is the CRC32 checksum for that file:

; Generated by WIN-SFV32 v1.0
; (Compatible: Total Commander 6.51)
foo.ISO 11D39E6B

I defined a class called “MyClass” which has a single integer member variable (of no significance to this test). The main function defines an array of 42 MyClass objects and then does some dummy arithmetic, just as a landmark for the assembly code following the initialization (if any) of the MyClass array.

I’ve interlaced the C++ code with the corresponding assembly code as comments so that you can see what’s happening behind the scenes for each line of C++ code. I believe the compiler I used was MS VC.

First, let’s see what happens when using the default constructor (not defining our own):

class MyClass {
private:
    int m_i;
};

int main(int argc, char* argv[]) {
    /*
    00401000  push        ebp
    00401001  mov         ebp,esp

    Allocate space in stack for our local variables;
        42 (array length) * 4 (size of MyClass) = 168
        2 (local variables x and y) * 4 (size of int) = 8
        --
        176 = 0xB0 (total)

    00401003  sub         esp,0B0h
    */
    MyClass a[42];
    int x = 2;
    /*
    00401009  mov         dword ptr [x],2 (Assign 2 to x)
    */
    int y = x * 2;
    /*
    00401010  mov         eax,dword ptr [x] (Get x)
    00401013  shl         eax,1 (Multiply by 2)
    00401015  mov         dword ptr [y],eax (Assign to y)
    */

    return 0;
    /*
    00401018  xor         eax,eax (Set return value to zero)
    */
}

You can see that there’s absolutely no compiled code associated with our array definition, apart from the single line of code for making room in the stack.

Let’s compare that to what happens when using an empty constructor:

class MyClass {
public:
    MyClass() {;}

private:
    int m_i;
};

int main(int argc, char* argv[]) {
    /*
    00401000  push        ebp
    00401001  mov         ebp,esp 

    Allocate space in stack for our local variables;
        42 (array length) * 4 (size of MyClass) = 168
        2 (local variables x and y) * 4 (size of int) = 8
        3 (internal loop variables)  * 4 (size of int) = 12
        --
        188 = 0xBC (total)

    00401003  sub         esp,0BCh
    */
    MyClass a[42];
    /*
    00401009  mov         dword ptr [ebp-0B4h],2Ah (Loop 42 times)
    00401013  mov         dword ptr [ebp-0B8h],4
    0040101D  lea         eax,[a]
    00401023  mov         dword ptr [ebp-0BCh],eax 

    Execute the following code in the loop:

    00401029  mov         ecx,dword ptr [ebp-0B4h]
    0040102F  sub         ecx,1
    00401032  mov         dword ptr [ebp-0B4h],ecx
    00401038  cmp         dword ptr [ebp-0B4h],0
    0040103F  jl          main+55h (401055h)
    00401041  mov         edx,dword ptr [ebp-0BCh]
    00401047  add         edx,dword ptr [ebp-0B8h]
    0040104D  mov         dword ptr [ebp-0BCh],edx
    00401053  jmp         main+29h (401029h)
    */
    int x = 2;
    /*
    00401055  mov         dword ptr [x],2
    */
    int y = x * 2;
    /*
    0040105C  mov         eax,dword ptr [x]
    0040105F  shl         eax,1
    00401061  mov         dword ptr [y],eax
    */

    return 0;
    /*
    00401064  xor         eax,eax
    */
}

Whoops! There’s suddenly a big chunk of code introduced. If you look at what that piece of code is doing, it’s looping 42 times, but not doing anything apart from the overhead of the loop itself. This could potentially become significant if our array had hundreds of thousands of items instead of just a mere 42. Of course, this was what I observed with a MS VC debug build and other compilers may have different results, with different compiler optimization settings.

You can probably figure it out on your own by playing with the checkboxes at the lower left corner of the pop-up, but read on to find out how it all works.

The demo renders only regular polygons, but any convex, irregular, closed area can be rendered.

We start with a list of vertices:

Then we find the bounding rectangle (minimum and maximum x and y coordinates) of the vertices and apply the fill <div> with either a solid color or a background image:

Now the fill rectangle has to be masked to leave behind our filled polygon. Notice that each side of a polygon can be fitted with a right angle triangle:

For vertices that lie on the bounding (or fill) rectangle, the right angle triangles will be flush with the sides of the bounding rectangle (I, II and III above). For vertices that fall inside the bounding rectangle, the right angle triangles (IV and V) will leave behind rectangles (VI). The number of rectangles depends on the number of sides of the polygon and also its orientation.

What we want to do now is to place triangles and rectangles over the numbered areas so that only the actual polygon will remain visible. For rectangular masks, absolutely positioned <div> elements (with the background color) will do the trick, but for triangles we’ll have to think about the rectangles that bound them:

Since we can’t have an infinite supply of right angle triangle images at all sorts of slants, we can simply resize isosceles right angle triangles to get any angle variations we want. We will need at least four different triangles, with their right angles at each corner. The filled parts of the triangles should be of the background color and the rest should be transparent:

Since these triangles will be resized, it’s important to make them sufficiently large to minimize aliasing. The images used in the demo are 600 x 600 in dimensions. Once the remaining areas are masked with the triangular masks, all we’re left with is our polygon:

The edges may look jagged a bit, but when the polygon is animated, it’s barely noticeable.

Concave areas can be filled if the angles don’t cause overlapping of the masks. I’ve played around with drawing n-spoked stars instead of convex polygons, but couldn’t perfect the method to entirely avoid overlaps. The technique can also be used for rendering circles, since as the side count grows, polygons eventually start to look like circles.

setmy.browsersize.com allows you to set your browser size to any desktop resolution without the need for extra add-ons/extensions. This is useful for seeing how users with different desktop resolutions will be viewing your website. whatsmy.browsersize.com tells you your current desktop resolution and browser size along with all the installed popular plug-ins (with links to download sites for missing ones).

Image rollovers are usually composed of two individual images; one for the default state and one for when the mouse is hovered over the image or link. However, it bears some advantages to use a single image by taking advantage of CSS background image offsets. Here’s how a rollover for an anchor is usually done:

The HTML code could look like something like this:

<a href="#" id="yaprak">&nbsp;</a>

The associated CSS would then have items like:

a#yaprak {
    width: 64px;
    height: 64px;
    background-image: url(yaprak_bw.png);
    display: block;
    text-decoration: none;
}

a#yaprak:hover {
    background-image: url(yaprak_color.png);
}

Two individual images for the two states would have to be uploaded to the server and they would look like this:

Finally, the end result would be:

The default image that is visible to the user is the black & white yaprak_bw.png and when you hover over the image, it’s replaced by yaprak_color.png with its full-color glory. However, if this is a user’s initial visit to the website and therefore the color image hasn’t already been cached, there may be a user-perceivable delay in switching to the color image. The net annoyance will depend on factors like the user’s connection speed, the load on the web server and most importantly, the attentiveness of the user. A couple of methods can be applied to pre-load alternate images to avoid the perceived latency but I will advocate for something else: don’t use separate alternate images in the first place. You can use a single image where the two rollover images are flush with eachother, side by side or one on top of another. Here’s how:

The HTML code is the same. The CSS this time has:

a#yaprak {
    width: 64px;
    height: 64px;
    background-image: url(yaprak_bw_color.png);
    display: block;
    text-decoration: none;
}

a#yaprak:hover {
    background-position: 64px 0;
}

There’s only a single image:

The end result is:

Using fewer images might marginally speed up the load times for your website while also decreasing the load on your web server. Another scant advantage is that you’d have less images to worry about maintaining and uploading to your web server.