Skip to content

Instantly share code, notes, and snippets.

@hugolpz

hugolpz/README.md

Last active October 30, 2023 22:30
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save hugolpz/8075193 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save hugolpz/8075193 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. hugolpz revised this gist Jan 19, 2014. 1 changed file with 11 additions and 19 deletions.
    30 changes: 11 additions & 19 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -5,48 +5,40 @@
    <title>Concise Handlebars.js</title>
    <!-- 0a. CSS -->
    <link rel="stylesheet" href="style.css">

    <!-- 0a. JS -->
    <script src="//code.jquery.com/jquery-2.0.3.min.js"></script><!-- online jquery.js -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min.js"></script><!-- online handlebars.js-->
    </head>

    <body>
    <!--1. Data (json format!) -->
    <script>
    var url='data.json'; // relative url : 'data.json'; protocole-relative absolute url: '//website.org/path/to/data.json';
    </script>

    <!-- 2. Anchor -->
    <div id="anchor">This div is the <b>#anchor</b>.</div>

    <!-- 3. Template -->
    <script id="tpl" type="text/template">
    {{#people}}
    {{#people}}
    <div><img src="{{photo}}"><b><a href="{{twitter}}">{{family}} {{name}}</a></b> — {{title}}, {{place}} : {{introduction}}.</div>
    {{/people}}
    </script>

    <!--4. Handlebars.js slingshot -->
    <script>
    //4a.function creation
    var slingshot = function (url, tplId, anchor) {
    $.ajax({
    dataType: "jsonp",
    url: url ,
    })
    .done(function ( data ) {
    $.getJSON(url, function(data) {
    var template = $(tplId).html();
    var stone = Handlebars.compile(template)(data);
    $(anchor).append(stone);
    });
    }


    // do my stuff
    });

    });
    }
    //4b.function firing
    slingshot('data.json', '#tpl', '#anchor'); // since url = 'data.json' , we can use both "url" or "'data.json'".
    slingshot('data.json', '#tpl', '#anchor'); // since url = 'data.json' , we can use both notations.
    </script>
    </body>
    </html>
  2. hugolpz revised this gist Jan 19, 2014. 1 changed file with 3 additions and 4 deletions.
    7 changes: 3 additions & 4 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -7,7 +7,6 @@
    <link rel="stylesheet" href="style.css">

    <!-- 0a. JS -->
    <script src="//code.jquery.com/jquery-2.0.3.min.js"></script><!-- online jquery.js -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min.js"></script><!-- online handlebars.js-->
    </head>

    @@ -22,9 +21,9 @@

    <!-- 3. Template -->
    <script id="tpl" type="text/template">
    {{#abstracts}}
    <div><img src="{{photo}}"><b><a href="//twitter.com/{{twitter}}">{{family}} {{name}}</a></b> — {{job}}, {{university}} : {{abstract}}.</div>
    {{/abstracts}}
    {{#people}}
    <div><img src="{{photo}}"><b><a href="{{twitter}}">{{family}} {{name}}</a></b> — {{title}}, {{place}} : {{introduction}}.</div>
    {{/people}}
    </script>

    <!--4. Handlebars.js slingshot -->
  3. hugolpz revised this gist Jan 19, 2014. 1 changed file with 14 additions and 5 deletions.
    19 changes: 14 additions & 5 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -22,23 +22,32 @@

    <!-- 3. Template -->
    <script id="tpl" type="text/template">
    {{#people}}
    <div><img src="{{photo}}"><b><a href="{{twitter}}">{{family}} {{name}}</a></b> — {{title}}, {{place}} : {{introduction}}.</div>
    {{/people}}
    {{#abstracts}}
    <div><img src="{{photo}}"><b><a href="//twitter.com/{{twitter}}">{{family}} {{name}}</a></b> — {{job}}, {{university}} : {{abstract}}.</div>
    {{/abstracts}}
    </script>

    <!--4. Handlebars.js slingshot -->
    <script>
    //4a.function creation
    var slingshot = function (url, tplId, anchor) {
    $.getJSON(url, function(data) {
    $.ajax({
    dataType: "jsonp",
    url: url ,
    })
    .done(function ( data ) {
    var template = $(tplId).html();
    var stone = Handlebars.compile(template)(data);
    $(anchor).append(stone);
    });
    }


    // do my stuff
    });

    //4b.function firing
    slingshot('data.json', '#tpl', '#anchor'); // since url = 'data.json' , we can use both notations.
    slingshot('data.json', '#tpl', '#anchor'); // since url = 'data.json' , we can use both "url" or "'data.json'".
    </script>
    </body>
    </html>
  4. hugolpz revised this gist Dec 24, 2013. 2 changed files with 0 additions and 0 deletions.
    Empty file removed Blog.txt
    View file
    Empty file.
    Binary file removed Handlebarsjs_minimal_code.png
    View file
    Binary file not shown.
  5. hugolpz revised this gist Dec 24, 2013. 2 changed files with 6 additions and 29 deletions.
    29 changes: 0 additions & 29 deletions Blog.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -1,29 +0,0 @@
    == How to use Templating System: Handlebars.js

    === Why Handlebars.js
    <b>Mustache.js</b> HTML templating system have been designed to stays extremly simple. As such, it excludes logical operators (IF) and alikes.
    <b>Handlebars.js</b> HTML templates are based on Mustache.js, so you can start little and simple. Handlebars.js also have logical and advanced operators so you can later build more complex and conditional stuffs. The documentations with just be longer to read.

    In this page, we will cover the basics of Handlebars.js.


    </h3>Minimal HTML5-MustacheJS : index.html</h3>

    <h3>Minimal HTML5/HandlebarsJS file</h3>
    index.html

    <h3>Minimal JSON: data.json</h3>
    data.json

    <h3>Sources:</h3>
    * <a href="http://iviewsource.com/codingtutorials/introduction-to-javascript-templating-with-mustache-js/">Introduction to JavaScript Templating [video tutorial] with Mustache.js</a>
    * <a href="http://cdnjs.com">CDNjs.com</a>
    * <a href="http://www.paulirish.com/2010/the-protocol-relative-url/">The Protocol-relative URL</a>
    * <a href="http://iviewsource.com/codingtutorials/getting-started-with-javascript-object-notation-json-for-absolute-beginners/">A JSON Tutorial. Getting started with JSON using JavaScript and jQuery</a>


    NEXT:
    http://h5bp.github.io/


    http://jsfiddle.net/YGwJ9/1/
    6 changes: 6 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -33,3 +33,9 @@ See asset: <code>data.json</code> for a concise example.
    * <a href="http://iviewsource.com/codingtutorials/getting-started-with-javascript-object-notation-json-for-absolute-beginners/">A JSON Tutorial. Getting started with JSON using JavaScript and jQuery</a>
    * <a href="http://cdnjs.com">CDNjs.com</a>
    * <a href="http://www.paulirish.com/2010/the-protocol-relative-url/">The Protocol-relative URL</a>

    <!--
    NEXT post to write:
    http://h5bp.github.io/
    http://jsfiddle.net/YGwJ9/1/
    -->
  6. hugolpz revised this gist Dec 24, 2013. 2 changed files with 0 additions and 0 deletions.
    Binary file removed email.jpg
    View file
    Binary file not shown.
    Binary file removed email.png
    View file
    Binary file not shown.
  7. hugolpz revised this gist Dec 24, 2013. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -14,9 +14,9 @@ Emails services such google are a good example of a stable frame with data drive
    <b>Handlebars.js</b> {{syntax}} simplify the design of HTML structure and CSS style to the design of one single example element : the template. Yet, Handlebars.js keeps the possibility of more complex schemes, this easiness to learn with scalability make <b>Handlebars.js</b> a JS templating of choice for fast and clean developements.

    <h3>Project tree</h3>
    For self use and the community, this gist contains an handy :
    <li>|-index.html: <b>Minimal HandlebarsJS demo within a minimal HTML5 page</b>,<br />(with external jquery & handlebars)
    <li>|-data.json : example of data
    For self use and the community, this gist contains an handy :<br />
    <li>|-index.html: <b>Minimal HandlebarsJS demo within a minimal HTML5 page</b>,<br />(with external jquery & handlebars)<br />
    <li>|-data.json : example of data<br />
    <li>|-style.css : non-critical css.

    <h3>Minimal HTML5/HandlebarsJS file</h3>
  8. hugolpz revised this gist Dec 24, 2013. 1 changed file with 6 additions and 6 deletions.
    12 changes: 6 additions & 6 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,18 +1,18 @@
    <b>Handlebars.js</b> is a convenient, easy to learn JS templating system.
    In this page, we will cover the basics of Handlebars.js.

    <h3>What is Handlebars.js ?</h3>
    <a href="https://github.com/janl/mustache.js">Mustache.js</a> HTML templates system have been designed to stays extremly simple, on purpose restricted to structure only (logic-less templating). As such, it excludes logical operators (IF) and alikes.<br />

    <a href="http://handlebarsjs.com">Handlebars.js</a> HTML templates are based on Mustache.js, so you can start little and simple. Handlebars.js also have logical and advanced operators so you can later build more complex and conditional stuffs. In this 2nd logic-full level, the HTML-CSS designer of the template will need some basic coding concepts, such <code>FOR LOOPS</code>, <code>IF</code> (conditional), and few others fundamentals. The <a href="http://handlebarsjs.com">documentations</a> will there be about 3 A4 pages long.

    <h3>Why use JS templating ?</h3>
    <img src="8075193/raw/emails.jpg" width="150px;" align="right"></img>
    <img src="8075193/raw/emails.jpg" width="175px;" align="right"></img>
    <a href="https://en.wikipedia.org/wiki/JavaScript_templating">JS templating systems</a> are at the core of recent web developpement simplifications. Limited by the smallest potential mobile devices of visitors/users/customers and requiring more simplicity, recent cross platforms websites and webapps typically use the design method of <b>stacking</b>. Structurally identical basic elements (usually <<code>div</code>>s) are stacked vertically under each other, each with custom contents from its data source : a local .json file, a JS <code>localStorage</code> variable with json data, online API's json output, etc.<br />
    Emails services such google are a good example of a stable frame with data driven stacking for the main/central/dynamic area.<br />

    <b>Handlebars.js</b> {{syntax}} simplify the design of HTML structure and CSS style to the design of one single example element : the template. Yet, Handlebars.js keeps the possibility of more complex schemes, this easiness to learn with scalability make <b>Handlebars.js</b> a JS templating of choice for fast and clean developements.

    <h3>What is Handlebars.js ?</h3>
    <a href="https://github.com/janl/mustache.js">Mustache.js</a> HTML templates system have been designed to stays extremly simple, on purpose restricted to structure only (logic-less templating). As such, it excludes logical operators (IF) and alikes.<br />

    <a href="http://handlebarsjs.com">Handlebars.js</a> HTML templates are based on Mustache.js, so you can start little and simple. Handlebars.js also have logical and advanced operators so you can later build more complex and conditional stuffs. In this 2nd logic-full level, the HTML-CSS designer of the template will need some basic coding concepts, such <code>FOR LOOPS</code>, <code>IF</code> (conditional), and few others fundamentals. The <a href="http://handlebarsjs.com">documentations</a> will there be about 3 A4 pages long.

    <h3>Project tree</h3>
    For self use and the community, this gist contains an handy :
    <li>|-index.html: <b>Minimal HandlebarsJS demo within a minimal HTML5 page</b>,<br />(with external jquery & handlebars)
  9. hugolpz revised this gist Dec 24, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,7 @@
    In this page, we will cover the basics of Handlebars.js.

    <h3>Why use JS templating ?</h3>
    <img src="8075193/raw/emails.jpg" style="width:175px;align:right;border: 2px solid #999;"></img>
    <img src="8075193/raw/emails.jpg" width="150px;" align="right"></img>
    <a href="https://en.wikipedia.org/wiki/JavaScript_templating">JS templating systems</a> are at the core of recent web developpement simplifications. Limited by the smallest potential mobile devices of visitors/users/customers and requiring more simplicity, recent cross platforms websites and webapps typically use the design method of <b>stacking</b>. Structurally identical basic elements (usually <<code>div</code>>s) are stacked vertically under each other, each with custom contents from its data source : a local .json file, a JS <code>localStorage</code> variable with json data, online API's json output, etc.<br />
    Emails services such google are a good example of a stable frame with data driven stacking for the main/central/dynamic area.<br />

  10. hugolpz revised this gist Dec 24, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,7 @@
    In this page, we will cover the basics of Handlebars.js.

    <h3>Why use JS templating ?</h3>
    <img src="emails.jpg" width="175px"></img>
    <img src="8075193/raw/emails.jpg" style="width:175px;align:right;border: 2px solid #999;"></img>
    <a href="https://en.wikipedia.org/wiki/JavaScript_templating">JS templating systems</a> are at the core of recent web developpement simplifications. Limited by the smallest potential mobile devices of visitors/users/customers and requiring more simplicity, recent cross platforms websites and webapps typically use the design method of <b>stacking</b>. Structurally identical basic elements (usually <<code>div</code>>s) are stacked vertically under each other, each with custom contents from its data source : a local .json file, a JS <code>localStorage</code> variable with json data, online API's json output, etc.<br />
    Emails services such google are a good example of a stable frame with data driven stacking for the main/central/dynamic area.<br />

  11. hugolpz revised this gist Dec 24, 2013. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,12 +1,12 @@
    <b>Handlebars.js<b> is a convenient, easy to learn JS templating system.
    <b>Handlebars.js</b> is a convenient, easy to learn JS templating system.
    In this page, we will cover the basics of Handlebars.js.

    <h3>Why use JS templating ?</h3>
    <img src="emails.jpg" style="width:175px;align:right;border: 2px solid #999;"></img>
    <img src="emails.jpg" width="175px"></img>
    <a href="https://en.wikipedia.org/wiki/JavaScript_templating">JS templating systems</a> are at the core of recent web developpement simplifications. Limited by the smallest potential mobile devices of visitors/users/customers and requiring more simplicity, recent cross platforms websites and webapps typically use the design method of <b>stacking</b>. Structurally identical basic elements (usually <<code>div</code>>s) are stacked vertically under each other, each with custom contents from its data source : a local .json file, a JS <code>localStorage</code> variable with json data, online API's json output, etc.<br />
    Emails services such google are a good example of a stable frame with data driven stacking for the main/central/dynamic area.<br />

    <b>Handlebars.js</b> {{syntax}} simplify the design of HTML structure and CSS style designs to the design of one single example element : the template. Yet, Handlebars.js keeps the possibility of more complex schemes, thus being the perfect JS templating library.
    <b>Handlebars.js</b> {{syntax}} simplify the design of HTML structure and CSS style to the design of one single example element : the template. Yet, Handlebars.js keeps the possibility of more complex schemes, this easiness to learn with scalability make <b>Handlebars.js</b> a JS templating of choice for fast and clean developements.

    <h3>What is Handlebars.js ?</h3>
    <a href="https://github.com/janl/mustache.js">Mustache.js</a> HTML templates system have been designed to stays extremly simple, on purpose restricted to structure only (logic-less templating). As such, it excludes logical operators (IF) and alikes.<br />
  12. hugolpz revised this gist Dec 24, 2013. 2 changed files with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,7 @@
    In this page, we will cover the basics of Handlebars.js.

    <h3>Why use JS templating ?</h3>
    <img src="email.jpg" style="width:175px;align:right;border: 2px solid #999;"></img>
    <img src="emails.jpg" style="width:175px;align:right;border: 2px solid #999;"></img>
    <a href="https://en.wikipedia.org/wiki/JavaScript_templating">JS templating systems</a> are at the core of recent web developpement simplifications. Limited by the smallest potential mobile devices of visitors/users/customers and requiring more simplicity, recent cross platforms websites and webapps typically use the design method of <b>stacking</b>. Structurally identical basic elements (usually <<code>div</code>>s) are stacked vertically under each other, each with custom contents from its data source : a local .json file, a JS <code>localStorage</code> variable with json data, online API's json output, etc.<br />
    Emails services such google are a good example of a stable frame with data driven stacking for the main/central/dynamic area.<br />

    Binary file added emails.jpg
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  13. hugolpz revised this gist Dec 24, 2013. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,7 @@
    In this page, we will cover the basics of Handlebars.js.

    <h3>Why use JS templating ?</h3>
    <img src="email.jpg" style="width:175px;align:right;border: 2px solid #999;" />
    <img src="email.jpg" style="width:175px;align:right;border: 2px solid #999;"></img>
    <a href="https://en.wikipedia.org/wiki/JavaScript_templating">JS templating systems</a> are at the core of recent web developpement simplifications. Limited by the smallest potential mobile devices of visitors/users/customers and requiring more simplicity, recent cross platforms websites and webapps typically use the design method of <b>stacking</b>. Structurally identical basic elements (usually <<code>div</code>>s) are stacked vertically under each other, each with custom contents from its data source : a local .json file, a JS <code>localStorage</code> variable with json data, online API's json output, etc.<br />
    Emails services such google are a good example of a stable frame with data driven stacking for the main/central/dynamic area.<br />

    @@ -11,7 +11,7 @@ Emails services such google are a good example of a stable frame with data drive
    <h3>What is Handlebars.js ?</h3>
    <a href="https://github.com/janl/mustache.js">Mustache.js</a> HTML templates system have been designed to stays extremly simple, on purpose restricted to structure only (logic-less templating). As such, it excludes logical operators (IF) and alikes.<br />

    <a href="http://handlebarsjs.com/">Handlebars.js</a> HTML templates are based on Mustache.js, so you can start little and simple. Handlebars.js also have logical and advanced operators so you can later build more complex and conditional stuffs. In this 2nd logic-full level, the HTML-CSS designer of the template will need some basic coding concepts, such <code>FOR LOOPS</code>, <code>IF</code> (conditional), and few others fundamentals. The <a href="http://handlebarsjs.com/">documentations</a> will there be about 3 A4 pages long.
    <a href="http://handlebarsjs.com">Handlebars.js</a> HTML templates are based on Mustache.js, so you can start little and simple. Handlebars.js also have logical and advanced operators so you can later build more complex and conditional stuffs. In this 2nd logic-full level, the HTML-CSS designer of the template will need some basic coding concepts, such <code>FOR LOOPS</code>, <code>IF</code> (conditional), and few others fundamentals. The <a href="http://handlebarsjs.com">documentations</a> will there be about 3 A4 pages long.

    <h3>Project tree</h3>
    For self use and the community, this gist contains an handy :
  14. hugolpz revised this gist Dec 24, 2013. 2 changed files with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -2,9 +2,9 @@
    In this page, we will cover the basics of Handlebars.js.

    <h3>Why use JS templating ?</h3>
    <img src="email.jpg" style="width:175px;align:right;border: 2px solid #999;" />
    <a href="https://en.wikipedia.org/wiki/JavaScript_templating">JS templating systems</a> are at the core of recent web developpement simplifications. Limited by the smallest potential mobile devices of visitors/users/customers and requiring more simplicity, recent cross platforms websites and webapps typically use the design method of <b>stacking</b>. Structurally identical basic elements (usually <<code>div</code>>s) are stacked vertically under each other, each with custom contents from its data source : a local .json file, a JS <code>localStorage</code> variable with json data, online API's json output, etc.<br />
    Emails services such google are a good example of a stable frame with data driven stacking for the main/central/dynamic area. See:<br />
    <img src="email.png" style="width:175px;align:center;border: 2px solid #999;" /><br />
    Emails services such google are a good example of a stable frame with data driven stacking for the main/central/dynamic area.<br />

    <b>Handlebars.js</b> {{syntax}} simplify the design of HTML structure and CSS style designs to the design of one single example element : the template. Yet, Handlebars.js keeps the possibility of more complex schemes, thus being the perfect JS templating library.

    Binary file added email.jpg
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  15. hugolpz revised this gist Dec 24, 2013. 2 changed files with 11 additions and 8 deletions.
    19 changes: 11 additions & 8 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,32 +1,35 @@
    <b>Handlebars.js<b> is a convenient, easy to learn JS templating system.
    In this page, we will cover the basics of Handlebars.js.

    <h3>Why use JS templating ?</h3>
    <a href="https://en.wikipedia.org/wiki/JavaScript_templating">JS templating systems</a> are at the core of recent web developpement simplifications. Limited by the smallest potential mobile devices of visitors/users/customers and requiring more simplicity, recent cross platforms websites and webapps typically use the design method of <b>stacking</b>. Structurally identical basic elements (usually <<code>div</code>>s) are stacked vertically under each other, each with custom contents from its data source : a local .json file, a JS <code>localStorage</code> variable with json data, online API's json output, etc.<br />
    Emails services such google are a good example of a stable frame with data driven stacking for the main/central/dynamic area. See:<br />
    <img src="email.png" style="width:175px;align:center;border: 2px solid #999;" /><br />

    <b>Handlebars.js</b> {{syntax}} simplify the design of HTML structure and CSS style designs to the design of one single example element : the template. Yet, Handlebars.js keeps the possibility of more complex schemes, thus being the perfect JS templating library.

    <h3>What is Handlebars.js ?</h3>
    <a href="https://github.com/janl/mustache.js">Mustache.js</a> HTML templates system have been designed to stays extremly simple, on purpose restricted to structure only (logic-less templating). As such, it excludes logical operators (IF) and alikes.<br />

    <a href="http://handlebarsjs.com/">Handlebars.js</a> HTML templates are based on Mustache.js, so you can start little and simple. Handlebars.js also have logical and advanced operators so you can later build more complex and conditional stuffs. In this 2nd logic-full level, the HTML-CSS designer of the template will need some basic coding concepts, such <code>FOR LOOPS</code>, <code>IF</code> (conditional), and few others fundamentals. The <a href="http://handlebarsjs.com/">documentations</a> will there be about 3 A4 pages long.

    <h3>Why use Handlebars.js ?</h3>
    <a href="https://en.wikipedia.org/wiki/JavaScript_templating">JS templating systems</a> are at the core of recent easy web developpement. Templating is especially relevant for cross platform design, limited by the smallest potential devices and requiring more simplicity. These websites and webapps typically use the design method of <b>vertical stacking</b>. Structurally identical elements (usually <<code>div</code>>s) are stacked vertically under each other with custom content from data : local .json file, <code>localStorage</code>'s json data, online API, etc.<br />
    <b>Handlebars.js<b> {{syntax}} simplify the design of HTML structure and CSS style designs to the design of one single example element : the template. Yet, Handlebars.js keeps the possibility of more complex schemes, thus being the perfect JS templating library.

    <h3>Project tree</h3>
    For self use and the community, this gist contains an handy :
    <li>|-index.html: <b>Minimal HandlebarsJS demo within a minimal HTML5 page</b>,<br />(with external jquery & handlebars)
    <li>|-data.json : example of data
    <li>|-style.css : non-critical css.

    <h3>Minimal HTML5/HandlebarsJS file</h3>
    index.html

    </h3>Minimal HTML5-MustacheJS</h3>
    See: <code>index.html</code>

    <!-- <h3>Minimal HTML5-MustacheJS</h3>
    See: <code>index.html</code>
    -->
    <h3>Minimal JSON: data.json</h3>
    See asset: <code>data.json</code> for a concise example.

    <h3>Sources</h3>
    * <a href="http://iviewsource.com/codingtutorials/introduction-to-javascript-templating-with-mustache-js/">Introduction to JavaScript Templating [video tutorial] with Mustache.js</a>
    * <a href="http://iviewsource.com/codingtutorials/getting-started-with-javascript-object-notation-json-for-absolute-beginners/">A JSON Tutorial. Getting started with JSON using JavaScript and jQuery</a>
    * <a href="http://cdnjs.com">CDNjs.com</a>
    * <a href="http://www.paulirish.com/2010/the-protocol-relative-url/">The Protocol-relative URL</a>
    * <a href="http://iviewsource.com/codingtutorials/getting-started-with-javascript-object-notation-json-for-absolute-beginners/">A JSON Tutorial. Getting started with JSON using JavaScript and jQuery</a>
    Binary file added email.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  16. hugolpz revised this gist Dec 24, 2013. 1 changed file with 0 additions and 0 deletions.
    Binary file removed WikiAtlas_Ganesh_Arun_Planemad.jpeg
    View file
    Binary file not shown.
  17. hugolpz revised this gist Dec 24, 2013. 2 changed files with 41 additions and 19 deletions.
    33 changes: 28 additions & 5 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,9 +1,32 @@
    <code>Handlebars.js</code> is a convenient, easy to learn JS templating system.
    <b>Handlebars.js<b> is a convenient, easy to learn JS templating system.
    In this page, we will cover the basics of Handlebars.js.

    <a href="https://github.com/janl/mustache.js"><code>Mustache.js</code></a> already provided a super-basic templating {{syntaxe}} on purpose restricted to structure only, aka logic-less templating.
    <h3>What is Handlebars.js ?</h3>
    <a href="https://github.com/janl/mustache.js">Mustache.js</a> HTML templates system have been designed to stays extremly simple, on purpose restricted to structure only (logic-less templating). As such, it excludes logical operators (IF) and alikes.<br />

    <a href="http://handlebarsjs.com/"><code>Handlebars.js</code></a> build on it, offering the same basic levels, but can later on be push toward logical, conditional behaviors which <code>Handlebars.js</code> also provides.
    <a href="http://handlebarsjs.com/">Handlebars.js</a> HTML templates are based on Mustache.js, so you can start little and simple. Handlebars.js also have logical and advanced operators so you can later build more complex and conditional stuffs. In this 2nd logic-full level, the HTML-CSS designer of the template will need some basic coding concepts, such <code>FOR LOOPS</code>, <code>IF</code> (conditional), and few others fundamentals. The <a href="http://handlebarsjs.com/">documentations</a> will there be about 3 A4 pages long.

    <a href="https://en.wikipedia.org/wiki/JavaScript_templating">JS templating systems</a> are at the core of recent easy web developpement. Templating is especially relevant for cross platform design, limited by the smallest potential devices and requiring more simplicity. These websites and webapps typically use the method of <b>vertical stacking<b> of near identical elements (<code><div></code>s), with custom content from local .JSON file, <code>localStorage</code>'s JSON data, online API, etc.
    <h3>Why use Handlebars.js ?</h3>
    <a href="https://en.wikipedia.org/wiki/JavaScript_templating">JS templating systems</a> are at the core of recent easy web developpement. Templating is especially relevant for cross platform design, limited by the smallest potential devices and requiring more simplicity. These websites and webapps typically use the design method of <b>vertical stacking</b>. Structurally identical elements (usually <<code>div</code>>s) are stacked vertically under each other with custom content from data : local .json file, <code>localStorage</code>'s json data, online API, etc.<br />
    <b>Handlebars.js<b> {{syntax}} simplify the design of HTML structure and CSS style designs to the design of one single example element : the template. Yet, Handlebars.js keeps the possibility of more complex schemes, thus being the perfect JS templating library.

    For self use and the community, this gist contains an handy <b>Minimal HTML5 page and minimal HandlebarsJS demo</b>.
    <h3>Project tree</h3>
    For self use and the community, this gist contains an handy :
    <li>|-index.html: <b>Minimal HandlebarsJS demo within a minimal HTML5 page</b>,<br />(with external jquery & handlebars)
    <li>|-data.json : example of data
    <li>|-style.css : non-critical css.

    <h3>Minimal HTML5/HandlebarsJS file</h3>
    index.html

    </h3>Minimal HTML5-MustacheJS</h3>
    See: <code>index.html</code>

    <h3>Minimal JSON: data.json</h3>
    See asset: <code>data.json</code> for a concise example.

    <h3>Sources</h3>
    * <a href="http://iviewsource.com/codingtutorials/introduction-to-javascript-templating-with-mustache-js/">Introduction to JavaScript Templating [video tutorial] with Mustache.js</a>
    * <a href="http://cdnjs.com">CDNjs.com</a>
    * <a href="http://www.paulirish.com/2010/the-protocol-relative-url/">The Protocol-relative URL</a>
    * <a href="http://iviewsource.com/codingtutorials/getting-started-with-javascript-object-notation-json-for-absolute-beginners/">A JSON Tutorial. Getting started with JSON using JavaScript and jQuery</a>
    27 changes: 13 additions & 14 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -3,32 +3,31 @@
    <head>
    <meta charset="utf-8">
    <title>Concise Handlebars.js</title>

    <!-- 0a. CSS -->
    <link rel="stylesheet" href="style.css">

    <!-- 0a. JS: JQuery.js & Handlebars.js libraries -->
    <script src="//code.jquery.com/jquery-2.0.3.min.js"></script><!-- online -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min.js"></script><!-- online -->
    <!-- 0a. JS -->
    <script src="//code.jquery.com/jquery-2.0.3.min.js"></script><!-- online jquery.js -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min.js"></script><!-- online handlebars.js-->
    </head>

    <body>
    <!-- 1. page content with anchor -->
    <div id="anchor">Anchor is this div.</div>
    <!--1. Data (json format!) -->
    <script>
    var url='data.json'; // relative url : 'data.json'; protocole-relative absolute url: '//website.org/path/to/data.json';
    </script>

    <!-- 2. Anchor -->
    <div id="anchor">This div is the <b>#anchor</b>.</div>

    <!-- 2. HTML-Mustache template -->
    <script id="tpl" type="text/template"> <!-- Basic Handlebars templates are similar to Mustache templates -->
    <!-- 3. Template -->
    <script id="tpl" type="text/template">
    {{#people}}
    <div><img src="{{photo}}"><b><a href="{{twitter}}">{{family}} {{name}}</a></b> — {{title}}, {{place}} : {{introduction}}.</div>
    {{/people}}
    </script>

    <!--3. Data.json's url -->
    <script>
    var url='data.json'; // relative url : 'data.json'; protocole-relative absolute url: '//website.org/path/to/data.json';
    </script>

    <!--4. JQuery/Handlebars.js slingshot -->
    <!--4. Handlebars.js slingshot -->
    <script>
    //4a.function creation
    var slingshot = function (url, tplId, anchor) {
  18. hugolpz revised this gist Dec 24, 2013. 1 changed file with 7 additions and 3 deletions.
    10 changes: 7 additions & 3 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,9 @@
    Minimal HandlebarsJS demo within a minimal HTML5 page.
    <code>Handlebars.js</code> is a convenient, easy to learn JS templating system.

    Handlebars.js is a convenient, easy to learn JS templating system.
    <a href="https://github.com/janl/mustache.js"><code>Mustache.js</code></a> already provided a super-basic templating {{syntaxe}} on purpose restricted to structure only, aka logic-less templating.

    <a href="https://github.com/janl/mustache.js">Mustache.js</a> already provided a super-basic templating {{syntaxe}} on purpose restricted to structure only, aka logic-less templating. <a href="http://handlebarsjs.com/">Handlebars.js</a> build on it, offering the same basic levels, which can later on be push toward logical, conditional behaviors which the later also provide.
    <a href="http://handlebarsjs.com/"><code>Handlebars.js</code></a> build on it, offering the same basic levels, but can later on be push toward logical, conditional behaviors which <code>Handlebars.js</code> also provides.

    <a href="https://en.wikipedia.org/wiki/JavaScript_templating">JS templating systems</a> are at the core of recent easy web developpement. Templating is especially relevant for cross platform design, limited by the smallest potential devices and requiring more simplicity. These websites and webapps typically use the method of <b>vertical stacking<b> of near identical elements (<code><div></code>s), with custom content from local .JSON file, <code>localStorage</code>'s JSON data, online API, etc.

    For self use and the community, this gist contains an handy <b>Minimal HTML5 page and minimal HandlebarsJS demo</b>.
  19. hugolpz revised this gist Dec 24, 2013. 2 changed files with 34 additions and 1 deletion.
    29 changes: 29 additions & 0 deletions Blog.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,29 @@
    == How to use Templating System: Handlebars.js

    === Why Handlebars.js
    <b>Mustache.js</b> HTML templating system have been designed to stays extremly simple. As such, it excludes logical operators (IF) and alikes.
    <b>Handlebars.js</b> HTML templates are based on Mustache.js, so you can start little and simple. Handlebars.js also have logical and advanced operators so you can later build more complex and conditional stuffs. The documentations with just be longer to read.

    In this page, we will cover the basics of Handlebars.js.


    </h3>Minimal HTML5-MustacheJS : index.html</h3>

    <h3>Minimal HTML5/HandlebarsJS file</h3>
    index.html

    <h3>Minimal JSON: data.json</h3>
    data.json

    <h3>Sources:</h3>
    * <a href="http://iviewsource.com/codingtutorials/introduction-to-javascript-templating-with-mustache-js/">Introduction to JavaScript Templating [video tutorial] with Mustache.js</a>
    * <a href="http://cdnjs.com">CDNjs.com</a>
    * <a href="http://www.paulirish.com/2010/the-protocol-relative-url/">The Protocol-relative URL</a>
    * <a href="http://iviewsource.com/codingtutorials/getting-started-with-javascript-object-notation-json-for-absolute-beginners/">A JSON Tutorial. Getting started with JSON using JavaScript and jQuery</a>


    NEXT:
    http://h5bp.github.io/


    http://jsfiddle.net/YGwJ9/1/
    6 changes: 5 additions & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,5 @@
    Minimal HandlebarsJS Demo
    Minimal HandlebarsJS demo within a minimal HTML5 page.

    Handlebars.js is a convenient, easy to learn JS templating system.

    <a href="https://github.com/janl/mustache.js">Mustache.js</a> already provided a super-basic templating {{syntaxe}} on purpose restricted to structure only, aka logic-less templating. <a href="http://handlebarsjs.com/">Handlebars.js</a> build on it, offering the same basic levels, which can later on be push toward logical, conditional behaviors which the later also provide.
  20. hugolpz revised this gist Dec 23, 2013. 1 changed file with 0 additions and 0 deletions.
    Binary file modified thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  21. hugolpz revised this gist Dec 23, 2013. 1 changed file with 0 additions and 0 deletions.
    Binary file modified thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  22. hugolpz revised this gist Dec 23, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    img { height:48px; }
    img { width:200px; }
    a {
    color: #0084b4;
    text-decoration:none;
  23. hugolpz revised this gist Dec 23, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -17,7 +17,7 @@
    <div id="anchor">Anchor is this div.</div>

    <!-- 2. HTML-Mustache template -->
    <script id="tpl" type="text/template"> //Basic Handlebars templates are similar to Mustache templates
    <script id="tpl" type="text/template"> <!-- Basic Handlebars templates are similar to Mustache templates -->
    {{#people}}
    <div><img src="{{photo}}"><b><a href="{{twitter}}">{{family}} {{name}}</a></b> — {{title}}, {{place}} : {{introduction}}.</div>
    {{/people}}
  24. hugolpz revised this gist Dec 23, 2013. 3 changed files with 2 additions and 2 deletions.
    Binary file added WikiAtlas_Ganesh_Arun_Planemad.jpg
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
    3 changes: 1 addition & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -19,8 +19,7 @@
    <!-- 2. HTML-Mustache template -->
    <script id="tpl" type="text/template"> //Basic Handlebars templates are similar to Mustache templates
    {{#people}}
    <img src="{{photo}}" height="48px">
    <div><b><a href="{{twitter}}">{{family}} {{name}}</a></b> — {{title}}, {{place}} : {{introduction}}.</div>
    <div><img src="{{photo}}"><b><a href="{{twitter}}">{{family}} {{name}}</a></b> — {{title}}, {{place}} : {{introduction}}.</div>
    {{/people}}
    </script>

    1 change: 1 addition & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,4 @@
    img { height:48px; }
    a {
    color: #0084b4;
    text-decoration:none;
  25. hugolpz revised this gist Dec 23, 2013. 5 changed files with 4 additions and 3 deletions.
    Binary file added WikiAtlas_Ganesh_Arun_Planemad.jpeg
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
    Binary file added WikiAtlas_Lopez_Edouard_Lyhana8.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
    Binary file added WikiAtlas_Lopez_Hugo_Yug.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
    6 changes: 3 additions & 3 deletions data.json
    View file
    Original file line number Diff line number Diff line change
    @@ -6,7 +6,7 @@
    "title": "leader",
    "place": "Paris (France)",
    "introduction": "WP:Map workshop's Dino, GIS, Gdal & D3js lightener",
    "photo": "img/WikiAtlas_Lopez_Hugo_Yug.jpg",
    "photo": "WikiAtlas_Lopez_Hugo_Yug.png",
    "twitter": "http://www.twitter.com/Hugo_lz"
    },
    {
    @@ -15,7 +15,7 @@
    "title": "co-leader",
    "place": "Dharamsala (India)",
    "introduction": "GIS, D3js enthusiast, interactions designers & wikidata tinker",
    "photo": "img/WikiAtlas_Ganesh_Arun_Planemad.jpg",
    "photo": "WikiAtlas_Ganesh_Arun_Planemad.jpg",
    "twitter": "http://www.twitter.com/planemad"
    },
    {
    @@ -24,7 +24,7 @@
    "title": "Hero",
    "place": "Bordeaux (France)",
    "introduction": "Backend admin & Frontend professional webdev, scripts & stack consulting",
    "photo": "img/WikiAtlas_Lopez_Edouard_Lyhana8.jpg",
    "photo": "WikiAtlas_Lopez_Edouard_Lyhana8.png",
    "twitter": "http://wwww.twitter.com/edouard_lopez"
    }
    ]
    1 change: 1 addition & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -19,6 +19,7 @@
    <!-- 2. HTML-Mustache template -->
    <script id="tpl" type="text/template"> //Basic Handlebars templates are similar to Mustache templates
    {{#people}}
    <img src="{{photo}}" height="48px">
    <div><b><a href="{{twitter}}">{{family}} {{name}}</a></b> — {{title}}, {{place}} : {{introduction}}.</div>
    {{/people}}
    </script>
  26. hugolpz revised this gist Dec 22, 2013. 2 changed files with 0 additions and 0 deletions.
    Binary file added Handlebarsjs_minimal_code.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
    Binary file added thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  27. hugolpz revised this gist Dec 22, 2013. 1 changed file with 9 additions and 8 deletions.
    17 changes: 9 additions & 8 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,29 +2,30 @@
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>title</title>
    <title>Concise Handlebars.js</title>

    <!-- 0a. CSS -->
    <link rel="stylesheet" href="style.css">

    <!-- JQuery & Handlebars.js-->
    <!-- 0a. JS: JQuery.js & Handlebars.js libraries -->
    <script src="//code.jquery.com/jquery-2.0.3.min.js"></script><!-- online -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min.js"></script><!-- online -->

    </head>

    <body>
    <!-- 1. page content with anchor -->
    <div id="anchor">Anchor is this div.</div>

    <!-- 2. HTML-Mustache template -->
    <script id="tpl" type="text/template">
    <script id="tpl" type="text/template"> //Basic Handlebars templates are similar to Mustache templates
    {{#people}}
    <div><b><a href="{{twitter}}">{{family}} {{name}}</a></b> — {{title}}, {{place}} : {{introduction}}.</div>
    {{/people}}
    </script>

    <!--3. Data.json -->
    <!--3. Data.json's url -->
    <script>
    var url='data.json'
    // relative url : 'data.json'; protocole-relative absolute url: '//website.org/path/to/data.json';
    var url='data.json'; // relative url : 'data.json'; protocole-relative absolute url: '//website.org/path/to/data.json';
    </script>

    <!--4. JQuery/Handlebars.js slingshot -->
    @@ -38,7 +39,7 @@
    });
    }
    //4b.function firing
    slingshot('data.json', '#tpl', '#anchor');
    slingshot('data.json', '#tpl', '#anchor'); // since url = 'data.json' , we can use both notations.
    </script>
    </body>
    </html>
  28. hugolpz revised this gist Dec 22, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -13,7 +13,7 @@ div {
    overflow: hidden;
    /*height: 200px; */
    width: 200px;
    margin: 2px;
    margin: 3px;
    padding: 15px; /* padding + border = 16px */
    border: 1px solid #ddd;
    border-radius: 4px;
  29. hugolpz revised this gist Dec 22, 2013. 2 changed files with 5 additions and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -12,7 +12,7 @@
    </head>
    <body>
    <!-- 1. page content with anchor -->
    <div id="anchor">Anchor is this div!</div>
    <div id="anchor">Anchor is this div.</div>

    <!-- 2. HTML-Mustache template -->
    <script id="tpl" type="text/template">
    4 changes: 4 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -4,6 +4,10 @@ a {
    }
    a:hover { text-decoration : underline; }
    div#anchor { width: 230px; }
    div#anchor:hover {
    padding: 12px; /* padding + border = 16px */
    border: 4px solid #ddd;
    }
    div {
    display: block; /* or inline-block */
    overflow: hidden;
  30. hugolpz revised this gist Dec 22, 2013. 2 changed files with 4 additions and 4 deletions.
    6 changes: 3 additions & 3 deletions data.json
    View file
    Original file line number Diff line number Diff line change
    @@ -4,7 +4,7 @@
    "family": "Lopez",
    "name": "Hugo",
    "title": "leader",
    "place": "Paris[FR]",
    "place": "Paris (France)",
    "introduction": "WP:Map workshop's Dino, GIS, Gdal & D3js lightener",
    "photo": "img/WikiAtlas_Lopez_Hugo_Yug.jpg",
    "twitter": "http://www.twitter.com/Hugo_lz"
    @@ -13,7 +13,7 @@
    "family": "Ganesh",
    "name": "Arun",
    "title": "co-leader",
    "place": "Dharamsala[IN]",
    "place": "Dharamsala (India)",
    "introduction": "GIS, D3js enthusiast, interactions designers & wikidata tinker",
    "photo": "img/WikiAtlas_Ganesh_Arun_Planemad.jpg",
    "twitter": "http://www.twitter.com/planemad"
    @@ -22,7 +22,7 @@
    "family": "Lopez",
    "name": "Edouard",
    "title": "Hero",
    "place": "Bordeaux[FR]",
    "place": "Bordeaux (France)",
    "introduction": "Backend admin & Frontend professional webdev, scripts & stack consulting",
    "photo": "img/WikiAtlas_Lopez_Edouard_Lyhana8.jpg",
    "twitter": "http://wwww.twitter.com/edouard_lopez"
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -17,7 +17,7 @@
    <!-- 2. HTML-Mustache template -->
    <script id="tpl" type="text/template">
    {{#people}}
    <div><a href="{{twitter}}">{{family}} {{name}}</a> — {{title}}, {{place}} : {{introduction}}.</div>
    <div><b><a href="{{twitter}}">{{family}} {{name}}</a></b> — {{title}}, {{place}} : {{introduction}}.</div>
    {{/people}}
    </script>