Karsten Schmidt<p>Some previews of recent <a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ThingUmbrella</span></a> updates/additions:</p><p>1) The declarative & fully typed CLI arg parser <a href="https://thi.ng/args" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">thi.ng/args</span><span class="invisible"></span></a> now has a nice `cliApp()` wrapper (also largely declarative), supporting multiple sub-commands (with shared and command-specific args/options), automated usage generation, <a href="https://no-color.org" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">no-color.org</span><span class="invisible"></span></a> support/detection. Still doing more testing with various CLI tools of mine (from which this all has been extracted), but planning to release in next couple of days...</p><p>2) People who've been following the project will know that for years I've been a big fan of Tachyons CSS[1], which is pretty much used for all ~150 examples in the repo. As nice as it is, it's also unmaintained by now and there're various more modern features missing (e.g. grids) and there're also general issues with the overall approach. Switching to Tailwind would mean having to install a whole boatload of additional tooling so is anathema and also doesn't address some of the features I've been wanting to explore: E.g. Generating entire CSS frameworks from a bunch of wildly combinatorial rules, options & lookup tables, keeping literally _everything_ customizable, combinable and purely data-driven (i.e. generated from a JSON file). Similar to Tachyons CSS, these custom generated frameworks are based on standalone CSS utility classes (hence the original particle-inspired naming). However, I'm aiming for a different usage and instead of assigning them directly to an HTML element's `class` attrib, here we can assign them to (nested) CSS selectors to define fully inlined declarations. The additional killer feature is that each of these classes can be prefixed with an arbitrary number of freely defined media queries and thus making it trivial to add additional responsive/accesible features and _without_ requiring megabytes of raw CSS to cover the combinatorial explosion!</p><p>For the past few days I've been trialling this new approach and I very much like where this is going... Take a look at the basic example in the new <a href="https://thi.ng/meta-css" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">thi.ng/meta-css</span><span class="invisible"></span></a> package & readme. I will also write more about this in coming days. All in all, it's another example where code generation and a domain specific language approach is super powerful again... limits of my world and such...</p><p>Also, speaking of bloatware (earlier above), the entire toolchain (incl. CLI & all dependent packages) is a mere 21KB (minified) and it already can do a ton!</p><p><a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ThingUmbrella</span></a> <a href="https://mastodon.thi.ng/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.thi.ng/tags/CLI" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CLI</span></a> <a href="https://mastodon.thi.ng/tags/DSL" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DSL</span></a> <a href="https://mastodon.thi.ng/tags/TypeScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>TypeScript</span></a> <a href="https://mastodon.thi.ng/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JavaScript</span></a> <a href="https://mastodon.thi.ng/tags/CodeGeneration" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodeGeneration</span></a></p>