Performance sous jQuery

jQuery est une bonne librairie javascript, elle permet d'augmenter grandement la productivité de code javascript et permet de gerer les exceptions liées aux navigateurs car elle est compatible cross-browser.

Mais parfois l'utilisation de cette librairie peut s'avérer gourmande en resource navigateur, c'est pour cette raison qu'il fait absolument optimiser son code sous jQuery

Voici quelques points que j'utilise sans cesse pour améliorer la performance javascript sous jQuery :

Playground CSS - un menu en transition

<div class="menu-transition">
    <div class="item">
        <a href="#">Item 1</a>
        <div class="hidden"><img src="http://farm2.staticflickr.com/1394/557771204_6d06419b64_m.jpg" alt="" /></div>
    </div>
    <div class="item">
        <a href="#">Item 2</a>
        <div class="hidden"><img src="http://farm2.staticflickr.com/1394/557771204_6d06419b64_m.jpg" alt="" /></div>
    </div>
</div>

Envoyer des evenements avec Google Universal Analytics

Google a mis à jour son systeme de tracking appelé maintenant Google Universal Analytics.

Il est en beta public et donc il est possible depuis un moment de l'utiliser, voici la marche a suivre

<script type="text/javascript">
   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
   m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
   })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

   ga('create', 'UA-xxxxxxxx', 'mon-domain.fr');
   ga('send', 'pageview');
</script>

dropdown en javascript et css

Souvent on me pose la question sur comment styliser un select d'un formulaire. Il est possible de modifier la taille, la hauteur, le padding, etc. Mais il est impossible de changer l'aspect de la fleche de dropdown.

Dans cet article, je vais vous montrer comment remplacer vos select "classiques" par un equivalent en HTML stylisé en CSS et géré en javascript et qui est utilisable dans un <form> très facilement. De plus il est compatible tous navigateurs et tous devices (mobile, tablette et desktop)

<div class="selectBox">
        <input type="hidden" name="univers" value="voiture"/>
        <div class="selected">Automobile</div>
        <div class="selectArrow">&nbsp;</div>
        <div class="selectOptions" >
                <div class="selectOption" value="voiture">Automobile</div>
                <div class="selectOption" value="utilitaire">Utilitaire</div>
                <div class="selectOption" value="moto">Moto</div>
                <div class="selectOption" value="camping-car">Camping Car</div>
        </div>
</div>

png anime en CSS

Récemment à mon travail, un collègue m'a montré un site de google concernant le Chromebook Pixel

Sur celui ci, on peut voir des animations sur un rollover. En y regardant de plus près, il a vu que c'etait une image png animé. Il m'a demandé si je pouvais reproduire cet effet afin qu'on puisse l'utiliser peut être sur un projet.

J'ai donc regardé le code du site et plus particulièrement celui du png animé.

plugin jquery responsive image

Quand on travaille sur le responsive design, un des problèmes majeurs est de pouvoir charger des images selon la résolution de l'écran et de préférence selon le réseau que l'on utilise.

Si l'on est dans une résolution de 320 * 480 pixel, il est inutile d'afficher des images de 640px de largeur par exemple, certes cela s'affichera mais le poids de l'image est plus lourd et souvent les devices de 320 * 480 pixel sont des téléphones avec une connection (hors wifi) en 3G, ou 3G+ (ou encore 4G mais le debit aidant cela pose moins de souci). Donc l'image mettra du temps à s'afficher.

Une solution serait d'utiliser l'api HTML5 d'information du réseau afin de détecter le débit d'une connexion mais celle ci n'est implémentée dans aucun navigateur.

Un loader en CSS avec des web fonts

Actuellement je travaillle sur un projet en mode Mobile first. En partant de ce principe, l'idée est de créer un loader pour montrer le chargement sur un device mobile.

Ne voulant pas utiliser d'image pour cause de bande passante, je me suis penché sur l'utilisation d'une web font que l'on utilise dans ce projet.

Démo

Utiliser Google Tag Manager pour son tracking Universal analytics

GTM est un conteneur qui permet via une administration graphique de gerer tous les types d'analyse que l'on souhaite :

 L’intérêt est donc de tous centraliser à un même endroit. Google indique également que grâce à GTM, il y a moins de code à insérer.

Dans les faits, ce n'est pas forcément vrai (en tout cas pour ma part). Si vous souhaitez traquer des événement GA, il faudra la plupart du temps le faire depuis votre code mais différemment qu'avec le code GA. Nous verrons cela un peu plus tard dans un exemple.