HTML5 Template in Action

HTML5 Template in Action

https://developer.mozilla.org/es/docs/Web/HTML/Elemento/template

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5

https://developer.mozilla.org/en-US/docs/Web/CSS/@import

https://www.html5rocks.com/en/tutorials/webcomponents/template/

https://www.html5rocks.com/zh/tutorials/webcomponents/template/

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * @description HTML5 Template
 * @augments
 * @example
 *
 */

/*

<template>
    <h2>Flower</h2>
    <img src="https://www.w3schools.com/tags/img_white_flower.jpg">
</template>

<template>
    <div class="myClass">I like: </div>
</template>

*/

const showContent = () => {
    // let temp = document.getElementsByTagName("template")[0],
    let temp = document.querySelector(`[data-tempalte="tempalte-img"]`),
        clone = temp.content.cloneNode(true);
    document.body.appendChild(clone);
};

const templateGenerator = (datas = [], debug = false) => {
    let result = ``;
    // let temp = document.getElementsByTagName("template")[1],
    let temp = document.querySelector(`[data-tempalte="tempalte-links"]`),
        item = temp.content.querySelector("div");
    for (let i = 0; i < datas.length; i++) {
        let a = document.importNode(item, true);
        a.textContent += datas[i];
        document.body.appendChild(a);
    }
    return result;
};

const arr = ["Audi", "BMW", "Ford", "Honda", "Jaguar", "Nissan"];

if (document.createElement("template").content) {
    console.log("YES! The browser supports the template element");
    templateGenerator(arr);
    setTimeout(() => {
        showContent();
    }, 0);
} else {
    console.error("No! The browser does not support the template element");
}

blogs

https://www.w3schools.com/html/html5_intro.asp

https://www.w3schools.com/tags/tag_template.asp

1. The <template> tag holds its content hidden from the client.

2. Content inside a <template> tag will not be rendered.

3. The content can be visible and rendered later by using JavaScript.

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_template2

<button onclick="showContent()">Show template</button>

<template>
      <h2>Flower</h2>
      <img src="https://www.w3schools.com/tags/img_white_flower.jpg" width="214" height="204">
</template>

const showContent = () => {
    let temp = document.getElementsByTagName("template")[0],
        clone = temp.content.cloneNode(true);
    document.body.appendChild(clone);
};

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_template3

---

SSE: Server-Sent Event

https://www.w3schools.com/html/html5_serversentevents.asp

EventSource

Check Server-Sent Events Support

Create a new EventSource object, and specify the URL of the page sending the updates

if(typeof(EventSource) !== "undefined") {
    // Yes! Server-sent events support!
    var source = new EventSource("demo_sse.php");
    source.onmessage = function(event) {
        document.getElementById("result").innerHTML += event.data + "<br>";
   };
} else {
    // Sorry! No server-sent events support..
}

text/event-stream

Server-Side Code Example

For the example above to work, you need a server capable of sending data updates (like PHP or ASP).

The server-side event stream syntax is simple. Set the "Content-Type" header to "text/event-stream". Now you can start sending event streams.

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();

?>

https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_sse

---

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * @description HTML5 Template
 * @augments
 * @example
 *
 */

/*

<template>
    <h2>Flower</h2>
    <img src="https://www.w3schools.com/tags/img_white_flower.jpg">
</template>

<template>
    <div class="myClass">I like: </div>
</template>

*/

const showContent = () => {
    // let temp = document.querySelector(`[data-tempalte="tempalte-img"]`);
    let temp = document.getElementsByTagName("template")[0],
        clone = temp.content.cloneNode(true);
    document.body.appendChild(clone);
};

const templateGenerator = (datas = [], debug = false) => {
    let result = ``;
    // do something...
    //get the template element:
    let temp = document.getElementsByTagName("template")[1];
    // let temp = document.querySelector(`[data-tempalte="tempalte-links"]`);
    //get the DIV element from the template:
    let item = temp.content.querySelector("div");
    //for each item in the array:
    for (let i = 0; i < datas.length; i++) {
        //Create a new node, based on the template:
        let a = document.importNode(item, true);
        //Add data from the array:
        a.textContent += datas[i];
        //append the new node wherever you like:
        document.body.appendChild(a);
    }
    return result;
};

const arr = ["Audi", "BMW", "Ford", "Honda", "Jaguar", "Nissan"];

if (document.createElement("template").content) {
    console.log("YES! The browser supports the template element");
    templateGenerator(arr);
    setTimeout(() => {
        showContent();
    }, 0);
} else {
    console.error("No! The browser does not support the template element");
}

responsive-html5-web-templates

https://www.mockplus.com/blog/post/free-responsive-html5-web-design-templates

https://colorlib.com/wp/free-business-website-templates/