یک کتابخانهٔ متن‌باز از کامپوننت‌های Vue ۳ برای بصری‌سازی داده که کاربران را توانمند می‌کند و برای روایت بیانی، روان و مؤثرِ داده‌ها طراحی شده است.

🔗https://vue-data-ui.graphieros.com/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

یک ماژول برای برنامه‌های Nuxt.
وظیفهٔ آن این است که به توسعه‌دهنده کمک کند تا نکات و هشدارهای مرتبط با عملکرد، دسترس‌پذیری (A11Y)، امنیت و دیگر جنبه‌های مهم برنامه را مشاهده کند.
این ماژول در DevTools مربوط به Nuxt ادغام می‌شود و یک پنل بصری ارائه می‌دهد که در آن می‌توان دید چه چیزی ضعیف عمل می‌کند، کجا کندی وجود دارد، بار روی کدام بخش است و موارد مشابه.


🔗https://github.com/nuxt/hints
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

یک چیز پیدا کردم که واقعاً شگفت‌انگیز است. باز هم یک شاهکار دیگر با Shadow DOM — این بار یک فرازبانی برای توصیف الگوها.

خلاصه اینکه می‌توان پس‌زمینه‌های فوق‌العاده ساخت، بدون آنکه خود را به قابلیت‌های گرادیانت‌های معمول محدود کنید.

اسم این ابزار <css-doodle/> است.

در آن می‌توانید الگوی دلخواه‌تان را با استفاده از قوانین CSS و یک‌سری توابع ساده مثل flip، reverse، shape، random و غیره توصیف کنید؛ یک زبان کاملاً اعلامی و قدرتمند.

نمونه‌های بسیار زیاد، جامعهٔ بزرگ. مثلاً خود نویسنده توضیح داده چطور می‌توان یک نقش کلاسیک چینی را فقط با توابع flip–invert–reverse ساخت.

در کل، ابزار واقعاً شگفت‌انگیزی است.


🔗https://css-doodle.com/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

اگر یک جدول را از مرورگر کپی کنید، می‌توانید آن را مستقیم در Excel یا Google Sheets جای‌گذاری کنید و همه چیز مثل یک محدودهٔ واقعی کار خواهد کرد.

اما مسیر برعکس کار نمی‌کند: اگر داده‌ای را از Google Sheets کپی کنید و بخواهید در مرورگر بچسبانید، جدول به متن ساده تبدیل می‌شود و همهٔ ساختارش از بین می‌رود.

این موضوع گاهی مشکل‌ساز است، مخصوصاً وقتی:

یک فرم با چندین فیلد دارید که شبیه جدول است،

داده‌های شما در Google Sheets هستند،

و تنها هدف شما این است که بدون تایپ کردن تک‌تک خانه‌ها، همهٔ داده‌ها را وارد فرم کنید.

راه‌حل: شنود رویداد جای‌گذاری و توزیع خودکار داده‌ها

می‌توان با جاوااسکریپت یک listener روی رویداد paste اضافه کرد و داده‌های کپی‌شده را از کلیپ‌بورد خواند، سپس آن‌ها را به ترتیب در فیلدهای فرم قرار داد. نمونهٔ ساده:

document.addEventListener("paste", function (e) {
  // گرفتن داده‌ها از کلیپ‌بورد
  const text = e.clipboardData.getData("text");
  
  // تبدیل متن به آرایهٔ دو بعدی: سطرها و ستون‌ها
  const rows = text.trim().split(/\r?\n/).map(r => r.split("\t"));

  // گرفتن همهٔ inputهای فرم
  const inputs = [...document.querySelectorAll("input")]; 
  let index = 0;

  // پر کردن inputها به ترتیب داده‌ها
  for (const row of rows) {
    for (const cell of row) {
      if (inputs[index]) {
        inputs[index].value = cell;
        index++;
      }
    }
  }

  // جلوگیری از رفتار پیش‌فرض مرورگر
  e.preventDefault();
});

نتیجهٔ کار

با این کد:

می‌توانید یک محدوده از Google Sheets را کپی کنید،

سپس با Ctrl+V در مرورگر بچسبانید،

و داده‌ها به‌صورت خودکار در فیلدهای فرم پخش می‌شوند، درست مانند کاری که Excel انجام می‌دهد.

به عبارتی، تجربهٔ کاربر مثل تجربهٔ Excel یا Sheets خواهد بود و نیازی به وارد کردن تک‌تک سلول‌ها نیست.

نمونه عملی

می‌توانید نمونهٔ آماده را اینجا مشاهده کنید:

🔗https://codepen.io/alinaki/pen/KwzvEeX
#️⃣#code
👥@IR_javascript_group
🆔@IR_javascript

Perspective 4.0

مولفه تحلیل داده و تجسم داده با عملکرد بالا
(وب‌سایت رسمی: https://perspective-dev.github.io/)

در ابتدا توسط شرکت جی‌پی مورگان ساخته شده، این مولفه تجسم داده که با زبان ++C توسعه یافته و به WebAssembly کامپایل شده، برای مجموعه‌داده‌های بزرگ و جریانی در زمان واقعی بسیار مناسب است. در نسخه‌ی نمایشی صفحه‌ی اصلی، می‌توانید انواع تجسم را با سرعت تا ۱۰۰۰ تغییر در ثانیه آزمایش کنید.


#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

به دنبال مجازی‌سازی معقول و مدرنِ لیست‌ها هستید؟
اگر این حرف‌ برایتان ناگهانی بود و دقیقاً نمی‌دانید درباره‌ی چه سخن می‌گوییم، خلاصه‌ی ساده‌اش این است: برای این‌که بتوان از میان هزاران یا صدها هزار آیتم اسکرول کرد، اصلاً لازم نیست همه‌ی آن‌ها یک‌باره رندر شوند. کافی است فقط حدود ده تا بیست سطر رندر شود تا صفحه پر شود،

کتابخانهٔ مجازی‌سازی لیست‌ها virtua
این کتابخانه:

پشتیبانی از ارتفاع پویا برای آیتم‌ها به‌صورت پیش‌فرض؛

اسکرول بی‌نهایت؛

قابلیت اشغال کامل ارتفاع پنجره؛

پشتیبانی از RSC؛

و فقط محدود به React نیست — Vue، Solid و Svelte را هم پوشش می‌دهد.

راه‌حلی مدرن، تمیز و واقعاً شایستهٔ توجه.

🔗https://github.com/inokawa/virtua
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

ابزاری تعاملی برای نمایش و کنترل داده‌ها در محور زمان است؛ دقیقاً مشابه نمونه‌ای که در تصویر دیده می‌شود. این کتابخانه برای مصورسازی تاریخ‌ها


🔗https://visjs.github.io/vis-timeline/examples/timeline/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

ویدیو دوبله شده در مورد CI/CD

#️⃣#tip #dub
👥@IR_javascript_group
🆔@IR_javascript

استفاده از ARIA برای هوش مصنوعی

یک ماه پیش، OpenAI مرورگر اختصاصی خود با نام ChatGPT Atlas را معرفی کرد (https://openai.com/index/introducing-chatgpt-atlas/
). این مرورگر بر پایهٔ پلتفرم Chromium ساخته شده و دارای ChatGPT داخلی و یک عامل (Agent) است که می‌تواند در وب‌سایت‌ها پیمایش کند و کارهای کاربران را در آن‌ها انجام دهد.
اوپن‌اِی‌آی پیشنهاد کرده است که توسعه‌دهندگان برای بهبود عملکرد عامل Atlas در تعامل با وب‌سایت‌ها، «تگ‌های ARIA» اضافه کنند. از این بگذریم که آن‌ها به جای «attributes» از واژهٔ «tags» استفاده کرده‌اند که می‌تواند نشانه‌ای از ناآشنایی با استاندارد ARIA باشد.
در حال حاضر سهم Atlas در بازار بسیار ناچیز است و بعید است به این زودی‌ها سهم بزرگی به خود بگیرد. بنابراین احتمال ایجاد موج توجه و هجوم توسعه‌دهندگان برای افزودن ARIA «به‌خاطر هوش مصنوعی» چندان زیاد نیست.

اما سایر مرورگرهای مجهز به هوش مصنوعی ممکن است این ایده را تقلید و پیاده‌سازی کنند.

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

اگر بخواهید HTML را به تصویر تبدیل کنید، معمولاً مجبور می‌شوید از ابزارهای مختلف و نه چندان خوش‌ساخت استفاده کنید — چرا که باید DOM را شبیه‌سازی کنند. تا پیش از این، هیچ راه‌حل پایدار و قابل اطمینانی وجود نداشت (شاید فقط Playwright با اسکرین‌شات قابل قبول بود).

حالا کم‌کم چیزی معقول ظاهر می‌شود.

‏WICG ایده‌ای با نام HTML-in-Canvas ارائه کرده است: در این روش، یک <canvas> آموزش می‌بیند که عناصر معمولی HTML را رسم کند.
یعنی دقیقاً همان‌طور که مرورگر عناصر را در DOM رسم می‌کند — با استایل‌ها، اندازه‌ها، متن و تو در تو بودن. فقط به جای نمایش روی صفحه، عنصر را به تصویر داخل <canvas> تبدیل می‌کند.

در واقع، خروجی بسیار جالب است. نمونه‌ای از تصویرسازی:

<canvas id="canvas" width="638" height="318" layoutsubtree="true">
  <div id="drawElement" style="width: 550px;">
    Hello from <a href="https://github.com/WICG/html-in-canvas">html-in-canvas</a>!
    <br>I'm multi-line, <b>formatted</b>,
    rotated text with emoji (&#128512;), RTL text
    <span dir=rtl>من فارسی صحبت میکنم</span>,
    vertical text,
    <p style="writing-mode: vertical-rl;">
      这是垂直文本
    </p>
    an inline image (<img width="150" src="wolf.jpg">), and
    <svg width="50" height="50">
      <circle cx="25" cy="25" r="20" fill="green" />
      <text x="25" y="30" font-size="15" text-anchor="middle" fill="#fff">
        SVG
      </text>
    </svg>!
  </div>
</canvas>

در حال حاضر، فقط در Chrome Canary نسخهٔ ۱۳۸ به بالا کار می‌کند و باید یک فلگ جداگانه فعال شود. همچنین محدودیت‌هایی وجود دارد: فقط عناصری که داخل خود <canvas> هستند رندر می‌شوند و برخی موارد به‌صورت عمدی توسط مرورگر مسدود می‌شوند — مثل iframeهای خارجی یا SVGهای عجیب. اما در مجموع، کار می‌کند.

فلگ مورد نیاز:

--enable-blink-features=CanvasDrawElement

این قدم اول واقعی است تا دیگر با رسم دستی متن و HTML داخل کانواس دردسر نکشیم. اگر این قابلیت به مرورگرهای عادی هم برسد، می‌توان بالاخره با خیال راحت نفس کشید.

🔗https://github.com/WICG/html-in-canvas
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

ویدیو دوبله شده در مورد مدیریت حافظه در مرورگر

#️⃣#tip #dub
👥@IR_javascript_group
🆔@IR_javascript

افکت Ambilight
می‌توان همین ایده را برای نورپردازی لبه‌های کارت‌ها هم به‌کار برد!

کمی جاوااسکریپت برای ارسال مختصات نشانگر ماوس به CSS، کمی فیلترهای SVG برای محوکردن نسخهٔ تکرارشدهٔ محتوا — و تمام! نتیجه کاملاً چشمگیر خواهد بود.

🔗https://codepen.io/jh3y/pen/WbwZaNa
#️⃣#code
👥@IR_javascript_group
🆔@IR_javascript

‏**Proxy و Reflect: چطور کار با آبجکت‌ها راحت‌تر می‌شود**

در JavaScript ابزارهای قدرتمندی وجود دارند که گاهی کمتر به چشم می‌آیند. Proxy و Reflect دقیقاً از همین دست ابزارها هستند که اغلب پشت صحنه باقی می‌مانند. اما اگر بدانید چطور از آن‌ها درست استفاده کنید، می‌توانند توسعه را بسیار ساده‌تر کنند. بیایید چند مثال واقعی را ببینیم که در آن‌ها Proxy و Reflect مفید هستند.

💬 لاگ‌گیری و دیباگ

فرض کنید می‌خواهید ردیابی کنید چه کسی و چه زمانی به یک آبجکت دسترسی پیدا می‌کند. به جای اینکه کد را پر از console.log کنید، می‌توانید از Proxy استفاده کنید تا همه دسترسی‌ها را رهگیری کنید. این روش مخصوصاً وقتی با استیت‌های بزرگ مثل Vue یا MobX کار می‌کنید، فوق‌العاده کاربردی است.

const user = { name: "Alex", age: 25 };

const loggedUser = new Proxy(user, {
  get(target, prop) {
    console.log(`GET ${prop}`);
    return Reflect.get(target, prop);
  },
  set(target, prop, value) {
    console.log(`SET ${prop} = ${value}`);
    return Reflect.set(target, prop, value);
  }
});

loggedUser.name; // GET name  
loggedUser.age = 26; // SET age = 26

💬 اعتبارسنجی داده‌ها

Proxy می‌تواند مقادیر نادرست را شناسایی کرده و اجازه ندهد وارد منطق کسب‌وکار شوند. با این روش می‌توان مدل‌های داده ساده بدون کلاس یا کد اضافی ساخت. کنترل و اعتبارسنجی داده‌ها دیگر به این آسانی نبوده است.

const product = new Proxy({}, {
  set(target, prop, value) {
    if (prop === 'price' && value < 0) {
      throw new Error("قیمت نمی‌تواند منفی باشد");
    }
    return Reflect.set(target, prop, value);
  }
});

💬 Reflect: دسترسی ایمن

Reflect مجموعه‌ای از متدها برای کار ایمن با آبجکت‌هاست. این متدها عملیات استاندارد را انجام می‌دهند، اما جلوی خطاهای غیرمنتظره را می‌گیرند و رفتار قابل پیش‌بینی ایجاد می‌کنند.

Reflect.get(obj, 'key'); // به جای obj.key  
Reflect.set(obj, 'key', 'value'); // true/false برمی‌گرداند، خطا نمی‌دهد

وقتی با Proxy ترکیب شود:

const safe = new Proxy(obj, {
  get: (t, p) => Reflect.get(t, p),
  set: (t, p, v) => Reflect.set(t, p, v)
});

📌 بسیاری از سیستم‌های واکنش‌گرایی مثل Vue 3 و MobX هم بر اساس Proxy ساخته شده‌اند. این ابزار به شما اجازه می‌دهد به تغییر داده‌ها «مشترک شوید» و UI را به‌طور خودکار بروزرسانی کنید، بدون اینکه ساختار داده را تغییر دهید.

Proxy و Reflect ابزارهای قدرتمندی هستند؛ اگر درست استفاده شوند، می‌توانند لایه‌های مؤثر لاگ‌گیری، اعتبارسنجی و واکنش‌گرایی را بدون کد اضافی یا ترفندهای پیچیده بسازند.



#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

‏URLPattern: روشی ساده برای کار با نشانی‌های اینترنتی بدون دردسر 🧐

کار با نشانی‌های اینترنتی معمولاً یعنی این‌که مسیر، پارامترها، میزبان، پروتکل را دستی استخراج کنیم و امید داشته باشیم که یک عبارت باقاعده‌ی جدید نصف برنامه را از کار نیندازد. اما در مرورگرهای مدرن ابزاری داخلی وجود دارد که این فرایند را بسیار قابل‌فهم‌تر می‌کند — URLPattern.

متد exec()
اطلاعاتی دقیق دربارهٔ تطبیق بازمی‌گرداند یا اگر تطبیقی وجود نداشته باشد مقدار null را برمی‌گرداند.
نتیجه شامل ویژگی‌هایی برای هر بخش از نشانی اینترنتی است (protocol، hostname، pathname، search، hash و مانند آن).
هر بخش معمولاً دارای فیلدی به نام input (رشتهٔ واقعی) و groups است که شیئی شامل مقادیر نام‌گذاری‌شدهٔ استخراج‌شده است.

const pattern = new URLPattern({
  protocol: 'https',
  hostname: 'example.com',
  pathname: '/posts/:year/:slug',
  search: 'page=:page',
  hash: ':section'
});

const url =
  'https://example.com/posts/سال دوهزار و بیست و پنج/urlpattern-guide?page=دو#intro';

const result = pattern.exec(url);

// pathname
console.log(result.pathname.input);
// "/posts/سال دوهزار و بیست و پنج/urlpattern-guide"

console.log(result.pathname.groups.year);
// "سال دوهزار و بیست و پنج"

console.log(result.pathname.groups.slug);
// "urlpattern-guide"

// search
console.log(result.search.input);
// "?page=دو"

console.log(result.search.groups.page);
// "دو"

// hostname و protocol
console.log(result.hostname.input);
// "example.com"

console.log(result.protocol.input);
// "https"

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

می‌توان ظاهر رابط کاربری را با کاهش یا حذف نوارهای اسکرول از طریق ویژگی scrollbar-width تمیزتر کرد.

نمونهٔ اسکرول‌بار باریک:

ul {
  scrollbar-width: thin;
}

نمونهٔ اسکرول‌بار مخفی (ناحیه همچنان قابل اسکرول است):

.cards-container {
  scrollbar-width: none;
}

این روش برای سایدبارها، جدول‌های داده، پنل‌های چت، داشبوردهایی با اسکرول‌های متعدد، کاروسل‌ها و رابط‌های لمسی مناسب است.

در نهایت، اسکرول همچنان کار می‌کند، اما ظاهر رابط کاربری مرتب‌تر و چشم‌نوازتر می‌شود. 🥺


#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript

حذف پس‌زمینه که در مرورگر
حذف پس‌زمینه را مستقیماً در مرورگر خود انجام دهید؛ این ابزار با WebGPU کار می‌کند و از مدل «آر‌اِم‌بی‌جی نسخهٔ یک‌ممیز‌چهار» از هاجینگ فِیس استفاده می‌کند.

🔗https://github.com/ducan-ne/remove-bg
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript