با خبر شدن از حرکت کاربر در 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
کتابخانه tracking.js الگوریتم های مختلف و تکنیک های بینایی ماشین را به محیط مرورگر می آورد. با استفاده از مشخصات مدرن HTML5، این کتابخانه ردیابی رنگ، تشخیص چهره و موارد دیگر را به صورت real time ارائه می دهد. همه این ها با یک هسته سبک و رابط کاربری ساده و قابل فهم (حدود 7 کیلوبایت) است.
🔗https://trackingjs.com/
#️⃣#npm_module
🆔@IR_javascript
🔗https://trackingjs.com/
#️⃣#npm_module
🆔@IR_javascript
👍1
Postgres سبک درچارچوب WASM برای مرورگر، Node.js، Bun و Deno
می تواند هم به عنوان یک پایگاه داده در حافظه مموری و هم در سیستم فایل در (Node/Bun) یا indexedDB (مرورگر) استفاده شود.
🔗https://github.com/electric-sql/pglite
#️⃣#npm_module
🆔@IR_javascript
می تواند هم به عنوان یک پایگاه داده در حافظه مموری و هم در سیستم فایل در (Node/Bun) یا indexedDB (مرورگر) استفاده شود.
🔗https://github.com/electric-sql/pglite
#️⃣#npm_module
🆔@IR_javascript
👍1
بررسی املا
ویژگی spellcheck به مرورگر می‌گوید که درست بودن یا نبودن املا و دستور زبان در متن را بررسی کند. این ویژگی برای تگ‌های input یا textarea و همچنین برای عناصری که دارای مجموعه ویژگی contenteditable هستند اعمال می‌شود.
می‌توانید از ::Spelling-error برای استایل دادن به بخش متن غلط املایی استفاده کنید.
#️⃣#tip #css
🆔@IR_javascript
ویژگی spellcheck به مرورگر می‌گوید که درست بودن یا نبودن املا و دستور زبان در متن را بررسی کند. این ویژگی برای تگ‌های input یا textarea و همچنین برای عناصری که دارای مجموعه ویژگی contenteditable هستند اعمال می‌شود.
می‌توانید از ::Spelling-error برای استایل دادن به بخش متن غلط املایی استفاده کنید.
::spelling-error {
background-color: yellow;
}
🔗https://developer.mozilla.org/en-US/docs/Web/CSS/::spelling-error#️⃣#tip #css
🆔@IR_javascript
👍1
از ScanApp برای اسکن کدهای QR یا انواع مختلف بارکدها در مرورگر وب خود با استفاده از دوربین یا تصاویر روی دستگاه استفاده کنید. اسکن در رایانه شخصی، مک، اندروید یا IOS پشتیبانی می شود.
🔗https://github.com/mebjas/html5-qrcode
#️⃣#npm_module
🆔@IR_javascript
🔗https://github.com/mebjas/html5-qrcode
#️⃣#npm_module
🆔@IR_javascript
👍1
عنصر <meter> در عمل
🔗https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter
#️⃣#tip #HTML
🆔@IR_javascript
🔗https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter
#️⃣#tip #HTML
🆔@IR_javascript
👍1
استفاده از JavaScript FileReader API برای خواندن فایل ها در سمت کلاینت
FileReader API به برنامه های کاربردی وب اجازه می دهد تا محتویات فایل های سمت سرویس گیرنده را بدون ارسال فایل ها به سرور بخوانند. این می تواند برای پردازش فایل های متنی، تصاویر و سایر فایل های رسانه ای در سمت کلاینت مفید باشد.
#️⃣#tip
🆔@IR_javascript
FileReader API به برنامه های کاربردی وب اجازه می دهد تا محتویات فایل های سمت سرویس گیرنده را بدون ارسال فایل ها به سرور بخوانند. این می تواند برای پردازش فایل های متنی، تصاویر و سایر فایل های رسانه ای در سمت کلاینت مفید باشد.
#️⃣#tip
🆔@IR_javascript
👍1
استفاده از JavaScript Animation API برای ایجاد انیمیشن در وب
Animation API به شما امکان می دهد با استفاده از جاوا اسکریپت انیمیشن ها را در صفحات وب ایجاد کنید، که می تواند تجربه کاربر را بهبود بخشد و توجه را به عناصر خاصی جلب کند.
#️⃣#tip
🆔@IR_javascript
Animation API به شما امکان می دهد با استفاده از جاوا اسکریپت انیمیشن ها را در صفحات وب ایجاد کنید، که می تواند تجربه کاربر را بهبود بخشد و توجه را به عناصر خاصی جلب کند.
#️⃣#tip
🆔@IR_javascript
👍1
Tesseract.js یک کتابخانه جاوااسکریپت است که کلمات را به تقریبا هر زبانی از تصاویر استخراج می‌کند.
🔗https://tesseract.projectnaptha.com/
#️⃣#npm_module
🆔@IR_javascript
🔗https://tesseract.projectnaptha.com/
#️⃣#npm_module
🆔@IR_javascript
👍3
تبديل متن به صدا در جاوااسكريپت
SpeechSynthesis یک API گفتار وب است که برای تبديل متن به گفتار استفاده می شود.
🔗https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance
#️⃣#tip
🆔@IR_javascript
SpeechSynthesis یک API گفتار وب است که برای تبديل متن به گفتار استفاده می شود.
// Create a SpeechSynthesisUtterance
const utterance = new SpeechSynthesisUtterance("Welcome to this tutorial!");
// Select a voice
const voices = speechSynthesis.getVoices();
utterance.voice = voices[10]; // Choose a specific voice
// Speak the text
speechSynthesis.speak(utterance);
🔗https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance
#️⃣#tip
🆔@IR_javascript
👍1