Decaps' crypt

OMGWTFBBQ

Casseurs Flowters - Fais les backs

Yeah Yeah Yeahs - Sacrilege

DATA - Don't Sing

Sharing - Mariocraft/F.lux/Prepros/DigitalOcean

Le partage c'est bien, alors partageons. Voici des sites, logiciels et services (pas forcément inconnus) qui méritent selon moi d'être encore plus visibles.
Mariocraft

Mariocraft - Jeu en ligne

La quête perpétuelle d'amour du célèbre plombier moustachu revient mais cette fois-ci dans votre navigateur.

Développé en HTML/CSS et Javascript avec passion et acharnement par @xumiz, son gros plus: l'éditeur très complet permettant de réaliser des mondes et de les partager avec la communauté.


F.lux

F.lux - Logiciel

F.lux (malgré la tête de son site) est un logiciel qui vous veut du bien.

Il a pour mission d'adapter la quantité de lumière bleue émise par votre écran en fonction de l'heure, ce qui aura pour effet de diminuer la fatigue visuelle et de faciliter l'endormissement.

Un peu perturbant au début, on se rend vite compte de ses bienfaits après l'avoir désactivé pendant les heures de nuit.


Prepros

Prepros - Logiciel

Outil actuellement capable de compiler les langages suivants : LESS, Sass, Scss, Compass, Stylus, Jade, Slim, Markdown, Haml, LiveScript et CoffeeScript. Il sait aussi minifier et concaténer les fichiers Javascript, optimiser les images (même si pour l'instant c'est manuel et la compression n'est pas égale aux meilleurs compresseurs).

Les petits plus qui faciliteront la vie des codeurs : les notifications et le live refresh du navigateur.

Il est facilement utilisable et paramétrable, et a l'avantage d'être disponible en standalone pour Windows.


DigitalOcean

DigitalOcean - Hébergeur (serveur dédié virtuel)

Voilà bientôt 6 mois que je suis chez DigitalOcean et la seule chose que je regrette c'est de ne pas avoir migré plus tôt.

Très bon uptime, interface claire, et service client réactif (toutefois, il semblerait que victimes de leur succès, cela soit moins vrai aujourd'hui). L'ensemble donnant un rapport prestations/prix excellent.


Coding mistakes #2

Cette fois, c'est plus une horreur qu'une erreur. Regardez-moi ce joli onMouseOver :
  1. <div id="fooButton" onclick="getNext();" onmouseover="this.style.cursor='pointer';">+</div>

Les pseudo-classes c'est surfait.

8 conseils et outils pour créer/maintenir/optimiser un site web

Trop souvent, les sites longs à charger, le sont rarement à cause d'un contenu conséquent mais de la conception du site. Ce sont souvent des erreurs récurrentes, facilement corrigeables. Je vais donc essayer de donner des optimisations faciles à mettre en place ainsi que des conseils qui me paraissent importants, pour améliorer cela.

Attention, les conseils de cette liste sont destinés à des développeurs dont le niveau va de débutant à intermédiaire. Développeur aguerri, je t'invite à passer ton chemin.


1. Faire attention au poids des images utilisées.

Même si aujourd'hui les connexions sont plutôt rapides (excepté sur les mobiles...), plus un site s'affiche rapidement plus l'expérience utilisateur peut se faire dans de bonnes conditions. Par ailleurs, la vitesse de chargement d'une page est désormais un facteur pris en compte par Google pour le référencement.

Sur l'un des site en question, la bannière était une image BMP qui faisait la moitié du poids du site (571 KB / 1.14 MB). Sur une autre page, une image de 2000 par 3000 px pesant plus de 2 MB, alors qu'elle était affichée en 200 par 260px...

Pour régler ce problème, si le cas est "grave", il faut commencer avec un logiciel de retouche, en redimensionnant et en enregistrant dans un format adapté (JPEG, PNG, etc). Ensuite, ou dans le cas d'optimisation, il faut utiliser un compresseur d'image. Ils sont nombreux, et certains sont utilisables directement en ligne. Pour ma part, j'utilise principalement PunyPNG. Smush.it maintenant racheté par Yahoo!, est lui aussi une référence.


2. Ne pas utiliser plusieurs frameworks JavaScript en même temps

Cela peut fonctionner sans soucis, mais le problème n'est pas là. En effet, non seulement en terme de poids ce n'est pas optimal (duplicité de fonctions entre les frameworks), mais en plus ça complexifiera la maintenance à venir. Evitez donc et votre futur vous vous remerciera.


3. Minifier le CSS et le JS

Tout d'abord, pour ceux qui ne le saurait pas, la minification est un terme anglais qui décrit "le processus de suppression des caractères inutiles du code source, sans changer ses fonctionnalités". Et donc permet de "réduire la quantité de données qui doit être transférée" (cf. Wikipédia).

Pour les frameworks, ces versions minifiées, repérables par un ".min." avant l'extension, sont généralement proposées sur le même site, autant les utiliser. Par exemple, la version actuelle de jQuery (1.7.1) non compactée pèse 229 KB, or la minifiée ne pèse plus que 31 KB. Ce gain conséquent (-87%) est facile à obtenir, il serait dommage de s'en priver.

Vous pouvez bien sûr minifier vos propres fichiers CSS et JS à l'aide d'outils comme YUI Compressor. Cela peut paraître logique, mais faites cependant bien attention à garder les versions non compactées, sur lesquelles vous pourrez effectuer les modifications à venir.


4. Activer la compression des fichiers

En restant dans l'optique d'accélérer l'affichage, mais à un niveau un peu plus avancé, il est possible de demander au serveur de compresser à la volée les fichiers qui seront envoyés.

Dans le cas d'un serveur Apache 2, avec le module mod_deflate activé, il suffit d'ajouter dans le fichier .htaccess (de le créer si il n'existe pas) les lignes suivantes :
  1. SetOutputFilter DEFLATE
  2. AddOutputFilterByType DEFLATE text/javascript application/javascript text/css application/xhtml+xml text/xml text/html text/plain application/json
Libre à vous de modifier les types MIME en fonction de vos besoins. Cependant, sachez qu'il est inutile de compresser les fichiers binaires, telles que les images ou vidéos.

Pour plus d'informations sur mod_deflate, veuillez lire la documentation fournie par Apache.


5. Activer le cache serveur

Toujours dans le fichier .htaccess, si le module mod_expires est activé, voici une configuration simple, qui affectera un délai d'expiration du cache de 14 jours par défaut :
  1. ExpiresActive on
  2. ExpiresDefault "access plus 14 days"
Il est possible de choisir le délai d'expiration par type de fichier. Par exemple pour mettre un délai d'expiration d'un mois sur les fichiers CSS, il faudrait ajouter :
  1. ExpiresByType text/css "access plus 1 month"
Pour plus d'informations sur mod_expires, veuillez lire la documentation fournie par Apache.


6. Respecter les normes et conventions

Qu'elles soient fixées par un environnement ou par soi-même, les normes et conventions sont faites pour être suivies. Elles facilitent grandement les maintenances futures et leur non respect vous donnera juste envie de vous crever les yeux quand vous devrez y revenir (cf. votre futur vous).


7. Suivre autant que possible les recommandations W3C

Ceci aura pour effet d'améliorer l’accessibilité de votre site. Pour ce faire, vous pouvez utiliser les validateurs W3C, pour le CSS, le code HTML ou encore les flux RSS. Ils vous aideront à détecter des possibles erreurs ainsi qu'à respecter les recommandations.


8. Aérer et commenter le code

Cela peut paraître évident, mais il est nécessaire de bien indenter et d'aérer son code, toujours dans l'optique des maintenances à venir. N'oubliez pas non plus, de commenter les fonctions ou portions qui seraient susceptibles de poser problème.


Bonus

Pour ceux qui souhaiteraient aller plus loin, l'outil fourni par Yahoo! YSlow, le DOMMonster ainsi que le site GTMetrix vous donneront les directives nécessaires pour continuer à optimiser et peaufiner votre site.

Le saviez-vous ? Refresh saviez_vous Loading

VDM Refresh vdm Loading