Varun's ScratchPad

[How to] Use error console in Native UI for Firefox on Android

2011-12-27T14:58:00.001+05:30

Developers use different techniques for debugging their web applications. Though there are lots of new techniques coming up in this space, one technique which is still widely used is console logging. Every browser (including the mobile browsers) supports this feature in some capacity. I have been using Firefox on my Nexus One and it has an in-built error console which can be enabled from about:config. However, with the new native UI for Firefox on Android, this option does not seem to be available. Read through this post to find out how you can use error console in the native UI.

Error Console in Firefox Native UI

Firefox Native UI writes all the console messages to Android system log which can be read via logcat which comes along with the Android SDK.

Android SDK. Download and install the latest Android SDK from here. This comes up with all the tools needed for development and testing of your application. Once the SDK is installed, go to the location on which the SDK is installed. Run ‘adb logcat’ - this will show the complete log from Android system. To view Firefox specific log messages, do a grep: ‘adb logcat | grep “Gecko”’. To view Firefox console messages alone, do a grep: ‘adb logcat | grep “GeckoConsole”’.
If you don't want to install Android SDK, you can use apps like aLogCat (Android app for viewing the logs). The app provides an option for filtering the logs and also comes with lots of other accessibility options.

-- Varun

Arduino based game controller

2011-11-27T01:10:00.001+05:30

Being the big fan of technology that I am, I always wanted to try out the latest things happening on the technology world. Some of the buzz words being talked about in the technology world are HTML5 and mobile development. After having fun writing games during my college days, I was interested in building a HTML5 based game. Then, I came across this HTML5 based implementation of classic Helicopter game. In the mean time, I was also playing around with Android ADK and Arduino boards. Finally, made up my mind to hack something cool connecting all these technologies – HTML5, mobile and USB accessories. And, here is the result of the experiment - “Arduino based game controller”. In a nutshell, it’s a game controller which can be connected to an Android phone using which we can play HTML5 games on the browser. The heart of the hack was built over a weekend and source code of the same can be found here. Check out the video demo of the hack at the end of this post.

What is it?

Arduino based game controller is a Joystick / game controller which can be connected to an Android phone via USB. Using the controller, we can play games on the browser. An android driver app has been built which reads the data from the game controller (using Android ADK) and routes it to the browser over web sockets. The game has been hosted here (The multi-player mode might not work properly as the hosting site does not support web sockets). More detailed information can be found here.

The hack consists of three core modules:

1. Game module. HTML5 based Helicopter game originally written by Dale Harvey. The game uses HTML5 canvas for rendering the game elements. I have forked his code and have built the networking layer of the game. I have integrated the game with Node.js and Socket.io to support multi-user mode. In order to facilitate seamless communication between the controller and the game module, web socket technologies have been used.

2. Joystick / Controller module. For this hack, I have used Arduino Mega ADK board and a joystick shield mounted on top of it. Arduino board has been flashed with the firmware which reads analog data from the controller and sends it to the connected Android device using Android accessory protocol.

3. Android module. An android app for linking the game module and the controller. The app can be installed on any device running Android 2.3.4 (Your device needs to have the USB compatibility library). It reads the data from the controller and forwards it to the browser over web sockets.

How to contribute?

The source code is available here under MIT licence. I have added enough inline documentations all around the code. Please send any bugs, feedback, complaints, patches about the hack to me at varunkumar.n@gmail.com.

-- Varun

Android 4.0 Ice Cream Sandwich Screenshots

2011-10-19T10:19:00.001+05:30

Google and Samsung announced their latest smart phone Galaxy Nexus earlier today. It has awesome hardware capabilities and the offerings from Android 4.0 are quite exciting. Check out the official blog post here. Android 4.0 SDK was also released today and you can download it from here. I downloaded the SDK and played around with the emulator. Emulator seems to be faster than that of HoneyComb but still you will find some slowness compared to previous versions.

Note: Hover over each screenshot to know more about it. Click on a screenshot to enlarge it.

-- Varun

Less , the dynamic style sheet language

2011-10-17T09:20:00.001+05:30

A style sheet language is one which describes how a document has to be structured and styled. The most widely used style sheet language is CSS and is mostly used for styling web pages written in HTML. If you have developed even a simple web page, you would have definitely come across CSS and would have used it in some form. CSS plays an important role in the success of modern web applications with rich UI. CSS has gone through various iterations with the latest one being CSS3. However, there are some limitations with CSS. We can’t do dynamic stuffs like interpolating a property based on a variable, re-using a property value across classes, etc. Less is an extension to CSS with dynamic behaviour such as variables, mixins, operations and functions. We can write complex CSS styles with Less. Do more with Less.

Highlights:

Variables. This is a very useful addition to CSS. In most of our CSS files, we would have some repeating values like color, font-size, etc. With Less, we can define global variables for these values and use them across the classes.

Mixins. Mixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It’s just like variables, but for whole classes.

Nested Rules. Often, we write some complex selectors which are lengthy and hard to read. With Less, you can simply nest selectors inside other selectors. This will improve the readability and makes inheritance clear.

Functions & Operations. Sometimes we would need to write a class in proportion to an existing class, for example a class for hover will have properties opposite to that of its base class. With Less operations (add, subtract, multiply and divide) on property values, you can build a complex relationship between properties.

How to use Less?

Less can be used on the client side (on browser) as well as on the server side (using Node.js).

On the client side, we need someone to understand Less syntax and converts them to browser understandable CSS. This is done by Less.js which needs to be included on the client side. Less files are saved with .less extension and can be linked to your page with rel attribute set to ‘stylesheet/less’. Make sure the style sheet is included before loading Less.js. The only drawback with this approach is that the conversion happens every time the page is loaded.
On the server side, we can pre-render Less files to CSS and serve the compiled CSS files. This is more efficient than doing it on the client side. You need to have Node.js installed to do this pre-rendering. Check out more info here. If you are on Mac, you can use this app.

Browser Support

Since Less uses basic JavaScript techniques, almost all the browsers support Less - IE 6+, Webkit and Firefox.

I have been using Less for quite sometime now and it seems to be very handy. Who else uses this? Twitter uses Less in its UI toolkit Bootstrap. Try it out yourself. Do more with Less. The source for Less is available here under Apache License. Know more about it here.

-- Varun

[How to] Run Android apps on Windows

2011-10-12T22:22:00.001+05:30

I have written earlier about installing Android market on the emulator and running Android apps on it. Here is a much simpler way of running Android apps from your PC. BlueStacks is a cool app which lets you run Android apps on your Windows PC. The application is available for free and it supports only Windows as of now. There is also an Android app which facilitates syncing of apps between your smartphone and the PC.

Features:

Full screen mode for apps.
Sync apps between Android smartphone and PC using BlueStacks Cloud Connect.
Install up to a maximum of 26 apps. (Unlimited in the case of yet to be released Pro version).

Try it out here. Mac version of BlueStacks will be available soon.

-- Varun

Per-Element FullScreen API

2011-10-02T01:19:00.001+05:30

I have been following the developments on Chromium channel and one thing which caught my attention last week is the fullscreen API. As the name suggests, the API supports “per-element” fullscreen on the browser. Traditionally browsers have been supporting fullscreen mode for the entire page but not for the elements on the page. This API will be handy if you want to focus on a particular piece of information on the page. Most of the analytics application can make use of this API to show more detailed information. I have worked on applications which spans across two monitors as it displays huge amount of information. With this API, I can utilize the real estate effectively. Multimedia contents can also be shown on fullscreen. The API, which is based on the Mozilla’s proposal, has two JavaScript methods: requestFullScreen() and cancelFullScreen(). Check out the demo here.

How do we use it?

The API includes the following methods to all the elements in the DOM:

requestFullScreen(): Requesting the browser to render the current element in fullscreen. On using this method, the keys will be disabled and the element will not receive any keyboard events. This is to protect the users from potential phishing attacks in fullscreen mode.
requestFullScreenWithKeys(): Same as requestFullScreen() but with access to keyboard events.
cancelFullScreen(): Use this method to return back to the normal mode.

These methods have been added to all the elements in the DOM. Apart of this, a new attribute allowfullscreen has been added for the iframe element. You can also listen to the event fullscreenchange to know the state of the element. Three CSS pseudo elements have also been added: :full-screen, :full-screen-doc and :full-screen-root-with-target. Using these pseudo elements, you can control how you want your elements to appear in fullscreen mode.

Criticism:

The proposal received many criticism from the security experts. Some of the concerns are:

Attackers can request fullscreen and pre-empt keyboard focus. Your security credentials could possibly be stolen.
Increased chances for phishing attacks.
One could open up fullscreen mode without user interaction (which in my opinion is very bad).

The aforementioned concerns can be addressed if control is given to the users to allow / deny fullscreen mode. Also, plug-ins should be disabled in the fullscreen mode.

Browser Support:

Safari 5+ (with webkit prefix)
Chrome 14+ (with webkit prefix). Chrome 14 requires the flag: –enable-fullscreen. It has been enabled by default in Chrome 15 (not yet released at the time of this post)
Implementation of the API is in progress for Firefox. It is expected to be available as part of Firefox 10.

Check out this page for demo. More details can be found here.

-- Varun

LocalTunnel: Access your local web server on the internet

2011-09-19T23:43:00.001+05:30

If you are a web developer, here is an interesting article for you. At some stage of the development, you might want to share / demo your web application to people outside your local network. This is a common problem in the life of a web developer. There are many ways to expose the contents on your local web server to the external world. Some of the commonly used techniques include: Port forwarding, SSH reverse tunnelling, etc. LocalTunnel is a free service that lets you share your local web server in an easy way.

LocalTunnel is a Ruby program which works on the basis of SSH reverse tunnelling. It connects to a remote host that has Gateway ports enabled. The remote host service is available for free at http://localtunnel.com. After installing LocalTunnel, localtunnel command facilitates the connection between local server and the remote host.

How to use?

LocalTunnel can be installed using RubyGems. sudo gem install localtunnel.
Start your local development server. It can run on any port.
Run the localtunnel command passing the local port number. When the command is executed for the first time, you need to pass the SSH public key. More details here. localtunnel –k ~/.ssh/id_rsa.pub 8888
If the command was successfully executed, it will show the URL to access the dev server. Note: The URL is valid only for this session. Share it with your friends. And, you are done.

LocalTunnel is hosted on github under MIT license.

-- Varun

JavaScript Remote Debugging

2011-09-14T11:28:00.001+05:30

Mobile browsers are becoming more powerful day-by-day and you can do almost everything you do on your desktop browser. Many mobile app developers have already started moving towards mobile web app instead of native app. Apps are being built using HTML5 and rich JS libraries. However, one of the major concerns for the developers is the lack of developer tools. The reasons are quite obvious – real estate needed to show the debugger, non-developer friendly environment. The solution to this problem is remote debugging. I have been using JSConsole for this purpose. It comes handy when we want to inspect DOM of the webpage. I stumbled upon “Aardwolf” yesterday and it seems to be a better alternative for JSConsole when it comes to JavaScript debugging. Aardwolf is powered by Node.js.

Features:

Breakpoints
Call Stack
Exception reporting
JS Console remoting

How does it work?

Aardwolf is a Node application which listens on two ports – One for the debugger UI (8000), another one for the JS file server (8500). It has a code rewriter which rewrites the JS files to be debugged (dynamically). The rewritten JS files are served by the JS file server. The application to be debugged should consume JS files from the above mentioned JS server (rather than the original JS files). This will help establishing connection and adding hooks for debugging. Once the connection is established, we can add breakpoints and debug the JavaScript file.

How to set up Aardwolf?

Check out the Aardwolf source code from here or here.
Create a file ‘config/config.local.js’ within the checked out location. Add the following lines to it:

var config = require('../config/config.defaults.js');
config.serverHost = 'ip-or-hostname-of-your-computer';
config.jsFileServerBaseDir = '/path/to/www/root';

Start the server by running “node app.js” (Make sure that Node.js is installed on your machine)

Add the debug library to your web app. Also, all the JS files to be debugged should be served from the JS file server.

<script type="text/javascript" src="http://ip-or-hostname-of-your-computer:8500/aardwolf.js"></script>
<script type="text/javascript" src="http://ip-or-hostname-of-your-computer:8500/some-script.js"></script>
<script type="text/javascript" src="http://ip-or-hostname-of-your-computer:8500/some-other-script.js"></script>

After the server starts up, open http://localhost:8000 in your desktop browser. The debugger UI should appear.
Open the web app on your phone and wait for the page to load. The debugger UI will show “Mobile device connected” once the connection is established.
You can set the breakpoints and view the call stacks on the right pane.

The source code is available on github as well as on bitbucket. The project is available under the MIT license. Aardwolf does not seem to be good at inspecting DOM elements. We can employ both JSConsole and Aardwolf to make our debugging job easier. Happy debugging!!

-- Varun

New sharing option “Comment-Only” in Google Docs

2011-09-13T22:49:00.001+05:30

Google has just updated Google Docs with a much needed feature – New sharing option “Comment-Only”. This feature will be rolled out in the coming weeks. In the current version of Google Docs, we need to give edit permission for the collaborator to add comments. With the new “Comment-Only” permission, we can build better workflow system around Google Docs. The reviewer of the doc can only do the job of reviewing. I was planning to write a Google app script to implement a similar functionality with Google Docs Spreadsheet. “Comment-Only” permission can be mixed with the access permission for the doc.

-- Varun

Google DevFests India 2011

2011-09-07T00:31:00.000+05:30

Google has been organizing many developer events across the globe to meet the developers and understand their expectations. DevFest is one such event which provides a great opportunity to learn more about Google technologies and developer products. Developer advocates and engineers from Google will be present at the event. This will be an useful forum for the developers to interact with Google engineers. The event is open to all. There are only limited seats. Register here.

Event : Google DevFest 2011

Venue : The Lalit Ashok Bangalore
Date : Sep 15, 2011 08:30 - 17:00

Venue : HICC and Novotel, Hyderabad
Date : Sep 17, 2011 08:30 - 17:00

More details here.

-- Varun

New toy in the house: Arduino ADK

2011-08-17T09:23:00.001+05:30

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

2011-08-10T00:37:00.001+05:30

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:

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.
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.
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

2011-07-26T09:50:00.001+05:30

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

2011-07-05T00:39:00.001+05:30

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

DotJs – A GreaseMonkey alternative

2011-06-30T09:54:00.001+05:30

If you love customizing pages on the web using user scripts, here is an alternative for GreaseMonkey. DotJs is a Google Chrome extension that executes JavaScript files in ~/.js based on their filename. To customize http://www.google.com/, you will have to create the userscript ~/.js/google.com.js. The author originally built this for Chrome only but was later ported to other browsers Firefox, Safari and Fluid. Currently, it works **only on OSX**.

How to install?

Installation requires you to have Ruby 1.8 and rake installed. Follow the instructions below to install DotJs.

git clone http://github.com/defunkt/dotjs

cd dotjs

rake install

How does it work?

There is a security restriction in Chrome which prevents access to the local file system. To overcome this problem, DotJs runs a tiny web server on port 3131 which serves the files from ~/.js. Hence, the need for Ruby.

Is it better than GreaseMonkey?

DotJs is just an alternative technique which offers the same functionalities as GreaseMonkey offers. The userscripts in DotJs will not be able to use the GM_ functions which means not all your GM scripts will work directly here. However, you can implement the GM_ methods and make all the GM scripts compatible here. The userscripts in DotJs will have jQuery 1.6 loaded regardless of whether the site you're hacking uses jQuery. Also, it adds support for additional plug-ins and other helper functions.

-- Varun

[Screenshots] Google+

2011-06-29T03:14:00.001+05:30

I got the chance to explore Google+ today. To me, it looks like Facebook with privacy concerns addressed. The interface looks simple and easy to use unlike Google Wave. The mobile version of Google+ looks equally impressive. Will it be a Facebook killer? I don’t see that happening anytime soon. Lets wait and watch. Check out the rest of the post for screenshots.

Hover over the images to know more about them.

Google+ Android Native App

Google+ Mobile Web

Take an interactive demo here.

-- Varun

Make your Flash contents playable on iPhone with Swiffy

2011-06-29T00:08:00.001+05:30

Ever since Steve Jobs termed Flash as a dying technology and confirmed that they don’t have any such plans of supporting Flash - “we don’t spend a lot of energy on old technology”, there were many attempts to make the flash content playable on devices running iOS. Some of them succeeded to some extent. Google has taken a step on this direction to promote open technologies. Google has pushed a new product into Google Labs – Swiffy, a SWF to HTML5 converter. This product from Google is definitely much better. This labs product allows you to upload a SWF file, and it will produce an HTML5 version which will run in modern browsers with a high level of SVG support such as Chrome and Safari.

Highlights

Swiffy animations are almost as compact as that of the original SWF files. Swiffy uses a compact JSON representation of the animation, which is rendered using SVG and a bit of HTML5 and CSS3.
Swiffy animations take advantage of the advancements in JavaScript execution speed and hardware accelerated 2D graphics.
Supports a bunch of user interactions apart from the plain old animations.
Wide range of browser support. Check out the browsers supporting SVG here.

Try it out yourself here. Check out the gallery of converted SWF files.

-- Varun

Me, Myself and I

2011-06-17T10:50:00.001+05:30

Nah, this post is not about the tool that Google has announced recently to manage your identity on the web. Its about the site that I have built to manage my identity on the web. I have recently built this new personal site www.varunkumar.me to act as a landing page for all my activities on the web. I have taken up this exercise with the intension of learning something new out of this. The site may look simple but lots of cool features are hidden within it. This post is a summary of things I have learnt out of that piece of work.

Highlights

HTML5 Semantics. HTML5 introduces lots of new semantic elements – section, nav, header, footer, etc. I have implemented the various techniques described here to add semantics to different sections of the site. Bots / screen readers can easily understand the contents of the site. View page source to know more about this.
Offline access. The site is available for access in offline mode as well. Honestly there is no real need for offline access here but how else one can learn things. I have used Application Cache to offer this feature. It is a very straight forward technique but the real challenge is with detecting the connectivity and updating the content whenever it changes. The key is to update the manifest file whenever a static file changes. I am using maven to auto-increment the version number on manifest to serve a fresh copy whenever the content changes. For detecting the network connectivity, I have used the techniques described here.

Spam-proofing email address. This is a by-product of another hobby project (I am working on) which requires spam-proofing of email addresses. Two things to be considered while spam-proofing email address: 1. It should be clickable 2. It should be easy to copy the address. I can secure the email address (to some extent) like this: varunkumar(dot)n(at)gmail(dot)com but the usability is not so good. I have implemented two out of the ten techniques discussed here to spam-proof the email address. It uses hidden garbage text and ROT13 encoding techniques. Inspect the email address shown on the site to know more. More details about the implementation of this can be found here.

CSS3. Most of the animations and styling on the page are achieved using CSS3. The following properties are employed to get the visual style on the page: box-shadow, transform, transition, etc. Page curl effect. Polaroid effect.
Deliberate vulnerabilities. The site features a link to my complete profile but it is not open to all. It is password protected. However, I have introduced deliberate vulnerabilities to the system. There are at least three different techniques using which you can break into my profile page. And, they are not really hard. If you are able to reach my profile page, take a screenshot and post it on the comments section along with the technique applied.

Smartphone friendly layout using ‘Media Queries’. The site is built as a set of sections and depending on the real estate of the screen I am attaching / detaching the sections. This is done via the media queries. If you are accessing from your desktop browser, keep reducing the width of your browser to see how the layout changes.
Browser support. The site is best viewed on the following browsers: Chrome 4+, Firefox 4+, Safari 5+, IE 9+, Opera 10+, Safari Mobile, Android webkit browser. I have not tested the site on other browsers.

The site is hosted on Google App Engine and I have setup a local git repo for this project. You can view the page source to know more about the things described above. Smart developers always do so. Pass on your comments / feedback about the site.

-- Varun

GreaseMonkey for Android via TamperMonkey

2011-06-04T14:48:00.001+05:30

If you love customizing pages on the web using GreaseMonkey (GM) scripts, here is a good news for you. TamperMonkey, originally a Chrome extension which provides enhanced userscript support on Google Chrome and Chromium browsers, has been ported to Android. The Android app is still in beta and it comes with all the functionalities provided by TamperMonkey. TamperMonkey Android app comes along with a browser where in you can use the userscripts you have installed.

How to use TamperMonkey Android app?

Install the beta version of the app from Android market.
Launch the application. It will open a browser which acts as the host for the scripts.
Click on Menu –> “Context” –> “Get new scripts…” to add new scripts from Userscripts.org
Browser through the pages and the installed userscripts will be activated by TamperMonkey.
TamperMonkey will take care of updating the scripts as well.

The app is still in beta and it seems to be slow on my Nexus One. More info here.

-- Varun

Precursor, a novel touch screen layer

2011-05-21T12:37:00.001+05:30

PreCursor is a research project worked upon by Pranav Mistry of the MIT Fluid Interfaces group. The project aims at building an invisible layer that hovers in front of the screen and enables novel interaction that reaches beyond the current touch screens. PreCursor provides the missing hover interaction to touch screens.

-- Varun

Google App Engine 1.5: What’s new

2011-05-11T09:31:00.001+05:30

The first day of Google I/O 2011 is over and Google has already released updates to bunch of its products. Google App Engine is no exception to that. Google App Engine got upgraded to 1.5 with some interesting features. This upgrade is mainly focused on the maintenance aspect of your applications. New features are being introduced to ease the maintenance process and build a better application infrastructure. A new runtime for Go Programming Language has also been introduced.

Highlights:

Backends: Now, you can write applications which can run for a longer duration of time. Backends are developer-controlled, long-running, addressable sets of instances which are as large as the developer specifies. There are no request deadlines, they can be started and stopped (or dynamically start when called), they can use between 128M and 1G of memory and proportional CPU. With this, you can think about creating applications like reporting, etc.
Pull Queues: Now the applications can pull tasks from the queue whenever it is ready to process. Pull Queues linked with Backends will be really handy for batch processing.
Go runtime: The third official programming language to be supported by Google App Engine. An experimental runtime for Go Programming Language has also been bundled with 1.5 upgrade. Not sure how many developers are actually using Go (Of course, some Googlers will be using it).
HTTP response size: HTTP request and response size has been upgraded to 32 MB.
Apart from the owners, the users who have uploaded the code can also download it from the admin console.
Google App Engine is going to be graduated from Preview later this year. Check out the new pricing model once it goes live.

For more details, check out the official blog post.

-- Varun

Build your own browser with Mozilla Chromeless

2011-04-30T02:08:00.002+05:30

Today I came across an interesting article posted on Hacker News about a labs product from Mozilla - Chromeless. In short, this project allows you to create your own browser interface using standard web technologies such as HTML, JavaScript, CSS, etc.

What is Mozilla Chromeless?

The “Chromeless” project experiments with the idea of removing the current browser user interface and replacing it with a flexible platform which allows for the creation of new browser UI using standard web technologies such as HTML, CSS and JavaScript. In other words, this lets you create native applications using standard web technologies.

What can I do?

Though the project was originally started to facilitate building of custom browsers, it has eventually become a platform for building native apps. So, you can build native apps powered by HTML5.

Chromeless uses the same rendering engine (Gecko) used by Firefox 4.0. It supports WebM, multitouch, hardware acceleration, etc.
You can add menus and key bindings for your app. Then, you can package your application as a standalone native app.
Chromeless supports embedding web contents. Using this, you can design your own browser.

Browser built using Chromeless

Where can I get this?

The "Chromeless" project is hosted on GitHub. Get the source code from here. The project requires Python 2.5-2.7. Read this document to get started.

-- Varun

Google Yoodle

2011-04-12T08:03:00.001+05:30

If you are an internet user, I am sure you would have heard about Google Doodle - Google's special logos for special events. Heard about Google Yoodle?? Yoodle is YouTube's version of Google Doodle. Today, while I was watching some videos on YouTube, I noticed YouTube sporting a new logo. It is to celebrate the "50th Anniversary of the First Human Spaceflight". Clicking on the logo will take you to a free film "First Orbit" on YouTube. Check the address bar on the page and you will find this - "feature=yoodle". This feature seems to be there for around 9 months now. If you know abt the first Yoodle, post the details here as a comment.

-- Varun

Google's 'Tilt' Easter Egg

2011-04-07T09:00:00.000+05:30

Friends at Search Engine Land have just discovered an interesting Easter Egg on the lines of recursion - Just type any of these keywords 'Tilt', 'Tilted', or 'Askew'. If you find out more such keywords, let me know through comments.

-- Varun

Call for developers

2011-03-18T08:33:00.001+05:30

I watched an interesting video recently on TED. It’s a talk by Salman Khan of Khan Academy “Let’s use video to reinvent education”. The talk was very impressive. It reminded me off some of the work I have done on the related space. Back in my college days, me and couple of other friends along with a research scholar “Yaser Nouh” worked on an “Intelligent Tutoring System” (based on Bayesian model). Bayesian Cognitive model was proposed and we implemented a working prototype of it. But, we never implemented it as a product. “Something can be called me as an initiative only if its completed”. Hence, calling for interested developers to take this forward. If anyone is interested in implementing the paper and productize it, do pass a comment in this post. I will be happy to help. Some of our work can be found here and here.

-- Varun