JS performance - la fonction offset de jquery VS vanilla Javascript

Attention dans cette article, la fonction utilisée en javascript pur est compatible IE8+, Chrome, Safari, Opera et Firefox

cette fonction est très pratique car elle permet de donner en pixel la position d'un élement. J'ai voulu savoir si on pouvait améliorer la performance de cette méthode en javascript.

Si je me base sur JsPerf, cette fonction peut être exectuée environ 57 529 fois par seconde. Voici le code que j'ai testé :

Playground css - faire un symbole de tag en CSS

Voici un petit snippet permettant de générer via les pseudo élements ::before et ::after un symbole de tag pour vos blogs :

Comme indiqué précédemment, il suffit d'utiliser les pseudo éléments ::before et ::after.

Partons d'un span classique auquel nous allons ajouté la classe "ruban" :

zoomcar - le nouveau site d'annonce de vehicules d'occasion

Aujourd'hui avec mes collègues, nous avons livré un nouveau site d'annonce de véhicules d'occasion zoomcar.fr.

Ce site a été un véritable défi technique à mettre en place. Plusieurs techno ont été utilisées :

Le Varnish permet de détecter le type de device utilisé et de mettre en cache des pages spécifiques mobiles ou desktop et d'informer le backend PHP sur le mode RESS à utiliser.

UpdateUtiliser 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.

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

UpdateEnvoyer 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>

Updateplugin 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.

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é.

Updatedropdown 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>