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

Publié le 9 Juillet 2014

Il s'avère en fait très facile de mettre en place une solution sur mesure de monitoring d'une application, d'un site web, etc.

Pour cela il faut utiliser statsd. Il existe des clients pour tous les principaux langages.

Statsd n'est pas basé sur TCP mais UDP pour l'envoi des messages. Cela permet d'avoir un débit plus rapide en contrepartie du risque de perdre quelques messages (UDP n'acknowledge pas les messages).

 

Côté application

Votre application ou site doit donc envoyer des messages (compteurs, timers, etc) en utilisant le client statsd. Cette partie doit être codée dans l'application un peu de la même façon que des messages de logs.

Il faut bien réfléchir aux données qu'on veut surveiller et choisir des noms de compteurs en conséquence.

 

Serveur Statsd

Ensuite il faut un serveur statsd qui va recevoir toutes les mesures émises par votre application. Le rôle du serveur ici est assez simple car il va juste transférer les mesures vers graphite qui nous permettra de visualiser tout ça.

Le servers statsd est basé sur nodejs. Il faut donc avoir nodejs d'installer ensuite l'application est assez simple.

Il suffit de cloner le repo git de statsd:

git clone https://github.com/etsy/statsd.git
cd statsd
cp exampleConfig.js maConfig.js

 

Graphite

Ensuite avant de modifier la config statsd nous allons d'abord créer un compte sur hostedgraphite. C'est un service payant mais il y a 14 jours gratuits ce qui permet de tester tranquillement.

Une fois votre compte créer il vous faut récupérer votre API key.

Il faut aussi télécharger le backend statsd pour hostedgraphite et le copier dans le rep ./backends https://raw.githubusercontent.com/hostedgraphite/statsdplugin/master/hostedgraphite.js

Maintenant nous sommes prêts à éditer notre fichier maConfig.js pour mettre à jour la config de statsd:

{ graphitePort: 2003
, graphiteHost: "carbon.hostedgraphite.com"
, port: 8125
, backends: [ "./backends/hostedgraphite" ]
, dumpMessages: true
, debug: true
, hostedGraphiteAPIKey: "3fe05a3e-a3e6-45b2-a5e2-bab153599423"
}

 

Voilà on peut maintenant démarrer notre serveur statsd:

node stats.js msmConfig.js

 

Maintenant il n'y a plus qu'à aller sur votre compte graphite et visualiser toutes vos mesures.

Voir les commentaires

Publié le 8 Juillet 2014

Si vous avez mis en place un téléchargement de fichier sur votre site vous vous êtes peut être confronté aux différences de caractère de fin de ligne.

Par exemple linux et mac os x utilisent le saut de ligne simple (line feed) qui se représente par \n. De l'autre côté les fichiers téléchargés depuis une machine Windows utilisent le retour charriot et de saut de ligne soit \r\n

Si cela a une incidence sur la façon dont vous devez traiter les fichiers il faut détecter le caractère de fin de ligne et dans mon cas sans charger tout le fichier en mémoire.

J'ai trouvé l'astuce suivante (je ne sais pas s'il y a mieux mais ça fonctionne en ne lisant que la première ligne du fichier):

<?php
$fichier = fopen('fichier/telecharge.txt', 'r');
$line = fgets($fichier);
fclose($fichier);

$fin_de_ligne = "";
if (strpos($ligne, "\r")) $fin_de_ligne .= "\r";
if (strpos($ligne, "\n")) $fin_de_ligne .= "\n";
?>

Voir les commentaires

Rédigé par Bliz

Publié dans #php