ADVERTISING YOUR CODE

Nice article on making spreading word about your project

https://hacks.mozilla.org/2013/05/how-to-spread-the-word-about-your-code/

[[Class]] IN JAVASCRIPT

Class in JavaScript??
The ECMA standard specifies internal properties some of which are common to all JavaScript objects. These are invisible properties which exist solely for specification purposes. The [[Class]] is one of such. Some others include [[Prototype]], [[Get]], [[Put]] etc. For a complete set of these properties see the ECMA script standard. These properties are used to define the semantics of the object values.

[[Class]]

The [[Class]] property stores a string  which defines the kind of object. Function objects  have the [[Class]] value  "Function", Date objects have the [[Class]] value "Date", Object objects have the [[Class]] value "Object" and so on. The table below (taken from Dave Herman's book "Effective JavaScript") shows the [[Class]] values and corresponding constructors matching the types of objects.

[[Class]]	Construction
"Array"	new Array(), [ ]
"Boolean"	new Boolean()
"Date"	new Date()
"Error"	new Error(), new RangeError() etc
"Function"	new Function()
"JSON"	JSON
"Math"	Math
"Number"	new Number()
"Object"	new Object(), {}
"RegExp"	new RegExp()
"String"	new String()

Determine the [[Class]] value in JavaScript

In JavaScript the "Object.prototype.toString" method returns the string representation of the object. Internally it queries the [[Class]] property and uses its value as part of  the string generated for the receiver. This can be seen in the example below



These internal properties are essential in defining the behaviour of objects, An example would be if an object is not a pure array (ie [[Class]] property value is specified as “Array”) there are no guarantees on the behaviour of its methods and the value of its properties .

In the example below the concat method of the array object depends on the value of the [[Class]] property, if an argument passed into the method is a true array it concatenates its contents to that of the result else it adds it as a single object.
Example:

References

1. ECMA Script Standard
2. Effective Javascript by Dave Herman

CREATE A NEW GITHUB REPO FROM A LOCAL DIRECTORY

Initialize git in the directory (In local directory)


Create new repository (On Github)

Add an origin to point to newly created remote repository.


Merge the remote repository with the local repository

Add all local files to the merged local repository


Commit the added files


Push all to the remote repository

GETTING THE ELEMENT BELOW DURING A DRAG

I am writing a small JavaScript library to handle drag and drop, and was thinking of a way to find the element below the current element being dragged.

The way as explained in blog i stumbled upon , is to get the mouse position coordinates, then calculate the current position of the element being dragged relative to the topmost element using offsetLeft, offsetTop, offsetParent , add the offsetWidth and offsetHeight and then check if the element below....(can't remember everything).... and this will done for every pixel drag .



Also it is said that an element which the position is set to "absolute" or "fixed" does not affect the layouts of other elements on the page so only repaints on that element will be done rather than reflows on the whole page.
During a drag, the element being dragged has its position set to absolute (all the time) so changes to the display of the style property only causes a repaint on the dragged element, making it a less expensive operation than the  former.

Just looking a these imagine the amount of reflows and redraws.
So i came up with this hack (this can be implemented differently)


The idea is, during the drag (for every pixel move) , i hide the top element, get the element below and the show the  top element again. it happens so fast it is not noticed.

Let me know your thoughts.

CUSTOM ATTRIBUTES FOR HTML ELEMENTS

Custom attributes on HTML elements have been quite handy for storing custom values. Though they were not standardized in previous HTML specifications, browsers allowed their usage. In the HTML5 specification, they have been standardized, making them a nice little tool in the developer's box.

HTML5 IMPLEMENTATION
For usage the custom attributes names must be prefixed by "data-", therefore making a valid custom attribute name be "data-foo". The custom attribute values implementation remain as before.
An example

ACCESS

There are two methods to retrieve and set the values of the custom attributes are as follows:-

GetAtrribute & SetAtrribute
 The previously known method of using the getAttribute and setAttribute methods for getting and setting the custom attributes.
Here is an example:

DATASET

The dataset method is a new method implemented in the HTML5 specification. The code snippet below shows and example of its usage.

Note: This method has not been implemented in any browser yet, so stick to the getAttribute/ setAttribute option. The other benefit is backward compatibility for older browsers.

In this method only the string prefixed by "data-" is used as the object of the dataset property to access the specific custom attribute.

Note: This method has not been implemented in any browser yet, so stick to the getAttribute/ setAttribute option. The other benefit is backward compatibility for older browsers.

For more reading:
http://html5doctor.com/html5-custom-data-attributes/
http://ejohn.org/blog/html-5-data-attributes/

PROBLEM WITH BYTE ORDER MARK ( BOM ) CHARACTERS

I had this issue today where funny characters ( ) were always added to my JavaScript source files. After some research I found out the these are BOM (byte order mark) characters which are used to specify the byte order of a text file or stream, this is actually optional and mostly advised for UTF-16 and UTF-32 character encodings, but is discouraged for UTF-8 files.

This Wikipedia document gives in-depth explanation
http://en.wikipedia.org/wiki/Byte_order_mark

Visual studio by default saves JavaScript files with "Unicode (UTF-8 with signature) - Codepage 65001" encoding , this encoding adds the UTF-8 byte order mark at the beginning of the file. IE9 and Chrome do not have a problem with it but Firefox, Opera and Safari completely break, so to fix it

follow  the solution in this link http://forums.silverlight.net/t/144306.aspx and select the encoding option "Unicode ( UTF-8 without signature) - Codepage 65001".

Hope this helps.

XSLT SECURITY ISSUE

I came across an issue today where (for adding external files to style sheet) works in ie8 - but completely breaks in ie9. After a day of not wanting to get bothered by the issue i decided to get down to it.
After long minutes of research, I found out that ie9 uses MSXML6 while ie8 uses MSXML 3 and one of the great new features added is the security, details can be found here.
all I need to do in javascript was to set the resolveExternals to true on my xslt object.

PROXIES IN JAVASCRIPT

Interestingly, today i was reading a thread on monitoring changes on objects in JavaScript 

http://groups.google.com/group/jsmentors/browse_thread/thread/d2df7cadab60e3fc

NO "onscroll" ON THE BODY TAG IN IE9

While updating all our pages to support HTML5, i came across an issue. There was an ONSCROLL inline html property on the body tag but the function it called never got triggered.  ie9 + does not support the onscroll event.

Solution for backward compatibility


http://msdn.microsoft.com/en-us/library/ms536966(v=vs.85).aspx

THE BEGINING

Hmm blogging.... not the blogging type.
Just thought, i'd start a good habit....so here goes!!!!
Wish me luck