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.

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.

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.

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

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.

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