The good, bad and ugly of the "HTML first" manifest

A manifesto called "HTML first" floated up to the first page of hacker news earlier this week. This caught my attention, because at first glance, it seemed like it aligned perfectly with my views on web development. It states these basic principles:

To build web software easier, faster, inclusive and maintainable, we should:

1. Leveraging the default capabilities of modern web browsers.
2. Leveraging the extreme simplicity of HTML's attribute syntax.
3. Leveraging the web's ViewSource affordance.

Who could have disagreed? As a front-end developer myself, I am appalled by the amount of web developers who simply doesn't know the web platform: They don't get the basics of HTML, the DOM tree, nor the DOM API. They don't know how to write CSS. They don't know the basics of JavaScript event handling. What they do know, is some framework or set of tools to make web applications, often included React or Angular.

They seem to struggle when bugs appear. The use of Firefox's or Chrome's inbuilt developer tools seems incomprehensible for them, and more often than not, the "bug fix" seems to bloat the code base with more code, sneaking around the issue.

But it seems like the advices of HTML first don't facilitate all of my concerns...

The bad: Use libraries that leverage html attributes over libraries built around javascript or custom syntax

I'm not disagreeing with this per se. Javascript libraries that obscure the web platform, and invent their own syntax or conventions is bad. I am nevertheless not convinced that it is any better to use non-standard HTML attributes. The manifesto uses two examples of putting text written into an input element, into a div element. Here is how I would do the same:

<form id="another_form">
  <input type="text" name="input_field">
  <div id="output"></div>
</form>

<script>
const inputField = document.querySelector('#another_form [name="input_field"]');
const output = document.getElementById('output')

inputField.addEventListener('input', function onInput(e) {
    output.innerText = e.target.value
})
</script>

This does exactly the same as the "discouraged" example in HTML first, except for one thing: I use the web platform, and not some third party javascript library with its own home-made conventions (that both of the manifesto-examples does). Its more verbose than the "encouraged" example, but it won't take any longer time for a new aspiring developer to learn. And if you learn it the "web platform" way, I say you have knowledge that will benefit you on all future web development tasks.

The ugly: Where possible, default to defining style and behaviour with inline HTML attributes

Also here, the "HTML first" manifesto encourages web developers to run away from the web platform. And I have a lot of concerns about this advice.

Styling your web application within your HTML attributes voids the possibility for any third party to help styling your application. Remember where users could have complete visual control of their MySpace pages, due to a bug (kept as a feature) where CSS in the profile text fields was interpreted and applied by the browser?

If you use good style classes describing what your component is, any third-party CSS writer (yourself in the future, a new colleague or even the end-user!) can effortless alter the look and feel of your application. If you use the non-platform-compliant Tailwind, this becomes much more difficult.

And also, if you use Tailwind in your project, you missed the opportunity to learn CSS, which is part of the web platform.

Conclusion

I don't hate HTML First, and people who wants to leverage htmx or Tailwind in their projects should definitively do it. They enrich our plethora of nifty tools, and makes my life as web developer more fun. None-the-less, if you want to learn the web platform, and gain knowledge that you also can leverage 10 years from now, you should learn the basics of the web APIs and CSS, before starting using these tools.

If you are a beginner, you find incredibly good documentation about the web on MDN docs, and even at w3schools (which has become a lot better in the recent years, albeit still frowned upon by the likes as me).

To sum it up: HTML first has a lot of goodnes within, but me myself, I am a "Web platform first" kind of guy. I wonder if that has some kind of manifesto.