hugolpz · October 30, 2023 22:30
diff --git a/README.md b/README.md
diff --git a/Blog.txt b/Blog.txt
 == 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/
diff --git a/data.json b/data.json
 { "people":
    [
        {
            "family": "Lopez",
            "name": "Hugo",
            "title": "leader",
            "place": "Paris (France)",
            "introduction": "WP:Map workshop's Dino, GIS, Gdal & D3js lightener",
            "photo": "WikiAtlas_Lopez_Hugo_Yug.png",
            "twitter": "http://www.twitter.com/Hugo_lz"
        },        
        {
            "family": "Ganesh",
            "name": "Arun",
            "title": "co-leader",
            "place": "Dharamsala (India)",
            "introduction": "GIS, D3js enthusiast, interactions designers & wikidata tinker",
            "photo": "WikiAtlas_Ganesh_Arun_Planemad.jpg",
            "twitter": "http://www.twitter.com/planemad"
        },
        {
            "family": "Lopez",
            "name": "Edouard",
            "title": "Hero",
            "place": "Bordeaux (France)",
            "introduction": "Backend admin & Frontend professional webdev, scripts & stack consulting",
            "photo": "WikiAtlas_Lopez_Edouard_Lyhana8.png",
            "twitter": "http://wwww.twitter.com/edouard_lopez"
        }
    ]
 }
diff --git a/Handlebarsjs_minimal_code.png b/Handlebarsjs_minimal_code.png
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
  <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 -->
  </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"> <!-- 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}}
    </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 -->
    <script>
    //4a.function creation
    var slingshot = function (url, tplId, anchor) {
 	   $.getJSON(url, function(data) {
              var template = $(tplId).html();
              var stone = Handlebars.compile(template)(data);
              $(anchor).append(stone);
 	   });
 	}
    //4b.function firing
    slingshot('data.json', '#tpl', '#anchor'); // since url = 'data.json' , we can use both notations.
    </script>
  </body>
 </html>
diff --git a/style.css b/style.css
 img { width:200px; }
 a {
 color: #0084b4;
 text-decoration:none;
 }
 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;
 /*height: 200px; */
  width: 200px;
  margin: 3px;
  padding: 15px; /* padding + border = 16px */
  border: 1px solid #ddd;
  border-radius: 4px;
  text-decoration: none;
  background: #fff;
  color: #333;
 }
 div:hover { 
  padding: 12px; /* padding + border = 16px */
  border: 4px solid #0084b4;
 }
diff --git a/thumbnail.png b/thumbnail.png
diff --git a/WikiAtlas_Ganesh_Arun_Planemad.jpeg b/WikiAtlas_Ganesh_Arun_Planemad.jpeg
diff --git a/WikiAtlas_Ganesh_Arun_Planemad.jpg b/WikiAtlas_Ganesh_Arun_Planemad.jpg
diff --git a/WikiAtlas_Lopez_Edouard_Lyhana8.png b/WikiAtlas_Lopez_Edouard_Lyhana8.png
diff --git a/WikiAtlas_Lopez_Hugo_Yug.png b/WikiAtlas_Lopez_Hugo_Yug.png
	== 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/
	{ "people":
	[
	{
	"family": "Lopez",
	"name": "Hugo",
	"title": "leader",
	"place": "Paris (France)",
	"introduction": "WP:Map workshop's Dino, GIS, Gdal & D3js lightener",
	"photo": "WikiAtlas_Lopez_Hugo_Yug.png",
	"twitter": "http://www.twitter.com/Hugo_lz"
	},
	{
	"family": "Ganesh",
	"name": "Arun",
	"title": "co-leader",
	"place": "Dharamsala (India)",
	"introduction": "GIS, D3js enthusiast, interactions designers & wikidata tinker",
	"photo": "WikiAtlas_Ganesh_Arun_Planemad.jpg",
	"twitter": "http://www.twitter.com/planemad"
	},
	{
	"family": "Lopez",
	"name": "Edouard",
	"title": "Hero",
	"place": "Bordeaux (France)",
	"introduction": "Backend admin & Frontend professional webdev, scripts & stack consulting",
	"photo": "WikiAtlas_Lopez_Edouard_Lyhana8.png",
	"twitter": "http://wwww.twitter.com/edouard_lopez"
	}
	]
	}
	<!DOCTYPE html>
	<html lang="en">
	<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 -->
	</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"> <!-- 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}}
	</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 -->
	<script>
	//4a.function creation
	var slingshot = function (url, tplId, anchor) {
	$.getJSON(url, function(data) {
	var template = $(tplId).html();
	var stone = Handlebars.compile(template)(data);
	$(anchor).append(stone);
	});
	}
	//4b.function firing
	slingshot('data.json', '#tpl', '#anchor'); // since url = 'data.json' , we can use both notations.
	</script>
	</body>
	</html>
	img { width:200px; }
	a {
	color: #0084b4;
	text-decoration:none;
	}
	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;
	/height: 200px; /
	width: 200px;
	margin: 3px;
	padding: 15px; /* padding + border = 16px */
	border: 1px solid #ddd;
	border-radius: 4px;
	text-decoration: none;
	background: #fff;
	color: #333;
	}
	div:hover {
	padding: 12px; /* padding + border = 16px */
	border: 4px solid #0084b4;
	}