Eight demos, eight files

A demos directory arrives with eight self-contained examples, each one file: an SPA, a form with upload, a confirmation dialog, a scroll trigger, a countdown, translations, nested CSS and a live CSS variable. The largest is under 650 bytes.

A three-page single page application, complete:

@ require: DOM/link

route both GET SPA => view($this->page('home'), 'SPA')
route both GET SPA about => view($this->page('about'), 'About Us')

method page($page) => $this->layout.lf.$this->$page

view layout:
<header>
    <a.async href=/SPA>Home</a>
</header>

That is the entire example, navigation included, and it is also the argument. A demo that spans four directories teaches the directories. A demo that fits on a screen teaches the idea.

They are useful in a way tutorials often are not, because there is nothing scaffolded around them. No build config, no starter template, no framework conventions to absorb first. Route, view, script and style sit together because that is where the language puts them, so the smallest working example is genuinely small.

Two of the eight double as specification: the nested CSS demo and the CSS variable demo are the shortest statement of what the style layer does that exists anywhere.