toxmeister

Work is ongoing, collecting & re-organizing projects, assets, documentation and extracting interrelationships (incl. older work & music projects (e.g. http://thi.ng/synstack related), clients/people...). Aim is a proper archive of the past 20+ years of outputs & encounters.

This is the first website update since 2015. As the timeline visualizations show, building(http://thi.ng) > marketing(http://thi.ng) - maybe unusual these days, but hey... :)

The entire site is generated w/ tools from the http://thi.ng/umbrella collection, e.g. http://thi.ng/egf (graph file format), http://thi.ng/csv (semantic CSV parsing), http://thi.ng/transducers (functional data transformations), http://thi.ng/defmulti (multiple dispatch for template engine), http://thi.ng/hiccup (HTML/SVG generation), http://thi.ng/viz (timeline visualizations), http://thi.ng/color (heatmap gradients)

There's also a massive spreadsheet (148k cells adjacency matrix) to centrally define & manage the 570+ tags used to categorize the 257 projects/repositories and to batch update their package files (edits ongoing, much fun!). The tag/project relationships are compiled into an HTML list with project IDs stored as base90-encoded data attributes for each tag in the tag cloud (http://thi.ng/#tags)

The timeline visualizations are generated directly from local Git repos, package files and associated metadata stored in a number of linked http://thi.ng/egf graphs. The site toolchain will be released in due course...

Last but not least, any constructive feedback (good or bad) is very welcome! The next phase will include more individual project details, images, making-of docs, videos, xrefs etc. Currently, just a step in the right direction...

Lightweight UI component tree definition syntax, DOM creation and differential updates using only vanilla JS data structures (arrays, iterators, closures, attribute objects or objects with life cycle functions, closures). By default targets the browser's native DOM, but supports other arbitrary target implementations in a branch-local manner, e.g. to define scene graphs for a canvas element as part of the normal UI tree.

Benefits:

- Use the full expressiveness of ES6 / TypeScript to define user interfaces

- No enforced opinion about state handling, very flexible

- Clean, functional component composition & reuse

- No source pre-processing, transpiling or string interpolation

- Less verbose than HTML / JSX, resulting in smaller file sizes

- Supports arbitrary elements (incl. SVG), attributes and events in uniform, S-expression based syntax

- Supports branch-local custom update behaviors & arbitrary (e.g. non-DOM) target data structures to which tree diffs are applied to

- Suitable for server-side rendering and then "hydrating" listeners and components with life cycle methods on the client side

- Can use JSON for static components (or component templates)

- Optional user context injection (an arbitrary object/value passed to all component functions embedded in the tree)

- Default implementation supports CSS conversion from JS objects for style attribs

- Auto-expansion of embedded values / types which implement the IToHiccup or IDeref interfaces (e.g. atoms, cursors, derived views, streams etc.)

- Only ~5.5KB gzipped