#ReleaseFriday — Just released a new version of the https://thi.ng/meta-css toolchain (which includes a powerful generator for custom CSS frameworks, macro-based stylesheet syntax, dead-code elimination, bundling etc.).

The new version also includes support for `prop-name-[value]` syntax to use alongside other class macros and templates to define CSS properties and their values in a verbatim/inline manner. The readme includes a short section with an example...

https://github.com/thi-ng/umbrella/tree/develop/packages/meta-css#verbatim-property-definitions

#ThingUmbrella #MetaCSS #CSS #OpenSource

#ReleaseThursday 🚀 — This week's second round of releases is featuring:

https://thi.ng/geom — added support for more shape pairings in the polymorphic intersection function to altogether 18, now also including: line↔︎group (incl. nested groups), line↔︎polygon, line↔︎polyline, ray↔︎group, ray↔︎line

https://thi.ng/geom-isec — simplified intersection result type (intersection point(s) now always in an array), added computation of point-inside-shape flags to more shape types, bug fixes

https://thi.ng/meta-css — more updates to CSS template handling, spec doc system and tons more additions to the generative baseframework specs/templates, now already consisting of 932 CSS utility classes (incl. 61 callable templates/functions/macros), which can be used as-is or as starting point to define your own custom CSS framework(s). All explained in the readme... This toolchain will likely keep on seeing a flurry of other updates since I'm heavily using it for the design of the new thi.ng website too! Together with mprocs[1] and Vite it also offers a very nice hot-reloading workflow...

https://thi.ng/hiccup-css — added support for SASS-style `&`-parent reference when defining nested selectors, updated readme w/ examples

https://thi.ng/random — added a `weightedProbability()` function to simplify dealing with arbitrarily shaped distributions (attached code example to compute the histogram & visualize results as ASCII-art is from the API docs)

As usual, please check the readmes and changelogs for more details!

#ThingUmbrella #TypeScript #JavaScript #Geometry #Intersections #CSS #MetaCSS #OpenSource

[1] https://github.com/pvolok/mprocs

#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

#OpenSource #TypeScript #JavaScript #Announcement #Boids #CSS #Reactive #UI #WebComponents #MetaCSS #RDOM