{λ way}

user:anonymous

{{myColor 7.0 white} HTML/CSS}

_p Lambdatalk is a light overlay on standard HTML/CSS syntaxes. It comes with two powerful capabilities, [{code def & lambda}] to create names and functions which don't exist in standard HTML/CSS, except through some specific plugins. In this page we show how to write customized titles defined for instance like this:
{blockquote
_ul alignment: centered
_ul font-weight: bold
_ul font-size: variable, defined using any CSS valid units
_ul font-family: Optima or Arial or sans-serif
_ul color: variable, defined using any CSS valid units
_ul text-shadow: centered black
}
_p We define the first title with {code color=red} and {code size=3em} to get this result:

{div 
 {@ style="text-align:center; font:bold 3em optima; color:red; text-shadow:0 0 8px black; "}Hello World}

_p Several ways can be followed to achieve this.

{{myColor 3.0 white} 1) using HTML/CSS}

_p To get this result, we could use HTML/CSS inline:

{pre
<div style="
    text-align:  center;
    font:        bold 3em Optima, Arial, sans-serif;
    color:       red;
    text-shadow: 0 0 8px black;">
 Hello World
</div>
}

_p or better, saving CSS rules under a name, say {code my_first_title}:

{pre
#my_first_title '{
 text-align:  center;
 font:        bold 3em Optima, Arial, sans-serif;
 color:       red;
 text-shadow: 0 0 8px black;
}
}

_p and called like this:

{pre
<div id="my_first_title">Hello World</div>
}

_p The problem is that HTML/CSS syntaxes don't allow defining parameterized names (ie functions). Then we should have to define for each size and color of a title its CSS rules. {u It's a mess!}
_p Let's see what we can do with lambdatalk.

{{myColor 3.0 white} 2) using lambdatalk}

_p This is how {b a single} title could be created ising lambdatalk inline:

{pre
'{div 
 {@ style="
    text-align:  center;
    font:        bold 3em Optima, Arial, sans-serif;
    color:       red;
    text-shadow: 0 0 8px black;
 "}
 Hello World
}
}

_p or better using a name linked to the CSS rules:

{pre
'{def my_first_title
 div 
 {@ style="
    text-align:  center;
    font:        bold 3em Optima, Arial, sans-serif;
    color:       red;
    text-shadow: 0 0 8px black;"
}}
}

_p and calling it:
{pre
'{{my_first_title}Hello World}
}

_p But we should have to do it again and again for every other titles. {u It's still a mess!}

{{myColor 3.0 white} 3) defining a function}

_p We first define a user function with size and color as arguments:

{pre

'{def myColor
 {lambda {:size :col}       // :size and :col are the arguments
  div {@ style="
    text-align:  center;
    font:        bold :sizeem Optima, Arial, sans-serif; 
    color:       :col;
    text-shadow: 0 0 8px black;
 "}
}}
-> {def myColor
 {lambda {:size :col}
  div {@ style="
    text-align:center;
    font:bold :sizeem Optima, Arial, sans-serif;
    color::col;
    text-shadow:0 0 8px black;
 "}
}}
}

_p Then we use this function with various sizes and colors:

{pre
'{{myColor 3 red}Hello World} ->
}
{{myColor 3 red}Hello World}
{pre
'{{myColor 4 green}Hello World} ->
}
{{myColor 4 green}Hello World}
{pre
'{{myColor 2 blue}Hello World} ->
}
{{myColor 2 blue}Hello World}

_p Ad libitum!

{{myColor 3.0 white} 4) using a library}

_p We can even do better: the definition of {code myColor} can be externalized in another page acting as a library, avoiding any "code pollution" in the current page, and called via a {code require} in every pages where this definition has to be used. Making a clean separation between HTML structure and CSS styles with the great benefit of {b user defined functions}!

{{myColor 4.0 white} conclusion}

_p First you understand now how are created titles in this page, using nothing but standard HTML/CSS syntaxes, but with two more powerful capabilities, [{code def & lambda}], used to create names and functions which don't exist in standard HTML/CSS, except through some specific plugins.

_p Secondly it happens that lambatalk can do much more. It can do with numbers what it does with words. For instance, if you write {code '{b {u 1 2 3 4 5 6}}} you will get this sequence of numbers in bold face and underlined, {b {u 1 2 3 4 5 6}}. Ok, you have applied a compound style to a sequence of words which look like numbers. Now, if you write '{b {* 1 2 3 4 5 6}} you will get {b {* 1 2 3 4 5 6}}. Yes you can apply a style and some math operators on words, provided they can be seen as numbers. You leave the world of web designers to enter the world of coders! It's endless. Feel free to explore it in this wiki, for instance beginning in the page

{a {@ href="?view=quick"}{{myColor 10 red}quick}}

_p You are welcome in the lambdaway.

_p {i Alain Marty 2016/09/07}