TechEd on the road-new features in ECMAScript 5

Happy to say that today I have presented at "TechEd on the road", a developer conference at Microsoft Hyderabad, on "JavaScript APIs and enhancements in ECMAScript 5". It is one of the premier tech events, organized by Microsoft User Group Hyderabad (MUGH) with audience in both developer and IT Pro tracks.


As in most of my sessions, I tried to use web based presentation instead of traditional power point. I developed my presentation using HTML5, jQuery and leveraged the new features of ECMAScript5, just to showcase a real time demo.  The response of the audience and fellow speakers was very cool and probably the presentation was worth the effort :)


Presentation & Demo: Click here


Note that you need ECMAScript5 supported browser to run the slide show. You will get a prompt if your browser doesn’t support ES5. Run it in full screen and use 'right', 'left' keyboard keys to navigate.


For the presentation, I have checked several existing solutions like S5, HTML5rocks slides etc., but I wanted inline code snippets as demos . So wrote my own slide show system and it came out well. Probably, I shall write another article on how I have developed it.


Have thoughts of generalizing this web based slide show and releasing it on github/codeplex. Play with the presentation and get back with your thoughts :)

Update: You can check about the proceedings and pictures of the event in my friend Phani's blog.

ECMAScript 5 'Strict mode' support in browsers. What does this mean?

If you are closely following how the web is shaping up lately, you would be thrilled, like me, looking at pace at which things are changing. There are hundreds of things happening on the new HTML5, CSS3, JavaScript front, frequently releasing browser versions and contest for speed, supporting modern standards etc. One such innovations is ECMAScript 5 Strict Mode support in modern browsers. Recently, IE10 platform preview 1 announced 'strict mode' support in Mix 2011 conference . The goal of this article is to explain what 'Strict Mode' support in modern browsers mean and how developers can take advantage of it.


I am aware of JavaScript. But what is ECMAScript 5?

Similar to W3C which standardizes HTML specifications, ECMA is the body which standardizes JavaScript. ECMA-262 is the specification which defines the JavaScript language, interchangeably referred as Jscript/ECMAScript. The JavaScript code which we web developers have been using since a decade is as per the guidelines defined in the Third edition ofECMAScript (ES3 in short) released in December,1999.


ES3 was released in a hurry and it had several loopholes, which means that the future versions have to be built on top of these loopholes to support older pages (I strongly recommend reading grandpa Crockford's book, JavaScript- The Good Parts to know the good and bad parts of the language). ECMAScript 4 had several ambitious, drastic changes in its specs but was never released due to conflicts regarding backward compatibility, fearing a broken web. So,ECMAScript 5 (ES5 in short) was released in December 2009, more as a transitional version of the specification, adding few cool features, without much changes in the syntax (Check the ECMAScript specs archive).


Few new features in ES5:

ECMAScript 5 includes few new APIs, computational methods for things which can already be done in ES3. One of the most interesting features is the newer object model in ES5, using which, newer objects can be created easily and their extensibility can be controlled. Similar to higher programming languages like Java or C#, JavaScript objects now have getters and setters, non-enumerable methods, sealed and frozen objects  etc. ES5 also describes native JSON support, which includes methods like JSON.parse() and JSON.stringify() which remove dependency on external libraries for working with JSON.


Each browser has its specific implementation of ES5, as per its JS engine. ES5 support in IE 9 is different from ES5 support in FF 4.


ES5 Strict mode:

'Strict mode' is an innovative feature of ES5. It is a restrictive variant of ES5 implementation, which follows a slightly different semantics from the normal JavaScript. Someof the deprecated, bad parts of JavaScript in ES3 specification are disabled or thrown as exceptions in 'strict mode'. It is not backward compatible with older browsers and has to be opted-in by the developer.

To enable ES5 in strict mode, just use the string "use strict" as the first line of your JavaScript code. This will make the entire program to run in strict mode.


Alternately, you can place "use strict" in a function, to restrict only to that context.


function isStrictMode(){

return !this;


//returns false, since 'this' refers to global object and '!this' becomes false


function isStrictMode(){   

"use strict";

return !this;


//returns true, since in strict mode, the keyword 'this' does not refer to global object, unlike traditional JS. So here,'this' is null and '!this' becomes true.


I hope to cover detailed demos on this in the following posts.


The good parts of  ES5 Strict Mode:

In JavaScript, if a variable is not explicitly declared, it is implicitly assigned global scope.This may look fun to code in JS, but is a nightmare to maintain in huge projects. Strict mode throws error if variables are assigned values without declaring and hence implicit global variables will not be created. This is a huge win for the language as well as for huge projects.


Few such good changes in strict mode are: Assignment to a read-only property will throw error, object literals having 2 or more properties with same name will throw error, functions having 2 arguments with same name will throw error etc. All these changes will help in making the code more reliable, readable and manageable.


The IE team launched  a 'Strict Mode' demo in their IE Test Drive HTLM5 demos. You can check if your browser supports ES5 Strict mode or not by checking the "Try Strict Mode" demo. Download IE10 platform preview 1 if you haven't and start playing with it!


P.S: Happy to share that Microsoft has recognized my community contributions and awarded me "Microsoft MVP award" for the second consecutive year. In 2010, it was under ASP.NET/jQuery category and now for 2011, it is under "InternetExplorer" category. Thanks to Microsoft for the encouragement Smile

Why web devs should get excited about IE9!

A more beautiful web was launched few days back! After several platform previews, beta build, release candidate build, community feedback and rigorous testing, the final (RTM) version of Internet Explorer-9 has hit the market. On the first day of its release (Mar 14, 2011) itself IE9 saw 2.35 million downloads, which is 27 downloads/second! If you aren't one among them, you should download IE9 RIGHT NOW from here: (Yes, it is an official, trusted site by Microsoft).

Before going any further, let me confess something. I'm a web developer enjoying modern web technologies. I use IE, Chrome, Firefox, Opera, Safari interchangeably. I used hacks to support older browsers. I want HTML5, CSS/JS support, good debugging tools, cross browser compatibility. I want the web to win, like many of you and hence want to share my excitement about IE9, which I call as a win for the web :)

If you are a newbie to IE9, you can check the top features of IE9. Since there are several resources on the features, I want to concentrate on why web devs should get excited about IE9.

As a web dev, whether you love it or hate it, you need to support all browsers. In most of the cases, IT enterprises and their clients are Microsoft shops and will prefer IE+Windows over any other combination. You may be a Firebug geek (check IE9 developer tools), but your client doesn’t bother about it. He needs his site to work flawlessly in IE primarily and of course support the rest. (This is a well known fact which does not need proofs). With rest of the browsers updating quickly, IE was a little behind the race w.r.t supporting newer web standards. "Better late than never", as the saying goes, IE9 comes as a great boon by supporting most of the modern web standards, easing developer's life. So even if you are a firefox/chrome power user, being a web dev, you need to respect IE9.  I'm sure you would love it if the 'critic' mask is removed.  Now comes the below question.

Is IE9 the most 'modern' browser on earth w.r.t web standards?

The answer to this debatable question depends on your definition of the term 'modern'. If implementing web standards drafted by W3C just a couple of minutes back is what you call 'modern', then IE9 is NOT.  If providing 'site-ready' HTML5/CSS3/JS support which developers and consumers can rely without fear is what you call 'modern', then yes, IE9 is the most modern browser :)

Did you know?

Microsoft started something called HTML5 Labs, where it prototypes early, unstable web standards and features proposed by standards bodies like W3C (Web Sockets, IndexedDB etc.). It offers prototypal implementations for unfinished parts of HTML5 which interested developers can try, but consumers can’t yet rely on.

By clearly separating prototype implementations from main stream browser product, many negative consequences can be avoided.  Implementing latest standards in a rush and rolling them back (e.g., Chrome H.264, Google gears etc) for whatever reason is only a pain for web devs. IE team knows what it's competitors already have but is waiting for stability of standards, so that developers can have peaceful time.

What's hot now?

IE9 now supports WebM video format via WebM components for IE9. You should check this article for further details, where Dean Hachamovitch, Corporate Vice President of Internet Explorer, makes a truly valid point by saying "The people who build and use the Web deserve practical and consistent video support rather than ideology."

Resources from my friends, which you should check:

  * Article on few FAQs (myths?) about IE9  by  Harish Ranganathan, Microsoft India

  * Article on History of Internet Explorer from IE to IE9 by Kunal Chowdhury, Microsoft MVP

So, it's time for web devs to rejoice and play with modern (and stable) web standards, widening creative and technical horizons. Keep checking the official IE blog for more updates. Enjoy the beauty of the web :)

NOTEMicrosoft TechEd 2011 is just a few days away. If you are unable to make to it, you may watch TechEd 2011 LIVE and watch the sessions, industry trends for FREE. Dont Miss It!! I'm attending in person. See you there! :)

Semantics-Why should I care?

'Data' is the new currency on the web and there are companies fighting for YOUR data. Facebook blocked Twitter from looking up for friends, Google fought with Facebook over data protectionism and such wars are wide spread across the web. Probably, there are business constraints which are beyond the scope of discussion, but how does this matter to us, the end users or more specifically, the developers?


We log in to many social media sites  and continue registering for even more services every day. We spend a lot of time for this, struggle to maintain so many profiles, send friend requests to people who are already friends in other networks, finally ending up locking our data in stovepipes. What is the value of data which is locked in some data silos? It can't be reused anywhere else and is useful only at a single place, which means, such data isn't much useful. It is YOUR data and it needs to be available quickly, easily and in a way that suits your needs. We have already moved from Web 1.0 era, where applications published data stored in 'private' databases. We are in Web 2.0 era, where open APIs are available and mashups can be made to serve our purpose and share information. Yet, data is locked in private databases and building up mashups remained only as loss of time for developers.  Data on a website can be searched by text matching techniques but cannot be queried. Moreover, we cannot move our content from one place to another or reuse our twitter friends list on flickr.


In the age where data is exploding and number of machines (computers) are competing with number of people, the amount of machine readable data (content that a computer can understand when it drops in at your site) is meager. e.g.,  Data on a webpage does not express the relation between different objects in a way machines can understand. Developing content is expensive and developing another app just to support a new service is not 're-use'. Social networking sites are like independent islands, creating many independent communities of users and data. There is a need to connect these islands, allowing users to move from one place to another, along with their data. This is where semantic web standards peek in.


Semantic web standards help in resolving all the issues listed above by creating rich, standard, machine readable content. They work on 'network effects', which means the more users adopting semantic web standards, the more benefit they can reap. e.g., The benefit of cell phones will be best known if everyone in a community owns one, since communication becomes easier. Did you know that you are already in a part of semantic web? If you are using Facebook or Twitter, you are living in a semantic environment without your ignorance. The working of Facebook's "Like" button is entirely driven by these standards. There are many protocols in place and good work is being done by enterprises as well as open source communities in advocating these concepts. RDFa by W3C, Microformats, Abmeta, Yahoo Search Monkey, Google rich snippets, Facebook Open Graph Protocol, Twitter Annotations, etc., are all the efforts to put more machine readable markup on websites.


Semantic Web, Open Data, Linked Data, Web 3.0, HTML5. Are all these same?

This is a huge topic of confusion, with so many terms lying around and people using them interchangeably. UK government opened up their data to the public and this data refers to 'Open Data'. 'Linked Data' is a way of publishing structured data on the web, based on certain principles outlined by Tim Berners Lee. It is essentially aimed at solving the design issues of semantic web, helping in interlinking different islands of web pages. So, Open Data can still be in isolated island, without being linked to other communities. 'Semantic Web' is a web of structured, machine readable data and it makes sense when data is both open and linked. It is huge tree having linked data, vocabularies (FOAF, SIOC), Ontologies, Rules, Reasoning etc.,  as its branches. 'Web 3.0' is a visionary term, imagining a web where machines can understand, add content and artificial intelligence showing its power in search. It is used synonymously with 'semantic web', but the transition to such a generation is not anywhere in the near future, since there is enormous amount of data to be serialized to machine readable format. HTML5 is one of the many enablers of the vision of semantic web and it's microdata specification is designed to simplify the existing annotation technologies.


The goal of this article is to show why developers should care for semantics, in building the next generation of web applications. Intentionally, it is kept far from deep technical things and subsequent articles would go a bit deeper. Hope this held your interest for sometime Smile

How "open" is the open web today?

"Openness"is the heavily used term in the current tech era. It has its roots penetrated into several areas like mobile/consumer electronics markets, data protectionism, open source platforms etc. While the debate on who is the openest of them all is a never ending battle, with respect to web technologies,developers are seeing  positive trends.Here are some of my observations:


(1) The open web platform:

It is a collectionof web technologies which W3C and other bodies have put forward. It includes HTML5 markup, CSS3, SVG, ECMAScript, Web Storage, IndexedDB, Web workers,Microdata, Geolocation API, XMLHttpRequest and more.. Ever since HTML5 became the buzz word, there was lot of hazzle in forums over HTML5, flash, silverlight. It is interesting to note that the biggies are voting for open web, apart from pushing their own RIAs, a win-win for both communities.


(2) HTML5, the jewel of open web:

Unless developers are living in the age of dinosaurs, the term HTML5 should dance on their lips and finger tips. WHATWG's recent announcement that "HTML is the new HTML5" itself indicates the shift to openness. The idea of not versioning markup and leaving it as a living document reveals means- there are so many things happening in the open specifications and there is no definite point in timewhere "everything is done". 


HTML5 might still bethe marketing term (along with the new logo), but it will remain as HTML to the developers heart. For me (andhopefully for every developer), this is openness not just in technology butalso in heart and soul :)


(3) The open web stack:

This is one areawhich I'm very much interested. This forms the foundation for the way different web APIs talk to each other, Openly. In simple words, if you build a mashup with twitter API, you are locked in twitter. Similar is the case with any otherAPI, which is incompatible with each other by design.


As of now, there is NO open way for building mashups and developer needs to start from scratch forevery mashup he builds. Hopefully, OpenStack will fill this gap with several open protcols like OpenId, Oauth, XRDS, Activity streams, Portable contacts, OpenSocial etc. The unresolved issues like privacy, user's control over data could possibly dealt with common agreement over the open web stack.


(4) The Zuckerberg saga:

For a layman, Web2.0 may not be a catchy terminology, but they are using every feature of Web2.0 with Facebook. In a way, Facebook is "Humanizing" the web2.0 revolution, bringing it into everyone's life. Through itss RSS (news feeds),mashups (content aggregation), widgets, personalization, collaboration,  using oAuth/Open Id etc,  Facebook has shown the web2.0 taste to its~600 million users. This,  I strongly believe is a result of deciding to be open(though there are some gaps in FB's open strategy).


(5) The Open data movement:

This, I'm sure will take lot of time to evolve, since it is not just about technology but it is also about mindset of people. The open data movement is all about 'put yourdata on the web and make it open' and this involves governemnt, scientific,academic or whatsoever data. This can be used by people to come up with amazingly useful mashups.


UK government's launch of open data, people's ideas to it is an excellent demonstration of this. My friend Thejesh has put commendable effort on this, working with Indian Governent. I strongly sense that Aadhaar will play a crucial role inOpen data movement in India and would love to contribute to it.


These have been my observations and learnings in the past one month, where I had a chance toattend 5 good International conferences and interact with awesome people. Am loving it :) Do share your ideas on the same.

NovoGeek 2.010

2010 has proved to be a very successful year in my career-personally and professionally, giving me lots of good experiences. Though I write only technical articles in my blog, I thought to go a bit offline and write a more personal article towards the end of this great year, sort of introspection. Hence the version NovoGeek 2.010 [something like web 2.0 ;)]

Technically, I had an awesome experience working on jQuery + ASP.NET, which gave me a very good understanding of the web. My online and in-person contributions to Microsoft developer community fetched me Microsoft MVP award, which is a very good motivation and milestone for any .NET developer. I have used twitter to the best, learning and sharing lots of tech stuff.

After my stint with jQuery for a long time, I have moved to Future Web Research Lab, SETLabs (R&D wing of Infosys), which does cutting edge research on web technologies. Our team develops patented products/platforms in the areas of Augmented Reality, Web accessibility and Social networks. I have ample freedom here, working on areas of my interest.  Unlike my previous work, I'm encouraged and sponsored to attend International conferences, where I can interact with professors/researchers and present technical/research papers. I have attended BASNA 2010 this month and would be attending ICDCN 2011, Mobile India 2011 and may be more. Have to start presenting research papers in 2011. All I can see is I'm grooming to the next version of myself :)

Personally, 2010 also took my non-technical passions to a peak level. Playing Chess with Viswanathan Anand, the current World Chess Champion, in a simultaneous match is a dream come true!! I've learnt the art of Yoga and practiced it so rigorously that I could perform advanced asanas with ease. Yoga & meditation brought a very positive change in me-physical fitness, concentration, philosophy and more. I read lot more books this year and started building my small sweet library. Had awesome time with great mentors, friends, well wishers and books. Can't hope for something better than this :) 

Having exciting plans for 2011, from upgrading my blog to specializing in certain areas & socializing more. Hope 2011 turns out to be brighter for me and you as well.

Happy New Year wishes in advance and happy programming Smile

Integrating Social Networks with ASP.NET-Virtual Tech Days 2010

Happy to say that I have presented at Virtual Tech Days 2010 on "Integrating Social Networks with ASP.NET" in Developer's Track. It was a 3 day online technical event (Nov 22-24, 2010) with ~75 sessions from 55 Industry experts on Microsoft technologies.

My presentation: Click here

Demos: Click here

The sessions were scheduled for Developer and IT Pro folks, spanning over Web Development, Windows Client Development,  Database and BI Development, Windows Client, Online Services, Security, Rich Web Experiences, SharePoint 2010, Windows Azure, Datacenter, Database Administration, Interopirability with Microsoft Technologies and Hands On Labs. In case you missed the event online, you can download the presentations and videos from the site shortly. 

Though I could not meet developers in person, I enjoyed presenting a demo filled session, which I hope would be useful for developers to start off with social networking APIs in their ASP.NET websites. If you couldn't get a chance to ask questions during the session, you can always tweet me.

So what next? Microsoft Community Tech Days is coming on December 18th, 2010. Venue is Microsoft Hyd campus. I've seen lots of hot topics being prepared by community folks! Dont miss it!!

Happy programming :)  

Programming the Social Web with Facebook's Open Graph API

A couple of weeks back I have presented on Facebook Apps Development at DevCon 2010 and it was nice to see overwhelming response. In this article, I shall throw light on FaceBook's new social features, to help developers getting started with Facebook apps development.

The Facebook F8 conference is an yearly event hosted by Facebook, to bring developers & entreprenuers together to build the social web. With the previous events announcing the Social graph & Facebook Connect, the 2010 F8 (21st April, 2010) had big news for the evolution of social web, briefly:

  • The Graph API
  • oAuth 2.0 based authorization
  • Social plugins
  • The Open Graph protocol.

The Graph API, which is the core of Facebook Platform, gives developers the power to share and make the web more open & connected. Mark Zuckerberg, founder of Facebook, coined the term "Social Graph" which means "the global mapping of everybody and how they're related". By definition, the social graph is composed of objects(people, pages, events, communities, photos etc) and the connections(relationship, tagging, grouping etc) between them. Every object in the graph has a unique ID by which it can be referenced.

Technically speaking, Facebook offers REST based service which can be used to query about any object in the graph.

e.g., To get public info about Bill Gates on Facebook, click the following link:

[Note: When you click the above link, the query gives JSON output, which contains data about the requested object. IE will ask to download the output which can be opened in notepad, where as Firefox/Chrome/Safari will open in new tab directly.]

Similarly, you can get info about the recent Microsoft PDC as: You can even introspect a bit deep and get additional info as:

Notice that in the above cases, we are retrieving only public info. To get private info, you need to get authenticated by Facebook and append an "access_token" parameter in query string like:

To see how it works, login to and then open in new tab. Scroll down to connections section and click on any connection like "Friends", "News Feed", "Profile feed" etc. The url looks like this:'A set of random characters which FB gives you after authentication'.You will be able to see complete private information, which is not available without authentication.

oAuth 2.0 is new authorization mechanism which is used by Facebook. It is an open protocol which allows secure API authorization without the need for entering credentials(passwords).It relies on the exchange of tokens instead of credentials and is more secure.

In layman's terms, when you add applications like FarmVille, you will get a confirmation box with "Allow/Deny" buttons. When you click the "Allow" button, the application will be added to your graph. Behind the screens, the app uses oAuth to authorize you via exchange of tokens. More about it in my upcoming article.

Social Plugins are extensions of Facebook which can be embeded in your websites, creating social experiences. The famous "Like" button, login button, recommendations etc are some of the social plugins. They can be embeded into any existing site using FBML and Facebook JavaScript API. The official reference is clearly the best guide for learning about the social plugins.

The Open Graph Protocol helps in turning out your web pages into more meaningful objects in social graph (Did i say something similar for social plugins too? Wait., there is more to say).

By adding a like button, you only add a link to your page in facebook's social graph, which does not have any other information. But by adding <meta> tags of Open Graph protocol on your web page's header, you are sharing more semantic data about your webpage, such as, title of the content, type of content, description, image etc. Since the protocol is open, these tags can be read by facebook (or any other network in future) to provide more meaningful information to users.

So, by using the Graph API, oAuth, social plugins and the Open Graph Protocol, you can fetch data about any object in the social graph, present it in a semantic way and provide social experiences to the 500 million(& growing) Facebook users on your site!

In my upcoming articles, I shall write in depth about each of these, explaining with code how they work.

Happy Coding Smile

Facebook Apps Development-DevCon 2010

Happy to say that I have presented at DevCon 2010 on "Facebook Apps Development for web devs" at Microsoft Hyderabad. The event, organized by Microsoft User Group Hyderabad (MUGH), had 250+ audience in Developer and IT Pro track! The highlight of the event is the session given by the talented Aaron Skonnard, CEO of PluralSight!


Presentation: Click here

Demo Facebook App: Click here

Met several geeks & hackers in the event and made good techie friends. Having a chat with Aaron, attending his live session and having him in my session was really awesome! It was difficult trying to explain about Facebook oAuth in the stipulated time, but I'l surely blog about it with good demos very soon. Hope the audience had a great time!

Inspire the web with just 10K!

That was the caption of the 10K coding challenge hosted by An Event Apart, in association with MIX Online. The challenge is to build a web app in less than 10 KiloBytes. The rules are:

  • Total file size, including images, scripts & markup, can’t be over 10K.
  • Apps should work equally well in IE9 Dev preview, Firefox and webkit browsers. HTML5 can be used.
  • jQuery/Prototype/Typekit can be used and they won't be counted against 10K.

It is really amazing to see excellent hacks written under just 10K. One of my favorite geeks from Yahoo, Christian Heilman wrote a World Info hack using free services under 4.83 KB!! It fetches list of all countries in the world & on selection it will fetch the country's map, wikipedia info n stuff. Interesting..isnt it? There are around 400 of interesting ideas/hacks submitted, which are a source of great learning. Most of the prize winners are smart coders of JS based games.

My 10K Hack:

I have submitted a quick, dirty hack - 10K Start page. The idea is fairly simple, to have an ajax start page like iGoogle, PageFlakes, NetVibes but under 10K. Though it is not possible to add all the modules and beautify like the big guys did, I tried to have maximum possible features under 10K. I have used jQuery, HTML5, Yahoo Query Language (YQL), CSS3 to build the app. The app has 4 widgets- Twitter search, Yahoo weather search widget, sticky notes widget and a generic RSS reader widget. New widgets can be added, removed, dragged & dropped.

YQL queries: Thanks to Yahoo! For sure, I cannot think of a way other than YQL to build a mashup so quickly. I used JSON format so that parsing on JS would be optimal and easier. Here are the YQL queries which I used:

Twitter search widget: Click here
Yahoo weather widget: Click here
RSS widget: Click here

So, for the above 3 widgets, all my JS codes involves fetching data from these YQL services in JSON format, parsing them and displaying in corresponding divs using jQuery. 

HTML5 features:

ContentEditable: For sticky notes widget, I just placed a div tag like this: '<div contenteditable="true" class="sticky">Edit this sticky notes...</div>'  The "contenteditable" attribute is a new attribute defined in HTML5 specs, which makes a div editable on click and readonly on mouse out.

LocalStorage: It is a client side key value database, which can be used to store data in user's browser. I'm using this to save the layout on "window.onbeforeunload" event and restore the layout on pageload.

Adding/Removing/Draging widgets: All these operations are simple jQuery based DOM manipulations. For drag & drop, I'm using jQuery's jqDnR plugin.

Participating in such events is real fun, as we don't often try to think in terms of minimalistic code.At the last minute, I had to even do the optimizations like renaming "jQuery.js" to "j.js", just to reduce 5 bytes!! 

Have any suggestions/comments? Please let me know.