Coder c’est bien, mais coder plus vite c’est encore mieux. Il existe des tâches rébarbatives dont on se passerait volontiers et auxquelles on aimerait consacrer moins de temps. De même, il existe des outils qui nous permettent d’optimiser nos performances ou nos manières de travailler toujours dans une logique de produire un travail de haute qualité, optimisé et propre sur un plan technique, le plus rapidement possible.

Dans cet article je vais vous présenter divers outils que j’utilise pour travailler et qui me sont bien utiles au quotidien. J’espère qu’ils le seront pour vous aussi et qu’ils vous permettront d’accroître votre productivité ou simplement de vous faciliter la vie.

Optimiser votre site

La recherche de performance doit être constante : toujours plus rapide à charger, toujours moins de requêtes HTTP à exécuter, toujours moins d’espace disque utilisé… C’est la somme de toutes ces petites choses qui fera de votre site un monstre sur un plan technique.

• CSS Sprites

Si vous ne connaissez pas encore cette technique, je vous renvoie à cet excellent tutoriel d’Alsacreations qui vous détaillera ce que sont les CSS Sprites et comment s’en sert t’on.

Le principe général consiste à créer une grande image regroupant plusieurs petites images (des icônes, ou des images qui possèdent une image normale et une image pour le hover par exemple !) et de les afficher en jouant sur la propriété background-position en CSS.

Le site csssprites.com fait presque tout le travail à notre place. Il suffit de lui fournir toutes les images que l’on souhaite mettre dans notre Sprite et le site se charge de « fusionner » toutes ces images en une seule et de générer le CSS qui va de paire.

• smush.it

Toujours pour les images, smush.it permet de réduire le poids des images sans altérer leur qualité. Une image avec un poids plus faible permet de charger plus rapidement la page, ce qui est très important si votre site comporte de nombreuses images par exemple. punypng.com propose les mêmes services que smush.it.

Si vous créez vos images vous même, pensez bien à choisir « Enregistrer pour le web ». Vous pouvez également réduire le poids d’une image en PNG en la convertissant en JPG, en ouvrant ce JPG et en l’enregistrant à nouveau en PNG.

Merci à @mygbb pour cette astuce.

• Clean CSS

Votre code CSS n’est jamais très clair ? Vous ne savez pas comment l’organiser ? Il n’est jamais optimisé ? Le site cleancss.com fait le travail à votre place en organisant votre code CSS et en l’optimisant, ainsi, vous aurez une feuille de style rapide à charger et plus facile à modifier par la suite.

Je vous conseille de choisir l’option « Très compact » de compression et je vous laisse cocher ce qui vous convient pour la suite des options. Attention aux propriétés CSS 3 que cleancss ne reconnait pas toujours ! N’hésitez pas à les inclure après la compression par le site.

• Javascript Compressor

Dans la même logique que Clean CSS, Javascript Compressor compresse votre code JavaScript, de quoi gagner encore un peu de temps au chargement.

Des outils pour vous faciliter la vie

• Border Radius

Border Radius est selon moi la propriété CSS3 la plus intéressante et la plus utile pour nous autres, développeurs. Créer des bordures arrondies avec seulement quelques lignes de code, quel rêve ! Néanmoins le rêve tourne au cauchemar quand on veut utiliser ces bordures arrondies uniquement sur certains coins. La preuve en code :

/* Utilisation classique aux 4 coins */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

/* Utilisation uniquement sur les coins inférieurs */
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;

Ça se complique hein ? Heureusement border-radius.com se charge de générer le code pour nous : il suffit de rentrer les valeurs désirées en pixels aux 4 coins de la bordure et le site nous montre la forme obtenue et le code nécessaire pour réaliser ceci. Facile, n’est ce pas ?

• Text Shadow

Comme border-radius, text-shadow est une propriété CSS3. Elle permet de rajouter de l’ombre interne ou externe sur un texte ce qui donne un effet sympathique, sans avoir besoin de créer une image pour un texte ! Encore une facilité pour les développeurs webs ! William Agay (@william_agay) propose un outil pour tester cette propriété en ligne et observer les variations quand on change des valeurs : www.css3dev.williamagay.fr

• Tabifier

Un code bien indenté est un code beaucoup plus lisible et donc beaucoup plus facile et rapide à modifier. Même si chacun s’efforce de bien indenter son propre code, il est parfois utile de faire appel à de petits utilitaires qui le font à notre place (et qui eux le font bien !).

Tabifier fonctionne avec le HTML, le CSS et le C (dommage pour le PHP !), il vous faudra néanmoins que votre code soit valide car Tabifier se contente d’indenter votre code, et non de le corriger (ce qui est déjà pas mal) !

• Code couleur

code-couleur.com est un site mettant à votre disposition une palette qui permet d’obtenir le code HTML d’une couleur et d’un autre outil qui vous permet d’obtenir l’aperçu d’une couleur à partir d’un code HTML.

Sont également présentes sur le site diverses palettes de couleurs qui vous seront bien utiles lors d’une recherche de tons pour votre site !

Les liens morts sont une des plus grandes peur du développeur web et un cauchemar pour les utilisateurs qui s’attendaient à trouver une page intéressante et qui se voient barrer la route par une page d’erreur. Il est donc nécessaire de posséder le moins possible, et idéalement aucun, liens morts sur son site.

Il est néanmoins impossible de pouvoir vérifier manuellement tous les liens présents, ce qui serait un travail long et pénible. Il existe actuellement des solutions payantes permettant d’identifier les liens morts sur notre site, mais pourquoi payer pour un tel service ? Comment pouvons nous être avertis de la présence de liens morts ? Comment pouvons nous corriger ces liens morts ?

Mettre en place une page d’erreur 404

Afin de pouvoir traquer nos erreurs 404, il est nécessaire de posséder notre propre page d’erreur qui remplacera celle par défaut du navigateur de l’utilisateur. En créant cette page nous même, nous pouvons choisir le contenu de celle-ci et en tirer parti pour résoudre les erreurs de notre site. Les pages 404 sont en général quelque chose de particulier dans un site et il existe une certaine coutume qui incite les développeurs à faire de ces pages d’erreurs des pages originales. Je vous invite à visiter le site www.bonjour404.fr qui propose chaque jour une page 404 originale qui peut être une source d’inspiration pour la votre.

Notre redirection se fait dans notre fichier .htaccess que l’on place à la racine de notre site. Il vous suffit de rajouter cette ligne :

ErrorDocument 404 /404.php

Si la page renvoie un code d’erreur 404, vous serez redirigé vers la page 404.php. A noter que vous pouvez faire une seule page d’erreur et la découper en plusieurs parties, selon les différents types d’erreurs :

ErrorDocument 404 /error.php?erreur=404
ErrorDocument 403 /error.php?erreur=403
ErrorDocument 500 /error.php?erreur=500

Une fois ceci rajouté dans votre .htaccess, il vous faudra donc créer la page d’erreur associée au code d’erreur 404.

Notre page d’erreur 404

Je vous laisse libre pour la présentation de votre page ; je vous invite à faire quelque chose d’original (pourquoi pas rigolo !) et qui permet de revenir au contenu de votre site (accueil / recherche… N’oubliez pas les liens !)

Afin d’être averti lorsque notre utilisateur atterri sur cette page, il va falloir créer un système de notification qui nous informe sur la provenance du visiteur, la page qu’il a demandé et d’autres petites informations. Nous allons pour cela nous envoyer un email à nous même qui contiendra toutes les informations nécessaires pour un traitement de l’erreur. Je détaillerai un petit peu plus loin les filtres à mettre en place pour éviter que votre boite mail soit rempli de mails de notifications d’erreurs 404 sur vos sites.

Voici donc le code à rajouter dans votre fichier 404.php, n’oubliez pas de changer l’adresse email ! Si vous voulez plus d’informations sur les variables $_SERVER, je vous renvoie à la documentation PHP.

$domaine = $_SERVER['HTTP_HOST'];
$HTTP_REFERER = $_SERVER['HTTP_REFERER'];
$SCRIPT_URI = $_SERVER['REQUEST_URI'];
$REMOTE_ADDR = $_SERVER['REMOTE_ADDR'];
$HTTP_USER_AGENT = $_SERVER['HTTP_USER_AGENT'];

$destinataire = "votre_email@votre_domaine.com"; // N'oubliez pas de changer cette adresse !
$sujet = "ERREUR 404 - ".$domaine." - ".$SCRIPT_URI.""; // Ce format nous sera utile pour traiter les emails

if(empty($HTTP_REFERER))
	{
	$provenance = "Pas de lien intermédiaire, connexion directe";
	}
	else
	{
	$provenance = $HTTP_REFERER;
	}
$message="
Une erreur 404 s'est produite sur le site ".$domaine.".
Provenance : ".$provenance."
Page : <strong>".$SCRIPT_URI."</strong>
Navigateur : ".$HTTP_USER_AGENT."
Adresse IP : ".$REMOTE_ADDR."
Nom de domaine : ".gethostbyaddr($REMOTE_ADDR)."";
mail($destinataire,$sujet,$message,$headers);

Le code se passe de commentaires, il utilise les variables serveur pour nous en dire plus sur l’erreur rencontrée. J’attire votre attention sur le champ sujet qui se compose de la manière suivante : "ERREUR 404 - domaine - url demandée" qui nous sera utile pour le traitement de nos emails.

Le traitement des emails de notification

Afin de ne pas remplir votre boite mail d’emails de notification d’erreurs 404 (qui ne sont pas très intéressants à lire !), je vais vous détailler comme les filtrer et les regrouper pour traiter rapidement les différentes erreurs que vous pourriez rencontrer.

La manipulation se fait ici sous Gmail, si vous ne l’utilisez pas encore, je vous le conseille vivement.

1. Créez un nouveau filtre
2. Filtrez avec le champ sujet et entrez : « ERREUR 404″
3. Cochez l’option « Passer la boîte de réception (Archiver) »
4. Créez un nouveau libellé que vous appellerez  »404″
5. Cochez l’option « Ne jamais envoyer dans le dossier Spam »

Grâce au système de conversations de Gmail, vos emails seront regroupés par sites et par page demandée qui a provoqué une erreur 404. Vous évitez ainsi la multiplication d’emails pour une même erreur et vous pouvez voir rapidement quelle page sur quel domaine a provoqué une erreur 404.

Il ne vous reste plus qu’à corriger celle-ci en modifiant votre code ou en mettant en place des redirections 301 dans votre .htaccess ! Bon débuggage à tous !