ADM Blog » Java Script

Read data directly from base64 without decoding

admin — Fri, 01 Jul 2011 13:06:55 +0000

So here's the catch. You have a binary input you want to mess with in your browser for whatever reason. First problem you encounter is when you load the file. In IE you will have trouble reading a binary string because it uses null terminated strings, and your file will end at the first 0x00 byte found. If you manage to overcome that but trust me it is very CPU intensive. See the source of Read/Load files from ZIP in Javascript post. You will have to create a vbScript that will convert the received AJAX response into an array with decimal values for each byte in the file. Depending on your file size, it will take accordingly (10+ seconds * file KB). For every other browser it works just fine with plain strings.

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
    };
};

jQuery.quickEach

admin — Wed, 04 May 2011 09:13:08 +0000

With jQuery, when you need to iterate all elements with a specific class for example, you use the each() method and inside the callback function you must convert the DOM element you receive as this to a jQuery object in order to access it's jQuery specific methods: $(this)
This is not such a big issue but if you have a lot of items and/or do this often, then times ads up. It would be a blast to have the this object directly as a jQuery instance. So here's a $ little plugin that does exactly that

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

The code:

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()

For Javascript devs

admin — Wed, 30 Mar 2011 08:08:18 +0000

If you write Javascript apps you may want to dynamically add some HTML here and there and having HTML strings that need concatenation with different variables is bad and ugly at the same time. So here is a little nugget you might find useful.

    // standard style
    x = '+ classnames + '" rel="' + somevar + '" id="' + othervar + '">' + content + '
';
 
    // 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

    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 hello
 
    htmlTag('img', content)
    // 
    htmlTag('img', {src:'myImage.jpg'}, content)
    //  content is discarded and attributes src is used as source
 
    htmlTag('input', {type:'text', name:id}, content)
    //

The code

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

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

Read/Load files from ZIP in JavaScript

admin — Fri, 01 Oct 2010 10:40:05 +0000

At work we do a lot of JavaScript applications that have little to no HTML files (beside the index), everything is generated by JavaScript and we have tons of .js files that load at runtime and to reduce the size we have to minify them and that is really hard to debug and watch in the browser if something goes wrong. So I've made this JavaScript class that comes to help. What can you do is Zip up all your assets (js, images, css) and use ZipLoader class to read the zip and unpack your resources whenever you need them. It's small (10KB), easy to use and quite fast considering the extraction is made by JavaScript.

   // 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.

Parse XML in JavaScript with jQuery

admin — Tue, 28 Sep 2010 10:40:42 +0000

Yes, you can do it with XMLDOM and all the other ways out there, but why not use the power of jQuery ?
Like so:

   >
      >
           name="first" id="1">Content 1>
           name="second" id="2">Content 2>
      >
       atribute="true" />
    >

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

JavaScript Object-Oriented Programming (OOP) – jClass

admin — Mon, 06 Sep 2010 11:29:28 +0000

I just finished working on a JavaScript 'framework' that will allow you to write highly object-oriented code in your browser.
Using jClass you can easily define namespaces, create and extend class, define and implement interfaces, define public/private/static methods, override and overload them, have getters and setters, and so on.

The syntax for writing code using jClass looks something like this

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

On typing finished jQuery plugin

admin — Wed, 11 Aug 2010 08:06:01 +0000

If you are developing a form and you require certain validations; check if username is available or not for example - the way to do that is to listen for the change/focusout DOM events. You can also check it on every keypress but if the validation does some expensive checking in the background that is out of the question. So here is a really small jQuery plugin that does tell you when a user finished typing inside a text box. The way it does it is to compute the speed the user is typing with and when a delay longer than twice the speed average occurs, the event is triggered and your validation function is called. Simple enough.

$(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:

Check if user visited certain websites

admin — Tue, 11 May 2010 13:21:53 +0000

Today I found a website called http://www.stayinvisible.com/ that uses a really clever technique to peak in your browser history. They can't see everything of course but they can see whatever they are interested in and that is a list of web-proxy websites.

So how are they doing it ?

First, they have a list of websites they are interested in, like i said, a list of web-proxies.

var sites = {
    "hidemyass.com": ["http://www.hidemyass.com", "http://forum.hidemyass.com"],
    "freeproxy.ca": ["http://www.freeproxy.ca"],
    "proxy4free.com": ["http://www.proxy4free.com"],
    ....
    ....
    }

Second, they create a temporary IFRAME where they write a simple 2 lines CSS that does the magic

1 2	a { color: #000; display: none} a: visited { color: #F00; display: inline }

... and in the body they append all the links from the sites list.

The browser renders the links, and all the sites that appear in your history will use the "a:visited" CSS class. The others use the normal "a" class that has a display:none property and will be hidden.

What's left to do is iterate all the links from the frame and check if they are visible or not to know which of them are in your history and which of them aren't. Pretty simple eh ?

So here's the class:

var bHistory = function(){
  var sites = {
    "hidemyass.com": ["http://www.hidemyass.com", "http://forum.hidemyass.com"],
    "freeproxy.ca": ["http://www.freeproxy.ca"],
    "proxy.org": ["http://www.proxy.org", "http://www.proxy.org/cgi_proxies.shtml", "http://www.proxy.org/forum/index.html"]
  };
  var visited = {};
  function getStyle(el, scopeDoc,styleProp) {
    if (el.currentStyle) var y = el.currentStyle[styleProp];
    else if (window.getComputedStyle) var y = scopeDoc.defaultView.getComputedStyle(el,null).getPropertyValue(styleProp);
    return y;
  }
  function remove( el ) {
    el.parentNode.removeChild( el );
  }
  function createIframe() {
    var iframe = document.createElement("iframe");
    iframe.style.position = "absolute";
    iframe.style.visibility = "hidden";
    document.body.appendChild(iframe);
    if(iframe.contentDocument) iframe.doc = iframe.contentDocument;
    else if(iframe.contentWindow) iframe.doc = iframe.contentWindow.document;
    iframe.doc.open();
  	iframe.doc.write('');
    iframe.doc.close();
    return iframe;
  }
  var iframe = createIframe();
  function embedLinkInIframe( href, text ) {
    var a = iframe.doc.createElement("a");
    a.href = href;
    a.innerHTML = site;
    iframe.doc.body.appendChild( a );
  }
  for( var site in sites ) {
    var urls = sites[site];
    for( var i=0; i<urls .length; i++ ) {
      embedLinkInIframe( urls[i], site );
      if( urls[i].match(/www\./) ){
        var sansWWW = urls[i].replace(/www\./, "");
        embedLinkInIframe( sansWWW, site );
      } else {
        var httpLen = urls[i].indexOf("//") + 2;
        var withWWW = urls[i].substring(0, httpLen ) + "www." + urls[i].substring( httpLen );
        embedLinkInIframe( withWWW, site );
      }
    }
  }
  var links = iframe.doc.body.childNodes;
  for( var i=0; i<links.length; i++) {
    var displayValue = getStyle(links[i], iframe.doc, "display");
    var didVisit = displayValue != "none";
    if( didVisit ){
      visited[ links[i].innerHTML ] = true;
    }
  }
  remove( iframe );
  var usedSites = [];
  for( var site in visited ){
    usedSites.push( site );
  }
  return usedSites;
}

To use it:

1 2	var visited = new bHistory(); alert(visited); // an array with visited websites from the defined list

All credits go to the smart man who did this. Cheers!

Open and Save files to Desktop without going to Server

admin — Wed, 05 May 2010 13:21:01 +0000

Few days ago I was working on a jQuery based tool to QA the JavaScript functionality of a website and I was in need of a method to save and load my scripts to Desktop.
In most cases this require a server script where you send the content and it will serve it to download and same for loading it. But a colleague suggested a better solution: to use the FileReference class.
First step was to create a simple flash with the required functionality and send/retrieve data with ExternalInterface. Failed miserably. Why ? Because it seems Flash will not allow you to open a File Dialog from script only. You literally have to click a button from the movie interface to be able to do that. If you knew that good for you, I didn't.

So, I've created another flash movie, where you pass the open and save image and callback and it will insert the flash with the specified images in place and look just like any other buttons.

Here's a small demonstration (other buttons beside open and save are just for show):

So what do you need to set it up ?

First, you have to include the FileDialogs.js in your document (or just paste the code inside it into your own script).

Second, you need your JavaScript callbacks.

function openCallback(input) {
     document.getElementById('text').value = input;
}
 
function saveCallback() {
     return document.getElementById('text').value;
}

openCallback() will be called once the user will select a file from the desktop and pass it's content as a parameter
saveCallback() will be called when the user clicks save, before the dialog to choose a file name opens, and it must return the content you want to save to disk

Third, you must setup the whole thing.

// call this function on the onload event so the placeHolder element gets created
function onLoad() {
    // Create a config object
    var config = new FileDialogsConfig();
    // width of the entire flash movie (buttons width + padding)
    config.width = 45;
    // height of the movie
    config.height = 16;
    // padding between buttons
    config.padding = 5;
    // open dialog button image and javascript callback function
    config.open.image = "open.png";
    config.open.handler = "openCallback";
    // save dialog button image and javascript callback function
    config.save.image = "save.png";
    config.save.handler = "saveCallback";
    // create the movie inside an element with the given id and configuration
    new FileDialogs("placeHolder", config);
}

Note: Handler callbacks in the config must be declared as String and not reference. IE will freak out and I don't want to fix it.

You can have only one button (open or save) if you chose so. Just don't set the other one.

That's about it. The placeHolder can be any container element. The script will set it's style size based on the configuration, the movie will have transparent background so don't worry about that, and it will set it's float property to left so you can add other stuff after it. But all those things are easy to configure if you mess a bit with the FileDialogs.js file.

Cheers!

Download Source and Demo

Serialize JavaScript object to JSON

admin — Wed, 28 Apr 2010 11:57:51 +0000

Recently, on a project I was working, I needed a function to serialize a JavaScript object and all I could find online were scripts and jquery plugins for serializing a html form. Then, I found this, a script that takes advantage of the .toSource() method available in Gecko-based browsers and for the rest of them plain old recursion. But it does the trick as expected and I'm pretty sure someone else might need it.

function serialize(_obj) {
   if (_obj != undefined && typeof _obj.toSource !== 'undefined' && typeof _obj.callee === 'undefined') {
      return _obj.toSource();
   }
   switch (typeof _obj) {
      case 'number':
      case 'boolean':
      case 'function':
         return _obj;
         break;
      case 'string':
          return '"' + _obj.replace(/"/mg, "'") + '"';
          break;
      case 'object':
          var str;
          if (_obj.constructor === Array || typeof _obj.callee !== 'undefined') {
              str = '[';
              var i, len = _obj.length;
              for (i = 0; i < len-1; i++) { str += Utils.serialize(_obj[i]) + ','; }
              str += Utils.serialize(_obj[i]) + ']';
          } else {
              str = '{';
              var key;
              for (key in _obj) { str += key + ':' + Utils.serialize(_obj[key]) + ','; }
              str = str.replace(/\,$/, '') + '}';
          }
          return str;
          break;
      default:
          return '""';
          break;
      }
}

To deserialize it, just use eval().

Also, if you need the same thing for your Flash/Flex Actionscript3 project, here is a class for that as well -> Click Me.

Cheers!