جاوااسکریپت | JavaScript

237 views_, 16:32

1:29

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

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

❤12👎3🤬2

253 views_, 16:57

درک تفاوت بین 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

👍1👏1

379 views_, 16:34

Chroma.js

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

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

281 views_, 16:36

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

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

👏1

282 views_, 16:36

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

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

👍4

641 views_, 14:18

0:45

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

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

❤10👎1🥰1🤬1

249 views_, 09:50

⚫️ Gridstack.js

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

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

🔥3👍2

450 views_, 16:32

0:26

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

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

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

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

❤11👎8👍2🤬1

273 views_, 11:10

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

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

👍1

267 views_, 16:36

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

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

🔥4

266 views_, edited 11:01

1:41

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

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

❤15

269 views_, edited 11:15

‏**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

👍4

387 views_, 15:36

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

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

👍1

243 views_, 15:36

The Proxy object enables you to create a proxy for another object, which can intercept and redefine fundamental operations for that object.

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

در 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

MDN Web Docs

Proxy - JavaScript | MDN

🔥2

448 views_, 16:34

### چگونه نوع یک ویژگی را در 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

237 views_, 16:35

نتایج نظرسنجی State of Vue.js ۲۰۲۵ منتشر شد.
اطلاعات زیادی در آن وجود دارد و باید دقیق‌تر بررسی شود.

اما یکی از موارد جالب این است که "کامپوزیبل‌های سفارشی" (یا همان رف‌های ماژولار/گلوبال) اکنون نیمی از سهم Pinia را به خود اختصاص داده‌اند.
به نظر می‌رسد که توسعه‌دهندگان هر روز هوشمندتر می‌شوند! 🚀

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

402 views_, 16:36