A área de transferência de um usuário é um “apanhado geral” entre o sistema operacional e os aplicativos empregados nela. Ao usar um navegador da Web, o usuário pode destacar um texto ou clicar com o botão direito do mouse em uma imagem e selecionar “Copiar imagem”. Isso me fez pensar em como os desenvolvedores podem detectar o que está na área de transferência.
O senhor pode recuperar o conteúdo da área de transferência do usuário usando o comando navigator.clipboard API. Essa API requer permissão do usuário, pois a área de transferência pode conter dados confidenciais. O senhor pode empregar o seguinte JavaScript para obter permissão para usar a API da área de transferência:
const result = await navigator.permissions.query({name: "clipboard-write"});
if (result.state === "granted" || result.state === "prompt") {
// Clipboard permissions available
}
Com as permissões da área de transferência concedidas, o senhor consulta a área de transferência para obter um ClipboardItem com detalhes do que foi copiado:
const [item] = await navigator.clipboard.read(); // When text is copied to clipboard.... item.types // ["text/plain"] // When an image is copied from a website... item.types // ["text/html", "image/png"]
Depois de conhecer o conteúdo e o tipo MIME, o senhor pode obter o texto na área de transferência com readText():
const content = await navigator.clipboard.readText();
No caso de uma imagem, se o senhor tiver o tipo MIME e o conteúdo disponíveis, poderá usar <img> com um URI de dados para exibição. Conhecer o conteúdo da área de transferência de um usuário pode ser útil ao apresentar exatamente o que ele copiou!
Animações JS responsivas e infinitamente escalonáveis
No final de 2012, não era fácil encontrar projetos de código aberto usando
requestAnimationFrame()– esse é o gancho que permite que o código Javascript seja sincronizado com o loop de pintura nativo de um navegador da Web. As animações que usam esse método podem ser executadas a 60 fps e proporcionar…
5 APIs HTML5 que o senhor não sabia que existiam
Quando se diz ou se lê “HTML5”, é de se esperar que dançarinas exóticas e unicórnios entrem na sala ao som de “I’m Sexy and I Know It”. Mas o senhor pode nos culpar? Assistimos à estagnação das APIs fundamentais por tanto tempo que um recurso básico…
CSS Kwicks
Um dos efeitos que me deixou empolgado com o lado do cliente e o JavaScript foi o Efeito Kwicks. Pegue uma lista de itens e reaja a eles de acordo com o mouse. Simples e agradável. O efeito foi originalmente criado com JavaScript, mas cinco anos depois, nosso…