// API callback
relpostimgcuplik({"version":"1.0","encoding":"UTF-8","feed":{"xmlns":"http://www.w3.org/2005/Atom","xmlns$openSearch":"http://a9.com/-/spec/opensearchrss/1.0/","xmlns$blogger":"http://schemas.google.com/blogger/2008","xmlns$georss":"http://www.georss.org/georss","xmlns$gd":"http://schemas.google.com/g/2005","xmlns$thr":"http://purl.org/syndication/thread/1.0","id":{"$t":"tag:blogger.com,1999:blog-1933328805824469647"},"updated":{"$t":"2021-06-05T02:21:21.316+05:30"},"category":[{"term":"HTML5"},{"term":"javascript"},{"term":"WebApplications"},{"term":"Upload"},{"term":"Websocket"},{"term":"stream"},{"term":"Webworker"},{"term":"Client-side"},{"term":"JQuery"},{"term":"webrtc"},{"term":"Drag and Drop"},{"term":"Storage"},{"term":"video"},{"term":"media"},{"term":"media source api"},{"term":"AMD"},{"term":"Custom Elements"},{"term":"Index DB"},{"term":"MVC"},{"term":"PHP"},{"term":"RequireJs"},{"term":"local storage"},{"term":"BackboneJs"},{"term":"Gamification"},{"term":"Web Audio"},{"term":"websql"}],"title":{"type":"text","$t":"Konga Raju"},"subtitle":{"type":"html","$t":"Web Developer and Designer"},"link":[{"rel":"http://schemas.google.com/g/2005#feed","type":"application/atom+xml","href":"https:\/\/kongaraju.blogspot.com\/feeds\/posts\/default"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/-\/HTML5?alt=json-in-script\u0026max-results=50"},{"rel":"alternate","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/search\/label\/HTML5"},{"rel":"hub","href":"http://pubsubhubbub.appspot.com/"}],"author":[{"name":{"$t":"Raju Konga"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/10750040862243953720"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"33","height":"30","src":"\/\/3.bp.blogspot.com\/-NRmd50o6VzU\/Xl0GJ89U5nI\/AAAAAAAAFvs\/hmFaD7EEWBktvdxCDKDS8PFdbVIiGTaBgCK4BGAYYCw\/s220\/latest_pic.jpg"}}],"generator":{"version":"7.00","uri":"http://www.blogger.com","$t":"Blogger"},"openSearch$totalResults":{"$t":"23"},"openSearch$startIndex":{"$t":"1"},"openSearch$itemsPerPage":{"$t":"50"},"entry":[{"id":{"$t":"tag:blogger.com,1999:blog-1933328805824469647.post-2614827248665236361"},"published":{"$t":"2016-05-29T11:26:00.001+05:30"},"updated":{"$t":"2016-08-22T12:03:52.059+05:30"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"AMD"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Client-side"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Custom Elements"},{"scheme":"http://www.blogger.com/atom/ns#","term":"HTML5"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Index DB"},{"scheme":"http://www.blogger.com/atom/ns#","term":"javascript"},{"scheme":"http://www.blogger.com/atom/ns#","term":"JQuery"},{"scheme":"http://www.blogger.com/atom/ns#","term":"local storage"},{"scheme":"http://www.blogger.com/atom/ns#","term":"MVC"},{"scheme":"http://www.blogger.com/atom/ns#","term":"RequireJs"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WebApplications"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Websocket"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Webworker"}],"title":{"type":"text","$t":"101 Javascript performance improvement techniques"},"content":{"type":"html","$t":"\u003Cdiv dir=\"ltr\" style=\"text-align: left;\" trbidi=\"on\"\u003E\u003Ch2\u003E\u003Cbr \/\u003E\u003C\/h2\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"https:\/\/4.bp.blogspot.com\/-9IuP7rW1uqY\/UB93W32D__I\/AAAAAAAABzk\/yz41LmKWb70El3y4hVh8YHiubfQBBO3XACPcB\/s1600\/aw-snap-google-chrome.gif\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"111\" src=\"https:\/\/4.bp.blogspot.com\/-9IuP7rW1uqY\/UB93W32D__I\/AAAAAAAABzk\/yz41LmKWb70El3y4hVh8YHiubfQBBO3XACPcB\/s320\/aw-snap-google-chrome.gif\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Ch2\u003E\u003Cbr \/\u003E\u003C\/h2\u003E\u003Ch2\u003E\u003Cbr \/\u003E\u003C\/h2\u003E\u003Ch2\u003EVariables and Declarations\u003C\/h2\u003E\u003Cdiv\u003E\u003Ch4\u003E1. Variables much better than array and objects\u003C\/h4\u003EJavascript is untyped language but the performance improvement starts from declaring variables and accessing them. Variables and literal values faster than object properties and array items look ups.         \u003Cbr \/\u003E\u003Cdiv\u003EDeclaring variables and accessing them             \u003Cbr \/\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003Evar user_email = 'xxx@xx.com';\u003Cbr \/\u003E\u003Cbr \/\u003Econsole.log(user_email); \/\/xxx@xx.com\u003Cbr \/\u003E\u003C\/code\u003E\u003Cbr \/\u003E\u003C\/pre\u003EDeclaring objects with properties             \u003Cbr \/\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003Evar user = {email: 'xxx@xx.com'};\u003Cbr \/\u003E\u003Cbr \/\u003Econsole.log(user.email); \/\/xxx@xx.com\u003Cbr \/\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E2. let is faster than var in function scope\u003C\/h4\u003Elet is block scoped and var is block scoped. let clears the memory when it is not needed, var exists all over function scope, so let always faster than var when there are different blocks. let solves the closures problem too.\u003Cbr \/\u003E\u003Cdiv\u003EDeclaring variables with var and let             \u003Cbr \/\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003Efor(var i=0;i\u0026lt;length;i++){...}\u003Cbr \/\u003Efor(let i=0;i\u0026lt;length;i++){...}\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003Ca href=\"http:\/\/jsperf.com\/let-vs-var-definition\" target=\"_blank\"\u003Ejsperf\u003C\/a\u003E        \u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E3. Make sure that there is no native method for the same job\u003C\/h4\u003EThe same job you can do using native method and in your way of implmentation. if you are going to implement the functionality, take time to find native method can do the work. Native methods can give you better performance.\u003Cbr \/\u003E\u003Cdiv\u003ESample for using native methods             \u003Cbr \/\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003Evar arr = [];\u003Cbr \/\u003Earr.push(1);\u003Cbr \/\u003Earr.pop();\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E4. Combine the variable declarations\u003C\/h4\u003EDeclaring the variables can also be optimizable. All the declarations should be in one statements, this handle the memory allocation for all at one time.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003Evar foo,\u003Cbr \/\u003E    blah,\u003Cbr \/\u003E    flag;\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E5. Assign value in creation time, updations costs more.\u003C\/h4\u003Eif you seperate creations and value assignment of variables that would be a bad design. Assign the default values at the time of creations.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003Evar foo = \"str\",\u003Cbr \/\u003E    blah = 10,\u003Cbr \/\u003E    flag = false;\u003Cbr \/\u003E        \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E6. Literals executes faster than Objects.\u003C\/h4\u003ELiteral notation executes faster than object notation when declaring variables with datatype constructors.\u003Cbr \/\u003E\u003Cdiv\u003EDeclaring a variable in literal notation             \u003Cbr \/\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var str = 'string';\u003Cbr \/\u003E            var obj = {a:1,b:2};\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003EDeclaring variables using datatype constructors             \u003Cbr \/\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var str = new String();\u003Cbr \/\u003E            var arr = new Array();\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E7. For toggling purpose use 0\/1 instead of Boolean type.\u003C\/h4\u003EUsing 0\/1 helps to increase the performance, the value numeric values always better than boolean datatype.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var flag = 0;\u003Cbr \/\u003E            \u003Cbr \/\u003E            function toggleFlag(val){\u003Cbr \/\u003E                if(val){\u003Cbr \/\u003E                    val = 0;\u003Cbr \/\u003E                }else{\u003Cbr \/\u003E                    val = 1;\u003Cbr \/\u003E                }\u003Cbr \/\u003E                return val;\u003Cbr \/\u003E            }\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E8. Do not use concat for string concatenation, use '+'\u003C\/h4\u003EFor concatenation use \"+\" and the native method concat doesn't perform well, when considering the performance.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var str = \"this\";\u003Cbr \/\u003E            str += \"is\";\u003Cbr \/\u003E            str += \"awesome\";\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E9. \u003Ccode class=\"language-javascript\"\u003EparseInt\u003C\/code\u003E can be replaced with \u003Ccode class=\"language-javascript\"\u003E~~(1,'12.5')\u003C\/code\u003E\u003C\/h4\u003E\u003Ccode class=\"language-javascript\"\u003EparseInt\u003C\/code\u003E job can be done by the statement ~~(1,numericString) with better optimization.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E                var numberStr = '12.5';\u003Cbr \/\u003E                parseInt(numberStr); \/\/ 12.5\u003Cbr \/\u003E                ~~(1,numberStr); \/\/12.5\u003Cbr \/\u003E                \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E10. Compound assignment of \u003Ccode class=\"language-javascript\"\u003Elet\u003C\/code\u003E or \u003Ccode class=\"language-javascript\"\u003Econst\u003C\/code\u003E give bad results\u003C\/h4\u003EThis is the issue with compiler, the function containing \u003Ccode class=\"language-javascript\"\u003Elet\u003C\/code\u003E or \u003Ccode class=\"language-javascript\"\u003Econst\u003C\/code\u003E are not optimizable.\u003C\/div\u003E\u003Ch2\u003EArrays\u003C\/h2\u003E\u003Cdiv\u003E\u003Ch4\u003E11. Avoid multi-dimensional arrays\u003C\/h4\u003EArray items lookup bit costly, in case of multi-dimentional arrays that delivers not good results. Multi-dimentional array look up goes through each dimension every item comparison. \u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var maArr = [[1,2,3],[4,5,6],['a','b','c']];\u003Cbr \/\u003E            mArr[2][0] \/\/ returns 'a' \u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E12. Use array native methods for doing operations\u003C\/h4\u003EAs I discussed in early steps, I always recommend a native method in case of array manipulations, as most developers not aware of all methods. In case of array manipulations look ups and index handling are heavy operations, so better to go with native methods to perform the operations as much as possible.\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E13. For simple array findings use \u003Ccode class=\"language-javascript\"\u003EindexOf.\u003C\/code\u003E\u003C\/h4\u003Eoh, yah! \u003Ccode class=\"language-javascript\"\u003EindexOf.\u003C\/code\u003E, you are about to find the existence of an item in simple array, user it. Finding the existence by looping through all the items in the array is bad for simple arrays.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var simpleArr = [1,2,3,4];\u003Cbr \/\u003E            function find(arr, item){\u003Cbr \/\u003E                return arr.indexOf(item) !== -1; \u003Cbr \/\u003E            }\u003Cbr \/\u003E            find(simpleArr,3); \/\/ returns true;\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E14. Use binary search for finding elements in array\u003C\/h4\u003EWhy binary search? in case of complex arrays binary search gives the difference compared to other techniques.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003Ca href=\"http:\/\/jsfiddle.net\/aryzhov\/pkfst550\/\"\u003EjsFiddle Demo\u003C\/a\u003E            \u003Ca href=\"https:\/\/jsperf.com\/searching-javascript-arrays-with-a-binary-search\"\u003EjsPerf\u003C\/a\u003E        \u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E15. Arrays are faster than objects\u003C\/h4\u003EArray look ups and index manipulations are faster than object properties manipulations, array manipulations deals with index but object properties needs lot of comparisons.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var arr = [1,2,'c'];\u003Cbr \/\u003E            var obj = {foo:1,blah:2};\u003Cbr \/\u003E            arr[0];\u003Cbr \/\u003E            obj[blah];\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003Ca href=\"http:\/\/jsperf.com\/array-vs-object-performance\"\u003EjsPerf\u003C\/a\u003E        \u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E16. Arrays with holes in it gives much impact on objective\u003C\/h4\u003EArray should be well defined and need care in manipulations. Holes with in a array has the impact on performance and the manipulations needs high computations.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var arr = [1,3];\u003Cbr \/\u003E            arr[4] = 'a';\u003Cbr \/\u003E            \/\/wow you did it, you created an array with holes.\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E17. Array \u003Ccode class=\"language-javascript\"\u003Ejoin\u003C\/code\u003E faster than string concatenation\u003C\/h4\u003Eyes, it's true. Array join performs well in case of concatenating strings, thats proven by the performance benchmarks. its seems to be long way but it makes us to reach objective.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var str1 = 'am';\u003Cbr \/\u003E            var str2 = 'awesome';\u003Cbr \/\u003E            var arr = [];\u003Cbr \/\u003E            arr.push(str1);\u003Cbr \/\u003E            arr.push(str2);\u003Cbr \/\u003E            arr.join(); \/\/ \"am awesome\"\u003Cbr \/\u003E            str1 + 'I' + str2; \/\/ \"am I awesome\"\u003Cbr \/\u003E            \u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003Ca href=\"https:\/\/jsperf.com\/string-concat-vs-array-join-10000\/15\"\u003EjsPerf\u003C\/a\u003E        \u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E18. Use \u003Ccode class=\"language-javascript\"\u003Esplice(0,length)\u003C\/code\u003E to clear the array\u003C\/h4\u003EHow do you clear an array, are you assigning new empty array to it, that's not good way. Array method \u003Ccode class=\"language-javascript\"\u003Esplice\u003C\/code\u003E can work better in this case.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var arr = [1,2,3];\u003Cbr \/\u003E            arr.splice(0,arr.length); \/\/ arr =\u0026gt; []\u003Cbr \/\u003E            \u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003Ca href=\"http:\/\/jsperf.com\/array-destroy\/151\"\u003EjsPerf\u003C\/a\u003E        \u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E19. Typed Arrays are faster than native arrays\u003C\/h4\u003ETyped arrays performs lot better than normal javascript array becuase typed array views are like single type arrays.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E             var s_tyarrayUint8 = new Uint8Array(256 * 256 * 4);\u003Cbr \/\u003E            var s_tyarrayUint32 = new Uint32Array(256 * 256);\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003Ca href=\"https:\/\/jsperf.com\/native-vs-typed-js-array-speed\/29\" target=\"_blank\"\u003EjsPerf\u003C\/a\u003E\u0026nbsp;\u003Ca href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Typed_arrays\" target=\"_blank\"\u003EMDN\u003C\/a\u003E        \u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E20. \u003Ccode class=\"language-javascript\"\u003EArray.forEach\u003C\/code\u003E wont give you much better results\u003C\/h4\u003EThe array native looping method forEach needs functions executions for each item in the array, so its always a bad choice for iterating through all the items in array. Use for loop as an alternative for it.\u003Cbr \/\u003E\u003Cdiv\u003EIterating aray items with forEach             \u003Cbr \/\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var arr = [1,2,3,4];\u003Cbr \/\u003E            arr.forEach(function(){\/\/ doing something});\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003EIterating using for             \u003Cbr \/\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var arr = [1,2,3,4];\u003Cbr \/\u003E            \u003Cbr \/\u003E            for(var i=0;i\u0026lt;arr.length;i++){\u003Cbr \/\u003E                \/\/some code\u003Cbr \/\u003E            }\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Ch2\u003EObjects\u003C\/h2\u003E\u003Cdiv\u003E\u003Ch4\u003E21. \u0026gt;Construct objects instead of array when u need to do more find operations\u003C\/h4\u003Ewhen you need more find operations for set of items, constructing object will help you and performs well.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var users = {axorg :{id:'axorg', name:'George'},\u003Cbr \/\u003E            byorg:{id:'byorg', name:'John'}};\u003Cbr \/\u003E            users['byorg']; \/\/ easiest way to find user object using id\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E22. Use \u003Ccode class=\"language-javascript\"\u003EObject.keys()\u003C\/code\u003E to get list of keys in object\u003C\/h4\u003ETo get list of keys use the native method \u003Ccode class=\"language-javascript\"\u003EObject.keys()\u003C\/code\u003E because looping through all object properties costs more computations.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var obj = {a:1,b:2};\u003Cbr \/\u003E            Object.keys(obj); \/\/ return ['a','b']\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E23. Use property check instead of \u003Ccode class=\"language-javascript\"\u003EhasOwnProperty\u003C\/code\u003E\u003C\/h4\u003EThough \u003Ccode class=\"language-javascript\"\u003EhasOwnProperty\u003C\/code\u003E its own significance, doing property check give you advantage over \u003Ccode class=\"language-javascript\"\u003EhasOwnProperty\u003C\/code\u003E.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var task = [{name:\"do1\",selected:true},{name:\"do2\"}];\u003Cbr \/\u003E            var selectedTasks = 0;\u003Cbr \/\u003E            for(var i=0;i\u0026lt;task.length;i++){\u003Cbr \/\u003E                if(task[i].selected){\u003Cbr \/\u003E                    selectedTasks++;\u003Cbr \/\u003E                }\u003Cbr \/\u003E            }\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E24. Avoid \u003Ccode class=\"language-javascript\"\u003EObject.create()\u003C\/code\u003E instead use \u003Ccode class=\"language-javascript\"\u003Enew\u003C\/code\u003E\u003C\/h4\u003E\u003Ccode class=\"language-javascript\"\u003EObject.create()\u003C\/code\u003E have many advantages over \u003Ccode class=\"language-javascript\"\u003Enew\u003C\/code\u003E still its not good to go with it, performance petrices revealed that.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E             function myClass(){\u003Cbr \/\u003E                \/\/class definition\u003Cbr \/\u003E             }\u003Cbr \/\u003E             var klass = new myClass;\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003Ca href=\"https:\/\/jsperf.com\/obj-create-vs-new\/4\" target=\"_blank\"\u003EjsPerf\u003C\/a\u003E        \u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E25. Make it \u003Ccode class=\"language-javascript\"\u003Eundefined\u003C\/code\u003E instead of using \u003Ccode class=\"language-javascript\"\u003Edelete\u003C\/code\u003E to clear the properties from object\u003C\/h4\u003E\u003Ccode class=\"language-javascript\"\u003Edelete\u003C\/code\u003E leads to object manipulation, but making a property \u003Ccode class=\"language-javascript\"\u003Eundefined\u003C\/code\u003E wont cause for object recustruction.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var obj = {prop1:1,prop2:2};\u003Cbr \/\u003E            delete obj.prop1; \/\/ don't do it.\u003Cbr \/\u003E            obj.prop1 = undefined; \/\/ its better\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E26. \u003Ccode class=\"language-javascript\"\u003EObject.defineProperty()\u003C\/code\u003E costs more than direct property assignment\u003C\/h4\u003E\u003Ccode class=\"language-javascript\"\u003EObject.defineProperty()\u003C\/code\u003E it has so many features for controlling the property behaviour that makes the performance down, unless it is a public property don't define properties using \u003Ccode class=\"language-javascript\"\u003EObject.defineProperty()\u003C\/code\u003E\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var obj = {};\u003Cbr \/\u003E            obj.prop1 = 1;\u003Cbr \/\u003E            obj.prop2 = 2;\u003Cbr \/\u003E            Object.defineProperty(obj,'prop3',{value:4});\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Ch2\u003EStatements and Expressions\u003C\/h2\u003E\u003Cdiv\u003E\u003Ch4\u003E27. Do not use \u003Ccode class=\"language-javascript\"\u003Ewith\u003C\/code\u003E statement.\u003C\/h4\u003EA well known proverb \"do not use \u003Ccode class=\"language-javascript\"\u003Ewith\u003C\/code\u003E\", we can consider as one of the dangarous things in javascript. By using it you won't get much benfit but you will be in danger in case of missing properties in passed object. It updates global variabels if there are no properties in passed object.\u003Cbr \/\u003E\u003Cdiv\u003Eupdating the object using \u003Ccode class=\"language-javascript\"\u003Ewith\u003C\/code\u003E            \u003Cbr \/\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            with (myObj) {\u003Cbr \/\u003E    foo = true;\u003Cbr \/\u003E    blah = true;\u003Cbr \/\u003E}\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003Edoing the same thing             \u003Cbr \/\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var objCopy = myObj;\u003Cbr \/\u003E            objCopy.foo = true;\u003Cbr \/\u003E            objCopy.blah = true;\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E28. Do not use \u003Ccode class=\"language-javascript\"\u003Eeval\u003C\/code\u003E\u003C\/h4\u003EHere comes the evil of the javascript. \u003Ccode class=\"language-javascript\"\u003Eeval\u003C\/code\u003E opens a hole to support attackers. its executes the code slowly.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            eval(\"alert('hahahaha')\"); \/\/see the evil laugh\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E29. Clear the timers, once the your tasks are finished\u003C\/h4\u003E\u003Ccode class=\"language-javascript\"\u003EclearInterval\u003C\/code\u003E help you to clear the interval in javascript. what happens to the uncleared intervals, they runs forever.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var interval, count = 0;\u003Cbr \/\u003E            interval = setInterval(function(){\u003Cbr \/\u003E            if(count == 1000) clearInterval(interval);\u003Cbr \/\u003E            count++;},100);\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E30. Avoid animations with JavaScript\u003C\/h4\u003EDo not play with javascript variables, even though we have powerful engines making our main thread busy leads to unresponsive dialog or huge amount of memory occupation.\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E31. Do not hit userAgent maximum space allocated for localStorage\/sessionStorage\u003C\/h4\u003EIf the localStorage space reaching to the limit set by user agent and you are still trying to make operations on localStorage it always goes slow.\u003Cbr \/\u003E\u003Cdiv\u003E\/\/pushing records to localStorage             \u003Cbr \/\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            for(var i;i\u003C10000 code=\"\" generaterecords=\"\" guid=\"\" i=\"\" localstorage.setitem=\"\"\u003E\u003C\/10000\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E32. Limit number of requests to localStorage\u003C\/h4\u003ENumber requests to persistent storage space proportionally equals to performance impact.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Ca href=\"http:\/\/jsperf.com\/localstorage2\" target=\"_blank\"\u003Ejsperf\u003C\/a\u003E        \u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E33. Comments need space\u003C\/h4\u003EThough comments dont have much impact on performance but comments increases the files size that leads to increase load time, so its better to remove comments in production.\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E34. Make use of threading in Javascript\u003C\/h4\u003EDo the heavy operations in separate thread, Web Workers help you to implement this in Javascript. WebWorkers creates seperate threads in javascript.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var myThread = new WebWorker(url);\u003Cbr \/\u003E            myThread.onmessage = function(){\u003Cbr \/\u003E                \/\/receives msgs \u003Cbr \/\u003E            };\u003Cbr \/\u003E            myThread.postMessage(msg);\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E35. Use minimum number of web workers\u003C\/h4\u003EThere is a limit to number of webworker instances for same origin. \u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E36. Do not Send and Receive large amounts of data.\u003C\/h4\u003ESending or Recieving data objects creates copies of the objects, in case of large amounts of data passing threads needs more momery allocations that would slowdown execution.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E37. Websockets can give boost to your application\u003C\/h4\u003EImplementing websockets let you get rid of http overhead, this technique can make you to build responsive realtime web applicatios.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E38. Use \u003Ccode class=\"language-javascript\"\u003ErequestAnimationFrame\u003C\/code\u003E for better performance in using intervals.\u003C\/h4\u003EIf you are going to large operations on client-side like animations, iterating in frequent intervals, \u003Ccode class=\"language-javascript\"\u003ErequestAnimationFrame\u003C\/code\u003E helps to give smooth presentation without blocking the thread.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003EreqAF = window.requestAnimationFrame;\u003Cbr \/\u003E\u003Cbr \/\u003E  var degrees = 0;\u003Cbr \/\u003E  function updateSel(timestamp) {\u003Cbr \/\u003E    document.querySelector('#foo').style.webkitTransform = \"rotate(\" + degrees + \"deg)\";\u003Cbr \/\u003E    console.log('updated to degrees ' + degrees);\u003Cbr \/\u003E    degrees = degrees + 1;\u003Cbr \/\u003E    reqAF(updateSel);\u003Cbr \/\u003E  }\u003Cbr \/\u003E  reqAF(updateel);\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E39. Give the preference to native in case of base64 encoding or decoding \u003Ccode class=\"language-javascript\"\u003Eatab\u003C\/code\u003E and \u003Ccode class=\"language-javascript\"\u003Ebtoa.\u003C\/code\u003E\u003C\/h4\u003EThe best native and performant way for encoding and decoding data to and from base64. \u003Ccode class=\"language-javascript\"\u003Eatab\u003C\/code\u003E will give you the actual data from base64 encoded data. \u003Ccode class=\"language-javascript\"\u003Ebtoa.\u003C\/code\u003E gives you base64 encoded data of the passed data.\/p\u0026gt;             \u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var str = \"\"RK_Awesome\";\u003Cbr \/\u003E            var bStr = btoa(str);\/\/returns base64 data\u003Cbr \/\u003E            var aStr = atob(bStr);\/\/returns actual data\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003Ca href=\"https:\/\/jsperf.com\/btoa-vs-third-party-base64-encoder-5\/6\" target=\"_blank\"\u003EjsPerf\u003C\/a\u003E            \u003C\/div\u003E\u003C\/div\u003E\u003Ch2\u003ERegular Expressions\u003C\/h2\u003E\u003Cdiv\u003E\u003Ch4\u003E40. \u003Ccode class=\"language-javascript\"\u003Etest\u003C\/code\u003E is faster than \u003Ccode class=\"language-javascript\"\u003Eexec\u003C\/code\u003E when using regular expressions\u003C\/h4\u003EUsually we will go with \u003Ccode class=\"language-javascript\"\u003Etest\u003C\/code\u003E to verify the regExp but \u003Ccode class=\"language-javascript\"\u003Eexec\u003C\/code\u003E always performs better than \u003Ccode class=\"language-javascript\"\u003Etext\u003C\/code\u003E.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var str = \"hello world!\";\u003Cbr \/\u003Evar result = \/^hello\/.test(str);\u003Cbr \/\u003Econsole.log(result); \/\/ true\u003Cbr \/\u003Evar result = \/^hello\/.exec(str);\u003Cbr \/\u003Econsole.log(result); \/\/returns matches array\u003Cbr \/\u003E\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003Ca href=\"http:\/\/jsperf.com\/regular-expressions-test-vs-exec\" target=\"_blank\"\u003EjsPerf\u003C\/a\u003E        \u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E41. \u003Ccode class=\"language-javascript\"\u003Esearch\u003C\/code\u003E is faster then \u003Ccode class=\"language-javascript\"\u003Ematch\u003C\/code\u003E\u003C\/h4\u003EHere we have two string methods takes regular expression and finds the in the content \u003Ccode class=\"language-javascript\"\u003Esearch\u003C\/code\u003E and \u003Ccode class=\"language-javascript\"\u003Ematch\u003C\/code\u003E, which can be comparable, but the \u003Ccode class=\"language-javascript\"\u003Esearch\u003C\/code\u003E wins.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var str = \"hello world!\";\u003Cbr \/\u003E            var re = \/^hello\/;\u003Cbr \/\u003Evar result = str.search(re);\u003Cbr \/\u003Econsole.log(result); \/\/ index of first match or -1\u003Cbr \/\u003Evar result = str.match(re);\u003Cbr \/\u003Econsole.log(result); \/\/returns matches array or null\u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003Ca href=\"http:\/\/jsperf.com\/regular-expressions-search-vs-match\" target=\"_blank\"\u003EjsPerf\u003C\/a\u003E        \u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E42. \u003Ccode class=\"language-javascript\"\u003Ereplace\u003C\/code\u003E works well compared to \u003Ccode class=\"language-javascript\"\u003Esplit\u003C\/code\u003E and \u003Ccode class=\"language-javascript\"\u003Ejoin\u003C\/code\u003E.\u003C\/h4\u003EAnother string method performs better than a well used technique. Prefer to use \u003Ccode class=\"language-javascript\"\u003Ereplace\u003C\/code\u003E for replacing a string in other string.\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003Cbr \/\u003E            var str = \"Hello world\";  \u003Cbr \/\u003E            str.replace(\"Hello\", \"Google\");\/\/ good to go\u003Cbr \/\u003E            str.split(\"Hello\").join(\"Google\");\/\/ bad practice\u003Cbr \/\u003E            \u003Cbr \/\u003E            \u003C\/code\u003E\u003C\/pre\u003E\u003Ca href=\"http:\/\/jsperf.com\/replacing-with-regular-expressions\" target=\"_blank\"\u003EjsPerf\u003C\/a\u003E        \u003C\/div\u003E\u003C\/div\u003E\u003Ch2\u003EControl statements\u003C\/h2\u003E\u003Cdiv\u003E\u003Ch4\u003E43. Avoid \u003Ccode class=\"language-javascript\"\u003Eelse-if\u003C\/code\u003E, use \u003Ccode class=\"language-javascript\"\u003Eswitch\u003C\/code\u003E instead.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E44. Use \u003Ccode class=\"language-javascript\"\u003E!!\u003C\/code\u003E if you are checking non-Boolean values.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E45. Strict comparison slower than value comparison.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E46. if-else faster than ternary.\u0026nbsp;\u003Ca href=\"http:\/\/jsperf.com\/ternary-vs-simple-if-else\" target=\"_blank\"\u003Ejsperf\u003C\/a\u003E\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E47. Do not exceed your \u003Ccode class=\"language-javascript\"\u003Eswitch\u003C\/code\u003E cases more than 128.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E48. \u003Ccode class=\"language-javascript\"\u003Etypeof\u003C\/code\u003E is much faster than \u003Ccode class=\"language-javascript\"\u003EinstanceOf.\u0026nbsp;\u003Ca href=\"http:\/\/jsperf.com\/instanceof-vs-typeof-function\" target=\"_blank\"\u003Ejsperf\u003C\/a\u003E\u003C\/code\u003E\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E49. Give first preference to boolean conditions when you are checking multiple conditions.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E50. Write fail proof code and avoid \u003Ccode class=\"language-javascript\"\u003Etry\/catch.\u003C\/code\u003E\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E51. \u003Ccode class=\"language-javascript\"\u003Etry\/final\u003C\/code\u003E also gives same impact like \u003Ccode class=\"language-javascript\"\u003Etry\/catch\u003C\/code\u003E put them in a function and call them to use\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Ch2\u003ELoops\u003C\/h2\u003E\u003Cbr \/\u003E\u003Cdiv\u003E\u003Ch4\u003E52. Avoid \u003Ccode class=\"language-javascript\"\u003Efor-in\u003C\/code\u003E loops.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E53. Avoid \u003Ccode class=\"language-javascript\"\u003Efor-of\u003C\/code\u003E loops.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E54. Mix conditions with control variables when using loops.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E55. Use decrements instead of increment if possible.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E56. Use \u003Ccode class=\"language-javascript\"\u003Ebreak\u003C\/code\u003E and \u003Ccode class=\"language-javascript\"\u003Econtinue.\u003C\/code\u003E\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E57. Long Running Scripts.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Ch2\u003EFunctions\u003C\/h2\u003E\u003Cbr \/\u003E\u003Cdiv\u003E\u003Ch4\u003E58. Use closures.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E59. Apply closure instead of \u003Ccode class=\"language-javascript\"\u003Ebind\u003C\/code\u003E.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E60. Use \u003Ccode class=\"language-javascript\"\u003Ecall\u003C\/code\u003E or \u003Ccode class=\"language-javascript\"\u003Eapply\u003C\/code\u003E or \u003Ccode class=\"language-javascript\"\u003Ebind\u003C\/code\u003E when binding or calling the functions to avoid correct this.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E61. Use \u003Ccode class=\"language-javascript\"\u003Ecall\u003C\/code\u003E instead of \u003Ccode class=\"language-javascript\"\u003Eapply.\u003C\/code\u003E\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E62. Create instance instead of creating object.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E63. Creating instance with new better than calling a function.\u0026nbsp;\u003Ca href=\"https:\/\/jsperf.com\/prototype-vs-closures\/20\" target=\"_blank\"\u003Ejsperf\u003C\/a\u003E\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E64. Return direct value not the reference.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E65. Do not create anonymous functions.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E66. Pass less arguments to the function.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E67. passing objects, arrays, dates are better than strings, boolean values\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E68. Prototype methods significantly faster then class methods.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E69. Function expression slower than function declaration.\u0026nbsp;\u003Ca href=\"http:\/\/jsperf.com\/function-declaration-vs-function-expression\" target=\"_blank\"\u003Ejsperf\u003C\/a\u003E\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E70. Never return arguments array or reference of it. it causes for memory leak. copy the arguments to a new array and return if you want to return.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E71. Don't try to manipulate arguments object or create a variable with arguments name.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E72. Returning a value always faster than implementing callback.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E73. Don't touch \u003Ccode class=\"language-javascript\"\u003E__proto__\u003C\/code\u003E in your function declaration.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E74. get and set declarations makes the functions unoptimizable.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E75. Functions have debugger statement never think about performance.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E76. Avoid recursions.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E77. Native promises faster than callbacks.\u0026nbsp;\u003Ca href=\"http:\/\/jsperf.com\/promise-vs-callback\" target=\"_blank\"\u003Ejsperf\u003C\/a\u003E\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Ch2\u003EDOM\u003C\/h2\u003E\u003Cbr \/\u003E\u003Cdiv\u003E\u003Ch4\u003E78. Do not use global object directly, use references to those objects when you are doing multiple operation using the same object.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E79. Use arrays instead of HTML Collection objects.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E80. Avoid DOM Manipulation.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E81. Do not change styles directly, deal with classes instead.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E82. \u003Ccode class=\"language-javascript\"\u003EClassName\u003C\/code\u003E give better results than \u003Ccode class=\"language-javascript\"\u003EClassList.\u0026nbsp;\u003Ca href=\"https:\/\/jsperf.com\/classlist-versus-classname\/2\" target=\"_blank\"\u003Ejsperf\u003C\/a\u003E\u003C\/code\u003E\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E83. Batch your DOM changes.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E84. Less DOM gives you much better performance.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E85. Separate the DOM creation and adding.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E86. Prefer to load DOM on demand.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E87. Load the scripts after DOM load.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E88. Compare nodes not the attributes\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E89. Better to use \u003Ccode class=\"language-javascript\"\u003Edocument.querySelector\u003C\/code\u003E instead of \u003Ccode class=\"language-javascript\"\u003EElement.querySelector.\u003C\/code\u003E\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E90. Data attribute selectors are slower than CSS selectors.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E91. Attributes faster than \u003Ccode class=\"language-javascript\"\u003Edata-*\u003C\/code\u003E attributes.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E92. Be careful with these things, you may lead to browser favorite dialog. Too much DOM interaction.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Ch2\u003EEvent handling\u003C\/h2\u003E\u003Cbr \/\u003E\u003Cdiv\u003E\u003Ch4\u003E93. Be care full with event bindings.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E94. Take extreme care on events fires in less times.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E95. Turn off the events when you are done.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E96. Lock the events with in the scope.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E97. \u003Ccode class=\"language-javascript\"\u003EMouse-up\u003C\/code\u003E event instead of \u003Ccode class=\"language-javascript\"\u003Eclick\u003C\/code\u003E event.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Ch2\u003ETransportation and Delivering\u003C\/h2\u003E\u003Cbr \/\u003E\u003Cdiv\u003E\u003Ch4\u003E98. Load dependencies on demand.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E99. Minify your code for production.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E100. Follow AMD pattern for best practices.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E101. Use Caching more.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch4\u003E102. Use CDNs to load scripts fast.\u003C\/h4\u003E\u003Cdiv\u003E\u003Cpre class=\"language-javascript\"\u003E\u003Ccode\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003C\/div\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/kongaraju.blogspot.com\/feeds\/2614827248665236361\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2016\/05\/101-javascript-performance-improvement.html#comment-form","title":"0 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/2614827248665236361"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/2614827248665236361"},{"rel":"alternate","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2016\/05\/101-javascript-performance-improvement.html","title":"101 Javascript performance improvement techniques"}],"author":[{"name":{"$t":"Raju Konga"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/10750040862243953720"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"33","height":"30","src":"\/\/3.bp.blogspot.com\/-NRmd50o6VzU\/Xl0GJ89U5nI\/AAAAAAAAFvs\/hmFaD7EEWBktvdxCDKDS8PFdbVIiGTaBgCK4BGAYYCw\/s220\/latest_pic.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/4.bp.blogspot.com\/-9IuP7rW1uqY\/UB93W32D__I\/AAAAAAAABzk\/yz41LmKWb70El3y4hVh8YHiubfQBBO3XACPcB\/s72-c\/aw-snap-google-chrome.gif","height":"72","width":"72"},"thr$total":{"$t":"0"}},{"id":{"$t":"tag:blogger.com,1999:blog-1933328805824469647.post-2461609485001546684"},"published":{"$t":"2015-07-17T12:59:00.000+05:30"},"updated":{"$t":"2016-01-27T23:07:48.575+05:30"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Client-side"},{"scheme":"http://www.blogger.com/atom/ns#","term":"HTML5"},{"scheme":"http://www.blogger.com/atom/ns#","term":"javascript"},{"scheme":"http://www.blogger.com/atom/ns#","term":"stream"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Web Audio"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WebApplications"}],"title":{"type":"text","$t":"Web Audio API"},"content":{"type":"html","$t":"\u003Cdiv dir=\"ltr\" style=\"text-align: left;\" trbidi=\"on\"\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Ch3 style=\"text-align: left;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EIntroduction:\u003C\/span\u003E\u003C\/h3\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003Cbr \/\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;Audio on the web was never thought of without a flash or a plugin in the formative years. An excellent audio element of HTML 5 “The Web Audio API” has brought in a great revolution without the help of the above mentioned elements and is capable of supporting sophisticated games and interactive applications.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-ZAmmzjgK-GM\/Vqj_bFdtFJI\/AAAAAAAAC4Q\/LTqufpWFn4U\/s1600\/sound_designer.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"Web Audio API\" border=\"0\" height=\"187\" src=\"http:\/\/3.bp.blogspot.com\/-ZAmmzjgK-GM\/Vqj_bFdtFJI\/AAAAAAAAC4Q\/LTqufpWFn4U\/s400\/sound_designer.jpg\" title=\"\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;The Web Audio API is basically a high-level JavaScript API that processes and integrated audio in web apps.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u003Cb\u003E\u003Ci\u003EThe two different types:\u0026nbsp;\u003C\/i\u003E\u003C\/b\u003EIn general there are two audio API’s one being the Audio data API and the other is the Web Audio API .The creation, the processing and the controlling of audio within the webapps is much simpler in Web Audio API when compared to the low-level access of the audio data by the Audio Data API.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u003Ci\u003E\u003Cb\u003EAmazing Feature:\u003C\/b\u003E\u003C\/i\u003E The attractive feature if that it does not require a helper application such as plug-in or flash. The main purpose of this API is to include the capabilities that are found in modern game audio engines and the excellent tasks such as mixing , \u0026nbsp;processing and filtering tasks that are found in modern desktop audio production application.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Ch3 style=\"text-align: left;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EThe Working:\u003C\/span\u003E\u003C\/h3\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026nbsp;\u0026nbsp;\u003Ci\u003EThe AudioContext instance:\u003C\/i\u003EThis is one of the most powerful instance used for managing and playing all the sounds. Initially an audio context has to be created which is like a container. Inside the context one can create sources and then connect them to the nodes and finally connected to the destination in the form a chain.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cpre\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003E     var context = new AudioContext() ;\u003Cbr \/\u003E     \/\/Audio Container created.\u003Cbr \/\u003E\u003C\/code\u003E\u003Cbr \/\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003ESince WebAudioAPI is a based on webkit technology and is supposed to be supported on IOS6,’webkit’ should be appended to the audio context.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cpre\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003Evar context = new WebKitAudioContext();\u003Cbr \/\u003E\u003C\/code\u003E\u003Cbr \/\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EOnce the audio context container is created a source node can also be created. A source node can be an Oscillator which generates sound from scratch or audio files such as wav, mp3 can be loaded and played back.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003ETo create an oscillator\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cpre\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003EOscillator = context.createOscillator();\u003Cbr \/\u003E\u003C\/code\u003E\u003Cbr \/\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EThen the oscillator is supposed to be connected to the destination which can be speakers.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cpre\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003EOscillator.connect(context.destination);\u003Cbr \/\u003E\u003C\/code\u003E\u003Cbr \/\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003ETo generate sound instantly\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cpre\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003EOscillator.noteOn(0);\u003Cbr \/\u003E\u003C\/code\u003E\u003Cbr \/\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003ENow once the audio context is created between the source and the destination there is another interface called the\u0026nbsp;audionode.\u0026nbsp;They act as intermediate modules used for processing.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EThere are several audio nodes such as the-\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E1. \u003Ci\u003EGainnode:\u003C\/i\u003E This is used for volume which can be created in the following way-\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cpre\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003EvolumeNode = context.createGainNode();\u003Cbr \/\u003E\u003C\/code\u003E\u003Cbr \/\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EOne can set the volume using\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cpre\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003EvolumeNode.gain.value = 0.3;\u003Cbr \/\u003E\u003C\/code\u003E\u003Cbr \/\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003ENow this can be connected to the source\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cpre\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003EOscillator.connect(volumeNode);\u003Cbr \/\u003E\u003C\/code\u003E\u003Cbr \/\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E2.\u0026nbsp;\u003Ci\u003EThe Biquad filter:\u003C\/i\u003E\u0026nbsp;To add complex effects to your sound forms a biquad filter is used. It is low-order filter.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E3.\u0026nbsp;\u003Ci\u003EThe delay node:\u003C\/i\u003E\u0026nbsp;It delays the incoming node signal.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E4.\u0026nbsp;\u003Ci\u003EThe audiobuffer node:\u003C\/i\u003E\u0026nbsp;It consists of an in-memory audio data stored in an audio buffer.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E5. \u003Ci\u003EPanner node:\u003C\/i\u003E\u0026nbsp;It describes its position with right –hand Cartesian co-ordinates and positions an incoming audio stream in 3D space.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E6.\u0026nbsp;\u003Ci\u003EConvolver node:\u0026nbsp;\u003C\/i\u003EGiven an impulse response it applies a linear convolution effect.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E7.\u0026nbsp;\u003Ci\u003EDynamic Compressor Node:\u003C\/i\u003E\u0026nbsp;When multiple sounds are played together, it helps to prevent distortion by lowering the volume of the loudest part of the signal.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E8.\u0026nbsp;\u003Ci\u003EWave Shaper node:\u003C\/i\u003E\u0026nbsp;Inspite of the distortion effect, it applies a curve distorter to add a soothing feeling to the signal. It is a non-linear distorter.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Ci\u003EBy combining the above mentioned code one can find a working demo.\u003C\/i\u003E\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Ch3 style=\"margin-bottom: 0.0001pt; text-align: left;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EExploring the WEB AUDIO API:\u003C\/span\u003E\u003C\/h3\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Ci\u003EThe AudioPara:\u003C\/i\u003E\u0026nbsp;It is like the AudioNode. It can be set to a specific value or a different value.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Ci\u003EEnded:\u003C\/i\u003E\u0026nbsp;It is an event that can be called when the media has reached the end of the play.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Ch4 style=\"margin-bottom: 0.0001pt; text-align: left;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EThe media elements:\u003C\/span\u003E\u003C\/h4\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Ci\u003EMediaElementAudioSource Node:\u003C\/i\u003E\u0026nbsp;It is an audio node consisting of \u0026lt;audio\u0026gt; and \u0026lt;video\u0026gt; element of the HTML 5.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Ci\u003EMediaStreamAudioSource Node:\u003C\/i\u003E\u0026nbsp;It is an audio node that acts as an audio source consisting of webcam or microphone.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Ci\u003EMediaStreamAudioDestination Node:\u003C\/i\u003E\u0026nbsp;It is an audio node consisting of the audio destination node.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt; text-indent: -18pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u003Cb\u003EHow to extract time and frequency?\u003C\/b\u003E\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt; text-indent: -18pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EThen check out the Analyser node.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EAssume that Source ‘S’ is connected to Destination ‘D’\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cpre\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003Evar analyser = context.createAnalyser();\u003Cbr \/\u003ES.connect(analyser);\u003Cbr \/\u003Eanalyser.connect(D);\u003Cbr \/\u003Evar freqDomain = new Float32Array(analyser.frequencyinCount);\u003Cbr \/\u003Eanalyser.getFloatFrequencyData(freqDomain);\u003Cbr \/\u003E\u003C\/code\u003E\u003Cbr \/\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EA channel Splitter and a Merger?\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EA channel splitter separated different channels of an audio source into a set of mono outputs. It is created using a method called createChannelSplitter\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EA channel merger unites the mono inputs into a single output. It is created using a method called createChannelMerger\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Ci\u003EAudioListener:\u003C\/i\u003E It gives the position and orientation of a person listening to the audio.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EIn c# it is created in the following way:\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cpre\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003EAudioListener listener = new AudioListener();\u003Cbr \/\u003E\u003C\/code\u003E\u003Cbr \/\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EScript Process Node:\u0026nbsp;This helps in the generation, processing or analysing of audio used in JavaScript.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Ci\u003EAudio Process (event):\u003C\/i\u003E\u0026nbsp;When a script process node is ready to be processed the event is fired.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Ci\u003EAudioProcessing Event:\u003C\/i\u003E\u0026nbsp;When the script processor node Input Buffer is ready to be processed, the event is fired.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Ci\u003EOffline Audio Context:\u003C\/i\u003E\u0026nbsp;It does not render the audio but generates it as fast as it can in the buffer.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Ci\u003EComplete:\u003C\/i\u003E\u0026nbsp;When the Offline Audio Context is terminated it is fired.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin-bottom: 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Ci\u003EOffline Audio Completion Event:\u0026nbsp;\u003C\/i\u003EThe complete event implements the interface.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/kongaraju.blogspot.com\/feeds\/2461609485001546684\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2015\/07\/web-audio-api.html#comment-form","title":"0 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/2461609485001546684"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/2461609485001546684"},{"rel":"alternate","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2015\/07\/web-audio-api.html","title":"Web Audio API"}],"author":[{"name":{"$t":"Raju Konga"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/10750040862243953720"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"33","height":"30","src":"\/\/3.bp.blogspot.com\/-NRmd50o6VzU\/Xl0GJ89U5nI\/AAAAAAAAFvs\/hmFaD7EEWBktvdxCDKDS8PFdbVIiGTaBgCK4BGAYYCw\/s220\/latest_pic.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/3.bp.blogspot.com\/-ZAmmzjgK-GM\/Vqj_bFdtFJI\/AAAAAAAAC4Q\/LTqufpWFn4U\/s72-c\/sound_designer.jpg","height":"72","width":"72"},"thr$total":{"$t":"0"}},{"id":{"$t":"tag:blogger.com,1999:blog-1933328805824469647.post-836931492389933370"},"published":{"$t":"2015-07-16T15:26:00.002+05:30"},"updated":{"$t":"2015-12-24T15:30:51.002+05:30"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Client-side"},{"scheme":"http://www.blogger.com/atom/ns#","term":"HTML5"},{"scheme":"http://www.blogger.com/atom/ns#","term":"javascript"},{"scheme":"http://www.blogger.com/atom/ns#","term":"stream"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WebApplications"},{"scheme":"http://www.blogger.com/atom/ns#","term":"webrtc"}],"title":{"type":"text","$t":"Share your screen over Web(Screen sharing with HTML5)"},"content":{"type":"html","$t":"\u003Cdiv dir=\"ltr\" style=\"text-align: left;\" trbidi=\"on\"\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan style=\"text-align: left;\"\u003EA whole new concept on how a user can share his desktop or browser screens to other users is\u003C\/span\u003E\u003Cspan class=\"apple-converted-space\" style=\"text-align: left;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003Cspan style=\"text-align: left;\"\u003E“\u003Cb\u003EScreen sharing\u003C\/b\u003E”\u003C\/span\u003E\u003Cspan class=\"apple-converted-space\" style=\"text-align: left;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003Cspan style=\"text-align: left;\"\u003E.\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-Ggv8l5D3anY\/Vad-66OC7II\/AAAAAAAACyM\/cJcgUOvhyzA\/s1600\/screen_share.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cimg border=\"0\" height=\"204\" src=\"http:\/\/2.bp.blogspot.com\/-Ggv8l5D3anY\/Vad-66OC7II\/AAAAAAAACyM\/cJcgUOvhyzA\/s320\/screen_share.jpg\" width=\"320\" \/\u003E\u003C\/span\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 0cm 0cm 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cb\u003EIs it possible?\u003C\/b\u003E\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 0cm 0cm 0.0001pt;\"\u003E\u003Cb\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/b\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 0cm 0cm 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EWhile webRTC has not yet been supported by IE and Safari and these browsers\u0026nbsp; donot support screensharing \u0026nbsp;as well,there are several webapps that allow you and me to share the screens without the need of any plug-ins.The only one thing that is required to allow screen sharing is a browser called Chrome.Some of the webapps that support this screen sharing is \u003Cb\u003Esame.io,talky.io and appear.in\u003C\/b\u003E\u003Co:p\u003E\u003C\/o:p\u003E\u003Cu1:p\u003E\u003C\/u1:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 0cm 0cm 0.0001pt;\"\u003E\u003Cb\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/b\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 0cm 0cm 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cb\u003EWant to know how to do this in chrome?\u003C\/b\u003E\u003Co:p\u003E\u003C\/o:p\u003E\u003Cu1:p\u003E\u003C\/u1:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 0cm 0cm 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 0cm 0cm 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EThen follow the below steps-\u003Co:p\u003E\u003C\/o:p\u003E\u003Cu1:p\u003E\u003C\/u1:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 0cm 0cm 0.0001pt; text-indent: -18pt;\"\u003E\u003C\/div\u003E\u003Col style=\"text-align: left;\"\u003E\u003Cli\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan style=\"text-indent: -18pt;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026nbsp;\u003C\/span\u003E\u003Cspan class=\"apple-converted-space\" style=\"text-indent: -18pt;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003Cspan style=\"text-indent: -18pt;\"\u003EType \u003Cb\u003Echrome:\/\/flags\u003C\/b\u003E in the address bar\u003C\/span\u003E\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan style=\"text-indent: -18pt;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026nbsp;\u003C\/span\u003E\u003Cspan class=\"apple-converted-space\" style=\"text-indent: -18pt;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003Cspan style=\"text-indent: -18pt;\"\u003EYou will find a setting like\u0026nbsp; “Enable screen capture support in \u003Cb\u003EgetUserMedia\u003C\/b\u003E()”\u003C\/span\u003E\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan style=\"text-indent: -18pt;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026nbsp;\u003C\/span\u003E\u003Cspan class=\"apple-converted-space\" style=\"text-indent: -18pt;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003Cspan style=\"text-indent: -18pt;\"\u003EClick the enable button\u003C\/span\u003E\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan style=\"text-indent: -18pt;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026nbsp;\u003C\/span\u003E\u003Cspan class=\"apple-converted-space\" style=\"text-indent: -18pt;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003Cspan style=\"text-indent: -18pt;\"\u003ERestart your browser.\u003C\/span\u003E\u003C\/span\u003E\u003C\/li\u003E\u003C\/ol\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003Cdiv style=\"margin: 0cm 0cm 0.0001pt; text-indent: -18pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 0cm 0cm 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EWebapps like \u003Ci\u003Esame.io and talky.io\u003C\/i\u003E allows a user to share their screens. By allowing your chrome browser to access your web camera and microphone and by clicking on the “Share my Screen” button the user can share his screens.\u003Co:p\u003E\u003C\/o:p\u003E\u003Cu1:p\u003E\u003C\/u1:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 0cm 0cm 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 0cm 0cm 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EOnce the user hits that button the user will be provided with a unique web url and if anyone gets to know this url can access your screen through the chrome browser.\u003Co:p\u003E\u003C\/o:p\u003E\u003Cu1:p\u003E\u003C\/u1:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 0cm 0cm 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 0cm 0cm 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EThe other webapp \u003Ci\u003Etalky.io\u003C\/i\u003E allows private sessions wherein a user can protect his screens using a password.\u003Co:p\u003E\u003C\/o:p\u003E\u003Cu1:p\u003E\u003C\/u1:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 0cm 0cm 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 0cm 0cm 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Ci\u003EAppear.in\u003C\/i\u003E is a web app for video meetings that allows the user to share the desktop screen to other participants.\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 0cm 0cm 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-6vTHj9EdchA\/Vad_RSEVstI\/AAAAAAAACyU\/Yjf-mvtPZto\/s1600\/remote-access.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em; text-align: center;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cimg border=\"0\" height=\"333\" src=\"http:\/\/1.bp.blogspot.com\/-6vTHj9EdchA\/Vad_RSEVstI\/AAAAAAAACyU\/Yjf-mvtPZto\/s400\/remote-access.jpg\" width=\"400\" \/\u003E\u003C\/span\u003E\u003C\/a\u003E\u003Cbr \/\u003E\u003Cdiv style=\"margin: 0cm 0cm 0.0001pt;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-6vTHj9EdchA\/Vad_RSEVstI\/AAAAAAAACyU\/Yjf-mvtPZto\/s1600\/remote-access.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em; text-align: center;\"\u003E\u003Cspan style=\"color: blue; text-decoration: none;\"\u003E\u003C!--[if gte vml 1]\u003E\u003Cv:shape  id=\"Picture_x0020_1\" o:spid=\"_x0000_i1025\" type=\"#_x0000_t75\" alt=\"https:\/\/1.bp.blogspot.com\/-6vTHj9EdchA\/Vad_RSEVstI\/AAAAAAAACyU\/Yjf-mvtPZto\/s400\/remote-access.jpg\"  href=\"http:\/\/1.bp.blogspot.com\/-6vTHj9EdchA\/Vad_RSEVstI\/AAAAAAAACyU\/Yjf-mvtPZto\/s1600\/remote-access.jpg\"  style='width:300pt;height:249.75pt;visibility:visible;mso-wrap-style:square'  o:button=\"t\"\u003E \u003Cv:imagedata src=\"file:\/\/\/C:\\Users\\rkonga\\AppData\\Local\\Temp\\msohtmlclip1\\01\\clip_image002.jpg\"   o:title=\"remote-access\"\/\u003E\u003C\/v:shape\u003E\u003C![endif]--\u003E\u003C!--[if !vml]--\u003E\u003C!--[endif]--\u003E\u003C\/span\u003E\u003C\/a\u003E\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EHowever a tech savvy guy named Rafael Weinstein has proposed a technique which uses Mutation observers and a websocket.\u003Co:p\u003E\u003C\/o:p\u003E\u003Cu1:p\u003E\u003C\/u1:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Ch3 style=\"margin: 0cm 0cm 0.0001pt; text-align: left;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003ELet’s see how this works:\u003C\/span\u003E\u003C\/h3\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm; text-indent: -18.0pt;\"\u003E\u003C\/div\u003E\u003Col style=\"text-align: left;\"\u003E\u003Cli\u003E\u003Cspan style=\"font-family: inherit; text-indent: -18pt;\"\u003EThe presenter shares his screen to the viewer using a websocket\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-family: inherit; text-indent: -18pt;\"\u003EAs the user performs any scroll operation the observer sends the changes and the report back to the viewer using Rafael mutation summary library.\u003C\/span\u003E\u003C\/li\u003E\u003C\/ol\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Ci\u003E\u003Cb\u003EAnother method on how screensharing is done is:\u003C\/b\u003E\u003C\/i\u003E\u003Cu1:p\u003E\u003C\/u1:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm; text-indent: -18.0pt;\"\u003E\u003C\/div\u003E\u003Col style=\"text-align: left;\"\u003E\u003Cli\u003E\u003Cspan style=\"font-family: inherit; text-indent: -18pt;\"\u003ERewrite all the pages on the URL to absolute to prevent static images and CSS elements from broken links\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-family: inherit; text-indent: -18pt;\"\u003EClone the page’s document\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-family: inherit; text-indent: -18pt;\"\u003EMake the clone readonly, hidden and non-selectable and prevent scrolling.\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-family: inherit; text-indent: -18pt;\"\u003ECapture the current position of the screen and add them as data-* attributes as duplicate\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-family: inherit; text-indent: -18pt;\"\u003ECreate a new BLOB page as duplicate.\u003C\/span\u003E\u003C\/li\u003E\u003C\/ol\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EThe code for this is as follows-\u003Co:p\u003E\u003C\/o:p\u003E\u003Cu1:p\u003E\u003C\/u1:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cpre\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003E function screenshot(){\u003Cbr \/\u003E    urlsToAbsolute(document.images);  \u003Cbr \/\u003E    urlsToAbsolute(document.querySelectorAll(\"link[rel='stylesheet']\"));\u003Cbr \/\u003E    urlsToAbsolute(document.scripts);\u003Cbr \/\u003E\u003Cbr \/\u003E    var screen= document.documentElement.cloneNode(true);\u003Cbr \/\u003E\u003Cbr \/\u003E    screen.style.pointerEvents = 'none';\u003Cbr \/\u003E    screen.style.overflow = 'hidden';\u003Cbr \/\u003E    screen.style.userSelect = 'none';\u003Cbr \/\u003E\u003Cbr \/\u003E    var blob1 = new Blob([screen.outerHTML], {type: 'text\/html'});\u003Cbr \/\u003E\u003Cbr \/\u003E    window.open(window.URL.createObjectURL(blob1));\u003Cbr \/\u003E }\u003Cbr \/\u003E\u003C\/code\u003E\u003Cbr \/\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cb\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u0026nbsp; \u0026nbsp;\u003C\/span\u003E\u003C\/b\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EBefore the final BLOB is created this java script code should be written so that\u0026nbsp; when then presenter scrolls the page the user follows.\u003Co:p\u003E\u003C\/o:p\u003E\u003Cu1:p\u003E\u003C\/u1:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003ESet the scrollX and scrollY positions\u003Co:p\u003E\u003C\/o:p\u003E\u003Cu1:p\u003E\u003C\/u1:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cpre\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003E addOnPageLoad().\u003Cbr \/\u003E screen.dataset.scrollX = window.scrollX;\u003Cbr \/\u003E screen.dataset.scrollY = window.scrollY;\u003Cbr \/\u003E\u003C\/code\u003E\u003Cbr \/\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003Eand finally write this below code –\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cpre\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003E var script = document.createElement('script');\u003Cbr \/\u003E script.textContent = '(' + addOnPageLoad_.toString() + ')();';.\u003Cbr \/\u003E screenshot.querySelector('body').appendChild(script);\u003Cbr \/\u003E function addOnPageLoad() {\u003Cbr \/\u003E    window.addEventListener('DOMContentLoaded', function(e) {\u003Cbr \/\u003E        var scrollX = document.documentElement.dataset.scrollX || 0;\u003Cbr \/\u003E        var scrollY = document.documentElement.dataset.scrollY || 0;\u003Cbr \/\u003E        window.scrollTo(scrollX, scrollY);\u003Cbr \/\u003E    });\u003Cbr \/\u003E }\u003Cbr \/\u003E\u003C\/code\u003E\u003Cbr \/\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EAnother method is make the screenshot as a png file and share it using a websocket.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cpre\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003E var img_mimetype = 'images\/jpeg';\u003Cbr \/\u003E var IMG_QUALITY = 90;\u003Cbr \/\u003E var SEND_INTERVAL = 280;\u003Cbr \/\u003E var wes = new WebSocket('ws:\/\/...', 'sample-protocol');\u003Cbr \/\u003E wes.binaryType = 'blob';\u003Cbr \/\u003E function captureAndSendTab() {\u003Cbr \/\u003E    var opts = {format: img_mimetype, quality: IMG_QUALITY};\u003Cbr \/\u003E    chrome.tabs.captureVisibleTab(null, opts, function(dataUrl){\u003Cbr \/\u003E       wes.send(convertDataURIToBlob(dataUrl, IMG_MIMETYPE));\u003Cbr \/\u003E    });\u003Cbr \/\u003E  }\u003Cbr \/\u003E var intervalId = setInterval(function() {\u003Cbr \/\u003E     if (ws.bufferedAmount == 0) {\u003Cbr \/\u003E         captureAndSendTab();\u003Cbr \/\u003E      }\u003Cbr \/\u003E    }, SEND_INTERVAL);\u003Cbr \/\u003E\u003C\/code\u003E\u003Cbr \/\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Ch3 style=\"margin: 0cm 0cm 0.0001pt; text-align: left;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EConclusion:\u003C\/span\u003E\u003C\/h3\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003EThough without the use of WebRTC we have several technologies that help us to make screen sharing possible we still have to wait for the WebRTC to take a leap in making this screen sharing possible with HTML5 .\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin-bottom: .0001pt; margin: 0cm;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003ESo guys wait to see the revolution that WebRTC is going to bring.\u003C\/span\u003E\u003Cspan style=\"font-family: verdana, sans-serif;\"\u003E\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/kongaraju.blogspot.com\/feeds\/836931492389933370\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2015\/07\/share-your-over-webscreen-sharing-with.html#comment-form","title":"4 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/836931492389933370"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/836931492389933370"},{"rel":"alternate","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2015\/07\/share-your-over-webscreen-sharing-with.html","title":"Share your screen over Web(Screen sharing with HTML5)"}],"author":[{"name":{"$t":"Raju Konga"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/10750040862243953720"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"33","height":"30","src":"\/\/3.bp.blogspot.com\/-NRmd50o6VzU\/Xl0GJ89U5nI\/AAAAAAAAFvs\/hmFaD7EEWBktvdxCDKDS8PFdbVIiGTaBgCK4BGAYYCw\/s220\/latest_pic.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/2.bp.blogspot.com\/-Ggv8l5D3anY\/Vad-66OC7II\/AAAAAAAACyM\/cJcgUOvhyzA\/s72-c\/screen_share.jpg","height":"72","width":"72"},"thr$total":{"$t":"4"}},{"id":{"$t":"tag:blogger.com,1999:blog-1933328805824469647.post-1187037905045567768"},"published":{"$t":"2015-07-16T15:17:00.000+05:30"},"updated":{"$t":"2016-01-27T23:18:40.404+05:30"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Client-side"},{"scheme":"http://www.blogger.com/atom/ns#","term":"HTML5"},{"scheme":"http://www.blogger.com/atom/ns#","term":"javascript"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WebApplications"}],"title":{"type":"text","$t":"Observe javascript variable changes"},"content":{"type":"html","$t":"\u003Cdiv dir=\"ltr\" style=\"text-align: left;\" trbidi=\"on\"\u003E\u003Ch3 style=\"text-align: left;\"\u003EIntroduction:            \u003C\/h3\u003E\u003Cdiv\u003E\u003Cbr \/\u003EThe most awaited recently launched chrome 36 browser has a unique feature called Object.Observe().If it is questioned like what is so unique about Object.Observe() then the answer would be given appropriately by a JavaScript developer.While developing websites or apps generally the code and the display is generally separated that is their structures are separated and when they are combined together and made to execute the display on the browser would not be as it is coded.With the help of JavaScript the user would get a WYSIWG (What you see is what you get) display based on exactly what the app is doing.Although Object.Observe() is a low-level API it solves several problems.  \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-5YxH8zyE4WM\/VqkCwJpYkWI\/AAAAAAAAC4c\/xZ0wL__OHA8\/s1600\/1364034584945.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"Observe javascript variable changes\" border=\"0\" height=\"225\" src=\"http:\/\/2.bp.blogspot.com\/-5YxH8zyE4WM\/VqkCwJpYkWI\/AAAAAAAAC4c\/xZ0wL__OHA8\/s400\/1364034584945.jpg\" title=\"\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003EWhat is object.observe() all about? \u003C\/b\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EObject.observe() is nothing but a low-level primitive and an enabling technology that makes some JavaScript libraries and frameworks work faster and robust.It simplifies the problem by acting as a pipeline between the app’s datastructure and display.  \u003Cbr \/\u003E\u003Cbr \/\u003EOne can simply state that Object.Observe() is simply a function that can simply be built into JavaScript though developers will not work on it directly but frameworks like backbone,Angular and Ember will add new libraries that will rely on Object.observe that will make the code and display in a proper sync.  \u003Cbr \/\u003E\u003Cbr \/\u003EObject.Observe() mainly follows a concept called as databinding which makes sure that the programs underlying code and the display are in a sync. \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003EWhat is databinding all about? \u003C\/b\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EAs we know that while devolping an application a developer makes use of a MVC architecture.If a ser wants to declare a relationship between the data and the document object model and if a user wants to keep the document object model up to date a databinding is used.Databinding is mainly useful when we have a complex user-interface wherein we need to establish relationships between multiple elements in the views and the underlying data.  \u003Cbr \/\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cstrong\u003EExample:\u003C\/strong\u003E  \u003Cbr \/\u003ELet’s create a sample object.  \u003Cbr \/\u003E\u003Cpre\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003E     var mysample = { \u003Cbr \/\u003E             label: 'hello', \u003Cbr \/\u003E             completed: false \u003Cbr \/\u003E          }; \u003Cbr \/\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003C\/div\u003EWhenever changes are made to the object a call back is issued.   \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cpre\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003E     function observing(changes){ \u003Cbr \/\u003E         changes.forEach(function(change, i){ \u003Cbr \/\u003E         console.log('what property  has changed? ' + change.name); \u003Cbr \/\u003E         console.log('how did it the property change? ' + change.type); \u003Cbr \/\u003E   console.log('whats the current value of the object? ' + change.object[change.name]); \u003Cbr \/\u003E        console.log(change); \/\/ all changes \u003Cbr \/\u003E        }); \u003Cbr \/\u003E    } \u003Cbr \/\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EWhen ever the call back function is used there is a change in the object multiple times so the changed values and the given values need not be the same thing. \u003Cbr \/\u003E\u003Cbr \/\u003EWe can then observe these changes using O.o(), passing in the object as our first argument and the callback as our second:  \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cpre\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003E       Object.observe(mysample, observing); \u003Cbr \/\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003Cbr \/\u003ESome changes to the model can be as follows   \u003Cbr \/\u003E\u003Cpre\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003E      mysample.label = 'I love databinding’; \u003Cbr \/\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003Cbr \/\u003EWe can change another property like this  \u003Cbr \/\u003E\u003Cpre\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003E      mysample.completeBy = '30\/09\/2014'; \u003Cbr \/\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003Cbr \/\u003EAfter some time if a user decides to delete the property completed from the object this can be done as follows-   \u003Cbr \/\u003E\u003Cpre\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003E     delete mysample.completed; \u003Cbr \/\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003Cbr \/\u003E\u003Cbr \/\u003ENow it is easy for a user to identify how to delete an object and how to add a new object.   \u003Cbr \/\u003E\u003Cpre\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003E     Object.unobserve();\u003Cbr \/\u003E\u003C\/code\u003E\u003C\/pre\u003EOnce this method is uses any changes made to the object will no longer result in a list of change records.   \u003Cbr \/\u003E\u003Cpre style=\"text-align: left;\"\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003E     Object.unobserve(mysample,observing); \u003Cbr \/\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003Cdiv\u003E\u003Ch3 style=\"text-align: left;\"\u003EConclusion:\u003C\/h3\u003E\u003Cbr \/\u003EWant to know more on what a Object.Observe() does?Have you ever noticed notifications on your phone and have you ever felt annoying ?Yes but some times these notifications tend to be useful and these can be implemented using Object.Observe().So go and check out how Object.Observe() makes all this.Since only chrome36 only supports Object.Observe() we should wait and see that all the other browsers all support this Object.Observe() to improve the performance in the browser display.Hopefully we will find a better and exciting observation ahead with Object.Observe().  \u003C\/div\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/kongaraju.blogspot.com\/feeds\/1187037905045567768\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2015\/07\/observe-javascript-variable-changes.html#comment-form","title":"0 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/1187037905045567768"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/1187037905045567768"},{"rel":"alternate","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2015\/07\/observe-javascript-variable-changes.html","title":"Observe javascript variable changes"}],"author":[{"name":{"$t":"Raju Konga"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/10750040862243953720"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"33","height":"30","src":"\/\/3.bp.blogspot.com\/-NRmd50o6VzU\/Xl0GJ89U5nI\/AAAAAAAAFvs\/hmFaD7EEWBktvdxCDKDS8PFdbVIiGTaBgCK4BGAYYCw\/s220\/latest_pic.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/2.bp.blogspot.com\/-5YxH8zyE4WM\/VqkCwJpYkWI\/AAAAAAAAC4c\/xZ0wL__OHA8\/s72-c\/1364034584945.jpg","height":"72","width":"72"},"thr$total":{"$t":"0"}},{"id":{"$t":"tag:blogger.com,1999:blog-1933328805824469647.post-9167795867938588992"},"published":{"$t":"2015-07-16T15:13:00.002+05:30"},"updated":{"$t":"2016-01-27T23:28:34.788+05:30"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"HTML5"},{"scheme":"http://www.blogger.com/atom/ns#","term":"javascript"},{"scheme":"http://www.blogger.com/atom/ns#","term":"media"},{"scheme":"http://www.blogger.com/atom/ns#","term":"media source api"},{"scheme":"http://www.blogger.com/atom/ns#","term":"stream"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WebApplications"}],"title":{"type":"text","$t":"Javascript getUserMedia API"},"content":{"type":"html","$t":"\u003Cdiv dir=\"ltr\" style=\"text-align: left;\" trbidi=\"on\"\u003E\u003Ch3 style=\"text-align: left;\"\u003ECapturing Audio and Video in HTML5:\u0026nbsp;\u003C\/h3\u003E\u003Cbr \/\u003EEarlier were the days when internet started that people started using chat as a medium of communication in the mid 90's. People used to capture audio or video and then send it over the internet.These features required the use of plugins like flash and Silverlight and these two had certain technical problems. \u003Cbr \/\u003E\u003Cbr \/\u003EWith the emergence of WebRTC  the plugins has made its way out. One of the API that is derived from WebRTC is getUserMedia API.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-WipQxFd6Xzo\/VqkFGVm3rjI\/AAAAAAAAC4o\/DdcdHrQiwSw\/s1600\/ca04f021c6284e88e0c6de3da4502c74.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"Javascript getUserMedia API\" border=\"0\" height=\"196\" src=\"http:\/\/2.bp.blogspot.com\/-WipQxFd6Xzo\/VqkFGVm3rjI\/AAAAAAAAC4o\/DdcdHrQiwSw\/s400\/ca04f021c6284e88e0c6de3da4502c74.jpg\" title=\"\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Ch4 style=\"text-align: left;\"\u003E\u0026nbsp;Get started with getUserMedia API:\u003C\/h4\u003E\u003Cbr \/\u003ESeveral multimedia streams such as video, audio and both can be accessed from local devices.The users need not use additional plugins to access the video or audio.It helps the non-technical user to use the software without any additional plugins.However this API allows users to acquire the video and audio without having to send the data or storing it in a file.  This API uses one method called as method.getUserMedia() which belongs to the window.navigator object.\u003Cbr \/\u003E\u003Cbr \/\u003ESyntax :   \u003Cbr \/\u003E\u003Cpre style=\"text-align: left;\"\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003E   navigator.getUserMedia(constraints,successCallback,errorCallback); \u003Cbr \/\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003Ch4 style=\"text-align: left;\"\u003EConstraints:\u0026nbsp;\u003C\/h4\u003E\u003Cbr \/\u003EIt has a constraints parameter which is an object that has two properties called audio and video.  The properties contain two values true and false. True means to request the stream and false means do not request the stream.\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026nbsp;Example: to request only video the parameter is as follows  \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cpre\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003E    { \u003Cbr \/\u003E        Video:true, \u003Cbr \/\u003E        Audio:false \u003Cbr \/\u003E     } \u003Cbr \/\u003E\u003C\/code\u003E\u003C\/pre\u003EExample -2:  If the user wants a high resolution of 1280x720 of both audio and video and if the frame rate is 30 and if we want a frame rate of 60 then the following code could be used  \u003Cbr \/\u003E\u003Cpre style=\"text-align: left;\"\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003E    { \u003Cbr \/\u003E        video:{ \u003Cbr \/\u003E            mandatory:{ \u003Cbr \/\u003E                 minWidth:1280, \u003Cbr \/\u003E                 minHeight:720, \u003Cbr \/\u003E                 minFrameRate:30 \u003Cbr \/\u003E            }, \u003Cbr \/\u003E            optional:[{minFrameRate :60}] \u003Cbr \/\u003E         }, \u003Cbr \/\u003E         audio:true \u003Cbr \/\u003E     }\u003Cbr \/\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003Ch4 style=\"text-align: left;\"\u003EsuccessCallback:\u003C\/h4\u003E\u003Cbr \/\u003EThe function on the calling application to invoke when passing the LocalMediaStream object. The getUserMedia() will call the successCallback using the LocalMediaStream object.\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026nbsp;Example :   \u003Cbr \/\u003E\u003Cpre style=\"text-align: left;\"\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003E     function(localMediaStream) { \u003Cbr \/\u003E          var myvideo=document.querySelector(‘video’); \u003Cbr \/\u003E          myvideo.src=window.URL.createObjectURL(localMediaStream); \u003Cbr \/\u003E          myvideo.onloadedmetadata=function() { \u003Cbr \/\u003E                 \/\/play or do something with the video. \u003Cbr \/\u003E          };\u003Cbr \/\u003E     },  \u003Cbr \/\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003Ch4 style=\"text-align: left;\"\u003E\u003C\/h4\u003E\u003Ch4 style=\"text-align: left;\"\u003EerrorCallBack:\u0026nbsp;\u003C\/h4\u003E\u003Cbr \/\u003EThe getUserMedia() function will call the function called as errorCallback with error codes as follows-\u003Cbr \/\u003E\u003Ci\u003EPermission_denied:\u003C\/i\u003E The user is denied the permission to use a media device required for the \u003Ci\u003Eoperation.    Not_supported_error:\u003C\/i\u003E A constraint specified is not supported by the browser.    \u003Ci\u003EMandatory_unsatisfied_error:\u003C\/i\u003E If no media tracks of the type specified in the constraints are found an error occurs.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch4 style=\"text-align: left;\"\u003E\u0026nbsp;To get permissions:\u003C\/h4\u003E\u003Cbr \/\u003ETo get getUserMedia() installable on the app the following code should be embedded inside the file-   \u003Cbr \/\u003E\u003Cpre style=\"text-align: left;\"\u003E\u003Ccode class=\"language-javascript\"\u003E\u003Cbr \/\u003E      “permissions”:{ \u003Cbr \/\u003E            “audio-capture”:{ \u003Cbr \/\u003E                  “description”:”required to capture audio via getUserMedia” \u003Cbr \/\u003E              } \u003Cbr \/\u003E        } \u003C\/code\u003E\u003C\/pre\u003E\u003Ch4 style=\"text-align: left;\"\u003E\u003C\/h4\u003E\u003Ch4 style=\"text-align: left;\"\u003ECompatibility of the browser:\u0026nbsp;\u003C\/h4\u003E\u003Cbr \/\u003EThe getUserMedia() API is supported by the desktop browser but it’s performance of mobile browser is poor.The current browsers that support this API are Chrome, Opera and Firefox.Some browsers also have a security issue such that upon calling the getUserMedia()  API, the browsers  give an option to the user saying that the user can grant\/deny access to the camera\/mic.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3 style=\"text-align: left;\"\u003EConclusion:\u003C\/h3\u003E\u003Cbr \/\u003EThe getUserAPI() derived from WebRTC project has worked wonders in making web applications successful.This API is very flexible allowing user to select its own parameters such as the audio and the video streams.The compatibility among the browsers is not very good but it would increase eventually.     \u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/kongaraju.blogspot.com\/feeds\/9167795867938588992\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2015\/07\/javascript-getusermedia-api.html#comment-form","title":"0 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/9167795867938588992"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/9167795867938588992"},{"rel":"alternate","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2015\/07\/javascript-getusermedia-api.html","title":"Javascript getUserMedia API"}],"author":[{"name":{"$t":"Raju Konga"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/10750040862243953720"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"33","height":"30","src":"\/\/3.bp.blogspot.com\/-NRmd50o6VzU\/Xl0GJ89U5nI\/AAAAAAAAFvs\/hmFaD7EEWBktvdxCDKDS8PFdbVIiGTaBgCK4BGAYYCw\/s220\/latest_pic.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/2.bp.blogspot.com\/-WipQxFd6Xzo\/VqkFGVm3rjI\/AAAAAAAAC4o\/DdcdHrQiwSw\/s72-c\/ca04f021c6284e88e0c6de3da4502c74.jpg","height":"72","width":"72"},"thr$total":{"$t":"0"}},{"id":{"$t":"tag:blogger.com,1999:blog-1933328805824469647.post-8383468949507560897"},"published":{"$t":"2015-07-16T15:11:00.001+05:30"},"updated":{"$t":"2016-01-27T23:46:28.841+05:30"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Custom Elements"},{"scheme":"http://www.blogger.com/atom/ns#","term":"HTML5"},{"scheme":"http://www.blogger.com/atom/ns#","term":"javascript"}],"title":{"type":"text","$t":"HTML5 Custom Elements (Web Components)"},"content":{"type":"html","$t":"\u003Cdiv dir=\"ltr\" style=\"text-align: left;\" trbidi=\"on\"\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Ch3 style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; text-align: left; vertical-align: baseline; white-space: pre; word-wrap: break-word;\"\u003E\u003Cspan class=\"LineBreakBlob BlobObject SCX5587200\" style=\"font-family: inherit; line-height: 20px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; line-height: 16px; margin: 0px; padding: 0px;\" xml:lang=\"EN-US\"\u003EIntroduction:\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; line-height: 16px; margin: 0px; padding: 0px;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/h3\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{2f58e17e-abe4-4424-80fe-9131906ed2e8}{199}\" paraid=\"666972339\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003EIf you have ever heard of the web and the components that make up the\u0026nbsp;\u003C\/span\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003Eweb, the\u003C\/span\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003E\u0026nbsp;elements that are going to bring about the change in the web technologies they \u0026nbsp;are \u0026nbsp;the ‘WEB\u0026nbsp;\u003C\/span\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003ECOMPONENTS'. Web\u003C\/span\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003E\u0026nbsp;components are a combination of several connected technologies that make the elements reusable across the web.Until now the\u0026nbsp; web was revolving around Shadow DOM but now the there is transformation to the whole new concept called ‘Custom Elements’ wherein a user can\u0026nbsp;\u003C\/span\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003Ecreate, define\u003C\/span\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003E\u0026nbsp;his own elements and its properties as well as\u0026nbsp;\u003C\/span\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003Ebehavio\u003C\/span\u003E\u003C\/span\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003Er\u003C\/span\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003E.\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-fMW6vNnGhe4\/VqkJLvRxS8I\/AAAAAAAAC40\/xbYMRKKHthQ\/s1600\/eXETdK-d_vgDbSBes4gYhw_chromo.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"107\" src=\"http:\/\/4.bp.blogspot.com\/-fMW6vNnGhe4\/VqkJLvRxS8I\/AAAAAAAAC40\/xbYMRKKHthQ\/s400\/eXETdK-d_vgDbSBes4gYhw_chromo.png\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{2f58e17e-abe4-4424-80fe-9131906ed2e8}{203}\" paraid=\"138610721\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003E\u003Cb\u003E\u003Ci\u003EWhat is this Custom Element all about?\u003C\/i\u003E\u003C\/b\u003E\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{2f58e17e-abe4-4424-80fe-9131906ed2e8}{205}\" paraid=\"914171441\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003E\u003Cspan class=\"SpellingError SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; background-image: url(\u0026quot;data:image\/gif; background-position: 0% 100%; background-repeat: repeat-x; border-bottom-color: transparent; border-bottom-style: solid; border-bottom-width: 1px; margin: 0px; padding: 0px;\"\u003EInspite\u003C\/span\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003E\u0026nbsp;of the existing HTML tags such as \u0026lt;img\u0026gt;,\u0026lt;pre\u0026gt;,\u0026lt;video\u0026gt; \u0026lt;select\u0026gt; ,HTML5 gives us an opportunity to create our own tags and just use them as any other tag in the web application and \u0026nbsp;get the result we desire.\u003C\/span\u003E\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{2f58e17e-abe4-4424-80fe-9131906ed2e8}{207}\" paraid=\"1165339558\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cb\u003E\u003Ci\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003EThen how to create these Custom Elements ?\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/i\u003E\u003C\/b\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{2f58e17e-abe4-4424-80fe-9131906ed2e8}{209}\" paraid=\"438896272\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003EWhen creating the custom elements we should make sure that we are not clashing with the existing or future HTML elements.\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{2f58e17e-abe4-4424-80fe-9131906ed2e8}{213}\" paraid=\"1367975696\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cb\u003E\u003Ci\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003EThen what is the solution?\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/i\u003E\u003C\/b\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{2f58e17e-abe4-4424-80fe-9131906ed2e8}{215}\" paraid=\"773447206\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003EJust define your custom element and put a hyphen\u0026nbsp;\u003C\/span\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003Esome\u003C\/span\u003E\u003C\/span\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003Ewhere\u003C\/span\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003E\u0026nbsp;in the name.\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{2f58e17e-abe4-4424-80fe-9131906ed2e8}{232}\" paraid=\"992346327\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun EmptyTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003E\u003C\/span\u003E\u003Cspan class=\"LineBreakBlob BlobObject SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u003Cspan class=\"SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; margin: 0px; padding: 0px;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003E\u003Ci\u003EExample:\u003C\/i\u003E \u003Cb\u003E\u0026lt;\u003C\/b\u003E\u003C\/span\u003E\u003Cb\u003E\u003Cspan class=\"SpellingError SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; background-image: url(\u0026quot;data:image\/gif; background-position: 0% 100%; background-repeat: repeat-x; border-bottom-color: transparent; border-bottom-style: solid; border-bottom-width: 1px; margin: 0px; padding: 0px;\"\u003Emypersonal\u003C\/span\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003E-app\u0026gt; ........... \u0026lt;\/\u003C\/span\u003E\u003Cspan class=\"SpellingError SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; background-image: url(\u0026quot;data:image\/gif; background-position: 0% 100%; background-repeat: repeat-x; border-bottom-color: transparent; border-bottom-style: solid; border-bottom-width: 1px; margin: 0px; padding: 0px;\"\u003Emypersonal\u003C\/span\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003E-app\u0026gt;\u003C\/span\u003E\u003C\/b\u003E\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u003Cb\u003E\u0026nbsp;\u003C\/b\u003E\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{2f58e17e-abe4-4424-80fe-9131906ed2e8}{238}\" paraid=\"436020756\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003EOnce the element is decided we need to register it on the\u0026nbsp;\u003C\/span\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003EDOM, by\u003C\/span\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003E\u0026nbsp;passing the element as an argument to the JavaScript method called as registerElement()\u003C\/span\u003E\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{2f58e17e-abe4-4424-80fe-9131906ed2e8}{252}\" paraid=\"1331492294\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun EmptyTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003E\u003C\/span\u003E\u003Cspan class=\"LineBreakBlob BlobObject SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u003Cspan class=\"SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; margin: 0px; padding: 0px;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003E\u003Ci\u003EExample:\u003C\/i\u003E \u003Cb\u003Edocument.registerElement(‘mypersonal-app’);\u003C\/b\u003E\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{5}\" paraid=\"780909413\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003EAnd now the DOM recognizes the newly defined custom element.\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{7}\" paraid=\"1255660018\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003ECustom elements are basically classified into two interfaces –\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{11}\" paraid=\"803729190\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; margin-left: 24px; padding: 0px; text-indent: -24px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003C\/div\u003E\u003Col style=\"text-align: left;\"\u003E\u003Cli\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"background-color: transparent; font-family: \u0026quot;verdana\u0026quot; , sans-serif; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003E\u003Ci\u003EHTMLUnknownElement\u003C\/i\u003E\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"background-color: transparent; font-family: \u0026quot;verdana\u0026quot; , sans-serif; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u003Ci\u003E\u0026nbsp;\u003C\/i\u003E\u003C\/span\u003E\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Ci\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"background-color: transparent; font-family: \u0026quot;verdana\u0026quot; , sans-serif; line-height: 16px; margin: 0px; padding: 0px;\" xml:lang=\"EN-US\"\u003EHTMLElement\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"background-color: transparent; font-family: \u0026quot;verdana\u0026quot; , sans-serif; line-height: 16px; margin: 0px; padding: 0px;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/i\u003E\u003C\/li\u003E\u003C\/ol\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{17}\" paraid=\"316456138\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003EThe former elements are those that are not registered and\u0026nbsp; not recognized by the DOM\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{19}\" paraid=\"1079767717\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003EThe latter elements are those that are registered and recognized by the DOM.\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{21}\" paraid=\"1960828701\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003EIt is possible to add our own properties and methods to a\u0026nbsp;\u003C\/span\u003E\u003Cspan class=\"SpellingError SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; background-image: url(\u0026quot;data:image\/gif; background-position: 0% 100%; background-repeat: repeat-x; border-bottom-color: transparent; border-bottom-style: solid; border-bottom-width: 1px; margin: 0px; padding: 0px;\"\u003EHTMLElement\u003C\/span\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003E. It means that every custom tag can have its own API.\u003C\/span\u003E\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{23}\" paraid=\"1541042946\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003ETo start up with this we need to initially define a new\u0026nbsp;\u003C\/span\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003Eprototype\u0026nbsp;\u003C\/span\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003Eand then add the properties and methods to it.\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{26}\" paraid=\"1687853184\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003ELet us start up with an example by creating a new method called as\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{28}\" paraid=\"404929295\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003Efume()\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{931bc2be-a94d-49d1-b58e-5cb285970e08}{102}\" paraid=\"729518241\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{931bc2be-a94d-49d1-b58e-5cb285970e08}{92}\" paraid=\"992019517\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; margin-left: 9px; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cb\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003Evar\u0026nbsp;\u003C\/span\u003E\u003Cspan class=\"SpellingError SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; background-image: url(\u0026quot;data:image\/gif; background-position: 0% 100%; background-repeat: repeat-x; border-bottom-color: transparent; border-bottom-style: solid; border-bottom-width: 1px; margin: 0px; padding: 0px;\"\u003EperProto\u003C\/span\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003E=Object.create(HTMLElement.prototype);\u003C\/span\u003E\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/b\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{931bc2be-a94d-49d1-b58e-5cb285970e08}{94}\" paraid=\"2027163339\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; margin-left: 9px; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cb\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003EperProto.fume=function() {\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/b\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{931bc2be-a94d-49d1-b58e-5cb285970e08}{96}\" paraid=\"409750047\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; margin-left: 9px; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cb\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp;console.log(‘my first custom element’);\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/b\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{931bc2be-a94d-49d1-b58e-5cb285970e08}{98}\" paraid=\"2123760948\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; margin-left: 9px; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003E\u003Cb\u003E}\u003C\/b\u003E\u003C\/span\u003E\u003Cspan class=\"LineBreakBlob BlobObject SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u003Cspan class=\"SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; margin: 0px; padding: 0px;\"\u003E\u003Cb\u003E\u0026nbsp;\u003C\/b\u003E\u003C\/span\u003E\u003C\/span\u003E\u003Cspan class=\"TextRun EmptyTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 20px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003E\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 20px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{62}\" paraid=\"1640337624\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003EThis method logs a message to the console.\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{64}\" paraid=\"1203957425\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003EIn the next step we need to register the\u0026nbsp;\u003C\/span\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003Eelement, stating\u003C\/span\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003E\u0026nbsp;that it should use our newly defined prototype\u003C\/span\u003E\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{78}\" paraid=\"1421131406\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun EmptyTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003E\u003C\/span\u003E\u003Cspan class=\"LineBreakBlob BlobObject SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u003Cspan class=\"SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; margin: 0px; padding: 0px;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003E\u003Cb\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; document.registerElement(‘mypersonal-app’,{prototype:perProto});\u003C\/b\u003E\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{78}\" paraid=\"1421131406\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"font-family: inherit; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{80}\" paraid=\"108625514\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"font-family: inherit; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003EOnce this is\u0026nbsp;\u003C\/span\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003Edone, you\u003C\/span\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003E\u0026nbsp;can query your element in the DOM and call the method.\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{80}\" paraid=\"108625514\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{82}\" paraid=\"872912161\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cb\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;var pers=document.querySelector(‘\u003C\/span\u003E\u003Cspan class=\"SpellingError SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; background-image: url(\u0026quot;data:image\/gif; background-position: 0% 100%; background-repeat: repeat-x; border-bottom-color: transparent; border-bottom-style: solid; border-bottom-width: 1px; margin: 0px; padding: 0px;\"\u003Emypersonal\u003C\/span\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003E-app’);\u003C\/span\u003E\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/b\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{84}\" paraid=\"1168059533\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cb\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;pers.fume();\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/b\u003E\u003C\/div\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{84}\" paraid=\"1168059533\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cb\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"font-family: inherit; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/b\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{88}\" paraid=\"1404385818\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Ci\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003EExtending\u0026nbsp;\u003C\/span\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003EExis\u003C\/span\u003E\u003C\/span\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003Eting\u003C\/span\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003E\u0026nbsp;elements to be used in this API:\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/i\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{90}\" paraid=\"806934182\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003EA user can use the existing HTML elements and use it in this API.Like if I want to extend the \u0026lt;img\u0026gt;\u0026nbsp;\u003C\/span\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003Eelement, I\u003C\/span\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003E\u0026nbsp;can do it in this way-\u003C\/span\u003E\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{92}\" paraid=\"83547514\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{931bc2be-a94d-49d1-b58e-5cb285970e08}{128}\" paraid=\"1495262867\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; margin-left: 10px; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cb\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;document.registerElement(‘mypersonal-app’,{\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/b\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{931bc2be-a94d-49d1-b58e-5cb285970e08}{130}\" paraid=\"1445574351\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; margin-left: 10px; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cb\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; prototype:\u003C\/span\u003E\u003Cspan class=\"SpellingError SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; background-image: url(\u0026quot;data:image\/gif; background-position: 0% 100%; background-repeat: repeat-x; border-bottom-color: transparent; border-bottom-style: solid; border-bottom-width: 1px; margin: 0px; padding: 0px;\"\u003EperProto\u003C\/span\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003E,\u003C\/span\u003E\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/b\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{931bc2be-a94d-49d1-b58e-5cb285970e08}{132}\" paraid=\"562809287\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; margin-left: 10px; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cb\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; extends:’img’\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/b\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{931bc2be-a94d-49d1-b58e-5cb285970e08}{134}\" paraid=\"1729050940\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; margin-left: 10px; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003E\u003Cb\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;});\u003C\/b\u003E\u003C\/span\u003E\u003Cspan class=\"LineBreakBlob BlobObject SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u003Cspan class=\"SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; margin: 0px; padding: 0px;\"\u003E\u003Cb\u003E\u0026nbsp;\u003C\/b\u003E\u003C\/span\u003E\u003C\/span\u003E\u003Cspan class=\"TextRun EmptyTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 20px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003E\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 20px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{114}\" paraid=\"2130779077\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003EThe extends argument states that the custom element intends to use the\u0026nbsp;\u003C\/span\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003Eimg\u003C\/span\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003E\u0026nbsp;element\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{129}\" paraid=\"1189101928\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun EmptyTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003E\u003C\/span\u003E\u003Cspan class=\"LineBreakBlob BlobObject SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u003Cspan class=\"SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; margin: 0px; padding: 0px;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003Cb\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026lt;img is=”\u003C\/span\u003E\u003Cspan class=\"SpellingError SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; background-image: url(\u0026quot;data:image\/gif; background-position: 0% 100%; background-repeat: repeat-x; border-bottom-color: transparent; border-bottom-style: solid; border-bottom-width: 1px; margin: 0px; padding: 0px;\"\u003Emypersonal\u003C\/span\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003E-app”\u0026gt;...\u0026lt;\/img\u0026gt;\u003C\/span\u003E\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{931bc2be-a94d-49d1-b58e-5cb285970e08}{141}\" paraid=\"1057708743\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{137}\" paraid=\"216632207\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003ENow DOM has to be informed that the img element wants to be\u0026nbsp;\u003C\/span\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003Eextended, using\u003C\/span\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003E\u0026nbsp;the\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003Eis\u0026nbsp;\u003C\/span\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003Eattribute\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{139}\" paraid=\"866988223\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{141}\" paraid=\"475561089\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003ENow this img element can have its own API.\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{143}\" paraid=\"1913323025\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{145}\" paraid=\"1779643488\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"font-family: inherit; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003E\u003Ci\u003ESome more specialities of Custom Elements:\u003C\/i\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{147}\" paraid=\"1595540109\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"font-family: inherit; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003EA set of callback events are fired throughout the life cycle of custom elements such as\u0026nbsp;\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Col style=\"text-align: left;\"\u003E\u003Cli\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"background-color: transparent; font-family: \u0026quot;verdana\u0026quot; , sans-serif; line-height: 16px; margin: 0px; padding: 0px;\" xml:lang=\"EN-US\"\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003E\u003Ci\u003EcreatedCallback:\u003C\/i\u003E It\u003C\/span\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003E\u0026nbsp;is fired when an element is created\u003C\/span\u003E\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"background-color: transparent; font-family: \u0026quot;verdana\u0026quot; , sans-serif; line-height: 16px; margin: 0px; padding: 0px;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"background-color: transparent; font-family: \u0026quot;verdana\u0026quot; , sans-serif; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003E\u003Ci\u003EattachedCallback:\u003C\/i\u003E It\u003C\/span\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003E\u0026nbsp;is fired when an element is attached to the DOM\u003C\/span\u003E\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"background-color: transparent; font-family: \u0026quot;verdana\u0026quot; , sans-serif; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"background-color: transparent; font-family: \u0026quot;verdana\u0026quot; , sans-serif; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003E\u003Ci\u003EdetachedCallback:\u003C\/i\u003E It\u003C\/span\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003E\u0026nbsp;is fired when an element is detached from the DOM\u003C\/span\u003E\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"background-color: transparent; font-family: \u0026quot;verdana\u0026quot; , sans-serif; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"background-color: transparent; font-family: \u0026quot;verdana\u0026quot; , sans-serif; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003E\u003Ci\u003EattributeChangedCallback:\u003C\/i\u003E It\u003C\/span\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003E\u0026nbsp;is fired when an element is changed\u003C\/span\u003E\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"background-color: transparent; font-family: \u0026quot;verdana\u0026quot; , sans-serif; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/li\u003E\u003C\/ol\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{159}\" paraid=\"207515802\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003ETo run an anonymous function each time a new instance of custom tag is created in a page\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{159}\" paraid=\"207515802\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"font-family: inherit; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{173}\" paraid=\"1056313328\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cb\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;perProto\u003C\/span\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003E.\u003C\/span\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003EcreatedCallback\u003C\/span\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003E=function()\u0026nbsp; {....};\u003C\/span\u003E\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/b\u003E\u003C\/div\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{173}\" paraid=\"1056313328\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"font-family: inherit; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{175}\" paraid=\"100933206\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cb\u003E\u003Ci\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003EDo custom elements work with other Web Components?\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/i\u003E\u003C\/b\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{177}\" paraid=\"1371954717\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003ECustom elements have been completely designed to be interoperable with other features of the web components suite.\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{177}\" paraid=\"1371954717\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"font-family: inherit; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{187}\" paraid=\"257712613\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003EFor example one can include :\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"background-color: transparent; font-family: \u0026quot;verdana\u0026quot; , sans-serif; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003Etemplate \u0026nbsp;\u003C\/span\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"background-color: transparent; font-family: \u0026quot;verdana\u0026quot; , sans-serif; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003Eelement\u0026nbsp; such as\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"background-color: transparent; font-family: \u0026quot;verdana\u0026quot; , sans-serif; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{187}\" paraid=\"257712613\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"background-color: transparent; font-family: inherit; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{931bc2be-a94d-49d1-b58e-5cb285970e08}{168}\" paraid=\"222067978\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; margin-left: 10px; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cb\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026lt;\u003C\/span\u003E\u003Cspan class=\"SpellingError SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; background-image: url(\u0026quot;data:image\/gif; background-position: 0% 100%; background-repeat: repeat-x; border-bottom-color: transparent; border-bottom-style: solid; border-bottom-width: 1px; margin: 0px; padding: 0px;\"\u003Emypersonal\u003C\/span\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003E-app\u0026gt;\u003C\/span\u003E\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/b\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{931bc2be-a94d-49d1-b58e-5cb285970e08}{170}\" paraid=\"2023521268\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; margin-left: 10px; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cb\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"font-family: inherit; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026lt;template\u0026gt;...\u0026lt;\/template\u0026gt;\u003C\/span\u003E\u003C\/b\u003E\u003C\/div\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{931bc2be-a94d-49d1-b58e-5cb285970e08}{170}\" paraid=\"2023521268\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; margin-left: 10px; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cb\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026lt;\/\u003C\/span\u003E\u003Cspan class=\"SpellingError SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; background-image: url(\u0026quot;data:image\/gif; background-position: 0% 100%; background-repeat: repeat-x; border-bottom-color: transparent; border-bottom-style: solid; border-bottom-width: 1px; margin: 0px; padding: 0px;\"\u003Emypersonal\u003C\/span\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003E-app\u0026gt;\u003C\/span\u003E\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/b\u003E\u003C\/div\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{931bc2be-a94d-49d1-b58e-5cb285970e08}{170}\" paraid=\"2023521268\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; margin-left: 10px; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"font-family: inherit; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{207}\" paraid=\"1222151721\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003EOne can be ensured that the entire internal code is hidden by using shadow DOM and sharing across multiple websites is possible using HTML imports statement\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{207}\" paraid=\"1222151721\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"font-family: inherit; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{211}\" paraid=\"2032057356\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Ci\u003E\u003Cb\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003EWhich browsers support these custom elements:\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/b\u003E\u003C\/i\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{213}\" paraid=\"755233843\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003EThe chrome (version 33+) and Opera have made its way in displaying the custom elements in more efficient way.\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Ch3 style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; text-align: left; vertical-align: baseline; white-space: pre; word-wrap: break-word;\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003EConclusion:\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/h3\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{221}\" paraid=\"1379509193\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003EHere in this article we have seen how our own custom elements can be created and then used on the web just like\u0026nbsp;\u003C\/span\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003Eany other\u003C\/span\u003E\u003Cspan class=\"NormalTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: inherit; margin: 0px; padding: 0px;\"\u003E\u0026nbsp;HTML elements.This custom elements carves a niche for itself for future\u003C\/span\u003E\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{223}\" paraid=\"1246729492\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003EWeb applications.With the use of shadow DOM and HTML it is going to make it’s \u0026nbsp;way through the development of the front-end web development application in a great way.\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{225}\" paraid=\"174659965\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003ESo guys! Get yourself started to use them in your web applications\u0026nbsp; and bring in\u0026nbsp; a revolution in web development .\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{227}\" paraid=\"1214667500\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\" xml:lang=\"EN-US\"\u003EOther links:\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{227}\" paraid=\"1214667500\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"font-family: inherit; line-height: 16px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{229}\" paraid=\"418342607\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun EmptyTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 20px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u003C\/span\u003E\u003Ca class=\"Hyperlink SCX5587200\" href=\"http:\/\/www.html5rocks.com\/en\/tutorials\/webcomponents\/customelements\/\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; cursor: text; margin: 0px; padding: 0px; text-decoration: none; white-space: normal;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"color: blue; line-height: 16px; margin: 0px; padding: 0px;\" xml:lang=\"EN-US\"\u003EHTML5 Rocks Web Components\u003C\/span\u003E\u003C\/a\u003E\u003Cspan class=\"TextRun EmptyTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 20px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 20px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{237}\" paraid=\"1782773246\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun EmptyTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 20px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u003C\/span\u003E\u003Ca class=\"Hyperlink SCX5587200\" href=\"http:\/\/customelements.io\/\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; cursor: text; margin: 0px; padding: 0px; text-decoration: none; white-space: normal;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"color: blue; line-height: 16px; margin: 0px; padding: 0px;\" xml:lang=\"EN-US\"\u003ECustomElements.IO\u003C\/span\u003E\u003C\/a\u003E\u003Cspan class=\"TextRun EmptyTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 20px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 20px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{430d0565-792d-4031-b1c8-d504b54630c6}{239}\" paraid=\"896626976\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cspan style=\"font-family: inherit;\"\u003E\u003Cspan class=\"TextRun EmptyTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 20px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u003C\/span\u003E\u003Ca class=\"Hyperlink SCX5587200\" href=\"http:\/\/blog.teamtreehouse.com\/create-custom-html-elements-2\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; cursor: text; margin: 0px; padding: 0px; text-decoration: none; white-space: normal;\"\u003E\u003Cspan class=\"TextRun SCX5587200\" style=\"color: blue; line-height: 16px; margin: 0px; padding: 0px;\" xml:lang=\"EN-US\"\u003Ehttp:\/\/blog.teamtreehouse.com\/create-custom-html-elements-2\u003C\/span\u003E\u003C\/a\u003E\u003Cspan class=\"TextRun EmptyTextRun SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 20px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u003C\/span\u003E\u003Cspan class=\"EOP SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; line-height: 20px; margin: 0px; padding: 0px; white-space: normal;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv class=\"OutlineElement Ltr SCX5587200\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: white; clear: both; cursor: text; direction: ltr; margin: 0px; overflow: visible; padding: 0px; position: relative;\"\u003E\u003Cdiv class=\"Paragraph SCX5587200\" paraeid=\"{2f58e17e-abe4-4424-80fe-9131906ed2e8}{193}\" paraid=\"2035255865\" style=\"-webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-user-select: text; background-color: transparent; color: windowtext; padding: 0px; vertical-align: baseline; white-space: pre; word-wrap: break-word;\" xml:lang=\"EN-US\"\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003C\/div\u003E\u003C\/div\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/kongaraju.blogspot.com\/feeds\/8383468949507560897\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2015\/07\/html5-custom-elements-web-components.html#comment-form","title":"0 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/8383468949507560897"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/8383468949507560897"},{"rel":"alternate","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2015\/07\/html5-custom-elements-web-components.html","title":"HTML5 Custom Elements (Web Components)"}],"author":[{"name":{"$t":"Raju Konga"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/10750040862243953720"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"33","height":"30","src":"\/\/3.bp.blogspot.com\/-NRmd50o6VzU\/Xl0GJ89U5nI\/AAAAAAAAFvs\/hmFaD7EEWBktvdxCDKDS8PFdbVIiGTaBgCK4BGAYYCw\/s220\/latest_pic.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/4.bp.blogspot.com\/-fMW6vNnGhe4\/VqkJLvRxS8I\/AAAAAAAAC40\/xbYMRKKHthQ\/s72-c\/eXETdK-d_vgDbSBes4gYhw_chromo.png","height":"72","width":"72"},"thr$total":{"$t":"0"}},{"id":{"$t":"tag:blogger.com,1999:blog-1933328805824469647.post-2097487532317062537"},"published":{"$t":"2015-07-16T14:58:00.000+05:30"},"updated":{"$t":"2016-01-27T23:48:14.525+05:30"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Client-side"},{"scheme":"http://www.blogger.com/atom/ns#","term":"HTML5"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Index DB"},{"scheme":"http://www.blogger.com/atom/ns#","term":"javascript"},{"scheme":"http://www.blogger.com/atom/ns#","term":"local storage"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Storage"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WebApplications"},{"scheme":"http://www.blogger.com/atom/ns#","term":"websql"}],"title":{"type":"text","$t":"HTML5 Client-side storage solutions"},"content":{"type":"html","$t":"\u003Cdiv dir=\"ltr\" style=\"text-align: left;\" trbidi=\"on\"\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Ch3 style=\"text-align: left;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , serif; font-size: 14pt;\"\u003EIntroduction:\u003C\/span\u003E\u003C\/h3\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003ESince we are all aware that the data is usually stored on the server,we have a yet another unique feature that lets the user to store the data in the client side using several different API’s such as web storage, webSQL Database,Indexed Database and File hard drive.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-qXB1TgVYoQg\/VqkJz6JdhgI\/AAAAAAAAC48\/bWMaDrBfB6c\/s1600\/goldbars-k6U--621x414%2540LiveMint.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"HTML5 Client-side storage solutions\" border=\"0\" height=\"266\" src=\"http:\/\/4.bp.blogspot.com\/-qXB1TgVYoQg\/VqkJz6JdhgI\/AAAAAAAAC48\/bWMaDrBfB6c\/s400\/goldbars-k6U--621x414%2540LiveMint.jpg\" title=\"\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003EReasons to use a client side storage rather than the server side-\u003C\/span\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Col style=\"text-align: left;\"\u003E\u003Cli\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003ETo make the web app available offline\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003ETo improve the performance\u003C\/span\u003E\u003C\/li\u003E\u003C\/ol\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Ch3 style=\"text-align: left;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003EThe Features \u003C\/span\u003E\u003C\/h3\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Ci\u003EClient side storage device:\u003C\/i\u003E\u003C\/span\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E \u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003EThe main aim of client-side storage is that the data is passed to the browser’s storage API which saves the data on the local device as it stores preferences and cache.One can not only save the data this API also lets the user to retrieve data and perform searching and manipulation.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Ci\u003ESandBoxed:\u003C\/i\u003E\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003EAll the four storage API’s put the data in a single location .\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003EExample :\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003EIf the url \u003C\/span\u003E\u003Ca href=\"http:\/\/myweb.mypage.com\/\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003Ehttp:\/\/myweb.mypage.com\u003C\/span\u003E\u003C\/a\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E saves some data then the browser will only permit the same domain to\u0026nbsp; access the data in future.Here the domains as well as the port number should also match for access of the data that is stored.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Ci\u003EQuotas:\u003C\/i\u003E\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003ETo get to know how much space can be used in the browser quotas is used.The browsers impose limits on storage capacity.When the app attempts to exceed that limit the browser will show the dialog to let the user confirm the increase.In some environments the users can see before hand how much data is being used for example like the chrome webstore.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Ci\u003ETransactions:\u003C\/i\u003E\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003EBoth client side storage and server side storage formats support transactions.Transactions prevent race conditions wherein two sequences of operations are applied to the database at the same time leading to results that are unpredictable.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Ci\u003ESynchronous and Asynchronous modes:\u003C\/i\u003E\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003EIn synchronous mode first the storage happens then the javascript code gets executed,but whereas in asynchronous mode the javascript code gets executed and then the storage happens.However synchronous mode should be avoided at all costs,because it blocks the rendering on the page and sometimes freezes the browser.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Ch3 style=\"text-align: left;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003EDifferent\u0026nbsp;\u003C\/span\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , serif; font-size: 18.6667px;\"\u003Eclient-side storage\u003C\/span\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , serif; font-size: 14pt;\"\u003E\u0026nbsp;API’S\u003C\/span\u003E\u003C\/h3\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Ci\u003ELocal Storage:\u003C\/i\u003E\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003EThe webstorage consists of objects called as local storage and session storage.The local storage values can be set using \u003Cb\u003Elocalstorage.mydata=”data”\u003C\/b\u003Eand it can retrieved any time later even when the browser is closed and re-opened as local storage. mydata and there is also a second object called the session Storage which has the same functionality but it is cleared when the window is closed. \u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003EWeb SQL Database:\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003EIt is a structured database with all the functionality and complexity of a typical relational database.It is supported on major mobile browsers like Android Browser,Safari,Opera and desktop browsers like Chrome,Safari and Opera.It supports a transactional database model.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Ci\u003EIndexed Database:\u003C\/i\u003E\u003C\/span\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003EAn indexed database is a collection of “object stores” which are nothing but tables in which a user can just create objects and throw the objects into it.We can have any number of databases ,and to increase the search\u0026nbsp; speed we can make use of asynchronous API.\u003Ci\u003E \u003Co:p\u003E\u003C\/o:p\u003E\u003C\/i\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Ci\u003EFileSystem:\u003C\/i\u003E\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 15.6pt 0cm 8.4pt;\"\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003EThe file system is capable of storing BLOB content which is nothing but Binary Large Objects consisting of images,audio, video, PDF’s etc.,It gives good performance since it is an asynchronous API.It is available only on chrome and opera.It doesn't have a transaction support.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003EExample\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp;\/\/To check the availability of store \u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp;If(!localStorage.checkins)\u003C\/b\u003E\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; localStorage.checkins = JSONs.stringify([]);\u003C\/b\u003E\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003ETo create the database structure in Web SQL Database if it doesn't exist openDatabase is used\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003Ethis.db = openDatabase('mysampledb','1.0','mysampledb Checkins', 8192);\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003Ethis.db.transaction(function(tx){\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003Etx.executeSql(\"create a table if it doesnot exists\" + \"checkins(id integer primary key asc, time integer, latitude float,\" + \"longitude float, mysample string)\", [],\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003Efunction() {\u003C\/b\u003E\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003Econsole.log(\"it is working\");\u003C\/b\u003E\u003C\/span\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E}\u003C\/span\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , serif; font-size: 14pt;\"\u003E);\u003C\/span\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , serif; font-size: 14pt;\"\u003E});\u003C\/span\u003E\u003C\/b\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003ETo set up an indexed database –\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003Evar db;\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003Evar myversion = 1;\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cb\u003E\u003Cbr \/\u003E\u003C\/b\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003Ewindow.indexedStore = {};\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cb\u003E\u003Cbr \/\u003E\u003C\/b\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003Ewindow.indexedStore.setup = function(handler) {\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp; \/\/ attempt to open the database\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp; var request = indexedDB.open(\"mysampledb\", version);\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cb\u003E\u003Cbr \/\u003E\u003C\/b\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp; \/\/ upgrade\/create the database if needed\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp; request.onupgradeneeded = function(event) {\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; var db = request.result;\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; if (event.oldVersion \u0026lt; 1) {\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \/\/ Version 1 is the first version of the database.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; var checkinsStore = db.createObjectStore(\"checkins\", { keyPath: \"time\" });\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; checkinsStore.createIndex(\"moodIndex\", \"mood\", { unique: false });\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; }\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; if (event.oldVersion \u0026lt; 2) {\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \/\/ In future versions we'd upgrade our database here.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \/\/ This will never run here, because we're version 1.\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; }\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; db = request.result;\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp; };\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cb\u003E\u003Cbr \/\u003E\u003C\/b\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp; request.onsuccess = function(ev) {\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; \/\/ assign the database for access outside\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; db = request.result;\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; handler();\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; db.onerror = function(ev) {\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; console.log(\"db error\", arguments);\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; };\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E\u0026nbsp; };\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\"\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cb\u003E};\u003C\/b\u003E\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt; line-height: 115%;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003EThis is how we set up a file system:\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003Esetup: function(handler) {\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp; requestFileSystem(\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; window.PERSISTENT,\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; 1024*1024,\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; function(fs) {\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; fs.root.getDirectory(\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \"checkins\",\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; {}, \/\/ no \"create\" option, so this is a read op\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; function(dir) {\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; checkinsDir = dir;\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; handler();\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; },\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; function() {\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; fs.root.getDirectory(\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \"checkins\",\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; {create: true},\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; function(dir) {\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; checkinsDir = dir;\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; handler();\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; },\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; onError\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cb\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; );\u003C\/span\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E}\u003C\/span\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E);\u003C\/span\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , serif; font-size: 14pt;\"\u003E},\u003C\/span\u003E\u003C\/b\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; function(e) {\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u003Cb\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; console.log(\"error \"+e.code+\"initialising “);\u003Co:p\u003E\u003C\/o:p\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cb\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; }\u003C\/span\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003E);\u003C\/span\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , serif; font-size: 14pt;\"\u003E}\u003C\/span\u003E\u003C\/b\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Ch3 style=\"text-align: left;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003EConclusion:\u003C\/span\u003E\u003C\/h3\u003E\u003C\/div\u003E\u003Cdiv class=\"MsoNormal\" style=\"margin: 4.8pt 0cm 9.6pt;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;times new roman\u0026quot; , \u0026quot;serif\u0026quot;; font-size: 14.0pt;\"\u003EUntil now we have been only aware of storing our data in the server but here there is another concept called as the client storage where the data can be stored along with its preferences and cache at the client side itself.The browsers come with built in functionality of storing the data at the client side.So guys ,lets check out how this works!!!\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/kongaraju.blogspot.com\/feeds\/2097487532317062537\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2015\/07\/html5-client-side-storage-solutions.html#comment-form","title":"0 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/2097487532317062537"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/2097487532317062537"},{"rel":"alternate","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2015\/07\/html5-client-side-storage-solutions.html","title":"HTML5 Client-side storage solutions"}],"author":[{"name":{"$t":"Raju Konga"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/10750040862243953720"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"33","height":"30","src":"\/\/3.bp.blogspot.com\/-NRmd50o6VzU\/Xl0GJ89U5nI\/AAAAAAAAFvs\/hmFaD7EEWBktvdxCDKDS8PFdbVIiGTaBgCK4BGAYYCw\/s220\/latest_pic.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/4.bp.blogspot.com\/-qXB1TgVYoQg\/VqkJz6JdhgI\/AAAAAAAAC48\/bWMaDrBfB6c\/s72-c\/goldbars-k6U--621x414%2540LiveMint.jpg","height":"72","width":"72"},"thr$total":{"$t":"0"}},{"id":{"$t":"tag:blogger.com,1999:blog-1933328805824469647.post-7625556865175279672"},"published":{"$t":"2014-08-16T15:56:00.000+05:30"},"updated":{"$t":"2016-01-27T23:55:53.318+05:30"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"HTML5"},{"scheme":"http://www.blogger.com/atom/ns#","term":"javascript"},{"scheme":"http://www.blogger.com/atom/ns#","term":"stream"},{"scheme":"http://www.blogger.com/atom/ns#","term":"video"},{"scheme":"http://www.blogger.com/atom/ns#","term":"webrtc"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Websocket"}],"title":{"type":"text","$t":"Plugin less video call using webRTC "},"content":{"type":"html","$t":"\u003Cdiv dir=\"ltr\" style=\"text-align: left;\" trbidi=\"on\"\u003E\u003Ch3 style=\"font-weight: bolder; margin: 0.83em 0px; padding: 0px; position: relative;\"\u003EIntroduction to WebRTC\u003C\/h3\u003E\u003Cdiv style=\"margin: 0px; outline: none; padding: 0px;\"\u003E\u003Cspan style=\"font-size: medium;\"\u003EWebRTC enables peer to peer communication using simple Javascript APIs. It supports to build rich, high quality, RTC applications using Javascript and HTML5. There Three APIs yet to develop RTC applications.\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 0px; outline: none; padding: 0px;\"\u003E\u003Col style=\"list-style-image: initial; list-style-position: initial; margin: 0.5em 0px; outline: none; padding: 0px 0px 0px 2em;\"\u003E\u003Cli style=\"margin: 0px; outline: none; padding: 0px;\"\u003E\u003Cspan style=\"font-size: medium;\"\u003EMedia Stream\u003C\/span\u003E\u003C\/li\u003E\u003Cli style=\"margin: 0px; outline: none; padding: 0px;\"\u003E\u003Cspan style=\"font-size: medium;\"\u003ERTC Peer Connection\u003C\/span\u003E\u003C\/li\u003E\u003Cli style=\"margin: 0px; outline: none; padding: 0px;\"\u003E\u003Cspan style=\"font-size: medium;\"\u003ERTC Data Channel\u003C\/span\u003E\u003C\/li\u003E\u003C\/ol\u003E\u003Cdiv\u003E\u003Cspan style=\"font-size: medium;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-UyTEFhaveSA\/VqkLqCRPrzI\/AAAAAAAAC5I\/kT7S22kGR9Y\/s1600\/orange_1454543i.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"257\" src=\"http:\/\/1.bp.blogspot.com\/-UyTEFhaveSA\/VqkLqCRPrzI\/AAAAAAAAC5I\/kT7S22kGR9Y\/s400\/orange_1454543i.jpg\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cspan style=\"font-size: medium;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 0px; outline: none; padding: 0px;\"\u003E\u003Ch3 style=\"font-weight: bolder; margin: 0.83em 0px; padding: 0px; position: relative;\"\u003EGetting started using getUserMedia\u003C\/h3\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 0px; outline: none; padding: 0px;\"\u003E\u003Cspan style=\"font-size: medium;\"\u003EgetUserMedia generates \u0026nbsp;MediaStream which receives Audio and Video from device. navigator.getUserMedia() gives mediastream having audio and video tracks. To get audio tracks from stream use stream.getAudioTracks() and to get stream.getVideoTracks().\u0026nbsp;\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 0px; outline: none; padding: 0px;\"\u003E\u003Cspan style=\"font-size: medium;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 0px; outline: none; padding: 0px;\"\u003E\u003Cspan style=\"font-size: medium;\"\u003EgetUserMedia takes three parameters constraints object, success callback and failure callback. The out received from the getUserMedia can be passed to RTCPeerConnection.\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 0px; outline: none; padding: 0px;\"\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv class=\"pre\" style=\"background-color: #2e3436; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 0px solid gray; color: white !important; font-size: 14px; font-weight: 600; margin: 5px; outline: none; overflow: auto; padding: 5px; text-shadow: rgb(158, 158, 158) 0px 0px 3px;\"\u003Enavigator.getUserMedia({ \"audio\": true, \"video\": true });\u003C\/div\u003E\u003Cdiv style=\"margin: 0px; outline: none; padding: 0px;\"\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv style=\"margin: 0px; outline: none; padding: 0px;\"\u003E\u003Ch3 style=\"background-color: white; color: #333333; font-family: 'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: bolder; margin: 0.83em 0px; padding: 0px; position: relative;\"\u003ERTC Peer connection to exchanges streams\u003C\/h3\u003E\u003Cspan style=\"background-color: white; color: #333333; font-family: \u0026quot;helvetica neue light\u0026quot; , , \u0026quot;helvetica neue\u0026quot; , \u0026quot;helvetica\u0026quot; , \u0026quot;arial\u0026quot; , sans-serif; font-size: medium;\"\u003ERTC peer connection API is to establish a persistent connection between peers. Rest of the process similar to video calling using WebRTC peer connection.\u003C\/span\u003E\u003Cbr \/\u003E\u003Cbr style=\"background-color: white; color: #333333; font-family: 'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 19.600000381469727px;\" \/\u003E\u003Cdiv class=\"pre\" style=\"background-color: #2e3436; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 0px solid gray; color: white !important; font-family: 'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 19.600000381469727px; margin: 5px; outline: none; overflow: auto; padding: 5px; text-shadow: rgb(158, 158, 158) 0px 0px 3px;\"\u003Evar signalChannel = createSignalingChannel();\u003Cbr \/\u003Evar peerConn;\u003Cbr \/\u003Evar config = ...;\u003Cbr \/\u003E\u003Cbr \/\u003E\/\/ execute makeCall make a call\u003Cbr \/\u003Efunction makeCall(isCaller) {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp;\u0026nbsp;peerConn\u0026nbsp;= new RTCPeerConnection(config);\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \/\/ sending ice candidates to the other peer\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp;\u0026nbsp;peerConn.onicecandidate = function (evt) {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026nbsp;signalChannel.send(JSON.stringify({ \"candidate\": evt.candidate }));\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; };\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \/\/ set remote stream to the remote video element\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp;\u0026nbsp;peerConn.onaddstream = function (evt) {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; remoteView.src = URL.createObjectURL(evt.stream);\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; };\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \/\/ get the local stream and send\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; navigator.getUserMedia({ \"audio\": true, \"video\": true }, function (stream) {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; selfView.src = URL.createObjectURL(stream);\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026nbsp;peerConn.addStream(stream);\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; if (isCaller)\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026nbsp;peerConn.createOffer(gotDescription);\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; else\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026nbsp;peerConn.createAnswer(peerConn.remoteDescription, gotDescription);\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; function gotDescription(desc) {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026nbsp;peerConn.setLocalDescription(desc);\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026nbsp;signalChannel.send(JSON.stringify({ \"sdp\": desc }));\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; }\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; });\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003EsignalChannel.onmessage = function (evt) {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; if (!peerConn)\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; makeCall(false);\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; var signalData = JSON.parse(evt.data);\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; if (signalData.sdp)\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026nbsp;peerConn.setRemoteDescription(new RTCSessionDescription(signalData.sdp));\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; else\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026nbsp;peerConn.addIceCandidate(new RTCIceCandidate(signalData.candidate));\u003Cbr \/\u003E};\u003C\/div\u003E\u003Ch4 style=\"background-color: white; color: #333333; font-family: 'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: bolder; line-height: 19.600000381469727px; margin: 1.12em 0px; padding: 0px; position: relative;\"\u003EHow RTC Peer connection \u0026nbsp;descriptions exchange works?\u003C\/h4\u003E\u003Col style=\"background-color: white; color: #333333; font-family: 'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 19.600000381469727px; list-style-image: initial; list-style-position: initial; margin: 0.5em 0px; outline: none; padding: 0px 0px 0px 2em;\"\u003E\u003Cli style=\"margin: 0px; outline: none; padding: 0px;\"\u003E\u003Cspan style=\"font-size: medium;\"\u003EPeer1 runs the RTCPeerConnection createOffer() method.\u0026nbsp;\u003C\/span\u003E\u003C\/li\u003E\u003Cli style=\"margin: 0px; outline: none; padding: 0px;\"\u003E\u003Cspan style=\"font-size: medium;\"\u003EThe callback argument of this is passed an RTCSessionDescription: Peer1's local session description.\u003C\/span\u003E\u003C\/li\u003E\u003Cli style=\"margin: 0px; outline: none; padding: 0px;\"\u003E\u003Cspan style=\"font-size: medium;\"\u003EIn the callback, Peer1 sets the local description using setLocalDescription() and then sends this session description to Peer2 via their signaling channel. Note that RTCPeerConnection won't start gathering candidates until setLocalDescription() is called: this is codified in JSEP IETF draft.\u003C\/span\u003E\u003C\/li\u003E\u003Cli style=\"margin: 0px; outline: none; padding: 0px;\"\u003E\u003Cspan style=\"font-size: medium;\"\u003EPeer2 sets the description Peer1 sent him as the remote description using setRemoteDescription().\u003C\/span\u003E\u003C\/li\u003E\u003Cli style=\"margin: 0px; outline: none; padding: 0px;\"\u003E\u003Cspan style=\"font-size: medium;\"\u003EPeer2 runs the RTCPeerConnection createAnswer() method, passing it the remote description he got from Peer1, so a local session can be generated that is compatible with hers.\u0026nbsp;\u003C\/span\u003E\u003C\/li\u003E\u003Cli style=\"margin: 0px; outline: none; padding: 0px;\"\u003E\u003Cspan style=\"font-size: medium;\"\u003EThe createAnswer() callback is passed an RTCSessionDescription: Peer2 sets that as the local description and sends it to Peer1.\u003C\/span\u003E\u003C\/li\u003E\u003Cli style=\"margin: 0px; outline: none; padding: 0px;\"\u003E\u003Cspan style=\"font-size: medium;\"\u003EWhen Peer1 gets Peer2's session description, \u0026nbsp;sets that as the remote description with setRemoteDescription.\u003C\/span\u003E\u003C\/li\u003E\u003Cli style=\"margin: 0px; outline: none; padding: 0px;\"\u003E\u003Cspan style=\"font-size: medium;\"\u003EBoth peers now having others streams.\u003C\/span\u003E\u003C\/li\u003E\u003C\/ol\u003E\u003C\/div\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/kongaraju.blogspot.com\/feeds\/7625556865175279672\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2014\/08\/plugin-less-video-call-using-webrtc.html#comment-form","title":"0 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/7625556865175279672"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/7625556865175279672"},{"rel":"alternate","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2014\/08\/plugin-less-video-call-using-webrtc.html","title":"Plugin less video call using webRTC "}],"author":[{"name":{"$t":"Raju Konga"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/10750040862243953720"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"33","height":"30","src":"\/\/3.bp.blogspot.com\/-NRmd50o6VzU\/Xl0GJ89U5nI\/AAAAAAAAFvs\/hmFaD7EEWBktvdxCDKDS8PFdbVIiGTaBgCK4BGAYYCw\/s220\/latest_pic.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/1.bp.blogspot.com\/-UyTEFhaveSA\/VqkLqCRPrzI\/AAAAAAAAC5I\/kT7S22kGR9Y\/s72-c\/orange_1454543i.jpg","height":"72","width":"72"},"thr$total":{"$t":"0"}},{"id":{"$t":"tag:blogger.com,1999:blog-1933328805824469647.post-6360002112085349593"},"published":{"$t":"2014-08-16T15:31:00.000+05:30"},"updated":{"$t":"2016-01-28T23:22:59.655+05:30"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"HTML5"},{"scheme":"http://www.blogger.com/atom/ns#","term":"javascript"},{"scheme":"http://www.blogger.com/atom/ns#","term":"stream"},{"scheme":"http://www.blogger.com/atom/ns#","term":"video"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WebApplications"},{"scheme":"http://www.blogger.com/atom/ns#","term":"webrtc"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Websocket"}],"title":{"type":"text","$t":"Web RTC audio only Call"},"content":{"type":"html","$t":"\u003Cdiv dir=\"ltr\" style=\"text-align: left;\" trbidi=\"on\"\u003E\u003Cstyle\u003E  .pre{     border-radius:5px;     border:0px solid gray;     color:  white !important; background-color:  #2E3436;     text-shadow: 0px 0px 3px #9e9e9e;     font-weight:600;     overflow: auto;     margin:5px;     padding:5px;     font-size:14px;    } \u003C\/style\u003E \u003Cbr \/\u003E\u003Ch3 style=\"text-align: left;\"\u003EIntroduction to WebRTC\u003C\/h3\u003E\u003Cdiv\u003E\u003Cspan style=\"font-size: large;\"\u003EWebRTC enables peer to peer communication using simple Javascript APIs. It supports to build rich, high quality, RTC applications using Javascript and HTML5. There Three APIs yet to develop RTC applications.\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Col style=\"text-align: left;\"\u003E\u003Cli\u003E\u003Cspan style=\"font-size: large;\"\u003EMedia Stream\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-size: large;\"\u003ERTC Peer Connection\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-size: large;\"\u003ERTC Data Channel\u003C\/span\u003E\u003C\/li\u003E\u003C\/ol\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-_5jRIvvebj8\/VqpVXj5YOWI\/AAAAAAAAC5c\/eXfdBgSIzp4\/s1600\/speakerudde.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"155\" src=\"http:\/\/3.bp.blogspot.com\/-_5jRIvvebj8\/VqpVXj5YOWI\/AAAAAAAAC5c\/eXfdBgSIzp4\/s400\/speakerudde.jpg\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cspan style=\"font-size: large;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch3 style=\"text-align: left;\"\u003EGetting started using getUserMedia\u003C\/h3\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cspan style=\"font-size: large;\"\u003EgetUserMedia generates \u0026nbsp;MediaStream which receives Audio and Video from device. navigator.getUserMedia() gives mediastream having audio and video tracks. To get audio tracks from stream use stream.getAudioTracks() and to get stream.getVideoTracks().\u0026nbsp;\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cspan style=\"font-size: large;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cspan style=\"font-size: large;\"\u003EgetUserMedia takes three parameters constraints object, success callback and failure callback. The out received from the getUserMedia can be passed to RTCPeerConnection.\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv class=\"pre\"\u003Enavigator.getUserMedia({ \"audio\": true, \"video\": true });\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003EFor audio call you just need to put false to video constraint.\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv class=\"pre\"\u003Enavigator.getUserMedia({ \"audio\": true, \"video\": false });\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch3 style=\"text-align: left;\"\u003ERTC Peer connection to exchanges streams\u003C\/h3\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-size: large;\"\u003ERTC peer connection API is to establish a persistent connection between peers. Rest of the process similar to video calling using WebRTC peer connection.\u003C\/span\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"pre\"\u003Evar signalChannel = createSignalingChannel();\u003Cbr \/\u003Evar peerConn;\u003Cbr \/\u003Evar config = ...;\u003Cbr \/\u003E\u003Cbr \/\u003E\/\/ execute makeCall make a call\u003Cbr \/\u003Efunction makeCall(isCaller) {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp;\u0026nbsp;peerConn\u0026nbsp;= new RTCPeerConnection(config);\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \/\/ sending ice candidates to the other peer\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp;\u0026nbsp;peerConn.onicecandidate = function (evt) {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026nbsp;signalChannel.send(JSON.stringify({ \"candidate\": evt.candidate }));\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; };\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \/\/ set remote stream to the remote video element\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp;\u0026nbsp;peerConn.onaddstream = function (evt) {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; remoteView.src = URL.createObjectURL(evt.stream);\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; };\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \/\/ get the local stream and send\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; navigator.getUserMedia({ \"audio\": true, \"video\": false }, function (stream) {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; selfView.src = URL.createObjectURL(stream);\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026nbsp;peerConn.addStream(stream);\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; if (isCaller)\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026nbsp;peerConn.createOffer(gotDescription);\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; else\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026nbsp;peerConn.createAnswer(peerConn.remoteDescription, gotDescription);\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; function gotDescription(desc) {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026nbsp;peerConn.setLocalDescription(desc);\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026nbsp;signalChannel.send(JSON.stringify({ \"sdp\": desc }));\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; }\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; });\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003EsignalChannel.onmessage = function (evt) {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; if (!peerConn)\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; makeCall(false);\u003Cbr \/\u003E\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; var signalData = JSON.parse(evt.data);\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; if (signalData.sdp)\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026nbsp;peerConn.setRemoteDescription(new RTCSessionDescription(signalData.sdp));\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; else\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u0026nbsp;peerConn.addIceCandidate(new RTCIceCandidate(signalData.candidate));\u003Cbr \/\u003E};\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Ch4 style=\"text-align: left;\"\u003EHow RTC Peerconnection \u0026nbsp;descriptions exchange works?\u003C\/h4\u003E\u003Col style=\"text-align: left;\"\u003E\u003Cli\u003E\u003Cspan style=\"font-size: large;\"\u003EPeer1 runs the RTCPeerConnection createOffer() method.\u0026nbsp;\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-size: large;\"\u003EThe callback argument of this is passed an RTCSessionDescription: Peer1's local session description.\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-size: large;\"\u003EIn the callback, Peer1 sets the local description using setLocalDescription() and then sends this session description to Peer2 via their signaling channel. Note that RTCPeerConnection won't start gathering candidates until setLocalDescription() is called: this is codified in JSEP IETF draft.\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-size: large;\"\u003EPeer2 sets the description Peer1 sent him as the remote description using setRemoteDescription().\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-size: large;\"\u003EPeer2 runs the RTCPeerConnection createAnswer() method, passing it the remote description he got from Peer1, so a local session can be generated that is compatible with hers.\u0026nbsp;\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-size: large;\"\u003EThe createAnswer() callback is passed an RTCSessionDescription: Peer2 sets that as the local description and sends it to Peer1.\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-size: large;\"\u003EWhen Peer1 gets Peer2's session description, \u0026nbsp;sets that as the remote description with setRemoteDescription.\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-size: large;\"\u003EBoth peers now having others streams.\u003C\/span\u003E\u003C\/li\u003E\u003C\/ol\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003C\/div\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/kongaraju.blogspot.com\/feeds\/6360002112085349593\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2014\/08\/web-rtc-audio-only-call.html#comment-form","title":"0 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/6360002112085349593"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/6360002112085349593"},{"rel":"alternate","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2014\/08\/web-rtc-audio-only-call.html","title":"Web RTC audio only Call"}],"author":[{"name":{"$t":"Raju Konga"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/10750040862243953720"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"33","height":"30","src":"\/\/3.bp.blogspot.com\/-NRmd50o6VzU\/Xl0GJ89U5nI\/AAAAAAAAFvs\/hmFaD7EEWBktvdxCDKDS8PFdbVIiGTaBgCK4BGAYYCw\/s220\/latest_pic.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/3.bp.blogspot.com\/-_5jRIvvebj8\/VqpVXj5YOWI\/AAAAAAAAC5c\/eXfdBgSIzp4\/s72-c\/speakerudde.jpg","height":"72","width":"72"},"thr$total":{"$t":"0"}},{"id":{"$t":"tag:blogger.com,1999:blog-1933328805824469647.post-7729767581795421566"},"published":{"$t":"2014-08-15T12:10:00.000+05:30"},"updated":{"$t":"2016-01-28T23:26:34.156+05:30"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"HTML5"},{"scheme":"http://www.blogger.com/atom/ns#","term":"javascript"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Upload"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Websocket"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Webworker"}],"title":{"type":"text","$t":"HTML5 WebSocket File Tranfer"},"content":{"type":"html","$t":"\u003Cdiv dir=\"ltr\" style=\"text-align: left;\" trbidi=\"on\"\u003E\u003Ch3 style=\"text-align: left;\"\u003E\u003Cspan style=\"font-size: large;\"\u003EWebsockets Introduction\u003C\/span\u003E\u003C\/h3\u003E\u003Cspan style=\"font-size: large;\"\u003EWebsockets API establish a persistent connection between the client and the server. It provides bi-directional communication, client and server can communicate each other directly, It helps to avoids long polling. Webscokets enables communication between any domain. Several implementations available to use websockets in different languages.\u003C\/span\u003E\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cspan style=\"font-size: large;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cspan style=\"font-size: large;\"\u003EImplementing file transfer using websockets is complex part, but transfer rate is really high compared to HTTP file transfer. Websocket file transfer gives more features like pause, resume, transfer stats, etc..\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-size: large;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-3VzzA7msdtk\/VqpWQtlecKI\/AAAAAAAAC5o\/Cgx-cMdu5cM\/s1600\/Organizing-Tips-Tricks-Organize-Scraps-By-Color-and-Pattern-in-a-Magazine-Holders.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"303\" src=\"http:\/\/1.bp.blogspot.com\/-3VzzA7msdtk\/VqpWQtlecKI\/AAAAAAAAC5o\/Cgx-cMdu5cM\/s400\/Organizing-Tips-Tricks-Organize-Scraps-By-Color-and-Pattern-in-a-Magazine-Holders.jpg\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cspan style=\"font-size: large;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Ch3 style=\"text-align: left;\"\u003EUploading files using websockets\u003C\/h3\u003E\u003Cdiv\u003E\u003Col\u003E\u003Cli\u003E\u003Cspan style=\"font-size: large;\"\u003EAssign unique id to each file.\u0026nbsp;\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-size: large;\"\u003ESlice file into chucks as per chuck size using File Slice.\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-size: large;\"\u003ERead the chunk using File Reader.\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-size: large;\"\u003ESend the each chunk as buffered object using websocket.\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-size: large;\"\u003EAfter receive of chunk acknowledgement from server, send the next chunk.\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-size: large;\"\u003EAt the end of file, send complete message to notify server.\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-size: large;\"\u003EServer side, on start of each file create file with unique id in temporary folder.\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-size: large;\"\u003EOn receive of each chuck from client add it to the corresponding file.\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-size: large;\"\u003E\u0026nbsp;Send acknowledgement to client on each update.\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"font-size: large;\"\u003EAfter receive of complete message rename and move it to specified folder.\u003C\/span\u003E\u003C\/li\u003E\u003C\/ol\u003E\u003Ch3 style=\"text-align: left;\"\u003EUploading large files using websockets\u003C\/h3\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cspan style=\"font-size: large;\"\u003ELarge file uploading may hang the application, to avoid application hang run file reading and slicing in thread. Threading in javascript can implement using webworkers, So move slicing and reading of file to webworker.\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cspan style=\"font-size: small;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/kongaraju.blogspot.com\/feeds\/7729767581795421566\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2014\/08\/html5-websocket-file-tranfer.html#comment-form","title":"1 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/7729767581795421566"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/7729767581795421566"},{"rel":"alternate","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2014\/08\/html5-websocket-file-tranfer.html","title":"HTML5 WebSocket File Tranfer"}],"author":[{"name":{"$t":"Raju Konga"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/10750040862243953720"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"33","height":"30","src":"\/\/3.bp.blogspot.com\/-NRmd50o6VzU\/Xl0GJ89U5nI\/AAAAAAAAFvs\/hmFaD7EEWBktvdxCDKDS8PFdbVIiGTaBgCK4BGAYYCw\/s220\/latest_pic.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/1.bp.blogspot.com\/-3VzzA7msdtk\/VqpWQtlecKI\/AAAAAAAAC5o\/Cgx-cMdu5cM\/s72-c\/Organizing-Tips-Tricks-Organize-Scraps-By-Color-and-Pattern-in-a-Magazine-Holders.jpg","height":"72","width":"72"},"thr$total":{"$t":"1"}},{"id":{"$t":"tag:blogger.com,1999:blog-1933328805824469647.post-715588391455989672"},"published":{"$t":"2013-12-30T17:28:00.001+05:30"},"updated":{"$t":"2016-01-28T23:29:43.292+05:30"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"AMD"},{"scheme":"http://www.blogger.com/atom/ns#","term":"BackboneJs"},{"scheme":"http://www.blogger.com/atom/ns#","term":"HTML5"},{"scheme":"http://www.blogger.com/atom/ns#","term":"javascript"},{"scheme":"http://www.blogger.com/atom/ns#","term":"JQuery"},{"scheme":"http://www.blogger.com/atom/ns#","term":"MVC"},{"scheme":"http://www.blogger.com/atom/ns#","term":"RequireJs"},{"scheme":"http://www.blogger.com/atom/ns#","term":"WebApplications"}],"title":{"type":"text","$t":"Backbone RequireJs module name spacing and application structure."},"content":{"type":"html","$t":"\u003Cdiv dir=\"ltr\" style=\"text-align: left;\" trbidi=\"on\"\u003EWeb Applications using Backbone and RequireJs produce rich client-applications. Both the open-source libraries are very useful for rapid \u0026nbsp;structured web applications development.\u003Cbr \/\u003E\u003Ch4 style=\"text-align: left;\"\u003EBackbone\u0026nbsp;\u003C\/h4\u003E\u003Cdiv\u003E\u003Ca href=\"http:\/\/backbonejs.org\/\" target=\"_blank\"\u003EBackbone\u003C\/a\u003E \u0026nbsp;helps you to organize your code properly and will be very helpful and easy when you are reusing it. Basic purpose is to build applications in MVC pattern.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-xIDsAXDMVXM\/VqpXB32V7LI\/AAAAAAAAC5w\/pmfUPG4tlLc\/s1600\/backbone.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"215\" src=\"http:\/\/2.bp.blogspot.com\/-xIDsAXDMVXM\/VqpXB32V7LI\/AAAAAAAAC5w\/pmfUPG4tlLc\/s400\/backbone.png\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Ch4 style=\"text-align: left;\"\u003ERequireJs\u003C\/h4\u003E\u003Cdiv\u003E\u003Ca href=\"http:\/\/requirejs.org\/\" target=\"_blank\"\u003ERequireJs\u003C\/a\u003E is a module loader, improve speed and quality and code. It supports to load modules asynchronously. In other words it is for \u0026nbsp;AMD(Asynchronous Module definitions) .\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003EThe critical part in building web applications using these libraries is application structure. How to organize modules as well as Models,Collections,Views and Controllers is complex part.\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003EHere we will go with sample\u0026nbsp;\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003Cdiv style=\"background: #12a6eb; border-radius: 5px; color: white; font-size: 18px; padding: 5px;\"\u003Evar App = window.App || {};\u003C\/div\u003E\u003Cbr \/\u003Eapplication should have some global context for that, add status.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv style=\"background: #12a6eb; border-radius: 5px; color: white; font-size: 18px; padding: 5px;\"\u003EApp.status = {};\u003C\/div\u003E\u003Cbr \/\u003EWorking with Backbone, create Models, Collections, Views and Routers using namespaces.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv style=\"background: #12a6eb; border-radius: 5px; color: white; font-size: 18px; padding: 5px;\"\u003EApp.Models = {};\u003Cbr \/\u003EApp.Views = {};\u003Cbr \/\u003EApp.Collections = {};\u003Cbr \/\u003EApp.Routers = {};\u003C\/div\u003E\u003Cbr \/\u003EThen, the main part of organizing \u0026nbsp;modules and initializing.\u003Cbr \/\u003E\u003Cbr \/\u003EFor example application contains 3 modules named (users, books , stores), lets construct backbone classes using module naming.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv style=\"background: #12a6eb; border-radius: 5px; color: white; font-size: 18px; padding: 5px;\"\u003EApp.users = {}; \u0026nbsp;\/\/for users module\u003Cbr \/\u003E\u003Cbr \/\u003E\/\/creating users class accessible under App using users module name\u003Cbr \/\u003EApp.users.appUsers = new App.Collections.users;\u003Cbr \/\u003E\u003Cbr \/\u003E\u003C\/div\u003ESimilarly for construct all the models and collections under respective module naming\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv style=\"background: #12a6eb; border-radius: 5px; color: white; font-size: 18px; padding: 5px;\"\u003EApp.books = {}; \/\/ books module\u003Cbr \/\u003EApp.stores = {}; \/\/stores module\u003Cbr \/\u003E\u003Cbr \/\u003E\u003C\/div\u003ENext separate all user interface classes and construct using ui part in App.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv style=\"background: #12a6eb; border-radius: 5px; color: white; font-size: 18px; padding: 5px;\"\u003EApp.ui = {}; \/\/all the applications views\u003Cbr \/\u003E\u003Cbr \/\u003E\/\/creating books container\u003Cbr \/\u003EApp.ui.BooksContainer = App.Views.BooksMasterView;\u003Cbr \/\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cbr \/\u003EFinal part of application is controlling application modules. Construct all the router under controllers namespace of App.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv style=\"background: #12a6eb; border-radius: 5px; color: white; font-size: 18px; padding: 5px;\"\u003EApp.controllers = {};\u003Cbr \/\u003E\u003Cbr \/\u003E\/\/creating application master router\u003Cbr \/\u003E\u0026nbsp;App.controllers.master = App.Routers.MasterRouter;\u003Cbr \/\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Ch4 style=\"text-align: left;\"\u003EConclusion\u003C\/h4\u003E\u003Cdiv\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;Applications \u0026nbsp;should expose all parts the body. Global namespacing provides rich interface for building high end applications. Both RequireJs and BackboneJs libraries gives a structured format but using two at a time \u0026nbsp;needs simple attention. The above structural organization of modules in MVC pattern explores Application usage.\u0026nbsp;\u003C\/div\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/kongaraju.blogspot.com\/feeds\/715588391455989672\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2013\/12\/backbone-requirejs-module-name-spacing.html#comment-form","title":"0 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/715588391455989672"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/715588391455989672"},{"rel":"alternate","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2013\/12\/backbone-requirejs-module-name-spacing.html","title":"Backbone RequireJs module name spacing and application structure."}],"author":[{"name":{"$t":"Raju Konga"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/10750040862243953720"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"33","height":"30","src":"\/\/3.bp.blogspot.com\/-NRmd50o6VzU\/Xl0GJ89U5nI\/AAAAAAAAFvs\/hmFaD7EEWBktvdxCDKDS8PFdbVIiGTaBgCK4BGAYYCw\/s220\/latest_pic.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/2.bp.blogspot.com\/-xIDsAXDMVXM\/VqpXB32V7LI\/AAAAAAAAC5w\/pmfUPG4tlLc\/s72-c\/backbone.png","height":"72","width":"72"},"thr$total":{"$t":"0"}},{"id":{"$t":"tag:blogger.com,1999:blog-1933328805824469647.post-2762010774913656580"},"published":{"$t":"2013-05-28T11:33:00.000+05:30"},"updated":{"$t":"2015-12-11T17:13:31.510+05:30"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"HTML5"},{"scheme":"http://www.blogger.com/atom/ns#","term":"javascript"},{"scheme":"http://www.blogger.com/atom/ns#","term":"media"},{"scheme":"http://www.blogger.com/atom/ns#","term":"media source api"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Storage"},{"scheme":"http://www.blogger.com/atom/ns#","term":"stream"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Upload"},{"scheme":"http://www.blogger.com/atom/ns#","term":"video"},{"scheme":"http://www.blogger.com/atom/ns#","term":"webrtc"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Websocket"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Webworker"}],"title":{"type":"text","$t":"HTML5: Recording Audio,Video Streams"},"content":{"type":"html","$t":"\u003Cdiv dir=\"ltr\" style=\"text-align: left;\" trbidi=\"on\"\u003EMediaStreamRecorder API is webRTC API that supports recording streams with getUserMedia or remote streams passed over peerconnection session.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv style=\"background: #711; border-radius: 5px; color: white; font-size: 16px; padding: 5px;\"\u003E\u003Cbr \/\u003E\u0026nbsp; \u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026lt;script language=\"javascript\" type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; function onVideoFail(e) {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; console.log('webcam fail!', e);\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; };\u003Cbr \/\u003E\u0026nbsp; \u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; function hasGetUserMedia() {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \/\/ Note: Opera is unprefixed.\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; navigator.mozGetUserMedia || navigator.msGetUserMedia);\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; }\u003Cbr \/\u003E\u0026nbsp; \u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; if (hasGetUserMedia()) {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \/\/ Good to go!\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; } else {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; alert('getUserMedia() is not supported in your browser');\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; }\u003Cbr \/\u003E\u0026nbsp; \u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; window.URL = window.URL || window.webkitURL;\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; navigator.getUserMedia \u0026nbsp;= navigator.getUserMedia ||\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;navigator.webkitGetUserMedia ||\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; navigator.mozGetUserMedia ||\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;navigator.msGetUserMedia;\u003Cbr \/\u003E\u0026nbsp; \u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; var video = document.querySelector('video');\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; var streamRecorder;\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; var webcamstream;\u003Cbr \/\u003E\u0026nbsp; \u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; if (navigator.getUserMedia) {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; navigator.getUserMedia({audio: true, video: true}, function(stream) {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; video.src = window.URL.createObjectURL(stream);\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; webcamstream = stream;\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \/\/ \u0026nbsp;streamrecorder = webcamstream.record();\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; }, onVideoFail);\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; } else {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; alert ('failed');\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; }\u003Cbr \/\u003E\u0026nbsp; \u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; function startRecording() {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; streamRecorder = webcamstream.record();\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; setTimeout(stopRecording, 10000);\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; }\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; function stopRecording() {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; streamRecorder.getRecordedData(postVideoToServer);\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; }\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; function postVideoToServer(videoblob) {\u003Cbr \/\u003E\u0026nbsp; \u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; var data = {};\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; data.video = videoblob;\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; data.metadata = 'test metadata';\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; data.action = \"upload_video\";\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; jQuery.post(\"uploadvideo.php\", data, onUploadSuccess);\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; }\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; function onUploadSuccess() {\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; alert ('video uploaded');\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; }\u003Cbr \/\u003E\u0026nbsp; \u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026nbsp; \u003C\/div\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv style=\"background: #12a6eb; border-radius: 5px; color: white; font-size: 18px; padding: 5px;\"\u003E\u0026nbsp; \u0026nbsp; \u0026lt;video autoplay\u0026gt;\u0026lt;\/video\u0026gt;\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026lt;div id=\"webcamcontrols\"\u0026gt;\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026lt;button class=\"recordbutton\" onclick=\"startRecording();\"\u0026gt;RECORD\u0026lt;\/button\u0026gt;\u003Cbr \/\u003E\u0026nbsp; \u0026nbsp; \u0026lt;\/div\u0026gt;\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\"getRecorderdedData\" return \u0026nbsp;blob that was recorded.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/kongaraju.blogspot.com\/feeds\/2762010774913656580\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2013\/05\/html5-recording-audiovideo-streams.html#comment-form","title":"15 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/2762010774913656580"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/2762010774913656580"},{"rel":"alternate","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2013\/05\/html5-recording-audiovideo-streams.html","title":"HTML5: Recording Audio,Video Streams"}],"author":[{"name":{"$t":"Raju Konga"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/10750040862243953720"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"33","height":"30","src":"\/\/3.bp.blogspot.com\/-NRmd50o6VzU\/Xl0GJ89U5nI\/AAAAAAAAFvs\/hmFaD7EEWBktvdxCDKDS8PFdbVIiGTaBgCK4BGAYYCw\/s220\/latest_pic.jpg"}}],"thr$total":{"$t":"15"}},{"id":{"$t":"tag:blogger.com,1999:blog-1933328805824469647.post-4393100859951302694"},"published":{"$t":"2013-05-24T18:23:00.000+05:30"},"updated":{"$t":"2016-01-28T23:34:27.466+05:30"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"HTML5"},{"scheme":"http://www.blogger.com/atom/ns#","term":"javascript"},{"scheme":"http://www.blogger.com/atom/ns#","term":"JQuery"},{"scheme":"http://www.blogger.com/atom/ns#","term":"media"},{"scheme":"http://www.blogger.com/atom/ns#","term":"media source api"},{"scheme":"http://www.blogger.com/atom/ns#","term":"stream"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Upload"},{"scheme":"http://www.blogger.com/atom/ns#","term":"video"},{"scheme":"http://www.blogger.com/atom/ns#","term":"webrtc"}],"title":{"type":"text","$t":"HTML5 Video Streaming: Media Source API"},"content":{"type":"html","$t":"\u003Cdiv dir=\"ltr\" style=\"text-align: left;\" trbidi=\"on\"\u003EStreaming Video using HTML5 is now very simple, Media Source API gives streaming video as chunks. playing video with chunks of data is now possible.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-Y56g-8yBbdQ\/VqpYGQIzMvI\/AAAAAAAAC58\/Nlpd-GoqHzE\/s1600\/live1.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"220\" src=\"http:\/\/4.bp.blogspot.com\/-Y56g-8yBbdQ\/VqpYGQIzMvI\/AAAAAAAAC58\/Nlpd-GoqHzE\/s400\/live1.png\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EThis API allows to generate media streams, using \u0026nbsp;javascript streaming is enabled by extending HMTLElement.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv style=\"background-color: #12a6eb; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; margin: 5px 0px; padding: 15px;\"\u003E\u003Cpre style=\"color: white; font-size: 15px;\"\u003E\u0026lt;video id=\"video\" src=\"\" height=\"300\" width=\"300\"\u0026gt;\u003C\/pre\u003E\u003Cpre style=\"color: white; font-size: 15px;\"\u003E      Video element is not supported in your browser\u003C\/pre\u003E\u003Cpre style=\"color: white; font-size: 15px;\"\u003E\u0026lt;\/video\u0026gt;\u003C\/pre\u003E\u003Cpre style=\"color: white; font-size: 15px;\"\u003E\u003C\/pre\u003E\u003Cpre style=\"color: white; font-size: 15px;\"\u003E\u003C\/pre\u003E\u003Cdiv style=\"color: white; font-size: 15px;\"\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv style=\"color: white; font-size: 15px;\"\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cpre style=\"color: white; font-size: 15px;\"\u003Ewindow.MediaSource = window.MediaSource || window.WebKitMediaSource;\u003Cbr \/\u003E\u003Cbr \/\u003Evar mediasource = new MediaSource();\u003Cbr \/\u003E\u003Cbr \/\u003Evar video = document.getElementById('video');\u003Cbr \/\u003Evideo.src = window.URL.createObjectURL(ms);\u003Cbr \/\u003E\u003Cbr \/\u003Emediasource.addEventListener('webkitsourceopen', function(e) {\u003Cbr \/\u003E  ...\u003Cbr \/\u003E  var sourceBuffer = mediasource.addSourceBuffer('video\/webm; codecs=\"vorbis,vp8\"');\u003Cbr \/\u003E  sourceBuffer.append(oneVideoWebMChunk);\u003Cbr \/\u003E  ...\u003C\/pre\u003E\u003Cpre style=\"color: white; font-size: 15px;\"\u003E\/\/start playing after video header recieved(i.e; first chunk)\u003C\/pre\u003E\u003Cpre style=\"color: white; font-size: 15px;\"\u003E\/\/call media.endOfStream(); before appending last chunk\u003C\/pre\u003E\u003Cpre style=\"color: white; font-size: 15px;\"\u003E}, false);\u003Cbr \/\u003E\u003C\/pre\u003E\u003C\/div\u003E\u003Cbr \/\u003Eplaying large volume media files is a bit hard, just make them as chunks and stream with video element. Remember that Video file header contains vital information to play video, this should be necessary to seek and play stream video. if you want to play video from a segment you should first load video fie header then load the segment data to stream your data.\u003Cbr \/\u003E\u003Cbr \/\u003Eyou start playing the stream after receiving header only.\u003Cbr \/\u003E\u003Cbr \/\u003EMedia Source API now works only chrome(\u003Cspan style=\"background-color: white; color: #222222; font-family: \u0026quot;open sans\u0026quot; , sans-serif; font-size: 14px; line-height: 21px;\"\u003E\u0026nbsp;set\u0026nbsp;\u003C\/span\u003E\u003Cspan style=\"background-color: white; color: #222222; font-size: 14px; line-height: 21px;\"\u003E\u003Cspan style=\"font-family: \u0026quot;source code pro\u0026quot; , monospace;\"\u003E--enable-media-source\u003C\/span\u003E\u003C\/span\u003E\u003Cspan style=\"background-color: white; color: #222222; font-family: \u0026quot;open sans\u0026quot; , sans-serif; font-size: 14px; line-height: 21px;\"\u003E\u0026nbsp;flag )\u003C\/span\u003E.\u003Cbr \/\u003EMedia Source Extensions specification changed, changes expected to be made in next release.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/kongaraju.blogspot.com\/feeds\/4393100859951302694\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2013\/05\/html5-video-streaming-media-source-api.html#comment-form","title":"4 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/4393100859951302694"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/4393100859951302694"},{"rel":"alternate","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2013\/05\/html5-video-streaming-media-source-api.html","title":"HTML5 Video Streaming: Media Source API"}],"author":[{"name":{"$t":"Raju Konga"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/10750040862243953720"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"33","height":"30","src":"\/\/3.bp.blogspot.com\/-NRmd50o6VzU\/Xl0GJ89U5nI\/AAAAAAAAFvs\/hmFaD7EEWBktvdxCDKDS8PFdbVIiGTaBgCK4BGAYYCw\/s220\/latest_pic.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/4.bp.blogspot.com\/-Y56g-8yBbdQ\/VqpYGQIzMvI\/AAAAAAAAC58\/Nlpd-GoqHzE\/s72-c\/live1.png","height":"72","width":"72"},"thr$total":{"$t":"4"}},{"id":{"$t":"tag:blogger.com,1999:blog-1933328805824469647.post-8367116945591186913"},"published":{"$t":"2013-02-09T13:50:00.000+05:30"},"updated":{"$t":"2016-01-28T23:37:08.371+05:30"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Gamification"},{"scheme":"http://www.blogger.com/atom/ns#","term":"HTML5"},{"scheme":"http://www.blogger.com/atom/ns#","term":"javascript"}],"title":{"type":"text","$t":"10 Gamification techniques increases your web application worth"},"content":{"type":"html","$t":"\u003Cdiv dir=\"ltr\" style=\"text-align: left;\" trbidi=\"on\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; Gamification integrates game mechanics to your web applications. gamification increase users connectivity with your application. It gives moral boost to the users and the participants. Now a days we are seeing some regular gamification strategies in \u0026nbsp;most popular social web application.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-1a-wOZaNcoE\/VqpYwrghN9I\/AAAAAAAAC6E\/aEguZlogCWU\/s1600\/Gamification-Paving-its-way-to-be-the-best-trend-of-Cloud-Computing1.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"173\" src=\"http:\/\/2.bp.blogspot.com\/-1a-wOZaNcoE\/VqpYwrghN9I\/AAAAAAAAC6E\/aEguZlogCWU\/s400\/Gamification-Paving-its-way-to-be-the-best-trend-of-Cloud-Computing1.jpg\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cbr \/\u003Eexample that are now frequently watching are\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cul style=\"text-align: left;\"\u003E\u003Cli\u003Elike\/dislike\u003C\/li\u003E\u003Cli\u003Evoting\/polls\u003C\/li\u003E\u003Cli\u003Eratings\u003C\/li\u003E\u003Cli\u003Escore\u0026nbsp;\u003C\/li\u003E\u003Cli\u003Ebadges\/tags\u003C\/li\u003E\u003Cli\u003Eprogress bars\u003C\/li\u003E\u003Cli\u003Evirtual currency \/goods\u003C\/li\u003E\u003Cli\u003Elevels\u003C\/li\u003E\u003Cli\u003Eawards\u003C\/li\u003E\u003Cli\u003Eexchanging\/share virtual things\/trading\u003C\/li\u003E\u003C\/ul\u003E\u003Cdiv\u003ELets us see how they will work on real world Environment\u0026nbsp;\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cb\u003Elike\/dislike \u003C\/b\u003E: This is most common technique now the most web applications using. Most of the users want to express their feelings on others ideas,decisions.., now a days it is quite common technique for express straight forward options like or dislike. Look at the \u0026nbsp;Example \u003Ca href=\"http:\/\/www.facebbok.com\/\"\u003EFacebook\u003C\/a\u003E\u0026nbsp;it gives users like option and the other is \u003Ca href=\"http:\/\/www.youtube.com\/\"\u003Eyoutube\u003C\/a\u003E\u0026nbsp;and many more...\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cb\u003EVoting \u003C\/b\u003E: This is mostly used for large volume of users expressing their opinion. This case for public life celebs, in this\u0026nbsp;strategy we need to get user involvement on others decisions.\u0026nbsp;go through Example once again \u003Ca href=\"http:\/\/www.facebook.com\/\"\u003EFacebook\u003C\/a\u003E polls.\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cb\u003ERatings\u003C\/b\u003E: This techniques is mostly used in olden days, sites give rating points on items and then display overall ratings of post. getting ratings of some app or some product to get the user pulse, it is almost like or dislike but it give more specific information. Example \u003Ca href=\"http:\/\/www.wikipedia.com\/\"\u003Ewikipedia\u003C\/a\u003E.\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cb\u003Escore : \u003C\/b\u003EThis technique gives scores to users and things they share. it will work around the application. giving scores to the users makes fun and boosting while using application. getting scores encourages the users for using application. Example \u003Ca href=\"http:\/\/www.stackoverflow.com\/\"\u003EStackoverflow\u003C\/a\u003E\u0026nbsp;scores.\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cb\u003EBadges :\u003C\/b\u003E\u0026nbsp;Badges are given to some point based users. giving badges extending the user levels and strength. The meaningful named badges will attract user to interact with more specific domain. Example once again \u003Ca href=\"http:\/\/www.stackoverflow.com\/\"\u003Estackoverflow\u003C\/a\u003E.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003EProgress bars\u003C\/b\u003E: Which also the common crowd using techniques to gamify web things. displaying range of status of user activity tend get more activity all over the app, user start the interaction 100% of the application. Example \u003Ca href=\"http:\/\/www.linkedin.com\/\"\u003ELinked In\u003C\/a\u003E Profile status and \u003Ca href=\"http:\/\/plus.google.com\/\"\u003EGoogle plus\u003C\/a\u003E\u0026nbsp;.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003Evirtual currency : \u003C\/b\u003EVirtual currency is also the future technique to make money from web applications. introduce currency in web applications tends to more security issues but it effects more than other techniques.what exactly is introducing money into your fun app or strategic app. \u0026nbsp;Example\u0026nbsp;\u003Ca href=\"http:\/\/www.facebook.com\/\"\u003EFacebook\u003C\/a\u003E\u0026nbsp;\u0026nbsp;virtual currency.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003ELevels\u003C\/b\u003E : Levels are given to users when they achieved something in your web app. specifing levels in your application is important to specify users profession of using. It \u0026nbsp;is so passionate to trading levels. \u0026nbsp;Example \u003Ca href=\"http:\/\/tumbler.com\/\"\u003Ethumbler\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003Eother articles\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Col style=\"text-align: left;\"\u003E\u003Cli\u003E\u003Ca href=\"http:\/\/kongaraju.blogspot.in\/2012\/07\/large-file-upload-more-than-1gb-using.html\"\u003EFile Uploads with HTML5\u003C\/a\u003E\u003C\/li\u003E\u003Cli\u003E\u003Ca href=\"http:\/\/kongaraju.blogspot.in\/2012\/08\/mastering-in-html5-webworkers.html\"\u003EWebworkers indepth tutorial\u003C\/a\u003E\u003C\/li\u003E\u003Cli\u003E\u003Ca href=\"http:\/\/kongaraju.blogspot.in\/2012\/07\/drag-and-drop-directory-upload.html\"\u003EDrag and drop Folder\u003C\/a\u003E\u003C\/li\u003E\u003C\/ol\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/kongaraju.blogspot.com\/feeds\/8367116945591186913\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2013\/02\/10-gamification-techniques-increases.html#comment-form","title":"0 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/8367116945591186913"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/8367116945591186913"},{"rel":"alternate","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2013\/02\/10-gamification-techniques-increases.html","title":"10 Gamification techniques increases your web application worth"}],"author":[{"name":{"$t":"Raju Konga"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/10750040862243953720"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"33","height":"30","src":"\/\/3.bp.blogspot.com\/-NRmd50o6VzU\/Xl0GJ89U5nI\/AAAAAAAAFvs\/hmFaD7EEWBktvdxCDKDS8PFdbVIiGTaBgCK4BGAYYCw\/s220\/latest_pic.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/2.bp.blogspot.com\/-1a-wOZaNcoE\/VqpYwrghN9I\/AAAAAAAAC6E\/aEguZlogCWU\/s72-c\/Gamification-Paving-its-way-to-be-the-best-trend-of-Cloud-Computing1.jpg","height":"72","width":"72"},"thr$total":{"$t":"0"}},{"id":{"$t":"tag:blogger.com,1999:blog-1933328805824469647.post-3180473790248372149"},"published":{"$t":"2012-11-17T12:57:00.000+05:30"},"updated":{"$t":"2015-12-23T09:46:51.447+05:30"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Drag and Drop"},{"scheme":"http://www.blogger.com/atom/ns#","term":"HTML5"},{"scheme":"http://www.blogger.com/atom/ns#","term":"javascript"},{"scheme":"http://www.blogger.com/atom/ns#","term":"JQuery"},{"scheme":"http://www.blogger.com/atom/ns#","term":"PHP"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Websocket"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Webworker"}],"title":{"type":"text","$t":"Websocket-Web RTC Real world Multiuser Demo"},"content":{"type":"html","$t":"\u003Cdiv dir=\"ltr\" style=\"text-align: left;\" trbidi=\"on\"\u003E\u003Cdiv style=\"text-align: left;\"\u003EWebRTC is one of the emerging technologies to implement video sharing and peer to peer communication. Its really simple that a developer can create video sharing for one to one. Coming to Multiuser conferencing is hard to implement.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ca href=\"https:\/\/www.webrtc-experiment.com\/RTCMultiConnection\/videoconferencing.html\" target=\"_blank\"\u003EHere is the demo for Websocket - WebRTC Real world Mulit-user Demo\u003C\/a\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EFor more information regarding WebRTC, WebWorkers and WebSocket, refer my Prev Posts.\u003C\/div\u003E\u003Cbr \/\u003EFurther Readings\u003Cbr \/\u003E\u003Col style=\"text-align: left;\"\u003E\u003Cli\u003E\u003Ca href=\"http:\/\/kongaraju.blogspot.in\/2012\/07\/large-file-upload-more-than-1gb-using.html\"\u003ELarge file upload as chunks with HTML5\u003C\/a\u003E\u003C\/li\u003E\u003Cli\u003E\u003Ca href=\"http:\/\/kongaraju.blogspot.in\/2012\/08\/mastering-in-html5-webworkers.html\"\u003EWeb workers for faster performance\u003C\/a\u003E.\u003C\/li\u003E\u003Cli\u003E\u003Ca href=\"http:\/\/kongaraju.blogspot.in\/2012\/07\/html5-websocket-file-manager.html\"\u003EHTML5 Websocket filemanager\u003C\/a\u003E\u0026nbsp;\u003C\/li\u003E\u003Cli\u003E\u003Ca href=\"http:\/\/html5managetheweb.appspot.com\/\"\u003E HTML5 APIs and features. \u003C\/a\u003E\u0026nbsp;\u003C\/li\u003E\u003C\/ol\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/kongaraju.blogspot.com\/feeds\/3180473790248372149\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2012\/11\/websocket-web-rtc-real-world-multiuser.html#comment-form","title":"0 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/3180473790248372149"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/3180473790248372149"},{"rel":"alternate","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2012\/11\/websocket-web-rtc-real-world-multiuser.html","title":"Websocket-Web RTC Real world Multiuser Demo"}],"author":[{"name":{"$t":"Raju Konga"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/10750040862243953720"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"33","height":"30","src":"\/\/3.bp.blogspot.com\/-NRmd50o6VzU\/Xl0GJ89U5nI\/AAAAAAAAFvs\/hmFaD7EEWBktvdxCDKDS8PFdbVIiGTaBgCK4BGAYYCw\/s220\/latest_pic.jpg"}}],"thr$total":{"$t":"0"}},{"id":{"$t":"tag:blogger.com,1999:blog-1933328805824469647.post-8836768572507298608"},"published":{"$t":"2012-11-03T16:01:00.001+05:30"},"updated":{"$t":"2015-12-23T10:36:22.961+05:30"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Drag and Drop"},{"scheme":"http://www.blogger.com/atom/ns#","term":"HTML5"},{"scheme":"http://www.blogger.com/atom/ns#","term":"javascript"}],"title":{"type":"text","$t":"Windows8 jquery UI theme"},"content":{"type":"html","$t":"\u003Cdiv dir=\"ltr\" style=\"text-align: left;\" trbidi=\"on\"\u003ENew jQuery UI Theme with windows 8 metro style. This theme was developed inspired by Windows metro color scheme for websites. It will create very good look and feel to websites. Here is is snapshot of theme.\u003Cbr \/\u003E\u003Cbr \/\u003Eclick here to\u0026nbsp;\u003Ca href=\"https:\/\/drive.google.com\/open?id=0Bz-7J7K0gh-CRG0zRlk3YmgwTFk\" target=\"_blank\"\u003EDownload theme\u003C\/a\u003E.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-SfH5VqsPRe4\/UJTw59zfJJI\/AAAAAAAAAac\/pnYj5VGJbFc\/s1600\/windows8+jquery+ui+theme.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"476\" src=\"http:\/\/3.bp.blogspot.com\/-SfH5VqsPRe4\/UJTw59zfJJI\/AAAAAAAAAac\/pnYj5VGJbFc\/s640\/windows8+jquery+ui+theme.png\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EHere are Modern\u0026nbsp;buttons in metro style.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ca href=\"http:\/\/ace-subido.github.com\/css3-microsoft-metro-buttons\/buttons.html?#button\" target=\"_blank\"\u003EDemo\u003C\/a\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EFurther Reading:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Col style=\"text-align: left;\"\u003E\u003Cli\u003E\u003Ca href=\"http:\/\/kongaraju.blogspot.in\/2012\/07\/large-file-upload-more-than-1gb-using.html\"\u003EUploading large files more than 1GB support with HTML5\u003C\/a\u003E\u003C\/li\u003E\u003Cli\u003E\u003Ca href=\"http:\/\/kongaraju.blogspot.in\/2012\/07\/drag-and-drop-directory-upload.html\"\u003EDrag and Drop Directory Upload with HTML5\u003C\/a\u003E.\u003C\/li\u003E\u003Cli\u003E\u003Ca href=\"http:\/\/kongaraju.blogspot.in\/2012\/08\/mastering-in-html5-webworkers.html\"\u003EHTML5 Web workers capabilities and Use cases.\u003C\/a\u003E\u0026nbsp;\u003C\/li\u003E\u003Cli\u003E\u003Ca href=\"http:\/\/kongaraju.blogspot.in\/2012\/07\/large-file-upload-more-than-1gb-using.html\"\u003EUploading file as multiple chunks using HTML5\u003C\/a\u003E\u003C\/li\u003E\u003Cli\u003E\u003Ca href=\"http:\/\/html5managetheweb.appspot.com\/\"\u003E HTML5 Features and APIs.\u003C\/a\u003E\u003C\/li\u003E\u003C\/ol\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/kongaraju.blogspot.com\/feeds\/8836768572507298608\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2012\/11\/windows8-jquery-ui-theme.html#comment-form","title":"1 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/8836768572507298608"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/8836768572507298608"},{"rel":"alternate","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2012\/11\/windows8-jquery-ui-theme.html","title":"Windows8 jquery UI theme"}],"author":[{"name":{"$t":"Raju Konga"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/10750040862243953720"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"33","height":"30","src":"\/\/3.bp.blogspot.com\/-NRmd50o6VzU\/Xl0GJ89U5nI\/AAAAAAAAFvs\/hmFaD7EEWBktvdxCDKDS8PFdbVIiGTaBgCK4BGAYYCw\/s220\/latest_pic.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/3.bp.blogspot.com\/-SfH5VqsPRe4\/UJTw59zfJJI\/AAAAAAAAAac\/pnYj5VGJbFc\/s72-c\/windows8+jquery+ui+theme.png","height":"72","width":"72"},"thr$total":{"$t":"1"}},{"id":{"$t":"tag:blogger.com,1999:blog-1933328805824469647.post-3810575164139702585"},"published":{"$t":"2012-08-01T16:45:00.000+05:30"},"updated":{"$t":"2016-01-28T23:37:57.121+05:30"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"HTML5"},{"scheme":"http://www.blogger.com/atom/ns#","term":"javascript"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Upload"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Webworker"}],"title":{"type":"text","$t":"Mastering in HTML5 Webworkers"},"content":{"type":"html","$t":"\u003Cdiv dir=\"ltr\" style=\"text-align: left;\" trbidi=\"on\"\u003E\u003Cbr \/\u003E\u003Cstyle\u003E      .code2{     box-shadow:1px 1px 4px #777777;     width:100%;     font-weight:600;     font-size:16px;     padding:15px;     border-left: 3px solid green;     border-radius:10px;     overflow: auto;    }    .heading1{     color:green;     text-shadow: 4px 4px 8px #80c297;    }    .heading2{     color: skyblue;     text-shadow: 1px 1px 0px #777;    }    .highlight{     background: e0be94;     font-weight:bold;     border-radius: 5px;     padding:0px 4px;    }    .err{     padding: 20px;     background:e64343l;     color:9c1919;    }    p{     text-align:justify;    }   \u003C\/style\u003E    \u003Cbr \/\u003EOne of the intresting useful feature of \u003Ca href=\"http:\/\/html5managetheweb.appspot.com\/\"\u003E HTML5 \u003C\/a\u003E is webworkers. Webworkers are helpful to create responsive and high computational applications. It solves many issues regarding performance of apps and high computations with less resources, we can easily migrate to webworkers to get more performance by implementing apps with webworkers. The blocking of UI and getting the kill pages and Aw,snap massages will no longer exists.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-9IuP7rW1uqY\/UB93W32D__I\/AAAAAAAAAW0\/hi_laOONfbo\/s1600\/aw-snap-google-chrome.gif\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"137\" src=\"http:\/\/2.bp.blogspot.com\/-9IuP7rW1uqY\/UB93W32D__I\/AAAAAAAAAW0\/hi_laOONfbo\/s400\/aw-snap-google-chrome.gif\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Ch3 class=\"heading1\"\u003E workers\u003C\/h3\u003Ewebworker specification api allows the authors to run the scripts in background indepandantly without affecting user interface scripts. webworkers runs like thread. computing in webworkers will give high performance to app.    \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3 class=\"heading1\"\u003Ewebworker support checking\u003C\/h3\u003EMajor user agents IE10.0,FF3.5+,chrome 4.0+,Safari6.0+,Opera10.6+ supports webworkers. Programatically checking webworker support.   \u003Cbr \/\u003E\u003Cpre class=\"code2\"\u003Eif(window.Worker)\u003Cbr \/\u003E{\u003Cbr \/\u003E console.log('webworker support');\u003Cbr \/\u003E}  \u003Cbr \/\u003Eelse{\u003Cbr \/\u003E console.log('Oops! no webworker supprt');\u003Cbr \/\u003E}\u003Cbr \/\u003E \u003C\/pre\u003E\u003Cbr \/\u003E\u003Ch3 class=\"heading1\"\u003ETypes of webworkers\u003C\/h3\u003EWe have two kinds of workers. They are\u003Cbr \/\u003E\u003Cspan class=\"highlight\"\u003EDedicated workers:\u003C\/span\u003E  it has global access, same for all the documents.\u003Cbr \/\u003E\u003Cspan class=\"highlight\"\u003EShared workers:\u003C\/span\u003E it has ports access, changes with the connection.\u003Cbr \/\u003E\u003Cspan class=\"err\"\u003E*This part covers dedicated workers and the shared workers are covered in next part.\u003C\/span\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3 class=\"heading1\"\u003EDefining worker\u003C\/h3\u003EWe can define the workers in two ways\u003Cbr \/\u003E\u003Cspan class=\"highlight\"\u003Eexternal workers \u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan class=\"highlight\"\u003EInline workers\/embended workers\u003C\/span\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3 class=\"heading1\"\u003EExternal workers\u003C\/h3\u003EDefining workers needs a url to communicate with the script through transferable objects. This example just demonstrate worker initialization.   \u003Cbr \/\u003E\u003Cpre class=\"code2\"\u003Evar worker= new Worker('worker_script.js'); \u003Cbr \/\u003E\/\/ This defines worker script path to connect\u003C\/pre\u003E\u003Cbr \/\u003E\u003Ch3 class=\"heading1\"\u003ECommunication with worker\u003C\/h3\u003Ewhen postMessage() is called worker handles the data with onmessage() event and it will perform the operations on recieved data. The below code is to send message to worker.   \u003Cbr \/\u003E\u003Cpre class=\"code2\"\u003Eworker.postMessage(\"Hi this is raju\"); \u003Cbr \/\u003E\/\/this is to send message\u003Cbr \/\u003E  \u003C\/pre\u003E\u003Cbr \/\u003E\u003Ch3 class=\"heading1\"\u003EHandling messages in workers\u003C\/h3\u003EWhen message recieved from main page the onmessage event handles data. This example is to handling messages in workers   \u003Cbr \/\u003E\u003Ch4 class=\"heading2\"\u003E ***** worker_script.js *****\u003C\/h4\u003E\u003Cpre class=\"code2\"\u003Eonmessage=function(e){\u003Cbr \/\u003E \/\/Handle the messages with event\u003Cbr \/\u003E var data=e.data;\u003Cbr \/\u003E \/\/this is the data recieved from UI\u003Cbr \/\u003E}\u003C\/pre\u003E\u003Cbr \/\u003E\u003Ch3 class=\"heading1\"\u003ESending messages from workers\u003C\/h3\u003Epostmessage() is to sending the messages to UI. This code to send message from worker.   \u003Cbr \/\u003E\u003Cpre class=\"code2\"\u003Eonmessage-function(e){\u003Cbr \/\u003E var data=e.data;\u003Cbr \/\u003E \/\/recieved data\u003Cbr \/\u003E postMessage('This is recieved message'+e.data); \u003Cbr \/\u003E \/\/sending message to UI\u003Cbr \/\u003E}\u003C\/pre\u003E\u003Cbr \/\u003E\u003Ch3 class=\"heading1\"\u003EHandling worker Messages\u003C\/h3\u003Eworker messages are handle in UI using worker onmessage event. The code just handle messages of workers.   \u003Cbr \/\u003E\u003Cpre class=\"code2\"\u003Eworker.onmessage=function(e){\u003Cbr \/\u003E var worker_data=e.data; \u003Cbr \/\u003E \/\/ recieved data from worker\u003Cbr \/\u003E alert(worker_data);\u003Cbr \/\u003E}\u003C\/pre\u003E\u003Cbr \/\u003E\u003Ch3 class=\"heading1\"\u003E Handling Errors in workers:\u003C\/h3\u003Eworker returns the error lineno, filename, message. The code displays lineno, filename and message.   \u003Cbr \/\u003E\u003Cpre class=\"code2\"\u003Eworker.onerror=function(e){\u003Cbr \/\u003Econsole.log( 'ERROR: Line '+ e.lineno+ ' in '+ e.filename+ ': '+ e.message);\u003Cbr \/\u003E}\u003Cbr \/\u003E   \u003C\/pre\u003E\u003Cbr \/\u003E\u003Ch3 class=\"heading1\"\u003E Finally a simple example of using worker. This Example exibhits how sending messsage to worker and message from worker.\u003C\/h3\u003E\u003Cbr \/\u003E\u003Ch4 class=\"heading2\"\u003E **** UI script ****\u003C\/h4\u003E\u003Cpre class=\"code2\"\u003Evar worker= new Worker('worker_script.js'); \u003Cbr \/\u003E\/\/ This defines worker script path to connect\u003Cbr \/\u003Eworker.postMessage(\"Hi this is raju\"); \u003Cbr \/\u003E\/\/this is to send message\u003Cbr \/\u003Eworker.onmessage=function(e){\u003Cbr \/\u003E var worker_data=e.data; \u003Cbr \/\u003E \/\/ recieved data from worker\u003Cbr \/\u003E alert(worker_data);\u003Cbr \/\u003E}\u003Cbr \/\u003Eworker.onerror=function(e){\u003Cbr \/\u003E console.log( 'ERROR: Line '+ e.lineno+ ' in '+ e.filename+ ': '+ e.message);\u003Cbr \/\u003E}\u003Cbr \/\u003E \u003Cbr \/\u003E  \u003C\/pre\u003E\u003Ch4 class=\"heading2\"\u003E**** worker_script.js ****\u003C\/h4\u003E\u003Cpre class=\"code2\"\u003Eonmessage-function(e){\u003Cbr \/\u003E var data=e.data; \u003Cbr \/\u003E \/\/recieved data from UI\u003Cbr \/\u003E postMessage('This is recieved message'+e.data); \u003Cbr \/\u003E \/\/sending message to UI\u003Cbr \/\u003E}\u003Cbr \/\u003E  \u003C\/pre\u003E\u003Cbr \/\u003E\u003Ch3 class=\"heading1\"\u003EStructered way of message passing to workers\/JSON Data handling in workers\u003C\/h3\u003ESuppose you need to handle the multiple computations in the workers for that you need to handle the data in stuctured format i.e; json format.   \u003Cbr \/\u003Elook at the example of handling multiple operations in the workers. This example demonstrates how to handle when multiple messages are sent to worker   \u003Cbr \/\u003E\u003Ch4 class=\"heading2\"\u003E **** main page ****\u003C\/h4\u003E\u003Cpre class=\"code2\"\u003Evar worker=new Worker('worker_script.js');\u003Cbr \/\u003E  \u003Cbr \/\u003Eworker.postmessage(JSON.stringify({'op' : 'mult', x : 4, y : 6}));\u003Cbr \/\u003Eworker.postmessage(JSON.stringify({'op' : 'add', x : 6, y : 9}));\u003Cbr \/\u003Eworker.postmessage('wrong data');\u003Cbr \/\u003E  \u003Cbr \/\u003Eworker.onmessage=function(e){\u003Cbr \/\u003E alert(e.data)\u003Cbr \/\u003E}\u003Cbr \/\u003E \u003C\/pre\u003E\u003Ch4 class=\"heading2\"\u003E**** worker_script.js ****\u003C\/h4\u003E\u003Cpre class=\"code2\"\u003Efunction addNumbers(x,y) {\u003Cbr \/\u003E     return x + y;\u003Cbr \/\u003E}\u003Cbr \/\u003E \u003Cbr \/\u003Efunction mulNumbers(x,y) {\u003Cbr \/\u003E   return x*y;\u003Cbr \/\u003E}\u003Cbr \/\u003E  \u003Cbr \/\u003Eonmessage = function (event) {\u003Cbr \/\u003E    var data = JSON.parse(event.data);\u003Cbr \/\u003E \u003Cbr \/\u003E    switch(data.op) {\u003Cbr \/\u003E        case 'mult':\u003Cbr \/\u003E        postMessage(mulNumbers(data.x, data.y));\u003Cbr \/\u003E        break;\u003Cbr \/\u003E        case 'add':\u003Cbr \/\u003E        postMessage(addNumbers(data.x, data.y));\u003Cbr \/\u003E        break;\u003Cbr \/\u003E        default:\u003Cbr \/\u003E        postMessage(\"Wrong operation specified\");\u003Cbr \/\u003E    }\u003Cbr \/\u003E};\u003Cbr \/\u003E\u003C\/pre\u003E\u003Cbr \/\u003EHere the code is for sending addition and multiple requests and processing computation in worker then return the result to main page. \u003Cbr \/\u003E\u003Ch3 class=\"heading1\"\u003E workers\/ Embended workers:\u003C\/h3\u003EInline workers can ba added in two ways one is by using \u003Cspan class=\"highlight\"\u003EcreateObjectURL\u003C\/span\u003E and other is script tag type attribute \u003Cspan class=\"highlight\"\u003Eworker\/javascript\u003C\/span\u003E. This example demonstrate how to add inline workers using blob and createObjectURl.\u003Cbr \/\u003E\u003Cpre class=\"code2\"\u003Evar bb = new BlobBuilder();\u003Cbr \/\u003Ebb.append(\"onmessage = \u003Cbr \/\u003Efunction(e) \u003Cbr \/\u003E{ \u003Cbr \/\u003E postMessage('Inline worker creation'); \u003Cbr \/\u003E}\");\u003Cbr \/\u003E\u003Cbr \/\u003Evar blobURL = window.URL.createObjectURL(bb.getBlob());\u003Cbr \/\u003E\u003Cbr \/\u003Evar worker = new Worker(blobURL);\u003Cbr \/\u003Eworker.onmessage = function(e) {\u003Cbr \/\u003E  alert(e.data)\u003Cbr \/\u003E};\u003Cbr \/\u003Eworker.postMessage();\u003Cbr \/\u003E\u003Cbr \/\u003E\u003C\/pre\u003EThe above code initializes BlobBuilder and append it with worker code.\u003Cbr \/\u003EThen it create url for blob.\u003Cbr \/\u003EFinally Initializes the worker with generated URL.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3 class=\"heading1\"\u003ESub workers:\u003C\/h3\u003EDeviding tasks among workers is the easy using subworkers. Here we are taking multiple operations and passing the objects to the main worker and it will divert the calls to subworkers. \u003Cbr \/\u003E\u003Ch4 class=\"heading2\"\u003E**** main page ****\u003C\/h4\u003E\u003Cpre class=\"code2\"\u003Evar worker=new Worker('worker_script.js');\u003Cbr \/\u003E  \u003Cbr \/\u003Eworker.postmessage(JSON.stringify({'op' : 'mult', x : 4, y : 6}));\u003Cbr \/\u003Eworker.postmessage(JSON.stringify({'op' : 'add', x : 6, y : 9}));\u003Cbr \/\u003Eworker.postmessage('wrong data');\u003Cbr \/\u003E\u003Cbr \/\u003Eworker.onmessage=function(e){\u003Cbr \/\u003E alert(e.data)\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003C\/pre\u003E\u003Ch4 class=\"heading2\"\u003E**** worker_script.js ****\u003C\/h4\u003E\u003Cpre class=\"code2\"\u003E  \u003Cbr \/\u003Evar thisworker=this;\u003Cbr \/\u003Evar add = new Worker('subworker1.js');\u003Cbr \/\u003Evar mult= new Worker('subworker2.js');\u003Cbr \/\u003E  \u003Cbr \/\u003Eadd.onmessage=function(e){\u003Cbr \/\u003E thisworker.postMessage(e.data);\u003Cbr \/\u003E} \u003Cbr \/\u003E\u003Cbr \/\u003Emult.onmessage=function(e){\u003Cbr \/\u003E thisworker.postMessage(e.data);\u003Cbr \/\u003E} \u003Cbr \/\u003E\u003Cbr \/\u003Ethisworker.onmessage = function (event) {\u003Cbr \/\u003E    var data = JSON.parse(event.data);\u003Cbr \/\u003E \u003Cbr \/\u003E    switch(data.op) {\u003Cbr \/\u003E        case 'mult':\u003Cbr \/\u003E        mult.postMessage(JSON.stringify(data.x, data.y));\u003Cbr \/\u003E        break;\u003Cbr \/\u003E        case 'add':\u003Cbr \/\u003E        add.postMessage(JSON.stringify(data.x, data.y));\u003Cbr \/\u003E        break;\u003Cbr \/\u003E        default:\u003Cbr \/\u003E       thisworker.postMessage(\"Wrong operation specified\");\u003Cbr \/\u003E    }\u003Cbr \/\u003E};\u003Cbr \/\u003E\u003C\/pre\u003E\u003Ch4 class=\"heading2\"\u003E**** subworker1.js ****\u003C\/h4\u003E\u003Cpre class=\"code2\"\u003Eonmessage=function(e) {\u003Cbr \/\u003E var data=JSON.parse(e.data)\u003Cbr \/\u003E    var result= data.x + data.y;\u003Cbr \/\u003E    postMessage(result);\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003C\/pre\u003E\u003Ch4 class=\"heading2\"\u003E**** subworker2.js ****\u003C\/h4\u003E\u003Cpre class=\"code2\"\u003Eonmessage = function(e) {\u003Cbr \/\u003E var data = JSON.parse(e.data)\u003Cbr \/\u003E var result = data.x * data.y;\u003Cbr \/\u003E postMessage(result);\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003C\/pre\u003E\u003Cbr \/\u003EThe above code simple sends the send the multiple messages to the main thread. Then the processing of cumputation done in subworkers.   \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3 class=\"heading1\"\u003ETerminating the webworkers\u003C\/h3\u003ETwo ways you can terminate workers.\u003Cbr \/\u003EFrom app : \u003Cspan class=\"highlight\"\u003Eworker.termiante();\u003C\/span\u003E\u003Cbr \/\u003EFrom worker: \u003Cspan class=\"highlight\"\u003Eself.close();\u003C\/span\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3 class=\"heading1\"\u003EWorkers Not have access:\u003C\/h3\u003EThe DOM\u003Cbr \/\u003EThe window object\u003Cbr \/\u003EThe document object\u003Cbr \/\u003EThe parent object\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3 class=\"heading1\"\u003EImporting scripts in workers\u003C\/h3\u003EimportScripts('Base64.js'); \/\/Single script\u003Cbr \/\u003EimportScripts('Base64.js','FileSaver.js'); \/\/multiple scripts importing\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cspan class=\"err\"\u003E*DOM based scripts cannot be import\u003Cbr \/\u003E  **After importing total script only worker started\u003Cbr \/\u003E  **imported scripts errors should be handled\u003C\/span\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3 class=\"heading1\"\u003E Worker specific classes\u003C\/h3\u003EFileReaderSync to read file or blob inside worker\u003Cbr \/\u003EFileWriterSync to write file\u003Cbr \/\u003ERequestFileSystemSync for file system handling\u003Cbr \/\u003EIndexedDBSync in for client side database storage \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3 class=\"heading1\"\u003EDOM functions available in workers\u003C\/h3\u003Eatob()  \/\/Not in chrome\u003Cbr \/\u003Ebtoa()  \/\/Not in chrome\u003Cbr \/\u003Edump()\u003Cbr \/\u003EclearInterval()\u003Cbr \/\u003EclearTimeout()\u003Cbr \/\u003EsetInterval()\u003Cbr \/\u003EsetTimeout()\u003Cbr \/\u003ENavigator object\u003Cbr \/\u003Elocation object\u003Cbr \/\u003EApplication Cache\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cspan class=\"err\"\u003E*Some useful APIs are not supported by webworkers like websockets,localstorage,etc..\u003C\/span\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3 class=\"heading1\"\u003EClasses available in workers\u003C\/h3\u003EXMLHttpRequest()\u003Cbr \/\u003EWorker()\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3 class=\"heading1\"\u003EWebworkers Errors and Debugging:\u003C\/h3\u003EChrome developer tools has an advantage of debugging worker scripts. and you can place breakpoints, scope of variables etc... You can also use \u003Ca href=\"http:\/\/www.stacktracejs.com\/\"\u003Estacktrace.js\u003C\/a\u003E  \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3 class=\"heading1\"\u003ESecurity locks \u003C\/h3\u003EDue to chrome security issues and same origin consideration, chrome doesn't allow local file access as worker script, for that you should start the chrome with the flag \u003Cspan class=\"highlight\"\u003E--allow-file-access-from-files\u003C\/span\u003E or you need to run the app from your \u003Cspan class=\"highlight\"\u003Elocal host\u003C\/span\u003E.   \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cspan class=\"err\"\u003E   Things you should keep in mind the objects cannots be passed through webworkers if you try to do this. You will get DATA_CLONE_ERR DOM Exception 25.\u003Cbr \/\u003E   Some API's are not supported in workers, if you try to pass or access unsupported API's in webworkers, you will get SECURITY_ERR DOM Exception 18.\u003Cbr \/\u003E   If You want pass the objects to the workers,you should use JSON.stringify for object to string and JSON.parse or eval() for String to object.\u003Cbr \/\u003E    \u003C\/span\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ca href=\"http:\/\/kongaraju.blogspot.in\/2012\/07\/large-file-upload-more-than-1gb-using.html\"\u003E HTML5 File Transfer using webworkers and XHR2 is demonstrated here.\u0026nbsp;\u003C\/a\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EFurther reading :\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Col style=\"text-align: left;\"\u003E\u003Cli\u003E\u003Ca href=\"http:\/\/www.html5rocks.com\/en\/tutorials\/workers\/basics\/\" target=\"_blank\"\u003Ewebworker detail explanation\u003C\/a\u003E\u0026nbsp;\u003C\/li\u003E\u003Cli\u003E\u003Ca href=\"https:\/\/developer.mozilla.org\/en\/Using_web_workers\" target=\"_blank\"\u003EUsing webworkers\u003C\/a\u003E\u003C\/li\u003E\u003Cli\u003E\u003Ca href=\"http:\/\/www.whatwg.org\/specs\/web-apps\/current-work\/...\/workers.html\" target=\"_blank\"\u003EWebworker standard\u003C\/a\u003E\u0026nbsp;\u003C\/li\u003E\u003Cli\u003E\u003Ca href=\"http:\/\/www.w3.org\/TR\/workers\/\" target=\"_blank\"\u003EWebworker specificaton\u003C\/a\u003E\u0026nbsp; \u003C\/li\u003E\u003Cli\u003E\u003Ca href=\"http:\/\/html5managetheweb.appspot.com\/\"\u003E HTML5 Presentation\u003C\/a\u003E\u0026nbsp; \u003C\/li\u003E\u003C\/ol\u003E\u0026nbsp;      \u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/kongaraju.blogspot.com\/feeds\/3810575164139702585\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2012\/08\/mastering-in-html5-webworkers.html#comment-form","title":"3 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/3810575164139702585"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/3810575164139702585"},{"rel":"alternate","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2012\/08\/mastering-in-html5-webworkers.html","title":"Mastering in HTML5 Webworkers"}],"author":[{"name":{"$t":"Raju Konga"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/10750040862243953720"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"33","height":"30","src":"\/\/3.bp.blogspot.com\/-NRmd50o6VzU\/Xl0GJ89U5nI\/AAAAAAAAFvs\/hmFaD7EEWBktvdxCDKDS8PFdbVIiGTaBgCK4BGAYYCw\/s220\/latest_pic.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/2.bp.blogspot.com\/-9IuP7rW1uqY\/UB93W32D__I\/AAAAAAAAAW0\/hi_laOONfbo\/s72-c\/aw-snap-google-chrome.gif","height":"72","width":"72"},"thr$total":{"$t":"3"}},{"id":{"$t":"tag:blogger.com,1999:blog-1933328805824469647.post-5752155611087110442"},"published":{"$t":"2012-07-24T18:38:00.001+05:30"},"updated":{"$t":"2016-01-28T23:41:59.399+05:30"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Drag and Drop"},{"scheme":"http://www.blogger.com/atom/ns#","term":"HTML5"},{"scheme":"http://www.blogger.com/atom/ns#","term":"javascript"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Upload"}],"title":{"type":"text","$t":"Drag and Drop Directory\/Folder Upload HTML5"},"content":{"type":"html","$t":"\u003Cdiv dir=\"ltr\" style=\"text-align: left;\" trbidi=\"on\"\u003E\u003Cbr \/\u003E\u003Ch3 style=\"color: #222222; font-family: 'Open Sans', sans-serif; font-size: 20px; font-weight: 300; line-height: 1.125; margin: 1em 0px 0.5em; text-align: -webkit-auto; text-transform: uppercase;\"\u003E   HOW TO HANDLE Directory uploads\u003C\/h3\u003E\u003Cdiv\u003EYou can upload directory by using webkitdirectory or mozdirectory\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003E\u0026lt;input type='file' \u0026nbsp;webkitdirectory='true' \u0026nbsp; mozdirectory='true' \u0026gt;\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv style=\"color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 1.5; text-align: -webkit-auto;\"\u003EChrome 21 allows you to drop a folder or multiple folders into the browser window. To handle these, you need to change the way how you handle dropped objects.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-mRKSqcL1tkU\/VqpZ1vyQg5I\/AAAAAAAAC6Q\/yUau_ggM9_w\/s1600\/drive.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"Drag and Drop Directory\/Folder Upload HTML5\" border=\"0\" height=\"263\" src=\"http:\/\/3.bp.blogspot.com\/-mRKSqcL1tkU\/VqpZ1vyQg5I\/AAAAAAAAC6Q\/yUau_ggM9_w\/s400\/drive.jpg\" title=\"\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cpre class=\" prettyprint\" style=\"-webkit-transition: border-color 0.3s ease-in-out; border-color: rgb(240, 69, 48); border-left-style: solid; border-left-width: 3px; color: #222222; font-family: monospace, monospace; font-size: 13px; line-height: 16px; margin: 1em; padding: 1em; text-align: -webkit-auto; white-space: pre-wrap; word-wrap: break-word;\"\u003E\u003Ccode style=\"background-color: transparent; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; font-family: monospace, monospace; font-size: 1em; padding: 0px;\"\u003E\u003Cspan class=\"tag\" style=\"color: #8b8bb2; font-size: inherit; margin-left: 10px; padding: 0px;\"\u003E\u0026lt;div\u003C\/span\u003E\u003Cspan class=\"pln\" style=\"color: black;\"\u003E \u003C\/span\u003E\u003Cspan class=\"atn\" style=\"color: #660066;\"\u003Eid\u003C\/span\u003E\u003Cspan class=\"pun\" style=\"color: #666600;\"\u003E=\u003C\/span\u003E\u003Cspan class=\"atv\" style=\"color: #008800;\"\u003E”dropzone”\u003C\/span\u003E\u003Cspan class=\"tag\" style=\"color: #8b8bb2; font-size: inherit; margin-left: 10px; padding: 0px;\"\u003E\u0026gt;\u0026lt;\/div\u0026gt;\u003C\/span\u003E\u003Cspan class=\"pln\" style=\"color: black;\"\u003E\u003Cbr \/\u003E\u003Cbr \/\u003Evar dropzone = document.getElementById('dropzone');\u003Cbr \/\u003Edropzone.ondrop = function(e) {\u003Cbr \/\u003E  var length = e.dataTransfer.items.length;\u003Cbr \/\u003E  for (var i = 0; i \u0026lt; length; i++) {\u003Cbr \/\u003E    var entry = e.dataTransfer.items[i].webkitGetAsEntry();\u003Cbr \/\u003E    if (entry.isFile) {\u003Cbr \/\u003E      ... \/\/ do whatever you want\u003Cbr \/\u003E    } else if (entry.isDirectory) {\u003Cbr \/\u003E      ... \/\/ do whatever you want\u003Cbr \/\u003E    }\u003Cbr \/\u003E  }\u003Cbr \/\u003E};\u003C\/span\u003E\u003C\/code\u003E\u003C\/pre\u003ENotice that big change in drop event . chrome introduced call webkitGetAsEntry(). It will specify whether the dropped object is file or folder. and it will return Name and Fullpath also.\u003Cbr \/\u003E\u003Cbr \/\u003Eentry.fullPath() will give the path of the item.\u003Cbr \/\u003E\u003Cbr \/\u003EFor reading the entries in the directory entry you have to use directory reader.\u003Cbr \/\u003EIn case of direcory follow the steps\u003Cbr \/\u003E\u003Col style=\"text-align: left;\"\u003E\u003Cli\u003E\u0026nbsp;call createReaer callback for direntry\u0026nbsp;\u003C\/li\u003E\u003Cli\u003Ethen store the entries in array\u003C\/li\u003E\u003Cli\u003Eagain check for entry type\u003C\/li\u003E\u003Cli\u003EIn case of file call the file callback\u003C\/li\u003E\u003Cli\u003Eit will return filename,size and mime type\u003C\/li\u003E\u003C\/ol\u003EHere sample algorithm code for directory entry reading\u003Cbr \/\u003E\u003Cpre class=\" prettyprint\" style=\"border-color: rgb(240, 69, 48); border-left: 3px solid rgb(240, 69, 48); color: #222222; font-family: monospace,monospace; font-size: 13px; line-height: 16px; margin: 1em; padding: 1em; white-space: pre-wrap; word-wrap: break-word;\"\u003E\u003Ccode style=\"background-color: transparent; border-radius: 2px 2px 2px 2px; font-family: monospace,monospace; font-size: 1em; padding: 0px;\"\u003E\u003Cspan class=\"pln\" style=\"color: black;\"\u003Evar direntry=entry.createReader();\u003Cbr \/\u003Eentries=direntry.entries(); \u003Cbr \/\u003Eentries.forEach(function(entry){\u003Cbr \/\u003E\/\/again check for again type\u003Cbr \/\u003E}); \u003C\/span\u003E\u003C\/code\u003E\u003C\/pre\u003E\u003Cbr \/\u003EFurther Reading:\u003Cbr \/\u003E\u003Col style=\"text-align: left;\"\u003E\u003Cli\u003E\u003Ca href=\"http:\/\/updates.html5rocks.com\/2012\/07\/Drag-and-drop-a-folder-onto-Chrome-now-available\" target=\"_blank\"\u003EHtml5 Rocks updates\u003C\/a\u003E\u0026nbsp;\u003C\/li\u003E\u003Cli\u003E\u003Ca href=\"http:\/\/html5-demos.appspot.com\/static\/dnd\/all_types_of_import.htm\" target=\"_blank\"\u003EDemo of Drag and drop DIrectory upload\u003C\/a\u003E \u003C\/li\u003E\u003Cli\u003E\u003Ca href=\"http:\/\/html5managetheweb.appspot.com\/\"\u003E HTML5 Presentation \u003C\/a\u003E\u003C\/li\u003E\u003C\/ol\u003E\u003Cdiv\u003E\u0026nbsp; \u003C\/div\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/kongaraju.blogspot.com\/feeds\/5752155611087110442\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2012\/07\/drag-and-drop-directory-upload.html#comment-form","title":"4 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/5752155611087110442"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/5752155611087110442"},{"rel":"alternate","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2012\/07\/drag-and-drop-directory-upload.html","title":"Drag and Drop Directory\/Folder Upload HTML5"}],"author":[{"name":{"$t":"Raju Konga"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/10750040862243953720"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"33","height":"30","src":"\/\/3.bp.blogspot.com\/-NRmd50o6VzU\/Xl0GJ89U5nI\/AAAAAAAAFvs\/hmFaD7EEWBktvdxCDKDS8PFdbVIiGTaBgCK4BGAYYCw\/s220\/latest_pic.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/3.bp.blogspot.com\/-mRKSqcL1tkU\/VqpZ1vyQg5I\/AAAAAAAAC6Q\/yUau_ggM9_w\/s72-c\/drive.jpg","height":"72","width":"72"},"thr$total":{"$t":"4"}},{"id":{"$t":"tag:blogger.com,1999:blog-1933328805824469647.post-4864375538009144269"},"published":{"$t":"2012-07-19T11:26:00.000+05:30"},"updated":{"$t":"2015-12-23T10:12:23.770+05:30"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"HTML5"},{"scheme":"http://www.blogger.com/atom/ns#","term":"javascript"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Upload"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Websocket"}],"title":{"type":"text","$t":"HTML5 Websocket File manager"},"content":{"type":"html","$t":"\u003Cdiv dir=\"ltr\" style=\"text-align: left;\" trbidi=\"on\"\u003EThis article demonstrates how to build file manager using Websockets and with other HTML5 emerging technologies.\u003Cbr \/\u003E\u003Cbr \/\u003EWebSockets one of the powerful communication mechanism \u0026nbsp;to send and receive the messages bidirectionally between client and server. WebSockets give you the facility to load real time data and visualize it.\u003Cbr \/\u003E\u003Cbr \/\u003EPDF.js, webodf.js and so many other libraries exists over web to load \u0026nbsp;and see the files in browser. The HTML5 Drag Drop API has the Capability to get the files from the user in a way they can drop in the zone. With \u0026nbsp;Drag and Drop user can upload Folder and multiple files.\u003Cbr \/\u003E\u003Cbr \/\u003EOne other HTML5 very useful API WebWorkers it helps to do the operation in their own thread. it gives boost to javascript to implement multi-threading.\u003Cbr \/\u003E\u003Cbr \/\u003EAnd Finally there are lots of libraries to show the structure of different levels in tree view and the grid structure.\u003Cbr \/\u003E\u003Cbr \/\u003EBy using all these feature one can create easily a file manager with all the below features.\u003Cbr \/\u003E\u003Col type=\"1\"\u003E\u003Cli\u003E     Opening the document in the cloud     \u003C\/li\u003E\u003Cli\u003E     Drag and Drop upload     \u003C\/li\u003E\u003Cli\u003E     High performance File operations     \u003C\/li\u003E\u003Cli\u003E     Large file upload(\u0026gt;1GB)\u003C\/li\u003E\u003Cli\u003E     Directory Upload     \u003C\/li\u003E\u003Cli\u003E     Multiple file upload     \u003C\/li\u003E\u003Cli\u003E     Tree Based Presentation     \u003C\/li\u003E\u003Cli\u003E     Document information     \u003C\/li\u003E\u003C\/ol\u003Eand many more...\u003Cbr \/\u003E\u003Cbr \/\u003EDropbox, Google Drive and now you can have yours...\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E\u0026nbsp;\u003C\/b\u003EFurther Reading:\u003Cbr \/\u003E\u003Col style=\"text-align: left;\"\u003E\u003Cli\u003E\u003Cb\u003E\u003Ca href=\"http:\/\/www.html5rocks.com\/en\/tutorials\/websockets\/basics\/\" target=\"_blank\"\u003EWebsocket Basics\u003C\/a\u003E\u0026nbsp;\u003C\/b\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cb\u003E\u003Ca href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/WebSocket\" target=\"_blank\"\u003EMozilla Developer Network\u003C\/a\u003E\u0026nbsp;\u003C\/b\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cb\u003E\u003Ca href=\"http:\/\/www.w3.org\/TR\/2009\/WD-websockets-20091222\" target=\"_blank\"\u003EWebsocket specification\u003C\/a\u003E\u0026nbsp;\u003C\/b\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cb\u003E\u003Ca href=\"http:\/\/websocket.org\/\" target=\"_blank\"\u003EWebsocket community\u003C\/a\u003E\u0026nbsp;\u003C\/b\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cb\u003E\u003Ca href=\"http:\/\/html5managetheweb.appspot.com\/\"\u003E HTML5 \u003C\/a\u003E\u0026nbsp;\u003C\/b\u003E\u003C\/li\u003E\u003C\/ol\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/kongaraju.blogspot.com\/feeds\/4864375538009144269\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2012\/07\/html5-websocket-file-manager.html#comment-form","title":"4 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/4864375538009144269"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/4864375538009144269"},{"rel":"alternate","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2012\/07\/html5-websocket-file-manager.html","title":"HTML5 Websocket File manager"}],"author":[{"name":{"$t":"Raju Konga"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/10750040862243953720"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"33","height":"30","src":"\/\/3.bp.blogspot.com\/-NRmd50o6VzU\/Xl0GJ89U5nI\/AAAAAAAAFvs\/hmFaD7EEWBktvdxCDKDS8PFdbVIiGTaBgCK4BGAYYCw\/s220\/latest_pic.jpg"}}],"thr$total":{"$t":"4"}},{"id":{"$t":"tag:blogger.com,1999:blog-1933328805824469647.post-1257284930538366397"},"published":{"$t":"2012-07-13T16:17:00.000+05:30"},"updated":{"$t":"2015-12-24T18:01:28.822+05:30"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Drag and Drop"},{"scheme":"http://www.blogger.com/atom/ns#","term":"HTML5"},{"scheme":"http://www.blogger.com/atom/ns#","term":"javascript"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Upload"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Webworker"}],"title":{"type":"text","$t":"Large file upload more than 1GB using HTML5 Web workers, Drag and Drop and XHR2"},"content":{"type":"html","$t":"\u003Cdiv dir=\"ltr\" style=\"text-align: left;\" trbidi=\"on\"\u003E\u003Cstyle\u003E   .pre{     border-radius:5px;     border:0px solid gray;     color: white !important;     background-color: #2E3436;     text-shadow: 0px 0px 1px #9e9e9e;     font-weight:600;     overflow: auto;     margin:5px;     padding:5px;     font-size:14px;    }    .high{     color:red;     text-shadow: 0px 0px 1px #9e9e9e;    }    .bold    {     color:green;     text-shadow: 1px 1px 3px #9e9e9e;         }    .para{     color:black;     font-size:14px;     text-align:justify;          }     \u003C\/style\u003E  \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ca href=\"http:\/\/html5managetheweb.appspot.com\/\"\u003ETo know about HTML5 \u003C\/a\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EThis tutorial provides a guide and code examples for leveraging the large file upload using File API inside of a Web Worker.     While we are trying to upload large file, we getting the problems like browser showing kill pages or unresponsive page etc.. This are because of we are blocking the user agent and we are utilising lot of CPU, it will lead to performance down or user agent getting continuos processing. We need to avoid the blocking or performance utilization on document. Solution for that is simple, we need to upload file using background processing nothing but using webworkers. By using webworkers we can upload files in background so that no errors or problems will occur.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-9IuP7rW1uqY\/UB93W32D__I\/AAAAAAAAAW0\/hi_laOONfbo\/s1600\/aw-snap-google-chrome.gif\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"138\" src=\"http:\/\/2.bp.blogspot.com\/-9IuP7rW1uqY\/UB93W32D__I\/AAAAAAAAAW0\/hi_laOONfbo\/s400\/aw-snap-google-chrome.gif\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EIn some cases reading the entire file into memory isn't the best option. For example, say you wanted to write an async file uploader. One possible way to speed up the upload would be to read and send the file in separate byte range chunks. The server component would then be responsible for reconstructing the file content in the correct order.  Lucky for us, the File interface supports a slice method to support this use case. The method takes a starting byte as its first argument, ending byte as its second, and an option content type string as a third.\u003Cbr \/\u003E\u003Cbr \/\u003EI was demonstrated the upload using file input and drag and drop. you could use client-side logic to verify an upload's mimetype matches its file extension or restrict the size of an upload. The most straightforward way to load a file is to use a standard \u0026lt;input type=\"file\"\u0026gt; element. JavaScript returns the list of selected File objects as a FileList. Here's an example that uses the 'multiple' attribute to allow selecting several files at once. Another technique for loading files is native drag and drop from the desktop to the browser. This example include drag and drop support. The following example demonstrates reading chunks of a file.   \u003Cbr \/\u003E\u003Cbr \/\u003EIf you load models or textures from external files, due to browsers' \"same origin policy\" security restrictions, loading from a file system will fail with a security exception. To solve this  Start Chrome executable with a command line flag:  chrome --allow-file-access-from-files  or else run from local server \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EThis will solve the following problems:    \u003Cbr \/\u003E\u003Col\u003E\u003Cli\u003E     How to upload large file more than 1GB     \u003C\/li\u003E\u003Cli\u003E     Synchronous File Uploading     \u003C\/li\u003E\u003Cli\u003E     Large File upload with XHR2 uisng webworkers      \u003C\/li\u003E\u003Cli\u003E     Drag and Drop File upload     \u003C\/li\u003E\u003Cli\u003E     Multiple File Upload without blocking UI     \u003C\/li\u003E\u003Cli\u003E     Increasing performance While File uploads     \u003C\/li\u003E\u003Cli\u003E     Background Processing of file uploads     \u003C\/li\u003E\u003Cli\u003E     Slicing the file      \u003C\/li\u003E\u003C\/ol\u003Ecode:   \u003Cbr \/\u003E\u003Cb class=\"bold\"\u003EHTML\u003C\/b\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cpre class=\"pre\"\u003E  \u0026lt;input type=\"file\" id=\"files\" name=\"files[]\" multiple \/\u0026gt;\u003Cbr \/\u003E  \u0026lt;div id=\"drop_zone\"\u0026gt;\u003Cbr \/\u003E   Drop files here\u003Cbr \/\u003E  \u0026lt;\/div\u0026gt; \u003Cbr \/\u003E\u003Cbr \/\u003E  \u0026lt;output id=\"list\"\u0026gt;\u0026lt;\/output\u0026gt;\u003Cbr \/\u003E  \u003C\/pre\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb class=\"bold\"\u003EJavaScript\u003C\/b\u003E  \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cpre class=\"pre\"\u003E\u003Cspan class=\"high\"\u003E\u003Cbr \/\u003E var worker = new Worker('fileupload.js');\u003Cbr \/\u003E worker.onmessage = function(e) {\u003Cbr \/\u003E alert(e.data);\u003Cbr \/\u003E}\u003Cbr \/\u003Eworker.onerror =werror;\u003Cbr \/\u003Efunction werror(e) {\u003Cbr \/\u003E  console.log('ERROR: Line ', e.lineno, ' in ', e.filename, ': ', e.message);\u003Cbr \/\u003E }\u003C\/span\u003E\u003Cbr \/\u003Efunction handleFileSelect(evt) {\u003Cbr \/\u003E evt.stopPropagation();\u003Cbr \/\u003E evt.preventDefault();\u003Cbr \/\u003E\u003Cbr \/\u003E var files = evt.dataTransfer.files||evt.target.files;\u003Cbr \/\u003E \/\/ FileList object.\u003Cbr \/\u003E \u003Cspan class=\"high\"\u003E\u003Cbr \/\u003E worker.postMessage({\u003Cbr \/\u003E 'files' : files\u003Cbr \/\u003E });\u003C\/span\u003E\u003Cbr \/\u003E \/\/Sending File list to worker\u003Cbr \/\u003E \/\/ files is a FileList of File objects. List some properties.\u003Cbr \/\u003E var output = [];\u003Cbr \/\u003E for (var i = 0, f; f = files[i]; i++) {\u003Cbr \/\u003E  output.push('\u0026lt;li\u0026gt;\u0026lt;strong\u0026gt;', escape(f.name), '\u0026lt;\/strong\u0026gt; (', f.type || 'n\/a', ') - ', f.size, ' bytes, last modified: ', f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n\/a', '\u0026lt;\/li\u0026gt;');\u003Cbr \/\u003E }\u003Cbr \/\u003E document.getElementById('list').innerHTML = '\u0026lt;ul\u0026gt;' + output.join('') + '\u0026lt;\/ul\u0026gt;';\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003Efunction handleDragOver(evt) {\u003Cbr \/\u003E evt.stopPropagation();\u003Cbr \/\u003E evt.preventDefault();\u003Cbr \/\u003E evt.dataTransfer.dropEffect = 'copy';\u003Cbr \/\u003E \/\/ Explicitly show this is a copy.\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E\/\/ Setup the dnd listeners.\u003Cbr \/\u003Evar dropZone = document.getElementById('drop_zone');\u003Cbr \/\u003EdropZone.addEventListener('dragover', handleDragOver, false);\u003Cbr \/\u003EdropZone.addEventListener('drop', handleFileSelect, false);\u003Cbr \/\u003E document.getElementById('files').addEventListener('change', handleFileSelect, false);\u003Cbr \/\u003E\u003C\/pre\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb class=\"bold\"\u003EWorker (fileupload.js) :\u003C\/b\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cpre class=\"pre\"\u003Evar file = [], p = true;\u003Cbr \/\u003Efunction upload(blobOrFile) {\u003Cbr \/\u003E var xhr = new XMLHttpRequest();\u003Cbr \/\u003E xhr.open('POST', '\/server', false);\u003Cbr \/\u003E xhr.onload = function(e) {\u003Cbr \/\u003E };\u003Cbr \/\u003E xhr.send(blobOrFile);\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003Efunction process() {\u003Cbr \/\u003E for (var j = 0; j \u0026lt;file.length; j++) {\u003Cbr \/\u003E  var blob = file[j];\u003Cbr \/\u003E\u003Cbr \/\u003E  const BYTES_PER_CHUNK = 1024 * 1024;\u003Cbr \/\u003E  \/\/ 1MB chunk sizes.\u003Cbr \/\u003E  const SIZE = blob.size;\u003Cbr \/\u003E\u003Cbr \/\u003E  var start = 0;\u003Cbr \/\u003E  var end = BYTES_PER_CHUNK;\u003Cbr \/\u003E\u003Cbr \/\u003E  while (start \u0026lt; SIZE) {\u003Cbr \/\u003E\u003Cbr \/\u003E   if ('mozSlice' in blob) {\u003Cbr \/\u003E    var chunk = blob.mozSlice(start, end);\u003Cbr \/\u003E   } else {\u003Cbr \/\u003E    var chunk = blob.webkitSlice(start, end);\u003Cbr \/\u003E   }\u003Cbr \/\u003E\u003Cbr \/\u003E   upload(chunk);\u003Cbr \/\u003E\u003Cbr \/\u003E   start = end;\u003Cbr \/\u003E   end = start + BYTES_PER_CHUNK;\u003Cbr \/\u003E  }\u003Cbr \/\u003E  p = ( j = file.length - 1) ? true : false;\u003Cbr \/\u003E  self.postMessage(blob.name + \" Uploaded Succesfully\");\u003Cbr \/\u003E }\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003Eself.onmessage = function(e) {\u003Cbr \/\u003E\u003Cspan class=\"high\"\u003E\u003Cbr \/\u003Efor (var j = 0; j \u0026lt; e.data.length; j++)\u003Cbr \/\u003E  files.push(e.data[j]);\u003Cbr \/\u003E\u003C\/span\u003E\u003Cbr \/\u003E if (p) {\u003Cbr \/\u003E  process()\u003Cbr \/\u003E }\u003Cbr \/\u003E\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E\u003C\/pre\u003E\u003Cbr \/\u003E\u003Cb class=\"bold\"\u003EConclusion\u003C\/b\u003E \u003Cbr \/\u003EI hope this article has help you to upload large files. Web Workers are an underutilized and under-appreciated feature of HTML5. We can minimize the work to upload a large file. The technique is to slice the upload into multiple chunks, spawn an XHR for each portion, and put the file together on the server. This is similar to how GMail uploads large attachments so quickly.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #6fa8dc;\"\u003EFurther Reading\u003C\/span\u003E\u003Cbr \/\u003E\u003Col style=\"text-align: left;\"\u003E\u003Cli\u003E\u003Cspan style=\"color: #6fa8dc;\"\u003E\u0026nbsp;\u003Ca href=\"http:\/\/kongaraju.blogspot.in\/2012\/08\/mastering-in-html5-webworkers.html\" target=\"_blank\"\u003EMastering in webworkers\u003C\/a\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"color: #6fa8dc;\"\u003E\u003Ca href=\"http:\/\/www.html5rocks.com\/en\/tutorials\/file\/dndfiles\" target=\"_blank\"\u003EReading files and chunking.\u003C\/a\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"color: #6fa8dc;\"\u003E\u003Ca href=\"http:\/\/html5managetheweb.appspot.com\/\"\u003E HTML5 \u003C\/a\u003E\u0026nbsp;\u003C\/span\u003E\u003C\/li\u003E\u003C\/ol\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/kongaraju.blogspot.com\/feeds\/1257284930538366397\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2012\/07\/large-file-upload-more-than-1gb-using.html#comment-form","title":"29 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/1257284930538366397"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/1257284930538366397"},{"rel":"alternate","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2012\/07\/large-file-upload-more-than-1gb-using.html","title":"Large file upload more than 1GB using HTML5 Web workers, Drag and Drop and XHR2"}],"author":[{"name":{"$t":"Raju Konga"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/10750040862243953720"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"33","height":"30","src":"\/\/3.bp.blogspot.com\/-NRmd50o6VzU\/Xl0GJ89U5nI\/AAAAAAAAFvs\/hmFaD7EEWBktvdxCDKDS8PFdbVIiGTaBgCK4BGAYYCw\/s220\/latest_pic.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/2.bp.blogspot.com\/-9IuP7rW1uqY\/UB93W32D__I\/AAAAAAAAAW0\/hi_laOONfbo\/s72-c\/aw-snap-google-chrome.gif","height":"72","width":"72"},"thr$total":{"$t":"29"}},{"id":{"$t":"tag:blogger.com,1999:blog-1933328805824469647.post-6226765515848059166"},"published":{"$t":"2012-06-30T18:10:00.001+05:30"},"updated":{"$t":"2016-01-28T23:44:56.702+05:30"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"HTML5"},{"scheme":"http://www.blogger.com/atom/ns#","term":"javascript"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Storage"}],"title":{"type":"text","$t":"HTML5 Local Storage"},"content":{"type":"html","$t":"\u003Cdiv dir=\"ltr\" style=\"text-align: left;\" trbidi=\"on\"\u003E\u003Ch2 style=\"text-align: left;\"\u003E \u003Cspan style=\"background-color: white;\"\u003ELocal Storage:\u003C\/span\u003E\u003C\/h2\u003E\u003Cdiv\u003E\u003Cul style=\"text-align: left;\"\u003E\u003Cli\u003E\u003Cspan style=\"background-color: white; color: #222222; font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif; font-size: 14px; line-height: 22px;\"\u003Esimply provides a key-value mapping. P\u003C\/span\u003E\u003Cspan style=\"background-color: white; color: #222222; font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif; font-size: 14px; line-height: 22px;\"\u003Eresent implementations only support string-to-string mappings, so you need to serialize and de-serialize other data structures.\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"background-color: white; color: #222222; font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif; font-size: 14px; line-height: 22px;\"\u003ELocal storage limits to 5MB of usage only\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"background-color: white; color: #222222; font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif; font-size: 14px; line-height: 22px;\"\u003EBy exceeding quota it will return \"\u003C\/span\u003E\u003Ccode style=\"font-family: Consolas, 'Andale Mono', Monaco, 'Liberation Mono', 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', monospace; line-height: inherit !important; text-align: -webkit-auto;\"\u003EQUOTA_EXCEEDED_ERR\u003C\/code\u003E\u003Ccode style=\"line-height: 28px; text-align: -webkit-auto; word-spacing: 1px;\"\u003E\u003Cspan style=\"font-family: \u0026quot;linux libertine\u0026quot; , \u0026quot;palatino\u0026quot; , \u0026quot;palatino linotype\u0026quot; , \u0026quot;book antiqua\u0026quot; , \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif; font-size: medium;\"\u003E\"\u003C\/span\u003E\u003C\/code\u003E\u003C\/li\u003E\u003C\/ul\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-SYM82sOjZPE\/VqpaiWlfjEI\/AAAAAAAAC6Y\/ppMjc24hDDU\/s1600\/cat-stuff_cat-shelf.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"HTML5 Local Storage\" border=\"0\" height=\"276\" src=\"http:\/\/1.bp.blogspot.com\/-SYM82sOjZPE\/VqpaiWlfjEI\/AAAAAAAAC6Y\/ppMjc24hDDU\/s400\/cat-stuff_cat-shelf.jpg\" title=\"\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cspan style=\"font-family: linux libertine, palatino, palatino linotype, book antiqua, georgia, times new roman, serif; font-size: medium;\"\u003E\u003Cspan style=\"line-height: 28px; word-spacing: 1px;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"text-align: -webkit-auto;\"\u003E\u003Cspan style=\"font-family: \u0026quot;linux libertine\u0026quot; , \u0026quot;palatino\u0026quot; , \u0026quot;palatino linotype\u0026quot; , \u0026quot;book antiqua\u0026quot; , \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif; font-size: medium;\"\u003E\u003Cspan style=\"line-height: 28px; word-spacing: 1px;\"\u003E\u003Cb\u003EImp things:\u003C\/b\u003E\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"text-align: -webkit-auto;\"\u003E\u003Cspan style=\"font-family: \u0026quot;linux libertine\u0026quot; , \u0026quot;palatino\u0026quot; , \u0026quot;palatino linotype\u0026quot; , \u0026quot;book antiqua\u0026quot; , \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif; font-size: medium;\"\u003E\u003Cspan style=\"line-height: 28px; word-spacing: 1px;\"\u003Elength,key,getItem,setItem,removeItem,clear\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"text-align: -webkit-auto;\"\u003E\u003Cspan style=\"font-family: \u0026quot;linux libertine\u0026quot; , \u0026quot;palatino\u0026quot; , \u0026quot;palatino linotype\u0026quot; , \u0026quot;book antiqua\u0026quot; , \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif; font-size: medium;\"\u003E\u003Cspan style=\"line-height: 28px; word-spacing: 1px;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"text-align: -webkit-auto;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u003Cspan style=\"font-size: 14px; line-height: 22px;\"\u003E\u003Cb\u003ETo set the item in local storage\u003C\/b\u003E\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv style=\"text-align: -webkit-auto;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u003Cspan style=\"font-size: 14px; line-height: 22px;\"\u003Elocalstorage.setItem(key, value);\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"text-align: -webkit-auto;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u003Cspan style=\"font-size: 14px; line-height: 22px;\"\u003Eex: localstorage.setItem(\"uname\", 'kongaraju'); \/\/represents localStorage.key(0)\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"text-align: -webkit-auto;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u003Cspan style=\"font-size: 14px; line-height: 22px;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"text-align: -webkit-auto;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u003Cspan style=\"font-size: 14px; line-height: 22px;\"\u003E\u003Cb\u003ETo store Objects in local storage\u003C\/b\u003E\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"text-align: -webkit-auto;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u003Cspan style=\"font-size: 14px; line-height: 22px;\"\u003ElocalStorage.setItem(\"Uinfo\", JSON.stringify({ 'Fname' : 'Raju' , 'Lname' : 'konga' })); \/\/key index 1\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"text-align: -webkit-auto;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u003Cspan style=\"font-size: 14px; line-height: 22px;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"text-align: -webkit-auto;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u003Cspan style=\"font-size: 14px; line-height: 22px;\"\u003E\u003Cb\u003ETo get the item from LocalStorage\u003C\/b\u003E\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"text-align: -webkit-auto;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u003Cspan style=\"font-size: 14px; line-height: 22px;\"\u003Elocalstorage.getItem(key); \/\/ By Key\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"text-align: -webkit-auto;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u003Cspan style=\"font-size: 14px; line-height: 22px;\"\u003ElocalStorage.key(index); \u0026nbsp; \u0026nbsp; \/\/BY Index\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"text-align: -webkit-auto;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u003Cspan style=\"font-size: 14px; line-height: 22px;\"\u003Eex: var UserName=localstorage.getItem(\"uname\");\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"text-align: -webkit-auto;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u003Cspan style=\"font-size: 14px; line-height: 22px;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; var UserName=localStorage.getItem(localStorage.key(index));\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cspan style=\"background-color: white; color: #222222; font-family: \u0026quot;open sans\u0026quot; , sans-serif; font-size: 14px; line-height: 22px;\"\u003E\/\/return \"kongaraju\"\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cspan style=\"background-color: white; color: #222222; font-family: \u0026quot;open sans\u0026quot; , sans-serif; font-size: 14px; line-height: 22px;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cspan style=\"background-color: white; color: #222222; font-family: \u0026quot;open sans\u0026quot; , sans-serif; font-size: 14px; line-height: 22px;\"\u003E\u003Cb\u003ETo get the objects from local storage\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cspan style=\"background-color: white; color: #222222; font-family: \u0026quot;open sans\u0026quot; , sans-serif; font-size: 14px; line-height: 22px;\"\u003Evar info=JSON.parse(localSorage.getItem('Uinfo'));\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cspan style=\"background-color: white; color: #222222; font-family: \u0026quot;open sans\u0026quot; , sans-serif; font-size: 14px; line-height: 22px;\"\u003Evar FirstName= info.Fname\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cspan style=\"background-color: white; color: #222222; font-family: \u0026quot;open sans\u0026quot; , sans-serif; font-size: 14px; line-height: 22px;\"\u003Evar LastName= info.Lname\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cspan style=\"background-color: white; color: #222222; font-family: \u0026quot;open sans\u0026quot; , sans-serif; font-size: 14px; line-height: 22px;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cspan style=\"background-color: white; color: #222222; font-family: \u0026quot;open sans\u0026quot; , sans-serif; font-size: 14px; line-height: 22px;\"\u003E\u003Cb\u003ETo get total length of local storage\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cspan style=\"background-color: white; color: #222222; font-family: \u0026quot;open sans\u0026quot; , sans-serif; font-size: 14px; line-height: 22px;\"\u003ElocalStorage.length\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cspan style=\"background-color: white; color: #222222; font-family: \u0026quot;open sans\u0026quot; , sans-serif; font-size: 14px; line-height: 22px;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cspan style=\"background-color: white; color: #222222; font-family: \u0026quot;open sans\u0026quot; , sans-serif; font-size: 14px; line-height: 22px;\"\u003E\u003Cb\u003ETo get list of local Storage items\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cspan style=\"background-color: white; color: #222222; font-family: \u0026quot;open sans\u0026quot; , sans-serif; font-size: 14px; line-height: 22px;\"\u003Efor(var i=o; i\u0026lt;localstorage.length; i++)\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cspan style=\"background-color: white; color: #222222; font-family: \u0026quot;open sans\u0026quot; , sans-serif; font-size: 14px; line-height: 22px;\"\u003E{\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cspan style=\"background-color: white; color: #222222; font-family: \u0026quot;open sans\u0026quot; , sans-serif; font-size: 14px; line-height: 22px;\"\u003E$(list).append(localStorage.getItem(localStorage.key(i)\u003C\/span\u003E\u003Cspan class=\"pun\" style=\"background-color: transparent; border: 0px; font-family: \u0026quot;consolas\u0026quot; , \u0026quot;menlo\u0026quot; , \u0026quot;monaco\u0026quot; , \u0026quot;lucida console\u0026quot; , \u0026quot;liberation mono\u0026quot; , \u0026quot;dejavu sans mono\u0026quot; , \u0026quot;bitstream vera sans mono\u0026quot; , \u0026quot;courier new\u0026quot; , monospace , serif; font-size: 14px; line-height: 18px; margin: 0px; padding: 0px; vertical-align: baseline;\"\u003E)\u003C\/span\u003E\u003Cspan style=\"background-color: white; color: #222222; font-family: \u0026quot;open sans\u0026quot; , sans-serif; font-size: 14px; line-height: 22px;\"\u003E);\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cspan style=\"background-color: white; color: #222222; font-family: \u0026quot;open sans\u0026quot; , sans-serif; font-size: 14px; line-height: 22px;\"\u003E}\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cspan style=\"background-color: white; color: #222222; font-family: \u0026quot;open sans\u0026quot; , sans-serif; font-size: 14px; line-height: 22px;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"text-align: -webkit-auto;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;open sans\u0026quot; , sans-serif;\"\u003E\u003Cspan style=\"font-size: 14px; line-height: 22px;\"\u003E\u003Cb\u003Eremove the item\u003C\/b\u003E\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"text-align: -webkit-auto;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;open sans\u0026quot; , sans-serif;\"\u003E\u003Cspan style=\"font-size: 14px; line-height: 22px;\"\u003ElocalStorage.removeItem(key);\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"text-align: -webkit-auto;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;open sans\u0026quot; , sans-serif;\"\u003E\u003Cspan style=\"font-size: 14px; line-height: 22px;\"\u003Eex: localStorage.removeItem('uname');\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"text-align: -webkit-auto;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;open sans\u0026quot; , sans-serif;\"\u003E\u003Cspan style=\"font-size: 14px; line-height: 22px;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"text-align: -webkit-auto;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;open sans\u0026quot; , sans-serif;\"\u003E\u003Cspan style=\"font-size: 14px; line-height: 22px;\"\u003E\u003Cb\u003ETo Clear the localstorage\u003C\/b\u003E\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"text-align: -webkit-auto;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;open sans\u0026quot; , sans-serif;\"\u003E\u003Cspan style=\"font-size: 14px; line-height: 22px;\"\u003ElocalStorage.clear(); \/\/ it clears total localstorage of app\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"text-align: -webkit-auto;\"\u003E\u003Cspan style=\"color: #222222; font-family: \u0026quot;open sans\u0026quot; , sans-serif;\"\u003E\u003Cspan style=\"font-size: 14px; line-height: 22px;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cspan style=\"background-color: white; color: #222222; font-family: \u0026quot;open sans\u0026quot; , sans-serif; font-size: 14px; line-height: 22px;\"\u003E\u003Cb\u003EIn other way\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cspan style=\"background-color: white; color: #222222; font-family: \u0026quot;open sans\u0026quot; , sans-serif; font-size: 14px; line-height: 22px;\"\u003ElocalStorage[\"uname\"]='kongraju';\u0026nbsp;\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cspan style=\"background-color: white; color: #222222; font-family: \u0026quot;open sans\u0026quot; , sans-serif; font-size: 14px; line-height: 22px;\"\u003Evar UserName = localstorage['uname'];\u003C\/span\u003E\u003C\/div\u003E\u003Ch2 style=\"text-align: left;\"\u003E \u003Cspan style=\"background-color: white; color: #222222; font-family: \u0026quot;open sans\u0026quot; , sans-serif; font-size: 14px; line-height: 22px;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/h2\u003E\u003Ch2 style=\"text-align: left;\"\u003E \u003Cspan style=\"color: #222222; font-family: \u0026quot;open sans\u0026quot; , sans-serif; font-size: large;\"\u003E\u003Cspan style=\"line-height: 22px;\"\u003ESession Storage:\u003C\/span\u003E\u003C\/span\u003E\u003C\/h2\u003E\u003Cdiv style=\"text-align: -webkit-auto;\"\u003E\u003Cul style=\"text-align: left;\"\u003E\u003Cli\u003E\u003Cspan style=\"background-color: white; font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif; font-size: 12px;\"\u003EThe sessionStorage object is equal to the localStorage object,\u0026nbsp;\u003C\/span\u003E\u003Cb style=\"background-color: white; font-family: Georgia, 'Times New Roman', serif; font-size: 12px;\"\u003Eexcept\u003C\/b\u003E\u003Cspan style=\"background-color: white; font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif; font-size: 12px;\"\u003E\u0026nbsp;that it stores the data for only one session. The data is deleted when the user closes the browser window.\u003C\/span\u003E\u003C\/li\u003E\u003C\/ul\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cspan style=\"background-color: white; color: #222222; font-family: \u0026quot;open sans\u0026quot; , sans-serif; font-size: 14px; line-height: 22px;\"\u003EFurther Reading:\u003C\/span\u003E\u003Cbr \/\u003E\u003Col style=\"text-align: left;\"\u003E\u003Cli\u003E\u003Cspan style=\"background-color: white; color: #222222; font-family: \u0026quot;open sans\u0026quot; , sans-serif; font-size: 14px; line-height: 22px;\"\u003E\u003Ca href=\"http:\/\/www.w3schools.com\/html5\/html5_webstorage.asp\" target=\"_blank\"\u003EBasic Webstorage\u003C\/a\u003E\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"background-color: white; color: #222222; font-family: \u0026quot;open sans\u0026quot; , sans-serif; font-size: 14px; line-height: 22px;\"\u003E\u003Ca href=\"http:\/\/diveintohtml5.info\/storage.html\" target=\"_blank\"\u003ELocal storage\u003C\/a\u003E\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"background-color: white; color: #222222; font-family: \u0026quot;open sans\u0026quot; , sans-serif; font-size: 14px; line-height: 22px;\"\u003E\u003Ca href=\"http:\/\/www.html5rocks.com\/en\/features\/storage\" target=\"_blank\"\u003EOther Webstorage options\u003C\/a\u003E\u003C\/span\u003E\u003C\/li\u003E\u003Cli\u003E\u003Cspan style=\"background-color: white; color: #222222; font-family: \u0026quot;open sans\u0026quot; , sans-serif; font-size: 14px; line-height: 22px;\"\u003E\u003Ca href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/DOM\/Storage\" target=\"_blank\"\u003ELocal storage in depth\u003C\/a\u003E\u003C\/span\u003E\u003C\/li\u003E\u003C\/ol\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/kongaraju.blogspot.com\/feeds\/6226765515848059166\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2012\/06\/html5-local-storage.html#comment-form","title":"0 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/6226765515848059166"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/6226765515848059166"},{"rel":"alternate","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2012\/06\/html5-local-storage.html","title":"HTML5 Local Storage"}],"author":[{"name":{"$t":"Raju Konga"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/10750040862243953720"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"33","height":"30","src":"\/\/3.bp.blogspot.com\/-NRmd50o6VzU\/Xl0GJ89U5nI\/AAAAAAAAFvs\/hmFaD7EEWBktvdxCDKDS8PFdbVIiGTaBgCK4BGAYYCw\/s220\/latest_pic.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/1.bp.blogspot.com\/-SYM82sOjZPE\/VqpaiWlfjEI\/AAAAAAAAC6Y\/ppMjc24hDDU\/s72-c\/cat-stuff_cat-shelf.jpg","height":"72","width":"72"},"thr$total":{"$t":"0"}},{"id":{"$t":"tag:blogger.com,1999:blog-1933328805824469647.post-2487391761845030879"},"published":{"$t":"2012-06-22T19:00:00.001+05:30"},"updated":{"$t":"2016-01-28T23:48:50.475+05:30"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"HTML5"},{"scheme":"http://www.blogger.com/atom/ns#","term":"javascript"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Storage"}],"title":{"type":"text","$t":"IndexedDB API Basics"},"content":{"type":"html","$t":"\u003Cdiv dir=\"ltr\" style=\"text-align: left;\" trbidi=\"on\"\u003E\u003Cdiv\u003E\u003Cdiv style=\"text-align: justify;\"\u003E\u003Cdiv style=\"margin-bottom: 1.286em; padding: 0px; text-align: -webkit-auto;\"\u003E\u003Cdiv style=\"text-align: left;\"\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u003Cspan style=\"font-size: 14px;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E IndexedDB lets you store and retrieve objects which are indexed with a \"key.\" All changes that you make to the database happens within transactions. Like most web storage solutions, IndexedDB follows a\u0026nbsp;same-origin policy. So while you can access stored data within a domain, you cannot access data across different domains.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-938sYRmfH1Q\/VqpbdlJp0EI\/AAAAAAAAC6g\/DOAaR8ihhnE\/s1600\/6029OT_06_03.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"IndexedDB API Basics\" border=\"0\" height=\"250\" src=\"http:\/\/1.bp.blogspot.com\/-938sYRmfH1Q\/VqpbdlJp0EI\/AAAAAAAAC6g\/DOAaR8ihhnE\/s400\/6029OT_06_03.png\" title=\"\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif; line-height: 21px;\"\u003E\u003Cspan style=\"background-color: white; color: #333333; line-height: 24px;\"\u003EThe API includes both an\u003C\/span\u003E\u003Cspan style=\"background-color: white; color: #333333; line-height: 24px;\"\u003E\u0026nbsp;\u003C\/span\u003Easynchronous\u003Cspan style=\"background-color: white; color: #333333; line-height: 24px;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003Cspan style=\"background-color: white; color: #333333; line-height: 24px;\"\u003EAPI and a\u003C\/span\u003E\u003Cspan style=\"background-color: white; color: #333333; line-height: 24px;\"\u003E\u0026nbsp;\u003C\/span\u003Esynchronous\u003Cspan style=\"background-color: white; color: #333333; line-height: 24px;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003Cspan style=\"background-color: white; color: #333333; line-height: 24px;\"\u003EAPI.\u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003Cspan style=\"background-color: white; color: #333333; font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif; line-height: 24px;\"\u003EThe asynchronous API can be used in most cases, while the synchronous API is for use with\u003C\/span\u003E\u003Cspan style=\"background-color: white; color: #333333; font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif; line-height: 24px;\"\u003E\u0026nbsp;\u003C\/span\u003E\u003Cspan style=\"background-color: white; font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif; line-height: 21px;\"\u003EWebWorkers\u003C\/span\u003E\u003Cspan style=\"background-color: white; color: #333333; font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif; line-height: 24px;\"\u003E. Currently, no major browser supports the synchronous API. But even if synchronous APIs are supported, in the majority of cases where you use IndexedDB, you are likely to use the asynchronous API anyway.\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"background-color: white; color: #333333; font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif; line-height: 24px;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"text-align: left;\"\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif; line-height: 21px;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp;\u003C\/span\u003E\u003Cspan style=\"color: #333333; font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif; line-height: 21px;\"\u003E\u0026nbsp;\u0026nbsp;An Indexed Database is a collection of \"object stores\" which you can just drop objects into. The stores are something like SQL tables, but in this case, there's no constraints on the object structure and so no need to define anything upfront. So this is similar to Web Storage, with the advantage that you can have as many databases as you like, and as many stores within each database. But unlike Web Storage, there are important performance benefits: An asynchronous API, and you can create indexes on stores to improve search speed.\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv style=\"color: #222222; font-size: 14px; line-height: 1.5; text-align: -webkit-auto;\"\u003E\u003Cspan style=\"font-size: 14px; line-height: 21px;\"\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"color: #222222; font-size: 14px; line-height: 1.5; text-align: -webkit-auto;\"\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003EHere are the main differences between the WebSQL and IndexDB databases.\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"color: #222222; font-size: 14px; line-height: 1.5; text-align: -webkit-auto;\"\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv style=\"color: #222222; font-size: 14px; line-height: 1.5; text-align: -webkit-auto;\"\u003E\u003C\/div\u003E\u003Ctable border=\"0\" style=\"background: snow; border-collapse: collapse; border-spacing: 0px; border: 1px solid; color: #222222; font-size: 13px; line-height: 16px;\"\u003E\u003Cthead\u003E\u003Ctr\u003E\u003Cth\u003E\u003Cspan style=\"font-family: \u0026quot;trebuchet ms\u0026quot; , sans-serif;\"\u003ECategory\u003C\/span\u003E\u003C\/th\u003E\u003Cth\u003E\u003Cspan style=\"font-family: \u0026quot;trebuchet ms\u0026quot; , sans-serif;\"\u003EWebSQL\u003C\/span\u003E\u003C\/th\u003E\u003Cth\u003E\u003Cspan style=\"font-family: \u0026quot;trebuchet ms\u0026quot; , sans-serif;\"\u003EIndexedDB\u003C\/span\u003E\u003C\/th\u003E\u003C\/tr\u003E\u003C\/thead\u003E\u003Ctbody\u003E\u003Ctr\u003E\u003Ctd style=\"vertical-align: top;\"\u003E\u003Cspan style=\"font-family: \u0026quot;trebuchet ms\u0026quot; , sans-serif;\"\u003EAdvantages\u003C\/span\u003E\u003C\/td\u003E\u003Ctd style=\"vertical-align: top;\"\u003E\u003Cspan style=\"font-family: \u0026quot;trebuchet ms\u0026quot; , sans-serif;\"\u003EA real, relational database implementation on the client (SQLite).\u003C\/span\u003E\u003C\/td\u003E\u003Ctd style=\"vertical-align: top;\"\u003E\u003Cspan style=\"font-family: \u0026quot;trebuchet ms\u0026quot; , sans-serif;\"\u003E* Allows fast indexing and searching of objects, so in a web application scenario, you can manage your data and read\/write it fast.\u003Cbr \/\u003E* A NoSQL database that let you work with your JavaScript objects and indexing them based on your application needs.\u003Cbr \/\u003E* Works in asynchronous mode with moderately granular locking per transaction. This allows you to work inside the event-driven module of JavaScript.\u003C\/span\u003E\u003C\/td\u003E\u003C\/tr\u003E\u003Ctr\u003E\u003Ctd style=\"vertical-align: top;\"\u003E\u003Cspan style=\"font-family: \u0026quot;trebuchet ms\u0026quot; , sans-serif;\"\u003EDisadvantages\u003C\/span\u003E\u003C\/td\u003E\u003Ctd style=\"vertical-align: top;\"\u003E\u003Cspan style=\"font-family: \u0026quot;trebuchet ms\u0026quot; , sans-serif;\"\u003E* The spec is deprecated.\u003Cbr \/\u003E* Overhead of SQL language you need to master and transform your JavaScript objects into relational schema\u003Cbr \/\u003E* Not object driven\u003C\/span\u003E\u003C\/td\u003E\u003Ctd style=\"vertical-align: top;\"\u003E\u003Cspan style=\"font-family: \u0026quot;trebuchet ms\u0026quot; , sans-serif;\"\u003EHarder to understand if you are coming from the world of relational databases.\u003C\/span\u003E\u003C\/td\u003E\u003C\/tr\u003E\u003Ctr\u003E\u003Ctd style=\"vertical-align: top;\"\u003E\u003Cspan style=\"font-family: \u0026quot;trebuchet ms\u0026quot; , sans-serif;\"\u003ELocation\u003C\/span\u003E\u003C\/td\u003E\u003Ctd style=\"vertical-align: top;\"\u003E\u003Cspan style=\"font-family: \u0026quot;trebuchet ms\u0026quot; , sans-serif;\"\u003ETables contain columns and rows\u003C\/span\u003E\u003C\/td\u003E\u003Ctd style=\"vertical-align: top;\"\u003E\u003Cspan style=\"font-family: \u0026quot;trebuchet ms\u0026quot; , sans-serif;\"\u003EobjectStore contains Javascript objects and keys\u003C\/span\u003E\u003C\/td\u003E\u003C\/tr\u003E\u003Ctr\u003E\u003Ctd style=\"vertical-align: top;\"\u003E\u003Cspan style=\"font-family: \u0026quot;trebuchet ms\u0026quot; , sans-serif;\"\u003EQuery Mechanism\u003C\/span\u003E\u003C\/td\u003E\u003Ctd style=\"vertical-align: top;\"\u003E\u003Cspan style=\"font-family: \u0026quot;trebuchet ms\u0026quot; , sans-serif;\"\u003ESQL\u003C\/span\u003E\u003C\/td\u003E\u003Ctd style=\"vertical-align: top;\"\u003E\u003Cspan style=\"font-family: \u0026quot;trebuchet ms\u0026quot; , sans-serif;\"\u003ECursor APIs,\u0026nbsp;Key Range API, and Application Code\u003C\/span\u003E\u003C\/td\u003E\u003C\/tr\u003E\u003Ctr\u003E\u003Ctd style=\"vertical-align: top;\"\u003E\u003Cspan style=\"font-family: \u0026quot;trebuchet ms\u0026quot; , sans-serif;\"\u003ETransaction\u003C\/span\u003E\u003C\/td\u003E\u003Ctd style=\"vertical-align: top;\"\u003E\u003Cspan style=\"font-family: \u0026quot;trebuchet ms\u0026quot; , sans-serif;\"\u003ELock can happen on databases, tables, or rows on READ_WRITE transactions\u003C\/span\u003E\u003C\/td\u003E\u003Ctd style=\"vertical-align: top;\"\u003E\u003Cspan style=\"font-family: \u0026quot;trebuchet ms\u0026quot; , sans-serif;\"\u003ELock can happen on database VERSION_CHANGE transaction, on an objectStore READ_ONLY and READ_WRITE transactions.\u003C\/span\u003E\u003C\/td\u003E\u003C\/tr\u003E\u003Ctr\u003E\u003Ctd style=\"vertical-align: top;\"\u003E\u003Cspan style=\"font-family: \u0026quot;trebuchet ms\u0026quot; , sans-serif;\"\u003ETransaction Commits\u003C\/span\u003E\u003C\/td\u003E\u003Ctd style=\"vertical-align: top;\"\u003E\u003Cspan style=\"font-family: \u0026quot;trebuchet ms\u0026quot; , sans-serif;\"\u003ETransaction creation is explicit. Default is to rollback unless we call commit.\u003C\/span\u003E\u003C\/td\u003E\u003Ctd style=\"vertical-align: top;\"\u003E\u003Cspan style=\"font-family: \u0026quot;trebuchet ms\u0026quot; , sans-serif;\"\u003ETransaction creation is explicit. Default is to commit unless we call abort or there is an error that is not caught.\u003C\/span\u003E\u003C\/td\u003E\u003C\/tr\u003E\u003C\/tbody\u003E\u003C\/table\u003E\u003Cdiv style=\"color: #222222; font-size: 14px; line-height: 1.5; text-align: -webkit-auto;\"\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E1. How to Create IndexDB Database?\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u003Cb style=\"color: #222222; font-size: 14px; line-height: 21px; text-align: -webkit-auto;\"\u003EIndexed Database\u003C\/b\u003E\u003Cspan style=\"color: #222222; font-size: 14px; line-height: 21px;\"\u003E\u0026nbsp;setup takes some work, because it enforces a database version system; if we attempt to open a new database, the result will be a database whose version is null, which is our cue to set it up. And in setting it up, we obviously want to set the version so it doesn't return null next time! \u0026nbsp;\u003C\/span\u003E\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u003Cspan style=\"color: #222222; font-size: 14px; line-height: 21px;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Ci\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u003Cb\u003ECreating indexDB:\u003C\/b\u003E\u003C\/span\u003E\u003C\/i\u003E\u003Cbr \/\u003E\u003Ci\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u003Cb\u003E\u003Cbr \/\u003E\u003C\/b\u003E\u003C\/span\u003E\u003C\/i\u003E\u003Cstyle\u003E.code{ border:1px solid red; border-radius:3px; background:snow; } \u003C\/style\u003E \u003Cbr \/\u003E\u003Cdiv class=\"code\"\u003E\u003Cspan style=\"background-color: white; font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003Evar indexedDB = window.indexedDB || window.webkitIndexedDB ||\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; window.mozIndexedDB || window.msIndexedDB;\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\/\/ Handle the prefix of Chrome to IDBTransaction\/IDBKeyRange.\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003Eif ('webkitIndexedDB' in window) {\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; window.IDBTransaction = window.webkitIDBTransaction;\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; window.IDBKeyRange = window.webkitIDBKeyRange;\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E}\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003EindexedDB.db = null;\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\/\/ Hook up the errors to the console so we could see it.\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\/\/ In the future, we need to push these messages to the user.\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003EindexedDB.onerror = function(e) {\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; console.log(e);\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E};\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E2. How to create IndexDB ObjectStore?\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u003Cb\u003ECreating ObjectStore in IndexDB:\u003C\/b\u003E\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003EIn indexedDB, we create an object store inside a 'SetVersion' transaction. SetVersion is the only place in our code that we can alter the structure of the database. In it, we can create and delete object stores and build and remove indexes. Object stores contain your JavaScript objects and you can reach your data by key or by setting indexes. A call to setVersion returns an IDBRequest object where we can attach our callbacks. When successful, we start to create our object stores.\u003C\/span\u003E\u003Cspan style=\"font-family: \u0026quot;helvetica neue\u0026quot; , \u0026quot;arial\u0026quot; , \u0026quot;helvetica\u0026quot; , sans-serif;\"\u003E\u003Cspan style=\"color: #222222; font-size: 14px; line-height: 21px;\"\u003Ewe must call\u0026nbsp;\u003C\/span\u003E\u003Ccode style=\"background-color: #fbd5d0; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; color: #222222; font-size: 14px; line-height: 21px; padding: 0px 3px; text-align: -webkit-auto;\"\u003EsetVersion()\u003C\/code\u003E\u003Cspan style=\"color: #222222; font-size: 14px; line-height: 21px;\"\u003E\u0026nbsp;and we set up the database once the version has been set.\u003C\/span\u003E\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003Cbr \/\u003E\u003Cdiv class=\"code\"\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003EindexedDB.open = function() {\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; var request = indexedDB.open(\"todos\");\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; request.onsuccess = function(e) {\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; var v = \"2.0 beta\"; \/\/ yes! you can put strings in the version not just numbers\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; todoDB.indexedDB.db = e.target.result;\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; var db = todoDB.indexedDB.db;\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; \/\/ We can only create Object stores in a setVersion transaction;\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; if (v!= db.version) {\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; var setVrequest = db.setVersion(v);\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \/\/ onsuccess is the only place we can create Object Stores\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; setVrequest.onfailure = todoDB.indexedDB.onerror;\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; setVrequest.onsuccess = function(e) {\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; if (db.objectStoreNames.contains(\"todo\")) {\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; db.deleteObjectStore(\"todo\");\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; }\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; var store = db.createObjectStore(\"todo\", {keyPath: \"timeStamp\"});\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; todoDB.indexedDB.getAllTodoItems();\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; };\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; } else {\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; todoDB.indexedDB.getAllTodoItems();\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; }\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; };\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; request.onfailure = todoDB.indexedDB.onerror;\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E};\u003C\/span\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003EObject Stores are created with a single call to createObjectStore(). The method takes a name of the store and an parameter object. The parameter object is very important as it lets you define important optional properties. In our case, we define a keyPath that is the property that makes an individual object in the store unique. That property in this example is \"timeStamp\". \"timeStamp\" must be present on every object that is stored in the objectStore.\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003ENote: according to latest IndexedDB spec: http:\/\/dvcs.w3.org\/hg\/IndexedDB\/raw-file\/tip\/Overview.html setVersion() will be taken out. Thus, our code snippets here is going to change and the version setting will be part of the open() function of the database.\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E3. How to Store Objects in indexDB?\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u003Cb\u003EIndexedDB - Adding item:\u003C\/b\u003E\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003EWe first get a quick reference to the database object todoDB.indexedDB.db, initiate a READ_WRITE transaction and get a reference to our object store. There are three types of transactions:\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003EREAD_WRITE - Allows records contained in object stores to be added, read, modified, and removed.\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003EREAD_ONLY - Allows records contained in object stores to be read.\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003EVERSION_CHANGE - Used to create or update object store and indexes.\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003ENow that the application has access to the object store, we can issue a simple put command with a basic JSON object. Notice that there is a timeStamp property. That is our unique key for the object and is used as the \"keyPath\". When the call to put is successful, our onsuccess event is triggered, and we are able to render the contents on the screen.\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003Cbr \/\u003E\u003Cdiv class=\"code\"\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003EindexedDB.addTodo = function() {\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; var db = todoDB.indexedDB.db;\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; var trans = db.transaction(['todo'], IDBTransaction.READ_WRITE);\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; var store = trans.objectStore('todo');\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; var data = {\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; \"text\": todoText, \/\/ todoText should be visible here\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; \"timeStamp\": new Date().getTime()\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; };\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; var request = store.put(data);\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; request.onsuccess = function(e) {\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; todoDB.indexedDB.getAllTodoItems();\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; };\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; request.onerror = function(e) {\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; console.log(\"Error Adding: \", e);\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; };\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E};\u003C\/span\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E4. How to retrieve the values or objects from IndexDB?\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u003Cb\u003EIndexedDB - Retrieving data:\u003C\/b\u003E\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003EWe open a transaction on our object store. This is set to READ_ONLY, because we only wish to retrieve data. Next, we open a cursor and iterate with it on our list of todos. All of these commands used in this sample are asynchronous and, as such, the data is not returned from inside the transaction.\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003Cbr \/\u003E\u003Cdiv class=\"code\"\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003Efunction showAll() {\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; document.getElementById(\"ourList\").innerHTML = \"\";\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; var request = window.indexedDB.open(\"todos\");\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; request.onsuccess = function(event) {\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; \/\/ Enumerate the entire object store.\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; var db = todoDB.indexedDB.db;\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; var trans = db.transaction([\"todo\"], IDBTransaction.READ_ONLY);\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; var request = trans.objectStore(\"todo\").openCursor();\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; var ul = document.createElement(\"ul\");\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; request.onsuccess = function(event) {\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \/\/ This hack is to allow our code to run with Firefox (older versions then 6)\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; var cursor = request.result || event.result;\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \/\/ If cursor is null then we've completed the enumeration - so update the DOM\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; if (!cursor) {\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; document.getElementById(\"ourList\").appendChild(ul);\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; return;\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; }\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; var li = document.createElement(\"div\");\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; li.textContent = \"key: \" + cursor.key + \" =\u0026gt; Todo text: \" + cursor.value.text;\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; ul.appendChild(li);\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; cursor.continue();\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; }\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; }\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E}\u003C\/span\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E5. How to delete the objects from IndexDB Database?\u0026nbsp;\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u003Cb\u003EIndexedDB - delete data:\u003C\/b\u003E\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003EStart a transaction, reference the Object Store with your object in and issue a delete command with the unique ID of your object.\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003Cbr \/\u003E\u003Cdiv class=\"code\"\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003EindexedDB.deleteTodo = function(id, text) {\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; if (confirm(\"Are you sure you want to Delete \" + text + \"?\")) {\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; var db = todoDB.indexedDB.db;\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; var trans = db.transaction([\"todo\"], IDBTransaction.READ_WRITE);\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; var store = trans.objectStore(\"todo\");\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; var request = store.delete(id);\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; request.onsuccess = function(e) {\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; todoDB.indexedDB.getAllTodoItems();\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; };\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; request.onerror = function(e) {\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; \u0026nbsp; console.log(\"Error Adding: \", e);\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; \u0026nbsp; };\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E\u0026nbsp; }\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: \u0026quot;georgia\u0026quot; , \u0026quot;times new roman\u0026quot; , serif;\"\u003E};\u003C\/span\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EFurther Reading:\u003Cbr \/\u003E\u003Ca href=\"http:\/\/www.blogger.com\/goog_939559257\"\u003E\u003Cbr \/\u003E\u003C\/a\u003E\u003Cbr \/\u003E\u003Col style=\"text-align: left;\"\u003E\u003Cli\u003E\u003Ca href=\"http:\/\/www.w3.org\/TR\/IndexedDB\" target=\"_blank\"\u003EIndexedDB Specification\u003C\/a\u003E\u003C\/li\u003E\u003Cli\u003E\u003Ca href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/IndexedDB\" target=\"_blank\"\u003EIndexedDB Explained\u003C\/a\u003E\u003C\/li\u003E\u003Cli\u003E\u003Ca href=\"http:\/\/www.html5rocks.com\/en\/tutorials\/indexeddb\/todo\/\" target=\"_blank\"\u003EIndexedDB Example Explained\u003C\/a\u003E\u003C\/li\u003E\u003Cli\u003E\u003Ca href=\"http:\/\/html5managetheweb.appspot.com\/\"\u003E HTML5 Presentation \u003C\/a\u003E\u003C\/li\u003E\u003C\/ol\u003E\u003C\/div\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/kongaraju.blogspot.com\/feeds\/2487391761845030879\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2012\/06\/indexdb-api-basics.html#comment-form","title":"2 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/2487391761845030879"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/2487391761845030879"},{"rel":"alternate","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2012\/06\/indexdb-api-basics.html","title":"IndexedDB API Basics"}],"author":[{"name":{"$t":"Raju Konga"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/10750040862243953720"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"33","height":"30","src":"\/\/3.bp.blogspot.com\/-NRmd50o6VzU\/Xl0GJ89U5nI\/AAAAAAAAFvs\/hmFaD7EEWBktvdxCDKDS8PFdbVIiGTaBgCK4BGAYYCw\/s220\/latest_pic.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/1.bp.blogspot.com\/-938sYRmfH1Q\/VqpbdlJp0EI\/AAAAAAAAC6g\/DOAaR8ihhnE\/s72-c\/6029OT_06_03.png","height":"72","width":"72"},"thr$total":{"$t":"2"}},{"id":{"$t":"tag:blogger.com,1999:blog-1933328805824469647.post-5665533825909339115"},"published":{"$t":"2012-05-05T22:50:00.003+05:30"},"updated":{"$t":"2015-12-11T17:13:31.534+05:30"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"HTML5"},{"scheme":"http://www.blogger.com/atom/ns#","term":"javascript"},{"scheme":"http://www.blogger.com/atom/ns#","term":"JQuery"},{"scheme":"http://www.blogger.com/atom/ns#","term":"PHP"}],"title":{"type":"text","$t":"Powerful Web Based File Managers"},"content":{"type":"html","$t":"\u003Cdiv dir=\"ltr\" style=\"text-align: left;\" trbidi=\"on\"\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #ea9999; font-family: Georgia, 'Times New Roman', serif; font-size: x-large;\"\u003EWeb Based File Managers\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"font-family: Georgia, 'Times New Roman', serif;\"\u003E\u003Cbr \/\u003E\u003C\/span\u003E\u003Cbr \/\u003E\u003Cdiv style=\"text-align: justify;\"\u003E\u003Cspan style=\"font-family: Georgia, 'Times New Roman', serif;\"\u003EIf you are looking for a powerful file manager ready to use in your web projects and simple to customize, take a look at this list with the best and free file manager currently in circulation. Some of these file managers support PHP only or javascript only or Ajax that will give you powerful tool to easily browse directories \u0026amp; files on the server, search, upload and download files, edit, copy, move, delete files and more.\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Ch2 style=\"text-align: left;\"\u003E   \u003Ca href=\"http:\/\/www.filemanager.net\/\" target=\"_blank\"\u003EIdc File Manager\u003C\/a\u003E\u003C\/h2\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003C\/div\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-g32i1T-jK_k\/T6VYBNlVOTI\/AAAAAAAAASk\/kimMSKHVey0\/s1600\/IDc.png\" imageanchor=\"1\" style=\"clear: right; float: right; margin-bottom: 1em; margin-left: 1em;\"\u003E\u003Cimg border=\"0\" height=\"240\" src=\"http:\/\/3.bp.blogspot.com\/-g32i1T-jK_k\/T6VYBNlVOTI\/AAAAAAAAASk\/kimMSKHVey0\/s320\/IDc.png\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cdiv\u003E\u003Cdiv style=\"text-align: justify;\"\u003E\u003Cspan style=\"font-family: Georgia, 'Times New Roman', serif;\"\u003E:\u003Cb\u003E: iDC File Manager - Web Based File Manager \u0026nbsp;::\u003C\/b\u003E\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cdiv style=\"text-align: justify;\"\u003E\u003Cspan style=\"font-family: Georgia, 'Times New Roman', serif;\"\u003EThe New version of iDC File Manager's web based file manager version 1.5 has now been released and includes a host of new features and improvements including an all new Transparent GUI, Shared folders and Group access.\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Ch2 style=\"text-align: left;\"\u003E   \u003Ca href=\"http:\/\/kcfinder.sunhater.com\/\" target=\"_blank\"\u003EKCFinder Web File Manager\u003C\/a\u003E\u003C\/h2\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/kcfinder.sunhater.com\/files\/img\/kcfinder-screenshot.jpg\" imageanchor=\"1\" style=\"clear: left; float: left; margin-bottom: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"229\" src=\"http:\/\/kcfinder.sunhater.com\/files\/img\/kcfinder-screenshot.jpg\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cdiv style=\"text-align: justify;\"\u003E\u003Cspan style=\"font-family: Georgia, 'Times New Roman', serif;\"\u003EKCFinder is free open-source alternative to the CKFinder web file manager. It can be integrated into FCKeditor, CKEditor, and TinyMCE WYSIWYG web editors (or your custom web applications) to upload and manage images, flash movies, and other files that can be embedded in an editor's generated HTML content.\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cdiv style=\"text-align: justify;\"\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Ch2 style=\"text-align: left;\"\u003E   \u003Ca href=\"http:\/\/elfinder.org\/\" target=\"_blank\"\u003EelFinder\u003C\/a\u003E\u003C\/h2\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/3.bp.blogspot.com\/-vDzPSTXxeks\/T6VfeSq9ltI\/AAAAAAAAASw\/oma3k-BRPJ8\/s1600\/elFinder.png\" imageanchor=\"1\" style=\"clear: right; float: right; margin-bottom: 1em; margin-left: 1em;\"\u003E\u003Cimg border=\"0\" height=\"143\" src=\"http:\/\/3.bp.blogspot.com\/-vDzPSTXxeks\/T6VfeSq9ltI\/AAAAAAAAASw\/oma3k-BRPJ8\/s320\/elFinder.png\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cdiv style=\"text-align: justify;\"\u003E\u003Cspan style=\"font-family: Georgia, 'Times New Roman', serif;\"\u003E\u003Cb\u003EelFinder\u003C\/b\u003E is a open source web based file manager. It is the best web based file manager. It has many feature like drag an drop, permissions, locks, archieve, etc..,\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Ch2 style=\"text-align: left;\"\u003E   \u003Ca href=\"http:\/\/www.webfileexplorer.com\/\" target=\"_blank\"\u003EWebFile Explorer\u003C\/a\u003E\u003C\/h2\u003E\u003Cdiv\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/www.webfileexplorer.com\/Home_Files\/sScreen1.png\" imageanchor=\"1\" style=\"clear: left; float: left; margin-bottom: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/www.webfileexplorer.com\/Home_Files\/sScreen1.png\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cdiv style=\"text-align: justify;\"\u003E\u003Cspan style=\"font-family: Georgia, 'Times New Roman', serif;\"\u003E\u003Cb\u003EWebFileExplorer \u003C\/b\u003Eis a web based file management system with user permissions and quota limits, it has an easy user interface and online administration which will allow you to manage users\/permissions without the need of server configuration knowledge. It can be used for remote file storage (eg FreeDrive)\/hosting services, Companies\/Educational institutions that need to share documents among people.\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Ch2 style=\"text-align: left;\"\u003E   \u003Ca href=\"http:\/\/www.gleamtech.com\/products\/filevista\/web-file-manager\" target=\"_blank\"\u003EFile Vista\u003C\/a\u003E\u003C\/h2\u003E\u003Cdiv\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/www.gleamtech.com\/images\/web-file-manager.png\" imageanchor=\"1\" style=\"clear: right; float: right; margin-bottom: 1em; margin-left: 1em;\"\u003E\u003Cimg border=\"0\" height=\"126\" src=\"http:\/\/www.gleamtech.com\/images\/web-file-manager.png\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cdiv style=\"text-align: justify;\"\u003E\u003Cspan style=\"font-family: Georgia, 'Times New Roman', serif;\"\u003EShare files with your clients or staff on your web site. Enable your users to securely access, upload and organize documents from anywhere with only a web browser. Store your confidential files on your own server and have full control over them.\u0026nbsp;Turn your web site into a web file server in few minutes!\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003Ch2 style=\"text-align: left;\"\u003E  \u003Ca href=\"http:\/\/ajaxplorer.info\/\" target=\"_blank\"\u003EAjaXplorer\u003C\/a\u003E\u003C\/h2\u003E\u003Cdiv\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-Q3aksoEff24\/T6XheREoc1I\/AAAAAAAAATE\/D0eYvMOONng\/s1600\/ajaxplorer.png\" imageanchor=\"1\" style=\"clear: left; float: left; margin-bottom: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"240\" src=\"http:\/\/4.bp.blogspot.com\/-Q3aksoEff24\/T6XheREoc1I\/AAAAAAAAATE\/D0eYvMOONng\/s320\/ajaxplorer.png\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv style=\"text-align: justify;\"\u003E\u003Cspan style=\"font-family: Georgia, 'Times New Roman', serif;\"\u003EAjaXplorer comes fully equiped with a complete users management system, securing the whole installation at once. It can also be interfaced with existing authentication mechanisms, to implement a \"Single-Sign On\" system and make users life easier.\u003C\/span\u003E\u003C\/div\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch2 style=\"text-align: left;\"\u003E  \u003Ca href=\"http:\/\/ckfinder.com\/\" target=\"_blank\"\u003ECKFinder\u003C\/a\u003E\u003C\/h2\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/a.cksource.com\/f\/1\/img\/ckfinder.jpg\" imageanchor=\"1\" style=\"clear: right; float: right; margin-bottom: 1em; margin-left: 1em;\"\u003E\u003Cimg border=\"0\" height=\"180\" src=\"http:\/\/a.cksource.com\/f\/1\/img\/ckfinder.jpg\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv style=\"text-align: justify;\"\u003E\u003Cspan style=\"font-family: Georgia, 'Times New Roman', serif;\"\u003ECKFinder is a powerful and easy to use Ajax file manager for Internet browsers. Its simple interface makes it intuitive and quick to learn for all groups of users, from Internet beginners to advanced professionals.\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Ch2 style=\"text-align: left;\"\u003E  \u003Ca href=\"http:\/\/www.mollify.org\/\" target=\"_blank\"\u003EMollify\u003C\/a\u003E\u003C\/h2\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/www.mollify.org\/images\/screenshots\/path_bar.png\" imageanchor=\"1\" style=\"clear: left; float: left; margin-bottom: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"112\" src=\"http:\/\/www.mollify.org\/images\/screenshots\/path_bar.png\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cdiv style=\"text-align: justify;\"\u003E\u003Cspan style=\"font-family: Georgia, 'Times New Roman', serif;\"\u003EMollify is a web file manager for publishing and managing files hosted in a web server of your choice. Different users can have access to different files and with different permissions.\u0026nbsp;\u003C\/span\u003E\u003Cspan style=\"font-family: Georgia, 'Times New Roman', serif;\"\u003EUser interface is simple and intuitive, and it comes with 15 languages.\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Ch2\u003E  \u003Ca href=\"http:\/\/cwfm.sourceforge.net\/\" target=\"_blank\"\u003ECWfm\u003C\/a\u003E\u003C\/h2\u003E\u003C\/div\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/cwfm.sourceforge.net\/img\/shots\/small\/largeicons.JPG\" imageanchor=\"1\" style=\"clear: right; float: right; margin-bottom: 1em; margin-left: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/cwfm.sourceforge.net\/img\/shots\/small\/largeicons.JPG\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Ch2 style=\"text-align: left;\"\u003E  \u003Cdiv style=\"text-align: justify;\"\u003E\u003Cspan style=\"font-family: Georgia, 'Times New Roman', serif; font-size: small; font-weight: normal;\"\u003ECwfm (Comet WebFileManager) is simply a web file manager.This project to solve a typical 'intranet problem'. Non-skilled users want to exchange files from servers connected by wan or Internet link. Ftp is not suitable for this task 'cause its scarce user-friendlyness. Normal smb connections are impraticable over Internet due to security problems and slowness. The users are generally already able to use a web browser. All these considerations have carried me to one direction: a web application reachable from everywhere with the http protocol. Of course I started with security in mind. If anyone can connect to your server disks it's important to avoid any possible unauthorized access. Cwfm is constituted by a set of php scripts that perform user authentication (using php sessions) and a subset of a typical file manager features.\u003C\/span\u003E\u003C\/div\u003E\u003Cdiv\u003E\u003Cbr \/\u003E\u003C\/div\u003E\u003C\/h2\u003E\u003C\/div\u003E  \u003C\/div\u003EFuther Reading \u003Cbr\/\u003E\u003Ca href=\"http:\/\/html5managetheweb.appspot.com\"\u003E HTML5 Featues and APIs Presentation. \u003C\/a\u003E\u003C\/div\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/kongaraju.blogspot.com\/feeds\/5665533825909339115\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2012\/05\/5-powerful-web-based-file-managers.html#comment-form","title":"1 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/5665533825909339115"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/1933328805824469647\/posts\/default\/5665533825909339115"},{"rel":"alternate","type":"text/html","href":"https:\/\/kongaraju.blogspot.com\/2012\/05\/5-powerful-web-based-file-managers.html","title":"Powerful Web Based File Managers"}],"author":[{"name":{"$t":"Raju Konga"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/10750040862243953720"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"33","height":"30","src":"\/\/3.bp.blogspot.com\/-NRmd50o6VzU\/Xl0GJ89U5nI\/AAAAAAAAFvs\/hmFaD7EEWBktvdxCDKDS8PFdbVIiGTaBgCK4BGAYYCw\/s220\/latest_pic.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/3.bp.blogspot.com\/-g32i1T-jK_k\/T6VYBNlVOTI\/AAAAAAAAASk\/kimMSKHVey0\/s72-c\/IDc.png","height":"72","width":"72"},"thr$total":{"$t":"1"}}]}});