DEV Community: Evellyn Lima

Retrospectiva 2021

Evellyn Lima — Tue, 28 Dec 2021 23:48:24 +0000

Resolvi postar essa retrospectiva pra lembrar tudo o que rolou nesse ano e compartilhar aqui como foi meu ano relacionado a carreira/tecnologia.

No começo desse ano defini pra qual lado pretendo seguir (tech x pessoas), eu escolhi seguir mais pro lado de pessoas pq era (e ainda é) o assunto que mais prendeu minha atenção e mais me animou nos últimos tempos.
Foi a primeira vez que conversei sobre qual caminho quero seguir com alguém da empresa que tô trabalhando e foi bom demais fazer isso, eu conversei com 2 diretores de tecnologia da RV e eles super me incentivaram e deram várias ideias de como evoluir alguns em pontos que vão me ajudar muito a seguir por esse caminho.
Esse ano eu terminei o MBA em engenharia de software que comecei no ano passado, confesso que quase desisti mas minha namorada me deu maior força pra terminar e deu boa. Durante o MBA eu aprendi sobre várias coisas diferentes e foi graças a ele que eu vi que o caminho que mais me chama atenção é o relacionado a pessoas/negócios. Nele eu tb fiz um projeto que curti muito, eu até fiz um post sobre ele aqui no blog.
Descobri e comecei a acompanhar a comunidade indiehackers.com, pensei em várias ideias de projetos pra construir mas não finalizei nenhum. O projeto que tô mais focada é um app pra fazer acompanhamento de metas diárias, resolvi fazer um app mobile pq tava afim de mexer com coisas diferentes das que mexo no dia a dia, e como se não bastasse nunca ter mexido com desenvolvimento mobile, eu resolvi fazer esse app em flutter, que é outra coisa que nunca tinha visto. Repositório do projeto
Fiquei entre os 300 melhores no ranking do Code You Way, eu fiz um post mostrando a solução que construi pra umas das questões do desafio: acessar o post.
No segundo semestre eu comecei a mentorar uma pessoa pela primeira vez, no começo fiquei meio insegura sobre o que fazer e como ajudar ela mas acredito que ta dando super certo. Hoje inclusive tô mentorando mais um dev então esse desafio dobrou de tamanho e eu tenho curtido muito!
Além de mentorar pessoas dentro do trabalho eu decidi mentorar/ajudar mais pessoas fora do trabalho também, no momento eu tenho acompanhado 2 pessoas e eu tenho aprendido e me surpreendido muito em como a galera aprende rápido.
E há +- uma semana eu recebi meu feedback da avaliação de fim de ano e fui promovida a frontend sênior. 🥳

Nesse ano rolou muita coisa, vi muita coisa diferente do que tava acostumada, entendi mais sobre o que eu gosto de estudar e tô começando a entender melhor o que me motiva, e o melhor: acredito que ano que vem vai rolar muito mais coisas do que esse ano!

Links úteis

Resolvendo a questão 06 do Code Your Way 2021

Evellyn Lima — Mon, 11 Oct 2021 18:17:17 +0000

Update: Fiquei entre os 300 melhores 🎉🎉🎉

Faz uns 4 anos que participo do Code Your Way do Ebanx, a ideia do evento é resolver alguns desafios técnicos pelo HackerRank dentro de um tempo pré-determinado - nesse ano eram 6 desafios para serem resolvidos em 1h30. As pessoas que ficarem entre os 500 primeiros no ranking final ganham uma camiseta exclusiva do evento.

Eu gosto de fazer esses desafios porque normalmente os problemas são bem diferentes dos que vejo no dia a dia, então é uma boa oportunidade pra fazer coisas diferentes e descobrir novas técnicas, esse é um jeito divertido de evoluir tecnicamente.

Resolvi postar essa solução aqui porque não consegui terminar ela dentro do tempo proposto mas sabia que tava quase terminando, então terminei de construir a solução depois só pra confirmar que meu raciocínio tava no caminho certo.

Problema apresentado no HackerRank

Você está participando de uma competição cuja premiação é uma camiseta irada, infelizmente, está acabando o tempo e você não está conseguindo terminar a última questão. Para tentar aumentar suas chances, você decidiu "consultar" o trabalho de um de seus colegas enquanto ele não estava olhando. Porém, analisando as anotações dele, está tudo criptografado. Frustrado, você continua procurando e acha o seguinte rascunho que dá pistas de como as mensagens são criptografadas.

Pista 1:

Mensagem / Cifra: NÃOENTREEMPANICO / 3

N...N...E...N...

.Ã.E.T.E.M.A.I.O

..O...R...P...C.

Mensagem criptografada: NNENÃETEMAIOORPC

Pista 2:

Mensagem / Cifra: PAREDEBISBILHOTAR / 4

P.....B.....H....

.A...E.I...L.O...

..R.D...S.I...T.R

...E.....B.....A.

Mensagem criptografada: PBHAEILORDSITREBA

Com base nisso, escreva um programa que com base na mensagem e na cifra, consegue criptografar a mensagem.

Exemplo:

Entrada (Input):

NÃOENTREEMPANICO / 3

Saída (Output):

NNENÃETEMAIOORPC

Solução

Antes de mostrar a minha solução vou explicar qual foi a minha ideia, acho que assim fica mais fácil de entender o código.

Como a solução final dependia do número de linhas passadas no input eu pensei em criar um array de linhas e dentro desse array colocar cada linha como um novo array (agora um array de carácteres). Com isso eu consigo andar pelas linhas, descendo e subindo:

A minha solução final ficou assim:

// encrypted_input = 'NÃOENTREEMPANICO / 3'
function decode_message(encrypted_input) {
  // função pra gerar os array's de carácteres
  const generateLines = num => {
    let lines = []

    for (let i = 0; i < num; i++) {
      lines.push([])
    }

    return lines
  }

  // informações passadas no input
  const message = encrypted_input.split(" / ")[0].split("") // frase: NÃOENTREEMPANICO
  const lines = encrypted_input.split(" / ")[1] // número de linhas: 3

  // array de linhas
  const linesArray = generateLines(lines)

  // aqui tem algumas variáveis que ajudam na lógica da solução
  let lastWrite = null // variável usada preu saber qual foi a última linha que teve uma letra adicionada
  let lineToWrite = null // variável preu saber em qual linha eu vou escrever a letra agora
  let signal = "plus" // variável preu saber se preciso "subir" ou "descer" pelas linhas

  // enquanto o message tiver caracteres esse código vai ser executado
  while (message.length > 0) {
    // se a variável que informa qual foi a última linha que teve uma letra inserida estiver como NULL significa que estamos escrevebdo a primeira letra
    if (lastWrite === null) {
      // então a linha em que preciso escrever a primeira letra da frase com certeza é a linha 0
      lineToWrite = 0
    } else {
      // agora que a lastWrite está preenchida preciso criar uma lógica pra construir a mensagem criptografada

      // variável onde salvo qual é o número da linha que precisa ter a letra inserida nessa iteração do while
      let newLineToWrite = null

      // antes de definir a variável newLineToWrite preciso saber se estamos descendo na linha (+) ou se estamos subindo (-) pra então definir a linha correta
      if (signal === "plus") {
        // aqui estamos descendo
        newLineToWrite = lineToWrite + 1
      } else {
        // aqui estamos subindo
        newLineToWrite = lineToWrite - 1
      }

      // aqui verificamos se estamos na última ou na primeira linha, se estivermos em uma das duas precisamos mudar a variável signal e então inverter a nossa direção de escrita
      if (newLineToWrite + 1 === linesArray.length || newLineToWrite === 0) {
        signal =
          signal === "plus" // se a variável signal esta como plus então estamos descendo na linha
            ? "minus" // por isso mudamos ela pra minus, assim eu sei que precisamos começar a subir pelas linhas
            : "plus" // se a signal está como minus mudamos ela pra plus de novo e voltamos a descer pelas linhas
      }

      // e aqui definimos qual linha deve ter a letra escrita dessa vez
      lineToWrite = newLineToWrite
    }

    // nesse for passamos por todas as linhas que criamos lá no início da nossa função
    for (let i = 0; i < linesArray.length; i++) {
      // validamos se a linha atual dessa iteração é igual a linha que devemos escrever a letra atual
      if (i === lineToWrite) {
        // se for a linha certa pegamos a primeira letra da variável onde está nossa mensagem original e adicionamos ela a essa linha
        linesArray[i].push(message[0])
      } else {
        // se não for a linha que deve ter a letra escrita então simplesmente adicionamos um ponto nela
        linesArray[i].push(".")
      }
    }

    // aqui marcamos qual linha foi escrita agora
    lastWrite = lineToWrite

    // e removemos a primeira letra da variável message, afinal ela já foi adicionada na linha correta
    message.shift()
  }

  let encryptedMessageWithLines = ""

  // depois de finalizar todo o array de linhas e carácteres eu passo por cada linha transformando ela em uma string
  for (let i = 0; i < linesArray.length; i++) {
    // pego a linha atual e junto os carácteres que estavam separados num array transformando essa linha em uma string
    const stringLine = linesArray[i].join("")

    const firstLine = stringLine

    // aqui eu tô só adicionando uma quebra de linha entre a linha existente na mensagem criptograda e a nova linha a ser adicionada
    const otherLines = `${encryptedMessageWithLines}\n${stringLine}`

    // a mensagem final criptografada começa a ser construída aqui:
    encryptedMessageWithLines = encryptedMessageWithLines
      ? otherLines // se essa variável encryptedMessageWithLines não estiver vazia eu adiciono a variável que juntou o valor atual da encryptedMessageWithLines + a linha atual
      : firstLine // se a encryptedMessageWithLines está vazia então eu só preciso adicionar a primeira linha (que é simplesmente a linha atual da iteração)

    // a variável encryptedMessageWithLines fica assim:
    // N...N...E...N...
    // .Ã.E.T.E.M.A.I.O
    // ..O...R...P...C.
  }

  // aqui eu tô gerando a mensagem criptografada que é esperada, tô removendo daquela string todas as quebras de linha e os pontos entre as letras
  let encryptedFinalMessage = encryptedMessageWithLines
    .replace(/\n/g, "") // remove as quebras de linha (/n)
    .replace(/\./g, "") // remove os pontos (.)

  // e por fim eu retorno a mensagem criptografada: NNENÃETEMAIOORPC
  return encryptedFinalMessage
}

Eu sei que esse código poderia ser bem melhor, com uma organização mais estruturada, os nomes das variáveis poderiam ser mais claros, o código poderia ser mais simples e etc. A minha ideia aqui foi simplesmente mostrar como ficou a minha primeira solução, então não fazia sentido eu refatorar tudo e trazer aqui uma solução bem mais estruturada.

Eu assumo que durante esses challenges o ideal é fazer seu código organizado o bastante pra você não se perder enquanto ta escrevendo ele, mas ele não precisa ter todo aquele cuidado que é necessário quando estamos codando em projetos que outras pessoas irão mexer, que precisam escalar e que precisam ser manuteníveis. Como nesse challenge o tempo conta muito eu acabo entregando apenas a solução que funciona.

Esse foi um problema que quando eu li o enunciado pela primeira vez confesso que não fazia a menor ideia de como resolver, depois de pensar um pouco acabei chegando nessa solução construída em cima de arrays, não sei se essa foi a melhor solução (spoiler: provavelmente não foi), mas foi uma solução que funcionou.

Depois de terminar challenges do tipo eu gosto de olhar de novo como ficou minha solução e pensar em como poderia ser melhor, algumas vezes acabo refatorando e melhorando o código pra ver quanto eu consigo evoluir ele.

Links úteis

Criando atalhos para os comandos do git

Evellyn Lima — Mon, 27 Sep 2021 14:36:13 +0000

Tem muitos comandos do git que são difíceis de lembrar de cabeça e pra não precisar ficar buscando toda vez como fazer aquele comando que você quase nunca usa você pode criar atalhos no git, e o melhor é que essa criação é super simples.

Pra criar um atalho é só utilizar o comando:

git config --global alias.co checkout

Com esse comando estamos configurando um atalho global, esse atalho é o co e ele representa o comando checkout. Depois de configurar esse atalho pra trocar de branch ao invés de rodar um:

git checkout main

Podemos usar:

git co main

Pra configurar qualquer atalho é só seguir essa estrutura:

git: pra indicar que um comando git será executado
config: pra indicar que esse é um comando de configuração
--global: flag que indica que o comando vai ser executado de maneira global e não apenas local, se não adicionarmos essa flag o atalho criado será configurado apenas pro repositório onde o comando foi executado
alias.[atalho]: argumento onde é definido o nome do novo atalho
checkout: como no exemplo eu tava criando um atalho pro comando checkout ele precisa aparecer aqui, então o último argumento é o comando que vai ser relacionado ao atalho

O comando que eu usei no exemplo é super simples, tem comando muito mais complicado e que acabamos não utilizando no dia a dia e são pra esses comandos que os atalhos são mais úteis. Alguns atalhos que eu tenho configurado:

Deletar uma branch do repositório remoto

git config --global alias.delRemote "push origin --delete"

Comando com atalho: git delRemote [nome da branch]
Comando original: git push origin --delete [nome da branch]

Deletar uma branch do repositório local

git config --global alias.delLocal "branch -d"

Comando com atalho: git delLocal [nome da branch]
Comando original: git branch -d [nome da branch]

Fazer um push pra criar uma nova branch remotamente

git config --global alias.pushNewB "push --set-upstream origin"

Comando com atalho: git pushNewB [nome da branch]
Comando original: git push --set-upstream origin [nome da branch]

Ver o último commit

git config --global alias.last "log -1 HEAD"

Comando com atalho: git last
Comando original: git log -1 HEAD

Listar os atalhos configurados

git config --global alias.alias "config --get-regexp alias"

Comando com atalho: git alias
Comando original: git config --get-regexp alias

Pra deletar um atalho é só utilizar esse comando:

git config --global --unset alias.co

Esse comando remove um atalho global, pra remover um atalho local é só remover o argumento --global:

git config --unset alias.co

Links úteis

App em Ionic + API em microsserviços rodando no Docker

Evellyn Lima — Mon, 20 Sep 2021 22:59:37 +0000

Eu tô fazendo um MBA em Engenharia de Software e um dos trabalhos do módulo atual era criar uma proposta de funcionalidade pra alguma startup unicórnio, eu escolhi o Nubank pois é o único serviço que uso das opções que estavam disponíveis.

Pra criar essa proposta nós precisávamos utilizar a seguinte stack:

Ionic pra fazer o mobile da aplicação
Criar uma API numa arquitetura de microsserviços
Rodar essa API dentro do Docker

Funcionalidade proposta

A funcionalidade que eu propus foi a seguinte:

Dentro da NuConta poderíamos adicionar a opção de criar carteiras
diferentes, dando aos clientes a opção de definir um nome para cada
carteira e escolher as condições, prazo e rendimento do CDI, em que a
pessoa quiser guardar esse dinheiro. Com essa funcionalidade os clientes
poderiam ter carteiras com objetivos diferentes e teriam mais liberdade e
autonomia em relação às suas reservas financeiras.

Além de criar diferentes carteiras, os clientes também poderiam guardar
mais dinheiro nas carteiras que já estão criadas.

Ionic

Eu já tinha mexido com o Ionic há muito tempo, quando ele ainda usava o Cordova pra fazer o processo de build, e esse processo era muito complicado porque aconteciam muitos erros, então eu já comecei o trabalho esperando que essa parte fosse ser bem complicada.

Quando comecei a ver documentação atual do Ionic vi que muita coisa mudou, o processo de build tá super simples, eles evoluíram muito a ferramenta, ela tem uma documentação muito completa, com muitos exemplos e explicações bem claras.

O Ionic pode ser usado com vários frameworks (React, Vue, Angular e Stencil) e até com JS puro. A configuração default que é gerada pela CLI deles tem o TypeScript configurado, a recomendação do time do Ionic é utilizar o TS mas você pode remover ele também, inclusive eles dão todo o passo a passo pra você remover essas configurações do projeto.

Na minha solução final eu utilizei o React e a Context API pra criar stores separadas para cada fluxo, com isso o fluxo de criação de uma carteira ficou com uma store dedica a ele e o fluxo de atualização da carteira também ficou com uma store exclusiva.

Eu removi o TS porque tive muitos problemas na hora de criar minhas stores, como eu não tenho muito conhecimento de TS eu estava perdendo muito tempo pra resolver esses problemas e achei melhor remover ele, afinal eu tinha uma data limite pra entregar o trabalho.

Resultado final: https://github.com/evelew/fiap-nubank-client

API em microsserviços

Eu já construí algumas APIs mas nunca tinha criado nada seguindo uma arquitetura de microsserviços, li sobre o assunto e entendi que eu poderia criar os serviços isolados e depois conectar tudo através de um proxy e foi exatamente o que eu fiz.

Como a solução que propus envolvia 2 domínios de negócio muito claros (carteira e rendimentos) eu não tive muita dificuldade de definir como quebraria meus serviços.

Pra criar esses 2 serviços eu utilizei uma arquitetura simples, uma das propostas do trabalho era usar as camadas de Domain, Repository, Service e Controller. Como ficou minha arquitetura:

Domain: Os meus serviços foram quebrados por domínio, então eu tinha um serviço que cuidava de toda a parte relacionada a carteira e outro que cuidava de tudo relacionado aos rendimentos.
Repository: Nessa camada ficou toda a parte que precisava se comunicar com o banco de dados (MongoDB), então aqui tinham todos os updates, inserts e gets feito nos documentos/coleções.
Service: Aqui ficou toda a lógica que precisava acontecer antes da comunicação com o banco de dados ser feita. Por exemplo, se eu quiser guardar uma quantia numa carteira existente, antes de fazer esse update eu preciso saber quanto de dinheiro já existe nessa carteira, certo? Essa lógica de fazer o GET da carteira, somar o valor atual com o novo valor que está sendo guardado ficou nessa camada de serviço.
Controller: O controller ficou responsável por conectar os endpoints da API aos serviços corretos.

Com isso eu consegui criar uma arquitetura bem simples onde cada camada tem a sua responsabilidade bem definida.

Para centralizar esses 2 serviços em uma API única eu criei um proxy que verifica qual é o domínio que está sendo chamado e redireciona essa requisição HTTP para a API correta.

Serviço responsável pelas carteiras: https://github.com/evelew/fiap-nubank-service-wallets

Serviço responsável pelos rendimentos: https://github.com/evelew/fiap-nubank-service-incomes

Proxy responsável por centralizar os serviços: https://github.com/evelew/fiap-nubank-proxy

Docker

O Docker é uma ferramenta muito famosa então eu já tinha ouvido falar sobre ele, entendia +- qual problema ele resolve mas eu nunca tinha chegado a configurar nada.

Eu precisava rodar minha API e meu banco de dados nele, num primeiro momento pensei em levantar um container com esses 2 serviços mas pesquisando sobre eu descobri que isso não é uma boa prática e que o ideal é cada serviço ter o seu próprio container, então precisava de um container pra API e de outro container apenas para o banco de dados. Pra fazer essa separação eu utilizei o docker-compose.

Quando eu li sobre a proposta do trabalho imaginei que essa seria a parte mais complexa, mas no final das contas foi uma das partes mais simples - ainda assim eu quebrei um pouco a cabeça com alguns bugs que rolaram mas todos foram resolvidos até que rapidamente pra quem nunca tinha mexido com a ferramenta.

Dockerfile: https://github.com/evelew/fiap-nubank-proxy/blob/main/Dockerfile

Configuração Docker Compose: https://github.com/evelew/fiap-nubank-proxy/blob/main/docker-compose.yml

Esse foi o trabalho que mais gostei de fazer no MBA porque nele precisei mexer com muitas coisas que não tô acostumada a mexer no dia a dia, e no final fiquei bem satisfeita com o resultado! Espero que te seja útil de alguma maneira :)

Links úteis

Refatorar X Refazer: O que considerar antes de tomar essa decisão

Evellyn Lima — Sat, 28 Aug 2021 01:19:02 +0000

Se você já entrou em um projeto desatualizado, com arquitetura e código confusos, provavelmente você já se perguntou:

"Será que devemos refazer esse projeto do zero? Ou devemos refatorar?"

Esse é um pensamento que uma hora ou outra vai passar pela sua cabeça, eu tenho pensado nisso durante uns meses e decidi compartilhar como eu costumo pensar nessas ocasiões.

Pra entender como eu escolho um dos caminhos é só acessar o post no meu blog: Refatorar x Refazer.

Eu gostei do resultado final e acredito que vale o clique. Boa leitura!

Links úteis

Foto tirada por NeONBRAND

Use a pseudo-element from CSS instead of toUpperCase method from JS

Evellyn Lima — Wed, 30 Jun 2021 18:56:35 +0000

It's common to find a toUpperCase() method inside a JS file to transform a text into uppercase, sometimes this method is used to uppercase only the first letter from a sentence.

Does it work? Yes. Does is it the ideal? I believe it doesn't. In these cases, we are using JS to control some parts of our layout, and with this in mind, we should prioritize the use of CSS.

And, not by chance, only with CSS we can set the first letter to uppercase.
To solve this we need to use the ::first-letter pseud-element.

Let's use this HTML as example:

<p class="message">evellyn, your address was updated.</p>

We have a paragraph with the class message with the text "evellyn, your address was updated.", the ideal is my name appears with the first letter as uppercase. Using CSS we can make it this way:

.message::first-letter {
  text-transform: uppercase;
}

With it, we change the style only to the first letter from the selector message, now our sentence will appear as it should: "Evellyn, your address was updated."

JS allows us to make a lot of things, but sometimes it is not the right choice. It's always important to search how we can make that UI change using only CSS.

You can read more about this pseud-element in the MDN documentation.
See original article
Photo by Diomari Madulara

CSS ::first-letter

Evellyn Lima — Mon, 28 Jun 2021 20:50:21 +0000

É comum olharmos arquivos de javascript e acabarmos encontrando um toUpperCase() no meio do código sendo usado pra deixar um texto em maiúsculo, e algumas vezes, pra deixar só a primeira letra de uma frase em maiúsculo.

Isso funciona? Funciona. É o ideal? Acredito que não. Nesses casos estamos usando JS pra controlar o estilo de alguma parte da nossa tela, e nesse caso o que a gente deve priorizar é a utilização do CSS.

E, não por acaso, apenas com CSS conseguimos definir a primeira letra como maiúscula.

Pra resolver isso precisamos usar o pseudo-elemento ::first-letter.

Pra exemplificar vamos usar esse trecho de HTML:

<p class="message">evellyn, seu endereço foi alterado.</p>

Temos um parágrafo com a classe message e com o texto "evellyn, seu endereço foi alterado.", o ideal é o meu nome aparecer com a primeira letra em maiúsculo, com CSS conseguimos fazer isso da seguinte maneira:

.message::first-letter {
  text-transform: uppercase;
}

Com isso alteramos o estilo apenas a primeira letra do seletor .message, assim a frase vai aparecer do jeito esperado na tela: "Evellyn, seu endereço foi alterado."

Com o JS conseguimos fazer muitas coisas mas nem sempre ele é a ferramenta certa pra fazermos tudo, por isso é importante sempre pesquisarmos se com CSS não conseguimos fazer aquela mudança visual na nossa página.

Links úteis

Você pode ver mais detalhes sobre esse pseudo-elemento na documentação da MDN.
Ver post original
Foto tirada por Diomari Madulara

Como rodar scripts paralelamente

Evellyn Lima — Sat, 19 Jun 2021 17:30:12 +0000

Quando configuramos alguns scripts pra rodarem no pre-commit/pre-push nosso tempo de desenvolvimento pode acabar sendo afetado pela demora pra executar essas tarefas, mas a gente consegue também diminuir esse tempo de espera rodando tarefas em paralelo.

Com o pacote concurrently nós conseguimos rodar vários scripts paralelamente, e pra fazer isso é bem simples, primeiro instalamos o pacote:

npm i concurrently

Com isso temos o pacote instalado no nosso projeto, agora pra rodar os scripts ao mesmo tempo é só executar o comando:

concurrently "command1 arg" "command2 arg"

É importante colocar os comandos dentro de aspas duplas pq se não colocarmos seriam executados 4 comandos: command1, arg, command2 e arg.

Podemos então configurar esse comando dentro do nosso package.json:

{
    "start": "concurrently \"command1 arg\" \"command2 arg\""
}

Quando o comando que quisermos executar for um comando npm nós podemos usar flag -n:

concurrently -n watch-js,watch-css,watch-nod

Isso seria equivalente a:

concurrently "npm run watch-js" "npm run watch-css" "npm run watch-node"

Além disso, podemos também executar vários comandos que comecem com um mesmo prefixo:

{
  ...
  "scripts": {
      "watch-js": "...",
      "watch-css": "...",
      "watch-node": "...",
  },
  ...
}

Pra rodar todos esses scripts podemos simplesmente rodar:

concurrently -n "watch-*"

É importante ganharmos tempo no nosso dia a dia, e rodando alguns scripts paralelamente é uma maneira simples de fazermos isso, então se você tem algum projeto que leva muito tempo pra rodar alguns comandos, talvez valha a pena estudar se essa solução se encaixa pro seu caso!

Links úteis

Você pode ver esses exemplos e mais alguns nessa página do pacote: NPM concurrently
Ver post original
Foto tirada por Adi Goldstein

Como eu organizo o CSS

Evellyn Lima — Mon, 31 May 2021 14:16:21 +0000

Nesse post eu comento sobre 3 pontos que eu organizo quando eu escrevo arquivos CSS:

Ordem das propriedades
Ordem dos seletores
Nomes de classes

Eu gostei bastante de contar sobre como costumo fazer essa organização, vale a pena dar uma conferida no link do meu blog oficial:

https://evellynlima.com.br/como-eu-organizo-meu-css/

Links úteis

Foto tirada por Rad Pozniakov

Definindo uma cobertura mínima de testes no Jest

Evellyn Lima — Fri, 21 May 2021 00:30:38 +0000

Imagine que você que cobriu o seu fluxo mais importante com testes, sua cobertura ta em 85% e você ta feliz da vida, algum tempo depois esse fluxo sofre algumas mudanças, a cobertura de testes cai e ninguém repara. Como esse é o fluxo mais importante da sua aplicação é importante que ele tenha uma cobertura mínima de testes, e com essas mudanças a cobertura acaba ficando longe de ser boa...

Existe uma configuração no Jest que faz essa validação de cobertura automaticamente. Pra entender como ela funciona e como é configurada é só ler o artigo que eu fiz no meu blog:

http://evellynlima.com.br/definindo-uma-cobertura-minima-de-testes-no-jest/

Links úteis

Foto tirada por Claudio Schwarz

E como o this funciona?

Evellyn Lima — Mon, 17 May 2021 00:57:22 +0000

http://evellynlima.com.br/e-como-o-this-funciona/