Principales migrations en Rails

Ajouter une colonne

Ajouter un index sur une colonne

Renommer une colonne

Changer le type d’une colonne

Supprimer une colonne

Renommer une table

Supprimer une table

Mettre une valeur par défaut sur une colonne

Créer une table de jointure (many to many)

problème de chargement de TinyMCE en Rails

Si vos input de type TinyMCE ne s’affichent pas lors du premier chargement de votre page, cela peut être dû à l’utilisation de la gem turbolinks.

Une solution à ce problème est donc de désactiver cette gem :

  • supprimer la ligne ‘gem turbolinks’  du Gemfile,
  • supprimer l’inclusion dans le fichier application.js (//= require turbolinks),
  • modifier l’inclusion du css et du js dans le layout (stylesheet_link_tag    « application », media: « all »)

Tinymce : remplacer les URL relatives par des URL absolues

De base, Tinymce remplace les URL absolues internes des images et  des liens par des URLS relatives. Dans certains cas, cela peut poser problème.

Voici la méthode pour garder des URL absolues pour un projet Rails utilisant la gem ‘tinymce-rails’ :

Recompiler les assets provenant des Gems

Si vous utilisez un suffixe pour accéder à un projet Ruby on Rails (exemple : nom_de_domaine/suffixe), il est possible que vous rencontriez des problèmes avec les assets venant d’un Gem. Une des solutions est de recompiler les assets.

Pour cela, il faut taper les deux commandes suivantes :

Quelques astuces pour Sublime Text

Préférences

Les préférences sont à enregistrer dans le fichier Preferences.sublime-settings (menu Sublime Text > Preferences > Settings – User).

Voici quelques lignes utiles :

Packages

Pour installer des packages, il faut avoir installé Package Control. Ensuite, il suffit de taper « Cmd » + « MAJ » + « P » dans Sublime, puis de saisir « Install Package ».

SCSS

Affiche la coloration syntaxique pour les fichiers .scss.

Bracket Highlighter

Met en évidence les balises ouvrantes et fermantes.

LiveReload

Recharge la page du navigateur dès que le fichier est enregistré. Pour l’installer, il faut suivre les indications données sur le Github : https://github.com/dz0ny/LiveReload-sublimetext2. Il faut ensuite installer l’extension pour le navigateur (ici pour Chrome).

All Autocomplete

Permet d’étendre l’autocomplétion des mots à travers tous les fichiers ouverts.

Exim : unrouteable address et Message frozen

Lors de l’installation d’un serveur, il faut configurer Exim 4 sans quoi il est impossible d’envoyer des emails. Les logs d’exim, situés dans /var/log/exim4/mainlog, nous indiquent une erreur SMTP : le domaine de l’expéditeur n’existe pas.

Pour corriger le problème, il faut changer le nom du serveur dans  2 fichiers :

  • /etc/mailname
  • /etc/exim4/update-exim4.conf.conf, pour le paramètre dc_other_hostnames

Une fois cette configuration faite, il faut redémarrer le serveur de mail

puis relancer l’expédition des mails bloqués.

Validation de formulaire en HTML5

HTML5 propose de nouveaux types de champs et des nouveaux attributs qui facilitent la validation de formulaires. Ces nouveautés s’appliquent aux navigateurs récents.

Nouveaux types d'<input>

HTML5 propose une douzaine de nouveaux types de champs. Le site Alsacreation liste ces douze types. Les principaux sont détaillés ci-dessous.

email

Un champ de type « email » est un champ proche du type « text ». Il attend au minimum un caractère suivi d’un @, suivi à son tour d’un caractère.

url

Comme pour le type « email », le type « url » attend un format bien spécifique : le format d’une URL. Tous les types d’URL sont admis (ftp://, mailto:, http://, etc…).

number

Le type « number » permet de renseigner une valeur numérique. L’affichage du champ diffère en fonction du navigateur. Ce type ne fait aucune vérification lors de la validation, mais si l’utilisateur saisit du texte à la place d’un nombre, aucune valeur ne sera retournée. Ce type de champ permet également de présenter le clavier numérique sur les smartphones.

tel

Le type « tel » permet de renseigner un numéro de téléphone. Comme pour le type « number », aucun format spécifique n’est attendu, mais le clavier numérique sera proposé sur smartphone. La vérification du format peut se faire à l’aide de l’attribut » pattern ».

Nouveaux attributs

placeholder

« placeholder » est un attribut qui indique un texte indicatif sur le contenu attendu dans le champ. Ce texte s’efface quand l’utilisateur commence à saisir son contenu.

required

L’attribut « required » indique que le champ est obligatoire. Le formulaire ne peut être validé tant que le champ n’est pas renseigné.

Les éléments requis peuvent être stylisés de la manière suivante :

pattern

L’attribut « pattern » permet de bloquer la validation d’un formulaire si les champs ne correspondent pas aux patterns spécifiés. Les erreurs sont indiquées à l’utilisateur par des infobulles.

Pour appliquer un style aux éléments valides et invalides, il faut utiliser les pseudo-classes :valide et :invalide.

Sources :

Des graphes avec Google Chart Tools

Google Chart Tools est une API JavaScript qui permet de présenter des données sous forme de graphiques. Les graphiques obtenus sont réalisés en SVG, et sont donc vectoriels.

Structure des données

Les données des graphes sont insérées dans un objet nommé DataTable. Une fois instancié, il faut lui ajouté les colonnes (en indiquant le type de chacune) puis les lignes.

On peut également instancier notre DataTable en un seul appel grâce à la méthode arrayToDataTable().

Types de graphes

Plusieurs types de graphes sont proposés par l’API. On peut ainsi réaliser des camemberts, des graphes en ligne, des graphiques à barres (verticales ou horizontales), des nuages de points, des jauges, etc… L’API de Google liste tous ces types.

Options

Des options peuvent être passées au graphe afin de le personnaliser.

Personnalisation des bulles d’aide

On peut obtenir des informations sur les éléments du graphes (barres, lignes,…) en les survolant. Le contenu des infos-bulles obtenues est personnalisable. Pour cela, il faut ajouter une colonne au DataTable, de type string est dont le contenu est de rôle tooltip.

L’API de Google Chart Tools est disponible sur Google Developers.