برای کسانی که نمی‌دانند، در 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

در CSS**، قابلیت **@scope برای محدود کردن دامنه‌ی اعمال استایل‌ها معرفی شده است:

### 🔹 مثال:

<template> 
  <div class="box"> 
    <button class="button">Click me</button> 
  </div> 
</template> 

<style> 
@scope (.box) { 
  .button { 
    color: red; 
  } 
}
</style>

این ویژگی می‌تواند در برخی موارد مفید باشد، اما جایگزین کاملی برای Vue Scoped Styles نیست.

### 🔸 تفاوت با Vue Scoped:
- در Vue، اگر یک کامپوننت را در یک لیست رندر کنید، هر نمونه‌ی کامپوننت یک data-attribute منحصر‌به‌فرد دارد که استایل‌های آن را جدا نگه می‌دارد.
- اما در @scope**، دامنه‌ی استایل‌ها ممکن است **با سایر نمونه‌ها ترکیب شود و یکپارچگی آن حفظ نشود.

با این حال، @scope برای موارد ساده و Vanilla CSS یک قابلیت کاربردی و مفید محسوب می‌شود. 🎨

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

### کتاب‌ها

#### عمومی و مفید
- برنامه‌نویس عمل‌گرا (*The Pragmatic Programmer*) – اندرو هانت و دیوید توماس
- کد کامل (*Code Complete*) – استیو مک‌کانل

#### کدنویسی
- کد تمیز (*Clean Code*) – رابرت سی. مارتین
- بازآرایی کد (*Refactoring*) – مارتین فاولر

#### معماری نرم‌افزار
- طراحی اپلیکیشن‌های داده‌محور (*Designing Data-Intensive Applications*) – مارتین کِلِپمن
- تحلیل و طراحی شی‌ءگرا با کاربردها (*Object-Oriented Analysis and Design with Applications*) – گرادی بوچ

#### الگوهای طراحی
- الگوهای طراحی (*Design Patterns*) – اریک گاما و دیگران
- طراحی دامنه‌محور (*Domain-Driven Design*) – اریک ایوانز

#### ساختار داده و الگوریتم‌ها
- مقدمه‌ای بر الگوریتم‌ها (*Introduction to Algorithms*) – کورمن، لیسرسون، ریوت، و استاین
- شکستن مصاحبه کدنویسی (*Cracking the Coding Interview*) – گِیل لاکمن مک‌داول



#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

### آیا وب‌سایت شما واقعاً بین‌المللی است؟

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

🔹 بومی‌سازی (L10n) یعنی ترجمه محتوا و تطبیق آن با نیازهای یک مخاطب خاص.
🔹 بین‌المللی‌سازی (I18n) یعنی طراحی سیستم به‌گونه‌ای که از ابتدا امکان پشتیبانی از زبان‌ها، فرمت‌ها و ویژگی‌های فرهنگی مختلف را بدون تغییرات اساسی داشته باشد.

و اگر فکر می‌کنید که اضافه کردن فایل‌های ترجمه کافی است، باید بگوییم که این موضوع پیچیده‌تر از آن چیزی است که به نظر می‌رسد! بیایید نگاهی به مهم‌ترین چالش‌ها بیندازیم.

## پنج اشتباه رایج که مانع بین‌المللی شدن وب‌سایت شما می‌شود

### ۱. زبان فقط متن نیست!
✅ اشتباه: استفاده از رشته‌های ثابت درون کد (Hardcoded Strings).
✅ راه‌حل درست:
- استفاده از سیستم‌های مدیریت ترجمه، فایل‌های ترجمه، پایگاه‌های داده یا سرویس‌های تخصصی برای بومی‌سازی.
- اضافه کردن یک زبان جدید نباید نیازمند تغییر در کد باشد.
- یک عنصر ممکن است در زبان‌های مختلف طول و ساختار متفاوتی داشته باشد.

### ۲. متن‌ها می‌توانند دو برابر طولانی‌تر شوند
✅ در زبان‌های مختلف، طول کلمات متفاوت است. مثلاً:
- "Sign in" (انگلیسی) – هفت کاراکتر
- "Anmelden" (آلمانی) – نه کاراکتر
- "Kirjaudu sisään" (فنلاندی) – شانزده کاراکتر

📌 اگر عرض دکمه‌ها یا عناصر به‌صورت ثابت تعیین شده باشد، متن ممکن است جا نشود یا به‌هم ریخته نمایش داده شود.

✅ راه‌حل درست: استفاده از طراحی منعطف که امکان تغییر اندازه متن را فراهم کند.

### ۳. اعداد، تاریخ‌ها و ارزها در همه جا یکسان نیستند
📅 تاریخ‌ها: ۰۳/۰۷/۲۰۲۵ یعنی سوم ژوئیه یا هفتم مارس؟
- در ایالات متحده: هفتم مارس (MM/DD/YYYY)
- در اروپا: سوم ژوئیه (DD/MM/YYYY)

✅ راه‌حل درست: استفاده از سیستم‌های فرمت‌دهی خودکار که اطلاعات را متناسب با منطقه کاربر تنظیم می‌کنند، مانند:
- Intl.DateTimeFormat برای تاریخ
- Intl.NumberFormat برای اعداد و ارزها

### ۴. پیچیدگی‌های گرامری: حالت‌های دستوری و جمع‌ها
✅ در زبان انگلیسی جمع بستن ساده است:
- یک سیب → *1 apple*
- پنج سیب → *5 apples*

❌ اما در زبان‌هایی مانند روسی و فارسی چنین نیست:
- یک سیب → *۱ سیب*
- دو سیب → *۲ سیب*
- پنج سیب → *۵ سیب*

📌 اشتباه: جایگذاری ساده اعداد در متن بدون در نظر گرفتن قوانین گرامری، مثلاً:
> *"شما {{count}} سیب دارید."*

✅ راه‌حل درست: استفاده از مکانیزم‌های خاص برای تطبیق اعداد با کلمات، مثلاً:
- Intl.PluralRules در جاوا اسکریپت برای تعیین صحیح فرم کلمات بر اساس عدد.

### ۵. پشتیبانی از متن‌های راست به چپ (RTL)
برخی زبان‌ها مانند عربی، عبری و فارسی از راست به چپ (RTL) نوشته می‌شوند.

❌ اگر وب‌سایت فقط برای چیدمان چپ به راست (LTR) طراحی شده باشد:
- متن‌ها به‌درستی نمایش داده نمی‌شوند.
- دکمه‌های ناوبری در جای نادرست قرار می‌گیرند.
- آیکون‌ها (مانند فلش‌های "بازگشت" و "بعدی") ممکن است جهت اشتباهی داشته باشند.

✅ راه‌حل درست:
- تنظیم خودکار جهت متن متناسب با زبان کاربر.
- استفاده از سبک‌های منعطف (CSS) که به‌راحتی بین LTR و RTL تغییر کنند.

---

### بین‌المللی‌سازی فقط ترجمه نیست!
اگر می‌خواهید وب‌سایت شما برای کاربران سراسر دنیا واقعاً کارآمد باشد، باید به این موارد توجه کنید:
✅ سیستم منعطف ترجمه – عدم استفاده از رشته‌های ثابت در کد
✅ تطبیق رابط کاربری – متون ممکن است طولانی‌تر یا کوتاه‌تر از حد انتظار باشند
✅ نمایش صحیح اعداد، تاریخ‌ها و ارزها – فرمت‌دهی خودکار بر اساس منطقه
✅ رعایت گرامر زبان‌ها – پشتیبانی از حالت‌های مختلف دستوری و جمع‌بندی
✅ پشتیبانی از جهت نوشتار RTL – سازگاری کامل با زبان‌های راست‌به‌چپ

💬 شما چه چالش‌هایی در بین‌المللی‌سازی تجربه کرده‌اید؟ تجربه خود را در نظرات به اشتراک بگذارید!

#️⃣#discussion
👥@IR_javascript_group
🆔@IR_javascript

### مراحل رندرینگ صفحه وب: از کد تا یک رابط کاربری زیبا

در ادامه بررسی موضوع «چه اتفاقی می‌افتد وقتی یک URL را وارد کرده و Enter را فشار می‌دهید؟»

---

### ۱. تجزیه (Parsing) محتوای HTML
هنگامی که مرورگر یک سند HTML را دریافت می‌کند، فرآیند تجزیه آن آغاز می‌شود:

✅ ساخت درخت DOM (Document Object Model)
- تگ‌های HTML به اشیایی تبدیل شده و یک درخت از عناصر را تشکیل می‌دهند.
- هر تگ به یک گره (Node) در این درخت تبدیل می‌شود.

✅ تشخیص منابع خارجی
- مرورگر هنگام پردازش HTML، تگ‌هایی مانند <link>`، <script> و <img>` را شناسایی می‌کند.
- این تگ‌ها منابعی مانند فایل‌های CSS، اسکریپت‌های جاوا اسکریپت و تصاویر را مشخص می‌کنند که برای نمایش صفحه مورد نیازند.

---

### ۲. بارگذاری منابع (Resource Loading)
بارگیری منابع خارجی توسط مرورگر می‌تواند همزمان با تجزیه HTML انجام شود. این منابع به دو دسته تقسیم می‌شوند:

✅ منابع غیربلاک‌کننده (Non-blocking Resources)
- مانند تصاویر که به‌صورت موازی با پردازش HTML بارگیری می‌شوند و تأخیری در نمایش سایر بخش‌های صفحه ایجاد نمی‌کنند.

✅ منابع بلاک‌کننده (Blocking Resources)
- شامل اسکریپت‌هایی که بدون ویژگی‌های `async` یا `defer` بارگیری می‌شوند.
- بارگیری این اسکریپت‌ها پردازش HTML را متوقف می‌کند تا ترتیب اجرای کدها حفظ شود و ساختار یا رفتار صفحه تحت تأثیر قرار نگیرد.

---

### ۳. ساخت مدل اشیای CSS (CSSOM - CSS Object Model)
به محض دریافت فایل‌های CSS، مرورگر شروع به پردازش استایل‌ها می‌کند:

✅ ساخت درخت CSSOM
- تمامی قوانین و استایل‌های CSS به‌صورت یک درخت جداگانه سازماندهی می‌شوند.

✅ ایجاد درخت رندر (Render Tree)
- پس از تکمیل DOM و CSSOM**، این دو ترکیب شده و **درخت رندر (Render Tree) تشکیل می‌شود.
- این درخت برای نمایش بصری عناصر در صفحه استفاده می‌شود.

🔹 نکته: فرآیند ساخت CSSOM هم‌زمان (Synchronous) است، یعنی مرورگر تا تکمیل این مرحله سایر مراحل پردازش صفحه را متوقف می‌کند.

---

### ۴. محاسبه طرح‌بندی (Layout - یا کامپوزیشن)
پس از تشکیل Render Tree**، مرورگر موقعیت و اندازه‌ی دقیق هر عنصر را در صفحه تعیین می‌کند:

✅ **محاسبه موقعیت و ابعاد عناصر
- هر عنصر جایگاه و اندازه مشخصی روی صفحه دریافت می‌کند.
- این فرآیند Layout یا Compositing نام دارد.

---

### ۵. نقاشی (Painting) و نمایش نهایی صفحه
در مرحله پایانی، مرورگر عناصر را روی صفحه نمایش می‌دهد:

✅ رندر پیکسل‌ها
- درخت رندر به پیکسل‌های رنگی ترجمه شده و محتوا به‌صورت گرافیکی نمایش داده می‌شود.

✅ پردازش افکت‌ها و انیمیشن‌ها
- اگر صفحه شامل انیمیشن‌ها یا عناصر پویا باشد، مرورگر آن‌ها را پردازش کرده و نمایش می‌دهد.

---

### نتیجه‌گیری
همان‌طور که دیدیم، مرورگر طی مراحل گام‌به‌گام، مجموعه‌ای از HTML، CSS و JavaScript را به یک صفحه وب زیبا و کاربردی تبدیل می‌کند!



#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript