FLICK LIST WITH MOMENTUM AND BASIC EDGE BOUNCING

Ariya Hidayat did some amazing series on kinetic scrolling. Many thanks to him for a great job. If you are interested in the physics behind this, check them out.

The 2nd post in the series explained the details behind creating kinetic scrolling with momentum. The demo for the post is a flick list with momentum but without the edge bouncing effect (Check it out).

I decided  to see if I could add simple edge bouncing to what currently exists, and found out it was quite easy.

Here is the demo:



The changes are made to the scroll() and autoscroll() functions

Scroll function

Before:
After:

Autoscroll function

Before:
After: For the edge bouncing effect, we want to allow the list  move over the edge while it is manually dragged and bounce back when it is released.

To accomplish this, as shown in the code snippets above, I take out the code that enforces edge restrictions from the scroll function, this allows the list move beyond the edge limits while its manually dragged. I then add the restrictions to the auto-scroll function, so the enforcement happens on auto-scrolling instead and tada!!!.

This is just a very simple idea. I think this can be improved, one issue is the bounce feels quite sharp. Let me know.

Update:

Release function

Before:
After:

DETECTING MINIFIED FILES

In August 2013, I started contributing to the Firefox Developer Tools project in my spare time. So far it has been an amazing experience. It's been great, having the privilege to contribute my little quota to the moving forward of the web.

Last month, I fixed Bug 913665, with many thanks to Nick Fitzgerald for this patient insightful reviews. The feature request was to automatically detect minified JavaScript files and pretty print them. One of key to fixing this bug was the heuristics used to detect the required files.
In this short post, I would try to look into the approach I took, hoping it might be helpful to someone.

Webkit WebInspector approach

My first step was to dig into the webkit source to see the approach used in the web inspector. Below is the code from the webkit source. The full source code can be viewed here.

The approach here is direct & quite simple, it checks if any of the lines in the source is over 500 characters then sets the this.autoFormat property to true.

Some issues which make this approach less of a perfect solution are: -

1. There maybe minified files with lines shorter than 500 characters.
2. For un-minified sources, all the lines still need to be scanned before a decision is made. For really large source files, this would take more time, the whole source should not need to be scanned.

Firefox Devtools approach

The idea to this approach was off a suggestion by Nick to test based on indents instead.
Firstly, so as not to scan through all the source lines, a SAMPLE_SIZE is set, which specifies the maximum number of lines to be used for the test. An INDENT_COUNT_THRESHOLD is also set, this specifies the percentage number of indents allowed, for a file to still be seen as minified.
Next, all comments are stripped out. We then loop through the number of lines specified (in this case the first 30), checking for those with  indents and updating our indentCount. The percentage of the indentCount in relation to the number of lines scanned is then calculated and compared to the INDENT_COUNT_THRESHOLD value to determine if the file is minified or not.
Some of the gains this this approach are

1. The whole source file.
2. The INDENT_COUNT_THRESHOLD can be reduced to increase the accuracy

Summary
I feel that there are different and possibly better ways to approach the problem. If any one comes up with something, please drop a comment.
Also, some guys did some work on detecting minified css files.
Cheers

DOM MUTATIONS

DOM mutations are the changes that occur on the DOM.
Low-level apis have been provided by the browsers to watch for these mutations and react to them. They are the Mutation Events and MutationObserver apis.

Mutation Events

Mutation events were added as part of DOM3 specification. Their main goal was to provide a mechanism for notification when changes are made to the DOM, but due to bad API design they have had some issues and have since been deprecated.

Some of the issues which flawed the design where:-

• Major performance issues, It was found that adding mutation event listeners to the page incurred major performance costs and removing them did not reverse the problems. 
• Events fired quite frequently and synchronously.
• They caused a lot of crashes in the browsers.
• There were inconsistencies in browser implementations.

(For more information, see references below)

To solve these problems engineers at Google & Mozilla came up with a new proposal for what was called MutationObservers.

MutationObserver
This was the defined in the DOM4 specification. It solved most of the above problems through aspects of its design:-

• Mutations are now delivered in batches, asynchronously at the end of specific micro tasks rather than immediately they occur.
• Mutations are delivered to the observers as an ordered list of records.
• Desired changes can be specified, and undesired changes can be ignored.

(For an in-depth look, read the proposal link in the references)

The MutationObserver api is currently implemented in Chrome, Firefox, IE11 and Safari 6.0 browsers.

 MutationObserver example from the HTML5 rocks article

Mutation-summary
The mutation-summary is a nice javascript library which provides cross-browser mutation observer implementation. A nice abstraction of the DOM MutationObserver Api. Some interesting features

• It shows you the differences in the state before and after mutations.
• It can revert changes no matter how complex.
• You can specify the changes you are interested in.
• It is quite fast.

For more information see the Mutation Summary link in the references below

References

Mutation Events (MDN) https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events/Mutation_events?redirectlocale=en-US&redirectslug=DOM%2FMutation_events

Mutation Observer (MDN) https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Mutation Observer proposal http://lists.w3.org/Archives/Public/public-webapps/2011JulSep/1622.html

HTML5 Rocks Article http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers

Mutation Summary https://code.google.com/p/mutation-summary/

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/