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!

Ma découverte d’Infinite-Scroll

Infinite-Scroll est un plugin jQuery que Paul Irish a développé il y a déjà quelques années. J’en avais déjà entendu parlé mais je n’avais jamais eu la chance de travailler sur un projet web qui me permettait de le mettre en pratique… jusqu’à hier.

On a un nouveau projet de site au bureau. On veut sortir des sentiers battus et, j’en suis certain, ce projet va remplir cette mission. Je ne peux pas vous en dire beaucoup plus pour le moment sur ce projet mais je peux vous dire que je vais utiliser Infinite-Scroll dans ce dernier.

Pour des raisons de confidentialité et aussi de contenu adulte, je ne suis pas en mesure vous montrer de quelle manière je vais utiliser Infinite-Scroll sur notre projet, MAIS j’ai créé un exemple sur GitHub afin de m’amuser un peu avec le plugin ainsi que vous donner un bon exemple des possibilités de Infinite-Scroll.

Pour utiliser mon exemple : téléchargez le projet; installez le sur votre MAMP, LAMP ou WAMP (dépendant de votre système d’exploitation, en fait); importez le fichier SQL dans votre version de MySQL; puis éditez le fichier index.php pour y insérer vos informations de connexion.

Et voilà, vous avez maintenant, si vous garnissez un peu la base de données, une page qui vous listera une collection de disques à l’infini! Pour le moment, les options de listage ne sont pas fonctionnelles mais je compte bien continuer à développer ce petit projet on the side.

Pour voir la page Github du projet : https://github.com/davidberard/Disks-Sorting–an-Infinite-Scroll-Exemple

Skeleton 2.0.4 est sorti!

Skeleton Boilerplate

J’ai réalisé cette semaine que le boilerplate Skeleton en est maintenant à sa version 2.0.4. Ce boilerplate, qui est à peine lourd de 400 lignes (ce qui est très peu), a été conçu selon l’idée de construire un site responsive rapidement. En gros, vous pensez au design, il sera la structure.

Ce qui a changé grandement des dernières versions, c’est surtout le fait qu’il est passé d’une grille fixe en pixels à une grille fluide, fonctionnant avec des pourcentages. Ça change beaucoup la dynamique mais c’en reste tellement plus agréable et simple à utiliser.

Je vais jouer un peu avec cette nouvelle version pendant le weekend afin de me refamiliariser avec ce dernier. Et vous, quel est votre boilerplate de prédilection?

Site de Skeleton : http://getskeleton.com

J’aime mon Koala!

koala

Qu’est-ce que Koala? C’est simplement une application GUI qui compile LESS, SASS, Compass et CoffeeScript afin d’aider les développeurs Web, comme moi, à utiliser ces technologies de façon plus efficace. Koala est disponible sous Windows, Linux et MacOS. En plus, il est gratuit. Des questions?

Pour vous le procurer, visitez le site koala-app et devenez plus efficaces avec votre développement Front-End!

Autres liens utiles:
– LESS : http://lesscss.org/
– SASS : http://sass-lang.com/
– Compass : http://compass-style.org/
– Coffescript : http://coffeescript.org/

PoEdit : ou comment j’ai arrêté de m’en faire et appris à aimer les traductions

Comme certains d’entre vous le savent déjà, je suis en train de construire mon propre thème. Je l’ai commencé petit à petit, faisant mes gaffes par-ci, par-là mais… ça avance mieux que je le souhaitais au départ. Suite à une petite recherche, au moment de commencer à faire les traductions de l’anglais au français, j’ai fait la découverte des types de fichiers qui permettent de faire la traduction dans les thèmes WordPress : les fichiers .mo (ou .po, ou encore .pot).

C’est un fait incontestable qu’avec les bons outils, ça va comme dans du beurre. Grâce à la grande communauté du Libre, j’ai été dirigé vers une solution solide et disponible sur pratiquement toutes les OS dignes de ce nom : le logiciel PoEdit. En effet, des fichiers exécutables sont disponibles pour Windows (XP, 7 et 8), ainsi que pour MacOSX. Étant un adepte de Ubuntu, je n’ai eu qu’à ouvrir ma console et entrer :

sudo apt-get install poedit

… et le tour était joué!

Pour la documentation sur cet outil indispensable pour tout développeur de thème sérieux, dirigez-vous vers leur site au http://poedit.net/ et bonne traduction!

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/

Partagez votre contenu WordPress avec Simple Share Buttons

Depuis un petit moment, j’essaie de trouver le meilleur plugin de partage sur les médias sociaux disponible sur WordPress. Ce matin, entre deux bouchées de toast, j’ai trouvé celui-ci. Simple Share Buttons porte bien son nom. C’est facile à utiliser, ça partage le contenu de la page et c’est des boutons (dah).

Ce qui est vraiment intéressant de ce plugin est qu’il est gratuit, très flexible visuellement et offre quelques thèmes de boutons d’entrée de jeu. De plus, il offre l’option d’afficher ou pas le compteur de partages. Le tout, présenté sur une page de configuration ergonomique et esthétiquement réussie.

C’est un must have, selon moi. Et vous, quelles sont vos attentes face à ce type de plugins?

Site du projet: http://www.simplesharebuttons.com/
Repo sur WP.org : http://wordpress.org/plugins/simple-share-buttons-adder/

Font Awesome, pour des icônes efficaces!

Cette librairie ayant été créée avant tout pour Twitter Bootstrap, j’ai eu le plaisir de l’utiliser sur un site n’ayant pas ce boilerplate. C’est facile à gérer, léger et si joli!

En gros, Font Awesome, c’est de belles icônes faciles à placer sur votre site et qui donnera un petit genre eyecandy à vos menus et boutons.

L’essayer, c’est l’adopter!

Site web du projet : http://fontawesome.io/
Lien GitHub : https://github.com/FortAwesome/Font-Awesome