Shakedown Social

0 posts0 participants0 posts today

Karsten Schmidt<a href="https://mastodon.thi.ng/tags/ReleaseMonday" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ReleaseMonday</a> — One of the recent (already very useful!) new package additions to <a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ThingUmbrella</a> is:<a href="https://thi.ng/leaky-bucket" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://thi.ng/leaky-bucket</a>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 <a href="https://thi.ng/server" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://thi.ng/server</a> to utilize this new package...<a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ThingUmbrella</a> <a href="https://mastodon.thi.ng/tags/DataStructure" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DataStructure</a> <a href="https://mastodon.thi.ng/tags/RateLimiting" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#RateLimiting</a> <a href="https://mastodon.thi.ng/tags/OpenSource" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#OpenSource</a> <a href="https://mastodon.thi.ng/tags/TypeScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#TypeScript</a> <a href="https://mastodon.thi.ng/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a>

Karsten SchmidtWhat follows <a href="https://mastodon.thi.ng/tags/ReleaseSunday" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ReleaseSunday</a>? <a href="https://mastodon.thi.ng/tags/ReleaseMonday" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ReleaseMonday</a> of course!The new additions are mainly what was mentioned in my previous toots of the past 24h:<a href="https://thi.ng/color" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://thi.ng/color</a> Configurable CSS default conversions/serializations (e.g. `CSS_LEVEL3` [initial default] vs `CSS_LEVEL4` [supported])<a href="https://thi.ng/transducers" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://thi.ng/transducers</a> Added `syncTuples()` transducer, a useful companion (post-processing step) for `multiplex()` transformation pipelines<a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ThingUmbrella</a> <a href="https://mastodon.thi.ng/tags/OpenSource" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#OpenSource</a> <a href="https://mastodon.thi.ng/tags/TypeScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#TypeScript</a>

Karsten Schmidt<a href="https://mastodon.thi.ng/tags/ReleaseMonday" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ReleaseMonday</a> 🚀 — Still warm from uploading, this round includes notable updates to these package (updated/fixed code examples in the readme's), in A-Z order:<a href="https://thi.ng/hiccup-canvas" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://thi.ng/hiccup-canvas</a> — fixed vertex memory layout attrib handling for packed polygons/polylines (mainly of interest for WASM interop)<a href="https://thi.ng/logger" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://thi.ng/logger</a> — 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...<a href="https://thi.ng/mime" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://thi.ng/mime</a> — updated to latest snapshot of mime-db, update vendor prefixed overrides, add isCompressible() predicate<a href="https://thi.ng/ramp" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://thi.ng/ramp</a> — updated/extended vector type interpolation, now truly supports n-dimensional vectors (previously only 2d/3d/4d)<a href="https://thi.ng/text-canvas" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://thi.ng/text-canvas</a> — 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: <a href="https://thi.ng/umbrella" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://thi.ng/umbrella</a>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] <a href="https://mastodon.thi.ng/@toxi/111957681302985179" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://mastodon.thi.ng/@toxi/111957681302985179</a> [2] <a href="https://forms.gle/XacbSDEmQMPZg8197" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://forms.gle/XacbSDEmQMPZg8197</a>

Karsten Schmidt🚀 <a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ThingUmbrella</a> <a href="https://mastodon.thi.ng/tags/ReleaseMonday" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ReleaseMonday</a> with new, just released functionality:The parameter tweening/animation package <a href="https://thi.ng/ramp" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://thi.ng/ramp</a> 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: <a href="https://demo.thi.ng/umbrella/ramp-scroll-anim/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://demo.thi.ng/umbrella/ramp-scroll-anim/</a>Source code: <a href="https://github.com/thi-ng/umbrella/blob/develop/examples/ramp-scroll-anim/src/index.ts" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://github.com/thi-ng/umbrella/blob/develop/examples/ramp-scroll-anim/src/index.ts</a><a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ThingUmbrella</a> <a href="https://mastodon.thi.ng/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.thi.ng/tags/Tween" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Tween</a> <a href="https://mastodon.thi.ng/tags/Animation" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Animation</a> <a href="https://mastodon.thi.ng/tags/Transition" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Transition</a> <a href="https://mastodon.thi.ng/tags/Reactive" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Reactive</a> <a href="https://mastodon.thi.ng/tags/TypeScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#TypeScript</a> <a href="https://mastodon.thi.ng/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a> <a href="https://mastodon.thi.ng/tags/UI" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#UI</a>

Karsten SchmidtSo <a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ThingUmbrella</a> <a href="https://mastodon.thi.ng/tags/ReleaseMonday" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ReleaseMonday</a>: Today's release is the first time all 186 packages have been built using <a href="https://esbuild.github.io" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://esbuild.github.io</a> 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 <a href="https://thi.ng/msgpack" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://thi.ng/msgpack</a>, a serializer/deserializer for the <a href="https://msgpack.org/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://msgpack.org/</a> format, which I've been using for various things, incl. the <a href="https://thi.ng/umbrella" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://thi.ng/umbrella</a> repo-wide doc search index (UI & hosting location to be urgently updated/improved):<a href="https://demo.thi.ng/umbrella/rdom-search-docs/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://demo.thi.ng/umbrella/rdom-search-docs/</a>Also new: <a href="https://thi.ng/rdom-forms" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://thi.ng/rdom-forms</a>, a data-driven, declarative & extensible HTML form generator based around <a href="https://thi.ng/hiccup-html" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://thi.ng/hiccup-html</a> & <a href="https://thi.ng/rdom" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://thi.ng/rdom</a>. 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).<a href="https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-formgen" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-formgen</a>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...<a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ThingUmbrella</a> <a href="https://mastodon.thi.ng/tags/OpenSource" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#OpenSource</a> <a href="https://mastodon.thi.ng/tags/TypeScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#TypeScript</a> <a href="https://mastodon.thi.ng/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a> <a href="https://mastodon.thi.ng/tags/esbuild" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#esbuild</a>

Karsten SchmidtEven though <a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ThingUmbrella</a> 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 <a href="https://esbuild.github.io" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://esbuild.github.io</a> for building and <a href="https://bun.sh" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://bun.sh</a> 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:<a href="https://github.com/thi-ng/umbrella" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://github.com/thi-ng/umbrella</a>Ps. It's also <a href="https://mastodon.thi.ng/tags/ReleaseMonday" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ReleaseMonday</a>. Details about that in a later post... 🫡<a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ThingUmbrella</a> <a href="https://mastodon.thi.ng/tags/Optimization" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Optimization</a> <a href="https://mastodon.thi.ng/tags/CI" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CI</a> <a href="https://mastodon.thi.ng/tags/BuildTools" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#BuildTools</a> <a href="https://mastodon.thi.ng/tags/EnergyConsumption" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#EnergyConsumption</a> <a href="https://mastodon.thi.ng/tags/TypeScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#TypeScript</a> <a href="https://mastodon.thi.ng/tags/esbuild" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#esbuild</a> <a href="https://mastodon.thi.ng/tags/Bun" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Bun</a> <a href="https://mastodon.thi.ng/tags/Monorepo" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Monorepo</a> <a href="https://mastodon.thi.ng/tags/OpenSource" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#OpenSource</a> <a href="https://mastodon.thi.ng/tags/GitHub" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#GitHub</a>

Karsten Schmidt<a href="https://mastodon.thi.ng/tags/HowToThing" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HowToThing</a> #028 — Randomized, space-filling, nested 2D grid layout generator using <a href="https://thi.ng/layout" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://thi.ng/layout</a> & <a href="https://thi.ng/transducers" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://thi.ng/transducers</a>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): <a href="https://demo.thi.ng/umbrella/layout-gridgen/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://demo.thi.ng/umbrella/layout-gridgen/</a>Source code: <a href="https://github.com/thi-ng/umbrella/blob/develop/examples/layout-gridgen/src/index.ts" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://github.com/thi-ng/umbrella/blob/develop/examples/layout-gridgen/src/index.ts</a>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):<a href="https://github.com/thi-ng/umbrella/discussions" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://github.com/thi-ng/umbrella/discussions</a>Ps. It's also <a href="https://mastodon.thi.ng/tags/ReleaseMonday" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ReleaseMonday</a> — check main <a href="https://thi.ng/umbrella" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://thi.ng/umbrella</a> readme for latest updates/changelogs... 🚀[1] <a href="https://mastodon.thi.ng/@toxi/111317359454947648" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://mastodon.thi.ng/@toxi/111317359454947648</a><a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ThingUmbrella</a> <a href="https://mastodon.thi.ng/tags/Grid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Grid</a> <a href="https://mastodon.thi.ng/tags/Layout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Layout</a> <a href="https://mastodon.thi.ng/tags/GenerativeDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#GenerativeDesign</a> <a href="https://mastodon.thi.ng/tags/GenerativeArt" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#GenerativeArt</a> <a href="https://mastodon.thi.ng/tags/TypeScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#TypeScript</a> <a href="https://mastodon.thi.ng/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a> <a href="https://mastodon.thi.ng/tags/GUI" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#GUI</a> <a href="https://mastodon.thi.ng/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Frontend</a> <a href="https://mastodon.thi.ng/tags/Tutorial" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Tutorial</a>

Recent searches

Search options

Administered by:

Server stats:

#releasemonday