Les linters JavaScript

Un linter est un outil d'analyse statique de code source. Il sert à détecter les erreurs, les problèmes de syntaxe et le non-respect d'un style ou des bonnes pratiques.

Une analyse statique consiste à scruter le code source pour obtenir des informations sur le comportement qu'il aura lors de son exécution, ceci sans avoir besoin de l'exécuter. C'est ce qui la distingue du débogage ou profiling.

Les Promesses JavaScript ça promet !

Bien le bonjour à toi qui aimes le JavaScript !

Si toi aussi tu adores faire mumuse avec des appels asynchrones dans tous les sens parce que tu es amené à faire du NodeJS ou simplement parce que tu es sans arrêt en train de faire des appels AJAX tu as sûrement dû toi aussi tomber sur le concept de promesse je me trompe ? Ce post n'a pas pour but d'expliquer l'intérêt des promesses ni leur nature, il y a déjà pléthore de ressources sur le sujet sur le net, mais plutôt de proposer une implémentation "light" de celles-ci dans un but purement didactique.

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.

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