احتمالاً بسیاری از شما با مشکل نوشتن و نگهداری صحیح عبارات منظم (Regular Expressions) مواجه شده‌اید.

به‌ویژه مسئله‌ی درک و خوانایی همیشه مطرح است — آیا گروه‌های گیرنده را به‌درستی در توالی شرایط قرار داده‌اید؟ خروجی مورد انتظار چیست؟ و اصلاً آیا در عبارت منظم فعلی خطایی وجود دارد یا نه؟

بله، می‌توان از سرویس‌هایی مانند regex101.com استفاده کرد، اما گاهی دوست داریم همه‌چیز را بدون ترک محیط توسعه انجام دهیم.

به‌تازگی راه‌حل بسیار خوبی برای این مشکل معرفی شده است — ArkRegex، که نوعی انتزاع (abstraction) بر پایه‌ی new RegExp() است و علاوه بر آن، اطلاعات توضیحی و اعتبارسنجی در سطح تایپ‌های TypeScript ارائه می‌دهد.

🔗https://arktype.io/docs/blog/arkregex
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

افزونه‌ی PT Application Inspector آسیب‌پذیری‌ها و ویژگی‌های مستندسازی‌نشده را در کد منبع برنامه شناسایی می‌کند. افزون بر تحلیل کد، ماژول‌های داخلی آن خطاها را در فایل‌های پیکربندی و همچنین آسیب‌پذیری‌ها را در مؤلفه‌ها و کتابخانه‌های شخص‌ ثالثی که در توسعه‌ی برنامه استفاده شده‌اند، تشخیص می‌دهند.
حالا الگوریتم هوشمند فقط فهرستی از مشکلات ارائه نمی‌دهد، بلکه پیشنهاد می‌کند از کجا بررسی را آغاز کنید: کدام آسیب‌پذیری‌ها را باید ابتدا تأیید کرد و کدام را رد نمود. علاوه‌براین، موارد مشابه را گروه‌بندی می‌کند تا بتوانید آن‌ها را به‌صورت دسته‌جمعی پردازش کنید، نه جداگانه.

● مدیریت گروهی آسیب‌پذیری‌ها. در افزونه‌ی مخصوص IntelliJ IDEA سرانجام قابلیت موردانتظار مدیریت گروهی اضافه شده است. کافی است چند آسیب‌پذیری را در زبانه‌ی Detected Vulnerabilities (آسیب‌پذیری‌های شناسایی‌شده) تیک بزنید و وضعیت همه را یک‌جا تغییر دهید. برای کاربران VSCode وعده داده‌اند که این قابلیت تا پایان سال عرضه شود.

● کوپایلت مبتنی بر LLM (مدل زبانی بزرگ) — قابلیتی آزمایشی که فعلاً فقط برای کاربران IntelliJ فعال است. در این افزونه، یک دستیار هوش مصنوعی مبتنی بر YandexGPT برای تولید اصلاحات مستقیم در محیط IDE ادغام شده است. این سیستم در رفع خودکار کد کمک می‌کند: نه‌تنها آسیب‌پذیری را پیدا می‌کند، بلکه وصله‌ای آماده با پیش‌نمایش تغییرات ارائه می‌دهد. همچنین منطق اصلاح را توضیح می‌دهد — می‌توانید از آن بپرسید چرا این تغییر به این شکل انجام شده است. همه‌ی پیشنهادهای تولیدشده نیز در زبانه‌ی جدیدی با عنوان «How to Fix» (چگونه اصلاح کنیم) ذخیره می‌شوند.

این قابلیت به‌صورت پیش‌فرض غیرفعال است (باید از بخش تنظیمات فعال شود) و برای تمام آسیب‌پذیری‌ها به‌جز موارد ردشده یا مستثناشده عمل می‌کند.
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

ظر شما درباره‌ی اشکال‌زدایی (Debugging) در دستگاه‌های همراه چیست؟ صادقانه بگویید. به نظر من که یک شکنجه است.

بله، می‌توانید تلفن را با کابل به کامپیوتر وصل کنید و از کنسول مرورگر دسکتاپ استفاده نمایید. یا از مرورگر کیوی (Kiwi Browser) درتلفن همراه استفاده کنیم
ولی در وب ویو ها چه کنیم

ارودا (Eruda) یک کنسول تعبیه‌شدنی (Embeddable) برای مرورگرهای موبایل: https://github.com/liriliri/eruda

نمونه‌ی نمایشی: https://eruda.liriliri.io/

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


🔗https://eruda.liriliri.io
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

اسپلاید (Splide) با تایپ‌اسکریپت (TypeScript) نوشته شده است. سبک، سریع، و دارای انبوهی از قابلیت‌های یکپارچه‌سازی است. ده‌ها مثال استفاده بلافاصله در صفحه‌ی اصلی موجود است. به سئوی صفحات آسیبی نمی‌زند. امتیاز لایت‌هاوس (Lighthouse) نیز بسیار سبز است.

هیچ وابستگی‌ای ندارد و از IEده (Internet Explorer 10) به بعد پشتیبانی می‌کند.


🔗https://splidejs.com/#example=rendering--jelly-slider
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

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

برای جلوگیری از چنین موقعیت‌هایی، پروژه‌ای وجود دارد به نام endoflife.date (https://endoflife.date/
).
این سایت نشان می‌دهد پشتیبانی از زبان‌ها، کتابخانه‌ها، فریم‌ورک‌ها و سیستم‌ها چه زمانی پایان می‌یابد. کافی است مثلاً «Node.js» یا «Ubuntu» را جست‌وجو کنید تا فوراً ببینید کدام نسخه‌ها هنوز فعال‌اند و کدام را باید به‌روزرسانی کرد. حتی یک API عمومی هم دارد (https://endoflife.date/docs/api/v1/
) تا بتوانید بررسی نسخه‌ها را مستقیماً در CI خود بگنجانید و اعلان‌های خودکار دریافت کنید.

البته باید با درایت به‌روزرسانی کرد. گاهی نسخه‌ی جدید تغییرات ناسازگار و دردسرهای زیادی به‌همراه می‌آورد. برای همین، نسخه‌های LTS ایجاد شده‌اند — شاخه‌های پایداری که مدت طولانی‌تری پشتیبانی می‌شوند و تغییراتشان تدریجی‌تر است. این نسخه‌ها برای زمانی مناسب‌اند که پایداری و پیش‌بینی‌پذیری برایتان اهمیت دارد.

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

#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

نظرتون چیه

🔗https://www.incommonwith.com/collections/all-lighting
#️⃣#discussion
👥@IR_javascript_group
🆔@IR_javascript

نکته‌ی CSS

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

این کار به راحتی با استفاده از CSS Filters انجام می‌شود:

/* برای تم روشن */
.logos-container img {
  filter: brightness(0);
  opacity: 0.6;
}

/* برای تم تیره */
.logos-container img {
  filter: invert(1) saturate(0) brightness(4);
  opacity: 0.6;
}

به این ترتیب می‌توانید با یک تصویر واحد، لوگو را برای هر دو تم به درستی نمایش دهید و نیازی به فایل‌های اضافی نیست.


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

‏👀 Umami ۳.۰: جایگزین خودمیزبان گوگل آنالیتیکس

یک ابزار مشابه Plausible یا Google Analytics است، اما با Node.js ساخته شده و آماده است تا خودتان آن را روی سرور خود میزبانی کنید.

ویژگی‌ها:

جمع‌آوری آمار وب بدون ردگیری شخصی کاربران

داشبورد ساده و قابل فهم

پشتیبانی از چندین سایت و کاربر

MIT License، یعنی کاملاً متن‌باز

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

لینک‌ها:

نسخه ۳.۰: GitHub

سرویس میزبانی‌شده: Umami.is

توسعه‌دهنده: Umami Software, Inc.

#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

شما HTML را نمی‌شناسید:time و data
در HTML دو عنصر نسبتاً نادر وجود دارد: ‎<time> و ‎<data>. عنصر ‎<time> گاهی در صفحاتی دیده می‌شود که به معناشناسی توجه دارند، اما ‎<data> تقریباً هیچ‌گاه در طبیعت وب مشاهده نمی‌شود. ویژگی مشترک هر دو عنصر، قابلیت افزودن داده‌های machine-readable است.

عنصر ‎<time> برای نشانه‌گذاری تاریخ، زمان، منطقهٔ زمانی و مدت‌زمان بر اساس استاندارد بین‌المللی ISO 8601 طراحی شده است؛ استانداردی که بسیاری از سیستم‌ها و سرویس‌ها می‌توانند آن را مستقیماً پردازش کنند. برای مثال:

<!-- تاریخ با سال -->
<time>2025-11-14</time>

<!-- ماه و روز بدون سال -->
<time>11-14</time>

<!-- زمان بدون ثانیه -->
<time>17:03</time>

<!-- تاریخ و زمان با ثانیه -->
<time>2025-11-14T17:03</time>

<!-- منطقهٔ زمانی -->
<time>+0300</time>

<!-- مدت‌زمان -->
<time>2h 13m 42s</time>

استاندارد HTML تصریح می‌کند که محتوای داخل ‎<time> باید مطابق فرمت معتبر (در اصل مطابق ISO 8601) باشد. اگر متن قابل‌نمایش این فرمت را رعایت نکند، مقدار معتبر باید در ویژگی datetime درج شود تا امکان پردازش ماشینی فراهم شود:

<!-- رشتهٔ معتبر مطابق ISO 8601 -->
<time>2025-11-14 17:03</time>

<!-- رشتهٔ نامعتبر، اما مقدار صحیح در ویژگی datetime -->
<time datetime="2025-11-14 17:03">
  پنج‌شنبه، چهاردهم نوامبر، ساعت هفده و سه دقیقه
</time>

ویژگی datetime این امکان را می‌دهد که دادهٔ دقیق و قابل‌خواندن برای ماشین ذخیره شود (برای موتورهای جست‌وجو، هوش مصنوعی، پردازشگرها و …)، در حالی‌که به کاربر یک نسخهٔ کاملاً انسان‌خوان مانند «دیروز»، «پنج دقیقه پیش» یا «هفتهٔ گذشته» نمایش داده شود.

عنصر ‎<data> کاربردی مشابه دارد: ارائهٔ یک مقدار انسان‌خوان همراه با یک مقدار machine-readable. تفاوت مهم این است که ‎<data> برخلاف ‎<time> به هیچ استاندارد خاصی مانند ISO 8601 وابسته نیست و می‌تواند هر داده‌ای را بپذیرد.

مقدار قابل‌نمایش داخل عنصر قرار می‌گیرد و نسخهٔ ماشینی در ویژگی value نوشته می‌شود:

<!-- تاریخ ممکن است، اما برای تاریخ‌ها بهتر است از <time> استفاده شود -->
<p>
  تاریخ انتشار:
  <data value="2025-11-14">
    پنج‌شنبه، چهاردهم نوامبر 2025
  </data>
</p>

<!-- شناسه، مدل، SKU، کد کالا یا URL handle -->
<h2>
  <data value="GA-B419SWGL">
    یخچال LG GA-B419SQGL
  </data>
</h2>

<!-- کد ارز (ISO 4217) و قیمت بدون قالب‌بندی -->
<p>
  Price:
  <data value="USD">$</data>
  <data value="119999">1.199,99</data>
</p>

شاید در آینده پشتیبانی فناوری‌های کمکی از عناصر معناشناختی سطح متن (Text-level semantics) بهبود یابد و ‎<time> و ‎<data> بتوانند زمینهٔ معنایی بیشتری منتقل کنند.

اما اکنون، فایدهٔ آن‌ها بیشتر تئوریک است. با این حال:

برای پردازش سمت‌کلاینت در JavaScript

برای هوش مصنوعی و پارسرها

برای موتورهای جست‌وجو

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

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

یک کتابخانهٔ متن‌باز از کامپوننت‌های 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