The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Code-Free Templating, a new tool
Johny Why
post Dec 8 2022, 04:36 AM
Post #1





Group: Members
Posts: 1
Joined: 7-December 22
Member No.: 28,676



I'm just sharing a free tool i developed that might be helpful to others.

It's a code-free, client-side templating tool, that will enable an HTML dev to display a collection of repeated items on a webpage with identical HTML, but different content.

IPB Image

"Template" meaning there's only one copy of the HTML, shared by all the items in the collection. To change the layout of all the items, you only have to edit the template.

Code-free meaning, you don't need to write or know Javascript. Everything is done in HTML, including the template, container, and data.

The content is separate from the HTML, so you can update the data without touching the HTML.

It's best for small projects with few items that don't change too often, where you can't or don't want to do server-side programming.

Feel free to ask questions here or on github.

https://github.com/johnaweiss/HTML-Micro-Templating

Here's a simple example.
  • The container puts the collection on the webpage.
  • The template contains double-bracketed placeholders, which get loaded with data.
  • The data is stored in a hidden area of the webpage
CODE
<body>
     <!-- CONTAINER -->
     <span mt-records="EEs" mt-template="engineer" class="engineers"></span>
</body>


     <!-- TEMPLATE -->
<template id="engineer">
    <span>
        <a target="_blank" href="http://[[LINK]]">
            <img src="[[IMAGE]]" alt="">
            <div class="caption">[[NAME]]</div>
        </a>
    </span>
</template>


        <!-- DATA -->
    <mt-records hidden id="EEs">
        NAME
        LINK
        IMAGE

        Benervive Guper
        https://www.Guper.com
        Guper.jpg

        Phoey Ramstung
        https://Ramstung.com
        Ramstung.jpg

        Sam Smith
        https://samsmith.com
        sam.jpg
    </mt-records>


This post has been edited by Johny Why: Dec 8 2022, 04:56 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Jason Knight
post Jan 2 2023, 04:41 PM
Post #2


Member
***

Group: Members
Posts: 41
Joined: 25-December 22
Member No.: 28,719



Honestly this is a poster child for why I say the people who create these types of systems don't know enough HTML or CSS to be working with the front-end in the first place. DIV soup, presentational classes, invalid/broken HTML...

I mean seriously, DIV inside SPAN? SPAN doing FIGURE's job, DIV doing FIGCAPTION's job? SPAN as an outer container? And that's just your simple demo. The code in your github is outright horrifying in a "please learn HTML" kind of way.

Which is a problem as people will blindly copy that bad markup as if it's how things are supposed to be done. Look at the majority of outright idiotic rubbish people vomit up with react, failwind, bootcrap, and so forth.

Also can't say I'm wild about the lack of identifiers in the data format. Probably be better if it used something like XML or JSON than "linefeeds separate rows, double linefeeds separate records".

Of course as a client-side scripting only solution, it's also a giant middle finger to usability and accessibility.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Jason Knight
post Jan 2 2023, 04:57 PM
Post #3


Member
***

Group: Members
Posts: 41
Joined: 25-December 22
Member No.: 28,719



Just to break down what I mean, not I'm not TRYING to be intentionally harsh, but this code is kind of proof you don't know enough HTML to be playing with JavaScript yet, much less making solutions for others. That's not meant as an insult, but as a simple truth.

As I'm always saying ignorant isn't an insult, it just means you don't know any better. You can FIX ignorant.

But take this:
CODE

        <template id="engineers">
            <H3>[[TITLE]]</H3>
            <H4>[[SUBTITLE]]</H4>
            <!-- CONTAINER FOR ITEMS -->
            <span mt-template="engineer" mt-records="[[RECORDS]]" class="engineers"></span>
        </template>


Is that H4 really opening up an entire new subsection of the page? Doesn't seem like it. Are you REALLY down at H3 depth on these? Seems dubious

CODE

        <template id="engineer">
            <span class="engineer">
                <div class="title">An Engineer</div>                
                <a target="_blank" href="http://[[LINK]]">
                    <img src="https://tinyurl.com/2mv3jtzh/[[IMG]]" alt="">
                    <div class="caption">[[NAME]]</div>
                </a>
            </span>
        </template>

DIV cannot be children of SPAN. That is invalid gibberish HTML. Assuming the outer container was JUST an H3 assuming you're actually down to H3 structural depth, the <div class="title"> should be H4, not the semantically neutral/meaningless DIV.

Even just this:
CODE

        <H1>HTML Micro-Template Demonstration</H1>
        
        <!-------------- CONTAINER: SIMPLE TEMPLATE+DATA MERGE  ------------------->
        <H3>HTML Layout 1, Group 1</H3>
        <span mt-template="artist" mt-records="EEs" class="artists"></span>
        <hr>

Reeks of flat out not even knowing what numbered headings are, what they're for, or how to use them. Where's the H2 that H3 is marking the start of a subsection of? It's almost like you're choosing your tags based on what you want things to look like, which is none of HTML's flipping job!

And yeah, I know that's just an example, but if your examples ignore the most basic rules of using HTML, what people build with it will be the same.

And that's before we talk the CSS of your example. PX == /FAIL/ hard.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 26th January 2023 - 04:42 PM