Vagabondage de tweets – Septembre 2017 – Drupal, contenus, Vue.JS, Micro-frameworks...

Drupal

4 septembre – Ludovic Coullet ‏@lcoullet 
Migrating Aliases and Redirects to Drupal 8: http://bit.ly/2g8qVs7
Lors d’une migration, il convient impérativement de gérer les anciennes URLs afin d’éviter les erreurs 404. En plus d’êtres désastreuses pour l’expérience utilisateur, les pages 404 sont des éléments néfastes pour le référencement naturel. Dans cet article, vous découvrirez comment migrer les alias fournis par le module du core Drupal 8 Path, et comment gérer les redirections issues du module Redirect.

19 septembre – Ludovic Coullet ‏@lcoullet 
Drupal 8 , HTTPS et Varnish: http://bit.ly/2igqdgB
L’utilisation du protocole HTTPS s’est vite répandue pour plusieurs raisons dont un meilleur classement sur le moteur de recherche Google pour les sites utilisant le HTTPS. Le message d’avertissement « non sécurisé » diffusé par les éditeurs de navigateurs ne favorise pas la confiance des visiteurs. Si Drupal fournit les outils nécessaires pour installer le HTTPS, c’est du côté serveur que ça coince, notamment lorsque l’on souhaite mettre en place un proxy cache. Par exemple, quand on utilise Varnish pour mettre en cache les données afin d’optimiser la performance d’un site, celui-ci ne permet pas de gérer les communications chiffrées. Pour combiner un système de cache comme Varnish et le protocole HTTPS, il faut prévoir la mise en place d’une architecture particulière. Pour cela, il y a la technique du SSL Offloading ou du SSL Termination, qui consiste à déchiffrer la communication juste avant de passer le flux à Varnish. La suite se fait en HTTP entre le système de cache et Drupal. Pour les intéressés, nous vous invitons à consulter le tutoriel !

28 septembre – Christophe Dugué @chdugue  
Une liste de modules #Drupal8 pour les projets de #commerce - Ça avance - http://bit.ly/2k5A35s
Pour ceux ou celles qui souhaitent se lancer dans l’aventure du e-commerce avec Drupal, voici une liste intéressante de modules Drupal 8 pour le e-commerce :

• Commerce Sqaure Connect : l’intégration de solutions tierces est souvent indispensable pour couvrir certains besoins fonctionnels. Ce module permet le paiement en ligne avec la plateforme de paiement Sqare avec tout le package de sécurité (la tockénisation, la conformité aux normes PCI DSS, la surveillance des fraudes, etc).
• Commerce Stripe : ce module permet de bénéficier de la fameuse plateforme de paiement Stripe. Il propose des fonctionnalités avancées de tokénisation pour une meilleure sécurité. Par ailleurs, il permet aux utilisateurs de payer en ligne avec le mode de paiement au choix (de la carte Visa au Bitcoin) sans quitter la boutique en ligne.
• Commerce Paytrail : il s’agit d’une autre solution de paiement pour le site e-commerce parmi tant d’autres (Authorize.Net, SmartPay, Payeezy, Amazon Pay, etc.).
• Ubercart QuickPay : ce module permet de bénéficier du paiement en ligne QuickPay et de ses fonctionnalités comme le support multilingue, des fonctionnalités avancées pour la sécurité, un support de remboursement des paiements, etc.
• Tawk.to Live Chat : un service client en temps réel est indispensable pour une relation client optimisée. Ce module propose d’intégrer le chat Tawk.to dans votre site Drupal 8.
• VAT Number : ce dernier permet de gérer les fonctionnalités et les champs dédiés à la TVA (vérification de la TVA, correspondance de la TVA de destination etc.).
• Commerce Ajax Add To Cart : ce module propose d’exploiter la puissance d’Ajax pour le panier. Lorsque de nouveaux éléments sont ajoutés, les informations sont mises à jour sans actualisation de la page et un message contextuel informe qu’un élément a été ajouté dans le panier.
• Commerce shipping : permet le calcul des tarifs d’expédition pour les produits. Il intègre la sélection du service d’expédition avec le formulaire de vérification et modification des commandes. Il est possible de définir des paramètres flexibles dans l’interface utilisateur.
• Ubercart Volume Pricing : ce module propose de définir des réductions de prix sur certains produits. Il est possible de le faire directement via le formulaire de modification du produit.
• Easy CurrencyCON : il s’agit d’un convertisseur de devises intuitif.

Contenu web

20 septembre – Ryad Karar @ryadkarar
Quelques règles de base pour un contenu qui marche => http://bit.ly/2xLghh5
L’organisation et la qualité du contenu sont des éléments importants pour garantir une communication efficace, à la hauteur de l’image de votre projet. Il ne s’agit pas seulement de créer un bloc et d’y publier des mots. D’autres éléments entrent en compte pour concevoir un contenu efficace et qui tienne compte des attentes de l’utilisateur final. La convivialité doit être une considération clé pour tout contenu que nous créons et publions sur le web. A ce propos, une étude de Jakob Nielson utilisant l’eye-tracking montre comment les visiteurs lisent le contenu sur le web (sur la base de 232 utilisateurs lisant des centaines de pages web). Des conclusions ont été tirées de cette étude notamment sur la manière de lire les pages : nous avons tendance à parcourir les premières lignes d’un bloc de texte puis à sauter la page pour le prochain point d’entrée (une lecture en mode F). Cela montre que la présentation du contenu est aussi importante que le contenu lui-même. Le design peut optimiser radicalement un contenu web afin de le rendre utilisable, utile et engageant. Voici quelques lignes directrices basiques vivement recommandées :

• Le design et le layout : la lisibilité est l’un des premiers éléments à prendre en compte lorsqu’il s’agit de créer du contenu de qualité. Il faut porter une attention particulière sur le style des pages, aux mots, à l’espacement et à la disposition.
• La ligne de lecture : proposer une ligne de lecture agréable est primordial pour éviter de lasser l’utilisateur pendant la lecture. Pour cela, il s’agit de jouer sur la taille de la police et des largeurs de colonne de contenu pour éviter de fatiguer l’œil. Par exemple, si vous optez pour une grande taille de police, il faudra prévoir une colonne plus large pour obtenir la même longueur de lecture qu’avec une police plus petite. Il est conseillé de prévoir entre 45 et 75 caractères pour un affichage sur desktop et entre 35 et 50 pour les tablettes/ Smartphones. Au-delà, les lecteurs auront du mal à finir la lecture des lignes et passeront à la suivante.
• L’espacement et les paragraphes : il convient de définir un espacement convenable entre les lignes pour faciliter la lecture. Celui-ci ne doit pas être trop grand pour éviter de le confondre avec l’espacement prévu pour le commencement d’un nouveau paragraphe. L’espacement des lignes et l’espacement des paragraphes doit être bien distinct pour éviter toute confusion gênante.
• Les éléments distrayants : certains sites utilisent encore des barres latérales pour y placer de la publicité ou des mises en avant de contenus. Le web a évolué vers la conception de pages longues en une seule colonne, pour des raisons esthétiques (plus propre et l’interface est simplifiée) mais également pour des raisons d’engagement. En effet, le contenu est valorisé, l’engagement des utilisateurs y est plus propice et le taux de conversion est plus important. 
• La structure du contenu : la forme physique des lignes et des paragraphes joue un rôle crucial dans l’engagement du lecteur. Cela va au-delà du style d’écriture ou de la grammaire, il s’agit d’instaurer un certain rythme et une cadence d’écriture. Les variations de longueur et de densité influent sur l’attention du lecteur. Certaines manières de structurer l’information permettent de guider l’œil du lecteur, par exemple quand vous écrivez une phrase très courte entre deux paragraphes longs, les yeux du lecteur tombent naturellement dessus. Ainsi, il est possible de contrôler l’endroit où le lecteur entre dans le contenu en fonction de la manière d’utiliser les paragraphes, les sauts de lignes, les longueurs de phrases, les blocs, etc.

… et bien d’autres astuces pour rendre vos contenus attractifs.

Vue.JS

3 septembre – Ludovic Coullet ‏@lcoullet 
“Why we moved from Angular 2 to Vue.js (and why we didn’t choose React)”: http://bit.ly/2gp6JBV
Voici un retour d’expérience intéressant sur l’adoption de Vue.JS, par Luis Elizondo, lead développeur chez Rever. Luis nous explique pourquoi il a troqué Angular contre Vue.JS et pourquoi il a exclu React des possibilités pour le développement d’un projet web pour son client. Nouveau dans l’écosystème JavaScript, Vue.JS s’est imposé comme un sérieux concurrent à React et Angular. Certains affirment même que ce framework les surpasse sur bien des points. Après avoir testé React et Vue.JS, les constatations de Luis sont sans appel :

• Une facilité de compréhension des concepts de bases de Vue.JS et une facilité à définir une architecture performante et extensible ;
• Une expérience de l’écriture du code agréable et bien plus intuitive et rapide qu’avec React ;
• React propose d’utiliser le JSX mais ce dernier ne permet pas de réutiliser le HTML tandis que Vue.JS le permet. Avec Vue.JS, les fichiers sont faciles à manipuler tandis que React mélange à la fois JSX/HTML avec le code.
• Vue.JS confère une rapidité de codage bien plus impressionnante qu’avec React. Les fichiers de Vue contiennent une section template avec du HTML et des balises. Le fichier contient également les styles et une section dédiée au JavaScript pure, ne nécessitant d’apprendre que quelques informations sur Vue.JS. En effet, se familiariser avec les propriétés de Vue.JS (méthodes, calculs, propriétés, données) représente 90% de ce qu’il faut comprendre pour commencer le codage avec cette solution. La prise en main est donc facile.
• La documentation est fournie et de qualité. Les guides d’exemples ainsi que les API sont bien documentés.

11 septembre – Ludovic Coullet ‏@lcoullet 
C'est bien parti ! - #VueJS devient-il un géant comme #AngularJS et #ReactJS ? http://bit.ly/2uaK5mG  - #FrontEnd
Vue.JS est de plus en plus comparé aux géants Angular et React. En effet, si on en croit les statistiques des recherches sur Google, nous pouvons constater une nette augmentation des recherches de Vue.JS par rapport à React, avec un nombre de téléchargements qui a plus que triplé depuis cette année pour Vue.JS. Qu’est ce que se cache derrière cette technologie qui fait gagner le cœur des développeurs ? Si Vue.JS devient de plus en plus populaire au détriment d’autres technologies, c’est en raison de ses avantages attrayants :

• Vue.JS est deux fois plus rapide que React (51ms vs 94ms) ;
• Vue.JS est une solution réactive et profite des meilleures fonctionnalités de React. Le framework fournit un DOM virtuel qui permet de surveiller les modifications ;
• Vue.JS est flexible et offre un large choix de librairies ;
• Vue.JS est très bien documenté, vous pourrez trouver des guides d’utilisation détaillées qui répondent aussi bien aux questions des novices que des développeurs expérimentés.
• …et bien d’autres.

Qui utilise Vue.JS ? Pour citer quelques noms : Facebook, Xiaomi, WizzAir, EuroNews, Gitlab ; LaraCats, Grammarly et même le géant site e-commerce Alibaba (sur certains landing pages). Si vous l’avez testé, nous serions ravis d’entendre votre retour d’expérience !

Redis

8 septembre – Christophe Dugué @chdugue
#Redis obligatoire sur nos projets #Drupal - Un petit #tuto pour la configuration avec #Drupal8 : http://bit.ly/2gkIjcW
La performance est une exigence aussi importante que le design ou encore le contenu web. Un site qui met du temps à charger fait fuir instantanément les visiteurs, et c’est l’effet contraire de ce qu’on attend d’un site internet. La configuration d’un cache est une étape indispensable dans la conception/ ou l’optimisation d’un site internet. Drupal s’appuie sur des tables de bases de données pour mettre en cache du contenu mais il y a des solutions de cache beaucoup plus performantes et notamment Redis, un système de gestion de base de données clef-valeur scalable à très haute performance. Ce dernier dispose de caractéristiques intéressantes :

• La rapidité : Redis permet de manipuler des données en mémoire vive, c’est pourquoi il peut être utilisé comme serveur de cache.
• La persistance : Redis offre un large éventail d’options de persistance qui peuvent être configurées selon le besoin.
• Des types de données puissantes : les strings, les hashs, les listes, les sets, les sorted sets, etc. 

Si vous souhaitez mettre en place Redis pour votre site Drupal, nous vous invitons à consulter le tutoriel !

Sketch

11 septembre – Christophe Dugué @chdugue  
#Sketch : le design web nouvelle génération ! - cc @ryadkarar - #UX #UI : http://bit.ly/2xRZONi
Voilà maintenant 8 mois que notre UI/UX Designer Ryad Karar a adopté un nouveau logiciel de design : Sketch. Toujours à l’affût des nouveautés, Ryad a accepté de nous partager son retour d’expérience concernant l’utilisation de cet outil : premières impressions, comparaisons avec Photoshop, avantages et inconvénients de l’outil, l’amélioration du workflow grâce à ce logiciel, etc. Si vous envisagez de changer d’outil UI/UX, ce témoignage peut vous aider !

Micro Framework

7 septembre – Journal du hacker @journalduhacker
Les micro-framework PHP de 2017 : http://bit.ly/2xPwfHh
La liste des frameworks est assez longue, parmi eux nous retrouvons la catégorie des micro-frameworks. Ce sont des frameworks légers et de petite taille, contenant principalement des outils/ librairies de base pour le routage, la gestion des requêtes et des réponses et enfin l’affichage ou le templating d’une page. Dans bien des cas, les micro-frameworks sont suffisants puisqu’ils permettent de mettre en place une API REST ou des micro-services rapidement. Leur avantage par rapport aux gros frameworks est qu’ils sont plus faciles à appréhender avec une courbe d’apprentissage nettement plus courte, d’autant plus que l’utilisation d’un gros framework PHP n’est pas toujours justifiée. Jetons un coup d’œil sur les 5 principaux frameworks en 2017 :

• Fat-Free Framework : léger (65Kb), Fat-Free Framework supporte un grand nombre de bases de données SQL/NoSQL et propose un nombre important d’extensions. Il est orienté sécurité (anti-spam, protection DDOS, vérifications DNSBL, contrôle de trafic, etc.).
• Slim : celui-ci supporte l’injection des dépendances (PSR-11) et le standard des messages HTTP (PSR-7). Même si ce framework est performant et sécurisé, il propose peu d’extensions, ce qui signifie qu’il faudra coder une partie à la main.
• Lumen : c’est le micro-framework dérivé de Laravel, il réunit un sous ensemble de classes de ce dernier. Il fournit également un certain nombre de composants en standard (authentification, autorisation, cache, etc.).
• Silex : c’est un petit framework issu du géant framework Symfony. S’il n’est pas le plus léger, il est l’un des micro-frameworks les plus complets pour des applications de taille moyenne.
• Flight : celui-ci n’est pas le plus riche, certes, mais il fait bien l’affaire pour les API REST ou les petites applications web. Son code est clair et la documentation est efficace.

Nous concernant, notre équipe de développeurs Drupal à choisi Phalcon, un micro-framework unique en son genre. Ecrit en C, il est compilé et s’installe sous la forme d’une extension PHP et fournit des performances très avancées. En effet, il est jusqu’à 10 fois plus rapide qu’un framework PHP alors qu’il fournit des fonctionnalités quasi similaires. Nous l’utilisons comme complément à Drupal, pour des grands projets exigeant une certaine performance et robustesse.

Code

8 septembre – Christophe Dugué @chdugue
Etude sérieuse : 1 heure de revue de code fait économiser 33 heures de maintenance - - #CodeReview #TMA : http://bit.ly/2wew6fA
La revue de code est une étape si importante, que selon l’étude de l’IFSQ (The Institute of Software Quality) 1 heure de revue de code ferait économiser 33 heures de maintenance. Les résultats sont édifiants, toujours selon l’étude de l’IFSQ, il est estimé que :

• l’inspection de code est 20 fois plus efficace que les tests ;
• l’inspection de code est 80% plus rapide à réaliser que les tests ;
• le débug représente la moitié des coûts de développement.

Une étape sur laquelle on ne s’y attarde pas assez, la revue de code fait gagner un temps colossal dans un projet web, pensez-y !

Divers

15 septembre – bluedrop.fr @bluedrop_drupal
Mise en production de la version #responsive du magazine scientifique Points de Vue, du groupe #Essilor #Drupal http://bit.ly/2wg8c8o
Nous avons eu l’occasion de collaborer avec le leader mondial de la création et de la production de verres correcteurs - Essilor -, dans le cadre d’un projet de refonte du front-end Responsive du site internet www.pointsdevue.com. Fidèles à Foundation, cette fois-ci ça n’a pas été le cas car le site disposait déjà d’un thème Bootstrap. Nous avons tout mis en œuvre pour ne pas alourdir le traitement du thème en place suite aux modifications ergonomiques, et simplifier certains comportements front-end liés au design d’animation pour les rendre accessibles en Responsive Design. Nous vous invitons à jeter un coup sur le résultat !

11 septembre – Ludovic Coullet ‏@lcoullet 
Mise en production du nouveau site d'ebizproduction - Drupal 8 | Bluedrop, Agence web Drupal https://buff.ly/2wb1Enj
Voilà plusieurs mois que nous souhaitions entreprendre la refonte de notre propre site Drupal et c’est enfin arrivé ! La précédente version du site nous avait servi de « laboratoire » puisqu’il s’agissait de notre tout premier site Drupal en version bêta. Nous avons profité des nouvelles mises à jour et de la stabilité de Drupal 8, pour refondre entièrement le site : rafraîchissement de l’identité graphique de l’agence web marseillaise ebizproduction, développement d’un socle technique simple mais efficace et quelques affinements côté Front-end. Dans ce post, nous vous dévoilons les modules Drupal et les spécifications front-end qui ont servi à ce projet !