2011-10-21 14:48:31 +00:00
<?xml version="1.0" encoding="utf-8"?>
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
< html xmlns = "http://www.w3.org/1999/xhtml" lang = "fr" xml:lang = "fr" >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" / >
2011-11-16 12:30:46 +00:00
< meta name = "keywords" content = "m4, SVG, XSLT, XML, design, programming, fractal" >
2011-11-16 11:57:39 +00:00
2011-10-21 14:48:31 +00:00
< link rel = "shortcut icon" type = "image/x-icon" href = "/Scratch/img/favicon.ico" / >
< link rel = "stylesheet" type = "text/css" href = "/Scratch/assets/css/main.css" / >
2012-04-02 21:43:39 +00:00
< link rel = "stylesheet" type = "text/css" href = "/Scratch/css/solarized.css" / >
2011-10-21 14:48:31 +00:00
< link rel = "stylesheet" type = "text/css" href = "/Scratch/css/idc.css" / >
2012-05-02 15:43:56 +00:00
< link href = 'http://fonts.googleapis.com/css?family=Inconsolata' rel = 'stylesheet' type = 'text/css' >
2011-10-21 14:48:31 +00:00
< link rel = "alternate" type = "application/rss+xml" title = "RSS" href = "http://feeds.feedburner.com/yannespositocomen" / >
2011-11-16 12:30:46 +00:00
< link rel = "alternate" lang = "fr" xml:lang = "fr" title = "Accroître le pouvoir des languages déficients." type = "text/html" hreflang = "fr" href = "/Scratch/fr/blog/SVG-and-m4-fractals/" / >
< link rel = "alternate" lang = "en" xml:lang = "en" title = "Increase the power of deficient languages." type = "text/html" hreflang = "en" href = "/Scratch/en/blog/SVG-and-m4-fractals/" / >
2011-10-21 14:48:31 +00:00
< script type = "text/javascript" src = "/Scratch/js/jquery-1.3.1.min.js" > < / script >
< script type = "text/javascript" src = "/Scratch/js/jquery.cookie.js" > < / script >
< script type = "text/javascript" src = "/Scratch/js/index.js" > < / script >
2012-05-02 15:43:56 +00:00
< script type = "text/javascript" src = "/Scratch/js/highlight/highlight.pack.js" > < / script >
< script type = "text/javascript" src = "/Scratch/js/article.js" > < / script >
2012-06-01 13:24:58 +00:00
< script type = "text/javascript" src = "http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" > < / script >
2011-10-21 14:48:31 +00:00
<!-- [if lt IE 9]>
< script src = "http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js" > < / script >
<![endif]-->
2011-11-16 12:30:46 +00:00
< title > Increase the power of deficient languages.< / title >
2011-10-21 14:48:31 +00:00
< / head >
< body lang = "en" class = "article" >
< script type = "text/javascript" > / / < ! [ C D A T A [
document.write('< div id = "blackpage" > < img src = "/Scratch/img/loading.gif" alt = "loading..." / > < / div > ');
// ]]>
< / script >
< div id = "content" >
< div id = "choix" >
< div class = "return" > < a href = "#entete" > ↓ Menu ↓ < / a > < / div >
2012-06-01 13:24:58 +00:00
< div id = "choixlang" > < a href = "/Scratch/fr/blog/SVG-and-m4-fractals/" onclick = "setLanguage('fr')" > en Français< / a >
2011-10-21 14:48:31 +00:00
< / div >
< div class = "flush" > < / div >
< / div >
< div id = "titre" >
< h1 >
2011-11-16 12:30:46 +00:00
Increase the power of deficient languages.
2011-10-21 14:48:31 +00:00
< / h1 >
< h2 >
2011-11-16 12:30:46 +00:00
Fractals with SVG and m4
2011-10-21 14:48:31 +00:00
< / h2 >
< / div >
< div class = "flush" > < / div >
< div class = "flush" > < / div >
< div id = "afterheader" >
< div class = "corps" >
< p > < img alt = "Yesod logo made in SVG and m4" src = "/Scratch/img/blog/SVG-and-m4-fractals/main.png" / > < / p >
< div class = "intro" >
2011-11-16 11:57:39 +00:00
< p > < span class = "sc" > < abbr title = "Too long; didn't read" > tl;dr< / abbr > : < / span > How to use m4 to increase the power of deficient languages. Two examples: improve < span class = "sc" > xslt< / span > syntax and make fractal with < span class = "sc" > svg< / span > .< / p >
2011-10-21 14:48:31 +00:00
< / div >
2011-11-16 11:57:39 +00:00
< p > < span class = "sc" > xml< / span > was a very nice idea about structuring data.
Some people where so enthusiastic about < span class = "sc" > xml< / span > they saw it everywhere.
The idea was: the future is < span class = "sc" > xml< / span > .
2011-11-16 12:44:27 +00:00
Then some believed it would be a good idea to invent many < span class = "sc" > xml< / span > compatible format and even programming languages with < span class = "sc" > xml< / span > syntax.< / p >
2011-11-16 11:57:39 +00:00
< p > Happy! Happy! Joy! Joy! < / p >
2011-11-16 12:44:27 +00:00
< p > Unfortunately, < span class = "sc" > xml< / span > was made to transfert structured data.
2011-11-16 11:57:39 +00:00
Not a format a human should see or edit directly.
The sad reality is < span class = "sc" > xml< / span > syntax is simply verbose and ugly.
2012-05-03 09:21:34 +00:00
Most of the time it shouldn’ t be a problem, as nobody should see it.
2011-11-16 11:57:39 +00:00
In a perfect nice world, we should never deal directly with < span class = "sc" > xml< / span > but only use software which deal with it for us.
Guess what?
2012-05-03 09:21:34 +00:00
Our world isn’ t perfect. Too sad, a bunch of developer have to deal directly with this ugly < span class = "sc" > xml< / span > .< / p >
2011-11-16 11:57:39 +00:00
2012-05-03 09:21:34 +00:00
< p > Unfortunately < span class = "sc" > xml< / span > isn’ t the only case of misused format I know.
You have many format for which it would be very nice to add variables, loops, functions… < / p >
2011-10-21 14:48:31 +00:00
2011-11-16 12:44:27 +00:00
< p > If like me you hate with passion < span class = "sc" > xslt< / span > or writing < span class = "sc" > xml< / span > ,
I will show you how you could deal with this bad format
or language.< / p >
2011-10-21 14:48:31 +00:00
2011-11-16 11:57:39 +00:00
< h2 id = "the-span-classscxsltspan-example" > The < span class = "sc" > xslt< / span > Example< / h2 >
2011-10-21 14:48:31 +00:00
2012-05-03 09:21:34 +00:00
< p > Let’ s start by the worst case of misused < span class = "sc" > xml< / span > I know: < span class = "sc" > xslt< / span > .
2011-11-16 11:57:39 +00:00
Any developer who had to deal with < span class = "sc" > xslt< / span > know how horrible it is.< / p >
2011-10-21 14:48:31 +00:00
2011-11-16 12:44:27 +00:00
< p > In order to reduce the verbosity of such a bad languages, there is a way.
2011-10-21 14:48:31 +00:00
< strong > < code > m4< / code > < / strong > . Yes, the preprocessor you use when you program in < code > C< / code > and < code > C++< / code > .< / p >
< p > Here are some example: < / p >
< ul >
< li > Variable, instead of writing the natural < code > myvar = value< / code > , here is the < span class = "sc" > xslt< / span > way of doing this:< / li >
< / ul >
2012-05-02 15:43:56 +00:00
< pre > < code class = "xml" > < xsl:variable name="myvar" select="value"/>
< / code > < / pre >
2011-10-21 14:48:31 +00:00
< ul >
< li > Printing something. Instead of < code > print "Hello world!"< / code > here is the < span class = "sc" > xslt< / span > equivalent:< / li >
< / ul >
2012-05-02 15:43:56 +00:00
< pre > < code class = "xml" > < xsl:text
disable-output-escaping="yes"> < ![CDATA[Hello world!
]]> < /xsl:text>
< / code > < / pre >
2011-10-21 14:48:31 +00:00
< ul >
< li > printing the value of a variable, instead of < code > print myvar< / code > the < span class = "sc" > xslt< / span > is:< / li >
< / ul >
2012-05-02 15:43:56 +00:00
< pre > < code class = "xml" > < xslt:value-of select="myvar"/>
< / code > < / pre >
2011-10-21 14:48:31 +00:00
< ul >
< li > Just try to imagine how verbose it is to declare a function with this language.< / li >
< / ul >
< h2 id = "the-cure-m4-to-the-rescue" > The cure (m4 to the rescue)< / h2 >
2012-05-02 15:43:56 +00:00
< pre > < code class = "xml" > < ?xml version="1.0" standalone="yes"?> < !-- YES its < span class = "sc" > xml< / span > -->
< !-- ← start a comment, then write some m4 directives:
define(`ydef',`< xsl:variable name="$1" select="$2"/> ')
define(`yprint',`< xsl:text disable-output-escaping="yes"> < ![CDATA[$1]]> < /xsl:text> ')
define(`yshow',`< xsl:value-of select="$1"/> ')
-->
< !-- Yes, < span class = "sc" > xml< / span > sucks to be read -->
< xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
< !-- And it sucks even more to edit -->
< xsl:template match="/">
2011-10-21 14:48:31 +00:00
ydef(myvar,value)
yprint(Hello world!)
yshow(myvar)
2012-05-02 15:43:56 +00:00
< /xsl:template>
< / code > < / pre >
2011-10-21 14:48:31 +00:00
< p > Now just compile this file:< / p >
2012-05-02 15:43:56 +00:00
< pre > < code class = "zsh" > m4 myfile.m4 > myfile.xslt
< / code > < / pre >
2011-10-21 14:48:31 +00:00
2011-11-16 12:44:27 +00:00
< p > Profit! Now < span class = "sc" > xslt< / span > is more readable and easier to edit!< / p >
2011-10-21 14:48:31 +00:00
< h2 id = "the-cool-part-fractals" > The cool part: Fractals!< / h2 >
2011-11-16 11:57:39 +00:00
< p > < span class = "sc" > svg< / span > is an < span class = "sc" > xml< / span > format used to represent vector graphics, it even support animations.
2011-10-21 14:48:31 +00:00
At its beginning some people believed it would be the new Flash. Apparently, it will be more canvas + js.< / p >
< p > Let me show you the result:< / p >
2012-05-02 15:43:56 +00:00
< p > < a href = "blogimagedirmain.svg" >
2011-11-16 11:57:39 +00:00
< img alt = "Yesod logo made in SVG and m4" src = "/Scratch/img/blog/SVG-and-m4-fractals/main.png" / >
Click to view directly the < span class = "sc" > svg< / span > . It might slow down your computers if you have an old one.
< / a > < / p >
2011-10-21 14:48:31 +00:00
2012-05-03 09:21:34 +00:00
< p > The positionning of the “ esod” text with regards to the reversed “ λ” was done by changing position in firebug. I didn’ t had to manually regenerate to test.< / p >
2011-10-21 14:48:31 +00:00
< p > Making such a fractal is mostly:< / p >
< ol >
< li > take a root element< / li >
< li > duplicate and transform it (scaling, translating, rotate)< / li >
< li > the result is a sub new element.< / li >
< li > repeat from 2 but by taking the sub new element as new root.< / li >
< li > Stop when recursion is deep enough.< / li >
< / ol >
2012-05-03 09:21:34 +00:00
< p > If I had to do this for each step, I had make a lot of copy/paste in my < span class = "sc" > svg< / span > , because the transformation is always the same, but I cannot say, use transformation named “ titi” . Then instead of manually copying some < span class = "sc" > xml< / span > , I used m4< / p >
2011-10-21 14:48:31 +00:00
< p > and here is the commented code:< / p >
2012-05-02 15:43:56 +00:00
< div class = "codefile" > < a href = "/Scratch/en/blog/SVG-and-m4-fractals/code/yesodlogo.m4" > ➥ yesodlogo.m4< / a > < / div >
< pre > < code class = "xml" > < ?xml version="1.0" encoding="UTF-8" standalone="no"?>
< !--
M4 Macros
define(`YTRANSFORMONE', `scale(.43) translate(-120,-69) rotate(-10)')
define(`YTRANSFORMTWO', `scale(.43) translate(-9,-67.5) rotate(10)')
define(`YTRANSFORMTHREE', `scale(.43) translate(53,41) rotate(120)')
define(`YGENTRANSFORM', `translate(364,274) scale(3)')
define(`YTRANSCOMPLETE', `
< g id="level_$1">
< use style="opacity: .8" transform="YTRANSFORMONE" xlink:href="#level_$2" />
< use style="opacity: .8" transform="YTRANSFORMTWO" xlink:href="#level_$2" />
< use style="opacity: .8" transform="YTRANSFORMTHREE" xlink:href="#level_$2" />
< /g>
< use transform="YGENTRANSFORM" xlink:href="#level_$1" />
')
-->
< svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="64" y="64" width="512" height="512" viewBox="64 64 512 512"
id="svg2" version="1.1">
< g id="level_0"> < !-- some group, if I want to add other elements -->
< !-- the text "λ" -->
< text id="lambda"
fill="#333" style="font-family:Ubuntu; font-size: 100px"
transform="rotate(180)"> λ< /text>
< /g>
< !-- the text "esod" -->
< text
fill="#333"
style="font-family:Ubuntu; font-size: 28px; letter-spacing: -0.10em"
x="-17.3"
y="69"
transform="YGENTRANSFORM"> esod< /text>
< !-- ROOT ELEMENT -->
< use transform="YGENTRANSFORM" xlink:href="#level_0" />
YTRANSCOMPLETE(1,0) < !-- First recursion -->
YTRANSCOMPLETE(2,1) < !-- deeper -->
YTRANSCOMPLETE(3,2) < !-- deeper -->
YTRANSCOMPLETE(4,3) < !-- even deeper -->
YTRANSCOMPLETE(5,4) < !-- Five level seems enough -->
< /svg>
< / code > < / pre >
2011-10-21 14:48:31 +00:00
2011-11-16 11:57:39 +00:00
< p > and I compiled it to < span class = "sc" > svg< / span > and then to < span class = "sc" > png< / span > with:< / p >
2011-10-21 14:48:31 +00:00
2012-05-02 15:43:56 +00:00
< pre > < code class = "zsh" > m4 yesodlogo.m4 > yesodlogo.svg & & convert yesodlogo.svg yesodlogo.png
< / code > < / pre >
2011-10-21 14:48:31 +00:00
2011-11-16 11:57:39 +00:00
< p > The main λ is duplicated 3 times. Each transformation is named by: < code > YTRANSFORMONE< / code > , < code > YTRANSFORMTWO< / code > and < code > YTRANSFORMTHREE< / code > .< / p >
< p > Each transformation is just a similarity (translate + rotation + scale).< / p >
< p > Once fixed, we should now simply copy and repeat for each new level.< / p >
< p > Now it is time to talk about where the magic occurs: < code > YTRANSCOMPLETE< / code > .
This macro takes two arguments.
The current depth and the preceding one.
2011-11-16 12:59:03 +00:00
It duplicates using the three transformations the preceding level.< / p >
2011-11-16 11:57:39 +00:00
< ul >
< li > At level 0 there is only one λ,< / li >
< li > at level 1 there is 3 λ,< / li >
2011-11-16 12:59:03 +00:00
< li > at level 2 there is 9 λ< / li >
2012-05-03 09:21:34 +00:00
< li > etc… < / li >
2011-11-16 11:57:39 +00:00
< / ul >
2011-11-16 12:59:03 +00:00
< p > At the final 5< sup > th< / sup > level there is 3< sup > 5< / sup > =243 λ.
All level combined have 3< sup > 6< / sup > -1 / 2 = 364 λ.< / p >
2011-11-16 11:57:39 +00:00
2011-11-16 12:44:27 +00:00
< p > I could preview the final result easily.
Without the macro system, I would have to make 5 copy/paste + modifications for each try.< / p >
2011-11-16 11:57:39 +00:00
2011-10-21 14:48:31 +00:00
< h2 id = "conclusion" > Conclusion< / h2 >
< p > It was fun to make a fractal in < span class = "sc" > svg< / span > , but the interesting part is how to augment the power of a language using this preprocessor method.
2011-11-16 11:57:39 +00:00
I used the < span class = "sc" > xslt< / span > trick at work for example.
I also used it to make include inside obscure format.
If all you want is to generate a minimal static website withou using nanoc, jekyll or hakyll (ther are plenty other alternatives). You can consider using m4 to generate your < span class = "sc" > html< / span > instead of copy/paste the menu and the footer, or using AJAX.< / p >
2011-10-21 14:48:31 +00:00
2011-11-16 12:44:27 +00:00
< p > Another usage I thouhgt about is to use m4
to organize languages such as brainfuck.< / p >
2011-10-21 14:48:31 +00:00
< / div >
2012-06-01 13:24:58 +00:00
2011-10-21 14:48:31 +00:00
2012-04-10 13:56:34 +00:00
< div id = "social" >
< div class = "left" > < a href = "https://twitter.com/share" class = "twitter-share-button" data-via = "yogsototh" > Tweet< / a >
< script > ! function ( d , s , id ) { var js , fjs = d . getElementsByTagName ( s ) [ 0 ] ; if ( ! d . getElementById ( id ) ) { js = d . createElement ( s ) ; js . id = id ; js . src = "//platform.twitter.com/widgets.js" ; fjs . parentNode . insertBefore ( js , fjs ) ; } } ( document , "script" , "twitter-wjs" ) ; < / script >
< / div >
< div class = "left" > < div class = "g-plusone" data-size = "medium" data-annotation = "inline" data-width = "106" > < / div >
< script type = "text/javascript" >
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
< / script >
< / div >
< div class = "flush" > < / div >
< / div >
2011-10-21 14:48:31 +00:00
< div id = "choixrss" >
< a id = "rss" href = "http://feeds.feedburner.com/yannespositocomen" >
Subscribe
< / a >
< / div >
< script type = "text/javascript" >
$(document).ready(function(){
$('#comment').hide();
$('#clickcomment').click(showComments);
});
function showComments() {
$('#comment').show();
$('#clickcomment').fadeOut();
}
2012-04-10 13:56:34 +00:00
document.write('< div id = "clickcomment" > Comments & Share< / div > ');
2011-10-21 14:48:31 +00:00
< / script >
< div class = "flush" > < / div >
2012-04-10 13:56:34 +00:00
2011-10-21 14:48:31 +00:00
< div class = "corps" id = "comment" >
< h2 class = "first" > comments< / h2 >
< noscript >
You must enable javascript to comment.
< / noscript >
< script type = "text/javascript" >
var idcomments_acct = 'a307f0044511ff1b5cfca573fc0a52e7';
var idcomments_post_id = '/Scratch/en/blog/SVG-and-m4-fractals/';
var idcomments_post_url = 'http://yannesposito.com/Scratch/en/blog/SVG-and-m4-fractals/';
< / script >
< span id = "IDCommentsPostTitle" style = "display:none" > < / span >
< script type = 'text/javascript' src = '/Scratch/js/genericCommentWrapperV2.js' > < / script >
< / div >
2012-06-01 13:24:58 +00:00
< div id = "entete" class = "corps_spaced" >
< div id = "liens" >
< ul > < li > < a href = "/Scratch/en/" > Home< / a > < / li >
2011-10-21 14:48:31 +00:00
< li > < a href = "/Scratch/en/blog/" > Blog< / a > < / li >
< li > < a href = "/Scratch/en/softwares/" > Softwares< / a > < / li >
< li > < a href = "/Scratch/en/about/" > About< / a > < / li > < / ul >
< / div >
2012-06-01 13:24:58 +00:00
< div class = "flush" > < / div >
< hr / >
< div id = "next_before_articles" >
< div id = "previous_articles" >
previous entries
< div class = "previous_article" >
< a href = "/Scratch/en/blog/Yesod-excellent-ideas/" > < span class = "nicer" > «< / span > Yesod excellent ideas< / a >
< / div >
< div class = "previous_article" >
< a href = "/Scratch/en/blog/Higher-order-function-in-zsh/" > < span class = "nicer" > «< / span > Higher order function in zsh< / a >
< / div >
< div class = "previous_article" >
< a href = "/Scratch/en/blog/programming-language-experience/" > < span class = "nicer" > «< / span > Programming Language Experience< / a >
< / div >
2012-02-02 13:07:26 +00:00
< / div >
2012-06-01 13:24:58 +00:00
< div id = "next_articles" >
next entries
< div class = "next_article" >
< a href = "/Scratch/en/blog/Yesod-tutorial-for-newbies/" > Haskell web programming < span class = "nicer" > »< / span > < / a >
< / div >
< div class = "next_article" >
< a href = "/Scratch/en/blog/Typography-and-the-Web/" > Typography and the Web < span class = "nicer" > »< / span > < / a >
< / div >
< div class = "next_article" >
< a href = "/Scratch/en/blog/Haskell-the-Hard-Way/" > Learn Haskell Fast and Hard < span class = "nicer" > »< / span > < / a >
< / div >
2012-02-29 21:06:22 +00:00
< / div >
2012-06-01 13:24:58 +00:00
< div class = "flush" > < / div >
2011-10-21 14:48:31 +00:00
< / div >
< / div >
2012-06-01 13:24:58 +00:00
< div id = "bottom" >
< div >
< a href = "https://twitter.com/yogsototh" > Follow @yogsototh< / a >
< / div >
< div >
< a rel = "license" href = "http://creativecommons.org/licenses/by-sa/3.0/" > Copyright ©, Yann Esposito< / a >
< / div >
< div id = "lastmod" >
Created: 10/20/2011
Modified: 04/26/2012
< / div >
< div >
Entirely done with
< a href = "http://www.vim.org" > Vim< / a >
and
< a href = "http://nanoc.stoneship.org" > nanoc< / a >
< / div >
2011-10-21 14:48:31 +00:00
< / div >
2012-06-01 13:24:58 +00:00
< div class = "clear" > < / div >
2011-10-21 14:48:31 +00:00
< / div >
< / div >
< / body >
< / html >
