The latest articles on DEV Community by johnaweiss (@johnaweiss). https://dev.to/johnaweiss https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F374600%2F82bf6588-8214-434c-87e0-f86ecafb4b20.jpeg https://dev.to/johnaweiss en johnaweiss Tue, 29 Nov 2022 04:39:19 +0000 https://dev.to/johnaweiss/html-node-templating-system-5g98 https://dev.to/johnaweiss/html-node-templating-system-5g98 <p>Check out this lightweight, robust HTML node-layout templating system. It enables HTML programmer to more easily control the layout of an arbitrary number of identical HTML sibling nodes, each containing different data, pulled from a hidden table. Designed to minimize effort and reduce keystrokes for the HTML programmer, and protect live HTML from content admins.</p> <p><a href="https://github.com/johnaweiss/HTML-Micro-Templating">https://github.com/johnaweiss/HTML-Micro-Templating</a></p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--GftJJk3I--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ulj57py1h0oovvilwl4.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--GftJJk3I--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ulj57py1h0oovvilwl4.jpg" alt="Image description" width="767" height="375"></a></p> <p>This system isn't for templating an entire website or webpage. It's for repeated HTML nodes within a page.</p> <h2> Benefits </h2> <ul> <li>There's just one copy of the HTML layout to edit.</li> <li>Content admins never need to touch the HTML of the node-series. They just edit a plain-text list of records.</li> <li>All dynamic assets can be contained within a single HTML file.</li> <li>Supports any number of templates, datasets, and insertion-points on the same webpage.</li> <li>Optionally, for safer content-management, data can be stored in a separate file from the webpage. (Requires PHP.)</li> <li>No database needed.</li> <li>Built using vanilla Javascript. No library or framework needed. Extremely lightweight Javascript.</li> <li>HTML templates and data can be mixed and switched on the same webpage with the same ease as CSS styles, as long as the fields match up.</li> <li>Variable data can be inserted anywhere in the template's HTML, including element metadata.</li> <li>Clean, resilient code.</li> </ul> <p><a href="https://github.com/johnaweiss/HTML-Micro-Templating">https://github.com/johnaweiss/HTML-Micro-Templating</a></p> nodes templating html clones