javascript

Ma Killer App

lundi 13 juillet 2009

C’est l’été fini de se retourner dans son lit, c’est l’heure de sortir des choses concrètes. Il y a bien longtemps que j’ai commencé ça et jusqu’alors je n’avais pas vraiment eu de créneau pour pouvoir le présenter avec toute l’attention qui doit lui être apporté.

Je vous présente donc enfin mon compresseur javascript : JSXS.

Lire la suite

JSEclipse : un éditeur javascript pour Eclipse

dimanche 29 avril 2007

structure de prototype avec JSEclipseEnfin un éditeur javascript gratuit pour Eclipse. JSEclipse prend en charge la coloration syntaxique, l’auto-completition basée sur les fonctions natives de javascript ou bien sur les librairies enregistrées.

Installation avec le gestionnaire d’Eclipse.

Regardez le screen, si c’est pas merveilleux cette structuration de prototype.

Que dire de plus, si ce n’est que c’est interAKT, maintenant branche de Adobe, qui developpe ça. Il semble qu’Adobe tente d’investir de plus en plus dans Eclipse et dans le freeware, et j’ai découvert il y a peu de temps que Flex passera en open-source sous la licence Mozilla avant fin 2007 !?! Ils semblent changer radicalement de politique, moi qui bafouait leur noms, je commence de plus en plus à les appréciés.

clipperz : online password manager

samedi 28 avril 2007

J’ai longtemps cherché un outils come celui-ci, et j’ai même entreprie d’en créé un, que je n’ai pas finalisé …

Clipperz est un gestionnaire de mot de passe en ligne, pour une utilisation sur le web.

Il vous permet de stocker vos mots de passes de tout vos compte sur le net. Qui n’a jamais rèvez de ne plus jamais entrer de mot de passe ?

Le système est simple :

  • creez votre compte clipperz (je vous conseille un mot de passe très compliqué, ça assurera la sécurité de tout les autres)
  • allez dans l’onglet bookmarklet, et vous faites glisser le lien Add to Clipperz dans la barre personnel de firefox (Affichage > barres d’outils > barre personnelle) ou n’importe où avec Opera
  • allez sur la page d’authentification que vous souhaitez retenir
  • entrez votre login et votre mot de passe sans valider
  • clickez sur le bouton Add to Clipperz que vous avez ajouter
  • copiez le contenu
  • allez dans votre espace clipperz et dans la setion Cards et clickez sur add new card
  • enfin, saissez le titre de votre Card et coller le contenu, puis clickez sur create
  • Les informations de login sont enregistrés, il ne vous reste plus qu’a clickez sur save

Maintenant vous n’aurez plus qu’a clicker sur le lien de cette page dans le cadre Direct Login de Clipperz.

Je vous l’accorde, ce n’est pas encore si aisé que ça, Mais ça permet une sécurité maximum.

Lire la suite

upload file en AJAX : méthodes

jeudi 12 avril 2007

j’ai découvert plusieurs méthodes permettant d’uploader des fichiers en AJAX sans rechargement de page. Chacune d’elles ont leurs avantages et leurs inconvénients. Comme on peut remarquer des différences entre les procédures de sécurité des navigateurs, la majorité de ses méthodes sont donc restreintes à certains d’entre eux. Mais on peut remarquer qu’il existe 2 classes véritables de navigateur : les bons, compatibles le plus possible W3C : firefox, opera, safari, konqueror… et l’opposé, le mauvais et tristement célèbre : IE.

Lire la suite

javascript eval global final

vendredi 6 avril 2007

Voici la release finale de la méthode pour utiliser la function eval dans un contexte global.

var globaleval =  function(script){
  if(window.execScript){
    return window.execScript(script);
  } else if(navigator.userAgent.indexOf('KHTML') != -1){ //safari, konqueror..
      var s = document.createElement('script');
      s.type = 'text/javascript';
      s.innerHTML = script;
      document.getElementsByTagName('head')[0].appendChild(s);
  } else {
    return window.eval(script);
  }
}

Ceci fonctionne sur tout les navigateurs acceptant javascript. Si vous avez des problèmes, merci d’en faire part!


Lire la suite

javascript eval global : part 2

mardi 27 février 2007

Après une première approche non sans faille de l’évaluation d’un code javascript dans un contexte global , voici la seconde version, compatible FireFox et IE et tout les navigateurs dérivés.

var globaleval = function (code){
  if(window.execScript) window.execScript(code);
  else window.eval(code);
}

Et oui il fallait savoir que le navigateur de l’homme le plus riche du monde implémente une méthode : window.execScript inconnu des standards.

Cette méthode n’est pas compatible avec Safari. Je travaille encore dessus mais il semble que KHTML (le moteur de base de Safari et de Konqueror) soit allergique à une déclaration propre…

La méthode utilisé par les framework tel que prototype semble être celle qui donne le meilleur résultat. Il s’agit de la méthode setTimeout(code,0) seulement les variables évaluées ne sont disponibles que dans un prochain appel non inline (provoquer par un évênement ou bien un autre appel avec setTimeout).

J’ai déjà passer beaucoup de temps dessus sans succès… De plus pour tester les résultat j’utlise Swift qui implémente le même moteur que Safari (WebKit) et on ne peut pas dire que ce soit une lumière… normal c’est un safari 🙂

Il y aura donc surement une troisième partie, entièrement compatible cette fois.

mise à jour : Et la voilà, code final pour un eval javascript propre

réducteur/obscurateur/encodeur de javascript

jeudi 8 février 2007

Si vous voulez mettre en ligne vos lourds et gros code javascript, la moindre des choses seraient de les réduires afin que le temps de chargement de ceux-ci soient minimum.

Je ne saurais donc trop vous conseiller cet outil en PHP : javascript-packer

A la base disponible en javascript sur le site de Dean Edwards, qui, on peut le dire est l’inspirateur du framework Prototype, cet outil a été developpé en plusieurs autre languages: .NET, python, Perl et meme en Ruby. bizarrement, aussi en WSH (une sorte de javascript en ligne de commande pour Windows)

Vous me direz il en existe surement beaucoup des outils comme ça… oui seulement il ne font pas tous le boulot très bien.
La différence réside dans la prise en compte ou non des pre-incrémentation et post-incrémentation :

var a = 2;
var b = 3;
var c = b + ++a; //c = 3 + 3 = 6; a= 2 + 1 = 3; b = 3;

La pluspart des outils enlève betements les espaces, on obtient donc :

var a=2;var b=3;var c=b+++a;

ici le compilateur comprendra :
var a = 2;
var b = 3;
var c = b++ +a; //c = 3 + 2 = 6; a= 2; b = 3 + 1 = 4;

ce qui fait une certaine différence…

De plus il vous offre la possibilité de compresser votre code si vous avez vraiment quelque chose de gros à éxécuter.

L’auteur travaille actuellement sur une version d’obsucuration des variables non-globale ce qui permettrais de réduire encore plus la taille.

Update : j’ai créé le mien 😉 jsxs

input file et javascript

lundi 5 février 2007

Voulant développer un file uploader simple et compatible, je me suis penché sur les spécifications du input type file et de ses différences suivant les navigateurs.

On remarque tout d’habord qu’aucun d’eux ne respecte le W3C et sur plusieur point :

  • Ce dernier dit que l’on peut prédéfinir le fichier à uploadé en attribuant un chemin dans la propriété « value ». Ni Opera, ni FireFox, ni meme IE ne le fait. Cela est compréhensible, c’est une question de sécurité.
  • En ce qui concerne FireFox et Opera, la méthode click() d’un input file n’a aucun éffet… vous ne pourrez donc pas lancez la fenetre de selection de fichier à l’aide d’un lien simple. Il faut impérativement que l’utilisateur click sur le bouton « Parcourir… » du input file pour pouvoir selectionner un fichier. Ce qui limite énormément les possibilités !!! D’autant plus que cela ne me semble pas justifié : il faudrait une sacré chance pour que l’utilisateur click par le plus grand des hazard inintentionnellement sur un fichier puis sur « ouvrir » (qui aura pour éffet de selectionner le fichier dans le input file). A noté que Internet Explorer accepte et éxécute cette fonction correctement.
  • Et pour Internet Explorer maintenant, la méthode cloneNode() ne copie pas réellement l’élément input et sont contenu car il vide l’attribut « value » de celui-ci si il existe. Exemple :
    inputfile.onchange = function(){
      alert('value:'+this.value); //affiche 'value:' + le chemin de votre fichier
      var newfile = this.cloneNode(true);
      alert('new value:'+newfile.value);  //affiche 'new value:' uniquement car newfile.value == ''
    }

    la encore, je trouve ça totalement injustifié ! A noté qu’Opera et FireFox copie correctement le noeud avec la valeur.

Du coup, aucune méthode correcte, simple et portable sans iframe visible ne permet d’uploader des fichiers parce que personne n’arrive encore à s’entendre sur une spécification globale. Si vous utilisez GMail, vous pourrez remarquer que celui-ci a une méthode différente en fonction des navigateurs pour l’upload de pièce jointe sans ce servir d’iframes visibles. Il faut dire qu’avec les recommandations du W3C la dessus, on pourrait pépom votre disque dur tout simplement. Donc c’est simple, ici tout le monde a fait et fait encore de la ……

J’ai dernièrement recensé les principal méthodes permettant de faire un input file en javascript / AJAX ici.

prototype JS v1.5

mercredi 31 janvier 2007

La nouvelle version du framework javascript prototype a été lancé il y a une dixaine de jours à peu près en meme temps que leur nouveau site : prototypejs.org

J’était partie mécontent de cette nouvelle version, car, pour commencer, lorsque j’ai remplacer l’ancienne par celle ci dans mes scripts existants, beaucoup de fonctionnalité ne marchaient plus… Ils semblent qu’ils aient implémenté beaucoup de nouvelles fonctions puissantes mais qui diffères légèrement des fonctions originales.

Lire la suite

form addEventListener submit

mardi 30 janvier 2007

J’ai capté pourquoi les retours d’EventListeners dans les addEventListener associés à l’action submit sur un form ne marchent pas.

un petit bout de code pour l’exemple :

document.forms[0].addEventListener('submit',function(){return false;},false);

Cela n’annulera pas l’action sur lorsque l’ont click sur un boutton submit dans le formulaire.
La raison est simple, il peut y avoir plusieurs EventListeners associé au meme éléments et à la meme action, il serait donc dure de savoir quel valeur de retour le moteur va prendre en compte si il y en a plusieur.

Pour cette raison, le code retournant la valeur de retour définissant si le formulaire doit etre envoyé ou non doit etre placé dans la propriété onsubmit de l’élément :

document.forms[0].onsubmit = function(){return false;},

Maintenant, le formulaire est désactivé et ne s’éxécutera uniquement si l’on fait apel à la méthode :

document.forms[0].submit();

à noté que cela est aussi valable pour les action click des liens, la méthode addEventListener ne marchera pas, il faut utiliser :

document.links[0].onclick = function(){return false;},