work on styling the example blog

mna · Jul 12, 2013 · 52b828f · 52b828f
1 parent 3e97a37
commit 52b828f
Show file tree

Hide file tree

Showing 13 changed files with 246 additions and 86 deletions.
diff --git a/example/public/002-meta-billet b/example/public/002-meta-billet
@@ -14,8 +14,19 @@
 		<div class="header">
 			<a href="/">Some Name</a>
 		</div>
-		<h1>Martin Angers</h1>
 		<article>
+			<nav>
+				<ul>
+					<li class="prev">
+					</li>
+					<li class="current">
+						<span>Méta-billet: un mot sur le Calepin!</span>
+					</li>
+					<li class="next">
+						<a href="003-dependances">npm: la base essentielle pour débuter avec node.js >></a>
+					</li>
+				</ul>
+			</nav>
 			<div><p>Il existe de nombreux moteurs de blogue gratuits sur internet, tels <a href="http://wordpress.org/">Wordpress</a>, <a href="http://blogger.com/">Blogger</a> et <a href="https://www.tumblr.com/">Tumblr</a>. Pourquoi avoir jeté l&rsquo;ancre sur ce discret et modeste <a href="http://calepin.co/">Calepin</a>? Peut-être un peu pour ça, tiens, pour me tenir loin des tumultes de ces méga-centres urbains du Web. Un peu aussi pour ce <em>design</em> minimaliste, centré sur le contenu, sur les mots. Et un peu pour deux qualités franchement moins romantiques: <em>dropbox</em> et <em>markdown</em>.</p>
 
 <h3>Mes billets, mon coffret</h3>
@@ -65,8 +76,5 @@ Et voici une *emphase*, et _une autre_ avec une syntaxe alternative.
 <p>Voilà. Il y a quelques options mineures au niveau des méta-données de chaque article et une configuration pour le site, principalement des valeurs par défaut, mais rien de renversant, et ce <em>par choix</em>.  Pas de blogoliste (<em>blog roll</em>), de nuage de mots-clefs (<em>tag cloud</em>), de catalogue de thèmes dans tous les tons de marron, de barre de partage pour trente-douze gazillions de sites sociaux. C&rsquo;est la sympathique personnalité du Calepin, minimaliste jusqu&rsquo;au bout!</p>
 </div>
 		</article>
-		<div class="pager">
-			<a href="003-dependances">npm: la base essentielle pour débuter avec node.js >></a>
-		</div>
 	</body>
 </html>
diff --git a/example/public/003-dependances b/example/public/003-dependances
@@ -14,8 +14,20 @@
 		<div class="header">
 			<a href="/">Some Name</a>
 		</div>
-		<h1>Martin Angers</h1>
 		<article>
+			<nav>
+				<ul>
+					<li class="prev">
+						<a href="002-meta-billet">&lt;&lt; Méta-billet: un mot sur le Calepin!</a>
+					</li>
+					<li class="current">
+						<span>npm: la base essentielle pour débuter avec node.js</span>
+					</li>
+					<li class="next">
+						<a href="004-npm-packages">npm shrinkwrap: Comment contrôler ses dépendances >></a>
+					</li>
+				</ul>
+			</nav>
 			<div><p>La plateforme node.js est <a href="https://github.com/joyent/node/wiki/node-core-vs-userland">volontairement limitée</a>, en son coeur, aux fonctionnalités les plus fondamentales. Elle mise donc sur les contributions - souvent époustouflantes, <a href="http://hypermegatop.calepin.co/propulse-par-nodejs.html">j&rsquo;en parle ici</a> - de sa communauté pour enrichir le noyau et repousser les limites du possible.</p>
 
 <p>Avec près de 8000 librairies pullulant dans son écosystème, il y a sérieux danger de chaos. Et si on y retrouve plutôt quelque chose comme une belle organisation, c&rsquo;est en bonne partie grâce à la colonne vertébrale qui unit et soutient cette terre fertile, le gestionnaire de librairies <a href="http://npmjs.org/">npm</a>. Présentation, trucs et astuces dans les lignes qui suivent.</p>
@@ -112,12 +124,5 @@ jscoverage  jscoverage module for node.js  =kate.sf  2012-02-28 02:11
 <p>Dans un prochain article j&rsquo;aborderai les commandes davantage liées à une librairie spécifique, son fichier <code>package.json</code>, et les bonnes pratiques (toujours en évolution!) pour la gestion des dépendances d&rsquo;une application node.</p>
 </div>
 		</article>
-		<div class="pager">
-
-			<a href="002-meta-billet">&lt;&lt; Méta-billet: un mot sur le Calepin!</a>
-		</div>
-		<div class="pager">
-			<a href="004-npm-packages">npm shrinkwrap: Comment contrôler ses dépendances >></a>
-		</div>
 	</body>
 </html>
diff --git a/example/public/004-npm-packages b/example/public/004-npm-packages
@@ -14,8 +14,20 @@
 		<div class="header">
 			<a href="/">Some Name</a>
 		</div>
-		<h1>Martin Angers</h1>
 		<article>
+			<nav>
+				<ul>
+					<li class="prev">
+						<a href="003-dependances">&lt;&lt; npm: la base essentielle pour débuter avec node.js</a>
+					</li>
+					<li class="current">
+						<span>npm shrinkwrap: Comment contrôler ses dépendances</span>
+					</li>
+					<li class="next">
+						<a href="005-structurer-express">Structurer une application Web avec Express et Node.js >></a>
+					</li>
+				</ul>
+			</nav>
 			<div><p>Utiliser une librairie existante permet d&rsquo;ajouter rapidement des fonctionnalités à une application, et de concentrer ses efforts sur les nouveautés, les spécificités de son projet, plutôt qu&rsquo;à réinventer la roue. Cependant, chaque librairie utilisée devient une dépendance, et une dépendance est un risque. Un risque car notre code dépend maintenant de ce corps étranger sur lequel on a généralement peu ou pas de contrôle. Les meilleures pratiques pour limiter ce risque ont évolué rapidement sur la plateforme node.js ces derniers mois.</p>
 
 <blockquote>
@@ -126,12 +138,5 @@ mime@1.2.5 ./node_modules/express/node_modules/connect/node_modules/mime current
 <p>Un mot en terminant sur le <a href="http://search.npmjs.org/">registre</a>, je mentionnais dans mon <a href="http://hypermegatop.calepin.co/npm-la-base-essentielle-pour-debuter-avec-nodejs.html">dernier article sur npm</a> qu&rsquo;il était nécessaire de se créer un compte pour utiliser certaines commandes. Et bien une brèche de sécurité a été découverte (et corrigée). Un courriel a été envoyé par Isaac à tous ceux qui avaient fourni une adresse valide, mais je sais qu&rsquo;il a eu des problèmes avec GMail et certains n&rsquo;ont pas reçu l&rsquo;information, donc si c&rsquo;est votre cas, assurez-vous de consulter ce <a href="https://gist.github.com/2001456">gist</a> qui reprend le contenu du courriel et les étapes à suivre pour sécuriser votre compte.</p>
 </div>
 		</article>
-		<div class="pager">
-
-			<a href="003-dependances">&lt;&lt; npm: la base essentielle pour débuter avec node.js</a>
-		</div>
-		<div class="pager">
-			<a href="005-structurer-express">Structurer une application Web avec Express et Node.js >></a>
-		</div>
 	</body>
 </html>
diff --git a/example/public/005-structurer-express b/example/public/005-structurer-express
@@ -14,8 +14,20 @@
 		<div class="header">
 			<a href="/">Some Name</a>
 		</div>
-		<h1>Martin Angers</h1>
 		<article>
+			<nav>
+				<ul>
+					<li class="prev">
+						<a href="004-npm-packages">&lt;&lt; npm shrinkwrap: Comment contrôler ses dépendances</a>
+					</li>
+					<li class="current">
+						<span>Structurer une application Web avec Express et Node.js</span>
+					</li>
+					<li class="next">
+						<a href="006-dependency-injection">Expérimentations sur l&#39;injection de dépendance avec node.js >></a>
+					</li>
+				</ul>
+			</nav>
 			<div><p>** MISE À JOUR ** (22 mars 2012) : J&rsquo;ai mis un exemple (simpliste, mais fonctionnel) de la structure suggérée dans ce billet sur GitHub, <a href="https://github.com/PuerkitoBio/express-boilerplate">express-boilerplate</a>.</p>
 
 <hr />
@@ -114,12 +126,5 @@ app.get('/', routes.index);
 <p>Est-ce que votre organisation du code ressemble à ça? Utilisez-vous quelque chose de radicalement différent? Faites-en part dans les commentaires!</p>
 </div>
 		</article>
-		<div class="pager">
-
-			<a href="004-npm-packages">&lt;&lt; npm shrinkwrap: Comment contrôler ses dépendances</a>
-		</div>
-		<div class="pager">
-			<a href="006-dependency-injection">Expérimentations sur l&#39;injection de dépendance avec node.js >></a>
-		</div>
 	</body>
 </html>
diff --git a/example/public/006-dependency-injection b/example/public/006-dependency-injection
@@ -14,8 +14,20 @@
 		<div class="header">
 			<a href="/">Some Name</a>
 		</div>
-		<h1>Martin Angers</h1>
 		<article>
+			<nav>
+				<ul>
+					<li class="prev">
+						<a href="005-structurer-express">&lt;&lt; Structurer une application Web avec Express et Node.js</a>
+					</li>
+					<li class="current">
+						<span>Expérimentations sur l&#39;injection de dépendance avec node.js</span>
+					</li>
+					<li class="next">
+						<a href="007-implement-js">implement.js: typage fort et Javascript >></a>
+					</li>
+				</ul>
+			</nav>
 			<div><p>L&rsquo;injection de dépendance (<em>dependency injection</em>) permet de découpler les différentes composantes d&rsquo;une application pour en faciliter l&rsquo;entretien, la testabilité, circonscrire l&rsquo;impact des changements, mais aussi pour imposer une façon d&rsquo;aborder la création de l&rsquo;application en une aggrégation de pièces simples, à la responsabilité ciblée, et à l&rsquo;API bien défini. Elle a comme effet secondaire, règle générale, une meilleure architecture.</p>
 
 <p>Dans les langages de programmation orientés-objet statiques, tels C# ou Java, le patron (<em>pattern</em>) d&rsquo;injection de dépendance prend la forme d&rsquo;une interface ou d&rsquo;une classe abstraite, d&rsquo;une (ou plusieurs) implémentation de cette interface, et d&rsquo;un <em>assembleur</em>, responsable de créer l&rsquo;instance concrète d&rsquo;une implémentation de l&rsquo;interface, et de l&rsquo;injecter dans un objet &ldquo;client&rdquo; de la dépendance. <a href="http://martinfowler.com/articles/injection.html">Martin Fowler a écrit un brillant article sur le sujet</a>, c&rsquo;est une lecture essentielle pour approfondir ce patron.</p>
@@ -75,12 +87,5 @@ module.exports = server;
 <p>C&rsquo;est ce qu&rsquo;il manque, à mon avis, aux solutions actuelles sous Javascript. Quelque chose pour valider que le contrat attendu par le &ldquo;client&rdquo; soit respecté par la dépendance fournie. J&rsquo;ai quelques idées sur le sujet, on verra si ça mûrira, gardez l&rsquo;oeil sur <a href="https://github.com/PuerkitoBio/express-boilerplate">le référentiel GitHub</a>, et si vous avez commentaires et suggestions, l&rsquo;espace ci-bas est là pour ça!</p>
 </div>
 		</article>
-		<div class="pager">
-
-			<a href="005-structurer-express">&lt;&lt; Structurer une application Web avec Express et Node.js</a>
-		</div>
-		<div class="pager">
-			<a href="007-implement-js">implement.js: typage fort et Javascript >></a>
-		</div>
 	</body>
 </html>
diff --git a/example/public/007-implement-js b/example/public/007-implement-js
@@ -14,8 +14,20 @@
 		<div class="header">
 			<a href="/">Some Name</a>
 		</div>
-		<h1>Martin Angers</h1>
 		<article>
+			<nav>
+				<ul>
+					<li class="prev">
+						<a href="006-dependency-injection">&lt;&lt; Expérimentations sur l&#39;injection de dépendance avec node.js</a>
+					</li>
+					<li class="current">
+						<span>implement.js: typage fort et Javascript</span>
+					</li>
+					<li class="next">
+						<a href="008-backbone-computed-properties">Propriétés calculées avec Backbone >></a>
+					</li>
+				</ul>
+			</nav>
 			<div><p>L&rsquo;injection de dépendance (<em>dependency injection</em>) avec Javascript a comme conséquence de ne pouvoir assumer que les fonctionnalités offertes par l&rsquo;instance reçue seront celles attendues. Dans les langages statiques, l&rsquo;injection est généralement basée sur une interface, qui assure au module &ldquo;client&rdquo; la disponibilité d&rsquo;un ensemble de fonctionnalités. Le contrat imposé par l&rsquo;interface est assurément respecté. Dans un langage dynamique comme Javascript, il n&rsquo;y a rien de tel.</p>
 
 <p>Ce qui laisse deux options aux développeurs Javascript: l&rsquo;acte de foi ou la validation manuelle de l&rsquo;objet reçu. J&rsquo;en parlais dans <a href="http://hypermegatop.calepin.co/experimentations-sur-linjection-de-dependance-avec-nodejs.html">mon dernier billet</a>, j&rsquo;avais l&rsquo;impression qu&rsquo;il manquait quelque chose à ce niveau.</p>
@@ -31,12 +43,5 @@
 <p>Les prochaines étapes sont assez simples, je vous invite à essayer la librairie, si vous croyez qu&rsquo;elle peut être utile dans vos projets. N&rsquo;hésitez pas à la faire partager avec vos collègues développeurs, et à <a href="https://github.com/PuerkitoBio/implement.js/issues">ouvrir un rapport d&rsquo;anomalie</a> au besoin. Encore mieux, si vous le pouvez, soumettez un correctif (un <em>pull request</em>). Je prévois ajouter la documentation de l&rsquo;API avec <a href="http://en.wikipedia.org/wiki/JSDoc">JSDoc</a> sous peu, et possiblement rendre la librairie disponible dans le fureteur.</p>
 </div>
 		</article>
-		<div class="pager">
-
-			<a href="006-dependency-injection">&lt;&lt; Expérimentations sur l&#39;injection de dépendance avec node.js</a>
-		</div>
-		<div class="pager">
-			<a href="008-backbone-computed-properties">Propriétés calculées avec Backbone >></a>
-		</div>
 	</body>
 </html>
diff --git a/example/public/008-backbone-computed-properties b/example/public/008-backbone-computed-properties
@@ -14,8 +14,20 @@
 		<div class="header">
 			<a href="/">Some Name</a>
 		</div>
-		<h1>Martin Angers</h1>
 		<article>
+			<nav>
+				<ul>
+					<li class="prev">
+						<a href="007-implement-js">&lt;&lt; implement.js: typage fort et Javascript</a>
+					</li>
+					<li class="current">
+						<span>Propriétés calculées avec Backbone</span>
+					</li>
+					<li class="next">
+						<a href="009-je-men-vais">Je suis venu te dire que je m&#39;en vais >></a>
+					</li>
+				</ul>
+			</nav>
 			<div><p>Je travaille actuellement à temps plein sur mon application-en-devenir de <a href="http://www.compterenduweb.com/">Compte Rendu Web</a>. Cette immersion totale en Javascript, <a href="http://nodejs.org/">node.js</a> et <a href="http://backbonejs.org/">Backbone</a> est très intéressante. La beauté de l&rsquo;univers du code libre dans lequel baignent ces technologies est que lorsqu&rsquo;il manque une fonctionnalité, on peut se retrousser les manches, ouvrir le code et l&rsquo;ajouter. Voici ma petite histoire des propriétés calculées (<em>computed properties</em>) avec Backbone.</p>
 
 <h3>Pas encore une controverse Backbone vs Knockout&hellip;</h3>
@@ -69,12 +81,5 @@
 <p>J&rsquo;ai mis le code source dans ce <a href="https://gist.github.com/2371954">gist</a>, car le tout fait à peine 100 <a href="http://en.wikipedia.org/wiki/Source_lines_of_code">sloc</a>, il est probablement préférable de le copier et l&rsquo;insérer dans son modèle Backbone de base (et de le minifier avec son code maison) plutôt que de le distribuer comme une librairie indépendante. Et en plus, le code assume qu&rsquo;il hérite directement de Backbone.Model, alors que ce n&rsquo;est pas forcément le cas. Qui sait, peut-être qu&rsquo;un auteur de librairie Backbone de plus haut niveau sera intéressé à l&rsquo;intégrer dans son cadre de développement (<em>framework</em>).</p>
 </div>
 		</article>
-		<div class="pager">
-
-			<a href="007-implement-js">&lt;&lt; implement.js: typage fort et Javascript</a>
-		</div>
-		<div class="pager">
-			<a href="009-je-men-vais">Je suis venu te dire que je m&#39;en vais >></a>
-		</div>
 	</body>
 </html>
diff --git a/example/public/009-je-men-vais b/example/public/009-je-men-vais
@@ -14,8 +14,20 @@
 		<div class="header">
 			<a href="/">Some Name</a>
 		</div>
-		<h1>Martin Angers</h1>
 		<article>
+			<nav>
+				<ul>
+					<li class="prev">
+						<a href="008-backbone-computed-properties">&lt;&lt; Propriétés calculées avec Backbone</a>
+					</li>
+					<li class="current">
+						<span>Je suis venu te dire que je m&#39;en vais</span>
+					</li>
+					<li class="next">
+						<a href="010-demenagement">Ce blogue a déménagé sur GitHub >></a>
+					</li>
+				</ul>
+			</nav>
 			<div><p>Ou plutôt, &ldquo;je suis venu te dire qu&rsquo;on m&rsquo;évince&rdquo;, mais ça <em>punch</em> moins&hellip; En effet, mon <a href="http://hypermegatop.calepin.co/meta-billet-un-mot-sur-le-calepin.html">coup de foudre</a> pour le blogiciel Calepin aura finalement été son baiser de la mort. <a href="https://twitter.com/#!/calepinapp/status/192335906479415296">Sur Twitter la semaine dernière</a>, via le canal officiel du site, on apprenait que c&rsquo;était la fin des haricots:</p>
 
 <blockquote>
@@ -48,12 +60,5 @@
 <p>Quant au <em>design</em> du site, il sera peut-être minimaliste comme l&rsquo;était Calepin. Ou peut-être pas. Maintenant que je peux faire ce que je veux, je risque d&rsquo;expérimenter certains trucs, particulièrement avec le CSS. Et puis je n&rsquo;ai pas la notoriété d&rsquo;un <a href="http://dcurt.is/">Dustin Curtis</a>, possiblement que plus de tentacules sociales me seraient utiles. Tout ça reste à voir, mais en attendant le signal, c&rsquo;est encore ici, sur <a href="http://hypermegatop.calepin.co/">hypermegatop.calepin.co</a>, que ça se passe. 86&hellip; 85&hellip; 84 jours&hellip;</p>
 </div>
 		</article>
-		<div class="pager">
-
-			<a href="008-backbone-computed-properties">&lt;&lt; Propriétés calculées avec Backbone</a>
-		</div>
-		<div class="pager">
-			<a href="010-demenagement">Ce blogue a déménagé sur GitHub >></a>
-		</div>
 	</body>
 </html>
diff --git a/example/public/010-demenagement b/example/public/010-demenagement
@@ -14,14 +14,21 @@
 		<div class="header">
 			<a href="/">Some Name</a>
 		</div>
-		<h1>Martin Angers</h1>
 		<article>
+			<nav>
+				<ul>
+					<li class="prev">
+						<a href="009-je-men-vais">&lt;&lt; Je suis venu te dire que je m&#39;en vais</a>
+					</li>
+					<li class="current">
+						<span>Ce blogue a déménagé sur GitHub</span>
+					</li>
+					<li class="next">
+					</li>
+				</ul>
+			</nav>
 			<div><p>Suite à l&rsquo;annonce de la <a href="https://twitter.com/#!/calepinapp/status/192335906479415296">fermeture de Calepin.co</a>, j&rsquo;ai déménagé ce blogue sur <a href="http://hypermegatop.github.com/">http://hypermegatop.github.com</a>. Veuillez mettre à jour vos favoris!</p>
 </div>
 		</article>
-		<div class="pager">
-
-			<a href="009-je-men-vais">&lt;&lt; Je suis venu te dire que je m&#39;en vais</a>
-		</div>
 	</body>
 </html>