html-experiment

Task

Todo

CSS Font-size: gather more default font-size examples, esp on mobile platforms
tree Get a few basic data structures in place w/ types & classes; some experimental code for things like metrics
permutation Once tree ADTs in place see if permutations can be returned as trees
async Revamp the async-await experiment, really need to dig in here, especially dependent sequences of awaits
file Continue file read experiments with fetch & import
web components find out more about so-called “html web components”, ie those without shadow dom
web components are slotted items part of the regular dom, and can they be styled normally?
PWA start experimenting with PWAs https://en.wikipedia.org/wiki/Progressive_web_app
chrome “[Violation] Forced reflow while executing JavaScript took ms" - seeing this in turtle
css dig more into viewport and container lengths, also how they work in svg
svg a way to get the box coordinates of the visible svg render area, not just the viewbox
html,css review viewport terminology for visible, hidden areas et al
css @supports condition for newer functions like sibling-index() – try some of the ideas here: https://stackoverflow.com/questions/77441227/how-to-detect-css-functions-support like CSS.supports()
api Return to Temporal
dom Refresher: document.querySelector vs getElementById - they return different types/interfaces i think & the former is easier to cast
js import with: css, json & soon text https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import/with
js modules: a way to export “*” ? (I don’t think this can be done)
js identifiers: unicode categories ID_Start & ID_Continue
testing Revisit test grouping/nesting
css generated content: Can any items be made conditional? Any early support for the “six yet-to-be implemented CSS functions including content(), string(), and leader(), and the three ‘target’ functions”
css “Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content.”
js “This expression is not constructable. Type ‘….’ has no construct signatures.ts(2351)”
js Derived subclass as function parameter?
js,jsdoc JSDoc typechecking for inline scripts
jsdoc,ts Correct typing for HTMLFormElement.elements / HTMLFormControlsCollection items
jsdoc,ts correct type for a dynamically imported module
jsdoc,ts partial typing - see if there are ways to declare generic types that only specify certain items of a type signature, eg just the return type of a function - and be able to mix these partials together a bit like interfaces
- See if there’s a way to type the whole of a function’s arguments object, not just individual parameters
- See if @interface typing can be applied to non-class objects
- Look for other duck/mixin typing options
- Find out where the root/base context of jsconfig+checkJs typechecking is
css colour model/api etc
css dynamic/automatic/contextual colours for text
css Parent selector - ‘has’
css Find out if select size can be controlled nicely with css
css See if there’s a way to collapse the single extra spaces that sometimes get added just from formatting, eg <h1> <a ...
font Find some web-safe ones or figure out serving. Gentium is quite nice.
css grid is there a simple way to make grid items go full-width without knowing the column count?
css grid dynamic grids in general - eg based on custom vars
dom 3d transform experiments
html details/summary move the marker to the right, styling in general
svg/css Look into: https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/d#using_d_as_a_css_property
svg Look into stroke gradients
svg Dig more into ‘stroke-miterlimit’
svg https://developer.mozilla.org/en-US/docs/Web/CSS/vector-effect

Done (for now)

css/svg svg favicons can be made light/dark adpaptive with @media prefers-color-scheme - see medit for example
css style selected option elements with :checked pseudo class, not selected attr. Obviously.
file have v.basic downloads going now; some examples in turtle, screensaver, thoughtcloud
css animation experiments mostly being done in screensaver for now
svg The ~5 extra vertical pixels that SVG in html gets displayed with are related to its default display:inline. Still investigating, but change to display:block for a quick soln.
storage Github pages localStorage is shared based upon common origin
svg SVG foreignObject - https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/foreignObject
kbd filter out browser/os crtl key combos
css list counters, zero-based: can be done (though a little quirky); better to use array keys themselves when that’s what’s needed
testing simple code testing eg equality, exceptions, typeof testing that code excepts - moved to html-common
js Function arguments can be omitted to accept defaults with undefined
css grey is darker than darkgrey for historical reasons - websearch for the whole story

Experimental/tentative patterns

Custom setters that return `this` for chaining

setCoord(x,y) { this.x = x; this.y = y; return this; }

A ‘set’ accessor must have exactly one parameter.ts(1049) Setters cannot return a value.ts(2408)

Stock js setters can only have one param, and cannot return anything so they can’t be chained.

In some places I’m writing custom setters that accept more parameters, and return this to allow for chaining. I’m not sure if i want to go boots-and-all with this yet, but trying it out in a few spots; makes some testing code a bit easier for example.