[Tip] Templated HTML generation (with scripts and preview)

Abstract:

Learn how to facilitate HTML Preview Action Step and HTMLpreview object in scripts
by heavily using intelligent tags
and nice details.

Motivation

  • Learn and understand what a HTML document with CSS (Style) and JS (Code) needs.
  • Show usage of some advanced features out of the box
  • Using multiple CSS and JS resources
  • Keeping the preview text simple and easy to maintain

Setup

First Template

I created a structured template to be filled with the getTemplateTags() function. These must be defined before calling the preview with this content.

<! DOCTYPE html>
<html dir="auto"> 

<head> 
<title>[[title]]</title>
[[head/meta]]
[[head/css]]
[[head/js]]
</head> 

<body> 
[[body/content]]
</body> 

</html> 

The content of the templates are grouped in the to sections:

  1. head :: metadata, styles and scripts
  2. body :: only content, structure and important styling

I do not discuss good HTML guide lines here. Only note that CSS should be placed in the header!

For the Definition in the <head>

  1. [[head/meta]] :: add meta data to your document ((Note: this might only start making sense if you safe your document. The documents meta data should/could be placed here))
  2. [[head/css]] :: the css files or css definitions in <style> tags.
  3. [[head/js]] :: the global java script libraries ((like includes))

For the Content in the <body>

  1. [[body/js/load]] :: ((removed))
  2. [[body/content]] :: the content itself. This mostly should be filled with the build in [[body]] template
  3. [[body/js/show]] :: ((removed))

Note: Edit: 4. and 6. will be abandoned …
@chrillek lead me on a Google suggestion not to use Java Script in the body
I will try if we could do that by facilitating the EventListeners with onload

Depending on usage, this might not be advisable: at least Google consistently encourages to move JS to the end of the page so as not to slow down loading and rendering. This is probably even true if your JS code modifies the DOM since it (the DOM) has to be loaded first.

1 Like

There’s this here in German
And this here in English (look for page speed)
There’s also an older description in English
There’s a short thread on Stackexchange, too
It sums up to: The browser does not render HTML before it has loaded the JS. So the page appears to load slower. This is more important for big JS files (like infamous JQuery). You could experiment with putting it in the head element or at the end of the body and compare the analysis for both variants in Google’s page speed tool

Danke.

Quite nice. I think I have to integrate the EventListener into my scripts.

That might help not only for speed but also for debugging on the errors event .

Thanks / Tausend Dank

Which one? Or rather: What do you want to achieve?

I tried to write about it here …