Aug 22

Want to pack JS and CSS really well? Convert it to a PNG and unpack it via Canvas

Ajax No Comments »

Jacob Seidelin of nihilogic fame (remember his Super Mario in JavaScript solution) is one of my unsung heroes of JavaScript. His solutions have that Dean Edwards “genius bordering on the bat-sh*t-crazy” touch that make you shake your head in disbelief when they come out but later on become very interesting.

One of his posts from 2008 entitled “Compression using Canvas and PNG-embedded data” had a good idea: if you want to compress JavaScript and CSS you could reverse engineer a packing algorithm in JavaScript or you could use a lossless packing system that is already in use and supported in browsers. In this case the packed format is PNG and the way to unpack it is by using the canvas API’s getImageData() method:

PLAIN TEXT
JAVASCRIPT:

var x = function(z, m, ix ) { // image, callback, chunk index
  var o = new Image();
  o.onload = function() {
    var s = “”,
        c = d.createElement(“canvas”),
        t = c.getContext(“2d”),
        w = o.width,
        h = o.height;
    c.width = c.style.width = w;
    c.height = c.style.height = h;
    t.drawImage(o, 0, 0);
    var b = t.getImageData( 0, 0, w, h ).data; //b : bucket of data
    for(var i= 0; i <b.length; i += 4) {
      if( b[i]> 0 )
        s += String.fromCharCode(b[i]);
    }
    m(s, ix);
  }
  o.src = z;
}

As there are quite some interesting competitions going on that need really small JavaScript solutions Alex Le took up Jacob’s work and wrapped it in a build script that concatenates, packs and converts to a PNG and unpacks it for the 10K competition with a JavaScript. In the process Alex also found some bug in Internet Explorer 9′s canvas implementation as it only reads the first 8192 bytes of a PNG and returns 0 for the others :(.

It is pretty amazing how efficient this way of packing is. What we need to test now is when and if it is worth while to have the unpacking done on the client. Imagine adding your JS and CSS to the end of an image and cropping it in CSS to have all the info you need in an app in a single HTTP request. Let the games begin.

Continue reading »

Tagged with: • • • • • •
May 19

Chrome Web Store? I want an Open Web Store

Ajax No Comments »

The Chrome Web Store was shown off at the Google I/O keynote (streaming live) today along with the other great news of open codecs, great new tools, and more.

I found myself torn about this one. For one, it seems tied into Chrome itself. The problem that Sundar stated (developers needing a good channel; users having a hard time finding things) is valid for the entire Web. We don’t need a Firefox Web Store, IE Web Store, etc etc etc. We have an opportunity to do better here.

That being said, it was great to see the early stages here and how they give developers the ability to place your Web application in to an experience where you can put a price tag on top.

I would love to get details here. How do you package the application? Do you have to upload the package to the store?

I wonder if there is room for a distributed system that allows me to put a price tag on my web application, but keep it at my URL.

What do you think? There is a session on the store… so I look forward to the deets!

Continue reading »

Tagged with: • • •
Apr 30

Want Web games on all things iTouch? Scripty 2.

Ajax No Comments »

Thomas Fuchs has a detailed post on building a Flash-y game with scripty2 where he walks through a memory game.

Everything is shown, from game logic all the way to the smooth animations and easings:

PLAIN TEXT
JAVASCRIPT:

  1.  
  2. // animate cards to go to new positions
  3. cards.inGroupsOf(4).each(function(group, x) {
  4.   group.each( function(card, y){
  5.     flip(card, ‘back.png’);
  6.     card.morph(‘opacity:1;left:’+(x*SIZE)+‘px;top:’+(y*SIZE)+‘px’, {
  7.       duration: duration || 0.5, transition: ‘easeInOutQuint’
  8.     });
  9.   });
  10. });
  11.  
  12. // flip card animation
  13. function flip(element, image){
  14.   var img = element.down(‘img’);
  15.   img.morph(‘width:0px;left:70px;’, {
  16.     duration: .2, transition: ‘easeInCubic’,
  17.     after: function(){
  18.       if(image) img.src = image;
  19.       img.morph(‘width:140px;left:0px’, {
  20.         duration: .2, transition: ‘easeOutCubic’
  21.       });
  22.     }
  23.   });
  24. }
  25.  

Very detailed indeed…. awesome.

Continue reading »

Tagged with: • • • •
preload preload preload