Publié le 25 Janvier 2015

Bower est un outil permettant de faciliter la gestion des dépendances dans une application web.

La façon classique de déclarer une dépendance dans le fichier bower.json se fait de la manière suivante:

"angular": "1.3.1"

Grâce à cette déclaration bower va automatiquement télécharger la bonne version depuis de repo git d'angular et l'inclure dans notre webapp.

Comment?

Et bien bower utilise un index public pour trouver le repo git correspondant à angular (ex: git://github.com/angular).

Ensuite bower cherche dans le repo git un tag correspondant à la version spécifiée puis télécharge le code source. Cool, non?

Et bien ce n'est pas tout. Bower permet aussi de gérer vos dépendances internes. Imaginons que vous ayez développé un composant angular que vous souhaitez intégrer dans plusieurs projets en tant que dépendance. Et bien au lieu d'indiquer un numéro de version directement on peut spécifié l'url d'un repo git.

Par exemple:

"mon-composant": "git://mon.repo:moi/mon/composant"

On peut ici utiliser soit une URL git (comme ci-dessus), soit https (https://mon.repo/moi/mon/composant) ou encore ssh (git@mon.repo:moi/mon/composant)

Et en plus on peut même gérer les versions en ajoutant un #<version> à la fin de l'URL.

Au lieu de <version> on peut indiquer tout élément identifiant un commit. C'est à dire qu'on peut indiquer un numéro de commit, un tag ou même une branche git.

Merci bower!

Voir les commentaires

Rédigé par Bliz

Publié dans #Javascript

Publié le 19 Janvier 2015

Si vous avez remarqué angular fournit une directive ng-click qui permet de configurer une action à exécuter lors d'un click utilisateur sur un élément.

En revanche il n'y a pas de directive ng-clickout qui permettrait de configurer une action lors d'un click utilisateur hors de cet élément.

Il y a ng-blur qui correspond à ce cas d'utilisation mais il ne s'applique pas sur les div.

 

Heureusement la création d'une directive ng-clickout s'avère assez simple si on utilise la function link et un peu de jqlite.

angular.module('monApplication')
   .directive('ngClickout', ['$document', function ($document) {
      return {
         restrict: 'A', // ng-clickout n'est disponible qu'en tant qu'attribute
         link: function (scope, element, attr) {
            element.bind('click', function (event) {
               event.stopPropagation(); // stop propagation pour ne pas rentrer dans le $document.click event
            });
           
            $document.bind('click', function () {
               // on a un click hors de l'élément donc on exécute la fonction définie dans l'attribut ng-clickout
               scope.$apply(attr.ngClickout);
            });
         }
      };
}]);

 

L'astuce consiste à utiliser event.stopPropagation() sur l'élément en question. Cela permet d'être sûr que le gestionnaire de click sur le document reçoit tous les clics sauf ceux sur l'élément où est appliqué ng-clickout.

 

La seconde astuce consiste à utiliser scope.$apply qui permet d'exécuter la fonction passée dans ng-clickout et de mettre à jour le scope angular et donc de mettre à jour tous les bindings angular.

Voir les commentaires

Publié le 7 Août 2014

Après avoir vu comment supprimer les puces d'une liste HTML voici comment afficher une liste horizontalement avec CSS. En combinant cette technique avec quelques styles bien choisis (border, padding, etc) il devient facile de réaliser des menus et onglets.

Donc partons d'une liste toute simple comme la dernière fois:

<ul>
  <li>Pêche</li>
  <li>Pomme</li>
  <li>Poire</li>
</ul>

ce qui donne:

  • Pêche
  • Pomme
  • Poire

Maintenant appliquons le style suivant sur les éléments <li>:

display: inline;

et on obtient:

  • Pêche
  • Pomme
  • Poire

Voir les commentaires

Rédigé par Bliz

Publié dans #CSS

Publié le 4 Août 2014

Mac OS X est basé sur BSD et donc logiquement la commande sed aussi.

Cela peut poser problème lorsqu'on essaie de lancer des scripts linux qui utilise la version GNU de sed.

Par exemple l'option -r n'existe pas mais heureusement il y a un équivalent: -E.

Il suffit donc de remplacer l' option -r par -E et le tour est joué.

Voir les commentaires

Rédigé par Bliz

Publié dans #mac

Publié le 3 Août 2014

Par défaut une list HTML utilise des puces pour chaque élément de la liste.

Par exemple:

<ul>
 <li>pêche</li>
 <li>pomme</li>
 <li>poire</li>
</ul>

s'affiche de la manière suivante:

  • pêche
  • pomme
  • poire

Si on veut supprimer les puces il faut applique le style CSS suivant sur les éléments <li>

list-style: none;

Ce qui donne:

  • pêche
  • pomme
  • poire

Voir les commentaires

Rédigé par Bliz

Publié dans #CSS

Publié le 27 Juillet 2014

Depuis que j'ai commencé à utiliser emacs je galère un peu avec les raccourcis donc voici ceux que j'utilise fréquemment. J'espère mettre à jour cette liste régulièrement.

Dans la liste ci-dessous C-x signifie CTRL+x et M-x signifie ESC puis x.

 C-x C-f  Find: Ouvre le fichier sélectionné
 C-x C-s  Save: Enregistre le fichier ouvert
 C-x k  Kill: Ferme le fichier (buffer) courant (sans fermer emacs)
 C-x C-c  Close: Ferme emacs
 C-a  Place le curseur au début de la ligne
 C-e  Place le curseur à la fin de la ligne
 C-x s  Search (forward): Effectue une recherche vers le bas dans le fichier courant
 C-x r  Search (Reverse): Effectue une recherche vers le haut dans le fichier courant
 C-x b  Buffer: Bascule vers un autre buffer (un autre fichier ouvert)
 C-x C-b  Buffer: Affiche la liste des buffers (fichiers ouverts)
 C-x 2  Sépare la fenêtre horizontalement en deux parties
 C-x 3  Sépare la fenêtre verticalement en deux parties
 C-x 1  N'affiche qu'un seul buffer dans la fenêtre (annule les commandes C-x 2 ou C-x 3)
 C-x o  Other: Bascule dans l'autre buffer lorsque la fenêtre est partagée en plusieurs parties
 C-k  Cut: coupe la ligne courante
 C-<space>  Mark: marque le début de la séléction. Permet de sélectionner du texte.
 C-w  Coupe la sélection courante.
 C-y  Yank: Coller
 M-x   Execute: Permet d'executer une commande. Par exemple "M-x shell" permet de lancer un shell
 C-v   Move (forward): Scroll vers le bas. Equivalent du "page down"
 E-v   Move (backward): Scroll vers le haut. Equivalent du "page up"

Voir les commentaires

Publié le 19 Juillet 2014

Ces dernières semaines j'ai joué un peu avec node.js et venant du monde java je suis plutôt agréablement surpris par la facilité d'utilisation et de développement. On a vite fait de développer une petite appli sympa.

D'ailleurs il est par exemple très facile de créer un serveur http puisqu'il suffit de 3 lignes de code.

Tout d'abord il faut importer le module 'http'.

Ensuite il faut créer un serveur avec la méthode createServer. Cette méthode prend un callback en paramètre qui lui reçoit 2 paramètres: httpRequest et httpResponse.

Le serveur est créé mais pas encore opérationnel. Il ne reste plus qu'à le faire écouter sur un port donné et c'est parti!

Au niveau code ça donne quelque chose comme ça:

var http = require('http');

var server = http.createServer(function(req, res) {
   // ... code serveur ...
});

server.listen(80); // écoute sur le port 80

Voilà 3 lignes! Je trouve node.js bien sympa pour expérimenter et avoir rapidement un prototype opérationnel.

Voir les commentaires

Publié le 14 Juillet 2014

Pour installer Haskell je vous recommande d'utiliser le gestionnaire de package brew qui rend l'installation beaucoup plus simple.

Pour installer haskell il suffit d'installer un compilateur haskell. Le plus connu étant ghc:

brew install ghc

ghc ne vient pas tout seul. Il est accompagné par ghci (un interpréteur) qui permet de taper du haskell en ligne de commande.

Pendant qu'on est avec brew je vous conseille d'installer le gestionnaire de package haskell: cabal.

brew install cabal-install

Comme IDE pour haskell j'ai rien trouvé de vraiment convaincant. 

Je sais qu'il y a un plugin Eclipse pour haskell ainsi qu'un IDE haskell nommé leksah mais j'ai pas vraiment essayé. A la place je me suis replongé dans emacs qui a un mode haskell.

Pour installer le mode haskell sous emacs il faut d'abord installer le gestionnaire de package emacs: marmelade. (ça commence à faire pas mal de gestionnaire de package!)

Donc dans votre fichier .emacs ajouter les lignes suivantes:

(require 'package)
(add-to-list 'package-archives
import System.Environment (getArgs) '("marmalade" . "http://marmalade-repo.org/packages/"))
(package-initialize)

puis M-x eval-buffer (ou relancer emacs)
M-x package-refresh-contents
M-x package-install [RET] haskell-mode

Ne pas oublier d'ajouter hoogle au path en modifiant votre .profile ou autre:

export PATH=$PATH:$HOME/.cabal/bin

Ensuite il faut télécharger les données d'hoogle:

hoogle data

Voilà hoogle est maintenant dispo en ligne de commande pour rechercher de la doc haskell. Par exemple pour rechercher la doc sur 'concatMap'

hoogle concatMap
hoogle --info concatMap

C'est sympa mais ce qui serait encore mieux ce serait d'avoir la doc disponible directement depuis ghci.

Et bien il suffit de créer deux fonctions dans un fichier .ghci qui vont appeler ces deux commandes.

Depuis ghci on peut exécuter une commande shell avec :!. Il faut aussi penser à échapper les guillemets simples ce qui donne au final:

let ghciEscapeShellArg arg = "'" ++ concatMap (\c -> if (c == '\'') then "'\"'\"'" else [c]) arg ++ "'"
:def search return . (":! hoogle " ++) . ghciEscapeShellArg
:def doc return . (":! hoogle --info " ++) . ghciEscapeShellArg

 

Voilà la prochaine fois que vous lancer ghci les commandes :search et :doc sont directement dispo.

Voir les commentaires

Publié le 11 Juillet 2014

Maintenant qu'on arrive à stocker nos compteurs dans hostedgraphite il serait sympa de pouvoir y accéder depuis une autre application comme un backoffice par exemple.

 

Rien de plus facile avec la "render API" de Graphite. Depuis hosted graphite il faut tout d'abord créer une clé d'accès (access key). Ce qui va nous fournir une URL personnalisé pour accéder à nos données.

 

Ensuite il suffit d'utiliser la render API pour récupérer les données. Par exemple pour récupérer le graphe d'un compteur on utilisera une url du type:

https://www.hostedgraphite.com/ded7a6f3/56223ce4-6e63-424c-b4f5-67fd6554ed43/graphite/render?from=-2h&target=mon.compteur

Récupérer des données Graphite depuis une appli externe

Et si jamais on veut les données aux format json au lieu d'une image il suffit d'ajouter un paramètre "format=json".

Pour afficher plusieurs compteurs sur le même graphe on peut ajouter plusieurs paramètres "target".

Super pratique! Plus d'info sur la render API: http://graphite.wikidot.com/url-api-reference

Voir les commentaires