Shakedown Social

0 posts0 participants0 posts today

xoron :verified:React-like functional webcomponents, but with vanilla HTML, JS and CSSIntroducing Dim – a new <a href="https://infosec.exchange/tags/Framework" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Framework</a> that brings <a href="https://infosec.exchange/tags/ReactJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ReactJS</a>-like functional <a href="https://infosec.exchange/tags/JSX" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JSX</a>-syntax with <a href="https://infosec.exchange/tags/VanillaJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#VanillaJS</a>. Check it out here: 🔗 Project: <a href="https://github.com/positive-intentions/dim" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://github.com/positive-intentions/dim</a> 🔗 Website: <a href="https://dim.positive-intentions.com" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://dim.positive-intentions.com</a>My journey with <a href="https://infosec.exchange/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebComponents</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">#Tooling</a>!), coming from <a href="https://infosec.exchange/tags/ReactJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ReactJS</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">#FunctionalProgramming</a> approach in React significantly improved my <a href="https://infosec.exchange/tags/DeveloperExperience" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DeveloperExperience</a> and debugging flow.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">#Lit</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">#ProofOfConcept</a> right now, with "main" <a href="https://infosec.exchange/tags/Hooks" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Hooks</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">#EncryptionAtRest</a>. (Note: <a href="https://infosec.exchange/tags/StateManagement" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#StateManagement</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">#Passwordless</a> options like <a href="https://infosec.exchange/tags/WebAuthn" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebAuthn</a>/#Passkeys).You can dive deeper into the <a href="https://infosec.exchange/tags/Documentation" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Documentation</a> and see how it works here: 📚 Dim Docs: <a href="https://positive-intentions.com/docs/category/dim" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://positive-intentions.com/docs/category/dim</a>This <a href="https://infosec.exchange/tags/OpenSource" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#OpenSource</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">#Unstable</a>, so expect <a href="https://infosec.exchange/tags/BreakingChanges" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#BreakingChanges</a>. I've already received valuable <a href="https://infosec.exchange/tags/Feedback" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Feedback</a> on some functions regarding <a href="https://infosec.exchange/tags/Security" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Security</a>, and I'm actively investigating those. I'm genuinely open to all feedback as I continue to develop it!<a href="https://infosec.exchange/tags/FrontendDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#FrontendDev</a> <a href="https://infosec.exchange/tags/JSFramework" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JSFramework</a> <a href="https://infosec.exchange/tags/Innovation" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Innovation</a> <a href="https://infosec.exchange/tags/Coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Coding</a> <a href="https://infosec.exchange/tags/Programmer" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Programmer</a> <a href="https://infosec.exchange/tags/Tech" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Tech</a>

Tane Piper ⁂Teskoanno is now live! My <a href="https://tane.codes/tags/threejs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#threejs</a> powered 3D N-Body simulator is now up - it's a dev build, and not optimised but it works! I tested it on mobile - UI needs to work, but runs well on my Pixel 8 Pro.Would love to get <a href="https://tane.codes/tags/feedback" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#feedback</a> <a href="https://tanepiper.github.io/teskooano/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://tanepiper.github.io/teskooano/</a><a href="https://tane.codes/tags/gamedev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#gamedev</a> <a href="https://tane.codes/tags/astronomy" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#astronomy</a> <a href="https://tane.codes/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://tane.codes/tags/webComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webComponents</a> <a href="https://tane.codes/tags/vanillaJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#vanillaJS</a> <a href="https://tane.codes/tags/opensource" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#opensource</a> (Bonus debug tools screenshot)

David L Schafer 🥭I have the opportunity to do a redesign of a very large site that I built about 5 years ago and have maintained since. Looking to brush up on the newer <a href="https://ohai.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> / <a href="https://ohai.social/tags/JS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JS</a> that’s available to me for <a href="https://ohai.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a>. The current site was built with <a href="https://ohai.social/tags/JQuery" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JQuery</a> and <a href="https://ohai.social/tags/flexbox" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#flexbox</a> was not even an option at the time. Would love to move to <a href="https://ohai.social/tags/vanillaJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#vanillaJS</a> for most things and get the most out of flexbox that I can.Looking for good resources, if anyone knows of any.

Kyle Leaders (Open To Work)I have to say I've been actually enjoying working with <a href="https://fosstodon.org/tags/webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webcomponents</a> in <a href="https://fosstodon.org/tags/vanillajs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#vanillajs</a> lately. I haven't attempted anything too complicated, but I love the idea of reusable components. Next up, I need to figure out how to best do reactive updates.<a href="https://fosstodon.org/tags/javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#javascript</a> <a href="https://fosstodon.org/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a>

Alchemy CMSIt's exciting to see how far one can get with <a href="https://ruby.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webcomponents</a> (custom elements) and <a href="https://ruby.social/tags/vanillajs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#vanillajs</a> nowadays. If you want to follow what <a href="https://toot.cafe/@_web_" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@_web_</a> is doing rewriting old <a href="https://ruby.social/tags/coffeescript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coffeescript</a> and <a href="https://ruby.social/tags/jquery" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#jquery</a> based JS into modern <a href="https://ruby.social/tags/es6" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#es6</a> just keep an eye on latest PRs of the 7.1 milestone<a href="https://github.com/AlchemyCMS/alchemy_cms/pulls?q=is%3Apr+author%3Asascha-karnatz+milestone%3A7.1" rel="nofollow noopener noreferrer" target="_blank">https://github.com/AlchemyCMS/alchemy_cms/pulls?q=is%3Apr+author%3Asascha-karnatz+milestone%3A7.1</a>🙏🏻👏🏻

Recent searches

Search options

Administered by:

Server stats:

#vanillajs