Preface | Motivation

A little hypertext and small programs.

HTML|> is a usable standard for presentation and interaction, especially on mobile devices|>. Recent web browsers|> support accessible|>Accessibilty hypertext|> with stylesheets|>CSS and numerous JavaScript|> Web APIs|m>Web/API to multimedia|> (camera|>digital camera, Audio|>Digital audio), clipboard|>clipboard (computing), GPS|> and sensors|>.

Nevertheless, simple HTML documents are rarely rendered ergonomically by default.

  1. touchable or even clickable areas too small
  2. user preferred color-scheme|m>Web/CSS/color-scheme ignored
  3. no "table of contents" navigation, derived from the structuring HTML Section Heading elements|m>Web/HTML/Element/Heading_Elements
  4. no equitable counterpart of the vertically scrolling view, but text lines get too long
  5. user input and navigation limited and a bit cumbersome

So there is good reason for numerous web frameworks and authoring tools that help building powerful web applications and sites. Is there a good choice for creating just a little hypertext and small programs?

A cautious wish list

  1. Easy integration into editing environments / small toolchain|>
  2. Adjustment of touch-target sizes
  3. Split long HTML documents into separate scrollable "panels"
  4. Automatic elements
    • Document title / top heading h1: use meta data
    • Top menu: navigation, orientation, theme and fullscreen
    • Navigation: table of contents
    • Lazy reference links to common sources like Wikipedia|> or MDN|>MDN Web Docs
    • HTML/CSS validators (even to generated content)
  5. Small programs need
    • a little console
    • simple source code documentation tool
    • enhanced input elements
  6. Good print style
  7. A multi-column view mode with horizontal snap to column and fast page scroll steps (number of visible columns minus one)

Conclusion: vanilla software|>

The basic materials are DOM|>Document Object Model, CSS|>Cascading Style Sheets and JavaScript|>, as delivered by the most common browsers|>Webbrowser: the scratch to build from.

See: Tags|m>Web/HTML/Element, events|m>Web/API/EventTarget/addEventListener, identifiers|h>named-access-on-the-window-object, loading|h>delay-the-load-event, hashChange|h>the-hashchangeevent-interface