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

🆔@IR_javascript
Download Telegram
‏Tesseract.js یک کتابخانه جاوااسکریپت است که کلمات را به تقریبا هر زبانی از تصاویر استخراج می‌کند.

🔗https://tesseract.projectnaptha.com/

#️⃣#npm_module
🆔@IR_javascript
👍3
تبديل متن به صدا در جاوااسكريپت
‏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
This media is not supported in your browser
VIEW IN TELEGRAM
برنامه اسکرین شات به کد برای HTML/Tailwind CSS، React، Bootstrap یا Vue با استفاده از اسکرین شات یا پیوند به یک وب سایت تولید می کند.

‏GPT-4 Vision و DALL-E 3 استفاده می شود. شما باید یک کلید برای GPT-4 Vision داشته باشید.

🔗https://github.com/abi/screenshot-to-code

#️⃣#tool
🆔@IR_javascript
👍1
پوشش در CSS با استفاده از ویژگی mask

این ویژگی مانند background تعریف می شود
 mask: url("../img/shape.png") center/cover no-repeat;

در mask-image تصویری را به عنوان لایه ماسک برای عنصر تنظیم می کنیم
#️⃣#tip #css
🆔@IR_javascript
👍2
intro-image.gif
17.1 MB
‏AR.js یک کتابخانه سبک برای واقعیت افزوده (AR) در وب است که شامل ویژگی‌هایی مانند Image Tracking مبتنی بر موقعیت و نشانگر می‌شود.
يعني مي تواند AR را بر روي يك نشانگر و يا يك لوكيشن جغرافيايي ست كند و هر زمان دوربين تلفن همراه روي آن نشانگر و يا محل قرار گرفت AR نمايش داده مي شود.

🔗https://ar-js-org.github.io/AR.js-Docs/

#️⃣#npm_module
🆔@IR_javascript
ساخت حالت شیشه ای برای المان ها

🔗https://hype4.academy/tools/glassmorphism-generator

#️⃣#tool
🆔@IR_javascript
👍1
Vibration API in JavaScript

در صورت وجود این سخت افزار روی دیوایس کلاینت ارتعاش رخ خواهد داد و اگر دستگاه از لرزش پشتیبانی نکند، این روش هیچ ارور و یا مشکلی را در کد شما ایجاد نمی کند. در زمان فراخوانی الگوی ارتعاش قبلی متوقف می‌شود و به جای آن الگوی جدید شروع می‌شود.
navigator.vibrate(500); 
// device will vibrate for 500ms

🔗https://developer.mozilla.org/en-US/docs/Web/API/Navigator/vibrate

#️⃣#tip
🆔@IR_javascript
👍1
‏JS Console Bot يك ربات تلگرامي هست كه می تواند به یک چت متصل شود. به پیام ها گوش می دهد و کد هاي javascript را اجرا کند.


🔗https://t.me/okjs_bot
🔗https://github.com/OleksiyRudenko/jsconsole-bot

#️⃣#tool
🆔@IR_javascript
👍1👎1
This media is not supported in your browser
VIEW IN TELEGRAM
سوپر ماریو تعاملی - انیمیشن Super Mario که با استفاده از SCSS و جاوا اسکریپت (بدون استفاده از three.js و يا canvas) ساخته شده است. کنترل با استفاده از صفحه کلید انجام می شود

🔗https://codepen.io/merchedev/pen/BaYqyNx

#️⃣#code
🆔@IR_javascript
استفاده از Gamepads و Joysticks در جاوا اسکریپت
گیم‌پدهای این روزها بسیار محبوب هستند، و بنابراین جای تعجب نیست که سطحی از پشتیبانی در جاوا اسکریپت برای این موضوع وجود داشته باشد. البته این موضوع بین مرورگرهای مختلف بسیار متغیر است.

window.addEventListener("gamepadconnected", (e) => {
console.log(
"Gamepad connected at index %d: %s. %d buttons, %d axes.",
e.gamepad.index,
e.gamepad.id,
e.gamepad.buttons.length,
e.gamepad.axes.length,
);
});


🔗https://beej.us/blog/data/javascript-gamepad/
🔗https://developer.mozilla.org/en-US/docs/Web/API/Gamepad

#️⃣#tip
🆔@IR_javascript
👍1🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
‏splitting.js — کتابخانه جاوااسکریپت برای تقسیم یک المان بر اساس کلمات، حروف، فرزندان و موارد دیگر


🔗https://splitting.js.org/

#️⃣#npm_module
🆔@IR_javascript
👍3
This media is not supported in your browser
VIEW IN TELEGRAM
اشتراک NES
فیلد ورودی آدرس ایمیل سبک Super Mario با استفاده از jQuery و Splitting.js پیاده سازی شده است.

🔗https://codepen.io/cobra_winfrey/pen/OJVJJoj

#️⃣#code
🆔@IR_javascript
👍2😁1
‏Drizzle یک نوع مدرن ORM TypeScript است که می توانید در پروژه بعدی خود از آن استفاده کنید. وزن آن سبک و فقط 7.4 کیلوبایت است minified + gzipped شده است، shakeable با دقیقا 0 وابستگی است.

‏Drizzle در هر runtime اصلی جاوا اسکریپت مانند NodeJS، Bun، Deno، Cloudflare Workers، توابع Supabase، هر runtime Edge و حتی در مرورگرها کار می کند.

در ضمن عمکرد و پرفورمنس مناسب تری نسبت به prisma دارد که در لینک زیر به مقایسه این دو پرداخته است

🔗https://orm.drizzle.team/

#️⃣#npm_module
🆔@IR_javascript
دسترسی به جهت‌گیری دستگاه در جاوااسکریپت
window.addEventListener('deviceorientation', handleOrientation);

function handleOrientation(event) {
const alpha = event.alpha;
const beta = event.beta;
const gamma = event.gamma;
// Do stuff...
}


🔗https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation

#️⃣#tip
🆔@IR_javascript
👍3🤯1