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

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

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

📚 اقبال الاعمال، ج۱، ص۲۸۴
🔗 [+لینک ویدیو]
#️⃣#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

ایجاد اپلیکیشن‌های وب دسترس‌پذیر با Vue

یک کتابخانه متن‌باز شامل کامپوننت‌های خام و بدون استایل که همراه با نمونه‌های متنوع و کاربردهای آماده ارائه می‌شود و می‌توان آن را مستقیماً در پروژه‌های شما ادغام کرد.

🔗https://reka-ui.com/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

ساخته‌شده توسط هوش مصنوعی با Three.js


کدنویسی وایب (Vibe Coding یا Vibecoding) یک تکنیک برنامه‌نویسی وابسته به هوش مصنوعی است که در آن، فرد مسئله را در چند جمله به‌عنوان یک پرومت برای یک مدل زبانی بزرگ (LLM) آموزش‌دیده در زمینه‌ی کدنویسی توصیف می‌کند. سپس، LLM کد نرم‌افزار را تولید می‌کند و نقش برنامه‌نویس از کدنویسی دستی به هدایت، آزمایش و اصلاح کد تولیدشده توسط هوش مصنوعی تغییر می‌یابد.

حامیان این روش معتقدند که Vibe Coding به برنامه‌نویسان آماتور اجازه می‌دهد بدون نیاز به آموزش و مهارت‌های عمیق مهندسی نرم‌افزار، نرم‌افزار تولید کنند.

🎮 هم‌اکنون بازی کنید:
summer-afternoon.vlucendo.com
🔗https://t.me/HamidrezaKaramianOfficial/2254
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

معرفی Motion برای Vue

‏Motion یک کتابخانه‌ی محبوب و قدرتمند برای انیمیشن است که بیشتر با React شناخته می‌شود، اما اکنون نسخه‌ی Vue آن نیز عرضه شده و کاملاً مجهز به تمام ویژگی‌ها است.

🔗https://motion.dev/docs/vue
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

اگر یک آرایه دارید که هر عنصر آن شامل یک مقدار computed است، بهتر است یک مقدار computed برای کل آرایه ایجاد کنید تا اینکه برای هر عنصر جداگانه یک مقدار computed داشته باشید.

### نمونه نامناسب

const rows = productRows.map(row => ({ 
  ...row,
  total: computed(() => row.price * row.qty),
}));

### نمونه بهینه

const computedRows = computed(() => 
  productRows.map(row => ({ 
    ...row, 
    total: row.price * row.qty,
  }))
);

با این روش، محاسبات بهینه‌تر انجام می‌شود و از ایجاد چندین مقدار computed غیرضروری جلوگیری خواهد شد.

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

ساده‌ترین روش برای نمایش «دیروز» در هر زبانی، استفاده از Relative TimeFormat است!

یکی از ابزارهای موردعلاقه من برای کار با تاریخ، Intl.RelativeTimeFormat است. این ابزار به شما امکان می‌دهد زمان نسبی را به‌صورت زیبا نمایش دهید، مانند: «۵ دقیقه پیش»، «دو روز بعد»، «فردا» — و همه این موارد به‌طور خودکار با توجه به تنظیمات زبانی کاربر انجام می‌شود!

### مثال پایه
فرض کنید می‌خواهیم زمان انتشار یک پست را نمایش دهیم:

const rtf = new Intl.RelativeTimeFormat('fa', { numeric: 'auto' });

console.log(rtf.format(-1, 'day')); // "دیروز"
console.log(rtf.format(2, 'week')); // "دو هفته بعد"

### پارامترهای کلیدی:
‏- 'fa' – زبان موردنظر که می‌توانید آن را به 'en'`، 'fr'، 'ja'` و ... تغییر دهید.
‏- `numeric: 'auto' – باعث می‌شود به‌جای «۱ روز پیش»، عبارت «دیروز» نمایش داده شود. مقدار پیش‌فرض این گزینه 'always' است، که در این صورت `format(-1, 'day') مقدار «۱ روز پیش» را برمی‌گرداند، نه «دیروز».

### پارامترهای متد `format`
✔️ آرگومان اول – عددی که مشخص می‌کند زمان چقدر از لحظه‌ی فعلی فاصله دارد.
✔️ آرگومان دوم – واحد زمانی مانند second`، `minute`، `hour`، `day`، `week`، `month`، `year.

### چند نمونه دیگر:

console.log(rtf.format(-3, 'month')); // "سه ماه پیش"
console.log(rtf.format(1, 'year')); // "سال آینده"

حالا دیگر نیازی به نوشتن توابع دستی برای نمایش «۵ دقیقه پیش» ندارید! می‌توانید به‌سادگی از Intl.RelativeTimeFormat استفاده کنید.

نظر شما درباره‌ی این ابزار چیست؟ تا به حال در پروژه‌هایتان از آن استفاده کرده‌اید؟

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

در هسته‌ی Nuxt قابلیت هیدراسیون تنبل (Lazy Hydration) اضافه شده است—پس دیگر نیازی به ساخت راهکارهای سفارشی نیست! اما بیایید قدم‌به‌قدم بررسی کنیم.

### 🚀 Vue 3.5 و ارتقای SSR
در Vue 3.5 SSR بهبود یافته و حالا کامپوننت‌های غیرهم‌زمان (Async Components) می‌توانند زمان هیدراته شدن خود را از طریق استراتژی hydrate در API `defineAsyncComponent()` کنترل کنند. مثلاً، می‌توان تعیین کرد که یک کامپوننت فقط هنگام نمایش در صفحه هیدراته شود:

import { defineAsyncComponent, hydrateOnVisible } from 'vue';

const AsyncComp = defineAsyncComponent({ 
  loader: () => import('./Comp.vue'), 
  hydrate: hydrateOnVisible()
});

### 🔥 Nuxt 3.16 و پشتیبانی از Delayed Hydration
📅 در ۷ مارس ۲۰۲۵ نسخه‌ی Nuxt 3.16 منتشر شد که شامل ویژگی‌های جدید، بهبود عملکرد، ابزارهای توسعه‌ی بهتر و... بود، اما مهم‌ترین قابلیت اضافه‌شده، Delayed Hydration است. توسعه‌دهندگان Nuxt در وبلاگ خود جزئیات این قابلیت را توضیح داده‌اند.

#### ✅ مثال: هیدراته شدن کامپوننت هنگام ورود به ویوپورت

<!-- کامپوننت تنها زمانی هیدراته می‌شود که در محدوده‌ی دید کاربر قرار بگیرد -->
<LazyExpensiveComponent hydrate-on-visible />

✅ حالا کامپوننت فقط وقتی در زون دید کاربر قرار بگیرد، لود و اجرا می‌شود—دیگر نیازی به نوشتن اسکریپت‌های پیچیده برای ردیابی و بارگذاری نیست.

🔹 همچنین می‌توان از hook جدید `hydrated` برای اجرای دستورات خاص پس از هیدراته شدن کامپوننت استفاده کرد:

<LazyComponent hydrate-on-visible @hydrated="onComponentHydrated" />

### 📌 چه خبر؟
🔹 این ویژگی تنظیمات مختلفی دارد که می‌توانید نحوه‌ی کارکرد آن را در مستندات Nuxt مطالعه کنید.
🔹 Nuxt به‌سرعت در حال پیشرفت است و وقت آن رسیده که این قابلیت را در محیط Production تست کنیم.
🔹 شاید وقتش رسیده که کامپوننت‌های سمت سرور (Server Components) را هم امتحان کنیم؟ (قابلیت آزمایشی nuxt-islands – اما این بحث را می‌گذاریم برای بعد 😉)

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

معمولاً برای گروه‌بندی یک آرایه بر اساس یک کلید خاص، از متد reduce استفاده می‌شود.
اما اکنون متدهای جدیدی مانند Object.groupBy و Map.groupBy در دسترس هستند که این فرآیند را بسیار ساده‌تر می‌کنند.

مثال در جاوااسکریپت:

const users = [
  { id: ۱، name: "Alex"، role: "admin" },
  { id: ۲، name: "Anna"، role: "user" },
];

const grouped = Object.groupBy(users, ({ role }) => role);

// نتیجه:
// {
//   admin: [{...}],
//   user: [{...}]
// }

این روش، کدی خواناتر و ساخت‌یافته‌تر ارائه می‌دهد و مناسبِ زمانی‌ست که بخواهید داده‌ها را بر اساس یک ویژگی مشخص دسته‌بندی کنید، بدون نیاز به نوشتن منطق دستی در reduce.


#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

هسته‌ی Jupyter برای javascript

‏Deno به‌صورت پیش‌فرض همراه با یک هسته‌ی Jupyter ارائه می‌شود که امکان نوشتن JavaScript و TypeScript را در محیط‌های تعاملی نوت‌بوک فراهم می‌سازد. در این محیط می‌توانید به‌سادگی از APIهای وب و Deno استفاده کرده و حتی بسته‌های npm را مستقیماً در نوت‌بوک خود وارد (import) کنید.

🔗https://docs.deno.com/runtime/reference/cli/jupyter/
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

### چرا باید از استفاده کنترل‌نشده از watch پرهیز کرد؟

#### یک. برهم خوردن جریان واکنشی (Reactive Flow)
استفاده از watch گاهی باعث پنهان شدن منطق واکنش‌گرایی می‌شود. برای مثال:

watch(() => userId.value, async (newId) => {
  const data = await fetchUserData(newId);
  userData.value = data;
});

در ظاهر ساده است، اما وقتی همین کد در چند مؤلفه با داده‌های مشابه یا اثرات جانبی دیگر تکرار شود، کنترل جریان داده‌ها سخت‌تر شده و رفتار برنامه غیرقابل پیش‌بینی می‌شود.

Vue معماری واکنش‌گرای یک‌طرفه (از داده به UI) را ترویج می‌دهد، اما watch اغلب برای تبدیل داده به داده استفاده می‌شود که جریان را پیچیده می‌کند و اشکال‌زدایی را دشوارتر می‌سازد.

#### دو. کاهش خوانایی و دشواری در نگه‌داری

وقتی در یک مؤلفه چندین watch به‌صورت زنجیره‌ای نوشته شوند، ساختار کد به‌شکل کلاف سردرگمی درمی‌آید که فهم آن زمان‌بر است:

watch(() => settings.value.theme, applyTheme);
watch(() => settings.value.language, loadTranslations);
watch(() => settings.value.notifications, updateNotifications);

این نوع پراکندگی منطق در `watch`ها:

- خوانایی کد را پایین می‌آورد
- بازسازی (refactor) و انتقال منطق به composableها را دشوار می‌کند

در مقابل، می‌توان این رفتارها را در یک computed مجتمع یا composable مشخص و مستقل تعریف کرد.

#### سه. تأثیر منفی بر عملکرد

مثلاً اگر یک شیء عمیق را با deep: true مانیتور کنید:

watch(settings, (newVal, oldVal) => {
  // مقایسه عمیق کل ساختار
}, { deep: true });

اگر settings شامل اشیاء یا آرایه‌های بزرگ باشد، عملکرد برنامه افت خواهد کرد. از طرفی، بسیاری از کاربردهای watch را می‌توان با computed حل کرد:

const isDarkTheme = computed(() => settings.value.theme === 'dark');

ویژگی‌های محاسبه‌شونده کش می‌شوند، سبک‌تر هستند و اجرای بهتری دارند.

#### چهار. خطر نشت حافظه (Memory Leak)

در مؤلفه‌هایی که با شرط v-if نمایش داده می‌شوند، اگر watch بدون مدیریت درست ایجاد شود:

<template>
  <div v-if="showComponent">
    <SomeComponent />
  </div>
</template>

و در SomeComponent بنویسیم:

watch(async() => someReactiveValue.value, await doSomething);

اگر این watch هنگام نابودی مؤلفه (unmount) لغو نشود، به‌مرور زمان منابع حافظه را اشغال کرده و باعث نشت حافظه می‌شود.

---

### ✅ راهکار پیشنهادی

قبل از استفاده از `watch`، ابتدا این پرسش را از خودتان بپرسید:

> «آیا می‌توان این مسئله را با `computed`، `props` یا emit حل کرد؟»

در بسیاری از موارد پاسخ *بله* است، و انتخاب راه‌حل‌های اعلانی (declarative) باعث خوانایی، عملکرد بهتر و مدیریت ساده‌تر خواهد شد.



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

سایت pollinations.ai یکی از رابط‌های برنامه‌نویسی (API) مناسب و ساده برای تولید تصاویر با استفاده از هوش مصنوعی است.

### مثال درخواست GET برای دریافت متن:

GET https://text.pollinations.ai/{prompt}

### نمونه استفاده در کد HTML:

<img 
src="https://image.pollinations.ai/prompt/A%20modern%20and%20vibrant%20digital%20illustration%20of%20a%20Telegram%20channel%20called%20%22IR_javascript%22,%20focused%20on%20web%20development,%20JavaScript,%20and%20coding.%20The%20scene%20features%20glowing%20code%20snippets,%20stylized%20browser%20windows,%20Iranian%20cultural%20motifs%20subtly%20integrated%20into%20the%20design,%20and%20futuristic%20UI%20elements.%20The%20background%20includes%20icons%20of%20JavaScript%20(JS),%20HTML,%20and%20CSS,%20with%20a%20dark%20mode%20theme%20and%20a%20sleek%20techy%20look.%20Emphasize%20community,%20learning,%20and%20innovation.%20Perfect%20for%20a%20tech%20advertisement%20poster." 
alt="تصویری زیبا" 
/>

در تصویر بالا، نمونه‌ای از تولید تصویر توسط مدل DALL-E نسخهٔ سوم نمایش داده شده که از متن داخل بلاک کد (prompt) استفاده کرده است.


#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript