CrEv's blog - DevelDe 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,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"
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>Quand Murphy veut jouer...urn:md5:8caafa3edc265318f363466a33859b1e2012-06-11T14:32:00+02:002012-06-11T13:29:29+02:00CrEvDevelmaintenanceserveur <p>Le gros des perturbations est enfin passé.</p>
<p>Perturbations ? Ben oui, tout à commencé par la freebox tv : impossible d'avoir la tv. Free m'a déjà fait le coup la semaine dernière, un problème chez eux.</p>
<p>Ok, c'est pas bien grave je pense. Tiens, si j'allais voir sur l'aduf ou ailleurs si quelqu'un se plaint. Heu... Attends... plus d'accès net O_o. Ha non, c'est plus de wifi sur le mac. Tiens, étrange. Ca doit être pour ça que mon téléphone s'est déconnecté du wifi lui aussi.</p>
<p>Etrange, mais c'est surement pas grave, un petit reboot de la freebox et ça devrait aller. Reboot... ... ... (oui c'est quand même long) Heure ! Pfiou, j'ai cru que c'était mort, mais non !</p>
<p>Ha ben si, toujours pas de wifi. Il ne le trouve même plus. Oulà, ça commence à gaver là.</p>
<p>Bon, je ressort un cable ethernet et je branche le mac... ... Supaÿr ! ha ben non, pas super, j'ai pas d'IP. Génial !</p>
<p>Alors, là ... ben il ne reste plus qu'à débrancher / rebrancher la freebox pour la réinitialiser. Hop hop.</p>
<p>Branché en direct (plus routeur) et ça fonctionne. Pfiou !</p>
<p>Un petit test de ping. Ok, ça roule. Tout semble ok (ha oui, vu que j'héberge blogs, sites et outils divers, mails - surtout - ça me gave vite quand la connexion tombe, surtout dans le contexte actuel où j'ai vraiment besoin de mes mails)</p>
<p>Je vais sur l'interface de free, je vois que mes paramètres sont tous là, ça me semble ok. Bon, on repasse en routeur (obligatoire, j'ai plusieurs machines derrière et pour rien je ne voudrais être en direct sur le grand nain ternaite.</p>
<p>Reboot... ... ... J'ai une ip. Ben oui, tout est ok.</p>
<p>Par contre c'est étrange le net est quand même super lent.
Nan mais attends, c'est pas le que net, c'est en local que c'est super lent aussi.</p>
<blockquote><p>ping 192.168.0.254<br />
55% de paquets perdus, moyenne de 90ms</p></blockquote>
<p>Ha oué, quand même !</p>
<p>Je désactive le routeur -> OK Je réactive le routeur -> KO</p>
<p>Bon, c'est la merde.</p>
<p>Je désactive le routeur pour avoir un accès au net, je commence à bouger mes DNS pour que mon MX pointe chez mon hébergeur (enfin un autre), disons que ça sert de MX secondaire (oui je devrais toujours l'activer et récupérer le courrier si mon serveur n'est pas assez rapide. Oui, je sais, ça viendra un jour...)</p>
<p>Evidemment c'est pas aussi simple, la config est chiante à changer, mais je fini pas réussir. Je fais quelques tests dans tous les sens et ça fonctionne. J'ai tout de même une boite mail (enfin deux) qui n'est pas accessible, je n'en maîtrise pas les DNS donc je ne peux rien faire. Ca serait pas mal que ça ne dure pas trop longtemps.</p>
<p>Problème supplémentaire : j'utilise la freebox comme switch, donc je ne peux plus accéder à mon serveur qui est juste à côté. Qu'à cela ne tienne, je vais remettre en route mon routeur perso, il doit être déjà configuré. Ha ben ça fonctionne pas... Supaïr ! Pas grave, je vais au moins brancher mon switch. Heu... il est bien alimenté mais ne fonctionne pas, il ne trouve aucun de mes cables. Re-Supaïr ! Heureusement j'ai encore un switch qui trainait. Lui il fonctionne ! Pfiou !</p>
<p>Une fois que j'ai un peu fait le tour, je pense simplement que la freebox est morte. C'est pas comme si j'avais déjà claqué le wifi d'une boite tv il y a quelques temps.</p>
<p>J'appel la hotline de free, un samedi matin. Et vous savez quoi ? Ben je suis tombé sur quelqu'un rapidement, et en plus quelqu'un de compétent. Ben c'est quand même bien cool, et pas du tout comme on pourrait le croire, qu'on dit que c'est rien que des mauvais. Donc très bonne surprise.</p>
<p>On réalise quelques tests, on en vient à tout débrancher (tous les cables ethernet). Et là, le drame. Enfin façon de parler. J'ai des perfs correctes. Aucun problème.</p>
<p>Je rebranche : ça déconne.</p>
<p>Et merde.</p>
<p>Au final, il semble qu'il y ait eu deux problèmes, relativement simultanés et similaires (oui je passe une ou deux étapes) :</p>
<ul>
<li>la carte réseau de mon serveur ne fonctionne pas correctement, quelques secondes après que je branche le cable tout part en vrac.</li>
<li>je n'arrive plus à faire communiquer freebox et boitier tv en CPL. J'en suis rendu à faire du wifi.</li>
</ul>
<p>J'ai quand même l'impression que la carte réseau et le CPL ont merdés... c'est moche quand même.</p>
<p>Ha mais je vous ai pas dit, c'est mon <em>ancien</em> serveur. Le nouveau est ... sans boitier sur le bureau. Heureusement c'est le nouveau qui gère mes mails, donc ça c'est ok. Par contre, mes sites webs sont encore sur l'ancien, ainsi que des données. Oups. Et comment faire sans réseau ? Bon, ben on va descendre le serveur de son armoire et brancher un disque externe. On va aussi y brancher un clavier et un écran.</p>
<p>Ok, là ça va, je gère. Sauf que ...</p>
<p>L'interface graphique (gdm) est en qwerty. Ha oui, et en fait j'ai aucun bureau d'installé, il ne reste que 30Mo de dispo sur la machine. Mon clavier est un azerty. Et histoire de rigoler, j'arrive pas à faire un CTRL ALT F1 pour balancer une console.</p>
<p>Vraiment génial tout ça !</p>
<p>Bon, après avoir tourné le problème un moment, rebranché 20x le cable, rien ne fonctionne. Voici donc la solution :</p>
<ul>
<li>reboot</li>
<li>passage en mode interactif (c'est quand même génial)</li>
<li>répondre oui à tout sauf à DM (interface)</li>
<li>taper oui trop vite, zapper la ligne DM</li>
<li>recommencer sans se tromper</li>
</ul>
<p>J'arrive sur un tty, cool. Je tape mon login, password. Ca fonctionne pas. Je recommence. Ca fonctionne pas. Ha ok, cette fois ci je suis en azerty. Et be...</p>
<p>Au final ça fonctionne plutôt bien, et je récupère même le réseau. J'ai comme l'impression que le reboot a réglé le problème de la carte réseau. M'enfin, déjà que j'ai perdu un disque de mon raid5, c'est un peu la merde. Faudrait peut-être que je finisse la migration des services.</p>
<p>J'ai donc passé une partie de la soirée à migrer des dotclear, hyla, jyraphe et autre entre mes serveurs. J'en ai profité pour installer un owncloud, ça me tente pas mal cette solution. Je pense que c'est un vrai bon truc pour m'affranchir de hyla tout en étant beaucoup plus complet. Enfin faut que je vois tout ça en détail, c'est juste installé pour le moment.</p>
<p>Résultat, le blog que vous consultez a migré de serveur, c'est maintenant sur une bête de course (enfin un amd X4, 8Go de ram, avec un ESXi et des VM sous mageia). J'en suis plutôt bien content, et je pense que je vais bientôt mettre à jour ma vm web (tout en me permettant de le faire indépendamment de mes mails)</p>
<p>Maintenant il ne me reste plus qu'à migrer des données et finaliser les sauvegardes et la réplication entre mes deux disques. J'ai pas de raid mais je pense juste faire un clone des machines et backup des données / programmes importants, c'est au final le mieux je trouve. Ca demande plus de temps au moment où on remet en route mais on repart sur quelque chose de plus propre en général. Bon c'est aussi que mon raid n'étant pas matériel sur cette machine je n'ai pas pu installer l'ESXi en raid. Et je voulais tester ce produit, c'est quand même bien sympa.</p>
<p>Voici pour les péripéties du week end !</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>Load un peu trop haut...urn:md5:d0273a26899cd0e7110e7074236c97332011-08-23T13:53:00+02:002011-08-23T12:54:42+02:00CrEvDevelmaintenanceserveur <p>Il y a peu de temps, je n'arrivais plus à accéder à mes sites, mails, etc.
Et en plus impossible de se connecter convenablement à mon serveur (oué, denyhosts c'est amusé à blacklisté mon adresse locale... dur dur...)</p>
<p>Une fois connecté sur une machine, puis sur l'autre, etc j'arrive à l'une semblant plus ramer que les autres. Un petit uptime plus loin :</p>
<blockquote><p>13:29:51 up 12 days, 21:49, 2 users, load average: 61.02, 50.37, 46.42</p></blockquote>
<p>Ouch, ça fait mal !</p>
<p>Un load de 61 sur une vm relativement moyenne, ben ça fonctionne pas très bien.</p>
<p>A priori c'est apache qui est parti en caraf... Si j'ai le temps j'essairai de remonter dans les logs pour comprendre exactement, mais je penche plutôt pour juste apache tout seul comme un grand (bon, c'est rare quand même).</p>
<p>Voilou, très sympa de devoir se plonger là dedans pile au moment de manger (mais quelle idée de vouloir regarder ses mails aussi...)</p>bouffage de spamurn:md5:8e127c77e5e614526af9cceeb20d10632009-12-28T22:59:00+01:002009-12-29T12:21:37+01:00CrEvDevelmaintenancerblserveurspam <p>A la fois mes mails et mes sites web sont hébergés sur une machine personnelle (enfin plusieurs, enfin une ... vive la virtualisation)</p>
<p>Evidemment, un problème hyper fréquent et très gonflant est apparu petit à petit : le spam ! A la fois par mail ou par http (par exemple commentaires spam)</p>
<p>Après pas mal d'errance, j'ai enfin trouvé une solution assez puissante : <a href="http://fr.wikipedia.org/wiki/Anti-spam#.C2.AB_Realtime_Blackhole_List_.C2.BB" hreflang="fr">les RBL</a>. En gros, une liste distante de serveurs à interdire. Si le mail ou le trafic provient d'une url présente dans la liste, alors le mail est rejeté, ou le client http interdit.</p>
<p>Pour ce qui est de mon serveur apache (uniquement sur le frontal en réalité) j'ai utilisé le module <a href="http://sourceforge.net/projects/mod-spamhaus/" hreflang="en">apache-mod_spamhaus</a>. Celà a suffit à réduire pas mal de trafic (faudrait que je trouve comment avoir des stats là dessus, la seul donnée que j'ai provient de la lecture des logs) et par la même les spams sur blogs.</p>
<p>Pour ce qui est de mon serveur de mail (postfix) j'ai utilisé cette liste associée à plusieurs directives intéressantes permettant d'interdire tout mail provenant d'un serveur n'ayant pas de hostname (entre autre)
Voici donc une partie de ma config :</p>
<p>Définition des listes de domaines à interdire :</p>
<pre>
maps_rbl_domains = blackholes.mail-abuse.org, xbl.spamhaus.org
</pre>
<p>Rejette la requête lorsque l'adresse de l'expéditeur fournie n'a pas de correspondance MX ou DNS ou si l'expéditeur est dans les maps rbl.</p>
<pre>
smtpd_recipient_restrictions = ...
reject_unknown_sender_domain,
...
reject_rbl_client sbl-xbl.spamhaus.org
</pre>
<p>Rejette les mails provenant de clients dont la résolution de nom est impossible, rejette les mails dont le client est dans les maps rbl.</p>
<pre>
smtpd_client_restrictions = permit_mynetworks,
reject_unknown_client, reject_maps_rbl
</pre>
<p>Toujours le même principe ...</p>
<pre>
smtpd_sender_restrictions = reject_unknown_sender_domain,
reject_non_fqdn_sender,
reject_maps_rbl,
...
</pre>
<p>Avec tout ça, j'ai réduit de manière très importante les spams parvenant au serveur. En gros, au lieu de faire travailler un antispam (j'ai quand même spamassassin qui tourne) je refuse les mails au plus tôt. En moins d'une journée, j'ai déjà eu de l'ordre de 300 mails rejetés, ce qui est plutôt pas mal.</p>
<p>Pour le moment, c'est la meilleur configuration que j'ai trouvé ;)</p>Maintenance serverurn:md5:404046f8bbb65327a9ad18b4167cc4f02009-09-15T20:35:00+02:002009-09-15T19:43:34+02:00CrEvDevelmaintenanceserveur <p>Le serveur vient d'être mis à jour, passage de mandrive 2007.1 à 2009.1 virtualisé (avec kvm).</p>
<p>Ceci explique évidemment tout problème que vous pourriez (ou avez) rencontrer.</p>
<p>Retour à la normale prévu dans les prochains jours.</p>Mise à jour...urn:md5:3c90fd22a18134bc5a7b2c2d3e488e382008-09-20T20:30:22+00:002008-09-20T20:30:22+00:00CrEvDevelserveur <p>... du ventilo d'alimentation...</p>
<p>Après la coupure de service d'hier du aux travaux dans la rue, une coupure cette après midi du à un arrêt du ventilateur d'alimentation. Pire que ça, le ventilateur est grillé mais la commande aussi, j'ai du le brancher sur l'alim, comme les autres ventilateurs du boitier.</p>
<p>Maintenant, il ne me reste plus qu'à finir les expérimentations concernant xen, histoire de migrer le serveur vers un multi virtualisé.</p>xenurn:md5:22a50017870213130367e36743938d232008-01-10T21:23:33+00:002008-04-08T12:37:59+00:00CrEvDevellinuxserveurvirtualisationxen <blockquote><p>$ grep svm /proc/cpuinfo<br />
flags : fpu vme de pse tsc msr pae mce cx8 apic sep mtrr pge mca cmov pat pse36 clflush mmx fxsr sse sse2 ht syscall nx mmxext fxsr_opt rdtscp lm 3dnowext 3dnow pni cx16 lahf_lm cmp_legacy <strong>svm</strong> extapic cr8legacy 3dnowprefetch ts fid vid ttp tm stc 100mhzsteps
flags : fpu vme de pse tsc msr pae mce cx8 apic sep mtrr pge mca cmov pat pse36 clflush mmx fxsr sse sse2 ht syscall nx mmxext fxsr_opt rdtscp lm 3dnowext 3dnow pni cx16 lahf_lm cmp_legacy <strong>svm</strong> extapic cr8legacy 3dnowprefetch ts fid vid ttp tm stc 100mhzsteps</p></blockquote>
<p>Tout ça pour dire que je ne le savais pas, mais mon serveur supporte la virtualisation hardware ;-)</p>
<p>Donc d'ici quelques temps, quelques articles sur Xen à base de Mandriva (et bsd je pense aussi) !</p>Déménagement ... machineurn:md5:23c589b1cfbda8f7e4c3be6484aa07222007-11-04T22:14:17+00:002008-04-08T12:38:19+00:00CrEvDevelmaintenanceserveur <p>Bisoir !</p>
<p>Suite à un petit week-end prolongé (que c'est bon les rtt ;-) ) me voici revenu de Lorraine avec <q>vega</q> notre serveur.</p>
<p>Le trajet c'est plutà´t bien passé il me semble, le voici avec ça nouvelle adresse ip lyonnaise...</p>
<p>Maintenant, il faut que je remette en route l'ensemble des services, surtout mpd et icecast pour avoir ma musique au boulot ;-)</p>
<p>A part ça, je suis revenu encore une fois avec la voiture bien chargée (d'affaires, de planches pour les étagères, de mes quelques maquettes qui sont en route depuis plusieurs années, ...). Le déménagement final est prévu dans 2 semaines !</p>
<p>/me s'en va reconfigurer son serveur ;-)</p>Rails et son serveur intégré...urn:md5:b7817e52c5348627d4803bf440d789bc2007-01-19T18:51:34+00:002007-01-19T18:51:34+00:00CrEvDevel <p>Je suis en train de tester quelques petites choses sous <a href="http://www.rubyonrails.org/" hreflang="en">Ruby on Rails</a> et je viens de découvrir une belle connerie (en tout cas avec une version 1.1.6).</p>
<p>J'ai commencé par faire :</p>
<pre>rails test</pre>
<p>ce qui a bien marché, j'ai ensuite fait :</p>
<pre>cd test/script
./server</pre>
<p>Je vais ensuite dans mon browser sur http://127.0.0.1:3000 et je clic sur <q>About your applicationà¢â‚¬â„¢s environment</q> et j'ai -> <q>Application error (Rails)</q></p>
<p>Je me dit que j'ai du me gourrer quelque part, qu'il traine un petit bug qq part, tant pis je test un petit controller tout con -> <q>Application error (Rails)</q></p>
<p>Là Â je commence à Â me poser quelques questions...</p>
<p>Après recherche, il se trouve simplement qu'en lançant le serveur à Â la base de l'application rails par</p>
<pre>./script/server</pre>
<p>l'erreur n'apparait plus et tout fonctionne à Â merveille !</p>
<p>Voilà Â , un quart d'heure de prise de tête pour un script qu'il ne faut pas lancer n'importe comment ! (c'est tout de même assez étrange comme cas...)</p>
<p>Bon, sur ce j'y retourne ;-)</p>Quel(s) langage(s) intéressant(s) ?urn:md5:da28a4d615dcd28c823ac29fdea96bf22006-08-02T16:28:48+00:002007-01-13T12:27:31+00:00CrEvDevel <p>En voilà Â une bien bonne question...</p>
<p>Dans le but d'apprendre, de s'amuser, quels sont les langages les plus intéressants ?</p>
<p>Pour le moment je touche surtout à Â :</p>
<ul>
<li><strong>C++</strong> : j'en fais pas mal en ce moment, mais bon c'est pas très plaisant...</li>
<li><strong>C#</strong> : j'en fais aussi pas mal, c'est déjà Â un peu mieux mais c'est pas encore ça</li>
<li><strong>javascript</strong> : plus sympa qu'il n'y parait, programmation orientée prototypes (programmation object différente de la programmation par classes), utilisation massive des fonctions anonymes</li>
</ul>
<p>Mais j'ai aussi fais un peu de :</p>
<ul>
<li><strong>perl</strong> : sà »rement le langage que je préfère, très expressif</li>
<li><strong>php</strong> : classique, mais encore sympa</li>
<li><strong>assembleur</strong> : pas forcément toujours très <em>fun</em> mais au combien intéressant</li>
<li><strong>lisp</strong> : un tout petit peu, c'était pour faire un mod sous emacs</li>
</ul>
<p>J'ai déjà Â entendu parlé de ruby, python mais je n'y ai jamais touché..</p>
<p>Quels langages me conseillerez vous dans l'unique but d'apprendre, de s'amuser, de découvrir autre chose ?</p>Trac - BrainOfReplacementurn:md5:2e2fd9a7b087259aa61a10c9055d32862005-10-26T10:44:28+00:002007-01-13T12:25:30+00:00CrEvDevel <p>Comme j'oublie toujours tout ce que je dois faire, j'ai commencé un petit programme permettant de gérer mes tà¢ches facilement.</p>
<p>Evidemment j'aurais pu utiliser des logiciels existant, kontact par exemple ou outlook mais ça ne me convient pas, la vue ne me convient pas.</p>
<p>En réalité ce que je prépare est uniquement un gestionnaire de tà¢che et permetra d'en extraire des listes telles que les changelog et les ToDo.</p>
<p>Pour le moment c'est en c#, sous windows. En effet, mon mono marche pas très bien et qt n'est toujours pas bindé et surtout j'ai horreur de gtk... Et comme je vais normalement travaillé sous windows, ça pourra me servir.</p>
<p>J'utilise pour développer la plateforme trac ( <a href="http://www.edgewall.com/trac/">http://www.edgewall.com/trac/</a> ) qui intéègre dans une même interface un wiki, un bug tracker, svn et la gestion roadmap / timeline.
L'interface est vraiment pratique et très agréable à Â utiliser.</p>
<p>Pour ce projet, l'adresse est <a href="http://trac.winsos.net/bor/">http://trac.winsos.net/bor/</a> (attention à Â bien mettre le dernier slash, je corrigerai plus tard ce problème)</p>
<p>Les sources sont téléchargeables sans problèmes, j'expliquerai bientà´t la mise en oeuvre (comment utiliser) mais c'est assez simple. Le tout est prévu pour fonctionner sous visual studio 2003 (j'ai réussi à Â avoir un licence pas cher alors autant l'utiliser...) mais on doit pouvoir en faire autre chose quand même ;-)</p>