 Code-Free Templating, a new tool |
| Johny Why |
 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.  "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.
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 |
  |
 
|
  |
Replies
| Jason Knight |
Jan 2 2023, 04:41 PM
Post
#2
|
|
Advanced Member  Group: Members Posts: 109 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. |
|
|
|
Posts in this topic
Johny Why Code-Free Templating Dec 8 2022, 04:36 AM
Jason Knight Just to break down what I mean, not I'm not TR... Jan 2 2023, 04:57 PM |
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 29th May 2024 - 02:45 AM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC