If you try now to explain people these days that it takes less space to write a 3 minutes HD animated video and music clip than than it takes to store a 32×32 pixel icon they won't believe you. Not now when a plain jpeg image used on some website is > 50KB. So here's a guy called Iñigo Quílez who demonstrates just that using the image analogy. He writes a x86 real mode demo using Photoshop. The entire program is done by creating a 9x9 pixels image, filling each pixels with carefully chosen colors to represent the correct opcodes (who needs compilers, right ?) The image is then saved in a .raw format (no headers) then renames it to a .com file so that Windows recognize it as a executable. The animation is a infinite moving tunnel with a gray colored texture created with an XOR pattern, blurred, and deformed using a plane deformation technique to produce the animation.

This is the "source code" resized 10 times in a png extension

And here's the guy in action proving his mad skills.

Related posts:

1. JavaScript Object-Oriented Programming (OOP) – jClass
2. Programming is like sex
3. Open and Save files to Desktop without going to Server

Okay, one other potential issue may come if you need to receive the data into a JSON string or XML or whatever beside a plain binary file. Then you have to use BASE64 encoding and decode your data into a variable but must keep in mind the first issue with the null characters. My solution to this problem is to create a method to read directly from the BASE64 encoded string at arbitrary locations without decoding the entire thing.

Here's an example of a binary file:

Offset(h)00 01 02 03 04 05 06 07 08 09 0A 0B 0C 0D 0E 0F
 
00000000 00 01 02 03 04 05 06 07 08 09 0A 0B 0C 0D 0E 0F     ...............
00000010 19 84 74 68 69 73 20 69 73 20 61 20 74 65 73 74     ..this is a test

You have 32 bytes in this file, with BASE64 encoding you get a 46 chars length string:

   AAECAwQFBgcICQoLDA0ODxmEdGhpcyBpcyBhIHRlc3Q=

A usage example:

    var data = new Base64Native("AAECAwQFBgcICQoLDA0ODxmEdGhpcyBpcyBhIHRlc3Q=");
    console.log(data.length); // outputs 32;
    console.log(data.readBoolean()); // outputs false; - reads a byte and casts it to a boolean value
    console.log(data.readByte()); // outputs 1;
    console.log(data.readWord()); // outputs 515; - reads a 16 bit number
    console.log(data.readInt()); // outputs 67438087; - reads a 32 bit number
    console.log(data.seek(28)); // moves the pointer to byte 28 (0x1C)
    console.log(data.readString(data.bytesAvailable())); // outputs 'test'; reads a string from position 28 to the end of the file

And here's the class

var Base64Native = function(data) {
    var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
        length = data.length - (data.length / 4) - (data.split(/=/g).length - 1),
        ptr = 0;
 
    function keyIdx(idx) {
        return keyStr.indexOf(data.charAt(idx));
    }
 
    function readByte() {
        if (!(length - ptr)) { throw Error('End of stream!'); }
        var blockIndex = Math.floor(ptr / 3) * 4, subIndex = ptr++ % 3, ptrChr = blockIndex + subIndex;
        return !subIndex && ((keyIdx(ptrChr) < < 2) | (keyIdx(ptrChr + 1) >> 4)) || subIndex === 1 &&
               (((keyIdx(ptrChr) & 15) < < 4) | (keyIdx(ptrChr + 1) >> 2)) || ((keyIdx(ptrChr) & 3)  < < 6) |  keyIdx(ptrChr + 1);
    }
 
    return {
        /* Returns the available bytes left in the file to read */
        bytesAvailable : function() {
            return length - ptr;
        },
        /* Reads and returns a 8 bit number and increments the position of the index accordingly */
        readByte : function() {
            return readByte();
        },
        /* Reads and returns a 32 bit number and increments the position of the index accordingly */
        readInt : function() {
            return (readByte() << 24) | (readByte() << 16) | (readByte() << 8) | readByte();
        },
        /* Reads 1 byte and returns the boolean value of it and increments the position of the index accordingly */
        readBoolean : function() {
            return Boolean(readByte());
        },
        /* Reads and returns a 16 bit number and increments the position of the index accordingly */
        readWord : function() {
            return readByte() << 8 | readByte()
        },
        /* Reads and returns a string of length 'len' and increments the position of the index accordingly */
        readString : function(/*String*/len) {
            var data = '';
            for (var i = 0; i < len; i++) {
                data += String.fromCharCode(readByte());
            }
            return data;
        },
        /* Moves the index into the file at location newpos */
        seek : function(newpos) {
            ptr = newpos;
        },
        /* Returns the position of the index in the file */
        position : function() {
            return ptr;
        },
        /* The length of the data */
        length : length
    };
};

Related posts:

1. Serialize JavaScript object to JSON
2. For Javascript devs
3. jQuery.quickEach

Source website:
http://jsperf.com/jquery-each-vs-quickeach

The code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

jQuery.fn.quickEach = (function() {
  var jq = jQuery([1]);
  return function(c) {
   var i = -1,
       el, len = this.length;
   try {
    while (++i < len && (el = jq[0] = this[i]) && c.call(jq, i, el) !== false);
   } catch (e) {
    delete jq[0];
    throw e;
   }
   delete jq[0];
   return this;
  };
 }());

If you run the test on that page, on most browsers you'll see that quickEach() is about 80% faster than native each()

Related posts:

1. On typing finished jQuery plugin
2. Parse XML in JavaScript with jQuery
3. For Javascript devs

1
2
3
4
5

    // standard style
    x = '<div class="' + classnames + '" rel="' + somevar + '" id="' + othervar + '">' + content + '</div>';
 
    // html tag style
    x = htmlTag('div', {class:classname, rel:somevar, id:othervar}, content);

Usage

htmlTag(tagName [, attributes [, content]])
or
htmlTag(tagName [, content [, attributes]])

The function can be called with one, two or three arguments. Beside the first one which is the name of the tag (string), the other two are optional and can be placed in whatever order you like.
For img tags, the content argument is set as src attribute or as value attribute for input tags if the attributes argument doesn't specify otherwise

attributes argument must be an object with key:value pairs and will be expanded as attributes of the tag
content argument is a string or number

1
2
3
4
5
6
7
8
9
10
11
12
13

    var classname = 'test', somevar = 2, id = 'mydiv', content = 'hello';
 
    htmlTag('div', {class:classname, rel:somevar, id:othervar}, content);
    htmlTag('div', content, {class:classname, rel:somevar, id:othervar});
    // will both return <div class='test' rel='2' id='mydiv'>hello</div>
 
    htmlTag('img', content)
    // <img src='hello' />
    htmlTag('img', {src:'myImage.jpg'}, content)
    // <img src='myImage.jpg' /> content is discarded and attributes src is used as source
 
    htmlTag('input', {type:'text', name:id}, content)
    // <input type="text" name="mydiv" value="hello" />

The code

1
2
3
4
5
6
7
8
9
10
11

function htmlTag(type) {
    var r="< "+type,o={},v='',x=0,a=arguments;
    a.length==3&&(((x=typeof a[1]=='object')||1)&&((o=a[-~!x]||{})&&(v=a[-~x]||'')))||a.length==2&&(typeof a[1]=='object'&&(o=a[1]||{})||(v=a[1]||''));
    for(var i in o)r+=" "+i+"='"+o[i]+"'";
    (type=='img'||type=='br'||type=='input')&&((!o.src&&v)&&((type=='img'&&(r+=" src='"+v+"' />"))||(type=='input'&&(r+=" value='"+v+"' />")))||(r+=' />'))||(r+=">"+v+"< "+"/"+type+">");
    return r;
}
 
function queryTag(type) {
     return $(htmlTag.apply(this, arguments))
}

queryTag function just wraps the newly created html in a jQuery object so you can have something like this

1
2
3
4
5

     $("#menu").append(
             queryTag('div', {class:'menuItem'}, 'Click me').click(function() {
                      alert('clicked');
             })
      )

Related posts:

1. Serialize JavaScript object to JSON
2. Communicate betwen C# and an embeded Flash application
3. JavaScript Object-Oriented Programming (OOP) – jClass

1
2
3
4
5
6
7
8
9
10

   // loads and caches the zip file
   var loader = new ZipLoader('files.zip');
   // creates a style node in the document header and appends the style
   loader.LoadCSS('files.zip://style.css');
   // creates a script node in the document header and appends the script
   loader.loadScript('files.zip://jquery.js');
   // returns the file content
   var someFileYouNeed = loader.load("files.zip://myFile.txt");
   // returns the base64 encoded image usable as img source
   $("#logo").attr('src', loader.loadImage('files.zip://images/logo.png'));

The level of compression using zip surpasses the js and css minification in all the ways possible. For example, My current application has 79 files (js, and few css) and they all sum up to 924KB in size. Zipping all those 96 files using Ultra compression level gives me 1 file of 126 KB => 1 server request. That's something.

The best performance is made Opera (strangely), then Firefox, Crome, Safari and last IE (no surprise here, I was expecting it before I even started).

It's a V 1.0 that still needs some work and it doesn't work in IE because that stupid browser overrides the mime type and at first null character in the reading of the zip, the content ends. I will fix this eventually I will also include this as a jClass library soon.

Update: Fixed it so it works in IE as well. There is a performance issue still. Will fix that too.

Till then, HERE are the sources and a demo.

The zip in the demo is made using 7Zip with Ultra Compression level.

Happy codding.

Related posts:

1. Open and Save files to Desktop without going to Server
2. Read data directly from base64 without decoding
3. JavaScript Object-Oriented Programming (OOP) – jClass

1
2
3
4
5
6
7

   <root>
      <items>
          <item name="first" id="1">Content 1</item>
          <item name="second" id="2">Content 2</item>
      </items>
      <other atribute="true" />
    </root>

1
2
3
4

   var xml = '<root ......';
   var obj = $(xml);
   // and now you can use jquery selectors to get what you want
   $("item[name=second]", obj).attr('id'); // 2

Related posts:

1. jQuery.quickEach
2. Read/Load files from ZIP in JavaScript
3. For Javascript devs

The syntax for writing code using jClass looks something like this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

include("some.other.files");
 
namespace("my.namespace")
({
    MyClass : jClass.extends(BaseClass).implements(SomeInterf, SomeOtherInterf)
    ({
        constructor : function(){
         ....
        },
        private : {
          ....
        },
        public : {
          ....
        },
        static : {
          ....
        }
    }),
    OtherClass : jClass({
       ......
    })
})

I'm also working on some useful libraries that you can use with jClass.
Usage examples, documentation and downloads are all available on Google Code right HERE

Related posts:

1. Serialize JavaScript object to JSON
2. Read/Load files from ZIP in JavaScript
3. How to clone (duplicate) an object in ActionScript 3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

$(document).ready(function () {
  $.fn.onTypeFinished = function(func) {
     var T = undefined, S = 0, D = 1000;
     $(this).bind("keypress", onKeyPress).bind("focusout", onTimeOut);
     function onKeyPress() {
        clearTimeout(T);
        if (S == 0) { S = new Date().getTime(); D = 1000; T = setTimeout(onTimeOut, 1000); return; }
        var t = new Date().getTime();
        D = (D + (t - S)) / 2; S = t; T = setTimeout(onTimeOut, D * 2);
     }
 
      function onTimeOut() {
           func.apply(); S = 0;
      }
      return this;
   };
});

The way to use it:

1

$("input[name='username']").onTypeFinished(myValidationFunction)

And here is a small demo:

Related posts:

1. jQuery.quickEach
2. Parse XML in JavaScript with jQuery
3. For Javascript devs

1
2
3

@setlocal enabledelayedexpansion && python -x "%~f0" %* & exit /b !ERRORLEVEL!
#start python code here
print "hello world"

The way it works is that the first line of the file does two different things.

1. starts python interpreter passing the name of the file in, and the -x option will tell it to skip the first line (containing .bat file code)
2. When python finishes the script exits.

This nifty trick makes it much nicer for writing admin scripts with python on Windows.

Related posts:

1. Sudoku solver in python
2. Quick Python Script Explanation
3. Open and Save files to Desktop without going to Server

So here's the story. My DEV environment (http://dev/) is a Virtual Host mapped in the Windows host file to point to a sandboxed directory somewhere on my hard drive. The Flex project I'm building uses a RemoteObject and tries to communicate with a AMFPHP gateway to do it's stuff. All good till here.

The weird part is that when I try to run the app, even though my flash is coming from the DEV host and the path to the gateway points to the same DEV host, the AMF calls either failed with a security exception or if they worked, they were extremely slow. The delay between a service call and a response/error was somewhere between 6 and 10 seconds.

Why oh why !? The AMFPHP Browser app that comes with the package works just fine so my app was at fault somehow. Tried some investigations and thanks to Firebug I found the vital clue.

It seems that my app was trying to make the connection to the gateway through http://localhost:37813/. WTF ?? I didn't had any reference to 'localhost' in my code, yet the app was trying to connect using that address for some reason. And quite often, the crossdomain.xml failed to load resulting in a security error.

So what in the world is the problem then ? Well, Flash Builder seems to be the problem (and me for not RTFM).

It seems that if you compile your swf with Network Monitor active, which you may not realize, especially if the window is not even opened, you have just told your swf to redirect all traffic to localhost:37813. It will compile the redirect info into your flash. Traffic may work if you have Flash Builder debugger running but try to deploy that somewhere. Heh.

All you have to do is turn network monitor off. Recompile your swf. Redeploy.

Ta da !

Related posts:

1. Create Flex/AS3 applications for Mobile Devices
2. Neural networks in ActionScript 3
3. How to identify at runtime if the swf is in debug or release mode/build