CyBWarrior

Lately, modern browsers allow to use graphics of the SVG type. It’s interesting because it is possible to interact with these graphics with the help of JavaScript. Not only for resizing the image or update the alt attribute, but even draw like a drawing software as Inkscape! More: it’s possible not only to draw, but to observe the events and to update the image accordingly! It becomes now possible to make amazing stuffs and there is almost no needs anymore of Flash to build interesting web applications.

Here is the proof: I had fun doing a little game (I also added it on ScriptLand) in order to test a little bit what is possible to do. It is just below: the goal is to disentangle the nodes. Warning! There is still some small bugs that I’ll fix – someday…

Please note that to do this, I used the beautiful Prototype Graphic Framework which make life easier!

Don’t hesitate to share your thoughts!

Today I experimented a weird issue while trying to update Prototype on a particular website. Code which worked correctly suddenly stopped to work with the 1.7 version.

After some investigations, I understood it was an issue with some JSON code. At first sight, this code seemed quite correct:

{
	mode : "exact",
	elements : "textarea_bouzi_txt_index_para_1",
	theme : "advanced",
	skin : "o2k7",
	plugins : "",
	theme_advanced_toolbar_location : "top",
	theme_advanced_toolbar_align : "left",
	theme_advanced_statusbar_location : "bottom",
	convert_urls : false,
	relative_urls : false,
	forced_root_block : false,
	extended_valid_elements : "div[*],iframe[*]"
}

So, why didn’t this work? Looking at this closer, we see it is not correct: properties are not between quotes. This code (I think it is provided by TinyMCE - but it is to check) should rather be:

{
	"mode" : "exact",
	"elements" : "textarea_bouzi_txt_index_para_1",
	"theme" : "advanced",
	"skin" : "o2k7",
	"plugins" : "",
	"theme_advanced_toolbar_location" : "top",
	"theme_advanced_toolbar_align" : "left",
	"theme_advanced_statusbar_location" : "bottom",
	"convert_urls" : false,
	"relative_urls" : false,
	"forced_root_block" : false,
	"extended_valid_elements" : "div[*],iframe[*]"
}

Nevertheless, it doesn’t explain why this code, as wrong as it could be, suddenly stopped to work.

The answer is that recent browsers from now on implement in a native way their own JSON parser. There is no need anymore to use a JavaScript JSON library. You simply have to do:

JSON.parse('["some JSON code"]');

And it becomes interesting because in its last version, Prototype try to rely on the the native JSON parser of the browser when it is available, in order to increase performances. But there is the problem: this parser is generally more strict. Indeed, I tried with Firefox 3.6 and Internet Explorer 9.0, and in both cases, the JSON code without quotes triggers an error.

Strictly, one can’t say it is a bug of the parsers, because the JSON code is effectively not well formed. However, a very lot of libraries which doesn’t provide JSON code with properties into quotes exist (likely the TinyMCE version I use, as it seems). All this code will crash the last Prototype version, which is problematic.

The best solution would be to provide well formed JSON code to Prototype, but it is not always possible. Remains an other simple solution, which consists to downgrade Prototype in order to avoid it to use the native parser of the browser when one is available, and to force it to use its own parser.

To do this, there is several solutions, which all require to modify the prototype.js file a little bit. I list them by a personal preference order:

• Replace the 772 line with:

  evalJSON: evalJSON,

• Replace the 535-537 lines with:

  var NATIVE_JSON_PARSE_SUPPORT = false;

• Replace the 718-721 lines with:

  function parseJSON() {
      var json = this.unfilterJSON();
      return evalJSON(json);
  }

Make your own choice! Even though the best solution remains to have clean JSON code at start

I know some people who like to have a PHP code which triggers no « notice » errors. A notice is triggered when, for instance, you try to access to a var although it is not initialized:

//$bob = "not initialized: it's a comment";
print $bob; // it will trigger a notice

This is not exactly an error in the proper sense. PHP is a script language, which is not as strict as a « real » language, as Java for instance. Having some freedom in the code won’t imped this one to work correctly. In my humble opinion, a code which would trigger countless notices wouldn’t bother me. Therefore, an easy solution to get rid of notice errors is to change the error level on the error reporting. For instance, at the very top of the PHP code, something like that:

error_reporting(E_ALL | ~E_NOTICE);

Or in the php.ini file:

error_reporting = E_ALL | ~E_NOTICE

However, this only hide the problem – if we consider it’s a problem -, because the errors of this kind continue to exist ; they are simply not shown anymore.

For a good practice, the real strict solution will thus to rewrite the code in a way it doesn’t trigger notice anymore. As almost of these errors are due because of uninitialized vars we use without testing, an easy solution is to ensure they really contains something before anything else. For instance, our code above becomes:

//$bob = "not initialized: it's a comment";
if(isset($bob))
{
	print $bob; // it will trigger a notice
}
else
{
	// do something else
}

One understands that repeat this code each time could be easily painful… But one can avoid this pain thanks to the small following function:

function getIfSet(& $var, $default = null)
{
	if(isset($var))
	{
		return $var;
	}
	else
	{
		return $default;
	}
}

This function accepts as the first argument the var we would like to use, but from whom we don’t know if it has content or not. The second argument, which is optional (null is its default value), is the value which will be returned if the var is not initialized:

//$bob = "not initialized: it's a comment";
print $bob; // it will trigger a notice
print getIfSet($bob); // this won't trigger an error and it will display nothing
print getIfSet($bob, "not initialized"); // this will print "not initialized"

This function will be surely useful to all those who would like to get rid of these kind of errors!

I am proud to announce you a new Android application: MagicDroid.

The principle is very simple. It is a magic trick based on the binary numeration, which should be as old as this one.

In fact, I built this application foremost as a test. In deed, the Philosopher’s Calendar required several weeks of intensive work, whereas this one only few hours. I wanted to compare and observe what would be the success. Does an application require to be very finely-worked, improved, based on a good concept to be acclaimed? Or only a tummy stuff is enough?

The result are self explanatory and confirm what I suspected. For the sake of transparency, I publish for you my dear statistics:

Knowing I did MagicDroid several weeks later: these number have to be balanced. Nevertheless, we see that MagicDroid, in spite its defects, is very more attractive! Especially active installations: it means a lot of people use it on a regular basis!

If you want to have success, get rid of cultural application: prefer entertainment!

As MagicDroid seems to be attractive in its current state, I will try as soon as I have time to improve it and make it more interesting. I already have some ideas!

Since I discovered Android, I feel like I was reliving my first emotions I had when I was discovering computers and programming few years ago: I want to program all kind of application. And I just finished the first! Indeed, I collaborate with Morbleu ! in order to finalize the « Philosopher’s Calendar ». If you have Android, don’t hesitate to download the application and tell what do you think!

Rest of my adventures with my brand new Samsung R730 and the installation of Ubuntu. I reassure everybody: all worked perfectly! The only small issue I encountered was about the adjustment of the brightness with the FN key. The applet was correctly shown, but there was no effect.

After some researches, to fix the issue, I had to:

1. In the BIOS, set the brightness adjustment to « User » and not to « Auto » anymore.
2. Install the packages samsung-backlight, samsung-tools, nvidia-bl-dkms, after adding the repository ppa:voria/ppa. In order to do this:
   

   sudo add-apt-repository ppa:voria/ppa
   sudo apt-get update && sudo apt-get upgrade
   sudo apt-get install samsung-backlight samsung-tools nvidia-bl-dkms

3. Change a line in the configuration of grub (as surprising as it sounds):
   

   gksudo gedit /etc/default/grub

   The line to update (the modification is in bold) :

   GRUB_CMDLINE_LINUX_DEFAULT= »quiet splash acpi_backlight=vendor« 

   Then :

   sudo update-grub

4. A reboot and now it should works!

As I promised in my new year intents, I will try to innovate with posts about other topics than only programming. In particular, I will try to announce my first steps with the new devices I buy. And there is already some work: recently, I purchased an Archos 101 IT, Playstation Move pads and, above all, yesterday a Samsung R730 laptop.

I bought this computer because the one I work with daily since 2005 or 2006, a Dell Inspiron 6400, starts to be tired. The Samsung is for sell at Boulanger for 499 EUR. More, Boulanger makes 50 EUR OFF as a voucher, which make the price to 449 EUR. I read some positive feelings before from users who use Ubuntu on it and I was confident.

Because precisely, since some months/years, I exclusively use Ubuntu at home. Therefore, I didn’t care about the Windows Seven which was set up on the Samsung. I tried to explain this to the seller to make him uninstall it and make me a discount – more and more dealers make that -, but he didn’t want or cannot: instead of this, I rather tried to sell me an anti-virus or some additional warranties I didn’t need (anti-virus with Linux ? why ? yes, I know, it is a big discussion…).

So, I went back to my home with a laptop running with Windows Seven… Because I all the same bought with operating system (we can roughly estimate it to 50, not to say 100 EUR of the price!), I told myself for installing Ubuntu: I might as well make some dual boot! I already did it with my old Inspiron, and it worked very good – until I needed the totality of the disk space before I come to a full Ubuntu – I kept XP only because I needed it to use my Nokia phone.

This time, all was correct too. I gave 40 Gb to Seven in the 320 Gb of disk space, and the rest to Ubuntu – don’t know why, but the rest was only about 240 Go: some bytes get lost during the install… Anyway, I was able to boot as well with Ubuntu than with Seven!

All was okay until I remark in Grub during the startup I had in fact three different operating systems: Ubuntu and Seven as expected, but also a weird Vista. I tried to run this last one, just to know…

First mistake! I had a Samsung system restoration I didn’t want! Obviously, I quit all of this as soon as I came on the start up screen by clicking on the window cross, hoping I avoid the worst.

Second mistake! I had a computer which was now unable to boot and to have Grub… Without a doubt, this Vista/restorating system broke the MBR of my brand new computer!

So, I ran my computer with an Ubuntu Live CD in order to try to figure out what’s going wrong. I discovered all was correct regarding my different partitions. What was wrong should be indeed Grub, the boot loader or MBR – I confess it is not yet clear for me.

For the moment I tried several things to fix this: change the partition flag and also use a Vista restorating CD to fix the Windows boot – but it didn’t work.

Obviously, all of this wouldn’t happened if I get rid of Windows and move to a full Ubuntu. But I wanted to keep Windows, it is because: 1) I paid it in the price and the refund procedure of Samsung is too restrictive 2) some devices (as my Nokia E71 or my iPod Shuffle) refuse to provide applications to give access to them from Ubuntu, imposing to use Windows (I tried Wine for this things, but I didn’t succeed).

Finally, I reinstall Grub in the way the following tutorial describe it and it fix my problem: how restore GRUB?

Happy new cyber year 2011 to all !

Thank you all to continue to follow us despite the interruptions and the many rebuilding of the website. CyBWarrior made indeed a lot of pauses, reforms and revolutions, and its shape wasn’t always easy to follow.

Who remembers the time CyBWarrior competed with Comment ça marche or Developpez.com? Unfortunately, this time is  behind us: some choices, some decisions both personal and professional imped us to develop CyBWarrior on this way as much it would have been possible.

That’s why we made the decision a little time ago to transform CyBWarrior into a blog.Probably is this the form which is the best to make it born again. But it will require that we keep to this choice! Therefore, this good intention for 2011: more frequent updates for this year! And probably on topics other than only programing: as far as possible, let’s having some fun!

By the way, you probably already remarked that we try to express ourself in American/English. It’s not our mother tongue, so it’s possible you will see many mistakes in our sentences. Don’t hesitate to tell us if something is wrong!

1. Properties
   1. length
2. Methods
   1. concat()
   2. join()
   3. reverse()
   4. slice()
   5. sort()
3. Multidimensional arrays
4. Associative arrays

Arrays allow to easily stock data in order to access to it after. A variable can only contain a unique value. An array can contain almost an infinite number. Because JavaScript is object oriented, arrays don’t make an exception : they are objects too with properties and methods.

To create an object, the syntax is the following:

var name = new constructor(argument1, argument2, ...);

The name must be a valid one, which must follow the same rules as for the variable names. The constructor must be a valid constructor function (we will study this in details in the following posts). In our case, the constructor is Array (with a uppercase A). Then, there is some arguments. They are optional.

Therefore, to create an array which we will name books, we write:

var books = new Array();// don't forget the empty parenthesis

Then, it is possible to access to the array’s elements by specifying the element index between brackets ([ and ]). Thus:

var books = new Array();

books[0] = "Critias";
books[1] = "Thoughts";
books[2] = "Odysseys";

document.write("1<sup>st</sup> book : " + books[0] + "<br>");// Critias
document.write("2<sup>nd</sup> book : " + books[1] + "<br>");// Thoughts
document.write("3<sup>thd</sup> book : " + books[2] + "<br>");// Odysseys

A second possibility to create an array is to use the literal way. Elements have to be given as arguments during the array creation. The following example is the equivalent of the previous:

var books = new Array("Critias", "Thoughts", "Odysseys");
document.write("1<sup>st</sup> book : " + books[0] + "<br>");// Critias
document.write("2<sup>nd</sup> book : " + books[1] + "<br>");// Thoughts
document.write("3<sup>thd</sup> book : " + books[2] + "<br>");// Odysseys

It is also possible to use an other form, without using the Array keyword, but with brackets:

var books = ["Critias", "Thoughts", "Odysseys"];
document.write("1<sup>st</sup> book : " + books[0] + "<br>");// Critias
document.write("2<sup>nd</sup> book : " + books[1] + "<br>");// Thoughts
document.write("3<sup>thd</sup> book : " + books[2] + "<br>");// Odysseys

A last possibility is to give as an argument the length of this one. Example:

var myArray = new Array(10);// 10 elements

// see below for the length property
document.write(myArray.length);// Output -> 10

Properties

Like any other object, Array has also properties. Actually, Array has got only one property:

length

Return the number of elements an array contains. For instance:

var books = new Array("Critias", "Thoughts", "Odysseys");

document.write(books.length);// output -> 3

This property is very useful to scan an array with a loop:

var books = new Array("Critias", "Thoughts", "Odysseys");

for(var i=0; i < books.length; i++)
document.write("books N°" + i + " : " + books[i] + "<br>");

Méthodes

concat()

Allows to make one array from two different ones. The array to add has to be passed as an argument:

var myBooks = new Array("Critias", "Thoughts", "Odysseys");
var yourBooks = new Array("Journey in Italia", "Logic of Scientific Discovery");

myBooks.concat(yourBooks);// we add the yourBooks array

join()

Makes a string from the array’s elements. Elements are separated with the string given as an argument, but which is optional.
Example:

var books = new Array("Critias", "Thoughts", "Odysseys");
var Text = books.join("<br>");

document.write(Text);

reverse()

Reverses the order of array’s elements. 1^st becomes the last, 2^nd the penultimate and so on…

var books = new Array("Critias", "Thoughts", "Odysseys");
books.reverse();

for(var i=0; i < books.length; i++)
document.write(books[i] + "<br>");

slice()

Returns an array which contains a part of the array. 1^st argument is related to the start index. 2^nd argument is optional. It matches to the end index. If it’s omitted, all indexes until the end of the array will be returned.

var list = new Array("one", "two", "three", "four", "five");
var mylist = list.slice(1, 4);

for(var i=0; i < mylist.length; i++)
document.write(mylist[i] + "<br>");

sort()

Allows to sort an array in accordance with its elements. If no arguments are given, the array is sorted following an alphabetical order. The allowed argument is a sort function (functions will be explained later). This function must accept two arguments and must return a negative value is the first argument must be moved before the second one, or a positive value if it is the contrary.

var list = new Array("one", "two", "three", "four", "five");
list.sort();

for(var i=0; i < list.length; i++)
document.write(list[i] + "<br>");

Multidimensional arrays

To create an array with more than one dimension, there is nothing more to do than create an  Array object array for each row of the array:

var table = new Array(10);

for(var i=0; i < table.length; i++)
table[i]=new Array(10);

// One access to the array's elements like that:
table[5][5] = "I'm almost in the middle of the table";

Based on this idea, it is possible to use as many dimensions as we want.

Associative arrays

The difference between an associative array and a classical array is that an associative array don’t use the numerical way to index the elements, but names. For instance, with a classical array, one access to an element like that:

var myArray = new Array();

myArray[0] = "Goldorak";// access to the element 0

document.write(myArray[0]);// output -> Goldorak

With an associative array, we access like that:

var myArray = new Array();

myArray["name"] = "Goldorak";// we access to the element "name"

document.write(myArray["name"]);// output -> Goldorak

These arrays are in some cases more handy to use. To scan an array of this kind, it is required to use the  for...in loop:

var winners = new Array();

// Critérium du Dauphiné 4-11 juin 2000
winners["Grenoble- La Bastille (prologue)"] = "Alberto Lopez de Munain";
winners["Grenoble - Lyon"] = "Frédéric Guesdon";
winners["Châtillon sur Chalaronne - Saint Etienne"] = "Fabrice Gougot";
winners["Saint Etienne - Saint Etienne (contre la montre)"] = "Lance Armstrong";
winners["Romans - Le mont Ventoux"] = "Tyler Hamilton";
winners["Beaumes de Venise - Dignes les Bains"] = "Tyler Hamilton";
winners["Digne les Bains - Briançon"] = "Inigo Cuesta";
winners["Saint Jean de Maurienne - Salanches"] = "Laurent Jalabet";

for(stage in winners)
document.write(stage + " : " + winners[stage] + "<br>");

Each time a new file is added in a device, the Android operating system seems to index it to the new media library. This feature is very interesting, because it allows to retrieve automatically all photos, movies and songs. However, some cases exist that we don’t want these added files to be indexed.

To avoid this, it’s very easy: all you have to do is to add in the folder which contains the file(s) (or sub-directories) a simple (empty) file named:

.nomedia

Easy and effective!