Phollow.me

Jekyll, Heroku et mon blog

2012-05-20T01:30:22+02:00

La migration du blog vers Jekyll était une première étape nécessaire pour une migration complète vers une solution gratuite – ou presque. Quand le site web n’est plus qu’une collection de fichiers statiques, l’hébergement devient vraiment simple.

Heroku

Heroku est une plate-forme cloud qui peut faire tourner des applications Python, Ruby, Scala etc. Le déploiement d’une app n’est pas plus compliqué qu’un git push heroku master. J’utilise la solution gratuite qui est amplement suffisante pour ce blog. Et si un jour ce blog devient extraordinairement populaire, je pourrai scaler simplement avec ps:scale web=x.

Amazon S3

J’en avais déjà parlé sur l’article précédent, les images et les uploads divers des articles sont tous stockés sur Amazon S3. C’était pour préparer la migration sur Heroku, car on est limité à 100Mo pour une application donné. Une application dont le code source fait 100Mo, c’est déjà énorme je trouve. Et généralement personne ne stocke les uploads d’une app. web dans un sous-dossier de l’application elle-même.

Du coup ça peut me permettre de stocker des trucs vraiment énormes sans avoir de limite (sauf les limites de mon porte-monnaie évidemment). D’un point de vue argent justement, S3 est la seule chose que je paie pour héberger ce blog, et pour info j’en suis à $0.03 depuis le début du mois.

Sinatra

Heroku ne permet pas de déployer juste un tas de fichiers statiques, par contre rien ne nous empêche de développer une application proxy, ici Sinatra, servant seulement à servir ces fichiers. Le code de l’application est simple :

# encoding: utf-8
require 'rubygems'
require 'sinatra'

configure do
  set :public_folder, Proc.new { File.join(root, "_site") }
  # Last modification time for browser cache
  @last_mod_time = Time.now
end

before do
  headers "X-UA-Compatible" => "IE=Edge,chrome=1"
  expires 300, :public, :must_revalidate
  last_modified(@last_mod_time)
end

get '/' do
  send_file('_site/index.html')
end

get '/*' do
  file_path = '_site/' + params[:splat].join('/') + '/index.html'
  if FileTest.exist?(file_path)
    send_file(file_path)
  end
  halt 404
end

not_found do
  send_file('_site/404.html')
end

Le code de l’application a été mise à jour sur le dépôt Github du blog.

Autres solutions

Heroku n’est pas la seule manière d’héberger votre blog à moindre coût. On peut utiliser entre autre :

Les pages Github http://pages.github.com/
Mettre le site en entier dans Amazon S3
Dropbox

CSS3 et polices OpenType

2012-05-15T00:00:32+02:00

Les polices au format OpenType ont pour avantage de prendre en charge un jeu de caractères étendus et offrent plus d’options au niveau de la présentation. Par exemple on peut gérer les ligatures discrètes, les fractions, les petites capitales… Les graphistes ont longtemps été seuls à pouvoir jouer avec ces fonctionnalités, mais savez-vous que vous pouvez faire la même chose avec un peu de CSS3 ?

Exemple des ligatures

Prenons par exemple les ligatures. C’est une des choses que je voulais depuis longtemps et qui est maintenant possible sur une page web. Le but d’une ligature est de rendre le texte plus lisible et plus beau aussi, comme en évitant une transition grossière entre un f et un i. Les ligatures fusionnent deux caractères et le résultat est vraiment considéré comme un seul.

fleurs, fille, off.

Vous devriez voir trois ligatures ci-dessus si votre navigateur supporte ces réglages, sinon vous pouvez toujours allez voir sur cette image.

font-feature-settings

Alors, comment en profiter à l’aide du CSS3 ? Il y a une nouvelle propriété utilisée pour ça qui s’appelle font-feature-settings. Voici le code utilisé pour l’exemple de ce billet.

p {
    -moz-font-feature-settings:"liga=1, dlig=1"; 
    -ms-font-feature-settings:"liga", "dlig"; 
    -o-font-feature-settings:"liga", "dlig"; 
    -webkit-font-feature-settings:"liga", "dlig"; 
    font-feature-settings:"liga", "dlig";
}

Vous avez sûrement remarqué les mots-clefs liga et dlig. Chacun possède une signification propre et active une spécificité OpenType, voici la liste complète :

liga ligatures communes
dlig ligatures discrètes
smcp small-caps, petites capitales
lnum lining-numeral, c’est ce que j’appelle les chiffres minuscules.
onum old-style numeral, les chiffres en mode old-school, par exemple le 1 ressemble un peu à un I.
swsh n les swashs, n étant le numéro de l’index voulu, certaines polices en ayant plusieurs. Ce sont des décorations pour certaines lettres, généralement sur des polices de type script
ss01–20 styleset (01—20)

Plus d’infos : font-feature-settings sur MDN

Support navigateurs

Le support des navigateurs n’est pas encore parfait, néanmoins rien ne vous empêche de l’utiliser à présent. Rien ne changera pour les navigateurs ne supportant pas cette norme, ils verront le texte… comme d’habitude. Les navigateurs supportant cette règle CSS3 sont Chrome, Safari et Firefox sur Mac. Sur Windows, il y a seulement Chrome et Safari d’après mes tests rapides. J’ai pu voir que cela marchait aussi sur Chrome Linux, je n’ai pas testé les autres. Je parle bien-sûr des dernières versions en date de chaque navigateur.

Où trouver des webfonts compatibles ?

C'est là que le bât blesse. Après quelques recherches je me suis rendu compte que le service que j’utilise, Typekit ne prend pas encore en compte cette fonctionnalité. Du moins sur les polices que j’ai essayé. Par contre FontDeck commence à répertorier ce genre de police sous le label Opentype. En allant sur le détail d‘une police, on peut voir les options OpenType gérées. Certaine comme Magenta en possède pas mal !

De Wordpress à Jekyll

2012-05-06T23:00:00+02:00

Cela fait plusieurs mois que j’en avait envie, je l’ai finalement fait ce week-end : une migration complète de mon blog Wordpress vers Jekyll. Vous ne devriez pas voir énormément de différences… Non, la différence est surtout pour moi, l’écriture et la gestion du site.

Je n’étais pas vraiment malheureux avec Wordpress, non. Seulement embêté par certaines fonctionnalités. Par exemple l’édition d’articles est juste infâme, je finissais souvent par utiliser l’éditeur HTML en fait. La performance de Wordpress est minable sans plugin externe (cache), car il fait les mêmes requêtes SQL à chaque pages vues. On ne sait jamais, peut-être que l’article change toutes les 5 minutes ?

Bref, je m’égare en trollant, parlons un peu de cette migration.

Jekyll

Jekyll est un “générateur de sites statiques”, écrit en Ruby. Il y en a d’autres comme Hyde ou Blatter en Python. J’ai essayé Jekyll et Hyde, j’ai trouvé le premier plus flexible, notamment au niveau de la gestion des filtres Liquid customisé et des permalinks.

Pourquoi avoir migré sur un système statique ?

Plusieurs raisons à cela mon bon monsieur.

Gain de mémoire et performances

Ce blog est hébergé sur un petit serveur virtuel. PHP et MySQL étant assez gourmand au niveau mémoire, me passer d’eux est non négligeable avec mes 512mb de RAM.

N’ayant pas énormément de visites, on ne peut pas dire que mes instances PHP travaillaient beaucoup. Mais on ne peut pas battre la performance de pages .html directement servies par Nginx.

Plus simple pour écrire

Sur Wordpress quand tu veux écrire un article, tu dois t’identifier dans l’interface d’administration, chercher le lien pour ajouter un article dans le bordel ambiant, cliquer dessus, et là tu peux commencer à t’amuser. Ah et tu dois être connecté aussi.

Avec Jekyll, mes articles sont de simples fichiers textes en Markdown ou HTML. Je peux écrire et tester le rendu de l’article localement sans avoir besoin d’être connecté aux internets.

Backup

Le site n’est qu’un ensemble de fichiers, donc Git.

Utilisation

Généralement un site basique sous Jekyll ressemble à ça :

.
|-- _config.yml
|-- _includes
|-- _layouts
|   |-- default.html
|   `-- post.html
|-- _posts
|   |-- 2007-10-29-why-every-programmer-should-play-nethack.textile
|   `-- 2009-04-26-barcamp-boston-4-roundup.textile
|-- _site
`-- index.html

_config.yml

Diverses variables utilisées pour la configuration, comme les permalinks, le moteur de rendu Markdown et d’autres choses.

__includes

Généralement des partials que vous pouvez utiliser dans vos templates. Si vous avez plusieurs bouts de HTML qui se répète un peu partout dans vos pages, c’est bon de les factoriser ici.

_layouts

Les templates de vos pages web.

_posts

Vos articles écrits en .html, .markdown ou .textile. Jekyll se basera sur l’extension lors de la compilation.

_site

Après compilation, toutes les pages iront dans ce dossier. C’est sur ce dossier que vous devez faire pointer votre serveur web.

Lancer Jekyll en local

jekyll --server

Migrations

J’avais vraiment envie de garder l’existant, et donc il a fallut trouver des astuces pour la migration. Rentrons dans le vif du sujet.

Bouger le contenu

Pour rapatrier les articles, j’ai utilisé un utilitaire appelé exitwp. Je n’ai pas converti les anciens articles en Markdown pour garder au maximum le rendu qu’avaient les anciens articles (oui parce que Wordpress te rajoute plein de merdes en HTML, qui aurait été viré avec la conversion). Heureusement rien ne m’empêche d’écrire les nouveaux billets autrement.

Wordpress met généralement tout ce que tu uploads dans un dossier. J’ai voulu les mettre sur Amazon pour gagner de l’espace disque. J’ai utilisé cette commande :

s3cmd put --acl-public --recursive --guess-mime-type * s3://phollow

Note sur les commentaires

Avec un site statique tu ne peux plus utiliser un système de commentaires server-side. Du coup on peut se rabattre sur un système comme Disqus ou Livefyre. Important : pour importer les anciens commentaires, il suffit d’installer un de ces systèmes sur Wordpress avant la migration.

Code source

Je mets à disposition le code source de la nouvelle version du site sur Github à cette adresse. Il y a quelques trucs sympas, dont un Rakefile qui permet le déploiement des articles au travers de rsync.

rake deploy

Sass – CSS on fire that sucks less

2012-03-04T21:30:32+01:00

Le css permet de définir des styles au travers d’un langage déclaratif, de sélecteurs, propriétés et valeurs. Le tout saupoudrée d’une notion d’héritage basique. Ce qui peut amener certains problèmes sur le long terme : répétition de code et complexification du fichier CSS où les relations entres nos éléments du DOM ne sont pas forcément claires.

Sass étend les capacités du css en rajoutant la possibilité d’utiliser des variables, des fonctions, l’héritage de sélection… Tout un tas de choses qui permet non seulement de simplifier le code mais aussi, selon moi, de rendre plus logique les feuilles de styles. La structure du dom saute facilement aux yeux.

Installation

On installe sass comme n’importe quelle autre gem Ruby.

gem install sass
sass --watch default.scss
>>> Sass is watching for changes. Press Ctrl-C to stop.
  overwrite default.css

Vous l’avez compris, le fichier est automagiquement compilé en css à la volée grâce à l’attribut watch.

Les 2 types de syntaxes

Il y a deux syntaxes différentes qui n’influent pas sur les fonctionnalités. On va dire que c’est une question de goût. Il y a une version Python-like (sass) qui, historiquement, était la première. La seconde (scss – Sassy CSS) reprend la syntaxe du css. L’avantage de celle-ci étant qu’un fichier .css est aussi un fichier .scss.
La différence se fait par le compilateur sur l’extension.

/* SASS */
section
  margin-bottom: 1em
  .entry
    color: red

/* SCSS */
section {
  margin-bottom: 1em;
  .entry {
    color: red;
  }
}

Imbrication

Principe

Le meilleur moyen d’éviter la répétition est d’imbriquer les sélecteurs entre eux. Dans la suite de l’article je montrerai le code scss et l’équivalent compilé en css.

/* SCSS */
table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

article {
  header, section { margin-top: 1em }
}

/* CSS */
table.hl {
  margin: 2em 0;
}
table.hl td.ln {
  text-align: right;
}

article header, article section {
  margin-top: 1em;
}

Le sélecteur parent

Pense juste à self ou this comme dans les langages objets, copain. Dans sass on utilise le symbole &.

/* SCSS */
a {
  color: #324567;
  &:hover { color: red }
  display: inline-block;
  line-height: 1.6em;
}

/* CSS */
a { color: #324567; display: inline-block;
    line-height: 1.6em; }
a:hover { color: red }

Media queries

/* SCSS */
#content {
  margin: 0 2.5em;
  @media screen and (max-width: 460px) {
    margin: 0 1.5em;
  }
}

/* CSS */
#content { margin: 0 2.5em; }
@media screen and (max-width: 460px) {
  #content { margin: 0 1.5em; }
}

Les variables

J’ai déjà eu la nécessité de changer une ou plusieurs couleurs dans le thème d’un site. C’est donc X lignes que tu dois modifier. Avec les variables on a pas ce problèmes là, il suffit de définir les couleurs une fois seulement. Les variables dans sass peuvent aussi stocker des tailles, des chaînes de caractères…

/* SCSS */
$link-color: blue;
$link-hover: red;
$pad: 3px;
a {
  color: $link-color;
  &:hover { color: $link-hover; }
  padding: $pad;
}

/* CSS */
a { color: blue; padding: 3px; }
a:hover { color: red; }

@extend

Cet attribut permet de spécifier qu’une classe hérite des propriétés d’une autre. Imaginons que vous ayez une classe .button contenant le style de base d’un bouton sur votre site et une classe .button-submit qui lui aura juste une couleur différente. L’attribut @extend vous évite à mettre dans le dom les 2 classes sur ce bouton mais uniquement la dernière.

/* SCSS */
.button {
  background: blue; color: white;
  padding:0.2em 0.8em;
  border-radius:0.4em;
}
.button-submit {
  @extend .button;
  background: green;
}

/* CSS */
.button, .button-submit {
  background: blue; color: white;
  padding:0.2em 0.8em;
  border-radius:0.4em;
}
.button-submit { background: green; }

Mixins

Les mixins ce sont des bouts de codes que tu peux rappeler ensuite ailleurs dans tes classes. Utiles pour éviter la duplication de codes encore une fois. Des valeurs peuvent être envoyés en paramètres, et celles-ci sont nommées et peuvent avoir une valeur par défaut.

/* SCSS */
@mixin border-radius($amount: 10px) {
  border-radius: $amount;
  -webkit-border-radius: $amount;
  -moz-border-radius: $amount;
}
.msg { @include border-radius(5px); }

/* CSS */
.msg {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}

Autres fonctionnalités

Vous pouvez diviser votre code en plusieurs fichiers et les importer avec @import, ils seront combinés avec la compilation
Des méthodes de calculs sont supportées, vous pouvez additionner, diviser et jouer avec les tailles, couleurs et autres valeurs.
Des opérateurs @if, @else, @else if, des opérateurs de logique and, or, =, ainsi que des boucles @for, @while et @each sont supportés. Mais je suis moins fan de ce genre de pratiques dans un fichier de style.
Des méthodes pour jouer sur les couleurs : plus foncé, plus clair…

Conclusion

Sass peut rendre l’utilisation du css plus sympathique. Si vous voulez en savoir plus je vous conseille de vous rendre sur la page officielle de l’application. Vous y trouverez des exemples et de la documentation sur d’autres fonctionnalités non évoquées ici.

Si Ruby vous rebute, il y a une autre application qui s’appelle LESS et qui fait en gros la même chose, la syntaxe étant un peu différente.

En tout cas une chose est sûre, je vais l’utiliser sur mon prochain projet. Reste à trouver le projet.

❧

Enlarge your police

2012-02-04T22:42:16+01:00

Rien à voir avec les spams de Viagra. Non. Sous ce titre un peu malicieux, je tenais à vous parler d’une chose que je ne supporte plus : les tailles de texte minuscules dans les pages html. Cette impression d’avoir sous les yeux le dictionnaire Édition Larousse en lisant un article de blog.

Pourtant je ne pense pas qu’il soit plus difficile de lire sur un écran que de lire un livre. Il suffit de copier la façon dont les livres mettent en page le texte.

Pour être un peu plus précis, le problème se situe souvent sur le nombre de caractères que contient une ligne de texte. La taille de la police sera donc à priori proportionnelle à la largeur de son conteneur.

Être lu comme on lit un livre

Partons d’un constat simple : je suppose que pour vous aussi il est plus facile de lire un bouquin que de lire pendant pas mal de temps sur votre écran d’ordinateur. Le premier argument pour ça est de dire que c’est l’écran qui fatigue les yeux. Pour moi la vraie raison est la taille minuscule des typos sur le net.

Depuis plusieurs jours j’ai une obsession. Je compare les articles de blog à des livres de ma bibliothèque. Et souvent je vois la même chose : on est largement en dessous des 16px par défaut des navigateurs. À croire que les designers cherchent à mettre le plus d’informations possible dans le moins d’espace possible. Ça peut marcher pour quelques applications web mais pas pour une longue lecture.

Le nombre optimal de caractères par lignes

Tout est une histoire de rythme. Si une ligne est trop longue, le lecteur aura du mal à bien voir où une ligne commence et termine. Ça sera plus difficile de trouver la prochaine ligne sur de long bloc de texte. Pas top pour se concentrer dessus.

Inversement, des lignes trop courtes cassent le rythme de lecture. Elle se retrouve artificiellement accélérée et le lecteur sautera parfois des mots (pouvant être important à la compréhension).

Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple column work, a better average is 40 to 50 characters.

— The Elements of Typographic Style Applied to the Web ^*

La bonne pratique est donc d’avoir environ 66 caractères par lignes, en comptant les espaces aussi. Le css avec les media-queries deviennent indispensables sur une page fluide, la largeur des colonnes de texte pouvant changer selon la résolution.
Je dois d’ailleurs améliorer pas mal ça sur mon blog.

Autres considérations

Ne pas hésiter à utiliser des interlignes amples dans vos textes. En utilisant la propriété css line-height avec un coefficient sans unité. Par exemple 1.5 est une bonne base, à ajuster suivant la police.

Les nouveaux paragraphes doivent être bien marqués. On peut utiliser des lettrines, de l’indentation, un pied-de-mouche (❡) ou simplement un saut de ligne.

Éviter la justification sur des colonnes de textes minces. Mais généralement la justification sur le web ne fonctionne pas. À cause du support des césures encore aléatoire, du manque de crénage (kerning) automatique et des ligatures (on y vient avec Firefox ^†).

Enfin les polices serifs facilitent la lecture. Boudées pendant un temps à cause des résolutions assez basses de nos écrans, elles sont parfaitement utilisables de nos jours.

Conclusion

Voilà pourquoi j’ai augmenté la taille du texte ici. Si votre navigateur à une taille de police de 16px par défaut, alors ce texte devrait faire 20px. Et si vous avez lu mon article jusque ici, j’aurai gagné une partie de mon pari.

Et promis j’arrête de vous faire chier avec la typographie avant un bout de temps.

❧

^* Une lecture que je conseille fortement, plein de conseils et de bonnes pratiques sur la typographie adaptée à l’usage du web – source
^† Using OpenType font features with CSS 3: Part 1 – source

Mes polices web préférées [sans-serif]

2011-11-30T13:35:38+01:00

Après un premier article sur les polices de types serif, je continue sur ma lancée avec cette fois-ci les sans-serifs. Ce type de police n’a pas d’empattements, d’où leur nom. En français on les appellent aussi polices linéales. Elles ont été longuement privilégiées pour le corps de texte sur les écrans, car à l’époque les écrans analogiques et la basse résolution ne rendaient pas l’affichage d‘une serif optimale. La nature simple des polices linéales fait qu’elles sont mieux lisibles sur ce type d’écran. De nos jours avec nos écrans LCD, l’antialiasing etc., ce n'est plus vrai je trouve.

Aujourd’hui je vais donc vous montrer quelques polices sans empattements que je trouve plutôt cool. Donc si vous en avez un peu marre d’Helvetica ou d’Arial, n’hésitez pas à les tester. Ces fonts ont été trouvés, à l’image de l’article précédent, sur Typekit.

LFT Etica Web & PT Sans

LFT Etica Web est une police moins froide que ces consoeurs, presque de type humaniste. Elle se décline sous 16 graisses/styles différents et peut être utilisée pour du texte ou des headings.

PT Sans est une font au look moderne et humaniste. Là encore, elle possède plusieurs familles et styles et peut donc s’adapter à l’usage. Par exemple la famille caption sera utilisée pour les petits textes.

Sur le site web de Joni Korpi, on peut voir l’utilisation de ces deux polices. Avec LFT Etica Web pour les titres et PT Sans pour le corps de texte.

Proxima Nova

Proxima Nova (2005) est une refonte complète de Sans Proxima (1994). Les six polices originales (trois poids avec italique) ont été élargies à 42 polices OpenType complet. Proxima Nova chevauche l'écart entre les fontes comme Futura et Akzidenz Grotesk. Le résultat est un hybride combinant des proportions humanistes avec un aspect un peu géométrique.

FF Dagny Web Pro

En 2002, le journal suédois Dagens Nyheter (DN) a migré du format broadsheet vers un format tabloïde. Le changement au format tabloïde a rendu le cadre plus compact et Pangea a été mandaté pour produire un correspondant sans-serif pour le journal Suédois. Cela est devenu DN Grotesk, qui a maintenant évolué en FF Dagny. Conçu par Örjan Nordling et Söderström Göran.

Myriad Pro

Myriad Pro, un grand classique d‘Adobe est aussi disponible sur Typekit. 10 fonts au total (5 graisses différentes).

Principalement utilisée sur ce site pour le corps de texte et quelques headlines.

Ratio

Ratio est disponible en 6 graisses allant de minces à lourdes avec les italiques pour chaques. Que ce soit sur papier ou sur écran, Ratio ajoute un niveau de sophistication et de polyvalence qui fait ressortir le meilleur dans n’importe quel design.

Disponible aussi sur Typekit, avec la variante Ratio Display.

Et voilà. Ce n’est qu’un petit échantillon des polices disponibles pour font-face, à l’heure où j’écris ces lignes, je compte plus de 140 sans-serifs sur Typekit. Pour le prochain article, je prépare une collection de slab-serifs.

7 frameworks CSS pour développer en Responsive Web Design

2011-11-21T13:51:19+01:00

Je commence une série d'article à propos d'outils permettant de faciliter le développement d’un site internet responsive, s’adaptant dynamiquement à la taille de l’écran du média. Dans cet article, je vais parler uniquement de tout ce qui a un rapport avec le CSS. En particulier des grids et des templates CSS.

320 and up

320 and up est un template basé sur HTML5 Boilerplate et la grid de Less Framework 4.

320 and up

1140 CSS Grid

1140 CSS Grid se base sur la résolution d’un moniteur de 1280 de large, et se réduit de manière fluide sur les plus petites résolutions.

1140 CSS Grid

Less Framework 4

Less Framework 4 permet de construire des sites web qui s’adaptent aux différents devices grâce à 4 templates et 3 pré-réglages typographiques.

Less Framework 4

Mobile Boilerplate

Mobile Boilerplate est une collection de CSS, HTML et diverses bibliothèques Javascript permettant de bien démarrer un projet web mobile.

Mobile Boilerplate

Skeleton

Skeleton contient une grille CSS et un style de base (typographie, formulaire, boutons…) pour commencer un projet.

Skeleton

Golden Grid System

Golden Grid System : Pour moi une des grilles adaptatives les plus propres. L’avantage de celle-ci est qu’elle conserve plusieurs colonnes tout le temps, même au format mobile.

Golden Grid System

The Semantic Grid System

The Semantic Grid System est intéressante dans le sens où c’est vous qui choisissez le nombres de colonnes, la taille des marges etc.

The Semantic Grid System

Je vous conseille aussi de ne pas hésiter à modifier ces divers frameworks pour votre utilisation. Par exemple le thème de ce blog tourne sur une version modifiée de Skeleton — j’ai rendu la grille fluide – et les bibliothèques Javascript de 320 and up.

En regardant le code de ces projets vous allez avoir une meilleure vision de ce qui se passe avec les media queries. Et ainsi adapter leurs fonctionnements à votre propre projet.

Si vous en connaissez d’autres, n’hésitez pas à en parler aux gens avec les commentaires.

Homebrew, un gestionnaire de paquet pour Mac OS/X

2011-11-01T20:12:51+01:00

Quand on a pris la bonne habitude de travailler sous un environnement Unix, il y a certains outils qui vous manquent cruellement quand on se retrouve par exemple sur Mac OS/X. Ce système d’exploitation ne possède pas de gestionnaire de paquet comme apt-get sous Debian ou yum sous CentOS. Il existe heureusement des solutions, comme par exemple Macports. J’en avais parlé sur ce billet il y a quelques temps déjà.

Aujourd’hui j’utilise un autre gestionnaire de paquet s'appelant Homebrew. Il se veut plus simple que Macports et diffère un peu dans sa manière de faire. Pour faire simple Homebrew va toujours essayer d'utiliser les librairies déjà sur le système pour compiler nos paquets. Cette manière de procéder possède des avantages et des inconvénients. L'avantage c'est que pour compiler un paquet, on ne va pas devoir compiler X librairies avant. L'inconvénient c'est que nos exécutables risquent grandement de planter après une mise à jour de l’OS ; les librairies de Mac OS/X étant mises à jour.

C'est donc un choix à faire. Et j’ai choisit Homebrew car je n'ai pas non plus 50 paquets à maintenir, une vingtaine tout au plus, et je ne mets pas mon système d’exploitation à jour tous les quatre matins.

Pré-requis

Il faut savoir que par défaut il n’y a pas les outils de compilation dans Mac OS/X. Alors on va devoir installer gcc et ses potes, et ça se fait simplement en installant Xcode. Pour certains paquets vous allez peut-être avoir besoin du « Java Developer Update ». On peut trouver ce qu’il faut sur cette page.

Installation

L'installation à proprement parler du gestionnaire de paquets peut maintenant commencer. Homebrew est écrit en Ruby et son script d’installation aussi.

/usr/bin/ruby -e "$(curl -fsSL https://raw.github.com/gist/323731)"

Il va faire son nid dans /usr/local, ce qui nous permettra d’installer des paquets sans passer par sudo. De plus cet endroit est assez indépendant du système, on pourra donc facilement tout enlever si besoin. Il est bien sûr toujours possible de mettre tout ça ailleurs si vous préférez.

Et ensuite on peut RTFM

J'admets avoir la flemme de tout vous expliquer, mais franchement il suffit de lire.

Pour avoir la liste complète de ce qu’il est possible d’installer, on peut se rendre sur GitHub, sur cette page. À savoir que vous pouvez créer vos propres formules et la proposer à la communauté si vous voyez un manque. Homebrew m’a servi pour installer quelques paquets toujours pratiques comme git, ffmpeg, x264, mongodb, redis, htop, wget…

Site web de Homebrew.

Mes polices web préférées [serifs]

2011-10-23T22:04:59+02:00

Le marché des « web fonts » ne s'est jamais aussi bien porté. Et son avenir le semble tout autant. La quantité et la qualité des polices croissent tous les jours et avec l'aide des services comme Adobe Typekit et Google WebFonts, l'intégration est simple.

Le processus de création d'une police pour le format web est moins simple que l'on peut le penser au premier abord. Il ne suffit pas de prendre une simple .ttf et de la convertir au format @font-face. La police doit être retravaillée complètement pour être lisible sur les différents OS/Navigateur. Un processus appelé en anglais « hinting » et très bien expliqué ici et là par Typekit. Les grandes fonderies travaillent donc à convertir leurs grands classiques au format web, pour mon plus grand plaisir ! J'ai donc décidé dans cet article de vous présenter ma série de polices web préférées du moment, en me concentrant uniquement aujourd'hui sur la famille des serifs. Vous l'aurez compris d'autres articles viendront plus tard dans le même style.

FF Meta Serif Web Pro

Cette police a été créee en partant de la version sans-serif de base (FF Meta). Elle a été développée en 3 ans par 3 designers Erik Spiekermann, Christian Schwartz & Kris Sowersby.

Fig. 1: Le blog personnel de Trent Walton utilise cette police à 100%. Elle rend bien à n'importe quelle taille que ça soit pour les paragraphes ou les headings grâce notamment à son « x-height » élevé.

Adobe Minion Pro

Une police Adobe désignée par Robert Slimbach dans les années 90. Elle a le style des polices utilisées dans les livres pendant la Renaissance. Minion est élégante et très lisible.

Fig. 2: Le blog de Rob Weychert l'utilise dans ces paragraphes.

FF Tisa Web Pro

Dessinée par Mitja Miklavčič pour l'usage dans des magazines modernes. Un « x-height » large et des serifs prononcés améliorent la lisibilité. Et je trouve vraiment la version italique jolie.

Fig. 3: Dan Cederholm l'utilise dans les paragraphes de ces articles.

Skolar Web

Skolar, la police primée conçue par David Březina, est une serif qui a été désignée à l'origine pour des publications savantes et multilingues. La police maintient sa crédibilité tout en incorporant un style subtil personnel.

Fig. 4: Elliot Jay Stocks utilise cette police à toutes les sauces. Dans les paragraphes ou les titres en majuscules avec un letter-spacing etc.

FF Scala Web

FF Scala is an old style, humanist, serif typeface designed by Dutch typeface designer Martin Majoor in 1990 for the Vredenburg Music Center in Utrecht, the Netherlands. The FF Scala font family was named for the Teatro alla Scala (1776–78) in Milan. Like many contemporary Dutch serif faces, FF Scala is not an academic revival of a single historic typeface but shows influences of several historic models. Similarities can be seen with William Addison Dwiggins' 1935 design Electra in its clarity of form, and rhythmic, highly calligraphic italics. Eric Gill's 1931 typeface Joanna (released by Monotype in 1937), with its old style armature but nearly square serifs is also similar in its nearly mono-weighted stroke width.

— Wikipedia, source

C'est la police que j'utilise dans les paragraphes de ce blog. J'aime beaucoup les détails calligraphiques. Il existe plusieurs familles dont une condensée et une « small-caps ». Et aussi une version sans-serif. Toutes ces fonts sont disponibles sur Typekit.

C'est d'ailleurs ce service que j'utilise, parce que c'est là où toutes les polices professionnelles se trouvent. J'ai testé un peu Google WebFonts et à vrai dire je n'en trouve pas beaucoup de bonne qualité. À part peut-être la famille de fonts Droid ou Lobster la nouvelle Comic Sans de nos chers designerfags en herbe — Mais c'est cool ça fait retro ! — Bref je m'égare, je garde ma haine pour la mauvaise utilisation de Lobster dans un article à part.

Les césures dans le web

2011-10-10T23:59:14+02:00

En typographie, la césure est l'art de couper un mot de telle manière à ce qu'il entre dans la justification. Cette pratique est utilisée dans les livres et depuis peu de temps possible aussi sur le web.

On a inventé ce système pour pouvoir mettre plus de mots sur une page donc économiser du papier à l'imprimerie et améliorer la justification. Même si on n'utilise pas de papier sur le web, on peut toujours gagner de la place et améliorer l'aspect général de la typographie.

Parfois les textes justifiés sont vraiment horribles sur les pages web, avec des rivières monstrueuses. Les césures améliorent nettement ça, donc passons maintenant au code.

Nouvelle méthode CSS3


p {
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
}

À l'heure où j'écris ces lignes, les navigateurs supportant ces propriétés sont Firefox 6+ et Safari 5.1+. Pour les désactiver il suffit de passer auto en manual. En mode manuel, les  sont néanmoins toujours respectés.

Les césures ont des règles strictes d'utilisation, règles changeant suivant la langue. Le navigateur doit savoir dans quelle langue vous écrivez, donc vous devez la renseigner. Un lang="fr" dans la balise <html> suffit par exemple.

Hyphenator

Cette bibliothèque javascript permet d'activer les césures sur tous les navigateurs supportant le « trait d'union conditionnel ». Ce caractère  est invisible quand on le place mais il sert à déterminer l'endroit où une césure peut avoir lieu.

L'avantage de ce script est qu'il privilégie l'utilisation de la méthode CSS3 sur les navigateurs la supportant.

http://code.google.com/p/hyphenator/

Examples

Les paragraphes de mon blog devraient maintenant tous fonctionner avec ce système de césures — depuis la mise à jour du thème en fait — et donc vous devriez les voir sur cet article (et les autres) — à condition d'avoir un navigateur assez récent, mais je ne me fais pas de soucis pour vous.

CSS Multi-Columns

2011-10-07T00:28:43+02:00

Qu'est-ce que c'est ?

Le module CSS multi-colums permet de diviser un long flux de texte en plusieurs colonnes de manière automatique. Et donc nous n'avons pas besoin, par exemple, pour 3 colonnes de créer 3 conteneurs. Cette technique est beaucoup utilisée dans les journaux ou les magazines mais encore très peu sur le web.

Ainsi de larges blocs de texte peuvent être divisés facilement en sous-colonnes pour offrir une meilleure lecture et améliorer l'esthétisme d'un site. C'est un avantage aussi d'un point de vue sémantique, car on se passe de balises supplémentaires nécessaires pour avoir le même rendu sans CSS3.

D'un autre côté la lisibilité d'un site peut être complètement ruinée avec une mauvaise utilisation de ce module. Un site web n'étant pas forcément statique comme le serait la page d'un magazine. Par exemple l'utilisateur ne doit pas avoir à scroller quand il lit la fin de la colonne et passe à la suivante.

Compatibilité des navigateurs

Opera 11.10+, Opera Mobile 11.10+
IE 10+
Firefox 3.6+
Safari 3.2+
Chrome 10+

Utilisation

Il y a deux façons de créer des colonnes, on peut d'une part spécifier un nombre fixe de colonnes à l'aide de la propriété column-count ou alors spécifier la largeur des colonnes à l'aide de column-width (pixels ou ems, mais pas de pourcentage…). Les deux propriétés peuvent être cumulées, mais le navigateur choisira l'une ou l'autre suivant les cas. Il existe bien sur d'autre propriétés :

column-gap pour gérer l'espacement entres les colonnes
column-rule, column-rule-width, column-rule-style, column-rule-color pour gérer l'apparence de la séparation des colonnes
break-before, break-after, break-inside permet par exemple de forcer le passage d'un élément sur la colonne suivante. Plus d'infos sur le site du w3c.

Exemples

Séparation en deux colonnes

Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass.

Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.

Now that there is the Tec-9, a crappy spray gun from South Miami. This gun is advertised as the most popular gun in American crime. Do you believe that shit? It actually says that in the little book that comes with it: the most popular gun in American crime. Like they're actually proud of that shit.

Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'?

Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing.

Code

div.twocol {
  column-count: 2;
  column-gap: 20px;
  -moz-column-count: 2;
  -moz-column-gap: 20px;
  -o-column-count: 2;
  -o-column-gap: 20px;
  -webkit-column-count: 2;
  -webkit-column-gap: 20px;
}

Séparation en trois colonnes + style

The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

Normally, both your asses would be dead as fucking fried chicken, but you happen to pull this shit while I'm in a transitional period so I don't wanna kill you, I wanna help you. But I can't give you this case, it don't belong to me. Besides, I've already been through too much shit this morning over this case to hand it over to your dumb ass.

Code

div.threecol {
	column-count: 3;
	column-gap: 10px;
	column-rule-color: #ccc;
	column-rule-style: dotted;
	column-rule-width: 2px;
	-moz-column-count: 3;
	-moz-column-gap: 10px;
	-moz-column-rule-color: #ccc;
	-moz-column-rule-style: dotted;
	-moz-column-rule-width: 2px;
	-o-column-count: 3;
	-o-column-gap: 10px;
	-o-column-rule-color: #ccc;
	-o-column-rule-style: dotted;
	-o-column-rule-width: 2px;
	-webkit-column-count: 3;
	-webkit-column-gap: 10px;
	-webkit-column-rule-color: #ccc;
	-webkit-column-rule-style: dotted;
	-webkit-column-rule-width: 2px;
}

Conclusion

La propriété CSS multi-columns se dégrade assez naturellement sur les navigateurs qui ne supporte pas encore la spécification. On voit simplement qu'une seule colonne. Pouvoir gérer ce genre de layout sans avoir recours à des scripts quelconque est vraiment pratique. À l'heure où les designers donnent de plus en plus d'importance à la lisibilité du contenu, je pense qu'on en verra un peu plus d'ici quelques temps.

P.S. : Vous avez reconnu les citations des exemples ?

Réf. : Spécifications

Un exercice sur le Responsive Web Design

2011-08-28T18:44:28+02:00

Mon blog est maintenant responsive. Terme que l'on peut traduire à l'arrache par qui répond bien. Le thème et le contenu va automatiquement s'adapter à la taille de l'écran. Le concept est intéressant et plus pratique que de faire un thème normal + un thème mobile par exemple. À l'heure actuelle les sites internets ne sont plus seulement affichés sur un ordinateur mais de plus en plus souvent sur des appareils de type mobile, smartphones ou tablettes.

S'adapter

Au début on avait pas énormément d'appareils exotiques en dehors du desktop. On voyait souvent un sous-domaine dédié à l'affichage d'un site sous iPhone, avec un thème propre. D'un point de vue conception on était tranquille, le thème mobile était indépendant du thème principal, et on connaissait les contraintes de l'iPhone. Mais maintenant on a beaucoup plus de smartphones et même des tablettes, chaque appareil possédant sa propre résolution. Et là on se rend compte que faire un thème dédié pour chacun de ces appareils est une idée complètement idiote. Donc le site web doit s'adapter.

Bonjour media query

Vous les avez déjà utilisées. Mais si, media="print" pour avoir un CSS dédié à l'impression par exemple. C'est pas nouveau, ça date de la norme CSS 2.1. Ce qui est nouveau se sont les ajouts de la norme CSS3. Des ajouts nous permettant de tester la résolution de l'écran, le type de device etc.

Si l'appareil à une résolution inférieure ou égale à 480px en largeur, le fichier mobile.css sera lu. L'attribut @media du CSS permet de faire la même chose sans avoir à le faire dans la balise <link>.

Par exemple sur ce site quand la résolution devient petite, j'enlève la sidebar sur la gauche pour la placer en dessous du contenu. C'est ce que permettent de faire les media queries. On peut imaginer faire disparaître certains éléments qui n'auraient par leur place sur un petit écran, avec un display:none; par exemple.

Les media queries de ce type ne fonctionnent que sur les navigateurs récents et sur la plupart des navigateurs mobiles (webkit, opera). Il y a donc un script js que j'utilise pour certains navigateurs (Oh hai, Internet Explorer). Vous pouvez le trouver sur cette page.

Responsive Grid

Pour me faciliter le travail j'ai utilisé une Grid CSS réactive. Construite sur les media queries, les différents blocs peuvent se ré-agencer suivant la taille de l'écran. Voici une liste non-exhaustive

FitText

FitText.js est un plugin jQuery permettant de rendre les tailles de polices flexibles. Je l'utilise pour certains headers. Ce plugin va les redimensionner par rapport à la taille du conteneur. Pratique.

Thème Phollow

Je met en ligne la source du thème Wordpress actuel sur Github pour les personnes intéressées. Vous pouvez le trouver sur cette adresse. Les forks sont fortement encouragés.

Pour moi il est maintenant obligatoire de travailler sur des sites qui fonctionnent sur n'importe quelles resolutions que sur des sites qui fonctionnent sur les résolutions des appareils actuels.

Wallpapers of the Week

2011-08-08T12:04:10+02:00

Wallpapers of the Week : 8 août 2011.

NY state of mind vs LA state of mind

green...ish? by ~liqui Grape Leaves by ~Zim2687 Icewind Dale by *IrvingGFM Suong Dem by =kAtz93

Mockups des futures versions de Firefox 7 & 8 — Mac, Windows

2011-08-04T21:15:20+02:00

La team des designers Firefox ne cesse de rechercher à améliorer l'ergonomie du navigateur. Et aujourd'hui ils nous proposent des mockups de ce que pourrait ressembler les futures versions de Firefox 7 ou 8. Firefox 4 avait déjà vu son interface grandement changée, l'histoire risque encore de se répéter — et c'est tant mieux !

Ces mockups ne seront pas forcément une image exacte des versions finales. Ils ont été réalisés avant tout dans une optique de recherche et de discussions. On peut voir sur ces premiers écrans la disparition de la barre de recherche, que j'avais déjà enlevé personnellement la trouvant inutile, un nouveau style de menu et un mode plein-écran qui a l'air plutôt sympathique.

Comme d'habitude ces expérimentations sont ouvertes et disponibles pour ceux qui veulent les tester. Mozilla a crée un nouveau build appelé Australis et téléchargeable à cette adresse. Ce build est une nightly, donc tous les jours une update pourra être téléchargée. La team UX Firefox déclare que c'est sur cette version que seront déposé leurs différents tests.

Maintenant je vais faire mon community manager en vous demandant ce que vous pensez de ces premiers concepts ? Pour ma part ça me plaît beaucoup même si on voit encore que Chrome a pas mal inspiré nos designers.

Via Mozilla

Dotshare.it, partage de .dotfiles

2011-07-27T12:45:31+02:00

Je joue beaucoup avec les dotfiles – ces petits fichiers cachés qui servent généralement à configurer un programme. Si vous aimez justement personnaliser votre système, vous en avez sans doute ouverts déjà pas mal. C'est là ou rentre en jeu Dotshare.it, un site web que l'on ma présenté il y a quelques temps.

Généralement il y a toujours un thread Post your screenshot and configs sur les différents forum des distributions *nix. La config était généralement collée à l'arrache en dessous. Pas pratique pour les retrouver plus tard. Certains utilisent Github, ce qui me semble déjà une bonne évolution mais encore à un niveau en dessous de Dotshare, qui lui est fait seulement pour ça.

Dotshare.it veut donc faciliter le partage et la recherche de fichiers dotfiles. Ils sont triés par applications, avec une capture du résultat. On peut aller chercher tous les fichiers d'un utilisateur en particulier sur sa page profil, suivre cette personne pour être alerté des updates etc.

Le look du site web est minimaliste et c'est une bonne chose. Ça ne devrait pas trop piquer les yeux des adeptes des CLI tools. L'information est bien présentée et l'essentiel est là. Il y a même des petites références au monde de la ligne de commande, comme scrot pour voir la capture du logiciel.

On a donc tout pour avoir un joli petit réseau social pour le partage des fichier de conf. Unix. Reste à voir si les gens vont suivre. Si vous avez des recommendations ou des demandes à faire aux devs vous pouvez toujours allez faire un tour sur #dotshare at freenode.

Via dotshare

Streaming Twitter: NodeJS & Socket.IO

2011-05-15T20:48:38+02:00

Bonjour les enfants. Aujourd'hui on va s'amuser un peu avec Node.js et les Web Sockets. Pour ceux qui vivent encore dans une grotte, Node.js est un framework Javascript côté serveur basé sur V8 (Chrome). L'avantage est qu'il gère les entrées/sorties de manière asynchrone et supporte un modèle de programmation événementiel. En gros il est parfait pour les applications web temps réels (notifications, push serveur, streaming…).

En quelques lignes de codes on va être capable de faire cette petite démo. Tu as besoin d'avoir un navigateur à la pointe de la technologie pour que ça marche mon ami.

Installation

Pour commencer il nous faut Node.js bien sur. Alors là tu as plusieurs solutions. Tu peux déjà commencer par regarder si il est disponible sous forme de paquet dans ton OS ou distribution GNU/Linux. Sinon tu vas devoir le compiler, mais c'est pas très difficile: regarde.

Il est aussi important d'installer npm (Node Package Manager), il va nous simplifier la vie quand on voudra installer des extensions à Node.js.

curl http://npmjs.org/install.sh | sh

Socket.io

Socket.io est la première extension que l'on va installer pour ce tutorial. Le but de cette librairie est de faciliter le développement d'applications web temps réel dans tous les navigateurs. Parce que tu as certains navigateurs qui gèrent les sockets et d'autres non. Alors cette librairie va décider elle-même quel chemin prendre pour tes échanges parmi ceux-là :

Websocket
Ajax long polling
Multipart XHR
Forever iFrame (lol IE)
JSONP polling

npm install socket.io

Et puisque l'on va jouer avec l'API streaming de Twitter, tu peux aussi installer l'excellent twitter-node de la même manière.

Code serveur

var config      = {user: "pseudo", password: "password", action: "filter", track: ['bieber']},
sys         = require('sys'),
server      = require('http').createServer(function(req, res){
res.writeHead(200, {'Content-Type': 'text/html'});
res.end('
<h1>Twitter live stream</h1>
');
});

server.listen(8080);
console.log('Server running at http://127.0.0.1:8080/');

var socket      = require('socket.io').listen(server),
twitter     = new (require("twitter-node").TwitterNode)(config);

twitter
.addListener('error', function(error){
console.log(error.message);
})
.addListener('tweet', function(tweet){
socket.broadcast(JSON.stringify(tweet));
})
.addListener('limit', function(limit){
sys.puts('LIMIT: ' + sys.inspect(limit));
})
.addListener('delete', function(del){
sys.puts('DELETE: ' + sys.inspect(del));
})
.addListener('end', function(resp){
sys.puts('wave goodbye...' + resp.statusCode);
})
.stream();

Au début du code on instancie quelques variables, dont la variable config que l'on passera à notre objet twitter-node. Elle contient les accès Twitter, le fait que l'on veut utiliser l'API Twitter en mode filtre et le mot sur lequel on veut filter. On instancie aussi un serveur Node.js, dans mon cas sur le port 8080.

On attache un objet socket.io sur notre serveur et on instancie un objet twitter-node. On démarre le stream de Twitter en attachant des fonctions aux évènements que l'on peut recevoir.

L'évènement du nom de “ tweet ” est appelé à chaque fois que l'on reçoit un tweet. Les évènements limit et delete sont envoyés par l'API Twitter. Par exemple le cas du delete est important à prendre en compte si on construit un client Twitter sur l'API de streaming. Imaginons que quelqu'un poste un tweet et l'efface 2s après. Vous l'aurez déjà reçu et affiché. Mais 2s après vous allez recevoir un signal DELETE sur ce tweet et votre client pourra gérer sa disparition.

Quand on passe dans l'évènement Tweet, je demande à Socket.io d'envoyer en broadcast (à toutes les personnes connectées sur mon serveur) d'envoyer un objet JSON du tweet reçu.

Côté Client

<!DOCTYPE HTML>
<head>
<meta charset="utf-8">
<title>Twitter live stream : NodeJS + Socket.io</title>
</head>
<body>
<ul></ul>
<script>
(function(document, window, undefined) {
var script = document.createElement("script");
script.src = "http://code.jquery.com/jquery.min.js";
script.onload = function() {
$.getScript("http://127.0.0.1:8080/socket.io/socket.io.js", function() {
var socket = new io.Socket("127.0.0.1", {"port": 8080});
socket.on("message", function(json) {
data = JSON.parse(json);
$("<li></li>").text("@" + data.user.screen_name + " " + data.text).prependTo("ul")
});
socket.connect();
});
};
document.getElementsByTagName("head")[0].appendChild(script);
})(document, window);
</script>
</body>
</html>

Donc là je charge jQuery et une fois que c'est fait je vais chercher le script socket.io.js. Il est automatiquement fournit par le serveur node, donc tu as peut-être le port à changer. Une fois que c'est fait on peut créer un nouveau socket et attacher une fonction à l'évènement message. Cet évènement est appelé à chaque fois que le serveur nous envoi quelque chose. Dans notre cas un tweet, donc je l'affiche.

Lancement du serveur

node serveur.js

Tu n'as plus qu'a ouvrir la partie cliente dans ton navigateur et ça devrait marcher. Je trouve Node.js vraiment intéressant et je n'avais pas pris le temps de le creuser plus que ça. Mais le développement de ce programme est vraiment rapide et s'améliore de jour en jour. Il existe des wrappers node pour Mysql, mongodb et d'autres base de données. Et d'autres plugins aussi utiles que Twitter-node ou socket.io. Il y a même des frameworks de type MVC et cie. On en trouve une bonne liste sur cette page.

CloudFlare, retour d'expériences

2011-04-23T15:42:21+02:00

CloudFlare est un reverse proxy, un CDN et un firewall. Tout ça en même temps et c'est gratuit. J'en suis plutôt satisfait et j'aimerai vous en parler un peu plus dans ce billet.

Le rôle de CloudFlare est d'accélérer et de protéger votre site. J'ai été bluffé par la simplicité de l'installation, à la portée de n'importe qui. Concrètement il faut juste faire pointer son nom de domaine chez CloudFlare. Le reste est géré tout seul.

CloudFlare est un reverse-proxy : Tout le traffic passera donc d'abord par les serveurs de CloudFlare – qui pourront fournir aux visiteurs une page mise en cache et optimisée. Ce qui permet aux pages de s'ouvrir plus rapidement et de faire gagner de la bande-passante.

Mon serveur se trouve aux États-Unis, le temps de réponse est donc légèrement plus lent pour les européens. Puisque CloudFlare est aussi un CDN¹, je suis passé de 150ms de ping à 50ms.

Autre avantage : le pare-feu. Les spammers et autres bots sont bloqués avant même d'atterrir sur votre site. Akismet s'ennui pas mal maintenant. On peut aussi bloquer manuellement des adresses IP.

On a aussi accès à des statistiques sur les visites — pas aussi pointues que Google Analytics — qui donnent une vision globale en restant simple. Le plus intéressant est qu'il vous montre ce que CloudFlare vous a fait économiser :

Les différentes features en plus :

Gestion du niveau de sécurité
Gestion de l'agressivité du cache.
Auto-minification du javascript et CSS
Rocket Script (peut forcer tous les scripts JS de la page à se charger de manière asynchrones)
Personnalisation de la page de blocage (quand l'IP est mauvaise on présente un captcha)
Web Application Firewall qui bloque les injections SQL, XSS et autres cochonneries (pro feature)
Website Preloader (pro feature)
Obfuscation des adresses e-mails.
Always online (si ton serveur est mort, CloudFlare continura a servir les pages cachées)
Hotlink Protection

La liste n'est pas complète. En terme de prix il y a une offre gratuite très complète et une payante avec des petites fonctionnalités en plus.

Je suis agréablement surpris par ce service et je vous invite à le tester. C'est réellement simple à mettre en place et à enlever si ça ne vous plaît pas.

Content Delivery Network. Réseaux de diffusion de contenus en français. Définition. ↩

Wallpapers of the Week

2011-04-08T13:03:30+02:00

Ça faisait longtemps et c'est reparti pour un tour. Toujours le même principe : des photos / fonds d'écran que je trouve sympathique. D'ailleurs si vous en avez des sympas aussi, vous pouvez toujours les proposer en commentaires.

Dream Wallpaper Pack by *DreamerSeven

Subtle by ` -kol

Deep Blue by *IrvingGFM

Wrap Wallpaper by `yingjunjiu

SkyScraper Wallpaper by ~ReInspired

Pacman 3.5 : Nouveautés

2011-03-24T13:33:37+01:00

Pacman est le gestionnaire de paquet de la distribution Arch Linux. De toutes les distributions GNU/Linux que j'ai pu tester, il est de loin le plus rapide et le plus simple à utiliser. Et la branche 3.5 de ce programme pousse encore plus loin sa rapidité. Voyons en détails les nouveautés.

Vitesse

La plus importante est le changement du format de la base de données locale. Quand vous synchronisez pacman avec les dépôts distants, il va stocker en local tout un tas d'informations dans divers fichiers. L'astuce a été de réduire considérablement le nombre de ces fichiers, et même dans certains cas de lire les informations directement dans un tarball compressé sans avoir à l'extraire. Beaucoup moins d'accès disques, donc plus rapide, à hauteur de 30% d'après les développeurs.

Ce changement de format nécessite une manipulation de votre part. Après avoir mis à jour pacman, il faut lancer en root :

[cc]pacman-db-upgrade[/cc]

Sécurité

Ensuite on pouvait facilement exploser son système si on ne faisait pas attention à l'espace disque restant quand on installait des paquets. Maintenant pacman peut automatiquement regarder si il y a assez de place pour ce qu'il veut faire. Personnellement j'ai désactivé cette option, car je sais très bien que je vais pas essayer d'installer la suite KDE avec 300Mo. Pratique pour ceux qui ont l'esprit ailleurs j'imagine..

Pratique !

Pouvoir choisir les paquets à installer dans un groupe — au lieu d'être obligé d'installer tout le groupe — est revenu dans cette version.

Au final les développeurs d'Arch Linux ont encore fait du bon boulot en allégeant pas mal le moteur de pacman. Vous pouvez voir la liste complète des nouveautés dans le changelog, et aussi dans le readme.

Facebook Like, méthode de partage

2011-03-01T23:54:37+01:00

Facebook a rajouté tout récemment de nouvelles fonctionnalités à son bouton like. Ce bouton — un peu le cheval de Troie de Facebook sur le web — devient maintenant une alternative intéressante, et obligatoire, au Facebook Share. Il faut dire qu'avant le partage se limitait à une simple ligne sur le profil du likeur. Voyons ce qui change et comment l'intégrer sur Wordpress par exemple.

Désormais le simple fait de “ liker ” une page, pourra poster sur votre profil tout un tas d'informations. Le titre de la page, une description et pourquoi pas une image. En fait c'est exactement le même modèle de ce que faisait le vieux bouton bleu moche Facebook Share.

Le bouton like fonctionne avec le protocole Open Graph. Concrètement ce protocole permet à Facebook de s'insérer dans n'importe quel site web. Dans ce protocole, Facebook a définit certaines balises Meta qui vont contenir la carte d'identité de la page web. Le titre, l'URL, la description, la catégorie etc.

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:site_name" content="IMDb"/>
<meta property="fb:admins" content="USER_ID"/>
<meta property="og:description" content="A group of U.S. Marines, under command of a renegade general, take over Alcatraz and threaten San Francisco Bay with biological weapons."/>
...
</head>
...
</html>

Vous pouvez trouver une liste exhaustive de ces attributs sur la documentation de Facebook.

Ces éléments sont nécessaires pour profiter à 100% du widget Facebook. Le bouton en lui-même s'insère facilement.

<script src="http://connect.facebook.net/fr_FR/all.js#xfbml=1"></script>
<fb:like href="http://phollow.fr" show_faces="true" width="450"></fb:like>

L'attribut href, vous l'avez compris, pointe vers la page à partager. C'est sur cette même page que les balises Open Graph devront être. Maintenant prenant l'exemple d'un blog, sous Wordpress. Chacun de vos articles aura dans le header les balises Meta qui le décriront en gros, et un bouton like présent à la fin du billet pour le partager. Ce qui peut être sympa, c'est de récupérer une image de l'article en question pour l'afficher lors du partage.

Pour cela il faut modifier un peu le thème du blog. On ouvre functions.php, et on ajoute cette fonction :

function premiere_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('//i', $post->post_content, $matches);
$first_img = $matches [1] [0];

if(empty($first_img)){ //Si il n'y a pas d'image dans le billet
$first_img = "/images/default.jpg"; // On en met une par défaut
}
return $first_img;
}

Avec cette fonction, on va maintenant éditer le fichier header.php du thème pour modifier les balises meta.

<meta property="og:type" content="blog" />
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="og:country_name" content="French" />
<meta property="fb:admins" content="rydgel" />
<meta property="fb:app_id" content="101739241646"/>
<meta property="og:email" content="rydgel@phollow.fr" />
<?php if(is_single()) :?>
<meta property="og:url" content="<?php the_permalink() ?>"/>
<meta property="og:image" content="<?php echo premiere_image() ?>"/>
<?php endif; ?>

Et voilà ça devrait suffire !

Maintenant on peut se poser la question de la pertinence de la chose. On avait à la base l'action de partager et l'action d'aimer. Désormais le simple fait d'aimer un truc, nous le fait partager. Admettons. Mais si je veux partager sans aimer ?