I have read some month ago a very interesting post about it, but sadly I did’t find it back. However, the idea in the article is the following : keep your main password in every site, but add “salt” based on the domain name.

Let me show you an example : let’s say that your password is ‘ilovecats’, and you want to register at www.youtube.com.

1. Take the five first letters of the website : “youtu”,
2. make some permutations on them – for example, make them uppercase : ‘YOUTU’,
3. prefix it to your main password.
   The password for youtube.com becomes : ‘YOUTUilovecats’.

This idea is great ! With training, you won’t have to bother about remembering many different password. Also, you get a stronger password, since it is longer than your main password. The only thing you have to be sure is not to forget what permutations you did. Write it down somewhere maybe (this is anyway safer than writing all your passwords somewhere. If someone reads your permutations method, you don’t care : he still doesn’t know your main password )

Going more geeky

I’m using this method since the day I learned it. But as my friends know, I’m a bit lazy : I don’t want to write my permutation every time I have to log in (beside, my permutation is quite complex to mentally process). So, I wrote a small piece of Javascript to use with GreaseMonkey. This script searches for every password field on a website, and adds the five first letters of its url, with a permutation. You can change it by yourself if you want.

The permutation used in the file is the following :

1. Take the five first letters of the url (after the ‘www.’),
2. add one to each letter, so that a become b, b becomes c, …, z becomes a,
3. make the result uppercase,
4. prefix it to your main password.

Again : don’t forget the permutation that you are using !! Remember that if you want to log in on a computer that is not your own, you will have to do the permutation by yourself !

Installation

1. Firefox users : Download GreaseMonkey if you don’t have it yet : https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/
2. Download the Javascript file here; GreaseMonkey should ask you to install the file.
3. Once installed, every time you will click on a password field, the five first letters of your password will show up; just add your main password. Congratulations, you have a stronger password with almost no effort.

Source code

// ==UserScript==
// @name           Stronger Passwords
// @namespace      *
// @description    Get the first five chars of the domain name and prepend it to every password field of the page, with a permutation
// ==/UserScript==

window.setTimeout(function()
{
  //Extracting the first five letters
    var host = window.location.hostname;
    var domains = host.split('.');
    if (domains.length <= 2)
      host = domains[0];
    else
      host = domains[1];

    host = host.substring(0,5).toLowerCase();
  //Extraction done

  //Building the 5 first chars
  // You can change the code here to use another permutation.
  // The five letters are stored in the variable host and the
  // code below must build a variable names prefix which
  // contains the permutated string
    var prefix = "";
    var acode = 'a'.charCodeAt();
    var zcode = 'z'.charCodeAt();
    for (var i=0; i!=5;++i)
    {
      var c = host[i].charCodeAt();
      if (c >= acode && c <= zcode)
      {
        c -= acode;
        c  = (c+1)%26;
        c += acode;
      }
      prefix += String.fromCharCode(c);
    }
    prefix = prefix.toUpperCase();
  //Chars built

  //Appends the five letters to every password field when you click them
    var inputs = document.getElementsByTagName('INPUT');

    for (var i=0; i!=inputs.length; ++i)
    {
      if (inputs[i].type=="password")
      {
        var input = inputs[i];

        input.addEventListener('focus', function(event)
        {
          event.target.value=prefix;
          document.selection.empty();
        }, false);
      }
   }
 //Append done
}, 1000);

HTML5 vs Flash; source : http://themaninblue.com/writing/perspective/2010/03/22/

I deeply think that HTML5 is going to kill Flash. It’s open, it’s widely adopted by developers, and it’s totally free. Even Adobe knows that : they already stopped developing flash for mobile. The only things remaining for Flash is the speed : it is still faster than HTML5.

But the Fabric Engine may be going to change that. Technically, it is a plugin for Firefox and Chrome – maybe it will be released for Opera, but I doubt that it will for IE – that literally compiles JavaScript code to make it run faster. This is open source – Flash is not – easy to install, and multi-thread.

Fabric Engine

For now, it is only in beta testing, I suscribed to the beta testing group. I didn’t try it yet, but I looked at the demos and I think this has great potential.

I highly encourage every Web developer to take a look at this plugin.

Sources :

• Fabric Engine Website
• The Mani in blue
• Mashable

Source : Addy Osmani’s Blog

Vendor-specific properties are a pain in the ass !

Let’s say that you want to use a new property in CSS3. For this example, we will use border-image. According to W3Schools, you simply cannot use it in IE (duh !). In Firefox, Chrome and Opera, you have to use vendor specific rules to make this property work. So you need to write :

div
{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}

(example taken from http://www.w3schools.com/css3/css3_borders.asp)

Okay, this works. But you wrote four lines to get only one effect. And if you want to change this property, you will have change it four times instead of only once. Your code become harder to read and longer, for so few. And I don’t even talk about misspelling or different behavior because the -webkit property is different from the -moz property, but you didn’t notice it !

Well, you got my point, this is pain in the ass.

Couldn’t we get rid of it ?

In fact, yes, you can. The good news about those vendor-specific properties is that they have the same syntax as CSS3, with just a prefix that is different for each browser (-moz-, -o-, -webkit-, -ms-…). All you need to do is to duplicate the rule for each vendor-specific prefix, just like in the code above. And a simple parser should be able to do that for you.

I already wrote it, so you don’t even have to create your own (aren’t I kind ? ). It is working nicely (in fact, this blog uses it right now), so you shouldn’t have problem with it. That said, if  you find an error, some properties that are missing or shouldn’t be converted, let me know !

Also, I’m working on a system that takes a CSS file, convert it and saves it in a cache, so that you can use it directly in your website without going through this page. If you change your CSS, the system detects it and recompile the converted version for you. I will probably publish the system before Christmas, so stay tuned !

Then I found this class, made by Diego Feitosa, that looked nice, but wasn’t exactly what I wanted : I was forced to use an option (i.e. “-something <param>”) for each argument in the command line. It is nice for defining the behaviour of the script, but if you want to script something that process files, you just can’t – or only one file at a time.

In fact, this is exactly what I was doing : processing a lot of files. But with this parser, I couldn’t. So I decided to hack it a bit…

This code is an extended version of the CLI Parser of Diego Feitosa, which allows the user to pass arguments that are not options. I also made other modifications to the script :

• added a method to check if an argument is valid as a non option (by default, everything that doesn’t start with ‘-’ can be a non-option)
• improved usage description : the type awaited by an option is shown, better indentation
• improved error messages : if the type in the command line doesn’t match with an option, the error is shown. In the version of Diego, only the usage message was shown.
• auto-inclusion of the option types
• new option types : Positive Numeric, Negative Numeric, Integers, Enum

You can find the code here.

Here is an example of the usage of this parser. This example is also located in the source code provided above :

require_once('CliParser.inc');
$clistring = new CliTokenString("-c");
$clistring->setDescription("It requires a string");

$clihelp = new CliTokenBoolean("--help");
$clihelp->setDescription("Token that shows a help message");

$clisingleton = new CliTokenBoolean("-e");
$clisingleton->setDescription("It don't require any value. The existence of this argument is enough");

$clibool = new CliTokenBoolean("-b");
$clibool->setDescription("Boolean token");

$clidir = new CliTokenDirectory("-d");
$clidir->setDescription("This token require a directory path as argument. If the argument isn't a directory path, an error message will appear.");

$clifile = new CliTokenDirectory("-f");
$clifile->setDescription("This token require a file path as argument. If the argument isn't a file path, an error message will appear.");

$cliint = new CliTokenInteger("-i");
$cliint->setDescription("This token require an integer path as argument. If the argument isn't an integer, an error message will appear.");

$clienum = new CliTokenEnum("-enum", array('the', 'different', 'values', 'accepted'));
$clienum->setDescription("This token requires its argument to be one of the values specified");

class MyCliParser extends CliParser
{
  public function getHelpMessage()
  {
    global $argv;
    echo sprintf("Usage: %s [options] <file(s)>\nOptions :\n", $argv[0]);
    $this->getDescriptions();
    echo "\n";
    exit;
  }
}

//Building the parser and parsing the arguments
$cli = new MyCliParser($_SERVER["argv"]);
$cli->register($clihelp, false); // false because it not require an argument
$cli->register($clistring);
$cli->register($clisingleton, false); // false because it not require an argument
$cli->register($clibool);
$cli->register($clidir);
$cli->register($clifile);
$cli->register($cliint);
$cli->register($clienum);
$cli->parse();

//Showing the help message if asked
if ($clihelp->getValue())
{
  $cli->getHelpMessage();
  exit;
}

//Showing the options
var_dump($clistring->getValue());
var_dump($clisingleton->getValue());
var_dump($clibool->getValue());
var_dump($clidir->getValue());
var_dump($clifile->getValue());
var_dump($cliint->getValue());

//Showing the non options
var_dump($cli->getNonOptions());

/* Some commands :
php example.php --help
=> will show the help message

php example.php -c foo
=> the $clistring token will be set

php example.php -e -c foo
=> the $clisingleton token will be set

php example.php nonoption1 -i 42
=> one non-option argument : nonoption1

php example.php -i 42 nonoption1
=> same thing, different order

php example.php -i 42.5
=> shows an error : 42.5 is not an integer
*/

My own website about me, my projects in finaly online ! It is still simple, but I hope I will make it grow as soon as possible.