Ce post a pour objectif de vous fournir une solution technique 'from scratch' pour la gestion de l'authentification et des habilitations via angular 4.
Les archives de la catégorie : Front-office
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.
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.
Bien démarrer son projet avec « BULP »
Avec "Bulp", vous allez pouvoir embarquer et effectuer une multitude de tâches qui vont vous aider dans votre projet, à savoir :
- créer un serveur web local
- rafraîchir le navigateur automatiquement à chaque fois qu’un fichier est modifié
- utiliser des préprocesseurs comme Sass ...
- optimiser des ressources comme CSS, JavaScript et les images.
Découverte de Mobx state tree au DevFest
Durant ce DevFest j’ai assisté à la présentation de Mobx state tree par Fabien Juif et Delphine Millet de Zenika et je voulais partager cette découverte avec vous.
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