Quick way of cleaning HTML for iOS apps

For some reason HTML is always dirty, it’s usually full of Analytics tags, JavaScript or contains nested HTML tags. This is usually fine for displaying in browsers but at some point an iOS app will need to display HTML content and usually when it does, you need it to display clean HTML or only a small subset of HTML tags… all it takes is an unexpected tag and the whole document layout could be ruined. So here is a way of quickly and easily stripping HTML content down.
Continue reading

‘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).

Get emailed when uploads complete

Sometimes I have to send a client a really large file or app that’s too large to post to Basecamp. The solution is to upload to a web server over night and email the client a link when it’s done. Not wanting to tie my laptop down overnight here is a great solution that emails you when it’s done.

Lets say your file is called NinjaApp-1.0.ipa and you use SSH/SFTP on your server to copy everything…
1. Drop your file onto a spare Mac or server.
2. Type the following into a terminal window:

scp NinjaApp-1.0.ipa [email protected]:/var/www/downloads/.
&& echo "Upload done" | mail -s "Upload Complete" [email protected]

That’s it! You’ll get an email when it’s done.