Old British ArtCar

Old Car, originally uploaded by vermegrigio.Via Flickr:Camden, London, UK.August 2011Shooted by Nikon Coolpix S620

New toy in the house: Arduino ADK

Yay! I have got a new toy in the house to play with – Just bought Arduino ADK board. Ever since Google announced Android ADK at Google I/O 2011, I have been trying to get hold of one. I couldn’t get it till now because of my geographical location and the demand for the board. Finally, I have ordered it from SimpleLabs, Chennai and received the package yesterday. I will be playing around with it in the next couple of weeks and share my experience in this blog.

What is Android ADK?

Android 3.1 introduces powerful new APIs which allows external USB hardware to interact with an Android device. The APIs are based on a USB stack and services that are built into the platform, including support for both USB host and device interactions. Using the APIs, we can create applications that are able to discover, communicate with, and manage a variety of device types connected over USB. More info here.

Arduino ADK

The Arduino ADK is a microcontroller board based on the ATmega2560 (datasheet). It has a USB host interface to connect with Android based phones, based on the MAX3421e IC. It has 54 digital input/output pins (of which 14 can be used as PWM outputs), 16 analog inputs, 4 UARTs (hardware serial ports), a 16 MHz crystal oscillator, a USB connection, a power jack, an ICSP header, and a reset button. Source: Arduino.cc

-- Varun

HTML5: Page Visibility API

Today I stumbled upon an interesting API being introduced in HTML5 – Page Visibility API. As the name suggests, the API facilitates the developers to programmatically determine the current visibility of the page. User interface designers can take advantage of this API, which is still in Working Draft, to give better experience to the visitors. This will also help in better resource utilization. For example, if your page has an animation, you can efficiently render it only when the page is visible without having to hog the resources. The specification introduces a new interface named “DocumentVisibility” that provides Web applications with the means to programmatically determine the current visibility of a page and be notified of visibility changes. Check out the demo here.

The specification includes three main parts:

1. Attribute “document.hidden”: This is a Boolean attribute of DocumentVisibility interface indicating if the page is hidden from view. It will return ‘false’ even if part of the page is visible. There are vendor specific implementations for this. It is implemented as document.msHidden in IE and document.webkitHidden in Chrome.
2. Attribute “document.visibilityState”: This is an attribute of DocumentVisibility interface indicating the state of the page. The specification includes three different states: “hidden”, “visible”, “preview” – The page is not visible but a preview of it is visible. Again, its open to vendors to define their own states. Its implemented as document.msVisibilityState in IE and document.webkitVisibilityState in Chrome. The major deference, however, is that document.msVisibilityState is a numeric value where as document.webkitVisibilityState is a string value. Hence, its better to stick to document.hidden till the API matures.
3. Event “visibilitychange”: The visibilitychange event will be fired whenever a change is made to the document.visibilityState attribute. We can listen to this event on document and as mentioned in point#2, its advisable to use document.hidden to find out the new state within the listener. Here, again, you will have to listen to vendor specific events.

Demo:

I have setup this demo page to explore the Page Visibility API. It runs a timer to show clock on the page. The timer will be disabled whenever we move away from the page and will be re-activated as we enter the page with the adjusted clock timing. Smart developers always view the source. View the page source to know more.

Browser Support:

• Internet Explorer (10+)
• Chrome (12+)

Page Visibility API will be really useful if vendors follow the specifications completely and move away from the vendor prefixes. More info about Page Visibility can be found here.

-- Varun

Diving into Node.js

If you are following the posts on Hacker News, you would have definitely heard about Node.js. At least one of the posts related to Node.js will be on the front page of Hacker News everyday. Node.js is an event driven server side JavaScript environment. Its a runtime which can execute JavaScript files on the server side using the JavaScript engine V8. It is intended for writing scalable applications like web servers. It was created by Ryan Dahl in 2009. I have been playing around with Node.js for about a month now and this post is a consolidation of different things I have came across in the process of learning.

Node.js resources:

• Node.js official site. Check out the Wiki on this site.
• Node.js Introduction & Installation.
• The Node beginner book by Manuel Kiessling. This is an excellent book to get started with Node.js and server side JavaScript. It is a great work by the author. He has chosen to explain the concepts via “How not to” and I am really impressed with his writing style. Hats off to the author.
• Node by example. This is an excellent series of posts to showcase some of the available features of Node.js. It is a collection of short code examples.
• Node Modules. This is the list of modules which you can hook into your code. Its a huge list and you can find modules for almost anything you wanted to.
• Node.js hosting. This page contains list of hosting sites where you can host your Node.js applications.

If you are from Java background, you can also go through this and this to know about Node.js from an Enterprise Java perspective.

Note: I have read through all the materials posted here and found them to be useful. If you come across any interesting links about Node.js, share them via comments.

-- Varun

Facebook Circles Importer: Import Google+ Circles into Facebook

Ever since Google announced its social product Google+ last week, hackers around the world have built some cool hacks. Here is one such hack built around Google+ and Facebook. Google+ sports a simple and neat interface and the highlight is the interface of Google+ Circles. And, few engineers from Facebook have already built “Circle Hack” and ported the interface of Circles to Facebook (Lists) in no time. This piece of work of mine is an extension to Circles hack which facilitates importing Circles into Facebook. Access it here.

Circle Hack

One of the important features of Google+ (as bragged about) is Google+ Circles which helps you to share your data with a specific group of people. A similar feature already exists (Lists) on Facebook but is hidden inside a bunch of other features and is not very user friendly. Circle Hack is an excellent piece of work done by few engineers from Facebook to provide a friendly interface to Facebook lists. Circle hack is developed as a node.js application and the backbone of the hack is the UI Kit developed by the same author. It is a very popular UI framework for building complex web apps. Again, the author has done a very good job. Source code of Circle Hack can be found here. I was hacking through Circle Hack as well as UI Kit and was quite impressed with the offerings of UI Kit. I have browserified the node modules and ported it into VServices, which I already own.

Circles Importer

Circles Importer is an extension to Circle Hack which facilitates importing contacts from an external source (like Google+)  into Facebook and create lists out of them. Facebook mail invite has a similar feature of importing contacts but you have to take the pain of creating the lists yourselves. That is where this tool will fit in.

Steps to import Google+ Circles into Facebook?

• Google has provided us with a handy tool (Google TakeOut) to extract our data from Google+ whenever we wanted to. Google Takeout lets you download an archive your data from various Google services including Buzz, Contacts and Circles, Picasa, etc.
• Sign in to Google Take Out and select the service “Contacts and Circles” for archival. Download the archive (zip).
• On extracting the archive, you will find .vcf files under contacts folder.
• Upload the .vcf file to the Circles Importer. You can even drag-drop files from your desktop.
• Circles Importer will parse the VCard and shows the list of Facebook friends who are part of the uploaded circle.
• Choose an existing list from the auto-complete text box or provide a name for the list. Click on ‘Add to list’ to complete the process. 

-- Varun