Shakedown Social

Karsten SchmidtAnother day, another longish user support answer... 😊 This time a little deep dive into potential pitfalls and solutions related to the recursive teardown behavior of <a href="https://thi.ng/rstream" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/rstream</a> reactive subscription pipelines/graphs/topologies. Esp. for UI use cases, these are important aspects to be aware of...<a href="https://github.com/thi-ng/umbrella/issues/491#issuecomment-2298492699" rel="nofollow noopener" translate="no" target="_blank">https://github.com/thi-ng/umbrella/issues/491#issuecomment-2298492699</a><a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener" target="_blank">#ThingUmbrella</a> <a href="https://mastodon.thi.ng/tags/Reactive" class="mention hashtag" rel="nofollow noopener" target="_blank">#Reactive</a> <a href="https://mastodon.thi.ng/tags/UI" class="mention hashtag" rel="nofollow noopener" target="_blank">#UI</a> <a href="https://mastodon.thi.ng/tags/Documentation" class="mention hashtag" rel="nofollow noopener" target="_blank">#Documentation</a> <a href="https://mastodon.thi.ng/tags/TypeScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#TypeScript</a> <a href="https://mastodon.thi.ng/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a>

🧿🪬🍄🌈🎮💻🚲🥓🎃💀🏴🛻🇺🇸So many things in JavaScript are just shitty abstractions built on top of Events<a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/javaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#javaScript</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://mastodon.social/tags/js" class="mention hashtag" rel="nofollow noopener" target="_blank">#js</a> <a href="https://mastodon.social/tags/events" class="mention hashtag" rel="nofollow noopener" target="_blank">#events</a> <a href="https://mastodon.social/tags/stream" class="mention hashtag" rel="nofollow noopener" target="_blank">#stream</a> <a href="https://mastodon.social/tags/signal" class="mention hashtag" rel="nofollow noopener" target="_blank">#signal</a> <a href="https://mastodon.social/tags/invoker" class="mention hashtag" rel="nofollow noopener" target="_blank">#invoker</a> <a href="https://mastodon.social/tags/streams" class="mention hashtag" rel="nofollow noopener" target="_blank">#streams</a> <a href="https://mastodon.social/tags/signals" class="mention hashtag" rel="nofollow noopener" target="_blank">#signals</a> <a href="https://mastodon.social/tags/invokers" class="mention hashtag" rel="nofollow noopener" target="_blank">#invokers</a> <a href="https://mastodon.social/tags/react" class="mention hashtag" rel="nofollow noopener" target="_blank">#react</a> <a href="https://mastodon.social/tags/reactive" class="mention hashtag" rel="nofollow noopener" target="_blank">#reactive</a>

Karsten SchmidtSo thanks to an idea/challenge by <a href="https://genart.social/@guidoschmidt" class="u-url mention" rel="nofollow noopener" target="_blank">@guidoschmidt</a> (from an hour ago?), you can now play a game of guessing the (currently) 188 package names in <a href="https://thi.ng/umbrella" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/umbrella</a> (and obviously the quiz is built with several of these packages)... 🤩<a href="https://demo.thi.ng/umbrella/thing-packages-quiz/" rel="nofollow noopener" translate="no" target="_blank">https://demo.thi.ng/umbrella/thing-packages-quiz/</a>Source code: <a href="https://github.com/thi-ng/umbrella/tree/develop/examples/thing-packages-quiz/src/index.ts" rel="nofollow noopener" translate="no" target="_blank">https://github.com/thi-ng/umbrella/tree/develop/examples/thing-packages-quiz/src/index.ts</a><a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener" target="_blank">#ThingUmbrella</a> <a href="https://mastodon.thi.ng/tags/Quiz" class="mention hashtag" rel="nofollow noopener" target="_blank">#Quiz</a> <a href="https://mastodon.thi.ng/tags/Reactive" class="mention hashtag" rel="nofollow noopener" target="_blank">#Reactive</a> <a href="https://mastodon.thi.ng/tags/UI" class="mention hashtag" rel="nofollow noopener" target="_blank">#UI</a> <a href="https://mastodon.thi.ng/tags/TypeScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#TypeScript</a> <a href="https://mastodon.thi.ng/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a>

Karsten SchmidtTrying to debug a user's issue, I ended up creating a new, small & barebones <a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener" target="_blank">#ThingUmbrella</a> example, showing a basic usage pattern combining:- <a href="https://thi.ng/atom" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/atom</a> for app state - <a href="https://thi.ng/router" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/router</a> for URL routing/validation - <a href="https://thi.ng/rdom" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/rdom</a> for reactive, vdom-less UI componentsDemo: <a href="https://demo.thi.ng/umbrella/rdom-router/" rel="nofollow noopener" translate="no" target="_blank">https://demo.thi.ng/umbrella/rdom-router/</a>Source: <a href="https://github.com/thi-ng/umbrella/blob/develop/examples/rdom-router/src/index.ts" rel="nofollow noopener" translate="no" target="_blank">https://github.com/thi-ng/umbrella/blob/develop/examples/rdom-router/src/index.ts</a><a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener" target="_blank">#ThingUmbrella</a> <a href="https://mastodon.thi.ng/tags/Reactive" class="mention hashtag" rel="nofollow noopener" target="_blank">#Reactive</a> <a href="https://mastodon.thi.ng/tags/UI" class="mention hashtag" rel="nofollow noopener" target="_blank">#UI</a> <a href="https://mastodon.thi.ng/tags/Router" class="mention hashtag" rel="nofollow noopener" target="_blank">#Router</a> <a href="https://mastodon.thi.ng/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDev</a> <a href="https://mastodon.thi.ng/tags/TypeScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#TypeScript</a> <a href="https://mastodon.thi.ng/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a>

Karsten Schmidt<a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener" target="_blank">#ThingUmbrella</a> <a href="https://mastodon.thi.ng/tags/ReleaseFriday" class="mention hashtag" rel="nofollow noopener" target="_blank">#ReleaseFriday</a>[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: <a href="https://thi.ng/transducers-async" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/transducers-async</a>, <a href="https://thi.ng/rstream" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/rstream</a>, <a href="https://thi.ng/csp" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/csp</a>, <a href="https://thi.ng/fibers" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/fibers</a>, and partially related, <a href="https://thi.ng/rdom" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/rdom</a> 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 <a href="https://thi.ng/csp" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/csp</a> 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 <a href="https://thi.ng/transducers-async" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/transducers-async</a> and/or non-async <a href="https://thi.ng/transducers" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/transducers</a> 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: <a href="https://demo.thi.ng/umbrella/csp-bus/" rel="nofollow noopener" translate="no" target="_blank">https://demo.thi.ng/umbrella/csp-bus/</a>Source: <a href="https://github.com/thi-ng/umbrella/blob/develop/examples/csp-bus/src/events.ts" rel="nofollow noopener" translate="no" target="_blank">https://github.com/thi-ng/umbrella/blob/develop/examples/csp-bus/src/events.ts</a>Hand in hand with these major changes are smaller and still ongoing updates to <a href="https://thi.ng/rdom" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/rdom</a>, 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 <a href="https://thi.ng/rstream" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/rstream</a> 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 <a href="https://thi.ng/meta-css" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/meta-css</a> 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] <a href="https://en.wikipedia.org/wiki/Communicating_sequential_processes" rel="nofollow noopener" translate="no" target="_blank">https://en.wikipedia.org/wiki/Communicating_sequential_processes</a><a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener" target="_blank">#ThingUmbrella</a> <a href="https://mastodon.thi.ng/tags/CSP" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSP</a> <a href="https://mastodon.thi.ng/tags/Async" class="mention hashtag" rel="nofollow noopener" target="_blank">#Async</a> <a href="https://mastodon.thi.ng/tags/Transducers" class="mention hashtag" rel="nofollow noopener" target="_blank">#Transducers</a> <a href="https://mastodon.thi.ng/tags/Reactive" class="mention hashtag" rel="nofollow noopener" target="_blank">#Reactive</a> <a href="https://mastodon.thi.ng/tags/UI" class="mention hashtag" rel="nofollow noopener" target="_blank">#UI</a> <a href="https://mastodon.thi.ng/tags/DOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#DOM</a> <a href="https://mastodon.thi.ng/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.thi.ng/tags/TypeScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#TypeScript</a> <a href="https://mastodon.thi.ng/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a> <a href="https://mastodon.thi.ng/tags/OpenSource" class="mention hashtag" rel="nofollow noopener" target="_blank">#OpenSource</a>

Karsten Schmidt🚀 <a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener" target="_blank">#ThingUmbrella</a> <a href="https://mastodon.thi.ng/tags/ReleaseMonday" class="mention hashtag" rel="nofollow noopener" target="_blank">#ReleaseMonday</a> with new, just released functionality:The parameter tweening/animation package <a href="https://thi.ng/ramp" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/ramp</a> 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: <a href="https://demo.thi.ng/umbrella/ramp-scroll-anim/" rel="nofollow noopener" translate="no" target="_blank">https://demo.thi.ng/umbrella/ramp-scroll-anim/</a>Source code: <a href="https://github.com/thi-ng/umbrella/blob/develop/examples/ramp-scroll-anim/src/index.ts" rel="nofollow noopener" translate="no" target="_blank">https://github.com/thi-ng/umbrella/blob/develop/examples/ramp-scroll-anim/src/index.ts</a><a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener" target="_blank">#ThingUmbrella</a> <a href="https://mastodon.thi.ng/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.thi.ng/tags/Tween" class="mention hashtag" rel="nofollow noopener" target="_blank">#Tween</a> <a href="https://mastodon.thi.ng/tags/Animation" class="mention hashtag" rel="nofollow noopener" target="_blank">#Animation</a> <a href="https://mastodon.thi.ng/tags/Transition" class="mention hashtag" rel="nofollow noopener" target="_blank">#Transition</a> <a href="https://mastodon.thi.ng/tags/Reactive" class="mention hashtag" rel="nofollow noopener" target="_blank">#Reactive</a> <a href="https://mastodon.thi.ng/tags/TypeScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#TypeScript</a> <a href="https://mastodon.thi.ng/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a> <a href="https://mastodon.thi.ng/tags/UI" class="mention hashtag" rel="nofollow noopener" target="_blank">#UI</a>

Karsten SchmidtNew <a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener" target="_blank">#ThingUmbrella</a> releases & example: This week's releases included updates to <a href="https://thi.ng/system" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/system</a>, 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:<a href="https://github.com/thi-ng/umbrella/tree/develop/examples/rstream-system-bus" rel="nofollow noopener" translate="no" target="_blank">https://github.com/thi-ng/umbrella/tree/develop/examples/rstream-system-bus</a>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 <a href="https://thi.ng/atom" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/atom</a> as central app state and <a href="https://thi.ng/rstream" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/rstream</a> 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 <a href="https://thi.ng/rstream" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/rstream</a> and <a href="https://thi.ng/transducers" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/transducers</a> packages — and — these rstream values can also be directly embedded in <a href="https://thi.ng/rdom" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/rdom</a> 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!<a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener" target="_blank">#ThingUmbrella</a> <a href="https://mastodon.thi.ng/tags/ThingNews" class="mention hashtag" rel="nofollow noopener" target="_blank">#ThingNews</a> <a href="https://mastodon.thi.ng/tags/HowToThing" class="mention hashtag" rel="nofollow noopener" target="_blank">#HowToThing</a> <a href="https://mastodon.thi.ng/tags/Graph" class="mention hashtag" rel="nofollow noopener" target="_blank">#Graph</a> <a href="https://mastodon.thi.ng/tags/Components" class="mention hashtag" rel="nofollow noopener" target="_blank">#Components</a> <a href="https://mastodon.thi.ng/tags/Lifecycle" class="mention hashtag" rel="nofollow noopener" target="_blank">#Lifecycle</a> <a href="https://mastodon.thi.ng/tags/Reactive" class="mention hashtag" rel="nofollow noopener" target="_blank">#Reactive</a> <a href="https://mastodon.thi.ng/tags/UI" class="mention hashtag" rel="nofollow noopener" target="_blank">#UI</a> <a href="https://mastodon.thi.ng/tags/PubSub" class="mention hashtag" rel="nofollow noopener" target="_blank">#PubSub</a> <a href="https://mastodon.thi.ng/tags/GraphViz" class="mention hashtag" rel="nofollow noopener" target="_blank">#GraphViz</a> <a href="https://mastodon.thi.ng/tags/TypeScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#TypeScript</a> <a href="https://mastodon.thi.ng/tags/OpenSource" class="mention hashtag" rel="nofollow noopener" target="_blank">#OpenSource</a>

Karsten Schmidt<a href="https://mastodon.thi.ng/tags/LongRead" class="mention hashtag" rel="nofollow noopener" target="_blank">#LongRead</a> <a href="https://mastodon.thi.ng/tags/ThingNews" class="mention hashtag" rel="nofollow noopener" target="_blank">#ThingNews</a> 01/2024Yesterday was <a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener" target="_blank">#ThingUmbrella</a> <a href="https://mastodon.thi.ng/tags/ReleaseFriday" class="mention hashtag" rel="nofollow noopener" target="_blank">#ReleaseFriday</a> (2nd round this year), incl. updates & additions to these new/recent packages (in A-Z order):<a href="https://thi.ng/blurhash" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/blurhash</a> — 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:<a href="https://demo.thi.ng/umbrella/blurhash/" rel="nofollow noopener" translate="no" target="_blank">https://demo.thi.ng/umbrella/blurhash/</a> ---<a href="https://thi.ng/boids" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/boids</a> — 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: <a href="https://github.com/thi-ng/umbrella/tree/develop/examples/boid-basics" rel="nofollow noopener" translate="no" target="_blank">https://github.com/thi-ng/umbrella/tree/develop/examples/boid-basics</a>Many more examples of what can be done with this package (my tagged posts w/ <a href="https://mastodon.thi.ng/tags/Boids" class="mention hashtag" rel="nofollow noopener" target="_blank">#Boids</a>): <a href="https://mastodon.thi.ng/@toxi/tagged/Boids" rel="nofollow noopener" translate="no" target="_blank">https://mastodon.thi.ng/@toxi/tagged/Boids</a> ---<a href="https://thi.ng/canvas" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/canvas</a> - Result of recent restructuring/cleaning/consolidating, this new small package contains helpers for canvas creation and HDPI adjustments. Features merged from <a href="https://thi.ng/adapt-dpi" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/adapt-dpi</a> (now deprecated), <a href="https://thi.ng/pixel" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/pixel</a> and others... ---<a href="https://thi.ng/meta-css" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/meta-css</a> — 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 <a href="https://thi.ng/hiccup-css" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/hiccup-css</a>, 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) ---<a href="https://thi.ng/rdom" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/rdom</a> — 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 <a href="https://thi.ng/rstream" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/rstream</a>.Added a new super basic usage example (rdom & meta-css): <a href="https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-web-components" rel="nofollow noopener" translate="no" target="_blank">https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-web-components</a> ---<a href="https://thi.ng/rdom-forms" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/rdom-forms</a> — Data-driven declarative HTML form/controls based around <a href="https://thi.ng/hiccup-html" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/hiccup-html</a> & <a href="https://thi.ng/rdom" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/rdom</a>. 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: <a href="https://github.com/thi-ng/umbrella/blob/develop/README.md#latest-updates" rel="nofollow noopener" translate="no" target="_blank">https://github.com/thi-ng/umbrella/blob/develop/README.md#latest-updates</a><a href="https://mastodon.thi.ng/tags/OpenSource" class="mention hashtag" rel="nofollow noopener" target="_blank">#OpenSource</a> <a href="https://mastodon.thi.ng/tags/TypeScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#TypeScript</a> <a href="https://mastodon.thi.ng/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a> <a href="https://mastodon.thi.ng/tags/Announcement" class="mention hashtag" rel="nofollow noopener" target="_blank">#Announcement</a> <a href="https://mastodon.thi.ng/tags/Boids" class="mention hashtag" rel="nofollow noopener" target="_blank">#Boids</a> <a href="https://mastodon.thi.ng/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.thi.ng/tags/Reactive" class="mention hashtag" rel="nofollow noopener" target="_blank">#Reactive</a> <a href="https://mastodon.thi.ng/tags/UI" class="mention hashtag" rel="nofollow noopener" target="_blank">#UI</a> <a href="https://mastodon.thi.ng/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponents</a> <a href="https://mastodon.thi.ng/tags/MetaCSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#MetaCSS</a> <a href="https://mastodon.thi.ng/tags/RDOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#RDOM</a>

Tomasz NurkiewiczI struggle to find the benefits of <a href="https://fosstodon.org/tags/Spring" class="mention hashtag" rel="nofollow noopener" target="_blank">#Spring</a> <a href="https://fosstodon.org/tags/R2DBC" class="mention hashtag" rel="nofollow noopener" target="_blank">#R2DBC</a>. It's a full rewrite of <a href="https://fosstodon.org/tags/JDBC" class="mention hashtag" rel="nofollow noopener" target="_blank">#JDBC</a> 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? <a href="https://fosstodon.org/tags/Java" class="mention hashtag" rel="nofollow noopener" target="_blank">#Java</a> <a href="https://fosstodon.org/tags/reactive" class="mention hashtag" rel="nofollow noopener" target="_blank">#reactive</a>

Karsten Schmidt<a href="https://mastodon.thi.ng/tags/HowToThing" class="mention hashtag" rel="nofollow noopener" target="_blank">#HowToThing</a> #023 — Responsive & reactive image gallery with tag-based Jaccard similarity ranking/filtering using <a href="https://thi.ng/bitfield" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/bitfield</a>, <a href="https://thi.ng/rstream" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/rstream</a> & <a href="https://thi.ng/rdom" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/rdom</a>A quite common comment about <a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener" target="_blank">#ThingUmbrella</a> 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 <a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener" target="_blank">#ThingUmbrella</a> examples (and maybe even for parts of the <a href="https://thi.ng" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng</a> website itself)... For those of you interested in more "advanced" <a href="https://thi.ng/rdom" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/rdom</a> examples, do check it out!Background info: <a href="https://en.wikipedia.org/wiki/Jaccard_index" rel="nofollow noopener" translate="no" target="_blank">https://en.wikipedia.org/wiki/Jaccard_index</a>Demo: <a href="https://demo.thi.ng/umbrella/related-images/" rel="nofollow noopener" translate="no" target="_blank">https://demo.thi.ng/umbrella/related-images/</a>Full source code: <a href="https://github.com/thi-ng/umbrella/tree/develop/examples/related-images/src/" rel="nofollow noopener" translate="no" target="_blank">https://github.com/thi-ng/umbrella/tree/develop/examples/related-images/src/</a>The important parts re: using compact binary encoding, bitfields & Jaccard similarity to find related items are here:<a href="https://github.com/thi-ng/umbrella/blob/fc5db1c7a2b9083b40e9be5d6002db937b5a8267/examples/related-images/src/data.ts#L191-L225" rel="nofollow noopener" translate="no" target="_blank">https://github.com/thi-ng/umbrella/blob/fc5db1c7a2b9083b40e9be5d6002db937b5a8267/examples/related-images/src/data.ts#L191-L225</a><a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener" target="_blank">#ThingUmbrella</a> <a href="https://mastodon.thi.ng/tags/Tagging" class="mention hashtag" rel="nofollow noopener" target="_blank">#Tagging</a> <a href="https://mastodon.thi.ng/tags/Statistics" class="mention hashtag" rel="nofollow noopener" target="_blank">#Statistics</a> <a href="https://mastodon.thi.ng/tags/Similarity" class="mention hashtag" rel="nofollow noopener" target="_blank">#Similarity</a> <a href="https://mastodon.thi.ng/tags/Ranking" class="mention hashtag" rel="nofollow noopener" target="_blank">#Ranking</a> <a href="https://mastodon.thi.ng/tags/Bitfield" class="mention hashtag" rel="nofollow noopener" target="_blank">#Bitfield</a> <a href="https://mastodon.thi.ng/tags/TypeScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#TypeScript</a> <a href="https://mastodon.thi.ng/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a> <a href="https://mastodon.thi.ng/tags/UI" class="mention hashtag" rel="nofollow noopener" target="_blank">#UI</a> <a href="https://mastodon.thi.ng/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#Frontend</a> <a href="https://mastodon.thi.ng/tags/Reactive" class="mention hashtag" rel="nofollow noopener" target="_blank">#Reactive</a> <a href="https://mastodon.thi.ng/tags/Tutorial" class="mention hashtag" rel="nofollow noopener" target="_blank">#Tutorial</a>

Karsten Schmidt<a href="https://mastodon.thi.ng/tags/HowToThing" class="mention hashtag" rel="nofollow noopener" target="_blank">#HowToThing</a> #016 — Building a small (and very incomplete!) Mastodon UI with <a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener" target="_blank">#ThingUmbrella</a>. 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 <a href="https://thi.ng/transducers" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/transducers</a> - HTML parsing, cleaning & rewriting via <a href="https://thi.ng/parse" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/parse</a> - Reactive UI components via <a href="https://thi.ng/rstream" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/rstream</a> & <a href="https://thi.ng/rdom" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/rdom</a> - Polymorphic (multiple-dispatch) functions via <a href="https://thi.ng/defmulti" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/defmulti</a>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 <a href="https://hachyderm.io/@phanpy" class="u-url mention" rel="nofollow noopener" target="_blank">@phanpy</a> (😍)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: <a href="https://demo.thi.ng/umbrella/mastodon-feed/" rel="nofollow noopener" translate="no" target="_blank">https://demo.thi.ng/umbrella/mastodon-feed/</a>Source: <a href="https://github.com/thi-ng/umbrella/tree/develop/examples/mastodon-feed/src" rel="nofollow noopener" translate="no" target="_blank">https://github.com/thi-ng/umbrella/tree/develop/examples/mastodon-feed/src</a>I hope this (and other parts) of this ongoing <a href="https://mastodon.thi.ng/tags/HowToThing" class="mention hashtag" rel="nofollow noopener" target="_blank">#HowToThing</a> series are interesting to you. If so, please consider boosting and/or supporting my <a href="https://mastodon.thi.ng/tags/OpenSource" class="mention hashtag" rel="nofollow noopener" target="_blank">#OpenSource</a> work via GitHub or Patreon. Thank you very much in advance!<a href="https://github.com/sponsors/postspectacular" rel="nofollow noopener" translate="no" target="_blank">https://github.com/sponsors/postspectacular</a> <a href="https://patreon.com/thing_umbrella" rel="nofollow noopener" translate="no" target="_blank">https://patreon.com/thing_umbrella</a><a href="https://mastodon.thi.ng/tags/TypeScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#TypeScript</a> <a href="https://mastodon.thi.ng/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a> <a href="https://mastodon.thi.ng/tags/Mastodon" class="mention hashtag" rel="nofollow noopener" target="_blank">#Mastodon</a> <a href="https://mastodon.thi.ng/tags/UI" class="mention hashtag" rel="nofollow noopener" target="_blank">#UI</a> <a href="https://mastodon.thi.ng/tags/Reactive" class="mention hashtag" rel="nofollow noopener" target="_blank">#Reactive</a> <a href="https://mastodon.thi.ng/tags/FunctionalProgramming" class="mention hashtag" rel="nofollow noopener" target="_blank">#FunctionalProgramming</a>

Karsten Schmidt<a href="https://mastodon.thi.ng/tags/HowToThing" class="mention hashtag" rel="nofollow noopener" target="_blank">#HowToThing</a> #014 — Building a simple browser REPL UI for yesterday's Lispy S-expression mini language[1], using <a href="https://thi.ng/rdom" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/rdom</a> and other usual suspects like <a href="https://thi.ng/rstream" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/rstream</a> & <a href="https://thi.ng/transducers" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/transducers</a>.The language impl itself now also has local let-bindings, some more error checking, introspection and more examples of built-in functions...Demo: <a href="https://demo.thi.ng/umbrella/lispy-repl/" rel="nofollow noopener" translate="no" target="_blank">https://demo.thi.ng/umbrella/lispy-repl/</a>Source code: <a href="https://github.com/thi-ng/umbrella/blob/develop/examples/lispy-repl" rel="nofollow noopener" translate="no" target="_blank">https://github.com/thi-ng/umbrella/blob/develop/examples/lispy-repl</a>(The attached source code image only shows the UI/REPL parts, the language implementation can be found in the above link...)<a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener" target="_blank">#ThingUmbrella</a> <a href="https://mastodon.thi.ng/tags/TypeScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#TypeScript</a> <a href="https://mastodon.thi.ng/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a> <a href="https://mastodon.thi.ng/tags/Lisp" class="mention hashtag" rel="nofollow noopener" target="_blank">#Lisp</a> <a href="https://mastodon.thi.ng/tags/FunctionalProgramming" class="mention hashtag" rel="nofollow noopener" target="_blank">#FunctionalProgramming</a> <a href="https://mastodon.thi.ng/tags/Reactive" class="mention hashtag" rel="nofollow noopener" target="_blank">#Reactive</a> <a href="https://mastodon.thi.ng/tags/UI" class="mention hashtag" rel="nofollow noopener" target="_blank">#UI</a> <a href="https://mastodon.thi.ng/tags/REPL" class="mention hashtag" rel="nofollow noopener" target="_blank">#REPL</a> <a href="https://mastodon.thi.ng/tags/DSL" class="mention hashtag" rel="nofollow noopener" target="_blank">#DSL</a>[1] See yesterday's toot about building/using a mini DSL: <a href="https://mastodon.thi.ng/@toxi/111006345413482231" rel="nofollow noopener" translate="no" target="_blank">https://mastodon.thi.ng/@toxi/111006345413482231</a>

IT NewsThe Dipole Antenna Isn’t as Simple as it Appears - Dipole antennas are easy, right? Just follow the formula, cut two pieces of wire, ... - <a href="https://hackaday.com/2023/08/16/the-dipole-antenna-isnt-as-simple-as-it-appears/" rel="nofollow noopener" target="_blank">https://hackaday.com/2023/08/16/the-dipole-antenna-isnt-as-simple-as-it-appears/</a> <a href="https://schleuss.online/tags/radiohacks" class="mention hashtag" rel="nofollow noopener" target="_blank">#radiohacks</a> <a href="https://schleuss.online/tags/wavelength" class="mention hashtag" rel="nofollow noopener" target="_blank">#wavelength</a> <a href="https://schleuss.online/tags/bandwidth" class="mention hashtag" rel="nofollow noopener" target="_blank">#bandwidth</a> <a href="https://schleuss.online/tags/frequency" class="mention hashtag" rel="nofollow noopener" target="_blank">#frequency</a> <a href="https://schleuss.online/tags/impedance" class="mention hashtag" rel="nofollow noopener" target="_blank">#impedance</a> <a href="https://schleuss.online/tags/resistive" class="mention hashtag" rel="nofollow noopener" target="_blank">#resistive</a> <a href="https://schleuss.online/tags/reactive" class="mention hashtag" rel="nofollow noopener" target="_blank">#reactive</a> <a href="https://schleuss.online/tags/antenna" class="mention hashtag" rel="nofollow noopener" target="_blank">#antenna</a> <a href="https://schleuss.online/tags/dipole" class="mention hashtag" rel="nofollow noopener" target="_blank">#dipole</a> <a href="https://schleuss.online/tags/vna" class="mention hashtag" rel="nofollow noopener" target="_blank">#vna</a>

IT NewsFerrofluid Drum Synth Dances To The Beat - [Love Hultén]’s work often incorporates reactive sound elements, and his Ferroflui... - <a href="https://hackaday.com/2023/06/15/ferrofluid-drum-synth-dances-to-the-beat/" rel="nofollow noopener" target="_blank">https://hackaday.com/2023/06/15/ferrofluid-drum-synth-dances-to-the-beat/</a> <a href="https://schleuss.online/tags/soundreactive" class="mention hashtag" rel="nofollow noopener" target="_blank">#soundreactive</a> <a href="https://schleuss.online/tags/musicalhacks" class="mention hashtag" rel="nofollow noopener" target="_blank">#musicalhacks</a> <a href="https://schleuss.online/tags/ferrofluid" class="mention hashtag" rel="nofollow noopener" target="_blank">#ferrofluid</a> <a href="https://schleuss.online/tags/reactive" class="mention hashtag" rel="nofollow noopener" target="_blank">#reactive</a> <a href="https://schleuss.online/tags/msgeq7" class="mention hashtag" rel="nofollow noopener" target="_blank">#msgeq7</a> <a href="https://schleuss.online/tags/music" class="mention hashtag" rel="nofollow noopener" target="_blank">#music</a> <a href="https://schleuss.online/tags/synth" class="mention hashtag" rel="nofollow noopener" target="_blank">#synth</a>

nosh :fosstodon: (ʘ‿ʘ)🕸️ 📦 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?<a href="https://fosstodon.org/tags/webcomponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webcomponents</a> <a href="https://fosstodon.org/tags/state" class="mention hashtag" rel="nofollow noopener" target="_blank">#state</a> <a href="https://fosstodon.org/tags/reactive" class="mention hashtag" rel="nofollow noopener" target="_blank">#reactive</a> <a href="https://fosstodon.org/tags/javascript" class="mention hashtag" rel="nofollow noopener" target="_blank">#javascript</a>

YnteSo, my <a href="https://aus.social/tags/introduction" class="mention hashtag" rel="nofollow noopener" target="_blank">#introduction</a> or <a href="https://aus.social/tags/intro" class="mention hashtag" rel="nofollow noopener" target="_blank">#intro</a> or whatever -I'm a married twenty-something living in the <a href="https://aus.social/tags/UK" class="mention hashtag" rel="nofollow noopener" target="_blank">#UK</a>, originally from <a href="https://aus.social/tags/Australia" class="mention hashtag" rel="nofollow noopener" target="_blank">#Australia</a>. I work in <a href="https://aus.social/tags/TV" class="mention hashtag" rel="nofollow noopener" target="_blank">#TV</a> in <a href="https://aus.social/tags/ProductionManagement" class="mention hashtag" rel="nofollow noopener" target="_blank">#ProductionManagement</a>, so focus a lot on <a href="https://aus.social/tags/productivity" class="mention hashtag" rel="nofollow noopener" target="_blank">#productivity</a> systems and <a href="https://aus.social/tags/automation" class="mention hashtag" rel="nofollow noopener" target="_blank">#automation</a> - <a href="https://aus.social/tags/todoist" class="mention hashtag" rel="nofollow noopener" target="_blank">#todoist</a> is my daily driver.Interested in <a href="https://aus.social/tags/urbanism" class="mention hashtag" rel="nofollow noopener" target="_blank">#urbanism</a> and <a href="https://aus.social/tags/transit" class="mention hashtag" rel="nofollow noopener" target="_blank">#transit</a> for a more connected, sustainable world. Getting back into <a href="https://aus.social/tags/gaming" class="mention hashtag" rel="nofollow noopener" target="_blank">#gaming</a> with my new <a href="https://aus.social/tags/SteamDeck" class="mention hashtag" rel="nofollow noopener" target="_blank">#SteamDeck</a>. Owner of a <a href="https://aus.social/tags/reactive" class="mention hashtag" rel="nofollow noopener" target="_blank">#reactive</a> <a href="https://aus.social/tags/RescueDog" class="mention hashtag" rel="nofollow noopener" target="_blank">#RescueDog</a>. Big <a href="https://aus.social/tags/foodie" class="mention hashtag" rel="nofollow noopener" target="_blank">#foodie</a>. Amateur <a href="https://aus.social/tags/writer" class="mention hashtag" rel="nofollow noopener" target="_blank">#writer</a> and <a href="https://aus.social/tags/archivist" class="mention hashtag" rel="nofollow noopener" target="_blank">#archivist</a>, growing <a href="https://aus.social/tags/datahoarder" class="mention hashtag" rel="nofollow noopener" target="_blank">#datahoarder</a> due to slight paranoia about the shakiness of our digital world (<a href="https://aus.social/tags/RIPTwitter" class="mention hashtag" rel="nofollow noopener" target="_blank">#RIPTwitter</a> 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! :blobcatdance:

Koko The CollieHello <a href="https://mastodonapp.uk/tags/fediverse" class="mention hashtag" rel="nofollow noopener" target="_blank">#fediverse</a> here's my <a href="https://mastodonapp.uk/tags/introduction" class="mention hashtag" rel="nofollow noopener" target="_blank">#introduction</a> : My name is Koko. I'm a 2 year old <a href="https://mastodonapp.uk/tags/BorderCollie" class="mention hashtag" rel="nofollow noopener" target="_blank">#BorderCollie</a> cross <a href="https://mastodonapp.uk/tags/AustralianKelpie" class="mention hashtag" rel="nofollow noopener" target="_blank">#AustralianKelpie</a>I was a pandemic pup, so I didn't get the socialisation I needed. This means that I can be <a href="https://mastodonapp.uk/tags/reactive" class="mention hashtag" rel="nofollow noopener" target="_blank">#reactive</a> towards cars and other dogs.Luckily for me, the <a href="https://mastodonapp.uk/tags/DogsTrust" class="mention hashtag" rel="nofollow noopener" target="_blank">#DogsTrust</a> 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 🐶 <a href="https://mastodonapp.uk/tags/dog" class="mention hashtag" rel="nofollow noopener" target="_blank">#dog</a> <a href="https://mastodonapp.uk/tags/dogs" class="mention hashtag" rel="nofollow noopener" target="_blank">#dogs</a> <a href="https://mastodonapp.uk/tags/DogsOfMastodon" class="mention hashtag" rel="nofollow noopener" target="_blank">#DogsOfMastodon</a> <a href="https://mastodonapp.uk/tags/Collie" class="mention hashtag" rel="nofollow noopener" target="_blank">#Collie</a> <a href="https://mastodonapp.uk/tags/AdoptDontShop" class="mention hashtag" rel="nofollow noopener" target="_blank">#AdoptDontShop</a>

Recent searches

Search options

Administered by:

Server stats:

#reactive