New #ThingUmbrella releases & example: This week's releases included updates to https://thi.ng/system, a minimal and declarative way to compose an app from multiple components, build their dependency graph and manage their lifecycle (async start/stop) in the correct (topological) order. The computed graph (DAG) can then also be serialized to GraphViz format for visualization/debugging/documentation purposes with a single line of code (see readme)...

Even though I've been using this system in dozens of projects, it occurred to me there wasn't any example project yet demonstrating this approach, so I finally fixed that:

https://github.com/thi-ng/umbrella/tree/develop/examples/rstream-system-bus

The demo is purposefully minimal and the source code is (hopefully) much more interesting than the result. In addition to showing how the app components are defined, this example also shows another powerful pattern I've been using in my own tools:

Using https://thi.ng/atom as central app state and https://thi.ng/rstream pubsub as central event bus, to both of which various system components can attach topic based subscriptions (aka event and/or change handlers). Since each of these reactive subscriptions are normal rstream subs, they can all be forming graphs of child subs and be filtered/transformed and synchronized via hundreds of composable operators in the https://thi.ng/rstream and https://thi.ng/transducers packages — and — these rstream values can also be directly embedded in https://thi.ng/rdom created reactive UI components/elements/attributes. Some of these techniques are shown in this new example as well... Hope it's helpful to some of you!

#ThingUmbrella #ThingNews #HowToThing #Graph #Components #Lifecycle #Reactive #UI #PubSub #GraphViz #TypeScript #OpenSource

#LongRead #ThingNews 01/2024

Yesterday was #ThingUmbrella #ReleaseFriday (2nd round this year), incl. updates & additions to these new/recent packages (in A-Z order):

https://thi.ng/blurhash — A fast implementation of the blurhash algorithm to create extremely compact (usually just 10-40 characters) blurred previews of images. Includes both encoder/decoder. A CLI wrapper is forthcoming. I also created an interactive online generator as new example project, allowing you to import own images & play with params:

https://demo.thi.ng/umbrella/blurhash/
---

https://thi.ng/boids — Finished updates to the composable behavior architecture. Included 7 behavior building blocks (all short, simple functions) which can be freely mixed/assigned to agents to create complex behaviors. All agents are individually configurable. Behaviors are weighted and dynamically adjustable, e.g. to vary spatially or temporally, based on external stimuli etc.

Updated example project using the new API:
https://github.com/thi-ng/umbrella/tree/develop/examples/boid-basics

Many more examples of what can be done with this package (my tagged posts w/ #Boids): https://mastodon.thi.ng/@toxi/tagged/Boids
---

https://thi.ng/canvas - Result of recent restructuring/cleaning/consolidating, this new small package contains helpers for canvas creation and HDPI adjustments. Features merged from https://thi.ng/adapt-dpi (now deprecated), https://thi.ng/pixel and others...
---

https://thi.ng/meta-css — New CLI toolchain for creating, using and bundling custom CSS utility-class-based frameworks (similar to Tachyons, Tailwind etc.)

Differentiating factors: Uses generative & parametric grammar to define modular CSS frameworks, resulting in 100s of CSS classes (~950 are included as starting point). CSS purely used as output format. Custom stylesheet syntax to concisely assemble styles (incl. selector nesting) from the generated classes & declarations. Supports definition of arbitrary media queries, whose IDs can be used as compound prefixes to apply referenced CSS classes responsively. Supports file watching, bundling of multiple stylesheets, automatic tree-shaking. Only referenced classes & media queries are transpiled to CSS, supports pretty printing, forced includes and plain CSS includes. Extremely small & fast (33KB, incl. dependencies).

Extensive readme (3k+ words) included. Based on https://thi.ng/hiccup-css, much of this has been existing in loose form as partial tooling/experiments since 2016. Over the past 2 months I finally took the plunge to actually make this fully usable and been refining the overall workflow & features.

(Personally, this works _really_ well for me and offers the best of both worlds, i.e. using utility classes for concision, but not leading to clutter in component code, better separation & maintainability)

Several recently added examples are already using (or have been updated) to this toolchain (see pkg readme for a growing list). There're also new related build instructions in the wiki (linked from each example's readme)
---

https://thi.ng/rdom — Updated many function signatures to support usage in Web Components (Shadow DOM). Added lazy loading component wrapper. Removed experimental scheduler. I never really used it and the general issue is much better solved outside, e.g. using available synchronization constructs in https://thi.ng/rstream.

Added a new super basic usage example (rdom & meta-css):
https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-web-components
---

https://thi.ng/rdom-forms — Data-driven declarative HTML form/controls based around https://thi.ng/hiccup-html & https://thi.ng/rdom. The widgets are unstyled by default, but highly customizable. In addition to being aimed at rdom (for using reactive values & other attribs), it's also suitable for static HTML-generation or SSR purposes.
---

More recent updates:
https://github.com/thi-ng/umbrella/blob/develop/README.md#latest-updates

#OpenSource #TypeScript #JavaScript #Announcement #Boids #CSS #Reactive #UI #WebComponents #MetaCSS #RDOM