Forem: Dante J. Anjos

Criei uma extensão para VS Code que transforma TODOs em um quadro Kanban e issues reais no Jira

Dante J. Anjos — Fri, 09 Jan 2026 06:04:54 +0000

É muito comum código com vários TODO.
E o time sabe que a maioria deles nunca vira trabalho de verdade.

Eles ficam perdidos em comentários, são esquecidos, e aos poucos viram dívida técnica invisível.

Foi exatamente por isso que eu criei o TODO Board.

O problema

Na maioria dos projetos, a dívida técnica está espalhada pelo código em comentários como:

// TODO: refatorar isso
// FIXME: tratar edge case
// NOTE: melhorar performance

Essas são pendências reais, mas elas não estão no Jira, não entram em sprint, não têm prioridade e geralmente não têm dono.

Ou seja: o backlog não representa a realidade do código.

A ideia

E se TODOs fossem tratados como itens de backlog de verdade?

O TODO Board é uma extensão para VS Code que escaneia o projeto, encontra TODO, FIXME, NOTE, etc e organiza tudo em um board dentro estilo kanban com busca, labels, filtros, busca textual e por data e tudo isso dentro do próprio editor.
Possui configurações para o usuário customizar

Integrado com Jira. A partir dali, você pode transformar qualquer TODO em uma issue no Jira com um clique.

Sem copiar e colar.
Sem perder contexto.
Sem "depois eu crio o ticket".

O que a extensão faz

Escaneia o projeto procurando TODO, FIXME, NOTE...
Organiza tudo em um board dentro do VS Code
Mostra arquivo, linha, idade e prioridade
Cria issues no Jira direto do editor
Preenche automaticamente a issue com o contexto do código
Mantém a associação TODO ↔ issue entre rescans
Possibilidade de adicionar labels e prioridades

Configurações

A TODO Board permite personalizar completamente como o scanner funciona dentro do seu projeto.

Você pode definir quais extensões de arquivo devem ser consideradas no scan:

"todo-board.fileExtensions": [
  "ts", "tsx", "js", "jsx", "vue", "py", "go", "rb", "php", "rs", "swift"
]

Também é possível customizar os padrões de busca usados para identificar pendências no código:

"todo-board.searchPatterns": ["@TODO", "FIXME", "BUG"]

Para evitar capturar blocos muito grandes, você pode limitar quantas linhas cada TODO pode ocupar:

"todo-board.maxTodoLines": 4

O destaque visual dos TODOs no editor também é totalmente configurável:

"todo-board.highlight.enabled": true,
"todo-board.highlight.highPriorityColor": "#e74c3c",
"todo-board.highlight.mediumPriorityColor": "#ffa94d",
"todo-board.highlight.lowPriorityColor": "#4dabf7"

Integração com Jira (do jeito certo)

A integração com Jira usa OAuth 2.0 (3LO) e um backend seguro.

Alguns pontos importantes:

A extensão não conversa diretamente com as APIs do Jira
Toda comunicação passa por um backend
Tokens ficam armazenados de forma segura
O app pede apenas o mínimo de permissões necessárias
O usuário só consegue criar issues nos projetos que já tem acesso
Isso permite usar a extensão até em ambientes corporativos com mais restrições.

Por que isso é útil

A dívida técnica fica visível
O backlog passa a refletir a realidade do código
Planejamento mais previsível
Menos TODO esquecido
Menos retrabalho

Seu código finalmente fala com o backlog.

Open source

O projeto é open source e está disponível aqui:
https://github.com/dantewebmaster/todo-board

Extensão no marketplace oficial:
https://marketplace.visualstudio.com/items?itemName=dantewebmaster.todo-board

Feedback, issues e PRs são muito bem-vindos 🙂

Como aplicar debounce em input de busca sem lodash

Dante J. Anjos — Fri, 10 Feb 2023 06:21:49 +0000

Campo de busca é um componente muito comum em aplicações, geralmente seguem o mesmo fluxo:

Usuário digita um texto no campo
Em seguida é disparado um GET request para alguma API
E por fim a lista de resultados é renderizada em tela

O problema aqui é no segundo passo, onde seria um desperdício de recurso do servidor, fazer uma busca a cada letra digitada, aí que entra a estratégia chamada de debounce.
A idéia é aplicar um delay, antes de fazer a chamada à API, assim evitando chamadas desnecessárias.

Uma solução muito utilizada é o pacote lodash debounce, mas para a finalidade descrita acima a implementação é muito simples usando um setTimeout. O importante é criar uma referência ao timeout antes, para poder reiniciar o delay, pois caso o usuário insira uma nova busca antes da anterior terminar, o timeout continua em execução, então buscas desnecessárias são feitas do mesmo jeito.

const DEBOUNCE_DELAY = 500;

let timeoutRef; // cria a referência ao timeout

const someFetchFunction = (value) => {
  clearTimeout(timeoutRef); // reinicia o timeout

  timeoutRef = setTimeout(() => {
    // faz a chamada à API e outros códigos após o delay
  }, DEBOUNCE_DELAY)
}

Apenas isso já é suficiente para que o debounce funcione sem erros. A função pode ser chamada no campo de input, passando o valor digitado no campo de busca.

Vanilla JavaScript Modal with multiple open/close handlers

Dante J. Anjos — Thu, 04 Feb 2021 21:58:20 +0000

In this post I want to show how we can easily create a modal with vanilla JavaScript. It can have multiple open/close handlers thanks to querySelectorAll.

First of all lets create the HTML structure for our modal.

<div class="modal">
  <span class="modal-backdrop"></span>
  <div class="modal-content">
    <div class="modal-header">
      <h2 class="modal-title">Modal Title</h2><button class="close-modal">&times</button>
    </div>
    <div class="modal-body">
      <h3>Modal body</h3>
      <p>Modal body text</p>
    </div>
    <div class="modal-footer">
      <button class="close-modal">Ok</button>
      <button class="close-modal">Cancel</button>
    </div>
  </div>
</div>

Now lets add some style.

.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 2rem;
  position: fixed;
  width: 100%;
  top: 0;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease;
}
.modal .modal-backdrop {
  background: rgba(0, 0, 0, 0.7);
  height: 100%;
  width: 100%;
  position: fixed;
}
.modal .modal-content {
  background: #fff;
  border-radius: 5px;
  max-width: 600px;
  position: fixed;
  top: -100%;
  transition: all 0.6s ease;
  z-index: 1000;
}
.modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ccc;
  padding: 1.5rem;
}
.modal .modal-header .close-modal {
  font-size: 2rem;
  padding: 0;
  margin: 0;
  height: 30px;
  width: 30px;
  text-align: center;
}
.modal .modal-header .close-modal:hover {
  color: #000;
}
.modal .modal-body {
  padding: 1.5rem;
}
.modal .modal-footer {
  border-top: 1px solid #ccc;
  padding: 1rem;
  text-align: right;
}

Notice that 3 attributes on .modal class.

.modal {
  ...
  top: 0;
  visibility: hidden;
  opacity: 0;
}

It will keep the modal hidden by default, later we will use JavaScript to add a .visible class to make our modal appear on the screen.

Time to JavasCript

Finally lets write some JavaScript code to give interaction to the modal.

We begin finding what we need to interact in the DOM.

const modal = document.querySelector('.modal'),
      openHandlers = document.querySelectorAll('.open-modal'),
      closeHandlers = document.querySelectorAll('.close-modal');

Now we loop through our open and close handlers to add it a click eventListener.

openHandlers.forEach(openHandler => {
  openHandler.addEventListener('click', openModal)
});

closeHandlers.forEach(closeHandler => {
  closeHandler.addEventListener('click', closeModal)
});

We added a call to an open and and close functions when the click event gets fired. Lets create these two.

function openModal() {
  modal.classList.add('visible');
}

function closeModal() {
  modal.classList.remove('visible');
}

When our openModal function gets fired, we simply add a class .visible to the main .modal class.
So we can toggle its visibility with CSS.

.modal.visible {
  opacity: 1;
  visibility: visible;
}
.modal.visible .modal-content {
  top: 25%;
}

Notice the

top: 25%

It's just to add some cool animation in out.

Thats all we need and our modal is ready.
Vanilla JavaScript is pretty easy nowadays, in the past it would be a pain in the ass to make such a simple thing.

Check the demo on codepen to see it in action.

Componente Snackbar com React do zero

Dante J. Anjos — Thu, 28 Jan 2021 02:28:57 +0000

Componentes snackbar são aqueles alertas flutuantes com informações importantes, ex: mensagens de erro, alertas, sucesso etc.
Utilizando React podemos criar um snackbar de forma bem simples.

Vamos ao código

Na raiz do projeto crie uma pasta chamada components e dentro desta, uma outra chamada Snackbar.

Dentro da pasta Snackbar crie os arquivos index.js e styles.css.

No arquivo index vamos criar um functional component com o JSX inicial do nosso snackbar.

import React from "react";
import "./styles.css";

export default function Snackbar() {
  return (
    <div className="snackbar visible success">
      <span>Lorem ipsum dolor sit amet</span>
      <button className="close">x</button>
    </div>
  );
}

Vamos adicionar alguns estilos para deixar nosso snackbar bonitão quando ele aparecer na tela.

.snackbar {
  background-color: #333;
  position: fixed;
  bottom: 0;
  left: 50%;
  width: 400px;
  margin-left: -200px;
  opacity: 0;
  visibility: hidden;
  color: #fff;
  padding: 16px;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 200ms ease-in-out;
}

.snackbar .close {
  font-size: 18px;
  cursor: pointer;
  transition: 200ms;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: #fff;
}

Vamos adicionar algumas propriedades para nosso componente e começar a trabalhar na lógica de exibir e ocultar.

function Snackbar({ type, open, children, onClose }) {
  return (
    <div className={`snackbar ${open && "visible"} ${type}`}>
      <span>{children}</span>
      <button className="close" onClick={onClose}>
        &times;
      </button>
    </div>
  );
}

Note as props open e type, essas serão essencialmente usadas para adicionar os estilos principais da snackbar e também exibir e ocultar.

className={`snackbar ${open && "visible"} ${type}`}

Quando a prop open for true a classe .visible será adicionada ao componente. Então basta adicionar visibilidade ao componente via CSS.

.snackbar.visible {
  opacity: 1;
  bottom: 20px;
  visibility: visible;
}

a prop type receberá valores como success, error, warning e info. Podemos usar cada um desses valores para adicionar uma cor diferente ao snackbar.

.snackbar.success {
  background-color: rgb(0, 158, 0);
}

.snackbar.info {
  background-color: rgb(86, 83, 255);
}

.snackbar.warning {
  background-color: rgb(255, 181, 44);
}

.snackbar.error {
  background-color: rgb(219, 55, 55);
}

Obs: Para lidar com o bind dinâmico de classes poderíamos usar uma lib como classnames, mas como se trata de uma lógica bem simples, vamos fazer isso sem lib mesmo.

Toques finais

Apesar de ser um componente pequeno (400px). Para garantir a boa visualização em telas pequenas, vamos fazer um pequeno ajuste usando @media querie.

@media (max-width: 480px) {
  .snackbar {
    width: 100%;
    margin-left: 0;
    left: 0;
    border-radius: 4px 4px 0 0;
  }

  .snackbar.visible {
    bottom: 0;
  }
}

Agora sim, nosso componente está pronto para uso.

<Snackbar
  type="success"
  open={someStateOpen}
  onClose={() => setSomeStateOpen(false)}
>
  Que snackbar massa e fácil de usar =)
</Snackbar>

Acesse a demo no codesandbox para conferir o código completo e exemplo de uso.

Como clonei a interface do iFood com React Native e Styled Components

Dante J. Anjos — Thu, 07 Jan 2021 00:38:41 +0000

Há um tempo atrás postei um vídeo no Linkedin demonstrando uma cópia que fiz da home do iFood usando React Native.

Pensei que chamaria atenção apenas de amigos e colegas de trabalho, porém recebi muitos feedbacks positivos e inclusive muitos pedindo para postar o código no github e escrever um tutorial de como eu fiz… então vamos lá!

Eu fiz tudo a olho mesmo, só olhando o app no celular enquanto codava… mas uma boa ideia é usar o modo Image Overlay do Reactotron para ir se guiando no layout e pegar medidas mais exatas.

Qualidade antes de tudo

Por mais que a ideia seja apenas recriar uma interface… é sempre bom escrever um código de qualidade, então uma ótima dica é usar o template basic da rocketseat, pois nele já vem configurado um bom eslint e editorconfig. Já vem com as libs essenciais para se trabalhar com React Native, como, React native gesture handler, React Navigation, PropTypes e é claro, Styled Components.

Preparando os dados para a tela

A primeira coisa que fiz foi estudar a interface e mapear os dados que precisaria mockar para montar as telas:

Banners promocionais
Pratos em destaque
Categorias
Restaurantes recentes
Lista de top restaurantes no iFood
Lista dos restaurantes cadastrados

Imagens e ícones

Usei a API do unsplash para gerar as imagens e algumas peguei de CDNs que encontrei no google. Para os ícones, a principio usei PNGs mesmo, mas já instalei RN Vector Icons, pois ajuda bastante.

Componentes visuais

Para cada componente eu criei um diretório e dentro um arquivo index.js com o JSX do componente e outro chamado styles.js onde coloco todo o estilo usando Styled Components.

Usar Styled Components é muito prático e fácil, principalmente para quem já está acostumado com CSS. A documentação é muito boa e no meu código tem vários exemplos de uso, inclusive acessando as props do componente.
Segue um bem simples do meu Banner.

Páginas e rotas

Nas páginas usei a mesma estrutura dos componentes visuais, um diretório com index.js e styles.js.

Para as rotas eu usei o createBottomTabNavigator do React Navigation e criei um componente para recriar o rodapé de navegação do iFood.
Deixei quatro rotas criadas para poder renderizar os ícones no rodapé, mas atualmente apenas duas telas estão prontas, Home e Busca.

Próximos passos

Pretendo recriar algumas outras telas da aplicação. Escolhi a interface do iFood pois sou fã do layout e é um aplicativo que uso bastante, então conheço bem cada página muito bem.

O código está disponível no meu github. Fique a vontade para contribuir, deixei no README uma lista de TODOs caso queira dar uma ajudinha :).
https://github.com/dantewebmaster/react-native-ifood-clone

Referência

Difícil escrever um artigo sobre React Native sem citar a Rocketseat, depois que conheci não parei de acompanhar os caras.
Então caso tenha curtido a ideia de recriar interfaces de aplicativos famosos, dá uma conferida no canal deles, lá tem um vídeo onde é feito do zero o clone da interface do Nubank e Uber (eu vi esses dois e achei muito massa).
Tem bastante conteúdo bom sobre Node e React também.

PS:

Indico fortemente a maratona de código da Rocketseat (NLW). Acha impossível em poucos dias criar um backend em Node, App web em React e App mobile usando React Native?
Se inscreva e vá até o final para confirmar que é bem possível. Eu participei e foi uma experiência muito boa!

Formulário multi step com React

Dante J. Anjos — Wed, 06 Jan 2021 23:43:42 +0000

Este é um post com uma idéia de formulário multi step criado em ReactJS.

Formulários multi step são aqueles formulários divididos em etapas diferentes que o usuário vai preenchendo e seguindo um passo a passo.

Geralmente são feitos dessa forma para que o preenchimento não fique cansativo e chato com uma tela cheia de campos.
Um bom exemplo é um formulário de checkout, em que o usuário precisa inserir dados pessoais, de entrega e pagamento.

Vamos ao código

Primeiro vamos criar a estrutura dos passos do form:

const steps = [
  {
    id: 'PERSONAL',
    title: "Dados pessoais"
  },
  {
    id: 'SHIPPING',
    title: "Endereço de entrega"
  },
  {
    id: 'PAYMENT',
    title: "Dados de pagamento"
  }
];

A idéia é bem simples. Um array com a lista de passos em que poderemos usar o index para navegar no formulário e exibir os inputs de acordo com o ID.

Vamos usar um state e uma função para renderizar o próximo passo:

const [currentStep, setCurrentStep] = useState(0);

function handleNextStep() {
  setCurrentStep((prevState) => prevState + 1);
}

O state currentStep é iniciado com o valor de 0 para renderizar o primeiro item do array.

A função handleNextStep pega o valor atual do state currentStep e incrementa o valor, dessa forma irá renderizar o seguinte item do array.

Para renderizar os inputs no JSX podemos usar o valor do state e o ID do item para criar uma condição e exibir os campos do formulário.

{steps[currentStep].id === 'PERSONAL' && (
  <div className="fields">
    <div className="field">
      <input
        type="text"
        placeholder="Nome"
        name="name"
        onChange={handleInputChange}
        value={formValues.name}
      />
    </div>
    <div className="field">
      <input
        type="text"
        placeholder="E-mail"
        name="email"
        onChange={handleInputChange}
        value={formValues.email}
      />
    </div>
    <div className="field">
      <input
        type="text"
        placeholder="Telefone"
        name="phone"
        onChange={handleInputChange}
        value={formValues.phone}
      />
    </div>
  </div>
)}

Para salvar os dados preenchidos podemos usar um state para todos os campos e uma função para setar esses valores de forma dinâmica.

const [formValues, setFormValues] = useState({
  name: "",
  email: "",
  phone: "",
});

function handleInputChange(event) {
  const { name, value } = event.target;

  setFormValues((prevState) => ({
    ...prevState,
    [name]: value
  }));
}

A função handleInputChange pega o name e o value do evento para setar de forma dinâmica os valores no state formValues

Por fim vamos renderizar os botões de avançar ou enviar formulário caso o passo atual seja o último.

{currentStep < steps.length - 1 && (
  <button 
    className="button next" 
    type="button" 
    onClick={handleNextStep}
  >
    Próximo
  </button>
)}

{currentStep === steps.length - 1 && (
  <button className="button submit" type="submit">
    Enviar
  </button>
)}

Com isso nosso formulário está completo, avançando de passo em passo até o submit.

Concluindo

Esta é apenas uma das muitas formas de se criar um formulário multi step em React.
Uma outra abordagem bem usada é recuperar os passos do formulário de uma API, podendo assim criar diferentes passos dependendo do retorno.

Acesse a demo no codesandbox para conferir o código completo e o formulário funcionando.