Rails 5 et les tests de mailer

Les tests se passent dans le dossier test/mailers.

Créer un nouveau fichier avec le format suivant : nom_du_mailer_test.rb (ex : notification_test.rb)

Squelette du fichier :

/!\ Vérifier dans le fichier de config/test.rb, que la ligne suivante soit bien présente :

  1. On crée le mail en appelant la méthode du mailer :
  2. On envoie le mail et on teste qu’il est bien parti :
  3. On teste l’expéditeur, le sujet, le destinataire …. :

Pour plus d’informations sur les tests de mailers, et notamment l’utilisation avec des fixtures, aller lire l’article suivant : http://guides.rubyonrails.org/testing.html#testing-your-mailers.

Navigation mobile : alternatives au menu hamburger

Le menu hamburger est un sujet très débattu : les développeurs sont en majorité d’accord mais il y a très peu d’applications qui fonctionnent avec.

En effet, si les applications deviennent trop complexes, il est préférable de découper les fonctionnalités en actions clés et les mettre dans des applications distinctes.

Les menus hamburgers demandent une exploration plus profonde, ralentissent la navigation et peuvent perdre les internautes.

Tabs

Ils permettent d’organiser en catégories, sont connus des internautes, peuvent être combinés avec des labels / icônes.

La navigation en bas

Proche des tabs, système adopté par iOS et Android, la plupart du temps toujours visible. Barre composée d’icônes et labels, qui peut être cachée quand on scrolle et réapparaître par la suite.

Voir plus

S’il y a trop d’éléments dans le menu, on peut ajouter une option « Voir plus ». Il faut réduire la liste à 4 actions principales.

La navigation scrollable

C’est une approche pour les longues listes, barre qui se déplace d’un côté à l’autre. La solution avec les icônes seules est à tester avant la mise en production car elle peut être difficile à comprendre.

Inline

On peut définir les catégories principales sur une même page = page d’accueil. Les groupes peuvent être présentés comme des listes avec des en-têtes distinctes.

Ne pas cacher la recherche

Si la recherche est un point-clé important de l’application, il ne faut pas l’intégrer dans le menu hamburger et la rendre visible tout le temps.

Toujours concevoir avec du contenu

Le contenu seul n’a pas de sens et la mise en page sans contenu non plus.

Sources
https://uxplanet.org/great-alternatives-to-hamburger-menus-d4c76d9414dd#.p4f28msvq

Mjml : framework pour des emails responsive

Présentation

MJML est un framework open-source, développé par Mailjet en collaboration avec Dernier Cri,  qui a pour but de faciliter l’écriture des emails responsives.

MJML est un nouveau langage qui évite aux développeurs de se prendre la tête avec toutes les contraintes des compatibilités de clients mails, de terminaux. Il génère le code à la place des développeurs : ces derniers rédigent leur message en MJML, langage sémantique et simple, et le moteur associé produira automatiquement le code HTML responsive correspondant.

Il n’y a pas de système de grille comme souvent en responsive mais MJML permet de découper l’email en sections horizontales et en colonnes verticales. En mobile, les colonnes viennent s’empiler et prennent toute la largeur de l’écran. Il existe une balise spécifique si on veut un rendu mutli colonnes en mobile.

mjml

Installation

Le code écrit avec MJML est en fait converti en HTML par le package NPM. Il est donc indispensable de l’avoir. Il faut d’abord installer NodeJS et NPM :

Ensuite, lancer la commande pour installer MJML :

Pour convertir le fichier .mjml en .html, il faut utiliser la commande suivante :

Démonstration

Pour créer des templates et se familiariser avec le langage MJML, je vous invite à suivre la documentation pas à pas : https://mjml.io/documentation/.

Pour faire des essais en live, vous pouvez utiliser l’outil suivant : https://mjml.io/try-it-live.

SublimeText

Il existe un package pour faciliter l’édition dans SublimeText (coloration de la syntaxe, snippet, autocomplétion..). C’est disponible sur Github et sur le site Sublime Package Control.

 

Sources :

 

 

Ajouter une palette de couleurs personnalisée sur TinyMCE

Si vous souhaitez utiliser plusieurs couleurs pour votre texte mais en choisissant ces couleurs, voici la méthode.

Dans les configurations de TinyMCE (fichier tinymce.yml pour l’exemple) :

  1. il faut ajouter le plugin textcolor et l’outil forecolor dans la toolbar
  2. Spécifier les couleurs avec l’attribut textcolor_map

Et voilà le résultat :

capture-decran-2017-01-04-a-10-42-18

Ink framework css/js

Initialisation pour les Javascript UI Composants


Avantages

  • INK utilise son propre JS UI pour les widgets et non  jQueryUI.
  • Le fichier autoload.js qu’on charge dans la page permet d’éviter d’écrire du javascript pour créer les composants UI JS. Ce fichier initialise ces éléments automatiquement en fonction de leur classe CSS. Tous les composants sont enregistrés dans autoload.js.
    Par exemple pour créer un datepicker, il suffit d’ajouter la classe ink-datepicker à l’élément :

Pour configurer le calendrier, les options basiques se passent avec des data-attributes et non du javascript.

Pour plus d’infos : http://ink.sapo.pt/javascript-ui/#InkUIDatePicker_1

Si on veut avoir d’autres options plus poussées comme configurer la date en français, il faudra utiliser du JS (http://ink.sapo.pt/javascript/Ink.UI.DatePicker/)

Composants intéressants :

Initialisation pour les UI Composants (CSS)

Le système de grille fonctionne en pourcentage et non en colonnes comme Bootstrap.

  • tiny pour les écrans inférieurs à 320px
  • small pour les écrans de 321px à 640px
  • medium pour les écrans de 641px à 960px
  • large pour les écrans de 961px à 1260px
  • xlarge pour les écrans supérieurs à 1261px

Inconvénients

  • les classes de grilles sont instanciées dans le fichier css mais pas tous les pourcentages. Par exemple : large-20 existe

mais large-21 n’existe pas…

Flexbox

Il faut remplacer le fichier ink.css par celui spécifique aux flexbox :

Pour les navigateurs qui ne sont pas compatibles, on fait appel à Modernizr :

Modernizr va détecter si le navigateur supporte les flexbox et si ce n’est pas le cas, les classes no-flexbox et no-flexboxlegacy vont être ajoutées à l’élément html et Ink va utiliser la feuille de style ink-legacy.

Exemple pour centrer une div :


NB : On garde la class ink-grid pour la grille car l’élément column-group est par défaut un « container flexible ».

Les classes utilisées pour l’alignement :

  • push-top : aligne un élément en haut du container flexbox
  • push-middle : aligne un élément au milieu du container flexbox
  • push-bottom : aligne un élément en bas du container flexbox
  • push-left : aligne un élément à gauche du container flexbox
  • push-center : aligne un élément au centre du container flexbox
  • push-right : aligne un élément à droite du container flexbox
  • order-# : range les éléments suivant l’ordre défini (jusqu’à 10)
  • reverse : inverse l’ordre des éléments d’un container flexbox (n’est pas lié à order)
  • vertical : affiche les éléments flexbox de façon verticale

Pour plus d’informations et voir le fonctionnement en détails : http://ink.sapo.pt/ui-elements/flexbox/

Exemples d’effets sur les hover

Voici des idées pour des transitions / animations sur des hover d’images :

Quelques rappels sur les fonts et les em

  • Différences entre em et rem : l’unité em est relative à son parent contrairement à rem qui est relative à la balise html
  • Mettre font-size: 100% sur l’élément html (et non 1em). Normalement c’est inutile mais il s’agit en fait d’un correctif pour un bug d’Internet Explorer (de 5 à 7), bug qui rend « anarchique » le redimensionnement du texte à la volée dans ce navigateur. Il a du mal à gérer des tailles de texte en em si aucune déclaration en pourcentage ne les précède.
  • Ne pas avoir peur d’utiliser du texte un peu gros pour votre corps de texte, et ne pas trop chercher à « minimiser » les textes « subalternes » en les ramenant à des tailles ridicules (pas en dessous de 80%)

Points sur la propriété line-height :

  • Elle prend soit un nombre (valeur sans unité qui correspond à un coefficient multiplicateur de la taille de fonte utilisée) soit une longueur (valeur utilisée pour calculer la hauteur de la boîte de la ligne)
  • Elle fonctionne mieux si on utilise un facteur / multiplicateur, ce qui signifie pas d’unité, mais seulement un nombre qui multiplie la taille de police.
  • Il est donc préférable de ne pas de mettre d’unité à cette propriété pour éviter les problèmes des cascades.

NB : A la place de 1.2 mettre la valeur souhaitée (1.2 est généralement la valeur par défaut des navigateurs mais selon la police utilisée)

  • Pour du texte, une line-height à 1.4 fois la taille du texte est recommandée.
  • Pour les titres, une line-height à 1.2 est recommandée.

Sources :

Générer une font avec des icônes en rails

Une « fonte-icône » est une police qui utilise des glyphes représentant des icônes vectorielles. Très pratique, car on peut facilement changer la couleur, la taille en css. En plus de leur flexibilité, les polices d’icônes permettent un gain de performance puisqu’il suffit de charger un fichier de police pour avoir accès à beaucoup de caractères.

Nous allons voir comment mettre en œuvre une police d’icônes personnalisée avec Rails.

Nous allons utiliser la gem ‘fontcustom’ de Rails. Cette gem nécessite Ruby 1.9.2+ et FontForge.

1- Installation de fontforge

Si vous avez besoin de Xquartz lors de l’installation de fontforge, vous pouvez le télécharger ici.

2- Ajouter la gem ‘fontcustom’ à votre Gemfile (puis faire un bundle update)

3- Ajouter une tâche rake en créant un fichier /lib/tasks/icons.rake

4- Créer un fichier fontcustom.yml dans config avec les options suivantes :

On va mettre nos icônes svg dans le dossier app/assets/icons. Les fichiers pour la police compilés se mettront dans le dossier app/assets/fonts.

5- Faire la commande suivante pour compiler les icônes :

En regardant votre arborescence, vous verrez que des fichiers ont été créés :

6- Importer le fichier _icons.scss dans votre application.scss

Après l’installation et la compilation, rien de plus simple pour l’utilisation dans vos vues :

Pour connaître les noms des classes, il faut aller voir le fichier _icons.scss qui contient ces noms.

Si on ajoute ou supprime une icône dans le dossier, il suffit de recompiler avec la commande suivante :

Sources :

Intégrer un bouton dans les newsletters

Traditionnellement pour intégrer un bouton, on utilise les padding pour donner de l’espace entre le texte et le bord du bouton. Or, la propriété padding n’est pas du tout gérée de la même façon par les logiciels de messagerie. Au final, on ne peut donc pas garantir un aspect correct du bouton.

Voici une alternative pour contourner ce souci : les bordures.

Au lieu d’avoir le code suivant :

on va utiliser :

Capture d’écran 2016-09-28 à 10.30.04

Les icônes sur le web

Les différentes icônes de déconnexion

icones

L’icône burger Menu VS Texte Menu

Capture d’écran 2016-09-21 à 10.04.02

L’icône avec la bordure est plus cliquée (http://exisweb.net/mobile-menu-icons)

Capture d’écran 2016-09-21 à 10.04.06

Le texte MENU encadré est plus cliqué (http://exisweb.net/mobile-menu-abtest)

Capture d’écran 2016-09-21 à 10.04.11

Le mot MENU est 20% plus cliqué (http://exisweb.net/menu-eats-hamburger)

NB : les utilisateurs d’Android cliquent plus facilement sur l’icône burger contrairement aux IOS qui préfèrent cliquer sur le texte MENU.

Menu accordéon : plus / chevron / flèche et gauche / droite ?

Capture d’écran 2016-09-21 à 10.51.09La majorité des personnes clique sur le label. L’icône est plus cliquée si elle se situe à droite.

Capture d’écran 2016-09-21 à 10.55.39En revanche, le temps du clic est plus long lorsque l’icône est à droite. Les personnes pensent que l’action n’est pas la même sur le label que sur l’icône (surtout si la distance entre les 2 est assez grande)

(https://www.viget.com/articles/testing-accordion-menu-designs-iconography)