DEV Community: Thiago Nunes Batista

I Built a Free Web Tools Hub for Developers

Thiago Nunes Batista — Wed, 07 Jan 2026 12:44:32 +0000

You know that moment when you need to generate a CPF to test a form? Or when you need to validate a fake credit card in your development environment? Throughout my career as a developer, I always relied on different websites for these simple but essential daily tasks.

Each site had different layouts and user experiences, some good, others not so much. Thinking about creating something that centralizes these different tools with a simple interface and excellent user experience, I created the Código ao Ponto Developer Tools Hub, a completely free hub that brings together several tools in one place, which are straight to the point and work without the need to create an account.

What tools are available in the Hub?

Online Planning Poker

The most complete tool in the hub. Create a room, share the link with your team (no registration required), and everyone can vote simultaneously on task estimates.

The tool works in real-time with WebSocket - when someone votes, everyone sees it instantly. It has a session timer, participant list with status, and voting options beyond the traditional Fibonacci sequence.

It's the type of tool that comes in handy when your team needs to do Sprint Planning and can't find a quality, free Planning Poker.

CPF Generator and Validator

One of the most popular tools in the hub. The CPF Generator creates valid numbers instantly for use in testing environments. This access success is due to its good position in Google search result pages for the term "CPF Generator", ranging between second and fourth position.

As a complement, the CPF Validator was also created, which verifies if a number is structurally valid with immediate feedback.

Credit Card Generator and Validator

The Credit Card Generator allows you to select the brand (Visa, Mastercard, American Express, etc.) and creates complete fictitious data: card number, CVV, and expiration date. Each field has a quick copy button next to it.

The Credit Card Validator automatically identifies the brand and verifies if the number is structurally valid. Essential for testing payment flows.

Character and Word Counter

Counts in real-time as you type or paste text. Shows total characters, characters without spaces, number of spaces, and total words. Useful for respecting character limits in APIs or validating form fields.

Date Format Converter

Converts dates to the most commonly used formats in development: ISO String, Timestamp, and UTC String. You can use the current date/time or enter a specific date, with a quick copy button in the result.

WhatsApp Link Generator

Enter the phone number (with country code selection) and the desired message. The tool generates a direct link to open the conversation on WhatsApp, with real-time preview showing exactly how the message will appear, including formatting and emojis. Very useful for testing texts that will be used in those tasks where the user clicks "Contact via WhatsApp".

Design and Usability Decisions

Frictionless, No Barriers

The most important project decision was: no tool requires registration. This was non-negotiable from the start. Access, use, done.

For Planning Poker, which is collaborative, you can create rooms with shareable links. No login, no password, no hassle.

Clean and Intuitive Interface

Each tool follows a consistent visual pattern: input area on the left, result on the right, and clearly visible action buttons.

Below each tool, there's an educational section explaining use cases, practical examples, and how that tool can help in daily work. The idea is that even someone who has never used it can quickly understand its value.

Accessible in Portuguese and English

From the beginning, I implemented internationalization. The system automatically detects the browser language, but you can manually switch whenever you want.

Portuguese to serve the Brazilian community, English to reach developers worldwide. The architecture is prepared to easily add new languages.

Responsive and Fast

All these tools have their English versions with I18N and are tested with Lighthouse/PageSpeed Insights to ensure good loading performance and visual stability.

The minimum score target was 90 points on PageSpeed Insights across all categories, which is a big challenge, especially when using third-party scripts like Google Analytics and Google Adsense, but with proper optimizations, they deliver excellent loading speed.

The Stack Behind It

Nuxt 4 was chosen for the frontend for its focus on performance and SEO, very important aspects for good Google ranking.

For the backend, NestJS was chosen for its modular architecture and native WebSocket support, necessary for Planning Poker. It's also JavaScript-based, facilitating Full Stack development of the project.

What's Coming Next

The backlog has some interesting ideas:

PWA version for offline use
Sprint Retro for retrospective ceremonies
More utilities as the community suggests

Want to Check It Out?

The tool has been helping hundreds of users daily, you can also be one of them by clicking here, I hope to help you, thank you very much 🙋🏻

Como lidar com inveja de outros programadores na carreira

Thiago Nunes Batista — Tue, 02 Sep 2025 14:32:55 +0000

Prego que se destaca é martelado: uma dura verdade na carreira de programação

“Prego que se destaca é martelado”. Se você já tem experiência na carreira, provavelmente já percebeu isso. Se está começando, essa é uma verdade que o tempo vai te ensinar, mas eu estou aqui para te falar antes disso acontecer, para que você esteja pronto.

Neste artigo, vamos falar sobre os desafios que surgem ao longo da carreira de programação, e por que eles não estão apenas no código, mas principalmente nas pessoas. Se preferir, também gravei um vídeo no Youtube falando sobre esse assunto.

O início da carreira: foco em Hard Skills

Quando você está começando, a maior parte do seu tempo é dedicada às hard skills. Isso inclui aprender linguagens de programação, frameworks, bibliotecas e ferramentas que permitem que você entregue projetos de qualidade.

Essa fase é natural e necessária, pois é ela que garante sua primeira oportunidade como desenvolvedor. É aqui que você constrói a base técnica que vai sustentar sua carreira.

A evolução: soft skills se tornam essenciais

Conforme você cresce, percebe que o maior desafio não é mais técnico. As soft skills passam a ser fundamentais:

Comunicar-se claramente com colegas e gestores
Fazer alinhamentos e combinar como as tarefas serão realizadas
Garantir que as coisas realmente funcionem no dia a dia

Muitas vezes, o maior obstáculo não é o código em si, mas a capacidade de lidar com pessoas e situações complexas. É aqui que você aprende que entregar resultado envolve mais do que escrever linhas de programação.

Quando você começa a se destacar

Se você se dedica e entrega resultados consistentes, inevitavelmente vai começar a se destacar. É nesse ponto que podem surgir problemas inesperados: a inveja de colegas.

Programação envolve muito mais pessoas do que código. E pessoas têm sentimentos. Um deles é a inveja. Felizmente, a quantidade de profissionais que apresentam esse comportamento é pequena, mas é importante estar ciente disso e preparado para lidar quando acontecer.

Estar preparado faz toda a diferença

Saber que situações de inveja e críticas injustas podem surgir no ambiente de trabalho faz com que você não seja pego de surpresa. Estar preparado significa mais do que simplesmente reconhecer que essas situações existem — é agir de forma estratégica para manter o foco no seu crescimento e proteger sua reputação.

Como se preparar na prática

Mantenha a consistência no seu trabalho

Entregue resultados de forma regular e documentada. Quando você faz isso, fica mais difícil para qualquer colega tentar diminuir ou desmerecer seu esforço.
Desenvolva suas soft skills constantemente

Saber se comunicar, alinhar expectativas e lidar com conflitos de forma madura faz toda a diferença. Soft skills não são apenas “agradáveis de ter” — elas são essenciais para navegar pelas complexidades humanas do ambiente de trabalho.
Evite reagir emocionalmente

A inveja pode vir disfarçada de críticas ou comportamentos passivo-agressivos. Manter a calma e responder de forma profissional ajuda a evitar escaladas desnecessárias de conflito.
Foque no seu crescimento

Não se compare de forma prejudicial aos outros. Concentre-se no que você pode controlar: sua evolução técnica, sua postura e seu aprendizado. Quanto mais você crescer de forma consistente, mais forte se torna diante de situações adversas.
Aprenda a ler sinais

Identificar comportamentos como críticas veladas ou tentativas de tirar mérito ajuda você a se antecipar e agir com inteligência, em vez de reagir por impulso.

Estar preparado significa, em última instância, não deixar que a inveja ou o comportamento negativo de colegas interfira no seu desenvolvimento. É transformar situações potencialmente negativas em oportunidades de aprendizado e fortalecimento da carreira.

Conclusão

Crescer como programador vai muito além de aprender linguagens ou frameworks. É sobre se destacar, assumir responsabilidades e lidar com pessoas, sentimentos e desafios que não aparecem no código.

O prego que se destaca pode até ser martelado, mas se você estiver pronto, ninguém vai conseguir te entortar no caminho. Preparação, foco e consistência são as chaves para uma carreira sólida e bem-sucedida.

Lembre-se: a inveja existe, mas ela não precisa ser um obstáculo se você souber como manter seu crescimento e reputação intactos.

Vercel comprou a Nuxt Labs! E agora, o que muda para o Nuxt?

Thiago Nunes Batista — Thu, 17 Jul 2025 11:00:00 +0000

a última semana, a Vercel — empresa conhecida por estar por trás do Next.js — anunciou a aquisição da Nuxt Labs, startup criada pelos próprios mantenedores do framework Nuxt.js. A notícia surpreendeu a comunidade, gerando dúvidas sobre o futuro do Nuxt e o impacto dessa aquisição para os desenvolvedores que apostam no ecossistema Vue.

Neste artigo, vamos entender o que foi comprado, por que isso aconteceu, e o que muda na prática.

O que é a Nuxt Labs?

A Nuxt Labs é uma empresa criada por Sébastien Chopin e parte do time core do Nuxt para viabilizar o desenvolvimento sustentável do framework. Como o Nuxt é open source e gratuito, a Labs surgiu com a proposta de criar produtos pagos que ajudassem a financiar o trabalho no core do Nuxt.

Entre os principais produtos da Nuxt Labs, temos:

Nuxt Studio — Interface visual para criação de conteúdo com Nuxt Content
Nuxt UI Pro — Biblioteca de componentes premium baseada em Tailwind CSS

Esses produtos permitiram que o time core trabalhasse de forma mais dedicada no Nuxt, garantindo lançamentos relevantes como o Nuxt 3 e novos módulos oficiais.

Por que a Vercel comprou a Nuxt Labs?

Segundo o anúncio oficial feito no blog da Vercel e em comunicado da própria Nuxt Labs, a motivação está em investir no ecossistema Vue e garantir que o Nuxt tenha o suporte necessário para continuar crescendo.

A aquisição também é parte de uma estratégia da Vercel de expandir seu suporte a diversos meta-frameworks — como já fez com Next.js, SvelteKit e Astro. A ideia é que a Vercel seja a melhor plataforma para hospedar qualquer projeto frontend moderno.

Em suas palavras no anúncio oficial:

“Queremos garantir que o Nuxt continue inovando e sendo uma opção poderosa para desenvolvedores Vue. Estamos animados em trazer Sébastien Chopin e parte do time Nuxt Labs para dentro da Vercel.”

O que muda na prática?

A princípio, o Nuxt continuará sendo open source e independente. O framework não foi comprado diretamente, e sim a empresa que o mantém e desenvolve produtos em torno dele. Mas o impacto é significativo:

Mais recursos para o desenvolvimento do Nuxt
Time core contratado pela Vercel, com mais estabilidade financeira
Maior integração com a plataforma da Vercel (sem deixar de lado outras opções como Netlify ou auto-hospedagem)

Além disso, os produtos pagos como o Nuxt Studio e o Nuxt UI Pro devem continuar existindo e sendo oferecidos, com possíveis melhorias a partir do investimento da Vercel.

E a comunidade?

Sébastien Chopin reforçou que a comunidade seguirá sendo parte fundamental do Nuxt. A governança do projeto continua aberta e o desenvolvimento permanecerá público no GitHub.

Há uma promessa de que o foco no ecossistema Vue continuará forte — inclusive, a Vercel mencionou que pretende investir ainda mais em frameworks além do React.

“Vue é um dos frameworks mais usados na Vercel. Queremos apoiar todos os frameworks modernos, e o Nuxt é uma peça chave nesse cenário.”

Conclusão

O fato é que o Nuxt como projeto open source não foi comprado, mas sim sua principal mantenedora. Com a aquisição da Nuxt Labs, a Vercel demonstra estar disposta a investir na pluralidade de frameworks e não limitar sua atuação ao React.

A curto prazo, a expectativa é de mais investimento, mais estabilidade e mais evolução para o Nuxt — o que é excelente notícia para quem trabalha com Vue no dia a dia.

Vamos acompanhar os próximos capítulos dessa nova fase.

Middlewares: O que são e como utilizar no Nuxt.JS

Thiago Nunes Batista — Tue, 14 Jan 2025 14:12:02 +0000

O que são Middlewares?

No Front-end, os Middlewares são blocos de códigos que são executados antes que a navegação para uma nova página aconteça, permitindo realizar diversos controles na nossa aplicação, como:

Autenticação: verifica se o usuário está logado, caso contrário, é redirecionado para a tela de login.
Permissão: verifica se o usuário tem as permissões de acessar aquela página, caso não tenha, ele é redirecionado para alguma página que tenha permissão.
Logs: salvar informações sobre informações da página.

Os Middlewares funcionam como uma camada intermediária, atuando desde o início do carregamento da página até a sua renderização completa.

Essa funcionalidade de middlewares está presente em frameworks modernos do Front-end como Next.js e Nuxt.JS.

Neste artigo, vou te ensinar como implementar os Middlewares de rota no Nuxt.JS.

Middlewares de uma forma não tão técnica

Para explicar de forma mais simples, vou utilizar uma analogia:

Imagine que você quer entrar em uma festa, e nesse processo você vai passar por três funcionários da segurança da festa, que são os "middlewares", e cada um vai ser responsável por fazer uma ação específica.

O primeiro segurança vai verificar se você possui um ingresso e se é válido, semelhante a um middleware de autenticação, caso não possua o ingresso, você vai ser redirecionado para a bilheteria ou tela de login.
O segundo segurança vai conferir se você é maior de idade, requisito essencial para acessar a festa, semelhante a um middleware de permissão. Se você não tiver a permissão necessária para entrar, será redirecionado para fora da fila da festa.
O terceiro e último segurança vai te dar uma pulseira de identificação que sinaliza se você possui acesso à área vip da festa, semelhante aos middlewares que podem adicionar dados em requisições.

Por fim, após passar por todas as etapas anteriores, você estará livre para acessar o salão da festa.

Tipos de Middlewares

No Nuxt.js temos os seguintes tipos de Middlewares:

Globais
Inline ou Anônimos
Nomeados

Os Middlewares globais são criados dentro da pasta /middleware e são executados em todas as páginas. É necessário adicionar o sufixo global.

/*
  Exemplo de middleware Global:
  Esse middleware verifica se a URL/rota buscada existe.
  Caso não exista o usuário é redirecionado para página de links.

  Nome e Diretório do arquivo:
  /middleware/notFound.global.js
*/

export default defineNuxtRouteMiddleware((to) => {
  const hasFoundRoute = to.matched.length > 0;

  if (!hasFoundRoute) {
    return navigateTo({
      path: "/links"
    });
  }
});

Os Middlewares inline ou anônimos são middlewares específicos para uma página, definidos diretamente dentro do arquivo da página no Nuxt; Isso limita a reutilização do código, visto que ele não pode ser facilmente compartilhado com outras páginas.

/*
  Exemplo de middleware inline:
  Esse middleware verifica se os dados estão presentes na store.
  Caso não esteja, os dados serão requisitados.
*/

<script setup lang="ts">
import { useStore } from 'vuex';

definePageMeta({
  middleware: [
    async function (to, from) {
      const store = useStore();
      if (!store.state.user) {
        await store.dispatch("fetchUser");
      }
    },
  ],
});
</script>

Os Middlewares nomeados são criados dentro da pasta /middleware.

/*
  Exemplo de middleware Nomeado:
  Esse middleware verifica o usuário está logado.
  Caso não esteja logado, ele é redirecionado para página de login.

  Nome e Diretório do arquivo:
  /middleware/auth.js
*/

export default defineNuxtRouteMiddleware((to, from) => {
  const { $store } = useNuxtApp();

  if (!$store.auth?.loggedIn) {
    return navigateTo("/login");
  }
});

Nos Middlewares nomeados, é necessário definir quais páginas utilizam determinado middleware, uma das formas de se fazer isso é alterando os arquivos das páginas que vão utilizar aquele middleware:

<script setup>
definePageMeta({
  middleware: "auth-admin"
});
</script>

Também importante dizer que mesmo que você nomeie os arquivos de middleware em padrões como PascalCase ou camelCase, os nomes dos arquivos são normalizados para o padrão kebab-case.

Conclusão

Espero que com esse artigo eu tenha conseguido te explicar de forma simples e rápida os principais pontos de criação e utilização de Middlewares no Nuxt.JS 🙋🏻‍♂️.

Se você precisar de mais informações sobre Middlewares no Nuxt.JS, você pode buscar na documentação oficial.

SEO para Mídias Sociais: Como Fazer os Links do Seu Site Bombarem nas Mídias Sociais!

Thiago Nunes Batista — Thu, 03 Oct 2024 16:01:00 +0000

O Open Graph Protocol é um protocolo criado pelo Facebook em 2010 que define um padrão de metadados que devemos seguir e preencher para integrar um site com as mídias sociais, por exemplo, isso é utilizado para que ao compartilhar o link de um site, seja exibido o título, imagem e descrição do conteúdo.

Inicialmente o Open Graph Protocol foi pensado e desenvolvido para uso no Facebook, mas atualmente, por exemplo, outras plataformas como LinkedIn e Discord realizam o uso das OG Tags.

Como adicionar OG Tags em um site?

Para adicionar as OG Tags será necessário realizar a inclusão de novas meta tags no cabeçalho da página web, onde o atributo property é o nome da OG Tag e o atributo content define o valor, como o exemplo abaixo de um artigo no Código ao Ponto:

<head>
  <meta
    property="og:title"
    content="Como recuperar arquivos perdidos no Git pelo VSCode - Código ao Ponto"
  />

  <meta
    property="og:description"
    content="Aprenda a recuperar alterações de código perdidas utilizando uma funcionalidade do Vscode chamada Local History que salva diferentes versões do seu código."
  />

  <meta
    property="og:image"
    content="/images/blog/como-recuperar-arquivos-perdido-no-git-pelo-vscode.png"
  />

  <meta property="og:type" content="article" />

  <meta
    property="og:url"
    content="https://codigoaoponto.com/blog/como-recuperar-arquivos-perdidos-no-git-pelo-vscode"
  />
</head>

Os diferentes tipos de OG Tags

Existe uma grande variedade de OG Tags, algumas que são fundamentais de se utilizar e outras que são complementares. Abaixo segue as essenciais:

og:title - define o título da página
og:type - define o tipo de conteúdo da página. Exemplos: artigo, site, vídeo, etc.
og:image - define a imagem exibida, talvez a tag mais importante, que captura a atenção do usuário.
og:url - define a URL canônica da página
og:description - define o texto de descrição que normalmente é exibido abaixo da imagem.

E agora algumas das OG Tags complementares, que são úteis em casos específicos:

og:audio - define a URL de um arquivo de aúdio presente na página
og:video - define a URL de um arquivo de vídeo presente na página.

Como testar as OG Tags de um site?

Vou te recomendar o site Open Graph, nele basta você colocar a URL do site que você quer validar o correto funcionamento das OG tags e fazer essa verificação sem precisar compartilhar o link do seu site em cada uma das mídias sociais que você quer testar. O site traz previews das OG Tags para Facebook, Twitter, LinkedIn e Discord.

Conclusão

As OG Tags realizam um papel essencial na integração do seu site com mídias sociais como Twitter, Tiktok e LinkedIn, melhorando a apresentação do conteúdo do site e aumentando a chance de usuários clicarem no link compartilhado e acessarem o seu site.

Como adicionar o Google Tag Manager no seu website com Nuxt 3

Thiago Nunes Batista — Thu, 15 Aug 2024 16:00:00 +0000

O Google Tag Manager é uma plataforma do Google que permite adicionar e gerenciar a integração do seu site ou aplicativo com diversos outros serviços como por exemplo:

Google Analytics
Google Ads
Crazy Egg
Hotjar Tracking Code

Neste artigo você vai aprender através de um passo a passo como adicionar o Google Tag Manager no seu website desenvolvido com Nuxt 3.

1. Instalar o módulo nuxt-gtag

O Nuxt possui um módulo chamado "nuxt-gtag" que possui mais de 100 mil downloads mensais e que vai nos ajudar a realizar a instalação do Google Tag Manager no Nuxt 3 de forma simplificada.

O primeiro passo é executar o comando abaixo:

npx nuxi@latest module add gtag

Esse comando será responsável por instalar o pacote no NPM do módulo nuxt-gtag no projeto e também irá adicionar o nuxt-gtag na seção de módulos do arquivo nuxt.config.ts.

export default defineNuxtConfig({
  // Other Nuxt Settings
  modules: [
    // Other Nuxt Modules
    "nuxt-gtag"
  ]
});

2. Configurar o Google Tag Manager no projeto.

Dentro do arquivo nuxt.config.ts, você deverá adicionar um novo campo chamado gtag dentro do objeto de configuração do Nuxt e que possuirá um outro campo de id que é valor referente ao id da sua conta no Google Tag Manager:

export default defineNuxtConfig({
  // Other Nuxt Settings
  gtag: {
    id: "GTAG-ID"
  }
});

3. Adicionar o id do Google Tag Manager nas variáveis de ambiente

Eu recomendo você não colocar o id do Google Tag Manager dessa forma no seu código, e sim colocar o valor no arquivo .env do projeto e utilizar essa variável de ambiente para fornecer o valor do id do Google Tag Manager na configuração do projeto:

# .env file
GTAG_ID="GTAG-ID"

export default defineNuxtConfig({
  // Other Nuxt Settings
  gtag: {
    id: process.env.GTAG_ID
  }
});

Conclusão

Após realizar as etapas acima, o Google Tag Manager estará configurado no seu projeto e você já vai poder começar a adicionar tags no seu website como por exemplo as tags do Google Analytics e Google Ads.

Espero ter conseguido te ajudar nessa missão de configurar com sucesso o Google Tag Manager no seu projeto com Nuxt 3. 🙋🏻‍♂️

Os principais erros de programadores em entrevistas de emprego

Thiago Nunes Batista — Mon, 15 Jul 2024 22:14:57 +0000

Comecei a trabalhar com o recrutamento de programadores no ano de 2024, participei de todo o processo de recrutamento: análise de currículos, análise de entrevistas gravadas, entrevista de programadores e também realizei desafios de Live Coding. Todos esses processos eu realizei com dezenas de candidatos, com toda essa experiência, neste artigo vou te trazer os principais erros que os programadores cometem nas suas entrevistas de emprego.

Falar muito tempo sobre o seu início de carreira

O início de carreira é muito marcante para cada um de nós, fala sobre a nossa jornada, a nossa história e todo o nosso esforço para entrar na área da programação.
Falar sobre isso é legal, mostra a sua jornada e ajuda a construir o seu perfil, no entanto, um erro que candidatos costumam realizar é de utilizar muito tempo da entrevista falando sobre isso. Normalmente as entrevistas possuem duração aproximada de 1 hora, pode parecer muito tempo, mas acredite, não é!
De uma perspectiva do recrutador, ele está muito mais interessante em saber sobre as suas experiências recentes e os projetos que utilizam as tecnologias que estão descritas na vaga, o ideal é que você busque trazer a maior quantidade de detalhes possíveis sobre esses assuntos.
Você pode falar sobre a sua história, o seu início de carreira, o importante é buscar com que isso não ocupe uma grande quantidade de tempo da entrevista.

Interromper o entrevistador com frequência

Esse é um típico de deficiência de habilidades de Soft Skills, é um erro de quem ainda estudou sobre Escuta ativa, que é um conceito que define que o ouvinte deve se dedicar à ouvir e compreender o assunto do interlocutor.
Quando esse fluxo é interrompido com o candidato interrompendo por muitas vezes o entrevistador, o fluxo da entrevista vai sendo prejudicado, diminuindo a qualidade da entrevista e a sua chance de ser aprovado.
Busque ouvir e entender o que o interlocutor está querendo dizer, antes de querer interromper ele para acrescentar algum ponto ou observação que você achou importante.

Mentir sobre o seu conhecimento técnico

Em empresas de tecnologia, normalmente a primeira etapa do processo seletivo é uma entrevista com pessoas que não são da área da tecnologia, são do setor de pessoas.
Nessa primeira etapa o candidato tem as suas Soft Skills e adaptabilidade à cultura da empresa avaliados, além de uma avaliação inicial das suas experiências.
No entanto, se o candidato fala que possui uma determinada habilidade que ele mesmo sabe que não tem, mas fala isso apenas para aumentar a sua chance de passar para a próxima etapa, essa fraude pode ser detectada posteriormente nas etapas de entrevista técnica realizada por algum programador, e acredite, quando isso ocorre, a sua avaliação de candidato é muito penalizada.

Excesso de palavrões e gírias

As entrevistas do processo de recrutamento são as suas primeiras interações com a empresa. Você não sabe a forma como a empresa se comunica, se esse tipo de comunicação é aceitável ou não. Na dúvida, eu te recomendaria buscar evitar esse estilo de comunicação, mesmo que você utilize ela no seu dia a dia, busque se comunicar de maneira mais sóbria durante o recrutamento.
Após você entrar na empresa, você vai ser alocado em algum time, conforme você for se ambientando e conhecendo o seu time, você saberá se esse tipo de comunicação é permitido naquele ambiente. Visto que você é uma pessoa nova entrando na empresa, você tem que buscar se ambientar àquele ambiente e não o ambiente se adaptar a você.

Se atrasar para a entrevista

Esse erro é bem óbvio, mas às vezes acaba acontecendo. Atrasos pequenos de até 3 minutos passam despercebidos, no entanto, atrasos maiores causam uma primeira má impressão, um sentimento de falta de compromisso com o processo, afinal a maioria das entrevistas de programador são realizadas de forma online, então não há desculpa de locomoção ou afins que justifiquem o seu atraso.
Como dica, eu te aconselharia a entrar no convite da entrevista alguns minutos antes do horário agendado para que você tenha a maior pontualidade possível.

Local de entrevista despreparado

O home office é um privilégio enorme e nós devemos buscar que o local de trabalho escolhido na nossa casa seja o mais profissional possível, especialmente em um momento tão importante quanto a entrevista de emprego.
A dica é que você prepare esse ambiente para estar 100% focado na entrevista e evite situações como:

Animais de estimação passando no ambiente
Outras pessoas conversando com você
Notificações e ligações no telefone
Ambiente bagunçado

Situações como as citadas acima geram um sentimento de desorganização e despreparo, portanto, nessas etapas de recrutamento busque evitar isso.

No dia a dia do trabalho eventualmente isso vai acontecer, afinal, estamos trabalhando, mas ainda estamos em casa e essas interações com Pets ou outras pessoas vão ocorrer, o importante é buscar que isso ocorra nesses momentos críticos.

Não pesquisar sobre a empresa

Enquanto programador, é normal se candidatar em muitas vagas e ser chamado para as próximas etapas apenas em algumas dessas vagas. Não é possível e nem faz sentido estudar toda a história, produto e tecnologias que todas as empresas que você se candidatou utilizam, sendo que você nem sabe se vai avançar no processo seletivo.

Do lado do recrutador, já entrevistei candidatos que nem sequer sabiam corretamente as tecnologias que a empresa utilizava e que estavam descritas na vaga, o que gera uma impressão de totalmente desinteresse na vaga em questão

Pensando em um meio termo, eu diria que o melhor caminho seria alguns minutos antes da entrevista você olhar novamente as tecnologias descritas na vaga e o produto que a empresa desenvolve, dessa forma, na entrevista você pode conectar o assunto com as informações que você buscou, demonstrando que está engajado com o recrutamento.

Conclusão

Lembre-se que conseguir a sua próxima oportunidade de trabalho exige preparação e atenção aos detalhes, busque evitar os erros mencionados neste artigo e implemente as dicas sugeridas, dessa forma acredito que você vai melhorar a sua performance nas entrevistas e conseguir a tão desejada nova oportunidade de trabalho.

Boa Sorte!

Como recuperar arquivos perdidos no Git utilizando o VSCode

Thiago Nunes Batista — Fri, 14 Jun 2024 14:00:00 +0000

O git é o sistema de controle de versão de código mais utilizado no mercado, normalmente nós programadores apenas arranhamos a superfície do que essa ferramenta é capaz. No cotidiano, costumamos apenas realizar ações simples como pull, commit, merge e push.

No entanto, o git é uma ferramenta complexa, a sua incorreta utilização pode resultar em danos como perdas de código nos quais você ainda não tivesse "commitado" no seu repositório, se isso aconteceu com você, provavelmente você ficou muito preocupado que todo o tempo investido naquele código tivesse sido jogado fora.

Se você utiliza o VScode que é um dos editores de texto mais populares entre programadores, eu fico muito feliz de te dizer que você não perdeu o seu código, nesse artigo vou te mostrar como utilizar o Visual Studio Code para recuperar o seu código perdido no Git.

A funcionalidade que vamos utilizar se chama "Local History", foi adicionada na versão 1.66 do VsCode em Março de 2022.

Se você prefere o aprendizado de forma visual, você pode assistir o vídeo abaixo que foi publicado no canal do Código ao Ponto no Youtube.

A solução

Para resolver esse problema realize os seguintes passos:

Digitar f1 para abrir a paleta de comandos do Vscode
Pesquisar pela funcionalidade: “Local History: Find Entry to Restore”
Após selecionar, você deverá procurar e selecionar o nome do arquivo que você perdeu, o VsCode irá te mostrar todas as versões do seu arquivo que ele tem salvo e os horários de alterações no seu arquivo.
Após encontrar, basta clicar e o seu código será restaurado para a versão selecionada.

Conclusão

O Vscode é um editor de texto sensacional, possui tantas funções e atalhos que é impossível saber tudo que essa ferramenta pode te entregar. Fiquei muito surpreso ao descobrir que o VsCode guarda o histórico de alterações dos arquivos que foram editados nele, mas que bom que ele faz isso, porque vai ajudar muito quando aquelas alterações que fizemos e não "commitamos" foram acidentalmente desfeitas.

A maneira correta de utilizar a nomenclatura BEM

Thiago Nunes Batista — Thu, 06 Jun 2024 19:17:00 +0000

Ter padrões de desenvolvimento é essencial para que códigos sejam escritos de forma organizada e estruturada, especialmente quando trabalhando com outros programadores em projetos, pois cada programador tem a sua forma específica de programar, estruturar o código e nomear as suas classes e variáveis, e sem um padrão, o código do projeto possui a tendência de ficar muito bagunçado, visto que diferentes pessoas estarão escrevendo códigos de maneiras diferentes.

A nomenclatura ou metodologia BEM (Block Element Modifier) define o padrão que devemos utilizar para nomear as nossas classes CSS, separando as classes do layout em três partes: blocos, elementos e modificadores.

Dessa forma, se todos os programadores de um projeto conhecerem e utilizarem esse padrão, as classes CSS do código sempre terão o mesmo formato, tornando o código muito mais organizado.

Nesse artigo você vai aprender como utilizar a nomenclatura BEM corretamente e também conhecer os principais erros que programadores cometem utilizando a nomenclatura BEM para que você possa evitá-los.

<div class="block">
  <div class="block__element"></div>
  <div class="block__element">
    <div class="block__another-element"></div>
  </div>
  <div class="block__element block__element--modifider"></div>
</div>

O que é o Bloco?

É como se fosse o container em volta do seu código, o bloco pode ter vários elementos dentro dele, o seu nome deve trazer muito significado, visto que o bloco será o "elemento pai" de várias elementos que serão os "elementos filho".

📖 Sintaxe:

<body>
  <div class="block">...</div>
  ...
  <div class="second-block">
    ...
    <div class="third-block"></div>
    ...
  </div>
  ...
</body>

✍🏻 Exemplo:

<body>
  <div class="gallery">...</div>

  <div class="card">...</div>

  <div class="accordion"></div>
</body>

O que é o Elemento?

É a parte interna do bloco, são pedaços de código que são amarrados e possuem o seu significado atrelado ao seu bloco.

Para nomear um elemento, deve se fazer da seguinte forma: block__element, ou seja, é utilizado o nome da classe de bloco, após é acrescentado 2 caracteres de underline e por fim se adiciona o nome da classe de elemento.

📖 Sintaxe:

<body>
  <div class="block">
    <div class="block__element"></div>
  </div>
</body>

✍🏻 Exemplo:

<body>
  <div class="media-gallery">
    <div class="media-gallery__tabs">...</div>
    <div class="media-gallery__posts">...</div>
    <div class="media-gallery__pagination">...</div>
  </div>

  <div class="card">
    <div class="card__header">...</div>
    <div class="card__content">...</div>
    <div class="card__footer">...</div>
  </div>
</body>

O que é o Modificador?

Seu nome é auto explicativo, ele é responsável por modificar os estilos de blocos ou elementos, dessa forma, representando diferentes variações de estilização de blocos e estilos, como por exemplo: active, disabled, open, error e small.

Para nomear um modificador de bloco, se deve fazer da seguinte forma: block--modifier, ou seja, é utilizado o nome da classe de bloco seguido de 2 caracteres de hífen, e após é adicionado o nome do modificador.

Para criar o modificador de elemento é a mesma "receita": block__element--modifier, basicamente, é utilizado a classe de elemento acrescido de 2 caracteres de hífen, com o nome do modificador ao final da classe.

📖 Sintaxe:

<body>
  <div class="block--modifier">
    <div class="block__element--other-modifier"></div>
  </div>
</body>

✍🏻 Exemplo:

<body>
  <div class="alert alert--error">...</div>

  <div class="media-gallery">
    <div class="media-gallery__tabs--disabled">...</div>
    <div class="media-gallery__posts--empty">...</div>
  </div>

  <div class="card card--large">
    <div class="card__header">...</div>
    <div class="card__content card__content--open">...</div>
    <div class="card__footer">...</div>
  </div>
</body>

Os principais erros ao utilizar a nomenclatura BEM

Agora você aprendeu os princípios da nomenclatura BEM e o melhor caminho para fixar todo esse conteúdo é praticar, visto que "é praticando, que se aprende", no entanto, durante essa prática podem surgir muitas dúvidas e erros na utilização do BEM podem acontecer.

Abaixo trago os principais erros que eu cometi e que também vi outros programadores errarem na utilização do BEM, espero que isso te ajude na sua jornada de aprendizado. 🙋🏻‍♂️

Posso ter elementos dentro de elementos?

Não, os elementos devem se referenciar à um bloco e não à outros elementos.

❌ Incorreto

<div class="block">
  <div class="block__element">
    <div class="block__element__other-element">...</div>
  </div>
</div>

✅ Correto

<body>
  <div class="block">
    <div class="block__element">
      <div class="block__other-element">...</div>
    </div>
  </div>
</body>

Posso ter blocos dentro de blocos?

Sim, isso normalmente faz sentido quando um elemento se tornou muito grande ou complexo, nesse caso, você pode tornar esse elemento em um bloco, que não precisa ter relação com o seu "bloco pai".

✅ Correto

<body>
  <div class="block">
    ...
    <div class="second-block">
      <div class="second-block__element">..</div>
      <div class="second-block__second-element">...</div>
      <div class="second-block__third-element">...</div>
    </div>
    ...
  </div>
</body>

Posso aplicar modificadores de classe também em blocos?

Sim, você pode utilizar modificadores nas suas classes de bloco, no entanto, é necessário que a classe de bloco também esteja presente na tag HTML.

✅ Correto

<div class="block block--modifier">...</div>

❌ Incorreto

<div class="block--modifier">...</div>

Conclusão

A nomenclatura BEM é uma das metodologias mais utilizadas para padronização de classes CSS, espero ter conseguido te ensinar a forma correta de utilizá-la ela e te passar a importância de sua utilização.

How to Install and Use Fira Code Font - VSCode on Ubuntu

Thiago Nunes Batista — Mon, 20 Sep 2021 14:24:52 +0000

But what are font ligatures? Developers use a lot of sequencial symbols in programming, for example: => , <= and !==. The font ligatures will basically transform visuallly this multiple characteres into just one, they will have a different look, maybe more beautiful than the normal look of the separated symbols.

If you prefer a video tutorial, I created that on Youtube, this is the link.

Installing the Font

In the most recent Ubuntu versions the Fira Code font is included in the official repository, you can just install using the command below:

sudo apt install fonts-firacode

Follow the Next 4 Steps To Set Fira Code on VSCode

Open the command pallet with the shortcut “ctrl + shift + p”.
Search for “Preferences: Open Settings (JSON)” and open it.
Add the following properties in the JSON file:

   "editor.fontFamily": "'Fira Code'",
   "editor.fontLigatures": true

Restart the editor. Now, your VSCode is using the Fira Code font.