#ReleaseMonday Yesterday, I took the plunge and updated all 215 https://thi.ng/umbrella packages (plus examples) for TypeScript 6.0, then released new versions just now this morning. After previous preparations and some initial struggles, it thankfully only involved updates to tsconfig.json files (accompanied by a lot of head scratching).

I'm still confused about the new behavior of TS6 now defaulting to an empty types array[1] in compilerOptions, meaning one has to explicitly state, e.g. "types": ["node"] now, seemingly for any dependent package as well. The latter is the confusing part to me!

For example, the https://thi.ng/errors package requires NodeJS type definitions for doing some pre-checks, but because of that, any dependent package has to specify the "types": ["node"] option too now (so it seems...), even if the dependent package itself does not use NodeJS types... If this compiler option isn't given, you'll get errors like Cannot find namespace 'NodeJS' when compiling the downstream package. I find this transitive requirement super weird & nonsense! I also mention it, because it will likely impact your own codebase as well... Please report back, if you could! 🙏

[1] https://www.typescriptlang.org/docs/handbook/release-notes/typescript-6-0.html#types-now-defaults-to-

#ThingUmbrella #TypeScript #OpenSource #Maintenance

#ReleaseMonday — New version (v0.27.0) of https://thi.ng/genart-api, a platform-independent extensible API for browser-based computational/algorithmic/generative art projects:

This version features an overhaul of the platform provided PRNG (pseudo-random number generator) handling and makes it easier to create multiple PRNGs for artworks which require/desire them...

Related section in the README:
https://github.com/thi-ng/genart-api/blob/main/README.md#determinism--prng-provision

Also, just as a reminder, the project has:

- no external dependencies
- adapters for 3 art platforms (EditArt, fxhash, Layer)
- 6 example projects
- testing/dev sandbox with two parameter editors
- WebAssembly bindings & demo (currently for #Zig only)

Happy coding! :)

#GenArtAPI #GenerativeArt #AlgorithmicArt #ProceduralArt #Art #OpenSource #Parameters #Interoperability #TypeScript #JavaScript #WebAssembly #WASM #Ziglang

#ReleaseMonday — One of the recent (already very useful!) new package additions to #ThingUmbrella is:

https://thi.ng/leaky-bucket

Leaky buckets are commonly used in communication networks for rate limiting, traffic shaping and bandwidth control, but are equally useful in other domains requiring similar constraints.

A Leaky Bucket is a managed counter with an enforced maximum value (i.e. bucket capacity). The counter is incremented for each a new event to check if it can/should be processed. If the bucket capacity has already been reached, the bucket will report an overflow, which we can then handle accordingly (e.g. by dropping or queuing events). The bucket also has a configurable time interval at which the counter is decreasing (aka the "leaking" behavior) until it reaches zero again (i.e. until the bucket is empty). Altogether, this setup can be utilized to ensure both an average rate, whilst also supporting temporary bursting in a controlled fashion...

Related, I've also updated/simplified the rate limiter interceptor in https://thi.ng/server to utilize this new package...

#ThingUmbrella #DataStructure #RateLimiting #OpenSource #TypeScript #JavaScript

What follows #ReleaseSunday? #ReleaseMonday of course!

The new additions are mainly what was mentioned in my previous toots of the past 24h:

https://thi.ng/color
Configurable CSS default conversions/serializations (e.g. `CSS_LEVEL3` [initial default] vs `CSS_LEVEL4` [supported])

https://thi.ng/transducers
Added `syncTuples()` transducer, a useful companion (post-processing step) for `multiplex()` transformation pipelines

#ThingUmbrella #OpenSource #TypeScript

#ReleaseMonday 🚀 — Still warm from uploading, this round includes notable updates to these package (updated/fixed code examples in the readme's), in A-Z order:

https://thi.ng/hiccup-canvas — fixed vertex memory layout attrib handling for packed polygons/polylines (mainly of interest for WASM interop)

https://thi.ng/logger — major version update: restructured & updated base types/implementations to support hierarchies of loggers, also to simplify creating & configuring child loggers attached to the newly provided central ROOT logger. Various other thi.ng packages with logging support have already been updated...

https://thi.ng/mime — updated to latest snapshot of mime-db, update vendor prefixed overrides, add isCompressible() predicate

https://thi.ng/ramp — updated/extended vector type interpolation, now truly supports n-dimensional vectors (previously only 2d/3d/4d)

https://thi.ng/text-canvas — major version update: added/updated texmode plotting functions and support compositing multiple bar plots using additive blending for CLI based dataviz purposes[1], cleanup parts of API.

For more updates check the main readme:
https://thi.ng/umbrella

Ps. Thank you to the 28 people who've filled in the community survey[2] and gave some great feedback over the past 10 days. It's open for another 10 days, so if you haven't participated yet, now is the time :) Thank you very much in advance!

[1] https://mastodon.thi.ng/@toxi/111957681302985179
[2] https://forms.gle/XacbSDEmQMPZg8197

🚀 #ThingUmbrella #ReleaseMonday with new, just released functionality:

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

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

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

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

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

The attached image shows the commented demo source code.

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

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

#ThingUmbrella #CSS #Tween #Animation #Transition #Reactive #TypeScript #JavaScript #UI

So #ThingUmbrella #ReleaseMonday: Today's release is the first time all 186 packages have been built using https://esbuild.github.io instead of TypeScript's own compiler (which is now only being used when needed for type checking and to generate type declaration files). The overall output format and target (ES2022) remains the same. I've been doing extensive tests with the various bundled examples and some other of my own projects, but should you run into any unexpected issues on your end, please do report back, either here or file an issue on GitHub. 🙏

New packages: In an effort to further reduce 3rd party runtime dependencies (of which there're almost none anyway), but also to improve performance, I've recently added https://thi.ng/msgpack, a serializer/deserializer for the https://msgpack.org/ format, which I've been using for various things, incl. the https://thi.ng/umbrella repo-wide doc search index (UI & hosting location to be urgently updated/improved):

https://demo.thi.ng/umbrella/rdom-search-docs/

Also new: https://thi.ng/rdom-forms, a data-driven, declarative & extensible HTML form generator based around https://thi.ng/hiccup-html & https://thi.ng/rdom. The form elements are unstyled by default, but highly customizable. In addition to being aimed at rdom (for using reactive form field values), it's also highly suitable for static HTML-generation or SSR purposes. Check out the new example project for details (also open the dev console to view HTML output).

https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-formgen

I've already started updating/simplifying the UI generation of several other example projects in the repo, but the API of this new package is still WIP only. Be warned, there might/will be changes ahead...

#ThingUmbrella #OpenSource #TypeScript #JavaScript #esbuild

Even though #ThingUmbrella isn't using a low-level language, many of its design aspects and decisions are explicitly about keeping resource usage low and being generally aware of code bundling, tree shaking (dead code elimination), CPU, energy & bandwidth consumptions... As the collection now consists of 186 libraries (with ~3850 source files!), every even minor saving in the shared build infrastructure will quickly have a positive compounding impact. Over the past month I've been busy updating & testing new tooling for the entire monorepo and am super happy to report _drastically_ reduced build & test times! "Drastically" here meaning a factor of 10-20x(!!!) faster... 🚀

Time to build & test the entire monorepo on GitHub's CI:

Previously, using only TypeScript for building & NodeJS for testing:
30-40 mins (😱)

Now, using https://esbuild.github.io for building and https://bun.sh for testing:
1:50-2 mins (🤯)

On my MBA M1 (2021) the whole process only takes now 56 seconds!

If you want to apply the same kind of optimizations for your own project, do take a look at my package.json and tsconfig.json files in this repo:

https://github.com/thi-ng/umbrella

Ps. It's also #ReleaseMonday. Details about that in a later post... 🫡

#ThingUmbrella #Optimization #CI #BuildTools #EnergyConsumption #TypeScript #esbuild #Bun #Monorepo #OpenSource #GitHub

#HowToThing #028 — Randomized, space-filling, nested 2D grid layout generator using https://thi.ng/layout & https://thi.ng/transducers

Already gave a glimpse of this yesterday[1]. This example uses the new `StackedLayout` generator to create random multi-column base layouts and allocate cells of varying sizes (column/row spans). Depending on size, each cell also has a probability to produce nested child layouts in its place (up to 4 levels). The example also shows how the layout gen can be queried to determine & allocate any remaining empty space(s) at the bottom of each nesting level (since it's highly likely that there's such)... The result is a completely space-filling grid layout (which the new thi.ng website will likely be based on too, obviously with some of the more sane/usable/responsive configurations...)

Demo (reload for random config):
https://demo.thi.ng/umbrella/layout-gridgen/

Source code:
https://github.com/thi-ng/umbrella/blob/develop/examples/layout-gridgen/src/index.ts

If 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

Ps. It's also #ReleaseMonday — check main https://thi.ng/umbrella readme for latest updates/changelogs... 🚀

[1] https://mastodon.thi.ng/@toxi/111317359454947648

#ThingUmbrella #Grid #Layout #GenerativeDesign #GenerativeArt #TypeScript #JavaScript #GUI #Frontend #Tutorial

#ReleaseMonday 🚀

RT @[email protected]

Major new additions & updates to the #WebAssembly interop layer & codegens, incl. new support module (WIP) for UI & DOM creation: http://thi.ng/wasm-api-dom

Plus, a nifty hybrid canvas drawing demo 90% written in #ziglang, showing many of these new features: https://demo.thi.ng/umbrella/zig-canvas/

🐦🔗: https://twitter.com/thing_umbrella/status/1576976415873966086