Placer un break point pour écouter une interaction JS avec un élément du DOM

Vous est-il jamais arrivé de vous arracher les cheveux pour trouver quelle ligne de js était à l'origine d'un comportement étrange dans la page ? La situation s'apparente assez à : "chercher une aiguille dans une botte de foin" ?

Eh bien je viens de découvrir une super astuce dans la console (sans doute présente depuis toujours). Il suffit d'inspecter l'élément, de lui faire un click droit et de choisir l'un des trois comportement suivant :

Continue reading ...

Les glyph icons et l’antialiasing

Je me suis mis il y a peu à la technique des glyph icons, en gros ça permet de gérer les pictos sous forme de fonte (donc c'est du texte) pour profiter de la foultitude de bénéfices que le vecteur peut apporter dans ce domaine. J'ai parlé de la technique dans un précédent billet et ce présent article est un peu mon retour d'expérience.

Alors il y a deux approches, soit vous cherchez des packs d'icônes vectorisés libre de droits, il suffit de choisir un pack d'icônes qui vous plaît, personnellement je vais sur icomoon, leur bibliothèque d'icônes à triplé en 3 mois, l'interface est cool et pis c'est gratos). Bon ça c'est fastoche je ne vais pas m'étendre là-dessus.

Continue reading ...

Les picto fontes ou comment se simplifier la gestion des icones

Les icônes sur le web en 2012, une vraie galère

Ces petits éléments graphiques si chers à nos design sont essentiels, s'ils sont bien choisis ils apportent beauté et compréhension à l'expérience utilisateur de l'internaute. Le hic c'est qu'il est compliqué de les gérer pour un webmaster. Problèmes de résolutions d'écrans, de tailles, de couleurs, etc. Il faut sans cesse changer tel ou tel icone à tel ou tel endroit du site parce que tel autre picto ferait mieux l'affaire... Continue reading ...

Enlever le layer noir au click event sur les appareils iOS

Sur iPad ou iPhone quand on click sur quoi que ce soit, on voit apparaître pendant environ une seconde un layer noir transparent par dessus l'élément html en question. C'est plutôt moche et ça donne l'impression de ralentir l'expérience utilisateur.

Pour s'en débarrasser il vous suffit d'appliquer cette propriété css sur les éléments qui vous intéressent :

a { -webkit-tap-highlight-color: rgba(0,0,0,0); }

En gros ça dit que la couleur de -webkit-tap-highlight-color sur tous les <a> est noire (les 3 premiers zéros dans rgba) et que son opacité est à zéro. Continue reading ...

SASS et LESS : mixin pour multiple shadow

J'ai posté une astuce il y a peu pour rendre mon mixin SASS box-shadow compatible avec plusieurs shadows dans la même déclaration. Je me suis retrouvé avec un truc assez moche et surtout très redondant.

Sans plus attendre...

Mixin multiple box-shadow v2

@mixin box-shadow($params) {
  -webkit-box-shadow : #{$params};
     -moz-box-shadow : #{$params};
          box-shadow : #{$params};
}

Voilà comment ça s'utilise :

@include box-shadow( "0 0 5px #333 , inset 0 0 2px #666" );

Et c'est tout ! :D

En fait le principe est de passer une STRING en paramètre (donc concrètement tout ce que vous voulez) puis dans le code du mixin on se sert des #{ } pour échapper les guillemets.

Continue reading ...

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!

Ras le bol de devoir return false sur les balises link au click event ?

Si vous aussi vous en avez marre de devoir spécifier (ou carrément d'oublier de spécifier) les return false sur les balises <a href="#"></a> pour éviter que l'internaute soit violemment expulsé en haut de la page quand il clique sur le lien en question, eh bien sachez qu'une lecture rapide de la doc du W3C concernant les balises link vous aurait appris que l'attribut href est optionnel !

Citation W3C :
"Authors may also create an A element that specifies no anchors, i.e., that doesn't specify href, name, or id. Values for these attributes may be set at a later time through scripts."
++

Traduction :
"Les auteurs peuvent aussi créer un <a> qui ne spécifie pas d'ancre, par exemple, qui ne spécifie ni href, ni name ou id. Les valeurs pour ces attributs peuvent être set up plus tard via des scripts."

Il vous est donc possible d'écrire vos liens comme ceci dans vos pages :

# html
<a id="bob" class="leponge">click me!</a>

# js
$('#bob').on('click', function(){
    noNeedToReturnFalseYou(ahahah);
});

# css
a { cursor:pointer; }

Et voilà plus besoin d'annuler le comportement habituel du lien en javascript au moment du click.

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 !

SASS : un mixin box-shadow qui supporte plusieurs shadows

Mon mixin box-shadow me rend bien des services, il permet d'écrire :

UPDATE : j'ai trouvé beaucoup plus simple que la technique décrite ici.

@include box-shadow(0px 0px 5px #666);

Qui est ensuite compilé en ça :

-webkit-box-shadow: 0px 0px 5px #666;
   -moz-box-shadow: 0px 0px 5px #666;
        box-shadow: 0px 0px 5px #666;

Le code SCSS de mon mixin en question :

@mixin box-shadow($params) {
  -webkit-box-shadow: $params;
     -moz-box-shadow: $params;
          box-shadow: $params;
}

Malheureusement il ne marche pas si on essaye de lui passer plusieurs shadows pour la même déclaration. Un truc comme ça quoi :

box-shadow: 0px 0px 10px #666,
            0px 0px 15px #666,
            0px 0px 20px #666,
            etc...

Pas moyen d'y arriver avec mon mixin tel quel...

Donc après quelques recherches du côté de Compass puis du côté de StackOverflow je l'ai modifié pour lui permettre de supporter plusieurs shadows dans la même déclaration (9 shadows maximum pour être plus exacte, on va dire que ça suffira hein) :P

Et voilà, mon petit mixin tout mignon du début s'est transformé en cette chose énorme, immonde et illisible :

@mixin box-shadow( $shadow1, $shadow2:false, $shadow3:false, $shadow4:false, $shadow5:false, $shadow6:false, $shadow7:false, $shadow8:false, $shadow9:false ) {
$params: $shadow1;
@if $shadow2 { $params: $shadow1, $shadow2; }
@if $shadow3 != false { $params: $shadow1, $shadow2, $shadow3; }
@if $shadow4 != false { $params: $shadow1, $shadow2, $shadow3, $shadow4; }
@if $shadow5 != false { $params: $shadow1, $shadow2, $shadow3, $shadow4, $shadow5; }
@if $shadow6 != false { $params: $shadow1, $shadow2, $shadow3, $shadow4, $shadow5, $shadow6; }
@if $shadow7 != false { $params: $shadow1, $shadow2, $shadow3, $shadow4, $shadow5, $shadow6, $shadow7}
@if $shadow8 != false { $params: $shadow1, $shadow2, $shadow3, $shadow4, $shadow5, $shadow6, $shadow7, $shadow8 }
@if $shadow9 != false { $params: $shadow1, $shadow2, $shadow3, $shadow4, $shadow5, $shadow6, $shadow7, $shadow8, $shadow9 }

-webkit-box-shadow: $params;
   -moz-box-shadow: $params;
        box-shadow: $params;
}

Et ça s'utilise comme ça :

@include box-shadow( 0px 0px 5px blue, 0px 0px 5px lightBlue, etc. );

Donc 9 shadows max. Mais on peut toujours paramétrer le mixin pour qu'il en accepte plus.

Je vais quand même chercher un moyen de simplifier tout ça, peut-être avec @each je sais pas mais ça vaudrait le coup. Enfin bon au moins maintenant il supporte le multiple shadows ! :D

UPDATE : j'ai trouvé beaucoup plus simple que la technique décrite ici.