#howtothing — Public Fediverse posts
Live and recent posts from across the Fediverse tagged #howtothing, aggregated by home.social.
-
CW: Fundraising for Open Source work & maintenance
I don't do these often (only once or twice a year, if at all), but since I just lost the main sponsor of my open source work (forever grateful for their long & major support!), I urgently need to reach out to other people (especially users) for financial help with the continued development, documentation and maintenance efforts (incl. hosting costs) of the primarily 215 TypeScript libraries and 185 example projects in https://thi.ng/umbrella, but also other existing & still unreleased work/projects/tools (also Zig, Clojure)... The breadth and depth of the larger project is impossible to summarize (see project readme for an overview)
I'm regularly posting updates related to these projects (and examples) using the #ThingUmbrella and #HowToThing hashtags.
Being between roles, these donations are my only income at current, so every little helps! The projects have been in active long term development (some of them since 2016). In a typical irony of the universe kind of event, just yesterday the projects were featured on the frontpage of Hacker News[1] for over 12 hours and here's what some people had to say:
"this is a absolutely remarkable set of libraries covering all kinds of nooks and cranies. It's worth putting on everyones list."
"thi.ng is great and should really get more attention. The packages have a very clean and atomic structure, you can easily pick one or more and use them in your project."
"This has been around for a long time and I've always been so surprised it has had seemingly so little traction outside of the author's own projects. The love and care and thoughtfulness of every library has always been so great to explore."
If you have any questions, please reach out here (or via DM) or the issue tracker on Codeberg:
https://codeberg.org/thi.ng/umbrella/issues/
(I'm not always able to help [esp. when there are super detailed long requests/questions], but I'm doing my best to be helpful...)
Deep gratitude and thank you to all my other supporters for your ongoing help and new ones for your consideration. Possible ways of funding are listed here (i.e. Liberapay, Stripe, Github Sponsors, Patreon):
https://codeberg.org/thi.ng/umbrella/src/branch/develop/CONTRIBUTING.md#donations
🙏🫶
Happy coding!
-
CW: Fundraising for Open Source work & maintenance
I don't do these often (only once or twice a year, if at all), but since I just lost the main sponsor of my open source work (forever grateful for their long & major support!), I urgently need to reach out to other people (especially users) for financial help with the continued development, documentation and maintenance efforts (incl. hosting costs) of the primarily 215 TypeScript libraries and 185 example projects in https://thi.ng/umbrella, but also other existing & still unreleased work/projects/tools (also Zig, Clojure)... The breadth and depth of the larger project is impossible to summarize (see project readme for an overview)
I'm regularly posting updates related to these projects (and examples) using the #ThingUmbrella and #HowToThing hashtags.
Being between roles, these donations are my only income at current, so every little helps! The projects have been in active long term development (some of them since 2016). In a typical irony of the universe kind of event, just yesterday the projects were featured on the frontpage of Hacker News[1] for over 12 hours and here's what some people had to say:
"this is a absolutely remarkable set of libraries covering all kinds of nooks and cranies. It's worth putting on everyones list."
"thi.ng is great and should really get more attention. The packages have a very clean and atomic structure, you can easily pick one or more and use them in your project."
"This has been around for a long time and I've always been so surprised it has had seemingly so little traction outside of the author's own projects. The love and care and thoughtfulness of every library has always been so great to explore."
If you have any questions, please reach out here (or via DM) or the issue tracker on Codeberg:
https://codeberg.org/thi.ng/umbrella/issues/
(I'm not always able to help [esp. when there are super detailed long requests/questions], but I'm doing my best to be helpful...)
Deep gratitude and thank you to all my other supporters for your ongoing help and new ones for your consideration. Possible ways of funding are listed here (i.e. Liberapay, Stripe, Github Sponsors, Patreon):
https://codeberg.org/thi.ng/umbrella/src/branch/develop/CONTRIBUTING.md#donations
🙏🫶
Happy coding!
-
CW: Fundraising for Open Source work & maintenance
I don't do these often (only once or twice a year, if at all), but since I just lost the main sponsor of my open source work (forever grateful for their long & major support!), I urgently need to reach out to other people (especially users) for financial help with the continued development, documentation and maintenance efforts (incl. hosting costs) of the primarily 215 TypeScript libraries and 185 example projects in https://thi.ng/umbrella, but also other existing & still unreleased work/projects/tools (also Zig, Clojure)... The breadth and depth of the larger project is impossible to summarize (see project readme for an overview)
I'm regularly posting updates related to these projects (and examples) using the #ThingUmbrella and #HowToThing hashtags.
Being between roles, these donations are my only income at current, so every little helps! The projects have been in active long term development (some of them since 2016). In a typical irony of the universe kind of event, just yesterday the projects were featured on the frontpage of Hacker News[1] for over 12 hours and here's what some people had to say:
"this is a absolutely remarkable set of libraries covering all kinds of nooks and cranies. It's worth putting on everyones list."
"thi.ng is great and should really get more attention. The packages have a very clean and atomic structure, you can easily pick one or more and use them in your project."
"This has been around for a long time and I've always been so surprised it has had seemingly so little traction outside of the author's own projects. The love and care and thoughtfulness of every library has always been so great to explore."
If you have any questions, please reach out here (or via DM) or the issue tracker on Codeberg:
https://codeberg.org/thi.ng/umbrella/issues/
(I'm not always able to help [esp. when there are super detailed long requests/questions], but I'm doing my best to be helpful...)
Deep gratitude and thank you to all my other supporters for your ongoing help and new ones for your consideration. Possible ways of funding are listed here (i.e. Liberapay, Stripe, Github Sponsors, Patreon):
https://codeberg.org/thi.ng/umbrella/src/branch/develop/CONTRIBUTING.md#donations
🙏🫶
Happy coding!
-
CW: Fundraising for Open Source work & maintenance
I don't do these often (only once or twice a year, if at all), but since I just lost the main sponsor of my open source work (forever grateful for their long & major support!), I urgently need to reach out to other people (especially users) for financial help with the continued development, documentation and maintenance efforts (incl. hosting costs) of the primarily 215 TypeScript libraries and 185 example projects in https://thi.ng/umbrella, but also other existing & still unreleased work/projects/tools (also Zig, Clojure)... The breadth and depth of the larger project is impossible to summarize (see project readme for an overview)
I'm regularly posting updates related to these projects (and examples) using the #ThingUmbrella and #HowToThing hashtags.
Being between roles, these donations are my only income at current, so every little helps! The projects have been in active long term development (some of them since 2016). In a typical irony of the universe kind of event, just yesterday the projects were featured on the frontpage of Hacker News[1] for over 12 hours and here's what some people had to say:
"this is a absolutely remarkable set of libraries covering all kinds of nooks and cranies. It's worth putting on everyones list."
"thi.ng is great and should really get more attention. The packages have a very clean and atomic structure, you can easily pick one or more and use them in your project."
"This has been around for a long time and I've always been so surprised it has had seemingly so little traction outside of the author's own projects. The love and care and thoughtfulness of every library has always been so great to explore."
If you have any questions, please reach out here (or via DM) or the issue tracker on Codeberg:
https://codeberg.org/thi.ng/umbrella/issues/
(I'm not always able to help [esp. when there are super detailed long requests/questions], but I'm doing my best to be helpful...)
Deep gratitude and thank you to all my other supporters for your ongoing help and new ones for your consideration. Possible ways of funding are listed here (i.e. Liberapay, Stripe, Github Sponsors, Patreon):
https://codeberg.org/thi.ng/umbrella/src/branch/develop/CONTRIBUTING.md#donations
🙏🫶
Happy coding!
-
Added, updated & simplified the growing collection of darkroom-related calculators and super happy how elegant and concise the code has turned out, making it super easy to add more of them in the future.
I think it's also another great, if minimal, example to illustrate how otherwise completely separate https://thi.ng/umbrella packages can seamlessly compose/combine to enable a reactive dataflow UI, all without the need for any virtual DOMs and/or completely over-the-top frameworks like React & co. It's also doing so via mostly JS-native data structures for declaring the UI (plain objects/arrays/iterables) and various constructs directly managing the reactive value streams, thus providing a lot more finegrained control over UI updates/timing/throttling). Any value changes done by the user only trigger specific, pin-point calculations which then result in equally specific UI updates to show new results. Any user action only ever triggers the minimum amount of work needed to reflect the new state.
Calculators:
https://demo.thi.ng/umbrella/darkroom-calc/Source code:
https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/darkroom-calc/srcThe attached images show the source code of the entire main app (UI root) and one of the calculators...
Ps. Please let me know if you'd like to see more of these posts in the future. I'm tempted to launch season 2 of #HowToThing (see link below for 30 previous mini projects/tutorials) — but since this is very time consuming to produce & document these projects/examples, and because there has been _very little feedback_ to these previous projects/posts, I first need to gauge interest... Thank you! 🫶
https://codeberg.org/thi.ng/umbrella#howtothing
#ThingUmbrella #Darkroom #Calculator #Tool #Reactive #UI #WebDev #TypeScript #JavaScript #OpenSource
-
Added, updated & simplified the growing collection of darkroom-related calculators and super happy how elegant and concise the code has turned out, making it super easy to add more of them in the future.
I think it's also another great, if minimal, example to illustrate how otherwise completely separate https://thi.ng/umbrella packages can seamlessly compose/combine to enable a reactive dataflow UI, all without the need for any virtual DOMs and/or completely over-the-top frameworks like React & co. It's also doing so via mostly JS-native data structures for declaring the UI (plain objects/arrays/iterables) and various constructs directly managing the reactive value streams, thus providing a lot more finegrained control over UI updates/timing/throttling). Any value changes done by the user only trigger specific, pin-point calculations which then result in equally specific UI updates to show new results. Any user action only ever triggers the minimum amount of work needed to reflect the new state.
Calculators:
https://demo.thi.ng/umbrella/darkroom-calc/Source code:
https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/darkroom-calc/srcThe attached images show the source code of the entire main app (UI root) and one of the calculators...
Ps. Please let me know if you'd like to see more of these posts in the future. I'm tempted to launch season 2 of #HowToThing (see link below for 30 previous mini projects/tutorials) — but since this is very time consuming to produce & document these projects/examples, and because there has been _very little feedback_ to these previous projects/posts, I first need to gauge interest... Thank you! 🫶
https://codeberg.org/thi.ng/umbrella#howtothing
#ThingUmbrella #Darkroom #Calculator #Tool #Reactive #UI #WebDev #TypeScript #JavaScript #OpenSource
-
Added, updated & simplified the growing collection of darkroom-related calculators and super happy how elegant and concise the code has turned out, making it super easy to add more of them in the future.
I think it's also another great, if minimal, example to illustrate how otherwise completely separate https://thi.ng/umbrella packages can seamlessly compose/combine to enable a reactive dataflow UI, all without the need for any virtual DOMs and/or completely over-the-top frameworks like React & co. It's also doing so via mostly JS-native data structures for declaring the UI (plain objects/arrays/iterables) and various constructs directly managing the reactive value streams, thus providing a lot more finegrained control over UI updates/timing/throttling). Any value changes done by the user only trigger specific, pin-point calculations which then result in equally specific UI updates to show new results. Any user action only ever triggers the minimum amount of work needed to reflect the new state.
Calculators:
https://demo.thi.ng/umbrella/darkroom-calc/Source code:
https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/darkroom-calc/srcThe attached images show the source code of the entire main app (UI root) and one of the calculators...
Ps. Please let me know if you'd like to see more of these posts in the future. I'm tempted to launch season 2 of #HowToThing (see link below for 30 previous mini projects/tutorials) — but since this is very time consuming to produce & document these projects/examples, and because there has been _very little feedback_ to these previous projects/posts, I first need to gauge interest... Thank you! 🫶
https://codeberg.org/thi.ng/umbrella#howtothing
#ThingUmbrella #Darkroom #Calculator #Tool #Reactive #UI #WebDev #TypeScript #JavaScript #OpenSource
-
Added, updated & simplified the growing collection of darkroom-related calculators and super happy how elegant and concise the code has turned out, making it super easy to add more of them in the future.
I think it's also another great, if minimal, example to illustrate how otherwise completely separate https://thi.ng/umbrella packages can seamlessly compose/combine to enable a reactive dataflow UI, all without the need for any virtual DOMs and/or completely over-the-top frameworks like React & co. It's also doing so via mostly JS-native data structures for declaring the UI (plain objects/arrays/iterables) and various constructs directly managing the reactive value streams, thus providing a lot more finegrained control over UI updates/timing/throttling). Any value changes done by the user only trigger specific, pin-point calculations which then result in equally specific UI updates to show new results. Any user action only ever triggers the minimum amount of work needed to reflect the new state.
Calculators:
https://demo.thi.ng/umbrella/darkroom-calc/Source code:
https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/darkroom-calc/srcThe attached images show the source code of the entire main app (UI root) and one of the calculators...
Ps. Please let me know if you'd like to see more of these posts in the future. I'm tempted to launch season 2 of #HowToThing (see link below for 30 previous mini projects/tutorials) — but since this is very time consuming to produce & document these projects/examples, and because there has been _very little feedback_ to these previous projects/posts, I first need to gauge interest... Thank you! 🫶
https://codeberg.org/thi.ng/umbrella#howtothing
#ThingUmbrella #Darkroom #Calculator #Tool #Reactive #UI #WebDev #TypeScript #JavaScript #OpenSource
-
#ReleaseWednesday — Extracted & extended the LISP-like DSL from an existing #ThingUmbrella example[1] as new small package for better/direct re-use in other projects:
The core language is kept intentionally minimal, aimed at simple sandboxed data transformations/derivations, small code snippets/expressions in GUIs or config settings. However, the language is very easy to extend/customize with new functions or control flow constructs etc. Currently, the language is interpreted and has the following builtins (see screenshots). There's no macro support so far (and not sure if that's even desired here)...
[1] The original #HowToThing example browser REPL this was extracted from (and which has now been updated to use the new package):
https://demo.thi.ng/umbrella/lispy-repl/
#ThingUmbrella #Lisp #DSL #FunctionalProgramming #REPL -
#ReleaseWednesday — Extracted & extended the LISP-like DSL from an existing #ThingUmbrella example[1] as new small package for better/direct re-use in other projects:
The core language is kept intentionally minimal, aimed at simple sandboxed data transformations/derivations, small code snippets/expressions in GUIs or config settings. However, the language is very easy to extend/customize with new functions or control flow constructs etc. Currently, the language is interpreted and has the following builtins (see screenshots). There's no macro support so far (and not sure if that's even desired here)...
[1] The original #HowToThing example browser REPL this was extracted from (and which has now been updated to use the new package):
https://demo.thi.ng/umbrella/lispy-repl/
#ThingUmbrella #Lisp #DSL #FunctionalProgramming #REPL -
#ReleaseWednesday — Extracted & extended the LISP-like DSL from an existing #ThingUmbrella example[1] as new small package for better/direct re-use in other projects:
The core language is kept intentionally minimal, aimed at simple sandboxed data transformations/derivations, small code snippets/expressions in GUIs or config settings. However, the language is very easy to extend/customize with new functions or control flow constructs etc. Currently, the language is interpreted and has the following builtins (see screenshots). There's no macro support so far (and not sure if that's even desired here)...
[1] The original #HowToThing example browser REPL this was extracted from (and which has now been updated to use the new package):
https://demo.thi.ng/umbrella/lispy-repl/
#ThingUmbrella #Lisp #DSL #FunctionalProgramming #REPL -
#ReleaseWednesday — Extracted & extended the LISP-like DSL from an existing #ThingUmbrella example[1] as new small package for better/direct re-use in other projects:
The core language is kept intentionally minimal, aimed at simple sandboxed data transformations/derivations, small code snippets/expressions in GUIs or config settings. However, the language is very easy to extend/customize with new functions or control flow constructs etc. Currently, the language is interpreted and has the following builtins (see screenshots). There's no macro support so far (and not sure if that's even desired here)...
[1] The original #HowToThing example browser REPL this was extracted from (and which has now been updated to use the new package):
https://demo.thi.ng/umbrella/lispy-repl/
#ThingUmbrella #Lisp #DSL #FunctionalProgramming #REPL -
Btw. Here're some more collected links to earlier experiments/stages of development (from the last 1.5 years) — If anything, this all is yet another example of my personal slow-cook art-making/revisiting approach... 😅
SDF obstacles (static & animated):
https://mastodon.thi.ng/@toxi/111698367393819716
https://mastodon.thi.ng/@toxi/111698918722774094Path attraction/following:
https://mastodon.thi.ng/@toxi/111704122960594951
https://mastodon.thi.ng/@toxi/111704168442616187Boids vs. Voronoi:
https://mastodon.thi.ng/@toxi/111720368699392895Visualizing motion/direction vectors:
https://mastodon.thi.ng/@toxi/111688835639715011#HowToThing mini tutorial:
https://mastodon.thi.ng/@toxi/111308439597090930#ThingUmbrella #GenerativeArt #AlgorithmicArt #NoAI #Boids #Color #Video #TypeScript
-
Btw. Here're some more collected links to earlier experiments/stages of development (from the last 1.5 years) — If anything, this all is yet another example of my personal slow-cook art-making/revisiting approach... 😅
SDF obstacles (static & animated):
https://mastodon.thi.ng/@toxi/111698367393819716
https://mastodon.thi.ng/@toxi/111698918722774094Path attraction/following:
https://mastodon.thi.ng/@toxi/111704122960594951
https://mastodon.thi.ng/@toxi/111704168442616187Boids vs. Voronoi:
https://mastodon.thi.ng/@toxi/111720368699392895Visualizing motion/direction vectors:
https://mastodon.thi.ng/@toxi/111688835639715011#HowToThing mini tutorial:
https://mastodon.thi.ng/@toxi/111308439597090930#ThingUmbrella #GenerativeArt #AlgorithmicArt #NoAI #Boids #Color #Video #TypeScript
-
Btw. Here're some more collected links to earlier experiments/stages of development (from the last 1.5 years) — If anything, this all is yet another example of my personal slow-cook art-making/revisiting approach... 😅
SDF obstacles (static & animated):
https://mastodon.thi.ng/@toxi/111698367393819716
https://mastodon.thi.ng/@toxi/111698918722774094Path attraction/following:
https://mastodon.thi.ng/@toxi/111704122960594951
https://mastodon.thi.ng/@toxi/111704168442616187Boids vs. Voronoi:
https://mastodon.thi.ng/@toxi/111720368699392895Visualizing motion/direction vectors:
https://mastodon.thi.ng/@toxi/111688835639715011#HowToThing mini tutorial:
https://mastodon.thi.ng/@toxi/111308439597090930#ThingUmbrella #GenerativeArt #AlgorithmicArt #NoAI #Boids #Color #Video #TypeScript
-
Btw. Here're some more collected links to earlier experiments/stages of development (from the last 1.5 years) — If anything, this all is yet another example of my personal slow-cook art-making/revisiting approach... 😅
SDF obstacles (static & animated):
https://mastodon.thi.ng/@toxi/111698367393819716
https://mastodon.thi.ng/@toxi/111698918722774094Path attraction/following:
https://mastodon.thi.ng/@toxi/111704122960594951
https://mastodon.thi.ng/@toxi/111704168442616187Boids vs. Voronoi:
https://mastodon.thi.ng/@toxi/111720368699392895Visualizing motion/direction vectors:
https://mastodon.thi.ng/@toxi/111688835639715011#HowToThing mini tutorial:
https://mastodon.thi.ng/@toxi/111308439597090930#ThingUmbrella #GenerativeArt #AlgorithmicArt #NoAI #Boids #Color #Video #TypeScript
-
Yesterday, one year ago... (Still wondering how many people actually have read or tried out any of these)
https://mastodon.thi.ng/@toxi/111348591236791838
#ThingUmbrella #HowToThing #TypeScript #Tutorial #Shader #GIS #SIMD #Forth #ProcGen
-
Yesterday, one year ago... (Still wondering how many people actually have read or tried out any of these)
https://mastodon.thi.ng/@toxi/111348591236791838
#ThingUmbrella #HowToThing #TypeScript #Tutorial #Shader #GIS #SIMD #Forth #ProcGen
-
Yesterday, one year ago... (Still wondering how many people actually have read or tried out any of these)
https://mastodon.thi.ng/@toxi/111348591236791838
#ThingUmbrella #HowToThing #TypeScript #Tutorial #Shader #GIS #SIMD #Forth #ProcGen
-
Yesterday, one year ago... (Still wondering how many people actually have read or tried out any of these)
https://mastodon.thi.ng/@toxi/111348591236791838
#ThingUmbrella #HowToThing #TypeScript #Tutorial #Shader #GIS #SIMD #Forth #ProcGen
-
@khinsen @toxi See "Output of Function toDot" #FederatedWiki #HowToThing
-
@khinsen @toxi See "Output of Function toDot" #FederatedWiki #HowToThing
-
@khinsen @toxi See "Output of Function toDot" #FederatedWiki #HowToThing
-
@khinsen @toxi See "Output of Function toDot" #FederatedWiki #HowToThing
-
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
-
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
-
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
-
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
-
Been debugging boids & behavior combinations all evening! Happy to say, I think all force contributions are fixed now (classic off-by-one error was leading to an initially subtle but increasingly obvious directional bias), and I can focus again on experimenting with some new amazing emergent behaviors... Aside from that, maybe this also qualifies for #Genuary2024 (Day 1: Particles)?!
Btw. This is just a variation of this #ThingUmbrella example project:
https://demo.thi.ng/umbrella/boid-basics/
...which was created as part of last year's #HowToThing series:
https://mastodon.thi.ng/@toxi/111308439597090930
#Agents #Boids #Behaviors #Emergence #Generative #GenerativeArt
-
Been debugging boids & behavior combinations all evening! Happy to say, I think all force contributions are fixed now (classic off-by-one error was leading to an initially subtle but increasingly obvious directional bias), and I can focus again on experimenting with some new amazing emergent behaviors... Aside from that, maybe this also qualifies for #Genuary2024 (Day 1: Particles)?!
Btw. This is just a variation of this #ThingUmbrella example project:
https://demo.thi.ng/umbrella/boid-basics/
...which was created as part of last year's #HowToThing series:
https://mastodon.thi.ng/@toxi/111308439597090930
#Agents #Boids #Behaviors #Emergence #Generative #GenerativeArt
-
Been debugging boids & behavior combinations all evening! Happy to say, I think all force contributions are fixed now (classic off-by-one error was leading to an initially subtle but increasingly obvious directional bias), and I can focus again on experimenting with some new amazing emergent behaviors... Aside from that, maybe this also qualifies for #Genuary2024 (Day 1: Particles)?!
Btw. This is just a variation of this #ThingUmbrella example project:
https://demo.thi.ng/umbrella/boid-basics/
...which was created as part of last year's #HowToThing series:
https://mastodon.thi.ng/@toxi/111308439597090930
#Agents #Boids #Behaviors #Emergence #Generative #GenerativeArt
-
Been debugging boids & behavior combinations all evening! Happy to say, I think all force contributions are fixed now (classic off-by-one error was leading to an initially subtle but increasingly obvious directional bias), and I can focus again on experimenting with some new amazing emergent behaviors... Aside from that, maybe this also qualifies for #Genuary2024 (Day 1: Particles)?!
Btw. This is just a variation of this #ThingUmbrella example project:
https://demo.thi.ng/umbrella/boid-basics/
...which was created as part of last year's #HowToThing series:
https://mastodon.thi.ng/@toxi/111308439597090930
#Agents #Boids #Behaviors #Emergence #Generative #GenerativeArt
-
A short overview of end-of-2023 state of thi.ng(s) (https://thi.ng/umbrella only!):
96 releases done in 2023 (i.e. every 3.6 days on average)
188 projects/packages (+12 this year)
151 example projects (+32 this year)3,865 source files
144,432 lines of code
54,155 docs/comments (37% or 2.66 lines of code-to-comment ratio)
198,587 total SLOCReadme files (for all 188 packages):
49,580 total words
189,978 linesA lot of activity this year was spent on adding/improving documentation & creating new examples to illustrate general usage patterns. From August till October I published 30 chapters of #HowToThing aka heavily commented code examples & mini-tutorials, incl. ~20 new example projects which are now part of the monorepo. Just like the overall project scope, these chapters covered anything from audio synthesis, data transformations, DSLs, geometry, generative art/design, GIS, image processing, Mastodon client, reactive UIs (NOT using React!), shaders, other visualizations and more... Check out the hashtag to view them (full list is also part of the thi.ng/umbrella readme).
#ThingUmbrella #OpenSource #Gratitude #ProjectStatistics #YearInReview #IndyDev #Fundraising
2/3
-
A short overview of end-of-2023 state of thi.ng(s) (https://thi.ng/umbrella only!):
96 releases done in 2023 (i.e. every 3.6 days on average)
188 projects/packages (+12 this year)
151 example projects (+32 this year)3,865 source files
144,432 lines of code
54,155 docs/comments (37% or 2.66 lines of code-to-comment ratio)
198,587 total SLOCReadme files (for all 188 packages):
49,580 total words
189,978 linesA lot of activity this year was spent on adding/improving documentation & creating new examples to illustrate general usage patterns. From August till October I published 30 chapters of #HowToThing aka heavily commented code examples & mini-tutorials, incl. ~20 new example projects which are now part of the monorepo. Just like the overall project scope, these chapters covered anything from audio synthesis, data transformations, DSLs, geometry, generative art/design, GIS, image processing, Mastodon client, reactive UIs (NOT using React!), shaders, other visualizations and more... Check out the hashtag to view them (full list is also part of the thi.ng/umbrella readme).
#ThingUmbrella #OpenSource #Gratitude #ProjectStatistics #YearInReview #IndyDev #Fundraising
2/3
-
A short overview of end-of-2023 state of thi.ng(s) (https://thi.ng/umbrella only!):
96 releases done in 2023 (i.e. every 3.6 days on average)
188 projects/packages (+12 this year)
151 example projects (+32 this year)3,865 source files
144,432 lines of code
54,155 docs/comments (37% or 2.66 lines of code-to-comment ratio)
198,587 total SLOCReadme files (for all 188 packages):
49,580 total words
189,978 linesA lot of activity this year was spent on adding/improving documentation & creating new examples to illustrate general usage patterns. From August till October I published 30 chapters of #HowToThing aka heavily commented code examples & mini-tutorials, incl. ~20 new example projects which are now part of the monorepo. Just like the overall project scope, these chapters covered anything from audio synthesis, data transformations, DSLs, geometry, generative art/design, GIS, image processing, Mastodon client, reactive UIs (NOT using React!), shaders, other visualizations and more... Check out the hashtag to view them (full list is also part of the thi.ng/umbrella readme).
#ThingUmbrella #OpenSource #Gratitude #ProjectStatistics #YearInReview #IndyDev #Fundraising
2/3
-
A short overview of end-of-2023 state of thi.ng(s) (https://thi.ng/umbrella only!):
96 releases done in 2023 (i.e. every 3.6 days on average)
188 projects/packages (+12 this year)
151 example projects (+32 this year)3,865 source files
144,432 lines of code
54,155 docs/comments (37% or 2.66 lines of code-to-comment ratio)
198,587 total SLOCReadme files (for all 188 packages):
49,580 total words
189,978 linesA lot of activity this year was spent on adding/improving documentation & creating new examples to illustrate general usage patterns. From August till October I published 30 chapters of #HowToThing aka heavily commented code examples & mini-tutorials, incl. ~20 new example projects which are now part of the monorepo. Just like the overall project scope, these chapters covered anything from audio synthesis, data transformations, DSLs, geometry, generative art/design, GIS, image processing, Mastodon client, reactive UIs (NOT using React!), shaders, other visualizations and more... Check out the hashtag to view them (full list is also part of the thi.ng/umbrella readme).
#ThingUmbrella #OpenSource #Gratitude #ProjectStatistics #YearInReview #IndyDev #Fundraising
2/3
-
One of the best SIMD intro articles I've ever come across thus far. Very nicely explains all the core concepts and operations, lots of sketches/diagrams... Noice! 👏
https://mcyoung.xyz/2023/11/27/simd-base64/
Btw. If you're using TypeScript/JavaScript, you can play with some of these concepts/ops directly from the REPL using https://thi.ng/simd. This package uses WASM behind the scenes, but doesn't expose the full set of available SIMD instructions (it's a lil' bit more highlevel...)
Also see recent #HowToThing post and practical example about it here:
https://mastodon.thi.ng/@toxi/111283262419126958 -
One of the best SIMD intro articles I've ever come across thus far. Very nicely explains all the core concepts and operations, lots of sketches/diagrams... Noice! 👏
https://mcyoung.xyz/2023/11/27/simd-base64/
Btw. If you're using TypeScript/JavaScript, you can play with some of these concepts/ops directly from the REPL using https://thi.ng/simd. This package uses WASM behind the scenes, but doesn't expose the full set of available SIMD instructions (it's a lil' bit more highlevel...)
Also see recent #HowToThing post and practical example about it here:
https://mastodon.thi.ng/@toxi/111283262419126958 -
One of the best SIMD intro articles I've ever come across thus far. Very nicely explains all the core concepts and operations, lots of sketches/diagrams... Noice! 👏
https://mcyoung.xyz/2023/11/27/simd-base64/
Btw. If you're using TypeScript/JavaScript, you can play with some of these concepts/ops directly from the REPL using https://thi.ng/simd. This package uses WASM behind the scenes, but doesn't expose the full set of available SIMD instructions (it's a lil' bit more highlevel...)
Also see recent #HowToThing post and practical example about it here:
https://mastodon.thi.ng/@toxi/111283262419126958 -
One of the best SIMD intro articles I've ever come across thus far. Very nicely explains all the core concepts and operations, lots of sketches/diagrams... Noice! 👏
https://mcyoung.xyz/2023/11/27/simd-base64/
Btw. If you're using TypeScript/JavaScript, you can play with some of these concepts/ops directly from the REPL using https://thi.ng/simd. This package uses WASM behind the scenes, but doesn't expose the full set of available SIMD instructions (it's a lil' bit more highlevel...)
Also see recent #HowToThing post and practical example about it here:
https://mastodon.thi.ng/@toxi/111283262419126958 -
Almost a week ago I said I'm pausing #HowToThing for a while, but that doesn't preclude adding new examples regardless, e.g. this new one illustrating matrix-based image color adjustments (basic color grading) using floating point pixel buffers via https://thi.ng/pixel and color matrix building blocks (incl. concatenation to produce a single color transform matrix for an arbitrary number of adjustments) via https://thi.ng/color...
Due to lack of time and to keep it simple, there's no image chooser for now (though might still add one...)
Demo (example #146):
https://demo.thi.ng/umbrella/pixel-colormatrix/Source code:
https://github.com/thi-ng/umbrella/blob/develop/examples/pixel-colormatrix/src/index.ts#ThingUmbrella #ImageManipulation #ColorGrading #TypeScript #JavaScript #OpenSource
-
Almost a week ago I said I'm pausing #HowToThing for a while, but that doesn't preclude adding new examples regardless, e.g. this new one illustrating matrix-based image color adjustments (basic color grading) using floating point pixel buffers via https://thi.ng/pixel and color matrix building blocks (incl. concatenation to produce a single color transform matrix for an arbitrary number of adjustments) via https://thi.ng/color...
Due to lack of time and to keep it simple, there's no image chooser for now (though might still add one...)
Demo (example #146):
https://demo.thi.ng/umbrella/pixel-colormatrix/Source code:
https://github.com/thi-ng/umbrella/blob/develop/examples/pixel-colormatrix/src/index.ts#ThingUmbrella #ImageManipulation #ColorGrading #TypeScript #JavaScript #OpenSource
-
Almost a week ago I said I'm pausing #HowToThing for a while, but that doesn't preclude adding new examples regardless, e.g. this new one illustrating matrix-based image color adjustments (basic color grading) using floating point pixel buffers via https://thi.ng/pixel and color matrix building blocks (incl. concatenation to produce a single color transform matrix for an arbitrary number of adjustments) via https://thi.ng/color...
Due to lack of time and to keep it simple, there's no image chooser for now (though might still add one...)
Demo (example #146):
https://demo.thi.ng/umbrella/pixel-colormatrix/Source code:
https://github.com/thi-ng/umbrella/blob/develop/examples/pixel-colormatrix/src/index.ts#ThingUmbrella #ImageManipulation #ColorGrading #TypeScript #JavaScript #OpenSource
-
Almost a week ago I said I'm pausing #HowToThing for a while, but that doesn't preclude adding new examples regardless, e.g. this new one illustrating matrix-based image color adjustments (basic color grading) using floating point pixel buffers via https://thi.ng/pixel and color matrix building blocks (incl. concatenation to produce a single color transform matrix for an arbitrary number of adjustments) via https://thi.ng/color...
Due to lack of time and to keep it simple, there's no image chooser for now (though might still add one...)
Demo (example #146):
https://demo.thi.ng/umbrella/pixel-colormatrix/Source code:
https://github.com/thi-ng/umbrella/blob/develop/examples/pixel-colormatrix/src/index.ts#ThingUmbrella #ImageManipulation #ColorGrading #TypeScript #JavaScript #OpenSource
-
Just updated the procedural text generator tool (from the most recent #HowToThing example[1]) to allow storing/loading source template text via the URL hash fragment. That means one can now share small procedural stories/texts like this (hoping Mastodon allows longish URLs):
[1] For context/reference: https://mastodon.thi.ng/@toxi/111347074558293056
-
Just updated the procedural text generator tool (from the most recent #HowToThing example[1]) to allow storing/loading source template text via the URL hash fragment. That means one can now share small procedural stories/texts like this (hoping Mastodon allows longish URLs):
[1] For context/reference: https://mastodon.thi.ng/@toxi/111347074558293056
-
Just updated the procedural text generator tool (from the most recent #HowToThing example[1]) to allow storing/loading source template text via the URL hash fragment. That means one can now share small procedural stories/texts like this (hoping Mastodon allows longish URLs):
[1] For context/reference: https://mastodon.thi.ng/@toxi/111347074558293056
-
Just updated the procedural text generator tool (from the most recent #HowToThing example[1]) to allow storing/loading source template text via the URL hash fragment. That means one can now share small procedural stories/texts like this (hoping Mastodon allows longish URLs):
[1] For context/reference: https://mastodon.thi.ng/@toxi/111347074558293056
-
#HowToThing #Epilogue #LongRead: After 66 days of addressing 30 wildly varied use cases and building ~20 new example projects of varying complexity to illustrate how #ThingUmbrella libraries can be used & combined, I'm taking a break to concentrate on other important thi.ngs...
With this overall selection I tried shining a light on common architectural patterns, but also some underexposed, yet interesting niche topics. Since there were many different techniques involved, it's natural not everything resonated with everyone. That's fine! Though, my hope always is that readers take an interest in a wide range of topics, and so many of these new examples were purposefully multi-faceted and hopefully provided insights for at least some parts, plus (in)directly communicated a core essence of the larger project:
Only individual packages (or small clusters) are designed & optimized for a set of particular use cases. At large, though, thi.ng explicitly does NOT offer any such guidance or even opinion. All I can offer are possibilities, nudges and cross-references, how these constructs & techniques can be (and have been) useful and/or the theory underpinning them. For some topics, thi.ng libs provide multiple approaches to achieve certain goals. This again is by design (not lack of it!) and stems from hard-learned experience, showing that many (esp. larger) projects highly benefit from more nuanced (sometimes conflicting approaches) compared to popular defacto "catch-all" framework solutions. To avid users (incl. myself) this approach has become a somewhat unique offering and advantage, yet in itself seems to be the hardest and most confusing aspect of the entire project to communicate to newcomers.
So seeing this list of new projects together, to me really is a celebration (and confirmation/testament) of the overall #BottomUpDesign #ThingUmbrella approach (which I've been building on since ~2006): From the wide spectrum/flexibility of use cases, the expressiveness, concision, the data-first approach, the undogmatic mix of complementary paradigms, the separation of concerns, no hidden magic state, only minimal build tooling requirements (a bundler is optional, but recommended for tree shaking, no more) — these are all aspects I think are key to building better (incl. more maintainable & reason-able) software. IMO they are worth embracing & exposing more people to and this is what I've partially attempted to do with this series of posts...
ICYMI here's a summary of the 10 most recent posts (full list in the https://thi.ng/umbrella readme). Many of those examples have more comments than code...
021: Iterative animated polygon subdivision & heat map viz
https://mastodon.thi.ng/@toxi/111221943333023306022: Quasi-random voronoi lattice generator
https://mastodon.thi.ng/@toxi/111244412425832657023: Tag-based Jaccard similarity ranking using bitfields
https://mastodon.thi.ng/@toxi/111256960928934577024: 2.5D hidden line visualization of DEM files
https://mastodon.thi.ng/@toxi/111269505611983570025: Transforming & plotting 10k data points using SIMD
https://mastodon.thi.ng/@toxi/111283262419126958026: Shader meta-programming to generate 16 animated function plots
https://mastodon.thi.ng/@toxi/111295842650216136027: Flocking sim w/ neighborhood queries to visualize proximity
https://mastodon.thi.ng/@toxi/111308439597090930028: Randomized, space-filling, nested 2D grid layout generator
https://mastodon.thi.ng/@toxi/111324566926701431029: Forth-like DSL & livecoding playground for 2D geometry
https://mastodon.thi.ng/@toxi/111335025037332972030: Procedural text generation via custom DSL & parse grammar
https://mastodon.thi.ng/@toxi/111347074558293056#ThingUmbrella #OpenSource #TypeScript #JavaScript #Tutorial
-
#HowToThing #Epilogue #LongRead: After 66 days of addressing 30 wildly varied use cases and building ~20 new example projects of varying complexity to illustrate how #ThingUmbrella libraries can be used & combined, I'm taking a break to concentrate on other important thi.ngs...
With this overall selection I tried shining a light on common architectural patterns, but also some underexposed, yet interesting niche topics. Since there were many different techniques involved, it's natural not everything resonated with everyone. That's fine! Though, my hope always is that readers take an interest in a wide range of topics, and so many of these new examples were purposefully multi-faceted and hopefully provided insights for at least some parts, plus (in)directly communicated a core essence of the larger project:
Only individual packages (or small clusters) are designed & optimized for a set of particular use cases. At large, though, thi.ng explicitly does NOT offer any such guidance or even opinion. All I can offer are possibilities, nudges and cross-references, how these constructs & techniques can be (and have been) useful and/or the theory underpinning them. For some topics, thi.ng libs provide multiple approaches to achieve certain goals. This again is by design (not lack of it!) and stems from hard-learned experience, showing that many (esp. larger) projects highly benefit from more nuanced (sometimes conflicting approaches) compared to popular defacto "catch-all" framework solutions. To avid users (incl. myself) this approach has become a somewhat unique offering and advantage, yet in itself seems to be the hardest and most confusing aspect of the entire project to communicate to newcomers.
So seeing this list of new projects together, to me really is a celebration (and confirmation/testament) of the overall #BottomUpDesign #ThingUmbrella approach (which I've been building on since ~2006): From the wide spectrum/flexibility of use cases, the expressiveness, concision, the data-first approach, the undogmatic mix of complementary paradigms, the separation of concerns, no hidden magic state, only minimal build tooling requirements (a bundler is optional, but recommended for tree shaking, no more) — these are all aspects I think are key to building better (incl. more maintainable & reason-able) software. IMO they are worth embracing & exposing more people to and this is what I've partially attempted to do with this series of posts...
ICYMI here's a summary of the 10 most recent posts (full list in the https://thi.ng/umbrella readme). Many of those examples have more comments than code...
021: Iterative animated polygon subdivision & heat map viz
https://mastodon.thi.ng/@toxi/111221943333023306022: Quasi-random voronoi lattice generator
https://mastodon.thi.ng/@toxi/111244412425832657023: Tag-based Jaccard similarity ranking using bitfields
https://mastodon.thi.ng/@toxi/111256960928934577024: 2.5D hidden line visualization of DEM files
https://mastodon.thi.ng/@toxi/111269505611983570025: Transforming & plotting 10k data points using SIMD
https://mastodon.thi.ng/@toxi/111283262419126958026: Shader meta-programming to generate 16 animated function plots
https://mastodon.thi.ng/@toxi/111295842650216136027: Flocking sim w/ neighborhood queries to visualize proximity
https://mastodon.thi.ng/@toxi/111308439597090930028: Randomized, space-filling, nested 2D grid layout generator
https://mastodon.thi.ng/@toxi/111324566926701431029: Forth-like DSL & livecoding playground for 2D geometry
https://mastodon.thi.ng/@toxi/111335025037332972030: Procedural text generation via custom DSL & parse grammar
https://mastodon.thi.ng/@toxi/111347074558293056#ThingUmbrella #OpenSource #TypeScript #JavaScript #Tutorial
-
#HowToThing #Epilogue #LongRead: After 66 days of addressing 30 wildly varied use cases and building ~20 new example projects of varying complexity to illustrate how #ThingUmbrella libraries can be used & combined, I'm taking a break to concentrate on other important thi.ngs...
With this overall selection I tried shining a light on common architectural patterns, but also some underexposed, yet interesting niche topics. Since there were many different techniques involved, it's natural not everything resonated with everyone. That's fine! Though, my hope always is that readers take an interest in a wide range of topics, and so many of these new examples were purposefully multi-faceted and hopefully provided insights for at least some parts, plus (in)directly communicated a core essence of the larger project:
Only individual packages (or small clusters) are designed & optimized for a set of particular use cases. At large, though, thi.ng explicitly does NOT offer any such guidance or even opinion. All I can offer are possibilities, nudges and cross-references, how these constructs & techniques can be (and have been) useful and/or the theory underpinning them. For some topics, thi.ng libs provide multiple approaches to achieve certain goals. This again is by design (not lack of it!) and stems from hard-learned experience, showing that many (esp. larger) projects highly benefit from more nuanced (sometimes conflicting approaches) compared to popular defacto "catch-all" framework solutions. To avid users (incl. myself) this approach has become a somewhat unique offering and advantage, yet in itself seems to be the hardest and most confusing aspect of the entire project to communicate to newcomers.
So seeing this list of new projects together, to me really is a celebration (and confirmation/testament) of the overall #BottomUpDesign #ThingUmbrella approach (which I've been building on since ~2006): From the wide spectrum/flexibility of use cases, the expressiveness, concision, the data-first approach, the undogmatic mix of complementary paradigms, the separation of concerns, no hidden magic state, only minimal build tooling requirements (a bundler is optional, but recommended for tree shaking, no more) — these are all aspects I think are key to building better (incl. more maintainable & reason-able) software. IMO they are worth embracing & exposing more people to and this is what I've partially attempted to do with this series of posts...
ICYMI here's a summary of the 10 most recent posts (full list in the https://thi.ng/umbrella readme). Many of those examples have more comments than code...
021: Iterative animated polygon subdivision & heat map viz
https://mastodon.thi.ng/@toxi/111221943333023306022: Quasi-random voronoi lattice generator
https://mastodon.thi.ng/@toxi/111244412425832657023: Tag-based Jaccard similarity ranking using bitfields
https://mastodon.thi.ng/@toxi/111256960928934577024: 2.5D hidden line visualization of DEM files
https://mastodon.thi.ng/@toxi/111269505611983570025: Transforming & plotting 10k data points using SIMD
https://mastodon.thi.ng/@toxi/111283262419126958026: Shader meta-programming to generate 16 animated function plots
https://mastodon.thi.ng/@toxi/111295842650216136027: Flocking sim w/ neighborhood queries to visualize proximity
https://mastodon.thi.ng/@toxi/111308439597090930028: Randomized, space-filling, nested 2D grid layout generator
https://mastodon.thi.ng/@toxi/111324566926701431029: Forth-like DSL & livecoding playground for 2D geometry
https://mastodon.thi.ng/@toxi/111335025037332972030: Procedural text generation via custom DSL & parse grammar
https://mastodon.thi.ng/@toxi/111347074558293056#ThingUmbrella #OpenSource #TypeScript #JavaScript #Tutorial
-
#HowToThing #Epilogue #LongRead: After 66 days of addressing 30 wildly varied use cases and building ~20 new example projects of varying complexity to illustrate how #ThingUmbrella libraries can be used & combined, I'm taking a break to concentrate on other important thi.ngs...
With this overall selection I tried shining a light on common architectural patterns, but also some underexposed, yet interesting niche topics. Since there were many different techniques involved, it's natural not everything resonated with everyone. That's fine! Though, my hope always is that readers take an interest in a wide range of topics, and so many of these new examples were purposefully multi-faceted and hopefully provided insights for at least some parts, plus (in)directly communicated a core essence of the larger project:
Only individual packages (or small clusters) are designed & optimized for a set of particular use cases. At large, though, thi.ng explicitly does NOT offer any such guidance or even opinion. All I can offer are possibilities, nudges and cross-references, how these constructs & techniques can be (and have been) useful and/or the theory underpinning them. For some topics, thi.ng libs provide multiple approaches to achieve certain goals. This again is by design (not lack of it!) and stems from hard-learned experience, showing that many (esp. larger) projects highly benefit from more nuanced (sometimes conflicting approaches) compared to popular defacto "catch-all" framework solutions. To avid users (incl. myself) this approach has become a somewhat unique offering and advantage, yet in itself seems to be the hardest and most confusing aspect of the entire project to communicate to newcomers.
So seeing this list of new projects together, to me really is a celebration (and confirmation/testament) of the overall #BottomUpDesign #ThingUmbrella approach (which I've been building on since ~2006): From the wide spectrum/flexibility of use cases, the expressiveness, concision, the data-first approach, the undogmatic mix of complementary paradigms, the separation of concerns, no hidden magic state, only minimal build tooling requirements (a bundler is optional, but recommended for tree shaking, no more) — these are all aspects I think are key to building better (incl. more maintainable & reason-able) software. IMO they are worth embracing & exposing more people to and this is what I've partially attempted to do with this series of posts...
ICYMI here's a summary of the 10 most recent posts (full list in the https://thi.ng/umbrella readme). Many of those examples have more comments than code...
021: Iterative animated polygon subdivision & heat map viz
https://mastodon.thi.ng/@toxi/111221943333023306022: Quasi-random voronoi lattice generator
https://mastodon.thi.ng/@toxi/111244412425832657023: Tag-based Jaccard similarity ranking using bitfields
https://mastodon.thi.ng/@toxi/111256960928934577024: 2.5D hidden line visualization of DEM files
https://mastodon.thi.ng/@toxi/111269505611983570025: Transforming & plotting 10k data points using SIMD
https://mastodon.thi.ng/@toxi/111283262419126958026: Shader meta-programming to generate 16 animated function plots
https://mastodon.thi.ng/@toxi/111295842650216136027: Flocking sim w/ neighborhood queries to visualize proximity
https://mastodon.thi.ng/@toxi/111308439597090930028: Randomized, space-filling, nested 2D grid layout generator
https://mastodon.thi.ng/@toxi/111324566926701431029: Forth-like DSL & livecoding playground for 2D geometry
https://mastodon.thi.ng/@toxi/111335025037332972030: Procedural text generation via custom DSL & parse grammar
https://mastodon.thi.ng/@toxi/111347074558293056#ThingUmbrella #OpenSource #TypeScript #JavaScript #Tutorial
-
#HowToThing #030 — Procedural, rule-based & stochastic text generation using a custom DSL, parse grammar (via https://thi.ng/parse) and abstract syntax tree transformation (via https://thi.ng/defmulti).
Since it's #NaNoWriMo & #NaNoGenMo [1], I'm closing out this first season of 30 #HowToThing's with a related topic & maybe someone even finds it useful/interesting... 😉🤷♂️
This example is in principle inspired by @galaxykate's oldie & goodie #Tracery, but is using a super simple custom text format instead of JSON to define variables and template text. Variables are expanded recursively and I've also added features like dynamic, indirect pointer-like variable lookups to derive variables based on current values (useful for conditionals & context-specific expansions), hidden assignments, chainable modifiers... I've included 5 different "story" templates (incl. comments) showing various features. Just press "regenerate" to create new random variations...
Similar to the previous #HowToThing, I'm hoping this example also shows that approaching use cases like this via small domain-specific languages with proper grammar rules, does not require much ceremony and is often more amenable to change during prototyping (and later also more maintainable!) than just regex bashing approaches...
The parser grammar itself is explained in the https://thi.ng/parse readme. As usual, the grammar was created/prototyped with the Parser Playground[2], which we developed from scratch during the first thi.ng livestream[3] (2.5h video)...
Demo (example project #145):
https://demo.thi.ng/umbrella/procedural-text/Source code:
https://github.com/thi-ng/umbrella/tree/develop/examples/procedural-text/srcIf you have any questions about this topic or the packages used here, please reply in thread or use the discussion forum (or issue tracker):
https://github.com/thi-ng/umbrella/discussions
[1] https://github.com/NaNoGenMo/2023/
[2] https://demo.thi.ng/umbrella/parse-playground/
[3] https://www.youtube.com/watch?v=mXp92s_VP40#ThingUmbrella #NaNoWriMo2023 #NaNoGenMo2023 #ProcGen #Generative #TextGeneration #Ngram #TypeScript #JavaScript #Tutorial
-
#HowToThing #030 — Procedural, rule-based & stochastic text generation using a custom DSL, parse grammar (via https://thi.ng/parse) and abstract syntax tree transformation (via https://thi.ng/defmulti).
Since it's #NaNoWriMo & #NaNoGenMo [1], I'm closing out this first season of 30 #HowToThing's with a related topic & maybe someone even finds it useful/interesting... 😉🤷♂️
This example is in principle inspired by @galaxykate's oldie & goodie #Tracery, but is using a super simple custom text format instead of JSON to define variables and template text. Variables are expanded recursively and I've also added features like dynamic, indirect pointer-like variable lookups to derive variables based on current values (useful for conditionals & context-specific expansions), hidden assignments, chainable modifiers... I've included 5 different "story" templates (incl. comments) showing various features. Just press "regenerate" to create new random variations...
Similar to the previous #HowToThing, I'm hoping this example also shows that approaching use cases like this via small domain-specific languages with proper grammar rules, does not require much ceremony and is often more amenable to change during prototyping (and later also more maintainable!) than just regex bashing approaches...
The parser grammar itself is explained in the https://thi.ng/parse readme. As usual, the grammar was created/prototyped with the Parser Playground[2], which we developed from scratch during the first thi.ng livestream[3] (2.5h video)...
Demo (example project #145):
https://demo.thi.ng/umbrella/procedural-text/Source code:
https://github.com/thi-ng/umbrella/tree/develop/examples/procedural-text/srcIf you have any questions about this topic or the packages used here, please reply in thread or use the discussion forum (or issue tracker):
https://github.com/thi-ng/umbrella/discussions
[1] https://github.com/NaNoGenMo/2023/
[2] https://demo.thi.ng/umbrella/parse-playground/
[3] https://www.youtube.com/watch?v=mXp92s_VP40#ThingUmbrella #NaNoWriMo2023 #NaNoGenMo2023 #ProcGen #Generative #TextGeneration #Ngram #TypeScript #JavaScript #Tutorial
-
#HowToThing #030 — Procedural, rule-based & stochastic text generation using a custom DSL, parse grammar (via https://thi.ng/parse) and abstract syntax tree transformation (via https://thi.ng/defmulti).
Since it's #NaNoWriMo & #NaNoGenMo [1], I'm closing out this first season of 30 #HowToThing's with a related topic & maybe someone even finds it useful/interesting... 😉🤷♂️
This example is in principle inspired by @galaxykate's oldie & goodie #Tracery, but is using a super simple custom text format instead of JSON to define variables and template text. Variables are expanded recursively and I've also added features like dynamic, indirect pointer-like variable lookups to derive variables based on current values (useful for conditionals & context-specific expansions), hidden assignments, chainable modifiers... I've included 5 different "story" templates (incl. comments) showing various features. Just press "regenerate" to create new random variations...
Similar to the previous #HowToThing, I'm hoping this example also shows that approaching use cases like this via small domain-specific languages with proper grammar rules, does not require much ceremony and is often more amenable to change during prototyping (and later also more maintainable!) than just regex bashing approaches...
The parser grammar itself is explained in the https://thi.ng/parse readme. As usual, the grammar was created/prototyped with the Parser Playground[2], which we developed from scratch during the first thi.ng livestream[3] (2.5h video)...
Demo (example project #145):
https://demo.thi.ng/umbrella/procedural-text/Source code:
https://github.com/thi-ng/umbrella/tree/develop/examples/procedural-text/srcIf you have any questions about this topic or the packages used here, please reply in thread or use the discussion forum (or issue tracker):
https://github.com/thi-ng/umbrella/discussions
[1] https://github.com/NaNoGenMo/2023/
[2] https://demo.thi.ng/umbrella/parse-playground/
[3] https://www.youtube.com/watch?v=mXp92s_VP40#ThingUmbrella #NaNoWriMo2023 #NaNoGenMo2023 #ProcGen #Generative #TextGeneration #Ngram #TypeScript #JavaScript #Tutorial
-
#HowToThing #030 — Procedural, rule-based & stochastic text generation using a custom DSL, parse grammar (via https://thi.ng/parse) and abstract syntax tree transformation (via https://thi.ng/defmulti).
Since it's #NaNoWriMo & #NaNoGenMo [1], I'm closing out this first season of 30 #HowToThing's with a related topic & maybe someone even finds it useful/interesting... 😉🤷♂️
This example is in principle inspired by @galaxykate's oldie & goodie #Tracery, but is using a super simple custom text format instead of JSON to define variables and template text. Variables are expanded recursively and I've also added features like dynamic, indirect pointer-like variable lookups to derive variables based on current values (useful for conditionals & context-specific expansions), hidden assignments, chainable modifiers... I've included 5 different "story" templates (incl. comments) showing various features. Just press "regenerate" to create new random variations...
Similar to the previous #HowToThing, I'm hoping this example also shows that approaching use cases like this via small domain-specific languages with proper grammar rules, does not require much ceremony and is often more amenable to change during prototyping (and later also more maintainable!) than just regex bashing approaches...
The parser grammar itself is explained in the https://thi.ng/parse readme. As usual, the grammar was created/prototyped with the Parser Playground[2], which we developed from scratch during the first thi.ng livestream[3] (2.5h video)...
Demo (example project #145):
https://demo.thi.ng/umbrella/procedural-text/Source code:
https://github.com/thi-ng/umbrella/tree/develop/examples/procedural-text/srcIf you have any questions about this topic or the packages used here, please reply in thread or use the discussion forum (or issue tracker):
https://github.com/thi-ng/umbrella/discussions
[1] https://github.com/NaNoGenMo/2023/
[2] https://demo.thi.ng/umbrella/parse-playground/
[3] https://www.youtube.com/watch?v=mXp92s_VP40#ThingUmbrella #NaNoWriMo2023 #NaNoGenMo2023 #ProcGen #Generative #TextGeneration #Ngram #TypeScript #JavaScript #Tutorial