Web Development

Save Windows XP

2008-03-02T14:27:00.003Z

M$ plans to end most sales of Windows XP on June 30 2008.
Let's sign InfoWorld's petition to ensure Windows XP continues to be available after the deadline because it's very inappropriate for M$ to be forcing the customer to make high impact changes to their business for zero gain.

Come on, sign it!

Micro$oft's evil plans

2008-02-19T15:05:00.003Z

Here's a very good story to read: Evangelism Is War

Here's a snippet of it:

Our mission is to establish Microsoft's platforms as the de facto standards throughout the computer industry. Our enemies are the vendors of platforms that compete with ours: Netscape, Sun, IBM, Oracle, Lotus, etc. The field of battle is the software industry. Success is measured in shipping applications. Every line of code that is written to our standards is a small victory; every line of code that is written to any other standard, is a small defeat. Total victory, for DRG, is the universal adoption of our standards by developers, as this is an important step towards total victory for Microsoft itself: "A computer on every desk and in every home, running Microsoft software."

Form submit weirdness in Opera 9.20

2007-12-17T18:19:00.000Z

Here's one for you:

I have a few input form elements on a page, one of them is of type 'submit'. Because I don't use a form to submit this information, I set an event listener for one of the inputs like so: onkeypress="if(event.keyCode==13)myAction()" so that if enter is pressed, an action is performed. Similarly for the 'submit' input onclick="myAction()", so if the button is clicked the same action will be performed.

Here's what happens: if the enter key is pressed in the text control, myAction is executed twice. It's executed only once if I click on the button...

I investigated the problem and here are a few observations:

If the type of the submit element is changed to 'button' the action is performed only once when enter is pressed, as expected

If I remove the event listener from the text input element and leave the type of the 'submit' element unchanged, myAction is executed only once, as expected

What happens in myAction does not affect the form elements in any way, myAction can be replaced with alert

This behaviour doesn't happen in Firefox

In Firefox, only if the elements are in a form (and they are not in my case) then the form is submitted when enter is pressed in one of the text input elements

My conclusion: Opera detects a 'submit' element and launches a click event on it when enter is pressed in one of the text input elements, assuming that they're all part of a form. I think this is not something a web developer would expect, would you?

I need the event listeners for Firefox, so I'm going to change the submit element to 'button' which is more appropriate anyway.

RSA encryption

2007-12-16T17:27:00.000Z

I recently started to develop a new web application. I want this one to run many windows, only one web page loaded fully at the beginning: index.php. Once this is loaded all the communication will take place AJAX style through the httpRequest object.

One of the challenges was authentication. SSL is out of the question, because I don't want any page refreshing or browser redirection and I also want to enable the user to keep the state of their windows in case the session expires. The logging in must happen through a window that asks for the user name and the password, sends the information to the server and if the credentials match, log the user in, keeping all the previously opened windows with all the data in them. Of course if a different user logs in, only public information will be kept in the browser, not information marked as private by the previous user.

I don't want the password to travel on the internet in plain text, I want to encrypt just the password. I don't want to slow down the interaction by using some very slow encryption algorithm that takes a lot of time to complete.

Before I made my decision, I had searched for some ways to encrypt information with JavaScript and I had found a lot of websites (here's an example) that provide encryption algorithms that require keys. I don't understand what's the purpose of these algorithms, if they require a key which needs to be sent to the client on the internet, then an attacker can intercept the key as well and decrypt the information with no problem. Perhaps they are designed just for use by one person offline to encrypt some data and store it somewhere along with the key?!?

One secure way to authenticate people to my web application could have been, MD5 encryption on the client side and sent to the server to compare to the stored MD5 of the password. There are several problems with this method:

the md5 can be intercepted and sent in the future by the attacker to log in as the victim.

if you have an md5 hash and you want to know the text it represents, find a site that stores md5 hashes and search for it, if the password is pretty weak, it's a good chance you'll decrypt it.

we use LDAP to log in people and ldap requires plain text password to be sent to it, so storing just the md5 is out of the question.

RSA is by far the most popular cryptosystem and it's very secure. Because even though it requires some key exchange, there's a private key involved that doesn't travel between the server and the client. The most comprehensive and complete web site I found on this subject is this. I'm not going to talk too much about RSA, about how it works and why it's secure. Gaurav Saini's article explains everything.

The code Gaurav provided in his article encrypts and decrypts a number. What you need more is a way to generate the keys and a way to transform texts to numbers. As I said, I wanted something good enough without sacrificing speed (I'm not developing web applications for banks and the data used in this future web application is not very sensible). So instead of working with huge prime numbers as SSL does and generating them on demand, I chose to take a big list of prime numbers from this website, making sure that their product won't exceed JavaScript's integer upper limit. That saves a lot of processing time and to be sure they're not easy to guess, they are chosen randomly and assigned to either p or q with each request to the log in form.

I had to create a php version for the decrypt function as well, because their product and the 'phi' value is sent to the client from the server, the client encrypts the password and the server decrypts it upon receiving the information from the client. The password is then sent to the LDAP server along with the user name.

Transforming the text into numbers is the easy part. There are many ways, but I chose to use text.charCodeAt(i) to get the unicode code of each character, encrypt it using the key provided earlier by the server, put the codes together with a char delimiter, decrypt each code on the server and transform it to character using html_entity_decode('&#'.$code.';',ENT_NOQUOTES,'UTF-8');.

I had a tiny problem with php because php's upper limit on integers is a lot smaller than JavaScrpt's. I wanted to use the GMP library to work with large numbers, but unfortunately php5-gmp can not be installed on Ubuntu JeOS :-( so I found another one that comes bundled with PHP5, MCMath which worked like a charm.

A more complete RSA implementation that works with large numbers can be found at this address, but it's not very well explained. This version is interesting, instead of encrypting each character, it uses a key of a fixed length, takes chunks of the text transformed to the digit code, adds the bit shifted value of the corresponding position of the key to make a large string of digits which is treated as a number and encrypted. However this algorithm relies on a Delphi library to generate the key, which needs to be changed depending on what you use on the server side.

Please tell me about your unique and innovative way of sending passwords from client to server.

Firefox 2.0.0.6 vs Opera 9.20

2007-08-17T15:10:00.000+01:00

This post is not just to let you know what browsers I'm using at the moment.
It's rather about this speed problem a colleague of mine and I are having for a web application.

Just to make it simple, there are two divs, each contain a huge table, each with around 100 rows of 20 columns each, in each cell there is either some text, a checkbox or a select tag with around 5 options. Just to sum things up, there are like 800 checkboxes and 800 selects. They are loaded by pulling data from the server through a HttpRequest object.

We were expecting loading to take a long time and it really does :-)
What is really surprising is what happens when they're both loaded and their classNames are changed, one gets a class name that has among others "display: none" to hide it and the other gets "currentDiv" class name which sets a few properties.

I'm really surprised about how ling time it takes Firefox 2 to do this operation. I checked with FireBug exactly what part of the code takes the most to run and this is it:

myDiv.className = "currentDiv";

This is where it spends around 10 seconds.

I thought instead of changing the class name, to try and change the style.display property, but there was no visible difference. Here's a nice test on this subject.

Just for tha hell of it, I also took down any other CSS properties from the "currentDiv" class and especially these kind of lines:

div.currentDiv table td.commentTd{ ... }

I thought maybe the rendering engine has to go through all cells of the table in this specific div and change the visual attributes. Well, again, no improvement.

I was curious what had Opera to say about this matter and I tested the same code on Opera 9.20. Result: under 2 seconds including loading the div. Absolutely surprising.

I'm not giving up on Firefox, yet, I still love it :-) But I'm looking forward to Firefox 3 with its new and improved JavaScript engine ;-)

Prevent browser caching of web pages

2007-08-15T11:21:00.000+01:00

I'm having problems with cached web pages in some of my web applications.
There is this particular application that is in continuous development, while employees are using it and whenever I make some modifications the old version conflicts with the new one throwing errors or displaying some mixed information: some from the old html code and some new information the web page retrieves by AJAX.

I got a fix for the html code, now it isn't cached any more. I use this code in PHP:

  header("Cache-Control: no-cache, must-revalidate");
  header("Expires: Tue, 29 Mar 1983 07:20:55 GMT");

This really works, everything I modified in the PHP code is updated every time someone browses the web page, but not the JS and CSS files that are linked from the html code :-(

I found some more tips for preventing caching here. They consist in adding some meta tags in the head section of the web page:

  <meta http-equiv="expires" value="Tue, 29 Mar 1983 07:20:55 GMT"/>
  <meta http-equiv="pragma" content="no-cache"/>

The value of the first one is a date in the past, obviously. I'll let you guess the miracle that happened on that particular date I chose to put in there :-)

I tried this as well and it doesn't work for js and css files, unfortunately :-(

This wouldn't have been a problem if my js code was inline, but I never insert inline JavaScript code if there are more than 20 lines. I always like to split the code in many files each representing a module that can be taken and put on another website and works without changing anything except maybe a few variables.

Another idea was to send a header for each js or css file, but that would mean changing the js and css files to .php and send the headers I wrote at the begining of this post. I really don't want to do that, I want to keep them as js and css, because it's makes the application neat and organised. Many editors highlight code according to the file extension, I don't want to switch to choosing manually the highlighting style.

Some other ideas I got from Matt Raible and this forum. The idea is simple, very simple, just add a random number as a variable sent by GET method. This will foul the browser to think that it's always a new file without affecting the file itself.

Some other idea is to use subfolders for each version and just change the version folder in the path provided in the html code. This won't be a big problem because I use this piece of code to load dependencies, if versions change, I'll need to change only the main file that loads the dependencies, but others might find this annoying.

These last methods work fine, problem solved. But thinking about optimisation, the js and css files will never be cached so I lose one of the most important advantages I got by using external files, exactly what I want to get rid of: caching. Caching is meant to store information that is used often instead of loading it again and again.

As I don't update these files so often I decided to use a combination of all these methods. I use the headers to make sure the html code is always updated (usually there isn't too much html code in my html files, so not too much overhead ;-) ). I added a variable called version to the end of the file and I update it when I want the code in js and css files updated as well.

Here are the sample lines:

  <link rel='stylesheet' type='text/css' href='stylesheet.css?version=3' />
  <script type="text/javascript" src="js/toolbox.js?version=3"></script>

Don't forget to update the version number to the files you load dynamically from other js files!

I'm addicted to blogging

2007-07-26T19:45:00.001+01:00

67%

Installing PHP under Windows

2007-07-26T11:23:00.000+01:00

Installing PHP is supposed to be easy under Windows using the installer.

First you need to install Apache, or other web server.
Then launch the php windows installer and follow the instructions.

What I installed was Apache 2.2.4 and I tried to install PHP 5.2.2.
Everything was fine until I wanted to use some extension functions, like pg_connect, which is the function to connect to a PostgreSQL server. It didn't work and I was very surprised, because when I installed PHP I specified that I wanted to install the PostgreSQL extension.

I checked the php.ini file and the extension was indeed activated. I checked if the dll exists, it was there. So what was the problem? I figured out that php.ini was not being parsed, so I had to check the httpd.conf file for Apache where you need to specify the path for the php file.

I noticed that the PHP installer was writing the httpd.conf file wrongly, giving the path in forward slash notation, but everywhere else in the file all the paths were given in back slash notation, so I changed the path notation for php specifying the correct path both to the php.ini file and to the php5 module that Apache needs to load.

I restarted Apache and I got even more confused, the server couldn't recognise the php files as scripts and it displayed the code as text. That happens usually when the php module fails to load, so I changed the path only for the php5 module back to the way it was, no improvement. Then I changed the PHPIniDir attribute to the way it was before and it worked again, but I was back to no php.ini parsing. I changed only the PHPIniDir attribute to the backslash notation and I got the same result as earlier: code displayed as text.

I thought maybe the php.ini has a problem, but going through all of didn't reveal any mistake. I decided to rename it for a while to see what happens. Well, surprise, surprise, PHP worked, but no extensions...

My conclusion: writing the paths in backslash notations is the right thing to do, but if the server parses the php.ini file, it fails to load the php module.

php.ini looks good, everything is fine, the doc_root (that the installer failed to write) is there written correctly. I also followed the instructions to install php manually and I did everything accordingly, no improvement.

Is PHP meant to be used on Windows with Apache?

UPDATE: I solved my problem by installing XAMPP. Thank you very much Jo Cook for the tip.

Loading dependencies in JavaScript

2007-07-16T15:58:00.000+01:00

Isn't it nice to work modularized, even in JavaScript?
I like putting all my classes in their own files and all the little functions that don't belog to any class in a file called toolbox.js

That's pretty neat and organized, but when it comes to inserting all the necessary js files into your webpage, it's a pain, isn't it?

Well, not for me. I add the toolbox.js to every webpage that uses JavaScript and then the most important js file for that particular page.

Here's an example; I have a webpage that needs to use the EntryModule class. But this class needs a few more classes that are stored in other files, the TableEntryClass, the TextEntryClass and ColourObjectClass. All I need to do is to call this function:

loadDependencies(Array('js/ColourObjectClass.js', 'js/TableEntryClass.js', 'js/TextEntryClass.js'));

This function takes either a string or an array of strings that specify the js files to add to the same webpage that loaded EntryModuleClass.js

Here's the code, use it wise:

function loadDependencies(dependency)
{
  var head = document.getElementsByTagName('head')[0];
   var scripts = head.getElementsByTagName('script');
  var i, j, newjs;
  if(typeof dependency == 'string')
  {
    //search if it's loaded already
    for(i=0; i < scripts.length; ++i)
      if(scripts[i].src.toLowerCase() == dependency.toLowerCase())
        return;
    //if not, load it
    newjs = document.createElement('script');
    newjs.type = 'text/javascript';
    newjs.src = dependency;
    head.appendChild(newjs);
  }
  if(typeof dependency == 'object')//it must be an array
  {
     //search if it's loaded already
     for(i=0; i < dependency.length; ++i)
     {
       for(j=0; j < scripts.length; ++j)
         if(scripts[j].src.toLowerCase() == dependency[i].toLowerCase())
           return;
       //if not, load it
       newjs = document.createElement('script');
       newjs.type = 'text/javascript';
       newjs.src = dependency[i];
       head.appendChild(newjs);
     }
   }
}

I hope you notice the care I took with declaring the variables at the begining of the function and also getting the head tag and the script tags at the begining to optimize the number of searches...

Virtual Perfume

2007-07-14T16:33:00.000+01:00

While chatting with a friend, I got this term that made my imagination run wild.

I searched for "virtual perfume" and got a few interesting links like this one about Calvin Klein launching a virtual perfume on Second Life. While what CK did is just a smart marketing action to promote their brand and their new perfume, Second Life is quite a nice application, but I'd rather not start using it. It might turn out addictive and then I might find myself into the Matrix, disconnecting only to go to the toilet :-D

My imagination went further then just marketing material to distribute on the web, I actually thought of the media of the future. The techniques of recording and reproduction of visual and auditory information are nowadays well established, maybe it's time to move forward and put some more time into researching how to record and reproduce information to serve the other human senses.

What about having this artificial nose to sniff you and transmit the data over the internet to a device installed on your friend's machine that takes this data and makes up the exact smell? Does this sound like something belonging to the far future? I honestly think not. There are so many sensors that detect all kind of smells, mostly designed for safety, like those to sniff gas, food turned bad or illegal substances (there's such a device at the entry to the Statue of Liberty, at security check). Look there's even something simpler here. This is just small patch that displays special visual patterns according to the smell in the air. Of course it has only a few smells that it recognises.

The sniffer should detect all the simple chemical substance and their amount in the composition of the air at any given time and the reproducer should have stores (just like printers have cartridges) of many chemical substances to combine them in the exact amount specified by the sniffer in order to produce the same odor.

I see a few problems here, the speed and the accuracy of sniffing every small change in the air's chemical composition, the speed and the accuracy of reproducing the small changes at the other end must be as high as possible. I'm sure these will be solved by future technologies. Another problem will arise when the accuracy is very good, the fragrance creators will lose their market as people will be able to recreate their smell in their own homes...

Every ingenious idea that you get, after breaking it into smaller parts and realizing that it's so simple, you realise it's impossible to be the only one to come up with it. So of course, I'm not the first, bummer, I was about to request a patent for it... Here's a very nice explanation of the idea, the tests they ran and their results.

Nokia's idea is also very interesting, I think in a few years we'll use these kind of technologies. I'm so looking forward to it. Imagine including in your profile on myspace or facebook your smell, how cool would that be?

LDAP issue

2007-07-12T12:12:00.000+01:00

A few weeks ago I decided that it would be better if all the web applications we develop would log users in by using their Active Directory authentication details.

This makes things easier for our users, they don't need to remember their username and password for each application. They will most probably use the same details everywhere anyway, but there's no point in keeping this information in many places, is there?

Well this task seemed pretty SF when I got the idea, but with researching, reading and testing, I managed to make it work. So I use LDAP to connect to our AD server and because I use PHP on the server side, I use PHP's LDAP Functions which are not enabled by default.

The typical sequence of LDAP calls you will make in an application will follow this pattern:

ldap_connect() // establish connection to server
|
ldap_bind() // anonymous or authenticated "login"
|
ldap_search() // search for some information
|
ldap_close() // "logout"

For authentication a typical application will do this:
- connect to the server
- bind anonymously or with a predefined user made especially for authenticating
- search for the user name in the directory
- try to bind with the user name and password given and see if it works
- disconnect from the server

Well this approach is very common. Here's a code example. If you search on google for "php ldap authentication" you'll find many code samples that do it in a similar way.

Well, my approach is different. Why bind anonymously or with a special user name and password? Why not try binding directly with the given name and password? That's what I did and it worked, but I noticed a weird thing about the ldap_bind function that I didn't find in the documentation: if the user name doesn't exist in the directory, the function will bind automatically anonymously even though a password is given.

To make sure the user is really authenticated after a successful bind, do a search of the directory and see if the user name exists and of course if it belongs to the right branch of the directory tree. I think this is more efficient and as secure as the other approach. The other approach does one more bind without reason and if a user enters wrong login password a bind and a search is done anyway, in my approach binding fails and returns failure quicker. Also instead of getting the search results and then the right data out of the structure, I check only the number of results which should be one for a successful authentication.
I know, I know, I'm an optimization freak ;-)

I found another weird behaviour that needed some more research. I noticed that even though my login details were correct the search returned no results. Here's the comment that helped me get to the bottom of it. So I had to change the port I was connecting to, from 389 to 3268.

However I was wondering what did "search the entire tree" mean. I thought I wasn't searching the entire tree, I was searching only for users in a certain domain because I was specifying the DC attribute. Changing the port made everything work, but I just was a bit confused so I tried different filters for my search.

I finally found that if I include in my filter the OU (OrganisationalUnit) the search works fine even when connecting to the 389 port. Isn't that interesting? So what does exactly "search the entire tree" mean?

Here's my code, take a look, give me some comments.

$LDAPFail = true;
//ldap rdn or dn
$ldaprdn = $username."@mydomain.com";
// associated password
$ldappass = $password;
// connect to ldap server
@$ldapconn = ldap_connect("xxx.xxx.xxx.xxx","389");
if ($ldapconn)
{
   //binding to ldap server
   $ldapbind = ldap_bind($ldapconn, $ldaprdn, $ldappass);

   // verify binding
   if ($ldapbind)
   {
     $dn = "OU=MyCompany_Users;DC=mydomain,DC=com";
     $filter="(SAMAccountName=".$username.")";
     $sr = ldap_search($ldapconn, $dn, $filter,Array("samaccountname"));

     if(ldap_count_entries($ldapconn, $sr) == 1)
       $LDAPFail = false;

   }
   ldap_close($ldapconn);
}

I hope this helps someone out there...

The Origin of the "Bit" Term

2007-07-11T21:19:00.000+01:00

I had this expression in my mind after reading various forums/blogs/comments: "just my two cents". People used to end their comments with it and I thought it sounded really cool, so I searched for it to see exactly what it means.

Well here's what I came across, it's the most explanatory explanation I could have found ;-)

Well this is how I found out that a bit used to mean a long time ago an eighth of a coin, because the coins were very valuable because they were made of gold or silver and they were worth the value of the metal they were made of. Therefore they used to split the coins into halves, quarters and eighths. Imagine how small an eighth of a coin was.
Now I assume that the expression "bits and pieces" is as well related to old coins and subdivisions. So they used to make their money bit by bit ;-)

Well, just my two cents :)

Voodoo Programming

2007-07-06T15:51:00.001+01:00

Here's a concept I just found out: voodoo programming.
I've had people around me doing this and I had a hard time explaining to others what these guys do, now I have a quick way to categorize them.
OK, so voodoo programming is basically programming without fully understanding.
Just push run and if it works, call it your masterpiece :) Come on, there are so many people that do this. First step is google for the code that does what you want. Then copy, paste and run. If it works, job done, carry on with the next task...

These programmers are called witch doctors, pretty nifty, don't you think?
Well, gladly for me, I like to consider myself a guru or wizard. And yes, I'd like to be thought the same by those around me.

More info here. Thanks for Thau, he's the one that I heard this concept from.