Bianca Rocha

Como monitorar graphql requests no Cypress quando o request é um GET

2022-05-24T11:48:00+00:00

Recentemente aprendi uma ferramenta muito útil no Cypress, que é o cy.intercept . Ele me permite, entre outras coisas interceptar requests feitas, e esperar por elas antes de fazer uma ação. É bem mais sofisticado que usar um cy.wait(1000) e ajuda bastante quando você tem uma request em particular que demora muito para terminar.

cy.intercept('POST', `${Cypress.env('api')}/login`).as('auth')
cy.wait('@auth')
// Ações que só podem ser executadas depois da request auth

Só que quando você usa GraphQL as coisas ficam um pouco mais complicadas. Felizmente o próprio Cypress tem um guia muito bom sobre como implementar o intercept em GraphQL quando a request é um POST, que vou deixar aqui.

Só que, para meu azar, o modo que as requests eram feitas no projeto que estava trabalhando utilizava GET em vez de POST e isso fazia com que o guia acima não me ajudasse muito. Então, após alguns dias de tudo dando errado, fui obrigada a tomar medidas desesperadas, porém efetivas: Usar regex.

A lógica era simples: minha api graphql era sempre https://site-da-api.com.br/graphql e como o request era um GET, o nome da query iria sempre aparecer em algum lugar do request. Então utilizei o regex para detectar as ocorrências de graphql e o nome da minha query (armazenada em uma variável) e, por fim, era só dar um alias para o comando, assim como é feito em chamadas rest, e criar um comando personalizado para facilitar o uso. Ficou assim no final:

Cypress.Commands.add('interceptGraphqlGET', (query) => {
	const regex = new RegExp(
    '\\bgraphql\\b.*\\b' + query + '\\b' // Equivalente à /\bgraphql\b.*\bQueryExemplo\b/
  )
  cy.intercept(regex).as(`gql${query}`)
})

Aí se eu quiser interceptar e esperar uma chamada GET em qualquer local dos meus testes vai ser só chamar:

cy.interceptGraphqlGET('QueryExemplo')
cy.wait('@gqlQueryExemplo')
// faça alguma coisa

E aí, curtiu a solução? Ou tem uma muito melhor para mostrar? Comenta aí o que achou e até a próxima :D

Um jeito simples de simular erro de requests

2022-05-05T15:00:00+00:00

Esses dias estava quebrando a cabeça em como simular um request falho em uma feature que já havia implementado e acabei topando com uma dica bem legal: Você sabia que dá para bloquear requests no Inspect do Chrome (versão 63 para cima)? Achei esse recurso muito útil, e queria mostrar pra vocês. Vem aqui que te explico como fazer.

Existem 2 modos de iniciar, no primeiro você vai:

abrir o inspect
ir para a aba de network
selecionar um request que você quer bloquear
clicar com o botão direito neste request
selecionar block request url

e pronto, seu request estará bloqueado e a aba network request blocking será aberta, mostrando todos os requests bloqueados da página.

Um outro modo de chegar nesta aba é, também na aba Network, na barra de opções, ao lado da opção “no trottling” você verá um ícone de wifi, que vai te levar as opções avançadas de wifi, ai é só selecionar a aba “Network request blocking” e lá adicionar o request que deseja bloquear.

E é isso, quis fazer um post mais rápido com uma dica que achei deveras interessante, com certeza vou utiliza-la para testar fluxos de erro sem precisar mockar requisições ou ficar devolvendo promise.reject. Como você vai utilizar essa dica?

Facilite sua vida, crie Snippets

2022-03-21T16:27:00+00:00

No decorrer da sua carreira você eventualmente vai encontrar com pedaços de códigos que são repetidos várias e várias vezes, mas que são específicos a sua empresa ou seu projeto.

Um exemplo disso seria um componente de ícones, onde você teria o componente base, com as tags svg iniciais além de algumas propriedades e o componente que definirá qual ícone o componente base vai compilar. O componente de ícone tem um template, com seu html, propriedades e estilo, mas o conteúdo dele será sempre diferente. A questão que fica é: como fazer com que a criação de novos componentes seguindo esse template não se torne um tedioso copia e cola?

É aqui que entram os snippets.

Snippets são blocos de códigos que podem ser acessados por um atalho no seu editor de código. Por um exemplo, quando você digita ! no seu arquivo html e vê um atalho para criar toda uma estrutura html no seu arquivo, aquilo é um snippet

Você também pode criar snippets customizados, para isso basta ir (no vscode) em Preferences > User Snippets e então selecionar a linguagem que você quer criar seus snippets

A partir daí é só seguir o template que vai aparecer nos comentários do arquivo e criar seus próprios snippets. Um exemplo disso é um snippet que criei a um tempo atrás para trazer de volta o scaffold nos arquivos vue, uma vez que o mesmo havia sido retirado (renomeado na verdade) do Vetur:

{
	"bring back the scaffold to vue files": {
		"prefix": "scaffold",
		"body": [
			"<template>",
			"  <div>$TM_FILENAME_BASE</div>",
			"</template>",
			"",
			"<script>",
			"export default {",
			"  name: '$TM_FILENAME_BASE',",
			"};",
			"</script>",
			"",
			"<style>",
			"</style>",
			""
		],
		"description": "bring back the scaffold to vue files"
	}
}

Para utilizar esse atalho agora você só precisa digitar scaffold no seu arquivo vue que ele deve aparecer.

O $TM_FILENAME_BASE é uma variável do Vscode que me devolve o nome do arquivo sem sua extensão, por exemplo, se o nome do componente é “Exemplo.vue” ele me retorna apenas “Exemplo”. Você pode ver a lista de variáveis do vscode aqui.

O ideal é que você crie um snippet sempre que notar que está copiando e colando muito um trecho de código. Uma outra dica muito boa é que você pode criar snippets específicos para o projeto em que está trabalhando, assim tanto você quanto seus colegas podem ter acesso aos atalhos.

Para isso, você precisa criar, dentro da sua pasta .vscode (se ela não existir você pode cria-la) um arquivo com o nome dos arquivos nos quais o snippet vai aparecer com a extensão .code-snippets (por exemplo arquivos vue seriam nomeados vue.code-snippets , arquivos javascript javascript.code-snippets e por ai vai). Lá você pode criar seu snippet como demostrado acima e ele vai funcionar para todas as pessoas que forem mexer no projeto e estiverem utilizando o vscode, facilitando a sua vida e a de quem mais trabalhar com você 😀

Agora, para fechar com chave de ouro, é bom documentar os atalhos do projeto e avisar seus colegas sobre os novos atalhos, assim eles também tem a vida facilitada e vocês tem um código mais padrão e documentado.

Criando Validações customizadas no Vee-Validate

2022-01-11T14:51:00+00:00

Para você que usa o VeeValidate, mas precisa de validações mais específicas do que as disponíveis pelo framework (cof cof…. validação com moedas…. cof cof).

A primeira coisa que deve ser feita é criar uma nova pasta em src.Inicialmente essa pasta vai ter 2 arquivos:

- src
  - validadoresCustomizados
    - index.js
    - validacaoCustom.js

Por enquanto vamos ignorar o index.js e focar no segundo arquivo, validacaoCustom.js é nele que iremos criar nossa primeira validação. Começaremos criando uma validação que verifica se certo valor, no formato R$ XX,XX é positivo ou não:

// src/validadoresCustomizados/validacaoCustom.js

const ehPositivo = {
    getMessage: field => 'O campo ' + field + 'deve ser positivo',
    validate (value) {
        const valorFormatado = value.replace('R$ ', '').replace(',', '.')
        const validacao = +valorFormatado > 0
        return validacao
    }
}

export default ehPositivo

Okay, mas o que exatamente faz esse código funcionar?

Basicamente, para que o VeeValidate reconheça sua regra, ela precisa seguir um certo padrão. O padrão que estou mostrando é a forma em objeto, que pode ser vista aqui mas que consiste em um objeto com 2 funções dentro:

getMessage , que retorna a mensagem que será exibida caso a validação falhe
validate que é onde a validação ocorre e obrigatoriamente deve retornar um booleano ou uma promessa que resulta em um booleano.

Caso você queira utilizar um parâmetro para fazer sua validação, como por exemplo, saber se um valor é menor ou maior que um certo número, basta utilizar os args:

// src/validadoresCustomizados/ehMaiorQue.js

const ehMaiorQue = {
    getMessage: (field, args) => 'O campo ' + field + 'deve ser maior que' + args,
    validate (value, args) {
        const validacao = value > args
        return validacao
    }
}

export default ehMaiorQue

Beleza, mas como eu vou importar esse código nas minhas regras?

Bom, antes disso vamos voltar ao index.js e fazer lá a importação do nosso objeto, para manter nosso código mais organizado e facilitar a adição de novas regras no futuro:

// src/validadoresCustomizados/index.js

import { Validator } from 'vee-validate'
import ehPositivo from './validacaoCustom'
import ehMaiorQue from './ehMaiorQue'

Validator.extend('eh_positivo', ehPositivo)
Validator.extend('eh_maior_que', ehMaiorQue)

No código acima a função Validator.extend é a responsável por adicionar a regra que criamos as regras disponíveis por padrão. Agora sim, está tudo pronto para importarmos.

A importação é feita no local onde você adiciona o vee-validate no vue. Pode ser no main.js, ou em um arquivo específico apenas para plugins. Lá você precisa apenas importar o index.js que acabamos de criar que a validação já deve estar disponível para você:

// src/main.js

import VeeValidate from 'vee-validate'
import '@/validadoresCustomizados/index.js'

...

export default (Vue) => {
    Vue.use(VeeValidate),
    ...
}

Por fim, a validação estará disponível e pode ser utilizada assim como quaisquer outras validações no vee-validate:

// ComponenteQualquer.vue

<div class="form-group" :class="{ 'has-error': errors.has('eh_positivo') }">
  <label class="control-label" for="total">Total</label>

  <!-- Input com a nossa validação customizada -->
  <input
    name="total"
    type="text"
    mask="R$ XX,XX"
    class="form-control"
    id="total"
    placeholder="Total"
    v-validate
    data-rules="required|eh_positivo"
   />
  <!-- Fim do input com a nossa validação customizada -->

  <span v-show="errors.has('eh_positivo')" class="help-block">
    
  </span>
</div>

<!-- Validação com parametros -->
<div class="form-group" :class="{ 'has-error': errors.has('eh_maior_que') }">
  <label class="control-label" for="total">Total</label>

  <!-- Input com a nossa validação customizada -->
  <input
    name="total"
    type="number"
    class="form-control"
    id="total"
    placeholder="Total"
    v-validate
    data-rules="required|eh_maior_que:1"
   />
  <!-- Fim do input com a nossa validação customizada -->

  <span v-show="errors.has('eh_maior_que')" class="help-block">
    
  </span>
</div>

No mais acho que é isso, espero que tenham achado esse post útil, até a próxima :D

Fontes que me ajudaram a produzir esse texto:

Como cancelar requests ao digitar na barra de pesquisa

2021-05-20T16:15:00+00:00

Vamos lá, você está fazendo um input de pesquisa que vai atualizar a cada palavra digitada e quer cancelar o request anterior quando uma nova palavra for digitada, assim não sobrecarregando seu backend? Pois eu tenho a solução! (talvez não seja a melhooor solução, mas é o que achei)

O código a seguir está em Vue, mas acho que se você trabalha com React não vai ser nada muito diferente (na verdade tem um artigo melhor que o meu explicando como fazer em react, então se você entende inglês da uma olhada aqui. E se você trabalha com Angular aparentemente ele já tem uma solução pra isso chamada switchMap. Dito tudo isso, vamos ao código.

Primeiramente você vai precisar importar o axios no script do seu componente:

// Search.vue

import axios from 'axios'

export default {
...
}

Então vamos precisar criar uma variável cancelToken no data, com o valor inicial undefined :

data() {
  return {
    cancelToken: undefined,
  }
}

Aí, na função onde você for fazer a chamada para a pesquisa, você vai adicionar as seguintes linhas:

methods: {
  search(query) {
    // Esse if serve para verificar se não existe nenhum request anterior pendente.
    // Caso exista ele vai cancela-lo (a mensagem é opcional)
    if (typeof this.cancelToken !== typeof undefined) {
      this.cancelToken.cancel("Operation canceled due to new request.")
    }

    // A seguir a gente salva o token de cancelamento do request atual
    this.cancelToken = axios.CancelToken.source()

    // E ai você vai mandar esse token no seu dispatch (assumindo que você esteja usando vuex)
    this.$store.dispatch('search_term', {
      query,
      cancel: this.cancelToken.token
    })
  }
}

Então, lá onde esta função vai estar na sua store, você vai adicionar o cancelToken na sua chamada para o axios:

// search.js

import axios from 'axios'

// ...
actions: {
  search_term({}, payload) {
    // Aqui eu estou fazendo um get, mas funciona em post também
    axios.get('search',
     { query: payload.query },
     { cancelToken: payload.cancel })
    .then(res => {
      // ...
    })
  }
}
// ...

E é basicamente isso! Eu deixei algumas coisas de fora para o código ficar o mais focado possivel, mas espero que tenha dado para entender. Qualquer coisa pode comentar que eu ajeito aqui e se você tiver uma solução melhor comenta aí tbm que estamos todos aqui pra aprender. Até a próxima aí galera!

Problemas com meta tags? Vem cá que eu te ajudo

2021-04-28T10:11:00+00:00

Eu passei algum tempo das ultimas semanas desenvolvendo uma landing page para a empresa que estou trabalhando. QA vai QA vem, finalmente chegou a hora de mandar o negócio para a produção. Só que ai me veio meu primeiro problema. Durante todos esses anos eu só sabia fazer um tipo de meta tag, que é esse tipo aqui:

Enquanto isso quebra um galho obviamente não é tão bonito quanto aqueles previews com uma imagem gigante. E era exatamente isso que a minha empresa queria para a nova landing page. Algo mais nesse estilo aqui:

Pois bem, como faz um negócio desses? Eu passei um dia inteiro procurando mas, além de não ter muita informação online de como fazer esse card específico a cada teste eu tinha que fazer o deploy do site para então ver os resultados. Até que eu achei Esse site aqui

Com ele você pode inserir o endereço do seu website e ele vai detectar as meta tags e mostrar o que ele identificou e aí você pode corrigir essas informações lá na hora. Um exemplo, ao por o meu último post, isso é o que ele detecta:

Se algo estiver errado eu posso editar essas informações, ai lá embaixo o site me dá a opção para gerar as meta tags, e assim obter o resultado que eu queria:

Aí é só copiar esse código no seu <head> e ser feliz 😄

Agora só falta eu achar um tempo pra implementar isso aqui…

Leia esse post e dê adeus ao “nvm use”

2020-10-29T18:22:00+00:00

Comecei recentemente a trabalhar em uma nova empresa, e pela primeira vez estou tendo que trabalhar com muitos projetos com versões diferentes do node e isso estava começando a perturbar meu juízo, uma vez era uma festa de nvm use x, nvm use y e vários servidores iniciados apenas para dar erro depois pois você errou a versão node desse repositório. Bom, agora não mais.

Resolvi dar uma pesquisada na doc do nvm porque não era possível que não houvesse um jeito mais simples de fazer isso. E você sabe que se está lendo esse post é porque eu encontrei.

Devo avisar, porém, que o tutorial a seguir é para a implementação utilizando zsh no MacOs, então se você usa bash ou Windows o passo inicial pode ser um pouco diferente, mas você pode ler mais sobre e ver as diferentes opções de implementação aqui.

Primeiramente, você vai ter que modificar o seu $HOME/.zshrc e para isso basta executar o seguinte código:

nano $HOME/.zshrc

Então, logo abaixo de onde você inicia o nvm, você vai colocar esse código aqui:

# place this after nvm initialization!
autoload -U add-zsh-hook
load-nvmrc() {
  local node_version="$(nvm version)"
  local nvmrc_path="$(nvm_find_nvmrc)"

  if [ -n "$nvmrc_path" ]; then
    local nvmrc_node_version=$(nvm version "$(cat "${nvmrc_path}")")

    if [ "$nvmrc_node_version" = "N/A" ]; then
      nvm install
    elif [ "$nvmrc_node_version" != "$node_version" ]; then
      nvm use
    fi
  elif [ "$node_version" != "$(nvm version default)" ]; then
    echo "Reverting to nvm default version"
    nvm use default
  fi
}
add-zsh-hook chpwd load-nvmrc
load-nvmrc

Salve, saia e vá para o diretório que você precisa mudar a versão do node , crie um arquivo chamado .nvmrc e coloque lá a versão de node compatível com o projeto. Um exemplo:

v9.9.0

Reinicie o terminal e pronto! Agora quando você entrar no diretório ele vai automaticamente mudar para a versão compatível daquele projeto!

Usa variáveis sass no Vue? Posso ter uma dica bem útil pra você

2020-05-29T12:15:00+00:00

Faz um bom tempo que, na empresa onde trabalho, utilizamos um arquivo geral de variáveis sass para definir as cores do sistema. Desde então, o que fazíamos era importar manualmente o arquivo de variáveis para cada componente, cheguei até a criar um snippet no vue para fazer isso por mim toda vez que eu criava um componente. Só que isso está longe de ser uma solução ideal.

O primeiro que essa abordagem gerava era que ela dependia que todos os meus colegas lembrassem de importar as variáveis, ou usassem meu snippet. E o segundo problema era que tudo bem, enquanto fossem apenas variáveis no arquivo esse tipo de abordagem não complicaria muito o tamanho do bundle final, uma vez que, ao ser compilado, a única coisa que aconteceria é que as variáveis seriam substituídas por seus respectivos valores e nenhum código css seria adicionado. Mas e se alguém adicionasse um código css ali por engano? Dependendo do código isso poderia impactar seriamente o bundle final da aplicação. Por conta disso, eu estava procurando uma solução mais aceitável para esse problema, e acabei topando com essa pergunta no Stack Overflow.

Edit:: Quando publiquei esse post, um usuário chamado Fagner P do grupo VueJS Brasil, me alertou que uma outra abordagem possivel seria importar o arquivo de variáveis no App.vue. Infelizmente, por motivos ainda desconhecidos, essa solução não funciona na plataforma em que trabalho, mas pode ser que funcione na sua, então vale tentar antes de seguir com esse tutorial. E valeu Fagner pelo aviso!

E qual a solução que eu achei nessa pergunta? Bem simples, na real a única coisa que você precisa fazer é adicionar o código abaixo ao seu vue.config.js:

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: '@import "@/pathto/variables.scss";'
      }
    }
  }
};

Alguns pontos importantes:

Se você está usando o sass-loader 8, substitua o data por prependData;
É necessário reiniciar seu servidor para que essas mudanças se apliquem;
Essas mudanças não irão funcionar se você não colocar lang="scss" (ou qualquer outro pré processador que esteja usando) na tag style do seu componente Vue.

E prontinho! Agora você pode usar suas variáveis sass em qualquer componente sem ter que importar! Abaixo você vai encontrar um exemplo feito pela @sdras desse código funcionando e mudando a cor primária do texto para roxo:

E é isso, eu espero que essa dica tenha te sido útil para você. Até a próxima! :D

Links que foram essenciais para a criação desse texto:

Dicas para quem vai começar um trabalho remoto

2020-03-18T18:09:00+00:00

Com os casos do novo coronavírus se alastrando, muitas empresas optaram por permitir que seus funcionários façam seus trabalhos de casa, muitos dos quais que nunca trabalharam remotamente, então visando ajudar essas pessoas, eu vou tentar dar algumas dicas para que você possa passar por esse momento (não sei se aproveitar é a palavra correta, dada a situação) da melhor maneira possível.

Antes de tudo: já lavou as mãos?

Estar em casa não é desculpa para não lavar as mãos, evitar pegar em nariz e olhos, etc etc, então antes de mais nada vai bem ali, dá uma lavadinha nas mãos e depois volta.

via GIPHY

Lavou? Ok, agora podemos continuar.

Tente manter o mesmo horário de trabalho da era presencial

Essa é uma dica um pouco mais focada nesse período, porque muitos de vocês provavelmente vão voltar a trabalhar presencialmente quando o surto acabar, então faz sentido manter o trabalho no mesmo horário do presencial. Além disso, como você já está acostumado a trabalhar nesse período, fica mais fácil de se concentrar (isso não é fato, apenas minha opinião, não interprete como fato)

Procure arrumar um espaço na sua casa para trabalhar

Obvio, porém essencial, deixe um espaço reservado para seu computador e demais objetos que você use em seu trabalho. Além de facilitar sua organização no geral, pode te ajudar a manter a concentração (mais uma vez, não são fatos, só opiniões minhas jogadas ao vento)

Caso esteja tendo problemas: não demore para pedir ajuda a colegas

Quando estamos sozinhos às vezes queremos resolver tudo sozinhos, mesmo que isso nos leve o dia inteiro. Porém se você está tendo problemas com algo a mais de 1h (ou simplesmente não sabe como fazer), é interessante chamar alguém para te ajudar. Pense no tanto de vezes que você estava penando com um problema e um colega seu te ajudou no presencial. É a mesma coisa no remoto. Então por favor, peça ajuda, até porque pode acontecer (e acontece muitas vezes) de você e seu colega chegarem numa solução mais rapidamente trabalhando juntos do que você sozinho com apenas o google para te ajudar.

Se não tem nada para fazer durante o trabalho, tente ajudar colegas

Caso você tenha acabado suas atividades e não tenha novas que possa pegar no momento, pergunte a algum colega, ou até mesmo ao seu chefe/gerente/superior se eles não precisam de ajuda em algo, ou se não a nada que possa ser feito no momento. Ao fazer isso, além de poder ajudar seus colegas ou chefes/gerentes/superiores você também vai passar a confiança de que leva o trabalho remoto a sério, o que pode ser um fator para que a cultura do remoto seja considerada com menos temor futuramente.

Anote o que você fez no dia

Se sua empresa ou equipe decidiu trabalhar com reuniões diárias para que as pessoas reportem o que fizeram no dia (caso não tenham feito isso pode ser uma boa ideia sugerir, uma vez que ajuda bastante a construir uma confiança entre a empresa e o trabalhador e desmistificar o pensamento muito comum de “tá em casa, não deve estar trabalhando”) é uma boa ideia que você anote o que fez no dia para que possa reportar com mais detalhes durante essas reuniões, inclusive, o mesmo vale para pontos chave das reuniões ou problemas que tenham aparecido nelas.

Isso pode ser muito útil se você, assim como eu, tem problemas de memória e costuma esquecer detalhes das coisas na hora de falar, ou esquecer coisas que tem para resolver. Uso muito o todoist mas simplesmente anotar em um caderninho e deixar perto na hora das reuniões também funciona.

Problemas de concentração: como lidar

Infelizmente não existe uma solução perfeita para isso, então aqui eu vou simplesmente citar alguns que li e tentei, além dos que mais funcionam pra mim:

Criar uma lista com o que você tem para fazer no dia
funciona tanto para organizar o que deve ser feito durante o dia quanto para reportar depois, uso muito o todoist pra isso.

(Modo tartaruga do item acima) Anotar - manualmente - o que você tem que fazer (um item apenas), tentar finalizar este item, então repetir
às vezes esse é o único modo que funciona comigo, uma vez que ocasionalmente tem tanta coisa para fazer que o item acima mais atrapalha que ajuda.

Pomodoro
Para quem não conhece, consiste basicamente em um timer onde você deve passar 25min (ou mais) focado na sua tarefa, sem mexer em mais nada ou responder chats (exceto emergências do trabalho claro) e então descansar por 5 minutos e ai repetir. Existem muitos apps e extensões para navegador com essa premissa, eu particularmente gosto muito do aplicativo Be Focused, disponível para IOS, Android e MacOS

RescueTime
Essa é uma premissa interessante, porém mais focada no longo prazo. O RescueTime é um aplicativo de desktop ou mobile que monitora suas atividades durante o dia e te dá um report de quando você estava mais “focado” (utilizando as ferramentas do trabalho) durante aquele dia. A versão gratuita não difere as abas do seu navegador então se você quiser pode adotar a seguinte medida para “burlar” isso: baixe um novo navegador e use esse somente para coisas não relacionadas a trabalho, assim fica um pouco mais simples diferir um do outro.

Ouvir música
Hoje existem muitas playlists com o objetivo de foco no trabalho (um exemplo aqui) mas você também pode tentar ouvir música instrumental, a trilha sonora de algum jogo que você curta (usei demais a playlist de Zelda e Undertale)

Acho que isso resume as dicas por hoje. Caso você tenha mais dúvidas pode deixar um comentário aqui, ou até mesmo me mandar um email que vou tentar te ajudar. Espero que esse texto tenha sido útil para você e até o próximo :D

Um jeito simples de manipular a altura de um textarea (autosize.js)

2020-01-20T16:58:00+00:00

Uma coisa bem simples, mas que tenho julgado cada vez mais padrão na web, é a capacidade de fazer os inputs (textareas na verdade) de texto se adequarem ao texto em que o usuário digita, a medida que o mesmo vai digitando. Afinal nessa época em que textões e threads estão se tornando cada vez mais comuns, seria um estresse a mais para o usuário revisar esse texto quando ele está contido em uma única linha gigante.

Bom, recentemente eu precisei implementar esta funcionalidade em uma das features em que estou trabalhando, porém não lembrava de jeito nenhum qual era o nome da bendita. Depois de algumas várias pesquisas, descobri como se chama: autosize. E agora vou ensinar para vocês um jeito simples de implementá-la.

Em resumo, existe um pequeno script (pequeno mesmo, a build tem apenas 3.5kb) chamado autosize que torna o processo todo incrivelmente simples. Você pode usar o npm para instalá-lo no seu projeto:

npm install autosize

Depois disso o processo todo é bem simples, e aqui vou usar o Vue como framework, mas é possível adaptar esse código para qualquer framework do seu gosto

<template>
  <textarea
    rows="1"
    placeholder="Escreva aqui"
    class="resized-textarea"
  />
</template>

<script>
import autosize from 'autosize';

export default {
  mounted() {
    autosize(document.querySelector('.resized-textarea'));
  },
};
</script>

E o resultado final é esse:

See the Pen Textarea com autoresize (Vuejs) by Bianca (@rochabianca) on CodePen.

Você também pode ver mais opções e configurações no github do script.

No mais é isso, espero que tenham curtido o mini tutorial, e até a próxima :D