+
1
|
skin
|
login
|
edit
{λ way}
::
com3
user:anonymous
{div {@ style="color:white; text-align:center;"} ( see the [[PDF document|data/lambdaway_20161022.pdf]] directly generated from this page [[com2PDF]] )} {splashscreen} {{bloc #000 #fff} {{title #f00} introduction} _p The {b '{lambda way}} project is built on two engines: _ul {b '{lambda talk}}, a purely {b functional language} unifying writing, styling and scripting in a single and coherent prefixed notation, _ul {b '{lambda tank}}, a tiny {b wiki} easy to install as a thin overlay on top of any web browser, _p allowing a {b collaborative work} between authors, web designers and coders for creating and sharing {b rich documents} on the web. _p « {i But there are hundred of wiki engines and hundred of languages! Why yet another wiki, another language nobody will ever want to use? } » {blockquote _p Web browsers give everybody an easy access to a plethora of rich documents created by people mastering HTML, CSS, JS, PHP... What is less known, web browser can give everybody a small window to write HTML/CSS/JS code and so add informations to web pages. Wikis belong to this category: « {i A wiki is a web application which allows collaborative modification, extension, or deletion of its content and structure.} » _p Writing HTML/CSS/JS code being rather complex and at least tiresome, intermediate syntaxes, for instance {b Markdown}, have been created to make things a bit easier. And it's exactly what people use in blogs and wikis. The best known of wikis is {b Wikipedia}, full of rich documented pages written by people supposed not to be web designers or coders. _p Everything works well but the underlying code is a very obfuscated text, difficult to write, read, edit and maintain. In fact, the {b Markdown syntax} is not intended for writing rich documents. Works have been done to build enhanced syntaxes in order to unify writing, styling and coding, for instance after desktop tools like [[LaTeX|?view=latex]], [[PDF]], web tools like [[CURL|?view=curl]], [[LML]], [[Skribe|?view=skribe]], [[Scribble|http://docs.racket-lang.org/scribble/]], [[SXML]], [[LAML|http://people.cs.aau.dk/~normark/laml/papers/web-programming-laml.pdf]], [[Pollen|http://docs.racket-lang.org/pollen/]] ... But these tools are definitively devoted to coders, not to web designers and even less to beginners. _p Hence the {b '{lambda way}} project ... } _p In the following quick overview we will focus on '{lambda talk} and give {b seven basic examples} of what can be done with it. } {{bloc #fff #400} {{title #fff} 1) words} _p This is how we say "Hello World" in '{lambda talk}: {{codeview 1} Hello World {{codeview 2} Hello World }} _p Yes, it's amazingly simple compared to other {note languages... See for instance how the 350 languages listed in [[rosetta.org/wiki/Hello_world/Text|https://www.rosettacode.org/wiki/Hello_world/Text]] display {b "Hello World"}. Can you imagine writing a book whose sentences would have to be embedded in "strings"?} In '{lambda talk} {b words} are written as in any standard text editor, they don't need to be quoted ... until you want to apply some {i command} on them. _p A {b command} is applied to words using a unique and systematic notation, so called a {b form} and written {code '{first rest}}, where: {ul {li 1) {code curly braces '{}} are used to {b select} a sequence of words and forms,} {li 2) {code first} is a word referencing a function belonging to a given {b dictionary} and applied to {code rest},} {li 3) {code rest} is any sequence of words and forms.} } _p The result of the application of {code first} to {code rest} is a sequence of words embedded (or not) in a valid HTML/CSS code. When every forms have been replaced the resulting code is sent to the browser's engine for the final display. _p As a first example of form, this is how the {u underline style} can be applied to a sequence of selected words: {{codeview 1} Hello '{u brave new} World {{codeview 2} Hello {u brave new} World }} _p As you can see, it's nothing but a shorthand notation for the standard HTML syntax "{code {@ style="background:#888; padding:0 10px"} Hello
brave new
World}". Thanks to their definition, forms can be nested, allowing commands to be composed: {{codeview 1} '{b Hello {sup World, {sub is {sup there {sub anybody {sup out {sub there {sup ???}}}}}}}} {{codeview 2} {b Hello {sup World, {sub is {sup there {sub anybody {sup out {sub there {sup ??????}}}}}}}} }} _p You are in the holy world of nested tree prefixed expressions. Still here? Let's go on... } {{bloc #000 #fff} {{title #000} 2) numbers} _p Some words can be seen as numbers and {b '{lambda talk}} becomes a {i pocket calculator} {{codeview 1} '{+ 1 2 3} '{+ 1 {* 2 3} 4} '{sqrt 2} '{sqrt {+ {* 3 3} {* 4 4}}} {{codeview 2} {+ 1 2 3} {+ 1 {* 2 3} 4} {sqrt 2} {sqrt {+ {* 3 3} {* 4 4}}} }} _p For instance, the expression {code '{sqrt {+ {* 3 3} {* 4 4}}}} is successively replaced by {code '{sqrt {+ 9 16}}}, then by {code '{sqrt 25}} and finally by {b 5}. It's the hypotenuse of a right angle triangle {code [3,4]}. You are entering the marvelous world of mathematics. } {{bloc #fff #600} {{title #fff} 3) styles} _p The set of HTML tags is not infinite. Thanks to CSS rules this set can be extended {i ad libitum}. For instance you {b could} want to apply the cyan color to words like this: {{codeview 1} '{div {@ style="color:cyan"} Hello World } {{codeview 2} {div {@ style="color:cyan"}Hello World} }} _p Or display a picture on a shadowed box like this: {{codeview 1} '{img {@ src="data/mustangs.jpg" width="98%" title="Mustangs at Las Colinas ©Robert Glen" style=" padding:5px 5px 35px 5px; border:1px solid white; background:white; box-shadow:0 0 8px black" }} {{codeview 2} {img {@ src="data/mustangs.jpg" width="98%" title="Mustangs at Las Colinas ©Robert Glen" style=" padding:5px 5px 35px 5px; border:1px solid white; background:white; box-shadow:0 0 8px black"}} }} _p Sounds familiar to any web designer, you can simply copy/paste chunks of standard HTML/CSS code. But smart web designers will say « {b {i It's a bad practice to mix structure and style!}} » Ok it's right but wait, it's nothing but a first step! } {{bloc #000 #fff} {{title #000} 4) constants} _p You can put all the "ugly" {b constant} HTML/CSS stuff under a {b name} and call it later. For instance you can define the name {b cyan} and apply it later on different words: {{codeview 1} 1) define: '{def cyan span {@ style="color:cyan"}} 2) and call: '{{cyan}Hello World} '{{cyan}Goodbye World} {{codeview 2} {def cyan span {@ style="color:cyan"}} {{cyan}Hello World} {{cyan}Goodbye World} }} _p You could give a name, ie. {code mustangs}, to the messy HTML/CSS stuff defining the previous picture in a shadowed box: {{codeview 1} 1) define: '{def mustangs ... the previous HTML/CSS code ... } 2) and call: '{mustangs} {{codeview 2} {def mustangs {img {@ src="data/mustangs.jpg" width="98%" title="Mustangs at Las Colinas ©Robert Glen" style=" padding:5px 5px 35px 5px; border:1px solid white; background:white; box-shadow:0 0 8px black" }} } {mustangs} }} _p This way, a friendly coder can help you to hide HTML/CSS code under a name, externalize it in another wiki page behaving as a {b library}, extending the concept of {b CSS stylesheet} and opening a way towards more powerful capabilities. _p You can give math expressions a name, provided they are evaluable: {{codeview 1} 1) define: '{def Φ {/ {+ 1 {sqrt 5}} 2} } '{def 1*2*...*100 {* {serie 1 100}} } 2) and call: '{Φ} '{1*2*...*100} {{codeview 2} {def Φ {/ {+ 1 {sqrt 5}} 2}} {def 1*2*...*100 {* {serie 1 100}}} {Φ} {1*2*...*100} }} _p We will see below how the {b Golden Ratio Φ} is related to the {b Fibonacci's numbers} . } {{bloc #fff #600} {{title #fff} 5) functions} _p We have seen how to define a name as a {b constant} applying a {i given color} to some words. Defining a name waiting for future unknown colors would open an infinity of choices. We can do that using a {b function}, created with {code lambda} and named with {code def}. This is how we can replace the previous constant {code cyan} by a function {code color}: {{codeview 1} 1) define '{def color {lambda {myColor} span {@ style="color: myColor;"}}} 2) and call: '{{color cyan}Hello World} '{{color red}Hello World} {{codeview 2} {def color {lambda {myColor} span {@ style="color: myColor;"}}} {{color cyan}Hello World} {{color red}Hello World} }} _p We have seen that the expression {code '{sqrt {+ {* 3 3} {* 4 4}}}} is evaluated to 5, the hypotenuse of a right angle triangle {code [3,4]}. Using a function we can {b delay the evaluation} of {code '{sqrt {+ {* a a} {* b b}}}} containing undefined arguments {code a} and {code b} until they get their values: {{codeview 1} 1) define: '{def hypo {lambda {a b} {sqrt {+ {* a a} {* b b}}}}} 2) and call: '{hypo 3 4} '{hypo 1 1} {{codeview 2} {def hypo {lambda {a b} {sqrt {+ {* a a} {* b b}}}}} {hypo 3 4} {hypo 1 1} }} _p The name {code hypo} is nothing but an alias to {code '{lambda {a b} {sqrt {+ {* a a} {* b b}}}}} and it's rather easy to understand that {code '{hypo 3 4}} is first replaced by {code '{{lambda {a b} {sqrt {+ {* a a} {* b b}}}} 3 4}}, where {code a} and {code b} will be replaced by {code 3} and {code 4}, leading to this evaluable expression {code '{sqrt {+ {* 3 3} {* 4 4}}}}, finally replaced by {b 5}, as we have seen before. _p Mixing text and numbers is easy, {i provided you take some care}: {{codeview 1} 1) define: '{def add {lambda {:a :b} {b :a+:b {sup is equal to} {u {+ :a :b}}}}} 2) and call: '{add 3 4} '{add 5 6} {{codeview 2} {def add {lambda {:a :b} {b :a+:b {sup is equal to} {u {+ :a :b}}}}} {add 3 4} {add 5 6} }} _p You must know that, when a function is called, {b every} occurences of its arguments are replaced in it's {b body} by the given {b values}. In this function, prefixing by a colon the arguments, {code '{:a :b}}, prevents the {i unwanted} replacement of {code equal} by {code equ3l}. It's a good thing to {i escape} arguments everytime, and even {note more... For a total security, it would be better to {i escape} arguments between two colons, {code :a:} and {code :b:}, with the added benefit of enlighting them as local variables, to be compared with global constants called like this '{Φ} or '{1*2*...*100}. It's a matter of choice.} } {{bloc #000 #fff} {{title #000} 6) fibonacci numbers} _p If you like mathematics, you can define more complex functions, like {b fibonacci} {{codeview 1} '{def fibonacci {def fibonacci.rec {lambda {:a :b :c} {if {< :c 1} then :a else {fibonacci.rec :b {+ :a :b} {- :c 1}} }}} {lambda {:n} {fibonacci.rec 0 1 :n} }} The 75'{sup th} Fibonacci's number is: '{fibonacci 75} The 31 first Fibonacci's numbers are: '{map fibonacci {serie 0 30}} ... {{codeview 2} {def fibonacci {def fibonacci.rec {lambda {:a :b :i} {if {< :i 1} then :a else {fibonacci.rec :b {+ :a :b} {- :i 1}} }}} {lambda {:n} {fibonacci.rec 0 1 :n}}} The 75{sup th} Fibonacci's number is: {fibonacci 75} The 31 first Fibonacci's numbers are: {map fibonacci {serie 0 30}} ... }} _p You will have noticed that the ratio of the last two Fibonacci's numbers, {code '{/ 832040 514229} = {/ 832040 514229}} is very close to the Golden Ratio, {code Φ = '{/ {+ 1 {sqrt 5}} 2} = {/ {+ 1 {sqrt 5}} 2}}. _p Let's go on and build a {b Golden Rectangle} using some SVG functions and the '{lambda talk} {code turtle} primitive function: {{codeview 1} '{def GR {def GR.square {lambda {:d} M:d T90 M:d T90 M:d T90 M:d T90}} {def GR.spiral {lambda {:d :n} {if {< :n 0} then else {GR.square :d} M:d T90 M:d {GR.spiral {* 2 {fibonacci :n}} {- :n 1}} }}} {lambda {:n} {GR.spiral 0 :n} }} '{svg {@ width="100%" height="800px"} {polyline {@ points=" {turtle 0 780 0 {GR 13}}" stroke="#fff" fill="#888"}} } {{codeview 2} {def GR {def GR.square {lambda {:d} M:d T90 M:d T90 M:d T90 M:d T90}} {def GR.spiral {lambda {:d :n} {if {< :n 0} then else {GR.square :d} M:d T90 M:d {GR.spiral {* 2 {fibonacci :n}} {- :n 1}} }}} {lambda {:n} {GR.spiral 0 :n} }} {svg {@ width="100%" height="800px"} {polyline {@ points=" {turtle 0 780 0 {GR 13}}" stroke="#fff" fill="#888"}} }}} _p You could read more about Golden rectangle here: [[granular architecture|http://marty.alain.free.fr/confs/?view=grain]], it's in french but there are a lot of illustrations ... } {{bloc #fff #600} {{title #fff} 7) more...} _p Maybe the best example could be this very wiki page built on a handfull of small '{lambda talk} user functions and CSS rules. Click {input {@ type="button" value="CODE" onclick= "javascript:LAMBDATANK.toggle_display('frame_editor')"}} to analyze it in depth and see how the '{lambda way} project keeps writing rich structured and dynamic web documents {b Small & Simple}. _p First you, the author, insert your ideas, what you think, as it comes to you. Yes it's not exactly WYSIWYG, {i you can't select words with the mouse and click on some button {b [B]} to boldify them}, you write code in a text editor frame and just see in real time the result in a viewer frame. But you code at a minimal level, with a handful of simple textual commands closely related to HTML. Later you will be able to enrich the document by yourself or helped by a cute web designer or a smart coder. The page [[seven_days]] is a good example of such a process. _p This is made possible because you share the {b same consistent code}. The coder will define on demand new functions - or useful [[macros]] like {code _{span}p} and {code _{span}ul} used in this page - to make things easier, closer to your needs. And so your documents will always be sustainable, easy to edit, improve and publish, from everywhere and on every systems, free from any proprietary or/and obfuscated tools. _p This was the goal of the '{lambda way} project. } {{bloc #000 #fff} {{title #f00} conclusion} _p We will summarize this introduction with this concise presentation given by [[Ward Cunningham|http://ward.asia.wiki.org/view/welcome-visitors/view/recent-changes/view/testing-microtalk]]: {blockquote {@ style="background:#fff; padding:20px;"} _p Lambdatalk is a dialect of {note Lisp ... and more precisely of the [[lambda calculus|?view=calc2talk]] } _ul 1) Expressions are written in a prefix notation using curly braces. _ul 2) Away from curly braces words are just words. {{codeview 1} 2+3 is equal to '{+ 2 3} {{codeview 2} 2+3 is equal to {+ 2 3} }} _ul 3) Functions are created with {code lambda} and named with {code def}. {{codeview 1} '{def foo {lambda {:a :b} :a+:b is equal to {+ :a :b}}} '{foo 2 3} {{codeview 2} {def foo {lambda {:a :b} :a+:b is equal to {+ :a :b}}} {foo 2 3} }}} _p All is said! More to see in the '{lambda way} project [[workshop|?view=start]]... _p The heart of '{lambda way} is built on a 30kb PHP file and a 60kb JS file free of any external dependancies. And more, '{lambda talk} can be used out of '{lambda tank} and embedded in any other environment. The JS code is small and can be read, edited and improved by any coder, see more explanations in [[FOO]]. The '{lambda way} project is a free software under the {b GNU GPL} licence, and its {b 100kb} archive is easy to [[download & install|?view=download]] on any web account running PHP. _p Take a look at these [[comments]]. Yours are welcome in the page [[forum]]. _p {i Alain Marty -- 2016/10/24} } {{hide} {def thanks {div {@ style="text-align:center; color:white;"} Thanks a lot to [[Ward cunningham|?view=ward]] who found some interest in '{lambda talk} and to [[hugo|https://gohugo.io/]] who showed me a better way to communicate.}} {def splashscreen {div {@ style="position:relative; top:0; left:0;"} {img {@ src="data/meritxell.jpg" width="100%" title="Meritxell by Ricardo Bofill"}} {div {@ style="position:absolute; bottom:0px; left:0px; width:100%; text-align:center; font:bold 8em optima; color:white; text-shadow:0 0 8px black; opacity:1.0"} '{lambda way}} {div {@ style="position:absolute; bottom:0; left:0; width:100%; text-align:center; font:italic 2em optima; color:white; text-shadow:0 0 8px black;"} '{lambda talk} + '{lambda tank}} }} {def bloc {lambda {:col :back} div {@ style=" background::back; color::col; font:normal 2em georgia; padding:20px 90px;"}}} {def title {lambda {:col} div {@ style=" color::col; text-align:center; font:bold 2em optima;"}}} {def codeview {lambda {:col} div {@ style="{if {= :col 1} then color:black; background:#eee; font:normal 1.2em courier; else color:white; background:#444; font:normal 1.4em georgia;} white-space:pre-wrap; padding:10px; margin:5px 0;"} {div {@ style="font-size:0.6em; text-align:right; margin:-10px 0px -30px -8px;"} {if {= :col 1} then code else view} }}} {def more_style div {@ style=" padding:10px; background:#222; color:#fff; font-size:1.0em; box-shadow:0 0 8px black;"}} } {style °° body { background:#222; } #title { color:black; } #frame_view { width:100%; padding:0; border:0 solid; background:#222; box-shadow:0 0 0; } °°}