Principles to make building web software easier, faster and more inclusive.

Hacker News is a community-driven platform for sharing and discussing technology news, startups, and programming-related topics. Through user submissions and comments, Hacker News offers insights into emerging technology trends, industry developments, and entrepreneurial ventures. Readers can participate in discussions, share their insights, and stay informed about the latest advancements in technology and innovation.

Hacker News

HTML First is a set of principles that aims to make building web software easier, faster, more inclusive, and more maintainable by leveraging the default capabilities of modern web browsers, the simplicity of HTML's attribute syntax, and the web's ViewSource affordance.

HTML First

<code>&lt;%=</code> used in any syntax is fucking cancer! Change my mind

I remember how this article was sharedin one of my communities, and I disagree with how it was presented. Yes, we should keep HTML as HTML, but the examples given? They’re not vanilla HTML, they just hide the javascript behind attributes and src links.
They say to encourage this
<pre><code class="language-html">&lt;script src=&quot;https://unpkg.com/hyperscript@0.0.7/dist/hyperscript.min.js&quot;&gt;&lt;/script&gt;
&lt;div&gt;
 &lt;input type=&quot;text&quot; _=&quot;on input put me into #output&quot;&gt;
 &lt;div id=&quot;output&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>
over this
<pre><code class="language-html">&lt;script src=&quot;https://cdn.jsdelivr.net/npm/stimulus@2.0.0/dist/stimulus.umd.js&quot;&gt;&lt;/script&gt;

&lt;div data-controller=&quot;echo&quot;&gt;
 &lt;input type=&quot;text&quot; data-echo-target=&quot;source&quot; data-action=&quot;input-&gt;echo#update&quot;&gt;
 &lt;div data-echo-target=&quot;output&quot;&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
 const application = Stimulus.Application.start();

 application.register(&quot;echo&quot;, class extends Stimulus.Controller {
 static targets = [&quot;source&quot;, &quot;output&quot;]

 update() {
 this.outputTarget.textContent = this.sourceTarget.value;
 }
 });
&lt;/script&gt;
</code></pre>
But both do the same thing, the first only hides it. And not to mention, using a library in their bad example, instead of pure html and js, which would be better.
<pre><code class="language-html">&lt;input type=&quot;text&quot; id=&quot;name&quot; /&gt;
&lt;div id=&quot;output&quot;&gt;&lt;/div&gt;
</code></pre>
<pre><code class="language-js">const input = document.getElementById(&quot;name&quot;);
const output = document.getElementById(&quot;output&quot;);

input.addEventListener(&quot;change&quot;, (event) =&gt; {
 output.innerHTML = event.target.value;
});
</code></pre>

This is fan-freakin-tastic. As computers have become more powerful, and connections faster, it seems that we have also moved forward into making more bloated web applications. This is also reflected in ever more complex ways to create and manage those apps.
By going back to the basics, and trying to be frugal with code, we can go faster, make more robust apps that are faster to deliver and are more performant overall.
I’m also seeing a movement towards simplicity with HTMX, and this whole approach is really appealing.

I believe that HMTL should be semantic and dry, with native code prioritised over libraries or frameworks. There should also be a strict separation of concerns.
This guide makes some good points, but it is going backwards in time, with the use of inline styling. I thought we had left those bad habits in the past? What next, using tables for structure?

Nice article! It was fun to read but I don’t agree with everything. I believe keeping HTML separate from JavaScript is a cleaner approach.