https://thi.ng/umbrella 2024 summary

Next month #ThingUmbrella will be already 7 years old (in its current monorepo form) and thi.ng itself turn 14 — a true teenager!

2024 has been a year of a lot of maintenance and the first year in a while, in which I got to put so many of these tools & libraries to work on the development of several other new (and ongoing) projects (incl. some still unannounced ones). Considering the vastly different usage contexts, each time this is also a demonstration (to myself) of just how powerful, adaptable and _composable_ many of these libraries are, and I wish I'd be able to better communicate these aspects to other people...

My deepest thanks and gratitude to my amazing supporters/sponsors, who've been enabling me to continue this work, to expand on it and actively maintain it! Some of you already for years! Love you, people — Your support means the world to these projects (and to me)! And even though I'm still a far way from being able to work fulltime on all these projects, and also had to take on some consulting work this year, I too have been trying my best to work on thi.ng projects every day this year (and almost succeeded)...

Super special thanks go out to: @avi @made @Yura @robertoranon @jeffpalmer @alesroubicek @slowdownitsfine @latrokles @rc101 and others... (Sorry if I missed any other people/supporters/users here — please ping me (again) if I don't follow you already!)

Some juicy/boring statistics (#ThingUmbrella only!):

In 2024 there were 1,639 commits (incl. today's release), of which:

- 467 features (29%)
- 389 documentation related (24%)
- 340 refactor & performance (21%)
- 198 build, CI, testing, restructuring (12%)
- 112 releases (7%)
- 87 bug fixes (5%)

Scope:

- 200 packages/libraries/tools
- 180 standalone example projects/tools
- 520 code snippets/examples in docs (extractable via tooling)

Source code:

- 4,095 source files
- 223k SLOC total, of which:
- 159k lines of code
- 64k comment lines (mostly for API docs)

Readme's:

- 33% of packages with 1,000+ words
- 20% of packages with 1,500+ words
- Min: 215, max: 9,519, avg: 1,075 words

3,445 Github ️ (+12% in 2024)

200,675,881 NPM total downloads to date ()

There're many valuable ways to support these projects: Share your usage/experience reports, tips & tricks, ask/answer questions, submit issues/PRs, create small examples, documentation/tutorials, word-of-mouth etc.

If you see value in these projects and want to support a large & mature body of open source work financially, I'm accepting contributions via: Github, Liberapay & Patreon — thank you very much for your consideration!

https://github.com/postspectacular
https://liberapay.com/thi.ng/
https://patreon.com/thing_umbrella

Ps. I'm on a small single-user instance only here - any boosts are highly appreciated to increase visibility! Thank you!

#LongRead #ThingNews 01/2024

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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