Forem: Fernanda Sayuri

Guia prático: Padrão de Commit

Fernanda Sayuri — Wed, 26 Mar 2025 00:12:29 +0000

Padrão de commit

Seja trabalhando sozinho ou em um time com vários devs ora ou outra precisamos consultar commits anteriores. No começo eu acaba escrevendo meus commits como: "Correção”, “Melhorias” e “Update”, pois não sabia que existia uma boa prática pra isso. Assim, sempre que precisava buscar alguma alteração antiga era muito difícil e confuso... Até que descobrir o Conventional Commits.

1. O que é Conventional Commits?

Conventional commits trata-se de um padrão de escrita de mensagens de commit para facilitar a comunicação entre desenvolvedores e ajudar a manter o histórico do código organizado.

O padrão é bem simples:
<tipo>(escopo): <descrição>

2. Tipos

Os tipos é obrigatório e são sobre o que se trata o commit.
Só pode ser usado um por commit, caso esteja em dúvida sobre qual usar, provavelmente trata-se de uma grande mudança e é possível separar o código em dois ou mais commits.

Os tipos mais comuns são:

feat: novo recurso
fix: solucionando um problema
docs: mudanças na documentação
test: alterações em testes
build: alterações em arquivos de build e dependências
perf: alterações relacionadas à performance
style: formatação de código e lint
refactor: refatoração de código que não altera a funcionalidade
chore: atualizações de tarefas de build, configurações de administrador e pacotes
cleanup: limpeza no código, legibilidade
remove: exclusão de código/arquivos que não são mais utilizados
revert: rollback para commit específico

É possível adicionar um ! opcional na para chamar atenção a quebra de compatibilidade.
Exemplo:

feat!: descontinuar uso do componente card

3. Escopo

Este é opcional e trata-se sobre qual é o escopo específico abordado, como um componente, fluxo ou configuração.

4. Descrição

Para escrever a descrição podemos pensar: "se eu aplicar esse commit ele vai..." ou "O que essa alteração faz?" e completar a frase.

Não é necessário colocar o porque do commit (motivação), mas sim o que de fato ele faz.
É obrigatório escrever em inglês? Não, isso deve ser alinhado com outros devs que irão trabalhar no mesmo repositório, mas é sempre uma boa prática utilizar inglês para documentações.

5. Emojis

É possível utilizar um emoji no início da mensagem de commit representando sobre o que ele se trata.
É opicional e tem objetivo apenas visual para organização.

Os principais tipos são:

Tipo de commit	Emojis
Commit inicial	🎉 `:tada:`
Tag de versão	🔖 `:bookmark:`
Novo recurso	✨ `:sparkles:`
Lista de ideias (tasks)	🔜 `:soon:`
Bugfix	🐛 `:bug:`
Documentação	📚 `:books:`
Testes	🧪 `:test_tube:`
Acessibilidade	♿ `:wheelchair:`
Adicionando um teste	✅ `:white_check_mark:`
Teste de aprovação	✔️ `:heavy_check_mark:`
Acessibilidade	♿ `:wheelchair:`
Texto	📝 `:pencil:`
Package.json em JS	📦 `:package:`
Em progresso	🚧 `:construction:`
Arquivos de configuração	🔧 `:wrench:`
Removendo uma dependência	➖ `:heavy_minus_sign:`
Adicionando uma dependência	➕ `:heavy_plus_sign:`
Revertendo mudanças	💥 `:boom:`
Alterações de revisão de código	👌 `:ok_hand:`
Refatoração	♻️ `:recycle:`
Mover/Renomear	🚚 `:truck:`
Acessibilidade	♿ ♿
Deploy	🚀 `:rocket:`
Segurança	🔒️ `:lock:`

6. Exemplos:💻

Comando Git	Resultado no GitHub
`git commit -m ":tada: Commit inicial"`	🎉 Commit inicial
`git commit -m ":books: docs: Atualização do README"`	📚 docs: Atualização do README
`git commit -m ":bug: fix(modal): Loop infinito na linha 50"`	🐛 fix: Loop infinito na linha 50
`git commit -m ":sparkles: feat: Página de login"`	✨ feat: Página de login
`git commit -m ":zap: perf: Melhoria no tempo de resposta"`	⚡ perf: Melhoria no tempo de resposta
`git commit -m ":boom: fix: Revertendo mudanças ineficientes"`	💥 fix: Revertendo mudanças ineficientes
`git commit -m ":lipstick: feat!: Estilização CSS do formulário"`	💄 feat: Estilização CSS do formulário
`git commit -m ":test_tube: test: Criando novo teste"`	🧪 test: Criando novo teste
`git commit -m ":bulb: docs: Comentários sobre a função LoremIpsum( )"`	💡 docs: Comentários sobre a função LoremIpsum( )
`git commit -m ":broom: cleanup: Eliminando blocos de código comentados e variáveis não utilizadas na função de validação de formulário"`	🧹 cleanup: Eliminando blocos de código comentados e variáveis não utilizadas na função de validação de formulário
`git commit -m ":wastebasket: remove: Removendo arquivos não utilizados do projeto para manter a organização e atualização contínua"`	🗑️ remove: Removendo arquivos não utilizados do projeto para manter a organização e atualização contínua

Conclusão

Padronizar mensagens de commit pode parecer um detalhe pequeno, mas faz toda a diferença na organização e manutenção de um projeto. Usando Conventional Commits (com ou sem emojis), o histórico do repositório se torna mais claro, facilitando revisões e colaboração em equipe.

Se você ainda não segue um padrão, experimente adotar essa prática e veja como ela pode melhorar seu fluxo de trabalho!

💖 Obrigado por ler, escrevi este artigo no intuito de ajudar os Devs e também registrar mais um dos meus aprendizados.
Sinta-se à vontade para interagir e comentar.

TypeScript: Diferença entre type e interface

Fernanda Sayuri — Thu, 30 Jan 2025 02:58:59 +0000

Se você usa React e TypeScript, provavelmente já se perguntou: qual a diferença entre type e interface? 🤔
Muitas vezes vejo que no dia a dia muitos devs escolhem usar um ou outro de forma arbitrária pois para a maioria dos casos acaba não tendo nenhum impacto real.

1. Uso

💡 Types são mais flexíveis, usado para definir um alias para um tipo.

type Person = {
  name: string;
  age: number;
};

Além disso, type pode definir uniões de tipos, interface não.

type Status = "success" | "error" | "loading";
interface Status = "success" | "error" | "loading"; // ❌ Erro

💡 Interfaces são ideais para definir a estrutura de objetos e podem ser estendidas com extends, facilitando a reutilização, utilizado para definir um contrato para um objeto.

interface User {
  name: string;
  age: number;
}

2. Herança

Interface permite herança múltipla através de extends.

interface Employee extends Person {
  email: string;
}

Type usa interseção (&) para combinar tipos.

type Employee = Person & {
  email: string;
};

3. Qual Usar?

✔ Use interface quando estiver lidando com objetos e precisar de extensibilidade.
✔ Use type quando precisar de uniões de tipos, interseções, funções ou retorno de apis.

No geral, interfaces são preferidas para objetos, enquanto type é mais flexível para outras situações.

💖 Obrigado por ler, sinta-se à vontade para comentar e interagir!

Compiling 2025: Metas e planejamento como Frontend

Fernanda Sayuri — Tue, 28 Jan 2025 00:58:12 +0000

Esta é uma submissão para o desafio de escrita de ano novo de 2025: Compilando 2025.

Oi, eu sou a Fernanda Sayuri. Trabalho como desenvolvedora front-end há 5 anos. Gostaria de compartilhar minhas ambições e metas para 2025.
Todo começo de ano adoro pensar e planejar minhas metas para o ano, me sinto energizada e ansiosa para enfrentar novas oportunidades e desafios. Ano novo, vida nova.

1. Escrita e Criação de Conteúdo:

Sempre gostei de falar e escrever. Já até dei algumas palestras e workshops de desenvolvimento, mas sem muito comprometimento ou com uma frequência definida.
🚀Este ano, é muito importante para mim escrever artigos técnicos e criar conteúdo educacional que possa ajudar outras pessoas. Quero que seja algo que se encaixe na minha rotina e quero ganhar mais maturidade no assunto.
✨A meta é escrever pelo menos 2 artigos técnicos sobre tecnologia por mês.

2. Planejamento: upskilling e novas habilidades

Pensei em separar o plano de ação em trimestres, pois para mim cada mês tem um ritmo e assim consigo pensar em uma média de entregas.

Q1:
- Criar um portfólio.
- Finalizar estudos sobre Lerna e NX monorepo para versionamento de componentes do Design System.
- Upskilling sobre Webpack, Babel, Husky e Gulp.
Q2:
- Aprender sobre Strapi CMS.
- Upskilling de testes de ponta a ponta, Cypress e TDD.
- Q3:
- Aprender sobre Strapi CMS.
- Estudar sobre Microfrontend.
Q4:
- Quero obter alguma certificação AWS, GitHub ou Meta Front End Developer.

3. Aspirações de carreira:

📒Melhorar meu papel de liderança tecnológica, assumindo mais responsabilidade pelo crescimento da equipe e gestão de projetos, e para isso, iniciar uma pós-graduação na área.
Contribua para projetos relevantes que se alinhem com minha paixão por inovação e resolução de problemas, especialmente nas áreas de sistemas de design e acessibilidade.

Vamos fazer acontecer

💖 Obrigado por ler, desejo a você um ótimo ano!
Sinta-se à vontade para interagir e comentar.
Quais são suas metas para 2025? ✨

Compiling 2025: Goals and planning as Frontend

Fernanda Sayuri — Sun, 19 Jan 2025 05:25:27 +0000

This is a submission for the 2025 New Year Writing challenge: Compiling 2025.

Hi, I'm Fernanda Sayuri. I've been working as a Frontend developer for 5 years. I'd like to share my ambitions and goals for 2025.
Every beginning of the year I love thinking and planning my goals for the year, I feel energized and eager to face new opportunities and challenges. New year, new life.

1. Writing and Content Creation:

I've always enjoyed speaking and writing. I've even given some talks and development workshops, but without much commitment and with a defined frequency.
🚀This year, it's very important for me to write technical articles and create educational content that can help other people. I want it to be something that fits into my routine and I want to gain more maturity in the subject.
✨The goal is to write at least 2 technical articles about technology per month.

2. Planning: upskilling and new skills

I thought about separating the action plan into quarters, because for me each month has a rhythm and this way I can think about an average of deliveries.

Q1:
- Create a portfolio.
- Finalize studies on Lerna and NX monorepo for versioning of Design System components.
- Upskilling about Webpack, Babel, Husky and Gulp.
Q2:
- Learn about Strapi CMS.
- Upskilling end-to-end testing, Cypress and TDD.
Q3:
- Learn about Strapi CMS.
- Study about Microfrontend.
Q4:
- I want to get some AWS, GitHub or Meta Front End Developer certification.

3. Career Aspirations:

📒Improve my technological leadership role, taking on more responsibility for team growth and project management, and to do so, start a postgraduate degree in the area.
Contribute to relevant projects that align with my passion for innovation and problem solving, especially in the areas of design systems and accessibility.

Let's make it happen

💖 Thanks for reading, I wish you a great year!
Feel free to interact and comment.
What are your goals for 2025? ✨

Como criar fonte de ícones

Fernanda Sayuri — Fri, 03 Mar 2023 01:45:54 +0000

Para realizar a criação de font utilizei o site Fontello, mas também existem outros sites como alternativa.

Salve todas as imagens que deseja como ícone no formato SVG e arraste na seção "Custom Icons".

Resultado com todos os ícones importados e selecionados.

Na aba "Customize Names" é possível ver todos os ícones importado e verificar o nome de cada um, é importante lembrar que não são suportados caractéres especiais, além disso, podemos definir o nome da fonte.

Após isso, é necessário fazer o dowload da font, extrair a pasta e importar no projeto a pasta CSS e fonts.

No projeto é preciso importar o css gerado.

Agora só usar seus ícones passando eles como classe onde desejar.

Por fim, também é possível criar classes globais auxiliares para configurar o tamanho dos ícones utilizando a propriedade font-size.