The Coder Zone

Cross browser Leading Zeros with JavaScript

2011-09-07T12:07:00.000+02:00

This is a short entry for further reference

Left padding an integer with zeros was never so easy. Can't believe this ended up working.

function LeadWithZeros(num, pad) {
    return (Array(pad).join('0') + num).slice(-pad);
}

LeadWithZeros(5, 3) === '005';
LeadWithZeros(65, 3) === '065';
LeadWithZeros(120, 3) === '120';

!isset, is_null, empty: The Good, the Bad and the Ugly

2011-03-15T11:51:00.010+01:00

Hi everyone, you programmers trying to grasp the intricacies of PHP. As coders, our raw material is, and will be, information and knowledge. But lack of knowledge does not give us some information, too? Is of this absence that we will discuss today: How to know if we don't know something in PHP. And our main tools are isset, is_null and empty. Want to know more about them? Which one is The Good, The Bad and The Ugly?

The Question

So, our question is not only "what do we know" but, more specifically, "How do our tools behave against different values of a variable?". Let's talk about our "falsy values" and then check them with our tools:

undefined: There's no var in scope with that name or it was removed with unset. The end. Finito. Capput. That's not a value itself, but it's a possible state of a variable.
null: Our beloved friend null is a valid value, but in this state the variable is considered to be not setted.
false: The falsy value par excelence. PHP has a native boolean type and it's a valid state.
zero: The integer value 0 is also a common false value for any programming language.
empty string: A zero-length string, like ''.
zero string: A string containing only the zero character, like this: '0'.
empty array: The simplest array of all, an array with no elements, like array().
empty object: An object with no members defined, like (object)array() or new StdClass.

The Code

In order to test how our tools behave with falsy values, I coded the following snippet:

function bool2str($bool)
{
    return $bool ? 'true' : 'false';
}

// Detects command line
define('IS_CLI', php_sapi_name() === 'cli');

// Define initial state
unset($undef);
$null    = null;
$false   = false;
$zero    = 0;
$empty   = '';
$zeroStr = '0';
$array   = array();
$object  = (object)$array;

// Show PHP Version
echo (IS_CLI ? '' : '<pre>'),
     'PHP Version: ', phpversion(), PHP_EOL;

// !isset() tests
echo '!isset($undef)   : ', bool2str(!isset($undef)),   PHP_EOL,
     '!isset($null)    : ', bool2str(!isset($null)),    PHP_EOL,
     '!isset($false)   : ', bool2str(!isset($false)),   PHP_EOL,
     '!isset($zero)    : ', bool2str(!isset($zero)),    PHP_EOL,
     '!isset($empty)   : ', bool2str(!isset($empty)),   PHP_EOL,
     '!isset($zeroStr) : ', bool2str(!isset($zeroStr)), PHP_EOL,
     '!isset($array)   : ', bool2str(!isset($array)),   PHP_EOL,
     '!isset($object)  : ', bool2str(!isset($object)),  PHP_EOL,
     PHP_EOL;

// is_null() tests
echo 'is_null($undef)   : ', bool2str(is_null($undef)),   PHP_EOL,
     'is_null($null)    : ', bool2str(is_null($null)),    PHP_EOL,
     'is_null($false)   : ', bool2str(is_null($false)),   PHP_EOL,
     'is_null($zero)    : ', bool2str(is_null($zero)),    PHP_EOL,
     'is_null($empty)   : ', bool2str(is_null($empty)),   PHP_EOL,
     'is_null($zeroStr) : ', bool2str(is_null($zeroStr)), PHP_EOL,
     'is_null($array)   : ', bool2str(is_null($array)),   PHP_EOL,
     'is_null($object)  : ', bool2str(is_null($object)),  PHP_EOL,
     PHP_EOL;

// empty() tests
echo 'empty($undef)   : ', bool2str(empty($undef)),   PHP_EOL,
     'empty($null)    : ', bool2str(empty($null)),    PHP_EOL,
     'empty($false)   : ', bool2str(empty($false)),   PHP_EOL,
     'empty($zero)    : ', bool2str(empty($zero)),    PHP_EOL,
     'empty($empty)   : ', bool2str(empty($empty)),   PHP_EOL,
     'empty($zeroStr) : ', bool2str(empty($zeroStr)), PHP_EOL,
     'empty($array)   : ', bool2str(empty($array)),   PHP_EOL,
     'empty($object)  : ', bool2str(empty($object)),  PHP_EOL,
     PHP_EOL;

echo (IS_CLI ? '' : '</pre>');

Note how I've used !isset in order to maintain coherence with is_null and empty returning false for setted values. Let's see the results!

The Good: `!isset`

!isset
state	result	notes
undefined	✔
null	✔	As expected
false	✘
zero	✘
empty string	✘
zero string	✘
empty array	✘
empty object	✘

Our best friend in the "what we don't know" problem is isset without doubt. Use it whenever you need to check for existence of a variable. Since it's a construction of the language, it doesn't choke on the non-existent variable. When the variable exists, and it's not null, will return true.

isset does not work on expressions, so isset(functionCall()) will always throw a parser error.

The Bad: `is_null`

is_null
state	result	notes
undefined	✔	Throws a notice, since `is_null` is a function!
null	✔
false	✘
zero	✘
empty string	✘
zero string	✘
empty array	✘
empty object	✘

is_null is great for doing one thing, and it should be clear reading it's name: checks if a variable value is null. But if the variable isn't set, there is no value to check for!

Use it wisely, but only when you know the variable exists.

The Ugly: `empty`

empty
state	result	notes
undefined	✔
null	✔
false	✔
zero	✔	This is somehow we can expect…
empty string	✔
zero string	✔	Surprise! String-to-number attacks!
empty array	✔
empty object	✘	On PHP < 5, returns true

empty is a language construct too smart for me. Like isset, it only works on variable names, so empty(0) does not work. It can detect undefined ones, but it also returns true for other values, even doing things like automatic conversion between types, and inconsistencies. Like the following code:

$double = 0.0;
echo bool2str(empty($double)); // Prints TRUE!!
$double = '0.0';
echo bool2str(empty($double)); // Prints false

Conclusion

isset is your best bet to check for variable existence. If completeness is a must, I use isset($variable) && !is_null($variable), but it's a bit tricky. I also try to avoid magic, so I only use empty when I truly need it's whole range of smart cumbersomeness.

Hope this helps someone not to make the mistakes I did in my past.

And always remember: When you have to shoot, shoot. Don't talk.

Exchanging currencies with Zend_Currency_CurrencyInterface

2011-03-04T09:55:00.010+01:00

As many companies offering online services do, we handle multiple currencies. This often involves querying external services to know the real value of the currency exchange. Previously, this logic was scattered all over the code, even copy-pasted in multiple files, and is pretty hard to mantain, let alone to test.

So, in my work detecting and extracting patterns from old spaghetti code, I came with the following solution: A Service layer.

Even spaghetti code talks by itself (maybe not too loud), and this code was talking about three things: select a currency, ask the webservice for the exchange rate, and cache the response. For the sake of testing and ease of use, I decided to use a Decorator pattern.

Test first

First I made a test, to show how the final API should look like:

$amount    = 19.95;
$rate      = 2.0;
$currency  = new Currency($amount, Currency::EUR);
$converter = new Exchange\ExchangeMockup;
$converter->setRate(Currency::EUR, Currency::USD, $rate); // Only for testing purposes
$dollars   = $currency->exchangeTo(Currency::USD, $converter);

assert($dollars instanceof Currency);
assert($dollars->getCurrency() === Currency::USD);
assert($dollars->getAmount() === $amount * $rate);

Currency

As well as existing libraries worked, like Zend_Currency, they do too much for me, for now. I only want to pack amount and currency in a single class, so Currency came to life.

/**
* @filename Payment/Currency.php
*/
namespace Payment;

class Currency
{
    const EUR = 'EUR';
    const USD = 'USD';
    const GBP = 'GBP';

    public function __construct($amount = 0, $currency = self::EUR)
    {
        $this->setAmount($amount)
             ->setCurrency($currency);
    }

    private $amount;

    public function getAmount()
    {
        return $this->amount;
    }

    public function setAmount($amount)
    {
        $this->amount = $amount;
        return $this;
    }

    private $currency;

    public function getCurrency()
    {
        return $this->currency;
    }

    public function setCurrency($currency)
    {
        $this->currency = $currency;
        return $this;
    }

    public function convertTo($newCurrency, $service)
    {
        // Not implemented yet. See below
    }
}

Ok, this is a no-brainer, quite simple POD. It's only work is to pack amount and currency in the same class. Is in cases like this that I miss my C++ enums so much. Using class constants is as far we can go. Note the use of fluent interface in the setters: It's a habit I have, and I like it. :P

ExchangeService interface

In order to allow decoration of our classes, it's a good practice to declare a common interface for all of them. That's where ExchangeService enters the scene:

/**
* @filename ExchangeService.php
*/
namespace Payment;

interface ExchangeService
{
    /**
     * Current exchange rate between $from and $to
     *
     * @param string $from Short name of the base currency
     * @param string $to   Short name of the currency to exchange to
     */
    public function getRate($from, $to);
}

In fact this is a copy from Zend_Currency_CurrencyInterface, so the file contents could become this:

/**
* @filename ExchangeService.php
*/
namespace Payment;

interface ExchangeService extends \Zend_Currency_CurrencyInterface
{
}

Or even inherit directly from Zend_Currency_CurrencyInterface.

Now it's time to go with the real implementation of the service.

Webservicex.NET Exchange Service

The old implementation made calls to this webservice, and, since I could not find any other easy and free webservices, I stick with it. Its usage is quite simple, just make a GET request to this url: http://www.webservicex.net/CurrencyConvertor.asmx/ConversionRate?FromCurrency=GBP&toCurrency=EUR and you recieve an XML with the result. Easy as pie, show now the code:

/**
* Payment/Exchange/WebserviceX.php
*/
namespace Payment\Exchange;

use \Zend_Http_Client                   as HttpClient;
use \Zend_Http_Client_Adapter_Interface as HttpAdapter;
use \Payment\ExchangeService            as ExchangeService;

class WebserviceX implements ExchangeService
{
    const URI = 'http://www.webservicex.net/CurrencyConvertor.asmx/ConversionRate';

    private $adapter;

    public function __construct(HttpAdapter $adapter)
    {
        $this->adapter = $adapter;
    }

    public function getRate($from, $to)
    {
        $adapter = $this->adapter;
        $client = new HttpClient(self::URI, compact('adapter'));
        $client->setParameterGet(array(
            'FromCurrency' => $from,
            'toCurrency'   => $to,
        ));
        $response = $client->request();
        $body = $response->getBody();
        $xml = new \SimpleXMLElement($body);
        return (string) $xml;
    }
}

I'm using Zend_HTTP_Client to make the request and SimpleXML to parse the response. The constructor expects a Zend_HTTP_Client_Adapter in order to inject a mock adapter like Zend_HTTP_Client_Adapter_Test for testing purposes.

This class works all alone, but it makes a request to the webservice every time. I thought of adding a cache in the class, but… what's the point? If I ever want to change to another webservice, I should add the cache there too. So, I'm gonna decorate this class. With a cache.

ArrayCacheDecorator

To allow this object to replace WebserviceX, we must implement the same ExchangeService interface. Then, redirect to the underlying object only if the request is not in the array cache.

/**
* @filename ArrayCacheDecorator
*/
namespace Payment\Exchange;

use Payment\ExchangeService;

class ArrayCacheDecorator implements ExchangeService
{
    public function __construct(ExchangeService $service)
    {
        $this->setService($service);
    }

    private $service;

    public function getService()
    {
        return $this->service;
    }

    public function setService(ExchangeService $service)
    {
        $this->service = $service;
        return $this;
    }

    private $rates = array();

    public function getRate($from, $to)
    {
        $rate = &$this->rates["{$from}_{$to}"];
        if (isset($rate)) {
            return $rate;
        }

        $inversedRate = &$this->rates["{$to}_{$from}"];
        if (isset($inversedRate)) {
            return 1.0 / $rate;
        }

        $rate = $this->service->getRate($from, $to);
        return $rate;
    }
}

This layer is quite simple too. It stores a rates array with every conversion rate requested. If the rate exists, it's returned. If not, ask the underlying service and save the result in the array. I added a simple inverse rate to speed requests of B->A when A->B is in the cache, making the assumption that rate_AtoB = 1.0 / rate_BtoA

Now we can stack our services, decorate one with the other, like this:

$adapter = new \Zend_Http_Client_Adapter_Curl;
$service = new Payment\Exchange\WebserviceX($adapter);
$service = new Payment\Exchange\ArrayCacheDecorator($service);

// Makes a request to WebserviceX
$rate1   = $service->getRate(Currency::USD, Currency::EUR);

// Avoids WebserviceX by ArrayCacheDecorator
$rate2   = $service->getRate(Currency::USD, Currency::EUR);

// Avoids WebserviceX by ArrayCacheDecorator inverse rate feature
$inverse = $service->getRate(Currency::EUR, Currency::USD);

Good! That's a real step towards speeding the process! But there's still something wrong: What if the webservice is down? What if there's a timeout? We need a fallback approach, another level of cache, either disk, database, memcache or whatever…

ZendCacheDecorator

I created then a decorator to add the greatness of Zend_Cache into the system.

/**
* @filename Paymeny/Exchange/ZendCacheDecorator.php
*/
namespace Payment\Exchange;

use \Zend_Cache_Core         as Cache;
use \Payment\ExchangeService as ExchangeService;

class ZendCacheDecorator implements ExchangeService
{
    public function __construct(ExchangeService $service, Cache $cache)
    {
        $this->setService($service)
             ->setCache($cache);
    }

    private $service;

    public function setService(ExchangeService $service)
    {
        $this->service = $service;
        return $this;
    }

    public function getService()
    {
        return $this->service;
    }

    private $cache;

    public function setCache(Cache $cache)
    {
        $this->cache = $cache;
        return $this;
    }

    public function getCache()
    {
        return $this->cache;
    }

    public function getRate($from, $to)
    {
        $id     = "{$from}_{$to}";
        $cache  = $this->getCache();
        $result = $cache->load($id);

        if ($result === false) {
            try {
                $result = $this->getService()
                               ->getRate($from, $to);

            } catch(\Exception $e) {
                // Result is false yet, so do nothing
            }

            if ($result === false) {
                $result = $cache->test($id) ? $cache->load($id, false) : false;
            } else {
                $cache->save($result);
            }
        }

        return $result;
    }
}

This decorator is in no way harder than the last one. It requires a Zend_Cache_Core instance that does The Hard Work™. First checks for a valid cache entry and, if it is found, it's returned. Otherwise, it gets the rate from the underlying layer. When no exceptions occur and the next layer returns a valid value, it is saved in the cache for further use.

In case of error, the result is the latest value stored on the cache, whether it's stale or not, providing a fallback for operations that, otherwise, will fail (timeout).

exchangeTo($currency, $service)

Now it's time to implement Currency::exchangeTo. Note the use of ExchangeService, decoupling Currency class from real implementations of the interface. Also, a new Currency object is returned on conversion.

/**
* @filename Payment/Currency.php
*/
class Currency
{
    ...

    public function exchangeTo($newCurrency, ExchangeService $service)
    {
        $currentCurrency = $this->getCurrency();

        // No need to convert between same currency
        if ($newCurrency === $currentCurrency) {
            return $this;
        }

        $rate = $service->getRate($currentCurrency, $newCurrency);
        $amount = $this->getAmount() * $rate;
        return new Currency($amount, $newCurrency);
    }

    ...
}

ExchangeMockup

In order to avoid calls to the real exchange services when testing our code using Currency, we can create a mockup class. This class replaces the real call to the service with preconfigured results specified by the user. Something like this:

$service = new Payment\Exchange\ExchangeMockup;
$service->setRate(Currency::EUR, Currency::USD, 2.0);
$service->setRate(Currency::EUR, Currency::GBP, 0.5);

assert($service->getRate(Currency::EUR, Currency::USD) === 2.0);
assert($service->getRate(Currency::EUR, Currency::GBP) === 0.5);

The class is pretty straightforward and is left as an exercise for the reader.

Bonus track

As a side bonus, this services can be used with Zend_Currency::setService too, and with your own currency classes, if you want.

How to detect if a class implements an Interface?

2011-01-19T09:45:00.012+01:00

I'm in the real need to know if, given a string className or object, it implements a particular interface. I'm specially interested in the string className part.

During the search, many seemingly valid options appeared: instanceof, is_subclass_of, is_a, ReflectionClass::ImplementsInterface, class_implements… Which one to use? Let's do some testing!

The test

I coded the following test to determine the behavior of different options:

interface MyInterface { }

class NotInterfaced { }

class Interfaced implements MyInterface { }

class InterfacedDerived extends Interfaced { }

function dotest($functionName, $result)
{
    echo ($result ? '☑' : '☒'), ' ', $functionName, PHP_EOL;
}

function test($object, array $functions)
{
    $className = get_class($object);
    echo "{$className} implements MyInterface?", PHP_EOL;
    foreach ($functions as $functionName => $function) {
        dotest("string {$functionName}", $function($className));
        dotest("object {$functionName}", $function($object));
    }
    echo PHP_EOL;
}

$functions = array(
    'instanceof' => function($type) {
        return $type instanceof MyInterface;
    },
    'is_a' => function($type) {
        return is_a($type, 'MyInterface');
    },
    'is_subclass_of' => function($type) {
        return is_subclass_of($type, 'MyInterface');
    },
    'class_implements' => function($type) {
        return in_array('MyInterface', class_implements($type));
    },
    'ReflectionClass::ImplementsInterface' => function($type) {
        $rc = new ReflectionClass($type);
        return $rc->implementsInterface('MyInterface');
    },
);

test(new NotInterfaced,     $functions);
test(new Interfaced,        $functions);
test(new InterfacedDerived, $functions);

This checks every option with three different classes, using both the classname and a real instance of the class. And now, the results:

NotInterfaced

NotInterfaced implements MyInterface?
☒ string instanceof
☒ object instanceof
☒ string is_a
☒ object is_a
☒ string is_subclass_of
☒ object is_subclass_of
☒ string class_implements
☒ object class_implements
☒ string ReflectionClass::ImplementsInterface
☒ object ReflectionClass::ImplementsInterface

NotInterfaced is clearly an edge case to check if the tests are doing fine. The results are all correct, since the class doesn't implement the MyInterface interface.

Interfaced

Interfaced implements MyInterface?
☒ string instanceof
☑ object instanceof
☒ string is_a
☑ object is_a
☒ string is_subclass_of
☒ object is_subclass_of
☑ string class_implements
☑ object class_implements
☑ string ReflectionClass::ImplementsInterface
☑ object ReflectionClass::ImplementsInterface

Here we can extract some info. All methods worked well with objects, except for is_subclass_of. Since it neither works with strings, at this point, I thought is_subclass_of was not a valid option at all.

The other bit of info is that only class_implements and ReflectionClass::ImplementsInterface worked well with both string classNames and objects. Fine, as long as they're as fast as any of the other options.

InterfacedDerived

InterfacedDerived implements MyInterface?
☒ string instanceof
☑ object instanceof
☒ string is_a
☑ object is_a
☑ string is_subclass_of
☑ object is_subclass_of
☑ string class_implements
☑ object class_implements
☑ string ReflectionClass::ImplementsInterface
☑ object ReflectionClass::ImplementsInterface

Some more food for thought… And a surprise. Now, suddenly, is_subclass_of worked well, not only for object parameters, but for string classNames too. A further check to it's name reveals the answer: InterfacedDerived is a subclass of Interfaced which, in turn, implements MyInterface. So we can say the behavior was correct. My intuition, wasn't.

As with previous test, instanceof and is_a give good results for checking objects, as good as class_implements and ReflectionClass::ImplementsInterface for string classNames do.

In Conclusion

To check if an object implements a given interface, you can choose between:

instanceof
is_a
class_implements
ReflectionClass::ImplementsInterface

To check if a class implements a given interface, given only its class name, you should choose between:

class_implements
ReflectionClass::ImplementsInterface

Which are your choices? Know of any other way to do it?

The Coder Zone Stats 2010

2010-12-17T19:59:00.003+01:00

It's a fact: 2010 comes to an end in 2 weeks, and it's time for me to take stock of the year, get some numbers, think about them… As I did last year.

This year, I must admit it: I've been very very lazy. Even more than I use to be. So, the numbers of this year will not be very representative of the whole of the page. This ones are only for the posts of this year.

The 5 entries I posted in 2010 are contained in 16 categories. 12 of them were new.
Two old posts remain in draft status, pending to be edited, polished, and published. The same two of 2009.
The number of visitors to date are 2.633, from which 2.333 where unique.
Visitors printed 3.401 pages, most using Firefox (59'04%)
Visits from USA raised to nearly 29% (759), surpassing it's three followers combined, UK (184), Germany (167) and Spain (152), from a whole of 93 countries.
67% of the visitors run Windows. Mac (21%) and Linux (9%) are far away. Come on, Linux users!
Still there were 37 users of IE6. We're on 2010… Please, let it go! Gladly, no users were harmed this year with IE5.5
The most visited page is jQuerify bookmarklet (1.026 views), followed by the CSS Refresh bookmarklet (567 views)
The most visited post created this year was Safe RecursiveIterator with a humble 25 prints.
March 26 was the day with the most pageviews (43)
Nearly 58% of the traffic came from Google. Bing send 7 visits all over the year. Great! Thank you, Bing…
41 visits came from the following search in Google: "clearfix content borders doesn't work in ie". So concise!

Compared with those of 2009, this numbers could be seen positively. Well, in fact, the blog began in July of 2009, so the comparation is not fair at all. Also, the time I spent on the blog is not the same (5 entries in a year… counting this one!). So, balancing this, the only thing that came to mind is: From now on, I'll work harder.

Thank you all for paying me a visit. Come again soon!

What my htaccess looks like in Zend Framework

2010-12-16T11:08:00.001+01:00

While coding under Zend Framework there's a standard for what htaccess files should look like. Using mod_rewrite every request is checked against the filesystem for existance, and then served. If it does not exists, the control passes to index.php who starts the Zend Application.

Since, even nowadays, every disk access is paid in valuable time, I made my own htaccess, optimized for disk avoidance whenever possible. After all, it's only a convention to follow, isn't it?

This is the common htaccess as seen in a vast majority of Zend Framework applications (also seen here):

RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^.*$ /index.php [NC,L]

mod_rewrite is not rocket surgery, but it's as close as one could get. This rules are checked for every request (^.*$)

My daily htaccess is as follows:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule \.\w{2,4}$ - [NC,L]
RewriteRule  . index.php [NC,L]

In fact it's pretty simple: Only requests ending in dot and 2 to 4 letters should be checked against the filesystem. Serve the file if they match and pass to index.php in any other case.

Simplest Credit Card Validator

2010-10-26T10:39:00.008+02:00

Searching for a simple credit card validation algorithm? The Luhn algorithm is a simple checksum that validates most identification numbers, mainly used in credit card ones. It's implementation is quite simple. Need one? Just come along!

This algorithm, written by IBM scientist Hans Peter Luhn in the early 50's, works at the digit level. Every even position (from right to left) doubles it's value, then a modulo 9 is applied to them. Finally, all the digits are added together. If the result modulo 10 equals 0, the initial number is correct.

Our first approach:

function checkCardNumber($cardNumber)
{
    $sum = 0;
    $even = true;
    for ($i = strlen($cardNumber) - 1; $i >= 0; --$i, $even = !$even) {
        $n = $cardNumber[$i];
        if ($even) {
            $n = ($n * 2) % 9;
        }
        $sum += $n;
    }
    return $sum % 10 === 0;
}

Not bad, uh? IMHO, even better than the one on wikipedia :)

But even in simple things like this little one, there's some room for improvement. Let's have a look at the ($n * 2) % 9 table of results:

0	1	2	3	4	5	6	7	8	9
0	2	4	6	8	1	3	5	7	9

As the next step is to calc module 10, we can modify the previous table adding 10 anytime we want and this will not change the results. Have a look to the next table, where I added 10 to every digit greater than 4:

0	1	2	3	4	5	6	7	8	9
0	2	4	6	8	11	13	15	17	19

This table can be seen as the next one:

0	1	2	3	4	5	6	7	8	9
(2*0)	(2*1)	(2*2)	(2*3)	(2*4)	(2*5)+1	(2*6)+1	(2*7)+1	(2*8)+1	(2*9)+1

So every even digit can be replaced by (2 * $n) + ($n > 4). As every odd digit maintains it's value, the final expression is $n + ($odd ? $n + ($n > 4) : 0). Now the code:

function checkCardNumber($cardNumber)
{
    $sum  = 0;
    $even = false;
    for ($i = strlen($cardNumber) - 1; $i >= 0; --$i, $even = !$even) {
        $n    = $cardNumber[$i];
        $sum += $n + ($even ? $n + ($n > 4) : 0);
    }
    return $sum % 10 === 0;
}

The compressed code even fits in a tweet!

for($i=strlen($c)-1,$e=$s=0;$i>=0;--$i,$e=!$e){$n=$c[$i];$s+=$n+($e?$n+($n>4):0);}return $s%10===0;

Safe RecursiveDirectoryIterator

2010-09-21T11:27:00.007+02:00

I love SPL... so simple, so powerful, so flexible.

RecursiveDirectoryIterator was having problems while scanning a directory and threw me some nice errors on permissions, so I coded the snippet below...

class SafeRecursiveDirectoryIterator extends RecursiveFilterIterator
{
    public function __construct(RecursiveDirectoryIterator $iterator)
    {
        parent::__construct($iterator);
    }

    public function accept()
    {
        $it       = $this->getInnerIterator();
        $dot      = $it->isDot();
        $readable = $it->isReadable();
        $hidden   = substr($it->getFilename(), 0, 1) === '.';
        return !$dot && $readable && !$hidden;
    }
}

Renovarse o morir

2010-01-14T08:55:00.006+01:00

Poner puertas al campo es algo que todos los gobiernos han intentado, sea cual sea el color que enarbolen, y todo es gracias a los hombres tras la cortina, que parecen hacer y deshacer a su antojo.

Y es por eso, y a raiz de la polémica Ley de Economía Sostenible, que nace la plataforma Red-SOStenible, bajo el lema A partir de hoy, Red y Libertad, y con ellos su campaña Internet NO será otra tele. Sus objetivos son claros: Detener dicha ley mediante el diálogo con los representantes nacionales y la promoción de acciones ciudadanas.

Es difícil de creer pero, a estas alturas, hay muchísima gente que aún no se da cuenta del grave problema de libertades que hay en nuestro país en lo que respecta a las nuevas tecnologías.

Y así, como donde empiezan las libertades de uno, terminan las de otro, se nos insulta públicamente tachándonos de "piratas" mientras, por la trastienda, nos están cobrando cánones a cascoporro. Muy bonito, señores, muy bonito. Y todo por algo que es, demostrado en los tribunales, absolutamente legal.

En fin, el problema inicial son las industrias que pretenden mantener su cuota de mercado a cambio de nada, continuando su arcano modelo de mercado. Las discográficas ya hace tiempo que se resisten, pero con el mercado de eReaders en expansión, pronto se añadirán también las editoriales.

Señores que quieren y/o necesitan vivir económicamente del pasado:
Aplíquense el dicho, Renovarse o morir. No vamos a quedarnos de brazos cruzados.

Happy New Year 2010!

2009-12-31T20:01:00.004+01:00

May the 2010 year bring you happiness and joy. And may all your dreams come true, like IE dissapearing from the face of the Net. This would be nice...

PNG study with CSS Sprites

2009-12-13T12:03:00.008+01:00

While writing my first CSS Sprite article, I created a simple, in no way efficient, sprite generator. Last week I needed to show some numbers to the project manager to convince him the sprite technique is worth using, so I modified a bit the program to arrange the icons in different layouts and show the size savings.

Want to know with which layout I improved the file size by 78.6%?

Initial setup

For this example I've used a subset of 59 icons from the excelent Vaga icon set. The application loads and places them in different arrangements, sending the results to the browser using a data URI. Next to every sprite its size in bytes is shown, making it easier to choose the optimum one. In the end, I send the files to a PNG compressor to achieve a result even smaller.

Imagick

Imagemagick is a powerful set of command-line programs for image processing. There are interfaces for use it on nearly every programming language and, of course, there's one for our beloved PHP.

I've used the PECL Imagick extension for this example. Let's have a look at some code for loading:

$img = new Imagick('fileName');

Piece of cake, isn't it? It works with nearly any format you name, even PSD.

You can add more images to an Imagick object, like layers in any design application, with the addImage method.

$img->addImage('fileName');

The Imagick object implements the composite pattern, so every Imagick object is like a tree of image nodes. Think of it like layers on Photoshop, e.g. You can add one on top of another and, then, combine them, but with all the flexibility an API can offer.

// This is our well-known option in Photoshop
$img->flattenImages();
...
//Creates a new image containing all the images, side by side (row)
$combined = $img->appendImages(false);
...
// The same as below, but stacking the images (column)
$combined = $img->appendImages(true);

There's another function to distribute all images in a Imagick within a grid, but I can't find the way to hold transparency back. In the case you want to play with it the function is this:

$im->montageImage(ImagickDraw $draw, $tile, $thumbnail, $mode, $frame);
// The nearest I came is the next one (for a 5 columns sprite with a 1 pixel separation in between)
$montage = $montage = $im->montageImage(new ImagickDraw(), '5x0+0+0', '+1+1', Imagick::MONTAGEMODE_UNFRAME, 0);

With a combination of appendImage() and a couple of loops, I simulated the desired behaviour.

The result iconset

I chose 59 as the number of icons because its condition of prime number. The result, as I've tested later, is the same with a perfect square like 64 or a number with multiple divisors like 60. Here you have the complete list generated for 59 icons:

58 columns / 10.954 bytes
A 8x8 square sprite / 10.086 bytes
4 rows / 10.171 bytes
4 columns / 9.979 bytes
2 rows / 10.344 bytes
2 columns / 9896 bytes
1 row / 9.839 bytes
1 column / 9.384 bytes

So we have a winner! Stacking all the icons one on top of another achieves the greatest saving. The overall size of the icons is 41.616 bytes, so the saving is 77.45%!

punyPNG

"You said 78.6%, you liar!" I heard you say. Wow, 77% of saving is quite impressive and, best of all, now the browser only needs to do one request, not 59. But yes, there's room yet for improvement and there is when punyPNG enters the scene.

punyPNG is a free image optimizer service. It can't be easier. You upload the images you want to optimize and, in seconds, you can download back optimized. Have a look at the results for all the previous files here.

The winner is...

I tried to optimize all the results in case any of the other images achieved a better optimization, but, nevertheless, the smallest is the one row sprite image. So, stacking all your icons (if they're the same width) is the way to go in order to have the smallest size. Always remember that, due to Opera and Safari issues with sprites, you shouldn't stack sprites for more than 2042 pixels in a single direction, so be cautious!

Problemas y números

2009-12-12T17:21:00.011+01:00

Inicié este blog hará cosa de 9 meses. No con un deseo comercial ni para obtener visitas a cascoporro, si no como terapia. Mi pretensión era la de practicar mi inglés mientras compartía los problemas que me iba encontrando en mis andaduras con la web. Pero está claro que algo falla en ese enfoque: Si ya es complejo mantener un blog en un idioma que es natural para uno mismo, más complicado es hacerlo en una lengua distinta.

¿Debería seguir, como hasta ahora, publicando en inglés? ¿O quizá ahorrarme molestias y expresarme en mi propia lengua?

El experimento

Como comentaba antes, este blog empezó como un experimento, como una manera de desahogarme de largas horas programando. Para eso, pensé en hacerlo utilizando el lenguaje de la red, que, no podemos negarlo, no es otro que el inglés. Esperaba así llegar a una mayor audiencia, poder ayudar a más gente que, como yo, se encontrase, ahora o en un futuro, con esos mismos problemas.

Me gusta pensar que no soy un absoluto desconocedor del inglés, pues leo a diario artículos en internet, libros digitales sobre programación y diseño... La pronunciación es algo en que no tengo problema tampoco. Sin embargo, es a la hora de construir, de ser yo el origen de la información, cuando la cosa se vuelve compleja.

La Cruda Realidad (™)

Empecé a postear con ilusión, pero finalmente me di de bruces con la verdad. No soy una persona muy constante, así que comencé a descuidar la puntualidad a la hora de escribir. Cada vez me daba más pereza, sobre todo por ser en inglés. Además, está el diseño de la página, que no es que sea el mejor, y cada intento por mejorarlo no ha dado más que dolores de cabeza. La falta absoluta de comentarios también me desmoralizó un poco, debo decir.

Pronto, además, me vi envuelto en la guerra por el tráfico. En mi entorno más cercano no es que haya muchos fanáticos de los temas a que me dedico, así que la "promoción" se dificultó. Etiquetar bien los posts, utilizar las palabras adecuadas, visitar otros blogs de temática similar, abrir cuenta de Twitter... Todo cuenta para conseguir visitas. Y esa no era la intención inicial, así que me empecé a ver como un "esclavo" de mi propio blog, sin apenas haber empezado.

Por suerte, todos esos movimientos me han estado abriendo puertas y acceso a más y mejor información. Gracias a blogs tanto españoles como extranjeros, la mayoría de los cuales podéis encontrar aquí en el lateral, mi mente ya no da abasto por intentar dar cabida a todo ese conocimiento.

La Pregunta Definitiva

Avanzo ya que la respuesta no es 42. La pregunta es ¿Qué hago con mi blog?

Hay varias opciones:

Escribir en castellano: Esto haría que el proceso de redacción fuese más fácil, con lo que quizá aumente mi ritmo de publicaciones (Digo "quizá" porque soy muy gandul, como todo buen programador debe ser). En contra, la gente no hispano-hablante no tendría fácil acceso a la información. Aún usando la traducción automática de Google los resultados son pésimos.
Escribir en ambos idiomas: Bastante trabajo me supone escribir en inglés, que solo me faltaría eso. Es cierto que escribir en castellano y luego traducir a lo bruto al inglés facilitaría las cosas, pero eso no sería mucho mejor que usar el traductor automático de Google. Hacer una traducción "fiel" al original podría llevar bastante tiempo. Además, no sé si Blogger es capaz de asociar diferentes idiomas a cada post, así que me veo abriendo nuevo blog en castellano.
Seguir escribiendo solo en inglés: Quizá lo mejor sería quitarme la pereza de encima y seguir tal como estaba. Quiero decir, el nivel de inglés del usuario final es bastante bueno, incluso entre los españoles, así pues... ¿por qué molestarse en cambiar?
Dedicarme al parchís: Es otra opción, aunque me gustaría descartarla. Al fin y al cabo, siempre puedo olvidarme del blog y volver más adelante, con más ánimos.

Despedida ¿y cierre?

Voy cerrando el post, mientras le doy vueltas al tema, con algunos números de estos nueve meses de periplo, según el señor Google Analytics.

Los 16 posts de este blog están repartidos en 25 categorías.
Aún quedan 2 posts más pendientes en el tintero. Y espero que no sean los últimos
El número de visitas totales a fecha de hoy es de 1.570, de las cuales 1.315 fueron únicas.
Los visitantes vieron un total de 2.049 páginas en total y, la mayoría, utiliza Firefox (65'99%)
Hay casi tantas visitas desde EEUU (388) como desde Japón (371) y entre los dos suman casi la mitad de las visitas (48'34%) Desde España han llegado 73 visitas. La lista de países ocuparía 78 lineas.
El 66% de los visitantes utilizan Windows, seguido por un 25% de usuarios de Mac. Apenas somos un 7% de usuarios de Linux.
Aún hay en el mundo, al menos, 43 usuarios de IE6. Y hay un pobre desgraciado al que aún obligan a usar IE5.5
La página más visitada es la del bookmarklet CSS Refresh (826 visitas), seguida por jQuerify
El día con más visitas fue el 5 de Agosto (237 visitas) gracias a un enlace desde PHP Spot al CSS Refresh.
Otro día con muchas visitas fue el 31 de Julio (117 visitas) gracias al efecto twitter (que luego desencadenaría la avalancha del día 5 de Agosto)
Un 38% del tráfico viene desde el buscador Google. Por lo visto posiciona muy bien en las siguientes búsquedas: "css refresh", "jquery bookmarklet", "jquery clearfix", "refresh css", "clearing floats menu", "css float left menu clear fix", "x-forwarded-for header"

Reset your CSS

2009-11-25T20:30:00.001+01:00

Ever wanted a website that looks the same in all browsers? Tired of fighting slimy monsters while searching for excellance? Do these differences in UL padding make your head explode? So it's time for you to apply some CSS Reset Magic.

When it relates to CSS reset, there's a bunch of literature, do's and don't's, faqs and howtos, so this one won't take us too long.

The problem

There are more styles applied in a website than those you define in your CSS: The default CSS. Every browser has its own defaults, varying between brands and even between versions of a browser. So, following the unordered list example above, Firefox renders this, by default, as ul { margin-left:0; padding-left:40px; }. Instead, Internet Explorer uses ul { margin-left:2.5em; padding-left:0; }, resulting in some minor differences that builds up, whether you choose one or the other.

The solution

Unlike math problems, CSS questions have more than one answer. "CSS Reset" is not a single static solution, but a pattern. The intention is to add a CSS sheet to our website which will replace the default styles, no matter what they are.

This often involves clearing all margins and paddings, adjusting line-heights and font-sizes, setting borders and outlines, for every possible HTML element. Another approach is to define this styles to a set of commonly used values, whether they are given by the W3C or the ones used on Firefox.

Then, you build your CSS by modifying the reset file, knowing that no obstacles will arise on your path to success.

Step 1: Download Reset

There are plenty tons of material, out there, about the subject. Nearly every CSS expert website has its own reset. But there is no expert sitting on this side of the screen, so I urge you to go for a ride on the intertubes and download some (often, one it's enough). Here you are some external links in case googling is not among your skills:

Step 2: Choose your Reset

I know, it may be difficult to choose only one, but, trust me, it's for your own good.

Have a look at them, learn and understand how they work. This knowledge will help you when you build up your own CSS later.

When you have found the "chosen one", save it as your project's CSS and continue.

Step 3: Add your own CSS

Now you can add your custom CSS in the same file, modifying the reset values if needed. Most advocate to have a "reset.css" file and to include it in every page. That's pretty lame, because many values will be overriden by your own values. Anyway, I often use it on non-critical internal applications.

Step 4: Spread the Word!

That's what I'm trying to do with this post. Sure it will have no relevance on the world, but these are my time, my blog and my poor little fingers.

Conclusion

There are good practices so pretty simple that should be a must for every developer out there. The Net will profit, the user experience rises and that comes for little or no work. Using CSS Resets is one of those techniques. May the reset be with you.

Progressive enhancement example: Language Selection

2009-11-17T15:39:00.020+01:00

It's easy to get lost in the Internet while looking for information. It's one of its greatest points: There are thousands of millions of websites out there. Information is the key purpose of the net and nobody can deny it.

But, as in many other cases, quantity does not equal quality. Poor designed websites, too bloated, with many inlined styles or little semantics (if none), are begging for trouble: Their information have lost accessibility.

Accessibility: Why are we here?

When it comes to accessibility, the Net clearly fails the test. Many of those rich Javascript websites are not accessible by any means but by a small portion of the community, thus devaluing its own information. Not only there are plenty of browsers with no JavaScript capabilities or with Javascript disabled, if not readers for blind people, text-only browsers, interfaces specially adapted for disabled people, web crawlers and bots.

Companies, as such, should take into consideration disabled people, but, harsh as it sounds, they don't give a shit. But if not for them, do it for the bots. Everyone wants to look pretty to Google's eyes, right?

Introducing Progressive Enhancement

So, here comes progressive enhancement in our help. Designing with PE in mind means to develop the content for the least capable devices, and add features to only those able to use them, thus enriching their experience.

So, for a text browser, the content will be plain text (after all, that's what 90% of the HTML content is, isn't it?). For CSS1 browsers, you may add some style. Add some more CSS2 selectors to improve the experience in brand new browsers. Add some unobtrusive javascript to finish the work for the most capable ones. That's it! It was no rocket science, was it?

HTML: Hands on!

The following example shows the building of a "Choose language" menu using progressive enhancement. First comes first, so we begin with the HTML markup:

<div class="langs">
   <h2>Change language</h2>
   <ul>
      <li><a href="http://en.example.org" class="lang-en" title="English"><span>English</span></a></li>
      <li><a href="http://es.example.org" class="lang-es" title="Español"><span>Español</span></a></li>
      <li><a href="http://fr.example.org" class="lang-fr" title="Français"><span>Français</span></a></li>
      <li><a href="http://ca.example.org" class="lang-ca" title="Català"><span>Català</span></a></li>
      <li><a href="http://it.example.org" class="lang-it" title="Italiano"><span>Italiano</span></a></li>
      <li><a href="http://de.example.org" class="lang-de" title="Deutsch"><span>Deutsch</span></a></li>
      <li><a href="http://pt.example.org" class="lang-pt" title="Português"><span>Português</span></a></li>
   </ul>
</div>

It's easy to create this with a dynamic language, like our beloved PHP:

// current language first
$languages = array(
   'en' => 'English',
   'es' => 'Español',
   'fr' => 'François',
   'ca' => 'Català',
   'it' => 'Italiano',
   'de' => 'Deutsch',
   'pt' => 'Português',
);
?>
<div class="langs">
   <h2>Change language</h2>
   <ul>
      <? foreach($languages as $langISO6391 => $langName): ?>
         <li>
            <a href="http://<?=$langISO6391?>.example.org" class="lang-<?=$langISO6391?>" title="<?=$langName?>">
               <span><?=$langName?></span>
            </a>
         </li>
      <? endforeach ?>
   </ul>
</div>

Result of step 1

Now it looks equally fine in all graphic and text browsers. Its markup is fully semantic, so a web reader could hint the user, easing its navigation. Also, as there's no content generated dynamicly on the client, the bots can read all the content and collect the links.

CSS1: Adding some cool style

Let's make our first jump to style and add some flags. Many would argue that using flags for languages is not correct, but as it's a common misconception, I will be one more:

CSS sprite flags for languages

Add this to the <head> tag:

<link rel="stylesheet" href="/css/lang.css" type="text/css" />

And create the lang.css file with the next content:

.langs a {
   background-image:url(/img/lang.png);
   display:block;
   font-size:0;
   height:11px;
   width:16px;
}
.lang-ca { background-position:0 -11px; }
.lang-de { background-position:-16px -11px; }
.lang-en { background-position:-32px 0; }
.lang-es { background-position:-16px 0; }
.lang-fr { background-position:-48px 0; }
.lang-it { background-position:-32px -11px; }
.lang-pt { background-position:-48px -11px; }

.langs ul {
   list-style:none;
   margin:0;
   overflow:hidden;
   padding:0 0 0 6px;
}

.langs li {
   float:left;
   margin:2px;
}

.langs li a span { margin-left:-9999em; }

Text browsers obviates CSS style declarations, so this change doesn't affects them. Neither will web readers, as the images are in the CSS and the markup hasn't changed at all. But in all our graphical browsers we may see a different story.

Result of step 2

Javascript: Toward user interaction

Now enters the Javascript. Let's say we want to show only the current language but, when the link is clicked, all the flags must unfold. Clicking the current language once more, closes it back. This is easy to achieve with some CSS+Javascript tricks and the fabulous jQuery. Let's add to our HTML:

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/lang.js"></script>

Now, create the lang.js file and type this:

$('.langs li:first-child a')
    .live('click', function(ev){
        ev.preventDefault();
        $(this).parents('.langs').toggleClass('open');
})

I love how jQuery makes things easy! This adds/remove the 'open' class from the 'langs' parent only when the first flag is clicked. Now we can fall into the trap of adding CSS to style the opened list and the closed one, but we will be changing the style in every non-Javascript capable browsers, too, maybe rendering the menu useless. The trick is to add this just after opening the body tag in the HTML.

<script>document.body.className += (document.body.className === '' ? '' : ' ') + 'js'</script>

This simple one-liner adds the 'js' class to the body. But ONLY if the browser supports and executes Javascript! That makes a difference in our CSS, so now we can type the next without worry:

body.js .langs li + li { display:none; }
body.js .langs.open li + li { display:block; }
body.js .langs h2 { float:left; margin-left:-9999em; }

Theres some CSS2 in it, so if you want your CSS1 browsers to render it correctly, you must workaround this. The easy solution is to add a class to the first entry in the HTML markup. Another way is to use Javascript to add the class on page load. Let's do the latter:

jQuery(function($){
   $('.langs li:first-child').addClass('first')
})

Now the previous CSS looks like this:

body.js .langs li { display:none; }
body.js .langs .first, body.js .langs.open li { display:block; }

Text browsers doesn't use javascript so this changes made no sense to them, nor for any Javascript disabled browser or web readers.

CSS2: Adding some even cooler style

Finally, we will add a CSS2 arrow next to the first flag, to catch the attention of the user and to emphasize its dynamic nature. We will use the next simple sprite image for the left/right arrow:

The itty-bity arrow image

And now we will unleash all the power of CSS2:

body.js .langs.open li + li a:before { display:none; }
body.js .langs li a:before {
   background-image:url(http://localhost/chorus/img/arrows.png);
   background-position:-4px 0;
   content:'';
   display:block;
   font-size:0;
   height:9px;
   left:19px;
   position:relative;
   top:1px;
   width:5px;
}
body.js .langs.open li a:before {
   background-position:0 0;
   left:-8px;
}

Note here the use of the + selector (adjacent sibling) is correct, because this change is a mere enhancement, not necessary for CSS1 only browsers. Also, it uses the complex and versatile 'before' pseudo-element. This is a must in every real browser. It's a pity IE6 still exists.

Example rendered by a Javascript and CSS2 capable browser
Click to unfold the flags

Happy end

Whoa! The menu now looks pretty different for sure after all this steps. We've achieved the top of the web art in terms of accessibility. Our website will be rendered correctly in all major browsers, and remain accessible even with Javascript disabled. Also, the blind impaired and text browser users still have full access to all the basic funcionality: Information. Our loved Google Bot and the rest of the bots will be able to crawl our html, index it and fully understand the semantics, with no meddlers.

I hope you liked it and that will be of use to anyone. Schüß!

Frames without frames. AJAH selective insertion

2009-11-11T18:50:00.011+01:00

And W3C said Let there be frames, and there was frames, and they were used (and abused) and it was good, and W3C said This is right (we're gonna deprecate them soon) and there was much rejoicing.

Is not new that web developers hate all that's made with frames. They're a burden nobody wants to carry, so confusing, so "nineties", so... well, deprecated, that's it. So you may think I'm just delving into the past. Frames, as we know it, are dissapearing into extinction but, the main idea, more or less, is still needed nowadays.

AJAH!

I'm talking about AJAH web applications. In these, the default click action is overriden with Javascript, making an asynchronous request to the URI and inserting the HTML result into a DOM object. It's simpler with a picture of a sample layout:

<h1>#Header</h1>

When you click on a link in #menu, you want to async call the URL and set the result as the content of #application. This can be done setting the XMLHttpRequest onreadystatechange event more or less like this:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if(this.readyState === 4 && this.status === 200) {
        document.getElementById('App').innerHTML = this.responseText
    }  
};
xhr.open('GET', url, true); // the url of the request
xhr.send(null)

Wasn't it easy? Now, if your request returns "<h2>Option 1</h2>" the content of the App DOM Object changes.

One request, multiple changes

How about changes in more than one "frame"? Let's say you want to modify the contents of App and set Footer to a status text. First you must modify your application to wrap the result within the appropriate tags:

<div id="App">This must go inside the App container</div>
<p id="Footer">This is the new stats of the application, and goes into the Footer</p>

In the onreadystatechange event, create an anonymous node and set the response as innerHTML.

...
var node = document.createElement('div');
node.innerHTML = this.responseText;
...

Then, iterate over its direct children. If the child has an id, search the real DOM with getElementById, replacing the node, when found. If the child has no id or doesn't match to a node in the document, append it to a default DOM object, say body (or whatever fits in your case).

var child = node.childNodes;
var default = document.getElementsByTagName('body')[0];
while(child.length) {
    if(child[0].id) {
        var replacement = document.getElementById(child[0].id);
        if(replacement) {
            replacement.parentNode.replaceChild(child[0], replacement);
            continue;
        }
    }
    default.appendChildren(child[0])
}

jQuery oversimplification

This could be achived easily with jQuery:

$(this.response)
    .filter(function(){
        var u = document.getElementById(this.id);
        return !(u && u.parentNode && u.parentNode.replaceChild(this, u))
    })
    .appendTo('body')

Nice one, isn't it?

Refactoring code smell

2009-11-09T20:18:00.009+01:00

I work every day with PHP, developing management tools for the company where I work, but when I accepted this job I was a pure noob in this language. In fact I was hired for some C++ programming, but soon my tasks evolved so that wherever there's code, I was there too. So, learning PHP was the logical evolution in this case.

As you can imagine, being a PHP developer fresh from the oven, I ended up committing many atrocities in my code. And now is when, with some more maturity and knowledge, I can detect, by sense of smell, where those design flaws are. It's a fact, bad code smells.

Searching for the light

Well, my early days of PHP were all a mess of "write and test" so even the maintenance of my own code is little better than a nightmare with ninja killer rabbits. The skills take time to develop as you're learning. But then, one day, you're illuminated by finding "The Path".

Change "The Path" with functions, objects, inheritance, aggregation, design patterns, MVC, reflection... whichever fits best. It's hammer time, and everything around seems like a nail. You browse through all your finished projects, changing things to match your "new mood", so you and your (old) code are in communion. But adding no value to the old applications.

Then, one day, a new "The Path" (there's always one more) enters your life, illuminating it from another point of view, and all your code begins to smell like a horde of skunks bathing in a sewer. Face it, you've entered an endless loop. Welcome to the real world.

A nightmare to remember

I've been in the programming world since 1994 and I've been hit by tons of bugs, mistakes and bad habits, some (tons) made by me, some not. While maintaining others' code, more often than not I found scripts that follow the lovely paradigm of "spaggetti code". No classes involved. Not even a f****g function. Nothing. Zero... Nada. That was GREAT.

Have you heard about the "$i++; // increases $i" comment?
I've seen one of those too. Not so funny, actually, IRL. I have no idea yet of what it does exactly.

Enter Refactoring

Refactoring is the tool we need in this cases. In words of Wikipedia, refactoring is the process of changing a computer program's internal structure without modifying its external functional behavior or existing functionality, in order to improve internal quality attributes of the software. In my own words, refactoring is to improve code so you won't go crazy when adding new functionalities.

Refactoring is not a new science. I think when the first programmer had to mantain others' code, refactoring was, more or less, invented. But I think I'm right saying that it was Martin Fowler with his book Refactoring: Improving the Design of Existing Code who put more efforts to make it a standard.

From things as simple as to change the name of a local variable to as sophisticated as replacing an enum with a strategy pattern, every tool in the box exists to make your code more readable. To the extent that there is no need to comment the code: it speaks for itself.

Refactoring applied

Which of the following two do you prefer?

// Transform user input from celsius to fahrenheit
$a = f($argv[1]);

$celsius = $argv[1];
$result = convertCelsiusToFahrenheit($celsius);

This is a quite simple example. Of course, Fowler's book is tons more interesting than this, but I hope this one delves into the open wounds left by some developers. If refactoring today, spending two hours, you save three tomorrow when adding functionality, will it be worthwile? I bet yes, but... that's my point, not my boss'.

Although I wonder if I have not found yet another "The Path" and all this is just another iteration of the loop...

Real IP Problem and X-Forwarded-For header

2009-07-10T17:32:00.010+02:00

Someone has been in a situation like this? I bet it

We need a way to know whether a user is logged in or not.
Easy as pie. Go on sessions with him.
We can't rely on the user's browser to allow cookies.
Well, we rely on the user's browser to have JavaScript, so why...?
I said no cookies. Use the IP address.

Then the system went into production, users connected to it, they paid for the services and user's IP were logged into the server and into the database, being checked in every request he made to the server, until the server logged them out. Not perfect, you may think, and you're right, because one day:

We've been receiving many tickets from our users asking they want their money back
Why?
They paid for a service they never were able to enter.
And no error was shown? Was all in the billing system OK?
No error. No problem. But they were not allowed to enter the site
I must investigate

And later on, after mailing nearly every customer and checking every log and pinging every IP, the problem arises: Proxies.

Proxies acts between client and server in order to speed the user experience on the web. Proxies can cache, redirect to nearby mirrors, filter content, provide anonymity and intranet connectivity, and so forth.

Proxies and the X-Forwarded-For problem

Proxies adds a X-Forwarded-For header to the request (or updates an existing one) with the user IP and, then, after some more magic, redirects the request to the destination. Answer goes also from the server to the proxy, then it's redirected to the real end user.

So, when a request comes directly from users, 'REMOTE_ADDR' PHP var contains the user's real IP. While browsing through a proxy, the 'REMOTE_ADDR' is the proxy's IP and the 'HTTP_X_FORWARDED_FOR' contains a list of one or more IP's, one of them being the user's one.

So you make a script to get the client's real IP, like this one:

function get_real_ip(){
  return isset($_SERVER['HTTP_X_FORWARDED_FOR'])
           ? $_SERVER['HTTP_X_FORWARDED_FOR']
           : $_SERVER['REMOTE_ADDR'];
}

Not a really good one, it can be improved by filtering IPs from the forwarded list and selecting only one, but, nevertheless, all version suffer the same problem: Header injection.

What happens if somebody changes (and it's not that difficult to do it!) the headers sent to the browser?

Let's say you add a X-Forwarded-For header and set its value to some IP, maybe one you 'sniffed' from the site traffic. Now you're superseding another user! If this user buys some content, now you're allowed to get it too.

Anonymous browsing

Also, if the Proxy allows anonymity, your server will receive no X-Forwarded-For header thus confusing the proxy's IP with the real one. Now, every computer passing through this Proxy can access the private content, as long as one of them purchased it.

Conclusions

That's not a security hole. It's a crater as big as a full moon. So, while developing "security measures" think for yourself: Are these making the hole smaller or even bigger?

HTML Tip: Think semantics

2009-06-30T18:16:00.003+02:00

As said in Best Practices for Building Web Applications, one of the things to have in mind when developing Web Applications (or any simple HTML website) is to Think on Semantics. Let's see how this can boost our websites and raise them to the top.

Think on Semantics

HTML is for content and semantics, so, when a browser sends an HTML request, it expects to receive content. The browser does not know what information to display, so you must educate it. HTML has tags for everything needed to learn and speak the "browser language": <p> for paragraphs, <a> for links, <ol> and <ul> for lists, <span> and <div> for custom blocks, and so on... So, semantics is to make the tags meaning to match the content inside them.

Better seeing it with an example:

<div>
  <a>One Link</a><br/>
  <a>Another Link</a><br/>
  <a>One More Link</a><br/>
</div>

Has no semantics on it because a <div> is quite generic. This can be upgraded into semantical form as a link list with the following markup:

<ul>
  <li><a>One Link</a></li>
  <li><a>Another Link</a></li>
  <li><a>One More Link</a></li>
</ul>

Not too different from the previous one, is it? Well, not for the browser, of course.

Advantages

The browser knows how to display an unordered list. You don't have to put those ugly <br> nor special classes and CSS to have a list rendered as it's expected.
Best accesibility. Imagine a special browser that allows sight-impaired people to hear the text inside the <li>'s one at a time, or to skip the entire list. For this app, the former is only a bunch of text with links on it.
No bloat. As you don't need those little <br/> buddies, no code bloat is added to your HTML and it remains as it should be. Only content and related tags.
Nice to Bots. This may seem rather stupid, but when a bot enters your site, it only sees pure HTML. You want Google Bot to be able to read and understand your text, doesn't you?

CSS Refresh

2009-06-18T11:05:00.010+02:00

While developing a web application, I often need to reload a whole site for every change I do in its CSS file, only to test it. Under Firefox I used to change manually the href in links (well, in fact, with Firebug) to add some query string, in order to by-pass the cache and request the brand-new version of the file. This job was often harder than that, since I'm still maintaining some old school applications using frames (Eek!).

While writing my jQuerify Bookmarklet I thought this CSS refresher is the perfect job for a bookmarklet, so I ended writting the CSS Refresh Bookmarklet.

Code action!

(function(){
  var a = [];
  function f(f){
    a = a.slice.call(f.getElementsByTagName('link')).concat(a)
  };
  f(document);
  for(var i = window.frames.length - 1; i > 0; --i){
    f(window.frames[i].document);
  }
  var date = new Date().valueOf();
  for(var i = a.length - 1; i >= 0; --i){
    var s = a[i];
    if(
      s.href &&
      s.rel.toLowerCase().indexOf('stylesheet') >=0 &&
      (!s.sheet || !s.sheet.disabled)
    ){
      var h = s.href.replace(/[&?]_=\d+/,'');
      s.href = h + (h.indexOf('?') >= 0 ? '&' : '?') + '_='+date;
    }
  }
}());

The code is pretty straighforward: It collects every <link> tag in any frame (even the main one) and modifies their href with a dummy parameter. First, the script tries to remove the dummy parameter, in case it exists, and then adds the dummy parameter with the current timestamp, so no two refreshes are equal.

CSS Refresh Download

Now CSS refreshing is only a click away for every project. Nice!

You can download the bookmarklet dragging the next link and dropping into your bookmarks toolbar. I hope it helps you as well as it does to me!

CSS Refresh Drag and drop onto your bookmarks

Best Practices for Building Web Applications

2009-06-04T18:48:00.014+02:00

If there's something I've learned during my developer life, is to make a list of basic rules and to be faithful to them. These rules are the skeleton on which all my own applications shall be built. Of course, these rules also evolved as time goes by, growing stronger or falling into obsolescence, often unpredictably.

Web development is not different from C++ coding, so it also has its own ruleset in order to avoid "bad habits". These are my rules, tell me yours.

HTML

Think semantics
Markup, not bloat
Put a DOCTYPE in your life

CSS

Reset your CSS
Avoid "hard" classes
Don't hack

JS

Choose your JS weapon!
Be gentle. Be usable
Progressive & Gracefull

ALL

Keep them separated
Call the specialist
S is for Standards

I think they are pretty self explanatory, but I'll be digging deeper onto them in forthcoming entries.

I hope this list, at least, makes you think. Does you follow your own set of rules while developing? Why? Why not? What are yours? How they evolved?

There's no absolute answer to those question, you must be saying. And that's obviously certain as no two people are alike. Sharing our points of view would be a good way to learn from ourselves, doesn't it?

swfLink: Simple, unobtrusive, Flash embedding

2009-06-04T18:04:00.003+02:00

Update:Now returns the resulting <object> on success

I was in need of some simple Javascript to add SWF objects. Hoping for a simple, cross-browser, ie-proof, eolas-respectful and graceful-degradable solution is a difficult praise to attend, so I began, as always, to write my own.

The routine is so simple because it does nothing more than add a <object> tag so it can embed the flash movie. No plugin or software checks. I didn't need them.

The markup is easy as pie:

<a href="path/to/file.swf?parms" width="320" height="240">Alternate content</a>

A straightforward link to our swf, so, in non-js environments, the user can access it as well. The width and height must be specified too in order to create the <object> tag within the script.

Now the guts, the JS code to convert our links into fully-functional swf objects:

var links = document.getElementsByTagName('a');
for(var idx = links.length - 1; idx >= 0; --idx) {
  var item = links[idx];
  if(/\.swf[$?#]/.test(item.href)) {
    swfLink(item.href, item, {
      width: item.getAttribute('width'),
      height: item.getAttribute('height')
    })
  }
}

All it does is to get all links and filter the ones not corresponding to swf files. The /\.swf[$?#]/ regex is responsible for this to happen. You´re allowed to change that and make it more secure, but, for now, it fits my needs.

Next we move into the details of the swfLink script.

function  swfLink(url, elm, opts, parms) {
  // Default values
  opts = opts || {};
  parms = parms || {};
  !opts.type && (opts.type = 'application/x-shockwave-flash');
  !parms.allowscriptaccess && (parms.allowscriptaccess = 'always');
  !parms.wmode && (parms.wmode = 'transparent');
  // Checks for IE
  if(!+"\v1") {
    opts.classid = 'clsid:D27CDB6E-AE6D-11cf-96B8-444553540000';
    // Split URL onto movie and flashvars params
    url = url.split('?');
    parms.movie = url[0];
    url[1] && (parms.flashvars = url[1]);
  } else {
    opts.data = url;
  }
  var result = ['<object'];
  // Add options as object attributes
  for(var idx in opts) {
    result.push(' ', idx, '="', opts[idx], '"');
  }
  result.push('>');
  // Add params
  for(var idx in parms) {
    result.push('<param name="', idx, '" value="', parms[idx], '"/>');
  }
  result.push(elm.innerHTML, '</object>');
  var cont = document.createElement('div');
  cont.innerHTML = result.join('');
  // Replace source link with embedded object
  elm.parentNode.replaceChild(result = cont.firstChild, elm);
  return result
}

As you may note, I´ve used the 7 byte IE detection script in order to detect our natural enemy. The code is pretty straighforward, I think. It does only what it needs to be done.

I hope this helps somebody. At least I enjoy coding it.

How boring life would be without IE spicing up our coding time...

CSS, Sprites and arcane winged demons

2009-05-28T08:15:00.017+02:00

Maybe it's my fault, maybe not. The truth is that I had some problems optimizing my webserver load with CSS Sprites, a nice, clean technique to max the efficiency of every image. Let's go into details:

I used a set of flag icons (taken from Fam fam fam) in a site admin zone. There are 247 flags, sweet and small (16x11) and that's all I needed. In this admin you can browse through tables with tons of data, to the point that all of the flags may be shown at once. More than once, in fact. So in a clean-cached browser you probably end requesting 247 images from the server. Even if the only answer were a 304 Not modified (in another scenario) they're too many requests. No way, being the "optimizer" I am, I need to change that.

Stacking the icons

I created a script to automate the process of loading all 247 images, pack them into a bigger one and building the CSS. The PHP is too hard-coded to put as an example, but maybe one day I can generalize it as to be reusable. The thing is it fit my needs in that moment and the result was this:

The Flags Sprite

And a CSS that look like this:

.flag {
  background-image:url(/img/flags.png);
  display:block;
  text-decoration:none;
  height:11px;
  width:16px;
}
.flag-ad { background-position:-16px 0; }
.flag-ae { background-position:-32px 0; }
...
.flag-zm { background-position:-176px -198px; }
.flag-zw { background-position:-192px -198px; }

And finally I made some changes to the admin, so the HTML output now is something like this:

<table>
  <tbody>
    <tr>
      ...
      <td><a href="#" class="flag flag-es" title="Spain"></a></td>
      ...
    </tr>
    <tr>
      ...
      <td><a href="#" class="flag flag-us" title="United States"></a></td>
      ...
    </tr>
    <tr>
      ...
      <td><a href="#" class="flag flag-de" title="Germany"></a></td>
      ...
    </tr>
  </tbody>
</table>

The curse

It worked like a charm. Well, almost in any browser you can name. But, damn, don't talk me about IE, because those aren't browsers! IE shook me once again by not behaving as I expected, that is, like a W3C compliant browser. But that's no surprise, is it?

CSS Sprites in W3C browsers
CSS Sprites in IE 6

I thought it could be a problem with different default CSS values, but I have used a CSS reset technique at the top of the site, so it couldn't be, right?

Right, it wasn't the cause. I tested with some others reset stylesheets from the net, even the demonized * { margin:0; padding:0; } but none worked. The bug was in some other place, so I began trying, thinking and having some luck finally. And when I say "finally" it really means "after some hours boiling my brains".

Size matters

I remembered the line-height property. Maybe it can shed some light on my troubles, but it was a waste of time. But wait, if IE6 is making weird things? Sure it was, but I mean, maybe is it showing something that's not there? A little addition to the CSS made me see the light:

.flag { font-size:0; }

And that's all! IE6 filled the empty link tag with a   and then show it. As the default font size is 18px height, it showed 7px more than it should. Almost half the height of a flag! In the end, size matters, even more with things that shouldn't be there, but are.

End of story

As a little regard

The code below shows the final CSS with all 247 flag positions within the sprite, using their corresponding ISO 3166-1 alpha-2 codes. I hope it helps somebody. See ya!

.flag {
  background-image:url(img/flags.png);
  display:block;
  font-size:0;
  height:11px;
  width:16px;
}
.flag-ad{background-position:-16px 0;}
.flag-ae{background-position:-32px 0;}
.flag-af{background-position:-48px 0;}
.flag-ag{background-position:-64px 0;}
.flag-ai{background-position:-80px 0;}
.flag-al{background-position:-96px 0;}
.flag-am{background-position:-112px 0;}
.flag-an{background-position:-128px 0;}
.flag-ao{background-position:-144px 0;}
.flag-aq{background-position:-160px 0;}
.flag-ar{background-position:-176px 0;}
.flag-as{background-position:-192px 0;}
.flag-at{background-position:0 -11px;}
.flag-au{background-position:-16px -11px;}
.flag-aw{background-position:-32px -11px;}
.flag-ax{background-position:-48px -11px;}
.flag-az{background-position:-64px -11px;}
.flag-ba{background-position:-80px -11px;}
.flag-bb{background-position:-96px -11px;}
.flag-bd{background-position:-112px -11px;}
.flag-be{background-position:-128px -11px;}
.flag-bf{background-position:-144px -11px;}
.flag-bg{background-position:-160px -11px;}
.flag-bh{background-position:-176px -11px;}
.flag-bi{background-position:-192px -11px;}
.flag-bj{background-position:0 -22px;}
.flag-bl{background-position:-16px -22px;}
.flag-bm{background-position:-32px -22px;}
.flag-bn{background-position:-48px -22px;}
.flag-bo{background-position:-64px -22px;}
.flag-br{background-position:-80px -22px;}
.flag-bs{background-position:-96px -22px;}
.flag-bt{background-position:-112px -22px;}
.flag-bv{background-position:-128px -22px;}
.flag-bw{background-position:-144px -22px;}
.flag-by{background-position:-160px -22px;}
.flag-bz{background-position:-176px -22px;}
.flag-ca{background-position:-192px -22px;}
.flag-cc{background-position:0 -33px;}
.flag-cd{background-position:-16px -33px;}
.flag-cf{background-position:-32px -33px;}
.flag-cg{background-position:-48px -33px;}
.flag-ch{background-position:-64px -33px;}
.flag-ci{background-position:-80px -33px;}
.flag-ck{background-position:-96px -33px;}
.flag-cl{background-position:-112px -33px;}
.flag-cm{background-position:-128px -33px;}
.flag-cn{background-position:-144px -33px;}
.flag-co{background-position:-160px -33px;}
.flag-cr{background-position:-176px -33px;}
.flag-cu{background-position:-192px -33px;}
.flag-cv{background-position:0 -44px;}
.flag-cx{background-position:-16px -44px;}
.flag-cy{background-position:-32px -44px;}
.flag-cz{background-position:-48px -44px;}
.flag-de{background-position:-64px -44px;}
.flag-dj{background-position:-80px -44px;}
.flag-dk{background-position:-96px -44px;}
.flag-dm{background-position:-112px -44px;}
.flag-do{background-position:-128px -44px;}
.flag-dz{background-position:-144px -44px;}
.flag-ec{background-position:-160px -44px;}
.flag-ee{background-position:-176px -44px;}
.flag-eg{background-position:-192px -44px;}
.flag-eh{background-position:0 -55px;}
.flag-er{background-position:-16px -55px;}
.flag-es{background-position:-32px -55px;}
.flag-et{background-position:-48px -55px;}
.flag-fi{background-position:-64px -55px;}
.flag-fj{background-position:-80px -55px;}
.flag-fk{background-position:-96px -55px;}
.flag-fm{background-position:-112px -55px;}
.flag-fo{background-position:-128px -55px;}
.flag-fr{background-position:-144px -55px;}
.flag-ga{background-position:-160px -55px;}
.flag-gb{background-position:-176px -55px;}
.flag-gd{background-position:-192px -55px;}
.flag-ge{background-position:0 -66px;}
.flag-gf{background-position:-16px -66px;}
.flag-gg{background-position:-32px -66px;}
.flag-gh{background-position:-48px -66px;}
.flag-gi{background-position:-64px -66px;}
.flag-gl{background-position:-80px -66px;}
.flag-gm{background-position:-96px -66px;}
.flag-gn{background-position:-112px -66px;}
.flag-gp{background-position:-128px -66px;}
.flag-gq{background-position:-144px -66px;}
.flag-gr{background-position:-160px -66px;}
.flag-gs{background-position:-176px -66px;}
.flag-gt{background-position:-192px -66px;}
.flag-gu{background-position:0 -77px;}
.flag-gw{background-position:-16px -77px;}
.flag-gy{background-position:-32px -77px;}
.flag-hk{background-position:-48px -77px;}
.flag-hm{background-position:-64px -77px;}
.flag-hn{background-position:-80px -77px;}
.flag-hr{background-position:-96px -77px;}
.flag-ht{background-position:-112px -77px;}
.flag-hu{background-position:-128px -77px;}
.flag-id{background-position:-144px -77px;}
.flag-ie{background-position:-160px -77px;}
.flag-il{background-position:-176px -77px;}
.flag-im{background-position:-192px -77px;}
.flag-in{background-position:0 -88px;}
.flag-io{background-position:-16px -88px;}
.flag-iq{background-position:-32px -88px;}
.flag-ir{background-position:-48px -88px;}
.flag-is{background-position:-64px -88px;}
.flag-it{background-position:-80px -88px;}
.flag-je{background-position:-96px -88px;}
.flag-jm{background-position:-112px -88px;}
.flag-jo{background-position:-128px -88px;}
.flag-jp{background-position:-144px -88px;}
.flag-ke{background-position:-160px -88px;}
.flag-kg{background-position:-176px -88px;}
.flag-kh{background-position:-192px -88px;}
.flag-ki{background-position:0 -99px;}
.flag-km{background-position:-16px -99px;}
.flag-kn{background-position:-32px -99px;}
.flag-kp{background-position:-48px -99px;}
.flag-kr{background-position:-64px -99px;}
.flag-kw{background-position:-80px -99px;}
.flag-ky{background-position:-96px -99px;}
.flag-kz{background-position:-112px -99px;}
.flag-la{background-position:-128px -99px;}
.flag-lb{background-position:-144px -99px;}
.flag-lc{background-position:-160px -99px;}
.flag-li{background-position:-176px -99px;}
.flag-lk{background-position:-192px -99px;}
.flag-lr{background-position:0 -110px;}
.flag-ls{background-position:-16px -110px;}
.flag-lt{background-position:-32px -110px;}
.flag-lu{background-position:-48px -110px;}
.flag-lv{background-position:-64px -110px;}
.flag-ly{background-position:-80px -110px;}
.flag-ma{background-position:-96px -110px;}
.flag-mc{background-position:-112px -110px;}
.flag-md{background-position:-128px -110px;}
.flag-me{background-position:-144px -110px;}
.flag-mf{background-position:-160px -110px;}
.flag-mg{background-position:-176px -110px;}
.flag-mh{background-position:-192px -110px;}
.flag-mk{background-position:0 -121px;}
.flag-ml{background-position:-16px -121px;}
.flag-mm{background-position:-32px -121px;}
.flag-mn{background-position:-48px -121px;}
.flag-mo{background-position:-64px -121px;}
.flag-mp{background-position:-80px -121px;}
.flag-mq{background-position:-96px -121px;}
.flag-mr{background-position:-112px -121px;}
.flag-ms{background-position:-128px -121px;}
.flag-mt{background-position:-144px -121px;}
.flag-mu{background-position:-160px -121px;}
.flag-mv{background-position:-176px -121px;}
.flag-mw{background-position:-192px -121px;}
.flag-mx{background-position:0 -132px;}
.flag-my{background-position:-16px -132px;}
.flag-mz{background-position:-32px -132px;}
.flag-na{background-position:-48px -132px;}
.flag-nc{background-position:-64px -132px;}
.flag-ne{background-position:-80px -132px;}
.flag-nf{background-position:-96px -132px;}
.flag-ng{background-position:-112px -132px;}
.flag-ni{background-position:-128px -132px;}
.flag-nl{background-position:-144px -132px;}
.flag-no{background-position:-160px -132px;}
.flag-np{background-position:-176px -132px;}
.flag-nr{background-position:-192px -132px;}
.flag-nu{background-position:0 -143px;}
.flag-nz{background-position:-16px -143px;}
.flag-om{background-position:-32px -143px;}
.flag-pa{background-position:-48px -143px;}
.flag-pe{background-position:-64px -143px;}
.flag-pf{background-position:-80px -143px;}
.flag-pg{background-position:-96px -143px;}
.flag-ph{background-position:-112px -143px;}
.flag-pk{background-position:-128px -143px;}
.flag-pl{background-position:-144px -143px;}
.flag-pm{background-position:-160px -143px;}
.flag-pn{background-position:-176px -143px;}
.flag-pr{background-position:-192px -143px;}
.flag-ps{background-position:0 -154px;}
.flag-pt{background-position:-16px -154px;}
.flag-pw{background-position:-32px -154px;}
.flag-py{background-position:-48px -154px;}
.flag-qa{background-position:-64px -154px;}
.flag-re{background-position:-80px -154px;}
.flag-ro{background-position:-96px -154px;}
.flag-rs{background-position:-112px -154px;}
.flag-ru{background-position:-128px -154px;}
.flag-rw{background-position:-144px -154px;}
.flag-sa{background-position:-160px -154px;}
.flag-sb{background-position:-176px -154px;}
.flag-sc{background-position:-192px -154px;}
.flag-sd{background-position:0 -165px;}
.flag-se{background-position:-16px -165px;}
.flag-sg{background-position:-32px -165px;}
.flag-sh{background-position:-48px -165px;}
.flag-si{background-position:-64px -165px;}
.flag-sj{background-position:-80px -165px;}
.flag-sk{background-position:-96px -165px;}
.flag-sl{background-position:-112px -165px;}
.flag-sm{background-position:-128px -165px;}
.flag-sn{background-position:-144px -165px;}
.flag-so{background-position:-160px -165px;}
.flag-sr{background-position:-176px -165px;}
.flag-st{background-position:-192px -165px;}
.flag-sv{background-position:0 -176px;}
.flag-sy{background-position:-16px -176px;}
.flag-sz{background-position:-32px -176px;}
.flag-tc{background-position:-48px -176px;}
.flag-td{background-position:-64px -176px;}
.flag-tf{background-position:-80px -176px;}
.flag-tg{background-position:-96px -176px;}
.flag-th{background-position:-112px -176px;}
.flag-tj{background-position:-128px -176px;}
.flag-tk{background-position:-144px -176px;}
.flag-tl{background-position:-160px -176px;}
.flag-tm{background-position:-176px -176px;}
.flag-tn{background-position:-192px -176px;}
.flag-to{background-position:0 -187px;}
.flag-tr{background-position:-16px -187px;}
.flag-tt{background-position:-32px -187px;}
.flag-tv{background-position:-48px -187px;}
.flag-tw{background-position:-64px -187px;}
.flag-tz{background-position:-80px -187px;}
.flag-ua{background-position:-96px -187px;}
.flag-ug{background-position:-112px -187px;}
.flag-um{background-position:-128px -187px;}
.flag-us{background-position:-144px -187px;}
.flag-uy{background-position:-160px -187px;}
.flag-uz{background-position:-176px -187px;}
.flag-va{background-position:-192px -187px;}
.flag-vc{background-position:0 -198px;}
.flag-ve{background-position:-16px -198px;}
.flag-vg{background-position:-32px -198px;}
.flag-vi{background-position:-48px -198px;}
.flag-vn{background-position:-64px -198px;}
.flag-vu{background-position:-80px -198px;}
.flag-wf{background-position:-96px -198px;}
.flag-ws{background-position:-112px -198px;}
.flag-ye{background-position:-128px -198px;}
.flag-yt{background-position:-144px -198px;}
.flag-za{background-position:-160px -198px;}
.flag-zm{background-position:-176px -198px;}
.flag-zw{background-position:-192px -198px;}

Clearing floats with no clearfix

2009-05-10T19:24:00.038+02:00

Oh, floats. Every web designer have worked with them. Floats let you rearrange the flow of elements. They're powerful, they're useful, they're... painly buggy on old browsers, I know. But they're one of the CSS2 most used properties, so they deserve some respect.

Let's make some fun with floats. We will design a simple menu from nothing more than pure HTML tags and some CSS magic.

<ul>
   <h2>Menu</h2>
   <li><a href="#">Option 1</a></li>
   <li><a href="#">Option 2</a></li>
   <li><a href="#">Option 3</a></li>
</ul>

Well, yeah, it does what we want, but... Hey, you're adding new markup to the HTML. You're polluting our beloved WWW with non-semantical inline-styled tags. Well, it can be done without inlined style, but the most important here is that you are mixing content with style. And mixing things is not always a great idea. Do you remember Diet Coke and Mentos?

Soon the WWW was a field infected with "clearbothitis", since it seemed no one could live without floats and no other solution arose.

Clearfix

Then even more knowledgeable people came with a CSS2 full equip solution. Introducing clearfix!

.clearfix:after {
  clear:both;
  content:".";
  display:block;
  height:0;
  line-height:0;
  visibility:hidden;
}

Of course, with some tons of additional hacks for it to work in some applications. Nice!! Now you only have to put some classes to call the div to order.

<div class="container clearfix">
   <ul>
      <h2>Menu
      <li><a href="#">Option 1</a></li>
      <li><a href="#">Option 2</a></li>
      <li><a href="#">Option 3</a></li>
   </ul>
</div>

And our example turns into:

IE users could experiment strange behaviour viewing these examples. But, hey, you already knew that, didn't you? Go download a decent browser, you Neanderthal!

Old non-CSS2-compliant browsers can't show it. "Yes", I hear you say, " but they're legacy, you can't support them 'til the end of time". Sure not, I know, but even now there are millions of users browsing the WWW with old browsers. Would you be the one ignoring them? Me neither.
Well, have I said this needs tons of non-edulcorated CSS hacks in order to work in those 'exploring tools' I mentioned early? I mean IE6 and IE7 with their "hasLayout" neverending stories, of course...
I can't find the evolution between this and the previous one. You used CSS2? Sure you're a modern web designer! But you're committing HTML4 crimes, because you've polluted your HTML nonetheless! This is not a step forward nor backwards. Is a step aside, in the better case.

Conclusion and overflow

I think my point of view is clear: Markup is for content. There's no room for class="clearfix" as there is no room for class="blue-left-floating-column-80px-width". But every now and then I had to eat my words and thoughts and points of view (and some other non-gratefully things) and admit there is no other way to do the right thing.

Until now, that I read about a new CSS trick:

.container {
   overflow:hidden;
   width:100%;
}

As simple as this! And it works great. Even in Netscape Navigator 4! Boy, that's too much of a lucky one, isn't it? I wonder if it happens to work with the IE family. It seems it works too. That's EXACTLY the kind of solution I was looking for!

jQuery Bookmarklet

2009-05-08T09:14:00.013+02:00

It's kind of an obsession. You mix a somehow usual browsing session with some GREAT tools like a real browser, Firebug and jQuery and - Voilà! - you can do virtually anything.

You can fight the DOM, add events, modify every web as if it was your own. A la Seamonkey, if you want, but more hand-made. Please welcome... jQuerify.

jQuerify

Some time ago I found jQuerify, a bookmarklet that lets you do a simple thing: To load jQuery into any page with one click. It's simple and easy, but powerful enough.

Sure it is, but I, being the damn perfectionist I am, worked a little on it, putting all my javascript-fu in the oven. I've always wanted to create a bookmarklet and I only needed a reason. Even a tiny itty-bitty one. The result of some developing and searching is the xPh jQuerify Bookmarklet. Now, to the details!

Assembling the monster

First came first, so I read and (tried to) understand how jQuerify works and make some touch here and there. The jQuerify workflow is pretty simple:

Find if jQuery is loaded in the current page. If yes, exit gracefully
Load jQuery from Google API repository
Wait jQuery loading and call .noConflict if another library owns $

// Encapsulation
(function(){
  // Check if jQuery is loaded
  if(typeof window.jQuery != 'undefined') {
    message('jQuery already loaded')
  } else {
    // Check for conflicts
    var conflict = typeof window.$ != 'undefined';
    // Create the script and point to Google API
    var script = document.createElement('script');
    script.setAttribute('src','http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
    // Add the script to the 'head' for processing
    document.getElementsByTagName('head')[0].appendChild(script);
    // Create a way to wait until script loading
    var attempts = 15;
    (function(){
      // Check again if jQuery is undefined
      if(typeof window.jQuery == 'undefined') {
        if(--attempts > 0) {
          // Calls himself in a few milliseconds
          window.setTimeout(arguments.callee, 250)
        } else {
          // Too much attempts to load, send error
          alert('An error ocurred while loading jQuery')
        }
      } else {
        message('jQuery '+jQuery.fn.jquery+' loaded'+
          (conflict && jQuery.noConflict() ? ' with noConflict' : ''))
      }
    })();
  }
  // The message function assumes jQuery is loaded
  function message(msg) {
    var element = jQuery('<a>')
      .html(msg)
      .attr('href', '#')
      .css({
        width: 'auto',
        opacity: 0.9,
        position: 'fixed',
        zIndex: 9000,
        top: '15px',
        right: '20px',
        background: '#000',
        'float': 'right',
        padding: '7px 10px',
        color: '#fff',
        border: 'solid 2px #fff',
        textDecoration: 'none',
        textAlign: 'center',
        font: '12px "Lucida Grande",Helvetica,Tahoma bold',
        borderRadius: '5px',
        MozBorderRadius: '5px',
        MozBoxShadow: '0 0 20px #000',
        WebkitBorderRadius: '5px',
        WebkitBoxShadow: '0 0 20px #000'
      })
      .click(function(evt){
        evt.preventDefault();
        jQuery(this).fadeOut('slow', function(){jQuery(this).remove()});
      })
      .appendTo('body');
    window.setTimeout(function(){ element.trigger('click') }, 2500);
  };
})()

Bookmark creation

Well, that's it! Almost done. The next step is to publish it. It was more difficult than I thought, actually. I run a compressor on the code, to reduce it's size at minimum. The best minifier site I found is CompressorRater. It allows to do a comparison between most known JS minifier utilities, like Packer, JS Min, YUI Compressor and Dojo ShrinkSafe.

With the minified script (1152 bytes), the next step is to convert it in a URL. So I run urlencode on it. In fact I only urlencoded some characters, namely, spaces (%20), double quotes (" = %22), question marks (? = %3F), ampersands (& = %26) and html angles (< = %3C and > = %3E). Then put "javascript:" at front and that's all, a brand almost-new jQuerify Bookmarklet ready to put in any website, ready to grab to your favlist.

It's alive!

xPheRe jQuerify Drag and drop onto your bookmarks

The style of the message is taken from WTFramework, another nice bookmarklet to recognize which frameworks a site uses. I hope the author doesn't bother, otherwise, my apologizes.

Hoping this can be of help to someone, this was my daily war. And today, I won

Subclassing and Extending Array

2009-03-31T12:48:00.009+02:00

Lately I'm spending some time coding some libraries in JS to achieve a solid & cross-browser framework. Not every browser out there supports the latest Javascript version, so a fallback solution is often needed. Some examples are the iterative methods in Array, as introduced in JS 1.7: every, filter, forEach, map, some, indexOf, lastIndexOf.

So, as extending a built-in is often a bad idea, the direction taken was to create a subclass of Array and extend this one. No wonder it's a hard path, but we can walk it on our own.

Subclassing is the key

A simple and easy solution would be something on these lines:

var ArrayExt = function() { }
ArrayExt.prototype = new Array;

But as JS gurú Dean Edwards said in his post, it seems easy doesn’t it?

Yes, in fact it was so easy because it's the wrong solution.

var v = new ArrayExt;
v.push(100);
alert(v.length); // => 1 in **MOST** browsers

Yeah, in MOST browsers. What does this mean? Well... You know what? It doesn't work in IE, hehehe. Quite funny, isn't it? No, really, please act as if this were the one and only IE bug... IE shows an alert with a 0 in it, so we need another solution. And Dean Edwards found a great one in 2006 using an iframe as a sandbox.

IFrame to the rescue

The idea is basically that the fresh new iframe will have a copy of the Array object on it. But it will be a different object than the original one on the main document. Now we can get this object and extend it instead of subclassing.

Verbatim Dean solution:

// create an iframe
var iframe = document.createElement("iframe");
iframe.style.display = "none";
document.body.appendChild(iframe);

// write a script into the iframe and steal its Array object
frames[frames.length - 1].document.write(
  "<script>parent.Array2 = Array;<\/script>"
);

Minor final changes

Now we have an object called Array2 that we can extend by changing its prototype and Array will not be modified. Isn't that neat? Well, yeah. I made some modifications and generalize it a little:

function clone_built_in(object_name) {
  var iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  document.body.appendChild(iframe);
  var frame = frames[frames.length - 1];
  !frame.eval && frame.execScript && frame.execScript('null');
  var ret = frame.eval(object_name);
  document.body.removeChild(iframe);
  return ret
}

// Now you can get an Array clone
Array2 = clone_built_in('Array');
// And extend it
Array2.prototype.forEach = function() ...

execScript is an IE extension needed to call frame.eval, and now, the script works in every browser. But I'm not in the mood to force all browsers to make this kind of thing. Only nasty browsers should be punished in this way, so here comes some cross-browser object detection feature "ala jQuery.support":

var Array2 = (function(){
  var array_class = function(){ }
  array_class.prototype = new Array;
  var obj = new array_class;
  obj.push(0);
  return obj.length === 1 ? array_class : clone_built_in('Array')
})();

Voila! It's a kind of magic, isn't it?

I hope you've found something useful in this entry!

Iterative Methods from JS 1.6

And now as an extra bonus, some JS 1.6 standard functions for those nasty browsers living in the old days:

!Array2.prototype.every && (Array2.prototype.every = function(fn) {
  for(var i = 0, len = this.length; i < len; ++i) {
    if(!fn(this[i], i, this)) { return false }
  }
  return true
});

!Array2.prototype.forEach && (Array2.prototype.forEach = function(fn) {
  for(var i = 0, len = this.length; i < len; ++i) {
    fn(this[i], i, this)
  }
});

!Array2.prototype.filter && (Array2.prototype.filter = function(fn) {
  var ret = [];
  for(var i = 0, len = this.length; i < len; ++i) {
    fn(this[i], i, this) && (ret[ret.length] = this[i])
  }
  return ret
});

!Array2.prototype.indexOf && (Array2.prototype.indexOf = function(value, startIndex) {
  for(var i = startIndex || 0, len = this.length; i < len; ++i) {
    if(this[i] == value) { return i }
  }
  return -1
});

!Array2.prototype.lastIndexOf && (Array2.prototype.lastIndexOf = function(value, startIndex) {
  for(var i = startIndex || this.length - 1; i >= 0; --i) {
    if(this[i] == value) { return i }
  }
  return -1
});

!Array2.prototype.map && (Array2.prototype.map = function(fn) {
  var ret = [];
  for(var i = 0, len = this.length; i < len; ++i) {
    ret[i] = fn(this[i], i, this)
  }
  return ret
});

!Array2.prototype.some && (Array2.prototype.some = function(fn) {
  for(var i = 0, len = this.length; i < len; ++i) {
    if(fn(this[i], i, this)) { return true }
  }
  return false
});

Cross-browser inline style with jQuery

2009-03-25T19:05:00.008+01:00

Currently I'm developing some web applications for internal use, porting from some old ones.

I'd love jQuery, the jQuery way to do asynchronous requests is brilliant. Then I developed a plugin for my apps. Basically, it "automagically" catches all clicks on links, sends an AJAH request and loads the response inside a container.

The problem came when the response contains <STYLE> or <LINK> tags. While using Firefox and Opera all was great. But, oh $h*t, no style was applied with IE6, IE7, Chrome or Safari. I was thinking that was my plugin's fault, but when I test the use case without it, the problem remains. No style applied.

Case test

Check this simplified case without even jQuery:

<body>
  <p id="test">This test should have border and padding!</p>
  <script type="text/javascript">
    var div = document.createElement('div');
    // <br/> added to avoid a bug in IE
    div.innerHTML = '<br /><style>#test { border:2px solid #000; padding:1ex; }</style>';
    var span = div.getElementsByTagName('span')[0];
    document.body.appendChild(div);
  </script>
</body>

I thought that jQuery have workarounds for this, but I found none, so I created a plugin to do the hard work.

Maybe I missed some jQuery functionality, I'm not a guru.

jQuery cross-browser inline style plugin

This plugin relies on detecting whether inlined styles are processed or not. If not, modify $.fn.html to move all style's and link's to document.head, mark them with a 'data-style-loader' attribute and adding a dummy link to the target. When te dummy link is removed (with the same $.fn.html function), it removes all related style's and link's from head.

Well, that's the code:

$(function($) {
  // Checks for some supported features
  (function() {
    var div = document.createElement('div');
    div.id = 'jquery-support-styled';
    document.body.appendChild(div);

    // Checks whether inlined styles applies automaticly
    // (Firefox and Opera returns true)
    div.innerHTML = '<style>#'+div.id+
        ' span { display:block; width:3px; }</style><span />';
    var span = div.getElementsByTagName('span')[0];
    $.support.inlineStyleApplies = $(span).width() == 3;

    // Checks whether inlined styles applies if next to a 'br' (for IE)
    $.support.mustPrependBrToInlineStyles =
      !$.support.inlineStyleApplies && (function(){
        div.innerHTML = '<br /><style>#'+div.id+
          ' span { display:block; width:5px; }</style><span />';
        var span = div.getElementsByTagName('span')[0];
        return ($.support.inlineStyleApplies = $(span).width() == 5);
      })();

    document.body.removeChild(div);
  })();

  // Saves old $().html function
  var old_html = $.fn.html;

  if($.support.mustPrependBrToInlineStyles) {
    // Modify old $().html to add br before styles and links
    $.fn.html = function(_value) {
      if(typeof _value !== 'string') {
        _value = _value.replace(/<style|<link/gi, function(_text) {
          return '<br style="display:none"/>'+_text
        })
      }
      return old_html.call(this, _value);
    }

  } else if(!$.support.inlineStyleApplies) {
    // Change old $().html to move link´s and style´s to the head
    $.fn.html = function(_text) {
      // Remove css-pointers and their pointees
      var $styles = this.find('link[data-style-loader]');
      if($styles.length) { clean_css($styles); }

      // Calls old $().html
      old_html.call(this, _text);

      // Promote new links and styles to document.head
      $styles = this.find('style,link[rel*=stylesheet]');
      if($styles.length) { add_styles.call(this, $styles) }
      return this;
    }

    // Remove css-pointers and their pointees
    function        clean_css(_$styles) {
      // Get pointees id
      var st = [];
      for(var i = 0; i < _$styles.length; ++i) {
        st[st.length] = '[data-style-loader='+
          $(_$styles[i]).attr('data-style-loader')+']'
      }
      // Remove all links pointed
      $('head').find(st.join(', ')).remove();
    }

    // Promote new links and styles to document.head
    function        add_styles(_$styles) {
      // Selects a pointer id
      var tm = (new Date).getTime();
      // Move to head and add attribute with pointer id
      _$styles.attr('data-style-loader', tm).appendTo('head')
      // Create a link inside the target with info to the new links and styles
      this.append('<link data-style-loader='+tm+' />')
    }
  }
})

Tests and bugs

I have tested the plugin with these cases:

<p>Default, no style</p>
<style type="text/css">#test { color:red; }</style>
<link rel="stylesheet" href="remote.css" /> and remote.css #test { color:red; }
<style type="text/css">@import url("remote.css")</style>
<link rel="stylesheet" href="import.css" /> and import.css @import url("remote.css")

The plugin worked GREAT! But... with some exceptions:

In IE6 and IE7, case 4 fails silently.

Surprisingly, IE5 is no problem. (WTF?)
In Safari and Chrome, the style isn't removed when loading 1) after 3) or 5).

Loading 1) after 2) or 4) works ok. WTF again??

Well, this browser war is almost won...

But... HOW can I lead my JS to the total victory???

2009-12-03 Still unsolved

Like a box of chocolates

2009-03-24T19:35:00.005+01:00

This is my first attempt in blogging about my work, not my life. Ironic as it may appear, this blog will have a life much larger than all my past attempts.

I will blog about one of the things that amazes me and gives me more satisfaction. And no, I'm not talking about sex, you perverts (although it's one of those things), I'm talking about coding.

Computers and the Net sure are improving the way we live, the way we do things, the way we act... And yes, also the way we love! (almost!)

I work as web developer, and most of my code is written in PHP under Aptana Studio, but the language I enjoy the most is C++.

I also fight at work every day with my sword named JavaScript and my shield, jQuery, against The Great Demon and his Archlords of Doom, and thinking what would remain for us, the fighters, if we ever win the battle...

This are only some words to introduce myself and the sort of things I'm going to comment in my (not very scheduled and ordered) posts.

Hoping you enjoy as much as I do...

See ya!

The Coder Zone

Cross browser Leading Zeros with JavaScript

!isset, is_null, empty: The Good, the Bad and the Ugly

The Question

The Code

The Good: !isset

The Bad: is_null

The Ugly: empty

Conclusion

Exchanging currencies with Zend_Currency_CurrencyInterface

Test first

Currency

ExchangeService interface

Webservicex.NET Exchange Service

ArrayCacheDecorator

ZendCacheDecorator

exchangeTo($currency, $service)

ExchangeMockup

Bonus track

How to detect if a class implements an Interface?

The test

NotInterfaced

Interfaced

InterfacedDerived

In Conclusion

The Coder Zone Stats 2010

What my htaccess looks like in Zend Framework

Simplest Credit Card Validator

Safe RecursiveDirectoryIterator

Renovarse o morir

Happy New Year 2010!

PNG study with CSS Sprites

Initial setup

Imagick

The result iconset

punyPNG

The winner is...

Problemas y números

El experimento

La Cruda Realidad (™)

La Pregunta Definitiva

Despedida ¿y cierre?

Reset your CSS

The problem

The solution

Step 1: Download Reset

Step 2: Choose your Reset

Step 3: Add your own CSS

Step 4: Spread the Word!

Conclusion

Progressive enhancement example: Language Selection

Accessibility: Why are we here?

Introducing Progressive Enhancement

HTML: Hands on!

Result of step 1

CSS1: Adding some cool style

CSS sprite flags for languages

Result of step 2

Javascript: Toward user interaction

CSS2: Adding some even cooler style

The itty-bity arrow image

Example rendered by a Javascript and CSS2 capable browser

Click to unfold the flags

Happy end

Frames without frames. AJAH selective insertion

AJAH!

One request, multiple changes

jQuery oversimplification

Refactoring code smell

Searching for the light

A nightmare to remember

Enter Refactoring

Refactoring applied

Real IP Problem and X-Forwarded-For header

Proxies and the X-Forwarded-For problem

Anonymous browsing

Conclusions

HTML Tip: Think semantics

Think on Semantics

Advantages

The Good: `!isset`

The Bad: `is_null`

The Ugly: `empty`