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

🆔@IR_javascript
Download Telegram
اندازه واقعی یک بسته npm را پیدا کنید.

🔗https://pkg-size.dev/

#️⃣#tool
🆔@IR_javascript
‏اخیراً Stackblitz محصول جدیدی به نام WebContainers را عرضه کرده است که به توسعه دهندگان اجازه می دهد محیط های Node.js full stack را در داخل مرورگر ایجاد کنند که به سرعت بارگذاری می شود و همراه با VS Code، ترمینال NPM و موارد دیگر است.
وهمه این موارد در سمت کلاینت انجام میشه یعنی میشه node رو روی مرورگر نصب کرد 🤯

🔗https://webcontainers.io/guides/quickstart

#️⃣#npm_module
🆔@IR_javascript
‏PDFKit یک کتابخانه جاوااسکریپت است که برای ایجاد و ویرایش فایل‌های PDF استفاده می‌شود. این کتابخانه به عنوان یک ابزار قدرتمند برای تولید گزارشات، فاکتورها، اسناد و ... در قالب PDF مورد استفاده قرار می‌گیرد. PDFKit امکانات مختلفی برای طراحی و سفارشی‌سازی صفحات PDF ارائه می‌دهد و به کاربران امکان مدیریت فایل‌های PDF را با استفاده از جاوااسکریپت می‌دهد.
🔗https://pdfkit.org/

#️⃣#npm_module
🆔@IR_javascript
‏استفاده از JavaScript Web Bluetooth API برای تعامل با دستگاه های بلوتوث
‏Web Bluetooth API به برنامه های کاربردی وب اجازه می دهد تا از طریق مرورگر با دستگاه های بلوتوث نزدیک مانند سنسورها، مانیتورهای سلامت و چاپگرها تعامل داشته باشند


Web Bluetooth API به برنامه های کاربردی وب اجازه می دهد تا از طریق مرورگر با دستگاه های بلوتوث نزدیک مانند سنسورها، مانیتورهای سلامت و چاپگرها تعامل داشته باشند
navigator.bluetooth.requestDevice({
filters: [{ services: ['battery_service'] }]
})
.then(device => {
console.log('دستگاه بلوتوث پیدا شد:',device.name);
})
// سپس می توانید با دستگاه تعامل داشته باشید
.catch(error => {
console.erroг('خطا هنگام جستجوی دستگاه بلوتوث:', error);
});



🔗https://medium.com/@michael.brenner.software/bluetooth-with-javascript-a873607efee4

#️⃣#tip
🆔@IR_javascript
در خروجی چه خواهد بود?
Anonymous Quiz
45%
true
42%
false
13%
error
کتابخانه ای برای تولید داده های جعلی را در مرورگر و node.js

💌 مکان ها - آدرس های معتبر، کد پستی، نام خیابان ها، ایالت ها و کشورها
داده های مبتنی بر زمان - گذشته، حال، آینده، اخیر، به زودی ... هر زمان!
🌏 محلی سازی - زبانی را برای ایجاد نام ها، آدرس ها و شماره تلفن های واقعی انتخاب کنید.
💸 امور مالی - جزئیات حساب، تراکنش ها و آدرس های رمزنگاری شده
👠 محصولات - قیمت ها، نام محصولات، صفت ها و توضیحات
👾 اصطلاحات تخصصی هکر
🧍 نام ها - انسان های مجازی با هویت کامل آنلاین و آفلاین
🔢 اعداد - اعداد و رشته های تصادفی

🔗fakerjs.dev

#️⃣#npm_module
🆔@IR_javascript
کتابخانه Drag and Drop FormKit یک کتابخانه کوچک برای افزودن مرتب‌سازی و Drag and Drop به لیست‌ها در برنامه‌های شما است. این کتابخانه ساده، انعطاف‌پذیر، بدون وابستگی به فریم ورک و تنها ۴ کیلوبایت و فشرده‌شده است.

🔗drag-and-drop.formkit.com/

#️⃣#npm_module
🆔@IR_javascript
‏Iconify چارچوب آیکون چند منظوره
شامل بیش از 150 مجموعه آیکون با بیش از 200،000 آیکون .

🔗https://iconify.design/

#️⃣#npm_module
🆔@IR_javascript
استفاده از JavaScript Performance API برای اندازه گیری عملکرد برنامه وب

‏Performance API به شما این امکان را می دهد که عملکرد برنامه های وب را اندازه گیری کنید، مانند زمان لازم برای تکمیل عملیات خاص و بارگیری منابع، که می تواند برای بهینه سازی کد مفید باشد.
const startTime = performance.now();
// کدی که می خواهید عملکرد آنرا اندازه گیری کنید
const endТime = performance.now();
console.log('زمان بین شروع و اتمام فرآیند:', endТime - startTime,'MC');


#️⃣#tip
🆔@IR_javascript
👍2
استفاده از JavaScript History API برای مدیریت تاریخچه مرورگر
‏History API به شما این امکان را می دهد که تاریخچه مرورگر خود را با افزودن، تغییر یا حذف ورودی های تاریخ بدون بارگیری مجدد صفحه دستکاری کنید.
window.history.pushState({ page: 'newPage' }, '','new-page.html');


#️⃣#tip
🆔@IR_javascript
👍1
‏برنامه چک لیست Front-End ایده‌آل برای وب‌سایت‌های مدرن و توسعه‌دهندگان دقیق
🔗https://frontendchecklist.io/

#️⃣#tool
🆔@IR_javascript
راهی برای ارائه زیباتر نمودارهای ASCII
‏Mermaid به شما اجازه می دهد تا با استفاده از متن و کد، نمودار و فلوچارت ایجاد کنید.

🔗https://mermaid.js.org/

#️⃣#npm_module
🆔@IR_javascript
👍1
android-chrome.webm
192.1 KB
تأیید شماره تلفن در وب بصورت اتوماتیک را با WebOTP API

// Feature detection
if ('OTPCredential' in window) {
window.addEventListener('DOMContentLoaded', e => {
const input = document.querySelector('input[autocomplete="one-time-code"]');
if (!input) return;
// Cancel the WebOTP API if the form is submitted manually.
const ac = new AbortController();
const form = input.closest('form');
if (form) {
form.addEventListener('submit', e => {
// Cancel the WebOTP API.
ac.abort();
});
}
// Invoke the WebOTP API
navigator.credentials.get({
otp: { transport:['sms'] },
signal: ac.signal
}).then(otp => {
input.value = otp.code;
// Automatically submit the form when an OTP is obtained.
if (form) form.submit();
}).catch(err => {
console.log(err);
});
});
}



🔗https://developer.chrome.com/docs/identity/web-apis/web-otp
🔗https://developer.mozilla.org/en-US/docs/Web/API/OTPCredential

#️⃣#tip
🆔@IR_javascript
استفاده از IndexedDB برای ذخیره حجم زیاد داده ها بر روی client
‌‌‏IndexedDB یک پایگاه داده در سمت مرورگر است که این امکان را برای برنامه های کاربردی وب فراهم می کند تا مقادیر زیادی از داده های ساختار یافته را در سمت کلاینت ذخیره و دستکاری کنند.

برخی از مزیت های ‏IndexedDB نسبت به LocalStorage

1- برای LocalStorage، حداکثر فضای ذخیره‌سازی بین 5 تا 10 مگابایت بسته به مرورگر و نسخه آن است در حالی که برای IndexedDB معمولاً یا محدودیتی وجود ندارد یا محدودیت آنقدر زیاد است که در بیشتر موارد حتی ارزش نگرانی در مورد آن را ندارد.

2- پردازش LocalStorage همزمان هستند در حالی که IndexedDB ناهمزمان هستند.


#️⃣#tip
🆔@IR_javascript
👍1