جاوااسکریپت | JavaScript
506 subscribers
654 photos
139 videos
3 files
512 links
کانال @IR_javascript حاوی اطلاعات مفید در حوزه برنامه نویس فرانت که بصورت روزانه بروز می‌شود.
در این کانال شما به:
[1] مطالب تازه
[2] تحلیل‌های عمیق
[3] نکات آموزشی
[4] چالش
[5] ابزار و راهنمایی‌های کاربردی
دسترسی خواهید داشت.

🆔@IR_javascript
Download Telegram
‏php-node یک ماژول بومی برای Node است که امکان اجرای برنامه‌های PHP را در محیط Node فراهم می‌کند.

چرا باید چنین کاری کرد؟
برای مهاجرت دادن برنامه‌های قدیمی، ساخت اپلیکیشن‌های ترکیبی PHP و JavaScript، یا حتی اپلیکیشن‌های Node‌ای که به هر دلیلی نیاز دارند بخش‌هایی از منطق خود را از طریق PHP اجرا کنند—مثلاً در ارتباط با وردپرس، همان‌طور که در این مطلب مشاهده می‌کنیم.php-node یک ماژول بومی برای Node است که امکان اجرای برنامه‌های PHP را در محیط Node فراهم می‌کند.

چرا باید چنین کاری کرد؟
برای مهاجرت دادن برنامه‌های قدیمی، ساخت اپلیکیشن‌های ترکیبی PHP و JavaScript، یا حتی اپلیکیشن‌های Node‌ای که به هر دلیلی نیاز دارند بخش‌هایی از منطق خود را از طریق PHP اجرا کنند—مثلاً در ارتباط با وردپرس، همان‌طور که در این مطلب مشاهده می‌کنیم.

#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
2👍1
‌‏DevDocs.io وب‌سایتی است که دسترسی آسان و سریع به مستندات مربوط به فناوری‌ها و زبان‌های برنامه‌نویسی مختلف را فراهم می‌کند. در این سایت، مستندات مربوط به موضوعاتی مانند HTML، CSS، JavaScript، پایتون، روبی، پی‌اچ‌پی، ری‌اکت، ویو‌جی‌اس، نود‌جی‌اس و بسیاری فناوری دیگر گردآوری شده‌اند.

برتری اصلی DevDocs.io در این است که همه مستندات در یک پلتفرم یکپارچه گرد آمده‌اند و از طریق رابط کاربری ساده و کاربردی، به‌راحتی قابل جست‌وجو و مرور هستند. کاربران می‌توانند با استفاده از جست‌وجو یا دسته‌بندی‌ها، به سرعت به اطلاعات موردنیاز خود دست پیدا کنند.

خبر خوب اینکه این وب سایت امکان کش کردن مستندات را روی کش مرورگر میدهد و در زمان محدودیت اینترنت می توانید به راحتی به مستندات دسترسی داشته باشید

🔗 https://devdocs.io/offline
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
1
### تاب‌آوری توسعه‌دهندگان فرانت‌اند در شرایط جنگی و محدودیت اینترنت

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

۱. استفاده از مخازن داخلی (Mirror) برای نصب پکیج‌ها
در صورت قطع دسترسی به npm یا سایر ریجیستری‌های خارجی، از آینه‌های داخلی برای نصب پکیج‌ها بهره بگیرید.
🔗 [راهنمای دسترسی به مخزن داخلی npm در اینترنت ملی](https://roocket.ir/discuss/%D8%AF%D8%B3%D8%AA%D8%B1%D8%B3%DB%8C-%D8%A8%D9%87-%D9%85%D8%AE%D8%B1%D9%86-npm-%D8%AF%D8%B1-%D8%A7%DB%8C%D9%86%D8%AA%D8%B1%D9%86%D8%AA-%D9%85%D9%84%DB%8C-%D8%B1%D8%A7%D9%87-%D8%AD%D9%84/)

۲. ورود به سرویس هوش مصنوعی «اول‌ای‌آی» از پیش انجام شود
در زمان‌های بحرانی، دسترسی به حساب ممکن است با مشکل مواجه شود. بهتر است از همین حالا وارد حساب خود شوید.
🔗 [ورود به avalAI](https://chat.avalai.ir/chat)

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

۴. مستندات و پکیج‌های پراستفاده را از قبل دانلود و ذخیره کنید
کتابخانه‌ها و ابزارهایی مانند React، Vue، Next.js، Tailwind و همچنین مستندات مربوط به APIها و ابزارهای توسعه را آفلاین نگهداری کنید. استفاده از ابزارهایی مانند DevDocs [+پست قبلی ]می‌تواند مفید باشد.

۵. استفاده از پیام‌رسان «سروش پلاس» برای ارتباط با خارج از کشور
بر اساس گزارش‌ها، پیام‌رسان سروش امکان ارتباط کاربران خارج از کشور را فراهم کرده است. این گزینه در شرایط خاص می‌تواند جایگزینی موقت باشد.
🔗 [جزئیات بیشتر در زومیت](https://www.zoomit.ir/tech-iran/442373-soroush-plus-confirms-users-outside-of-iran/)

اگر تجربه و یا موضوع دیگری را سراغ دارید در بخش نظرات بیان کنید



#️⃣#discussion
👥@IR_javascript_group
🆔@IR_javascript
👎1
جاوااسکریپت | JavaScript pinned «### تاب‌آوری توسعه‌دهندگان فرانت‌اند در شرایط جنگی و محدودیت اینترنت در شرایطی مانند قطعی اینترنت جهانی یا اینترنت ملی، داشتن آمادگی از پیش می‌تواند مانع از توقف کامل روند توسعه شود. توصیه‌های زیر برای حفظ کارایی و ارتباط در این شرایط پیشنهاد می‌شود: ۱.…»
This media is not supported in your browser
VIEW IN TELEGRAM
امام سجاد علیه‌السلام عموی خود #عباس علیه السلام را چنین توصیف می‌فرماید:
💠 خدا عمویم عباس را رحمت کند که ایثار کرد و خود را به سختی افکند و در راه برادرش جانبازی کرد، تا آن‌که دست‌هایش از پیکر جدا گردید.
⚡️آن‌گاه خداوند به جای آن‌ها دو بال به وی عنایت فرمود که در بهشت همراه فرشتگان پرواز کند؛ همان‌سان که برای جعفر طیار قرار داد.
⚜️ عباس نزد خداوند مقامی دارد که همه شهدا در قیامت بدان غبطه می‌خورند.

#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript
10👎6😁1
This media is not supported in your browser
VIEW IN TELEGRAM
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
1
This media is not supported in your browser
VIEW IN TELEGRAM
هیهات منا الذله
🖤 سالروز شهادت حضرت اباعبدالله(ع)

🔗 https://t.me/motahari_ir/4452
#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript
12👎2
در نسخه‌ی اخیر مرورگر کروم، سرانجام مدل زبانی بزرگ «جِمینای نانو» همراه با رابط برنامه‌نویسی خلاصه‌ساز (Summarizer API) معرفی شده است.

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

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


#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
This media is not supported in your browser
VIEW IN TELEGRAM
امام سجاد عليه السلام فرمود:
⬅️«شكيبائى» نسبت به «ايمان» چـون سـر نسبت به پـيكر اسـت. و كسى كه «صبر» ندارد «ايمان» ندارد.

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

🔗 https://t.me/raefipourfans/125912
#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript
10👎3
نسخه‌ی صد و سی و هشتم مرورگر کروم منتشر شد.

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

#### • رابط برنامه‌نویسی هوش مصنوعی (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
👍2
Media is too big
VIEW IN TELEGRAM
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
👌1
NProgress

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

🔗https://rstacruz.github.io/nprogress/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
👍1👎1
### شبه‌کلاس 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
2👍1