12
mar/10
0

Le trace, ca lasse…

Après une longue et pénible étude de cas portant sur plus de 10 000 applications scrupuleusement sélectionnées, mes conclusions sont formelles :

La fonction trace() de flash n’est décidément pas très pratique et reste surtout globalement inutilisable en ligne.

Depuis longtemps les hommes de toutes nationalités se sont unis dans un effort commun pour offrir aux créateurs de web que nous sommes des alternatives toutes plus séduisantes les unes que les autres pour remplacer cette fonction trace une bonne fois pour toutes.

On peut citer par exemple le Flash Inspector, aujourd’hui devenu pratiquement introuvable, même sur eBay :
http://www.luminicbox.com/blog/

le désormais célèbre Air Logger de Abe, gérant le debug multi flash et plein d’autres trucs cools :
http://code.google.com/p/airlogger/

Ou encore le fabuleux Monster Debugguer, qui n’en peut plus de repousser les limites du debug de feignasse.
http://www.demonsterdebugger.com/

Chaque outil dispose de son mode de dialogue propre et implique l’inclusion de dépendances spécifiques à nos projets.

Certaines méta librairies proposent depuis longtemps des solutions de dialogue avec ces applications pour faciliter la tâche des collègues :

C’est le cas par exemple de Lowra ou de la grandissante librairie de Skitoo.

Les solutions proposées sont complètes, proposant par exemple un système avancé de filtrage des messages, une configuration via du XML et plein d’autres trucs déments.

Toujours dans mon souci de faire comme les autres mais en moins bien, voici une présentation du package net.babeuf.logger dont le but assumé est de proposer l’approche la plus minimaliste possible du trace en ligne en terme de code à insérer dans son projet. J’ai donc délibérément supprimé toute instanciation, initialisation ou autre paramétrages pour ne garder que quelques méthodes statiques :

-log
-debug
-info
-warn
-error
-fatal ( bouh )

et un booléen enabled pour activer désactiver le tout.

toutes ces méthodes ont le même prototype

debug( message : *, obj : Object = null )  : void

A savoir : le message, sous n’importe quelle forme ( string, number, XML, Object, Array, etc ) et en optionnel une référence vers l’object appelent le trace ( le plus souvent this ou rien du tout) pour s’y retrouver à l’affichage.

A chaque sortie possible correspond une classe présentant ces méthodes statiques à l’application.

net.babeuf.logger.AirLogger -> sortie dans le Air Logger
net.babeuf.logger.Firebug -> sortie dans la console de Firebug
net.babeuf.logger.FlashInspector -> sortie dans le Flash Inspector
net.babeuf.logger.JSAlert -> sortie dans des alertes Javascript
net.babeuf.logger.PopLogger -> sortie dans une popup html
net.babeuf.logger.EveryWhereLogger -> sortie partout en meme temps ( avec un partout paramétrable ) + le trace originel

Gros plan sur le PopLogger seule exclusivité de ce package puisqu’il permet à un flash intégré dans une page HTML d’envoyer des messages vers une popup HTML qui s’ouvre automatiquement.
Aucune inclusion de javascript n’est nécessaire.

PopLogger.debug( "debuggue moi grand fou" ) ;

dans le flash, et c’est tout !

le PopLogger en action

Bien sur, les popups ne doivent pas être bloquées sur votre navigateur sinon, c’est raté.

Le EveryWhereLogger permet quant à lui de cumuler tous les logger en même temps sans réfléchir, ce qui fait du bien une fois de temps en temps dans une dure journée de labeur.

par défaut, toutes les sources sont actives à l’exception du JSAlert, bien lourd à la longue et du PopLogger, qui ne fait pas bien dans une démo client.

Chaque sortie est activable/Désactivable séparément si besoin :

EveryWhereLogger.firebugEnabled = true  ;
EveryWhereLogger.flashInspectorEnabled = true  ;
EveryWhereLogger.airloggerEnabled = true  ;
EveryWhereLogger.alertEnabled = true  ;
EveryWhereLogger.popEnabled = true  ;

Pour ceux qui n’ont pas encore totalement décroché, une petite démo récapitulant tout ça :

http://www.babeuf.net/samples/logger/

et puisque c’est devenu une habitude, les classes ( dispos sur mon svn ).

Merci de votre attention.

6
oct/09
0

Pixeliser une image ? Mais quelle riche idee !

C’est en consultant le passionnant blog Hidiho! de Nicolas Barradeau riche en expérimentations graphiques assez démentes que je me suis dit :

« Tiens ? Pourquoi ne pas faire la même chose en moins bien histoire d’alimenter mon blog où de toute façon personne ne viendra jamais ? »

Fort de cette riche idée, me voici en mesure de vous présenter une magnifique classe Actionscript proposant une fonctionnalité aussi utile qu’esthétique : pixeliser une image.

Le principe est simple : l’image source est transformée en BitmapData et coupée en rectangles de la taille spécifiée.
Chaque rectangle est ensuite rempli avec la couleur moyenne de la zone.

Voila comment on s’en sert :

var bmp : Bitmap = new Bitmap( Pixelate.pixelate( SOURCE, TAILLE D UN PIXEL )) ;

incroyable non ?

Voici une petite démo avec une jolie asiatique dedans pour bien comprendre le non intérêt de cette classe et en même temps assouvir vos instincts de nerds fans de Hentaï.


la méga classe !

27
juil/09
2

Benchmark : booste ton code

Je vais commencer par vous présenter une petite classe dispo sur mon SVN qui peut s’avérer utile pour certains :

la classe Benchmark.

Son but est simple, pouvoir comparer facilement la rapidité d’exécution de plusieurs fonctions pour au final ne conserver que la plus rapide (ou la plus lente, c’est vous qui voyez).

Comme un petit bout de code vaut mieux qui long discours confus, exemple :

Création des fonctions à comparer :

private function func1( a : Array ) : void { for ( var  i : int = 0 ; i < a.length; ++) ; }
private function func2( a : Array ) : void { for each ( var  i : * in a ) ; }
private function func3( a : Array ) : void { var l : int = a.length ; for ( var  i : int = 0 ; i < l; ++) ; }

Initialisation du benchmark avec deux paramètres :
-le nombre d’itérations : correspond au nombre de fois ou chaque fonction sera exécutée à chaque boucle
-le nombre de boucles : correspond au nombre de boucles à faire pour calculer la moyenne

on ajoute le bench à la scène pour afficher le résultat.

var bench : BenchMark = new BenchMark(1000, 10) ;
addChild(bench);

on peut désormais ajouter ses fonctions au bench :
la méthode addFunction accepte les paramètres suivants :
- la fonction à tester
- le scope de la fonction
- la label a afficher pour cette fonction
- le reste des paramètres à transmettre.

// The param to give to the functions
test = new Array() ;
for ( var i : Number = 0 ; i < 5000 ; i++)  test.push(i) ;

bench.addFunction( func1, this, "for with length inside", test) ;
bench.addFunction( func2, this, "for each", test) ;            
bench.addFunction( func3, this, "for int", test) ;

Une fois ceci fait, il ne reste plus qu’à lancer le test pour obtenir le résultat :

bench.start();

Résultat :

capture benchmark

Et oui je suis également un UI Designer émérite.

la classe !