Monday, 22 April 2013

Binding functions to HTML elements using HTML5 data- attributes

Project : https://github.com/IrishAdo/EventManager

Introduction

This project came about from my need to simply link a html element to a javascript function.  I started out by adding click events to each element that I wanted to be able to click.  That quickly became very complex to manage the code as the web application became bigger.

What I wanted was to create a javascript object structure where I could group functionality into parts of the object with each section being a different file so that I was effectively splitting the code base into manageable code blocks  take for example the following example object


<script>
var myObject = {
    subObject = {
        YouClickedSomething(t){
            alert(t.id);
        },
        withParams(t,hello){
            alert("hello "+ hello);
        },
        withExtraParams(t,hello,with){
            alert("hello " + hello + ' hows ' + with);
        }
    }
};
</script>

As you can see this is a rather simple object structure now in my code base I would have a main.js which would be.
var myObject = {
    subObject = {}
};

Then with a subObject.js file containing loaded afterwards.
myObject.subObject = {
        YouClickedSomething(t){
            alert(t.id);
        },
        withParams(t,hello){
            alert("hello "+ hello);
        },
        withExtraParams(t,hello,with){
            alert("hello " + hello + ' hows ' + with);
        }
    };

Now I have three functions in the sub object that I want different events to interact with which and here is the elements in questions.
<button id='button1'>button 1</button>
<input id='field1' value='input 1'/>
<button id='button2'>button 2</button>
<button id='button3'>button 3</button>

This would normally require the developer to write a bit of binding code that links each of the elements to specific functions.  Which means for the developer to maintain the code there is no reference between the elements and the javascript out side the Element Selector used to bind the element to an event.  so what if we changed the text above to the following

<button id='button1' 
       data-click="myObject.subObject.YouClickedSomething"
>button 1</button>
<input id='field1'   
       data-click="myObject.subObject.YouClickedSomething" 
       value='input 1'/>
<button id='button2' 
       data-click="myObject.subObject.withParams" 
       data-argc='1' 
       data-argv1='ted!!!'
>button 2</button>
<button id='button3'
       data-click="myObject.subObject.withExtraParams"
       data-argc='2' 
       data-argv1='ted!!!' 
       data-argv2='james!!!'
>button 3</button>

As you can see the html is now telling the developer what elements are bound to an event and the data-action field is telling us what type of event is required on the element for the function to be called.  Valid values for data-action are click, hover & change.  The best bit of this type of coding is that as a developer you can see the the function that will be called on the click event of the above examples.

The zero indexed parameter of each function will contain the object that fired the event then any additional parameters you want to pass to the destination function.

Saturday, 13 April 2013

Short links and why they are bad


I find it funny that before twitter for example people would inspect a link to see the destination it would take them to and then make a decision as to whether or not to click on the link.  This meant that people became informed and the number of virus that successfully got installed dropped.  With the introduction of twitter and its 140 character limit we saw the increase in short link services and here in lies the problem a short link but definition is as short as we can possibly make it.   The information part of the url has been replaced with some random characters  meaning that people will once again click on links with out knowing where they are going.   I've started to see these short links being used in social media sites where there is no limit on the length of a post.  So lets take a look at how a URL shortening service works.

Ok so you have a URL to a site that you want to share for example  http://www.google.com  so what information do we need to store.  well the url of course and the short url that users will click on.  So lets create a pseudo code table to store this information

CREATE TABLE shortLinks {
        uid AUTO_INCREMENT PRIMARY_KEY,
        url  varchar(2000),
        link varchar(20)
}

Technically we don't need to have the link field as the shorten url is actually an encoded UID value.  Let me explain if we just make our link service supply the UID in the url  so that we use the following

http://shrt.in/12345

Then you can see that BASE_10 uses 5 characters to represent the number 12345 while BASE_2 would be 11000000111001 so not shorter at all so lets go the other way.  BASE_16  which is an of the following values (0-9,A-F) would change this to 3039, which is only saving us 1 character on our url.  So lets go even bigger lets use the following possible characters (0-9,a-z,A-Z) which would be BASE_62,  so for example the following UID's 

61 => Z  (saves 1 character) 
3843 => ZZ  (saves 2 characters) 
238327 => ZZZ  (saves 3 characters)  

so as you can see with base 62 we are approximately reducing the size of the characters used by half to represent the number so as we move up the base to 256 for example we will see even bigger benefits in the length of the url.

So now we understand how a short url is generated we need to understand the how the service works.

User clicks link =>  Short server auto redirects => Destination URL

As you can see there is as far as the user is concerned the short link takes them to the destination so in their minds they are associating that short link with a safe landing page say google.com.  But what happens if a hacker uses a short link to link to a vulnerability after all a lot of hacks require the user to click a link in an email.   The shortening service doesn't stop you before redirecting you and this is wrong it should stop and tell you that you are about to go to the following URL allowing you to choose if you click the link or not.

What should happen is the following


User clicks link =>  Short server shows information about the url with manual click to follow => Destination URL

Conclusion

This is why I will never click a short url generated by a short link service, I have no idea where it is going.


Saturday, 6 April 2013

Testing javascript on different browsers

So today I'm sitting in the Apple store in Birmingham Uk, I decided to play with the new thin Apple iMac 27inch  Late 2012 model.  I was curious on how fast the machine was so I thought to my self how would I go about testing.  Well since I use the web a lot I thought lets test javascript first so I did a search and found the "SunSpider" page which will run some javascript tests on your browser.

So I set up both my Apple MacBook Air  and the iMac to the same page both on the same version of Safari and ran the tests at the same time.  Now I expected the faster iMac to finish the test quicker than the Mac Book Air.  but it was the other way around.  and I cant for the life of me figure out why?

My Laptop has a 1.8Ghz processor and 4 GB Ram while the iMac has 3.2 ghz & 8 GB ram

The Mac Book Air could run the test suite 5.25 times before the iMac finished running the test for the first time.  Now for the results and you will see that the Physical tests the iMac preformed better on each and every test it seems that the iMac paused between tests and that is the bit i'm not understanding.

NOTE:: if any one can test it on their home machine I would be interested in their results my Mac Air took 23 seconds to run the test while the iMac took 2 minutes 20 seconds when I timed them

Assumption
I can only assume that the browser is accessing the harddrive between tests as the MacAir has an SSD hard drive.

Results

Mac Book Air


============================================
RESULTS (means and 95% confidence intervals)
--------------------------------------------
Total:                 184.9ms +/- 9.3%
--------------------------------------------

  3d:                   29.1ms +/- 14.7%
    cube:                9.7ms +/- 32.8%
    morph:               8.7ms +/- 13.4%
    raytrace:           10.7ms +/- 12.2%

  access:               18.1ms +/- 8.8%
    binary-trees:        2.6ms +/- 53.7%
    fannkuch:            7.1ms +/- 7.4%
    nbody:               3.8ms +/- 17.3%
    nsieve:              4.6ms +/- 10.9%

  bitops:                9.4ms +/- 8.2%
    3bit-bits-in-byte:   1.3ms +/- 26.6%
    bits-in-byte:        2.6ms +/- 14.2%
    bitwise-and:         2.4ms +/- 15.4%
    nsieve-bits:         3.1ms +/- 7.3%

  controlflow:           2.2ms +/- 13.7%
    recursive:           2.2ms +/- 13.7%

  crypto:               14.4ms +/- 13.5%
    aes:                 8.8ms +/- 20.5%
    md5:                 3.1ms +/- 7.3%
    sha1:                2.5ms +/- 15.1%

  date:                 24.3ms +/- 15.4%
    format-tofte:       13.0ms +/- 16.0%
    format-xparb:       11.3ms +/- 15.2%

  math:                 13.2ms +/- 5.0%
    cordic:              3.4ms +/- 10.9%
    partial-sums:        7.0ms +/- 4.8%
    spectral-norm:       2.8ms +/- 10.8%

  regexp:                9.2ms +/- 8.0%
    dna:                 9.2ms +/- 8.0%

  string:               65.0ms +/- 12.9%
    base64:              5.5ms +/- 6.8%
    fasta:               8.5ms +/- 16.0%
    tagcloud:           12.7ms +/- 11.9%
    unpack-code:        25.2ms +/- 19.8%
    validate-input:     13.1ms +/- 29.1%

The iMac
============================================
RESULTS (means and 95% confidence intervals)
--------------------------------------------
Total:                 128.4ms +/- 3.1%
--------------------------------------------

  3d:                   19.2ms +/- 5.4%
    cube:                6.4ms +/- 10.6%
    morph:               5.2ms +/- 10.7%
    raytrace:            7.6ms +/- 9.0%

  access:               12.0ms +/- 14.7%
    binary-trees:        1.2ms +/- 46.3%
    fannkuch:            5.4ms +/- 12.6%
    nbody:               2.8ms +/- 19.9%
    nsieve:              2.6ms +/- 26.2%

  bitops:                7.4ms +/- 9.2%
    3bit-bits-in-byte:   0.8ms +/- 69.5%
    bits-in-byte:        2.0ms +/- 0.0%
    bitwise-and:         2.0ms +/- 0.0%
    nsieve-bits:         2.6ms +/- 26.2%

  controlflow:           1.8ms +/- 30.9%
    recursive:           1.8ms +/- 30.9%

  crypto:               10.8ms +/- 5.1%
    aes:                 6.2ms +/- 9.0%
    md5:                 2.6ms +/- 26.2%
    sha1:                2.0ms +/- 0.0%

  date:                 17.0ms +/- 0.0%
    format-tofte:        9.0ms +/- 0.0%
    format-xparb:        8.0ms +/- 0.0%

  math:                 10.4ms +/- 6.5%
    cordic:              3.0ms +/- 0.0%
    partial-sums:        5.4ms +/- 12.6%
    spectral-norm:       2.0ms +/- 0.0%

  regexp:                6.8ms +/- 8.2%
    dna:                 6.8ms +/- 8.2%

  string:               43.0ms +/- 5.4%
    base64:              4.8ms +/- 21.7%
    fasta:               5.8ms +/- 9.6%
    tagcloud:            8.6ms +/- 7.9%
    unpack-code:        16.2ms +/- 3.4%
    validate-input:      7.6ms +/- 9.0%