How is this superb site constructed?

Question

I found a website last night that is simply awesome. Here's the URL:

http://yourworldoftext.com/

WARNING: Site may be NSFW.

And it got me thinking straight away how this site is constructed. Taking a look at the page source doesn't reveal much, but if I look at it in Firebug I see a lot of tables like this:

<div class="tilecont" style="top: 994px; left: 1320px;">
    <table width="100%" cellspacing="0" cellpadding="0" border="0">
        <tbody>
            <tr>
                <td>A</td>
                <td>L</td>
                <td>L</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            <tr>
            <tr>
                <td>Y</td>
                <td>O</td>
                <td>U</td>
                <td>R</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            <tr>
            <tr>
                <td>B</td>
                <td>A</td>
                <td>S</td>
                <td>E</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            <tr>
    </table>
</div>

the tilecont DIV is repeated and tiled along the entire page, and the table inside occupies the entire width and height of that DIV. Then, each <tr> inside the table is one row with 16 <td>'s inside that row to make up each character.

It's hard to explain, if you have Firebug installed you can simply drag it to the page and see for yourself.

I thought this was pretty damn clever, but I can't work my head around how it would be stored in a database or something? I have tried looking through the JS files but to be honest there's a lot of stuff in there I either don't know or not related to how it's stored etc. I assume it's making an AJAX request to a database on every keyUp event storing the new data for that particular "cell"?

Anyone have any input on how they think this is done?

Answer 1

You're probably roughly correct. The site knows where your viewport is and only loads the part that is visible, in 16 char "chunks". The DB just saves 16 char strings with an x and y coord. You can see it updating in 1x16 blocks if you drag quickly.

As for sending, if it were me I would cache the text and only send one 16 char "chunk" at a time. Each time an edit occurs check if its in the same chunk as the last one. If not send the last chunk and start caching the new one.

To keep the view up to date you could have it check for changes in your view area by sending an ajax request every couple seconds with window.setInterval(). It could send back some JSON or something with just the chunks that have changes, maybe encoded with their location in the grid in the first few chars.

I'm just hand waving here, I haven't looked at the code, but you're right. Its a fascinating site.

EDIT: More detail...

Check out the init() function (line 906 in yourworld.js). That's the best point of entry if you want to study the code. You can see how editing works at line 953. On keydown the script focuses a hidden input element which catches the text. Then he uses a callback on setInterval to get the first character from the input field every 10ms and then blank the field. If there's a char then it gets cached in an array and put in the active cell on the grid. He says in a comment this is to prevent pasting.

The array of edits is sent every two seconds (line 1017). Each character of input is sent with a position and timestamp.

fetchUpdates() handles getting newly updated cells from the server (line line 383). It contains a jQuery.ajax request with a callback on success to a function that makes the necessary changes and calls fetchUpdates() again after a 1 second setTimeout().