Forem: Ana Caroline Campos

Documenta seu PR/MR, criatura- PR's template

Ana Caroline Campos — Thu, 22 Feb 2024 13:33:57 +0000

Quem nunca viu ou abriu um PR/MR sem descrição, né!? 💩

Agora vamos passar disso aí pra isso aqui:

Como que faço isso?

Simples, simples, simples.

Github:

Add na raiz do seu projeto um arquivo markdown com esse nome pull_request_template.md e taca na main.
Insere lá esse markdown aqui e prontinho.
No seu próximo PR ela já aperce automágicamente.

Gitlab:

Add no seu projeto um arquivo markdown com esse nome .gitlab/pull_request_template.md e taca na main.
Insere lá esse markdown aqui e prontinho.
Na hora de abrir um MR é só escolher o template na descrição:

Pra que cê vai gastar mais tempo meu?

Documentação

Pra ter registrado de forma legível para devs e não devs o que foi feito, quando, como, porquê. Isso na hora de demonstrar seu trabalho com sua liderança é ótimo.

Evitar retrabalho

Devs tem que entender código, mas saber porquê você fez as alterações e uma breve explicação das lógicas vai economizar tempo com dúvidas e ajudar num code review menos cansativo. Pegar melhorias na etapa de code review é muito melhor que pegar com pressão do seu tech lead ou PO.

Use, adapte ao seu cenário e seja feliz. E pra deixar ainda mais lindo e de fácil rastreio eu indico DEMAIS esse cara aqui: https://gitmoji.dev/

Diferença entre NPM INIT e NPX

Ana Caroline Campos — Wed, 21 Feb 2024 03:57:13 +0000

Tanto o npm init quanto o npx são usados para gerenciar pacotes do node. A difrença é que com o npm init nós instalamos um pacote, já no npx nós executamos ele. Bem simples.

Podemos entender melhor usando o exemplo do create-react-app e do http-server.

npm init react-app

O npm init é um inicializador de pacotes. Ele é usado para iniciar um template de projeto. Com ele não é preciso colocar o create como prefixo porque ele já faz isso automáticamente.

npx create-react-app

O npx é um executador (node package eXecute). Ele inicia seu trabalho rastreando na sua máquina ou na pasta do projeto por pacotes que correspondam ao que você está tentando executar. Caso ele não encontre ele fará download dessas depêndencias em uma pasta temporária.

npm install http-server

E por último, o npm install faz a instalação do pacote e depois disso você pode usá-lo só chamando o nome do pacote.

Quando pensamos no npm install é importante nos atentarmos para não termos pacotes globais desatualizados.

Já com o npx o ideal é usar para pacotes que usaremos pontualmente. Fora isso rodem o npm install na pasta do projeto. É para você que quer usar um pacote sem instalar ele.

O npm init, como o próprio nome diz, é um inicializador. Se você usar esse comando para um pacote que não é de inicialização você vai receber um erro bem bonito:

referências: npm-init, npx, npm-install.

Mais difícil que sair de um labirinto?

Ana Caroline Campos — Wed, 01 Feb 2023 03:34:28 +0000

Achar seu site é mais difícil que sair de um labirinto? Tá na hora de conhecer o SEO.

É de graça e vai por de forma orgânica (DE GRAÇA) seu site nas principais recomendações de buscas.

DICA 1 - USE SCHEMAS

Sabe quando você da um google e tem uma pré-visualização das informações do produto? Usamos os dados estruturados para passar essa informações para a ferramenta de busca como, por exemplo, o Google.
Exemplo de um snippet

<script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "Recipe",
      "name": "Party Coffee Cake",
      "author": {
        "@type": "Person",
        "name": "Mary Stone"
      },
      "datePublished": "2018-03-10",
      "description": "This coffee cake is awesome and perfect for parties.",
      "prepTime": "PT20M"
    }
</script>

Esse é um exemplo que tirei da doc do Google, você pode usá-la, mas na doc oficial do schema.org você vai encontrar vários atributos usados por outras ferramentas de buscas além das usadas pelo Google como Bing, DuckDuckGo, Baidu (usada na China). Exemplo:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Recipe",
  "author": "John Smith",
  "cookTime": "PT1H",
  "datePublished": "2009-05-08",
  "description": "This classic banana bread recipe comes from my mom -- the walnuts add a nice texture and flavor to the banana bread.",
  "image": "bananabread.jpg",
  "recipeIngredient": [
    "3 or 4 ripe bananas, smashed",
    "1 egg",
    "3/4 cup of sugar"
  ],
  "interactionStatistic": {
    "@type": "InteractionCounter",
    "interactionType": "https://schema.org/Comment",
    "userInteractionCount": "140"
  },
  "name": "Mom's World Famous Banana Bread",
  "nutrition": {
    "@type": "NutritionInformation",
    "calories": "240 calories",
    "fatContent": "9 grams fat"
  },
  "prepTime": "PT15M",
  "recipeInstructions": "Preheat the oven to 350 degrees. Mix in the ingredients in a bowl. Add the flour last. Pour the mixture into a loaf pan and bake for one hour.",
  "recipeYield": "1 loaf",
  "suitableForDiet": "https://schema.org/LowFatDiet"
}
</script>

DICA 2 - USE OS ATRIBUTOS DAS TAGS

Descreve o que sua imagem é. Parece besta? E é. Mas isso vai fazer toda a diferença no seu ranqueamento (o que mexe diretamente no seu bolso) e o mais importante NA ACESSIBILIDADE. Seu site será mais inclusivo e isso é um tópico importantíssimo que podemos discutir em um outro post, mas voltando para o SEO, se eu tenho um site onde vendo sapatos e tenho 10 produtos com a descrição desses sapatos, no momento que alguém procurar por um, as minhas chances de aparecer entre os principais resultados são enormes. Foi mais rápido explicar sobre snippets do que sobre alt? Bom, vamos prestar mais atenção nos pequenos detalhes.

Exemplos de tags que impactam positivamente no SEO:

DICA 3 - USE O LIGHTHOUSE

Eu sou fã número 1 dessa ferramenta. O Lighthouse pode ser adicionado como uma extensão no seu navegador e ele inspeciona seu site com um click e de graça gera relatórios com diversas modificações que vão melhorar a performance, acessibilidade, SEO e Boas Práticas do seu site. Aqui também vai um extra porque ele te da dicas para tornar sua aplicação mobile friendly.
O Lighthouse te ajuda:

Se sua aplicação tá uma carroça e você não faz ideia de onde está o problema (ele aponta até os scripts carregados em momentos desnecessários)
Suas imagens que faltam o alt
Os botões que deveriam ser maiores Enfim, perfeito e gratuito, usem.

Vamos fechando por aqui que ninguém aguenta mais uma linha de texto. Eu deixei dicas e links com diferentes fontes para estudo, se divirta e me conta o que aprendeu.