Bloco de Notas por Tiago Celestino

Como remover a coautoria do Claude Code dos seus commits

Tiago Celestino — Sun, 11 Oct 2026 00:00:00 GMT

Inúmeras pessoas passaram a usar o Claude Code como ferramenta de desenvolvimento, seja para tirar dúvidas, sugerir arquiteturas e, principalmente, implementar ideias que estavam guardadas na gaveta há um tempo.

Geralmente, quando você pede para o Claude Code fazer commits e/ou abrir um pull request no GitHub, ele adiciona automaticamente o Claude como colaborador, o que para muitos pode se tornar um "problema" (não me pergunte por quê).

Nos commits, é publicada uma linha como esta:

Co-authored-by: Claude <claude@anthropic.com>

Com isso, o Claude aparece como coautor do commit e, em alguns casos, na lista de contribuidores do repositório.

Removendo essas informações

Para remover essas informações é simples. No macOS e no Linux, o arquivo fica em ~/.claude/settings.json. No Windows, ele fica em %USERPROFILE%\.claude\settings.json. Basta adicionar a chave attribution ao arquivo:

{
  "attribution": {
    "commit": "",
    "pr": ""
  }
}

Se o arquivo já existir, adicione apenas o bloco attribution dentro do objeto principal, sem apagar as demais configurações.

O que cada chave faz:

commit: desativa a linha Co-authored-by nas mensagens de commit.
pr: desativa a linha Co-authored-by nas descrições de pull request.

Essa configuração vale para os commits e pull requests feitos a partir da sua máquina. Se quiser aplicá-la apenas a um projeto, coloque o mesmo bloco em .claude/settings.json na raiz do repositório.

Commits que já foram publicados não são alterados. Para remover a linha deles, é preciso reescrever o histórico, o que deve ser feito com cuidado, principalmente em branches compartilhadas.

Por que o ::backdrop não funciona com o atributo open do

Tiago Celestino — Fri, 10 Jul 2026 00:00:00 GMT

No meu tempo livre, estou estudando alguns elementos HTML que não existiam anos atrás e que surgiram para dar mais semântica às marcações, melhorar a usabilidade e a acessibilidade, além de reduzir a quantidade de scripts em JavaScript.

A tag da vez é a <dialog>, que permite criar caixas de diálogo semânticas e acessíveis em HTML. Em vez de usar um <div> ou <section> para criar uma caixa de diálogo, o <dialog> oferece uma maneira mais semântica e acessível de fazer isso. Além disso, é fácil customizar o estilo com CSS e adicionar recursos interativos com JavaScript.

Porém, descobri que, ao abrir o <dialog> com o atributo open, o pseudo-elemento ::backdrop não é aplicado, o que pode ser um problema se você estiver usando um backdrop personalizado. Implementei o <dialog> no projeto "Neymar Jogou?" e acabei descobrindo esse comportamento.

.dialog-modal::backdrop {
  background: rgba(0, 0, 0, 0.65);
}

<dialog class="dialog-modal" open>
  <p>Uma mensagem qualquer para exibir na modal</p>
</dialog>

Se usar o código acima em uma página HTML, vai notar que o <dialog> estará aberto, porém a formatação do ::backdrop não estará aplicada. Isso acontece porque o atributo open abre o diálogo de forma não modal, e o backdrop só existe em diálogos modais.

Dando uma fuçada no MDN, acabei encontrando essa nota de uso:

O pseudo-elemento CSS ::backdrop pode ser usado para estilizar o plano de fundo de um elemento <dialog>, por exemplo, para escurecer o conteúdo inacessível enquanto uma janela de diálogo modal está aberta. Porém, o backdrop só é desenhado quando o diálogo é exibido com HTMLDialogElement.showModal().

Link: Notas de uso do <dialog> no MDN

Ou seja, se precisar usar o atributo open para manter o <dialog> aberto sem necessidade de JavaScript, vai perder o backdrop personalizado. Caso precise do backdrop personalizado com o <dialog> já aberto ao carregar a página, por exemplo, vai precisar usar o método HTMLDialogElement.showModal() e remover o atributo open da marcação.

Algo assim:

<style type="text/css">
  .dialog-modal::backdrop {
    background: rgba(0, 0, 0, 0.65);
  }
</style>

<dialog class="dialog-modal">
  <p>Uma mensagem qualquer para exibir na modal</p>
</dialog>

<script>
  (() => {
    const $dialog = document.querySelector('.dialog-modal');

    if ($dialog) {
      $dialog.showModal();
    }
  })();
</script>

Resumindo: ao usar <dialog>, você enfrenta um trade-off entre simplicidade e funcionalidade. O atributo open oferece um diálogo sem JavaScript, mas perde o backdrop visual. O método showModal() exige JS, mas traz a experiência completa. A escolha depende do seu caso de uso — se o backdrop é apenas estético, open resolve; se é essencial para a usabilidade, showModal() é o caminho.

DefinitelyTyped Search: uma extensão Raycast para instalar @types

Tiago Celestino — Fri, 08 May 2026 00:00:00 GMT

Depois de lançar minha primeira extensão para o Raycast, decidi criar mais uma. Se você não conhece o Raycast, ele é um lançador de aplicativos para macOS e Windows que permite acessar rapidamente aplicativos, arquivos e outras funcionalidades do sistema. Ele também suporta extensões, o que permite aos desenvolvedores criar suas próprias funcionalidades personalizadas utilizando ReactJS com TypeScript.

A extensão: DefinitelyTyped Search

Como muitos desenvolvedores que trabalham com TypeScript, sempre que preciso instalar um pacote (npm i -S express, por exemplo), em muitos casos preciso instalar o pacote de tipos (npm i -D @types/express, por exemplo) correspondente. Abrir o npmjs.com em busca de cada pacote de tipos pode ser um processo demorado, especialmente quando você não tem certeza do nome exato do pacote.

Para facilitar esse processo, criei a extensão "DefinitelyTyped Search" que permite pesquisar e instalar pacotes de tipos diretamente do Raycast.

A extensão é simples de usar: basta digitar o nome do pacote que você deseja instalar, e a extensão irá mostrar os pacotes de tipos correspondentes disponíveis. Você pode então selecionar o pacote de tipos desejado e automaticamente o comando npm install -D @types/nome-do-pacote é copiado para a área de transferência, pronto para colar no seu terminal.

Extensão em ação

Além disso, você pode ver os detalhes do pacote de tipos selecionado no npmjs.com, npmx.dev ou no GitHub antes de instalá-lo.

Opções de visualização

Adicione aos favoritos

Para quem sempre precisa usar os mesmos @types, a extensão permite adicioná-los aos favoritos. Assim, você pode acessar rapidamente os pacotes que usa com frequência sem precisar pesquisar por eles toda vez.

Adicionando um pacote de tipos aos favoritos

A extensão está disponível para download na Raycast Store e é compatível com macOS e Windows.

Se você é um desenvolvedor que trabalha com TypeScript e utiliza o Raycast para aumentar sua produtividade, acredito que essa extensão pode ser uma ferramenta útil para agilizar seu fluxo de trabalho. Sinta-se à vontade para experimentar e enviar feedbacks ou sugestões de melhorias.

O que um especialista em box para banheiro me ensinou sobre a adoção real de IA

Tiago Celestino — Thu, 23 Apr 2026 00:00:00 GMT

Originalmente postei no Órbita esse relato. Caso queira conversar a respeito, fique à vontade: https://manualdousuario.net/orbita-post/o-que-um-especialista-em-box-para-banheiro-me-ensinou-sobre-a-adocao-real-de-ia/

Na quarta-feira (22/04/2026), aconteceu uma situação que me abriu muito a mente sobre o uso de IA fora da bolha de tecnologia. Leio, assisto e converso com amigos e colegas sobre IA, agentes, etc., tudo mais voltado para o desenvolvimento de software e áreas afins. Seja para aumentar produtividade, vibe coding, no final é muito voltado para tecnologia. Na quarta-feira, mais do que nunca, confirmei que as pessoas fora dessa bolha também estão usando, e usando muito bem as ferramentas disponíveis.

Contextualizando

Precisei ajustar o box do banheiro daqui de casa e contratei um técnico que encontrei via Google Maps. Tenho o hábito de conversar com os prestadores de serviços, sempre reforçando se estou atrapalhando o serviço, óbvio. Surgiu o papo sobre tecnologia. Geralmente começam perguntando o que faço da vida, etc. Bom, o técnico já me vem com esta: “faço algumas coisas com JS”. E como ele faz isso? Usando o ChatGPT. Não fiquei impressionado com o fato de ele usar a IA para gerar código — hoje qualquer pessoa pode fazer isso — mas o fato de ele saber o que é JavaScript, inclusive diferenciar backend e frontend, me impressionou. Todo esse conhecimento foi adquirido com o uso dessas ferramentas de IA. Um detalhe: ele nunca foi da área de tecnologia.

A realidade é que, independentemente da qualidade do que essas ferramentas produzem, a maioria das automações para uso profissional não vai precisar escalar. Um especialista em boxes de banheiro não vai processar milhares de pedidos de orçamentos por hora, por exemplo.

O uso de ferramentas de IA

Assim como grande parte dos prestadores de serviços do país, ele usa o WhatsApp como CRM.

O fluxo dele atualmente é:

Capturar o lead, seja por telefone, WhatsApp, Google Ads, etc. Inclusive, usa o Gemini para extrair os números de múltiplas ligações.
Enviar uma mensagem padrão (já salva no WhatsApp) de boas-vindas para o contato de forma manual.
Solicitar um vídeo do problema do cliente, também com um texto salvo.
Enviar o orçamento.

Tem um detalhe no passo 4 que comento logo mais.

Ele quer automatizar esses processos que realiza manualmente. Comentei sobre o uso da automação utilizando o n8n (nunca usei, mas já ouvi falar). Ele não conhecia, mas ficou bem interessado e anotou para pesquisar depois. Engraçado que ele chegou a comentar sobre os custos de uso da API do WhatsApp, sabendo até como as empresas autorizadas pela Meta cobram (por mensagem enviada), o que para ele não faria sentido no momento.

Usando agentes

A cereja do bolo veio no final do serviço. Ao acompanhá-lo até a saída, ele me mostra um agente criado no ChatGPT que, a partir dos vídeos dos problemas que os clientes enviam e com as informações que ele forneceu, já consegue gerar o orçamento de forma automática. Assim, ele só copia e envia no WhatsApp. Ou seja, as pessoas (não estou generalizando, obviamente) estão antenadas e usando as ferramentas de IA, não só para pedir para escrever código JS, mas indo além.

Fiquei de conversar com ele, até para ajudá-lo, porque vi que tem interesse genuíno no uso das ferramentas de IA. Inclusive, pensei em fazer uma permuta: ele me ensina a ajustar boxes de banheiro, eu ajudo-o a otimizar seu fluxo de trabalho, por que não?

Nota: eu paguei pelo serviço

Minha primeira extensão para o Raycast

Tiago Celestino — Fri, 27 Mar 2026 00:00:00 GMT

Para quem não conhece, o Raycast é um aplicativo similar ao Spotlight no macOS e a "Barra de Pesquisa" no Windows, só que com muito mais funcionalidades e aberto para o desenvolvimento de extensões que enriquecem o aplicativo. Essas extensões podem ser encontradas na Raycast Store e todas são totalmente gratuitas!

Por ser uma aplicação em React.js com Typescript, alguém que tenha o conhecimento básico consegue desenvolver uma extensão e pensando nisso, me motivei a criar uma. Nesse texto, faço um pequeno relato sobre o processo.

Iniciando o desenvolvimento

Lendo a documentação, que é super didática, já é possível entender o ecossistema de desenvolvimento do Raycast. Seguindo o passo-a-passo, é possível ter a base para a extensão rapidamente.

Ideia para extensão

Sou um usuário frequente do Órbita, que vejo como o equivalente português do HackerNews. O site é mantido pelo Rodrigo Ghedin do blog Manual do Usuário, que inclusive, super recomendo acompanhar. Diferente de outros sites/blogs de tecnologia, a leveza e a forma como os debates acontecem por lá lembram muito a velha época em que a internet era menos "oito ou oitenta".

Como sempre estou acompanhando o conteúdo postado no Órbita, resolvi criar uma extensão que me mostrasse as últimas postagens do Órbita. Como o site usa a tecnologia RSS, os posts publicados por lá podem ser lidos em diferentes leitores (Feedly, NetNewsWire, por exemplo), além de servir como fonte de dados para minha extensão.

A ideia era muito simples:

Ler o RSS do Órbita;
Listar todos os últimos posts com o autor e data da postagem;
Clicando no título, abrir a página da postagem para leitura em detalhes.

Início da implementação

Com a regra definida, iniciei a implementação e em poucas horas já tinha a extensão funcional rodando localmente. Caso queira ver o código, está nesse repositório no GitHub.

Mais um detalhe. Antes de enviar a extensão para revisão e publicação na Raycast Store, tinha que pedir autorização ao Rodrigo para o uso do nome Órbita e também do Manual do Usuário. Fiz o contato por email informando sobre a minha ideia e se podia dar sequência a publicá-la na loja oficial do aplicativo. A autorização veio sem problemas. No dia 06/12/2025 abri o PR para revisão.

Da revisão à publicação

O processo de revisão do Raycast é gerido de forma híbrida. Eles possuem um bot no GitHub que faz uma análise do código, adicionando comentários sobre as boas práticas para o uso das APIs, garantindo que as extensões sigam as diretrizes de desenvolvimento. Além do bot, existe o revisor humano, que não foca tanto no código, mas sim se as extensões estão seguindo guideline do aplicativo. Foi nesse processo que tive o maior "entrave", apesar de entender que pelo tamanho do projeto e a quantidade enorme de issues abertas, o trabalho humano deve ser bem exaustivo, independentemente da automação.

Em relação ao código, houve poucas modificações. O ponto crucial envolveu o nome da extensão. Inicialmente, a ideia era manter a associação do Órbita ao Manual do Usuário, já que hoje faz parte do domínio do blog, porém o Raycast só aceita extensões nomeadas em inglês, então ter o nome como "Órbita - Manual do Usuário" não era "permitido". O @pernielsentikaer, que por sinal foi muito solícito, trouxe esse "impasse" para a discussão. Procurei o Ghedin para informar sobre a situação e se seria um problema "desvincular" o Órbita do Manual do Usuário e o mesmo não viu problema. Até um nome genérico foi sugerido, mas chegamos à conclusão de que por se tratar de um nome próprio, não faria sentido alterar.

No final, removi todas as referências ao Manual do Usuário e solicitei uma nova revisão. No dia 16/03/2026, 3 meses depois da abertura do PR, finalmente a extensão foi aprovada, mergeda e oficialmente publicada na Raycast Store: https://www.raycast.com/tcelestino/orbita.

O resultado final foi esse:

Baixe o Raycast e use a extensão do Órbita

Conclusão

Apesar do tempo de revisão e publicação, tive uma comunicação bem saudável com o @pernielsentikaer, que sempre trouxe de forma pertinente o que precisava ser alterado.

Saber que agora posso acessar o Órbita a partir do aplicativo com o qual mais interajo, vai facilitar e ajudar ainda mais a participar da comunidade.

Deixo aqui meus agradecimentos ao Rodrigo Ghedin, que apoiou a ideia e inclusive me disponibilizou a logo do Manual do Usuário para definir como ícone da extensão.

Já estou pensando em mais duas extensões que quero entregar ainda esse ano. É provável que venha um outro post sobre elas no futuro...

Como ativar o BC Protege+

Tiago Celestino — Wed, 04 Mar 2026 00:00:00 GMT

O BC Protege+ é um serviço gratuito do Banco Central do Brasil que bloqueia a abertura de contas em seu CPF ou CNPJ. Quando você ativa essa proteção, qualquer tentativa de alguém abrir uma conta usando seus dados será automaticamente negada. Desde dezembro de 2025, quando foi lançado, já bloqueou 1 milhão de contas fraudulentas.

Se você não pretende abrir novas contas em breve, ative essa proteção. Veja como:

Faça o login no Meu BC. Você deve usar sua conta Gov.br no nível prata ou ouro.
Clique em "BC Protege+".
Marque a opção "Proteção ativada".

Se precisar abrir uma conta no futuro, desative a proteção seguindo os mesmos passos e desmarcando "Proteção ativada".

As 10 extensões essenciais que uso no Firefox

Tiago Celestino — Tue, 03 Feb 2026 00:00:00 GMT

Depois de publicar sobre meus aplicativos essenciais em 2025, algumas pessoas me perguntaram quais extensões uso no Firefox. Como a grande maioria das pessoas que conheço usa o Google Chrome, resolvi compartilhar as dez extensões que considero essenciais no meu dia a dia.

uBlock Origin: essencial nos dias de hoje com a quantidade de scripts que muitos sites usam para rastrear o usuário. Desabilito para alguns sites.
Bitwarden: gerenciador de senhas multiplataforma (tem versão para iOS, Android, Windows, Linux, terminal...). Uso a versão gratuita que atende bem para a grande maioria dos usuários.
Enhancer for YouTube: reduz distrações no YouTube, como comentários, e traz melhorias na interface e no player.
Linguist - web pages translator: uso para traduzir páginas automaticamente. O Firefox tem recurso nativo, mas ele se baseia no idioma do sistema operacional — que no meu caso é inglês. Para traduzir para pt-BR pelo recurso nativo, são necessários vários passos.
Raindrop: sinto falta da simplicidade do del.icio.us, mas com o Raindrop consigo automatizar utilizando o IFTTT. Por exemplo: os vídeos que dou like no YouTube, são adicionados automaticamente no Raindrop.
Notion Web Clipper: uso o Notion como um banco de dados, então tenho uma lista de artigos para ler posteriormente, artigos que já li e que posso querer rever, etc.
Marreta: extensão para remover paywall de diversos sites.
Firefox Multi-Account Containers: uso para isolar os cookies entre serviços que utilizo.
Gesturefy: cria ações para o Firefox usando o mouse. Exemplo: mover o mouse para baixo segurando o botão direito fecha a aba ativa.
Redirector: uso para redirecionar automaticamente alguns sites para suas versões alternativas. Por exemplo, todo link do x.com é redirecionado para o nitter.net.

Meus aplicativos essenciais em 2025

Tiago Celestino — Mon, 05 Jan 2026 00:00:00 GMT

Acabei esquecendo de compartilhar minha seleção de aplicativos essenciais para 2025, assim como fiz no ano passado. Como estamos no início do ano, acredito ser ainda válido compartilhar.

🚀 Launchers: Raycast (macOS) e Ulauncher (Linux)
📧 Cliente de email: Gmail
📝 Bloco de Notas: Bear (macOS/iOS)
✅ Lista de tarefas: Todoist (macOS/iOS/Linux)
📅 Calendário: Apple Calendar
☁️ Cloud Storage: Google Drive / iCloud
📷 Câmera: Apple Camera (iOS)
📰 RSS: NetNewsWire
👥 Lista de Contato: Apple Contact
🌐 Navegador: Firefox
💬 Chat: WhatsApp e Telegram
🔖 Favoritos: Raindrop
📖 Lista de leitura: Notion
📊 Suite de escritório: Google Workspace/Microsoft Office (faculdade)
💰 Financeiro: Google Sheets
🎵 Música: Deezer
🎧 Podcasts: Overcast
🔐 Gerenciador de senhas: Bitwarden
💻 Editor de código: Cursor
💬 Terminal: Ghostty
🤖 Assistente IA: Claude / Gemini
👨‍💻 Git: Github

Troquei poucos apps essenciais em 2025, mas que me trouxeram melhorias na produtividade. Alguns destaques:

Voltei para o Firefox como meu navegador principal, já que o Floorp apresentou um bug com a extensão do Bitwarden e estava impossível de usá-lo.
Conheci o NetNewsWire e apesar de não ter uma versão web, o fato de poder conectar ao Feedly ou poder assinar RSS de blogs no modo offline é uma grande vantagem.
Com toda essa discussão de como usar IA para escrever código, acabei me adaptando bem ao Cursor como meu editor de código, destacando que o autocomplete é muito mais inteligente que o Github Copilot no VSCode.
Troquei o Wrap pelo Ghostty por ser um terminal mais leve e minimalista. O Warp está indo por outro caminho, o que para mim deixou de ser um terminal funcional.
Passei a usar o Gemini como uma outra fonte de IA para tarefas que não envolvem código, impressionante o quanto a Google evoluiu. Para tarefas que envolvem código, mantive o Claude, inclusive usando o Claude Code com o Sonnet e o Opus.
Deixei de usar o Halide como app de câmera para voltar a usar o Apple Camera. Notei que não estava usando o Halide de forma completa, o que não justificava renovar a assinatura por mais um ano. O Apple Camera vem me atendendo muito bem.
No meio do ano, voltei para a faculdade para terminar a graduação e obrigatoriamente precisei começar a usar a suíte Microsoft Office para atender os requisitos da faculdade. O bom é que não pago nada por isso.

Que venha 2026!

Listas anteriores

2024

Retrospectiva 2025

Tiago Celestino — Wed, 31 Dec 2025 00:00:00 GMT

Janeiro

Início em um novo emprego em uma empresa em recuperação judicial do ramo de compra de viagens. Fácil de procurar qual empresa foi!
Voltei a escrever no blog com mais frequência. Foram 14 postagens (contando com essa) no total.
Oficialmente liberado para as atividades físicas depois da cirurgia no dedo.

Fevereiro

Voltei às atividades físicas (musculação e treino funcional).
Demitido da empresa em recuperação judicial. Fiquei de escrever sobre minha experiência, mas no final nem compensou a perda do tempo.
Depois de 10 anos, troquei de máquina de lavar, a minha LG durou o quanto podia. Troquei por uma Samsung.
Consegui ler 4 livros no mês
Importação Portugal > Brasil entregue depois de 3 meses estressantes com a UPS. Não recomendo usar essa empresa para importação.

Março

Mais uma vez saindo no bloco afro Filhos de Gandhy, dessa vez acompanhado com meu irmão.
Obtive meu CNPJ (TC Tech).
Li apenas 1 livro no mês. :/
Criei um projeto no Github mostrando exemplo de diferentes design patterns. github.com/tcelestino/aprendendo-design-patterns.

Abril

Voltei para o mercado de trabalho para atuar em uma empresa de pagamento.
Conhecendo e usando pela primeira vez o NestJS.
Pausa do Linkedin, estava passando muito tempo por lá.

Maio

Primeira Nota Fiscal gerada pela TC Tech.
Visita do Aurelio para correr a Corrida do Leão e resenhar depois da volta dele para Goiânia.
Comemoração entrega do doutorado da Verena.
Não li nenhum livro. 😞

Junho

Comecei a acordar às 5h da manhã, sem seguir nenhum "guru" de internet.
Segunda corrida do ano: Corrida Ecológica de Lauro de Freitas.
Mais um contrato assinado pela TC Tech. Aproveitei e fiz o plano de saúde.

Julho

Comemoração do meu aniversário fazendo aula funcional na praia.
Voltando a faculdade para terminar a graduação. Faltam poucos semestres para terminar.
Visita a Copa do Mundo de Robôs em Salvador.
Aprendendo sobre Keycloak. Desenvolvi um módulo para o NestJS para usar o Keycloak como provider de autenticação.
Viagem para SP - a primeira do ano.
- Encontro com os amigos de SP.
Comprei o Macbook Pro M4, já que meu Macbook Air já não suportava rodar vários containers Docker ao mesmo tempo.

Agosto

Comprei o AirPods 4 com cancelamento de ruídos. O meu AirPods 3 já não conseguia manter a carga de bateria por muito tempo.
Voltei a ler o livro “1984”, do George Orwell. Ainda não consegui terminar.

Setembro

Entrega dos primeiros trabalhos da faculdade.
No resultado do checkup anual descobri que estava com a insulina alta (no limite) e meus rins estavam trabalhando muito mas não estavam sendo compensados com água. Tirar creatina e reduzir o consumo de doces. :/
Viagens para o interior da Bahia:
- Santo Antonio de Jesus
- Alagoinhas
Primeiras provas online da faculdade realizadas.
Assinei o Claude da Anthropic. Me surpreendi como o Claude Code está me ajudando na minha produtividade.

Outubro

Voltando a correr com mais intensidade.
Comemoração do aniversário de minha mãe, mandamos uma cesta de café da manhã com algumas guloseimas.
Testando o Zed como editor de código. Curti, mas ainda prefiro usar o Cursor e seu autocomplete mais inteligente.

Novembro

Fui ver a peça “Aleluia” com Franklin Menezes. Tinha anos que não ia ao teatro.
Visitando Goiânia pela primeira vez.
Retorno ao médico ortopedista para confirmar o sucesso da cirurgia no dedo.
Comprei um novo carro: Fiat Fastback.

Dezembro

Fui ver meu time do coração (Esporte Clube Vitória) não ir para a Série B no Campeonato Brasileiro.
Fechei o mês com 15 corridas.
Passei em todas as matérias da faculdade, com a média em quase todas as matérias na casa dos 9.

Metas

Algumas metas que resolvi anotar esse ano:

Bebi 707,05 litros de água.
Corri 408,93km em 89 corridas.
Horas totais da corrida: 44:55:55.

Leia outras retrospectivas:

2024

Habilitando o split view no Firefox

Tiago Celestino — Wed, 24 Dec 2025 00:00:00 GMT

Se estiver usando a última versão (146) do Firefox, já é possível habilitar a funcionalidade de split view (dividir a tela em uma única janela). Essa funcionalidade é útil para quem precisa visualizar duas páginas ao mesmo tempo, como por exemplo, comparar duas páginas de um site ou comparar duas páginas de um documento.

Como habilitar o split view no Firefox

Por enquanto, essa funcionalidade está disponível apenas via about:config, mas o que não impede de você testar.

Abra o Firefox e vá para about:config. Aceite o risco e clique em "Accept the Risk and Continue" (Aceitar o Risco e Continuar).
Localize a configuração browser.tabs.splitView.enabled e mude o valor para true. Não vai ser necessário reiniciar o Firefox para aplicar a configuração.
Para usar o split view, basta clicar com o botão direito do mouse em uma aba e selecionar "Add Split View" (Adicionar Visualização Dividida, em português brasileiro literal).

Clique na imagem para ampliar

Referências

OMG! Ubuntu! - Firefox is Adding Split View for Tabs, Here’s How to Enable It

Como depreciar funções/métodos no Node.js

Tiago Celestino — Thu, 04 Dec 2025 00:00:00 GMT

Estava lendo o post "How to "officially" deprecate methods with Node.js utilities" do Stefan Judis (recomendo a leitura do blog dele) e achei interessante compartilhar essa dica rápida para quem escreve código utilizando Node.js e precisa documentar que um método/função foi depreciado.

O método que conhecia até hoje: JSDoc

Muitas vezes precisamos depreciar métodos/funções e uma das formas mais comuns era utilizando o JSDoc para documentar o método/função como obsoleto. Se você não conhece o JSDoc, ele é uma especificação de documentação para JavaScript que permite documentar o código de forma estruturada e consistente. Funciona tanto no JavaScript quanto no TypeScript.

/**
 * Executa um console.log com o texto 'foo'.
 * @deprecated Utilize a função `bar()` em seu lugar. Este método será removido em uma versão futura.
 * @returns {void}
 */
const foo = () => {
  console.log('foo');
};

foo();

No seu editor de código, teremos uma mensagem de aviso quando passar o mouse sobre o método/função.

exemplo no VS Code

Para isso, usamos a marcação @deprecated para indicar que o método foi depreciado, exibindo uma mensagem de aviso na sua IDE.

Uma nova abordagem mais prática: `util.deprecate`

Acabei descobrindo no artigo do Stefan Judis que é possível utilizar a API util.deprecate para depreciar um método/função.

const { deprecate } = require('node:util');

const foo = deprecate(() => {
  console.log('Função obsoleta');
}, 'Função obsoleta. Utilize fooBar() em vez de foo()');

foo();

Se rodar o código acima usando o Node.js, você verá a seguinte resposta:

exemplo da mensagem depreciada no terminal ao executar o código Node.js

Com a API util.deprecate, podemos passar uma mensagem para o usuário indicando qual é a migração recomendada quando o método/função for executado em tempo de execução.

Conclusão

De maneira simples, conseguimos depreciar um método/função utilizando uma API oficial do Node.js sem a necessidade de usar bibliotecas externas. O mais interessante é que é possível fazer esse tipo de abordagem há muito tempo. Vale lembrar que a API util.deprecate é uma funcionalidade oficial do Node.js, não do JavaScript.

Habilitando RSS no 11ty

Tiago Celestino — Wed, 19 Nov 2025 00:00:00 GMT

Continuando com as melhorias do blog, finalmente habilitei o feed RSS. Para isso, usei o plugin oficial do Eleventy (11ty): @11ty/eleventy-plugin-rss. Como muita gente usa o 11ty, resolvi compartilhar os passos para você habilitar o feed RSS no seu blog ou site.

O que é RSS?

RSS é uma forma de acompanhar atualizações de sites sem precisar visitá-los diretamente. Funciona assim: o site disponibiliza um arquivo com as últimas publicações, e você usa um leitor de RSS para receber essas atualizações automaticamente.

É como assinar um canal de notícias. Sempre que o site publicar algo novo, você recebe no seu leitor de RSS.

Como leitor assíduo de vários blogs usando RSS, não fazia sentido meu blog não ter esse recurso. Além disso, o RSS facilita a indexação em diretórios de blogs.

Instalando o plugin

O 11ty tem um plugin oficial para RSS. Instale usando o gerenciador de pacotes que você utiliza:

npm install @11ty/eleventy-plugin-rss

yarn add @11ty/eleventy-plugin-rss

Duas formas de configurar

O plugin oferece duas opções:

Automática: configurar direto no eleventy.config.js e o feed é gerado automaticamente
Manual: criar um arquivo feed.njk com o template customizado

Optei pela segunda opção porque precisava de algo rápido e a versão automática apresentou problemas no meu blog. No seu caso, pode funcionar diferente.

Criando o template do feed

Crie o arquivo feed.njk na pasta dos seus arquivos. No meu caso, criei em src/feed.njk. Esse arquivo é o template que gera o feed RSS.

O plugin suporta vários formatos (RSS, JSON, Atom). Escolhi RSS:

Entendendo as configurações

O template precisa de algumas informações básicas:

title: título do blog
description: descrição do blog
language: idioma (ex: pt-BR)
base: URL completa do blog
author: nome do autor
permalink: onde o feed será gerado (geralmente /feed.xml)

No meu blog, os posts ficam em src/posts/**/*.md, então uso collections.posts. Se sua estrutura for diferente, ajuste conforme sua coleção de posts.

Outros formatos de template estão na documentação oficial.

Ativando o plugin no Eleventy

Agora adicione o plugin no arquivo eleventy.config.js:

Se usar CommonJS:

const feedPlugin = require('@11ty/eleventy-plugin-rss');

module.exports = (eleventyConfig) => {
  eleventyConfig.addPlugin(feedPlugin);
};

Se usar ESM:

import feedPlugin from '@11ty/eleventy-plugin-rss';

export default function (eleventyConfig) {
  eleventyConfig.addPlugin(feedPlugin);
}

Testando

Pronto. Inicie seu blog e acesse http://localhost:8080/feed.xml para verificar se o feed RSS foi gerado corretamente.

Desabilitando recursos de IA no Firefox

Tiago Celestino — Thu, 30 Oct 2025 00:00:00 GMT

Recentemente houve o boom de navegadores com IA, como o ChatGPT Atlas, o Perplexity Comet, o Microsoft Edge, entre outros que devem surgir no futuro. O Firefox, nas últimas atualizações, liberou a funcionalidade de usar os chatbots de IA, como o Claude, ChatGPT, Gemini, Mistral e o Copilot no navegador.

Chatbot Claude no Firefox

Não chega a ser um "agente" como os navegadores citados, mas é uma funcionalidade que para mim tem sido bem útil, seja para tirar dúvidas, traduzir textos em outros idiomas e realizar outras tarefas. Existem muitas preocupações com relação a IA em navegadores, seja por descaracterizar a forma de navegar pela internet e também por abrir diversas brechas de segurança.

Por sorte, no Firefox é possível desabilitar os recursos de IA, seguindo os passos abaixo:

Acesse about:config na barra de endereço do Firefox
Aceite o risco e clique em "Accept the Risk and Continue" (Aceitar o Risco e Continuar)
Localize a configuração browser.ml.enable
Mude o valor de true para false

Com essa configuração, todos os recursos de IA serão desabilitados.

Existem outras configurações caso não queira desabilitar todos os recursos de IA de uma só vez, veja a tabela abaixo:

Configuração	Descrição
browser.ml.chat.enabled	Habilita a integração do chatbot IA.
browser.ml.chat.sidebar	Exibe o painel de chat IA na barra lateral.
browser.ml.chat.shortcuts	Permite acionar o chat a partir de texto selecionado ou atalhos.
browser.ml.chat.page	Exibe o menu de chat na página quando você seleciona texto.
browser.ml.chat.page.footerBadge	Exibe o badge flutuante na parte inferior da página.
browser.ml.chat.page.menuBadge	Exibe o badge "Ask AI" no menu da página.
browser.ml.chat.menu	Adiciona "Chat about this" ao menu de clique com o botão direito.
browser.ml.linkPreview.enabled	Gera previsões e sugestões de links baseadas em IA.
extensions.ml.enabled	Permite que extensões do navegador usem a API ML do Firefox.
browser.ml.pageAssist.enabled	Executa o assistente IA "page assist".
browser.tabs.groups.smart.enabled	Usa IA para agrupar e rotular automaticamente suas abas.
browser.tabs.groups.smart.userEnable	Permite que os usuários ativem manualmente o recurso de grupos de abas inteligentes.

Referência: Disable AI In Firefox

Diário de atualizações realizadas no Bloco de Notas

Tiago Celestino — Wed, 22 Oct 2025 00:00:00 GMT

Inspirado pelo comentário do @dalbo1201 depois de publicar o post "Um novo começo" no Manual do Usuário, resolvi criar uma página de changelog para acompanhar as atualizações realizadas no Bloco de Notas, sejam de layout ou novas funcionalidades.

A ideia é ir adicionando as atualizações tendo como base a estrutura de "CHANGELOG", no qual cada atualização pode ser considerada um release.

Se tiver interesse, acompanhe as atualizações na página updates.

Um novo começo

Tiago Celestino — Mon, 20 Oct 2025 00:00:00 GMT

Já faz tempo que queria mudar o layout do Bloco de Notas, mas a preguiça ou falta de conhecimento em design sempre venciam. Usei o layout padrão do 11ty com pequenas modificações, mas queria algo mais personalizado e simples, sem firulas de design ou código. Há um tempo, tentei usar Tailwind CSS, mas foi mais complicado que o esperado. Gastei mais tempo configurando o framework do que construindo o layout. Acabei desistindo.

Uma nova abordagem

Essa semana, decidi voltar a mexer no layout com uma abordagem diferente: sem revolucionar, apenas simplificar. Removi toda a formatação CSS, todas as classes HTML e deixei apenas o básico para manter a estrutura. E esse é o resultado! 🎉 Lembra a época em que as páginas eram apenas HTML com o mínimo de CSS, sem frameworks, JS ou builders? Velhos tempos que não voltam mais!

A ideia é que a cada semana, vou acrescentar pequenas melhorias mantendo a simplicidade e performance. Sem framework CSS, mas garantindo que seja responsivo e compatível com todos os navegadores. Vou aproveitar as novidades do HTML, CSS e do 11ty. Espero que até o final do ano tenha o layout ideal e quem sabe cadastrar o Bloco de Notas no ranking dos sites performáticos do 11ty.

Inspiração

Como referência, venho salvando alguns blogs minimalistas e simples:

São blogs que gosto de seguir e que vão me ajudar a criar meu próprio layout.

Agora é ver até onde vou conseguir chegar! 🤞

Como saber quais arquivos do seu pacote serão publicados no npm

Tiago Celestino — Fri, 30 May 2025 00:00:00 GMT

Uma dica rápida para quem está desenvolvendo um pacote utilizando Node.js e quer publica-lo no npm. Para saber quais os arquivos que estarão presentes no pacote, você pode simplesmente usar o comando:

npm pack

E o resultado será algo como:

É gerado um arquivo .tgz com o nome do pacote e a versão. Você pode validar se os arquivos que precisam existir no seu pacote estão corretos, além de ter algumas informações sobre o pacote, como:

Versão do pacote;
Tamanho do pacote comprimido e descomprimido;
Total de arquivos no pacote.

Caso não queria gerar um arquivo .tgz, você pode usar o comando:

npm pack --dry-run

Nesse caso, terá como resultado:

Com o --dry-run você pode ver quais arquivos serão publicados, mas não é gerado o arquivo .tgz.

Simples, não!?

Como remover propriedades de um objeto no JavaScript

Tiago Celestino — Tue, 29 Apr 2025 00:00:00 GMT

Em algum momento que você estava desenvolvendo algo em JavaScript, você precisou remover uma propriedade (podemos chamar de "chaves") de um objeto. Por incrível que pareça, existem várias formas de fazer isso com JavaScript, o que pode ser bom por um lado, mas pode se tornar um problema para o outro, já que a depender da situação, uma abordagem menos eficiente pode impactar a performance da sua aplicação.

Essa semana estive implementando uma funcionalidade a partir de uma API de terceiros, e precisava remover algumas propriedades de um objeto, e por curiosidade, decidi pesquisar sobre as diferentes formas de fazer isso e como cada uma pode impactar a performance da aplicação, saindo do tradicional delete.

Nesse post, vou listar algumas das abordagens conhecidas e outras que acabei descobrindo nas minhas pesquisas.

Partiu!! 🚀

1. Usando o operador delete

É o método mais conhecido para remover uma propriedade de um objeto em JavaScript. Usando o operador "delete", você consegue remover a propriedade especificada do objeto de forma direta.

const obj = {
  name: 'John',
  age: 30,
  city: 'New York'
};
delete obj.age; // A propriedade 'age' foi removida do objeto.
console.log(obj); // { name: 'John', city: 'New York' }

Notas

Simples e direto. Funciona bem para objetos simples;
O operador delete pode afetar o desempenho, especialmente em loops, pois altera a estrutura do objeto;
Não é recomendado para objetos que você deseja manter imutáveis.

2. Usando a desestruturação (destructuring)

Uma outra abordagem para remover propriedades de um objeto, que pode ser considerada moderna, é utilizando a "destructuring". A partir dessa abordagem, você cria um novo objeto removendo a propriedade, sem mexer no objeto original, mantendo-o imutável.

const obj = {
  name: 'John',
  age: 30,
  city: 'New York'
};
const { age, ...newObj } = obj; // A propriedade 'age' foi removida.
console.log(newObj); // { name: 'John', city: 'New York' }

Notas

Mantém o objeto original imutável;
É uma abordagem moderna e legível;
Pode não ser tão intuitivo para quem não está familiarizado com a desestruturação;
Em alguns casos, criar um novo objeto pode não ser ideal.

3. Usando a combinação de Object.keys() com reduce()

Ao usar o "Object.keys()" combinado com o método reduce(), também conseguimos criar um novo objeto sem a propriedade que deseja remover. E de novo, conseguimos manter o objeto original imutável.

const obj = {
  name: 'John',
  age: 30,
  city: 'New York'
};
const newObj = Object.keys(obj).reduce((acc, key) => {
  if (key !== 'age') {
    acc[key] = obj[key]; // Adiciona a propriedade ao novo objeto se não for 'age'.
  }
  return acc;
}, {});
console.log(newObj); // { name: 'John', city: 'New York' }

Notas

Mantém o objeto original imutável. É uma abordagem funcional e pode ser mais flexível;
Pode ser mais verboso do que outras abordagens. Além disso, pode ser menos eficiente em termos de desempenho, especialmente para objetos com muitas propriedades.

4. Usando Object.entries() e Object.fromEntries()

Usando "Object.entries()" obtemos um array de pares chave-valor e, em seguida, podemos fazer um filtro das propriedades que você deseja manter. Na sequência, usando "Object.fromEntries()" criamos um novo objeto a partir do array que foi filtrado usando a função filter().

const obj = {
  name: 'John',
  age: 30,
  city: 'New York'
};
const newObj = Object.fromEntries(
  Object.entries(obj).filter(([key]) => key !== 'age') // Filtra a propriedade 'age'.
);
console.log(newObj); // { name: 'John', city: 'New York' }

Notas

Mantém o objeto original imutável. É uma abordagem moderna e legível;
Pode ser mais verboso do que outras abordagens. Além disso, pode não ser tão intuitivo para quem não está familiarizado com Object.entries() e Object.fromEntries();
Pode trazer impacto na performance, já que é necessário fazer iteração em todas as propriedades do objeto.

5. Usando Object.defineProperty

Essa abordagem é menos conhecida, mas usando o "Object.defineProperty()" conseguimos definir a propriedade como não enumerável. Isso não remove a propriedade, mas impede que ela seja listada em loops.

const obj = {
  name: 'John',
  age: 30,
  city: 'New York'
};
Object.defineProperty(obj, 'age', {
  enumerable: false // Define a propriedade 'age' como não enumerável.
});
console.log(obj); // { name: 'John', city: 'New York' }
console.log(Object.keys(obj)); // ['name', 'city'] - 'age' não aparece na lista de chaves.

Notas

Esta seção fornece informações adicionais sobre as abordagens discutidas;
Mantém a propriedade no objeto, mas a torna não enumerável. Isso pode ser útil em alguns casos;
Pode se tornar complexo e não remover verdadeiramente a propriedade do objeto.

6. Usando Reflect.deleteProperty

Essa abordagem descobri nessa pesquisa. No caso, usando Reflect.deleteProperty da Reflect API, conseguimos ter abordagem semelhante ao operador delete, porém com muito mais possibilidades de uso a partir dos outros métodos da API.

const obj = {
  name: 'John',
  age: 30,
  city: 'New York'
};
Reflect.deleteProperty(obj, 'age'); // Remove a propriedade 'age'.
console.log(obj); // { name: 'John', city: 'New York' }

Caso você queira remover uma propriedade de um objeto que não existe, o método Reflect.deleteProperty retornará true, diferente do operador delete, que retornará false.

Se tiver mais interesse em entender melhor sobre a API Reflect, recomendo dar uma lida na documentação no Mozilla Developer Network.

Notas

Problemas de performance parecidos com o uso do operador delete;
Uma ampla possibilidade de uso dos métodos da API Reflect, como Reflect.get(), Reflect.set(), entre outros;
Pode confundir para quem não tem conhecimento da API Reflect.

7. Usando bibliotecas externas

Como notado, hoje em dia temos diversas maneiras de remover propriedades de um objeto em JavaScript, sem a necessidade de usar bibliotecas externas. Mas, se você estiver usando uma biblioteca externa, como lodash, e ou underscore, existem métodos específicos para remover propriedades de um objeto.

// Usando lodash
import _ from 'lodash';
const obj = {
  name: 'John',
  age: 30,
  city: 'New York'
};
const newObj = _.omit(obj, ['age']); // Remove a propriedade 'age'.
console.log(newObj); // { name: 'John', city: 'New York' }

Recomendo dar uma lida no repositório "You Don't Need Lodash/Underscore" para entender como você pode substituir as bibliotecas lodash e underscore por outras abordagens mais performáticas.

Conclusão

Como a versatilidade do JavaScript, conseguimos ter várias diversas maneiras para remover propriedades de um objeto. A escolha da abordagem vai depender do caso de uso e do que o seu projeto precisa Usar o delete é o mais comum e mais fácil de entender, mas as outras abordagens também são úteis em diferentes situações e que traz impactos positivos para a performance das suas aplicações.

Criando textos responsivos sem media queries

Tiago Celestino — Thu, 06 Mar 2025 00:00:00 GMT

TL;DR:

A função clamp() do CSS permite criar textos responsivos sem media queries;
Apenas uma linha de código define os tamanhos mínimo, ideal e máximo da fonte;
Facilita a manutenção do CSS e melhora a performance do site;
Funciona em todos os navegadores modernos.

Uma dica rápida e prática para quem precisa manter textos responsivos sem a necessidade de usar media queries. Usando a função clamp, conseguimos ter textos que se adaptam automaticamente a diferentes tamanhos de tela sem precisar configurar tamanhos específicos para cada breakpoint.

Como usar

h2 { font-size: clamp(1.5rem, 8vw, 3rem); }

Explicando a formatação CSS acima, temos o seguinte:

Valor mínimo: 1.5rem - define que o tamanho mínimo da fonte não ficará abaixo de 1,5x em relação ao tamanho da fonte do elemento raiz: 16px × 1.5 = 24px.
Valor ideal: 8vw - define o tamanho da fonte como 8% da largura do viewport. Se a medida da largura do viewport mudar, o tamanho se alterará de acordo com a nova largura.
Valor máximo: 3rem - define o tamanho máximo como 3x o tamanho da fonte em relação ao elemento raiz: 16px × 3 = 48px.

Com apenas uma linha de código, você consegue manter os textos responsivos independentemente do tamanho da tela, garantindo uma experiência de leitura agradável em qualquer dispositivo.

Benefícios

Além da simplicidade, essa abordagem traz algumas vantagens interessantes:

Código mais limpo: reduz a quantidade de media queries no seu CSS
Melhor performance: menos código significa carregamento mais rápido
Transições suaves: o texto se ajusta gradualmente conforme o redimensionamento da tela
Manutenção facilitada: alterações de tamanho podem ser feitas em um único lugar

Compatibilidade

A função clamp() é suportada por todos os navegadores modernos, incluindo:

Chrome (desde a versão 79)
Firefox (desde a versão 75)
Safari (desde a versão 13.1)
Edge (desde a versão 79)

Referências

Você sabe por que usamos o underscore no target="_blank"?

Tiago Celestino — Tue, 25 Feb 2025 00:00:00 GMT

Alguma vez você já se perguntou por que usamos o underscore em valores como _blank, _self, etc...? Eu não sabia até ler esse post do Kyrylo Silin.

Um pouco de história

Antes do surgimento do HTML5, abusávamos do uso de frames para construção de páginas. Essas páginas eram criadas baseadas em framesets. Eu mesmo escrevi muito código HTML utilizando frames. Como nem tudo são flores, usar frames para construção de páginas podia ser útil para organizar conteúdo em várias janelas na própria página (SPA, alguém aí? 😅), mas os frames eram difíceis de manter e tinham sérios problemas de segurança.

Como funcionavam os framesets

Cada frame continha um nome único. Algo como name="footer", name="content", name="sidebar". E quando precisávamos abrir um link em um frame específico, informávamos qual o name do frame onde o conteúdo do link seria carregado. Por exemplo: <a href="/sobre-mim.html" target="content">Sobre mim</a>.

Ao clicar no link, a página "sobre-mim.html" era carregada no frame nomeado "content". Agora, imagine se houvesse um link assim: <a href="/outra-pagina.html" target="blank">Outra página</a>. O que aconteceria?

Como expliquei anteriormente, ao informar target="blank", o link teria que ser aberto em um frame nomeado como "blank", mas caso esse frame não existisse, por padrão, o navegador criava uma nova janela identificando-a como "blank". O mais estranho é que ao clicar no mesmo link novamente, o navegador não abria uma nova janela. 🫣

A solução com underscore

Ao usar o underscore, o navegador passou a entender que o valor target="_blank" não era um nome de um frame na tela, mas sim um valor especial, compreendendo que o conteúdo do link deveria ser aberto em uma nova janela/aba. Esse comportamento também se aplica para os valores target="_self", target="_parent" e target="_top".

Relevância hoje

Mesmo com a obsolescência dos framesets com o surgimento do HTML5, esses valores especiais foram preservados na especificação. Hoje, quando usamos target="_blank", continuamos aproveitando essa convenção estabelecida há décadas, mas com propósitos modernos de navegação.

Simples, porém eficiente, não é mesmo!? 😎

Como organizei meus dotfiles e otimizei meu fluxo de trabalho

Tiago Celestino — Mon, 24 Feb 2025 00:00:00 GMT

Aproveitei a semana passada para aprofundar meus conhecimentos em shell script e decidi usar meus dotfiles como laboratório prático para aplicar o que aprendi e devo continuar aprendendo ao longo desse ano.

O que são dotfiles?

Para quem não conhece, dotfiles são arquivos de configuração que geralmente começam com um ponto (.), tornando-se ocultos em sistemas Unix/Linux. Eles armazenam personalizações para aplicativos e ambientes de desenvolvimento, incluindo:

~/.bashrc: Configurações do shell Bash;
~/.npmrc: Preferências do npm;
~/.gitconfig: Configurações globais do Git;
~/.zshrc: Arquivo principal de configuração do Zsh.

Esses arquivos permitem não só personalizar seu ambiente de trabalho, mas também manter consistência entre diferentes máquinas e sistemas.

Meus dotfiles existem há 9 anos e estavam precisando de atualização. Combinei a necessidade de atualizar as configurações com meu interesse recente em shell script. Durante o processo, utilizei o GitHub Copilot no VS Code (disponível gratuitamente com limites de uso) como assistente para verificar sintaxe, documentação e sugestões de boas práticas. Pretendo detalhar meu fluxo de trabalho com IAs assistivas em um futuro post.

Minha configuração

Nos meus dotfiles, gerencio:

Aliases e plugins do Zsh;
Instalação automatizada de aplicativos via Homebrew;
Configurações específicas para macOS;
Otimizações para Git e Node.js.

Toda instalação é executada por um único comando ./install no terminal. 🚀

À medida que evoluo meu conhecimento em shell scripting, vou implementando melhorias nessas configurações para aumentar a eficiência e ergonomia no meu fluxo de trabalho.

Comece seus próprios dotfiles

Se você ainda não tem dotfiles, sinta-se à vontade para usar meu repositório como base ou inspiração. O projeto é open source - contribuições são bem-vindas! Para explorar diferentes abordagens, recomendo:

O portal dotfiles.github.io com curadoria de exemplos;
O repositório do Paul Irish que me inspirou inicialmente;
O repositório Awesome Dotfiles no GitHub, que possui uma lista de recursos e exemplos interessantes para explorar e implementar em seus dotfiles.

O ponto principal é adaptar as configurações às suas necessidades específicas enquanto mantém a capacidade de replicar seu ambiente em qualquer computador rapidamente.

Compartilhamento de links usando Web Share API

Tiago Celestino — Fri, 31 Jan 2025 00:00:00 GMT

Dias atrás, o Rodrigo Ghedin, do Manual do Usuário, disponibilizou um recurso simples no blog, mas que, sem dúvida, trouxe uma experiência mais agradável para os usuários ao implementar o compartilhamento de link nativo dos navegadores. Dei uma fuçada e acabei confirmando o que imaginava: a implementação é baseada na Web Share API.

Lembrei da época em que trabalhava no elo7 e usamos a Web Share API na página de detalhes dos produtos do marketplace, no qual conseguimos garantir uma experiência mais fluida no marketplace. Inclusive, escrevi sobre a API no blog da empresa.

O que é a Web Share API?

A Web Share API é uma API em Javascript presente em diversos navegadores, na qual você pode usar o recurso nativo de compartilhamento de link sem a necessidade de implementação de plugins de terceiros na sua página. Segundo o Can I Use, a Web Share API já tem um amplo suporte nos navegadores mais atuais:

Infelizmente, o Firefox para desktop ainda não possui o recurso. 😞

Como usar Web Share API

Antes de falarmos de como implementar a Web Share API, precisamos lembrar que, no passado não muito distante, existiam diversas formas de implementar o compartilhamento de link através do navegador. No Android, era possível implementar Web Intents e no iOS, era possível usar Custom URL Schemes. Ou seja, uma salada de frutas para algo "simples". 🤯 Sem contar os diversos plugins de terceiros existentes (Facebook, Twitter, etc.).

A Web Share API surgiu para simplificar e garantir maior compatibilidade entre os sistemas operacionais e navegadores. Além de trazer uma melhor experiência com o uso de um comportamento nativo, em vez de pop-ups, modais e redirecionamentos.

A implementação da Web Share API é muito simples:

Com essa estrutura, você já tem uma implementação funcional de compartilhamento de link do próprio sistema operacional.

Ao clicar no link "Compartilhar link", a Web Share API entra em ação

Caso queira visualizar no seu dispositivo, o exemplo está disponível em https://tcelestino-web-share-api.netlify.app/

Destrinchando o código

Como a Web Share API é baseada em Promise, podemos implementá-la de diferentes maneiras. Seja usando try..catch, then e catch, etc., fica a critério do projeto e do gosto de quem está implementando, já que o resultado final será o mesmo. No exemplo, estou usando try...catch, mas fique à vontade para adaptar à sua realidade.

A Web Share API está disponível através do método share do objeto navigator. Sendo assim, precisamos verificar se o método está disponível no navegador; caso não esteja, podemos implementar uma ação de falha. No exemplo, implementei um alert, mas não façam isso na vida real! 😅

A "magia" do funcionamento da Web Share API está na seguinte configuração:

title: título que será usado no compartilhamento do link;
text: texto descritivo do compartilhamento que será adicionando no campo de texto (opcional);
url: link para onde o usuário será redirecionado ao clicar.

Caso não tenha notado, na chave url, adicionei uma condicional na qual estou capturando o valor do href existente na tag <link rel="canonical" href="https://tcelestino.github.io/bloco-de-notas/">, e isso tem uma explicação.

Imagine que um site tenha domínios específicos para desktop e mobile (https://m.site.com), ou até mesmo URLs baseadas no contexto do usuário, utilizando a estratégia Canonical URL conseguimos garantir que o link compartilhado será "real", mantendo a consistência e a experiência do usuário.

Pontos de atenção!

Apesar da implementação da Web Share API ser simples, temos alguns pontos de atenção:

Seu servidor precisa ter HTTPS habilitado;
Os valores passados para API precisam ser no formato de texto;
Você só pode executar a API a partir de uma ação do usuário. Ou seja, a partir de uma ação de clique;
Não pode chamá-la no carregamento da página (onload, DOMContentLoaded, etc...).

Conclusão

Por ser algo simples de implementar, a Web Share API pode trazer bons ganhos na experiência de usuário, principalmente por não haver interferência de terceiros e por proporcionar maior controle das ações realizadas pelo usuário em seu site.

Ter uma solução nativa integrada com os sistemas operacionais, sem dúvidas, trará uma experiência mais fluida para os usuários, além de garantir a autonomia do funcionamento de todo o seu site.

Mapeando minhas entrevistas pós-demissão

Tiago Celestino — Mon, 06 Jan 2025 00:00:00 GMT

TLDR:

Criei um banco de dados no Notion para mapear e registrar informações sobre as entrevistas.
Participei de entrevistas para cargos como Tech Lead, Team Lead e desenvolvedor.
Feedbacks como melhorias para próximas entrevistas.
A falta de respostas de algumas entrevistas e a adaptação ao modelo PJ, foram pontos impactantes.

Depois de sofrer uma demissão, a primeira coisa que você pensa é buscar uma nova recolocação. Inclusive escrevi sobre isso depois de um mês desempregado. Mesmo não buscando por vagas durante os últimos três meses, recebi alguns convites para entrevistas. Grande parte desses convites vieram via Linkedin. Seja por pessoas que viram a postagem da planilha com o nome das pessoas demitidas, por indicação de pessoas com quem já trabalhei (obrigado, inclusive) e/ou pela busca direta na plataforma.

Mapeamento das entrevistas

Sempre tive o hábito de anotar pontos-chave das entrevistas em que já participei, tanto para melhorar algum aspecto quanto para fazer perguntas sobre os assuntos abordados no processo. Dessa vez, resolvi fazer algo diferente. Em vez de apenas anotar, criei um banco de dados para registrar informações pertinentes (para mim, claro), com o objetivo de obter algumas métricas.

Organizei o banco de dados com as seguintes informações:

Nome da empresa;
Cargo;
Descrição da vaga (link para a vaga);
Salário;
Benefícios;
Tipo de contrato;
Formato de trabalho;
Datas do primeiro e do último contato;
Status da entrevista.

Cargos

	Total
Tech Lead	5
Desenvolvedor	4
Team Lead	1

Como já mencionei, não fiz nenhuma busca ativa por vagas. Os contatos aconteceram principalmente com base na minha experiência como desenvolvedor. No caso da vaga de liderança (Team Lead), achei interessante que foi uma oportunidade para voltar para uma empresa que já tinha passado anteriormente. Tive feedbacks bem legais, tanto do pessoal de engenharia, quanto da recrutadora. Antes que me pergunte: não passei! 🙂

Salários

Os salários no formato PJ tendem a ser maiores. Já li relatos de profissionais recebendo 25k, 30k e até 40k como PJ. Grande parte dessas pessoas recebem em dólares, verdade seja dita, mas são PJs no final. Nunca ouvi algo semelhante no formato CLT, mas não duvido que haja alguém recebendo algo parecido em uma grande empresa tech brasileira.

Os resultados que obtive foram estes:

	Valor
Salário mais alto (PJ)	R$ 17.000,00
Salário mais alto (CLT)	R$ 15.000,00
Salário mais baixo (PJ)	R$ 15.000,00
Salário mais baixo (CLT)	R$ 11.060,00
Média de salário	R$ 11.506,00

Vale mencionar que as vagas no modelo de contrato PJ, para quem nunca trabalhou nesse formato, lidar com todo o processo inicial – abertura de conta jurídica, contratação de contador ou serviços online – foi o que me deixou com dificuldade de aceitação. Amigos que já trabalham nesse modelo me deram dicas e indicações, mas mesmo assim, não me vejo pronto para me adaptar a esse novo formato.

Benefícios

As empresas que contratam no formato CLT ofereciam como principais benefícios:

Plano de Saúde/Odontológico;
Vale Alimentação;
Vale Refeição.

Algumas curiosidades:

Ausência de feedbacks por parte de alguns recrutadores(as). Em um caso específico, enviei uma mensagem procurando saber se havia uma resposta negativa. Até hoje espero.
No salário mais baixo no contrato CLT, os benefícios eram muito melhores do que no maior salário no formato CLT.
No modelo PJ, apenas uma empresa oferecia férias remuneradas como benefício, o restante é aquele esquema PJ: você paga por tudo!

Conclusão

Como foi meu primeiro ano fazendo esse mapeamento, ao reunir os dados, observei que senti falta de fazer o registro das fases dos processos seletivos, como por exemplo, a entrevista que fiz no esquema de whiteboard. Seria mais fácil visualizar o tempo de cada processo até o resultado final.

Além disso, ao pedir feedbacks logo após as entrevistas só confirmou o quanto é importante se ter um feedback assertivo no frescor da situação, o que influencia muito na melhoria de desempenho para as próximas entrevistas.

Se você está buscando novas oportunidades no momento, recomendo tentar algum tipo de registro. Começando com algo mais básico, como registrando os benefícios e ou incrementar com a suas necessidades. Eu fiz no Notion, mas em uma planilha também pode ser bem útil. Certeza que isso vai te ajudar a entender quais as melhores oportunidades farão sentido para você.

Retrospectiva 2024

Tiago Celestino — Mon, 30 Dec 2024 00:00:00 GMT

Mais um ano finalizando com a expectativa de que o próximo seja muito melhor, sempre! Resolvi listar os principais acontecimentos deste ano para minha vida pessoal e profissional.

Esta lista não está em ordem cronológica nem por nível de importância, que fique bem claro.

Janeiro

Início do uso de prótese capilar com cabelo de verdade.
- Desisti no segundo mês. 🙃

Fevereiro

Primeira vez no bloco afro Filhos de Gandhy no Carnaval de Salvador.

Março

Lollapalooza

Abril

Primeira consulta com ortopedista

Maio

Primeira viagem para a Europa.
- Conheci as cidades: Évora, Lisboa, Braga, Porto, Amsterdã, Salamanca, Madrid e Móstoles.
- Encontrei os amigos: Gui e Gilvalso; Thiago (TedK) e família em Braga; Osmundo e família no Porto.
Trabalho remoto no fuso horário 4 horas à frente. 💥

Junho

Seek vende a Catho para a Redabor.
- Ansiedade nas alturas!
Avaliações positivas sobre meu trabalho como gestor. Não rolou mérito dessa vez.
Primeira vez na primeira classe. 🥂

Julho

Aniversário em casa com a família.

Agosto

Início dos estudos sobre o Deno.js.
Corrida Santander (10km) com o Aurélio.
Jogo do Esporte Clube Vitória no estádio do time (foi o único jogo que fui esse ano).
Mentoria de carreira com o Eduardo Galbiati.

Setembro

Demissão geral na Catho.
Voltei a escrever no blog.
Cirurgia para remoção de um encondroma no osso do dedo.
Maratona Salvador (10km) com o clube de corrida da academia.

Outubro

Início de entrevistas para cargos de desenvolvedor em startups, empresas médias e grandes.
- Mapeamento do processo, escrevo em breve sobre.
Início da formação em Product Management, na PM3.
Primeira parcela do seguro-desemprego na conta.
Knotfest.
Resenha com os amigos em SP:
- Encontro dos TTT (Tauan, Tiago e Thassio).
- Churrasco na casa do Cael.
- Encontro com os Diego’s e com o Hyun.
- Andanças com a Nayane.
- Café com os membros do meu ex-time (Larissa e Bruno).
- Jantar com o Sachetto e o Pita.

Novembro

Início da fisioterapia para garantir a mobilidade do dedo pós-cirurgia.
Tentativa estressante de importar produtos da Europa para o Brasil via transportadora internacional.
Primeira produção/organização de um evento musical.
Primeira vez no estádio da Fonte Nova.
- Jogo Brasil vs Uruguai.
Corrida do Leão (Esporte Clube Vitória) (10km).

Dezembro

Liberação da fisioterapia.
Compartilhei meu escritório para os leitores do MdU: https://manualdousuario.net/mesa-de-trabalho-tiago-celestino/
Um novo desafio profissional (conto mais em breve).
Show despedida do Sepultura.

Configurando modo tela cheia do Firefox no macOS

Tiago Celestino — Fri, 20 Dec 2024 00:00:00 GMT

Uma situação incômoda ocorre ao assistir vídeos no Firefox no macOS: quando habilito o modo tela cheia, o sistema automaticamente cria um novo "Space" (área de trabalho). Isso se torna irritante ao final do vídeo, pois sou “forçado” a visualizar uma animação desnecessária durante a transição entre as áreas de trabalho. Nem vou comentar o impacto na performance.

Encontrei uma solução simples através de uma discussão no reddit que resolve este "problema" específico do Firefox.

Passo a passo

Acesse about:config na barra de endereço do Firefox
Localize a configuração full-screen-api.macos-native-full-screen
Mude o valor de true para false

A mudança é aplicada instantaneamente, sem necessidade de reiniciar o navegador. Mais um motivo para usar o Firefox! 🦊

Até o momento, não há uma solução conhecida para outros navegadores como Chrome ou Edge.

É importante mencionar que, embora os desenvolvedores possam criar suas próprias implementações para gerenciar o modo tela cheia, muitos optam por utilizar a API nativa do macOS.

Assim como esse comentário no reddit, seria interessante se a Apple considerasse olhar para este comportamento do sistema.

Meus apps essenciais em 2024

Tiago Celestino — Tue, 03 Dec 2024 00:00:00 GMT

Inspirado na lista do Aman Mittal, decidi compartilhar minha seleção de aplicativos essenciais para 2024.

Sempre gostei dessas listas pois sempre acabo descobrindo novas ferramentas que me ajudam na minha produtividade. Espero que descobra apps que possam melhorar a sua também.

Vamos lá!!

🚀 Launchers: Raycast (macOS) e Ulauncher (Linux)
📧 Cliente de email: Gmail
📝 Bloco de Notas: Bear
✅ Lista de tarefas: Todoist
📅 Calendário: Apple Calendar
☁️ Cloud Storage: Google Drive / iCloud
📷 Câmera: Halide (iOS)
📰 RSS: Feedly
👥 Lista de Contato: Apple Contact
🌐 Navegador: Floorp
💬 Chat: WhatsApp e Telegram
🔖 Favoritos: Raindrop
📖 Lista de leitura: Notion
📊 Suite de escritório: Google Docs/Sheets/Slides
💰 Financeiro: Google Sheets
🎵 Música: Deezer
🎧 Podcasts: Overcast
🔐 Gerenciador de senhas: Bitwarden
💻 Editor de código: VS Code
💬 Terminal: Warp
🤖 Assistente IA: Claude
👨‍💻 Git: Github Mobile

Seja egoísta com sua carreira

Tiago Celestino — Mon, 18 Nov 2024 00:00:00 GMT

TLDR:

Livro escrito por Luciano Santos, aborda como evoluir na carreira profissional com uma linguagem simples e direta, sem jargões;
Foca em priorizar o desenvolvimento profissional e os objetivos pessoais, impactando positivamente o engajamento e saúde mental;
Destaca a importância de se manter atualizado profissionalmente e participar de entrevistas, mesmo estando empregado.
Me ajudou a evitar tomadas de decisão baseadas na ansiedade do momento.

Com mais tempo disponível para atividades que havia negligenciado, coloquei em prática um dos meus principais objetivos: ler uma quantidade maior de livros até o final do ano. Decidi começar a compartilhar uma breve opinião sobre cada livro que termino de ler.

Pois bem! Como desafio aceito geralmente é desafio cumprido, selecionei um livro na biblioteca física. O escolhido foi: Seja egoísta com sua carreira.

Escrito por Luciano Santos, o livro traz uma abordagem sem jargões, focando no que realmente desejamos para nossa carreira. Com uma escrita simples e direta, é possível identificar em diversos capítulos situações que vivenciei, as quais achava estar fazendo errado, mas que no final se revelaram como formas de auto-sabotagem.

Pessoas que sofrem de ansiedade, como eu, têm o instinto de resolver situações desconfortáveis rapidamente, às vezes tomando decisões sem um pensamento crítico. Por exemplo, aceitando uma oferta de trabalho por uma necessidade específica (seja para manter as contas em dia, manter o padrão de vida ou se sentir relevante). No livro, Luciano consegue mostrar que focar plenamente no seu desenvolvimento profissional, priorizando seus objetivos, sejam eles quais forem, impactará positivamente o engajamento, a produtividade e, principalmente, a sua saúde mental. Não quero dizer que todos precisam recusar ofertas de trabalho que não condizem com sua vontade profissional, mas ser mais exigente quanto à qualidade e ao tipo de trabalho a escolher é, sem dúvida, algo reconfortante. "Seja egoísta com sua carreira" nos mostra que ser "egoísta" com a carreira não é algo ruim, mas sim benéfico.

O que mais curti no livro, além da escrita de fácil compreensão, são os diversos casos (ou seriam "cases"?) que o próprio Luciano vivenciou ou que pessoas que foram mentoradas por ele experimentaram. Me identifiquei com vários deles. Um dos casos mais marcantes foi o de uma pessoa que trabalhava em uma empresa por muitos anos e acreditava no tal "espírito de família". Ela se considerava insubstituível, acreditando que seu conhecimento pleno sobre o negócio a tornava indispensável. Sabemos como isso termina: com sua demissão. O que realmente me impactou nesse caso foi o fato de a pessoa não ter se mantido atualizada durante todos esses anos. Manter-se atualizado é crucial para qualquer profissão, não só em termos de ferramentas e metodologias, mas também em relação ao mercado. Deixar de participar de entrevistas por medo de alguém da empresa descobrir, ou por "se sentir confortável" na empresa, foi um dos meus erros. Lição aprendida!

O livro também propõe exercícios práticos interessantes. Um deles consistia em investigar se pessoas que considero inspiradoras para minha carreira haviam planejado suas trajetórias e se tudo ocorreu conforme o esperado. Realizei uma breve pesquisa usando o Google Forms e a enviei para essas pessoas. As respostas obtidas foram esclarecedoras: nem tudo sai como planejamos. Surpreendentemente, 100% dos respondentes afirmaram não ter planejado suas carreiras, o que me trouxe uma sensação de tranquilidade por não ter planejado a minha própria.

Obrigado a todos os amigos e amigas que dedicaram um tempo para responder minha breve pesquisa.

Um pontapé inicial para mudanças

Se você se encontra na incerteza quanto à sua carreira, sentindo que nada está acontecendo como planejado, ou buscando "coragem" para se desafiar em outra profissão/empresa, "Seja egoísta com sua carreira" é um ótimo livro para dar o pontapé inicial. Por experiência própria, posso dizer que a leitura do livro proporcionará mais tranquilidade e, ao mesmo tempo, incentivará você a ser mais ambicioso com sua carreira. Você ganhará coragem para questionar nas entrevistas, para "se jogar" em oportunidades desejadas mesmo sem anos de experiência e, principalmente, para não tomar decisões baseadas na ansiedade do momento.

Recomendo fortemente para quem deseja sair da zona de conforto e começar a enxergar sua carreira sob uma nova perspectiva.

Github Copilot Workspace

Tiago Celestino — Wed, 30 Oct 2024 00:00:00 GMT

TLDR:

Github liberou o Github Copilot Workspace, ferramenta para auxiliar desenvolvedores em brainstorming, planejamento, etc… Estou utilizando há duas semanas e estou achando excelente;
Fiz uma pequena demonstração de como a ferramenta pode ajudar na produtividade;
Enfatizo o surgimento cada vez mais ferramentas similares no futuro próximo.

No início deste ano, em abril, o GitHub apresentou uma prévia do GitHub Copilot Workspace — uma ferramenta promissora para auxiliar desenvolvedores e entusiastas em tarefas como brainstorming, planejamento, refatoração e criação de testes.

Alguns meses depois, o GitHub liberou o acesso, e eu comecei a testar a ferramenta. Estou usando-a há cerca de duas semanas, realizando tarefas básicas, e já posso afirmar: é bem útil!

Para demonstrar seu potencial, fiz uma gravação simples, que você pode conferir nos dois vídeos a seguir.

Experimentando

Seu navegador não suporta o elemento de vídeo. Assista aqui: https://imgur.com/gallery/github-copilot-workspace-beta-phaItCC

Nesse primeiro vídeo, demonstro como gerei um brainstorm sobre o conteúdo necessário para o README.md do projeto. Em seguida, solicitei a criação do que foi planejado.

Seu navegador não suporta o elemento de vídeo. Assista aqui: https://imgur.com/gallery/github-copilot-workspace-beta-phaItCC

Neste segundo vídeo, após validar as alterações e criar um pull request (PR), solicitei ao Copilot que gerasse uma descrição para o PR. Muitos desenvolvedores sabem como pode ser chato o processo de escrever uma descrição de PR. Com apenas um clique, consegui gerar uma descrição completa. 💥 Se você tiver interesse em ver o PR, acesse aqui: https://github.com/tcelestino/learn-programming/pull/11

Mais ferramentas

No Viteconf 2024, o pessoal da StackBiltz surpreendeu com o lançamento do Bolt.new. Escrevendo prompts, você consegue criar aplicações do zero, testa-la e se quiser, pode publica-la utilizando a ferramenta.

Pode ver um exemplo de uso nesse https://x.com/stackblitz/status/1841873251313844631.

Ainda não testei o Bolt.new e ainda estou fuçando o grande potencial do Github Copilot Workspace, mas parece que cada vez teremos ainda mais ferramentas desse tipo. 👀

Não posso deixar de mencionar o Project IDX do Google, uma IDE online que simplifica o desenvolvimento de soluções em várias linguagens e frameworks. Recentemente, a ferramenta ganhou suporte ao Gemini, ampliando ainda mais suas capacidades.

Referências

Um mês desempregado

Tiago Celestino — Thu, 17 Oct 2024 00:00:00 GMT

TLDR:

Fui demitido após 6 anos de trabalho em uma empresa que foi adquirida por outra companhia.

A empresa passou por mudanças estratégicas, incluindo redução de custos e venda para uma empresa europeia. Apesar das promessas de que mudanças só ocorreriam em 2025, demissões em massa aconteceram antes.

Me senti aliviado com a demissão, pois vinha enfrentando crises de ansiedade devido às incertezas.

Estou aproveitando o período para realizar uma cirurgia, ler livros e assistir séries.

Enfatizo a importância de se preparar financeiramente para situações de desemprego e alerto sobre a saturação do mercado de tecnologia e a necessidade de pensar no futuro.

Caso queira saber mais detalhes, leia o texto abaixo.

No dia 17/09/2024, fui chamado pelo CTO da empresa onde trabalhei por 6 anos para "tirar uma dúvida". Desconfiei, até porque nunca fui chamado naquele horário para esse tipo de conversa. E estava certo! Fui demitido da empresa (prefiro não citar o nome) na qual entrei como desenvolvedor sênior e saí como coordenador (ou team lead, se preferir em inglês) e aprendi demais com todos que convivi durante esses anos, principalmente por ter tido a oportunidade de enfrentar novos desafios. Sou grato, óbvio!

Resolvi fazer o resumo de como me senti durante esse primeiro mês desempregado. Espero que sirva de suporte para as pessoas que vêm passando por esse tipo de situação.

Contexto

Vou simplificar para chegar ao foco principal deste "artigo".

A empresa na qual trabalhei por 6 anos fazia parte de um portfólio de empresas de uma grande empresa do outro lado do mundo. Essa companhia tem negócios na Ásia, Oceania e tinha também América Latina (Brasil e México). Posso dizer que é considerada uma das maiores no ramo.

Algum tempo atrás, essa empresa mudou a pessoa responsável por administrar os negócios das subsidiárias na AL. Na época dessa mudança, comentei com algumas pessoas que algo iria acontecer. Estrategicamente, ouvimos que seria necessário alcançar o break-even e aumentar o número de pessoas assinando os serviços da plataforma. Toda empresa é assim, nada de anormal. Passaram-se alguns meses e houve reduções de custos com eliminação de serviços externos que não eram mais usados ou substituição por serviços menos caros. Ex.: Browserstack.

Alguns meses se passaram e tudo parecia ocorrer bem, pelo menos era o que a gente acreditava. Ouviamos da “alta gestão” que estava tudo bem, que tudo estava caminhando como esperado que era para continuarmos buscando a economia e ações para trazer mais usuários pagantes. Em algum momento, as reduções dos custos operacionais surtiram efeito, conseguimos atingir o break-even. Sim, a empresa não estava mais gastando o que não tinha. Pelo menos foi isso que nos informaram.

Vou dar um salto para maio de 2024. De surpresa, fomos comunicados que a empresa estava sendo vendida para outra companhia. Nesse caso, seriamos agora parte de um grupo de empresas de uma companhia europeia. Inclusive, essa companhia é dona de uma das concorrentes direta. Não é mais. É fato que quando há esse tipo de aquisição, ainda mais sendo empresas no mesmo segmento e público, em algum momento haverá reestruturação. Em uma reunião com o novo dono, onde estava pessoas presentes fisicamente e remotas, o novo dono trouxe quais eram as expectativas, algumas percepções de futuro, mas nada tão maduro. Além disso, enfatizaram que as futuras mudanças só aconteceriam em 2025 (vai vendo!). Nunca vou esquecer o momento mais “impactante” desse dia. Fomos informados que o trabalho remoto continuaria. As pessoas ficaram super animadas! Foi o momento em que as pessoas bateram palmas por minutos. Ouviram-se até gritos de “uhuuuu”. Foi engraçado!

Demissão em massa

Passados alguns meses, meu time, que atuava no segmento B2B, era responsável por uma integração importante para a plataforma de ATS da nova empresa. Mesmo na correria, priorizamos essa integração. Era algo que tinha data para ser entregue e as expectativas eram grandes para que tudo estivesse integrado no prazo esperado. Eu, mesmo sendo coordenador, nunca deixei de atuar como desenvolvedor e sempre que podia, participava das atividades para ajudar meu time. Tínhamos várias frentes de trabalho e poucos braços; nessas situações, precisamos ajudar como podemos. Abri alguns pull requests, revisei alguns códigos e continuei garantindo que meu time permanecesse engajado. E eles estavam!

Novamente vou dar um salto e ir direto para o dia 17/09/2024.

Geralmente, eu começava a trabalhar às 9h. Abria o Slack, checava os e-mails, a agenda do dia, verificava o dashboard de acompanhamento de performance do time, etc. Nesse dia, recebi uma mensagem do CTO no Slack. Na mensagem, sem exagerar, fui chamado para "tirar uma dúvida". Estranhei, mas já tinha entendido do que se tratava, até porque nunca recebi mensagem dele nesse horário e principalmente para tirar uma dúvida. Em poucas palavras, fui comunicado que estava deixando a empresa. Já passei por esse tipo de situação antes e as pessoas que precisam comunicar tentam ao máximo amenizar a situação. Querem trazer segurança às pessoas, já que elas estarão deixando o dia a dia e o ganha-pão mensal. Compreensível. Passei alguns anos na empresa e, mesmo não lidando diretamente com o CTO, minha participação em diversos debates importantes me fez ter algum tipo de destaque. Não vou esquecer meu apelido: Celestino, o questionador. 😄 E isso foi enfatizado positivamente no desligamento. Legal, vida segue!

Sinceramente, me senti aliviado. Gostava do que fazia, das pessoas que trabalhava, do ambiente colaborativo, mas com o aumento das incertezas após a aquisição pelo novo dono, crises de ansiedade bateram em todo mundo. Em mim, vinham mais forte todo início de mês. Eu ficava esperando ser chamado no Slack para "tirar uma dúvida". Acabou essa sensação! Aquele ditado "foi bom enquanto durou" foi real para mim.

Fui me despedir do meu time no grupo do WhatsApp e, para minha surpresa, outras pessoas estavam sendo demitidas. Do meu time, duas pessoas ficaram (o especialista e um dev pleno que estava de férias). O time fazia entregas importantes, trouxemos resultados positivos para a empresa, mas com a reestruturação — que só aconteceria em 2025, vale lembrar — resolveram encerrar. Acontece!

Outros times de tecnologia e outros setores também foram impactados. Passei a acompanhar via LinkedIn e a cada momento recebia atualização de status, inclusão do selo "Open to Work" na foto do perfil, alguns fazendo textos de despedidas, etc. Pessoas boas e competentes que, com certeza, logo estarão em novos desafios profissionais. Se tiver interesse em conhecê-las profissionalmente, montamos uma planilha com o contato: https://docs.google.com/spreadsheets/d/1iREXbL2n5x45pKoOBvIMPn5hhsegk6fBIJqCjkREQRo/edit?gid=0#gid=0

Novos ares

No primeiro dia, você fica querendo se empregar rapidamente. A sensação de que precisa ocupar logo a mente com um emprego que te pague mensalmente bate forte demais. Não sei se foi o destino, mas, por incrível que pareça, no dia anterior (16.09) à minha demissão, recebi um contato de uma recrutadora sobre uma oportunidade de trabalho em uma empresa daqui da minha cidade (Salvador, Bahia). Respondi e fiz todo o processo. Consegui a vaga em uma semana. Achei impressionante! O processo foi muito bom, conduzido de maneira humana e assertiva. Demorei alguns dias para dar uma resposta se aceitaria ou não. A recrutadora e a empresa foram bem compreensíveis. No fim, decidi continuar desempregado, ou melhor, me energizando (soa estranho, mas é real). Precisava fazer uma cirurgia importante, e fiz! Precisava ler os livros pendentes, li um até agora (🤦). Queria poder assistir séries e filmes salvos nas diversas listas nos streamings, já assisti muitos. Fazer isso tudo sem precisar me preocupar é algo energizador; acredito que todo mundo precisa passar por isso, nem que seja por um mês (faça nas férias, por exemplo).

Muitos que leram até aqui podem estar se perguntando se não tenho contas, dívidas, etc. Posso dizer que hoje estou bem. Tudo controlado e organizado para ficar um bom tempo sem me preocupar. Acompanho o subreddit /r/brdev e o que mais vejo por lá são pessoas comentando que o mercado está saturado, que tem muitos profissionais com anos de experiência que não estão conseguindo emprego, etc. Me assusta, claro, mas também percebi que muita gente no mercado de tecnologia não pensa/pensou no futuro. Olha que fui aprender tarde a investir, mas ver pessoas com 10, 15 anos de experiência escrevendo posts em rede social alegando passar fome, só mostra o quanto as pessoas ainda não se conscientizaram de que nada é para sempre. Não quero julgar ninguém, até porque desconheço a realidade de muitos; cada um tem seu estilo de vida, seus objetivos, sonhos, etc. Mas pensar que estará sempre recebendo seu salário de 10k, 15k, 20k e não pensar no futuro, pode e está frustrando muita gente na área de tecnologia. É complicado pensar que muita gente acredita que estará na ativa para sempre.

Como todo "guru de investimentos" costuma dizer: faça sua reserva de emergência. Independentemente do valor que consiga adicionar mensalmente, crie o hábito de guardar dinheiro. No futuro, se enfrentar uma demissão, você se sentirá mais tranquilo por um período, pelo menos.

Quanto ao meu futuro, continuo participando de processos seletivos. Agora posso ser mais seletivo com as oportunidades, focando em empresas nas quais acredito, não apenas naquelas que oferecem um salário x ou y. Em breve, espero estar de volta ao mercado e torço para que todos os afetados na antiga empresa também encontrem novos desafios. Até lá, vou continuar colocando a leitura em dia, assistindo a séries e filmes, fazendo cursos e aproveitando meus dias de desempregado.

The State of JS 2021

Tiago Celestino — Mon, 21 Feb 2022 00:00:00 GMT

Depois do State of CSS 2021, temos agora o States of JS 2021. Se você é interessado em entender quais foram as ferramentas, bibliotecas baseadas no Javascript mais populares no ano de 2021, vai querer conferir conferir.

Next.js Developer Survey

Tiago Celestino — Sat, 19 Feb 2022 00:00:00 GMT

Se você utiliza o Next.js em seus projetos pessoais, ou no trabalho, vale a pena responder a pesquisa realizada pelo o time da Vercel.

Não vai levar mais de 5 minutos!

A história do React.js

Tiago Celestino — Sat, 12 Feb 2022 00:00:00 GMT

Novidades do Javascript para 2022

Tiago Celestino — Tue, 25 Jan 2022 00:00:00 GMT

Esse ano não teremos tantas novidades planejadas para o Javascript (também pode chamar de ES2022), porém achei algumas dessas novidades interessantes.

Top-level await

Hoje, só conseguimos usar o operador await a partir de uma função assíncrona (async). A partir do ES2022, não haverá mais essa necessidade.

// antes
(async () => {
  const result = await getUserData();
})();

// agora
const result = await getUserData();

Não vamos precisar mais usar IIFE (Immediately Invoked Function Expression) para definir uma função assíncrona e usar o await.

at()

Quando precisamos capturar o último indíce de um array, hoje utilizamos a seguinte técnica:

const arr = ['foo', 'bar'];
const lastItem = arr[arr.length - 1]; // bar

A partir do ES2022, teremos o método at() para facilitar esse tipo de implementação.

const arr = ['foo', 'bar'];
const lastItem = arr.at(-1); // bar

Vale lembrar que também podemos utilizar o at para recuperar qualquer indíce de um array.

const arr = ['foo', 'bar'];
const lastItem = arr.at(1); // foo

Muito mais simples!!

Classes sem construtor

Agora vai ser possível criar classes sem um constructor. Se já criou componentes usando classes no React.js, utilizando o Babel, irá achar essa novidade bem interessante.

Agora podemos escrever classes assim:

class MyClass {
  foo = 'bar';
  #bar = true;

  getFoo = () => this.foo;

  boom = () => {
    // apenas um exemplo
    this.#bar = !this.#bar;
  }
}

Como você deve ter notado, também será possível usar informações privadas de uma classe utilizando o operador #.

Fonte: bytes.dev

Configurar uma porta diferente no Next.js

Tiago Celestino — Tue, 18 Jan 2022 00:00:00 GMT

Por padrão, ao executar uma aplicação Next.js, a aplicação será acessa na seguinte url http://localhost:3000. Caso queria alterar a porta padrão da aplicação, só é preciso fazer um pequeno ajuste no seu arquivo package.json.

O padrão do package.json no Next.js é assim (caso não use o Typescript):

{
  "name": "meu-projeto-next",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "12.0.8",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  }
}

Para alterar a porta, você só precisa alterar o script "dev": "next dev" para "dev": "next dev -p 3001". Assim, quando rodar npm dev, seu aplicação rodará na url http://localhost:3001 e não mais na porta "3000".

No final, o arquivo package.json fica assim:

{
  "name": "meu-projeto-next",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "next dev -p 3001",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "12.0.8",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  }
}

Definições do front-end

Tiago Celestino — Mon, 17 Jan 2022 00:00:00 GMT

Front-end UI

É focado em lidar com toda a parte visual da aplicação, e tem algumas obrigações, como:

lidar com frameworks de layout;
cuidar do styleguide;
construir uma interface semântica;
facilitar visualização de dados através de gráficos SVG/canvas;
lidar com animações;
participar e encabeçar das discussões de UX;
desenvolver código acessível a pessoas com necessidades especiais;
garantir que o progressive enhancement ou graceful degradation sejam aplicados;

Front-end Engineer

É responsável pela estrutura da aplicação. Suas responsabilidades se resumem a:

criar ambiente de front de desenvolvimento e produção;
definir tarefas de build;
prover a sincronia entre back-end e front;
escolher entre aplicar um framework de JavaScript ou não;
criar os testes de interface/unitários;
manter código padronizado;
definir pattern de código;
usar ferramentas compatíveis com browsers, lembrando sempre do cross-browser;

Newsletters sobre tecnologias e desenvolvimento

Tiago Celestino — Sat, 15 Jan 2022 00:00:00 GMT

Todas as newsletters abaixo são gratuitas!

Nome	Descrição
BrazilJS	Plataforma multicanal de produção e curadoria de conteúdo com foco nas Comunidades dev
Filipe Deschamps Newsletter	Notícias de Tecnologia para quem não tem tempo de ler notícias
Manual do Usuário	A newsletter é a melhor maneira de acompanhar o Manual do Usuário
Interfaces	o melhor da tecnologia na sua caixa de entrada, toda sexta-feira no seu e-mail
Pinguins Móveis	Esta é uma newsletter semanal documentando e analisando a marcha do Linux por todos os cantos da eletrônica de consumo - e, portanto, das nossas vidas
CSS Weekly	Weekly e-mail roundup of CSS articles, tutorials, experiments, and tools curated by Zoran Jambor
Frontend focus	A once–weekly roundup of the best front-end news, articles and tutorials. HTML, CSS, WebGL, Canvas, browser tech, and more
bytes.dev	Staying informed on the JavaScript ecosystem has never been so entertaining. Delivered every Monday, for free
Friday Front-end	Front-end development links tweeted daily, emailed weekly
Javascript Weekly	A newsletter of JavaScript articles, news and cool projects
Node Weekly	A free, once–weekly e-mail round-up of Node.js news and articles
Jamstacked	An email update on the evolving JAMstack ecosystem
Frontend Horse Newsletter	A round-up of the web's best CodePens, websites, and articles, plus the latest Frontend Horse content
React Status	A weekly roundup of the latest React and React Native links and tutorials
Daily Dev Tips	I write daily web development tips that help you become a more efficient software developer
Web Design Weekly	Be the first to know about the latest Web Design and Front-end trends
Serverless Status	A weekly newsletter on serverless and function-as-a-service (FaaS) architectures and platforms including AWS Lambda and Azure Functions

As tendências de desenvolvimento em 2021

Tiago Celestino — Mon, 10 Jan 2022 00:00:00 GMT

Confira o que foi tendência em 2021 no mundo do desenvolvimento frontend, Node.js, React, Vue, entre outros.

Confira na edição "2021 Javascript Rising Stars"

Faker.js encerrado por seu criador

Tiago Celestino — Fri, 07 Jan 2022 00:00:00 GMT

O @marak fez um pull request encerrando o projeto do Faker.js. Pelo o que entendi, seria uma forma de protestar sobre o fato da morte do Aaron Swartz. Inclusive, recomendo assistir o documentário "The Internet's Own Boy: The Story of Aaron Swartz" para conhecer os trabalhos do Swartz, que envolve grandes contribuições para Internet, como a criação da tecnologia RSS e da rede social reddit.

O que fazer?

Mantenha a versão 5.5.3 fixa no arquivo package.json em seus projetos.

Por ser um projeto de código aberto, foi feito um fork no qual a comunidade pretende continuar mantendo o projeto.

E o futuro

Por enquanto não há nenhum indício de que o @marak irá voltar oficialmente com o projeto. Em um tweet, ele expõem que o Github (dona do npm) reverteu a versão do Faker.js com a remoção do código do projeto e suspendeu sua conta no site.

NPM has reverted to a previous version of the faker.js package and Github has suspended my access to all public and private projects. I have 100s of projects. #AaronSwartz pic.twitter.com/zFddwn631S
— marak 🗿 (@marak) January 6, 2022

Acompanhando os próximos capítulos dessa história.

State of CSS 2021

Tiago Celestino — Mon, 03 Jan 2022 00:00:00 GMT

É notável que o CSS vem evoluindo de forma bem considerável durante esses anos, e olhando o resultado da pesquisa State of CSS 2021, fica nítido a quantidade de recursos existentes que conseguem resolver problemas que antes eram resolvidos por Javascript.

Vale a conferida!

Iniciando

Tiago Celestino — Sat, 01 Jan 2022 00:00:00 GMT

Em 2021 algumas mudanças foram realizadas, outras nem chegaram acontecer, mas pretendo fazer diferente esse ano.

Nesse Blocos de Notas, vou anotar irei aprender durante o ano, seja conhecimento técnico ou não.

Ao longo do tempo, farei ajustes por aqui para deixar com minha "cara".

Bloco de Notas por Tiago Celestino

Como remover a coautoria do Claude Code dos seus commits

Removendo essas informações

Por que o ::backdrop não funciona com o atributo open do

DefinitelyTyped Search: uma extensão Raycast para instalar @types

A extensão: DefinitelyTyped Search

Adicione aos favoritos

O que um especialista em box para banheiro me ensinou sobre a adoção real de IA

Contextualizando

O uso de ferramentas de IA

Usando agentes

Minha primeira extensão para o Raycast

Iniciando o desenvolvimento

Ideia para extensão

Início da implementação

Da revisão à publicação

Conclusão

Como ativar o BC Protege+

As 10 extensões essenciais que uso no Firefox

Meus aplicativos essenciais em 2025

Listas anteriores

Retrospectiva 2025

Janeiro

Fevereiro

Março

Abril

Maio

Junho

Julho

Agosto

Setembro

Outubro

Novembro

Dezembro

Metas

Leia outras retrospectivas:

Habilitando o split view no Firefox

Como habilitar o split view no Firefox

Referências

Como depreciar funções/métodos no Node.js

O método que conhecia até hoje: JSDoc

Uma nova abordagem mais prática: util.deprecate

Conclusão

Habilitando RSS no 11ty

O que é RSS?

Instalando o plugin

Duas formas de configurar

Criando o template do feed

Entendendo as configurações

Ativando o plugin no Eleventy

Testando

Desabilitando recursos de IA no Firefox

Diário de atualizações realizadas no Bloco de Notas

Um novo começo

Uma nova abordagem

Inspiração

Como saber quais arquivos do seu pacote serão publicados no npm

Como remover propriedades de um objeto no JavaScript

1. Usando o operador delete

Notas

2. Usando a desestruturação (destructuring)

Notas

3. Usando a combinação de Object.keys() com reduce()

Notas

4. Usando Object.entries() e Object.fromEntries()

Notas

5. Usando Object.defineProperty

Notas

6. Usando Reflect.deleteProperty

Notas

7. Usando bibliotecas externas

Conclusão

Criando textos responsivos sem media queries

Como usar

Benefícios

Compatibilidade

Referências

Você sabe por que usamos o underscore no target="_blank"?

Um pouco de história

Como funcionavam os framesets

Uma nova abordagem mais prática: `util.deprecate`