Wednesday, July 30, 2014

JSON

JSON Stands for JavaScript Object Notation. It can be interpreted as the syntax/naming convention of defining objects in javascripts.
Data is stored in the form of key-value pairs.
A value can be an object as well (which is again a JSON). It supports nested objects
Key can be set with or without a string wrapper.

var JSONObject1 = {”key” : 1, “Key2” : 2}

var  JSONObject2= {key1: 1, key2 :2};

Symbol
Used for
{}
Wraps the object
[]
Wraps an array
“” or
Wraps a string
:
Key value separator or assignment operator
,
Element separator on arrays or objects
Example:
-          var JSONObject = {“key” : value, “key” : valye};
-          var nestedJSONObject = {“key” : value, “key” : {“key” : value}};
-          var JSONObjectWith Array = {“key” : value, “key” : [value1,value2, value3]};


Accessing properties of a JSON

 ·         Properties in a JSON object can be accessed using “.”

var myJSONObject= {“bindings” : [
{“ircEvent” : “PRIVMSG”, “method” : “newURI”, “regex” : “^http://.*”}
{“ircEvent” : “PRIVMSG”, “method” : “deleteURI”, “regex” : “^delete.*”}
{“ircEvent” : “PRIVMSG”, “method” : “randomURI”, “regex” : “^random.*”}

]
};
console.log(myJSONObject.bindings[0].method); /*newURI */

 ·         They can also be accessed in the same way that we access the values inside an array

var myJSONObject= {“bindings” : [
{“ircEvent” : “PRIVMSG”, “method” : “newURI”, “regex” : “^http://.*”}
{“ircEvent” : “PRIVMSG”, “method” : “deleteURI”, “regex” : “^delete.*”}
{“ircEvent” : “PRIVMSG”, “method” : “randomURI”, “regex” : “^random.*”}

]
};
console.log(myJSONObject.bindings[0].method); /*newURI */

Sunday, July 6, 2014

Different between Screen resolution vs Viewport

What is a viewport?
What exactly is a viewport
  • A framed area on a display screen for viewing information
  • Actual display area of a device
Here we will get confuse which one is to used, whether to use screen resolution or viewport when work windowing responsive web design.

Screen resolution vs Viewport
Device Screen resolution  Viewport
iPad, iPad 2 1024w x 768h 1024w x 768h
iPad 3 2048w x 1536h

Should we work with viewports instead of screen resolution?
Serveral devices may have varying screen resolution but may also have the same viewport size
Can be used as breakpoint references

Given that we need to set viewports as our "beakpoint" reference and that there's a lot of them, is there a list of viewports we can refer to? 
You can visit http://www.viewportsizes.com/ to check viewport sizes of any devices