It looks like single page javascript ajax/RIA application is finally (6 years after google showed the world gmail) l becoming a buzz word, so I wanted to again over the performance benefits of single (RIA) apps:
I understand that the old school web world is scared of JavaScript development, JS is here to stay, so get used to it!
I love priceline.com. I am a deal maker and love to get a discount for little extra work. The problem is that recently that "extra work" has become a lot of work. I have gotten as much as 50% off deals on "name our price" offers, so I know there are great deals.
So when you name your price, it tells you what the average value is and you know that the computer has a specific number that it will accept. The way the system is designed is to discourage from increasing your offer by $5 until you hit the minimal acceptable price. So the way I use to do it, is clear all my browser cookies and start offer again. What a pain to fill out all the payment forms again so that I can make a new fresh offer. Recently after I spent an hour do this, I said enough, and used my JavaScript skills to automate the process a little bit. The idea is that you will have a script that will fill all the forms for you, so that when you clear your cookies to full the server that you are a new customer, you don't have to spend 5 minutes re-typing all the payment and contact info.
This is what you need: Firefox + Firebug plugin, and the following scripts
Form page one:
(function(){
var $ = function(e){
return document.getElementById(e);
},
val = function(e, v){
$(e).value = v;
},
gVal = function(o){
var i=0,
l = o.length;
for (i=0; i<=(l-1); i++){
val(o[i].id, o[i].value);
}
},
data = [
{
id: "offer/@Price",
value: "150"
},
{
id: "offer/hotels/reserve_name[0]/@first_name",
value: "David"
},
{
id: "offer/hotels/reserve_name[0]/@last_name",
value: "Pirek"
}
];
gVal(data);
})();
The second page only has initials so you can do it manually, and for the last page use this:
(function(){
var $ = function(e){
return document.getElementById(e);
},
val = function(e, v){
try{
$(e).value = v;
}
catch(err){
console.log("cond not set" + v);
}
},
gVal = function(o){
var i=0,
l = o.length;
for (i=0; i<=(l-1); i++){
try{
val(o[i].id, o[i].value);
}
catch(err){
console.log("cond not find" + o[i].id);
}
}
},
data = [
{
id: "offer/customer/address[0]/CONTACT_FIRST_NAME",
value: "David"
},
{
id: "offer/customer/address[0]/CONTACT_LAST_NAME",
value: "Pirek"
},
{
id: "offer/customer/address[0]/ADDRESS_LINE1",
value: "My Street"
},
{
id: "offer/customer/address[0]/city",
value: "New York"
},
{
id: "offer/customer/address[0]/province_code",
value: "NY"
},
{
id: "offer/customer/address[0]/postal_code",
value: "00000"
},
{
id: "offer/customer/phone[0]/PHONE_NUMBER",
value: "732123123"
},
{
id: "offer/customer/Email_Address",
value: "name@gmail.com"
},
{
id: "Scratch/Email_Address_Confirm",
value: "name@gmail.com"
},
{
id: "Scratch/CC_Type",
value: "AX"
},
{
id: "offer/customer/creditcard[0]/CREDIT_CARD_NUM",
value: "0000000000000"
},
{
id: "offer/customer/creditcard[0]/EXPIRATION_MONTH",
value: "10"
},
{
id: "offer/customer/creditcard[0]/EXPIRATION_YEAR",
value: "2012"
},
{
id: "Offer/Payment/Security/SECURITY_CODE",
value: "0000"
}
];
gVal(data);
})();
So this is what you do, open your Firebug (click on the firebug icon in the right bottom corner), click on the "console" tab and paste the JavaScript in the right box, then click "Run" and you should see the form being filled out. So now with a few "paste/copy" + clear cookies, you can name your prices faster than ever, and thus hit the "acceptance" threshold much closer, than ever before.
Disclaimer: this post is not about hot to hack priceline.com but rather how to automate the bidding process, and therefore become a better price negotiator.
Despite of some shortcomings html5 video player seems to be a reality on the web. The idea of having just a simple HTML tag representing video sounds tempting, however the reality is that you will have to write special code to cater to different browser, and probably even encoding your video in different formats, in order to get the video tag working.
What interests me is how JavaScript can make the video experience better competing with what the Flash players can do. Cristian Colceriu (opera website) has published a nice jQuery tutorial that shows how to add more controls to an HTML5 player.
This is how you can control the video tag using JavaScript: select the tag as an element, automatically have the video control methods
var videoElm = $("video");
videoElm.paly();
So once you know how to do this, you can use your typical jQuery click biding magic to create any control you want.