۷ API وب جاوا اسکریپت دیگر برای ساخت وب‌سایت‌های آینده‌نگر که نمی‌دانستید 🤯

به آینده خوش آمدید! این دومین مقاله در مورد APIهای وب جاوا اسکریپت آینده نگر، بنابراین اگر اولین مورد را نخوانده اید، به شما توصیه می شود این کار را در اینجا انجام دهید

در اینجا 7 مورد دیگر وجود دارد APIهای وب جاوا اسکریپت پیشرفته برای افزودن حسی مسحور کننده به پروژه های خود تا کاربران را با پول خود شریک کنید 💰

1. گفتار وب

را Web Speech API به شما امکان می دهد داده های صوتی را در برنامه های وب قرار دهید. را Web Speech API دارای دو بخش: SpeechSynthesis (متن به گفتار) و SpeechRecognition (تشخیص گفتار ناهمزمان)

// Speech Synthesis
const synth = window.speechSynthesis;
const utterance = new SpeechSynthesisUtterance("Hello World");
synth.speak(utterance);

// Speech Recognition
const SpeechRecognition =
  window.SpeechRecognition ?? window.webkitSpeechRecognition;

const recognition = new SpeechRecognition();
recognition.start();
recognition.onresult = (event) => {
  const speechToText = event.results[0][0].transcript;
  console.log(speechToText);
};

یادداشت

1. بااینکه سنتز گفتار توسط تمام مرورگرهای اصلی پشتیبانی می شود پوشش 96 درصد، تشخیص گفتار هنوز برای استفاده در تولید فقط کمی زود است پوشش 86 درصد.

2. را API نمی توان بدون تعامل کاربر استفاده کرد (به عنوان مثال: click، keypress، و غیره).

2. مشاهده صفحه

را API مشاهده صفحه به شما امکان می دهد بررسی کنید که آیا صفحه برای کاربر قابل مشاهده است یا خیر. وقتی می‌خواهید یک ویدیو را متوقف کنید، این کار مفید است.

2 روش برای انجام این بررسی وجود دارد:

// Method 1
document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "visible") {
    document.title = "Visible";
    return;
  }
  document.title = "Not Visible";
});

// Method 2
window.addEventListener("blur", () => {
  document.title = "Not Visible";
});
window.addEventListener("focus", () => {
  document.title = "Visible";
});

تفاوت بین این دو روش در این است که در صورت شما روش دوم فعال می شود به یک برنامه دیگر یا یک برگه دیگر بروید، در حالی که اولین مورد فعال خواهد شد فقط در صورتی که به برگه دیگری بروید.

3. شتاب سنج

را API شتاب سنج به شما امکان دسترسی به داده های شتاب از دستگاه

از این می توان برای ایجاد بازی هایی استفاده کرد که از کنترل حرکت دستگاه یا اگر کاربر دستگاه را تکان دهد، تعامل را اضافه کنید، امکانات بی پایان هستند!

const acl = new Accelerometer({ frequency: 60 });

acl.addEventListener("reading", () => {
  const vector = [acl.x, acl.y, acl.z];
  const magnitude = Math.sqrt(vector.reduce((s, v) => s + v * v, 0));
  if (magnitude > THRESHOLD) {
    console.log("I feel dizzy!");
  }
});

acl.start();

می توانید درخواست کنید شتاب سنج مجوز با استفاده از:

navigator.permissions.query({ name: "accelerometer" }).then((result) => {
    if (result.state === "granted") {
      // now you can use accelerometer api
    } 
  });

4. موقعیت جغرافیایی

را API مکان جغرافیایی به شما امکان دسترسی به موقعیت مکانی کاربر را می دهد.

این می تواند بسیار مفید باشد اگر شما در حال ساخت هر چیزی مرتبط با آن هستید نقشه ها یا خدمات مبتنی بر مکان.

navigator.geolocation.getCurrentPosition(({ coords }) => {
  console.log(coords.latitude, coords.longitude);
});

می توانید درخواست کنید موقعیت جغرافیایی مجوز با استفاده از:

navigator.permissions.query({ name: "geolocation" }).then((result) => {
    if (result.state === "granted") {
      // now you can use geolocation api
    } 
  });

5. کارمند وب

کارگران وب اجرای یک عملیات اسکریپت در یک رشته پس زمینه جدا از رشته اجرای اصلی یک برنامه وب را امکان پذیر می کند. مزیت این کار این است که پردازش پرزحمت را می توان در یک رشته جداگانه انجام داد و به کار اصلی (معمولاً UI) رشته بدون مسدود شدن/کاهش سرعت اجرا شود.

// main.js
const worker = new Worker("worker.js");
worker.onmessage = (e) => console.log(e.data);
worker.postMessage([5, 3]);

// worker.js
onmessage = (e) => {
  const [a, b] = e.data;
  postMessage(a + b);
};

6. تغییر اندازه ناظر

را تغییر اندازه Observer API به شما امکان می دهد اندازه یک عنصر را مشاهده کنید و تغییرات را به راحتی مدیریت کنید.

این فوق العاده مفید است زمانی که شما یک نوار کناری قابل تغییر اندازه.

const sidebar = document.querySelector(".sidebar");
const observer = new ResizeObserver((entries) => {
  const sidebar = entries[0];
  //Do something with the element's new dimensions
});
observer.observe(sidebar);

7. اطلاع رسانی

آه، اطلاعیه! را پاپ آپ های کوچک آزار دهنده (یا حباب های دوپامین، بر اساس جایی که در طیف قرار دارید).

را API اطلاع رسانیهمانطور که از نام آن پیداست، به شما امکان می دهد اعلان هایی را برای آزار کاربران ارسال کنید (آن را با API مشاهده صفحه تا بیشتر اذیتشون کنم😈)

Notification.requestPermission().then((permission) => {
  if (permission === "granted") {
    new Notification("Hi there!", {
      body: "Notification body",
      icon: "https://tapajyoti-bose.vercel.app/img/logo.png",
    });
  }
});

یادداشت جانبی

برخی از API ها ذکر شده در بالا هنوز در مرحله آزمایشی هستند و توسط همه مرورگرها پشتیبانی نمی شوند. بنابراین، اگر می خواهید از آنها در تولید استفاده کنید، باید بررسی کنید که آیا مرورگر آنها را پشتیبانی می کند یا خیر

مثلا:

if ("SpeechRecognition" in window || "webkitSpeechRecognition" in window) {
  // Speech Recognition is supported
}

این همه مردمی! 🎉

نیاز به یک فریلنسر توسعه فرانت اند با رتبه برتر برای از بین بردن مشکلات توسعه خود؟ با من در Upwork تماس بگیرید

می خواهید ببینید روی چه چیزی کار می کنم؟ وب سایت شخصی و GitHub من را بررسی کنید

می خواهید وصل شوید؟ در لینکدین با من تماس بگیرید

من را در اینستاگرام دنبال کنید تا ببینید اخیراً در حال انجام چه کاری هستم.

وبلاگ های من را دنبال کنید Tidbits جدید هر دو هفته در Dev

سوالات متداول

اینها چند سوال متداول است که من میپرسم. بنابراین، من به این امیدوارم سوالات متداول بخش مشکلات شما را حل می کند

1. من یک مبتدی هستم، چگونه باید Front-End Web Dev را یاد بگیرم؟
   به مقالات زیر نگاه کنید:

   1. نقشه راه توسعه Front End
   2. ایده های پروژه Front End

2. آیا شما من را راهنمایی می کنید؟

   با عرض پوزش، من در حال حاضر تحت فشار زیادی هستم و وقت ندارم کسی را راهنمایی کنم.