À la découverte de jsFiddleFlux RSS

Publié le 29/10/2011 à 15:19 dans la catégorie Revue de web.

3 commentaires.

Introduction

jsFiddle.net est une nouvelle plateforme de partage pour développeurs. Elle permet de mettre en ligne des extraits de code et de les rendre ainsi accessibles à tous

Inscription

L'inscription au site est rapide et gratuite même si l'équipe travaille acutellement sur la mise en place de services payants. Il ne vous sera demandé qu'un login, un mot de passe et votre adresse e-mail ainsi que de répondre à une question de vérification anti-robots. Pour ceux qui s'inquiéterais de la probabilité de spam suite à cette inscription, je n'ai reçu à ce jour aucun e-mail nuisible de leur part.

Créer un nouveau Fiddle

Vous pouvez créer un nouveau fiddle depuis n'importe quelle page en cliquant sur le logo. Dès lors vous pouvez le configurer depuis la barre d'options sur la gauche de l'écran :

  • Choix de la méthode d'inclusion du code JavaScript.
  • Chargement d'une librairie JavaScript.
  • Choix des panneau à afficher (CSS/SCSS, JavaScript/CoffeeScript/Javascript1.7).
  • Choix des ressources externes à inclure (feuille de style, fichier de script).
  • Saisie du titre, de la description et du DocType.
  • ...

Vous pouvez à tout moment sauvegarder grâce au bouton save/update (car jsFiddle gère les versions) ou en utilisant la combinaison de touche Ctrl+S.

Exporter et partager

Chaque fiddle est carractérisé par un identifiant unique (qui lui sert de nom si vous ne l'avez pas défini) et qui se trouve à la fin de votre barre d'adresse. Vous pouvez insérer vos fiddles dans une page html via une iframe construite sur le modèle :


<iframe style="width:100%;height:300px;border:none;" src="http://jsfiddle.net/lbonnargent/[IDENTIFIANT_DU_FIDDLE]/embedded/"></iframe>

Vous pouvez également choisir la version de fiddle à afficher :


<iframe style="width:100%;height:300px;border:none;" src="http://jsfiddle.net/lbonnargent/[IDENTIFIANT_DU_FIDDLE]/embedded/[VERSION]"></iframe>

Où encore les différents onglets à afficher et l'ordre de ces derniers (en séparant les valeurs [js|css|html|result] par des virgules, ansi pour afficher le code d'exemple d'un autre article nous aurons :


<iframe style="width:100%;height:200px;border:none;" src="http://jsfiddle.net/lbonnargent/V2Waz/embedded/result,css,html/"></iframe>

Pour avoir le résultat :

Les points forts

La platforme jsFiddle.net présente un outils de partage entre les développeurs mais pas seulement : Il est tout a fait possible de créer un fiddle sans pour autant être inscrit et ainsi de visualiser facilement le résultat d'un tutoriel ou encore tester rapidement la compatibilité inter-navigateurs. Vous pouvez désactiver un fiddle qui devient alors innaccessible sur les sites où il aurait été partagé.

Les points faibles

On regrettera l'abcense de gestion de colaboration entre les inscrits (possibilité d'autoriser une personne en particulier à modifier un fiddle) où encore l'interface peu explicite : il est très difficile de savoir si l'enregistrement à bien eu lieu, le site n'est disponnible qu'en anglais...

Conclusion

jsFiddle.net s'avère être un outils très pratique en dépit de ses difficultés de prise en main. Il est devenu un atout particulier dans la rédaction d'articles et de tutoriaux sur le développement web, on peut en apprécier la valeur sur des sites tels que hacks.mozilla.org.