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.

 

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

Ridiculously Responsive Social Sharing Buttons

Ridiculously Responsive Social Sharing Buttons est un plugin javascript permettant d’ajouter des liens de partages vers différents réseaux sociaux.

Parmi tout les plugins existant celle-ci comporte plusieurs avantage :

  • il est responsive
  • il est gratuite
  • il possède de nombreux réseaux sociaux de base
  • il est facile d’utilisation

Utilisation

Pour ce qui est de l’utilisation il suffit d’ajouter le fichier css « rrssb.css » dans notre projet et de copier la balise <link> suivante dans notre header :

Ensuite il suffit de choisir les réseaux que l’on souhaite ajouter, en copiant les li correspondant présent dans le fichier index.html.

Et enfin il est nécessaire de copier les lignes de JS suivante est de copier le fichier rrssb.min.js dans notre projet. (Si Jquery est déja présent dans notre projet la première ligne est optionnel)

Voilà maintenant que nos boutons sont disponible il suffit de changer les liens dans chaque li par le liens que vous voulez partager.

Si jamais vous n’aimer pas faire d’effort inutilement voici un morceau de JS qui permet de remplacer  les liens automatiquement.

source :

git hub

demo

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

Bien configurer son Sublime Text

1. Télécharger Sublime Text

La dernière version de Sublime Text, tant qu’à faire.

2. Installer Package Control

3. Installer les bons packages

Pour installer un package :

  • cmd + maj + P
  • Saisir « install package » et sélectionner « Package Control: Install Package ».
  • Saisir le nom du package à installer et valider. La liste des packages proposés par Package Control est disponible sur : packagecontrol.io/browse.

st

SCSS

Permet d’avoir la coloration syntaxique sur les fichiers .scss.

CSS3

Support des propriétés CSS3.

Bracket Highlighter

Met en évidence les balises ouvrantes et fermantes.

All Autocomplete

Étend l’autocomplétion des mots à travers tous les fichiers ouverts.

Color HighLighter

Souligne les codes couleurs avec la couleur correspondante. Il souligne également les variables SCSS.

4. Bien définir les config par défaut

Dans Sublime Text > Preferences > Settings, modifiez le fichier Preferences.sublime-settings - User.

5. Configurer des snippets

La procédure de création d’un snippet est expliquée en détails dans cet article : Sublime Text : créer un snippet. La liste des snippets que j’utilise est sur Github. Celui que j’utilise le plus fréquemment est le suivant :

Il me permet d’ouvrir les balises Rails <%= ... %> simplement en tapant "<" + "TAB".

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

Offline first avec Upup.js

Offline first ?

De nos jours, les sites modernes sont construit en mobile-first. Mais dans un monde on l’on est mobile, la connexion elle n’est pas stable tout le temps. On peux donc penser Offline-first.

La librairie UpUp permet d’ajouter rapidement des fonctionnalités offline sur un site web.

Pour ajouter un contenu basique il suffit d’ajouter le script suivant :

Avec ce bout de script, si la connexion est perdue cela permet d’avoir un affichage minimal avec du HTML simple, et ainsi améliorer l’expérience utilisateur.

Comment ça marche ?

La librairie UpUp utilise les ServiceWorkers  lorsqu’il y a une erreur réseaux. Les ServiceWorkers sont des scripts qui tournent en arrière-plan du navigateur et qui permettent de connaître le statut des requêtes.

Donc quand un utilisateur visite pour la première fois le site, UpUp enregistre un ServiceWorker et il lui donne une liste de fichiers en cache pour plus tard.

À la prochaine visite de l’utilisateur, le ServiceWorker écoute les erreurs réseaux, et s’il y a un échec, il va chercher dans le cache et retourne les fichiers présent comme s’il venaient du réseau.

Créer une expérience offline riche.

On peux injecter du HTML pure mais, pour plus de propreté et de maintenabilité il est possible de séparer  dans plusieurs fichier le contenu offline de cette manière :

Il est aussi possible d’y ajouter notre propre style en ajoutant la ligne suivante pour permettre d’aller chercher les fichiers dans le cache :

Selon votre imagination, il est possible de charger tout un tas de données tels que des données dynamiques en fonction de l’utilisateur, d’autre scripts, des images, pdf, videos etc …

Ou placer le script?

Pour des raison de sécurité les requêtes réseaux sont visibles au sein d’un scope. Le scope qu’un ServiceWorker peu affecter est déterminé par là ou le script est placé.

Par exemple si l’on place le script dans le dossier suivant : https://monsite.com/js/upup.sw.min.js, UpUp ne sera capable de montrer le contenu offline que si l’utilisateur essayer d’acceder au dossier /js/ .

C’est pourquoi il est important de placer idéalement les scripts à la racine du site sur le même serveur.

Restriction

Cette librairie ne fonctionne qu’avec des site web en HTTPS et possédant par conséquence un certificat SSL pour préserver la sécurité et la vie privée de l’utilisateur.

UpUp est supporter par Chrome 40+, Opera 27+, et Firefox 41+. cependant si un utilisateur possède un autre navigateur il ne notera rien de différent.

 

source :  www.talater.com

git du pojet : UpUp

 

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

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.