Templating - sgml/signature GitHub Wiki

The W3 Word Processor Filters page should answer most of these questions. For more details, here some resources on the evolution of separating content from presentation:

Markup and typesetting languages are the earliest examples of templating. Here is the Wikipedia definition:

A markup language is a modern system for annotating a document in a way that is syntactically distinguishable from the text. The idea and terminology evolved from the "marking up" of manuscripts, i.e., the revision instructions by editors, traditionally written with a blue pencil on authors' manuscripts. Examples are typesetting instructions such as those found in troff and LaTeX, or structural markers such as XML tags.

Here is a diagram:

                        RUNOFF                      "Generic Coding"                 "Editorial Structure Tags"
                   (Jerome Saltzer, 1964)         (William Tunnicliffe, 1967)          (Stanley Rice, pre-1970)
                            |                               |                                     |
                            |                               |                                     |
        TeX          roff - nroff - troff                   |-------------------------------------|
 (Don Knuth, 1977)   (Josef Osanna, 1973)                   |
                                                           GML
                                                    (Charles Goldfarb, 1969)
                                                            |                       SCRIBE
                                                            |                   (Brian Reid, 1980)
                                                            |                          |
                                                            |--------------------------|
                                                          SGML
                                                      (Standard, 1980)
                                                     |                |
                                                     |                |
                                                   HTML              XML
                                            (Berners-Lee, 1990)    (Standard, 1998)

As far as web site templating, SSI is the mother of them all.

From a security standpoint, JSP scriptlets have vulnerabilities:

There are a handful of objects made available in JSPs which are susceptible to security flaws. Their corresponding Java class functions are used as is in scriptlets. All the same security rules should apply.

For example, one session variable:

 <%=session.getAttribute(name)%>

can taint another:

<% 
String name = request.getParameter("username");
session.setAttribute("taintedAttribute", name);
%>

and unescaped strings can be dangerous as well:

<style>
<%
  String parm = request.getParameter("foobar");
  String cssEscaped = Escape.cssString(parm);
%>

a[href *= "<%= cssEscaped %>"] {
   background-color: pink!important;
}
</style>

XSLT

XSLT uses a hierarchy to allow parameters to be redefined:

  • the with-param value has the highest precedence
  • the param value has the second highest precedence
  • the value-of value has the third highest precedence

For example:

<xsl:template match="/">
    <xsl:call-template name="blob">
        <xsl:with-param name="par" select="'some-value'"/>
    </xsl:call-template>
</xsl:template>

<xsl:template name="blob">
    <xsl:param name="par" select="'default-value'"/>
    <xsl:value-of select="$param"/>
</xsl:template>

Modes in XSLT allow us to invoke templates based on matching XPath selectors, which is a form of delegation:

<xsl:template match="/">
    <!-- Apply templateA -->
    <xsl:apply-templates mode="templateA"/>
</xsl:template>

<xsl:template match="someElement" mode="templateA">
    <!-- Your templateA logic here -->
</xsl:template>

The for-each loop control of XSLT uses the position() method to capture the index, and the current()` method to capture its value. Enumerate these items:

<items>
    <item>Apple</item>
    <item>Banana</item>
    <item>Cherry</item>
</items>

Using a template:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:template match="/">
        <enumerated-items>
            <xsl:for-each select="items/item">
                <enumerated-item>
                    <xsl:number value="position()" />
                    <xsl:value-of select="current()" />
                </enumerated-item>
            </xsl:for-each>
        </enumerated-items>
    </xsl:template>
</xsl:stylesheet>

XSLT will transform it to:

<enumerated-items>
    <enumerated-item>1 Apple</enumerated-item>
    <enumerated-item>2 Banana</enumerated-item>
    <enumerated-item>3 Cherry</enumerated-item>
</enumerated-items>

And now the data is annotated with the index and you can see the total count at a glance.

UIML

UIML is an abstraction which can be used to generate XSLT, JSX, or any other tag based language easily using XSLT. Here is 'Hello World':

<uiml>
  <part class="HelloWorld">
    <content>
      <data>
        <![CDATA[Hello, World!]]>
      </data>
    </content>
  </part>
</uiml>

XSLT Processor Interop

RFC 6570

Transclusion

Slots in web components vs XSLT transclusion

Slots in Web Components

 <my-component>
   <p slot="mySlot">Content to be transcluded</p>
 </my-component>

 <script>
   this.shadowRoot.addEventListener('slotchange', (event) => {
     const slotContent = event.target.assignedNodes();
     // Handle the slot content as needed
   });
</script>

XSLT

 <!-- doc1.xml -->
 <chapter>
   <title>doc1.xml</title>
   <p>First paragraph</p>
   <transclusion src="doc2.xml"/>
   <p>Last paragraph</p>
 </chapter>

 <!-- XSLT stylesheet -->
 <xsl:template match="transclusion">
   <xsl:copy-of select="document(@src)"/>
 </xsl:template>

MediaWiki

Declarative Markup

<h2 id="page-one">foo</h2>
<!-- content block -->
<h2 class="footer">bar</h2>
<h2 id="page-two" class="page-break">baz</h2>
<!-- content block -->
<h2 class="footer">bop</h2>
<h2 id="page-three" class="page-break">buzz</h2>
<!-- content block -->
<h2 class="footer">blip</h2>
<h2 id="page-four" class="page-break">bloop</h2>
<!-- content block -->
<h2 class="footer">blarg</h2>
<h2 id="page-five" class="page-break">blech</h2>


@media print {
    #page1, #page2, #page3, #page4, #page5 {
        page-break-after: always;
    }
    #page5 {
        page-break-after: auto; /* No page break after the last page */
    }
}

Semantic Markup

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Social Network Timeline</title>
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
      rel="stylesheet"
    />
  </head>
  <body class="bg-gray-100 p-6">
    <div class="max-w-4xl mx-auto">
      <h1 class="text-3xl font-bold mb-6">
        Timeline of Social Network Domain Launches
      </h1>
      <div class="space-y-4">
        <div class="flex items-center">
          <span class="w-40">Friendster (2002)</span>
          <meter
            value="2002"
            min="2000"
            max="2022"
            class="w-full h-6 bg-gray-200 border-2 border-gray-300 rounded"
          ></meter>
        </div>
        <div class="flex items-center">
          <span class="w-40">LinkedIn (2003)</span>
          <meter
            value="2003"
            min="2000"
            max="2022"
            class="w-full h-6 bg-gray-200 border-2 border-gray-300 rounded"
          ></meter>
        </div>
        <div class="flex items-center">
          <span class="w-40">MySpace (2003)</span>
          <meter
            value="2003"
            min="2000"
            max="2022"
            class="w-full h-6 bg-gray-200 border-2 border-gray-300 rounded"
          ></meter>
        </div>
        <div class="flex items-center">
          <span class="w-40">Facebook (2004)</span>
          <meter
            value="2004"
            min="2000"
            max="2022"
            class="w-full h-6 bg-gray-200 border-2 border-gray-300 rounded"
          ></meter>
        </div>
        <div class="flex items-center">
          <span class="w-40">Twitter (2006)</span>
          <meter
            value="2006"
            min="2000"
            max="2022"
            class="w-full h-6 bg-gray-200 border-2 border-gray-300 rounded"
          ></meter>
        </div>
        <div class="flex items-center">
          <span class="w-40">Instagram (2010)</span>
          <meter
            value="2010"
            min="2000"
            max="2022"
            class="w-full h-6 bg-gray-200 border-2 border-gray-300 rounded"
          ></meter>
        </div>
        <div class="flex items-center">
          <span class="w-40">Pinterest (2010)</span>
          <meter
            value="2010"
            min="2000"
            max="2022"
            class="w-full h-6 bg-gray-200 border-2 border-gray-300 rounded"
          ></meter>
        </div>
        <div class="flex items-center">
          <span class="w-40">Snapchat (2011)</span>
          <meter
            value="2011"
            min="2000"
            max="2022"
            class="w-full h-6 bg-gray-200 border-2 border-gray-300 rounded"
          ></meter>
        </div>
        <div class="flex items-center">
          <span class="w-40">TikTok (2016)</span>
          <meter
            value="2016"
            min="2000"
            max="2022"
            class="w-full h-6 bg-gray-200 border-2 border-gray-300 rounded"
          ></meter>
        </div>
      </div>
    </div>
  </body>
</html>

Comparison

templating_engines:
  - name: "Jinja"
    primary_use: "Templating engine for Python"
    language: "Python"
    syntax: "{% %} for control flow, {{ }} for variables"
    customization: "Highly customizable with extensions"
    performance: "Fast rendering"
    learning_curve: "Moderate, especially for Python devs"
    community_support: "Active community"
    use_cases: "Web applications, data visualization"
  
  - name: "Django Template Language (DTL)"
    primary_use: "Templating engine for Django"
    language: "Python"
    syntax: "{% %} for control flow, {{ }} for variables"
    customization: "Built-in tags and filters"
    performance: "Moderate rendering"
    learning_curve: "Moderate, especially for Django devs"
    community_support: "Large community"
    use_cases: "Web applications"
  
  - name: "Server Side Includes (SSI)"
    primary_use: "Adding dynamic content to HTML pages"
    language: "HTML"
    syntax: "<!--# --> for directives"
    customization: "Limited to basic directives"
    performance: "Fast for small dynamic content"
    learning_curve: "Easy for HTML developers"
    community_support: "Limited community"
    use_cases: "Static websites with dynamic content"
  
  - name: "XSLT"
    primary_use: "Transforming XML documents"
    language: "XSL (a subset of XML)"
    syntax: "<xsl: > for control flow"
    customization: "Extensive transformation capabilities"
    performance: "Can be slow for large documents"
    learning_curve: "Steep, requires understanding of XML"
    community_support: "Active community"
    use_cases: "Data transformation, XML processing"

References

Property Accessors

XBL

CSS

Static Site Generators

PHP

Python

Ruby

Perl

Golang

Node.js

OCaml

Erlang

Games

⚠️ **GitHub.com Fallback** ⚠️