lambdaspeech :: BOOK

1 | list | login |load

| |

{style ;;
@import url(https://fonts.googleapis.com/css?family=Quicksand);

#page_frame { width:55%; background:#fff; }
#page_content { background:transparent; color:#000; font-size:1.0em;  font-family:Quicksand; }
pre { padding:10px; background:#eee; color:#000; }
}

;; {center Under construction!}

{div {@ style="position:relative; left:0; top:0; margin-bottom:50px; color:#fff;"}
_img http://colette.cerda.free.fr/images/c_bl22.jpg
{div {@ style="position:absolute; top:10px; left:0; width:100%; font:bold 1.5em courier; text-align:center; text-shadow:0 0 8px #000;"}
 °° /\{([^\s{}]*)(?:[\s]*)([^{}]*)\}/g °°}
{div {@ style="position:absolute; bottom:20px; left:0; width:100%; font:italic 1.0em courier; text-align:center; color:#fff;"}
 LAC BLEU EN DECEMBRE {br} monotype encre sur papier 20x20cm {br} Colette}
}

{center introduction | [[fonctions|?view=BOOK_ONE]] | [[primitives|?view=BOOK_TWO]] | [[bibliothèques|?view=BOOK_THREE]] | [[conclusion|?view=BOOK_CONCLUSION]]}

{div
 {@ style="font-size:10em;
           text-align:center;
           color:#800;"}
 λ book}

_p Avec du papier, un crayon et une gomme on peut créer mille choses :

_ul un carnet de notes en vrac,
_ul un carnet de dessin, 
_ul un brouillon de lettre,
_ul un journal intime,
_ul un calendrier, une liste de courses,
_ul un carnet de réflexions,
_ul un projet de livre, ouvrage, bouquin, "book", 
_ul un cours de latin, de math, ...
_ul un projet de construction, d'association, de voyage,
_ul un papier "académique", un article,
_ul une machine à café ... {i non pas une machine à café !}

_p ... et plein d'autres ... qui finiront rangées dans un tiroir et oubliées. La plupart du temps. C'est parfois dommage.

_p Le projet '{lambda way} c'est tout cela - quelques feuilles de papier, un crayon et une gomme - mais sous une forme dématérialisée. Avec un énorme gain : {i tout est immédiatement partageable sur le net, dans les deux sens}. Et beaucoup de choses qu'on ne peut pas faire avec du papier, un crayon et une gomme, sans passer par le long processus de l'édition et de la distribution papier, deviennent possibles :

_ul un site web statique ou dynamique, pour exposer ses réflexions,
_ul un blog, forum, pour les ouvrir à la confrontation,
_ul un carnet de liens vers des informations glanées sur le net,
_ul un album de photos,
_ul une feuille de calculs interactifs, tableur,
_ul une console pour tester du "code", l'ordinateur étant l'implacable et amical contrôleur de qualité,
_ul un atelier 3D, courbes, surfaces, images de synthèse,
_ul une introduction rogressive et cohérente à la programmation,
_ul un programmateur de machine à café,

_ul etc ...

_p le tout constituant une bibliothèque d'informations "vivantes" accessibles en lecture/écriture pour longtemps.

_p Nous vivons une époque où nos informations sont de plus en plus externalisées dans des espaces contrôlés par un cartel de groupes privés qui ont pris des proportions monstrueuses, les {b GAFAM}. Nous leur confions assez légèrement notre "mémoire" - ou plutôt un "avatar" de notre mémoire - dont ils disposent et qu'ils peuvent manipuler sans limite. Ils peuvent même en contrôler l'accès, par exemple en les emprisonnant dans des formats propriétaires. Essayez donc d'ouvrir un fichier créé il y a vingt ans sur une suite bureautique Microsoft, Apple, Google. Essayez de passer vos contacts d'un smartphone sous iOS (Apple) à un autre sous Androïd (Google). Des gens que nous ne connaissons pas nous connaissent et peuvent nous façonner à leur convenance. Nous façonner à leur convenance !

_p L'enjeu n'est pas technique mais politique.

_p  Le projet '{lambda way} participe, à sa bien modeste mesure, à la reconquête de nos données, en proposant un outil minimaliste dont nous avons seuls les clés. Le ticket d'entrée, car il y en a un, est l'apprentissage de quelques concepts universels nous donnant la maîtrise des outils numériques et nous permettant de sortir de l'esclavage dans lequel nous sommes, ou serons, irrémédiablement plongés.

_p Cela en vaut bien la peine. Il y va de notre liberté.

_p [...]

{div {@ style="font-size:5.0em; text-align:center; color:#800;"} introduction}

_p Dans ce qui suit le seul pré-requis est de savoir utiliser un traitement de texte élémentaire. Il n'est même pas besoin de savoir mettre en gras ou en italique du texte, créer un titre, une liste, un tableau ou un "drag & drop" d'image.

_p Il suffit de savoir écrire du texte brut et d'apprendre {i à son rythme} comment lui appliquer quelques commandes !

_p Voici comment se présente une session de travail avec '{lambda tank} :
_img data/session_2.jpg

_p '{lambda tank} est donc un minuscule traitement de texte comprenant deux fenêtres. Dans la première on tape le texte et dans la seconde on le visualise. Si l'on écrit "{code Hello World}" dans la première on lit "Hello World" dans la seconde. Notez la différence de police, dans l'éditeur il s'agit d'une police fixe, dans la seconde on a le choix et par défaut ici c'est Arial.

_p Mais pourquoi donc deux fenêtres, si les deux affichages sont à peu près identiques ? Ils ne le seront pas toujours, par exemple en écrivant {code '{b Hello World}} l'affichage devient {b Hello World}.

_p {i Bienvenue dans le monde du code !}

_p  En utilisant cette syntaxe étrange vous venez d'appliquer une commande de style, la mise en gras d'un texte. Cette syntaxe est simple et systématique : {i on encadre le texte entre accolades et on accole à la première un mot associé à une commande}, ici "b" pour bold (gras in english).

_p Ce n'est qu'un début.

_p Ecrivant {code '{u {i {b Hello World}}}}, où "i" signifie {i italique} et "u" signifie {u underline} (souligné in english), on obtiendra {u {i {b Hello World}}}. Trois commandes, {code [b, i, u]}, parmi bien d'autres. Essayons par exemple le caractère "*", qu'on imagine associé à l'opérateur arithmétique multiplication.

_p Si on écrit {code '{* Hello World}} le résultat ne se fait pas attendre : {b NaN}, en clair {b N}ot {b a} {b N}umber ! C'est logique, l'opérateur multiplication attend des nombres.

_p En écrivant {code '{* 3 4}} nous obtenons {b 12} et c'est bien ce que l'on attendait, nous avons demandé le produit des nombres 3 et 4. '{lambda tank} est donc un peu plus qu'un traitement de texte, il sait calculer sur des nombres.

_p Mais il sait faire mieux.

_p  Il sait calculer sur des mots qui ne sont pas encore des nombres. Par exemple on peut écrire {code '{* Hello World}} sans qu'il affiche immédiatement {b NaN}, Not a Number, à condition de lui demander d'attendre que "Hello" et "World" aient reçu une valeur numérique, par exemple 3 et 4.

_p Une façon de faire serait d'écrire :
 
{pre 
{b remplace} Hello World
    {b dans} '{* Hello World}
     {b par} 3 4
}

_p On peut comprendre que suivre cette commande conduira à {b 12}, mais c'est quand même un peu lourd ! En appelant {b multiplication} ce qui précède les variables 3 et 4

{pre 
|{b remplace} Hello World      |
|    {b dans} '{* Hello World}  |  est nommé "multiplication"
|     {b par} {span {@ style="color:grey"} 3 4}              |
}
_p on peut écrire de manière concise et lisible

{pre multiplication 3 4}

_p et recommencer aussi facilement avec des valeurs différentes, par exemple "{code multiplication 5 6 -> 30}".

_p On a caché derrière un mot simple une expression assez lourde, on a {b abstrait} le processus de remplacement et il suffira d' {b appliquer} ce mot à toute paire de valeurs pour obtenir un résultat. Ces deux opérations conjuguées, {b abstraction & application} constituent la fondation de tous les langages de programmation fonctionnelle. Quelque chose qui fait penser au Yin / Yang du TAO.

_p  Pratiquement dans '{lambda tank}, qui est donc l'environnement de travail, on utilise une syntaxe légèrement différente (et qui s'avère bien plus efficace), appelée '{lambda talk}, un dialecte éloigné du {b λ calcul}, langage "fondateur" datant des années 30, et on écrira la commande précédente en utilisant des emboitements d'accolades bien balancées :

{pre
'{def multiplication   // donner le nom "multiplication" à
 {lambda {x y}        // la fonction qui remplacera x et y
         {* x y}      // dans {* x y} par des nombres
 }                    // fin fonction
}                     // fin définition
-> {def multiplication {lambda {x y} {* x y}}}

'{multiplication 3 4}  // on fournit les nombres 3 et 4
-> {multiplication 3 4}
'{multiplication 5 6}  // on fournit les nombres 5 et 6
-> {multiplication 5 6}
}

_p Tout ça pour ça ?

_p Bien sûr que non. La porte est maintenant ouverte à tout un monde à découvrir. Par exemple, améliorons un peu cette fonction {code multiplication} et appelons-la {code smart_mult} :

{pre

'{def smart_mult 
 {lambda {nombres} 
  Le produit de nombres est égal à {b {* nombres}}
}}
-> {def smart_mult 
 {lambda {nombres} 
  Le produit de nombres est égal à {b {* nombres}}
}}

'{smart_mult 3 4}
-> {smart_mult 3 4}

'{smart_mult 1 2 3 4 5 6}
-> {smart_mult 1 2 3 4 5 6}
}

_p Notez que {code nombres} peut recevoir n'importe qu'elle suite de nombres, et quand on sait que '{lambda talk} dispose d'une fonction, {code serie}, qui peut produire {i automatiquement} une séquence de nombres

{prewrap
'{serie 1 25}
-> {serie 1 25}
}

_p on a tout de suite envie de jouer avec de grand nombres (pas vous ?)

{prewrap
'{smart_mult {serie 1 170}}
-> {smart_mult {serie 1 170}}
}

_p {b 7.257415615307994e+306} est vraiment un très grand nombre, 307 chiffres, et dépasse les limites de calcul {b exact} des navigateurs web standards. Mais  aux plus audacieux '{lambda talk} offre le moyen de dépasser les limites des nombres définis dans Javascript, le langage natif du navigateur,  et de calculer le nombre précédent - qui était arrondi à 15 décimales - avec ses {b 307} chiffres exacts :

{prewrap
'{reduce {lambda {x y} {long_mult x y}} {serie 1 170}}
-> {reduce {lambda {x y} {long_mult x y}} {serie 1 170}}
}

_p Bon, les maths c'est pas votre fort et vous préfèreriez peut-être insérer une image. Mais comment ?
_p  '{lambda tank}, le wiki, ne propose aucun outil, aucun bouton, aucune palette pour mettre du texte en gras, ou en italique, vous imaginez bien que vous ne trouverez rien pour insérer une image. Et pourtant vous en avez vues dans ce wiki. Eh bien repérez-donc le code quelque part dans une page du wiki, copiez-le et collez-le dans cette page. Par exemple ce code :

{pre
'{img {@ src="data/amelie_poulain.jpg" width="100%"}}
}

_p affiche

{img {@ src="data/amelie_poulain.jpg" width="100%" height="300px" style="object-fit:cover;"}}

_p On discerne bien deux expressions emboitées entre accolades, on est en terrain connu, la commande {b img} qui se comprend bien et la commande {code @} qui peut s'expliquer facilement. L'arobase {code @} - prononcer "at" - est une commande qui gère les {b at}tributs de commandes connues de tous les navigateurs web - du HTML - et ici de la commande {code img}. On peut deviner que {code src} gère la source, c'est à dire l'adresse de l'image qui se nomme {code amelie_poulain.jpg} et se trouve dans un dossier {code data} et vous devinez ce que peut bien signifier {code width}.

_p Rien de bien magique. De plus tout ceci se trouve très bien documenté sur le net. Copiez, collez et adaptez dans le cadre d'une syntaxe unique et cohérente faite de commandes entre accolades emboitées. Et vous pourrez ainsi jouer avec les innombrables règles CSS, comme ceci :

{pre
'{div
 {@ style="font:bold 4.0em papyrus;
           text-align:center;
           color:white;
           text-shadow:0 0 8px black;"}
 amélie poulain}
}

_p qui affiche

{div
 {@ style="font:bold 4.0em papyrus;
           text-align:center;
           color:white;
           text-shadow:0 0 8px black;"}
 amélie poulain}

{hr}
{div {@ style="font-size:3.0em; text-align:center; color:#800;"} λ book's content}

{center
{div {@ style="display:table-cell; width:400px; height:400px; box-shadow:0 0 8px #000; border-radius:200px; text-align:center; font-size:72px; background:#ccc; color:#fff;"}
{div {@ style="display:inline-block; width:250px; height:250px; border:1px solid #000; border-radius:125px; text-align:center; font-size:48px; background:#aaa; color:#fff;"}
{div {@ style="display:inline-block; width:150px; height:150px; border:1px solid #000; border-radius:75px; text-align:center; font-size:24px; background:#888; color:#fff;"}
{div {@ style="display:inline-block; width:75px; height:75px; border:1px solid #000; border-radius:37px; text-align:center; font-size:48px; background:#666; color:#fff;"} 
λ}primitives}libraries}'{www}}
}

{center « {i La route est longue mais la voie est libre} ». }

_p Nous venons de faire quelques pas dans la syntaxe d'un langage fonctionnel, '{lambda talk}, qui va vous accompagner dans le monde des technologies du web, les balises HTML, les règles CSS, les graphiques SVG, le DOM et Javascript. Le voyage se fera en trois étapes {b 1) fonctions, 2) primitives, 3) bibliothèques}, dans un ordre logique allant de la théorie aux applications, mais pouvant être abordés dans un ordre (presque) quelconque :

_ul {b 1) fonctions}, introduit les fondations théoriques du langage, les concepts essentiels à la base de tout langage de programmation,
_ul {b 2) primitives}, décrit dans le détail un premier ensemble de fonctionnalités qui en font un langage utilisable, tirant bénéfice des technologies incorporées dans les navigateurs web, HTML/CSS, SVG, DOM, Javascript,...
_ul {b 3) bibliothèques}, ouvre la fenêtre sur le vaste écosystème rendu accessible par les navigateurs web.

_p Voici un premier plan pour "λ book" :

{pre

{b A) [[fonctions|?view=BOOK_ONE]]}

1) syntax & evaluation
     two fundamental special forms [lambda def]
2) building main data & control structures
     booleans, pairs/lists/trees, recursion, ...
3) examples
     arithmetic, serie, map, reduce, turtle, ...

{b B) [[primitives|?view=BOOK_TWO]]}

1) adding special forms as syntactic sugar
     [if let macro quote]
2) adding primitives built on Javascript
     sequences, lists, arrays, MATH, HTML/CSS, SVG, ...
3) examples 
     using these special forms and primitives

{b C) [[bibliotèques|?view=BOOK_THREE]]}

1) adding special forms, externalizing code
     [script style require]
2) creating libraries, getting existing ones in the web
3) examples
     big numbers, spreadsheet, 2D/3D graphics, web design, ...
}

_p Bienvenue !

_p Alain Marty {i 2019/08/06}

{hr}

{center introduction | [[fonctions|?view=BOOK_ONE]] | [[primitives|?view=BOOK_TWO]] | [[bibliothèques|?view=BOOK_THREE]] | [[conclusion|?view=BOOK_CONCLUSION]]}