Isso é uma extensão dos 7 Killer One-Liners da semana passada em JavaScript . Se você ainda não leu o artigo, você é altamente encorajado a fazê-lo.

1. Verifique se um elemento está visível na viewport

IntersectionObserveré uma ótima maneira de verificar se um elemento está visível na viewport .

const callback = (entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // `entry.target` is the dom element
      console.log(`${entry.target.id} is visible`);
    }
  });
};
const options = {
  threshold: 1.0,
};
const observer = new IntersectionObserver(callback, options);
const btn = document.getElementById("btn");
const bottomBtn = document.getElementById("bottom-btn");
observer.observe(btn);
observer.observe(bottomBtn);

2. Detectar dispositivo

Você pode usar o navigator.userAgentpara obter insights minuciosos e detectar o dispositivo que executa o aplicativo

const detectDeviceType = () =>
  /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
    navigator.userAgent
  )
    ? "Mobile"
    : "Desktop";
console.log(detectDeviceType());

Você pode simplesmente alternar a visibilidade de um elemento usando a style.visibilitypropriedade e caso queira removê-lo do fluxo de renderização , você pode usar a style.displaypropriedade.

const hideElement = (element, removeFromFlow = false) => {
  removeFromFlow
    ? (element.style.display = "none")
    : (element.style.visibility = "hidden");
};

4. Obtenha os parâmetros do URL

JavaScript torna a busca parametersde qualquer endereço um passeio no parque usando o URLobjeto.

const url = new URL(window.location.href);
const paramValue = url.searchParams.get("paramName");
console.log(paramValue);

Você pode deep copyqualquer objeto convertendo-o em uma string e de volta em um objeto .

const deepCopy = (obj) => JSON.parse(JSON.stringify(obj));

O JavaScript é fornecido com uma setTimeoutfunção, mas não retorna um Promiseobjeto, dificultando o uso em async functions. Então temos que escrever nossa própria função wait/ sleep.

const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
const asyncFunc = async () => {
  await wait(1000);
  console.log("async");
};
asyncFunc();

Siga-me para novidades semanais sobre o domínio da tecnologia

Precisa de um freelancer de desenvolvimento de front-end com a melhor classificação para acabar com seus problemas de desenvolvimento? Entre em contato comigo no Upwork

Quer ver no que estou trabalhando? Confira meu site pessoal e GitHub

Quer se conectar? Entre em contato comigo no LinkedIn

Sou um freelancer que começará como Nômade Digital em meados de 2022. Quer pegar a viagem? Siga-me no Instagram