Foolproof HTML

&gt; If you have a good strategy for validating your template files, I&#x27;d love to hear it!<p>Use S-expression syntax instead of SGML syntax, i.e. instead of:<p>&lt;tag attr=value ...&gt;content&lt;&#x2F;attr&gt;<p>write<p>((tag attr value ...) content)<p>and use Lisp to process it. It&#x27;s actually quite straightforward. You can apply it to XML as well. Everything actually ends up looking a lot prettier this way.<p>See <a href="http:&#x2F;&#x2F;weitz.de&#x2F;cl-who&#x2F;" rel="nofollow">http:&#x2F;&#x2F;weitz.de&#x2F;cl-who&#x2F;</a> for an example of an implemented system that works this way. I&#x27;ve been using it in production for years. It works like a charm.

It was a nice read, and I like the way the idea was presented. But one thing that stood out to me as kind of odd was the distinction between typing lowercase and uppercase characters. Automatically assuming lowercase to be a &quot;keyword&quot; does not seem like the right idea to me. Most sentences on the web might start with a capital, but not all of them will do. (For example here on HN, you have in the nav bar &quot;new | threads | comments | ..&quot; None of them starting with a capital.

I found my foolproof HTML in slim-lang.<p>It produces standards-compliant HTML and prevents me from writing code that is not well-formed.<p>The above is a nice side effect of its incredibly clean and terse syntax.<p>Now I feel cheated any time I need to write regular HTML.<p><a href="https:&#x2F;&#x2F;github.com&#x2F;slim-template&#x2F;slim&#x2F;blob&#x2F;master&#x2F;README.md" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;slim-template&#x2F;slim&#x2F;blob&#x2F;master&#x2F;README.md</a><p>I used emmet for a while but slim improves on writing <i>and</i> reading code.

Regarding the &#x27;code without syntax&#x27; part: I wrote something that basically does this for any language that you have an EBNF grammar for. It turns the grammar into a graph; wherever your cursor is in the document at a given moment corresponds to some node in the graph; the edges going out of that node are the syntactically valid things you can insert from that point.<p>Unfortunately there is no UI for it atm—though there is UI for the editing portion (which almost exactly matches the author&#x27;s .gif at the end of the document): <a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=tztmgCcZaM4&amp;feature=youtu.be&amp;t=1m36s" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=tztmgCcZaM4&amp;feature=youtu.be...</a><p>It&#x27;s a concept that a lot of people have explored. My understanding is that some academics were interested in it a while ago but never produced anything that worked well and kind of wrote it off. Now some people are revisiting it (e.g. Unison[1] and Jetbrains MPS[2]).<p>I think the core idea involved is a shift away from using text <i>as a model for representing programs</i>; instead, interact with more abstract representations of code, and <i>render</i> those abstractions as text. This allows your editor to have better understanding of the language you&#x27;re using, so syntax becomes a property of a language&#x27;s visualization rather than something totally central to it (and now you don&#x27;t have to memorize it!).<p>[1] <a href="http:&#x2F;&#x2F;unisonweb.org&#x2F;2015-05-07&#x2F;about.html" rel="nofollow">http:&#x2F;&#x2F;unisonweb.org&#x2F;2015-05-07&#x2F;about.html</a> [2] <a href="https:&#x2F;&#x2F;www.jetbrains.com&#x2F;mps&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.jetbrains.com&#x2F;mps&#x2F;</a>

I made a Scalatags library that lets you write your HTML templates in-line in your Scala code (or Scala.js), similar to React&#x27;s JSX but without the XML syntax:<p><pre><code> div( h1(id:=&quot;title&quot;, &quot;This is a title&quot;), p(&quot;This is a big paragraph of text&quot;) ) </code></pre> <a href="http:&#x2F;&#x2F;www.lihaoyi.com&#x2F;scalatags&#x2F;#ScalaTags" rel="nofollow">http:&#x2F;&#x2F;www.lihaoyi.com&#x2F;scalatags&#x2F;#ScalaTags</a><p>Although this ties it to the Scala <i>language</i>, it does not tie you to a particular platform: the templates can run on the JVM, in the browser with Scala.js, and even in the new scala-native LLVM backend.<p>The fact that the chosen language is statically typed means you get &quot;basic&quot; level validation right-off-the-bat thanks to the compiler:<p><a href="http:&#x2F;&#x2F;www.lihaoyi.com&#x2F;scalatags&#x2F;#WhyScalatags" rel="nofollow">http:&#x2F;&#x2F;www.lihaoyi.com&#x2F;scalatags&#x2F;#WhyScalatags</a><p>Basic typo-detection, enforcing things are properly nested, anti-XSS-enforcement, along with all the other &quot;standard&quot; IDE features: jump-to-definition for your sub-templates (which are just functions), use of arbitrary code within your templates (not unlike JS-X), etc.. Also, the fact that your templates are compiled into bytecode&#x2F;JS at build time rather than interpreted and re-implementing scope management and variable-bindings and such in user-land code at runtime, means the templates are really very fast.<p>All this comes &quot;for free&quot;, since your templates are code like any of the other code you write, and are handled by the IDE and optimized by the compiler in the same way.<p>The downside, of course, is that templates are code and thus cannot be provided safely by third parties, similar to React&#x27;s JS-X

The problems I mostly have run into regarding html are because we have started shoving random javascript and javascript-esque things into it and over complicating things, often needlessly. The author says it himself &quot;That&#x27;s fine for plain HTML&quot;, referring to validation.<p>This is why back in 2014 I decided that I was going to focus on making as many of the webpages I make pure html5&#x2F;css3, and keep javascript completely out of the picture if possible and now if I do break that rule I make it LibreJS compatible.<p>For an editor, I am an avid emacs fan, but for templates, I have of late become enamoured with asciidoc and asciidoctor, originally using them for sysadmin documentation things, I am beginning to realize my method of writing web pages (sshed into a box using emacs and updating with cron jobs calling asciidoc and bash scripts) might actually be good for just normal web stuff too.<p>Of course, there are some downsides, but I never really was a wysiwg sort of person anyway, because every time I&#x27;ve gotten my hopes up about some wyswig, it failed me in countless and unfathomable ways.<p>I feel like people have veered too far away from the core purposes of html and css, html for content and structure, css for design and display control.<p>We&#x27;ve gotten to the point now where I can visit any random top 500 alexa sites and anywhere from 10-50 javascripts are trying to load. It&#x27;s ridiculous, and I think a return to simplicity will be key for most websites, because lets face it, you probably really don&#x27;t need crud for $project.

<p><pre><code> Code ??? WYSIWYG Could there be something unexplored in the middle? </code></pre> WYSIWYM - What You See Is What You Mean.<p>Most famously used by the LaTeX powered document processor, LyX.<p><a href="https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;WYSIWYM" rel="nofollow">https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;WYSIWYM</a>

&quot;Could there be something unexplored in the middle?&quot;<p>I believe so.<p>At the moment I am working on next version of my blocknote.net editor - the editor for &quot;Web writers&quot; - people who create textual content of the Web.<p>Check <a href="http:&#x2F;&#x2F;sciter.com&#x2F;new-blocknote-net-application-is-getting-its-shape&#x2F;" rel="nofollow">http:&#x2F;&#x2F;sciter.com&#x2F;new-blocknote-net-application-is-getting-i...</a><p>In particular first screenshot. It has so called block outline bar that shows structure of the HTML underneath WYSIWYG text.<p>IMO: For most of people WYSIWYG is still a preferable way of editing text. Markdown and especially HTML source code editing is far from being humanistic.

One of the things I like about JSX is that it will always make sure you write valid syntax.<p>Problem with things like slim is that you cannot copy-paste directly from HTML.

Interesting. Despite the many approaches to writing HTML more are invented all the time. Currently I&#x27;m working on yet another way. My idea follows the Lisp tradition based on its hierarchical list structures. It&#x27;s surprisingly easy to parse and generate HTML from basically simple lists.<p><pre><code> &#x27;(html (head head stuff ...) (body (h1 &quot;My HTML&quot;) (div (@ class &quot;main-div&quot; ...) &quot;main div stuff&quot;))) </code></pre> Of course it gets a lot more complicated when generating complete web pages and apps, but using paste operators, procedures and variables can make it produce anything necessary.<p>A very similar approach is possible with Tcl, which I am using now for several reasons including integration with legacy code. In Tcl the above looks like:<p><pre><code> {html {head head stuff ...} {body {h1 {! My HTML}} {div {@ class &quot;main-div&quot; ...} {! main div stuff}}} </code></pre> In Tcl variables and procedures can be interpolated into the output by wrapping the list in a &quot;subst&quot; command:<p><pre><code> [subst {html .... [my-proc $my_var] ....}] </code></pre> The hierarchical nature of Lisp-like languages naturally resembles the GUI outline form the author presents in the article. Using Tcl it&#x27;s occurred to me that it should be possible to write a &quot;front end&quot; to the parser&#x2F;generator code using Tk (via the text or canvas widgets) which could resemble the author&#x27;s illustrations.<p>Ultimately I think the difficulty lies in the need for constructing customized templates to enable modular, easy-to-use GUIs for particular tasks. Real HTML can quickly become very complex which is the reason for the thousands of frameworks, generators and templating systems in existence. While I think the author&#x27;s approach or my own can potentially be helpful, neither is going to magically eliminate the burden on the programmer.

I don&#x27;t think this is all that helpful. If you use a moderately-decent text editor, it probably has a closing feature, and an autoindent feature.<p>If you&#x27;re writing a new tag in emacs, you just need to write the opening tag, then press &quot;C-c &#x2F;&quot;, and it will close it for you. If you have a syntax error of this magnitude, the autoindenter will also help you realize. Just select the region (or the whole file) and press tab, see where the indentation stops making sense, and follow back to the opening tag by column.<p>There are heavy-handed approaches to this, but I find that default-configured emacs with these two tricks can reduce your error rate to effectively zero, without requiring you to learn a new tool just for [X][H]TML. I say &quot;just&quot; for HTML having spent about half of my working hours in HTML for two years full time. I think this is enough.

Is hand-editing lots of HTML a common issue for web devs? I&#x27;d think more work is done elsewhere.

Syntax looks similar to Pug (previously called Jade, which was the default templating language in Express).<p><a href="https:&#x2F;&#x2F;pugjs.org&#x2F;language&#x2F;tags.html" rel="nofollow">https:&#x2F;&#x2F;pugjs.org&#x2F;language&#x2F;tags.html</a>

About the gif at the bottom of the page, where a div is swapped in place with an html sister node...<p>That&#x27;s 100% possible to do in Emacs, while editing plain html, using smartparens-strict-mode. Basically it treats the HTML like lisp code, so by &quot;autobalancing parens&quot; the editor lets you swap-sexps, which would perform the same transformation as the drag and drop in the editor, but much quicker and easier (as long as u can invest in learning the keys.)!<p>Of course with Hiccup[0] or Reagent[1] code in Clojure&#x2F;script, it&#x27;s perfectly possible too. The same keybindings even.<p>[0] <a href="http:&#x2F;&#x2F;hiccup.space" rel="nofollow">http:&#x2F;&#x2F;hiccup.space</a> [1] <a href="http:&#x2F;&#x2F;cljsfiddle.com" rel="nofollow">http:&#x2F;&#x2F;cljsfiddle.com</a><p>(I&#x27;m the author of those little projects)

If to focus on something close to source code editing then why not to simplify html itself a bit?<p>Sciter&#x27;s HTML parser supports shortcut constructs like:<p><pre><code> &lt;button|checkbox(first)&gt; woo! &lt;&#x2F;button&gt; </code></pre> which is<p><pre><code> &lt;button type=&quot;checkbox&quot; name=&quot;first&quot;&gt; woo! &lt;&#x2F;button&gt; </code></pre> And<p><pre><code> &lt;div#foo&gt; === &lt;div id=&quot;foo&quot;&gt; &lt;div#bar.solid.main&gt; === &lt;div id=&quot;foo&quot; class=&quot;solid main&quot;&gt; </code></pre> Not too much but makes life a bit easier while keeping all other HTML features intact.

The author might find MPS interesting. It it another attempt at providing an AST editor for coding.<p><a href="https:&#x2F;&#x2F;www.jetbrains.com&#x2F;mps&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.jetbrains.com&#x2F;mps&#x2F;</a>

Use Hiccup - a Clojure library. You&#x27;ll have a good syntax highlighting, see only important stuff (eg. no closing tags because it&#x27;s Lisp) and much less place to make stupid errors. Many people complain about plethora of parents in Lisp code but whatever the syntax is you&#x27;ll get used to it in &lt;20 hrs.

We had XHTML, which didn&#x27;t allow anything that wasn&#x27;t properly formed XML. It went nowhere.

Interesting effort. By the way: Does somebody know a good linter which works on pure HTML, Vue templates (the HTML part), Jinja templates (the HTML part). Searching for this, ideally for VSCode.

The article describes Markdown[1], basically. In my opinion, content should be written once and transformed to any format[2], including ConTeXt[3], docx, HTML, EPUB, or plain text. But here&#x27;s a puzzler.<p>Every software developer defines and uses variables. If variables are so powerful, why do WYSIWYG word processors lack the ability to quickly and easily insert variable definitions?[4] In the screenshot, the left-hand side provides an editable variable definition hierarchy, the middle pane provides a Markdown editor, and the right-hand side provides a real-time HTML preview of the content with variables interpolated and substituted.<p>After variables, programming language integration--such as R[5]--comes naturally. Consider the following syntax (that could be hidden through a UI):<p><pre><code> `r#csv2md(&#x27;data.csv&#x27;,totals=TRUE)` </code></pre> The function imports data from an external data source and converts it to Markdown. The HTML version can be styled, or piped through pandoc to create beautiful PDF output[6]. In the screenshot, the left-hand side shows the csv2md command (totals are calculated automatically for numeric columns), the middle pane shows an HTML preview (real-time), and the right-hand side shows a PDF produced from the same source document using pandoc and ConTeXt.<p>The CSV file could also be a JSON request over HTTP, or database query, meaning that the document is always up-to-date with the most recent data: a living document. This could be accomplished without having to change the source document, as well:<p><pre><code> `r#import(v$data$source,totals=TRUE)` </code></pre> Here, v$data$source is a variable that defines a data source. In this case, the value might be &#x27;data.csv&#x27;, but could be &#x27;protocol:&#x2F;&#x2F;host&#x2F;app&#x2F;api&#x2F;json&#x27;. The variables themselves could be sourced from a YAML file, JSON data stream, or remote database.<p>This is what I&#x27;ve been working towards for the last several months.[7] There&#x27;s more that this editor can do, but it&#x27;s still in early beta stages, should anyone care to try it.<p>[1]: <a href="https:&#x2F;&#x2F;github.com&#x2F;jgm&#x2F;pandoc&#x2F;issues&#x2F;168" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;jgm&#x2F;pandoc&#x2F;issues&#x2F;168</a><p>[2]: <a href="http:&#x2F;&#x2F;pandoc.org&#x2F;" rel="nofollow">http:&#x2F;&#x2F;pandoc.org&#x2F;</a><p>[3]: <a href="http:&#x2F;&#x2F;wiki.contextgarden.net&#x2F;" rel="nofollow">http:&#x2F;&#x2F;wiki.contextgarden.net&#x2F;</a><p>[4]: <a href="https:&#x2F;&#x2F;raw.githubusercontent.com&#x2F;DaveJarvis&#x2F;scrivenvar&#x2F;master&#x2F;images&#x2F;screenshot.png" rel="nofollow">https:&#x2F;&#x2F;raw.githubusercontent.com&#x2F;DaveJarvis&#x2F;scrivenvar&#x2F;mast...</a><p>[5]: <a href="https:&#x2F;&#x2F;github.com&#x2F;bedatadriven&#x2F;renjin&#x2F;" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;bedatadriven&#x2F;renjin&#x2F;</a><p>[6]: <a href="http:&#x2F;&#x2F;i.imgur.com&#x2F;Qe6mTpx.png" rel="nofollow">http:&#x2F;&#x2F;i.imgur.com&#x2F;Qe6mTpx.png</a><p>[7]: <a href="https:&#x2F;&#x2F;github.com&#x2F;DaveJarvis&#x2F;scrivenvar" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;DaveJarvis&#x2F;scrivenvar</a>

I remember XHTML with the application&#x2F;xhtml+xml mime type. Errors were pretty visible. The world backed out of it.

Isn&#x27;t this haml without templating?

So when are we going to ever get a replacement for for this deeply flawed technology called HTML?

That FrontPage screen shot gave me some flashbacks :-)

This is one of the best write-ups of all time.<p>In a way, Python is foolproof C. (I am thinking about the syntactic stuff around indentation, braces, semicolons, which is what I mean it about. I think if you can code in both syntaxes, read the article carefully, and generousy try to follow what I am talking about, you know what I mean.)