CrEv's blog - Mot-clé - gitDe tout de rien, de l'info, de la cuisine, des motos2013-02-09T09:04:53+01:00urn:md5:89402921f17183133600b70e4b7a2730DotclearEcrire une page web de nos jours, suite des aventuresurn:md5:4ef8e9872957821cd4413c0741fdb8952012-12-06T12:26:00+01:002012-12-06T12:26:23+01:00CrEvDevelcoffeescriptdevgithtmlruby<p>Il faut croire que l'<a href="http://www.winsos.net/~yves/index.php?post/2012/12/03/Ecrire-une-page-web-de-nos-jours">épisode précédent</a> vous a intéressé (mon petit doigt me dit qu'il est même passé sur un <a href="http://linuxfr.org/board">incubateur d'excellence</a> aux dires des <a href="http://fr.wikipedia.org/wiki/Mytiloida">mytiloïdes</a> qui s'y trouvent). Voici donc la suite tant attendue.</p>
<blockquote>
<p> Comment ça une suite ?</p>
</blockquote>
<p>Ben vous croyez quoi ?! On fait de la page oueb monsieur ! C'est un sujet sérieux ! Pas question de s'arrêter avec juste un peu de <a href="http://haml.info/">Haml</a>, <a href="http://sass-lang.com/">Sass</a>, <a href="http://www.ruby-lang.org/fr/">Ruby</a>, <a href="http://rake.rubyforge.org/">Rake</a> et <a href="http://git-scm.com/">git</a>. Cela suffirait à des <a href="http://www.php.net">développeurs inexpérimentés</a>, pas pour des <a href="http://www.ruby-lang.org/fr">vrais bons comme nous</a> !</p> <h1>Introduction</h1>
<blockquote>
<p>Et il va nous sortir quoi de son chapeau ce bon monsieur ? Le problème il était de faire une page internet^W oueb statique hein !</p>
</blockquote>
<p>Que des choses indispensables pour briller en société ! En l'occurence l'utilisation de <a href="http://gembundler.com/">bundler</a> et <a href="https://github.com/guard/guard">guard</a> et, histoire d'aller un peu plus loin, un peu de <a href="http://coffeescript.org/">coffeescript</a> parce qu'on le mérite bien.</p>
<h1>Bendleure</h1>
<p>Comme vous avez pu le remarquer, la génération de votre page <a href="http://fr.wikipedia.org/wiki/Hypertext_Markup_Language">html</a> nécessitait l'utilisation de plusieurs <a href="http://rubygems.org/">gem</a> <a href="http://www.ruby-lang.org/fr/">ruby</a> en l'occurrence :</p>
<ul>
<li><a href="http://haml.info/">haml</a></li>
<li><a href="http://sass-lang.com/">sass</a></li>
</ul>
<p>Il était donc nécessaire de réaliser deux actions manuelles pour les installer. Mais les commandes c'est surfait, tout le monde le sait !</p>
<p>Heureusement <a href="http://gembundler.com/">bundler</a> est là pour nous ! Tout d'abord, étant donné que c'est également une <a href="http://rubygems.org/">gem</a>, il faut l'installer :</p>
<pre><code>gem install bundler
</code></pre>
<p>Ha oui, je vous vois venir !</p>
<blockquote>
<p>Oué mais l'autre il nous dit qu'on va supprimer l'installation manuelle des <a href="http://rubygems.org/">gem</a> et il ne trouve rien de mieux à faire que d'installer une nouvelle <a href="http://rubygems.org/">gem</a> !</p>
</blockquote>
<p>Et là de répondre :</p>
<blockquote>
<p>C'est pas faux</p>
</blockquote>
<p>D'ailleurs, vous allez même créer un nouveau fichier, <code>Gemfile</code> qui contiendra le code suivant :</p>
<pre><code>source 'https://rubygems.org'
gem 'haml'
gem 'sass'
</code></pre>
<p>Vous pouvez désormais installer ces deux <a href="http://rubygems.org/">gem</a> via la commande :</p>
<pre><code>bundle
</code></pre>
<p>C'est 'achement plus facile, non ?</p>
<p>Cette commande va vous installer les deux <a href="http://rubygems.org/">gem</a> si vous ne les aviez pas déjà et va créer un fichier <code>Gemfile.lock</code> qui contient les installations réalisées et leur version. Si un tel fichier n'existe pas, <a href="http://gembundler.com/">bundler</a> va essayer de récupérer la dernière version des <a href="http://rubygems.org/">gem</a>. Si un fichier lock existe déjà, il va essayer d'installer la version spécifiée dans le fichier. L'avantage est que si vous partagez ce fichier entre vos différents environnements (par exemple en le versionnant dans votre <a href="http://git-scm.com/">git</a>) il vous assure d'avoir les mêmes dépendances partout. Et ça <a href="http://en.wikipedia.org/wiki/Dependency_hell">c'est bien</a> !</p>
<p>Développer votre page statique est donc d'autant plus aisée qu'il vous suffit de faire un clone de votre <a href="http://git-scm.com/">git</a> et d'exécuter <a href="http://gembundler.com/">bundler</a> (de toute façon, qui n'a pas <a href="http://gembundler.com/">bundler</a> sur sa machine aujourd'hui ?).</p>
<h1>Moins j'en fait, mieux je me porte !</h1>
<p>Etant donné que vous êtes une vrai <a href="http://fr.wikipedia.org/wiki/D%C3%A9veloppeur">feignasse</a>, vous n'avez surtout pas envie de devoir relancer <a href="http://rake.rubyforge.org/">rake</a> à chaque modification réalisée (car le temps gagné pourra être passé à mouler^W faire sa <a href="https://linuxfr.org/tags/veille_technologique/public">veille technologique</a>).</p>
<p>La première chose est donc d'ajouter <a href="https://github.com/guard/guard">guard</a> a votre <code>Gemfile</code> (vous voyez que finalement ça sert à quelque chose <a href="http://gembundler.com/">bundler</a>) et l'installer via <code>bundle</code>.</p>
<pre><code>gem 'guard'
</code></pre>
<p>La deuxième chose est d'initialiser <a href="https://github.com/guard/guard">guard</a>. Une bonne pratique est de toujours utiliser <a href="http://gembundler.com/">bundler</a> pour exécuter <a href="https://github.com/guard/guard">guard</a>. Vous n'allez donc pas exécuter <code>guard init</code> mais</p>
<pre><code>bundle exec guard init
</code></pre>
<p>Ceci va vous créer un fichier <code>Guardfile</code> qui va bien (mais qui ne fait rien).</p>
<p>Je vous conseil d'aller voir la documentation de <a href="https://github.com/guard/guard">guard</a> car un certain nombre d'usages classiques sont déjà supportés et leur mise en oeuvre est vraiment simple.
Dans notre cas, on utilise <a href="http://rake.rubyforge.org/">rake</a> pour construire notre page statique. Tout naturellement nous allons donc nous tourner vers le plugin <a href="https://github.com/guard/guard-rake">guard-rake</a>.</p>
<p>Dans le <code>Gemfile</code> rajouter</p>
<pre><code>gem 'guard-rake'
</code></pre>
<p>et exécuter <code>bundle</code>.</p>
<p>Ensuite, initialiser le <code>Guardfile</code> avec <a href="https://github.com/guard/guard-rake">guard-rake</a> :</p>
<pre><code>bundle exec guard init rake
</code></pre>
<p>Vous devez donc avoir un fichier <code>Guardfile</code> qui contient</p>
<pre><code>guard 'rake', :task => 'build' do
watch(%r{^my_file.rb})
end
</code></pre>
<p>J'espère que vous avez déjà compris ce que ça voulait dire : lorsque le/les fichiers surveillés par <code>watch</code> seront modifiés, <a href="http://rake.rubyforge.org/">rake</a> sera executé avec la cible <code>build</code>. Parfais, c'est exactement ce qu'on cherche à faire !</p>
<p>Il ne reste donc plus qu'à modifier un peu le <code>watch</code> pour que ça corresponde à notre cas :</p>
<pre><code>guard 'rake', :task => 'build' do
watch %r{^index.haml$}
watch %r{^css/(.+)\.sass$}
end
</code></pre>
<p>De cette manière, dès que <code>index.haml</code> ou l'un des fichiers <a href="http://sass-lang.com/">sass</a> va être modifié, <a href="http://rake.rubyforge.org/">rake</a> va être exécuté.</p>
<p>Faisons un petit test. Tout d'abord il convient de lancer <a href="https://github.com/guard/guard">guard</a> :</p>
<pre><code>bundle exec guard
</code></pre>
<p>Et voilà !
A chaque fois que vous modifierez un des fichiers surveillés, la sortie sera regénérée ! Le gain en terme de confort est loin d'être négligeable, c'est vraiment un plus pour développer correctement une page oueb statique !</p>
<h1>L'inter a ctivité</h1>
<p>Comme on est pas des <a href="http://concours.livre-css3.fr/jeu.php?mode=voter#realisations">mickeys</a> on va faire les choses en grand : on va rajouter un peu d'interactivité et de fun dans cette page tristounette !</p>
<p>Pour ce faire, on va rajouter un peu de code côté client. Mais bon, tout le monde le sait, le javascript c'est has been. On va donc le faire en <a href="http://coffeescript.org/">coffeescript</a> !</p>
<p>Tout d'abord, créer un répertoire <code>js</code> (oui, js, pas coffee) et dedans un fichier <code>mickey.coffee</code>.</p>
<p>Dans ce fichier, écrire le contenu suivant :</p>
<pre><code>init = ->
img = document.createElement 'img'
img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAUCAYAAADskT9PAAAG2UlEQVQYGXXBa2yddR3A8e/v/1zOc87pOT1tt65rx1gdEGhGGZMNZMCWrWgGqDhDAl6ShQGKIWqEvjDxRWN4ob7DqAmJCWB4wdjUsMI2YXI1yMgubKO7dKW7tWdd6drT9tyf5/n/LG0iavDzEb5AXx+mrw8LXLv62o5DnvEy1j9nxWBUAQEUUECYJwoICwTUYk39ahPZuHbkzMitwFFVRATlPwj/37W9D2148akH71zn+6pRsUUED0RBAREQDzQEBWsM2AiDAAaVCCc9oXEk8szO9489/ae/PwSceACcncyLmSP8NweIgcZVnW0H33zm0WsWL00pM63C8QehlAInAjWgMdSr4CdBgNiC74ONIHYgUYab/gxNeVsYr5otvc+PfDBwfh1wiQUGUMMXM454Gc9VmG2z9QNbiUZ8whKEMy5h2RBOhNT37CcuQDTrcnbXS5wbHMZWXKKyEE6lCT/cCoUOdV3FFS8N1IAVQDdgATUsMIDDv61QDS7Wo0oOPn4QmcogB3djapOYAIxYTNrHbNyMk3Q5W/qE79rf8MhHD3N28iyuD6JV7GwaPtoqYXExGgzVgdVrVne/3d3d/X57e/vNzHEBASwLHOblEIMx6kE5ABe4ZRMkMhAzx6COwc1kKRYr/PrIr9iw9X6S4vGLg7+kd3I7a8qC27UebNokTIJandY1a+967Vtf35ywijz/3HOvAWsNoEAj0AxY5o27zFFRcGIwQDYHjgPKHIVqFSKINaakRTwj5Bqa6Fzbzm8nn+VkY5JzhREujA8zlL/E8hW3y3333B1kMhkrIrielwFcF0i2trbucV23M8hmNw6fOjUIXy5DXoU5KqBAZMEY5tXq6JG34ZYefC+JFzlENqYe1WlJNuOv83l4fy+1UgEbx+Sac/T0bCEIAlurh1hrKZfLNaDsJpPJ17dt23Z7EAS88MILrwMPQH/BxiSU/1EuQSIFro90r0d9lyuFMUzGxXVcrCqz09M0NDRw7z0bUVVAQA2OY5ienjbZxkbrOA4dHR3+6OjocjeKoqzneWSz2XpHR8fV2Ojt2VoyQoYycWxBrYNjwEbosfeRm9ajyRRuJkNhcpzed37C8i0ryHoNGEfo7u5m8PQgjnHxfI/PiAAirFy5ksHBQeM5TvyNe+/LlIrFP5owDDft3bv30MzMjN/T06OPPvbD1A8e+U62sfEqUWuZV4vAOMjqO8ELmFeqYN98hcsjBzCJgLKNIQi4oauLgRMDzBRnQKBaq3JpbIxEIkFXVxcfDwwwVakoqYDI2pwBrhw+fPj7O3bsyPf390scxySTSVRD1LgQVtB39kClBKkAjGFeMom56x6ybd1orcoyL0FiqsBPn3iC0XyeVDLFZ+r1OkePHmV8fJynenvJnztPZyolzbWQhEjFZcHJ06dP3w40GuHZ6aKuSvtjgQEXk0Ru2wipDMSAKlouQaoBGpoYCifZ4Bq2RUpNHGobNjBSrZJKJrGqxHHM5s2bcY3hmq4urstkeRRHLbDPOBnDAgOcB44dOnxk09DgR9drzGVjLARxLNksRDUQIK7BgX1QKeI6hp4lt1IoFZlxlKLjII7LG2+9RX50lHw+z+7d/UxMTHDp0iVe6u+nHkUUfU8uT08Tx/FJhwUKOIAH1ICOpbnl27d/87p00D5BdKFd2PseungpGqShpZPYTZNwXe5YtJE33tvPvuZZRpqaqGOZyOc5deokl8fGcBzDxYsjDJ89q0uy2WjF9dfzbnHWeXLHS0c/HDrzbeFzAuiyJv/GKNOxP10vtL7xzPa4s7PFYWopHL4TtA0SxoID1gIWjM/ElUF+PvCUydywipSXIgzrWGsVETEiGFEcY/B9n2q1you7dh27eObMFiAvLBBAgcXr1q3729e+evfNu17dF3U3he4fnryfILCEtWZcwQrWCApiUBRVwfd8Rq+M8PSLbzFeqJDJpC0YA2rr9dBcmIriqWLlgqCVKIrOzw4PP/wpjPX19RkBDGCBhlwu9+bjjz++trW1VT/9dEJ27NxZXZas+i2L2o2VaarVAmq1ZIxYi4pBVNWixBKY1lQkvlFVKsUC1sYVG0fJ5iXLWdn9FXb99ZXTF86f2wiMsUAAdfmcsdYuU1UmJyflwAf/PPHJmcG+T9xFv3/ssVsWe26C517ec7w8dvJ7wBTgsyAE0uC8+sSPH/qSMYa/vLr3w5Ghkz+jsfV3P9p02+og3YAR2gDLAg8ImSOAASyQBQ61tbVd4zjO9Ojo6I3AzJKW3LmWxa05I1JpTjvr3z144ghfYOmipoFs86IukBnfRHccPzV8fNWqlVeFNfOPYrm0fHQ0fxlYA+QBB4iZ8y9jpxK3XmSVNQAAAABJRU5ErkJggg=="
img.style.position = 'absolute'
img.style.top = '-1000px'
img.style.left = '-1000px'
document.body.appendChild img
window.onmousemove = (e) ->
img.style.left = "#{e.clientX + 10}px"
img.style.top = "#{e.clientY + 10}px"
init()
</code></pre>
<p>Bon, c'est bien joli mais comment on l'intègre ?</p>
<p>Déjà, on va rajouter la <a href="http://rubygems.org/">gem</a> qui va bien à bundler :</p>
<pre><code>gem 'coffee-script'
</code></pre>
<p>Puis l'installer :</p>
<pre><code>bundle
</code></pre>
<p>Ensuite, il faut compiler le tout en javascript. Dans le fichier <code>Rakefile</code> ajouter en tête</p>
<pre><code>require 'coffee-script'
</code></pre>
<p>Et ajouter à la tâche <code>:build</code> :</p>
<pre><code>js = CoffeeScript.compile File.read("js/mickey.coffee")
File.open("_site/mickey.js", "w") { |f| f.write(js) }
</code></pre>
<p>Enfin, appeler le script dans la page web. Pour ce faire, ajouter une balise script pointant vers <code>mickey.js</code> à la fin du fichier :</p>
<pre><code>%script(src="http://www.winsos.net/~yves/index.php?post/2012/12/06/mickey.js")
</code></pre>
<p>Il reste une dernière petite chose à faire, l'ajouter au <code>Guardfile</code></p>
<pre><code>watch %r{^js/mickey\.coffee$}
</code></pre>
<p>Désormais c'est fait ! Vous avez donc une super animation de haute voltige sur votre page web statique !</p>
<h1>Conclusion</h1>
<blockquote>
<p>It's time to kick ass and chew bubble gum, and I'm all outta gum !</p>
</blockquote>
<p>Et voilà, tout roule. Vous avez <strong>enfin</strong> une page web statique de <a href="http://fr.wikipedia.org/wiki/Bullshit">très haut niveau</a>. A ce stade vous pouvez travailler <a href="http://fr.wikipedia.org/wiki/Ssii">parmis les meilleurs</a> et vous avez désormais une justification pour <a href="http://www.lemonde.fr/technologies/article/2010/08/18/france-fr-un-site-de-4-millions-d-euros_1399998_651865.html">le prix de vos oeuvres d'art</a>.</p>
<p>Et sinon, ben vous aurez juste eu l'occasion de découvrir certaines technologies plutôt cool au travers d'une réalisation totalement inutile ;)</p>
<p>Les sources utilisées sont disponibles sur <a href="https://github.com/CrEv/web_page_today">un dépôt github</a> et le résultat tant attendu est <a href="http://www.winsos.net/web_page_today/">visible</a></p>Ecrire une page web de nos joursurn:md5:3bf39ebb4f81113d1bc46415cc8c8fcb2012-12-04T07:56:00+01:002012-12-04T08:59:37+01:00CrEvDeveldevgithtmlrubysass<p>Edit: allez voir en fin d'article, il y a du bonus !</p>
<p>J'aurais aussi pu l'appeler <em>Le html c'est surfait !</em></p>
<p>Ces derniers jours, je me suis mis à la création d'une page web. En gros, il s'agit d'une simple page, totalement statique (pas de code serveur ni de code côté client). Allez, on va quand même mettre un peu de <a href="http://fr.wikipedia.org/wiki/CSS">css</a> histoire d'avoir un peu de style, et pour que ça reste relativement sobre, pas d'images.</p>
<p>Logiquement j'aurais pu prendre <a href="http://www.sublimetext.com/">un éditeur de texte tout simple</a> et écrire mon <a href="http://fr.wikipedia.org/wiki/CSS">css</a> et mon <a href="http://fr.wikipedia.org/wiki/Hypertext_Markup_Language">html</a> (la page est vraiment petite).</p>
<p>Mais non, malheureux ! Tout le monde sait bien que l'<a href="http://fr.wikipedia.org/wiki/Hypertext_Markup_Language">html</a> c'est surfait aujourd'hui !</p>
<p>Voici donc dans la suite comment créer une petite page web tout simple en utilisant <a href="http://haml.info/">Haml</a>, <a href="http://sass-lang.com/">Sass</a>, <a href="http://ethanschoonover.com/solarized">solarized</a>, <a href="http://fortawesome.github.com/Font-Awesome/">Font Awesome</a>, <a href="http://www.ruby-lang.org/fr/">ruby</a>, <a href="http://rake.rubyforge.org/">rake</a> et <a href="http://git-scm.com/">git</a>, le tout en utilisant <a href="http://www.sublimetext.com/">Sublime Text 2</a>.</p>
<p>Ha oui, et histoire que ce soit drôle, vous verrez que j'ai collé pleins de liens partout pour faire genre, spéciale dédicace à... heu non, allez, restons sympa ;-)</p> <h1>Contexte</h1>
<p>Déjà, précisons le contexte :</p>
<ul>
<li>une page web tout simple, comportant en gros un peu de bla bla et une liste d'items</li>
<li>lisible</li>
<li>pas trop moche si possible</li>
<li>très facile à mettre à jour (ce qui arrivera de temps en temps)</li>
</ul>
<p>Ok, une page html avec un peu de css posée sur un serveur fait le boulot. Mais c'était trop simple, allons bon !</p>
<h1>Le <a href="http://fr.wikipedia.org/wiki/Hypertext_Markup_Language">html</a> c'est surfait !</h1>
<p>Déjà, le <a href="http://fr.wikipedia.org/wiki/Hypertext_Markup_Language">html</a> c'est vraiment surfait. Faut réellement être un développeur de la vieille école pour écrire du PHP^W <a href="http://fr.wikipedia.org/wiki/Hypertext_Markup_Language">html</a> à la main. Franchement, qui voudrait en écrire encore aujourd'hui ?</p>
<p>La solution (enfin l'une) se trouve donc dans <a href="http://haml.info/">haml</a>. <a href="http://haml.info/">haml</a> est un langage de balisage léger pour écrire des templates. C'est plutôt orienté <a href="http://www.ruby-lang.org/fr/">ruby</a> et ça se lit très facilement.</p>
<p>L'indentation est utilisée pour gérer l'enchainement des blocs plutôt que les balises ouvrantes/fermantes (comme en <a href="http://www.python.org/">python</a> ou <a href="http://coffeescript.org/">coffeescript</a> par exemple).</p>
<p>Si on prend l'exemple sur <a href="http://fr.wikipedia.org/wiki/Haml">wikipedia</a> voici ce que ça permet.</p>
<p>Version <a href="http://fr.wikipedia.org/wiki/Hypertext_Markup_Language">html</a> :</p>
<pre><code><div id="sidebar">
<ul class="main">
<li class="active">
<a href="http://www.winsos.net/~yves/index.php?post/2012/12/03/accueil.html">
Accueil
</a>
</li>
<li>
<a href="http://www.winsos.net/~yves/index.php?post/2012/12/03/nouvelles.html">
Nouvelles
</a>
</li>
<li class="disabled">
<a>Membres</a>
</li>
</ul>
</div>
</code></pre>
<p>Version <a href="http://haml.info/">haml</a> :</p>
<pre><code>#sidebar
%ul.main
%li.active
%a{"href" => "accueil.html"}
Accueil
%li
%a{"href" => "nouvelles.html"}
Nouvelles
%li.disabled
%a Membres
</code></pre>
<p>Tout de suite, le gain est énorme ! Plus de syntaxe <a href="http://fr.wikipedia.org/wiki/Xml">xml</a>, plus lisible, indentation forcée, etc.</p>
<h1><a href="http://www.ruby-lang.org/fr/">Ruby</a> et <a href="http://rake.rubyforge.org/">rake</a>, pour faire faussement compliqué</h1>
<p>Le problème de tout ça c'est qu'il faut maintenant transformer ceci en ... <a href="http://fr.wikipedia.org/wiki/Hypertext_Markup_Language">html</a> ! Ben oui, votre <a href="http://www.google.com/intl/fr/chrome/browser/">navigateur</a> il ne comprend pas le <a href="http://haml.info/">haml</a>.</p>
<p>Heureusement, <a href="http://www.ruby-lang.org/fr/">Ruby</a> vole à notre secours !</p>
<p>Tout d'abord, il est nécessaire d'installer la <a href="http://rubygems.org/">gem</a> <a href="http://haml.info/">haml</a> :</p>
<pre><code>gem install haml
</code></pre>
<p>Vous pouvez donc ensuite compiler votre fichier <a href="http://haml.info/">haml</a> (index.haml) en fichier <a href="http://fr.wikipedia.org/wiki/Hypertext_Markup_Language">html</a> (index.html) :</p>
<pre><code>require 'haml'
haml = IO.read("index.haml")
hamlengine = Haml::Engine.new(haml)
html = hamlengine.render()
File.open("index.html", "w") { |f| f.write(html) }
</code></pre>
<p>Si vous appellez ce fichier <code>compile.rb</code> il vous suffit d'exécuter la commande <code>ruby compile.rb</code> pour générer votre fichier <a href="http://fr.wikipedia.org/wiki/Hypertext_Markup_Language">html</a>.</p>
<p>Facile, non !</p>
<p>Par contre, arrêtons de voir les choses en petit ! Un tel script n'est pas suffisant, il faut se dépasser un peu quand même !</p>
<p>Ce script va donc être placé dans un fichier <a href="http://rake.rubyforge.org/files/doc/rakefile_rdoc.html">Rakefile</a>. Voici donc le contenu de ce fichier :</p>
<pre><code>require 'haml'
task :default => :build
desc 'Build site'
task :build do
haml = IO.read("index.haml")
hamlengine = Haml::Engine.new(haml)
html = hamlengine.render()
File.open("_site/index.html", "w") { |f| f.write(html) }
end
</code></pre>
<p>Vous saisissez la différence ? Non ? Ben pourtant elle est évidente, il suffit désormais d'exécuter la commande <code>rake</code> au lieu de <code>ruby compile.rb</code> !</p>
<h1>Et si on coloriait un peu ?</h1>
<p>Maintenant que la partie <a href="http://fr.wikipedia.org/wiki/Hypertext_Markup_Language">html</a> est réalisée, passons un peu à la mise en style.</p>
<p>Précédemment, on utilisait essentiellement du <a href="http://fr.wikipedia.org/wiki/CSS">css</a>. Tout comme le <a href="http://fr.wikipedia.org/wiki/Hypertext_Markup_Language">html</a> qui est désormais surfait, le <a href="http://fr.wikipedia.org/wiki/CSS">css</a> est également aujourd'hui une <a href="http://www.php.net">technologie quasi obsolète</a>.</p>
<p>Heureusement pour nous, des petits gars bien malins nous ont concoqueté <a href="http://sass-lang.com/">Sass</a>. Si vous avez compris ce qu'était <a href="http://haml.info/">haml</a> par rapport à <a href="http://fr.wikipedia.org/wiki/Hypertext_Markup_Language">html</a>, dites simplement qu'il en est de même à propos de <a href="http://sass-lang.com/">Sass</a> par rapport à <a href="http://fr.wikipedia.org/wiki/CSS">css</a>.</p>
<p><a href="http://sass-lang.com/">Sass</a> est donc un pré-processeur <a href="http://fr.wikipedia.org/wiki/CSS">css</a> vous permettant de l'écrire plus mieux, en <a href="http://www.ruby-lang.org/fr/">enlargeant votre productivité</a>. Il y a plein de possibilités bien sympa, comme les <a href="http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixins">mixins</a>, les <a href="http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#nested_rules">nested rules</a> et plein d'autres choses.</p>
<p>Lorsque vous écriviez précedemment, en <a href="http://fr.wikipedia.org/wiki/CSS">css</a> :</p>
<pre><code>ul {
color: red;
}
ul li {
margin-left: 1em;
}
ul li.green {
color: green;
}
ul li a {
text-decoration: underline;
}
ul li a:hover {
font-weight: bold;
}
</code></pre>
<p>Vous pouvez désormais écrire en <a href="http://sass-lang.com/">Sass</a> :</p>
<pre><code>ul
color: red
li
margin-left: 1em
&.green
color: green
a
text-decoration: underline
&:hover
font-weight: bold
</code></pre>
<p>Impressionnant, non !</p>
<p>Evidemment, pour pouvoir tout de même générer le <a href="http://fr.wikipedia.org/wiki/CSS">css</a> correspondant (car, pour rappel, ton <a href="http://www.google.com/intl/fr/chrome/browser/">navigateur</a> il ne comprend pas <a href="http://sass-lang.com/">Sass</a>) on va encore utiliser <a href="http://www.ruby-lang.org/fr/">Ruby</a> et la <a href="http://rubygems.org">gem</a> dédiée :</p>
<pre><code>gem install sass
</code></pre>
<p>Voici donc un petit script pour transformer notre <a href="http://sass-lang.com/">Sass</a> (<code>css/style.sass</code>) en <a href="http://fr.wikipedia.org/wiki/CSS">css</a> (<code>style.css</code>) :</p>
<pre><code>require 'sass'
sassengine = Sass::Engine.for_file("css/style.sass", :syntax => :sass, :style => :compressed)
css = sassengine.render()
File.open("style.css", "w") { |f| f.write(css) }
</code></pre>
<p>Mais comme on est des gens bien, on va surtout le rajouter au <a href="http://rake.rubyforge.org/files/doc/rakefile_rdoc.html">Rakefile</a> précédemment créé afin qu'il ressemble à :</p>
<pre><code>require 'sass'
require 'haml'
task :default => :build
desc 'Build site'
task :build do
sassengine = Sass::Engine.for_file("css/style.sass", :syntax => :sass, :style => :compressed)
css = sassengine.render()
File.open("style.css", "w") { |f| f.write(css) }
haml = IO.read("index.haml")
hamlengine = Haml::Engine.new(haml)
html = hamlengine.render()
File.open("_site/index.html", "w") { |f| f.write(html) }
end
</code></pre>
<p>Et voilà ! Un simple appel à <code>rake</code> nous permet donc d'obtenir notre <a href="http://fr.wikipedia.org/wiki/Hypertext_Markup_Language">html</a> et notre <a href="http://fr.wikipedia.org/wiki/CSS">css</a> !</p>
<h1>On devait pas parler de couleurs ?</h1>
<p>Ha si !</p>
<p>Puisqu'on y est, on ne vas pas utiliser la feuille de style standard, say trop pour les loosers !</p>
<p>Tout d'abord, histoire que tous le monde ait la même trogne, on va commencer par utiliser la feuille de <em>reset</em> <a href="http://necolas.github.com/normalize.css/">normalize.css</a>. C'est une bonne alternative à beaucoup de feuilles de <em>reset</em> qu'on trouve habituellement, et elle fait bien son boulot.</p>
<p>Ensuite, ben c'est simple, on va surtout utiliser les couleurs provenant de <a href="http://ethanschoonover.com/solarized">solarized</a>. Il s'agit d'un ensemble de couleurs plutôt bien homogènes, cohérentes entre elles et agréables à l'oeil. Parfait quoi !</p>
<p>Histoire de mettre aussi un peu de fun dans l'histoire, ajoutons quelques icones. Mais comme on fait les choses biens, point d'image ! C'est trop surfait les images aussi ! Donc direction <a href="http://fortawesome.github.com/Font-Awesome/">Font Awesome</a>. Il s'agit d'une police de caractère orientée icones. L'avantage est que c'est plutôt léger, vectoriel, coloriable facilement, propre, bien intégré à <a href="http://twitter.github.com/bootstrap/">Twitter bootstrap</a> mais également utilisable sans. C'est propre, c'est net, c'est facile, que demander d'autre ?</p>
<p>Voici d'ailleurs le code <a href="http://sass-lang.com/">Sass</a> que j'ai utilisé pour ajouter mes quelques icones dans ma page :</p>
<pre><code>$fontAwesomePath: "font/fontawesome-webfont" !default
@font-face
font-family: "FontAwesome"
src: url("#{$fontAwesomePath}.eot")
src: url("#{$fontAwesomePath}.eot") format('eot'), url("#{$fontAwesomePath}.woff") format('woff'), url("#{$fontAwesomePath}.ttf") format('truetype'), url("#{$fontAwesomePath}.svg#FontAwesomeRegular") format('svg')
font-weight: normal
font-style: normal
[class^="icon-"]:before,
[class*=" icon-"]:before
font-family: FontAwesome
font-weight: normal
font-style: normal
display: inline-block
text-decoration: inherit
.icon-check-empty:before
content: "\f096"
.icon-check:before
content: "\f046"
.icon-envelope-alt:before
content: "\f0e0"
.icon-phone:before
content: "\f095"
.icon-comments-alt:before
content: "\f0e6"
.icon-comments:before
content: "\f086"
</code></pre>
<h1>On pousse le style un poil plus loin ?</h1>
<p>Histoire d'aller un tout petit peut plus loin, j'ai utilisé deux autres web font pour améliorer un peu la typographie. C'est pas grand chose mais ça fait tout de suite la différence. C'est propre, léger, et agréable visuellement alors pourquoi s'en priver ?</p>
<p>J'ai donc utilisé <a href="http://www.google.com/webfonts/specimen/Numans">Numans</a> comme police de base et <a href="http://www.google.com/webfonts/specimen/Josefin+Sans">Josefin Sans</a> pour les titres. C'est pas grand chose mais le gain est réellement intéressant.</p>
<p>Voici le <a href="http://sass-lang.com/">Sass</a> correspondant :</p>
<pre><code>@import url("//fonts.googleapis.com/css?family=Josefin+Sans:700")
@import url("//fonts.googleapis.com/css?family=Numans")
html, body
font-family: "Numans", arial, helvetica, sans-serif
h1, h2, h3, h4, h5, h6
font-family: "Josefin Sans", arial, helvetica, sans-serif
</code></pre>
<h1>Modification et mise en ligne</h1>
<p>Ha oui, l'objectif initial était également de pouvoir être facilement modifié et mis en ligne.</p>
<p>Pour la publication c'est facile. J'ai simplement mis une règle <code>deploy</code> dans mon <a href="http://rake.rubyforge.org/files/doc/rakefile_rdoc.html">Rakefile</a> qui effectue un <a href="http://rsync.samba.org/">rsync</a> vers mon serveur web. Comme c'est du statique je n'ai rien d'autre à faire, rien a redémarré. La modification est donc instantanément en ligne.</p>
<p>Mon <a href="http://rake.rubyforge.org/files/doc/rakefile_rdoc.html">Rakefile</a> a donc la tête suivante. Il faut tout de même prendre en compte que, pour simplifier les choses, je génère mon contenu dans un répertoire <code>_site</code> qui me permet de le pousser sans me soucier des fichiers sources.</p>
<pre><code>require 'sass'
require 'haml'
task :default => :build
desc 'Build site'
task :build do
sh 'mkdir _site'
sh 'rm -rf _site/*'
sassengine = Sass::Engine.for_file("css/application.sass", :syntax => :sass, :style => :compressed)
css = sassengine.render()
File.open("_site/application.css", "w") { |f| f.write(css) }
haml = IO.read("index.haml")
hamlengine = Haml::Engine.new(haml)
html = hamlengine.render()
File.open("_site/index.html", "w") { |f| f.write(html) }
sh 'cp -R font _site'
end
desc 'Build and deploy'
task :deploy => :build do
sh 'rsync --checksum -rtzh --progress --delete _site/ www:/var/www/plop'
end
</code></pre>
<p>Et voilà ! <code>rake</code> me compile mon projet, je peux aller le voir directement dans <code>_site</code> ou utiliser <a href="https://github.com/jlong/serve">serve</a>. <code>rake deploy</code> quant à lui me génère le contenu et le pousse sur mon serveur web.</p>
<h1>Il ne manquerait pas un truc ?</h1>
<p>Et si, il manque une dernière brique : <a href="http://git-scm.com/">git</a>. En effet, tout le contenu source (donc <code>_site</code> omis) est versionné en utilisant <a href="http://git-scm.com/">git</a>. Je n'utilise pas de serveur type <a href="https://github.com/">github</a> ou autre, j'ai juste créé un dépôt sur mon propre serveur de fichier. Je pousse alors via ssh, c'est très largement suffisant et je n'ai pas besoin de plus de droits, je suis le seul à bosser dessus. L'avantage est qu'un dépôt <a href="http://git-scm.com/">git</a> se monte en un rien de temps et qu'une connexion classique suffit à le récupérer. Je peux alors rappatrier les sources sur une autre machine qui contient <a href="http://www.ruby-lang.org/fr/">Ruby</a> et les <a href="http://rubygems.org">gem</a> nécessaire et je peux alors le modifier, générer et pousser vers mon serveur !</p>
<h1>Et voilà !</h1>
<p>Et voui, et voilà !</p>
<p>Ok, certains diront que c'est utiliser un bulldozer pour écraser une mouche, et ils n'auront probablement pas tord. Quoi qu'il en soit, cela apporte une réelle plus value en terme de confort. Et surtout c'est une base réutilisable de nombreuses fois, extensible (il suffit par exemple de rajouter une entrée pour compiler du coffeescript et ajouter un peu de dynamisme dans les pages, etc).</p>
<h1>Apparté</h1>
<p>'tain mais je sais pas comment il fait, c'est mega super lourd de placer autant de liens dans un post !</p>
<h1>Apparté n°2</h1>
<p>Oui, l'écriture de ce billet est probablement plus longue que l'écriture de la dite page oueb en html+css !</p>
<h1>Bonus</h1>
<p>Vous trouverez les sources de l'exemple sur un dépôt github : <a href="https://github.com/CrEv/web_page_today">web_page_today</a> et <a href="http://www.winsos.net/web_page_today/">l'exemple généré</a>.</p>De tout, de rien, des bookmarks, du bla blaurn:md5:2ffbb28e2cc75eeed02b3f3792dbf49b2012-07-31T12:48:00+02:002012-07-31T11:48:35+02:00CrEvLienscoffeescriptcssgithtml5javascriptsecurite <h2>Introduction</h2>
<p>Un numéro de zappé, mais c'était pour la bonne cause : ma css linuxfr-solarized. Finalement ça prend plus de temps que prévu, donc moins de liens collectés. Et faut dire aussi que j'ai l'impression que pas mal de monde a commencé les vacances, donc beaucoup moins d'activité. Donc toute petite revue cette fois-ci, mais revue quand même.</p>
<h2>Un peu de contenu</h2>
<h3>Développement</h3>
<p>On commence directement avec du développement web. L'une des questions qui revient toujours est de savoir quelles sont les fonctionnalités supportées et disponibles pour un navigateur. Ce site, <a href="http://haz.io" title="haz.io">haz.io</a>, ne vous renseignera pas sur le support pour l'ensemble des navigateurs, mais mettra en évidence ce que <em>votre</em> navigateur supporte. Et pour quasiment chaque fonctionnalité un lien vers les specs (ou draft) du W3C est réalisé, est ça c'est bien.</p>
<p>Toujours côté web, la fonction css <code>calc()</code> est désormais non préfixée. Enfin presque, c'est pour firefox 16. C'est une très bonne chose, c'est réellement une fonctionnalité intéressante pour le design web. Voici le <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=771678" title="bug mozilla calc()">bug</a> chez mozilla. Cette fonctionnaltié existe aussi dans <a href="http://msdn.microsoft.com/en-us/library/ms537660(v=vs.85).aspx#calc" title="calc dans IE9">IE9</a>, ce qui permet de l'utiliser (en rajoutant les bons préfixes) sur tout navigateur récent, IE >= 9, firefox et webkit.</p>
<p>Pour continuer les précédents numéro, un peu de coffeescript : j'ai découvert qu'on pouvait <a href="http://coffeescript.org/#comparisons" title="Chaîner les comparaisons en coffeescript">chainer les comparaisons</a> :</p>
<p>Au lieu d'écrire ça</p>
<p><code>js
value < 100 && value > 50</code></p>
<p>on écrit simplement</p>
<p><code>js
100 > value > 50</code></p>
<p>Mais pourquoi les autres langages n'ont pas ça ?</p>
<p>Une <a href="http://sametmax.com/une-astuce-pour-ne-plus-avoir-peur-des-merges-avec-git/" title="Petite astuce pour git">petite astuce</a> toute simple pour ceux qui débutent avec git et qui ont peur des merges. En gros c'est l'utilisation des branches comme bookmark (pour une fois que je peux employer un terme <code>hg</code> en parlant de <code>git</code> ;-) ) pour pouvoir avoir un point de restauration si on se plante.</p>
<p>Je remonte également un lien trouvé dans un <a href="http://linuxfr.org/users/palm123/journaux/livre-numerique-des-editions-eni#comment-1372816">commentaire de nono</a> sur les EBook : une <a href="http://www.mathjax.org/" title="lib javascript pour afficher des maths">lib javascript pour afficher des maths</a> dans une page web. Entre autre chose une utilisation importante des polices de caractères, ce qui permet au rendu de suivre les zooms. Et ça c'est vraiment bien, bien mieux que n'importe quel plugin, mieux qu'une image, et même mieux qu'une image vectorielle finalement (ne serait-ce que parce que c'est toujours du texte). A avoir sous le coude si vous devez inclure des maths dans de l'html.</p>
<p>Comme vous l'avez probablement remarqué, je suis toujours en quête d'un bon outil pour gérer mes sources, mes bugs, mes code reviews, etc. Cette fois-ci je vous propose <a href="http://phabricator.org/" title="phabricator">phabricator</a>. Phabricator regroupe tout ça et même plus. C'est à la base un projet de facebook et ça me semble plutôt pas mal. Je suis justement en cours d'installation.</p>
<p>Actuellement j'utilise <a href="http://www.github.com">github</a>, j'ai aussi des repositories sur <a href="http://baregit.com/" title="baregit">baregit</a>. J'ai aussi une instance de <a href="http://gitorious.org/" title="gitorious">gitorious</a> mais je n'en suis pas totalement satisfait (il manque pas mal de choses, même si le côté hébergement de source fonctionne plutôt bien). J'aimerais en fait pouvoir avoir une instance chez moi d'un équivalent (fonctionnel) à github et simplement avoir des miroirs des sources (pour alléger ma bande passante si certains veulent faire un clone).</p>
<p>Dans la liste des versions à tester, j'ai également <a href="http://blog.gitlabhq.com/gitlab-2-dot-7/" title="gitlab">gitlab</a> qui vient de passer en version 2.7 avec pas mal de nouveautés.</p>
<h3>Misc</h3>
<p>Si vous êtes sous gnome, vous apprécierez peut-être ce client mail : <a href="http://yorba.org/geary/" title="Geary">Geary</a>. Pour ma part je ne l'ai pas testé, mais il me semble plutôt sympa, au moins pour du mail "perso".</p>
<p>Vous aussi vous avez un site web ? Vous aussi vous stockez des mots de passe ? Alors ne faites simplement pas comme Tesco. Voici un article très intéressant vous rappelant plusieurs <a href="http://www.troyhunt.com/2012/07/lessons-in-website-security-anti.html" title="règles de sécurité et contre exemple Tesco">règles de sécurité</a> à adopter, en prenant comme contre exemple Tesco. Faut dire qu'ils l'avaient un peu cherché en twittant :</p>
<blockquote>
<p>Passwords are stored in a secure way. They're only copied into plain text when pasted automatically into a password reminder mail.</p>
</blockquote>
<p>Qu'est ce qui motive les gens ? Les récompenses ? Leur donner le choix ? Les forcer ? Les autonomiser ? Voici un Ted talk plutôt connu dans lequel Dan Pink tente d'apporter quelques réponses : <a href="http://www.ted.com/talks/dan_pink_on_motivation.html" title="The surprinsing science of motivation">The surprinsing science of motivation</a>. Et pour ceux qui ne le savent pas, le lecteur est plutôt bien fait avec entre autres de nombreuses transcriptions et traductions, liées à la vidéo.</p>
<h3>Graphisme & co</h3>
<p>Un lien sympa (parmi plein d'autres) pour savoir faire des <a href="http://css-tricks.com/examples/ShapesOfCSS/" title="formes en css">formes en css</a>.</p>
<h2>Liste des liens présentés</h2>
<h3>Développement</h3>
<ul>
<li><p>haz.io : <a href="http://haz.io">http://haz.io</a></p></li>
<li><p>bug mozilla calc() : <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=771678">https://bugzilla.mozilla.org/show_bug.cgi?id=771678</a></p></li>
<li><p>calc dans IE9 <a href="http://msdn.microsoft.com/en-us/library/ms537660(v=vs.85).aspx#calc">http://msdn.microsoft.com/en-us/library/ms537660(v=vs.85).aspx#calc</a></p></li>
<li><p>Chaîner les comparaisons en coffeescript : <a href="http://coffeescript.org/#comparisons">http://coffeescript.org/#comparisons</a></p></li>
<li><p>Petite astuce pour git : <a href="http://sametmax.com/une-astuce-pour-ne-plus-avoir-peur-des-merges-avec-git/">http://sametmax.com/une-astuce-pour-ne-plus-avoir-peur-des-merges-avec-git/</a></p></li>
<li><p>lib javascript pour afficher des maths : <a href="http://www.mathjax.org/">http://www.mathjax.org/</a></p></li>
<li><p>phabricator : <a href="http://phabricator.org/">http://phabricator.org/</a></p></li>
<li><p>baregit : <a href="http://baregit.com/">http://baregit.com/</a></p></li>
<li><p>gitorious : <a href="http://gitorious.org/">http://gitorious.org/</a></p></li>
<li><p>gitlab : <a href="http://blog.gitlabhq.com/gitlab-2-dot-7/">http://blog.gitlabhq.com/gitlab-2-dot-7/</a></p></li>
</ul>
<h3>Misc</h3>
<ul>
<li><p>Geary : <a href="http://yorba.org/geary/">http://yorba.org/geary/</a></p></li>
<li><p>règles de sécurité et contre exemple Tesco : <a href="http://www.troyhunt.com/2012/07/lessons-in-website-security-anti.html">http://www.troyhunt.com/2012/07/lessons-in-website-security-anti.html</a></p></li>
<li><p>The surprinsing science of motivation : <a href="http://www.ted.com/talks/dan_pink_on_motivation.html">http://www.ted.com/talks/dan_pink_on_motivation.html</a></p></li>
</ul>
<h3>Graphisme & co</h3>
<ul>
<li>formes en css : <a href="http://css-tricks.com/examples/ShapesOfCSS/">http://css-tricks.com/examples/ShapesOfCSS/</a></li>
</ul>
De tout, de rien, des bookmarks, du bla blaurn:md5:2b80a4d72b382769ed2afd07ede2b0822012-07-10T12:51:00+02:002012-07-10T14:28:33+02:00CrEvLienscssdartgitgogooglelegomercurialphpunicodewebgrids <h2>Introduction</h2>
<p>Bon, je suis un peu en retard sur mon planing, mais c'est aussi car j'ai trouvé un peu moins de choses intéressantes ces derniers jour.
Voici tout de même une petite compilation de liens de cette dernière semaine (et vous noterez que je n'ai même pas collé de troll dans l'introduction...).</p>
<p><em>edit</em> : voici les <a href="http://www.winsos.net/~yves/index.php?category/Divers/Liens">épisodes précédents</a></p>
<h2>Un peu de contenu</h2>
<h3>Développement</h3>
<p>Histoire de commencer en douceur, voici une <a href="http://www.ftrain.com/unicode/" title="Table unicode">table unicode</a> en site web. Ok, rien de bien nouveau dedans. Par contre, l'usage des caractères unicodes est de plus en plus utilisé dans le web car cela permet de remplacer pas mal d'icones et donc d'alléger les pages. Cela permet en outre de garder un côté vectoriel et stylable avec CSS, donc plutôt sympa.</p>
<p>Pour continuer avec un peu de "rien de bien nouveau", voici un article sur la <a href="http://www.croes.org/gerald/blog/aop-php-programmation-orientee-aspect/822/" title="programmation orientée aspect en PHP">programmation orientée aspect en PHP</a>. Intéressant mais à creuser un peu plus. D'ailleurs l'article est plus sur de l'utilisation de reflexivité que réellement de la programmation par aspect.</p>
<p>Github continue d'avancer. Cette fois ils présentent un <a href="https://github.com/blog/1183-try-git-in-your-browser" title="Un tutoriel git dans votre navigateur">tutoriel git</a> à utiliser dans votre navigateur. Une manière finalement assez sympa pour apprendre à utiliser cet outil.</p>
<p>Connaissez-vous <a href="https://github.com/nvie/gitflow/" title="Git-flow">git-flow</a> ? Il s'agit de quelques extensions basées sur git permettant de facilité le travail en suivant un <a href="http://nvie.com/posts/a-successful-git-branching-model/" title="A successful Git branching model">workflow</a> assez intéressant. J'ai appris récemment qu'une variante existant pour mercurial, <a href="https://bitbucket.org/yinwm/hgflow/wiki/Home" title="Git-flow... pour mercurial">hg-flow</a>. A noter que <a href="http://www.sourcetreeapp.com" title="SourceTree">sourcetree</a> permet d'utiliser ces deux outils directement depuis son interface (voir les <a href="http://www.sourcetreeapp.com/update/ReleaseNotes_beta.html" title="Notes de version de SourceTree">notes de version</a>).</p>
<p>Passons un instant du côté dart de la force (oui, je sais...) pour présenter ce port des <a href="http://code.google.com/p/dart-crypto-lib/" title="Port des classes crypot de Google Closure Library en dart">classes crypto de Google Closure Library en dart</a>.</p>
<p>Et restons chez Google (enfin presque) pour parler un peu de go. Voici en premier lieu un retour de cloudflare sur leur <a href="http://blog.cloudflare.com/go-at-cloudflare" title="Utilisation de go chez Cloudflare">utilisation de go</a>. Et ensuite une présentation de <a href="https://linuxfr.org/users/nono">nono</a> sur <a href="http://blog.menfin.info/Presentations/20120709_Golang_introduction" title="Le monde merveilleux de Golang">le monde merveilleux de Golang</a>, présentation donnée au RMLL si je ne me trompe. Je n'y ait pas encore touché mais je trouve ça plutôt intéressant, et les différents articles (par exemple sur <a href="http://dev.af83.com" title="Blog d'af83">le blog d'af83</a> donnent envie d'essayer). Finalement peut-être un pont entre les langages classiques et bas niveaux tels que c/c++ et les langages plus haut niveaux comme python et ruby, tout en étant plus expressif que java. Bref ça me tente pas mal, mais j'ai déjà d'autres langages à (ré)apprendre donc ça passer après...</p>
<p>Pour clore cette partie développement un lien vers un livre blanc autour de la <a href="http://blog.xebia.fr/wp-content/uploads/2011/09/Xebia-Maitrisez-votre-dette-technique.pdf" title="Livre blanc sur la dette technique">dette technique</a> en informatique. Je n'ai pas encore eu le temps de le lire mais le début me semble intéressant. L'un d'entre vous l'a-t-il déjà lu ?</p>
<h3>Misc</h3>
<p>Mais que ce passe-t-il lorsqu'on exécute une recherche sur Google ? Cette <a href="http://mashable.com/2012/06/13/google-search-infographic-2/" title="Infographie sur les recherches sur Google">infographie</a> tente d'y répondre.</p>
<h3>Graphisme & co</h3>
<p>Si vous vous intéressez un peu à la typographie et au web, vous devez savoir qu'une des solution pour avoir une mise en page agréable est de se baser sur des grilles. Voici donc un petit outil fournissant des <a href="http://basehold.it/" title="CSS pour afficher des grilles typographiques">css de grilles</a> a afficher dans vos pages, pour vous aider à les concevoir correctement.</p>
<p>D'ailleurs à ce propos il faudrait que je fasse un petit retour sur le livre <a href="http://www.adverbum.fr/webgrids-fradier-anne-sophie-atelier-perrousseaux_ouvrage-perrousseaux_4kd26i9rxoms.html#" title="webgrids">webgrids</a> que j'ai terminé et qui est plutôt intéressant.</p>
<p>Evidemment j'étais obligé de coller au moins une news sur les Lego ou quelque chose approchant. Donc voici une <a href="http://www.infoq.com/presentations/Design-Innovation-at-the-LEGO-Group" title="Présentation du processus de design de Lego">présentation sur le processus de design</a> chez Lego.</p>
<p>Et pour rester dans les choses plutôt amusantes une petite vidéo qui vous expliquera comment <a href="http://vimeo.com/44700968" title="Comment réaliser une fusée à base d'allumette">réaliser une petite fusée à base d'allumette</a> !</p>
<h2>Liste des liens présentés</h2>
<h3>Développement</h3>
<ul>
<li><p>Table unicode : <a href="http://www.ftrain.com/unicode/">http://www.ftrain.com/unicode/</a></p></li>
<li><p>programmation orientée aspect en PHP : <a href="http://www.croes.org/gerald/blog/aop-php-programmation-orientee-aspect/822/">http://www.croes.org/gerald/blog/aop-php-programmation-orientee-aspect/822/</a></p></li>
<li><p>tutoriel git : <a href="https://github.com/blog/1183-try-git-in-your-browser">https://github.com/blog/1183-try-git-in-your-browser</a></p></li>
<li><p>Git-flow : <a href="https://github.com/nvie/gitflow/">https://github.com/nvie/gitflow/</a></p></li>
<li><p>A successful Git branching model : <a href="http://nvie.com/posts/a-successful-git-branching-model/">http://nvie.com/posts/a-successful-git-branching-model/</a></p></li>
<li><p>hg-flow : <a href="https://bitbucket.org/yinwm/hgflow/wiki/Home">https://bitbucket.org/yinwm/hgflow/wiki/Home</a></p></li>
<li><p>SourceTree : <a href="http://www.sourcetreeapp.com">http://www.sourcetreeapp.com</a></p></li>
<li><p>Notes de version de SourceTree : <a href="http://www.sourcetreeapp.com/update/ReleaseNotes_beta.html">http://www.sourcetreeapp.com/update/ReleaseNotes_beta.html</a></p></li>
<li><p>Port des classes crypot de Google Closure Library en dart : <a href="http://code.google.com/p/dart-crypto-lib/">http://code.google.com/p/dart-crypto-lib/</a></p></li>
<li><p>Utilisation de go chez Cloudflare : <a href="http://blog.cloudflare.com/go-at-cloudflare">http://blog.cloudflare.com/go-at-cloudflare</a></p></li>
<li><p>le monde merveilleux de Golang : <a href="http://blog.menfin.info/Presentations/20120709_Golang_introduction">http://blog.menfin.info/Presentations/20120709_Golang_introduction</a></p></li>
<li><p>Blog d'af83 : <a href="http://dev.af83.com">http://dev.af83.com</a></p></li>
<li><p>Livre blanc sur la dette technique : <a href="http://blog.xebia.fr/wp-content/uploads/2011/09/Xebia-Maitrisez-votre-dette-technique.pdf">http://blog.xebia.fr/wp-content/uploads/2011/09/Xebia-Maitrisez-votre-dette-technique.pdf</a></p></li>
</ul>
<h3>Misc</h3>
<ul>
<li>Infographie sur les recherches sur Google : <a href="http://mashable.com/2012/06/13/google-search-infographic-2/">http://mashable.com/2012/06/13/google-search-infographic-2/</a></li>
</ul>
<h3>Graphisme & co</h3>
<ul>
<li><p>CSS pour afficher des grilles typographiques : <a href="http://basehold.it/">http://basehold.it/</a></p></li>
<li><p>webgrids : <a href="http://www.adverbum.fr/webgrids-fradier-anne-sophie-atelier-perrousseaux_ouvrage-perrousseaux_4kd26i9rxoms.html#">http://www.adverbum.fr/webgrids-fradier-anne-sophie-atelier-perrousseaux_ouvrage-perrousseaux_4kd26i9rxoms.html#</a></p></li>
<li><p>Présentation du processus de design de Lego : <a href="http://www.infoq.com/presentations/Design-Innovation-at-the-LEGO-Group">http://www.infoq.com/presentations/Design-Innovation-at-the-LEGO-Group</a></p></li>
<li><p>Comment réaliser une fusée à base d'allumette : <a href="http://vimeo.com/44700968">http://vimeo.com/44700968</a></p></li>
</ul>
De tout, de rien, des bookmarks, du bla blaurn:md5:60553dfbf24c24be26d3f5080b8786812012-07-03T13:00:00+02:002012-07-03T12:02:57+02:00CrEvLiensagilebing mapsbracketscode reviewcontratdessinsgitgoogle mapshtaccessjavascriptlagoliensquake 3solarizedsublime text 2svntafftwittervalve <h2>Introduction</h2>
<p>Voici une nouvelle petite sélection de liens pour la semaine passée. Par rapport aux autres fois je suis légèrement en retard, week end oblige. D'ailleurs, une question pour toutes les personnes habitant à Paris ou environs : c'est quoi votre espèce de truc qui ressemble vaguement (mais de loin) à des transports en commun ? Franchement c'est une honte votre métro, comment vous faites pour utiliser ça ? Des escaliers dans tous les sens (supaïr avec enfant, poussette et bagages). Des portiques tellement étriqués qu'on a du mal à passer dedans (supaïr avec enfant, poussette et bagages). Des passages larges introuvables, inexistant ou non indiqués (supaïr avec enfant, poussette et bagages, mais aussi pour personnes à mobilité réduite, âgées ou autre). Franchement, venez à Lyon, au moins la majorité (tous ?) des quais sont accessible via ascenseur, on peut passer les portiques avec poussette et bagages. En fait le métro à Paris c'est juste fait pour les personnes en bonne santé tenant debout sur leurs deux jambes quoi. Ben c'est beau...</p>
<p>Comment ça on s'en fout ?</p>
<p>Comme la dernière fois, vous pouvez retrouver la liste des liens à la fin du post.</p>
<h2>Un peu de contenu</h2>
<h3>Développement</h3>
<p>Pour bien commencer ces bookmarks, voici <a href="http://ethanschoonover.com/solarized" title="Solarized color theme">Solarized</a>, une palette de 16 couleurs. L'objectif est évidemment de colorer nos précieux codes sources, de manière la plus agréable possible. Un sacré travail a été fait pour avoir des couleurs homogènes, un contraste correct, une bonne relation entre les couleurs (qui ne sont pas du tout prises au hasard). Le tout existe en deux versions (fond clair ou foncé). Pour ma part j'ai essayé rapidement et j'ai trouvé la version sombre un peu désagréable, j'utilise actuellement la version claire pour préparer ce post. Maintenant je me suis aussi rendu compte que le rendu variait fortement suivant les écrans, donc c'est pas évident. Quoi qu'il en soit un thème sympathique et cohérent, et dans tous les cas une très bonne base. Bravo pour ce boulot qui change des thèmes classiques ou fait un peu <em>au hasard</em> !</p>
<p>Dans le genre <em>"ça peut toujours être utile"</em> voici une petite liste de [10 .htaccess] à garder sous le coude. Beaucoup sont connus mais le <em>force download</em> par exemple est intéressant.</p>
<p>Git est devenu, assez rapidement, un outil de développement très répandu. Mais il n'est pas toujours évident de comprendre tous les concepts présents. Voici donc, sans être exhaustive, une <a href="http://marklodato.github.com/visual-git-guide/index-en.html" title="Présentation visuelle de Git">présentation visuelle de git</a>. Il ne s'agit bien évidemment que de représentation du dépôt ou de l'état des fichiers, mais c'est déjà pas mal.</p>
<p>Evidemment, qui dit Git dit GitHub (ou pas). Et je suis certain de nombreux utilisateurs de GitHub attendaient cette fonctionnalité avec grande impatience : l'<a href="https://github.com/blog/1178-collaborating-on-github-with-subversion" title="SVN pour GitHub">utilisation de subversion comme client pour github</a> ! Bon, je vous avouerais honnêtement que j'en vois pas l'intérêt, mais pour quoi pas. Dans tous les cas une bien belle performance alors que certains s’évertuent à faire exactement l'inverse (git-svn par exemple).</p>
<p>Adobe est en train de développer <a href="http://brackets.io/" title="Brackets, un éditeur par Adobe">un nouvel éditeur, pour les technos web</a>, Brackets. Mais surtout, il est développé à partir du web. En effet, l'éditeur est réalisé en utilisant de l'html, du css et du javascript (sur base de chrome). Le style est plutôt sobre mais agréable, les premiers tests effectués m'ont plutôt laissé une bonne impression (rare pour des éditeurs en javascript). Je ne sais pas trop ce que ça va donner au final mais à suivre. Ha oui, et c'est dispo sous windows et mac même s'ils disent que le portage sous linux ne devrait pas poser trop de problème vu les technologies choisies. Et c'est sous MIT donc vous pouvez le porter vous même. A priori certains <a href="http://www.alsacreations.com/actu/lire/1465-adobe-brackets-editeur-html-css.html" title="Premiers retours sur Brackets, traduction par AlsaCreations">premiers retours</a> sont encourageant.</p>
<p>J'ai déjà parlé plusieurs fois de <a href="http://www.sublimetext.com/blog/articles/sublime-text-2-0-released" title="Sortie de Sublime Text 2">Sublime Text 2</a>. La version 2.0 est maintenant officielle (précédemment beta). C'est un éditeur (malheureusement pas libre) multiplateforme (windows, linux, mac). Il est vraiment agréable, très pratique et très puissant. C'est une très bonne alternative à certains IDE et en partie à vim/emacs, même si c'est probablement moins extensible. Sur ce point il faut noter qu'il est compatible avec Textmate et ça offre tout de suite pas mal de bundles ou thèmes.</p>
<p>Franchement c'est un très bon éditeur, avec des fonctionnalités vraiment sympa (comparativement à beaucoup d'éditeurs) ne serait-ce que la sélection verticale, la sélection des occurrences d'un mot pour édition multiple, transformation multi-ligne - mono-ligne, etc. Allez voir le site c'est plutôt bien présenté.</p>
<p>Ha oui, le tout avec une interface plutôt agréable et légère (mini maps par exemple).</p>
<p>Maintenant, la question que je me pose malgré tout : pourquoi n'y a-t-il pas d'éditeurs du genre en libre ? (et non je ne parlerai pas de notepad++ qui outre le fait de ne pas être multiplateforme à une interface déplorable, enfin très windows quoi). Est-ce que la présence de vim/emacs fagocyte tout projet de bon éditeur ? Est-ce simplement qu'un (bon) éditeur c'est long et compliqué à créer et que pour vivre en même temps c'est pas évident en libre (sachant que c'est pas forcément évident de faire / vendre du service autour et que c'est souvent le moyen de subsistance dans le libre) ?</p>
<p>Si je demande ça c'est que je trouve que ça manque vraiment. Pendant quelques années on voyait beaucoup de monde sous Textmate (entre autre depuis que les démos de Rails sont apparues...). Il semble en perte de vitesse pour le moment et sublimetext2 est en train de marcher un peu dessus, alors que la demande d'un équivalent windows/linux était très forte (oui, je sais, la demande, pas les doigts pour le code...)</p>
<p>Après de nombreux titres comme Doom, Quake 1 et 2, Doom3, voici que Fabien Sanglard s'attaque à faire <a href="http://fabiensanglard.net/quake3/index.php" title="Code review de Quake 3">une code review de Quake 3</a>. Un sacré sujet et, comme d'habitude, un très bon et impressionant boulot de réalisé. Si vous avez quelques heures à perdre, voici de quoi faire.</p>
<p>Voici un très bon article à propos, entre autre, de Go (le langage de Google). Il est vraiment intéressant à lire, aussi bien pour le côté histoire (ben oué moi j'aime bien les mails de Torvalds dans les news de patrick_g, d'ailleurs c'est ce que je lis en priorité) que pour le côté technique, langage de programmation. Dans tous les cas, si vous vous intéressez aux langages et plus grossièrement à la programmation, allez simplement lire ce très bon article : <a href="http://commandcenter.blogspot.fr/2012/06/less-is-exponentially-more.html" title="Less is exponentially more">less is exponentially more</a>.
(oui j'ai honteusement pompé ce <a href="https://twitter.com/brmichel/status/217389420528148481" title="lien depuis le compte twitter de nono">lien depuis le compte twitter de nono</a>)</p>
<p>Twitter continue d'ouvrir certains programmes. Cette fois-ci il s'agit de <a href="http://engineering.twitter.com/2012/06/building-and-profiling-high-performance.html" title="Lago">Lago</a> un générateur de charge (en fait je ne sais pas trop comment le traduire). Le but est de tester, profiler des systèmes haute performance sous charge, dans un contexte réseau / distribué en s'approchant de la réalité, bruit sur le réseau, etc.</p>
<p>Javascript, bien que très largement utilisé à grand échelle, souffre encore d'un manque de "sérieux" et d'industrialisation. Entre autre, il est assez rare de voir du code testé de manière unitaire et c'est bien dommage vu le côté de plus en plus critique des applications javascript. Pour tenter d'améliore un peu les choses, voici un article d'<a href="http://coding.smashingmagazine.com/2012/06/27/introduction-to-javascript-unit-testing/" title="introduction au test unitaire en javascript">introduction au test unitaire en javascript</a>.</p>
<h3>Misc</h3>
<p>Je pense que pas mal de personnes ont du voir circuler cette nouvelle mais je le repartage car c'est plutôt intéressant. Il s'agit d'un <a href="https://github.com/tibastral/contrats-francais" title="Contrat Agile">contrat de développement en mode agile</a>, écrit par un avocat, en droit français. Ca devrait permettre de réaliser des projets du genre avec un minimum de garantie quant au cadre légal (pas toujours facile, surtout que les méthodes agiles ne sont pas toujours bien vues des "clients", souvent simplement car non comprises ou faisant peur). En tout cas très bonne initiative et une bonne idée de le publier.</p>
<p>Je remonte ici le <a href="http://newcdn.flamehaus.com/Valve_Handbook_LowRes.pdf" title="Guide d'entrée chez Valve">guide fourni à l'embauche de Valve</a> bien qu'il m'ait été précisé dans les commentaires d'un ancien journal. Je trouve que c'est plutôt bien sympa (ok j'ai pas encore tout lu), autant sur le fond que sur la forme et la démarche. A lire si vous vous demandez si autre chose qu'une boite où vous êtes fliqués dans votre boulot existe.</p>
<p>Pour Google (autre boite sympa, non ?) <a href="http://googleblog.blogspot.fr/2012/06/energy-efficiency-in-cloud.html" title="Le cloud, une question de réduction de consommation électrique">le cloud est aussi une question de réduction de consommation électrique</a>. Et voici les résultats de leur étude sur le sujet. En effet, combien de serveurs physiques totalement sous-exploités sont en fonction ? La virtualisation permet un premier pas intéressant en terme de mutualisation, et le cloud également à plus grande envergure. C'est un point qu'il ne faut pas négliger, même si ce n'est en général pas le frein ou l'argument le plus important lorsqu'on choisi de placer ces données dans le cloud.</p>
<h3>Graphisme & co</h3>
<p>Pour changer un peu des Lego, voici quelques <a href="http://www.journalgraphic.com/2012/06/26/mario-dark-vador-sonic-sculptes/" title="Sculptures de vos héros">sculptures de vos héros</a> préférés. Plutôt sympa, non ?</p>
<p>Lorsqu'on fait du web, du graphisme (ou qu'on cherche juste à créer un nouveau thème pour emacs) on a souvent besoin d'outils pour obtenir des informations sur les couleurs, les dégradés, etc. <a href="http://www.colorhexa.com/" title="ColorHexa">ColorHexa</a> est justement l'un d'eux. Il renseigne sur les couleurs (RGB, décimal, HSL, ...) mais permet aussi de travailler sur les dégradés. A ajouter dans sa boite à outil concernant les couleurs.</p>
<p>Voici quelques [dessins en 3D]. Et franchement c'est superbe ! J'aimerais vraiment bien savoir dessiner de la sorte ;-) La 3D est vraiment bien représentée, en utilisant l'<a href="http://fr.wikipedia.org/wiki/Anamorphose" title="Anamorphose sur Wikipedia">anamorphose</a> pour simuler l'effet de profondeur. On y croirait presque et l'inclusion d'objets réels sur le dessin ne fait que renforcer cette impression. Du très bon boulot.</p>
<h3>Cartographie</h3>
<p>Bing vient d'annoncer qu'ils allaient ajouter [165 To d'orthophotographies] aux 129 To existants. Le but est d'avoir, en Amérique du nord et Europe de l'Ouest, une résolution de 30cm/px. C'est quand même bien précis pour une ortho sur un site grand public. En tout cas une sacré mise à jour puisqu'elle est donc plus important que toute la donnée similaire déjà présente. Une tentative de leur part de s'améliorer et de conquérir un peu de la part de marché de Google.</p>
<p>D'un autre côté, Google met en évidence <a href="http://google-latlong.blogspot.fr/2012/06/where-roads-arent-and-why-it-matters.html" title="les zones du monde où il n'y a pas de route">les zones du monde où il n'y a pas de route</a>. Evidemment une partie du résultat était prévisible, mais la représentation (géo)graphique est toujours assez parlante.</p>
<h2>Liste des liens présentés</h2>
<h3>Développement</h3>
<ul>
<li><p>Solarized : <a href="http://ethanschoonover.com/solarized">http://ethanschoonover.com/solarized</a></p></li>
<li><p>10 .htaccess : <a href="http://www.catswhocode.com/blog/10-useful-htaccess-snippets-to-have-in-your-toolbox">http://www.catswhocode.com/blog/10-useful-htaccess-snippets-to-have-in-your-toolbox</a></p></li>
<li><p>présentation visuelle de git : <a href="http://marklodato.github.com/visual-git-guide/index-en.html">http://marklodato.github.com/visual-git-guide/index-en.html</a></p></li>
<li><p>utilisation de subversion comme client pour github : <a href="https://github.com/blog/1178-collaborating-on-github-with-subversion">https://github.com/blog/1178-collaborating-on-github-with-subversion</a></p></li>
<li><p>un nouvel éditeur, pour les technos web : <a href="http://brackets.io/">http://brackets.io/</a></p></li>
<li><p>Premiers retours sur Brackets, traduction par AlsaCreations : <a href="http://www.alsacreations.com/actu/lire/1465-adobe-brackets-editeur-html-css.html">http://www.alsacreations.com/actu/lire/1465-adobe-brackets-editeur-html-css.html</a></p></li>
<li><p>Sublime Text 2 : <a href="http://www.sublimetext.com/blog/articles/sublime-text-2-0-released">http://www.sublimetext.com/blog/articles/sublime-text-2-0-released</a></p></li>
<li><p>une code review de Quake 3 : <a href="http://fabiensanglard.net/quake3/index.php">http://fabiensanglard.net/quake3/index.php</a></p></li>
<li><p>Less is exponentially more : <a href="http://commandcenter.blogspot.fr/2012/06/less-is-exponentially-more.html">http://commandcenter.blogspot.fr/2012/06/less-is-exponentially-more.html</a></p></li>
<li><p>lien depuis le compte twitter de nono : <a href="https://twitter.com/brmichel/status/217389420528148481">https://twitter.com/brmichel/status/217389420528148481</a></p></li>
<li><p>Lago : <a href="http://engineering.twitter.com/2012/06/building-and-profiling-high-performance.html">http://engineering.twitter.com/2012/06/building-and-profiling-high-performance.html</a></p></li>
<li><p>introduction au test unitaire en javascript : <a href="http://coding.smashingmagazine.com/2012/06/27/introduction-to-javascript-unit-testing/">http://coding.smashingmagazine.com/2012/06/27/introduction-to-javascript-unit-testing/</a></p></li>
</ul>
<h3>Misc</h3>
<ul>
<li><p>contrat de développement en mode agile : <a href="https://github.com/tibastral/contrats-francais">https://github.com/tibastral/contrats-francais</a></p></li>
<li><p>Guide d'entrée chez Valve : <a href="http://newcdn.flamehaus.com/Valve_Handbook_LowRes.pdf">http://newcdn.flamehaus.com/Valve_Handbook_LowRes.pdf</a></p></li>
<li><p>Le cloud, une question de réduction de consommation électrique : <a href="http://googleblog.blogspot.fr/2012/06/energy-efficiency-in-cloud.html">http://googleblog.blogspot.fr/2012/06/energy-efficiency-in-cloud.html</a></p></li>
</ul>
<h3>Graphisme & co</h3>
<ul>
<li><p>sculptures de vos héros : <a href="http://www.journalgraphic.com/2012/06/26/mario-dark-vador-sonic-sculptes/">http://www.journalgraphic.com/2012/06/26/mario-dark-vador-sonic-sculptes/</a></p></li>
<li><p>ColorHexa <a href="http://www.colorhexa.com/">http://www.colorhexa.com/</a></p></li>
<li><p>Dessins en 3D : <a href="http://www.fubiz.net/2012/06/26/3d-sketchbooks/">http://www.fubiz.net/2012/06/26/3d-sketchbooks/</a></p></li>
<li><p>anamorphose : <a href="http://fr.wikipedia.org/wiki/Anamorphose">http://fr.wikipedia.org/wiki/Anamorphose</a></p></li>
</ul>
<h3>Cartographie</h3>
<ul>
<li><p>Ajout de 165To d'ortho chez Bing Maps : <a href="http://www.bing.com/community/site_blogs/b/maps/archive/2012/06/25/released-our-largest-satellite-publication.aspx">http://www.bing.com/community/site_blogs/b/maps/archive/2012/06/25/released-our-largest-satellite-publication.aspx</a></p></li>
<li><p>les zones du monde où il n'y a pas de route : <a href="http://google-latlong.blogspot.fr/2012/06/where-roads-arent-and-why-it-matters.html">http://google-latlong.blogspot.fr/2012/06/where-roads-arent-and-why-it-matters.html</a></p></li>
</ul>
De tout, de rien, des liens, bla bla blaurn:md5:22df40ab160621ef5e168a9cf8a659542012-06-25T21:30:00+02:002012-06-25T20:33:51+02:00CrEvLiens3dandroidcloudfreegitgooglegoogle mapsjavascriptlegolinksLinuxmacphptwitterwikipedia <h2>Introduction</h2>
<p>Pour bien commencer la semaine, voici une nouvelle sélection de mes marques pages.</p>
<p>Comme vous pouvez le remarquer j'ai essayé de faire quelque chose à la fois plus structurée et plus pratique pour ceux souhaitant uniquement une liste de lien. Pour une fois j'aurais bien voulu mettre des notes de bas de page mais je n'ai pas réussi à le faire correctement.</p>
<p>Au final vous avez donc le choix de la lecture, soit un journal de brêves, qui commence juste après l'introduction, soit un journal multi-bookmark si vous sautez directement à la section <em>Liste des liens présentés</em>.</p>
<h2>Un peu de contenu</h2>
<h3>Développement</h3>
<p>Tout codeur sait bien que la documentation est son ~~meilleur ami~~ pire cauchemard. Les développeurs aiment, en général, tellement écrire de documentations qu'on en arrive à avoir des choses du genre (piqué de <a href="https://twitter.com/fabpot/status/215107628454510592">twitter</a>) :</p>
<p><code>php
/**
* Gets the title.
* @return string The title
*/
public function getTitle() {
return $this->title;
}</code></p>
<p>Résultat on en arrive à avoir des développeurs qui disent que la documentation ne sert à rien, et qu'il vaut mieux un code clair. Et oui, au final trop de (mauvaise) doc tue la doc. Pour ma part je ne suis pas vraiment partisant de ceci. Cet exemple est exagéré dans le sens où ça ne sert à rien, mais très fortement encouragé par les générateurs de documentation (typique java & javadoc, c'est là où j'ai vu le pire de doc idiote).</p>
<p>J'aimerais bien pouvoir faire du <a href="http://www.roard.com/Presentations/literate-programming.pdf">literate programming</a>, un peu ce qu'on trouver dans <a href="http://jashkenas.github.com/docco/">docco</a>. Le problème est que je trouve que ça s'adapte assez peu à des programmes objets un peu complexes.</p>
<p>Et en attendant, ben je pense qu'on va rester sur des générateurs "classiques" de documentation. Côté PHP, un petit nouveau est arrivé (libéré), il s'agit de <a href="http://fabien.potencier.org/article/63/sami-yet-another-php-api-documentation-generator">Sami</a>, libéré par Fabien Potencier, auteur entre autre de symfony.</p>
<p>Histoire de rester dans le PHP, voici une présentation sur l'utilisation de <a href="https://speakerdeck.com/u/hhamon/p/designing-rest-api-with-silex">Silex pour faire des api REST</a>. La présentation est plutôt simple et claire, elle fait plutôt bien son job. D'ailleurs, je vois de plus en plus de monde utiliser speakerdeck, slideshare serait-il en perte de vitesse ? Quoi qu'il en soit, si vous ne connaissez pas ou peu silex ça peut vous faire une introduction assez sympa à ce <em>micro framework</em> php.</p>
<p>Si vous utilisez <a href="http://git-scm.com/">Git</a> pour vos projets, vous serez peut-être intéressés par ce <a href="http://denisroussel.fr/Gitboard/">tableau de bord</a>. C'est écrit, une fois n'est pas coutume pour un outil du genre, en PHP. Pour ma part je n'ai pas réussi à le faire fonctionner (sous cygwin) et pas eu le temps de faire sous linux ou mac. Si certains l'ont testé/le test, un retour m'intéresserais pas mal.</p>
<p>Toujours pour Git, voici <a href="http://crew-cr.org/">Crew</a> un outil de code review. Comme indiqué plusieurs fois, je suis pas mal intéressé par ce type d'outil. Pour le moment j'utilise parfois un <a href="http://reviewboard.org">review board</a> pour sa compatibilité <a href="http://mercurial.selenic.com/">Mercurial</a> entre autre. Avez-vous déjà utilisé Crew ?</p>
<p>Je me permet de partager ce lien, contenant nombre de logiciels non libre pour un OS terreux (mais en même temps il parait qu'un tel os permet d'aller sur le chan des extrémistes bdsien alors bon...). Le but de cet article est <a href="http://deuteron.fr/blog/how-to-set-up-your-mac-for-web-development/">configurer un mac pour du développement web</a>.</p>
<p><em>edit : Ha be en fait non, les pommes sont passées de <a href="http://wiki.gcu.info/doku.php?id=de_la_bienseance_sur_le_canal_irc">terreuses à SALE SALE SALE</a></em></p>
<p>Je quitte un peu la partie pure développement pour vous parler de Cloud. Vous le savez certainement, en Europe le cloud est un peu à la traine. De grands acteurs tentent quand même de tirer leur épingle du jeu mais c'est pas évident. Et à priori, au delà des problèmes technique, se pose également des problèmes légaux. Entre autre, les lois sur la protection des données personnelles sont un frein à certaines possibilités techniques (par exemple le fait que ces données ne doivent pas sortir de l'Europe, problématique lorsque les data centers sont répartis partout dans le monde). Le <a href="http://www.usinenouvelle.com/article/cloud-computing-la-reglementation-europeenne-doit-vite-evoluer-selon-le-cern.N177052">CERN demande donc une évolution de la réglementation</a> afin de favoriser le Cloud. C'est évidement un sujet loin d'être simple, mais pour le moins urgent, surtout que changer la réglementation est long, très long, surtout à l'échelle des changements informatiques.</p>
<p>Voici, pour changer un peu, un long et instructif post sur <a href="http://www.html5rocks.com/en/tutorials/webgl/webgl_orthographic_3d/">WebGL et la 3D</a>. Je ne vais pas vraiment détailler, le mieux étant d'aller le lire.
<code>/me</code> se souvient avoir bossé dans une startup dont l'objectif était de faire de la 3D dans les navigateurs. A l'époque point de WebGL, on intégrait un moteur <a href="http://www.ogre3d.org/">Ogre</a> sous forme de plugin et on le pilotait depuis une interface html/js (et des web services, et du scripting lua). C'était bien sympa, même si pas évident. Aujourd'hui les choses semblent tout d'un coup un peu plus simples...</p>
<p>Et pour fermer cette partir développement, quelques petits points sur GitHub. Tout d'abord une présentation sur l'utilisation <a href="https://speakerdeck.com/u/kneath/p/building-an-army-of-robots">d'une armée de robots</a>. J'aime bien le principe et ça correspond bien normalement au boulot des ingénieurs et des informaticiens : automatiser ce qui peut l'être, ne pas faire 2 fois la même chose manuellement si on peut l'éviter. Ca permet également d'avoir des contraintes plus fermes que si les choses étaient faites humainement "oué bon, ma branche ne passe plus les tests mais c'est pas grave, je push quand même...".</p>
<blockquote>
<p>I'm tired of writing bad code</p>
</blockquote>
<p>C'est ainsi que commence cette présentation intitulée <a href="http://opensoul.org/blog/archives/2012/05/23/why-our-code-smells/">Why our code smells</a>. Elle est aussi réalisée par employé de GitHub. La présentation est vraiment sympa, et j'ai l'impression que cette boite et quand même assez particulière. Entre autre, ce qui ressort est qu'il n'y a pas vraiment de hiérarchie ni réellement de direction des produits. On dirait que ça fonctionne simplement parce qu'ils réunissent les bonnes personnes et les laissent simplement bosser. Enfin c'est l'impression que ça donne. Et ça donne quand même envie tout ça, même si j'ai l'impression que c'est à l'inverse de beaucoup d'entreprises. Par contre GitHub est encore plutôt jeune, à voir ce que ça donnera / deviendra dans quelques années.</p>
<p>D'ailleurs vous pouvez aussi aller voir les autres articles de son <a href="http://opensoul.org/">blog</a> c'est pas mal. Il y a un article qui m'intrigue, celui montrant son <a href="http://opensoul.org/blog/archives/2012/01/09/the-40-standup-desk/">bureau pour travailler en position debout</a>. Je sais que certains utilisent ce genre de bureau (ou cotoient des personnes qui les utilisent, par exemple chez Google). Que pensez-vous de ce type de bureau ? C'est pas un peu fatiguant tout la journée ? Si je me pose des questions c'est que j'ai entre autre un syndrôme rotulien (syndrôme du cinéma en langage courant) et rester assis est parfois très désagréable (pour pas dire plus) mais je me vois difficilement coder debout. En même temps j'ai jamais vraiment essayé...</p>
<h3>Misc</h3>
<p>Si vous développez pour android, ce petit utilitaire devrait vous plair. Il s'agit d'un petit logiciel, en lien avec le SDK d'Android, vous permettant de visualiser sur votre écran d'ordinateur ce qu'il se passe sur le téléphone ou la tablette. L'avantage est que vous avez à la fois un matériel complet, efficace et performant (par rapport aux émulateurs) et un affichage nikel sur écran, vidéo projecteur, etc. <a href="http://blog.ribomation.com/droid-at-screen/">Droid@Screen</a> peut être vraiment intéressant pour vos présentations ou formation par exemple.</p>
<p>Wikimedia semble toujours en recherche autour de son <a href="https://blog.wikimedia.org/2012/06/21/help-us-shape-wikimedias-prototype-visual-editor/">éditeur visuel</a> pour, entre autre, wikipedia, et demande de l'aide pour le réaliser. Pour ma part j'ai été assez intrigué lorsque, quasiment à chaque fois que le sujet apparaît, il y a tout un lot de personnes plus ou moins actives sur wikipedia qui se montrent farouchement opposées à cet outil. Tout ça parce que l'édition deviendrait plus facile. Et là je trouve que c'est réellement totalement se planter. Déjà, côté élitisme c'est pas trop mal. Mais surtout ça fait vraiment "on veut rester entre nous". Le problème c'est que quelqu'un spécialisé en histoire, en langues, en n'importe quoi autre que l'informatique (et encore) n'est pas forcément à l'aise, n'a pas forcément envie de perdre son temps avec une syntaxe wiki. Et sous pretextes qu'ils ne veulent pas de cette syntaxe ils ne devraient pas écrire sur wikipedia ? C'est con mais moi ça me fait bien penser à ces histoires de religion, ou pendant longtemps la messe était dite en latin, pour garder une distance avec les pauvres fidèles. Et ça, c'est moche, surtout lorsqu'on parle de transmission et partage du savoir.</p>
<p>Côté savoir, v'la't-y pas que Xavier papote dans les journaux aux sujets des <a href="http://lecercle.lesechos.fr/entreprises-marches/high-tech-medias/mobilite/221148204/free-mobile-mythes-et-realites">Free mobile : mythes et réalités</a>. Bon, évidemment c'est à prendre de manière partiale, mais il y a des choses intéressantes, entre autre le rapport entre investissement et chiffre d'affaire plutôt différent si on regarde Free ou les trois autres acteurs mobiles.</p>
<p>Que serait ces brêves sans parler un peu de travail, de condition de travail ? Ce serait triste, non ? Allez, un article plutôt simple sur le fait de <a href="http://www.rue89.com/rue89-eco/2012/06/20/revasser-au-bureau-cest-bon-pour-le-travail-233153">rêvasser au travail</a>. Bon, je sais que certains vont me dire que c'est déjà comme ça, mais faut croire qu'en fait c'est pas le cas partout. Evidemment ça peut dépendre des travails, mais croire qu'on peut avoir un métier un minimum créatif (et probablement idem pour les autres) sans jamais lever le nez est une connerie, malheureusement encre bien implantée dans le cerveaux de certains dirigeants (quelle que soit le niveau de direction). C'est domage.</p>
<h3>Cartographie</h3>
<p>Google a <a href="http://google-latlong.blogspot.fr/2012/06/introducing-google-maps-coordinate.html">annoncé</a> récemment l'ouverture de son nouveau service faisant partie de Google Maps/Earth, <a href="http://www.google.com/enterprise/mapsearth/products/coordinate.html">Coordinate</a>. En gros c'est un peu comme latitude, mais de manière professionnelle. Le but étant de pouvoir gérer des équipes mobiles en temps réel, avec entre autre assignation de travaux, workflow, etc.</p>
<p>La deuxième annonce de Google conciste en une <a href="http://googlegeodevelopers.blogspot.fr/2012/06/lower-pricing-and-simplified-limits.html">simplifcation des limites et une baisse des prix</a> de l'API Google Maps. C'est plutôt une bonne nouvelle pour ceux qui utilisent la version de base (non business).</p>
<h3>Graphisme & co</h3>
<p>La dernière fois j'avais présenté quelques scènes de films reproduites en Lego. Cette fois-ci c'est un oeuvre un peu différente, mais je trouve ça plutôt pas mal du tout. J'aimerais bien avoir ce genre de Lego sur mon bureau, je trouve que ça rend bien et ça change un peu de les <a href="http://www.inspirefirst.com/2012/06/21/jason-freeny-2/">voir à nu</a> (mais non, pas comme ça, bande de pervers !)</p>
<p>Histoire de rester dans le graphisme, voici une petite vidéo sympathique vous montrant qu'on peut <a href="http://enliighten.com/blog/painting-fur-with-only-the-round-brush/">peindre cheveux, poils ou trucs dans le genre rien qu'avec une brosse ronde</a>. Bon, va falloir que je ressorte ma wacom, j'en suis pas encore là moi...</p>
<p>Un petit <a href="http://www.davidrevoy.com/article118/making-of-l-heritage-en-couleur">making of</a> d'une nouvelle graphique intitulée <a href="http://www.davidrevoy.com/article117/l-heritage-en-couleur">l'héritage en couleur</a>. L'un des points intéressant est que c'est réalisé sous linux, avec krita et mypaint. D'ailleurs si vous souhaitez avoir des infos sur le dessin numérique sous linux ce blog est une belle mine d'informations, avec des ensembles prédéfinis de brosses et outils pour vos logiciels. C'est vraiment un bon site à avoir dans ses flux / marquetapage.</p>
<h1>Liste des liens présentés</h1>
<h3>Développement</h3>
<ul>
<li>exemple de belle doc : <a href="https://twitter.com/fabpot/status/215107628454510592">https://twitter.com/fabpot/status/215107628454510592</a></li>
<li>literate programming : <a href="http://www.roard.com/Presentations/literate-programming.pdf">http://www.roard.com/Presentations/literate-programming.pdf</a></li>
<li>docco : <a href="http://jashkenas.github.com/docco/">http://jashkenas.github.com/docco/</a></li>
<li>Sami, générateur de doc en PHP : <a href="http://fabien.potencier.org/article/63/sami-yet-another-php-api-documentation-generator">http://fabien.potencier.org/article/63/sami-yet-another-php-api-documentation-generator</a></li>
<li>Silex pour faire des api REST : <a href="https://speakerdeck.com/u/hhamon/p/designing-rest-api-with-silex">https://speakerdeck.com/u/hhamon/p/designing-rest-api-with-silex</a></li>
<li>tableau de bord pour git : <a href="http://denisroussel.fr/Gitboard/">http://denisroussel.fr/Gitboard/</a></li>
<li>Crew code review : <a href="http://crew-cr.org/">http://crew-cr.org/</a></li>
<li>review board : <a href="http://reviewboard.org">http://reviewboard.org</a></li>
<li>configurer un mac pour du développement web : <a href="http://deuteron.fr/blog/how-to-set-up-your-mac-for-web-development/">http://deuteron.fr/blog/how-to-set-up-your-mac-for-web-development/</a></li>
<li>Cloud computing : la règlementation européenne doit vite évoluer, selon le CERN : <a href="http://www.usinenouvelle.com/article/cloud-computing-la-reglementation-europeenne-doit-vite-evoluer-selon-le-cern.N177052">http://www.usinenouvelle.com/article/cloud-computing-la-reglementation-europeenne-doit-vite-evoluer-selon-le-cern.N177052</a></li>
<li>WebGL et la 3D : <a href="http://www.html5rocks.com/en/tutorials/webgl/webgl_orthographic_3d/">http://www.html5rocks.com/en/tutorials/webgl/webgl_orthographic_3d/</a></li>
<li>Ogre 3D : <a href="http://www.ogre3d.org">http://www.ogre3d.org</a></li>
<li>Fabrication d'une armée de robots : <a href="https://speakerdeck.com/u/kneath/p/building-an-army-of-robots">https://speakerdeck.com/u/kneath/p/building-an-army-of-robots</a></li>
<li>Why our code smells : <a href="http://opensoul.org/blog/archives/2012/05/23/why-our-code-smells/">http://opensoul.org/blog/archives/2012/05/23/why-our-code-smells/</a></li>
<li>bureau pour travailler en position debout : <a href="http://opensoul.org/blog/archives/2012/01/09/the-40-standup-desk/">http://opensoul.org/blog/archives/2012/01/09/the-40-standup-desk/</a></li>
</ul>
<h3>Misc</h3>
<ul>
<li>Droid@Screen : <a href="http://blog.ribomation.com/droid-at-screen/">http://blog.ribomation.com/droid-at-screen/</a></li>
<li>éditeur visuel wikimedia : <a href="https://blog.wikimedia.org/2012/06/21/help-us-shape-wikimedias-prototype-visual-editor/">https://blog.wikimedia.org/2012/06/21/help-us-shape-wikimedias-prototype-visual-editor/</a></li>
<li>Free mobile : mythes et réalités : <a href="http://lecercle.lesechos.fr/entreprises-marches/high-tech-medias/mobilite/221148204/free-mobile-mythes-et-realites">http://lecercle.lesechos.fr/entreprises-marches/high-tech-medias/mobilite/221148204/free-mobile-mythes-et-realites</a></li>
<li>Rêvasser au travail : <a href="http://www.rue89.com/rue89-eco/2012/06/20/revasser-au-bureau-cest-bon-pour-le-travail-233153">http://www.rue89.com/rue89-eco/2012/06/20/revasser-au-bureau-cest-bon-pour-le-travail-233153</a></li>
</ul>
<h3>Graphisme & co</h3>
<ul>
<li>Lego à nu : <a href="http://www.inspirefirst.com/2012/06/21/jason-freeny-2/">http://www.inspirefirst.com/2012/06/21/jason-freeny-2/</a></li>
<li>peinture de cheveux avec brosse ronde : <a href="http://enliighten.com/blog/painting-fur-with-only-the-round-brush/">http://enliighten.com/blog/painting-fur-with-only-the-round-brush/</a></li>
<li>l'héritage en couleur : <a href="http://www.davidrevoy.com/article117/l-heritage-en-couleur">http://www.davidrevoy.com/article117/l-heritage-en-couleur</a></li>
<li>et son making of : <a href="http://www.davidrevoy.com/article118/making-of-l-heritage-en-couleur">http://www.davidrevoy.com/article118/making-of-l-heritage-en-couleur</a></li>
</ul>
<h3>Cartographie</h3>
<ul>
<li>Google coordinate : <a href="http://www.google.com/enterprise/mapsearth/products/coordinate.html">http://www.google.com/enterprise/mapsearth/products/coordinate.html</a></li>
<li>Annonce de coordinate : <a href="http://google-latlong.blogspot.fr/2012/06/introducing-google-maps-coordinate.html">http://google-latlong.blogspot.fr/2012/06/introducing-google-maps-coordinate.html</a></li>
<li>Simplification des limites et baisse des prix de l'API Google Maps : <a href="http://googlegeodevelopers.blogspot.fr/2012/06/lower-pricing-and-simplified-limits.html">http://googlegeodevelopers.blogspot.fr/2012/06/lower-pricing-and-simplified-limits.html</a></li>
</ul>
Linksurn:md5:ca84facfde75ea9e4e69a1665bc172022012-03-30T11:04:00+02:002012-03-30T10:05:15+02:00CrEvDiverscsscss3githtmllinksscrumvrac <p>Petite liste de liens des trois derniers jours :</p>
<ul>
<li><a href="http://www.ryancollins.me/?p=1041" hreflang="en">Pure CSS Clickable Events Without :target</a></li>
</ul>
<p>Ca c'est une technique CSS qu'elle est bien !
Comment faire un menu déroulant, au click, uniquement en CSS ! Bon, c'est évidemment pas compatible IE, mais par contre c'est vraiment bien. La non utilisation de javascript fait que la page est plus légère, et fonctionne même pour ceux qui le désactive (oui ça existe). Dans tous les cas c'est vraiment sympa.</p>
<ul>
<li><a href="http://cheeaun.com/blog/2012/03/how-i-built-hacker-news-mobile-web-app" hreflang="en">How I built the Hacker News mobile web app</a></li>
</ul>
<p>Deux très très bons articles sur comment créer une application web, pour iphone, qui mime le plus fidèlement possible l'apparence d'une application native. Vraiment passionnant !</p>
<ul>
<li><a href="http://alokmenghrajani.github.com/tron/" hreflang="en">javascript game of tron in 219 bytes</a></li>
</ul>
<p>Tron, en javascript, en 219 octets. Qui dit mieux ?</p>
<ul>
<li><a href="http://css-tricks.com/minimum-paragraph-widths/" hreflang="en">Minimum Paragraph Widths in Fluid Layouts</a></li>
</ul>
<p>Un peu de CSS, cette fois sur la gestion de l'espace minimum autorisé pour du texte lorsqu'on insère une image (en float).</p>
<ul>
<li><a href="http://www.2ality.com/2012/03/css-grid-layout-firefox.html" hreflang="en">CSS Grid Layout is coming to Firefox in 2012</a></li>
</ul>
<p>On a supprimé les tableaux de la mise en page web... pour finalement faire arriver la mise en page sous forme de grille ! Bon ok, y'a pas à dire c'est quand même mieux, et ça respecte surtout la différence entre données et style/mise en page. Maintenant, faudrait que tout le monde supporte ce mode de positionnement...</p>
<ul>
<li><a href="http://timeline.verite.co/" hreflang="en">Timeline</a></li>
</ul>
<p>Une superbe implémentation de "timeline" en javascript. Vraiment bien réalisée, vous noterez la possibilité de donner en entrée ... un google doc !</p>
<ul>
<li><a href="http://www.git-legit.org/" hreflang="en">Legit (Git Workflow for Humans)</a></li>
</ul>
<p>Une petite surcouche à git afin d'avoir une utilisation un peu plus simple.</p>
<ul>
<li><a href="http://speckyboy.com/2012/03/27/design-trends-the-present-the-future-and-you/" hreflang="en">Design Trends: The Present, The Future, and You</a></li>
</ul>
<ul>
<li><a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/" hreflang="en">Introduction to JavaScript Source Maps</a></li>
</ul>
<p>Les "sources map" permettent de faire le lien entre code source javascript initial et la version compilée. Autrement : ça permet de debugger du code minifié / compilé !</p>
<ul>
<li><a href="http://updates.html5rocks.com/2012/03/CSS-layout-gets-smarter-with-calc" hreflang="en">CSS layout gets smarter with calc()</a></li>
</ul>
<p>Et si bientôt on n'avait plus besoin de less, google stylesheet, sass, etc.
Car désormais on peut faire des calculs dans les feuilles de style.
Qui n'a jamais voulu écrire par exemple :
width: calc(50% - 10px)
De mon point de vue une avancée majeur pour CSS</p>
<ul>
<li><a href="http://noledgedis.com/slides/crafty_javascript/assets/fallback/index.html" hreflang="en">Crafty JS</a></li>
</ul>
<p>Vous aimez le JS ? Vous aimerez alors cette présentation ;-)</p>
<ul>
<li><a href="http://www.areyouagile.com/2012/03/la-malediction-du-jour-homme/" hreflang="fr">La malédiction du jour homme</a></li>
</ul>
<p>Ca tombe bien, on en a en partie parlé en Réunion d'itération.
En résumé, en quoi le jour homme est contraire aux principes agile (oui c'est vraiment très résumé)</p>
<ul>
<li><a href="http://www.journaldugeek.com/2012/03/28/bluestacks-utiliser-applications-android-sur-pc/" hreflang="en">BlueStacks</a></li>
</ul>
<p>Un "émulateur" d'android pour PC. Ca fait appel à la virtualisation, et ça permet d'exécuter les applications Android.
A tester, ça peut être sympa si les performances et la fidélité sont au rendez-vous.</p>
<ul>
<li><a href="http://www.hteumeuleu.fr/la-surreflexion/" hreflang="fr">La surréflexion</a></li>
</ul>
<p>Ha ha ! la surréflexion !
A lire, j'en dis pas plus sinon ce ne sera pas drôle.</p>
<ul>
<li><a href="http://fr.wikipedia.org/wiki/Space_pen#Utilisation_dans_les_programmes_spatiaux_am.C3.A9ricains_et_Russes" hreflang="fr">Space pen</a></li>
</ul>
<p>Petite histoire de l'utilisation du Space Pen</p>
<ul>
<li><a href="http://blog.golang.org/2012/03/go-version-1-is-released.html" hreflang="en">Go version 1 is released</a></li>
</ul>
<p>Impossible de passer sous silence cette information capitale : Go, le langage de programmation de Google, vient de passer en version 1.
Maintenant, à voir où cela va vraiment mener, quels projets vont petit à petit l'utiliser, etc.</p>
<ul>
<li><a href="http://medialoot.com/blog/high-resolution-web/" hreflang="en">How to Prepare for The High-Resolution Web</a></li>
</ul>
<p>Un article assez sympa sur les transitions effectuées au niveau design web. En gros, on a des écrans avec une bien meilleur précision, des résolutions de plus en plus grande. Que faire, comment adapter les pratiques pour exploiter au mieux ces changements et anticiper l'augmentation encore probable des résolutions.</p>Vracurn:md5:d9a0f9c504979d7c513573776f069c822012-03-21T13:00:00+01:002012-03-21T11:51:05+01:00CrEvDevelagilecssgithtmlvrac <p>Et si on collait quelques news ? Peut-être qu'un jour je tiendrai se blog en vie sur une période suffisamment intéressante ;-)</p>
<ul>
<li><a href="https://baregit.com/" title="https://baregit.com/">https://baregit.com/</a> : hébergement git rapide et surtout hébergé en France, donc en dehors des lois américaines sur les brevets logiciels. Pas mal de bonnes fonctionnalités de prévues, et même une libération du code une fois l'ensemble suffisant</li>
<li><a href="http://www.starbucks.com/static/reference/styleguide/" title="http://www.starbucks.com/static/reference/styleguide/">http://www.starbucks.com/static/ref...</a> : Guide de style (html, css) en provenance de ... starbucks. Plutôt sympa, document assez bien fait</li>
<li><a href="http://julien.dollon.net/post/Plonger-dans-la-vague-elle-fera-moins-mal.aspx" title="http://julien.dollon.net/post/Plonger-dans-la-vague-elle-fera-moins-mal.aspx">http://julien.dollon.net/post/Plong...</a> : comment ça ce n'est pas une bonne idée de s'enfermer dans des technologies, qui plus est propriétaires ?</li>
<li><a href="http://www.infoq.com/presentations/Want-Better-Estimates-Stop-Estimating" title="http://www.infoq.com/presentations/Want-Better-Estimates-Stop-Estimating">http://www.infoq.com/presentations/...</a> : Présentation très intéressante sur la problématique des estimations pour les développements de logiciels (mais pas que finalement)</li>
<li><a href="http://www.infoq.com/presentations/A-Quick-Tour-of-Dart" title="http://www.infoq.com/presentations/A-Quick-Tour-of-Dart">http://www.infoq.com/presentations/...</a> : Présentation rapide de Dart</li>
<li><a href="http://tauday.com/tau-manifesto" title="http://tauday.com/tau-manifesto">http://tauday.com/tau-manifesto</a> : et si Pi n'était pas la meilleur manière de décrire un cercle ?</li>
<li><a href="http://acko.net/blog/making-love-to-webkit/" title="http://acko.net/blog/making-love-to-webkit/">http://acko.net/blog/making-love-to...</a> : un site <strong>vraiment</strong> intéressant ! A regarder avec un moteur webkit (chrome, safari par exemple)</li>
<li><a href="http://romy.tetue.net/points-de-suspension" title="http://romy.tetue.net/points-de-suspension">http://romy.tetue.net/points-de-sus...</a> : au cas ou vous auriez oublié comment on place des points de suspension…</li>
<li><a href="http://www.inc.com/margaret-heffernan/why-flexible-hours-inspire-achievement.html" title="http://www.inc.com/margaret-heffernan/why-flexible-hours-inspire-achievement.html">http://www.inc.com/margaret-heffern...</a> : et si avoir des heures de travail flexibles était une meilleur chose</li>
</ul>pfiou ... some newsurn:md5:e6e5a89f6f055ec3789562320edd1a762010-12-02T21:52:00+01:002010-12-02T21:52:21+01:00CrEvDiversagileArthurgitLifelyonmercurialmotoscrumtwitter <p>Et be ... bientôt un an que je n'ai pas posté sur ce blog...
Un peu de lassitude, beaucoup de problèmes perso, etc.</p>
<p>De manière rapide, mon fils Arthur a fait deux passages supplémentaires à l'hôpital dont une très lourde opération à coeur ouvert. Il est désormais tranquil pour quelques années (10 - 15 à priori). Il vient par contre de souffler sa première année !</p>
<p>Côté moto, il a fallu que je change le collecteur, il me reste à changer les plaquettes.</p>
<p>Côté taff, pas mal de nouvelles choses. Entre autre (qui seront peut-être développées plus tard...) passage à mercurial pour le gestionnaire de source, et utilisation prochaine d'une méthode basée sur scrum. Youhou ! La suite c'est développement de notre nouvelle solution sur une base hadoop, architecture serveur cluster ala google, vraiment intéressant.</p>
<p>Dans les autres news, je me suis marié le 17 avril ! Très content ! Merci ma petite femme !</p>
<p>Si vous voulez lire un bouquin sympa, allez voir du côté de ReWork (37 signals). Vraiment très intéressant !</p>
<p>Voilou, surement des news plus tard. Sans garantie, mais souhaitable, en vrac : fichiers de conf pour git et mercurial, informations sur les méthodes agiles, scrum, etc. Pourquoi pas un peu de code.</p>
<p>En parallèle, je teste twitter, a voir si ça sert à quelque chose ;-) : <a href="http://twitter.com/#!/_crev_" hreflang="fr">mon compte twitter</a></p>
<p>A+ pour de nouvelles avantures</p>