Uma coisa que normalmente precisamos fazer em nosso desenvolvimento diário é pegar o último elemento de um array ou uma String.
Atualmente (2022) para realizar isso, fazemos da seguinte forma:

1
2
3
4
5
6
7

const arrayFrutas = ['banana', 'maçã', 'laranja', 'goiaba'];
console.log(arrayFrutas[arrayFrutas.length -1])
// Saída: goiaba

const fruta = 'mexerica';
console.log(fruta[fruta.length -1])
// Saída: a

Mas agora, com o novo método implementado na versão do ECMAScript 2022, podemos procurar por index negativo! Igual fazemos com Python

Ler mais

Para mover um elemento (que você sabe o Index) para o final do array, basta fazer isso:

1
2

const index = 2;
array.push(array.splice(index, 1)[0]);

Agora, se você não sabe o index, pode fazer o seguinte:

1
2

const index = array.findIndex(element => element));
array.push(array.splice(index, 1)[0]);

Exemplo:

1
2
3

const arr = [1, 2, 6, 3, 4, 5];
arr.push(arr.splice(arr.indexOf(6), 1)[0]);
console.log(arr); // [1, 2, 3, 4, 5, 6]

Fazer um simples teste para verificar se a imagem foi renderizada ou não, no React Testing Library, é uma atividade bem simples, mas podemos acabar nos enrolando com coisa boba.

Então sem enrolação, um exemplo de teste básico:

Ler mais

Enquanto estava realizando alguns testes end-to-end com Puppeteer, me deparei com um problema que no instante que o Chromium abria, aparecia erro de “Sua conexão não é privada” (Your connection is not private)

Então procurando a respeito, encontrei a solução para esse problema de conexão privada para o chromium, com o puppeteer:

Ler mais

Você já fez um formulário em uma página web e quando acessou pelo celular viu que os estilos dos inputs estavam bem diferentes? No Android de uma forma e no iOS de outra? Veja como remover essas propriedades padrões!

Para isso, iremos usar a propriedade appearance

Ler mais

Você já ouviu falar do método trunc de Math?
Ele remove as casas decimais, sem modificar em nada o número que está a frente!

Olha como é simples:

1
2
3
4

const number = 24.54;

const newNumber = Math.trunc(number);
// Output: 24

Muito simples né? Esse método só não funciona para IE (mas se nem a Microsoft dá mais suporte pra ele, quem sou eu pra dar né? 🤪)

Você sabe o que é fonte “ligature”?
Fontes ligatures são um tipo de fonte que combina múltiplos caracteres em um só caracter.
Algumas dessas fontes são específicas para desenvolvimento de software, como por exemplo, a Firacoda.

Para usar ela em seu VSCode, basta seguir os passos abaixo:

1 - Faça o download da fonte e instale ela em seu SO.

2 - Abra seu VSCode (ou reinicie ele, caso já esteja aberto)

3 - No VSCode abra settings.json, pressionando a combinação de ctrl + , no Windows ou cmd + , no Mac

4 - Procure sobre font e clique em “Edit in settings.json”

5 - Dentro do JSON, copie e cole o seguinte código:

1
2
3
4
5

"editor.fontFamily": "Fira Code",
"editor.fontSize": 12,
"editor.fontLigatures": true

Feito isso, só reiniciar o editor de texto e pronto!

Você já precisou verificar se uma string possui duas ou mais opções com o método includes?
Como você sabe, isso não é possível com o método includes(), mas com RegEX, conseguimos criar uma alternativa muito simples!

1
2

const hasWord = /teste|palavra/.test('palavra');
// Resultado: true

Com esse RegEX, podemos passar quantas palavras queremos testar!
Mas isso só funciona com strings, com objetos você deve usar o includes() mesmo! :)

Comenta aí o que achou!

Permitir que uma propriedade possa ser dois tipos, no Proptype é muito simples!

Para isso, basta você fazer o seguinte:

1
2
3
4

size: PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.number
])

Tranquilo, né?
🏡

Recentemente, trabalhando em um componente de paginação, tive a necessidade de bloquear o redirecionamento de um link (a href=””), para que pudesse usar uma função customizada para fazer a paginação.

O atributo href por sua vez, era obrigatório ser passado e toda vez que o clique era feito, recarregava a página, fazendo com que eu perdesse o estado da minha aplicação.

Como foi resolvido?

Ler mais