Skip to content

Commit

Permalink
work on design of example site
Browse files Browse the repository at this point in the history
  • Loading branch information
@mna
mna committed Jul 13, 2013
1 parent 5875e84 commit 8f81116
Show file tree
Hide file tree
Showing 13 changed files with 283 additions and 223 deletions.
36 changes: 20 additions & 16 deletions example/public/002-meta-billet
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,28 +8,32 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/css/normalize.css" />
<link rel="stylesheet" href="/css/main.css" />
<link href="http://fonts.googleapis.com/css?family=Telex" rel="stylesheet" type="text/css" />
</head>
<body>

<div class="header">
<h1>
<a href="/">zero value</a>
<span>A wysiwyg hypertext cybernet</span>
</h1>
<div class="title">
<a href="/">Ø value</a>
<br />
<small>a wysiwyg hypertext cybersite</small>
</div>
</div>
<nav>
<div class="container">
<div class="prev">
<span class="huge">•</span>
</div>
<div class="current">
<span>Méta-billet: un mot sur le Calepin!</span>
</div>
<div class="next">
<a class="huge" href="003-dependances" title="npm: la base essentielle pour débuter avec node.js">»</a>
</div>
<div class="clearfix"></div>
</div>
</nav>
<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>
Expand Down
37 changes: 20 additions & 17 deletions example/public/003-dependances
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,29 +8,32 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/css/normalize.css" />
<link rel="stylesheet" href="/css/main.css" />
<link href="http://fonts.googleapis.com/css?family=Telex" rel="stylesheet" type="text/css" />
</head>
<body>

<div class="header">
<h1>
<a href="/">zero value</a>
<span>A wysiwyg hypertext cybernet</span>
</h1>
<div class="title">
<a href="/">Ø value</a>
<br />
<small>a wysiwyg hypertext cybersite</small>
</div>
</div>
<nav>
<div class="container">
<div class="prev">
<a class="huge" href="002-meta-billet" title="Méta-billet: un mot sur le Calepin!">«</a>
</div>
<div class="current">
<span>npm: la base essentielle pour débuter avec node.js</span>
</div>
<div class="next">
<a class="huge" href="004-npm-packages" title="npm shrinkwrap: Comment contrôler ses dépendances">»</a>
</div>
<div class="clearfix"></div>
</div>
</nav>
<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>
Expand Down
37 changes: 20 additions & 17 deletions example/public/004-npm-packages
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,29 +8,32 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/css/normalize.css" />
<link rel="stylesheet" href="/css/main.css" />
<link href="http://fonts.googleapis.com/css?family=Telex" rel="stylesheet" type="text/css" />
</head>
<body>

<div class="header">
<h1>
<a href="/">zero value</a>
<span>A wysiwyg hypertext cybernet</span>
</h1>
<div class="title">
<a href="/">Ø value</a>
<br />
<small>a wysiwyg hypertext cybersite</small>
</div>
</div>
<nav>
<div class="container">
<div class="prev">
<a class="huge" href="003-dependances" title="npm: la base essentielle pour débuter avec node.js">«</a>
</div>
<div class="current">
<span>npm shrinkwrap: Comment contrôler ses dépendances</span>
</div>
<div class="next">
<a class="huge" href="005-structurer-express" title="Structurer une application Web avec Express et Node.js">»</a>
</div>
<div class="clearfix"></div>
</div>
</nav>
<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>
Expand Down
37 changes: 20 additions & 17 deletions example/public/005-structurer-express
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,29 +8,32 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/css/normalize.css" />
<link rel="stylesheet" href="/css/main.css" />
<link href="http://fonts.googleapis.com/css?family=Telex" rel="stylesheet" type="text/css" />
</head>
<body>

<div class="header">
<h1>
<a href="/">zero value</a>
<span>A wysiwyg hypertext cybernet</span>
</h1>
<div class="title">
<a href="/">Ø value</a>
<br />
<small>a wysiwyg hypertext cybersite</small>
</div>
</div>
<nav>
<div class="container">
<div class="prev">
<a class="huge" href="004-npm-packages" title="npm shrinkwrap: Comment contrôler ses dépendances">«</a>
</div>
<div class="current">
<span>Structurer une application Web avec Express et Node.js</span>
</div>
<div class="next">
<a class="huge" href="006-dependency-injection" title="Expérimentations sur l&#39;injection de dépendance avec node.js">»</a>
</div>
<div class="clearfix"></div>
</div>
</nav>
<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 />
Expand Down
37 changes: 20 additions & 17 deletions example/public/006-dependency-injection
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,29 +8,32 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/css/normalize.css" />
<link rel="stylesheet" href="/css/main.css" />
<link href="http://fonts.googleapis.com/css?family=Telex" rel="stylesheet" type="text/css" />
</head>
<body>

<div class="header">
<h1>
<a href="/">zero value</a>
<span>A wysiwyg hypertext cybernet</span>
</h1>
<div class="title">
<a href="/">Ø value</a>
<br />
<small>a wysiwyg hypertext cybersite</small>
</div>
</div>
<nav>
<div class="container">
<div class="prev">
<a class="huge" href="005-structurer-express" title="Structurer une application Web avec Express et Node.js">«</a>
</div>
<div class="current">
<span>Expérimentations sur l&#39;injection de dépendance avec node.js</span>
</div>
<div class="next">
<a class="huge" href="007-implement-js" title="implement.js: typage fort et Javascript">»</a>
</div>
<div class="clearfix"></div>
</div>
</nav>
<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>
Expand Down
37 changes: 20 additions & 17 deletions example/public/007-implement-js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,29 +8,32 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/css/normalize.css" />
<link rel="stylesheet" href="/css/main.css" />
<link href="http://fonts.googleapis.com/css?family=Telex" rel="stylesheet" type="text/css" />
</head>
<body>

<div class="header">
<h1>
<a href="/">zero value</a>
<span>A wysiwyg hypertext cybernet</span>
</h1>
<div class="title">
<a href="/">Ø value</a>
<br />
<small>a wysiwyg hypertext cybersite</small>
</div>
</div>
<nav>
<div class="container">
<div class="prev">
<a class="huge" href="006-dependency-injection" title="Expérimentations sur l&#39;injection de dépendance avec node.js">«</a>
</div>
<div class="current">
<span>implement.js: typage fort et Javascript</span>
</div>
<div class="next">
<a class="huge" href="008-backbone-computed-properties" title="Propriétés calculées avec Backbone">»</a>
</div>
<div class="clearfix"></div>
</div>
</nav>
<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>
Expand Down
37 changes: 20 additions & 17 deletions example/public/008-backbone-computed-properties
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,29 +8,32 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/css/normalize.css" />
<link rel="stylesheet" href="/css/main.css" />
<link href="http://fonts.googleapis.com/css?family=Telex" rel="stylesheet" type="text/css" />
</head>
<body>

<div class="header">
<h1>
<a href="/">zero value</a>
<span>A wysiwyg hypertext cybernet</span>
</h1>
<div class="title">
<a href="/">Ø value</a>
<br />
<small>a wysiwyg hypertext cybersite</small>
</div>
</div>
<nav>
<div class="container">
<div class="prev">
<a class="huge" href="007-implement-js" title="implement.js: typage fort et Javascript">«</a>
</div>
<div class="current">
<span>Propriétés calculées avec Backbone</span>
</div>
<div class="next">
<a class="huge" href="009-je-men-vais" title="Je suis venu te dire que je m&#39;en vais">»</a>
</div>
<div class="clearfix"></div>
</div>
</nav>
<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>
Expand Down
37 changes: 20 additions & 17 deletions example/public/009-je-men-vais
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,29 +8,32 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/css/normalize.css" />
<link rel="stylesheet" href="/css/main.css" />
<link href="http://fonts.googleapis.com/css?family=Telex" rel="stylesheet" type="text/css" />
</head>
<body>

<div class="header">
<h1>
<a href="/">zero value</a>
<span>A wysiwyg hypertext cybernet</span>
</h1>
<div class="title">
<a href="/">Ø value</a>
<br />
<small>a wysiwyg hypertext cybersite</small>
</div>
</div>
<nav>
<div class="container">
<div class="prev">
<a class="huge" href="008-backbone-computed-properties" title="Propriétés calculées avec Backbone">«</a>
</div>
<div class="current">
<span>Je suis venu te dire que je m&#39;en vais</span>
</div>
<div class="next">
<a class="huge" href="010-demenagement" title="Ce blogue a déménagé sur GitHub">»</a>
</div>
<div class="clearfix"></div>
</div>
</nav>
<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>
Expand Down
Loading

0 comments on commit 8f81116

Please sign in to comment.