About Skoua

Graphiste web & print / développeur HTML CSS JavaScript PHP et iOS en freelance sur Paris. Je suis aussi associé chez l'Agence Web Com. Je touche à tout et je n'ai pas honte d'avouer qu'ActionScript 3 est un bon langage. Blog : front-back.com | Twitter : @Skoua

Précharger des images avec jQuery (ou pas)

Je travaillais récemment sur un site qui devait afficher des photos en plein écran avec une qualité élevée. J'ai voulu trouver un moyen de précharger ces images afin qu'elles ne s'affichent pas abrutement à leur chargement mais avec un fondu et quand je l'avais décidé.

Pour cela, il existe trois solutions : la très rapide, la rapide et la très lente.

La très lente

Dans mes égarements codistiques, je me suis demandé si une requête AJAX en GET aurait des chances de fonctionner correctement avec une image.

C'est le cas, mais le résultat avec la méthode get de jQuery sont très mauvais niveau performances. A proscrire donc. Voici tout de même le code :

var url = 'mon-image.jpg';
$.get(url, function(img){
    $('<img/>').attr('src', url).appendTo('body');
});

La rapide

Cette méthode utilise la syntaxe jQuery. Si vous n'êtes pas à 2 ms prêt (mais vous devriez toujours l'être), vous pouvez l'utiliser afin de garder un peu de cohérence dans votre code.

On créer une balise img avec jQuery et on attend le callback load.

$('<img/>').attr('src', 'mon-image.jpg').load(function(){
    $('body').append(this);
});

La très rapide

Il s'agit de créer un objet Image natif à Javascript et d'afficher son image seulement lorsque l'évènement onload est trigger.

Attention, Internet Explorer étant légèrement congénital, onload ne sera pas exécuté si vous définissez l'attribut src de l'image avant l'évènement onload, respectez donc bien l'ordre ci-dessous :

var img = new Image();
img.onload = function()
{
   document.body.appendChild(img);
}
img.src = 'mon-image.jpg';

Cette méthode est de loin la plus rapide car elle est native à Javascript, aussi je vous recommande de vous servir de celle-ci.

Ces trois méthodes ont le bon goût de fonctionner sous IE6+.

Pour le fun, voici les résultats de mes tests de performances sous Firefox, j'ai fais les mêmes sur les autres navigateurs et les résultats varient selon la rapidité de l'engin mais gardent la même tendance.

Préchargement de 10 000 images (sans l'insertion dans le DOM)

$.get :  3784ms
$('<img/>') : 1046ms
Image : 845ms

A vous de jouer !

Une doc HTML, CSS, Javascript et plus encore à portée de main

Contrairement à PHP, MySQL, ActionScript et d'autres langages gérés par des organismes bien définis, HTML, CSS, Javascript et consors ne disposent pas exactement d'une doc générale et précise du fait de leur implémentation diverse. Bien sûr, on peut se baser sur les documents du W3C pour savoir comment utiliser quoi mais ceux-ci sont peu buvables et manquent d'exemples. De plus, ils ne référencent pas les compatibilités sur les différents navigateurs, information primordiale.

Pour palier à ceci, Mozilla à eu la bonne idée de créer le Mozilla Developer Network. Ce site référence autant que possible toute la documentation liée aux langages et API que supporte Firefox ainsi que les autres navigateurs modernes.

Personnellement, je m'en sers chaque jour afin de vérifier l'existence d'une propriété ou son usage, ou encore pour apprendre à dompter les dernières API HTML 5.

Afin de rendre ce site vraiment facile d'utilisation, il est possible de créer un moteur de recherche personnalisé.
Par exemple, dans Firefox je tape "mdn textarea" dans ma barre d'adresse et je tombe directement sur la liste des articles présents dans le MDN, dont une page de doc sur cet élément.

Voici comment installer ce moteur :

Sous Firefox

Allez à cette adresse et cliquez sur Add to Firefox.

Sous Google Chrome

Faites un clic-droit sur la barre d'adresse puis "Modifier les moteurs de recherche..." puis ajouter un nouveau moteur auquel vous mettez le mot-clé mdn et l'URL :

https://developer.mozilla.org/en-US/search?q=%s

Sous Safari

Installez l'extension KeySearch puis cliquez sur l'icône Loupe à gauche de la barre d'adresse une fois installée.
Là, appuyez sur l'icône des réglages, faites Modifier mots-clés et créer un nouveau moteur avec pour mot-clé mdn et comme URL :

https://developer.mozilla.org/en-US/search?q=@@@

Sous Opéra

Allez sur https://developer.mozilla.org/en-US/ puis faites un clic-droit sur le champ de recherche en haut à droite. Sélectionnez "Créer une recherche..." et ajoutez mdn comme mot-clé.

Sous Internet Explorer

Allez sur http://www.browserchoice.eu/ :D

Et voilà. Il ne s'agit pas d'une astuce incroyable loin s'en faut mais ce site se révèle très utile au quotidien.

Enjoy!

Réduire drastiquement le poids de ses images

Outre la réduction des requêtes HTTP, l'utilisation de gzip et la compression des fichiers Javascript et CSS, un des meilleurs moyens d'améliorer les performances de son site reste de réduire le poids de ses images.

L'export avec Fireworks

La plupart des intégrateurs utilisent la fonction Enregister pour le web de Photoshop pour exporter leurs images. Etonnement, l'export jpeg de celui-ci n'est pas très optimisé et Fireworks fait un bien meilleur travail de ce côté-là.

Voici un exemple parlant. Cette image a été exporté en jpeg à 70% avec Photoshop, elle pèse 126 ko :

Et voici la même image exportée d'abord en PNG avec Exporter pour le web puis en jpeg à 70 % avec Fireworks, elle ne pèse plus que 64 ko.

Les couleurs sont très légèrement délavées mais il est possible d'exporter en meilleur qualité tout en gardant un poids moindre.

Cette "technique" fonctionne aussi bien quelle que soit la taille de l'image.

J'ai créé un script Fireworks que vous pouvez utiliser afin d'automatiser cet export, il vous suffit d'ouvrir les images que vous voulez optimiser puis d'ouvrir ce fichier avec Fireworks, les fichiers optimisés seront placés dans le même dossier que ceux que vous avez ouvert et un back-up sera fait.
Vous pouvez le télécharger ici : Script Fireworks - Export jpeg 70 %
Fireworks utilise Javascript comme langage de script aussi il vous sera facile d'ouvrir ce fichier et de modifier ses paramètres à votre convenance.

ImageAlpha et ImageOptim

Pour les PNG 32 bits (avec couche de transparence ou couche alpha), il est aussi possible de fortement réduire leur poids grâce à ImageAlpha.
Vous pouvez le télécharger pour Mac ici : http://pngmini.com/
Ce logiciel se base sur les programmes pngquant et pngnq qui s'utilisent en ligne de commande si vous voulez plus de contrôle sur vos exports.

Voici un exemple de PNG 32 bits exporté avec Photoshop, il pèse 75 ko :

Voici la même image passée à travers ImageAlpha, elle ne pèse plus que 24 ko :

Enfin, encore la même image passée à travers ImageOptim, son poids définitif est de 22 ko :

Nous avons donc réduit de plus d'un tiers le poids de l'image grâce à ces deux logiciels !

Notez que ImageOptim permet de compresser plusieurs fichiers ou dossiers d'un coup, on gagne souvent 10 à 20 % sur le poids de ses images en quelques secondes.

 

Voilà, j'espère que grâce à ces petites techniques vous arriverez à rendre vos sites encore plus rapides !

HTML : balises à fermeture optionelle

Voilà une astuce pas très utile mais qui troue le fondement de bien des intégrateurs lorsqu'ils découvrent le pot-aux-roses.

Une partie des balises comprises dans la norme HTML ne doivent pas forcément être fermées !

En voici la liste :

</html>
</head>
</body>
</p>
</dt>
</dd>
</li>
</option>
</thead>
</th>
</tbody>
</tr>
</td>
</tfoot>
</colgroup>

Ainsi, ces deux syntaxes sont parfaitement valides :

<ul>
    <li>Des pâtes,</li>
    <li>Des poires,</li>
    <li>Des lamas ougandais.</li>
</ul>
<ul>
    <li>Des pâtes,
    <li>Des poires,
    <li>Des lamas ougandais.
</ul>

Donc, si vous voulez économiser quelques bits en omettant de fermer vos balises body et html, c'est toujours ça de pris. Pour le reste, j'aurais personnellement tendance à tout de même tout fermer pour la clareté du code.

Source: http://www.w3.org/TR/REC-html40/index/elements.html

Activer PHP 5.4 sur un hébergement mutualisé OVH

Si vous voulez profiter de tous les bienfaits de PHP 5.4 (release notes) sur votre hébergement mutualisé OVH, rien de plus simple.

Si vous n'en avez pas déjà un, placez un fichier .htaccess à la racine de votre serveur et insérez-y cette ligne :

SetEnv PHP_VER 5_4

A vous les performances améliorées et les filles toutes nues !

Afficher son localhost directement sur son appareil iOS

Lorsqu'on construit un site mobile ou spécifique à l'iPad, il est pratique de pouvoir afficher directement son serveur local sur son iPhone ou son iPad sans devoir mettre en ligne chaque changement avant de le tester.

Si vous travailler sur Mac, il est très facile d'afficher directement son localhost sur son iPhone ou son iPad. Pour cela, il vous suffit de connaître le nom de votre ordinateur.

Pour se faire, allez dans Préférences Système puis Partage. Vous devriez tomber sur ceci :

Nom du mac

Comme vous pouvez le voir, l'adresse de mon serveur local est Skoua.local

Il me suffit donc de taper ceci dans Safari et voilà !
Mon serveur local s'affiche, la seule restriction étant que l'appareil et votre mac doivent être sur le même réseau.

Si comme beaucoup vous travaillez avec MAMP, il vous suffit d'ajouter le port à la fin de cette adresse comme ceci :

Skoua.local:8888

Enjoy !

[MAJ] : Windows

Cette astuce fonctionne aussi sur Windows si vous avez iTunes installé (cf. 2e commentaire).
Merci Pierrot_de_la_Lune !