toxi, to CSS
@toxi@mastodon.thi.ng avatar

Today's features a major update for the https://thi.ng/meta-css toolchain, a data-driven codegen for creating custom modular CSS frameworks, incl. transpiler, bundler, dev/watch mode...

The new version supports callable parametric templates, which not only help to reduce the overall API surface (i.e. the total number of rules) of a generated CSS framework, but also enable advanced operations like those shown in the attached images (e.g. declarations of CSS color variables (in rgb, hsl, lch, or oklch modes) and pure CSS color per-color-channel adjustments...).

Also new, is added support for documentation metadata for all generative CSS class & template specs (incl. template params). Parts of the readme are generated from these embedded docs and the next version will include a new CLI command to generate Markdown files from/for these CSS docs...

The readme for this package is already pretty detailed by now and should cover most important patterns and usage (incl. the new template features). Take a look (also the examples linked from the readme)!

https://github.com/thi-ng/umbrella/blob/develop/packages/meta-css/README.md

Transpiled resulting CSS of the MetaCSS declerations in the previous image, showing the expanded variable definitions and calculations to create the derived color... CSS source code: :root { --link-color-luma: 80%; --link-color-chroma: 100%; --link-color-hue: 0; --link-color-alpha: 1; --link-color: oklch( var(--link-color-luma) var(--link-color-chroma) var(--link-color-hue) / var(--link-color-alpha) ); } a:link, a:visited { color: var(--link-color); } a:hover { color: oklch( calc(var(--link-color-luma) * 1) calc(var(--link-color-chroma) * 0.8) calc(var(--link-color-hue) + 180) / calc(var(--link-color-alpha) * 1) ); }

toxi, to opensource
@toxi@mastodon.thi.ng avatar

Btw. It was also yesterday and as a direct & immediate result from a good criticism received via the community survey, I've updated all 350+ code snippets in 275+ source files/docs of all 190 https://thi.ng/umbrella libraries. Each snippet now includes imports for all functions/constants used, incl. those from other packages (if there are)... The updated docs have also been published on https://docs.thi.ng/. Hope that helps! If you do run into any mistakes & omissions, please get in touch! 🙏

Obviously, this doesn't fix other issues with the docs, but many of them are the result of other fundamental issues with TypeDoc & TypeScript's language server (e.g. treating arrow functions and/or functions annotated with type aliases as 3rd class citizens). I do not have the bandwidth to re-organize a massive project like this around the quirks/bugs of 3rd party infrastructure, but I'm always open to suggestions for how the situ can be improved... Many times I've been pondering and even starting work on a custom doc generator (incl. a ton more metadata, diagrams, cross-references, links to related functions [in other packages]), but I just cannot justify working on this at this stage...

toxi, to typescript
@toxi@mastodon.thi.ng avatar

🚀 Just pushed new versions with new features in the following packages:

https://thi.ng/rdom — Pre-existing DOM elements can now be part of a component tree given to $compile(). Such elements will be attached to the correct parent node at mount time (i.e. useful for pre-loaded images or canvases)

http://thi.ng/pixel — Added size/area checks for .getRegion(), returning undefined if target region is small than 1 pixel

http://thi.ng/color — Updated temperatureMat() to accept 2 params, i.e. to control blue/yellow and green/magenta tint

Also added a new example (see follow up toot) and added features to some existing ones:

https://demo.thi.ng/umbrella/scenegraph-image/ — Added bicubic sub-pixel sampling for much smoother image-based geometry displacements

https://demo.thi.ng/umbrella/pixel-colormatrix/ — Added new color temperature controls and A/B split preview (click & drag canvas to adjust split position, only visible once there're adjustments...)

  • All
  • Subscribed
  • Moderated
  • Favorites
  • megavids
  • thenastyranch
  • rosin
  • GTA5RPClips
  • osvaldo12
  • love
  • Youngstown
  • slotface
  • khanakhh
  • everett
  • kavyap
  • mdbf
  • DreamBathrooms
  • ngwrru68w68
  • provamag3
  • magazineikmin
  • InstantRegret
  • normalnudes
  • tacticalgear
  • cubers
  • ethstaker
  • modclub
  • cisconetworking
  • Durango
  • anitta
  • Leos
  • tester
  • JUstTest
  • All magazines