Draw.io : un outil pour réaliser des organigrammes et des diagrammes

Pour réaliser un schéma, un organigramme ou un diagramme, qu’il soit conséquent ou très petit, c’est parfois compliqué. Quel logiciel vais-je devoir télécharger, comment s’en sert-on, est-ce que le rendu visuel sera facilement exportable et surtout présentable ? « Je veux juste faire une patate et un carré avec une flèche ! »

Je cherchais donc un outil pour réaliser des diagrammes ou schémas un peu techniques en vue de pouvoir les « modifier » par la suite mais aussi les « présenter » à d’autres personnes (le tout sans contraintes de paiement ni d’inscription, et pourquoi pas une interface sympa et intuitive).

Draw.io à la rescousse !

En cherchant un peu sur la toile je suis tombé sur Draw.io qui m’a donné pleine satisfaction. Cet outil est disponible en ligne mais il existe également des applications que l’on peut installer dans son navigateur (Chrome). Nous ne l’avons pas testé mais il existe même un plugin WordPress pour intégrer l’outil au wysiwyg du CMS.

Une interface simple et intuitive (online & offline)

L’avantage premier est qu’il n’est pas nécessaire de s’inscrire. Ensuite il est tout à fait possible d’enregistrer son travail et de le modifier par la suite. Vous n’avez plus internet ? Pas de problème, téléchargez l’extension sur Chrome et vous pourrez le manipuler dans un écran comme une véritable application desktop.

draw
Version online de l’outil Draw.io

L’interface propose trois colonnes comme sur de nombreux logiciels de dessins avec au centre votre espace de travail, à gauche les outils mis à votre disposition et à droite des paramètres plus génériques. La prise en main a été rapide, nous ne sommes donc pas perdus ..

Une palette d’outils complète

La palette d’outils à gauche est assez longue mais il est facile de s’y repérer. Vous pourrez facilement y faire des diagrammes génériques mais aussi plus précis pour représenter de l’UML, des mockups (iOs, Android) ou encore des schémas réseaux. Bref il y a du choix.

Un petit moteur de recherche vous permet même de regrouper l’ensemble des éléments disponibles pour votre recherche.

Sauvegarder et exporter son travail

La sauvegarde de vos données se fera en XML, cela vous aidera à réouvrir et modifier votre travail par la suite. Il est également possible d’extraire son travail en fichier image, en SVG, en HTML, en PDF.

Pour le mode online, l’outil est compatible avec Google Drive, Dropbox et OneDrive, mais vous pourrez bien évidemment sauvegarder votre travail sur votre ordinateur.

 

A la découverte d’animate.css

Aujourd’hui petite présentation d’animate.css, une feuille de style CSS permettant d’animer des éléments de notre DOM, à l’aide des animations CSS3.

Pour avoir un aperçu de ce que cela donne, rendez-vous sur le site officiel : animate.css

Au total on y retrouve plus de 70 animations différentes, il y a donc de quoi faire !

Techniquement il ne s’agit ni plus ni moins que d’une feuille de style CSS (avec des propriétés CSS3) à charger. Ensuite on appelle la classe « animated » sur un élément, puis la classe portant le nom de l’animation désirée.

Vous pouvez également jouer avec vos animations en personnalisant la « duration« , le « delay » et l' »iteration » le tout en CSS :

Pour jouer une animation lors d’un événement, il est tout à fait possible de la déclencher avec un peu de javascript. Il est également possible de détecter en javascript la « fin » d’une animation, très pratique donc pour supprimer notamment les classes que l’on vient d’ajouter pour permettre de ré-exécuter notre animation ensuite.

Ce fichier nous permettra de gagner du temps à réaliser des animations CSS3 basiques que l’on pourra appliquer par exemple sur des formulaires, des slideshows ou pour donner un effet lors de l’affichage d’un contenu au scroll etc. Attention toutefois de ne pas en abuser et d’utiliser les animations à bon escient …

Démo : animate.css
Code sources et exemples : https://github.com/daneden/animate.css

Rails : bien préparer sa BDD pour stocker des « Emoji »

Dans cet article début d’approche sur la problématique pour stocker des « Emoji » en BDD. Effectivement on pense que cela ne sert à rien de les utiliser mais le problème avec ces icônes est qu’ils sont disponibles nativement sur la plupart des claviers mobiles désormais, et donc … peuvent se retrouver dans le moteur de n’importe quel formulaire de votre site. Si vous ne gérez pas ce cas particulier, cela peut engendrer des erreurs.

La fausse piste « serialize »

Certains optent pour la solution un peu brute et pas forcément de bonne augure de spécifier dans un model que tel champ est à « serializer » (je suis moi aussi un peu tombé dedans ^^)

Alors effectivement ça « marche » mais allez jeter un oeil en BDD et cela vous enchantera moins (d’autant plus qu’il sera difficile de requêter sur ce genre de données avec des conditions par exemple).
 
Serialize sert avant tout à nous aider à sauvegarder des données en tant qu’objet (au passage, en YAML). Passons donc cette alternative.

Un problème d’encodage avant tout

Le problème avec les encodages classiques en utf8 est que ce dernier utilise au maximum 3 octets par caractère. Les Emoji en nécessitent 4 ! Depuis la version MySQL 5.5.3, l’encodage utf8mb4 permet de manipuler tous les caractères unicodes de 4 octets (comprenant donc nos fameux emojis).

L’avantage est qu’il suffit de configurer notre BDD pour lui dire d’utiliser cet encodage précis. Attention toutefois, il vous faut MySQL >= 5.5.3.

Création et configuration de notre projet Rails

Nous allons dans un premier temps créer un projet Rails et le configurer pour mettre par défaut ce nouvel encodage (nous reviendrons dans un autre article sur la manière de procéder pour mettre à jour des colonnes sans perte de données sur un projet existant).

Comme vous pouvez le constater, on précise ici une limite de 191 pour nos types « varchar ». Habituellement on est sur du 255. En utf8 la taille maximum de l’index est de 767 octets, donc on a 767 / 3 octets par caractère = 255 caractères max pour l’utf8 habituel, et pour l’utf8mb4 on obtient 767 / 4 octets par caractère = 191 caractères max.

Lancez votre projet et rendez-vous sur la page de création d’un article, placez-y un titre et du texte avec un emoji dans chaque champ. Vous n’aurez pas de problème lors de la sauvegarde en BDD 😉

Sources : Documentation MySQL utf8mb4

Sublime Text : la sélection d’un mot ponctué en un seul clic

Voici une petite astuce sur l’éditeur Sublime Text pour sélectionner un mot (une variable, une fonction etc.) en double cliquant dessus même si celui-ci contient une ponctuation. Exemples :

Faites le test sur votre Sublime Text, si vous effectuez un double-clic pour sélectionner « empty? » dans le code Ruby, ou pour sélectionner « txt-center » en entier sur le code HTML, seuls « empty » et « txt » le seront.

Il suffit d’ajouter des propriétés au moteur de syntaxe chargé par Sublime Text. Par exemple si j’ouvre un fichier .rb la syntaxe Sublime chargée est « Ruby » etc.

Ouvrez un fichier ruby (.rb) puis aller dans « Preferences > Settings – More > Syntax Specific – User » et ajoutez-y le code suivant :

Dans le cas de notre exemple avec la classe « txt-center », ouvrons désormais un fichier html ou html.erb dans Sublime Text puis aller dans « Preferences > Settings – More > Syntax Specific – User » et on y ajoute le même code en retirant le « tiret » de l’expression pour qu’elle puisse être matchée :

Et voilà le tour est joué ! Faites et adaptez cette manipulation sur toutes les syntaxes/extensions de fichiers Sublime souhaités.

Source

Rails : Problème d’index trop long sur une migration ?

En voulant créer une table de liaison entre deux autres dans un projet, nous avons rencontré un problème avec les index. Petit récap :

En faisant un petit rake db:migrate qui va bien, on obtenait ceci :

Le problème vient du fait qu’en voulant respecter la convention Rails sur le bon nomage de notre table de liaison on se retrouve avec un index ayant un nom très long de 68 caractères. Or la limite autorisé par notre BDD est de 64. Pour contrer cela, on peut forcer un nom d’index différent en le précisant à la fin de notre migration comme ci-dessous :

Et voilà !

Récupérer toutes les URLs d’un site

Petite astuce pour récupérer toutes les URLs d’un site (pratique lors de la refonte d’un site ou pour le SEO) :

1 – Installer ack

Ack est un outil comme grep développé en Perl et qui utilise des expressions régulières. Son avantage est qu’il est puissant et complet pour les recherches.

2 – Faire sa recherche sur une URL donnée et la stocker dans un fichier

Sources : http://stackoverflow.com/questions/84290/getting-a-full-list-of-the-urls-in-a-rails-application

#Barcamp : quoi de neuf sur Rails 5 avant sa sortie finale ?

Notre équipe développe sur Ruby on Rails depuis maintenant de nombreuses années, nous surveillons donc en permanence l’évolution du Framework. La version 5 approche à grands pas, ou en sommes-nous ?

  • Actuellement (mars 2016) en Beta 3 (mais déjà mis en production sur le projet Basecamp 3)
  • Ruby 2.2+ exclusivement
  • Nouveauté (« the big one ») : Action Cable qui permet de faire du temps réel en natif sur un projet. Ils ont profité de cette nouveauté pour ajouter un système permettant de réutiliser une vue en dehors de son controller (pour les websockets). Vincent a déjà présenté cette nouveauté hier dans un article.
  • API Mode : ils ont encore améliorer la possibilité de faire d’un projet rails une API en créant le mode –api lors de la création d’un projet. Ex : rails new mon_api –api va nous générer une structure de projet simplifiée nous permettant de ne travailler qu’avec du JSON, et non du HTML. D’autres améliorations seront apportées mais il semble qu’ils se sont beaucoup penchés sur la partie JSON pour le moment.
  • Commandes rails vs. rake : certaines commandes étaient placées dans bin/rails et d’autres dans bin/rake.  Dans Rails 5, tout a été rassemblé dans bin/rails du coup il faudra s’habituer à faire un rails db:migrate au lieu de rake db:migrate (certaines commandes seront encore disponibles sous rake mais autant prendre l’habitude dès le début).
  • Test runner : lorsque l’on exécute des tests les failures sont désormais affichées en live, pas besoin d’attendre la fin des tests pour repérer d’où vient le problème.
  • Turbolinks 3 : Turbolinks permet de rafraichir des pages plus rapidement en rechargeant le contenu du body d’une page depuis le serveur au lieu de rafraichir la page et de recompiler à chaque fois le js et le CSS. Au lieu de faire comme l’ajax il remplace tout le body par défaut mais il est possible de spécifier quel élément rafraichir. Cela semble utile pour les sites one-pages. Les avis sont vraiment partagés, certains trouvent cela révolutionnaire d’autres s’en passeront comme sur Rails 4.
  • « Et ça sort quand ? » : aucune date n’a été donnée (trouvée ?) donc on ne sait pas. Mais la communauté est très active et les betas qui sortent montrent qu’il y a énormément de contributeurs qui sont actifs sur le sujet.

Pour clôturer cette petite présentation, j’ai installé un Rails 5 (beta) et développé une petite démo en utilisant ActionCable, le tout en moins de 2 heures (ce qui s’annonce très prometteur, nous y reviendrons probablement sur d’autres billets). Vivement la suite !

#Barcamp : L’organisation du code dans Rails

Concerns & modules

Dans Rails il existe des répertoires « concerns » dans les modèles et les controllers. Cela va nous permettre de mieux organiser notre code et d’éviter parfois de dupliquer des lignes. Un concern est un « module » et non une classe, il faut s’en servir et regrouper cela par fonctionnalité, et non comme un simple endroit ou stocker des méthodes diverses et variées. Petit zoom sur ces deux termes :

  • Concerns : quand nos modèles partagent une information (un sujet/thème/fonctionnalité) on place cette information dans un concern. Ex: sur un site, des commentaires peuvent être ajoutés/affichés depuis un article, un produit, et cela concerne (oO) aussi la table utilisateur. On va donc créer un module commentaire dans un concerns. Si dans mon model utilisateur, commentaire, produit, article je fais un « validates mon_champ » ou un « has_many mon_truc » je vais placer tout cela également au même endroit dans un concern.
  • Module : Un module fournit des méthodes qui seront utilisées dans plusieurs classes. C’est différent d’une classe : une classe est un objet, un module est une fonction. On peut instancier une classe, pas un module. On peut faire de l’héritage avec une classe, pas avec un module. Un module peut s’inclure dans un autre module ou dans une classe (include MonConcern en haut du fichier)

Les classes abstraites

Du fait que les modèles héritent d’Active Record, mettre en commun des méthodes d’instance entre deux modèles via une classe abstraite nécessite une configuration dans cette dernière.

On indiquera ainsi : self.abstract_class = true. La classe abstraire hérite d’Active Record : class Produit < ActiveRecord::Base. Les autres classes héritent de la classe abstraite.

Ruby ne supporte pas l’héritage multiple, ce qui peut être problématique. Il existe d’autres solutions pour pallier ce problème, tels que les mixins ou les interfaces.

Rails supporte les relations polymorphiques entre modèles Active Record : c’est le Multiple Table Inheritance.

Équilibre entre vues, partials et helpers

On hésite souvent sur la manière de suivre le pattern MVC en arrivant dans les vues. Les index sont particulièrement l’endroit d’opérer des boucles contenant des requêtes, des conditions, qui ne semble pas pouvoir être réalisées ailleurs.

Les partials et les helpers peuvent servir le même but : factoriser du code dans une vue devenant trop longue ou nécessitant de la récursivité. La différence réside dans le langage dominant de l’un et l’autre :

  • Les partials sont l’endroit tout indiqué pour écrire du HTML. On peut y utiliser quelques conditions et boucles tant que l’objectif servi est de la présentation.
  • Les helpers sont l’endroit désigné pour écrire du ruby. Une fonction doit enfermer de la logique, comme des conditions, des requêtes, et retourner quelque chose qui est inséré dans la vue. Ce n’est pas l’endroit pour construire des éléments du DOM.

Deux sites entrent plus dans le détails, en français et en anglais.

Rails : association & inverse sur un même objet

Nous venons de rencontrer un cas bien particulier (mais pas tant que ça finalement) lors d’un récent développement. Nous avons un objet Produit et nous souhaitons l’associer à un autre produit en vue de répondre au besoin « tel produit est associé à tel produit« .

Jusque ici rien de compliqué. Cependant si l’on rentre un peu plus dans le détail et dans la demande qui nous a été formulée, on se rend compte que l’on a finalement besoin de : « Si j’associe mon produit A au produit B, est-ce que le produit B sera automatiquement associé au produit A ?« . La réponse est non, mais nous allons faire en sorte d’y répondre favorablement.

On crée nos tables produits et produit_associes, puis les modèles qui vont avec :

Si l’on teste déjà cela dans une console (avec des données en base) on obtient ceci :

On remarque donc que nous avons pu associer le produit 2 à notre produit 1, que lorsque nous interrogeons p1.associes il nous retourne bien le produit 2. Dans le cas inverse (p2.associes) le tableau est vide, et nous voulons qu’automatiquement p2 match avec p1 sur cette association inverse. Pour cela nous allons modifier notre modèle produit_associe et lui indiquer d’enregistrer (ou supprimer) l’inverse de l’association créée/détruite :

Si l’on reteste en console on obtient désormais :

Dès lors que l’on associe un produit à un autre, on crée l’association inverse automatiquement. L’ajout de « dependent: :destroy » dans le modèle Produit nous permettra de faire la même chose lorsque l’on supprimera l’une des deux associations existantes.

Sources : http://collectiveidea.com/blog/archives/2015/07/30/bi-directional-and-self-referential-associations-in-rails/

Rails : la gem did_you_mean pour vous servir !

Aujourd’hui un petit article pour vous présenter rapidement une Gem très sympathique : « Did you mean ». Il est fréquent pour un développeur de faire des fautes de frappes, on peut parfois se tromper d’un caractère s’en forcément s’en rendre compte et perdre du temps … ça se termine souvent par « pfff la loose, j’ai mal écrit ma méthode » ou autre (à remplacer par la phrase qui vous convient ^^).

C’est là que la Gem did_you_mean peut entrer en action :

Un petit bundle install et c’est tout ! Le résultat ? Voici un petit exemple (réalisé pour la démo, donc un peu gros je vous l’accorde) :

Cela me génère une erreur (car j’ai mal tapé ActiveRecord dans mon cas) et did_you_mean entre en jeu et me propose la bonne syntaxe :

screen_didyoumean

Et voilà, cela fonctionne dans beaucoup de cas je vous laisse découvrir plus en détails la Gem sur la page Github github.com/yuki24/did_you_mean.