BuildBot: Automatisation des constructions et des tests

Lors du développement d'un projet, il est toujours fastidieux de le construire et de le tester sur toutes les plate-formes qui doivent être supportées. C'est là que BuildBot vient à votre rescousse. C'est un outil, indépendant de la plate forme et du langage, permettant d'automatiser et de distribuer la construction et les tests pour un projet.

BuildBot est structuré de façon à ce que toute la configuration soit centralisée (BuildMaster) mais que les constructions se fassent sur des serveurs esclaves, qui sont les plates-formes à tester (BuildSlaves). Le serveur maître est lié à un dépôt SVN/CVS/etc. pour avoir accès aux changements qui sont faits dans le code source. Soit de façon programmée (ex: nightly builds), ou manuelle, le maître va demander aux esclaves d'exécuter un ensemble de scripts permettant de faire le travail voulu (construction, test, déploiement, etc.). Une fois le travail terminé par l'esclave, il va envoyer le rapport au maître qui pourra par la suite le diffuser via un serveur HTTP, par courriel, par IRC, etc.


Si vous êtes convaincu, BuildBot est disponible à l'adresse suivante: http://buildbot.net/

FireUnit: Une extension de test unitaire JavaScript!

// Some examples of using FireUnit
if ( typeof fireunit === "object" ) {
// Simple true-like/false-like testing
fireunit.ok( true, "I'm going to pass!" );
fireunit.ok( false, "I'm going to fail!" );

// Compare two strings - shows a diff of the
// results if they're different
fireunit.compare(
 "The lazy fox jumped over the log.",
 "The lazy brown fox jumped the log.",
 "Are these two strings the same?"
);

// Compare a string using a regular expression
fireunit.reCompare(
 "The .* fox jumped the log.",
 "The lazy brown fox jumped the log.",
 "Compare a string using a RegExp."
);

// Display the total results
fireunit.testDone();
}

FireUnit!

Tester l'accessibilité de votre site

Vous devez développer une application "accessible" et vous vous demandez comment tester votre site les yeux fermés ? Plusieurs outils s'offrent à vous :

• Avec Cynthia Says, obtenez un rapport sur l'accessibilité de votre site : erreurs, actions à apporter pour corriger l'accessibilité, explication du pourquoi c'est important, etc.
• Utilisez Fang, une extension Firefox, pour visualiser une page telle que "vue" par un screen reader.
• Utilisez The Web Accessibility Toolbar, qui permet de visualiser un site en noir et blanc (comme si vous étiez daltonien), d'effectuer des validations de toutes sortes (HTML, CSS, etc.).
  

/packer/ A JavaScript Compressor: Sentez vous léger!

Vous utilisez une tonne de bibliothèques utilitaires JavaScript?
Votre développement JavaScript maison est très poussé et vos fichiers ne sont plus maintenables tellement ils sont rendu gros?
Tout cela vous coûte une fortune en bande passante à chaque mois?

/packer/ est pour vous. Il s'agit d'un petit utilitaire qui permet de compresser tout fichier JavaScript. En moyenne, j'ai pu observer une réduction autour de 60% de la taille sur plusieurs fichiers JavaScript volumineux. Voici quelques exemples:

• Prototype JavaScript framework 1.6.0.2: 124 Ko -> 46 Ko (36,6% de la taille initiale)
  
• JQuery 1.2.6: 98 Ko -> 29 Ko (29,7% de la taille initiale)

/packer/ est disponible à l'adresse suivante: http://dean.edwards.name/packer/

Tout ce qu'il y a à faire est copier le code JavaScript à compresser dans la boîte "Paste", choisir les options de compression ("Base62 encode" et "Shrink variables") et appuyer sur "Pack". Le résultat se retrouvera dans la boîte "Copy".

Voici un exemple:

function foo(bar) {
   var foobar = Array('foo', 'bar', 'foobar');
 
   for (var i = 0; i < foobar.length; i++) {
       alert(foobar[i] + bar);
   }
}

Taille: 146 octets

function foo(a){var b=Array('foo','bar','foobar');for(var i=0;i<b.length;i++){alert(b[i]+a)}}

Taille: 93 octets (63,7% de la taille initiale)

Éditeur de couleurs CSS

Dans les projets de maintenance de site Web, il peut arriver que le client désire changer la couleur de son site, passer du bleu gorge de pigeon à jaune urine de cactus semblerait un travail colossal.

Replace CSS Color est la pour vous aidez.

Replace All aussi fait la job... mais faut être un peu à l'affût de ce qui ce fait pour avoir l'air cool, if you want to get laid!

CSS Formatteur et Optimiseur

CSS Formatteur et Optimiseur est un optimiseur de feuille de style CSS basé sur csstidy, celui-ci permet donc d’optimiser son code avec pas mal d’options sur la compression et la compatibilité CSS, donc à découvrir absolument.

Disponible en quatre langues dont le français bien sur.

notes Importantes: votre code doit être Valide. Ce n’est pas un validateur qui signale des erreurs dans votre code de CSS. Assurez-vous que votre code est correct en utilisant le le validateur : W3C Validator

Sprite... pas seulement bon au goût

La plupart d'entre-vous connaissez les Sprites, c'est une technique d'optimisation, souvnt utilisé dans les jeux videos et diverse applications, en Web, il nous permet de réduire la quantité de requête HTTP. En réduisant le nombre de requête que votre navigateur doit faire pour récupérer le contenus de votre site Web, vous augmentez la vitesse de téléchargement avec moins de latence HTTP pour les requêtes. Si vous voulez une bonne analogie pour cette méthode d'optimisation, pensez aux tranferts de fichiers. Copier 1000 fichier de 1kb va prendre beaucoup plus de temps à copier que 1 fichier de 1000kb.

Il existe plusieurs générateurs de Sprite pour vos images tel que:

CSS Sprite Generator

JS Bin - Un outil de debuggage JavaScript collaboratif

JS Bin est un outil de debuggage JavaScript collaboratif qui permet de tester du code JavaScript tout en permettant à des collaborateur de travailler sur le même document.

WordOff - Nettoyer et optimiser du code HTML

Si vous avez déjà essayé de convertir un classeur Excel ou un document Word en une page HTML, vous savez surement que ce processus introduit un nombre impressionnant de balises et de styles superflues.

Ceci rend le fichier complètement illisible et lourd. Afin d’obtenir un code HTML propre et léger, Tom Dyson a créé WordOff.org, un webware qui convertie votre HTML abscons en HTML simple, en supprimant tout le superflu.

WordOff supprime tous les éléments HTML qui sont vide, enlève toutes les balises et réduit le nombre de retours charriot.

Cerise sur le gateau, le moteur de WordOff est intégrable dans vos propre application Web en utilisant l’API CURL.

PSD2CSS - Pages Web dynamique en quelques secondes

PSD2CSS est un service web gratuit qui permet de générer automatiquement les fichiers nécessaires compatibles XHTML et CSS à partir d’un PSD (Photoshop)

YUI Doc: Un nouvel outil de génération de documentation d'API JavaScript!!

Hier, Yahoo! nous a annoncé la sortie de "YUI Doc", un outil de documentation qui génère la documentation pour le code JavaScript. Il s'agit d'un outil basé sur les commentaires.

• YUI Doc User’s Guide
• YUI Doc sample output (YUI API documentation)
• YUI Doc community forum
• YUI Doc download

Certain connaissait déjà JSDoc qui est un utilitaire s'inspirant largement de JavaDoc. JSDoc tend à vouloir parser le code, ce qui le rend useless à plusieurs niveau.

//Enjoy the feeling to comment your junk

JavaFX 1.0 est sorti

Hey! vous chercher une idée de présentation... pourquoi pas regarder JavaFX?

Détection d'image brisé en JQuery

Vous avez un site avec des centaines de pages contenant des centaines d'images et vous voulez vous assurez que vos images sont toujours en place et que rien ne pointe sur des images qui n'existe plus? JQuery est la pour vous!

JavaScript:

$(document).ready(function(){
$('img').error(function(){
$.post('ajax-image-error.php',{'image':this.src,'page':location.href});
});
});

PHP:

if(isset($_POST['image']))
{
$to = 'errors@yourdomain.com';
$from = 'automailer@yourdomain.com';
$subject = 'Broken Image';
$content = "The website is signaling a broken image!\n\nBroken Image Path: ".stripslashes($_POST['image'])."\n\nReferenced on Page: ".stripslashes($_POST['page']);
$result = mail($to,$subject,$content,'From: '.$from."\r\n");
die($result);
}

Bookmarklet....

TinyURL est un service web créé par Kevin Gilbertson dans le but d'offrir de courts alias d'URL.

Vous pouvez aussi vous en servir avec un Bookmarklet !

---

Redimensionnez votre browser avec un Bookmarklet ex: 800x600

---

Affichez les mots de passe caché par des étoiles dans une page web.