We Need to Talk About the Front Web Part 3: What We Get Wrong
This article is the third part of a series of articles written as basis for the talk I gave for FFConf 2023.
You may want to start with the part 1 of this series.
We've seen how unique and powerful the web can be, and yet, we see the front web be constantly and systematically undermined.
I'm not sure if you were already around by the end of the 20th Century, but back then somebody had the great idea to deviate the use of table tags to create more sophisticated layouts for our web pages ‐ let's says that, at that time, there was no possible way to create a layout for a web page.
The front web is about looks, isn't it? It was not surprising that visual designers, frustrated with the lack of layout capacities of the web, were thrilled with this new possibility (me included!).
And there we were, with what we used to call the "tag soup": bits and pieces of content, drowned in a verbose and complex code made of TR and TD tags.
It got worse still when we've started to spice the soup with style attributes like "valign", "bgcolor", "text"...
Then semantics started going down the drain, and with it the possibility to reuse content, to make it accessible, to make the design evolve. We've also broken the resilience: one missing closing TD tag, and our layout was broken. Maintenance was also a nightmare.
We have lost standards too, because most of these style attributes were proprietary, proposed by browser vendors.That was the first time that we started tampering with the front web.
Fortunately, around 2004, we started to have browsers that respected web standards properly, and we could get rid of table tags and control our design and layout with CSS.
We could finally write a simple, semantic HTML as we were supposed to. Get the best of content/style separation and semantics, leaving our content meaningful, accessible and future-friendly.
But one should be really naive to believe that. There we were again in a tag soup, now made of DIVs and SPANs. DIV and SPAN were tags addded later to HTML (v. 4) mostly for grouping content to be manipulated together, so they had no semantic attached to them; once again, our content was drowned by non-semantic tags.
Later on, HTML 5 presented us with new elements, strengthening HTML semantics and allowing us to enhance web accessibility. Yes! At last we can effectively get the best of content/style separation and develop a robust, accessible and maintainable front.
But, oh, wait! This one I did not see coming: Classes soup!
We still don't get the CSS and because of that we keep polluting the HTML unnecessarily. Because not all of us master basic CSS notions as selectors or specificity, we just level everything down and drown our code with utility classes.
Men will do literally anything instead of just learning css.
– Robb Knight, robb@social.lol on Mastodon
It makes me want to cry, but well, that's how humanity progress, hu? One step forward, two steps backwards.
Why do we keep tampering with HTML?!
In 2010, I wrote an article — Forget Your Style-Sheet — where I use a metaphore to highlight the role of HTML in the web. Think of the front web as a house: if CSS is the style of your house, the way it is decorated; if JavaScript is the way doors and windows open or the way the heating system works, then HTML is the foundations of your house. You can change once a year the wall papers, you can paint your windows every three years, you can change all the furniture every month if you like, but you cannot easily modify the foundations of your house, not without great effort, lots of time, and lots of money. That's exactly what happens with our projects if we sabotage the front web.
I always make a parallel between our approach to the front web and Dorian Gray's portrait (you can see where I'm going, right?): on the surface, our web page seems “pixel perfect” — I hate this expression —, beautiful, but if we take a look at the code behind it, we see how badly we are treating our site, by systematically eroding the very matrix of it: the HTML.
If companies are willing to spend lots of time and money doing and redoing over and over again their sites, that's their problem, but the worst of it all is that our users are beginning to notice the decay behind the looks, and they are suffering from extremely bad UX.
That's the web today: abstractions, intertwined dependencies, heavy tools, thirty-party libraries, client-side JavaScript frameworks... SPAs! — we simply broke the web with these.
Today, web sites' performance is pitiful, and it is not as if we were adding all that for the sake of a better user experience.
...we have created more problems with our tools than we’ve solved.
– Oxford Harrison, Rethinking the Modern Web
I ask once more: why are we deliberately sabotaging the front, again and again?