Some research-filled days later it turns out there's no tooling for what I want to do. That's no exaggeration, the web platform is still firmly stuck in a publisher/subscriber model exchanging static requests and returned pages. Further, there are no animation, graphics or other multimedia libraries, no concept of code file modularity in JavaScript, the inconsistent implementation of web standards is rampant, JavaScript, the language, is a hodgepodge of ideas tossed together at the last minute*, there's barely support for local data storage, the browser wars to improve JavaScript execution have only just begun, there are endless frameworks, plugins and transpilers all promising to abstract away "the difficult parts of the web", ...the list goes on.
*this led me into finding Douglas Crockford's JavaScript: the Good Parts
Well, whatever, all of this means I'll be on the cutting edge in whatever I attempt to do right? So I begin experimenting with and exploring what is available. In some sort of alternate game of Pokemon: Actually Implemented Web Standards I begin looking for the common set of features supported across all browsers-- including, yes, IE --rather than relying on polyfills and shims as is standard. I'm not left with much- absolute positioning, <divs> and some other common tags.
*I maintain a deep distrust of dependencies and firmly believe they should be culled as often and as quickly as possible.
**June 2020 edit - this is still the case nearly a decade later
It became clear that the core problem is that there is a declarative syntax for content (HTML) and styling (CSS) but nothing for layout (position, relation, nesting, etc.). Yes, yes, some of those layout properties are accessible within CSS but they are not implemented with a useful scene graph; e.g. no way to isolate components, lack of control over DOM redrawing, limited to nonexistent dynamic calculation of properties, no responsive 2D coordinate system, no way to declaratively specify dynamic rules, etc. There's just finicky layout rules that vary from layout engine to engine and all attempts to wrangle together a reliable system lead to a large pile of custom JS.
It became clear that the core problem is that there is a declarative syntax for content (HTML) and styling (CSS) but nothing for layout (position, relation, nesting, etc.). Yes, yes, some of those layout properties are accessible within CSS but they are not implemented with a useful scene graph; e.g. no way to isolate components, lack of control over DOM redrawing, limited to nonexistent dynamic calculation of properties, no responsive 2D coordinate system, no way to declaratively specify dynamic rules, etc. There's just finicky layout rules that vary from layout engine to engine and all attempts to wrangle together a reliable system lead to a large pile of custom JS.
All of this is a big issue because of all the different screen sizes made available by the new rise of smartphones and tablets and the need to have "responsive layouts". In response to this state of affairs, there are all sorts of hacks floating around about how to achieve (or fake) certain presentation structures in CSS. I am not interested in hacks, particularly if the goal is to deliver an end-product or experience to millions of users. Just looking at it from a code maintenance and debugging point of view, starting from a base of "fiddle-dy hack" is guaranteed pain in the near and far future.
So taking the route of hacks and shims is a hard pass but also an illuminating light, I now had a clear idea of the problem I needed to solve.
Next.
So taking the route of hacks and shims is a hard pass but also an illuminating light, I now had a clear idea of the problem I needed to solve.
Next.