Reflectiv's blog

Bonnes pratiques Javascript

Cet article proposé par Christian Heilmann sur le blog des développeurs d'Opera liste des bonnes pratiques à appliquer en développement Javascript.

Il est rare d'avoir un article de cette qualité, donc je met le liens avec le sommaire (traduit) afin de vous donner un avant goût.

• Appelez les éléments (variables et fonctions) par leur nom - simple, court et lisibles
• Évitez les variables globales
• Gardez une convention d'écriture stricte
• Commentez autant que nécessaire sans trop en faire
• Évitez de mélanger avec d'autres technologies
• Utilisez une notation raccourcie lorsque cela est évident
• Modularisez : une fonction par tâche
• Améliorez progressivement
• Préparez votre code pour la configuration et la traduction
• Évitez les imbrications profondes
• Optimisez les boucles
• Évitez l'accès au DOM au maximum
• Ne vous basez pas sur les comportements des navigateurs
• N'ayez confiance en aucune donnée
• Ajoutez des fonctionnalités avec Javascript, ne créez pas trop de contenu
• Bâtissez votre code en vous basant sur les géants (YUI, JQuery, Dojo, etc)
• Le code en développement n'est pas le code en production

Un article vraiment complet et très intéressant !

Posted by Cyril Nicodème 

Snippet javascript : Programmation objet

Juste un petit rappel personnel sur comment bien faire un objet en javascript.

function someClass () {
        var _sPrivateVar = '';
        this._sPublicVar = '';

        function privateFunction () {
                return;
        }

        this.publicFunction = function () {
                return;
        }
}

// Add a static function :
someClass.someStaticFunc = function () {
        // Do something static here
}

// Add a new dynamique function into the someClass class :
someClass.prototype.newDynFunc = function () {
        // Do something dynamic here
        // You can access this like if you were into the class !
}

et en bonus, comment bien faire un plugin javascript avec possibilité d'étendre des fonctions du plugin:

// A plugin callable with $.plugin
;(function($) {$.plugin = function () {
        // Code goes here
        return this; // Enable chain functionnality like JQuery do
}})(jQuery);

// A plugin callable with $(DomElt).plugin, with DOMElt is some DOM element
;(function($) {$.fn.plugin = function () {
        // Code goes here
        return this; // Enable chain functionnality like JQuery do
}})(jQuery);

// Adding some functions for the plugin, accessible by $.plugin.doSth ()
$.extend($.plugin, {
        doSth: function () {
                // Do whatever you want
        },
});
// It works the same with $.extend($.fn.plugin, {}) for $(DOMElt).plugin.sth ()

Les bases de la poo en javascipt sont très bien expliquée ici

Posted by Cyril Nicodème 

Why the form validation are in the View part ?

The question is quite clear and I'm going to explain my point of view.

If you take a look at Struts or JSF,and I'm sure, for a lots of others frameworks out there, the form verification are made in the View side.

For example, this is a wrong method (IMHO) used by JSF templates :

<%@taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<f:view>
   <h:form>
      <h:outputText value="Name: "/>
         <h:inputText id="name" required="true" maxlength="20" value="#{user.name}">
            <f:validateLength minimum="3" maximum="20"/>
         </h:inputText>
         <h:message for="name" style="color: red"/>
         <h:commandButton value="Submit" action="success"/>
      <h:form>
</f:view>

The point I want to raise is the fact that it's generally the job of the web designer to make the template, the forms, but NOT to make the verifications !

Yes he need to know which value is needed, eventually which type is waited (for implementing nice date picker for example), but not to test if the string is too short or too long, if it's an email, etc.

The side that must handle this kind of operation must be the Controller, that know which type a field must be. Eventually, the Model side can impose its structure to the controller, but never the View side ! A webdesigner must never impose the structure of the data. Right ?

Ok now everyone is boiling about what javascript is able to, and I totally agree with that, but with restrictions.

Client-side verifications must be implemented only to improve user experience. Never forget that javascript can be disabled !

But it's a great idea to tell at your webdesigner the constraints for the form in the fact that he could implement a client-side verification, and then, your controller will do the server-side (final) verification, in case javascript is disabled, or some bad guy try to play with your code :p

I would be pleased to know your opinion about that :)

Posted by Cyril Nicodème 

Patron de développement de plugin JQuery

Le blog de JQuery propose un patron de développement pour la réalisation de plugins que je vous conseille de visiter afin de réaliser des plugins JQuery dignes de ce nom, et peut-être pourquoi pas finir dans le top 5 des meilleurs plugins de JQuery ? ;)

Le billet se trouve ici.

Posted by Cyril Nicodème 

Dojo : Script d'affichage de message temporaire

Je ne suis pas un partisan de Dojo Toolkit. Je l'utilise au travail parce que mon boss l'a choisi :p

Mais du coup, je développe quelques scripts dessus, et en voici un tout court tout simple qui permet d'afficher un message sur une certaine durée.

Je l'utilise pour indiquer à l'utilisateur le résultat d'une commande effectuée sans recharger la page.

Je le met ici, si ca peux servir ! :)

function showbox (sDiv, sMessage, iDuration) {
        dojo.byId (sDiv).innerHTML = '';

        if (iDuration == null)
                iDuration = 3000;

        if (typeof (_oFadeOut) != 'undefined')
                _oFadeOut.stop ();

        // On met la visibilité de l'élément à 0
        var _oFadeOut = dojo.fadeOut ({
                onEnd: function() {
                        // On met le texte de sMessage dans sDiv
                        dojo.byId (sDiv).innerHTML = sMessage;

                        // On fait un fadeIn
                        dojo.fadeIn ({
                                node: sDiv,
                                duration: 700,
                                // On attends x secondes
                                onEnd: function () {
                                        setTimeout (function () {
                                                // On fait un fadeOut
                                                dojo.fadeOut ({
                                                        node: sDiv,
                                                        duration: 700,
                                                        // Une fois finis on efface le contenu
                                                        onEnd: function () {dojo.byId (sDiv).innerHTML = '';}
                                                }).play ();
                                        }, iDuration);
                                }
                        }).play ();
                },
                node: sDiv,
                duration: 1,
        });

        _oFadeOut.play ();
}

Posted by Cyril Nicodème 

Affichez vos emails tout en évitant le spam !

Le site techblog.tilllate.com a testé durant plus d'un an différents moyens d'affichage d'email et leur résistance au spam. Il s'est avéré qu'au final, trois méthodes employées se sont avérées plutôt efficaces.

Pour ce faire, 9 différentes méthodes ont été testées :

• Changement du sens de lecture en Css
• Affichage altéré (display:none sur des parties n'existant pas dans l'email)
• Chiffrement ROT-13 (Rotation de 13 lettres dans l'alphabet)
• Utilisation des ATs et DOTs
• Génération de l'email avec Javascript
• Remplacement des @ et . avec les entitées correspondantes
• Découpage de l'email avec des commentaires html
• Utilisation de la fonction urlencode
• Texte pure

Sur ces 9 tests, seulement les trois premiers ont été convainquants à 100%.

Pour vous donner une idée, voici une image résultant du test :

Pour information, voici comment mettre au point ces 3 meilleures méthodes :

1. Changement du sens de lecture Css :

   <style type="text/css>
   span.codedirection { unicode-bidi:bidi-override; direction: rtl; }
   </style>
   <span class="codedirection">moc.elpmaxe@liamekaf</span>

2. Affichage altéré (display:none) :

   <style type="text/css>
   p span.displaynone { display:none; }
   </style>
   fakemailnull@example.com

3. Chiffrement Rot13 : Vous pouvez trouver un outil de chiffrement Rot-13 ici, ou utiliser la méthode str_rot13 de PHP.

   <script type="text/javascript">
   document.write("
   

Posted by Cyril Nicodème 

Useless javascript !

Deux bouts de codes javascripts, toatlement inutiles, donc totalement intéressants !!

Editer n'importe quelle page :

javascript:document.body.contentEditable='true'; document.designMode='on'; void(0);

Cliquez ici puis éditez n'importe quoi ! :)

Effet marrant sur les images :

javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200;
DI=document.images; DIL=DI.length;
function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style;
DIS.position='absolute'; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+"px";
DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+"px"}R++}
setInterval('A()',5); void(0);

Cliquez-ici pour voir l'effet ! :)

Un tremblement de terre ?

javascript:x=2;e=document.body;e.style.position="absolute";
function rt(){e.style.top=30-(Math.floor(Math.random()*x))+"px";
e.style.left=30+(Math.floor(Math.random()*x))+"px";x+=.6;if(x>30)x=2};
setInterval("rt()",30);void(0);

Cliquez-ici pour voir l'effet !

Un mouvement à la mexicain ?

javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200;
DI=document.getElementsByTagName("img"); DIL=DI.length;
function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute';
DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+ "px";
DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+" px"}R++}setInterval('A()',5);
void(0);

Cliquez-ici pour voir l'effet !

Trop inutile :p

P.S: Evitez de cliquez sur tout excepté l'édition :D

Posted by Cyril Nicodème 

La façon dont vos utilisateurs voient vos données

Le blog de Arnon Rotem-Gal-Oz nous montre la perception des données qu'on nos visiteurs sur un site web, totalement différent de la notre. Cette explication est faite par une image très explicite, que j'apprécie par sa clarté :)

Je pense qu'il n'y a rien de plus clair :)

Avec les améliorations des frameworks javascript, le développement de sites (pages) web tends le développeur à commencer par la réalisation de la page et d'effectuer la récupération des données en ajax (majoritairement).

Cette nouvelle approche impose un travail sur le visuel plus poussé. Et c'est vrai qu'il est toujours plus agréable d'avoir un site avec une belle mise en page des données qu'un pavé de texté noyé dans d'autres textes !

Posted by Cyril Nicodème 

Javascript Orienté Objet

J'ai trouvé au gré de mon surf un site qui explique très bien et en détail la programmation Orienté Objet en Javascript.

Malgré tous les mauvaises paroles que l'on à sur Javascript, il s'avère que ce langage est puissant et permet de faire plein de belle choses. La preuve avec les nouveau "Online Os" dont certains sont fait en javascript !

Voici l'url :
http://www.unixgarden.com/index.php/web/orientation-objet-de-javascript

Posted by Cyril Nicodème 

Installer Eclipse avec le plugin PHP (pdt) : JSEclipse

Après les infos pour installer le plugin Pdt pour PHP sous Eclipse, voici l'info pour installer JSEclipse, Javascript pour Eclipse.

Comme d'hab, c'est tout simple, il suffit d'ajouter un new Remote Site, avec comme url :
http://download.macromedia.com/pub/labs/jseclipse/autoinstall/

et voila, vous avez maintenant toutes les clés en main pour bien programmer du Web sous Eclipse ! :)

Posted by Cyril Nicodème