Vagabondage de tweets – Janvier 2017 – Drupal 8, modules, JavaScript, Cosmic JS…

Drupal

19 janvier – Ludovic Coullet @lcoullet
Mettre en place une visite guidée sur #Drupal 8 | Flocon de toile http://buff.ly/2k6zdEV
Le module Tour vous dit quelque chose ? Intégré dans le core de Drupal 8, ce module permet de mettre en place une aide contextuelle sous forme de bulle d’aides permettant aux webmasters de bénéficier d’une aide contextuelle étape par étape. Ce module est intéressant pour guider les utilisateurs dans l’utilisation d’un site que ce soit pour la découverte de leur profil, la manière de créer du contenu ou sur la gestion des contenus d’un site. L’expérience utilisateur en est ainsi significativement améliorée. Pour mettre en place une visite guidée sur votre site Drupal 8, il vous suffit de :

• Créer les différents éléments de contenu de l’aide contextuelle au sein d’un fichier de configuration YAML, en lui attribuant un identifiant, un label et en affectant la visite guidée à une ou plusieurs routes ;

• Ajouter les étapes de la visite guidée dans ce même fichier en les affectant à une classe ou un identifiant HTML présent dans le balisage de la page ;

20 janvier – Bluedrop Agence web @bluedrop_drupal
Vous allez (re)lancer votre #ecommerce ? Séléctionnez la solution adaptée à VOS besoins ! #Drupal #Module #web : http://bit.ly/2jYTZTd
Les solutions Drupal sont nombreuses et répondent à un large éventail de besoins. Si la concurrence est rude, Drupal maintient un certain niveau de compétitivité grâce aux multiples modules que le CMS propose notamment par l'intermédiaire des distributions Ubertcart et Drupal Commerce, mais pas seulement ! En effet, la communauté e-commerce Drupal est réactive et propose régulièrement des mises à jour. Quelle solution e-commerce choisir ? Le choix de l’outil dépendra de la particularité de votre site Drupal : est-ce une boutique simple proposant quelques produits ? Est-ce une plateforme vendant un nombre de produits conséquent et qui demande robustesse et performance ? La force de Drupal dans les projets e-commerce est qu’il permet de composer votre solution sans vous encombrez de fonctionnalités inutiles et qui pourraient alourdir votre site. Voici quelques solutions proposées Drupal :

• Drupal Commerce : cette distribution est de loin la solution la plus populaire des distributions e-commerce de Drupal. Elle convient aux projets robustes exigenant des fonctionnalités avancées. Avec Drupal Commerce, vous disposez également de toutes les fonctionnalités typiques d’un site web Drupal.  La distribution Drupal 8 est encore une version bêta et nécessite encore des efforts de la communauté.

• Ubercart : cette solution est idéale pour les projets de sites e-commerce simples, sans fonctionnalités additionnelles complexes ;

• Commerce Kickstart : cette distribution est très utilisée par les webmasters ne disposant pas de connaissances avancées en développement. Simple et rapide, la distribution fournit de nombreuses fonctionnalités pour construire votre site sur la base de modèles de sites types. 

• Stripe API : ce module permet de construire des solutions de paiement personnalisées sur votre site Drupal (marketplaces, ventilation des paiements, etc.)

26 janvier - Ludovic Coullet @lcoullet
“Managing Microsites with #Drupal 8” by @joesb … Un superbe article que j'aimerai bien mettre en pratique ! http://bit.ly/2jHenqL
Les microsites sont souvent utilisés dans la diffusion de messages périssables ou immersifs. Quelles sont les solutions Drupal permettant de concevoir et administrer ce type de projet ? Le CMS propose plusieurs solutions qui peuvent plus ou moins convenir selon la nature de votre projet et vos ressources :

• La gestion multi-sites : elle peut être une alternative pertinente pour les sites qui demandent des fonctionnalités et des modules similaires. Cependant il est consommateur de ressources et difficilement maintenable si la base du code diffère d’un site à un autre.

• Domain Access : cette suite de modules fournit les outils nécessaires pour gérer un groupe et les affilier à des sites depuis une même base de données. Domain Access permet de partager des utilisateurs, du contenu et même des configurations croisées sur plusieurs sites. Cependant, cette solution présente les mêmes inconvénients que le multi-sites avec un contrainte supplémentaire : la base de données unique à tous les sites. 

• Organic Groups : avec ce module vous pouvez créer un groupe dans votre site Drupal. Ce même groupe peut avoir ses propres utilisateurs, administrateurs, contenus, menus voire design. Dans le cas d’un projet de microsites, cela parait cohérent. Toutefois, cela implique que chaque microsite soit géré depuis le principal site, ce qui ne répond au besoin d’avoir un microsite avec son propre nom de domaine et dont la gestion est externalisée.

Vous avez en outre deux possibilités pour administrer vos sites : les web services RESTful  et l’architecture du « headless CMS ». En effet, il suffit de prendre Drupal pour sa fonction principale : la gestion de contenu. Les données proviennent d’un hub via l’API RESTful. Ensuite, il convient d’implémenter un front-end différent selon le microsite, qui communiquera avec le hub du CMS via l’API.

Et avec Drupal 8 ? Voici l’approche d’un développeur dénommé Joe Baker :

• il a imaginé le prototype d’une API qui permettra de décrire les microsites ainsi que leurs contenus ;

• il a installé une instance Drupal qui servira pour concentrer le contenu des éditeurs. Il a créé des types de contenu qui sont le noyau d’un micro-site. Chaque type de contenu créé génère un micro-site. Le site généré peut disposer d’un nom de domaine externe au site principal.

Suivez ce tutoriel et lancez-vous !

26 janvier –  Bluedrop Agence web @bluedrop_drupal 
Migration de données d'un fichier #CSV vers #Paragraphs dans #Drupal - http://buff.ly/2kmPIJT
Paragraphs est devenu le module incontournable pour la création de contenus et confère un plus grand pouvoir éditorial dans la présentation du contenu. Pour migrer vos données de CSV vers Paragraphs, il est possible d’utiliser le scénario d’un type de contenu d’une Landing Page qui dispose de paragraphes ayant une valeur unique et d’un paragraphe ayant plusieurs valeurs. Voici un tutoriel intéressant pour réaliser la migration.

Javascript

12 janvier – Ludovic Coullet ‏@lcoullet 
The top rising JavaScript trends to watch in 2017 – Commit.Push. – Medium http://bit.ly/2kwakBP
Voici la liste des nouveautés JavaScript pour 2017 :

• WebAssembly : il est permet de faciliter le code dans n’importe quelle langage et de compiler pour le web. Par exemple, il est utilisé pour compiler ou instancier des modules wasm qui ont été chargés dans une instance de tableau typé JavaScript. Il permet également de compiler un nouveau module grâce aux constructeur Webassembly.Module() ou de créer de nouvelles instances pour la mémoire et les tableaux grâce aux constructeurs Webassembly.Memory() et Webassembly.Table(). Ses fonctions sont nombreuses.

• Elm : très apprécié en 2016, Elm est un langage de programmation fonctionnelle accessible pour tous les développeurs web. Il permet une certaine fiabilité et une maintenance simplifiée aux applications JavaScript dans les navigateurs.

• Vue.js : sérieux concurrent de React, Vue.js peut être utilisé de plusieurs façons telles que la création d’un petit widget, la réalisation des Single Page Application, la création de vos propres composants voire la création d’applications complexes.

• Babili (babel-minify) : il permet de minifier du code ES2015. Modulaire et flexible, il prend en charge les plugins utilisateurs et permet notamment de réaliser des optimisations sur le code JavaScript ES2015.

• OCaml : est l’implémentation la plus avancée du langage de programmation Caml. OCaml propose un large choix de possibilités du langage en permettant la programmation orientée objet et la programmation modulaire. Il ne fait pas parti de l’écosystème JavaScript mais peut être intéressant du fait qu’il propose des compilations pratiques d’OCaml vers JavaScript.

• BuckleScript : c’est un back-end JavaScript pour la compilation du code Ocaml en JavaScript. 

• ReasonML : créé par la même équipe de développeurs de React ? ReasonML est un langage proposant une syntaxe agréable et des outils performants.

• Purescript : grand rival d’Elm, Purescript est un langage de programmation qui compile le JavaScript. Il présente de nombreux avantages comme : une exécution facile et légère, la prise en compte de la notation littérale des objets JavaScript, et une évaluation du code.

• Typescript : c’est un préprocesseur qui compile le JavaScript. Il permet de disposer d’un code de qualité et est agréable à lire. 

• Webpack-blocks : il permet de configurer WebPack, ayant pour objectif de vous faciliter la vie dans l’organisation de vos applications JavaScript en modules.

• GraphQL : alternatif à REST, GraphQL est un langage d’interrogation créé par Facebook en 2012 où le format de la requête et le même que celui de la réponse. Il fournit une interface commune entre le client et le serveur pour l’extraction de données.

• React Storybook : avec cet outil, vous pouvez développer et designer les composants de l’interface utilisateur dans un environnement isolé à votre application. Cela permet à d’autres personnes d’intervenir sur la phase d’UI design.

• jQuery 3.0 : c’est une continuation de la version 2.0 mais avec des changements importants tels que la suppression des hacks de IE9, une nouvelle API pour des animations plus performantes et fluides et enfin le support du mode stricte.

• Pixi.js : celui-ci est un moteur de rendu HTML5 permettant de réaliser des animations en détectant automatiquement si le rendu doit être en WebGL ou en Canvas. Cette bibliothèque s’est montrée pertinente pour le développement de jeux vidéo.

• Preact : c’est une version light alternative de React avec la même API ES6. Elle ne prend que 3KO et en assure les mêmes fonctionnalités.

• Inferno : ce framework JavaScript se veut être meilleur que React. Il intègre une bibliothèque similaire à celle de React pour la conception d’interface utilisateur performante. Il est léger, rapide et orienté mobile. 

• Rust : un autre langage rapide à utiliser qui permet la compilation en JavaScript. Son principal avantage est la sécurité de la gestion mémoire. Par ailleurs, il reprend une syntaxe plus expressive.

• Custom Element v1 : il apporte une méthode basée sur les standards web pour créer des composants réutilisables. Il permet notamment de créer de nouvelles balises HTML, de renforcer les balises HTML existantes ou d’étendre les composants créés par d’autres développeurs.

• WebRTC : utilisé par Facebook, Slack ou encore Snapchat, WebRTC est une API JavaScript pour la communication en temps réel.

• Next.js : c’est un petit framework qui a été développé sur la base de React, Webpack et Babel. Il permet d’effectuer le rendu des applications web React par les serveurs avec un routage côté client qui se présente comme les applications universelles natives. 

Erlang et Elixir

6 janvier – Ludovic Coullet ‏@lcoullet 
Introduction to Erlang and Elixir: http://bit.ly/2k4jOnf
Elixir est un langage de programmation rapide, dynamique et évolutif basée sur Erlang et sa machine virtuelle Beam. Puissant et polyvalent, Elixir est utilisé par les centaines plus grandes applications du monde. Il est apprécié en raison de :

• Sa syntaxe agréable (proche de celle de Ruby) ;

• Sa compilation rapide ;

• Ses processus légers ;

• Son extensibilité avec les modules DSL ;

• Sa tolérance aux pannes grâce à Supervisor, le rendant robuste pour n’importe quel projet web.

• Le rechargement du code à chaud ;

• Et bien d’autres… !

Design

4 janvier –  Bluedrop Agence web @bluedrop_drupal 
Les nouveaux outils d'#ux #design pour 2017 que vous DEVEZ essayer ! Chez bluedrop, nous avons flashé pour #Adobe XD ! http://buff.ly/2j8iv7u
L’année 2016 a été riche en nouveautés côté webdesign, voici une liste des outils les plus populaires à ne pas manquer pour vos projets de 2017 :

• Figma : c’est un logiciel de design collaboratif.  Figma se distingue par ses fonctionnalités de travail collaboratif en temps réel, similaire aux services Google Drive. Son interface s’apparente à celle de Sketch, ce qui confère un apprentissage plus rapide pour ceux qui utilisent déjà Sketch.

• Adobe XD : c’est une application d’illustrations vectorielles qui permet le prototypage avec de nombreux plans. Les réviseurs peuvent donner leur avis sur les prototypes sans avoir à s’identifier avec un Adobe ID. Contrairement à Sketch qui est exclusif à Max OS X, Adobe XS est également disponible sous Windows 10.

• Sketch & Plugins : Sketch s’utilise globalement comme Photoshop mais est plus adapté aux besoins spécifiques des designers. Le logiciel intègre la logique du CSS et permet aux utilisateurs de créer des exports en un seul clic et dans des formats différents. Du côté de l’ergonomie, pour chaque objet ajouté un calque différent est créé facilitant la création et la navigation. Il est d’ailleurs possible d’étendre son utilisation grâce à une grande variété de plugins. Nous l’avons adopté chez bluedrop.fr ! 

• Zeplin : c’est le plugin le plus connu de Sketch. Il aide les développeurs à vérifier facilement les couches des spécifications d’interface utilisateurs. Les développeurs peuvent commenter sur dans un Artboard ou télécharger les éléments nécessaires au développement via l’outil. Une excellente solution pour la co-construction entre designers et développeurs.

• Stage & Gallery : Stage un outil de prototypage d’interactions tandis que Gallery est un outil de collaboration pour les designers.

• Framer : c’est un puissant outil pour faire du design d’interaction utilisant du codage (Coffeescript) pour le prototypage. Comme InVision, il faut importer son interface et ensuite le rendre interactif à l’aide de quelques lignes de code. Complet, il nécessite toutefois de l’apprentissage et de la maitrise pour l’utiliser pleinement.

• ProtoPie : cette solution permet de créer des prototypes mobiles animés sans avoir à rédiger une ligne de code. Il propose des fonctionnalités assez complètes et se concentre sur les animations et interactions sur une interface mobile. Les prototypes sont testables directement sur Smartphone grâce à l’application qui permet de tester en condition réelle les interactions avec également la possibilité d’utiliser les capteurs du SmartPhone pour plus de réalisme.

Progressive Wep Apps

27 janvier – Ludovic Coullet ‏@lcoullet 
Pourquoi les applications natives ne doivent plus être votre priorité http://buff.ly/2kpNHMM  (alors si même Cavazza le dit...)
Le marché des applications évolue à grande notamment avec l’écrasante concurrence des GAFA et des éditeurs de jeux mobiles. Aujourd’hui se démarquer avec une application mobile native est difficile voire impossible étant donné que les deux tiers des utilisateurs ne téléchargent plus d’applications mobiles en avançant que les applications de messagerie leur suffit. En plus de la saturation de ce marché, le coût pour concevoir sa propre application mobile est élevé.Une nouvelle catégorie d’applications mobiles est apparue : les Progressive Web Apps. Ce sont des applications web qui fonctionnent comme des applications mobiles c'est-à-dire :

• Elles sont disponibles depuis la page d’accueil de votre Smartphone mais sans téléchargement. Il s’agit en réalité d’un raccourci créé vers la Progressive Web App ;

• Elles ne prennent pas de place puisque il n’y a pas de téléchargement d’applications ;

• Elles interagissent avec votre Smartphone telle une application mobile ;

• Du côté des développeurs, les coûts sont drastiquement réduits puisqu’il n’y a plus la nécessité de concevoir une version pour chaque app store. De plus, les règles sont moins contraignantes (pas de commission prélevé par Apple par exemple…).

Et bien d’autres avantages… 

SEO Drupal

27 janvier –  Christophe Dugué @chdugue
@DouichenSofiane - Module #Drupal8 SEO checklist :) Pour gagner du temps -   - #SEO #Drupal http://bit.ly/2ku51jG
Lumière sur un module intéressant pour l’optimisation SEO d’un site Drupal 8 : SEO Checklist ! Ce module propose plusieurs fonctionnalités telles que : la vérification de votre site web pour le référencement SEO, la liste des tâches pour optimiser le référencement naturel, la liste des modules SEOà installer selon les besoins en SEO de votre site, la vérification des modules SEO déjà installés sur votre site et bien d’autre… n’hésitez pas à le tester !

Divers

25 janvier – Ludovic Coullet ‏@lcoullet 
Liberating Digital Agencies by Switching to a CMS API http://buff.ly/2kpLOPE  c'est sympa mais à qui appartiennent les données ?
Si on décidait d’optimiser l’exécution de la partie back-end : installation du CMS, configuration du CMS, développement et maintenance ? Cosmic JS offre une API intuitive qui permet de construire des applications rapidement avec n’importe quel langage. Il fournit des outils et des fonctionnalités permettant un important gain de temps pour les développeurs. Le contenu est accessible via une API JSON. Attention, le site sera hébergé chez Cosmic JS et le code est transféré du dépôt GIT vers le serveur d’application Cosmic.