For SXSWi and FluentConf this year, @boyofgreen and I created a demo application to showcase some of the hacks that we included in our book OReilly’s HTML5 Hacks.

The demo application, Nerdclustr, is an HTML5 mobile application that brings ‘nerds’ of all types together conferences and provides a visual map that updates in real time. The application was written with Node.js and the Express web framework. It demonstrates the following specifications: HTML5 Web Forms, Geo Location API, WebSocket, Canvas, CSS3 transforms.

Given, the attention that Web Components and Polymer.js have been getting lately, I felt this was a good opportunity to demonstrate some of the exciting new specifications that are making their way to modern browsers. For the sake of this tutorial, I’ll be using and providing screenshots of Google Chrome, but it should be worth your time to explore the status of each of the specifications in other modern browsers as well.

In this tutorial, we will take a look at the HTML5 specs mentioned above in detail. Then, we will explore Polymer.js and build out an example application.

Read more at: http://tech.pro/tutorial/1421/building-next-generation-widgets-with-web-components