lise | Sois Net !

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 :

require 'test_helper'

class NomDuMailerTest &lt; ActionMailer::TestCase

end

require 'test_helper'

class NomDuMailerTest < ActionMailer::TestCase

end

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

config.action_mailer.delivery_method = :test

1	config.action_mailer.delivery_method = :test

On crée le mail en appelant la méthode du mailer :

</code><code class="ruby plain">email = MonMailer.envoi_mail(</code><code class="ruby string">'expediteur@example.com'</code><code class="ruby plain">, </code><code class="ruby spaces"></code><code class="ruby string">'destinataire@example.com'</code><code class="ruby plain">, </code><code class="ruby color1">'sujet'</code><code class="ruby plain">)

</code><code class="ruby plain">email = MonMailer.envoi_mail(</code><code class="ruby string">'expediteur@example.com'</code><code class="ruby plain">, </code><code class="ruby spaces"></code><code class="ruby string">'destinataire@example.com'</code><code class="ruby plain">, </code><code class="ruby color1">'sujet'</code><code class="ruby plain">)

On envoie le mail et on teste qu’il est bien parti :

assert_emails 1 do email.deliver_now end

1
2
3

assert_emails 1 do
email.deliver_now
end

On teste l’expéditeur, le sujet, le destinataire …. :

</code><code class="ruby plain">assert_equal [</code><code class="ruby string">'expediteur@example.com'</code><code class="ruby plain">], email.from</code> <code class="ruby plain">assert_equal [</code><code class="ruby string">'destinataire@example.com'</code><code class="ruby plain">], email.to</code> <code class="ruby plain">assert_equal </code><code class="ruby string">'sujet'</code><code class="ruby plain">, email.subject

</code><code class="ruby plain">assert_equal [</code><code class="ruby string">'expediteur@example.com'</code><code class="ruby plain">], email.from</code> <code class="ruby plain">assert_equal [</code><code class="ruby string">'destinataire@example.com'</code><code class="ruby plain">], email.to</code> <code class="ruby plain">assert_equal </code><code class="ruby string">'sujet'</code><code class="ruby plain">, email.subject

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 :

sudo npm install -g mjml

1	sudo npm install -g mjml

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

mjml -r index.mjml -o index.html

1 2	mjml -r index.mjml -o index.html

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) :

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

plugins:
  - textcolor
toolbar:
  - forecolor
textcolor_map: [
  "d24e94", "Rose",
  "7e436d", "Violet",
  "807577", "Gris",
  "3cb5ca", "Bleu"
]

plugins:

- textcolor

toolbar:

- forecolor

textcolor_map: [

"d24e94", "Rose",

"7e436d", "Violet",

"807577", "Gris",

"3cb5ca", "Bleu"

]

Et voilà le résultat :

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

Ink framework css/js

Initialisation pour les Javascript UI Composants

<span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"http://fastly.ink.sapo.pt/3.1.10/js/ink-all.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"http://fastly.ink.sapo.pt/3.1.10/js/autoload.js"</span><span class="nt">&gt;&lt;/script&gt;</span>

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 :

&lt;input type="text" class="ink-datepicker" /&gt;

1	<input type="text" class="ink-datepicker" />

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

&lt;input type="text" class="ink-datepicker" 
       data-format="d-m-Y"
       data-auto-open="true"
       data-start-date="2012-06-02"
       data-date-range="2012-06-02:2017-06-02"/&gt;

<input type="text" class="ink-datepicker"

data-format="d-m-Y"

data-auto-open="true"

data-start-date="2012-06-02"

data-date-range="2012-06-02:2017-06-02"/>

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 :

La validation des formulaires : http://ink.sapo.pt/javascript-ui/#InkUIFormValidator_2
Le chargement des images au scroll : http://ink.sapo.pt/javascript-ui/#InkUILazyLoad_1
La pagination : http://ink.sapo.pt/javascript-ui/#InkUIPagination_1

Initialisation pour les UI Composants (CSS)

<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">type=</span><span class="s">"text/css"</span> <span class="na">href=</span><span class="s">"http://fastly.ink.sapo.pt/3.1.10/css/ink.css"</span><span class="nt">&gt;</span>

1	<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">type=</span><span class="s">"text/css"</span> <span class="na">href=</span><span class="s">"http://fastly.ink.sapo.pt/3.1.10/css/ink.css"</span><span class="nt">></span>

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

&lt;div class="ink-grid"&gt;
  &lt;div class="column-group"&gt;
    &lt;div class="xlarge-30 large-40 medium-50 small-70 tiny-100"&gt;
      &lt;div class="column"&gt;Colonne 1&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

<div class="column">Colonne 1</div>

</div>

Inconvénients

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

.large-20 {
  width: 20%;
}

.large-20 {

width: 20%;

}

mais large-21 n’existe pas…

Flexbox

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

<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"http://cdn.ink.sapo.pt/3.1.10/css/ink-flex.css"</span><span class="nt">&gt;</span>

1	<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"http://cdn.ink.sapo.pt/3.1.10/css/ink-flex.css"</span><span class="nt">></span>

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

<span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"http://cdn.ink.sapo.pt/3.1.10/js/modernizr.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">&gt;</span>
  <span class="nx">Modernizr</span><span class="p">.</span><span class="nx">load</span><span class="p">({</span>
    <span class="na">test</span><span class="p">:</span> <span class="nx">Modernizr</span><span class="p">.</span><span class="nx">flexbox</span><span class="p">,</span>
    <span class="na">nope</span> <span class="p">:</span> <span class="s1">'http://cdn.ink.sapo.pt/3.1.10/css/ink-legacy.min.css'</span><span class="p">,</span>
  <span class="p">});</span>
<span class="nt">&lt;/script&gt;</span>

Modernizr.load({

test: Modernizr.flexbox,

nope : 'http://cdn.ink.sapo.pt/3.1.10/css/ink-legacy.min.css',

});

</script>

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 :

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ink-grid"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"column-group push-center"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"all-50"</span><span class="nt">&gt;</span>
      50%
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

50%

</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.

<span class="pln">html </span><span class="pun">{</span><span class="pln"> 
  font</span><span class="pun">:</span> <span class="lit">100%</span><span class="pun">/</span><span class="lit">1.2</span>  <span class="typ">Arial, Sans-s</span><span class="pln">erif;
</span><span class="pun">}</span>

html {

font: 100%/1.2 Arial, Sans-serif;

}

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

brew install fontforge --with-python

1	brew install fontforge --with-python

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

<span class="n">namespace</span> <span class="p">:</span><span class="n">icons</span> <span class="k">do</span>
  <span class="n">task</span> <span class="p">:</span><span class="n">compile</span> <span class="k">do</span>
    <span class="nb">puts</span> <span class="s2">"Compiling icons..."</span>
    <span class="nb">puts</span> <span class="o">%</span><span class="n">x</span><span class="p">(</span><span class="n">fontcustom</span> <span class="n">compile</span><span class="p">)</span>
  <span class="k">end</span>
<span class="k">end</span>

namespace :icons do

task :compile do

puts "Compiling icons..."

puts %x(fontcustom compile)

end

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

<span class="c1">#config/fontcustom.yml</span>

<span class="s">font_name</span><span class="pi">:</span> <span class="s">icons</span>
<span class="s">css_selector</span><span class="pi">:</span> <span class="s">.icon-{{glyph}}</span>
<span class="s">preprocessor_path</span><span class="pi">:</span> <span class="s2">"</span><span class="s">"</span>
<span class="s">autowidth</span><span class="pi">:</span> <span class="s">false</span>
<span class="s">no_hash</span><span class="pi">:</span> <span class="s">true</span>
<span class="s">force</span><span class="pi">:</span> <span class="s">false</span>
<span class="s">debug</span><span class="pi">:</span> <span class="s">false</span>
<span class="s">quiet</span><span class="pi">:</span> <span class="s">false</span>

<span class="s">input</span><span class="pi">:</span>
  <span class="s">vectors</span><span class="pi">:</span> <span class="s">app/assets/icons</span>

<span class="s">output</span><span class="pi">:</span>
  <span class="s">fonts</span><span class="pi">:</span> <span class="s">app/assets/fonts</span>
  <span class="s">css</span><span class="pi">:</span> <span class="s">app/assets/stylesheets</span>

<span class="s">templates</span><span class="pi">:</span>
 <span class="pi">-</span> <span class="s">scss</span>

#config/fontcustom.yml

font_name: icons

css_selector: .icon-{{glyph}}

preprocessor_path: ""

autowidth: false

no_hash: true

force: false

debug: false

quiet: false

input:

vectors: app/assets/icons

output:

fonts: app/assets/fonts

css: app/assets/stylesheets

templates:

- scss

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 :

rails icons:compile

1	rails icons:compile

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

create app/assets/fonts/icons.ttf
       app/assets/fonts/icons.svg
       app/assets/fonts/icons.woff
       app/assets/fonts/icons.eot

create app/assets/stylesheets/_icons.scss

create app/assets/fonts/icons.ttf

app/assets/fonts/icons.svg

app/assets/fonts/icons.woff

app/assets/fonts/icons.eot

create app/assets/stylesheets/_icons.scss

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

*= require _icons

1	*= require _icons

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

<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"icon-utilisateur"</span><span class="nt">&gt;&lt;/span&gt;</span>

1	<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon-utilisateur"</span><span class="nt">></span></span>

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 :

rails icons:compile

1	rails icons:compile

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 :

&lt;a href="" style="background-color:red;padding:12px;color:#ffffff;border-radius:3px;text-decoration:none"&gt;Mon bouton&lt;/a&gt;

1	<a href="" style="background-color:red;padding:12px;color:#ffffff;border-radius:3px;text-decoration:none">Mon bouton</a>

on va utiliser :

&lt;a href="" style="background-color:red;border:12px solid red;color:#ffffff;border-radius:3px;text-decoration:none;"&gt;Mon bouton&lt;/a&gt;

1	<a href="" style="background-color:red;border:12px solid red;color:#ffffff;border-radius:3px;text-decoration:none;">Mon bouton</a>

Les icônes sur le web

Les différentes icônes de déconnexion

L’icône burger Menu VS Texte Menu

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

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

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 ?

La majorité des personnes clique sur le label. L’icône est plus cliquée si elle se situe à droite.

En 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)