<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Victor Geruso Gomes</title>
    <description>The latest articles on DEV Community by Victor Geruso Gomes (@vgeruso).</description>
    <link>https://dev.to/vgeruso</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F534797%2Fdf2dd605-e2f4-49ef-98fe-3e59217f3b06.png</url>
      <title>DEV Community: Victor Geruso Gomes</title>
      <link>https://dev.to/vgeruso</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/vgeruso"/>
    <language>en</language>
    <item>
      <title>Testes de Interface com Playwright e MCP no Windsurf</title>
      <dc:creator>Victor Geruso Gomes</dc:creator>
      <pubDate>Fri, 09 Jan 2026 19:06:49 +0000</pubDate>
      <link>https://dev.to/vgeruso/testes-de-interface-com-playwright-e-mcp-no-windsurf-53al</link>
      <guid>https://dev.to/vgeruso/testes-de-interface-com-playwright-e-mcp-no-windsurf-53al</guid>
      <description>&lt;p&gt;O desenvolvimento de testes End-to-End (E2E) sempre teve dois grandes gargalos: a fragilidade dos seletores e a manutenção constante. A integração do &lt;strong&gt;Playwright&lt;/strong&gt; dentro do &lt;strong&gt;Windsurf IDE&lt;/strong&gt;, potencializada pelo &lt;strong&gt;MCP&lt;/strong&gt;, ataca esses problemas transformando o editor de código em um agente ativo capaz de navegar, testar e corrigir sua própria interface.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. O Papel de Cada Peça
&lt;/h2&gt;

&lt;p&gt;Para entender a magia, precisamos definir os atores:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Playwright:&lt;/strong&gt; O framework de testes mais moderno da atualidade. Ele permite automação de navegadores (Chromium, Firefox, WebKit) com extrema velocidade e confiabilidade.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Windsurf IDE:&lt;/strong&gt; O primeiro IDE "agêntico". Ele não apenas completa código; ele entende o contexto profundo do seu projeto.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;MCP (Model Context Protocol):&lt;/strong&gt; É a "cola" técnica. O MCP é o padrão que permite que a IA do Windsurf se conecte a ferramentas externas. No contexto de testes, o MCP permite que a IA não apenas escreva o código do teste, mas também execute comandos do Playwright, leia os relatórios de erro e inspecione o navegador.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  2. Como o MCP Transforma o Workflow
&lt;/h2&gt;

&lt;p&gt;A grande diferença de usar o Playwright no Windsurf (em comparação ao Copilot ou ChatGPT tradicional) é a capacidade de ação via MCP.&lt;/p&gt;

&lt;h3&gt;
  
  
  A. Criação de Testes Contextualizada
&lt;/h3&gt;

&lt;p&gt;Ao invés de pedir "crie um teste de login", o Windsurf (via MCP) pode ler seus arquivos de componentes (ex: &lt;code&gt;Login.tsx&lt;/code&gt; ou &lt;code&gt;Button.vue&lt;/code&gt;). Ele entende os IDs, as classes e a lógica de negócio antes de escrever a primeira linha do teste.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Resultado:&lt;/strong&gt; Testes que funcionam na primeira tentativa, pois usam os seletores corretos existentes no seu código.&lt;/p&gt;

&lt;h3&gt;
  
  
  B. O Ciclo "Escrever, Rodar, Corrigir"
&lt;/h3&gt;

&lt;p&gt;Graças à integração de ferramentas do MCP, o Windsurf pode:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Escrever o arquivo de teste &lt;code&gt;spec.ts&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;Executar o comando &lt;code&gt;npx playwright test&lt;/code&gt; no terminal integrado.&lt;/li&gt;
&lt;li&gt;Ler a saída do terminal e o relatório de erro se o teste falhar.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Auto-corrigir:&lt;/strong&gt; Se o Playwright reclamar que um elemento não estava visível, a IA analisa o erro e sugere (ou aplica) a correção, como adicionar um &lt;code&gt;await expect(...).toBeVisible()&lt;/code&gt;.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  3. Vantagens Práticas no Dia a Dia
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Funcionalidade&lt;/th&gt;
&lt;th&gt;Benefício Direto&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Self-Healing (Auto-cura)&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Quando você altera o nome de um botão no front-end, o Windsurf detecta a quebra no teste e sugere a atualização do seletor automaticamente.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Geração de Page Objects&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Peça para a IA analisar uma página e criar um &lt;em&gt;Page Object Model&lt;/em&gt; (POM) completo para o Playwright. O MCP garante que ele siga a estrutura de pastas do seu projeto.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Depuração de "Flaky Tests"&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Testes intermitentes são o pesadelo de QA. O Windsurf pode analisar logs de múltiplas execuções para identificar condições de corrida (&lt;em&gt;race conditions&lt;/em&gt;) e sugerir esperas explícitas.&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h2&gt;
  
  
  4. Exemplo de Prompt para o Windsurf
&lt;/h2&gt;

&lt;p&gt;Para ver isso em ação, você pode usar um prompt "agêntico" no Cascade (o chat do Windsurf):&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Analise o arquivo &lt;code&gt;CheckoutForm.tsx&lt;/code&gt;. Crie um teste E2E usando Playwright que simule um usuário preenchendo o cartão de crédito com dados inválidos e verifique se a mensagem de erro correta aparece. Em seguida, execute o teste e corrija qualquer erro que aparecer."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Conclusão
&lt;/h2&gt;

&lt;p&gt;O uso de MCP com Playwright no Windsurf deixa de ser sobre "escrever scripts" e passa a ser sobre &lt;strong&gt;"gerenciar a qualidade"&lt;/strong&gt;. Você atua como o arquiteto dos testes, enquanto a IA cuida da implementação, execução e manutenção da infraestrutura, garantindo interfaces mais robustas com uma fração do esforço manual.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>ai</category>
      <category>testing</category>
      <category>ui</category>
    </item>
    <item>
      <title>Análise comparativa dos principais serviços de TTS (Text To Speech)</title>
      <dc:creator>Victor Geruso Gomes</dc:creator>
      <pubDate>Mon, 04 Aug 2025 15:40:22 +0000</pubDate>
      <link>https://dev.to/vgeruso/analise-comparativa-dos-principais-servicos-de-tts-text-to-speech-1n3j</link>
      <guid>https://dev.to/vgeruso/analise-comparativa-dos-principais-servicos-de-tts-text-to-speech-1n3j</guid>
      <description>&lt;p&gt;A tecnologia Text-to-Speech (TTS) revolucionou a interação digital, permitindo que os aplicativos se comuniquem de forma mais natural e acessível. A capacidade de converter texto em fala com nuances e expressividade humanas se tornou um diferencial competitivo, impulsionando a demanda por soluções robustas em diversos setores, como e-learning, assistentes virtuais e atendimento ao cliente.&lt;/p&gt;

&lt;p&gt;Este artigo apresenta uma análise comparativa dos principais serviços de TTS disponíveis no mercado: AWS Polly, Google Cloud Text-to-Speech (TTS) e OpenAI Audio TTS. O objetivo é fornecer uma recomendação informada para auxiliar na tomada de decisão tecnológica.&lt;/p&gt;

&lt;h2&gt;
  
  
  Principais Descobertas
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;&lt;em&gt;Qualidade da Voz:&lt;/em&gt;&lt;/strong&gt; O Google Cloud TTS, com suas vozes WaveNet e Chirp 3 HD, geralmente oferece um realismo e expressividade superiores. A OpenAI, embora inovadora, tem enfrentado inconsistências de qualidade, como flutuações de volume e distorção.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;&lt;em&gt;Preço:&lt;/em&gt;&lt;/strong&gt; AWS Polly e Google Cloud TTS utilizam modelos de precificação transparentes baseados em caracteres, com planos gratuitos que facilitam a experimentação. A OpenAI adota uma estrutura de precificação baseada em tokens ou minutos de áudio, o que pode tornar a estimativa de custos menos intuitiva.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Análise Detalhada dos Sistemas TTS
&lt;/h2&gt;




&lt;h3&gt;
  
  
  AWS Polly
&lt;/h3&gt;

&lt;p&gt;O AWS Polly utiliza tecnologias avançadas de deep learning para sintetizar fala natural.&lt;/p&gt;

&lt;h4&gt;
  
  
  Prós Técnicos:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;&lt;em&gt;Tecnologias de Voz Avançadas:&lt;/em&gt;&lt;/strong&gt; Oferece motores de voz como o Neural Text-to-Speech (NTTS) para vozes mais expressivas e naturais, além de vozes Standard, Long-Form e Generative para diferentes casos de uso.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;&lt;em&gt;Suporte Robusto a SSML:&lt;/em&gt;&lt;/strong&gt; Permite controle granular sobre a saída de áudio com tags SSML, ajustando pitch, volume, taxa de fala, ênfase e adicionando pausas personalizadas.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;&lt;em&gt;Speech Marks para Sincronização Precisa:&lt;/em&gt;&lt;/strong&gt; Fornece informações detalhadas de temporização para cada palavra ou frase, ideal para sincronização labial, destaque de texto em tempo real (karaokê, e-learning) ou outras experiências multimídia.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;&lt;em&gt;Integração Nativa com o Ecossistema AWS:&lt;/em&gt;&lt;/strong&gt; Integra-se com outros serviços AWS como Lambda e S3, simplificando a arquitetura e o deployment para quem já usa AWS.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;&lt;em&gt;Personalização de Lexicon:&lt;/em&gt;&lt;/strong&gt; Permite definir dicionários de pronúncia personalizados para melhorar a pronúncia de palavras específicas, nomes próprios e termos técnicos.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Contras Técnicos:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;&lt;em&gt;Limitações de SSML em Certos Tipos de Voz:&lt;/em&gt;&lt;/strong&gt; Alguns tags avançados de SSML podem não estar disponíveis para todos os tipos de voz.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;&lt;em&gt;Limites de Caracteres e Duração de Áudio:&lt;/em&gt;&lt;/strong&gt; Limite de 3000 caracteres faturáveis por requisição e saída de áudio limitada a 10 minutos, exigindo divisão do conteúdo para textos mais longos.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;&lt;em&gt;Throttling e Limites de Concorrência:&lt;/em&gt;&lt;/strong&gt; Aplica quotas e limites de taxa (e.g., 8 transações por segundo para vozes Neurais), exigindo tratamento de erros e retries em aplicações de alta demanda.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;&lt;em&gt;Complexidade Inicial de Setup:&lt;/em&gt;&lt;/strong&gt; A configuração inicial pode ser complexa e demorada, envolvendo permissões IAM e funções Lambda.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  Google Cloud Text-to-Speech (TTS)
&lt;/h3&gt;

&lt;p&gt;Reconhecido por sua tecnologia avançada de machine learning e redes neurais para gerar fala de alta qualidade.&lt;/p&gt;

&lt;h4&gt;
  
  
  Prós Técnicos:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;&lt;em&gt;Vozes de Alta Qualidade (WaveNet, Neural2, Chirp 3 HD):&lt;/em&gt;&lt;/strong&gt; As vozes WaveNet são geradas por modelos treinados com áudio humano real, resultando em ênfase e inflexão mais humanas. As vozes Neural2 e Chirp 3 HD são otimizadas para conversas espontâneas e naturais.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;&lt;em&gt;Controle SSML Abrangente:&lt;/em&gt;&lt;/strong&gt; Oferece personalização fina da fala com SSML, controlando pausas, tom e pronúncia.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;&lt;em&gt;Recursos Avançados de Voz:&lt;/em&gt;&lt;/strong&gt; Suporta funcionalidades como diálogo multi-speaker. Menciona capacidades de clonagem de voz, uma característica não disponível no AWS Polly.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;&lt;em&gt;Integração com o Ecossistema Google Cloud:&lt;/em&gt;&lt;/strong&gt; Integra-se com outros produtos e serviços do Google Cloud, otimizando fluxos de trabalho.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;&lt;em&gt;Escalabilidade da API:&lt;/em&gt;&lt;/strong&gt; Projetada para fácil implementação e escalabilidade, adaptando-se à demanda.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Contras Técnicos:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;&lt;em&gt;Dependência de Conectividade:&lt;/em&gt;&lt;/strong&gt; Exige conexão com a internet, o que pode ser uma limitação para aplicações offline ou em ambientes com conectividade instável.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;&lt;em&gt;Limitações de Personalização Profunda da Voz:&lt;/em&gt;&lt;/strong&gt; A personalização profunda para características vocais únicas pode ser restrita comparada a ferramentas mais especializadas.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;&lt;em&gt;Inconsistências de Pronúncia Ocasionais:&lt;/em&gt;&lt;/strong&gt; Pode pronunciar incorretamente palavras incomuns ou nomes próprios, exigindo ajustes manuais via SSML ou lexicons.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;&lt;em&gt;Limites de Conteúdo e Requisições:&lt;/em&gt;&lt;/strong&gt; Limites para o comprimento do áudio em requisições síncronas (aproximadamente 1 minuto) e assíncronas (aproximadamente 480 minutos), além de um limite de 10 MB para arquivos de áudio locais.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  OpenAI Audio TTS
&lt;/h3&gt;

&lt;p&gt;Representa a incursão da OpenAI na síntese de fala, aproveitando seus modelos avançados de IA.&lt;/p&gt;

&lt;h4&gt;
  
  
  Prós Técnicos:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;&lt;em&gt;Modelos de Ponta (TTS-1 e TTS-1-HD):&lt;/em&gt;&lt;/strong&gt; Impulsionado por modelos avançados de machine learning, focados em "ótima qualidade", "máxima precisão" e capacidade de lidar com "tons emocionais variados".&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;&lt;em&gt;Geração em Tempo Real e Streaming:&lt;/em&gt;&lt;/strong&gt; A API é capaz de gerar áudio em tempo real e suporta streaming, crucial para aplicações conversacionais e interativas de baixa latência.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;&lt;em&gt;Flexibilidade de Arquitetura:&lt;/em&gt;&lt;/strong&gt; Oferece arquitetura multimodal speech-to-speech (S2S) para interações de baixa latência e uma arquitetura "chained" para maior controle e transparência.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Contras Técnicos:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;&lt;em&gt;Problemas de Qualidade:&lt;/em&gt;&lt;/strong&gt; Foi constatado que acontecem "regressões notáveis" com o modelo gpt-40-mini-tts, incluindo flutuações de volume, longas pausas aleatórias, repetição de texto e distorção de áudio.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;&lt;em&gt;Suporte a Idiomas Menos Explícito:&lt;/em&gt;&lt;/strong&gt; A documentação não apresenta uma lista explícita e detalhada de idiomas e sotaques suportados, o que pode gerar incerteza para projetos multilíngues.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;&lt;em&gt;Controle SSML Menos Detalhado na Documentação:&lt;/em&gt;&lt;/strong&gt; Os dados não fornecem detalhes extensivos sobre o suporte a SSML, sugerindo um controle menos granular sobre a fala ou documentação menos madura.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;&lt;em&gt;Limites de Taxa (Rate Limits):&lt;/em&gt;&lt;/strong&gt; A API impõe limites de taxa (RPM, RPD, TPM, TPD) que podem exigir implementação de lógica de exponential backoff para evitar erros.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Comparação de Preços
&lt;/h2&gt;

&lt;p&gt;Cada Serviço possui diversos modelos a serem escolhidos desde os mais roboticos até o mais naturais sendo os modelos iniciais mais baratos porem com uma entrega menos natural. Já os mais naturais com foco em detalhes e tonalidades de voz, pussuem mais qualidade na entrega, porem mais caros.&lt;/p&gt;

&lt;p&gt;O AWS Polly e o Google TTS tem um faixas de preços parecidas. Os dois após o Tire Gratuito que é de 1 Milhão de Caracteres, passam a cobrar respectivamente entre $30 USD - $160 USD (dependendo do Modelo escolhido) a cada 1 Milhão de caracteres.&lt;/p&gt;

&lt;p&gt;Já o da OpenAI ele tem um preço mais baixo, cobrado a cada 1 Milhão de Token (que dependendo do idioma é cada palavra do texto) de entrada, que custa ~$0.60 USD e de saída ~$0.015 USD por minuto gerado, porém a qualidade dos seus modelos são bem mais baixas.&lt;/p&gt;

&lt;p&gt;Os valores aqui mencionados são dos modelos mais naturais não levamos em consideração o valor dos mais inferiores, que possuem menos tratamentos.&lt;/p&gt;

&lt;h2&gt;
  
  
  Realismo dos Resultados (Qualidade da Voz)
&lt;/h2&gt;

&lt;p&gt;O realismo e a naturalidade da voz sintetizada são primordiais para a satisfação do usuário.&lt;/p&gt;

&lt;p&gt;O AWS Polly, Elogiado por suas vozes neurais realistas, que são difíceis de distinguir de vozes humanas. Oferece dezenas de vozes em mais de 30 idiomas. No entanto, avaliações de MOS (Mean Opinion Score) indicam pontuações ligeiramente inferiores ao Google Cloud TTS em algumas categorias que é Amplamente reconhecido por suas vozes de alta qualidade, especialmente as vozes WaveNet, que resultam em ênfase e inflexão mais humanas. As vozes Chirp 3 HD geram conversas espontâneas e naturais. Geralmente oferece maior qualidade de voz em categorias como ficção e não-ficção em comparação com o AWS Polly. Já O OpenAI Audio TTS Promete gerar fala "humana" que lida com nuances de tom. No entanto, os resultados indicam problemas de qualidade, como flutuações de volume e distorção. Testes comparativos de pronúncia de homógrafos mostraram que o OpenAI TTS teve mais falhas que o AWS Polly.&lt;/p&gt;

&lt;h2&gt;
  
  
  Quantidade de Idiomas Suportados
&lt;/h2&gt;

&lt;p&gt;A abrangência de idiomas é fundamental para aplicações globais. O AWS Polly, Suporta mais de 30 idiomas e oferece mais de 60 vozes. A documentação lista especificamente uma vasta gama de idiomas e suas variantes regionais, oferecendo clareza para o desenvolvimento multilíngue.&lt;/p&gt;

&lt;p&gt;O Google Cloud Text-to-Speech (TTS), Oferece suporte a uma ampla gama de idiomas e vozes, com documentação detalhada listando idiomas, códigos BCP-47 e tipos de voz. É elogiado por seu suporte multilíngue.&lt;/p&gt;

&lt;p&gt;E o OpenAI Audio TTS, Afirma que seus modelos "são capazes de produzir resultados de alta qualidade em múltiplas línguas". No entanto, a documentação não apresenta uma lista explícita e detalhada de idiomas e sotaques suportados, o que pode gerar incerteza e exigir testes extensivos para projetos multilíngues, porem em testes foi constatado que a maioria dos idiomas são definidos de forma automatica detectados no texto enviado, facilitando a configuração no momento da utilização.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusão e Recomendação
&lt;/h2&gt;

&lt;p&gt;A escolha do sistema TTS ideal depende de um balanço entre qualidade de voz, custo, facilidade de integração e os requisitos específicos do projeto.&lt;/p&gt;

&lt;p&gt;O Google Cloud Text-to-Speech se destaca pela qualidade superior de suas vozes e uma estrutura de preços competitiva com um free tier generoso. É a melhor opção para projetos onde a qualidade de voz é a prioridade máxima e a aplicação opera em um ambiente com conectividade estável.&lt;/p&gt;

&lt;p&gt;O AWS Polly oferece uma solução robusta e flexível, com diversas vozes e suporte abrangente a SSML, além da funcionalidade de Speech Marks para sincronização precisa. Sua integração nativa com o ecossistema AWS é uma grande vantagem para equipes já familiarizadas com a plataforma.&lt;/p&gt;

&lt;p&gt;O OpenAI Audio TTS representa a inovação no campo da síntese de fala, com modelos de ponta que prometem lidar com nuances emocionais e oferecer geração em tempo real. No entanto, ainda enfrenta desafios em termos de consistência da qualidade de voz. É mais adequado para quem busca explorar as últimas capacidades de IA e está disposto a lidar com uma tecnologia em evolução.&lt;/p&gt;

&lt;p&gt;Em resumo, para a maioria dos projetos que buscam uma combinação ideal de satisfação dos resultados (qualidade), preço e facilidade no consumo, o Google Cloud Text-to-Speech se posiciona como a escolha mais vantajosa no momento atual. Para usuários AWS existentes, o AWS Polly oferece uma alternativa sólida com integração nativa e recursos valiosos. O OpenAI Audio TTS é mais adequado para quem prioriza a exploração de novas tecnologias e está preparado para os desafios de uma plataforma em rápido desenvolvimento.&lt;/p&gt;

</description>
      <category>ai</category>
    </item>
    <item>
      <title>O Laboratório e o [FAILED]</title>
      <dc:creator>Victor Geruso Gomes</dc:creator>
      <pubDate>Fri, 20 Jun 2025 19:33:36 +0000</pubDate>
      <link>https://dev.to/vgeruso/o-laboratorio-e-o-failed-4i5f</link>
      <guid>https://dev.to/vgeruso/o-laboratorio-e-o-failed-4i5f</guid>
      <description>&lt;p&gt;&lt;strong&gt;Olha só que aventura!&lt;/strong&gt; A alguns dias, resolvi bancar o cientista maluco e me meti num laboratório com o Ollama no meu Ubuntu. A ideia era legal: instalar um modelo de IA. e testar alguns prompts voltados para desenvolvimento, O problema? Exagerei na dose e acabei com o &lt;code&gt;codellama:70b&lt;/code&gt; da Meta.&lt;/p&gt;

&lt;p&gt;Juro que não pensei nas consequências! Instalei essa belezinha direto no container Docker do Ollama. Resultado? Um modelo de &lt;code&gt;39GB&lt;/code&gt; tentando se espremer num SSD de &lt;code&gt;124GB&lt;/code&gt; que já tinha coisa... Nem preciso dizer que a conta não fechou, né? Meu PC morreu na hora! Sim, eu sei, foi uma loucura tentar rodar uma IA de 70 bilhões de parâmetros num SSD tão pequeno! 😵‍💫&lt;/p&gt;

&lt;p&gt;Quando tentei reiniciar meu bixano, a tragédia: &lt;code&gt;[FAILED] Filed to start gdm.service - GNOME Display Manager.&lt;/code&gt; Minha interface Gnome simplesmente se recusou a voltar à vida por falta de espaço em disco para o cache. Mas calma que a solução foi mais satisfatória do que eu esperava!&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Resgatando o sistema&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Para ressuscitar o paciente, na tela de erro que é basicamente um terminal, basta dar um &lt;code&gt;CTRL&lt;/code&gt; + &lt;code&gt;ALT&lt;/code&gt; + &lt;code&gt;F2&lt;/code&gt;. Ele vai pedir seu login e senha. Depois de logar, você terá um terminal livre para executar os comandos e resolver o problema.&lt;/p&gt;

&lt;p&gt;Aqui é onde a mágica acontece, meus amigos! Vamos entrar em ação com alguns comandos shell:&lt;/p&gt;

&lt;p&gt;1- Pare o container Ollama (se estiver rodando):&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker stop &lt;span class="o"&gt;[&lt;/span&gt;ID &lt;span class="k"&gt;do &lt;/span&gt;container]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;2- Remova o container Ollama:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker &lt;span class="nb"&gt;rm&lt;/span&gt; &lt;span class="o"&gt;[&lt;/span&gt;ID &lt;span class="k"&gt;do &lt;/span&gt;container]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;3- Elimine o volume do Ollama: Isso é crucial, pois o modelo assassino ainda está ocupando espaço no disco!&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker volume &lt;span class="nb"&gt;rm &lt;/span&gt;ollama
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Isso vai liberar um espaço e tanto (no meu caso, mais de 40GB!).&lt;/p&gt;

&lt;p&gt;4- Faça uma boa atualização no sistema: Com o espaço liberado, é hora de dar um banho de loja no seu sistema! Isso vai trazer de volta umas bibliotecas que o Linux "matou" por causa do disco cheio.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;sudo &lt;/span&gt;apt update &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="nb"&gt;sudo &lt;/span&gt;apt full-upgrade
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Não se esqueça de digitar &lt;code&gt;Y&lt;/code&gt; quando ele perguntar!&lt;/p&gt;

&lt;p&gt;5- Reinicie e seja feliz! Depois da atualização, é só mandar ver:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;sudo &lt;/span&gt;reboot
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;E pronto! Sua interface estará ressuscitada e você poderá ser feliz novamente! 😉&lt;/p&gt;

&lt;p&gt;E aí, gostou das dicas? Já passou por algo parecido? Me conta nos comentários!&lt;/p&gt;

</description>
      <category>ubuntu</category>
      <category>ai</category>
      <category>docker</category>
    </item>
    <item>
      <title>Pare de instalar bancos de dados</title>
      <dc:creator>Victor Geruso Gomes</dc:creator>
      <pubDate>Sat, 16 Mar 2024 04:31:22 +0000</pubDate>
      <link>https://dev.to/vgeruso/pare-de-instalar-bancos-de-dados-2278</link>
      <guid>https://dev.to/vgeruso/pare-de-instalar-bancos-de-dados-2278</guid>
      <description>&lt;p&gt;Sim, pare de usar bancos de dados instalados na raiz do seu sistema, para melhor gerenciamento, use-os com o Docker. Neste artigo irei mostrar como executar e gerenciar máquinas virtuais de três conhecidos bancos de dados e usa-los de forma local.&lt;/p&gt;




&lt;h2&gt;
  
  
  O que é o Docker?
&lt;/h2&gt;

&lt;p&gt;O Docker é um software que gera a implantação de aplicativos em maquinas virtuais (containers), permitindo o uso desse, em diferentes ambientes complexos. No Docker, conteinerizar um sistema, permite que o mesmo seja usado em diversos ambientes, poupando o usuário de resolver problemas de compatibilidade, dando a possibilidade do uso padronizado no Windows, no Mac OS e no Linux, pois o mesmo aplicativo é sempre executado da mesma forma.&lt;/p&gt;

&lt;h2&gt;
  
  
  Raiz vs Docker
&lt;/h2&gt;

&lt;p&gt;Na raiz o usuário precisa instalar uma versão especifica do banco desejado de forma padrão, deixando o ambiente local engessado, podendo causar um problema grande caso o mesmo necessite de uma versão diferente do SGBD em algum outro projeto.&lt;/p&gt;

&lt;p&gt;Já com o Docker o mesmo SGBD de versões diferentes podem rodar cada um em um container especifico, facilitando a troca da versão quando necessária. Acredite, isso facilita muito e evita a dor de cabeça de ter que desinstalar uma versão do banco para instalar uma outra.&lt;/p&gt;

&lt;h2&gt;
  
  
  A prática
&lt;/h2&gt;

&lt;p&gt;Se você já tem um banco instalado na sua raiz não precisa desinstala-lo se não quiser, só na hora de gerar seu container, basta mudar a porta local no comando, o pré requisito para este artigo é simples, tenha o &lt;a href="https://www.docker.com/" rel="noopener noreferrer"&gt;Docker&lt;/a&gt; instalado na sua máquina.&lt;/p&gt;

&lt;p&gt;Antes de qualquer comando precisamos aprender um pouco sobre a composição de um comando básico para rodar um container.&lt;/p&gt;

&lt;p&gt;Para transformar uma imagem num container precisamos apenas rodar:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker run &lt;span class="o"&gt;[&lt;/span&gt;nome da imagem]:[versao da imagem]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Entre o comando e o nome da imagem, existem flags importantes que são muito usadas para melhorar ainda mais a montagem da VM.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;--name [nome do container]&lt;/strong&gt;: cria um nome personalizado para o container;&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;-e [variavel de ambiente]=[valor]&lt;/strong&gt;: seta uma variável de ambiente no sistema;&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;-p [porta local]:[porta padrão do container]&lt;/strong&gt;: cria uma ponte entre a porta padrão do container, com uma porta local livre;&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;-d&lt;/strong&gt;: essa flag indica que o container irá rodar em segundo plano;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  MySQL
&lt;/h3&gt;

&lt;p&gt;Vamos para o comando que roda o container para o MySQL, um dos bancos mais populares, Para isso, basta rodar o comando:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker run &lt;span class="nt"&gt;--name&lt;/span&gt; mysql-latest &lt;span class="nt"&gt;-p&lt;/span&gt; 3306:3306 &lt;span class="nt"&gt;-e&lt;/span&gt; &lt;span class="nv"&gt;MYSQL_ROOT_PASSWORD&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;mysecretpassword &lt;span class="nt"&gt;-d&lt;/span&gt; mysql:latest
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Com esse comando, é criado um container onde, startado, pode ser acessado pelo endereço, &lt;em&gt;mysql://localhost:3306&lt;/em&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  PostgreSQL
&lt;/h3&gt;

&lt;p&gt;Vamos para o comando que roda o container para o PostgreSQL, banco de dados Open Source muito popular, para isso, basta rodar o comando:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker run &lt;span class="nt"&gt;--name&lt;/span&gt; postgres-latest &lt;span class="nt"&gt;-p&lt;/span&gt; 5432:5432 &lt;span class="nt"&gt;-e&lt;/span&gt; &lt;span class="nv"&gt;POSTGRES_PASSWORD&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;mysecretpassword &lt;span class="nt"&gt;-d&lt;/span&gt; postgres:latest
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Com esse comando é criado um container onde, startado, pode ser acessado pelo endereço, &lt;em&gt;postgres://localhost:5432&lt;/em&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  MongoDB
&lt;/h3&gt;

&lt;p&gt;Vamos agora para o MongoDB, que diferente dos últimos, é um banco de dados não relacional orientado a documentos, para isso, basta rodar o comando:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker run &lt;span class="nt"&gt;--name&lt;/span&gt; mongo-latest &lt;span class="nt"&gt;-p&lt;/span&gt; 27017:27017 &lt;span class="nt"&gt;-e&lt;/span&gt; &lt;span class="nv"&gt;MONGO_INITDB_ROOT_USERNAME&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;root &lt;span class="nt"&gt;-e&lt;/span&gt; &lt;span class="nv"&gt;MONGO_INITDB_ROOT_PASSWORD&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;mysecretpassword &lt;span class="nt"&gt;-d&lt;/span&gt; mongo:latest
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Com esse comando, é criado um container onde, startado, pode ser acessado pelo endereço, &lt;em&gt;mongodb://localhost:27017&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;Os containers startados, podem ser vistos em &lt;code&gt;docker ps&lt;/code&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusão
&lt;/h2&gt;

&lt;p&gt;Neste artigo vimos uma forma simples de usar os bancos mais usados hoje em dia com o Docker, virtualizando os mesmos, e facilitando o dia a dia na hora de desenvolver ou manter seus projetos, esta ferramenta de virtualização, não faz esse tipo de processo somente com bancos de dados, mas ele gera muitas possibilidades com todo e qualquer tipo de projeto, basta pesquisar na ferramenta &lt;a href="https://hub.docker.com/" rel="noopener noreferrer"&gt;Docker Hub&lt;/a&gt;, essa plataforma consiste em um banco de imagens para o Docker, com diversas ferramentas e apps essenciais para nossa área.&lt;/p&gt;

</description>
      <category>docker</category>
      <category>database</category>
      <category>backend</category>
      <category>braziliandevs</category>
    </item>
    <item>
      <title>Pare de abusar do .map()!</title>
      <dc:creator>Victor Geruso Gomes</dc:creator>
      <pubDate>Mon, 25 Oct 2021 17:34:53 +0000</pubDate>
      <link>https://dev.to/vgeruso/pare-de-abusar-do-map-4d0j</link>
      <guid>https://dev.to/vgeruso/pare-de-abusar-do-map-4d0j</guid>
      <description>&lt;p&gt;Tradução de &lt;a href="https://dev.to/catchmareck/stop-abusing-map-51mj"&gt;"Stop abusing .map()!"&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;De vez em quando, quando faço revisão de código ou visito o StackOverflow, encontro trechos de código semelhantes a este:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffq44udm5ap91si44u4c0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffq44udm5ap91si44u4c0.png" alt="Image description" width="700" height="260"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Como você pode ver, é apenas uma iteração simples onde, para cada elemento do fruitIds array, adicionamos active classes a um determinado elemento HTML em um DOM.&lt;/p&gt;

&lt;p&gt;Muitos programadores (especialmente os novos) não notaram nada de errado com o código acima. No entanto, há um grande problema aqui, o uso de .map(). Deixe-me explicar.&lt;/p&gt;

&lt;h2&gt;
  
  
  O que há de errado no .map()?
&lt;/h2&gt;

&lt;p&gt;Bem, não há nada de errado com esse método de array específico. Na verdade, acho que é muito útil e envolve um dos padrões de interação, o mapeamento.&lt;/p&gt;

&lt;p&gt;Em palavras simples, o mapeamento é uma operação que aplica uma função a cada elemento de uma coleção e retorna uma nova coleção com elementos alterados pela função mencionada. Por exemplo, se temos uma matriz de números const nums = [1, 2, 3, 4]; e gostaríamos de receber uma nova matriz de números duplicados, poderíamos mapear a matriz original para uma nova como esta (em JavaScript):&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2hpvshwgcqfm80ed2dqj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2hpvshwgcqfm80ed2dqj.png" alt="Image description" width="700" height="309"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A biggerNums matriz consistiria em números da nums matriz original multiplicados por 2.&lt;/p&gt;

&lt;p&gt;Observe como o .map() é usado, atribuímos o resultado deste método a uma nova variável chamada biggerNums. Também mencionei anteriormente que o mapeamento é uma operação que retorna uma nova coleção de elementos. E esta é a razão pela qual o trecho de código mostrado no início deste artigo está errado. O .map() retorna um novo array - sempre - e se não precisarmos desse array, não devemos usar .map() em primeiro lugar. Neste caso particular (iteração simples), um método de array diferente deve ser usado .forEach() - que é projetado especificamente para tais casos. Ele não retorna uma nova coleção, ele simplesmente percorre uma matriz e invoca uma função de retorno de chamada para cada elemento, permitindo que você faça algo para cada um deles.&lt;/p&gt;

&lt;p&gt;Portanto, a versão correta do snippet mencionado deve ser assim:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjbl203hizkob3ly44hco.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjbl203hizkob3ly44hco.png" alt="Image description" width="700" height="260"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Não precisamos de um novo array, então simplesmente iteramos sobre o fruitIds array e adicionamos a active classe a um elemento HTML para cada um dos itens do array.&lt;/p&gt;

&lt;p&gt;Ok, mas por que eu deveria me importar? .map() é mais curto e mais fácil de escrever do que .forEach(). O que poderia dar errado?&lt;/p&gt;

&lt;h2&gt;
  
  
  Consequências do abuso do .map()
&lt;/h2&gt;

&lt;p&gt;Uma das piores consequências do abuso do .map() é o fato de ele retornar uma nova matriz redundante. Para ser mais específico, ele retorna um novo array do mesmo tamanho daquele em que este método foi chamado. Isso significa que se tivermos um array de 1000 elementos, .map() retornará um novo array de 1000 elementos, todas às vezes.&lt;/p&gt;

&lt;p&gt;Em JavaScript, todas as funções retornam um valor. Mesmo se não usarmos a palavra chave return, a função retornará undefined implicitamente. É assim que a linguagem foi projetada. Esta regra também se aplica a callbacks, eles também são funções.&lt;/p&gt;

&lt;p&gt;Dito isso, vamos voltar ao exemplo original:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1x9e4h99yu0cijej61g7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1x9e4h99yu0cijej61g7.png" alt="Image description" width="700" height="257"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;O que acontece aqui? Uma matriz que IDs de frutas é criada e, em seguida, mapeada para outra matriz do mesmo tamanho. Mesmo que a matriz retornada por .map() nõa seja usada, ela ocorre na memória. Esta nova matriz (não utilizada) tem a seguinte aparência:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp83ob67xpy3xsn4j85jn.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp83ob67xpy3xsn4j85jn.png" alt="Image description" width="700" height="335"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;É porque o callback passado para o .map() não possui a palavra chave return e como sabemos, se não houver return, undefined é retornado implicitamente.&lt;/p&gt;

&lt;p&gt;É muito ruim? Muito mal. Neste exemplo específico, isso não trará consequências sérias, há apenas 3 itens no array, portanto, criar outro array de três elementos não causará problemas. No entanto, o problema surge quando lidamos com grandes matrizes de dados complexos. Se quisermos iterar em um array de cinco mil objetos e abusarmos do .map(), criamos outro array de cinco mil elementos undefineds. Assim, acabamos armazenando 10.000 elementos na memória, dos quais metade é redundante. É uma prática muito inadequada e, em alguns cenários, pode até levar à sobrecarga do aplicativo. É por isso que devemos escolher os métodos certos para as tarefas certas.&lt;/p&gt;

&lt;h2&gt;
  
  
  Resumo
&lt;/h2&gt;

&lt;p&gt;Existem muitas práticas que são essencialmente ruins, mas as consequências negativas começarão a ser visíveis apenas a lidar com conjuntos de dados maiores. Uma dessas práticas é abuso do .map(). Ao operar em matrizes pequenas, não causará nenhum dano. Mas quando cometemos esse erro com um array maior, ele começa a sobrecarregar nosso aplicativo e pode ser muito difícil de depurar.&lt;/p&gt;

&lt;p&gt;É por isso que nunca devemos deixar passar e sempre que vemos esse abuso, devemos cuidar disso. Espero que agora você entenda o porquê.&lt;/p&gt;

&lt;p&gt;Texto original: &lt;a href="https://dev.to/catchmareck/stop-abusing-map-51mj"&gt;https://dev.to/catchmareck/stop-abusing-map-51mj&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>beginners</category>
      <category>braziliandevs</category>
    </item>
  </channel>
</rss>
