Chromecast URL Player

I was annoyed by the fact that the Chromecast SDK has been out for the public for quite a while and yet googling for a simple URL player for Chromecast did not yield satisfactory results. So I sat down to create my own simple web app for playing back any http video or viewing any still image in Chromecast.

URL: http://movies.foamsnet.com

Source Code: https://github.com/vickyg3/UrlPlayer

Would love to hear feedback. Feel free to fork, send pull requests.


-Vignesh

Introducing Super Secure File - One File, Completely Secure, Access Anywhere!

Super Secure File gets you a really secure password protected file that you can access anywhere with an internet connection. Smartphone, Tablet, Laptop, SmartTV, anything!

To cut to the chase and create your Super Secure File, go to: http://secure.foamsnet.com.

How does it work?

Super Secure File basically uses Google Drive to store your encrypted file and does all the encryption and decryption locally in Javascript. The key never ever leaves your computer. Once you close the tab, boom, the key is gone. Nobody knows the key but you (and probably your spouse if you are married).

Motivation

This is not a big feat or anything, this is merely a mashup of a few libraries to prove a point to myself. The motive behind this app is to build a secure mechanism to store my passwords and credit card numbers on the cloud so that I can access it anywhere. I do not trust anyone who links me up to a server when it comes to information like this. Which is why i wanted a completely static HTML page with no server access whatsoever to provide me with this functionality.

Feel free to examine the source code here (and please let me know if you find anything utterly stupid): https://github.com/vickyg3/super-secure-file

Hosting and Links

Since this is a static page, I have not hosted this on my server. This is merely hosted as a github page (if you look at the repo, you'll see the default branch to be gh-pages and not master). Hosting it as a github page also proves that it has no server interaction whatsoever and cannot steal your key by any mean.

So, all you need is to remember your password and one of these URLs (they all redirect to the same Github Page): http://bit.ly/securefile or http://bit.ly/supersecurefile or http://secure.foamsnet.com or http://vickyg3.github.io/super-secure-file/super_secure_file.html

Get your Super Secure File and make your life a little easier! :-)


-Vignesh

Announcing Social Photos v2!

I have been working on this side project for quite a while now and I am happy to announce that it is launch ready now!

Visit http://socialphotos.net to manage all your digital photos across Social Networks in one roof using a simple intuitive user interface.

Features Include:

• Transfer Photos
• Transfer Albums
• Download selective albums as a zip file
• View Slideshow of your albums
• Monitor progress in a simple pane
• And much more!

Please do feel free to give feedbacks/suggestions. Use it and Share it!

http://socialphotos.net

-Vignesh

Serverless Downloads - HTML5 Awesomeness!

HTML5 brings an awesome feature known as client downloads. At first glance, the term "serverless downloads" may sound oxymoronic, but it sure makes a lot of sense. In the HTML5 era, we write a lot of thick clients. All the day to day web apps which we use are damn thick (Gmail, Facebook, etc.). So in the context of thick clients, serverless downloads make a lot of sense.

Content-Disposition HTTP Header

On the web 2.0 days, when you wanted to force a browser to download a file to disk rather than displaying it (especially if the file is of some format which the browser is capable of rendering), you used to set the Content-disposition header in the HTTP response.

Content-Disposition: attachment; filename="sample.txt";

There is no way for the browser to let the user download the file without contacting the server, even if the contents of the file were to be generated totally on the client side.


The Problem

This is old school. These days there are lot of web apps where you create the data on the app itself. For example, consider Google Docs, you create all sorts of documents on the web. Every time you click the download button, the data is sent to the server and the same data comes back along with required filetype's additions and you see the download dialog box.

This step seems too radical and unnecessary. Given how thick the clients are these days, it is atrocious to send some data to the server and get back the same data as a file from the server. The same holds for all sorts of web based photo editing apps, etc.


The Solution - "download" attribute

Now with HTML5 it is possible to generate a file on the client side and make the user download it without contacting the server at all. The simple addition of "download" attribute to the anchor(a) tag will tell the browser to download the content present in the "href" attribute rather than navigating it. Now, this can be combined with a "blob:" or a base64 encoded data url to create a file and download it, all on the client side.

I have put up a demo where you can enter text into a field and then download it as a pdf.

Demo: http://garage.foamsnet.com/static/pdf.html
Image Courtesy: http://www.html5rocks.com

-Vignesh

Google DevFest 2011 - Bangalore!

Atlast, I attended a professional developer meet! And it couldn't be better. It was the Google Developer Fest organized by Google at Lalit Ashok Hotels, Bangalore. Most of the speakers were from Google headquarters, working on key Google products like Android, Chrome, Maps and App Engine.

The registration process went on very easily as they had a QR code in the confirmation mail, and used an android phone to take a picture of the same and verify the registration. Also, they had queues based on alphabets range. The T-Z queue was empty while the other queues were having atleast 20 to 30 people in it. For the first time in my life, i experienced an advantage of my name starting with V!

In this post, I am sharing the raw notes which i took during the keynote and various other talks. Hope this will be of some use.

Keynote - Android
* 550k+ activations per day
* Complex Screen density vs Size matrix - unifying everything => android
* Always use DPI (density per square inch) for specifying assets
* Honeycomb features
* Fragments
* Loaders - wrapper on top of asynctask
* Action bar
* Tabs
* Animation framework
* Compatibility library
* Multiple APK Support

Keynote - Bleeding edge HTML5 - http://india-devfest-keynote.appspot.com
* Interestingly, this keynote isn't called as "Chrome", though most of the topics were Chrome specific
* 160M active users
* Page Visibility API
* Prerendering
* Offline capabilities
* Web animation - CSS3, WebGL
* Native Client
* Future
* Web intents
* Fullscreen content - Fullscreen API
* Web Audio API - Real time processing and analysis of audio
* WebRTC - Real time communication
* Be updated
* chromestatus.com
* updates.html5rocks.com

Android Market - Tony Chan
* 250k + apps, 6B+ downloads
* In app billing, carrier billing
* Licensing
* All licenses allowed
* Code Obfuscation
* Don't reuse sample code
* In app billing
* Sell only digital content
* Reports for developers
* Device Filter
* Ability to exclude handpicked devices
* Multiple APK
* Filter by specific segments (platform version, screen size, etc.)
* App available as one product listing
* Apps upto 4GB coming soon (50mb app + 2gb archive)
* Pay attention to graphics - Featuring in android market depends mainly on that

Android Fragments & Open Accessory ADK - Tony Chan
* Fragments
* Fragments need not always have UI
* Fragments are an investment for the future!
* Fragments vs <include/>
* Fragments (optional UI, has lifecycle, not standalone, no direct interaction with intents) vs Activity
* Open accesory & ADK
* USB Device basics (Descriptor, etc)
* Open Accessory -> A USB host device that can communicate with an android device (e.g. Arudino)
* Use Android Accessory Protocol for communication

Building Integrated Apps on Google Cloud Technologies - Alfred Fuller
* App Engine intro
* Google Storage
* Store data in google's cloud
* Access via RESTful API
* Objects of any type (100GB / object)
* OAuth / Web browser
* Prediction API
* Machine learning API
* Upload training data -> Build model -> Predict new data
* Many machine learning techniques, Asynchronous training, Many platforms access
* BigQuery
* Analyze massive amounts of data in seconds
* SQL like query language, REST, RPC, etc.
* Batch jobs (Mapreduce)
* App Engine Identity API (For secure authentication)

Google Apps Marketplace - Claudio Cherubino
* Google Apps as a pure platform
* Google Apps APIs
* Success Stories
* OpenID SSO & OAuth
* Provisioning API
* Gmail contextual gadgets
* Sidebar gadgets in Gmail/Calendar
Twitter: @ryguyrg @scottmcmullan @stevenbazyl

Chrome Developer Tools - Boris Smus
* Basics - Cheat Sheet
* Revision history for all changes made inline in dev tools
* Aim to transform this into an IDE
* Commandline API - console.log takes n parameters, copy(), inspect() and $0
* Javascript debugging - See call stack, Pretty print
* Breakpoints - Line, Conditional, Exception, DOM, Event, XHR
* Future
* Extensions can extend developer tools too!
* Use chromiumer
* Remote debugging (--remote-debugging-port=31337 , Blackberry PlayBook only)

Google Places API - Chris Broadfoot
* What is a Place -> Abstract & Concrete
* Available as a web service and as a part of javascript maps library

Designing UIs for Phones and Tables
* UI Patterns for Honeycomb
* Action Bar
* App Icon - Where am i?
* View details - What can i see?
* Action buttons - What can i do here?
* Multi Pane Layouts
* Take advantage of screen real estate
* Consolidate multiple related screens into a compound view (similar to iframe in web)
* Screen rotation handling - Stretch (Settings), Stack (Calendar), Expand/Collapse (Gtalk), Show/Hide (Gmail)
* App Navigation
* Beyond the List
* Think and use innovative UIs to replace traditional lists (carousel, slidestack, etc.)
* Do's
* Aim for single APK
* Use compatibility library
* Customize visual design completely, if straying from Holo theme
* Support both landscape and portrait
* Extract dimensions for phones and tablets
* Use theme/style/etc. to reduce redundancy
* Marry OS visual style with your brand
* Don'ts
* Assume API level >= 11 (tablet)
* Assume xlarge == tablet (7" inch tablet is large)
* Use small font sizes
* Overuse fill_parent; Avoid excessively long lines of text
* Think tablets are big phones

Btw, the lunch was awesome too! :-P Overall, a great experience! :-)

-Vignesh

InstaShare - Facebook Extension for Google Chrome! :-)

InstaShare - Share everything you find interesting on the web as and when you browse to your Facebook profile! The web you surf daily is now just a single click away from your facebook profile!

This is a mature version of yet another script that i have been using personally so far.

Features include:

• Post status updates through an always-present browser icon


• Share any image in the pages you visit in a single click


• Share any link in the pages you visit in a single click


• Share any piece of text in the pages you visit in a single click

Download You can download the extension from here: http://www.foamsnet.com/instashare

Screenshots
Sharing Images





Sharing Links





Sharing Selected Text





Posting Status Update




You are sure to find a lot of bugs. Feel free to contact me at vig...@gmail.com (Please click to view the full address) for any bug reports or suggestions!

-Vignesh

Improved IRCTC Ticket Booking - Google Chrome Extension

*Note: This extension does not work anymore and I have stopped updating it. Please do not contact regards to this*

AutoIRCTC! - A Google Chrome extension that helps in speeding up the IRCTC ticket booking process.

Scripting has always interested me and being a reasonably active member of the internet community, i always tried to customize the road of web i travel to my likes and needs. This is one such script that i thought will be helpful if shared. So i have added minimal features to the script i have been using personally for quite a while now. It has really helped me speed up the ticket booking process.

Features include:

• Automatic Login
• Swap from and to stations in a single click
• See all the trains availability in a single screen
• Pre-fill the passenger details

Download: You can download the extension from here!

Instructions and Screenshots

• Accept the warning and click on continue
  
  
• Click on Install
  
  
• After the installation is complete, You will see a confirmation like this:
  
  
• Also, you can view AutoIRCTC in the list of extensions in chrome://extensions
  
• Now, when you visit www.irctc.co.in, you will see a small icon next to the bookmark star. Clicking on that icon will give you a pop up where you can configure your settings. If you leave the login credentials empty, then auto login will be disabled. Click on "Save Settings" after you have entered your details.
  
• Now, when you reload your page, you will be automatically logged into IRCTC. And instantly, you will be able to notice the "Swap from and to" option under "Plan my travel". This button helps you to swap the from and to cities without making an unnecessary server request.
  
• Enter your travel city and date. Now you will be able to see the availability of all trains matching your criteria in a single screen. Also, the page has been cleaned up to now show First class AC and First class (if you are making a first class booking, then disable the extension and go ahead as usual). The default class to check availability for can be changed by clicking the page icon near the bookmark star.
  
• Now, in the passenger details form, you can see that it has been pre-filled with your data thereby avoiding your need to type your details every time (Note that pre-filling senior citizen is not supported in this version).
  
• The quick book form too will be pre-filled with your data.
  
• After these steps, proceed as usual for payment options and complete your ticket booking.

Disclaimer
The purpose of this extension is to increase the ticket booking experience of a common man and it no way intended to be commercial. Using this extension does not guarantee your ticket booking. Its just a minor enhancement to the ugly IRCTC user-interface.

Footnotes
I am still a beginner to the world of Google Chrome extensions. So you are sure to find a lot of bugs. In case of any feedbacks/issues, please write to me at vig...@gmail.com (please click to view the full address).

-Vignesh

A flaw/feature in Google Chrome Extension design!

I am recently into customizing my road in the web with simple google chrome extensions to get and share content in the web the way i want. After having spent a good amount of time with the Google Chrome Extension Framework and their javascript API, i feel there is a flaw in the design of it. I still am not sure if this is a flaw or an intended feature.

Before describing the exact flaw, let me give a brief overview of things whose understanding is required to understand the flaw.

Browser Actions
Browser Actions are those using which your extension can do things along with the browser. Every browser can include a pop up page (yes the one which pops up when you click on the extension's icon on the top right corner). As of now, the only way to open up the pop up page is by clicking the icon. This point is important. Let me come back to it in a while.

Context Menus
Extensions can add custom context menus (the one that appears when you right click on something within the browser).

The flaw/feature
Now, as of writing this, there is no programmatic way of invoking the pop up page (other than clicking the icon manually as mentioned earlier). This makes sense because if a non-manual initiation of the pop up was allowed then it would be an irritation for users to see the pop up page annoyingly appear just when they install an extension.

Whereas, the restriction now enforced is a bit too strict. The restriction should look something like this, "The pop up page can be initiated only by a manual action", whereas the restriction that chrome enforces now looks like this, "The pop up page can be initiated only by clicking the pop up icon". This restriction is too much because, there are other manual actions than clicking the pop up icon, that might require an user interactive window for processing. For example, consider the case of a context menu. When a context menu is clicked, it completely makes sense for the extension to initiate the pop up with the context based content and enforce user interaction. This is simply *NOT* possible now.

Other options
Though the clean solution is not possible, there are one or two workarounds that i have found out to overcome this problem.

• If the user-interaction required is really simple, then merely use the javascript prompt('') function from the background page.


• You can always create a tab and make the user interaction


• Use a floating div or a jquery modal window to enforce the user interaction (this can be done using the executeScript API function).

-Vignesh

Doodle it up - My first google chrome extension !! :-)

Google is really a part and parcel of our daily life. It has become so inevitable to our daily lives. I have taken a bit of my time to quickly develop a simple Google Chrome Extension to customize your daily visits to google. Wouldn’t you love to see your own picture instead of the boring google logo everytime you open google’s homepage? Yes. This is exactly what this extension does.

Here are step-by-step instructions for installing the extension:

• Download the extension from here


• Install the extension by clicking "Continue"


• Confirm the installation by clicking "Install"


• You will see the confirmation message


• Goto chrome://extensions and click on options under "Doodle it up" extension


• In the page that opens up, enter the URL of the image and then click on Save Settings


• Now, goto Google and Voila! you have your own image instead of the Google logo!

Please post your comments/suggestions as comments.

-Vignesh