Hyper-Metrix

Diff List with Files Names Only

2009-09-30T08:26:00.000-07:00

diff -r -q directory1/ directory2/

List Files by Time

2009-09-30T01:25:00.001-07:00

ls -lt -c -R

Compress / Extract Directories to Tar.bz2

2009-09-30T00:33:00.000-07:00

Compress
tar -jcvf filename.tar.bz2 directory/ -R

Extract
tar jxvf filename.tar.bz2

Secure Copy Files with SSH

2009-09-30T00:31:00.000-07:00

scp -r /pathtofolder/ name@host:/targethetfolder/

OnMouseMove Timer Granularity

2009-09-16T13:53:00.001-07:00

A function to measure the average delay between one mouse move capture event in the window. If you move your mouse really, really fast, you'll discover the limits at which you can capture mouse events in your browser (OS + hardware should be factored into your results of course).

I get 2.17 ms on Ubuntu Jaunty (9.0.4) with Firefox 3.5.2.
I get 2.37 ms on Ubuntu Jaunty (9.0.4) with Opera 10.


(function(){

  var bufferLimit = 1000;
  var buffer = [];
  var moved = function(){
    buffer[ buffer.length ] = new Date().getTime();
    buffer.length > bufferLimit ? (function(){
      //document.removeEventListener( 'mousemove', moved, false );
      //console.log( buffer );
      
      var diff = 0;
      var len = buffer.length - 1;
      
      for( var i = 0; i < len; i++ ){
        diff += buffer[ i+1 ] - buffer[ i ];
      }
      
      var meanAvg = diff / len;
      
      document.getElementsByTagName( 'body')[ 0 ].innerHTML += 'Captured "onmousemove": ' + bufferLimit + ' times. Average delay between events: ' + meanAvg + ' ms. 
';
      
      buffer.length = 0;
          
    })() : 0 ;
  }
  document.addEventListener( 'mousemove', moved, false );

})();

Can I haz?

2009-08-14T07:22:00.000-07:00

Would the Real Prototype Please Stand Up?

2009-08-12T22:42:00.001-07:00

There are a ton of examples out there of how to Prototype with Javascript. The examples I have seen appear too complex, verbose or just plain wrong. I started OO in Java and found the switch to Javascript incredibly difficult because of some bad descriptions of what was a Prototype was actually used for.

Constructors
Prototypes are NOT blueprints of an object. They are just links to objects you want to inherit member variables from. But it is not any use knowing what a Prototype is, unless you first know what a Constructor is. So lets jump right in and define a Constructor.

// A constructor
God = function God(){
this.myName = 'YHWH';
this.thinks = true;
}

A Constructor is simply a function. The Constructor function has member variables. In this case the member variables are 'myName' and 'thinks'. Using 'new' Now we are able to make copies of Gods.

// Create some Gods
Father = new God;
Son = new God;
Spirit = new God;

Thus we have created 3 new Gods. Each of these Gods has their own name and their own thoughts. Important: they have NOT 'inherited' the member variables from the God constructor. The member varibles are new, as each new instance of God is... 'new'. IE: God does not inherit anything from God, when God is at the top of the chain.

Prototypes
Once you understand that a Constructor is just a function used to create a 'new' instance and set new member variables within that instance... you will find it easy to comprehend what a Prototype is.

Prototypes are not 'created', that's the Constructor's job. Prototypes are linked. Lets say that God wanted to create Man. First God would need a constructor function by which to make the man. So lets code one...

 // Define Man's Constructor
Man = function Man( name ){
this.myName = name;
this.dna = 'ACGT';
}

Now you can create a new Man like this...

 Adam = new Man( 'Adam' );

Here we set the name-space 'Adam' to store a new instance of Man. When we invoke 'new Man', we want to pass Adam his name, so: 'new Man( 'adam' )'. Thus the Man construtor is run and Adam's member variables are set. But in this case... we have created a dead man (Adam can not think).

God can think but Adam can't. Wouldn't it be nice if Adam could inherit his thinking ability from his Creator? It would, and he can. This is where Prototype is used. Let's append the Man object...

 // Define Man's Constructor
Man = function Man( name ){
this.myName = name;
this.dna = 'ACGT';
}
// Define Man's Prototype
Man.prototype = new God;

Ahha! Now when ever a new Man is created, the new man gains the ability to think from his creator. Pointing Man's prototype to 'new God' creates a link that copies the member variables from the God constructor to the new instance of Man.

Prototypes are Links

Taking things to their logical conclusion: now that Man can think, he can realize that he is alone and needs a new Woman. Now we define the constructor function for Woman.

 Woman = function Woman( name ){
this.myName = name;
this.womb = true;
}
Woman.prototype = new Man;

Notice that Woman's prototype is Man. This means that any new Woman will inherit the Man constructor's member variables. Thus the Woman inherits DNA from the Man. Woman additionally gains a member variable called 'womb', which Man and God do not have.

So here is where the beauty really comes in: Woman can think, even though Man has no thinking ability in his constructor. This is because prototypes are links. And what do links form? Chains!

As you chained Woman to Man, every time you create a new instance of Woman, she inherits her member variables from new Man, who inherits his member variables from new God. Thus we have a chain of inheritance, and anything you set at the top level will filter down to the bottom unless you explicitly stop or redirect the flow of information.

All the Code
Lets put it all together and see what we get.

   // God constructor
God = function God(){
    this.myName = 'YHWH';
    this.thinks = true;
}

// Man constructor
Man = function Man( name ){
    this.myName = name;
    this.dna = 'ACGT';
}
// Man's Prototype is God's constructor
Man.prototype = new God;

//Woman constructor
Woman = function Woman( name ){
    this.womb = true;
}

// Woman's Prototype is Mans's constructor & Man's prototype
Woman.prototype = new Man;

// Run the Man constructor against the new Woman object ( so Woman gets a name )
Woman.prototype.constructor = Man;

// A method to see inside the object
function inspect( being ){
    var arr = {};
    for( var i in being ){
        arr[ i ] = being[ i ];
    }
    console.log( being.name || being.myName, arr );
}

/* Make an Adam & Eve from Woman & Man constructors...
...inheriting members from their prototypes links */
Adam = new Man( 'Adam' );
( Eve = new Woman ).constructor( 'Eve' );

// Console log for clarity
inspect( God );
inspect( Man );
inspect( Woman );
inspect( Adam );
inspect( Eve );

// constructor properties get added first
// then prototyped properties get inherited second

Results:

God Object prototype=Object
Man Object prototype=Object
Woman Object prototype=Object
Adam Object myName=Adam dna=ACGT thinks=true
Eve Object myName=Eve womb=true dna=ACGT thinks=true

Conclusion:
Pretty much everyone knows the account of Genesis, so we all know the fundamental differences between God, Man and Woman. Hopefully this has helped make Prototypes easier to understand for someone out there.

Prototypes are really very simple, but the terminology can be pretty confusing when you look at all the examples out there, especially if you are just beginning to learn Object Oriented patterns. I started learning OO in Java which was much easier to understand than JS. But now that I have been using Prototypal behavior in Javascript for a while, I have to say... I prefer it.

Switch vs. Array Index

2009-08-11T12:52:00.000-07:00

At the last Javascript Meetup Cambridge I was showing off a Javascript Web Worker Network I have been working on for visualizing search queries. I showed the code to @geowa4, @AlbertoPL and another guy who's name I forget. @geowa4 pointed out that I could use look up the function directly from the object (which I had avoided thinking switch was faster), and someone else chimed in that the switch I was already using would be faster... and I was like... "yeah, get back in your place student n00b!"

Obviously... this had to be tested!


var obj = [];
var len = 10;
for( var i = 0; i < len; i++ ){
obj[i] = function(){ return 1 };
}
obj[ 10 ] = function( mn, inc ){
time = new Date().getTime() - time;
console.log( 'Method #' + mn + ': ' + time + 'ms, Check: ' + ( inc == 20000000 ) );
};

var time;
var times = 2000000;

function method1(){
time = new Date().getTime();
var inc = 0;
for( var t = 0; t < times; t++ ){
 for( var i = 0; i < len; i++ ){
   inc += obj[ i ]();
 }
}
obj[ 10 ]( 1, inc ) ;

// run next method
method2();
}

function method2(){
time = new Date().getTime();
var inc = 0;
for( var t = 0; t < times; t++ ){
 for( var i = 0; i < len; i++ ){
   switch( i ){
     case 0: inc += obj[0](); break;
     case 1: inc += obj[1](); break;
     case 2: inc += obj[2](); break;
     case 3: inc += obj[3](); break;
     case 4: inc += obj[4](); break;
     case 5: inc += obj[5](); break;
     case 6: inc += obj[6](); break;
     case 7: inc += obj[7](); break;
     case 8: inc += obj[8](); break;
     case 9: inc += obj[9](); break;
   }
 }
}
obj[ 10 ]( 2, inc );
}

method1();

The results:
ARRAY --> Method #1: 257ms, Check: true
SWITCH --> Method #2: 7344ms, Check: true

Congratulations @geowa4 wins! IOU 1 beer.

Conclusion:
Never under-estimate the student n00b. Even if they don't know what they're talking about... they're probably still right. XD

Literal Object vs. Constructor Instances

2009-08-10T13:56:00.001-07:00

At work today we were discussing memory management with Javascript objects in regards to speeding up the front-end of the search engine. The two methods being considered were using Prototypes vs. Literal objects to store a set of data. I knocked out a quick test to see what Firefox would make of these two methods and pretty much got the results we were expecting.

Method #1 - Constructor - 1,515,056k (1.5Gb of Ram)


function blank(){
this.DOM = document.createElement( 'div' );
this.DOM.innerHTML = "Lorem ipsum dolor sit amet...   ...posuere cubilia Curae.";
}

var stacked = [];

var amount = 1000000;
for( var i = 0; i < amount; i++ ){
stacked[i] = new blank;
}

Method #2 - Literal - 1,800,000k+ CRASH! (1.8Gb of Ram)


blank = {
 gen: function(){
   var DOM = document.createElement( 'div' );
   DOM.innerHTML = "Lorem ipsum dolor sit amet...   ...posuere cubilia Curae.";
   return DOM;
 }
}
var stacked = [];
var amount = 1000000;
for( var i = 0; i < amount; i++ ){
 stacked[i] = blank.gen();
}

NOTE:
The Literal Method did not finish running. It crashed, so the memory is not truly comparable. However, the speed at which the script ran was extremely slow. The Prototype Method pumped up the memory space like a flat tire, The Literal Method crawled so slowly it felt more like trying to pour hot lead into a straw basket.

CONCLUSION:
Careful what you use those literals for!

Testing Processing.js in Blogger...

2009-08-09T11:11:00.000-07:00

Console log for Safari & Firefox

2009-08-08T20:44:00.000-07:00


 var Console={
  log: function( message ){
   try { window.opera.postError( message ); }
     catch(e) { console.log( message ); }
  }
 }

Mercartor SVG Map Added to Wikipedia

2009-08-03T18:34:00.000-07:00

Just received confirmation that my Mercartor SVG World map has been added to Wikipedia. I actually made this while creating the Mozilla Download Stats Visualization, using a bunch of different maps as the source. Actually the final map for Mozilla was created using Inkscape to trace a specularity map from Nasa.

The map is now ShareALike Creative Commons, so mash away!
http://commons.wikimedia.org/wiki/File:World_map_-_low_resolution.svg

HTML5 Canvas and Audio Experiment

2009-08-03T17:47:00.000-07:00

HTML5 Canvas and Audio Experiment

Wow, wow, wow, how awesome is this?! Got sent this really cool HTML5 Twitter visualization today. I was simply blown away by the depth of this visualization. And the music is perfect.... great work guys!

If you want to create visualizations on the HTML5 Canvas, Processing.js is a great library to get you started. ProcessingJS.org

Firebug AJAX Reading...

2009-07-31T10:20:00.000-07:00

Want to read an async AJAX request in FireBug console?


AJAX=new XMLHttpRequest();
AJAX.open( 'POST', 'www.YourUrl.com', true );
AJAX.send( 'postKey=postVal' );
AJAX.onreadystatechange = function(){ console.log( AJAX ); }

This prints everything, not just a successful response. Very useful for learning about the XMLHttpRequest object and reading POST responses inside an authenticated session without any cross-domain trickery.

Ubuntu Read line from file

2009-07-15T19:35:00.000-07:00

Cool command of the week... "head"

Head reads part of a file, this an be done by lines, or by bytes. It's faster by bytes, for obvious disk IO reasons, but line numbers will probably be more useful in most cases anyway.

Here's a sample....

head -n 99000000 mozdl.tsv | tail -n 1;

-n 99000000 tells the machine to read from the 99 millionth line of mozdl.tsv

| tail -n 1 tells the machine how many lines to output from where it began... one

I find myself using this command a lot, especially with bytes to jump around a file to sample data without having to expend cycles processing \n characters.

Moving from Vista to Linux

2009-07-15T18:54:00.000-07:00

I decided to install Ubuntu Jaunty on my main dev machine to see what the 3D Compiz desktop was like compared to my laptop. Before this I have only run Linux as a firewall (Smooth Linux), as a server (Ununtu Server) and Ubuntu on my Laptops to read emails and listen to the radio while out on contracts.

Well... it's been almost a week now, and I have not booted into Windows since. Why not? Well... as it turns out... all the software I frequent (Blender3D, Processing, Apache Server) run faster, crash less and use the memory FAR more efficiently.

This was not what I expected, but none-the-less, a pleasant surprise.

An added bonus is the command-line interface, which has rich functionality like email, curl, grep, regex right at your finger tips. In Windows I have to install software to complete these tasks.

I find myself using the command line all the time, which is great, because my poor arm is sore in the evenings from using the mouse all day. Oh... and the circular 3D desktop is awesome!!! :)

Perfecting my "Earth"

2009-07-15T06:43:00.000-07:00

Over the last couple of days I have been perfecting my Earth rendering in Blender 3D for a visualization I have planning to release in a couple of weeks. Thought it might be fun to post some screen shots.

Getting close, but still needs some work on the volumetric atmosphere rendering and sub-surface scattering.

Counting the Lines in a LARGE File with PHP

2009-07-11T01:10:00.000-07:00

Firstly, I am no PHP Guru, so if someone has a better method, I would love to have it explained so I can post it here (credit attributed of course).

Problem:
So I wanted to count the lines in a 4GB text file, and all the examples on line showed me how to lead the file into an array, and get the count(); Well that's great if your file is small, but trying to load a 4GB file into an array on a machine with 2GB is not going to be pretty.

I tried anyway and quickly ran into PHP's script limit. Something I had not come across before. I updated my php.ini to allow for 1.5GB memory usage per script and up to 6 days before execution would time-out. Obviously this was not going to work anyway, but was fun to discover.

Solution:
Also very obvious, but worth documenting as someone will want to know how to do this, I can read a file line-by-line, incrementing a variable until the end-of-file has been reached.

I know-I know! There's a WAAAAAY better method to do this somewhere, but time did not permit me to discover it. Perhaps you have the answer, perhaps you are looking for an answer. If you're looking... you can try this code below, which took about 3 minutes to run on my machine.


// Set your filename
$file="ffdls.tsv";

// Open the file for reading
$handle = fopen($file, "r");

// Loop through the file until you reach the last line
while(!feof($handle)){

// Read a line
$line = fgets($handle);

// Increment the counter
$lineCount++;

}

// Release the file for access
fclose($handle);

// Display number of lines
echo "Line count: $lineCount";

Opera iFrame File 'src' Sucks!

2009-07-07T20:34:00.001-07:00

Ok, I really need to rant right now. I've been trying for two evenings to convince Opera that it should automatically download a Zip file when I change the iFrame's source. I have tried so many things you wouldn't believe it.

Php headers, Meta refreshes, location.reload()'s, but apparently Opera is not iFrame savvy. I have searched the Wubble-u all over for a solution to this problem, but have not found anything that works, so... I've submitted a couple of bug reports to Opera's development team to try and get this super-annoying behavior some development time.

In every other browser, this code starts a download:

<iframe src="archive.zip"></iframe>

I have a bad feeling that the behavior is some kind of security feature.

Bugs submitted: DSK-258356, DSK-258357

Video.Google's Strange Scrollbar Behavior

2009-06-14T07:54:00.000-07:00

While on a front-end web contract with a search engine, the UX Designer showed me something strange he came across that he felt broke the UX for Google Videos. I have to say, I totally agree with him.

User Interfaces have standard elements. Some times these visually reflect UI elements of the Operating System, sometimes they reflect UI elements of the User-Agent (browser). When you utilize standard elements, your users will expect them to behave in the learned behavior. When they behave otherwise, you break the user-experience. For less tech savvy users, you may stop them coming back to your service period.

Now the case of the Video.Google Search Scrollbar is not too bad. It does not break the UI, but it does degrade the UX.

Recreate the experience:

Go to http://video.google.com
Search for a video
Click on a video to play it
Use the window scroll bar on the right

Score: 1

Maintains OS functionality	Fail	Does not move all window content
Maintains UA functionality	Fail	Does not move all window content
Maintains visual connection with view layer	Fail	Connection only apparent after use
Improves visual quality of experience	Fail	Too jerky
Enhances usability of application	Pass	Makes sense in the context of a search