We live with a TV watching #reactive #AustralianShepherd that flips out at the sight of dogs, cats, horses, water and things that approximate (think cartoons). Starts barking and inward sneezing and just generally fritzing out.

Haven’t had a dog drama-free evening in forever. TV shows, movies, advertisements seem to *always* have something.

Now I have a Pavlovian reflex too.

It’s tiring.

Another day, another longish user support answer... This time a little deep dive into potential pitfalls and solutions related to the recursive teardown behavior of https://thi.ng/rstream reactive subscription pipelines/graphs/topologies. Esp. for UI use cases, these are important aspects to be aware of...

https://github.com/thi-ng/umbrella/issues/491#issuecomment-2298492699

So many things in JavaScript are just shitty abstractions built on top of Events

So thanks to an idea/challenge by @guidoschmidt (from an hour ago?), you can now play a game of guessing the (currently) 188 package names in https://thi.ng/umbrella (and obviously the quiz is built with several of these packages)...

https://demo.thi.ng/umbrella/thing-packages-quiz/

Source code:
https://github.com/thi-ng/umbrella/tree/develop/examples/thing-packages-quiz/src/index.ts

New #ThingUmbrella example (#172): Interactive visualization of low-discrepancy samples using https://thi.ng/viz, https://thi.ng/hiccup-svg, https://thi.ng/lowdisc, https://thi.ng/rdom & https://thi.ng/rdom-forms

The example also demonstrates combining multiple plots and uses lens axes with adjustable non-linear mapping using focal points and dilation...

Demo:
https://demo.thi.ng/umbrella/viz-scatter-plot/

Commented source code:
https://github.com/thi-ng/umbrella/blob/develop/examples/viz-scatter-plot/src/index.ts

Trying to debug a user's issue, I ended up creating a new, small & barebones #ThingUmbrella example, showing a basic usage pattern combining:

- https://thi.ng/atom for app state
- https://thi.ng/router for URL routing/validation
- https://thi.ng/rdom for reactive, vdom-less UI components

Demo:
https://demo.thi.ng/umbrella/rdom-router/

Source:
https://github.com/thi-ng/umbrella/blob/develop/examples/rdom-router/src/index.ts

#ThingUmbrella #ReleaseFriday[1] — As announced a couple of weeks ago, a lot of my recent work has been centered around async iterables and addressing the conceptual overlap between the various packages related to those, specifically: https://thi.ng/transducers-async, https://thi.ng/rstream, https://thi.ng/csp, https://thi.ng/fibers, and partially related, https://thi.ng/rdom too. Apart from the first package, until recently, none of the others had direct support for async iterables (largely for historic reasons), but they all offer similar operators & functionality (via different means), which I'm slowly consolidating where it makes sense...

Part of this pretty large undertaking has been a complete rewrite of the temporarily deprecated https://thi.ng/csp package for Communicating Sequential Processes[2] (IMHO one of the most elegant & sane ways to structure larger apps via multiple small, reasonable concurrent processes). The package is active again now (as v3+) albeit constituting a new API (new docs still WIP) and removing any direct transducer-related functionality — this is one aspect of the aforementioned consolidation and now simply assumed to be delegated to the https://thi.ng/transducers-async and/or non-async https://thi.ng/transducers packages. I've also included a new small example project showing mixed usage patterns of working with CSP channels and combining them with (async) transducers to create derived views:

Demo:
https://demo.thi.ng/umbrella/csp-bus/

Source:
https://github.com/thi-ng/umbrella/blob/develop/examples/csp-bus/src/events.ts

Hand in hand with these major changes are smaller and still ongoing updates to https://thi.ng/rdom, which recently received partial support for embedded async iterables as reactive values inside a UI/DOM component tree. The goal for this package is to become fully decoupled from https://thi.ng/rstream and focus more on the equally powerful, but more lightweight (since part of the language) async iterables. Adapters from rstream → asynciter already exists (see docs).

Unrelated, but also part of this week's release: The new version of https://thi.ng/meta-css includes support for CSS `light-dark()`. The base framework now includes ~950 utilities & 70 functions. See readme for full list...

Happy coding! :)

[1] There're actually a lot more frequent release, but these days I'm only mentioning the more notable ones to not spam everyone...

[2] https://en.wikipedia.org/wiki/Communicating_sequential_processes

#ThingUmbrella #ReleaseMonday with new, just released functionality:

The parameter tweening/animation package https://thi.ng/ramp has received a major update (v3.0.0) and now supports:

- interpolation of arbitrary & nested types (numeric, nD vector values and nested objects of the same are supported out-of-the-box, extensible)
- grouped/nestable ramp/timeline channels, with each channel having its own independent set of keyframes, interpolation type & options
- per-channel time domain mapping functions (e.g. for clamping, looping, speed adjustments, direction etc.)

Incredibly complex animations can be achieved with these features (and the fact it's all declarative and supports dynamic/procedural generation of keyframes & timelines). I shall write more about this in due course...

For now, here's a small (purposefully underwhelming, basic(!)) demo, showing some of these concepts in action, using the vertical scroll position to drive (reactively) various CSS properties. A few more smaller examples are also in the package readme...

Btw. This package has ZERO relationship with HTML/CSS and can be useful in any other usage scenarios, from WebGL to any other parameter tweening tasks...

The attached image shows the commented demo source code.

Demo:
https://demo.thi.ng/umbrella/ramp-scroll-anim/

Source code:
https://github.com/thi-ng/umbrella/blob/develop/examples/ramp-scroll-anim/src/index.ts

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!

I struggle to find the benefits of #Spring #R2DBC. It's a full rewrite of #JDBC API using non-blocking I/O. However, typical application shouldn't open more than a handful of DB connections. So, just a few threads blocked on I/O (plus some threads queued up) shouldn't be an issue. Unless you want to be purely reactive or you are connecting to massively scalable database. But in that case, virtual threads come in handy. So what's the point? #Java #reactive

#HowToThing #023 — Responsive & reactive image gallery with tag-based Jaccard similarity ranking/filtering using https://thi.ng/bitfield, https://thi.ng/rstream & https://thi.ng/rdom

A quite common comment about #ThingUmbrella is that people often have little idea what some of the ~185 packages are even good/intended for and/or how to synthesize solutions from these small, individual building blocks. IMHO this is less about these packages themselves and more down to existing blank spots about the underlying concepts, algorithms and their potential role/utility in a larger problem domain... So I very much hope this new example is also useful in this respect!

Alas, the full code for this got pretty long and contains a lot more UI stuff. I'm intending to develop this further for the new homepage to browse all ~135 #ThingUmbrella examples (and maybe even for parts of the https://thi.ng website itself)... For those of you interested in more "advanced" https://thi.ng/rdom examples, do check it out!

Background info:
https://en.wikipedia.org/wiki/Jaccard_index

Demo:
https://demo.thi.ng/umbrella/related-images/

Full source code:
https://github.com/thi-ng/umbrella/tree/develop/examples/related-images/src/

The important parts re: using compact binary encoding, bitfields & Jaccard similarity to find related items are here:

https://github.com/thi-ng/umbrella/blob/fc5db1c7a2b9083b40e9be5d6002db937b5a8267/examples/related-images/src/data.ts#L191-L225

#HowToThing #016 — Building a small (and very incomplete!) Mastodon UI with #ThingUmbrella. Still, the following features are included so far and demonstrate:

- Looking up Mastodon account details & loading public messages for any given username
- Transforming JSON payloads with https://thi.ng/transducers
- HTML parsing, cleaning & rewriting via https://thi.ng/parse
- Reactive UI components via https://thi.ng/rstream & https://thi.ng/rdom
- Polymorphic (multiple-dispatch) functions via https://thi.ng/defmulti

UI features:

- Account details w/ header image, avatar, bio
- Media previews for images, gifv, videos
- Fullscreen modal overlay for images & alt text
- UI design heavily inspired by the amazing @phanpy ()

Alas, the code for this new example (#131) is too long & too split up for showing here in this format, but it's well documented and you can find it all linked below...

Demo:
https://demo.thi.ng/umbrella/mastodon-feed/

Source:
https://github.com/thi-ng/umbrella/tree/develop/examples/mastodon-feed/src

I hope this (and other parts) of this ongoing #HowToThing series are interesting to you. If so, please consider boosting and/or supporting my #OpenSource work via GitHub or Patreon. Thank you very much in advance!

https://github.com/sponsors/postspectacular
https://patreon.com/thing_umbrella

#HowToThing #014 — Building a simple browser REPL UI for yesterday's Lispy S-expression mini language[1], using https://thi.ng/rdom and other usual suspects like https://thi.ng/rstream & https://thi.ng/transducers.

The language impl itself now also has local let-bindings, some more error checking, introspection and more examples of built-in functions...

Demo:
https://demo.thi.ng/umbrella/lispy-repl/

Source code:
https://github.com/thi-ng/umbrella/blob/develop/examples/lispy-repl

(The attached source code image only shows the UI/REPL parts, the language implementation can be found in the above link...)

#ThingUmbrella #TypeScript #JavaScript #Lisp #FunctionalProgramming #Reactive #UI #REPL #DSL

[1] See yesterday's toot about building/using a mini DSL:
https://mastodon.thi.ng/@toxi/111006345413482231

The Dipole Antenna Isn’t as Simple as it Appears - Dipole antennas are easy, right? Just follow the formula, cut two pieces of wire, ... - https://hackaday.com/2023/08/16/the-dipole-antenna-isnt-as-simple-as-it-appears/ #radiohacks #wavelength #bandwidth #frequency #impedance #resistive #reactive #antenna #dipole #vna

Ferrofluid Drum Synth Dances To The Beat - [Love Hultén]’s work often incorporates reactive sound elements, and his Ferroflui... - https://hackaday.com/2023/06/15/ferrofluid-drum-synth-dances-to-the-beat/ #soundreactive #musicalhacks #ferrofluid #reactive #msgeq7 #music #synth

Reactive state in Native Web Components:

Anyone not using Lit framework, how do you manage reactive state inside native web components?

I am learning about Astro & Web Components.

I have seen examples where javascript proxy objects can be used to updated reactive state in a native web component.

Are there any elegant solutions being used by anyone in this area?

#webcomponents
#state
#reactive
#javascript

So, my #introduction or #intro or whatever -

I'm a married twenty-something living in the #UK, originally from #Australia. I work in #TV in #ProductionManagement, so focus a lot on #productivity systems and #automation - #todoist is my daily driver.

Interested in #urbanism and #transit for a more connected, sustainable world. Getting back into #gaming with my new #SteamDeck. Owner of a #reactive #RescueDog. Big #foodie. Amateur #writer and #archivist, growing #datahoarder due to slight paranoia about the shakiness of our digital world (#RIPTwitter didn't help).

Still not sure where I belong yet on Mastodon, but so far I'm loving not having my feed dictated by an algorithm. It feels cool, like how the internet used to be. Enjoying the ride!

Hello #fediverse here's my #introduction : My name is Koko. I'm a 2 year old #BorderCollie cross #AustralianKelpie

I was a pandemic pup, so I didn't get the socialisation I needed. This means that I can be #reactive towards cars and other dogs.

Luckily for me, the #DogsTrust helped me find the best Mum and Dad who are doing everything possible to help me become calmer and more optimistic. They already tell me I'm the goodest boy