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

با تغییر سریع فناوری‌ها، توسعه‌دهندگان محصولات جدید باورنکردنی ارائه می‌کنند ابزار و API ها. اما دیده شده است که از بیش از 100 API، فقط 5% از آنها به طور فعال توسط توسعه دهندگان استفاده می شود.

بیایید نگاهی به برخی از موارد مفید بیاندازیم API های وب که می تواند به شما کمک کند تا وب سایت خود را به ماه افزایش دهید!🌕🚀

1. Screen Capture API

این Screen Capture APIهمانطور که از نام آن پیداست، به شما امکان می دهد تا از محتویات یک صفحه عکس بگیرید و فرآیند ساخت a را انجام دهید ضبط کننده صفحه یک تکه کیک.

شما نیاز به یک ویدئو عنصر برای نمایش صفحه گرفته شده این شروع کنید دکمه شروع خواهد شد عکسی که از صفحه ی اسکرین گرفته میشود.

<video id="preview" autoplay>
  Your browser doesn't support HTML5.
</video>
<button id="start" class="btn">Start</button>

const previewElem = document.getElementById("preview");
const startBtn = document.getElementById("start");

async function startRecording() {
  previewElem.srcObject =
    await navigator.mediaDevices.getDisplayMedia({
      video: true,
      audio: true,
    });
}

startBtn.addEventListener("click", startRecording);

2. Web Share API

این Web Share API به شما امکان اشتراک گذاری می دهد متن، پیوندها، و حتی فایل ها از صفحه وب به برنامه های دیگر بر روی دستگاه نصب شده است.

async function shareHandler() {
  navigator.share({
    title: "Tapajyoti Bose | Portfolio",
    text: "Check out my website",
    url: "https://tapajyoti-bose.vercel.app/",
  });
}

توجه داشته باشید: برای استفاده از Web Share API، شما نیاز به تعامل از جانب کاربر دارید. به عنوان مثال، الف دکمه کلیک کنید یا الف رویداد لمسی.

3. Intersection Observer API

این Intersection Observer API به شما اجازه می دهد تشخیص اینکه چه زمانی یک عنصر وارد یا خارج می شود. این برای پیاده سازی بسیار مفید است اسکرول بی نهایت.

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

4. Clipboard API

این Clipboard API به شما اجازه می دهد خواندن و نوشتن داده ها به کلیپ بورد. این برای پیاده سازی مفید است کپی به کلیپ بورد عملکرد.

async function copyHandler() {
  const text = "https://tapajyoti-bose.vercel.app/";
  navigator.clipboard.writeText(text);
}

5. Screen Wake Lock API

تا به حال فکر کرده اید که چگونه یوتیوب از خاموش شدن صفحه هنگام پخش ویدیو جلوگیری می کند؟ خوب، این به خاطر آن است Screen Wake Lock API.

let wakeLock = null;

async function lockHandler() {
  wakeLock = await navigator.wakeLock.request("screen");
}

async function releaseHandler() {
  await wakeLock.release();
  wakeLock = null;
}

توجه داشته باشید: شما فقط می توانید استفاده کنید Screen Wake Lock API اگر صفحه از قبل روی صفحه قابل مشاهده است. در غیر این صورت، خطا ایجاد می کند.

6. Screen Orientation API

این Screen Orientation API به شما اجازه می دهد تا بررسی کنید جهت گیری فعلی از صفحه نمایش و حتی آن را قفل کن به یک جهت گیری خاص

async function lockHandler() {
  await screen.orientation.lock("portrait");
}

function releaseHandler() {
  screen.orientation.unlock();
}

function getOrientation() {
  return screen.orientation.type;
}

7. API تمام صفحه

این API تمام صفحه به شما امکان می دهد یک عنصر یا کل صفحه را در آن نمایش دهید تمام صفحه.

async function enterFullscreen() {
  await document.documentElement.requestFullscreen();
}

async function exitFullscreen() {
  await document.exitFullscreen();
}

توجه داشته باشید: برای استفاده از API تمام صفحه همچنین، شما نیاز به تعامل با کاربر دارید.

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

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

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

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

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

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

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

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

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

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

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