1Link.Fun 科技杂谈<p>我整理了一下vanilla js 背后的有趣故事 | what is vanilla js</p><p>不知道你有没有在网上看见过 <a href="https://techhub.social/tags/vanillajs" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>vanillajs</span></a> / vanilla HTML 这样的表述，我时不时的看见但是又不知道是什么意思，前几天又看见一个数据库产品的文档中提到 vanilla js 的使用方法，就去探索了一番。</p><p>vanilla，意思是香草，在 vanilla js 这个表述中表示 plain，standard，你可以理解成纯血原生 <a href="https://techhub.social/tags/Javascript" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Javascript</span></a>，不需要任何第三方库，只使用 JS 标准功能和语法。</p><p>我写了一篇公众号，讲述背后的有趣故事关于为什么叫这个名字，以及还有人专门给这个【 JS 库】做了一个调侃味极浓的官网。</p><p>公众号文章：<a href="https://mp.weixin.qq.com/s/KOmKDsfcwK-vHLUKHOINeg" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">mp.weixin.qq.com/s/KOmKDsfcwK-</span><span class="invisible">vHLUKHOINeg</span></a></p><p><a href="https://techhub.social/tags/1link1day" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>1link1day</span></a></p>
veganism.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
Veganism Social is a welcoming space on the internet for vegans to connect and engage with the broader decentralized social media community.
Administered by:
Server stats:
296active users
veganism.social: About · Status · Profiles directory · Privacy policy
Mastodon: About · Get the app · Keyboard shortcuts · View source code · v4.4.0-alpha.5
#vanillajs
0 posts · 0 participants · 0 posts today
xoron :verified:<p>React-like functional components, but with vanilla HTML, JS and CSS</p><p>I've often faced pushback for using <a href="https://infosec.exchange/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JavaScript</span></a> in my <a href="https://infosec.exchange/tags/Cybersecurity" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Cybersecurity</span></a> and <a href="https://infosec.exchange/tags/Cryptography" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Cryptography</span></a> projects, but I'm excited to share a concept I've been working on to demonstrate its <a href="https://infosec.exchange/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a> potential!</p><p>Introducing Dim – a new <a href="https://infosec.exchange/tags/Framework" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Framework</span></a> that brings <a href="https://infosec.exchange/tags/ReactJS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ReactJS</span></a>-like functional <a href="https://infosec.exchange/tags/JSX" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JSX</span></a>-syntax with <a href="https://infosec.exchange/tags/VanillaJS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>VanillaJS</span></a>. Check it out here:<br>🔗 Project: <a href="https://github.com/positive-intentions/dim" rel="nofollow noopener" 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" 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" 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" target="_blank">#<span>Tooling</span></a>!), coming from <a href="https://infosec.exchange/tags/ReactJS" class="mention hashtag" rel="nofollow noopener" 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" 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" 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" 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" target="_blank">#<span>ProofOfConcept</span></a> right now, with "main" <a href="https://infosec.exchange/tags/Hooks" class="mention hashtag" rel="nofollow noopener" 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" target="_blank">#<span>EncryptionAtRest</span></a>. (Note: <a href="https://infosec.exchange/tags/StateManagement" class="mention hashtag" rel="nofollow noopener" 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" target="_blank">#<span>Passwordless</span></a> options like <a href="https://infosec.exchange/tags/WebAuthn" class="mention hashtag" rel="nofollow noopener" 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" 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" 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" 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" target="_blank">#<span>Unstable</span></a>, so expect <a href="https://infosec.exchange/tags/BreakingChanges" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>BreakingChanges</span></a>. I've already received valuable <a href="https://infosec.exchange/tags/Feedback" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Feedback</span></a> on some functions regarding <a href="https://infosec.exchange/tags/Security" class="mention hashtag" rel="nofollow noopener" 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" target="_blank">#<span>FrontendDev</span></a> <a href="https://infosec.exchange/tags/JSFramework" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JSFramework</span></a> <a href="https://infosec.exchange/tags/Innovation" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Innovation</span></a> <a href="https://infosec.exchange/tags/Coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Coding</span></a> <a href="https://infosec.exchange/tags/Programmer" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Programmer</span></a> <a href="https://infosec.exchange/tags/Tech" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Tech</span></a></p>
🌧️ jschof 🌼<p>Does anyone have good reading on how major frameworks make their SPA url router? I'm not talking about a hash router, I'd like to see how (with the server configured properly) the JS handles all the things (history pop state changes, link clicks, etc)</p><p><a href="https://c.im/tags/javascript" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>javascript</span></a> <a href="https://c.im/tags/vanillajs" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>vanillajs</span></a> <a href="https://c.im/tags/webcomponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webcomponents</span></a></p>
Tane Piper ⁂<p>Teskoanno is now live! My <a href="https://tane.codes/tags/threejs" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>threejs</span></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.</p><p>Would love to get <a href="https://tane.codes/tags/feedback" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>feedback</span></a> </p><p><a href="https://tanepiper.github.io/teskooano/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">tanepiper.github.io/teskooano/</span><span class="invisible"></span></a></p><p><a href="https://tane.codes/tags/gamedev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>gamedev</span></a> <a href="https://tane.codes/tags/astronomy" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>astronomy</span></a> <a href="https://tane.codes/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://tane.codes/tags/webComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webComponents</span></a> <a href="https://tane.codes/tags/vanillaJS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>vanillaJS</span></a> <a href="https://tane.codes/tags/opensource" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>opensource</span></a> </p><p>(Bonus debug tools screenshot)</p>
postmodern<p>Is there a suite of vanilla JS web components implemented as classes somewhere on <a href="https://npmjs.org" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">npmjs.org</span><span class="invisible"></span></a>? Like, what if I want a Dark Mode switch or a tags input field with auto-complete that I can import (via import maps, of course), is there a project or namespace where I could find those?</p><p><a href="https://ruby.social/tags/vanillajs" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>vanillajs</span></a> <a href="https://ruby.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webcomponents</span></a> <a href="https://ruby.social/tags/npm" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>npm</span></a> <a href="https://ruby.social/tags/javascript" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>javascript</span></a></p>
VegansExploreLive feeds
Mastodon is the best way to keep up with what's happening.
Follow anyone across the fediverse and see it all in chronological order. No algorithms, ads, or clickbait in sight.
Create accountLoginDrag & drop to upload