‘Cut the Rope’ HTML5 JavaScript Preloader

Screenshot of Cut the Rope HTML5 Javascript web appDevelopers from the popular iPhone game Cut the Rope and a crack team of HTML5 gurus from PixelLab, have developed an awesome JavaScript version that runs inside most modern web browsers using JavaScript and a number of powerful HTML5 features such as canvas and media APIs. You can find out how they did it from the behind-the-scenes video they’ve posted.

One of the interesting snippets from the dev blog is that the group behind the creation of the app have released an open-source preloader for JavaScript apps called PxLoader. It supports some extremely useful features such as being able to load in your canvas images in groups, use progress bars, get callbacks when various groups have loaded and supports a plug-in architecture so you can load in sounds too. It’s released under a fairly liberal MIT license and the PxLoader source is available on GitHub.

Image loading in Groups

A good example is using it in an HTML5 game to load menu sprites before actual game sprites since you would want the menu to display and load first. PxLoader can also provide progress updates to many listeners and will scope the updates and statistics to only the set of “tags” a listener is interested in, a tag being the text name of that group.

// Delay each image and append the timestamp to prevent caching 
var baseUrl = 'http://thinkpixellab.com/pxloader/slowImage.php?delay=1time=' + new Date, 
    $log = $('#sample3-log').val(''), 
    $menuProgress = $('#sample3-menuProgress').text('0 / 50'), 
    $gameProgress = $('#sample3-gameProgress').text('0 / 50'), 
    $totalProgress = $('#sample3-totalProgress').text('0 / 100'), 
    loader = new PxLoader(); 

// Queue 50 images for each section 
var addImagesForTag = function(tag, $progress) { 
    for(var i=0; i < 50; i++) { 
        var imageUrl = baseUrl + '&i=' + i + '&tag=' + tag; 
            pxImage = new PxLoaderImage(imageUrl, tag); 
        pxImage.imageNumber = i + 1; 
        loader.add(pxImage); 
    } 

    // add a listener to update progress for the tag 
    loader.addProgressListener(function(e) { 
        $progress.text(e.completedCount + ' / ' + e.totalCount); 
    }, tag); // scope listener to the current tag only 
}; 

addImagesForTag('menu', $menuProgress); 
addImagesForTag('game', $gameProgress); 

// Listen to every event to update total progress 
loader.addProgressListener(function(e) { 

    // log which image completed 
    var line = ' Image ' + e.resource.imageNumber + 
        ' Loaded [' + e.resource.tags[0] + ']\r'; 
    $log.val($log.val() + line); 

    // scroll to the bottom of the log 
    $log.scrollTop($log[0].scrollHeight); 

    // the event provides stats on the number of completed items 
    $totalProgress.text(e.completedCount + ' / ' + e.totalCount); 
}); 

// Start downloading images for tags in prioritized order 
loader.start(['menu', 'game'])

You can play with a working example of the group image loading on the PxLoader homepage (Sample 3).

Impressive JavaScript PC Emulator

Fabrice Bellard has written an impressive PC emulator that actually emulates a PC with a 32 bit x86 compatible CPU. This is some really imaginative use of pure JavaScript which I’m sure no-one would have every dreamed of as it allows you to run a virtual instance of Linux inside a browser window!

It currently only works in Google Chrome 11 or Firefox 4 as it uses part of the WebGL HTML5 spec that Safari hasn’t implemented yet but is definitely worth playing around with. You can even compile C files!

Export Symphony CMS Blueprint metadata

Symphony is a powerful CMS system that is used by many of the world’s most recognisable brands. It’s a great system that lets the developer focus on XHTML and data they are creating rather than much of the back-end code. It does have it’s flaws though and one of them is that it’s very easy for Symphony ‘sections’ and ‘pages’ to get out of sync between production and staging servers.

Sure, the pages themselves can be version-controlled but much of the metadata about the pages such as which datasources are attached are stored in the database and previously this data was only really accessible by clicking on each page within Symphony individually. Now this is fine if you have just a couple of pages but on some of the sites I’ve worked on this involved 50 pages or more with almost as many sections…

My solution was to create a Symphony extension called Blueprint Metadata that pulled this metadata out of the database and export it as an XML file conveniently time-stamped containing the server hostname. This allows you to quickly ‘diff’ the changes between two servers and quickly see the differences so you can apply them manually. I wrote this extension quite a few years ago but still find myself using this even today and have decided to make it open source under a very flexible BSD license.

Feel free to grab the Blueprint Metadata extension on Github now.

Email yourself a log file

If you ever find yourself deep within the console of a remote Unix/Linux server, locked down by a thousand firewalls and in quick need of saving a log file for later analysis then your best friend could be the mail command! Just type the following, replacing [email protected] with your email address, naturally ;-)

cat secret.log | mail -s "Secret API Log File" [email protected]