Unveil.js : un « lazyload » sur vos images!

Unveil.js

Pour ceux qui s’intéressent à la rapidité de chargement de leurs pages, invariablement, nous sommes tous confronté au poids qu’on nos images. C’est à ce moment que Unveil.js peut vous venir en aide.

Pourquoi Unveil.js

Mais est-il impératif que ces images soient chargées en même temps que la page, par exemple une image qui est en dehors du champs de vision (viewport) lors du chargement? À ce moment, on peut penser à appliquer la technique « lazyload ». Cette technique fait en sorte que l’image sera chargée sur la page seulement au moment ou elle apparaitra dans le viewport. Avant celà, elle sera remplacée par un placeholder. Ensuite, est qu’on utilise jQuery sur notre page. Oui? À ce moment-là, nous devenons les candidats idéals à utiliser Unveil.js.

Unveil.js est un script très léger (moins d’1kb, quand même!) qui permet justement d’appliquer LazyLoad sur vos images afin d’accélérer le chargement de vos page. Pour connaitre la façon de l’utiliser et ou pour en savoir plus sur ce plugin jQuery, visitez la page officiel d’Unveil.js :

http://luis-almeida.github.io/unveil/

Mais attention! Si vous n’utilisez pas jQuery sur votre page, ne chargez pas votre page plus qu’il n’en faut pour rien. Oui, c’est un préalable pour charger Unveil.js mais admettons que vous n’ayez pas jQuery, il y a d’autres alternatives telles que :

http://kaizau.github.io/Lazy-Load-Images-without-jQuery/

… qui feront en sorte que votre page sera légère, rapide de chargement et surtout, qui ne sera pas encombrée par jQuery pour les fonctions d’un simple plugin. Chaque version du code est bien expliquée sur le site de son auteur respectif, je vous souhaite donc une bonne découverte du principe « lazyload ».

Bon codage!

 

Javascript et la détection d’appareil mobile

Cette semaine, au bureau, j’ai eu à travailler un peu avec javascript afin de détecter si le média utilisé était une tablette, un téléphone cellulaire ou encore un ordinateur « normal ». En temps normal, j’aurais utilisé le script PHP fourni par mon développeur backend mais malheureusement, je devais faire la détection à l’intérieur d’un fichier JS. PHP n’était donc pas à ma rescousse cette fois-ci.

J’ai donc fait une recherche sur Google afin de trouver un script déjà fait (ça ne me donne pas grand chose de réinventer la roue). J’ai vite trouvé quelque chose qui me plaisait et je veux le partager avec vous. Voici le bout de code afin de rendre possible cette détection :

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    // Si le média est un mobile...
} else {
    // Sinon, il se passe ceci...
}

En gros, si l’appareil est du type Android, webOS, iPhone, iPad, iPod, Blackberry, IEMobile ou Opera Mini, faites ce que vous avez à faire avec un mobile. Sinon, considérez le média comme un ordinateur de bureau ou un laptop. Il est aussi possible avec un else if de pouvoir séparer les tablettes des téléphones selon vos besoins.

Si j’ai oublié un type de téléphone ou si vous avez des questions par rapport à ce script de détection, n’hésitez pas à me contacter grâce aux commentaires ci-dessous!

À un prochain tuto!

Comment rester à jour en tant que développeur Front-End

C’est une question qu’on s’est tous posé au moins une fois dans le métier. Il y a tellement d’idées, de philosophies et d’approches différentes que parfois, on s’y perd.

Ce soir, j’ai vu passer sur G+ (et oui, j’utilise ça, moi) un article vraiment intéressant qui va m’aider (et vous aider, chers lecteurs) à rester à jour dans mes connaissances. Le sujet : qui mènent le show et qu’est-ce qui est trendy en ce moment. En gros, l’article se sépare en 4 catégories :

  • Qui suivre sur les médias sociaux pour avoir de bons filons
  • Que sont les meilleures ressources pour nous aider
  • Quelles conférences valent le détour
  • Quelles pourraient être vos ressources personnelles (différentes et adaptées à chacun)

J’ai été ravi de faire cette découverte et je pense (j’espère) que ça vous interpellera également. Donnez-moi vos impressions dans la section commentaires!

Lien vers l’article (en anglais) : http://uptodate.frontendrescue.org/

Codecademy : Pour en apprendre plus sur les interwebz

Ce soir, en naviguant sur Google+, je suis tombé par hazard sur ce site merveilleux. Des exemples clairs et concis pour ceux qui désirent en apprendre un peu plus sur HTML, CSS, PHP, Ruby, Javascript, etc. Un système de récompenses par badges aide les grosses faignasses comme moi à continuer et passer au travers. 🙂

C’est ma trouvaille de la semaine, gâtez-vous! http://www.codecademy.com/