android-chrome.webm
192.1 KB
تأیید شماره تلفن در وب بصورت اتوماتیک را با WebOTP API
🔗https://developer.chrome.com/docs/identity/web-apis/web-otp
🔗https://developer.mozilla.org/en-US/docs/Web/API/OTPCredential
#️⃣#tip
🆔@IR_javascript
// 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
IndexedDB یک پایگاه داده در سمت مرورگر است که این امکان را برای برنامه های کاربردی وب فراهم می کند تا مقادیر زیادی از داده های ساختار یافته را در سمت کلاینت ذخیره و دستکاری کنند.
برخی از مزیت های IndexedDB نسبت به LocalStorage
1- برای LocalStorage، حداکثر فضای ذخیرهسازی بین 5 تا 10 مگابایت بسته به مرورگر و نسخه آن است در حالی که برای IndexedDB معمولاً یا محدودیتی وجود ندارد یا محدودیت آنقدر زیاد است که در بیشتر موارد حتی ارزش نگرانی در مورد آن را ندارد.
2- پردازش LocalStorage همزمان هستند در حالی که IndexedDB ناهمزمان هستند.
#️⃣#tip
🆔@IR_javascript
👍1
استفاده از JavaScript Geolocation API برای دریافت اطلاعات موقعیت مکانی کاربر
Geolocation API به برنامه های کاربردی وب اجازه می دهد تا اطلاعات موقعیت مکانی کاربر را از طریق GPS یا روش های دیگر به دست آورند
#️⃣#tip
🆔@IR_javascript
Geolocation API به برنامه های کاربردی وب اجازه می دهد تا اطلاعات موقعیت مکانی کاربر را از طریق GPS یا روش های دیگر به دست آورند
navigator.geolocation.getCurrentPosition(function(position) {
console.log('latitude:', position.coords.latitude); console.log('longitude:', position.coords.longitude);
});
#️⃣#tip
🆔@IR_javascript
👍1
👍1
glMatrix یک کتابخانهی جاوااسکریپت برای انجام عملیات ریاضیاتی ماتریسی و وکتوری است. این کتابخانه برای توسعهدهندگان وب کاربرد دارد و به آنها امکان محاسبات پیچیدهی گرافیکی مانند ترسیم سهبعدی را میدهد.
🔗https://glmatrix.net/
#️⃣#npm_module
🆔@IR_javascript
🔗https://glmatrix.net/
#️⃣#npm_module
🆔@IR_javascript
در خروجی چه خواهد بود
Anonymous Quiz
29%
undefined ReferenceError
22%
lydia 21
24%
undefined undefined
20%
ReferenceError ReferenceError
4%
ReferenceError undefined
Moment.js یک کتابخانه JS عالی برای کار با تاریخ و زمان است
npm install moment --save
شی moment در Moment.js قابل تغییر است. این بدان معنی است که عملیاتی مانند add ، subtract یا set شی moment اولیه را تغییر می دهند. هنگام استفاده از Moment.js برای اولین بار، سناریوهایی مانند این ممکن است کمی گیچ کننده باشد:
🔗https://momentjs.com/docs/
#️⃣#npm_module
🆔@IR_javascript
npm install moment --save
شی moment در Moment.js قابل تغییر است. این بدان معنی است که عملیاتی مانند add ، subtract یا set شی moment اولیه را تغییر می دهند. هنگام استفاده از Moment.js برای اولین بار، سناریوهایی مانند این ممکن است کمی گیچ کننده باشد:
var a = moment('01-01-2016');
var b = a.add(1، 'week');
a.format();
"2016-01-08T00:00:00-06:00"
🔗https://momentjs.com/docs/
#️⃣#npm_module
🆔@IR_javascript
با خبر شدن از حرکت کاربر در Viewport و عناصر خاصی که در دید او قرار میگیرند
متداولترین کاربرد IntersectionObserver زمانی است که میخواهیم به محض ورود یک عنصر به Viewport برای آن یک افکت یا انیمیشن مشخص کنیم یا زمانی است که ویدئوها از دید کاربر خارج میشوند و ممکن است بخواهیم آن را متوقف کنیم یا بخواهیم ویدئو را به صورت شناور در بیاوریم. کاربردهای متعددی برای IntersectionObserver وجود دارد که بسته به نیاز و خلاقیت طراح سایت قابل استفاده هستند.
🔗https://rokaweb.ir/intersectionobserver/
#️⃣#tip
🆔@IR_javascript
متداولترین کاربرد IntersectionObserver زمانی است که میخواهیم به محض ورود یک عنصر به Viewport برای آن یک افکت یا انیمیشن مشخص کنیم یا زمانی است که ویدئوها از دید کاربر خارج میشوند و ممکن است بخواهیم آن را متوقف کنیم یا بخواهیم ویدئو را به صورت شناور در بیاوریم. کاربردهای متعددی برای IntersectionObserver وجود دارد که بسته به نیاز و خلاقیت طراح سایت قابل استفاده هستند.
🔗https://rokaweb.ir/intersectionobserver/
#️⃣#tip
🆔@IR_javascript
👍3
Capo.js ابزاری برای مرتب کردن <head> شما است. این بر اساس برخی تحقیقات هری رابرتز است که نشان می دهد چگونه چیزی به ظاهر ناچیز که در تگ <head> شما قرار دارد می تواند بارگذاری صفحه شما را تا 7 ثانیه کندتر کند! ازasync scripts، stylesheets و .. در صورت هم ریختگی میتواند عواقبی داشته باشد. Capo.js ترتیب خاصی را به شما نشان می دهد تا <head> و صفحه شما سریعتر شود
🔗https://frontendmasters.com/blog/capo-js-a-five-minute-web-performance-boost/
🔗https://rviscomi.github.io/capo.js/
#️⃣#tool
🆔@IR_javascript
🔗https://frontendmasters.com/blog/capo-js-a-five-minute-web-performance-boost/
🔗https://rviscomi.github.io/capo.js/
#️⃣#tool
🆔@IR_javascript
👍1