Smooth Animation Behavior [HTML/CSS]

For animation, the required FMS is sixty "frames" per second to achieve smooth animation behavior.

we cannot handle this much optimum speed with "for loop",

so what we can do is to use:

1) setInterval(function(){ //animate here },10000/60)

or

2) window.requestAnimationFrame( function(){//animate here.})

This approach has some advantage

• The browser can optimize it, so animations will be smoother

• Animations in inactive tabs will stop, allowing the CPU to chill

• More battery-friendly

This was introduced by Paul Irish.

For better understanding follow below urls

http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

https://css-tricks.com/using-requestanimationframe/

Material Design-Basic

Create the visual language that synthesizes classic principle of good design , provide the unified experience across platform, devices etc.
The surface of material provides visual cues about the material.

3-Key Principle
1) Material is metaphor (a figure of speech in which a word or phrase is applied to an object or action to which it is not literally applicable)

2) Bold, graphic & Intentional

3) Motion provides meaning.

How to achieve key principles:
a) Material should Casts Shadows

Key Lights: Create directional shadow
Ambient Light: Create soft shadows from all angles.

b) Material should be Solid

1) Input event only effects the foreground.
2) They cannot pass through the material.
3) Use elevation to separate the material.(Multiple material elements can not occupy the same point & space simultaneously)

c) Material follows some motions

1) Motion in material design should  be authentic and should follow the real world behavior of natural object
2) The material should follow natural acceleration & deceleration.
3) Meaningful entrances and exits.
4) Meaningful transitions.

State Machines (FSM)

What is State machine?
We use a state machine to represent a (real or logical) object that can exist in a limited number of conditions ("states") and progresses from one state to the next according to a fixed set of rules.The output of one state depends on its input.

You have states which are object state and events which are methods that cause transitions from one state to another

Why use it?
It will reduce the logical complexity of that object's implementation.
Suppose for saving a data through an object, the object has to go through multiple states
Init
Saving
Save
Idle
and complexity is more for object implementation then we have to look for state machines.

In javascript, i have used a library
https://github.com/jakesgordon/javascript-state-machine to implement state machines

References & Good Articles
https://engineering.shopify.com/17488160-why-developers-should-be-force-fed-state-machines
http://stackoverflow.com/questions/255797/uses-for-state-machines
http://www.skorks.com/2011/09/why-developers-never-use-state-machines/

Debounce & Throttling

Debounce
If we have  a scenario where there are multiple consecutive requests and
we have to handle them, for eg If we want to save a textbox inputs
while writing, then on the hitting of each keystroke we can we can queue the message
for a certain amount of time and save it.

Debouncing enforces that a function not is called again until a certain
the amount of time has passed without it being called.
As in "execute this function only if 100 milliseconds have passed without it
being called.

Jquery Example

$(window).on('resize', _.debounce(function() {
  // Do expensive things
}, 100));

Throttle
If we have a scenario where we want in a certain amount of time only our request should fire
max this many time.

Throttling enforces a maximum number of times a function can be called over
 time. As in "execute this function at most once every 500 milliseconds."

Jquery Example
$("body").on('scroll', _.throttle(function() {
  // Do expensive things
}, 100));


Popular Use cases:

1. Wait until the user stops resizing the window
2. Don't fire an ajax event until the user stops typing
3. Measure the scroll position of the page and respond at most every 50ms
4. Ensure good performance as you drag elements around in an app