Aplicativos da Web agradáveis dependem de engenheiros que implementam as APIs que abrangem todas as pequenas coisas. Essas pequenas coisas às vezes melhoram o desempenho, a usabilidade, a acessibilidade e o relacionamento do aplicativo com o sistema host. A API Wake Lock é a última: uma API que permite que os desenvolvedores instruam o computador host a não escurecer a tela ou dormir, o que é especialmente útil quando os usuários assistem a vídeos.

Para evitar que a tela escureça ou durma, solicite permissão para a tela:

let lock

try {
  lock = await navigator.wakeLock.request('screen');
} catch (err) {
  // Error or rejection
  console.log('Wake Lock error: ', err);
}

Se a solicitação for bem-sucedida, o computador host não dormirá até ser liberado:

await lock.release()

Vi essa API ser implementada e utilizada pela primeira vez em dispositivos móveis e estou feliz por começar a vê-la sendo utilizada em desktops. Há alguns serviços de streaming de grande nome que eu notei que poderiam usar desesperadamente a API Wake Lock – o sono do sistema durante os vídeos estraga a experiência!

  • Imagens responsivas: O guia definitivo

    É provável que qualquer web designer que use nosso aplicativo de teste de navegador Ghostlab, que permite testes contínuos em todos os dispositivos simultaneamente, já tenha trabalhado com design responsivo de alguma forma. E, à medida que os sites e dispositivos atuais se tornam cada vez mais variados, uma infinidade de imagens responsivas…

  • Tags META do Facebook Open Graph

    Não é segredo que o Facebook se tornou um importante gerador de tráfego para todos os tipos de sites. Hoje em dia, até mesmo as grandes corporações direcionam os consumidores para suas páginas do Facebook, em vez de para os sites corporativos diretamente. E, é claro, há widgets “Curtir” e “Recomendar” do Facebook em todos os sites. Um…

  • Bloqueador NSFW usando MooTools e CSS

    Um dos meus prazeres culposos é ver as últimas fofocas sobre celebridades no PerezHilton.com, DListed.com e JoBlo.com. Infelizmente, esses sites ocasionalmente publicam imagens NSFW, o que torna a consulta a esses sites durante o almoço uma grande aposta – uma ida ao escritório do RH pode estar a apenas um clique de distância.

  • Textareas de largura total

    Trabalhar com larguras de área de texto pode ser doloroso se o senhor quiser que a área de texto tenha 100% de largura. Por que é difícil? Porque, se o elemento que contém a área de texto tiver preenchimento, o "width:100%" textarea provavelmente se estenderá para fora do contêiner pai – uma perspectiva frustrante, para dizer o mínimo. Felizmente…