Warning: This is a jestful tirade of various UI development curiosities…

For years brave souls have hacked and toiled at the rendered boxes on the page. A simple alert() here or document.write() there sufficed. We then gained the web inspector, enabling further introspection and thus further complexity. We could see the DOM nodes themselves, their hierarchies and mutations. We still went back and forth with console.logs and alerts, of course, but it was more pleasant. It felt mature, refined and productive. Eventually we gained further insight. CSS properties, event listeners, expando-data, and more. We debugged JavaScript like adults do, breakpoints and all! We stepped forward and up to a higher level of understanding.

But you're not stepping up anymore. No, that next step through will lead you nowhere you want to be. An event listener maybe, if you're lucky. Most likely it's your UI middleware or perhaps it's some View logic that runs in response to that jQuery-bound event that you set up when your mind still made sense to you.

The inspector is your salvation, you think. In sheer desperation you take a peek. But that dom node you're looking at now? It's a node, sure, but it's not a regular one. It's used to delineate live-binding insertion points. Did you know that? Yeh, your middleware-framework-black-box is putting that there, to help you no less. Oh and you see that text over there? Yeh, you're not gonna find that in the DOM; it's actually content added via CSS. And that button on the left? That's a deeply nested element in a piece of shadow DOM which will disappear if you try to right-click on it because the developer was overzealous with their event binding. And when you scroll, the page doesn't scroll. Instead the fury of a thousand on-scroll event listeners scream at you, enabling and disabling cascading CSS3 transitions via JavaScript so that the shiny thing on the page can swivel in the exact way it must. There's no earthly way of knowing what will stop the call stack stacking.

In defeat you sit there and wonder: when did everything get so complex?

But you don't really wonder because you know. It makes perfect sense–the various steps leading to this. It was inevitable. But it's okay; it really is! Because Mr Rogers, as he scrolls his mouse-wheel, will realise that this shiny thing on the page is slowly swivelling. And he'll think "Gosh, that's nice."

Thank God, you say, it's all for something.

Thanks for reading! Please share your thoughts with me on Twitter. Have a great day!