Twitter Bot on Google App Engine

Over the weekend, I have started working on another application to be hosted on the Google App Engine. This application is a bot that reads from a set of RSS feeds and posts the updates to a specified twitter account.
On the face of it, this is a simple project, but there are some interesting intricacies that I wanted to put down in this post. The idea is to create a management dashboard that does the following

• Allow users to specify which twitter accounts to post to
• Twitter status update interval
• Feeds that will act as a source for status
• Interval for fetching feeds
• Multi tenancy, supporting multiple users for bot

The Google App Engine database has to be used to save the updates to handle the difference in frequency between the feed and twitter updates. Watch out this space for updates.

Inside the dragon fish login demo

Dragon Interactive Labs have excellent demos on how javascript can be stretched to create some awesome effects. This post details how the dragon fish demo login screen is done using pure javascript. The colors around the login box and the glow are done using background images and changing its position. The first layer is this image that is set as a background image changing its left all the while.
On top of this div are the masks for the four corners and the four sides. These have images with semitransparent pngs that are respinsible for the glow effect. There is also a mask in the middle that masks the majority of the background.
It is above this layer that regular fieldset containing the username and password fields. You can see this effect if you move the third element with "map" classname with to an absolute position and 200 px left. The javascript constantly move the huge image to left, creating the effect.

Weave Identity : The auto login feature

A few days ago, I had written about the interesting similarities between Microsoft Cardspace and the way Weave works. This post is about the other interesting feature - the auto login. The idea is to save the user name and passwords on the weave server, retrieve them when we are on a login page and submit it.
If you unzip the xpi file, you can look for the LoginManager.js file. This is the file that is responsible for saving user credentials, retrieving them when required and submitting the form. Most functions are self explanatory. An observer is called whenever a form is submitted. The credentials are then picked up and saved to the store.
The _fillForm function is looks for matching logins saved for the login form and fills in the details. There is some complex logic that determines if a password is correct or not, but it can be ignored for now. It is something like the form.submit() function that I was searching for, but unable to find. I was also wondering how the extension handled password submission for sites like meebo.com that hash the password before sending it across. Watch out this space for updates on how these login form oddities have been handled.

Reddit Bar :: adjusting the extra space

A quick update to the reddit bar greasemonkey script. Looks like the reddit page updated its code to add some extra style to the comments page. This added an extra space under the reddit bar that was inserted using a greasemonkey script I had written. I just got some time to fix it and you can find the final code here.
The addition was a change to the style of the footer. The div with class ("footer-parent") had a padding-top set to 40px.
A single line to set this to 0px did the trick and the extra space is now gone.

Weave Identity : in contrast to cardspace

There have been multiple announcements about Mozilla Weave adding an identity angle to its offering. A video detailing the auto login capability is available here. Weave enables automatic login using OpenID enabled sites behind the scenes. They also submit the login forms automatically when user credentials are remembered. As explained in the video, the "Sign in with Weave" button appears when login with OpenId is permitted. Clicking on the button would automatically perform the re-directions and log the user into the site.
This seems to look exactly same the like Windows Cardspace initiative. The similarities are interesting. Here is the workflow laid out side by side.

Steps	Cardspace	Weave Identity
1	User loads the login page with Cardspace enabled.	User loads a login page that accepts OpenId Credentials.
2	User selects the “Login with cardspace” button on the page.	User selects the “Sign in with Weave”, or the button on the address bar.
3	Cardspace UI is displayed and the user selects the card that best represents the identity for the site.	There is just one weave identity for now. It gets automatically selected.
4	A request is made to the identity provider site to get details by Cardspace.	A browser redirect takes the user to the OpenId identity provider page (services.mozilla.com).
5	If the identity provider requires credentials, a dialog box shows up.	Since the user is already logged in using weave, no credentials are requested for.
6	Credentials are sent to the Identity provider and if authentication succeeded, positive reply is received.	A redirect by the OpenId provider to the original page with reply.
7	User is logged in successfully	User is logged in successfully

It is the second part of weave is the way the login manager works. The way it saves usernames/passwords and auto submits forms is interesting.
More about it, and analysis in the next post.

Facebook Konami Lens Flare Effect

The Konami cheat code finally made its way into facebook. There were a lot of posts that spoke about the up-up-down-down-left-right-left-right-B-A-Enter code and the lens flare effect on facebook. I did a little probing and here is how it is implemented and can be reused in your own site.
First, there is the handler that catches the secret key. You can find it in this file. Just search for
[38,38,40,40,37,39,37,39,66,65,13] which represent the character codes for the secret key combination. The function is called onloadRegister which typically registers a key handler on the window. The function effectively loads this response that in turn loads the file responsible for the lens flare javascript file.
The lens flare is initialized using the following code after the required javascript file is loaded.

var lf = new LensFlare("http:\/\/static.ak.fbcdn.net\/images\/lensflare\/*?8:162521");LensFlare.flareClick(lf).flareScroll(lf).flareKeyPress(lf);

This is done after some variable are set in the win.Env object, the use of which is still a mystery to me. To execute this in our page, we need to initialize some objects, defined in this file. To get lens flare running, this file also has to be included. Here is the consolidated code that you need to use.

Paste this in the browser URL first,
javascript:(function(){var x = document.createElement("script");x.src="http://b.static.ak.fbcdn.net/rsrc.php/z4YI6/l/1dgogsgc/nu_ll/162521/js/lensflare.js";document.body.appendChild(x);var x = document.createElement("script");x.src="http://static.ak.fbcdn.net/rsrc.php/z5R85/lpkg/3ewrzwq8/en_US/141/162721/js/60ykwiekb0kk80os.pkg.js";document.body.appendChild(x);})()

and then, after sometime, to activate the flares, paste this.
javascript:(function(){var lf = new LensFlare("http:\/\/static.ak.fbcdn.net\/images\/lensflare\/*?8:162521");LensFlare.flareClick(lf).flareScroll(lf).flareKeyPress(lf);})()

You can try the code on this very blog window.
To include this in your page, you have to include the following script in your page.

var x = document.createElement("script");x.src="http://b.static.ak.fbcdn.net/rsrc.php/z4YI6/l/1dgogsgc/nu_ll/162521/js/lensflare.js";document.body.appendChild(x);<br /> var x = document.createElement("script");x.src="http://static.ak.fbcdn.net/rsrc.php/z5R85/lpkg/3ewrzwq8/en_US/141/162721/js/60ykwiekb0kk80os.pkg.js";document.body.appendChild(x);

The interesting part in this is the animation of the images to create the lens flare, another example of fine javascript wizadary !!

Reddit Bar :: Self links fixed

A few posts ago, I had written about the greasemonkey reddit bar. Swaroop pointed out that the reddit bar was not working fine for self links. It does not make sense to show up the reddit bar on such pages.
I have changed the code to reflect the change and you can find it here. The change was trivial. Just find out the target URL that would open the iFrame, and if it equals the document's url, the bar will not load, letting the page stay as it is.
Swaroop also had pointed out that the reddit bar shows up twice and I am taking a look at it. If you have seen errors, please do sent me the URL to help me fix the error.