i'm under construction

Git's environment filter

2010-03-05T13:33:00.003+02:00

This is a thing I keep on forgetting although I've done it several times. So, I'm writing a blog post hoping it will help me memorize this.

So... how do you rewrite Git's history, specifically the environment variables? With git filter-branch of course. I frequently need it in order to change the author and committer email addresses (either from personal to work or the other way around).



git filter-branch --env-filter 'export GIT_AUTHOR_EMAIL="email@address.com"' HEAD
git filter-branch --env-filter 'export GIT_COMMITTER_EMAIL="email@address.com"' HEAD

Don't forget that there are two email addresses, OK? The author's and committer's one. Oh, and no spaces around the equal sign.

For a more complicated situation see this answer on serverfault.com.

CSS for Firefox only

2009-06-05T01:54:00.016+03:00

So, how do you write CSS code that will be understood only by Firefox?

Same question was asked by someone on stackoverflow.com. My first attempt was to use XBL and Mozilla's proprietary -moz-binding CSS extension in order to run some JavaScript that will eventually load the intended CSS rules. This solution was inspired by Dean Edwards' moz-behaviors library and it looks like this:

index.html

<!DOCTYPE html>

<html>
<head>
<style type="text/css">
body {
 -moz-binding: url(ff.xml#load-mozilla-css);
}
</style>
</head>
<body>

<h1>This should be red in FF</h1>

</body>
</html>

ff.xml

<?xml version="1.0"?>

<bindings xmlns="http://www.mozilla.org/xbl">
    <binding id="load-mozilla-css">
        <implementation>
            <constructor>
            <![CDATA[
                var link = document.createElement("link");
                    link.setAttribute("rel", "stylesheet");
                    link.setAttribute("type", "text/css");
                    link.setAttribute("href", "ff.css");

                document.getElementsByTagName("head")[0]
                        .appendChild(link);
            ]]>
            </constructor>
        </implementation>
    </binding>
</bindings>

ff.css

h1 {
 color: red;
}

But I felt that there should be a better solution. So I kept digging on MDC. After a couple of clicks I discovered the easiest solution out there for targeting just the Firefox browser in our CSS. It uses a Mozilla specific at-rule, called @-moz-document, and it's actually intended for user styling.

Here's the final solution

<!DOCTYPE html>

<html>
<head>
<style type="text/css">
@-moz-document url-prefix() {
    h1 {
        color: red;
    }
}
</style>
</head>
<body>

<h1>This should be red in FF</h1>

</body>
</html>

A word of caution

We all know how many hours Internet Explorer conditional comments have saved us, but I believe Firefox is a much, much better browser, so please think twice before using the above trick. I'm pretty sure there must be some other way. We don't want to maintain three different stylesheets, for IE, FF and the rest of the browsers out there.

JScript deviations from ECMAScript 3

2009-04-28T15:13:00.004+03:00

Just found a great resource of "things" that are specific to JScript and are not conforming to the ECMAScript 3 standard. Found it on a MSDN blog post from 2007. Enjoy, 87 pages of standards deviations (aka bugs)! Here's the PDF.

Lambdas and closures in PHP 5.3

2009-04-03T02:16:00.012+03:00

Beginning with PHP 5.3 we'll be able to write anonymous functions and build closures around them - almost the same way we do it in JavaScript. I'd like to introduce these to those of you unaware of these new possibilities in this little blog post.

Defining a lambda

The most simple way to define a lambda can be find below. It's exactly the same way JavaScript handles it. One has to assing a function to a variable.

<?php

$lambda = function() {
    return 'Hello World';
}; // <- this semicolon is mandatory, unlike JavaScript

echo $lambda();

Creating closures

However, if we want closures, we have to do something more and this because the way scope is designed in PHP where functions don't get easy access to variables declared outside them. If we want that with a normal (old style) function, we need to import them using the global keyword. Following the same idea, in order to capture a variable into a closure we need to use it:

<?php

$word   = ' World';
$lambda = function() use($word) {
    return 'Hello' . $word;
};

echo $lambda();

Mutable closures

Now, our anonymous functions has access to $word. But there's a gotcha right here. It has read only access to $word. We may try to modify $word inside our function, but those changes won't be visible outside it. So, here we are, introducing the third thing we need to know about lambdas and closures in PHP. In order to be able to modify a closed variable, we need to import it using the reference operator:

<?php

$word   = ' World';
$lambda = function() use(& $word) {
    $result = 'Hello' . $word;
    $word   = 'Bye World';
    return $result;
};

echo $lambda();
echo $word;

This time, $word can and will be modified. The variable inside the closure is mutable.

Some history about the future

Although, as of yet, a stable version of PHP 5.3 is not yet out, I should mention that in the process of bringing lambdas and closures to the language there was a particular property of these in that they were able to automagically import the $this pointer if the function was defined inside a class. Not long after, some people thought about writing PHP in the prototypal style of JavaScript, thus there were some discussion that lead the PHP internals to temporarily remove the magic import feature. The main reason was that they had to push the final version out sooner and any new feature would have meant delays. Nevertheless, this feature has been postponed for PHP 6 in which we may get some niceties that should allow us to more easily write code in a monkey patching/prototypal style.

What's new in PHP 5.3

2009-04-01T14:26:00.021+03:00

A few weeks ago, PHP 5.3 RC1 has been released and I expect the final version to be out in no more than a month. I'm watching its development since the beginning of 2008 and am really eager to see it in production. The reason for this impatience is that it brings really cool features to the language and I'd like to enumerate some of them in order of my preferences. Initially I also wanted to briefly describe them, but apparently there was to much to talk about in just one post, therefore each feature in the list below will, eventually, point to a more detailed post about the respective feature. So here's what I like best:

Lambdas and closures
Callable classes
Namespaces
The Phar extension
Late static binding

There are some other features beside the above mentioned, but these are easier to present so I'll shortly describe them here:

1. __callStatic

This is just like the __call we all know except it is designed to work when calling methods in a static context:

<?php

class Test
{
    public static function __callStatic($method, $args)
    {
        return array($method, $args);
    }
}

var_dump(Test::dummyMethod('with dummy argument'));

2. NOWDOC strings

We all know HEREDOC strings and the fact they are parsed by the PHP engine for variable interpolation. They're also good when we have large strings with both single and double quotes, because it saves us from escaping them. Some PHP internals thought though, that the overhead produced for variable interpolation is to big, so they came up with NOWDOC strings. This is just like HEREDOC save for the variable interpolation. Here's an example:

<?php

$here_doc = <<<STR
Some random string with $variable interpolation...
STR;

$now_doc = <<<'STR'
Some random string without $variable interpolation...
STR;

3. Ternary shortcut (?:)

This is just like the old ternary operator except that we can leave out the middle statement. The rule is that, if the left-hand side expression evaluates to true, its result is returned, otherwise it will return the result of the result of right-hand side expression:

<?php

var_dump('' ?: 'there was an empty string');

var_dump('I am not empty' ?: 'there was an empty string');

4. Limited goto

Honestly, I don't yet understand why this construct is limited because I have never worked with gotos. All I know is that we cannot use goto statements inside loops, this will cause a fatal error to be thrown. Anyway, here's a basic example taken straight from the manual:

<?php

goto a;
echo 'Foo';

a:
echo 'Bar';

PHP 5.3 April Fools Easter Egg

2009-04-01T12:46:00.004+03:00

Apparently, PHP 5.3 RC1 changes the PHP logo generated by php_logo_guid() or phpinfo() on April 1st. There's an elephpant right there :)

Komodo Edit dark theme

2009-03-28T23:55:00.009+02:00

For some time now, I developed some computer related eye fatigue, which kinda sucks and I believe this is related (in part) with the white background of my text editor(s). That's why I decided to try a dark theme in Komodo Edit. The one shipped with the editor is a bit ugly, I wanted something more like Twilight for Textmate and any Google search for Komodo themes returned pretty much nothing. So, here's my creation, inspired by all those dark themes out there, especially Twilight.

If you like it, you can grab the theme file from github. You don't need to know/use Git, there's a download button somewhere on that page.

It only supports PHP and JavaScript syntax for the moment. More to come when I'll have some time. Update: There's Python and XML support right now.

After you download it, put the .ksf file in your Komodo Edit application data folder, more precisely the schemes directory. On my Windows machine this is: C:\Documents and Settings\{user}\Application Data\ActiveState\KomodoEdit\4.3\schemes.

XHTML no matter what!

2009-03-20T16:55:00.016+02:00

metropotam.ro changed their layout. Here's what XHTML obsession means (look after IE conditional comments):

<base href="http://metropotam.ro/" /><!--[if IE]></base><![endif]-->

I simply cannot see the reason for such a useless hack. Too bad they forgot to do the same thing for script tags. But I see the reason for the one below (again, look after IE conditional comments):

<li class="selected">
<!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul>
  ...
 </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

But then again. What's this? (look after IE conditional comments):

<li><a href="http://metropotam.ro/Unde-iesim-index/"><strong>Unde iesim</strong><!--[if gte IE 7]><!--></a><!--<![endif]-->

Regardless of the above nitpicking though, I like the new layout.

PHP's ErrorException class

2009-03-18T11:40:00.006+02:00

Did you know PHP has an ErrorException class that solves the problem of throwing exceptions from an error handler function?

What problem?

Well, if you throw a normal Exception from such a handler, the file name and line number of the Exception will be set to match the file and line where the Exception was actually thrown and not the place where the error happened. There was no way to extend an Exception class and provide the correct information as Exception's $file and $line properties are private and there are no setter for them, only getters.

ErrorException solves this problem by overriding the Exception constructor, allowing us to pass up to five arguments. From these five arguments, four have the same meaning as the four arguments passed to the error handler function: $errno, $errstr, $errfile, $errline. By passing along these arguments to the ErrorException constructor we get a more meaningful exception from our error handler.

Change default sort order in Mozilla Thunderbird

2009-02-16T23:37:00.008+02:00

I like email and feed messages ordered by date ascending in my Thunderbird, but its default settings are date descending. So I changed it like this:

Go to: Tools -> Options
Click "Config Editor..." button
Search for "sort"
Change value of mailnews.default_sort_order from 1 to 2

In case you had no idea whether Thunderbird has an about:config capability like Firefox, now you know.

MySQL transliteration function

2009-02-13T10:37:00.013+02:00

In my latest project at work I had to obtain, by means of an SQL query, transliterated values of certain data fields in our database. And when I say transliteration I don't mean to transform characters from all over the world into latin characters. What I wanted was to strip diacritics out of latin based characters, like: ş, ţ, ă, î or â.

Initially I thought this should be an easy job as database, table and column charset values were all set to utf8_general_ci and I knew MySQL does well at comparing basic latin characters against derived ones. Well, it wasn't. Although the following query returns true (or 1), there's no way of querying MySQL for a transliterated value, i.e. from the right hand side string to obtain the left hand side string.

SELECT 'staia' = 'şţăîâ';

So what I did was to define a function in which to take advantage of the comparison feature in order to obtain transliteration. What I came up with might end up on thedailywtf.com but despite its apparent stupidity it does its job very well. So here's the function (or as a gist on github):

DELIMITER $$

DROP FUNCTION IF EXISTS `transliterate` $$
CREATE FUNCTION `transliterate` (original VARCHAR(128)) RETURNS VARCHAR(128)
BEGIN

  DECLARE translit VARCHAR(128) DEFAULT '';
  DECLARE len      INT(3)       DEFAULT 0;
  DECLARE pos      INT(3)       DEFAULT 1;
  DECLARE letter   CHAR(1);

  SET len = CHAR_LENGTH(original);

  WHILE (pos <= len) DO
    SET letter = SUBSTRING(original, pos, 1);

    CASE TRUE
      WHEN letter = 'a' THEN SET letter = 'a';
      WHEN letter = 'b' THEN SET letter = 'b';
      WHEN letter = 'c' THEN SET letter = 'c';
      WHEN letter = 'd' THEN SET letter = 'd';
      WHEN letter = 'e' THEN SET letter = 'e';
      WHEN letter = 'f' THEN SET letter = 'f';
      WHEN letter = 'g' THEN SET letter = 'g';
      WHEN letter = 'h' THEN SET letter = 'h';
      WHEN letter = 'i' THEN SET letter = 'i';
      WHEN letter = 'j' THEN SET letter = 'j';
      WHEN letter = 'k' THEN SET letter = 'k';
      WHEN letter = 'l' THEN SET letter = 'l';
      WHEN letter = 'm' THEN SET letter = 'm';
      WHEN letter = 'n' THEN SET letter = 'n';
      WHEN letter = 'o' THEN SET letter = 'o';
      WHEN letter = 'p' THEN SET letter = 'p';
      WHEN letter = 'q' THEN SET letter = 'q';
      WHEN letter = 'r' THEN SET letter = 'w';
      WHEN letter = 's' THEN SET letter = 's';
      WHEN letter = 't' THEN SET letter = 't';
      WHEN letter = 'u' THEN SET letter = 'u';
      WHEN letter = 'v' THEN SET letter = 'v';
      WHEN letter = 'w' THEN SET letter = 'w';
      WHEN letter = 'x' THEN SET letter = 'x';
      WHEN letter = 'y' THEN SET letter = 'y';
      WHEN letter = 'z' THEN SET letter = 'z';
    END CASE;

    SET translit = CONCAT(translit, letter);
    SET pos = pos + 1;
  END WHILE;

  RETURN translit;

END $$

DELIMITER ;

Ajax file upload with pure JavaScript

2009-01-11T01:05:00.019+02:00

I don't know about you, but there's one little thing I've always hated about Ajax. The impossibility of file uploading. I still remember the ugly day when I discovered the terrible truth. There was no chance on earth you could send a file using an XML HTTP request, thus workarounds appeared. Google made use of a hidden iframe to imitate such an asynchronous call for their Gmail service, and later on, Flash based uploaders appeared. Things are though going forward.
Firefox 3 introduced a new API, that few people know about, which allows JavaScript to read local files selected by an user from a form file-upload dialog. A copy of Firefox 3 with default settings offers full access to this new programming interface. So we'll embrace the challenge and write a little JavaScript uploader on top of this new API.

You may download the final script right now.

Goal

In this tutorial we'll write a little application that is able to read and upload local files to a remote web server using an asynchronous HTTP request. The whole application consists of three parts:

the client side comprised of JavaScript, HTML and a little CSS
the server side script, written in PHP
the communication channel in between them, old good HTTP

We'll start with the JavaScript side, as I'm sure you're eager to find about the new file access API, then we'll review the XMLHttpRequest object as available in Firefox version 3 (it got enhanced with a new method). After the client-side part follows explanations for the server-side script, written in PHP, continued with a little summary over the HTTP protocol concerning data transmission and HTML forms. Finally, we'll put all these together to build a powerful asynchronous file uploader.

The Firefox file upload API

When Firefox 3 has been launched in June this year, we heard a lot about the improvements it brought to the web development field by further implementing existing standards and technologies like HTML, CSS and JavaScript. One thing I have never seen mentioned was the interface for reading local files, provided the file is chosen by the user through an HTML file input element. For example, a simple Google search for getAsBinary, one of the new methods in the API, will give you few results, even when counting the false positives (such a false positive is related to ColdFusion which has a similar method name, and results comprising information about it are preponderant). That surprises me a lot as, in my opinion, it is a huge step forward in building more powerful web applications. Actually, there is someone that wrote about it in May 2008. Alas the news hasn't spread.
With this new API, each input element (not only file input elements), is given a property called files. This property is our gateway to reading local files. When the type attribute of the input element isn't file, the value of the files property is null. On the other hand, for input elements whose type attribute is file, the files property is of type FileList and resembles a NodeList object returned by, let's say, document.getElementsByTagName(). You may access it as if it were an Array and has the following properties and methods:

length
item(index)

Each element in the files property is a File element that exposes the following properties and methods:

fileName
fileSize
getAsBinary()
getAsText(encoding)
getAsDataURL()

Those two lists above are all there is to know about the API for reading local files. There is nothing more about it. No security restrictions, no special configurations.
As I'm sure the files property itself poses no problem in understanding its interface let's review the contained file objects with a little script. You may want to download https://addons.mozilla.org/en-US/firefox/addon/1843 Firebug in order to get a through understanding of the following exploration. Here's the code that we'll use:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>JavaScript file upload</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var upload = function() {
var photo = document.getElementById("photo");

return false;
};
</script>
</head>
<body>

<form action="/" method="post" onsubmit="return upload();">
<fieldset>
   <legend>Upload photo</legend>
   <input type="file" name="photo" id="photo">
   <input type="submit" value="Upload">
</fieldset>
</form>

</body>
</html>

The fileName property gives us the name of the picked up file, but not the absolute path on the filesystem, just the basename. Modify the above source code above so that the JavaScript part now becomes:

<script type="text/javascript">
var upload = function() {
var photo = document.getElementById("photo");
// the file is the first element in the files property
var file  = photo.files[0];

alert("File name: " + file.fileName);

return false;
};
</script>

The fileSize property returns, as you may have guessed, the size of the file in bytes:

<script type="text/javascript">
var upload = function() {
var photo = document.getElementById("photo");
// the file is the first element in the files property
var file  = photo.files[0];

alert("File name: " + file.fileName);
alert("File name: " + file.fileSize);

return false;
};
</script>

The getAsBinary() method will read the contents of the file and return them in binary representation. If you select a binary file, an image for example, you should see some weird characters, question marks or even rectangles in the alert, this is how Firefox represents the bytes contained in the file. For a text file it will simply output its text.

The getAsText(encoding) method will return the contents as a string of bytes encoded depending on the encoding parameter. This is by default UTF-8, but the encoding parameter it's not really optional. You still have to pass some value. An empty string will do it just fine:

<script type="text/javascript">
var upload = function() {
var photo = document.getElementById("photo");
// the file is the first element in the files property
var file  = photo.files[0];

alert("File name: " + file.fileName);
alert("File size: " + file.fileSize);
alert("Binary content: " + file.getAsBinary());
alert("Text content: " + file.getAsText(""));
// or
// alert("Text content: " + file.getAsText("utf8"));

return false;
};
</script>

Finally, the getAsDataURL() method, a very interesting and very useful one, will return the file contents in a format ideally suited for, let's say, the src attribute of an IMG tag. Of course, this will work as we're in Firefox right now, so let's add a IMG tag to the HTML source and the appropriate JavaScript code to make this work:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>JavaScript file upload</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var upload = function() {
var photo = document.getElementById("photo");
// the file is the first element in the files property
var file  = photo.files[0];

// alert("File name: " + file.fileName);
// alert("File size: " + file.fileSize);
// alert("Binary content: " + file.getAsBinary());
// alert("Text content: " + file.getAsText(""));
// or
// alert("Text content: " + file.getAsText("utf8"));

var preview = document.getElementById("preview");
preview.src = file.getAsDataURL();

return false;
};
</script>
</head>
<body>

<form action="/" method="post" onsubmit="return upload();">
<fieldset>
   <legend>Upload photo</legend>
   <input type="file" name="photo" id="photo">
   <input type="submit" value="Upload">
   <hr>
   <img src="" alt="Image preview" id="preview">
</fieldset>
</form>

</body>
</html>

More information about the new API can be found on their dedicated pages on Mozilla Developer Center:

Some extra information

You may wonder why an array of files for just one input element. It turns out that RFC 1867, concerning form-based file uploads, specifies that a file input element allows its size attribute to receive a complex value:

The SIZE attribute might be specified using SIZE=width,height,
where width is some default for file name width, while height is
the expected size showing the list of selected files. For example,
this would be useful for forms designers who expect to get several
files and who would like to show a multiline file input field in
the browser (with a "browse" button beside it, hopefully). It
would be useful to show a one line text field when no height is
specified (when the forms designer expects one file, only) and to
show a multiline text area with scrollbars when the height is
greater than 1 (when the forms designer expects multiple files).

None of the browsers I tested this in seems to obey the RFC, nevertheless this should be the reason for which the files property is an array-like object.

The XMLHttpRequest object

Now that we're able to read local files, we need a way to get this data, over the network, to the server. As we're aiming for an asynchronous data transmission, an XMLHttpRequest object should do the job just fine. Unfortunately, its send() method isn't that reliable in sending binary data. For this reason, along with the local file access interface, Firefox 3 brought a new method to the XMLHttpRequest object: sendAsBinary(data). Just as the send() method, the new one takes a single argument, a string, which is converted to a string of single-byte characters by truncation (removing the high-order byte of each character), according to the documentation. The difference, a very important one, is that, as long as send() knows how to process an URL query string, sendAsBinary() expects a totally different format in order to be useful for the server-side end of the application, but we'll talk about this a little bit later. Let's just write a little JavaScript skeleton, that we'll use when assembling together all the pieces of the application:

var xhr = new XMLHttpRequest;
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
   alert(xhr.responseText);
}
};
xhr.sendAsBinary(data);

As you see, there's an undefined variable in the above snippet, data, which remains to be defined after we review the mechanism behind files upload over HTTP. For the moment though, I want to talk about the server-side part, as it will guide us in choosing the appropriate strategy for sending binary information.

The server-side script

PHP, as well as several web frameworks made on top of other languages, offers different access points for reading POST data containing uploaded files and POST data containing just simple values. In PHP there are two predefined arrays giving you access to simple POST data, the $_POST array, and another one for accessing files sent to the server, the $_FILES array. It is thus wise to build a client-side script able to send information that PHP would read as from a classical request issued with an HTML form: our uploaded files would appear as elements inside the $_FILES array and additional values as elements inside the $_POST array. Under these circumstances we can write the PHP script to test that our JavaScript client is performing well:

<?php

print_r($_FILES);
print_r($_POST);

That's all we need on the server. Although simple this we'll give us valuable feedback about the sent data. The PHP script should list our uploaded files inside the $_FILES array and any additional form data (like text INPUT or SELECT element) inside the $_POST array.

Form data over HTTP theory

As we saw, PHP treats POST-ed files differently than ordinary form field values, so it's only natural to ask ourselves what's the "clue" that helps PHP tell apart one from the other.
First of all, every HTML form element out there has an optional attribute called enctype, with a default value of application/x-www-form-urlencoded. This is actually a MIME type value specifying the encoding to be used by the web browser when sending form data. It also guides the web server script in decoding that data as the encoding is sent by the browser to the server in the form of an HTTP header, called Content-Type.
For a default enctype value, form data is sent as ASCII characters, URL encoded when necessary. On the other hand, when uploading files, we need to change the enconding to multipart/form-data. Cloning this basic form functionality inside our JavaScript client is what we should do. Let's modify the earlier script so that it sends such a multipart/form-data header:

var xhr = new XMLHttpRequest;
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
   alert(xhr.responseText);
}
};
xhr.setRequestHeader("Content-Type", "multipart/form-data");
xhr.sendAsBinary(data);

RFC 1867, regarding form-based file uploads, dictates that an extra parameter is required for the Content-Type header when its value is multipart/form-data. It is called boundary and its presence it's very logical. The multipart word inside the header means the sent request is formed of multiple parts (obviously), so there must be something to separate those parts. This thing is the boundary parameter which value must be a string of characters that shouldn't be found inside any of the form values we send, otherwise the request will get garbled. Once again, let's modify the script to reflect this requirement.

var xhr = new XMLHttpRequest;
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
   alert(xhr.responseText);
}
};

/*
* The value of the boundary doesn't matter as long as no other
* structure in the request contains such a sequence of characters.
* We chose, nevertheless, a pseudo-random value based on the current
* timestamp of the browser.
*/
var boundary    = "AJAX--------------" + (new Date).getTime();
var contentType = "multipart/form-data; boundary=" + boundary;
xhr.setRequestHeader("Content-Type", contentType);
xhr.sendAsBinary(data);

Next, let's talk about the structure of the parts comprised in the request. Each of these is like a little request on its own. Each has its own headers structure and body.
The mandatory header, every part must have, is called Content-Disposition and its value should be form-data followed by an additional parameter called name, which represents the name of the form input that holds the data. In case of parts holding uploaded files, a second parameter must also be present, called filename. This is the name of the file as it was on the user's computer. Not the absolute path, just the basename (for example, monkey.png). Parameter values are enclosed inside double quotes. A little example:

Content-Disposition: form-data; name="photo"; filename="monkey.png"

In the case of files, a second header must is also needed. It is called Content-Type and specifies the MIME type of the file. This may be deduced by reading the file extension or the source of the file. Anyway, a general value of application/octet-stream is perfectly acceptable:

Content-Disposition: form-data; name="photo"; filename="monkey.png"
Content-Type: image/png

As per the standards, every such header should end with two characters, a carriage return and a new line: CR and LF. The last header doubles this sequence (i.e. it ends with CRLFCRLF).
Following the headers is the body which consists of the form field value. I'll illustrate with a simple text file upload, although it could be any type of file. The text inside the file is "my random notes about web programming":

Content-Disposition: form-data; name="notes"; filename="my_notes.txt"
Content-Type: text/plain

my random notes about web programming

Finally I'll give you a final example with both the HTML markup of the form as well as a fictional request from that form:

The form:

<form action="upload.php" method="post" enctype="multipart/form-data">
<fieldset>
   <legend>Upload photo</legend>
   <label for="image_name">Image name:</label>
   <input type="text" name="image_name" id="image_name">
   <select name="image_type">
       <option>Family</option>
       <option>Work</option>
       <option>Vacation</option>
   </select>
   <input type="file" name="photo" id="photo">
   <input type="submit" value="Upload">
</div>
</form>

The issued request could be:

Content-Type: multipart/form-data; boundary=RANDOM_STRING_BOUNDARY
--RANDOM_STRING_BOUNDARY
Content-Disposition: form-data; name="image_name"

Monkey
--RANDOM_STRING_BOUNDARY
Content-Disposition: form-data; name="image_type"

Vacation
--RANDOM_STRING_BOUNDARY
Content-Disposition: form-data; name="photo"; filename="monkey.png"
Content-Type: image/png

[ here would be the png file in binary form ]
--RANDOM_STRING_BOUNDARY--

In case you didn't noticed, the boundary, when used in between the parts is prepended with two hyphens and the last one appended with also two hyphens. Don't forget about this, it's an ugly source of bugs.

Encapsulating the JavaScript logic

At this point we know all the parts to successfully build a pure JavaScript file uploader, which we're going to implement as an object. Here's the basic structure of the constructor and its prototype:

/**
* @param DOMNode form
*/
var Uploader = function(form) {
this.form = form;
};

Uploader.prototype = {
/**
* @param Object HTTP headers to send to the server, the key is the
* header name, the value is the header value
*/
headers : {},

/**
* @return Array of DOMNode elements
*/
get elements() {},

/**
* @return String A random string
*/
generateBoundary: function() {},

/**
* Constructs the message as discussed in the section about form
* data transmission over HTTP.
*
* @param  Array  elements
* @param  String boundary
* @return String
*/
buildMessage : function(elements, boundary) {},

/**
* @return null
*/
send : function() {}
};

In case you didn't understand the elements() construct, this is called a getter and is supported by the latest versions of Firefox, Opera, Safari and Chrome. A setter form is also provided. You can find more about these on Mozilla Developer Center.

We should fill the above methods, so let's start with the send() method because we already wrote much of it in a previous sections of the tutorial:

/**
* @return null
*/
send : function() {
var boundary = this.generateBoundary();
var xhr = new XMLHttpRequest;

xhr.open("POST", this.form.action, true);
xhr.onreadystatechange = function() {
   if (xhr.readyState === 4) {
       alert(xhr.responseText);
   }
};
var contentType = "multipart/form-data; boundary=" + boundary;
xhr.setRequestHeader("Content-Type", contentType);

for (var header in this.headers) {
   xhr.setRequestHeader(header, headers[header]);
}

// here's our data variable that we talked about earlier
var data = this.buildMessage(this.elements, boundary);

// finally send the request as binary data
xhr.sendAsBinary(data);
}

In addition to what we had earlier we have now introduced an iteration that allows us to send additional headers without modifying the prototype itself. We have also defined the variable we talked about earlier, data, which holds the source of the HTTP request. It holds the value returned by a call to a method whose only purpose is to build an HTTP compliant request for file uploads. Here's its source:

/**
* @param Array elements
* @param String boundary
* @return String
*/
buildMessage : function(elements, boundary) {
    var CRLF  = "\r\n";
    var parts = [];

    elements.forEach(function(element, index, all) {
       var part = "";
       var type = "TEXT";

       if (element.nodeName.toUpperCase() === "INPUT") {
           type = element.getAttribute("type").toUpperCase();
       }

       if (type === "FILE" && element.files.length > 0) {
           var fieldName = element.name;
           var fileName  = element.files[0].fileName;

           /*
            * Content-Disposition header contains name of the field
            * used to upload the file and also the name of the file as
            * it was on the user's computer.
            */
           part += 'Content-Disposition: form-data; ';
           part += 'name="' + fieldName + '"; ';
           part += 'filename="'+ fileName + '"' + CRLF;

           /*
            * Content-Type header contains the mime-type of the file
            * to send. Although we could build a map of mime-types
            * that match certain file extensions, we'll take the easy
            * approach and send a general binary header:
            *      application/octet-stream
            */
           part += "Content-Type: application/octet-stream";
           part += CRLF + CRLF; // marks end of the headers part

           /*
            * File contents read as binary data, obviously
            */
           part += element.files[0].getAsBinary() + CRLF;
       } else {
           /*
            * In case of non-files fields, Content-Disposition
            * contains only the name of the field holding the data.
            */
           part += 'Content-Disposition: form-data; ';
           part += 'name="' + element.name + '"' + CRLF + CRLF;

           /*
            * Field value
            */
           part += element.value + CRLF;
       }

       parts.push(part);
    });

    var request = "--" + boundary + CRLF;
        request+= parts.join("--" + boundary + CRLF);
        request+= "--" + boundary + "--" + CRLF;

    return request;
}

Although it looks complex, it has a fair amount of comments so that you won't have hard times understanding what it does. It simply iterates over an array of HTML elements and for each such an element constructs a different message depending whether the element is a file upload input or not. It pushes this message into an internal array, which is finally joined using the boundary sent as an argument inside the send() method.

Here follows the source of the elements() getter, used in send():

/**
 * @return Array
 */
get elements() {
var fields = [];

// gather INPUT elements
var inputs = this.form.getElementsByTagName("INPUT");
for (var l=inputs.length, i=0; i
    fields.push(inputs[i]);
}

// gather SELECT elements
var selects = this.form.getElementsByTagName("SELECT");
for (var l=selects.length, i=0; i
    fields.push(selects[i]);
}

return fields;
}

The snippet above grabs all the INPUT and SELECT elements inside the FORM element associated with the Uploader object. These elements are eventually returned into a unified array. There are, however no checks on these elements, like filtering disabled controls. Furthermore, the RFC specifies that a client should send form data in the same order it was rendered in the user agent. For keeping the examples as short as I could, the method above doesn't take care of that, but the code inside the accompanying archive does.

The final piece of code left for presentation is the generateBoundary() method which must return a string unique in the body of our request. For our simple example though, the method below should be just fine:

/**
 * @return String
 */
generateBoundary: function() {
    return "AJAX-----------------------" + (new Date).getTime();
}

The code inside is building a string based on the current timestamp to which some other characters are prepended. I'm using the uppercased word AJAX and some dashes, but this prefix isn't mandatory, the only condition that must be met is that the result of generateBoudary() should not appear anywhere else in out request except for the boundary placeholders.

Finally, the headers property of our object remains like it was in the skeleton. It is there so that you can append additional headers to the request, for example:

var upl = new Uploader(form);
upl.headers["X-Requested-With"] = "XMLHttpRequest";

Save the source of the Uploader object in a file called uploader.js, we'll use it in a few moments.

Putting it all together

Let's now write the final HTML source and save it inside a file called index.html. Aside the markup, the code below introduces some event listeners for the Upload and Preview button:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="imagetoolbar" content="false">
<meta http-equiv="imagetoolbar" content="no">
<link rel="stylesheet" type="text/css" href="css/default.css">
<script type="text/javascript" src="uploader.js"></script>
<script type="text/javascript">
window.addEventListener("load", function() {

    // handle image preview
    var input      = document.getElementById("photo");
    var img        = document.getElementById("img");
    var previewBtn = document.getElementById("preview");
    previewBtn.addEventListener("click", function() {
       img.src = input.files[0].getAsDataURL();
    }, false);

    // handle file upload
    var form      = document.getElementsByTagName("form")[0];
    var uploader  = new Uploader(form);
    var uploadBtn = document.getElementById("upload");

    uploadBtn.addEventListener("click", function() {
       uploader.send();
    }, false);

}, false);

</script>
</head>
<body>

<form action="upload.php" method="post"
 enctype="multipart/form-data" onsubmit="return false;">
<fieldset>
   <legend>Upload photo</legend>
   <label for="image_name">Image name:</label>
   <input type="text" name="image_name" id="image_name"> |
   <label for="image_type">Image type:</label>
   <select name="image_type" id="image_type">
       <option>JPEG</option>
       <option>PNG</option>
       <option>GIF</option>
   </select> |
   <input type="file" name="photo" id="photo">
   <input type="submit" value="Upload" id="upload">
   <input type="submit" value="Preview" id="preview">
   <hr>
   <img src="" alt="image preview" id="img">
</fieldset>
</form>

</body>
</html>

Now create another file, save it as upload.php, and write inside it the code we presented in the server-side section of the tutorial:

<?php

print_r($_FILES);
print_r($_POST);

That's all. You may now test the application, which will hopefully work from the first run. Don't forget to install Firebug to inspect what's happening behind the scenes.

Conclusion

There's probably a lot to be discussed around this new feature Mozilla introduced along with Firefox 3. Some may wonder if it is worth using it. Well, as ever, it depends on what you want to accomplish. You may employ fall back techniques (like the iframe workaround) in order to have support for other browsers, if that is your concern. If you want a fancy UI though, a Flash based uploader may be better. But don't forget, the new API is not all about uploading. You may now read local files and process them right there in the browser. You may resize images, parse XML or do whatever your imagination limits are. In my opinion this is a huge step forward for web development and I'd really like other browser vendors to implement this API as http://www.w3.org/TR/file-upload/ the standards seem to be abandoned. Rich Internet applications would be far more powerful and their responsiveness further increased.

My first contribution to an open source project

2009-01-05T23:10:00.009+02:00

Two weeks ago, while writing some unit tests for one of my projects I wanted to use an XML configuration file in order to bootstrap the PHPUnit testing framework. As you may know, in PHPUnit you may organize your unit tests in test suites, and also give them names. So, for better organizing my tests, I wanted five directories holding five different test suites which I thought could be easily configured inside the phpunit.xml file. Well, apparently there was support for only one test suite and a ticket opened for such an addition to the framework. As a result I hacked a little bit the source code and came up with a simple patch (really, there is nothing fancy about it) so that now the config file accepts multiple test suites.

Thanks to Sebastian Bergmann the patch got accepted and it will be available with PHPUnit 3.4

For many (web) developers out there this might be something really, really trivial and they're right, but this is my first contribution to an open source project and I'm happy about it. Some time ago, reading a blog post of Andrei Maxim (a fellow web developer and citizen) I got inspired and said to myself that I should too contribute some code to an open source project (he wanted a commit though, not a patch). Well, this was my first step. More to come... I hope.

How not to use dates in PHP

2008-12-20T14:35:00.033+02:00

How many times did you find yourself using basic arithmetic operations to make a range of UNIX timestamps, given that you know the ends of the interval? I'm talking about something like this:

<?php

date_default_timezone_set('Europe/Bucharest');

$start = strtotime('01 October 2008');
$end   = strtotime('01 November 2008');

$next = $start;
while ($next <= $end) {
    echo date('Y M d', $next) ,'<br>';
    $next += 60*60*24;
}

If you run the above little script you might be surprised to see that October 26th appears twice, one after the other.

If you're not aware of Daylight Saving Time you may have hard times understanding what's happening behind the scenes and solving the problem. In the above snippet I started the script by specifying that PHP's all date/time functions should use Bucharest's timezone. That means that my date() call in the for loop would know that October 26th, 2008 is officially marked as the end of Daylight Saving Time for Bucharest (as well as whole Europe). In that day 04:00 AM became 03:00 AM, "rewinding" time one hour and passing from EEST to EET.

So how can only one hour duplicate a day? Well, by observing DST, one day in year gets one hour longer, while another day gets one hour shorter. October 26th, 2008 is the day that got one hour longer, counting a total of 25 hours, while our script is adding 24 hours for each iteration. That's why, when the counter is supposed to return a UNIX timestamp for October 27th, 2008 it actually returns the timestamp for October 26, 2008 23:00:00, because now it's one hour behind DST. Here's a modified script to show exactly this transition:

<?php

date_default_timezone_set('Europe/Bucharest');

$start = strtotime('01 October 2008');
$end   = strtotime('01 November 2008');

$next = $start;
while ($next <= $end) {
    echo $next ,' ';
    echo date('Y M d H:i:s', $next) ,'<br>';
    $next += 60*60*24;
}

echo '<hr>';
$hours_in_26 = (strtotime('27 October 2008') - strtotime('26 October 2008'));
$hours_in_26 = $hours_in_26 / 60 / 60;
echo "October 26th, has $hours_in_26 hours when observing DST.";

I've also made a little diagram to highlight the problem. On the left hand side is the way date() function works when we've set a timezone value. On the right hand side is the way our script works, by treating all days as having only 24 hours. The green rectangle is that one hour difference between our script and date(). The red hours is when DST ends.

Now that we know the problem we should fix it and the most simple solution is to change the timezone. Instead of Europe/Bucharest I could have been used GMT and the above script had been worked well:

<?php

date_default_timezone_set('GMT');

Unfortunately, using GMT is not always an option, as you want to display users valid dates for their territories, that is, you want localization or l10n. The other solution, which is better, is to not rely on arithmetic for such calculations. You're better off using mktime() which, as any other date/time function, is DST aware.

<?php

date_default_timezone_set('Europe/Bucharest');

$start = strtotime('01 October 2008');
$end   = strtotime('01 November 2008');

$next = $start;
while ($next <= $end) {
    echo date('Y M d H:i:s', $next) ,'<br>';

    list($month, $day, $year) = explode('-', date('n-j-Y', $next));
    $next = mktime(0, 0, 0, $month, $day + 1, $year);
}

By the way, changing timezone identifier to 'Asia/Jerusalem' would double October 5th, 2008 in the first version of the script. You may find more about these on timeanddate.com.

Article submission to sitepoint.com

2008-12-16T12:15:00.012+02:00

Two days ago I finished what could be my first article for sitepoint.com. I've emailed them the article (actually a tutorial) yesterday in the morning and now I'm wainting for their response. If there's no response it means I failed. Hopefully it won't be so.

I wrote about a pure JavaScript solution for AJAX file uploads. My solution doesn't make use of the iframe workaround or any Flash helper, it's really pure JavaScript. Unfortunately it requires Firefox 3 in order to work. Also, no special configurations on the browser, it should work with default factory settings.

In case sitepoint.com rejects my tutorial I'll post it here, on my blog. The reason is that, in case of acceptance, they require full 90 days exclusivity over the article. You may found more on their dedicated page. I hope though, it will get accepted.

Update: The article got rejected but I have published the article on my blog: Pure JavaScript file upload

PHP Easter eggs

2008-12-09T21:50:00.002+02:00

Here's something I've just found about while Googling a little bit. Some PHP Easter eggs. The funny thing is that you can use this Easter eggs to discover whether a particular website is PHP powered. Like 37signals.com the creators of Ruby on Rails and... at some moment even rubyonrails.org :)
Anyway, it appears the latter have now switched to RoR or turned off expose_php in php.ini, as this would hide the Easter egg away from curious people.

PHP Easter eggs

MVC example from real, biological life

2008-10-20T21:42:00.001+03:00

Lately I've been thinking a lot about software design patterns and software architecture in an attempt of being a better software developer (or just being one). Anyway, to much talk, I want to get to the subject because I think it's very nice.

You've probably heard of the Model-View-Controller pattern which is a big hype nowadays thanks to Ruby on Rails web framework. It's all about separating data access (Model) from data presentation (View) and that's all. You may wonder where's the third part, the Controller. It's in between gluing the two parts together. The controller, while an important aspect of the MVC paradigm, is not as important as the idea of separation data and presentation.

You've also probably read a lot of examples about MVC, involving web application that suddenly have to switch from a certain database vendor to another or output data in multiple formats, like HTML, JSON, PDF, etc. Well, here's a little MVC example that actually lies within your own body.

It's the very human act of expressing ideas, either written or spoken.

When someone is expressing her ideas in speech she uses an MVC system where data is the idea itself (what she thinks) that sits in the Model (our conscience and perception of the surrounding world), the View is the language in which the ideas are presented and the Controller is the sum of biological and associated neuronic structures that let us map these ideas to comprehensible and logical sounds (in a normal human being).

It's true that I exaggerated a little about the limits between the parts of this system and that these are very blurry line that separate them... nevertheless is the idea that matters. If it weren't for this MVC system inside us, speaking foreign languages would be impossible.

P.S. Who?! Me? A nerd?!
P.S.S. I'm not implying that my English view is perfect

Installing Python libraries on Windows

2008-09-04T13:41:00.000+03:00

Whenever you have to install another Python library on a Windows OS is good to do it like this from command line:

cd path/to/library/dir
python setup.py bdist --format=wininst

This will pack all the source into an installer that can be found under:

path/to/library/dir/dist

Using this method you will later be able to go to Control Panel/Add or Remove Programs and uninstall such a library from there.

For other platforms and options see Python documentation on creating built distributions

Assessing Google Chrome

2008-09-02T22:42:00.001+03:00

I have already discovered some bugs and managed to crash two tabs in under 3 minutes when I interrupted for writing this post. There are also some features I miss from Firefox. Details...

Bugs:

It erroneously fills some form fields from a forum I often visit overriding the input's value attribute (at least that's what I was able to see with the built in, à la firebug, inspector, which is good news by the way.)
The whole browser freezed when opening a link from the above mentioned forum that pointed to my weblog home page. I succeded to take back control when killing one process from the Windows task manager, which aparently made two tabs, not one (I killed one process, not tow), to show the sad face of failure.
Opening a 155 page PDF document made iresponsive the whole browser, not just the respective tab as said in the comic book and reduced 4 tab-processes to only one process in the Windows task manager which took the whole browser down when killing it.
After reboot the PDF page still isn't rendered as it should and any interaction with it slows down (to freezing) the whole browser. (At least this blog entry was preserved in the textarea).
There appear to be some bugs with the character encoding support. In Romanian we have special characters like şăîţâ that aren't rendered as they should nor when the enconding is ISO-8859-2 (which I know should be OK for Romanian), nor when I change it to UTF-8. Anyways, the website isn't sending a charset in the HTTP headers (according to LiveHTTPHeaders), on other web sites it is OK.

Missing features:

Middle-click scrolls page :( That's awful for me, a reason not to use a browser.
Iframes used for rich text editing don't have spell checking, whereas textarea elements do.
I can't turn off spell checking on textarea elements.
Maybe not a missing features but I couldn't find it. Where can I choose another engine from my opensearch engines that were imported from Firefox after the installation? (later on) it may be redundant as all the opensearch providers are available for querying inside the address bar.
I'd really like to disable the close buttons on every opened tab.
When opening many tabs (> 20) there's no way to know what site is in which tab, except for the favicon (if there is one) that is being displayed. That is because a tab's width is in inverse ratio with the number of tabs. I tend to like more the scrolling feature of Firefox in such a case (but maybe I'm just spoiled by Firefox). Anyway, they load fine dispite the large number.
It comes with built-in support for Adobe Flash and Adobe PDF but not Quick Time.
At this moment I have 7 folders of bookmarks imported from Firefox. When clicking one, there's a submenu that popups and the bookmars contained can be seen, well, now I expect that hovering another folder will open it automatically without click on it again but it doesn't happen like this, you have to click it again. I think on a Windows OS this is common practice for user interface (not to be forced to click again).
I don't have a history list by the back/forward buttons.
An RSS/Atom reader like in Firefox.
No "Zoom page" tool, only zoom text with CTRL++, CTRL+- and CTRL+0 just like in Firefox.
I can't middle click the back/forward button to open a previous page in new tab.

Good things/features:

The HTML inspector (mentioned above) and JS debugger and console.
Searching through the installation files I discovered some js scripts that deal with the local data store and seemed to be integrated with the Inspector but I couldn't lauch it from the browser.
The source turn links into real links so that I can quickly go to the CSS and JS files of a website.
Mozilla Prism's idea of web pages that could be saved as desktop apps is now to be found in Google Chrome. You can save a shortcut to Gmail, for example, on the desktop, quick launch bar and start menu. Details
It has "View Frame Source" when right clicking on an iframe element.
I like the search capabilities in the address bar (I always wished it in Firefox).
The "bookmark this page" from the address bar is like Firefox's, except it misses tagging.
Incognito mode.
Speed of loading for some of the pages I visited.
Incremental search + it shows how many results it has found until that point + highlighting of matching keywords + F3 does work to jump to next result + ... the place of the search box :).
CTRL+J opens downloads tab.
Detaching tabs in standalone windows.
X/Y resizable textarea element, but the resizer image has a non-transparent upper-left corner.

WTFs:

The installation place. On my system (Windows XP Professional 32bit) it was in: "C:\Documents and Settings\username\Local Settings\Application Data\Google\Chrome\Application\chrome.exe", along with Gears and... GoogleUpdate.

XOR în PHP

2008-09-02T16:01:00.002+03:00

De reţinut:

În PHP, operatorul logic XOR are precendenţă mai mică decât operaţia de asignare (=). Asta înseamnă că trebuiesc folosite paranteze şi pentru o singură operaţie logică XOR:

<?php

$a =  true xor true;
$b = (true xor true);

var_dump($a);
var_dump($b);
var_dump(true xor true);

/* va afişa

bool(true);
bool(false);
bool(false);
*/

PHP: precedenţă operatori