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

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

آیا طراحی ایمیل مثل کابوس است؟

اگر فکر می‌کنید که طراحی واکنش‌گرا برای تمام مرورگرها کار سختی است، پس بهتر است سعی کنید یک ایمیل طراحی کنید که در Gmail، Outlook، Yahoo و ده‌ها سرویس ایمیل دیگر کاملاً یکسان نمایش داده شود...

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

### ۱. دلیل تاریخی
معمولاً طراحی ایمیل‌ها یک کار نسبتاً ساده است. به همین دلیل، بسیاری از سرویس‌های ایمیل زحمت به‌روزرسانی موتورهای پردازش خود را به خود نمی‌دهند، چراکه این کار از نظر تجاری سود چندانی ندارد. به‌عنوان مثال، هیچ تفاوتی بین طراحی یک ایمیل حاوی کد تأیید ورود با استفاده از جداول یا Flexbox از لحاظ عملکرد وجود ندارد.

### ۲. مسائل امنیتی
اگر کمی عمیق‌تر بررسی کنیم، متوجه می‌شویم که بسیاری از محدودیت‌های موجود دلایل امنیتی دارند. روش‌های زیادی برای ارسال درخواست از داخل یک ایمیل وجود دارد، مانند:

@font-face { src: url(...) }  
background-image: url(...)  
list-style-image: url(...)  

<form action="https://.../steal.php" method="get">

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

همچنین، ویژگی position: fixed در ایمیل‌ها ممنوع شده است، زیرا می‌توان از آن برای حملات فیشینگ استفاده کرد. به‌عنوان مثال، یک هکر می‌تواند یک پنجره‌ی ثابت را روی محتوای ایمیل نمایش دهد که از کاربر می‌خواهد رمز عبور خود را وارد کند و این پنجره کاملاً مشابه رابط کاربری سرویس ایمیل خواهد بود.

### اما خبر خوب اینجاست: اوضاع خیلی بهتر شده است!
‏- Outlook اکنون از موتور رندرینگ Edge به جای Microsoft Word استفاده می‌کند (بله، باور کنید! تا سال دو هزار و بیست و دو ایمیل‌ها واقعاً با موتور Word پردازش می‌شدند!).
- تقریباً تمامی سرویس‌های ایمیل، تگ <div /> را به‌درستی پردازش می‌کنند.
- پشتیبانی از media queries در بسیاری از سرویس‌های ایمیل اضافه شده است.
- و بسیاری پیشرفت‌های دیگر.

### ابزارهای جدید، دنیای طراحی ایمیل را متحول کرده‌اند
ابزارهای مدرنی برای طراحی ایمیل ایجاد شده‌اند که بسیاری از مشکلات را از پیش حل کرده‌اند. یکی از این ابزارها MJML است که در گذشته تغییرات بزرگی ایجاد کرد، و در سال‌های اخیر، فریمورک‌هایی مانند react-email و vue-email بسیار محبوب شده‌اند.

مزایای react-email :
✔️ پشتیبانی از Tailwind CSS
✔️ نسخه‌ای شبیه به Storybook برای پیش‌نمایش قالب‌ها
✔️ امکان استفاده از فونت‌های سفارشی
✔️ مجموعه‌ای از قالب‌های آماده و نمونه کدها
‏✔️ Markdown برای نوشتن متن‌ها
✔️ برطرف کردن مشکلات مربوط به سرویس‌های مختلف ایمیل

و همه‌ی این‌ها در یک بسته‌ی کامل و کاربرپسند ارائه شده که از کامپوننت‌محوری پشتیبانی می‌کند، بدون نیاز به ارسال پیامک تأیید یا حتی ثبت‌نام!

به نظر من، در دنیای امروز طراحی ایمیل‌ها بسیار راحت‌تر و بهینه‌تر شده است، و این را مدیون جامعه‌ی برنامه‌نویسی هستیم. اگر تا به حال از طراحی ایمیل دوری کرده‌اید، پیشنهاد می‌کنم نگاهی به آن بیندازید—این حوزه هم جذابیت‌های خاص خودش را دارد!

و در نهایت، اگر به دنبال یک ابزار عالی هستید، react-email را امتحان کنید—ابزاری کارآمد و لذت‌بخش.


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

🖤 شهادت امام علی (ع)
امام على عليه السلام:
هر كه درباره بسيارى از امور بى اعتنايى و چشم پوشى نكند، زندگيش تيره شود
مَن لَم يَتَغافَلْ و لا يَغُضَّ عَن كَثيرٍ مِنَ الاُمورِ تَنَغَّصَت عِيشَتُهُ
غررالحكم حدیث9149

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

‏**BigInt و ویژگی‌های آن: بررسی جامع**

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

### اولین تجربه با BigInt
وقتی برای اولین بار با BigInt آشنا شدم، سادگی آن بلافاصله برایم جذاب بود. تنها با افزودن حرف n به انتهای یک عدد، آن عدد به‌صورت خودکار به یک شیء از نوع BigInt تبدیل می‌شود:

const bigNumber = 1234567890123456789012345678901234567890n;
console.log(bigNumber); // 1234567890123456789012345678901234567890n

### عملیات ریاضی با BigInt
BigInt از بیشتر عملیات استاندارد ریاضی که معمولاً با اعداد معمولی انجام می‌دهیم، پشتیبانی می‌کند، از جمله:

- جمع، تفریق، ضرب، تقسیم، باقی‌مانده تقسیم و توان
- این عملیات مشابه اعداد معمولی عمل می‌کنند، اما تقسیم همیشه به سمت صفر گرد می‌شود (یعنی نتیجه همیشه عددی صحیح خواهد بود).
- عملیات بیتی (به‌جز >>> که شیفت به راست با پر کردن صفر است)
- عدم پشتیبانی از عملگر + به‌عنوان یکانی

❗️ نکته مهم: نمی‌توان BigInt را بدون تبدیل صریح با اعداد معمولی ترکیب کرد. برای انجام این کار باید نوع داده را به‌صورت دستی تبدیل کرد:

const regularNumber = 10;
const bigResult = bigNumber + BigInt(regularNumber);
console.log(bigResult);

### کار با JSON و BigInt
استاندارد JSON از BigInt پشتیبانی نمی‌کند و تلاش برای سریال‌سازی (Serialization) آن منجر به خطا می‌شود:

const data = {
  id: 12345678901234567890n
};

JSON.stringify(data); // TypeError: Do not know how to serialize a BigInt

برای رفع این مشکل، معمولاً BigInt را قبل از سریال‌سازی به رشته تبدیل می‌کنم تا دقت عدد حفظ شود.

### موارد کاربرد BigInt
در تجربه‌ی من، BigInt در چندین سناریو بسیار مفید است:

- رمزنگاری: بسیاری از الگوریتم‌های رمزنگاری نیازمند کار با اعداد بسیار بزرگ هستند.
- محاسبات مالی: در سیستم‌هایی که دقت عددی بسیار اهمیت دارد (مثلاً در محاسبه‌ی سود و زیان دقیق).
- محاسبات ریاضی پیشرفته: در مسائلی که اعداد خارج از محدوده‌ی استاندارد قرار دارند.

### جمع‌بندی
‏BigInt افق‌های جدیدی را در جاوا اسکریپت گشوده و امکان کار با اعدادی را فراهم می‌کند که پیش از این غیرممکن به‌نظر می‌رسیدند. البته، برای استفاده‌ی بهینه از آن، باید به نیاز به تبدیل صریح نوع داده، محدودیت‌های JSON و تفاوت‌های جزئی در عملیات ریاضی توجه داشت.

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

برای کسانی که نمی‌دانند، در VS Code (با افزونه‌ی Volar) یک فرمان کاربردی وجود دارد که امکان تقسیم یک فایل به دو پنجره بر اساس بخش‌های SFC را فراهم می‌کند.

#️⃣#tool #vue
👥@IR_javascript_group
🆔@IR_javascript

### چگونه به تغییرات یک شیء واکنش نشان دهیم؟

در JavaScript**، اشیای معمولی به‌طور پیش‌فرض قابلیت اطلاع‌رسانی در مورد تغییرات خود را ندارند. اما این مشکل را می‌توان با استفاده از **Proxy حل کرد.

‏Proxy یک شیء داخلی خاص در جاوااسکریپت است که مانند یک لفاف (Wrapper) عمل کرده و به شما اجازه می‌دهد رفتار اشیا را تغییر دهید. این کار از طریق رهگیری و دستکاری عملیات انجام‌شده روی شیء ممکن می‌شود.

### ساختار اولیه‌ی یک Proxy

برای ایجاد یک Proxy از ساختار زیر استفاده می‌شود:

new Proxy(target, handlers)

در اینجا:
- target همان شیء اصلی است که می‌خواهید آن را تحت نظر بگیرید.
- handlers شامل تله‌ها (traps) برای رهگیری و تغییر رفتار شیء است.

تعداد زیادی تله در دسترس است، از جمله:
- get: برای رهگیری خواندن یک ویژگی
- set: برای رهگیری تغییر مقدار یک ویژگی
- deleteProperty: برای رهگیری حذف ویژگی‌ها
- has: برای کنترل عملگر in

(جزئیات بیشتر در [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy))

### مثال اولیه: تغییر رفتار شیء هنگام دسترسی به ویژگی‌ها

const user = { name: "دنیس", age: ۲۳ };

const proxyUser = new Proxy(user, {
    get(target, key) {
        return key in target ? target[key] : "یافت نشد";
    }
});

console.log(proxyUser.name); // "دنیس"
console.log(proxyUser.city); // "یافت نشد"

در این مثال، اگر ویژگی موردنظر در شیء user وجود نداشته باشد، مقدار "یافت نشد" بازگردانده می‌شود.

---

### مثال پیشرفته‌تر: ایجاد یک سیستم واکنشی (Reactive System)

const reactive = (obj, callback) => {
    return new Proxy(obj, {
        set(target, key, value) {
            target[key] = value; // به‌روزرسانی مقدار ویژگی
            callback(key, value); // اجرای تابع واکنش‌گر
            return true;
        }
    });
};

// استفاده:
const state = reactive({ count: ۰ }, (key, value) => {
    console.log(`ویژگی '${key}' تغییر کرد:`, value);
});

state.count = ۱; // خروجی: "ویژگی 'count' تغییر کرد: ۱"
state.count = ۵; // خروجی: "ویژگی 'count' تغییر کرد: ۵"

با افزودن انواع داده‌ای TypeScript و پیاده‌سازی بازگشتی برای تمامی اشیای تو در تو، می‌توان به سیستمی مشابه Vue.js دست یافت.

---

### محدودیت‌ها و کاربردهای Proxy

استفاده از Proxy در اکوسیستم React چندان رایج نیست، زیرا این کتابخانه ابزارهای ساده‌تری برای مدیریت وضعیت (State) دارد. بااین‌حال، دانستن این مفهوم مفید است، چرا که ممکن است در شرایط خاص کاربرد داشته باشد. من شخصاً در یک پروژه‌ی واقعی از Proxy استفاده کرده‌ام.

به‌طور کلی، Proxy برای موارد زیر بسیار مفید است:
- ایجاد سیستم‌های واکنشی (مانند آنچه در Vue.js پیاده‌سازی شده است)
- اعتبارسنجی مقادیر ورودی (مثلاً بررسی نوع داده‌ها)
- ثبت تغییرات و لاگ‌برداری از وضعیت شیء

یکی از مزایای Proxy این است که بسیار منعطف است و می‌توان آن را با هر ابزار دیگری ترکیب کرد. به‌عنوان مثال، می‌توان از Zod برای اعتبارسنجی مقادیر درون یک Proxy استفاده کرد، مشابه آنچه در zoxy انجام شده است.

---

### خلاصه:
‏✅ Proxy یک لفاف (Wrapper) است که اجازه می‌دهد رفتار یک شیء را تغییر دهیم.
✅ تغییر رفتار شیء از طریق تله‌ها (Traps) انجام می‌شود.




#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

### چگونه نوع یک ویژگی را در TypeScript استخراج کنیم؟

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

به‌عنوان مثال، User['name'] صرفاً یک ساختار عجیب نیست، بلکه یک ابزار کاربردی است که از تکرار غیرضروری جلوگیری کرده و کد را انعطاف‌پذیرتر می‌کند.

### این روش چگونه کار می‌کند؟
فرض کنید یک نوع (Type) یا رابط (Interface) به‌صورت زیر داریم:

type User = {  
  id: number;  
  name: string;  
  age: number;  
};  

interface Profile {  
  username: string;  
  email: string;  
}

اکنون می‌توانیم نوع یک ویژگی خاص را استخراج کنیم:

type UserName = User['name']; // string  
type EmailType = Profile['email']; // string  

‏TypeScript به سادگی به شیء مربوطه نگاه کرده و نوع کلید مشخص‌شده را بازمی‌گرداند. در صورتی که ساختار اولیه تغییر کند (مثلاً نوع name از string به number تغییر یابد)، تمام انواع مرتبط نیز به‌صورت خودکار به‌روز می‌شوند.

### چرا این روش مفید است؟
✅ جلوگیری از تکرار غیرضروری
به‌جای نوشتن string به‌صورت مستقیم، می‌توان از User['name'] استفاده کرد.

✅ همگام‌سازی خودکار انواع (Type Synchronization)
اگر نوع name تغییر کند، مقدار UserName نیز به‌طور خودکار تنظیم می‌شود و خطاهای ناخواسته جلوگیری خواهند شد.

### نتیجه
به این ترتیب، می‌توان انواع صحیح را از اشیا دریافت کرد**، حتی اگر در طول توسعه ساختار شیء تغییر کند. پس اگر با `User['name']` مواجه شدید، بدانید که این **یک روش هوشمندانه برای استخراج نوع ویژگی‌ها از اشیا است! 🚀


#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

### چه اتفاقی می‌افتد وقتی یک URL را وارد کرده و Enter را می‌زنید؟

با فشردن کلید Enter**، هزاران فرایند در پس‌زمینه آغاز می‌شوند تا صفحه‌ی موردنظر بارگذاری شود. بیایید ببینیم که از لحظه‌ی زدن **Enter تا نمایش سایت، چه مراحلی طی می‌شود:

### ۱. پردازش ورودی توسط مرورگر
مرورگر بلافاصله بررسی می‌کند که چه چیزی وارد شده است:
🔹 اگر متن معمولی (مانند "هوش مصنوعی چیست؟") باشد، مرورگر آن را به موتور جستجو (مانند Google یا Yandex) ارسال می‌کند.
🔹 اگر یک آدرس URL باشد (https://example.com)، مرورگر فرآیند بارگذاری سایت را آغاز می‌کند.

حالت‌های مختلف URL:
✔️ آدرس کامل (https://example.com/page) → مرورگر دقیقاً همین صفحه را باز می‌کند.
✔️ آدرس کوتاه (example.com) → مرورگر به‌طور خودکار https:// را اضافه می‌کند.
✔️ آدرس محلی (localhost:۳۰۰۰) → درخواست به سرور محلی ارسال می‌شود.

---

### ۲. جستجوی آدرس IP از طریق DNS
رایانه‌ها نام دامنه‌ها (example.com) را درک نمی‌کنند و فقط با آدرس‌های IP (مانند ۹۳.۱۸۴.۲۱۶.۳۴) کار می‌کنند. بنابراین مرورگر باید نام دامنه را به IP تبدیل کند.

#### 🔍 جستجو در حافظه کش (Cache)
مرورگر ابتدا بررسی می‌کند که آیا آدرس موردنظر قبلاً در حافظه کش ذخیره شده است یا نه:
✔️ ابتدا کش داخلی مرورگر بررسی می‌شود.
✔️ سپس کش سیستم‌عامل چک می‌شود.
✔️ اگر هنوز پیدا نشد، روتر (مودم) محلی ممکن است اطلاعات IP را داشته باشد.

#### 🌍 درخواست به سرور DNS
اگر هیچ کشی آدرس را نداشته باشد، مرورگر درخواست را به سرور DNS ارسال می‌کند:
1️⃣ ابتدا از DNS ارائه‌دهنده‌ی اینترنت (ISP) سؤال می‌کند.
2️⃣ اگر پاسخی دریافت نشود، درخواست به سرورهای ریشه (Root DNS) ارسال می‌شود.
3️⃣ این سرورها، مرورگر را به سرورهای دامنه‌ی .com هدایت می‌کنند، که در نهایت IP سایت موردنظر را برمی‌گرداند.

---

### ۳. برقراری ارتباط (TCP Handshake)
حالا که مرورگر آدرس IP را دارد، می‌تواند درخواست را ارسال کند. اما پیش از آن، باید یک اتصال امن و پایدار برقرار شود.

✅ این فرآیند مثل یک دست‌دادن سه‌مرحله‌ای است:
🔹 مرورگر: "سلام، سرور! می‌توانم ارتباط برقرار کنم؟"
🔹 سرور: "بله، آماده‌ام! بیا شروع کنیم."
🔹 مرورگر: "باشه، ارسال داده را آغاز می‌کنم!"

💡 اگر سایت از HTTPS استفاده کند، یک مرحله‌ی اضافی رمزگذاری TLS برای حفظ امنیت اطلاعات انجام می‌شود.

---

### ۴. ارسال درخواست HTTP به سرور
اکنون مرورگر یک درخواست HTTP ارسال می‌کند. این درخواست شامل موارد زیر است:
✔️ متد درخواست (GET، POST، PUT، DELETE و...)
✔️ هدرها (نوع مرورگر، سیستم‌عامل، فرمت‌های پشتیبانی‌شده و...)
✔️ کوکی‌ها (اطلاعات کاربری ذخیره‌شده در سایت)

📌 مثال یک درخواست HTTP:

GET /index.html HTTP/1.1  
Host: example.com  
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)  
Accept: text/html, application/xhtml+xml  
Connection: close  

🔸 سرور این درخواست را چگونه پردازش می‌کند؟
✔️ ابتدا، وب‌سرور (مثلاً Nginx یا Apache) درخواست را دریافت می‌کند.
✔️ سپس، اپلیکیشن سرور (مثلاً Node.js، PHP یا Python) تصمیم می‌گیرد که چه محتوایی برگرداند.
✔️ سرور صفحه HTML را همراه با CSS، JavaScript و تصاویر آماده کرده و پاسخ را ارسال می‌کند.

📌 مثال پاسخ سرور:

HTTP/1.1 200 OK  
Date: Mon, 17 Mar ۲۰۲۵ 14:10:34 GMT  
Content-Type: text/html; charset=UTF-8  
Content-Length: ۱۰۲۴۰  
Server: gws  
<محتوای صفحه HTML>  

---

### ۵. پردازش و نمایش صفحه در مرورگر
حالا که مرورگر پاسخ را دریافت کرده، فرآیند نمایش صفحه آغاز می‌شود—اما این بخش خودش داستان مفصلی دارد! 😉 🚀

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

Node Modules Inspector

ابزاری که pnpm را مستقیماً در مرورگر اجرا کرده، یک پکیج را "نصب" می‌کند و سپس وابستگی‌های آن را تجزیه و تحلیل می‌نماید. این ابزار نه‌تنها برای بررسی پکیج‌هایی که قبلاً استفاده کرده‌اید مفید است، بلکه می‌تواند در ساده‌سازی پروژه‌های شخصی نیز کمک کند
Anthony Fu


🔗https://node-modules.dev/
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

noUiSlider

یک اسلایدر سبک و در دسترس برای جاوا اسکریپت، با پشتیبانی از چند لمسی (Multi-touch) و کنترل از طریق صفحه‌کلید. این اسلایدر به‌طور کامل با استفاده از GPU انیمیشن‌سازی شده است، که حتی در دستگاه‌های قدیمی نیز عملکردی روان و سریع ارائه می‌دهد. بدون وابستگی به کتابخانه‌های خارجی بوده و برای طراحی‌های ریسپانسیو کاملاً ایده‌آل است.

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

چرا از Math.trunc به جای عملگر بیتی استفاده کنیم؟

چندین روش برای حذف بخش اعشاری اعداد وجود دارد، اما اخیراً مشاهده کرده‌ام که در برخی توضیحات، عملگرهای بیتی برای این کار توصیه می‌شوند. با این حال، این همیشه بهترین گزینه نیست و در اکثر موارد، Math.trunc انتخاب بهتری محسوب می‌شود.

### استفاده از عملگر بیتی `|` - یک ترفند جالب!
ابتدا به بررسی عملگر بیتی | بپردازیم. این عملگر مقدار یک عدد را با صفر از طریق "یا بیتی" مقایسه می‌کند که در نتیجه، قسمت اعشاری حذف می‌شود.

let num = 12.345;
let result = num | 0; // 12

در نگاه اول، این روش ساده و کارآمد به نظر می‌رسد، اما چند مشکل دارد:

🔹 محدودیت بازه عددی:
عملگرهای بیتی فقط با اعداد صحیح ۳۲ بیتی کار می‌کنند، بنابراین اعدادی که از بازه `2^31-1` تا `-2^31` خارج باشند، دچار تغییر خواهند شد.

🔹 کاهش خوانایی کد:
عملگر | 0 ممکن است برای برنامه‌نویسانی که با عملیات بیتی آشنا نیستند، نامفهوم و غیرمستقیم باشد.

---
### Math.trunc - روش ساده و قابل اطمینان
برخلاف عملگر بیتی، Math.trunc ویژه حذف بخش اعشاری عدد طراحی شده است و این کار را به‌درستی انجام می‌دهد:

let num = 12.345;
let result = Math.trunc(num); 
// 12

✅ مزایای این روش:

✔️ خوانایی بیشتر کد:
‏Math.trunc دقیقاً همان کاری را انجام می‌دهد که از نام آن مشخص است: حذف بخش اعشاری عدد، بدون نیاز به حدس و گمان.

✔️ عدم محدودیت در بازه عددی:
برخلاف عملگرهای بیتی، Math.trunc برای تمام اعداد، بدون در نظر گرفتن بزرگی آن‌ها، به‌درستی کار می‌کند.

### نتیجه‌گیری
هرچند عملگر بیتی یک ترفند جالب محسوب می‌شود، اما اگر هدف شما حذف دقیق و مطمئن بخش اعشاری عدد است، Math.trunc انتخاب بهتری است. وضوح، انعطاف‌پذیری و قابلیت اطمینان آن، در مقایسه با روش‌های غیرمعمول، برتری دارد.


#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

💠 فرازی از دعاهای روز عید فطر:

🔸خداوندا، بر ولی‌ خود حضرت مهدی درود بفرست.
همان که منتظر فرمان توست
و برای گشایش کارِ دوستانت، چشم به راه اوییم...
خداوندا، به دستان او ستم را بمیران
و عدالت را ظاهر کن
و زمین را با زندگانی طولانی او زینت ببخش.

🔹«اللَّهُمَّ صَلِّ عَلَى وَلِيِّكَ الْمُنْتَظِرِ أَمْرَكَ الْمُنْتَظَرِ لِفَرَجِ أَوْلِيَائِكَ اللَّهُمَّ ... أَمِتْ بِهِ الْجَوْرَ وَ أَظْهِرْ بِهِ الْعَدْلَ وَ زَيِّنْ بِطُولِ بَقَائِهِ الْأَرْض‏»

📚 اقبال الاعمال، ج۱، ص۲۸۴
🔗 [+لینک ویدیو]
#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript

### استفاده از الگوی `pipe` برای خوانایی بهتر کد

در مثال زیر، سه تابع برای پردازش متن تعریف شده‌اند:

const trim = (str) => str.trim(); 
const removeSpaces = (str) => str.replace(/\s+/g, ''); 
const capitalizeEachWord = (str) => 
    str.split(' ')
       .map(word => word.charAt(0).toUpperCase() + word.slice(1))
       .join(' '); 

#### روش اولیه (بدون `pipe`)

const result = removeSpaces(capitalizeEachWord(trim(" hello world "))); 
console.log(result);

✅ فرایند انجام شده در این کد:
۱. ابتدا، با استفاده از trim فاصله‌های ابتدایی و انتهایی حذف می‌شوند.
۲. سپس، اولین حرف هر کلمه با capitalizeEachWord بزرگ می‌شود.
۳. در نهایت، با removeSpaces تمام فاصله‌های میان کلمات حذف می‌شوند.

⛔️ مشکل این روش؟
وقتی تعداد توابع زیاد شود، تو در تو شدن فراخوانی‌ها خوانایی کد را کاهش می‌دهد و درک روند پردازش دشوار می‌شود.

---

#### روش بهینه با `pipe`

با استفاده از ترکیب توابع (function composition) و الگوی `pipe`، می‌توان کد را خواناتر و ساختاریافته‌تر کرد:

const pipe = (...fns) => (input) => fns.reduce((acc, fn) => fn(acc), input); 

const processText = pipe(trim, capitalizeEachWord, removeSpaces); 

console.log(processText(" hello world "));

✅ مزایای این روش:
✔️ کاهش پیچیدگی کد و حذف تو در تو شدن فراخوانی‌ها
✔️ خوانایی بهتر: ترتیب انجام عملیات به‌صورت گام‌به‌گام مشخص است
✔️ انعطاف‌پذیری بالا: می‌توان به‌راحتی توابع دیگری به فرایند اضافه کرد

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

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

### چرا اینقدر زیاد کار می‌کنیم؟ بررسی دلایل و راهکارها

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

بیایید بررسی کنیم چرا این اتفاق می‌افتد و چگونه می‌توانیم راهی برای خروج از این چرخه پیدا کنیم.

---

### ۱. یادگیری و احساس کمبود دانش

بسیاری از افراد، به‌ویژه در آغاز مسیر حرفه‌ای**، احساس می‌کنند **دانش‌شان کافی نیست. تلاش برای یادگیری هم‌زمان مهارت‌ها و مفاهیم جدید اغلب منجر به بار اطلاعاتی بیش از حد می‌شود.

🔹 راهکار:
- بپذیرید که یادگیری یک فرایند مداوم است، نه یک مقصد نهایی.
- روی مهارت‌های کلیدی تمرکز کنید و برای خود یک برنامه یادگیری تدریجی تنظیم کنید.
- این کار اضطراب را کاهش می‌دهد و باعث افزایش اعتمادبه‌نفس شما می‌شود.

---

### ۲. ضرب‌الاجل‌های فشرده و برآورد نادرست زمان

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

🔹 راهکار:
- اگر مهلت‌های تعیین‌شده غیرواقعی هستند**، با **مدیریت خود مذاکره کنید تا امکان تجدیدنظر در آن‌ها یا توزیع مجدد وظایف بررسی شود.
- اگر مذاکرات بی‌نتیجه باشند و این مشکل دائمی باشد، شاید بهتر باشد به دنبال محیط کاری جدیدی باشید که تعادل کار و زندگی را ارزشمند بداند.
- همچنین، به یاد داشته باشید که تعادل همیشه به معنای کار دقیقاً هشت ساعت در روز نیست. در ابتدای مسیر شغلی، اختصاص ساعت‌های بیشتری به یادگیری و پیشرفت منطقی است**، اما نباید به **فرسودگی شغلی منجر شود.

💡 نکته مهم:
اگر زمانی که برای کار صرف می‌کنید با میزان درآمد یا رضایت شخصی شما تناسب ندارد**، باید در این روند بازنگری کنید. به‌طور منظم **بررسی کنید که شرایط فعلی شما چقدر با اهداف و ارزش‌هایتان هماهنگ است.

---

### ۳. نداشتن سرگرمی و جایگزین‌های غیرکاری

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

🔹 راهکار:
- برای خود سرگرمی‌های لذت‌بخش پیدا کنید؛ مانند ورزش، هنر، پیاده‌روی، یا وقت‌گذرانی با دوستان.
- ایجاد مرز مشخص بین کار و زندگی شخصی**، انرژی شما را حفظ کرده و باعث افزایش انگیزه می‌شود.

---

### **۴. علاقه شدید به کار

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

🔹 راهکار:
- پروژه‌های جذاب را با کارهای معمولی‌تر ترکیب کنید تا از فرسودگی ذهنی جلوگیری شود.
- برای زمان استراحت و رشد شخصی برنامه‌ریزی کنید تا از تعادل میان اشتیاق کاری و استراحت اطمینان حاصل شود.

---

### ۵. فرهنگ بهره‌وری افراطی و فشار اجتماعی

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

🔹 راهکار:
- درک کنید که زمان‌های استراحت و رهایی از کار، سرمایه‌گذاری روی آینده شماست.
- دنبال بهره‌وری توهمی نباشید**؛ اگر کیفیت زندگی شما کاهش یافته، بهتر است **محدودیت‌هایی برای کار قائل شوید.
- قدرت استراحت را دست کم نگیرید. استراحت کافی باعث افزایش تمرکز، خلاقیت و کارایی شما در طولانی‌مدت می‌شود.

---

### نتیجه‌گیری

✅ کار بخش مهمی از زندگی ماست، اما همه زندگی نیست.
✅ هر فرد باید برای خود تعادلی بین موفقیت شغلی و رفاه شخصی پیدا کند.
✅ شناخت علائم فرسودگی شغلی و داشتن شهامت برای تغییر شرایط ضروری است.

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

#️⃣#discussion
👥@IR_javascript_group
🆔@IR_javascript

ویدیو دوبله شده در مورد بهینه‌سازی عملکرد Vue [+لینک]

عملکرد بهینه یکی از عوامل کلیدی در اپلیکیشن‌های مدرن تحت وب است. عملکرد ضعیف منجر به کاهش تعامل کاربران، کاهش نرخ تبدیل و در نهایت از دست دادن فرصت‌های تجاری می‌شود. این دوره به شما کمک می‌کند تا:

زمان بارگذاری و عملکرد اجرایی اپلیکیشن Vue.js خود را به‌طور چشمگیری بهبود دهید.
تکنیک‌های پیشرفته بهینه‌سازی که توسط متخصصان صنعت استفاده می‌شود را اجرا کنید.
مشکلات عملکردی را به‌صورت کارآمد اشکال‌زدایی و برطرف کنید.
تصمیمات معماری آگاهانه‌ای اتخاذ کنید که بر سرعت برنامه تأثیر می‌گذارد.
تجربه‌ای استثنایی برای کاربران از طریق بهینه‌سازی عملکرد ارائه دهید.

به ما بپیوندید و با تسلط بر بهینه‌سازی عملکرد Vue.js، اپلیکیشن‌های خود را به سطحی جدید از سرعت و کارایی برسانید.


🔗https://www.aparat.com/v/tdvpkja?playlist=17549421
#️⃣#tip #dub #vue
👥@IR_javascript_group
🆔@IR_javascript

سرفصل‌های دوره

فصل اول: تکنیک‌های عمومی بهینه‌سازی عملکرد

با استراتژی‌های پایه‌ای بهینه‌سازی مانند حذف کدهای بلااستفاده (Tree Shaking)، تقسیم کد (Code Splitting) و تصمیمات معماری که بر عملکرد تأثیر می‌گذارند، آشنا شوید. همچنین تکنیک‌های پیشرفته‌ای همچون بارگذاری تنبل (Lazy Hydration)، مجازی‌سازی لیست‌ها (List Virtualization) و جلوگیری از نشت حافظه (Memory Leak Prevention) را فرا بگیرید.

فصل دوم: بهینه‌سازی به‌روزرسانی کامپوننت‌ها

بهینه‌سازی‌های سطح کامپوننت را به‌طور عمیق بررسی کنید؛ از جمله ثبات propها، استفاده استراتژیک از v-once و v-memo و بهترین روش‌ها برای استفاده از computed properties به‌منظور کاهش رندرهای غیرضروری.

فصل سوم: بهینه‌سازی دریافت داده‌ها

الگوهای کارآمد دریافت داده را بیاموزید، از جمله درخواست‌های موازی، کشینگ در سمت کلاینت، استراتژی‌های پیش‌بارگذاری (Prefetching) و مدیریت هوشمندانه نرخ درخواست‌ها با Throttling و Debouncing برای ارائه تجربه کاربری بهینه.

فصل چهارم: اشکال‌زدایی و مانیتورینگ عملکرد

به‌صورت عملی با ابزارهای حرفه‌ای نظارت بر عملکرد آشنا شوید؛ از جمله Vite Bundle Analyzer، Chrome DevTools Performance Panel و Vue DevTools برای شناسایی و حل مشکلات عملکردی.

چه کسانی باید این دوره را بگذرانند؟

این دوره برای افراد زیر مناسب است:

توسعه‌دهندگان Vue.js که قصد دارند مهارت‌های خود را در زمینه بهینه‌سازی عملکرد ارتقا دهند.

مهندسان فرانت‌اند که روی پروژه‌های بزرگ Vue کار می‌کنند.

رهبران فنی و معماران نرم‌افزار که تصمیمات مهم در حوزه عملکرد اتخاذ می‌کنند.

توسعه‌دهندگانی که از سایر فریمورک‌ها به Vue.js مهاجرت می‌کنند.

پیش‌نیازهای دوره

آشنایی با مبانی Vue.js

درک اولیه از JavaScript مدرن

آشنایی با مفاهیم توسعه وب

در نسخه‌ی صد و سی و پنج کروم، امکان استایل‌دهی به عنصر نیتیو <select> اضافه شد.


🔗https://developer.chrome.com/blog/a-customizable-select
#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript

‏### MakeTypes و Quicktype: ایجاد انواع داده در یک کلیک

به‌تازگی با دو ابزار فوق‌العاده آشنا شدم که کار با تایپ‌ها در TypeScript را بسیار ساده‌تر می‌کنند. اگر مانند من از نوشتن دستی اینترفیس‌ها و انواع داده برای پاسخ‌های JSON در API خسته شده‌اید، این منابع برای شما یک کشف ارزشمند خواهند بود:

‏🔹 MakeTypes یک سرویس آنلاین کاربردی است که در چند ثانیه JSON را به تایپ‌های TypeScript تبدیل می‌کند.
‏
‏🔹 Quicktype نیز ابزار قدرتمند دیگری است که عملکردی مشابه دارد اما با قابلیت‌های بیشتر. این ابزار نه‌تنها از TypeScript پشتیبانی می‌کند، بلکه برای زبان‌های برنامه‌نویسی دیگر نیز قابل استفاده است.

### این ابزارها چگونه کار می‌کنند؟
هر دو ابزار امکان تولید خودکار تایپ‌ها از داده‌های JSON را فراهم می‌کنند. تنها کافی است JSON موردنظر خود را وارد کنید، فرمت خروجی را انتخاب کنید، و ابزار در لحظه کد تایپ‌شده را برای شما تولید می‌کند.

### مزایای کلیدی این ابزارها:
✅ صرفه‌جویی در زمان – دیگر نیازی به نوشتن دستی تایپ‌ها برای هر پاسخ API جدید نیست.
✅ کاهش خطاها – تولید خودکار تایپ‌ها احتمال خطاهای تایپی و عدم تطابق داده‌ها را به حداقل می‌رساند.

این ابزارها به‌ویژه برای توسعه‌دهندگان TypeScript که با APIهای مختلف کار می‌کنند، بسیار مفید و کاربردی هستند. 🚀

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript