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!

 

Sublime Text 3 : Mon choix d’éditeur de texte

Comme vous le savez probablement déjà, je suis développeur front-end. J’ai, par le passé, essayé plusieurs éditeurs de texte. Je me confesse avoir utilisé Microsoft Frontpage pendant un très (trop) long moment. Ce dernier a laissé place à Dreamweaver pendant un temps mais c’est seulement depuis deux ans que je peux vraiment dire que j’ai trouvé MON éditeur préféré : j’ai nommé Sublime Text. Maintenant à sa troisième version, ce logiciel a su se démarquer notamment par sa simplicité d’adapatation, par l’efficacité de son interface utilisateur (UI) et par ses « pouvoirs cachés ». Là, je sais que j’ai piqué votre curiosité. Vous êtes en train de vous dire : « Mais de quoi il parle encore, c’te perdu-là… »

En plus d’offrir une vaste panoplie de thèmes out of the box, cet éditeur de texte vous permet d’installer Package Control, c’est-à-dire un gestionnaire de plugins qui se base sur Github pour choisir ses paquets. Pour installer Package Control, allez sur cette page, suivez les directives qui y sont expliquées (en anglais) et voilà! En à peine 30 secondes, vous avez un logiciel des plus efficaces pour un développeur Front-End.

Ces paquages vous permettrons, entre autres choses, de pouvoir choisir une couleur de syntaxe pour SASS, d’avoir un accès rapide au Codex de WordPress, d’auto-compléter vos balises HTML, et j’en passe. Des heures de plaisir et de temps sauvé.

Le logiciel est disponible en version d’essaie (néanmoins complète) indéfiniment : il vous demandera simplement à chaque 20 sauvegardes si vous désirez enregistrer le produit moyennant 70$. Il est compatible pour Windows, Mac OS et Linux Ubuntu.

Et vous, quel est votre éditeur de texte actuel? Pensiez-vous changer pour un autre que Sublime Text et si oui, lequel et pourquoi?

Liens vers le site de Sublime Text 3 : http://www.sublimetext.com/3

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/