Catch It If You Can ...

OpenID - create one for you today!

2011-07-18T04:29:00.001-05:00

http://openid.net

I've started using openID with my blogspot URI. This is great from the perspective of remembering number of passwords/usernames. As the number of websites supporting it increases the web will be much simpler place.

There are complex theories out there to explain how openID works. I'll try to explain it the way I understood ... user perspective only! Actual implementation is also easy with libraries available in almost all languages. Here is Java Implementations:
Created by VeriSign: http://code.google.com/p/joid/
http://code.google.com/p/openid4java/

Example of "Sign on 1.0" version:
On yahoo.com: mysickname@yahoo.com and yahoopassword
On google.com: myothersickname@gmail.com and googlepassword
On aol.com: myaol-name@aol.com and aolpassword
On (legacy) hotmail.com: mylegacyname@hotmail.com and hotmailpassword
This became a problem when facebook, myspace and other social networks came out recently with Web2.0 boom for which a person has to create more account/passwords. Some websites temporarily solved the problem of remembering username by asking your email address to create an account.
On facebook.com: mysickname@yahoo.com and googlepassword
So, by the end of the day a person has to enter 10 accounts all with almost similar passwords (since it sucks to remember 10 user/password combination). Internet is only 12 years old. Living in such an environment for another 5 years would be terrible.

To solve this problem we now have something called, openID. Since a lot of websites have now started supporting it, our dream might come true of remembering one username/password. OpenID username comes in a URI format. Create one with the website that supports openid (http://openid.net) You may already have one URI, e.g. "goodforall.blogspot.com" with one of your existing account, which you can use while creating an OpenID.

Let's say I want to use "software-nerd.blogspot.com" with blogger.com (draft.blogger.com for now) as my OpenID.

Now, I'll go to yahoo.com and use my OpenID. At this point yahoo.com will:
1) forward the user to blogger.com login page if user is not logged in. After successful login user will be asked to choose "add yahoo.com account forever" or "only once".
2) forward the user to yahoo.com login page since I'm trying to use OpenID first time with yahoo.com. Attaches "OpenID" to yahoo.com's account. and then (3)
3) user has access to yahoo.com pages as user is already logged in with OpenID account

So, if we keep using OpenID to all of the websites, this is how "OpenID" gets shared.
On google.com: myothersickname@gmail.com/software-nerd.blogger.com and googlepassword and OpenID with OtherWebsiteAccountsList (mysickname@yahoo.com, myaol-name@aol.com, mylegacyname@hotmail.com)
On yahoo.com: mysickname@yahoo.com and yahoopassword and OpenID(software-nerd.blogger.com) verification
On aol.com: myaol-name@aol.com and aolpassword and OpenID(software-nerd.blogger.com) verification
On (legacy) hotmail.com: mylegacyname@hotmail.com and hotmailpassword and OpenID(software-nerd.blogger.com) verification

So, now Google account knows nothing about Yahoo credentials and Yahoo account knows nothing about Google credentials. Next time yahoo.com will only match the "OpenID verification" and give mysickname@yahoo.com access to the software-nerd.blogger.com

I still couldn't find an answer if people started to use 5 different URIs ... what would be the complexity factor. And if this starts to becoming a problem what would be the next user's identity after "name", "email" and "URI"? Anybody?

OpenID helps at least for now, so get one today (http://openid.net/get)

Velocity conference - Speed up your website techniques

2010-06-27T12:28:00.001-05:00

There are a lot of conferences happening all around the world. But velocity has a special purpose to solve, like save billions of man hours. The speed of every single byte that's get delivered to the client matters more than any time before.

It was great to see efforts on all levels:

- data center with the power savings talk

- big pipe techniques

- only download resources which are extremely needed else cache static ones; define proper UI vs data

-minify or obfuscate or incremental JavaScript or base64 images or one css or primer JavaScript or predefined reusable html components

- reduce latency by using data centers or cloud

- html5 on all major browsers with app caching abilities

- browsers thinking in terms of unlocking the power of CPU or gpu on which it runs on

- search engines considering speed as a search SEO criteria

- using caching technology such as memcache as a first tier of serving contents

- using iframe to serve the slow ads, Google might be introducing it in the future by default

And some cheat notes:

- pre load resources of popular pages of your site

- psychological change by loading major components of the page or use 'time to interact' technique.

That's just to much to handle if you haven't started on any of them. Cloud could solve some problem. But i would like to see some of these functionalities start to come as default in popular frameworks by default or as plugins.

Have fun with your velocity. Velocity2010

Prototype - developer friendly javascripts

2007-05-27T15:55:00.000-05:00

Prototype AJAX examples made with 1.5.1 version. The examples use the struts2 tags instead of HTML tags.

Example 1: Prototype ajax request in it's simplest form

<script language="JavaScript" type="text/javascript">
function ajaxRequest() {
 alert('start of prototype ajax request function.');
 var url = '<s:url action="ajaxresponse" namespace="example"></s:url>';
 var params = '';
 var ajax = new Ajax.Request(url, {
   method: 'get',
   parameters: params,
   onCreate: processCreate,
   onSuccess: processSuccess,
   onFailure: processFailure,
   onComplete: processComplete,
 });
 alert('end of prototype ajax request function.');
}
function processCreate(transport) {
 alert('create');
}
function processSuccess(transport) {
 alert('success');
}
function processFailure(transport) {
 alert('failure');
}
function processComplete(transport) {
 alert('complete');
}
</script>

<s:submit onclick="ajaxRequest()" ></s:submit>

Example 2: Shows different methods to retrieve information from XMLHttpRequest object (e.g. transport in the example below)

<script language="JavaScript" type="text/javascript">
function ajaxRequest() {
 alert('start of prototype ajax request function.');
 var url = '<s:url action="ajaxresponse" namespace="example"></s:url>';
 var params = '';
 var ajax = new Ajax.Request(url, {
   method: 'get',
   parameters: params,
   onCreate: processCreate,
   onSuccess: processSuccess,
   onFailure: processFailure,
   onComplete: processComplete,
 });
 alert('end of prototype ajax request function.');
}
function processCreate(transport) {
 alert('create');
}
function processSuccess(transport) {
 alert('success');
 showResponses(transport);
}
function processFailure(transport) {
 alert('failure');
 showResponses(transport);
}
function processComplete(transport) {
 alert('complete');
}
function showResponses(transport) {
 alert('responseHeaders: ' + transport.getAllResponseHeaders());
 alert('response header content-length: ' + transport.getResponseHeader('content-length'));
 alert('status: ' + transport.status);
 alert('statusText: ' + transport.statusText);
 alert('responseXML: ' + transport.responseXML);
 alert('responseText: ' + transport.responseText);
}
</script>

<s:submit onclick="ajaxRequest()" ></s:submit>

Example 3: Ajax updater to update the contents for success/failure to the given ajax-success-div-id/ajax-failure-div-id accordingly.

<script language="JavaScript" type="text/javascript">
function ajaxUpdate() {
 alert('start of prototype ajax update function.');
 var url = '<s:url action="ajaxresponse" namespace="example"></s:url>';
 var params = '';
 var ajax = new Ajax.Updater({success: 'ajax-success-div-id', failure: 'ajax-failure-div-id'}, url, {
   method: 'get', // post get
   parameters: params,
   encoding: 'UTF-8', //UTF-8
   insertion: Insertion.Bottom,//Insertion.After Insertion.Before Insertion.Top Insertion.Bottom
   onCreate: processCreate,
   onSuccess: processSuccess,
   onFailure: processFailure,
   onComplete: processComplete
 });
 alert('end of prototype ajax update function.');
}
function processCreate(transport) {
 alert('create');
}
function processSuccess(transport) {
 alert('success');
 showResponses(transport);
}
function processFailure(transport) {
 alert('failure');
 showResponses(transport);
}
function processComplete(transport) {
 alert('complete');
}
function showResponses(transport) {
 alert('responseHeaders: ' + transport.getAllResponseHeaders());
 alert('response header content-length: ' + transport.getResponseHeader('content-length'));
 alert('status: ' + transport.status);
 alert('statusText: ' + transport.statusText);
 alert('responseXML: ' + transport.responseXML);
 alert('responseText: ' + transport.responseText);
}
</script>

  <s:submit onclick="ajaxUpdate()" ></s:submit>

  <div id="ajax-success-div-id">
Hello, I should be replaced for success!
  </div>
  <div id="ajax-failure-div-id">
Hello, I should be replaced for failure!
  </div>

Example 4: Show "Loading response ..." and an insight into when the response is populated i.e. right before onComplete is called.

<script language="JavaScript" type="text/javascript">
function ajaxUpdate() {
 alert('start of prototype ajax update function.');
 var url = '<s:url action="ajaxresponse" namespace="example"></s:url>';
 var params = '';
 var ajax = new Ajax.Updater({success: 'ajax-success-div-id', failure: 'ajax-failure-div-id'}, url, {
   method: 'get', // post get
   parameters: params,
   encoding: 'UTF-8', //UTF-8
   //insertion: Insertion.Bottom,//Insertion.After Insertion.Before Insertion.Top Insertion.Bottom
   onCreate: processCreate,
   onLoading: processLoading,
   onSuccess: processSuccess,
   onFailure: processFailure,
   onComplete: processComplete
 });
 alert('end of prototype ajax update function.');
}
function processLoading(transport) {
 $('ajax-success-div-id').innerHTML = 'Loading response ...';
}
function processCreate(transport) {
 alert('create');
}
function processSuccess(transport) {
 alert('success');
 alert('text will be replaced after you press OK button now but before you press OK button for complete!');
}
function processFailure(transport) {
 alert('failure');
 alert('text will be replaced after you press OK button now but before you press OK button for complete!');
}
function processComplete(transport) {
 alert('complete');
}
function showResponses(transport) {
 alert('responseHeaders: ' + transport.getAllResponseHeaders());
 alert('response header content-length: ' + transport.getResponseHeader('content-length'));
 alert('status: ' + transport.status);
 alert('statusText: ' + transport.statusText);
 alert('responseXML: ' + transport.responseXML);
 alert('responseText: ' + transport.responseText);
}
</script>

<s:submit onclick="ajaxUpdate()" ></s:submit>

<div id="ajax-success-div-id">
Hello, I should be replaced for success!
</div>
<div id="ajax-failure-div-id">
Hello, I should be replaced for failure!
</div>

Example 5: Periodically updates the response with "10 seconds frequency & 1 second decay", fully replaces the content for the success/failure div.

<script language="JavaScript" type="text/javascript">
function ajaxPeriodicUpdate() {
 alert('start of prototype ajax periodic update function.');
 var url = '<s:url action="ajaxresponse" namespace="example"></s:url>';
 var params = '';
 var ajax = new Ajax.PeriodicalUpdater({success: 'ajax-success-div-id', failure: 'ajax-failure-div-id'}, url, {
   method: 'get',
   parameters: params,
   encoding: 'UTF-8',
   frequency: 10,
   decay: 1,
   onCreate: processCreate,
   onLoading: processLoading,
   onSuccess: processSuccess,
   onFailure: processFailure,
   onComplete: processComplete
 });
 alert('end of prototype ajax periodic update function.');
}
function processLoading(transport) {
 $('ajax-success-div-id').innerHTML = 'Loading response ...';
}
function processCreate(transport) {
 alert('create');
}
function processSuccess(transport) {
 alert('success');
}
function processFailure(transport) {
 alert('failure');
}
function processComplete(transport) {
 alert('complete');
}
function showResponses(transport) {
 alert('responseHeaders: ' + transport.getAllResponseHeaders());
 alert('response header content-length: ' + transport.getResponseHeader('content-length'));
 alert('status: ' + transport.status);
 alert('statusText: ' + transport.statusText);
 alert('responseXML: ' + transport.responseXML);
 alert('responseText: ' + transport.responseText);
}
</script>

<s:submit onclick="ajaxPeriodicUpdate()" ></s:submit>

<div id="ajax-success-div-id">
Hello, I should be replaced for success!
</div>
<div id="ajax-failure-div-id">
Hello, I should be replaced for failure!
</div>

Example 6: Register the responder for both Update and Request Ajax activities, In the example, "onCreate"

<script language="JavaScript" type="text/javascript">
var ajaxResponder = Ajax.Responders.register({
 onCreate: commonCreate
});
function commonCreate(transport) {
 alert('responder:create');
}

function ajaxUpdate() {
 alert('start of prototype ajax update function.');
 var url = '<s:url action="ajaxresponse" namespace="example"></s:url>';
 var params = '';
 var ajax = new Ajax.Updater({success: 'ajax-success-div-id', failure: 'ajax-failure-div-id'}, url, {
   method: 'get',
   parameters: params,
   encoding: 'UTF-8'
 });
 alert('end of prototype ajax update function.');
}
function ajaxRequest() {
 alert('start of prototype ajax request function.');
 var url = '<s:url action="ajaxresponse" namespace="example"></s:url>';
 var params = '';
 var ajax = new Ajax.Request(url, {
   method: 'get',
   parameters: params,
   encoding: 'UTF-8', //UTF-8
   onSuccess: processSuccess
 });
 alert('end of prototype ajax request function.');
}
function processSuccess(transport) {
 $('ajax-success-div-id').innerHTML = 'success: Ajax.Request - ' + transport.responseText;
}
</script>

<s:submit onclick="ajaxRequest()" value="request"></s:submit>
<s:submit onclick="ajaxUpdate()" value="update"></s:submit>

<div id="ajax-success-div-id">
Hello, I should be replaced for success!
</div>
<div id="ajax-failure-div-id">
Hello, I should be replaced for failure!
</div>

Java Design principles

2007-04-24T00:43:00.000-05:00

If you follow all five you are the best ... Do not try to apply all the principles from the start. Use the iterative approach to improve implementation but make sure your classes are testable.

Principle 1: The Single Responsibility Principle (SRP) - A class should have only one reason to change.
Principle 2: The Open-Closed Principle (OCP) - Software Entities (Class, modules, functions ...) should be open for extension, but closed for modifications.
Principle 3: The Liskov Subsitution Principle (LSP) - Subtypes must be substitutable for their base types.
Principle 4: The Dependency Inversion Principle (DIP) - (a) High-level modules should not depend upon low-level modules. Both should depend upon abstractions. (b) Abstractions should not depend upon details. Details should depend upon abstractions.
Principle 5: The Interface Segregation Principle (ISP) - Clients should not depend upon methods that they do not use.

These are the principles that I apply on a day to day code development which makes my life a lot more easier. I will try to explain each in detail in one or more of my later posts.

Have fun designing ... on white board,
Kunal