HTML Made Special

Don’t Dump Your Data Model

You have a nice internal data model. It is subtle, it is detailed. It may be verbose, but at least it’s unambiguous. It can be tempting to devise a short algorithm that automatically converts it to HTML, say using class to capture the class and some long-named data-* to encode data fields, all hanging from a deep pile of divs, and then call that a vernacular.

Don’t. If that is actually what you want to do, why bother using HTML at all? JSON will work perfectly well for that use case, don’t go to an HTML vernacular just because it’s what smart, funny, good-looking people are doing.

XAML is a very obvious example of such a language that was designed for cyborgs then shown to humans, but unfortunately it is such a verbose language that there would be no room here for an example of just how mind-boggling it can be. A quick display of one of its bizarre traits should suffice. Here is some very simple XAML:

<Canvas x:Name="Foo" Height="300" Width="500" Background="White"
<rectangle width="200" height="100""20" canvas.left="100" stroke="Black" strokethickness="3">
    <imagebrush bitmapsource="C:\dahut.bmp"/>

The above shows two things: compound properties (the Rectangle.Fill that is a child element acting as if it were an attribute of its parent but with extra structure), and attached properties (attributes on an element that actually "talk" to its parent, in this case Canvas.Top and Canvas.Left). There is no doubt that there is a logical model behind this approach, but it belongs to the implementation that supports it. Instead, it is making things complex for the user. Indeed, how am I to know that the position of a rectangle is a property of its container, and not something intrinsic to it? Likewise, why is the fill of a rectangle a property with the name Rectangle.Fill even though it contains a complete image, should the rectangle itself be a property of the canvas and be called Canvas.Rectangle? The only answer that comes to mind is “Come with me if you want to live”.

Now imagine the above all done in data-* attributes…

↖︎ Back to list