Lazy loading dans WordPress

Le lazy loading, à quoi ça sert ?

Le lazy Load ou chargement différé est un moyen d’accélérer le chargement HTML et ainsi d’améliorer à la fois l’expérience utilisateur et le référencement des sites.
Le principe est simple : il consiste à différer le chargement de ce qui n’est pas tout de suite utile à la lecture d’une page par le navigateur : à savoir, la plupart des fichiers js et les images qui ne sont pas sensées apparaître immédiatement dans la fenêtre du navigateur car se trouvant dans la partie hors champ de la page (en général le bas de la page). La ligne de démarcation entre partie visible sans scroll et le reste de la page est nommée la ligne de flottaison.

Faire des maths en css avec calc()

calc() est une fonction native de CSS3 qui permet de faire des calculs mathématiques simples (addition, soustraction, multiplication et division) en remplacement de n'importe quelle valeur de largeur / hauteur / position / angle / temps ...etc.

Etre capable de faire des calculs mathématiques simples en CSS peut être utile dans certains cas et peut éviter d'utiliser du javascript inutilement.

Cypress : un framework de tests efficace

Je vous avais présenté il y a quelques mois un framework JAVA de tests d'IHM basé sur Sélenium : Fluentlenium. Lent, pas optimal et loin d'être parfait. C'est pourquoi aujourd'hui je vous présente Cypress, un framework de test d'IHM web, en Javascript. Simple à prendre en main pour des tests rapides et efficaces pour tout site ou application s'exécutant dans un navigateur web !

Mise en place d’un thème Magento 2

Magento 2 intègre un système de thème puissant. Pour rappel, selon  le glossaire Magento, un thème contient des informations graphiques et d'apparence. Il permet de personnaliser le magasin à l'image de la marque.

Je sous propose de suivre la mise en place d'un thème et d'avoir un aperçu de certaines notions essentielles du système de thème utilisé par Magento 2.

Magento permet de disposer de thèmes installables via des packages composer, mais également de créer ses propres thèmes via app/design.

Les thèmes sont destinés à surcharger / étendre les ressources des vues, initialement utilisées par des modules et librairies.

Magento 2 intègre de base deux thèmes : Luma, un thème de démonstration déjà bien personnalisé, et blank, qui sert  de base à la création d'un thème custom, mais intégrant des éléments indispensables, comme la gestion du responsive.

Theme Luma.

CodeLab Vue.js #Devfest2017

Lors du Devfest qui a eu lieu le 19 et 20 octobre, j'ai pu assister à un codeLab de deux heures sur la création d'une application avec Vue.js. Ce codeLab a été dirigé par deux personnes de chez Zenika qui sont Franck ABGRALL et Gregory BEVAN. Il s'est déroulé en deux temps avec une présentation du framework Vue.js puis avec le développement de notre première application.

Vue.js c'est quoi ?

Vue.js est un framework Javascript qui permet de créer des interfaces utilisateurs. Il a été développé par Evan You et la première release de ce framework est sorti en 2014. C'est un framework qui se veut minimaliste, performant et simple d'utilisation.

Déroulement de l'application

L'objectif de cette session a été le développement d'une application de gestion de séries en utilisant l'API Tvmaze. Pour celà, le codeLab a été découpé en 10 parties et chacune de ses parties a été séparée en 4 étapes : Explication, Live coding, 5 à 10 min de développement par nous même avec un résultat attendu et une correction. Durant ces 10 étapes, on a pu voir les principes de base du framework comme la génération d'un nouveau projet avec le client vue-cli (disponible avec npm), mais aussi la création des routes de l'application, les appels http avec les fonctions Javascript, les différentes fonctions Vue.js et la création d'événements entre les composants.

Mes impressions

Ça a été une très bonne expérience avec une bonne explication du langage, deux personnes disponibles en cas de difficultés  et une bonne ambiance.

Si vous voulez voir le résultat attendu, vous pouvez aller sur le lien github suivant : https://github.com/GregoryBevan/devfest-vuejs

Les flex-items

Flexbox est une valeur de la propriété css display. J'ai pu en faire usage sur des projets requérant une compatibilité ie 11 minimum pour profiter des avantages qu'elle procure par rapport aux display: table, display: inline-block ou float: left lorsqu'il s'agit de mettre deux blocs côte à côte (pas de perte de flux, pas d'espace entre les deux blocs).

Avant de parler en détail des flex-items, je vais m'interesser rapidement au flex-container à qui on affecte le display flex. En effet, on donne à un container la valeur flex sur son display, puis une série de propriétés que je vais rapidement énumerer et qui agissent n'ont pas sur lui même, mais sur ses enfants directs (appellé flex-items).