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

🔗 [+لینک ویدیو]
#️⃣#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

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

اگر فکر می‌کنید که طراحی واکنش‌گرا برای تمام مرورگرها کار سختی است، پس بهتر است سعی کنید یک ایمیل طراحی کنید که در 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