Karsten Schmidt<p><a href="https://mastodon.thi.ng/tags/HowToThing" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HowToThing</span></a> #023 — Responsive &amp; reactive image gallery with tag-based Jaccard similarity ranking/filtering using <a href="https://thi.ng/bitfield" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">thi.ng/bitfield</span><span class="invisible"></span></a>, <a href="https://thi.ng/rstream" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">thi.ng/rstream</span><span class="invisible"></span></a> &amp; <a href="https://thi.ng/rdom" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">thi.ng/rdom</span><span class="invisible"></span></a></p><p>A quite common comment about <a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ThingUmbrella</span></a> is that people often have little idea what some of the ~185 packages are even good/intended for and/or how to synthesize solutions from these small, individual building blocks. IMHO this is less about these packages themselves and more down to existing blank spots about the underlying concepts, algorithms and their potential role/utility in a larger problem domain... So I very much hope this new example is also useful in this respect!</p><p>Alas, the full code for this got pretty long and contains a lot more UI stuff. I'm intending to develop this further for the new homepage to browse all ~135 <a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ThingUmbrella</span></a> examples (and maybe even for parts of the <a href="https://thi.ng" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">thi.ng</span><span class="invisible"></span></a> website itself)... For those of you interested in more "advanced" <a href="https://thi.ng/rdom" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">thi.ng/rdom</span><span class="invisible"></span></a> examples, do check it out!</p><p>Background info:<br><a href="https://en.wikipedia.org/wiki/Jaccard_index" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">en.wikipedia.org/wiki/Jaccard_</span><span class="invisible">index</span></a></p><p>Demo:<br><a href="https://demo.thi.ng/umbrella/related-images/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">demo.thi.ng/umbrella/related-i</span><span class="invisible">mages/</span></a></p><p>Full source code:<br><a href="https://github.com/thi-ng/umbrella/tree/develop/examples/related-images/src/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/thi-ng/umbrella/tre</span><span class="invisible">e/develop/examples/related-images/src/</span></a></p><p>The important parts re: using compact binary encoding, bitfields &amp; Jaccard similarity to find related items are here:</p><p><a href="https://github.com/thi-ng/umbrella/blob/fc5db1c7a2b9083b40e9be5d6002db937b5a8267/examples/related-images/src/data.ts#L191-L225" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/thi-ng/umbrella/blo</span><span class="invisible">b/fc5db1c7a2b9083b40e9be5d6002db937b5a8267/examples/related-images/src/data.ts#L191-L225</span></a></p><p><a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ThingUmbrella</span></a> <a href="https://mastodon.thi.ng/tags/Tagging" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Tagging</span></a> <a href="https://mastodon.thi.ng/tags/Statistics" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Statistics</span></a> <a href="https://mastodon.thi.ng/tags/Similarity" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Similarity</span></a> <a href="https://mastodon.thi.ng/tags/Ranking" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Ranking</span></a> <a href="https://mastodon.thi.ng/tags/Bitfield" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Bitfield</span></a> <a href="https://mastodon.thi.ng/tags/TypeScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>TypeScript</span></a> <a href="https://mastodon.thi.ng/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JavaScript</span></a> <a href="https://mastodon.thi.ng/tags/UI" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>UI</span></a> <a href="https://mastodon.thi.ng/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Frontend</span></a> <a href="https://mastodon.thi.ng/tags/Reactive" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Reactive</span></a> <a href="https://mastodon.thi.ng/tags/Tutorial" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Tutorial</span></a></p>