Con le tecnologie in rapida evoluzione, agli sviluppatori vengono forniti incredibili nuovi strumenti e API . Ma si è visto che delle oltre 100 API , solo il 5% viene utilizzato attivamente dagli sviluppatori.

Diamo un'occhiata ad alcune delle utili API Web che possono aiutarti a far volare alle stelle il tuo sito web sulla luna!

1. API di cattura dello schermo

L' API Screen Capture , come suggerisce il nome, ti consente di catturare il contenuto di uno schermo, rendendo il processo di creazione di uno screen recorder un gioco da ragazzi.

È necessario un elemento video per visualizzare lo schermo catturato. Il pulsante di avvio avvierà la cattura dello schermo .

<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);

L' API Web Share ti consente di condividere testo , collegamenti e persino file da una pagina Web ad altre app installate sul dispositivo.

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

3. API Intersection Observer

L' API Intersection Observer consente di rilevare quando un elemento entra o esce dal viewport . Questo è eccezionalmente utile per implementare lo scorrimento infinito .

NOTA: la demo utilizza React a causa delle mie preferenze personali, ma puoi utilizzare qualsiasi framework o JavaScript vanigliato .

4. API degli appunti

L' API Appunti consente di leggere e scrivere dati negli Appunti . Questo è utile per implementare la funzionalità di copia negli appunti .

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

Ti sei mai chiesto come YouTube impedisce lo spegnimento dello schermo durante la riproduzione del video? Bene, questo è dovuto all'API Screen Wake Lock .

let wakeLock = null;

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

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

6. API di orientamento dello schermo

L' API di orientamento dello schermo ti consente di controllare l' orientamento corrente dello schermo e persino di bloccarlo su un orientamento specifico.

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

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

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

      
                

                    
                    
                
            

L' API Fullscreen ti consente di visualizzare un elemento o l'intera pagina a schermo intero .

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

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

Seguimi per nuovi bocconcini bisettimanali sul dominio della tecnologia !

Hai bisogno di un libero professionista di sviluppo front-end di prim'ordine per eliminare i tuoi problemi di sviluppo? Contattami su Upwork

Vuoi vedere a cosa sto lavorando? Dai un'occhiata al mio sito web personale e a GitHub

Vuoi connetterti? Contattami su LinkedIn

Sono un nomade digitale e viaggio occasionalmente. Seguimi su Instagram per vedere cosa sto facendo.