Me, Myself and I

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