jsbenchmark.com
یک سرویس بسیار کاربردی برای سنجش عملکرد بخش‌های کوچک کد است.

#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

حالت بخار (Vapor Mode) در Vue.js یک استراتژی کامپایل جایگزین است که برای بهبود عملکرد برنامه‌های Vue.js طراحی شده است. این حالت به جای استفاده از Virtual DOM (VDOM)، کامپوننت‌ها را مستقیماً به HTML تبدیل می‌کند
‏vapor mode در vue 3.6 اضافه خواهد شد


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

‏**jscanify** یک اسکنر اسناد موبایل رایگان و متن‌باز است که کاملاً با جاوااسکریپت پیاده‌سازی شده و از OpenCV.js قدرت می‌گیرد. این ابزار از Node.js، React، Angular و Vue پشتیبانی می‌کند.


### ویژگی‌ها:
✅ تشخیص و برجسته‌سازی اسناد
✅ اسکن اسناد با اصلاح اعوجاج
✅ امکان خروجی گرفتن به فرمت PDF

🔗https://colonelparrot.github.io/jscanify/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

زمانی که شفافیت رنگ یک دردسر می‌شود

آیا تا به حال سعی کرده‌اید رنگی را در CSS شفاف کنید؟ به نظر ساده می‌رسد، اما اگر طراح فقط یک کد HEX بدون شفافیت به شما داده باشد، ماجرا به یک چالش تبدیل می‌شود...

- روش اول: تبدیل دستی HEX به RGBA. برای این کار، یک مبدل باز کنید، مثلاً کد #003366 را وارد کنید، مقدار ۰.۵ را به کانال آلفا اضافه کنید و در نهایت نتیجه را کپی کنید:

  rgba(26, 135, 69, 0.5);
  

- روش دوم: استفاده از HEX با کانال آلفا (#00336680). اما به خاطر سپردن اینکه دو رقم آخر چه میزان شفافیت را نشان می‌دهند، خود یک چالش جداگانه است!
- روش سوم: کاملاً شفافیت را فراموش کنید و تظاهر کنید که همه‌چیز از ابتدا همین‌طور بوده است!

اما حالا تابع color-mix() در CSS همه چیز را آسان کرده است:

color: color-mix(in srgb, #003366 50%, transparent);

کاملاً مشخص است: پنجاه درصد رنگ، پنجاه درصد شفافیت – و تمام!

### color-mix() چیست؟
این یک تابع در CSS است که امکان ترکیب دو رنگ را با نسبت‌های مشخص در یک مدل رنگی معین فراهم می‌کند.

و voilà! تابع خودش رنگ را می‌گیرد، آن را با شفافیت ترکیب می‌کند و نتیجه دلخواه را ارائه می‌دهد—بدون نیاز به مبدل‌ها، بدون حفظ کردن مقادیر عجیب HEX**، و بدون دردسر.

طبق داده‌های **Can I Use**، این ویژگی **نود و یک و هفتاد و شش صدم درصد پشتیبانی دارد.

نکته: اگر از SASS/SCSS استفاده می‌کنید، کار را می‌توان حتی راحت‌تر کرد:

color: rgba(#003366, 0.5);

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

### پشتیبانی رسمی ESLint از بررسی کدهای CSS

ESLint حالا از CSS نیز پشتیبانی می‌کند و گامی دیگر به سمت تبدیل شدن به یک پلتفرم همه‌منظوره برای بررسی کیفیت کدهای منبع برداشته است.

#### نحوه فعال‌سازی
برای بررسی CSS در ESLint، می‌توانید پلاگین رسمی @eslint/css را نصب کرده و در پیکربندی خود اضافه کنید:

npm install @eslint/css -D

import css from "@eslint/css";

export default [
    {
        files: ["**/*.css"],
        plugins: { css },
        language: "css/css",
        rules: {
            "css/no-duplicate-imports": "error",
        },
    },
];

#### قوانین اصلی
این پلاگین شامل قوانین مختلفی برای بهبود کیفیت کدهای CSS است، مانند:
- جلوگیری از وارد کردن تکراری فایل‌های CSS
- جلوگیری از بلوک‌های خالی
- جلوگیری از استفاده از دستورات نامعتبر
- الزام به استفاده از ویژگی‌های استاندارد و ضروری

#### قابلیت‌های پیشرفته
- تحلیل خطاها با خطایابی منعطف: در حالت عادی، ESLint تمام خطاهای نحوی CSS را گزارش می‌کند، اما می‌توان آن را به گونه‌ای تنظیم کرد که مانند مرورگرها، برخی خطاهای کوچک را نادیده بگیرد.
- پشتیبانی از سینتکس سفارشی: امکان تعریف دستورات و ویژگی‌های سفارشی برای پروژه‌های خاص، مانند Tailwind CSS**، وجود دارد.

#### نتیجه‌گیری
افزودن پشتیبانی از **CSS به ESLint باعث می‌شود که توسعه‌دهندگان بتوانند کیفیت کدهای خود را در تمام بخش‌های پروژه، از جاوا اسکریپت گرفته تا استایل‌ها، یکپارچه حفظ کنند. این قابلیت جدید، با ارائه قوانین دقیق و پشتیبانی از سفارشی‌سازی، نوشتن CSS تمیز و بهینه را آسان‌تر می‌کند.

‏ESLint یک پروژه متن‌باز است که توسط داوطلبان مدیریت می‌شود. در صورت استفاده مداوم از آن، حمایت از این پروژه می‌تواند به بهبود و توسعه بیشتر آن کمک کند.

🔗https://eslint.org/blog/2025/02/eslint-css-support/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

‏upfetch: یک ابزار پیشرفته برای ساخت کلاینت fetch
یک کتابخانه TypeScript برای بهبود fetch با قابلیت‌های اعتبارسنجی طرحواره (Schema Validation)، تجزیه خودکار پاسخ‌ها و ایمنی نوعی (Type-Safety)، در حالی که همچنان از همان API آشنای fetch استفاده می‌کند.

🔗https://github.com/L-Blondy/up-fetch
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

بهینه‌سازی قالب‌بندی تاریخ:

‏date.toLocaleString() یک تابع نسبتاً کند است.
‏new Intl.DateTimeFormat() ده برابر سریع‌تر عمل می‌کند.
استفاده از قالب‌بندی سفارشی می‌تواند سرعت را تقریباً یک مرتبه دیگر افزایش دهد.
هنگام استفاده از Intl، بهترین روش این است که به‌جای ایجاد مجدد این شیء در هر بار استفاده، آن را یکبار ایجاد و بازاستفاده کنید.


🔗https://jsbenchmark.com/#eyJjYXNlcyI6W3siaWQiOiJTblotMU1PaGZxSTlKNnFHUlE5UVEiLCJjb2RlIjoiRGF0ZS50b0xvY2FsZVN0cmluZygpIiwibmFtZSI6ImRhdGUudG9Mb2NhbGVTdHJpbmcoKSIsImRlcGVuZGVuY2llcyI6W119LHsiaWQiOiJZc2JrVjRGLXNSdWU0MjZyQjM4RU8iLCJjb2RlIjoibmV3IEludGwuRGF0ZVRpbWVGb3JtYXQoKSIsIm5hbWUiOiJuZXcgSW50bC5EYXRlVGltZUZvcm1hdCgpIiwiZGVwZW5kZW5jaWVzIjpbXX1dLCJjb25maWciOnsibmFtZSI6IkJhc2ljIGV4YW1wbGUiLCJwYXJhbGxlbCI6dHJ1ZSwiZ2xvYmFsVGVzdENvbmZpZyI6eyJkZXBlbmRlbmNpZXMiOltdfSwiZGF0YUNvZGUiOiJyZXR1cm4gWy4uLkFycmF5KDEwMDApLmtleXMoKV0ifX0
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

‏bundlejs - بررسی سریع اندازه‌ی (bundle) حجم پکیج‌های npm

🔗https://bundlejs.com/
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

Monolith

ابزاری برای ذخیره‌سازی کامل صفحات وب همراه با تمامی فایل‌های جاوا اسکریپت، CSS، تصاویر و سایر اجزای صفحه.

🔗https://github.com/Y2Z/monolith
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

### پنج اصل کلیدی در ارتباط با مدیر

ارتباط مؤثر با مدیر تنها یک مهارت نیست، بلکه یک استراتژی مهم است که بر موفقیت پروژه، فضای تیمی و اعتبار حرفه‌ای شما تأثیر می‌گذارد. در اینجا پنج اصل را معرفی می‌کنیم که به شما کمک می‌کند گفت‌وگویی سازنده داشته باشید و خود را به‌عنوان یک متخصص ارزشمند نشان دهید.

---

### ۱. رویکرد فعال به‌جای صرفاً بیان مشکلات
به‌جای اینکه فقط درباره‌ی مشکلات گزارش دهید، راهکارهای پیشنهادی ارائه کنید. این کار نشان‌دهنده‌ی حرفه‌ای بودن و توانایی شما در پذیرش مسئولیت است.

❌ مدیر! در ماژول X یک خطا وجود دارد، چه‌کار کنیم؟
✅ در ماژول X مشکلی پیدا کردم که ممکن است بر پایداری تأثیر بگذارد. دو راهکار داریم:
- بازنگری کد (Refactoring) که زمان بیشتری می‌برد اما راه‌حل بلندمدت است.
- اصلاح متمرکز (Hotfix) که در مدت کوتاه‌تر انجام می‌شود، اما ممکن است نیاز به بررسی‌های بعدی داشته باشد.
کدام مسیر را انتخاب می‌کنیم؟

---

### ۲. وضوح و اختصار در بیان مطالب
مدیران برای وقت خود ارزش زیادی قائل‌اند**، بنابراین باید **مختصر، شفاف و بدون جزئیات اضافی صحبت کنید.

❌ بخش اصلی کار تمام شده، ولی هنوز چند جزئیات باقی مانده که باید اصلاح شوند. در مجموع، همه‌چیز کار می‌کند، اما چند نکته هست که…
✅ بخش اصلی تکمیل شد، در حال نهایی‌سازی جزئیات هستم. برای اضافه کردن X، حدود Y زمان نیاز دارم. نکته‌ی دیگری هست که باید در نظر بگیرم؟

---

### ۳. توانایی پرسیدن سؤالات درست
سؤالات هوشمندانه نه‌تنها به دریافت اطلاعات کمک می‌کند، بلکه نشان‌دهنده‌ی تفکر تحلیلی و درک عمیق شما از مسئله است.

❌ نمی‌دانم با این تسک چه‌کار کنم!
✅ آیا درست متوجه شدم که در این تسک باید داده‌های X، Y و Z را ترکیب کنیم و سپس آن‌ها را به‌صورت نمودارهایی با خطوط مشخص نمایش دهیم؟

---

### ۴. پذیرش مسئولیت و ارائه راه‌حل
همه اشتباه می‌کنند، اما تفاوت در نحوه‌ی واکنش به آن است. توجیه کردن اشتباهات باعث کاهش اعتماد می‌شود، درحالی‌که پذیرش مسئولیت و ارائه‌ی راهکار نشان‌دهنده‌ی بلوغ حرفه‌ای شماست.

❌ به دلیل حجم کاری بالا، نتوانستم این ریسک را در نظر بگیرم.
✅ ریسک‌ها را به‌درستی ارزیابی نکردم، که روی زمان‌بندی تأثیر گذاشت. برای جلوگیری از تکرار این مشکل، فرآیند برنامه‌ریزی را اصلاح کردم.

---

### ۵. ایجاد اعتماد و درک متقابل
ارتباط حرفه‌ای فقط به منطق وابسته نیست**؛ بلکه شامل **درک احساسات و شرایط نیز می‌شود.

❌ مشکل پیش‌بینی‌نشده‌ای پیش آمده، باید سریعاً کاری انجام دهیم!
✅ یک چالش غیرمنتظره ایجاد شده که ممکن است این بخش‌ها را تحت تأثیر قرار دهد. بیایید بررسی کنیم که بهترین راه‌حل چیست؟

---

### نتیجه‌گیری
ارتباط با مدیر فقط انتقال اطلاعات نیست!
بلکه ابزاری برای تأثیرگذاری بر فرآیندها، تقویت اعتماد و رشد حرفه‌ای شما است.

✨ شما چه اصولی را برای بهبود ارتباطات خود با مدیر رعایت می‌کنید؟

#️⃣#discussion
👥@IR_javascript_group
🆔@IR_javascript

ابزار Chrome DevTools امکان تغییر پاسخ درخواست‌ها را برای کار محلی فراهم می‌کند

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

در چنین مواردی، Chrome DevTools یک روش کاربردی برای پوشش‌دهی (Override) پاسخ‌های درخواست‌ها ارائه می‌دهد که به شما اجازه می‌دهد داده‌ها را به‌صورت محلی تغییر داده و به کار خود ادامه دهید.

مرحله اول: رفتن به تب "Network"
وارد بخش Network در DevTools شوید. در این قسمت، تمام درخواست‌های شبکه‌ای که هنگام بارگیری صفحه یا تعامل با آن اجرا می‌شوند، نمایش داده می‌شوند.

مرحله دوم: انتخاب درخواست موردنظر برای تغییر
در لیست درخواست‌ها، آن موردی را که قصد تغییر آن را دارید، پیدا کنید.

مرحله سوم: استفاده از قابلیت "Override content" (پوشش‌دهی محتوا)
برای تغییر پاسخ درخواست، باید این قابلیت را فعال کنید. دو روش برای این کار وجود دارد:
۱. روی "Override content" کلیک کنید و سپس پوشه‌ای را برای ذخیره فایل‌های تغییر داده‌شده انتخاب کنید.
۲. به تب "Sources" (منابع) بروید. سپس، دایرکتوری‌ای را روی رایانه خود مشخص کنید که فایل‌های پاسخ‌های تغییر داده‌شده در آن ذخیره شوند. همچنین باید این پوشه را تأیید کرده و اجازه دسترسی کامل به آن را بدهید. این کار باعث می‌شود Chrome بتواند فایل‌های محلی شما را به‌عنوان پاسخ جدید درخواست‌ها مورد استفاده قرار دهد.

مرحله چهارم: ذخیره داده‌های سفارشی
پاسخ انتخاب‌شده، به‌طور خودکار در دایرکتوری مشخص‌شده در مرحله سوم ذخیره می‌شود. سپس کافی است فایل را باز کرده و محتوای آن را مطابق نیاز خود ویرایش کنید، برای مثال، یک JSON سفارشی را در آن قرار دهید و فایل را ذخیره کنید.

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

نکته: اگر بخواهید از دایرکتوری انتخاب‌شده صرف‌نظر کنید، کافی است روی دکمه "✖️" کنار گزینه "اجازه پوشش‌دهی محلی" کلیک کنید.

#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

💚 ولادت امام حسن مجتبی (ع)
زیباترینِ زیباها در دنیا چیست

🔗 [+لینک ویدیو]
#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript

درک تفاوت بین firstElementChild**، **children[0] و childNodes[0]

هنگامی که می‌خواهیم اولین عنصر درون یک کانتینر را دریافت کنیم، دو روش در دسترس داریم:
- استفاده از children[0] یا childNodes[0]
- استفاده از firstElementChild

اما کدام روش بهتر است؟ بیایید بررسی کنیم.

### تفاوت بین childNodes و children

هنگامی که از container.childNodes[0] استفاده می‌کنیم، تمام گره‌ها در نتیجه لحاظ می‌شوند:
- عناصر (div**، **p**، **ul و ...)
- گره‌های متنی (فاصله‌ها، کاراکترهای خط جدید)
- کامنت‌ها

این مسئله ممکن است باعث بروز خطاهای غیرمنتظره شود. برای مثال:

const firstItem = container.childNodes[0]; 
console.log(firstItem); // ممکن است فاصله یا کاراکتر خط جدید را برگرداند!

در اینجا، به جای یک عنصر، یک گره متنی دریافت می‌کنیم که ممکن است بر منطق اسکریپت تأثیر بگذارد.

### چرا firstElementChild بهتر است؟

هم children[0] و هم firstElementChild فقط عناصر را در نظر می‌گیرند و از گره‌های متنی و کامنت‌ها چشم‌پوشی می‌کنند. بنابراین، استفاده از آن‌ها امن‌تر است:

const firstItem1 = container.children[0]; 
const firstItem2 = container.firstElementChild; 
console.log(firstItem1 === firstItem2); // true

هر دو روش به‌درستی کار می‌کنند، اما firstElementChild خواناتر و ساده‌تر است. علاوه بر این، از نظر عملکرد نیز کمی سریع‌تر از سایر روش‌ها عمل می‌کند.

پس برای پایداری و سادگی**، **firstElementChild گزینه‌ای مطمئن و مناسب است!

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

Chroma.js

یک کتابخانه‌ی کوچک جاوا اسکریپت بدون وابستگی (با حجمی در حدود سیزده و نیم کیلوبایت) است که برای انجام تبدیل‌های رنگی و ایجاد مقیاس‌های رنگی به کار می‌رود. این کتابخانه امکان خواندن رنگ‌ها از فرمت‌های مختلف**، **تحلیل و تغییر آن‌ها و همچنین تولید پالت‌های رنگی برای بصری‌سازی داده‌ها را فراهم می‌کند.

🔗https://gka.github.io/chroma.js/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

یک JSON Viewer جالب پیدا کردم!
برای دیباگ در پنل مدیریت و بررسی داده‌ها واقعاً کاربردی است. 🔍🚀

🔗https://github.com/andypf/json-viewer
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

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

🔗https://better-mobile-inputs.netlify.app/
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

💚 یَا مُقَلِّبَ الْقُلُوبِ وَ الْأَبْصَارِ؛ یَا مُدَبِّرَ اللَّیْلِ وَ النَّهَارِ؛ یَا مُحَوِّلَ الْحَوْلِ وَ الْأَحْوَالِ؛ حَوِّلْ حَالَنَا إِلَی أَحْسَنِ الْحَالِ

🔗 [+لینک ویدیو]
#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript

⚫️ Gridstack.js

یک کتابخانه‌ی جاوا اسکریپت برای ایجاد چیدمان‌های شبکه‌ای پویا و قابل تنظیم با قابلیت کشیدن و رها کردن (drag-and-drop). با استفاده از آن، می‌توان به‌راحتی عناصر صفحه را سازمان‌دهی کرده و آن‌ها را به موقعیت‌های دلخواه منتقل کرد. Gridstack.js برای طراحی پنل‌های تعاملی، داشبوردها و سایر رابط‌های کاربری انعطاف‌پذیر و پویا ایده‌آل است.

🔗https://gridstackjs.com/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

امام صادق عليه السلام:

سرنوشت (مُقَدَّر شدن)، در شب نوزدهم است
و محكم ساختن، در شب بيست و يكم
و امضا (حتمى سازى)، در شب بيست و سوم
التَّقديرُ في لَيلَةِ تِسعَ عَشرَةَ، والإبرامُ في لَيلَةِ إحدى وعِشرينَ، وَالإِمضاءُ في لَيلَةِ ثَلاثٍ وعِشرينَ

الكافی جلد4 صفحه159

🔗 [+لینک ویدیو]
#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript

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

🔗https://marmelab.com/blog/2020/06/02/gremlins-2.html
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript