Articles jQuery

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 :

adsenseLoader, charger vos publicites google adsense sur le load

Actuellement sur mon site, je teste différentes façon d'améliorer les performances.

Je me suis donc attaqué au chargement sur le "load" de la page de toutes mes publicités adsense. J'ai ainsi créé une librairie adsenseLoader en javascript afin d'y parvenir.

Celle ci permet donc de charger sur le onload ou un autre event.

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>

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.

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.

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

Zoomcar fete ses 2 ans

Zoomcar.fr vous donne accès à plus de 155 000 annonces de voitures, camping-cars, utilitaires et motos d'occasion, mis en vente partout en France par des professionnels et des particuliers.

Pas besoin d’Adblock sur zoomcar.fr ! Aucune publicité ne viendra perturber votre navigation.

Pour trouver votre véhicule, accédez à un moteur de recherche intuitif et mettez en favoris vos coups de cœur. Pour gagner du temps, recevez chaque jour les nouvelles annonces souhaitées. Pour être certain de payer le bon prix, un service gratuit de calcul de cote en ligne vous permet de suivre l'évolution des prix d'une voiture sur le marché de l'occasion.

jQLoupe

Plugin jQuery pour ajouter une loupe à vos images.

Un éditeur riche en jQuery.

Voici un editeur de texte riche (rich text editor ou encore wysiwyg) très simple développé en jQuery. cet éditeur est un plugin jquery facilement utilisable.

retourner en haut de la page