xoron :verified:<p>React-like functional webcomponents, but with vanilla HTML, JS and CSS</p><p>Introducing Dim – a new <a href="https://infosec.exchange/tags/Framework" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Framework</span></a> that brings <a href="https://infosec.exchange/tags/ReactJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ReactJS</span></a>-like functional <a href="https://infosec.exchange/tags/JSX" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JSX</span></a>-syntax with <a href="https://infosec.exchange/tags/VanillaJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>VanillaJS</span></a>. Check it out here:<br>🔗 Project: <a href="https://github.com/positive-intentions/dim" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/positive-intentions</span><span class="invisible">/dim</span></a><br>🔗 Website: <a href="https://dim.positive-intentions.com" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">dim.positive-intentions.com</span><span class="invisible"></span></a></p><p>My journey with <a href="https://infosec.exchange/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebComponents</span></a> started with Lit, and while I appreciated its native browser support (less <a href="https://infosec.exchange/tags/Tooling" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Tooling</span></a>!), coming from <a href="https://infosec.exchange/tags/ReactJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ReactJS</span></a>, the class components felt like a step backward. The <a href="https://infosec.exchange/tags/FunctionalProgramming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>FunctionalProgramming</span></a> approach in React significantly improved my <a href="https://infosec.exchange/tags/DeveloperExperience" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>DeveloperExperience</span></a> and debugging flow.</p><p>So, I set out to build a thin, functional wrapper around <a href="https://infosec.exchange/tags/Lit" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Lit</span></a>, and Dim is the result! It's a <a href="https://infosec.exchange/tags/ProofOfConcept" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ProofOfConcept</span></a> right now, with "main" <a href="https://infosec.exchange/tags/Hooks" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Hooks</span></a> similar to React, plus some custom ones like useStore for <a href="https://infosec.exchange/tags/EncryptionAtRest" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>EncryptionAtRest</span></a>. (Note: <a href="https://infosec.exchange/tags/StateManagement" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>StateManagement</span></a> for encryption-at-rest is still unstable and currently uses a hardcoded password while I explore <a href="https://infosec.exchange/tags/Passwordless" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Passwordless</span></a> options like <a href="https://infosec.exchange/tags/WebAuthn" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebAuthn</span></a>/#Passkeys).</p><p>You can dive deeper into the <a href="https://infosec.exchange/tags/Documentation" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Documentation</span></a> and see how it works here:<br>📚 Dim Docs: <a href="https://positive-intentions.com/docs/category/dim" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">positive-intentions.com/docs/c</span><span class="invisible">ategory/dim</span></a></p><p>This <a href="https://infosec.exchange/tags/OpenSource" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>OpenSource</span></a> project is still in its early stages and very <a href="https://infosec.exchange/tags/Unstable" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Unstable</span></a>, so expect <a href="https://infosec.exchange/tags/BreakingChanges" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>BreakingChanges</span></a>. I've already received valuable <a href="https://infosec.exchange/tags/Feedback" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Feedback</span></a> on some functions regarding <a href="https://infosec.exchange/tags/Security" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Security</span></a>, and I'm actively investigating those. I'm genuinely open to all feedback as I continue to develop it!</p><p><a href="https://infosec.exchange/tags/FrontendDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>FrontendDev</span></a> <a href="https://infosec.exchange/tags/JSFramework" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JSFramework</span></a> <a href="https://infosec.exchange/tags/Innovation" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Innovation</span></a> <a href="https://infosec.exchange/tags/Coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Coding</span></a> <a href="https://infosec.exchange/tags/Programmer" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Programmer</span></a> <a href="https://infosec.exchange/tags/Tech" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Tech</span></a></p>