Publié le 25 Février 2015

Si vous utilisez la ligne de commande assez fréquemment vous savez surement que la commande cd (change directory) permet de retourner dans le répertoire précédent avec :

cd -

Très pratique mais on ne peut retourner que dans le repertoire précédent il n'y a pas d'historique des répertoires visités.

Heureusement il y a une autre commande qui permet de changer de repertoire tout en maintenant un historique de navigation. Il s'agit de pushd

pushd ~
pushd ~/Downloads
pushd ~/var/log

Ensuite pour remonter dans l'historique on utilise popd

popd

pushd ajoute les répertoires dans une pile et popd les dépile.

Voir les commentaires

Rédigé par Bliz

Publié dans #Linux

Publié le 20 Février 2015

Si vous placez un bouton dans un formulaire HTML le comportement par défaut est que lorsqu'on clique sur le bouton le formulaire est envoyé.

<form>
   <button>Cliquer ici pour envoyer le formulaire</button>
</form>

Un clic sur le bouton entraine l'envoi du formulaire. C'est presque équivalent à :

<input type="submit" value="Cliquer ici pour envoyer le formulaire">

Maintenant on peut avoir besoin d'un bouton qui se trouve à l'intérieur d'un formulaire mais qui ne doit pas envoyer le formulaire (il peut déclencher un action en javascript par exemple).

Il suffit dans ce cas d'ajouter un attribut type="button":

<form>
   <button type="button">Cliquer ici sans rien envoyer</button>
</form>

Voir les commentaires

Rédigé par Bliz

Publié le 17 Février 2015

La commande grep est très pratique pour rechercher une chaine de caractères dans des fichiers.

En retour grep affiche toutes les lignes contenant le motif recherché.

Parfois il peut être intéressant d'avoir un peu de contexte dans lequel la ligne apparaît.

Par exemple si vous faîtes une recherche dans du code source il peut être intéressant de rechercher une fonction et d'afficher les premières lignes de l'implémentation de la fonction.

grep propose deux option -A (after) et -B (before) qui prennent un nombre de ligne en paramètres et affiche les X lignes avant ou après la ligne trouvée.

Par exemple:

grep "function" -A5 *.php

Voir les commentaires

Rédigé par Bliz

Publié le 6 Février 2015

Voyons comment utiliser un peu de magie avec angularJS en réalisant le filtrage d'une liste en temps réel.

Je dis "magie" car il suffit de peu de code pour développer cette fonctionnalité.

Tout d'abord partons d'une liste toute simple en HTML:

<ul>
   <li>Banane: Jaune</li>
   <li>Pomme: Rouge</li>
   <li>Prune: Vert<li>
   <li>Framboise: Rose<li>
   <li>Fraise: Rouge</li>
</ul>

Maintenant mettons un peu d'angular pour générer la liste:

angular.module('demoListe', [])
   .controller('listeController', function () {
      // la liste des fruits qu'on souhaite afficher
      this.fruits = [{
          nom: 'banane',
          couleur: 'jaune'
        },{
          nom: 'pomme',
          couleur: 'rouge'
        },{
          nom: 'prune',
          couleur: 'vert'
        },{
          nom: 'framboise',
          couleur: 'rose'
        },{
          nom: 'fraise',
          couleur:'rouge'
      }];
   });

et le HTML devient

<ul ng-controller="listeController as ctrl">
   <li ng-repeat="fruit in ctrl.fruits">{{fruit.nom}}: {{fruit.couleur}}</li>
</ul>

Bien sûr il faut ajouter un input text pour saisir le texte pour filtrer la liste:

<div ng-controller="listeController as ctrl">
   <input type="text" ng-model="filtre">
   <ul>
      <li ng-repeat="fruit in ctrl.fruits | filter: {'$': filtre}">
         {{fruit.nom}}: {{fruit.couleur}}
     </li>
   </ul>
</div>

Et comme on a utilisé $ dans le filtre le filtrage prend en compte tous les champs donc nom et couleur. On peut chercher tous les fruit 'rouge' ou tous ceux commençant par p.

Le tout en à peine 10 lignes de codes. Magique!

Voir les commentaires

Rédigé par Bliz

Publié le 1 Février 2015

Depuis la version 5.3 de PHP il est possible d'écrire des fonctions anonymes ou lambda.

Par exemple imaginons le calcul "simplifié" du montant d'un panier:

$panier = array(
   "Learning PHP, MySQL & JavaScript: With jQuery, CSS & HTML5" => 35.50,
   "PHP and MySQL Web Development (4th Edition)" => 25.50,
   "PHP and MySQL for Dynamic Web Sites" => 30.00
);

function total() {
   $total = 0.0;
   array_walk($panier, function ($prix, $produit) use (&$total) {
      $total += $price;
   });
   return $total;
}

Ce qu'il faut remarquer ici c'est que la closure sur les variables présentes dans le scope où est déclarée la fonction ne se fait pas automatiquement.

Il faut spécifier explicitement les variables que l'on veut utiliser à l'aide du mot-clé 'use'.

Ensuite comme en PHP toute les valeurs sont passées par copies par défaut il faut spécifier explicitement que $total doit être passer par référence pour pouvoir la modifier depuis la lambda.

Voir les commentaires

Rédigé par Bliz

Publié dans #Php

Publié le 27 Janvier 2015

J'utilise ReactiveMongo pour me connecter à mongodb et j'ai un problème avec une commande update qui ne met pas à jour toutes les lignes.

En fait j'utilise le sélecteur suivant:

{ $and: [
   {"valid": true},
   {"countries":
      { $in: ["uk", "fr", "de"] }
   }
]}

Ce qui traduit en BSONDocument donne:

val countries = List("uk", "fr", "de")
val selector = BSONDocument(
   "$and" -> BSONArray(List(
      BSONDocument("valid" -> true),
      BSONDocument("countries" ->
         BSONDocument("$in" -> BSONArray(countries.map(BSONString)))
      )
   ))
)

Attention à bien transformer la List[String] en List[BSONString].

Dans mon cas c'était la raison pour laquelle mon sélecteur ne sélectionnait pas tous les documents attendus.

Voir les commentaires

Publié le 27 Janvier 2015

La commande sbt test exécute tous les tests d'un projet.

Il est bien sûr possible de n'exécuter qu'un seul test (ou tester une seule class ou package) avec l'option test-only.

Le truc est qu'il faut placer les guillemets au bon endroit sinon ça ne marche pas.

La syntaxe correcte est la suivante pour exécuter tous les tests présents dans MaClassSpec:

sbt "test-only *MaClassSpec"

Voir les commentaires

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

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