AlpineLab blog technique

Depuis toujours, je génère mes vues Devise en ERB, comme un bon élève, en suivant la documentation :

$ rails generate devise:views

Mais ça, c'était avant. Je viens de découvrir que Norman Clarke, le créateur et mainteneur de Haml, avait sorti un un petit outil en lignes de commandes qui permet de convertir du ERB en Haml : il s'appelle intelligemment html2haml.

On l'installe comme ça :

$ gem install html2haml

Ensuite, on convertit toutes ses vues Devise d'un seul coup comme ça :

$ for file in app/views/devise/**/*.erb; do html2haml -e $file ${file%erb}haml && rm $file; done

Tout simplement.

Sources

C'est même plus une “source”, c'est carrément du pompage traduit, mais je me suis inspiré de cet article du wiki Devise, qui explique d'ailleurs aussi comment traduire ses vues en Slim, si vous préférez.

Sur un site Rails dont le contrôle d'accès est géré par Devise, on a parfois besoin d'interdire l'enregistrement de nouveaux utilisateurs (si les utilisateurs sont les administrateurs, dans le cadre d'un back office, par exemple).

À première vue, on pourrait se dire qu'il suffit de supprimer le rôle :registerable dans le modèle, mais cette solution a un inconvénient majeur : elle supprime purement et simplement l'accès au contrôleur RegistrationsController, l'utilisateur ne peut donc plus modifier les information de son compte (son nom, son adresse email, son mot de passe, etc…).

Il y a donc une autre solution, très simple, et qui permet de garder le rôle :registerable : on va supprimer toutes les routes menant au contrôleur, puis recréer seulement celles donc on a besoin.

Par défaut, on a un config/routes.rb qui ressemble à ça :

devise_for :users

Il faut donc le modifier pour qu'il ressemble à ça :

devise_for :users, :skip => [:registrations]
as :user do
  get 'users/edit' => 'devise/registrations#edit', :as => 'edit_user_registration'
  put 'users' => 'devise/registrations#update', :as => 'user_registration'
end

On voit que l'on supprime donc toutes les routes vers le contrôleur RegistrationsController (avec l'option :skip => [:registrations]) puis que l'on recrée les routes edit (qui affiche le formulaire de modification du compte utilisateur) et update (qui effectue véritablement les modifications en base de données).

La seule erreur que cette modification va engendrer, c'est que le helper new_registration_path n'existe plus (puisque la route vers devise/registrations#new n'existe plus). Il faut donc aller modifier la vue partielle app/views/devise/shared/_links.html.erb et supprimer la partie suivante (qui génère normalement un lien ‘Sign up’) :

<%- if devise_mapping.registerable? && controller_name != 'registrations' %>
  <%= link_to "Sign up", new_registration_path(resource_name) %>
<% end -%>

Bonus : ménage

Si vous aviez généré les vues Devise dans votre propre application pour les personnaliser (voir le post Générer ses vues Devise en Haml), vous pouvez en supprimer une qui ne vous servira jamais (celle avec le formulaire d'inscription d'un nouvel utilisateur) :

$ rm -f app/views/devise/registrations/new.html.erb

Perso, je ne me sers pas non plus des vues des contrôleurs ConfirmationsController et UnlocksController, donc généralement, je les vire aussi (mais après, c'est à vous de voir…) :

$ rm -rf app/views/devise/confirmations/
$ rm -rf app/views/devise/unlocks/

Sources

• cette question sur StackOverflow
• cet article de Robotex
• et bien sûr, la doc et le wiki de Devise

UPDATE Article mis à jour le 30/10/2013 pour intégrer la nouvelle convention de nommage de Font Awesome 4

Aujourd'hui, j'ai décidé d'intégrer les font icons Font-Awesome sur notre blog (qui est généré par Middleman comme expliqué dans un precédent article).

Historique

Pour ceux qui ne savent pas ce que sont les font icons, voilà un petit rappel.

Dans la vie, il y a ce que j'appelle les font nerds. Ce sont généralement des designers qui sont passionnés par un truc que, personnellement, je ne comprends pas du tout : les polices d'écriture (ou “fonts”). Je les aime beaucoup, hein, c'est pas la question, Martin, notre designer préféré en est un. C'est juste que je ne les comprend pas :-)

Bref, un de ces joyeux lurons s'est dit un jour : au lieu de faire un ‘A’, puis un ‘B’, etc… si je faisais plutôt une maison, une flêche, un téléphone, etc… Ça a donné Wingdings. C'était un peu moche.

Plus tard, d'autres mecs - le W3C - ont travaillé pendant des années pour nous pondre notamment le langage CSS et ses possibilités de travailler les polices facilement (changer les couleurs, tailles, ombres, orientations, etc…).

En poussant le raisonnement, et devant la généralisation de l'utilisation de CSS (et notamment de la fameuse directive @font-face qui permet d'utiliser n'importe quelle police dans un navigateur, même si celle-ci n'est pas installée dans le système), un font-nerd s'est dit : “Hey, si je fais des icônes canons comme si c'était des caractères, chacun pourra les adapter à sa charte graphique !”. Pof ! Les font icons (ou icon fonts, selon…) étaient nées.

Voilà pour l'historique. Il existe maintenant pas mal de packs de font icons téléchargeables et utilisables librement sur le net (voir en bas de l'article pour quelques pointeurs).

Intégration à Middleman

Avant, il y avait une feinte, pour adapter Font Awesome à Middleman, mais maintenant il y a Bootstrap CDN qui nous sert directement le CSS nécessaire. Il suffit donc d'ajouter à ses pages une balise stylesheet :

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css" media="screen" rel="stylesheet" type="text/css">

Ou, en Sass :

= stylesheet_link_tag '//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css'

C'est tout (je vous laisse ajuster avec le numéro de version adéquate au moment où vous lirez cet article).

Utilisation des font-icons

OK, c'est bien beau, on a ajoutée une police bizarre à notre header HTML, maintenant quoi ?

Il suffit d'ajouter à une page la balise HTML <i class="fa fa-github"></i> pour faire apparaitre une petite icone GitHub. En Slim, ça donne ça :

i.fa.fa-github

Ça, c'est quelques exemples :

Et comme c'est une balise HTML contenant du texte (dont les caractères sont des dessins, certe, mais du texte quand même), on peut lui appliquer les styles qu'on veut. Par exemple, on voudrait qu'elle soit rouge et qu'elle devienne bleue quand la souris de l'utilisateur est au-dessus ? Rien de plus simple ?

i.fa.fa-github
  color: red
  &:hover
    color: blue

Easy, non ? Et on peut aussi ajouter d'autres classes à la balise :

• fa-lg, fa-2x, fa-3x ou fa-4x indiquent la taille de l'icône
• fa-spin la fait tourner sur elle-même
• fa-rotate-* et fa-flip-* l'inclinent ou la retournent
• … et bien d'autres encore que vous pouvez retrouver dans la documentation de Font Awesome

Et voilà, vous savez tout ! Essayez, jouez avec, c'est super facile.

Autres packs d'icons chouettes et libres (sous licence CC ou SIL)

• Font-Awesome : celui que j'utilise dans ce tutorial (et sur ce blog), il a été conçu pour être utilisé avec Bootstrap
• Foundation Icon Fonts 2 : le pack d'icônes du projet Foundation
• Modern Pictograms : un des premiers gros projets de font icons
• Raphaël Icon Set : un pack d'icon fait à l'origine pour être utilisé avec Raphaël, mais qui fonctinone très bien tout seul
• IcoMoon : ce pack a une version gratuite pas mal du tout et 2 versions payantes au-dessus
• Et pour vous faire un pack de font icons custom, vous pouvez utiliser Fontello ou IcoMoon App qui permet de choisir parmis plein de gros packs les icônes qu'on veut, et d'en faire une police (on peut même choisir à quel caractère on assigne chaque icône)

Liens

• Le “making of” de Octicons, les font icons de GitHub, intéressant pour comprendre comment on fait ces trucs