<?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: Taina Costa</title>
    <description>The latest articles on DEV Community by Taina Costa (@taina_costa_f).</description>
    <link>https://dev.to/taina_costa_f</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.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3943996%2Fbdbec28d-a623-4e05-90a1-066211db8a41.jpeg</url>
      <title>DEV Community: Taina Costa</title>
      <link>https://dev.to/taina_costa_f</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/taina_costa_f"/>
    <language>en</language>
    <item>
      <title>Por que comunidades de dev importam (e o que você está perdendo)</title>
      <dc:creator>Taina Costa</dc:creator>
      <pubDate>Tue, 18 Aug 2026 14:32:28 +0000</pubDate>
      <link>https://dev.to/taina_costa_f/por-que-comunidades-de-dev-importam-e-o-que-voce-esta-perdendo-fh1</link>
      <guid>https://dev.to/taina_costa_f/por-que-comunidades-de-dev-importam-e-o-que-voce-esta-perdendo-fh1</guid>
      <description>&lt;p&gt;DEV acabou de anunciar Jem Young como Community Program Coordinator. Pode parecer só mais uma contratação, mas diz muito sobre onde o ecossistema de desenvolvimento está indo: comunidades estruturadas, com pessoas dedicadas full-time a fazer elas funcionarem.&lt;/p&gt;

&lt;p&gt;Se você ainda trata comunidade como "aquele lugar onde eu copio código do Stack Overflow", está deixando muito valor na mesa.&lt;/p&gt;

&lt;h2&gt;
  
  
  Por que isso importa agora
&lt;/h2&gt;

&lt;p&gt;Desenvolvimento web virou um jogo de ritmo insano. Frameworks mudam a cada trimestre, padrões evoluem, melhores práticas de ontem são antipadrões de hoje. Você não consegue acompanhar sozinho.&lt;/p&gt;

&lt;p&gt;Comunidades estruturadas — DEV, fóruns especializados, Discords focados — viraram infraestrutura crítica. Não só para tirar dúvidas, mas para:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Entender contexto&lt;/strong&gt; que docs oficiais não dão (por que essa lib existe, qual problema real resolve)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Ver código em produção&lt;/strong&gt; de gente que já quebrou a cara&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Antecipar mudanças&lt;/strong&gt; antes de virarem trending topic no Twitter&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Networking real&lt;/strong&gt; com quem contrata, ensina, ou está resolvendo problemas parecidos com os seus&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;O DEV colocar alguém full-time nisso é sinal: comunidade não é chat bagunçado, é produto.&lt;/p&gt;

&lt;h2&gt;
  
  
  Como comunidades estruturadas funcionam
&lt;/h2&gt;

&lt;p&gt;Uma comunidade que funciona tem três camadas invisíveis:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. Moderação consistente&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Regras claras, aplicadas sem viés. Código de conduta não é decoração — define se o espaço vai ser construtivo ou tóxico.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Programas de engajamento&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Challenges, AMAs, série de artigos temáticos. Algo que transforma lurking passivo em participação ativa.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Incentivos para contribuir&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Badges, destaque, ou só reconhecimento público. Parece bobo, mas gamification funciona quando bem feita.&lt;/p&gt;

&lt;p&gt;O DEV já tinha 1 e 3. Trazer um coordinator de programa sugere que vão investir pesado em 2 — mais estrutura, menos caos.&lt;/p&gt;
&lt;h2&gt;
  
  
  Como participar (de verdade)
&lt;/h2&gt;

&lt;p&gt;Tem jeito certo e jeito inútil de estar em comunidades. Jeito inútil: lurking eterno, esperando alguém resolver seu problema exato. Jeito certo: contribuir antes de pedir.&lt;/p&gt;

&lt;p&gt;Aqui está um padrão que funciona:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Semana 1-2: Observe o tom&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Leia por uma semana. Entenda que tipo de pergunta funciona, como as pessoas respondem, qual o nível de profundidade esperado.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// ❌ Pergunta que vai ser ignorada&lt;/span&gt;
&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Alguém sabe React?&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;

&lt;span class="c1"&gt;// ✅ Pergunta que vai ter resposta&lt;/span&gt;
&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Estou tentando fazer lazy loading de um componente que depende de 
context externo. Quando envolvo com Suspense, o context vem undefined. 
Alguém já resolveu isso sem mover o provider pra dentro do Suspense?&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Semana 3-4: Contribua primeiro&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Responda uma pergunta que você sabe. Compartilhe um artigo relevante. Comente em algo que te ajudou. Construa reputação antes de pedir ajuda complexa.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Depois: Seja consistente&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Apareça regularmente. Comunidades funcionam por reciprocidade. Se você some por três meses e volta só quando precisa, ninguém vai te conhecer.&lt;/p&gt;

&lt;h2&gt;
  
  
  O que evitar
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;FOMO induzido por comunidade&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Você vai ver gente usando 15 libs que você nunca ouviu falar. Resista ao impulso de sair instalando tudo. A maioria não vai sobreviver seis meses.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Toxic positivity&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Comunidades às vezes viram câmara de eco. "Adorei esse framework!" sem crítica nenhuma. Procure espaços onde as pessoas falam dos tradeoffs, não só das vantagens.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Participação performática&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Postar por postar, só pra ter presença. Ninguém ganha nada com isso. Qualidade &amp;gt; frequência.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Esquecer que humanos existem do outro lado&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Você não está conversando com usernames. Tem gente real lendo. Seja direto, mas não seja grosso.&lt;/p&gt;

&lt;h2&gt;
  
  
  TL;DR
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;DEV contratou coordinator de comunidade full-time — sinal de que comunidades viraram infraestrutura crítica&lt;/li&gt;
&lt;li&gt;Comunidades estruturadas têm moderação consistente, programas de engajamento, e incentivos para contribuir&lt;/li&gt;
&lt;li&gt;Participar bem: observe o tom → contribua primeiro → seja consistente&lt;/li&gt;
&lt;li&gt;Evite FOMO, toxic positivity, e participação performática&lt;/li&gt;
&lt;li&gt;Comunidade não é rede social — é ferramenta de trabalho. Use como tal.&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>tutorial</category>
      <category>beginners</category>
    </item>
    <item>
      <title>TypeScript 7 "foi nativo" — o que isso significa de verdade</title>
      <dc:creator>Taina Costa</dc:creator>
      <pubDate>Tue, 11 Aug 2026 14:56:37 +0000</pubDate>
      <link>https://dev.to/taina_costa_f/typescript-7-foi-nativo-o-que-isso-significa-de-verdade-2a59</link>
      <guid>https://dev.to/taina_costa_f/typescript-7-foi-nativo-o-que-isso-significa-de-verdade-2a59</guid>
      <description>&lt;p&gt;Todo mundo já ouviu: o TypeScript "foi nativo". E aí vem a conclusão errada: "Oba, agora o navegador roda TypeScript direto!" Não. Seu código continua sendo transpilado pra JavaScript. O que mudou foi &lt;strong&gt;quem faz a checagem de tipos&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Antes, o compilador &lt;code&gt;tsc&lt;/code&gt; era um programa JavaScript rodando no Node.js. Agora ele foi reescrito em Go e compila pra um binário nativo. A pipeline ficou assim:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Antes: TypeScript 7&lt;/span&gt;
&lt;span class="nx"&gt;seus&lt;/span&gt; &lt;span class="nx"&gt;arquivos&lt;/span&gt; &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;ts&lt;/span&gt; &lt;span class="err"&gt;→&lt;/span&gt; &lt;span class="nx"&gt;compilador&lt;/span&gt; &lt;span class="nx"&gt;JS&lt;/span&gt; &lt;span class="nx"&gt;no&lt;/span&gt; &lt;span class="nx"&gt;Node&lt;/span&gt; &lt;span class="err"&gt;→&lt;/span&gt; &lt;span class="nx"&gt;erros&lt;/span&gt; &lt;span class="nx"&gt;de&lt;/span&gt; &lt;span class="nx"&gt;tipo&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;JS&lt;/span&gt;

&lt;span class="c1"&gt;// Depois: TypeScript 7&lt;/span&gt;
&lt;span class="nx"&gt;seus&lt;/span&gt; &lt;span class="nx"&gt;arquivos&lt;/span&gt; &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;ts&lt;/span&gt; &lt;span class="err"&gt;→&lt;/span&gt; &lt;span class="nx"&gt;binário&lt;/span&gt; &lt;span class="nx"&gt;nativo&lt;/span&gt; &lt;span class="nx"&gt;em&lt;/span&gt; &lt;span class="nx"&gt;Go&lt;/span&gt; &lt;span class="err"&gt;→&lt;/span&gt; &lt;span class="nx"&gt;mesmos&lt;/span&gt; &lt;span class="nx"&gt;erros&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;mesmo&lt;/span&gt; &lt;span class="nx"&gt;JS&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;A entrada e a saída são &lt;strong&gt;idênticas&lt;/strong&gt;. Só o meio mudou.&lt;/p&gt;

&lt;h2&gt;
  
  
  O que ganhou performance
&lt;/h2&gt;

&lt;p&gt;Os benchmarks são agressivos. A codebase do VS Code caiu de 125.7s pra 10.6s de type-check. Isso é &lt;strong&gt;11.9x mais rápido&lt;/strong&gt;. A Slack cortou o tempo de CI de 7.5 minutos pra 1.25 minuto.&lt;/p&gt;

&lt;p&gt;De onde vem essa diferença?&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Código nativo elimina JIT warmup e garbage collection.&lt;/strong&gt; Node.js precisa aquecer a V8 e pausar pra coleta de lixo. O binário Go não tem esse overhead.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Paralelização real com threads e memória compartilhada.&lt;/strong&gt; Você pode rodar &lt;code&gt;tsc --checkers 8&lt;/code&gt; em CI com máquinas potentes e distribuir a checagem entre workers simultâneos.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Isso não é otimização marginal — é mudança de categoria.&lt;/p&gt;

&lt;h2&gt;
  
  
  O que &lt;strong&gt;não&lt;/strong&gt; mudou
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Navegador ainda não roda TypeScript direto&lt;/li&gt;
&lt;li&gt;Node.js ainda precisa de transpilação&lt;/li&gt;
&lt;li&gt;O build step continua existindo&lt;/li&gt;
&lt;li&gt;O JavaScript gerado é idêntico ao da versão 6&lt;/li&gt;
&lt;li&gt;As regras do sistema de tipos não mudaram&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Se você tinha um erro de tipo antes, vai ter o mesmo erro agora. Se &lt;code&gt;tsc&lt;/code&gt; emitia um &lt;code&gt;.js&lt;/code&gt; específico, continua emitindo o mesmo código.&lt;/p&gt;

&lt;h2&gt;
  
  
  Impacto prático no seu dia a dia
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;1. Editor mais responsivo&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Abrir projeto grande no VS Code era sinônimo de "Initializing TypeScript..." travado por minutos. Agora isso cai pra segundos. Autocomplete, go-to-definition, verificação inline — tudo fica instantâneo.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. CI mais rápida&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Pipelines onde o gargalo era &lt;code&gt;tsc --noEmit&lt;/code&gt; agora correm em fração do tempo. Menos espera, mais deploy.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Workarounds podem ser descontinuados&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Muita gente ativou &lt;code&gt;skipLibCheck: true&lt;/code&gt; só pra aliviar a performance, mesmo sabendo que isso desliga checagens importantes. Agora dá pra voltar atrás sem penalidade de velocidade.&lt;/p&gt;

&lt;h2&gt;
  
  
  Migração
&lt;/h2&gt;

&lt;p&gt;TypeScript 7.0 saiu em 8 de julho de 2026. A API estável do compilador vem na 7.1, e aí o ecossistema (typescript-eslint, checadores de framework) migra de vez. Até lá, times podem rodar as duas versões em paralelo.&lt;/p&gt;

&lt;p&gt;No fim: quem prometeu "TypeScript nativo no navegador" mentiu. Mas quem prometeu performance brutal entregou.&lt;/p&gt;

&lt;h2&gt;
  
  
  TL;DR
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;O &lt;strong&gt;compilador&lt;/strong&gt; foi reescrito em Go e compila pra binário nativo&lt;/li&gt;
&lt;li&gt;Seu código TypeScript continua virando JavaScript, nada mudou aí&lt;/li&gt;
&lt;li&gt;Performance ganhou 10-12x em projetos grandes (VS Code, Slack)&lt;/li&gt;
&lt;li&gt;Paralelização real com &lt;code&gt;--checkers&lt;/code&gt; pra CI potente&lt;/li&gt;
&lt;li&gt;Editor e pipeline de CI ficam drasticamente mais rápidos&lt;/li&gt;
&lt;li&gt;Navegador ainda não roda &lt;code&gt;.ts&lt;/code&gt; direto — esse nunca foi o plano&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>tutorial</category>
      <category>beginners</category>
    </item>
    <item>
      <title>A IA quebrou o pipeline de devs juniores (e ninguém tá falando disso)</title>
      <dc:creator>Taina Costa</dc:creator>
      <pubDate>Tue, 04 Aug 2026 16:11:33 +0000</pubDate>
      <link>https://dev.to/taina_costa_f/a-ia-quebrou-o-pipeline-de-devs-juniores-e-ninguem-ta-falando-disso-285l</link>
      <guid>https://dev.to/taina_costa_f/a-ia-quebrou-o-pipeline-de-devs-juniores-e-ninguem-ta-falando-disso-285l</guid>
      <description>&lt;p&gt;Nos últimos dois anos, vi três empresas brasileiras congelarem contratações de júnior. Não por crise — os times seniors estavam contratando. O motivo? "Com Copilot, um pleno faz o trabalho de dois juniores." Parece eficiência. Mas se você parar pra pensar cinco minutos, percebe que acabamos de serrar o galho onde a gente tá sentado.&lt;/p&gt;

&lt;h2&gt;
  
  
  O problema não é a ferramenta, é o modelo mental
&lt;/h2&gt;

&lt;p&gt;A IA de fato multiplica produtividade de quem já sabe o que tá fazendo. Um senior com ChatGPT escreve testes mais rápido, scaffolding vira commodity, refactor massivo acontece em minutos. Mas o pulo do gato é justamente esse "já sabe o que tá fazendo".&lt;/p&gt;

&lt;p&gt;Um júnior não sabe. E as tasks que ele fazia pra aprender — ajustes de CSS, bugs óbvios de lógica, escrever CRUD pela décima vez até virar músculo — agora são delegadas pra IA. O problema: &lt;strong&gt;essas tasks chatas eram o tutorial do mundo real&lt;/strong&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  O que a gente perdeu no caminho
&lt;/h2&gt;

&lt;p&gt;Quando eu comecei (2018, React 16 era novidade), passei seis meses só fazendo forms. Parecia perder tempo. Mas foi ali que internalizei:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Estado local vs global&lt;/li&gt;
&lt;li&gt;Side effects (aprendi useEffect errando, não lendo doc)&lt;/li&gt;
&lt;li&gt;Como lidar com async sem travar a UI&lt;/li&gt;
&lt;li&gt;Performance (renderizações desnecessárias doem quando você causa elas)
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Meu primeiro form "de verdade" — parece simples, mas tinha&lt;/span&gt;
&lt;span class="c1"&gt;// que entender controlled components, validação, submit assíncrono&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;LoginForm&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;email&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;setEmail&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useState&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;''&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;loading&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;setLoading&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useState&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;handleSubmit&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;preventDefault&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="nf"&gt;setLoading&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

    &lt;span class="k"&gt;try&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;api&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;login&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;email&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
      &lt;span class="c1"&gt;// Como lidar com sucesso? Redirect? Toast? Context?&lt;/span&gt;
      &lt;span class="c1"&gt;// Essas perguntas só aparecem quando você tá fazendo.&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;catch &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;err&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="c1"&gt;// E erro? Mostrar onde? Como?&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;finally&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nf"&gt;setLoading&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="p"&gt;};&lt;/span&gt;

  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;form&lt;/span&gt; &lt;span class="na"&gt;onSubmit&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;handleSubmit&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;input&lt;/span&gt; 
        &lt;span class="na"&gt;value&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;email&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt; 
        &lt;span class="na"&gt;onChange&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;setEmail&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;target&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;
        &lt;span class="na"&gt;disabled&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;loading&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;
      &lt;span class="p"&gt;/&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt; &lt;span class="na"&gt;disabled&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;loading&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;loading&lt;/span&gt; &lt;span class="p"&gt;?&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Carregando...&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Entrar&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;form&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Hoje, um júnior pede pro Copilot e recebe isso pronto. Ele comita. Funciona. Mas ele não sabe &lt;em&gt;por que&lt;/em&gt; funciona. E quando quebra em produção (loading state não reseta após erro de rede), ele não tem o mapa mental pra debugar.&lt;/p&gt;

&lt;h2&gt;
  
  
  O que acontece quando pulamos o tutorial
&lt;/h2&gt;

&lt;p&gt;Conheci um dev recém-formado que usava IA pra tudo. Brilhante, rápido, entregava. Até o dia que o Copilot sugeriu um &lt;code&gt;useEffect&lt;/code&gt; sem array de dependências. Ele aceitou. O componente entrou em loop infinito. Ele não entendia por quê — afinal, "a IA sempre funciona".&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Copilot sugeriu isso (e tá sintaticamente correto!)&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;UserProfile&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;userId&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;setUser&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useState&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="nf"&gt;useEffect&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;fetchUser&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;userId&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;setUser&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="c1"&gt;// ⚠️ Falta o array de dependências. Isso dispara a cada render.&lt;/span&gt;
    &lt;span class="c1"&gt;// Que causa um setUser. Que causa outro render. Loop infinito.&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;

  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;?.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Um pleno vê isso e corrige no code review. Mas se você nunca causou esse bug sozinho, nunca debugou um componente travando o browser, &lt;strong&gt;você não desenvolve o reflexo&lt;/strong&gt;. Vira conhecimento teórico, não operacional.&lt;/p&gt;

&lt;h2&gt;
  
  
  A ilusão da senioridade precoce
&lt;/h2&gt;

&lt;p&gt;A IA cria uma falsa sensação de domínio. Você entrega código que parece profissional porque a IA escreve bem. Mas quando precisa:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Decidir entre Context API, Zustand ou Redux (a IA gera qualquer um)&lt;/li&gt;
&lt;li&gt;Otimizar um re-render pesado (a IA mostra &lt;code&gt;useMemo&lt;/code&gt;, mas onde?)&lt;/li&gt;
&lt;li&gt;Arquitetar um sistema novo (a IA segue padrões genéricos, não o seu contexto)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;...você empaca. Porque essas decisões exigem ter errado antes. Ter escolhido Context pra tudo e visto o app virar spaghetti. Ter esquecido &lt;code&gt;useMemo&lt;/code&gt; e visto a lista de 10k itens travar.&lt;/p&gt;

&lt;h2&gt;
  
  
  O que fazer? (spoiler: não é "parar de usar IA")
&lt;/h2&gt;

&lt;p&gt;Três coisas que tenho visto funcionar:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. Code review como mentoria explícita&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Não aceite "funciona" como métrica. Pergunte: "Por que você usou &lt;code&gt;useCallback&lt;/code&gt; aqui? O que acontece se tirar?" Se a resposta for "o Copilot sugeriu", é red flag. O júnior precisa re-implementar do zero pra entender.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Tasks intencionalmente sem IA&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Reserve bugs pequenos e peça: "resolve sem IA, manda perguntas no Slack". Parece cruel. Mas é nesses 40 minutos debugando um &lt;code&gt;undefined&lt;/code&gt; que você internaliza como runtime funciona.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Pair programming assíncrono&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Grave sua tela enquanto codifica. Mostra o processo: como você lê a stack trace, que log você adiciona, por que testou aquele edge case. Júnior copia o &lt;em&gt;processo&lt;/em&gt;, não só o código.&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="c"&gt;# Exemplo: meu flow de debug que eu gravo e compartilho&lt;/span&gt;
&lt;span class="c"&gt;# 1. Reproduzir o bug localmente&lt;/span&gt;
npm run dev
&lt;span class="c"&gt;# abrir devtools, Network tab&lt;/span&gt;

&lt;span class="c"&gt;# 2. Adicionar logs estratégicos (não console.log aleatório)&lt;/span&gt;
// antes &lt;span class="k"&gt;do &lt;/span&gt;fetch
console.log&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'fetchUser called with:'&lt;/span&gt;, userId&lt;span class="o"&gt;)&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
// depois &lt;span class="k"&gt;do &lt;/span&gt;fetch
console.log&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'fetchUser returned:'&lt;/span&gt;, data&lt;span class="o"&gt;)&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c"&gt;# 3. Ver o que tá diferente do esperado&lt;/span&gt;
&lt;span class="c"&gt;# 4. Formar hipótese ("tá chamando duas vezes?")&lt;/span&gt;
&lt;span class="c"&gt;# 5. Validar hipótese (adicionar breakpoint)&lt;/span&gt;
&lt;span class="c"&gt;# 6. Fixar&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Esse flow não sai de prompt do ChatGPT. Vem de repetição.&lt;/p&gt;

&lt;h2&gt;
  
  
  O elefante na sala: vagas
&lt;/h2&gt;

&lt;p&gt;A parte incômoda: empresas de fato precisam de menos juniores agora. Mas se &lt;em&gt;todo mundo&lt;/em&gt; parar de contratar, de onde vêm os seniors de 2030? Não existe dev senior que não foi júnior antes.&lt;/p&gt;

&lt;p&gt;A solução não é romantizar sofrimento ("na minha época fazíamos tudo na mão"). É reconhecer que &lt;strong&gt;aprender a programar é diferente de aprender a usar ferramentas&lt;/strong&gt;. A IA é uma ferramenta absurda. Mas se você nunca aprendeu a programar sem ela, você não programa — você delega.&lt;/p&gt;

&lt;h2&gt;
  
  
  TL;DR
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;IA multiplica produtividade de quem já sabe; não ensina quem não sabe.&lt;/li&gt;
&lt;li&gt;Tasks "chatas" de júnior eram o tutorial do mundo real — e sumiram.&lt;/li&gt;
&lt;li&gt;Copilot gera código correto, mas não te ensina &lt;em&gt;por que&lt;/em&gt; tá correto.&lt;/li&gt;
&lt;li&gt;Sem os bugs de júnior, você não desenvolve reflexos de debug.&lt;/li&gt;
&lt;li&gt;Solução: code review educativo, tasks sem IA, pair programming gravado.&lt;/li&gt;
&lt;li&gt;Se ninguém treina júnior, de onde vêm os seniors de amanhã?&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>tutorial</category>
      <category>beginners</category>
    </item>
    <item>
      <title>IA no desenvolvimento web: de escrever código para orquestrar sistemas</title>
      <dc:creator>Taina Costa</dc:creator>
      <pubDate>Tue, 07 Jul 2026 14:18:12 +0000</pubDate>
      <link>https://dev.to/taina_costa_f/ia-no-desenvolvimento-web-de-escrever-codigo-para-orquestrar-sistemas-2dhf</link>
      <guid>https://dev.to/taina_costa_f/ia-no-desenvolvimento-web-de-escrever-codigo-para-orquestrar-sistemas-2dhf</guid>
      <description>&lt;p&gt;Passei os últimos meses integrando APIs de IA em projetos reais e percebi uma mudança que ninguém está falando: não é sobre substituir desenvolvedores, é sobre mudar fundamentalmente o que a gente faz no dia a dia.&lt;/p&gt;

&lt;h2&gt;
  
  
  O que mudou de verdade
&lt;/h2&gt;

&lt;p&gt;Todo mundo fala de ChatGPT escrevendo código. Mas o que importa mesmo é que agora você pode adicionar capacidades cognitivas nas suas aplicações tão facilmente quanto você adiciona um banco de dados. Precisa classificar texto? Gerar conteúdo? Extrair estrutura de dados não estruturados? Antes você treinava um modelo ou usava regex insanos. Hoje você chama uma API.&lt;/p&gt;

&lt;p&gt;Isso muda o jogo porque você para de escrever lógica complexa e começa a orquestrar comportamentos. É arquitetura, não algoritmo.&lt;/p&gt;

&lt;h2&gt;
  
  
  O padrão que você vai usar toda hora
&lt;/h2&gt;

&lt;p&gt;Aqui está o código que eu mais escrevo ultimamente - uma edge function que pega input do usuário e retorna JSON estruturado:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// app/api/analyze/route.ts&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Anthropic&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@anthropic-ai/sdk&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;POST&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Request&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;content&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;anthropic&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Anthropic&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;apiKey&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;ANTHROPIC_API_KEY&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;

  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;message&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;anthropic&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;messages&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;create&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
    &lt;span class="na"&gt;model&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;claude-3-5-sonnet-20241022&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;max_tokens&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;1024&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;messages&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[{&lt;/span&gt;
      &lt;span class="na"&gt;role&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;user&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="na"&gt;content&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;`Extract key points from this text as JSON with keys: topic, sentiment, actionItems. Text: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;content&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;
    &lt;span class="p"&gt;}]&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;

  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;JSON&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;parse&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;message&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;content&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nx"&gt;text&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;Response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Simples, mas repara: você não escreveu nenhuma lógica de análise. Você descreveu o que queria e a IA fez. Isso funciona para 80% dos casos de processamento de texto que você encontra.&lt;/p&gt;

&lt;h2&gt;
  
  
  Streaming: a parte que ninguém mostra
&lt;/h2&gt;

&lt;p&gt;O problema do código acima? Latência. Modelos de IA demoram. A mágica moderna é streaming - você vai renderizando a resposta conforme ela chega:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;POST&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Request&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;prompt&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;req&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;anthropic&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Anthropic&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;apiKey&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;ANTHROPIC_API_KEY&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;

  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;stream&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;anthropic&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;messages&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;stream&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
    &lt;span class="na"&gt;model&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;claude-3-5-sonnet-20241022&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;max_tokens&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;1024&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;messages&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[{&lt;/span&gt; &lt;span class="na"&gt;role&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;user&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;content&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;prompt&lt;/span&gt; &lt;span class="p"&gt;}]&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;

  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;encoder&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;TextEncoder&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;readable&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;ReadableStream&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
    &lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="nf"&gt;start&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;controller&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="k"&gt;await &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;chunk&lt;/span&gt; &lt;span class="k"&gt;of&lt;/span&gt; &lt;span class="nx"&gt;stream&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;chunk&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;content_block_delta&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="nx"&gt;chunk&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;delta&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;text_delta&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
          &lt;span class="nx"&gt;controller&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;enqueue&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;encoder&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;encode&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;chunk&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;delta&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;text&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
      &lt;span class="p"&gt;}&lt;/span&gt;
      &lt;span class="nx"&gt;controller&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;close&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;

  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Response&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;readable&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;headers&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Content-Type&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;text/plain; charset=utf-8&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;No frontend, você consome com um loop simples:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;fetch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/api/analyze&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;method&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;POST&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;body&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;JSON&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;stringify&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;prompt&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;userInput&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;reader&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;body&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getReader&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;decoder&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;TextDecoder&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="k"&gt;while &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;done&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;value&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;reader&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;read&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;done&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;break&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;text&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;decoder&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;decode&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="nf"&gt;setContent&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;prev&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;prev&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;text&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// React state update&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Isso transforma a experiência. Em vez de spinner por 5 segundos, o usuário vê a resposta se formando. Parece detalhe, mas é a diferença entre "lento" e "mágico".&lt;/p&gt;

&lt;h2&gt;
  
  
  O padrão de composição que você precisa dominar
&lt;/h2&gt;

&lt;p&gt;Aqui está onde fica interessante. Você não chama IA uma vez - você compõe chamadas. Exemplo real que implementei: um sistema de sugestões de código que primeiro analisa o contexto, depois gera sugestões, depois filtra as irrelevantes:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;generateContextualSuggestions&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;code&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;cursor&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// Step 1: Understand context&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;context&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;anthropic&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;messages&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;create&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
    &lt;span class="na"&gt;model&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;claude-3-5-haiku-20241022&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="c1"&gt;// fast model for analysis&lt;/span&gt;
    &lt;span class="na"&gt;max_tokens&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;512&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;messages&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[{&lt;/span&gt;
      &lt;span class="na"&gt;role&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;user&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="na"&gt;content&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;`What is the user trying to do at cursor position &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;cursor&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;? Code: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;code&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;
    &lt;span class="p"&gt;}]&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;

  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;intent&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;JSON&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;parse&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;context&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;content&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nx"&gt;text&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="c1"&gt;// Step 2: Generate suggestions based on intent&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;suggestions&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;anthropic&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;messages&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;create&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
    &lt;span class="na"&gt;model&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;claude-3-5-sonnet-20241022&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="c1"&gt;// powerful model for generation&lt;/span&gt;
    &lt;span class="na"&gt;max_tokens&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;2048&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;messages&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[{&lt;/span&gt;
      &lt;span class="na"&gt;role&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;user&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="na"&gt;content&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;`Generate 5 code completions for: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;intent&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;description&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;
    &lt;span class="p"&gt;}]&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;

  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;suggestions&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;content&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nx"&gt;text&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Repara que usei Haiku para análise (mais rápido, mais barato) e Sonnet para geração (mais capaz). Você orquestra modelos diferentes para partes diferentes do problema. É como escolher entre PostgreSQL e Redis - cada ferramenta tem seu uso.&lt;/p&gt;

&lt;h2&gt;
  
  
  Os problemas que você vai enfrentar
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Custo&lt;/strong&gt;. Cada chamada custa dinheiro. Você precisa cachear agressivamente. Eu uso um padrão simples: hash do input como chave de cache, TTL de 24h para respostas determinísticas:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;cacheKey&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;createHash&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;sha256&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;update&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;content&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;digest&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;hex&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;cached&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;redis&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;cacheKey&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;cached&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;JSON&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;parse&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;cached&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// ... make API call ...&lt;/span&gt;

&lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;redis&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;setex&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;cacheKey&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;86400&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;JSON&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;stringify&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Latência&lt;/strong&gt;. Mesmo com streaming, é mais lento que lógica tradicional. Use IA para o que humanos fariam devagar (análise de contexto, geração criativa), não para o que código faz rápido (validação, cálculos).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Consistência&lt;/strong&gt;. LLMs não são determinísticos. Se você precisa de output previsível toda vez, passe &lt;code&gt;temperature: 0&lt;/code&gt; e valide o schema da resposta:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;JSON&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;parse&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;topic&lt;/span&gt; &lt;span class="o"&gt;||&lt;/span&gt; &lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nb"&gt;Array&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;isArray&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;actionItems&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;throw&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Invalid response format&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  O que isso significa para você
&lt;/h2&gt;

&lt;p&gt;Seu trabalho está mudando de "implementar algoritmos" para "desenhar fluxos". Você vai passar mais tempo decidindo quando usar IA (caro, lento, flexível) vs quando usar código tradicional (barato, rápido, rígido).&lt;/p&gt;

&lt;p&gt;A skill que importa agora é arquitetura de sistemas: saber decompor problemas, escolher as ferramentas certas para cada parte, e fazer tudo funcionar junto. O código em si? Cada vez menos importante.&lt;/p&gt;

&lt;p&gt;Não é sobre IA escrever seu código. É sobre você usar IA como mais uma ferramenta na stack - junto com banco de dados, cache, filas, e tudo mais que você já orquestra.&lt;/p&gt;

&lt;h2&gt;
  
  
  TL;DR
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;IA em produção não é sobre substituir devs, é adicionar capacidades cognitivas via API&lt;/li&gt;
&lt;li&gt;O padrão fundamental: edge function + LLM API + streaming para UX fluida&lt;/li&gt;
&lt;li&gt;Componha múltiplas chamadas com modelos diferentes (rápido vs poderoso) para cada etapa&lt;/li&gt;
&lt;li&gt;Cache agressivo, valide schemas, use &lt;code&gt;temperature: 0&lt;/code&gt; quando precisar de consistência&lt;/li&gt;
&lt;li&gt;Seu trabalho está virando orquestração de sistemas, não escrita de algoritmos&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>tutorial</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Legacy code não envelhece como vinho: quanto mais espera, pior fica</title>
      <dc:creator>Taina Costa</dc:creator>
      <pubDate>Wed, 24 Jun 2026 15:35:46 +0000</pubDate>
      <link>https://dev.to/taina_costa_f/legacy-code-nao-envelhece-como-vinho-quanto-mais-espera-pior-fica-132h</link>
      <guid>https://dev.to/taina_costa_f/legacy-code-nao-envelhece-como-vinho-quanto-mais-espera-pior-fica-132h</guid>
      <description>&lt;p&gt;Semana passada eu passei três horas debugando um bug que deveria levar 20 minutos. O problema? Um módulo de validação escrito em 2019 que ninguém mexe "porque funciona". Spoiler: não funcionava mais, e quando finalmente abri o arquivo, encontrei um &lt;code&gt;// TODO: refactor this&lt;/code&gt; datado de 2020.&lt;/p&gt;

&lt;h2&gt;
  
  
  Por que legacy vira bola de neve
&lt;/h2&gt;

&lt;p&gt;A indústria trata código legado como se fosse dívida técnica opcional — algo que você paga "quando tiver tempo". Mas código legado se comporta mais como mofo: se espalha, contamina áreas adjacentes, e quanto mais você ignora, mais cara fica a limpeza.&lt;/p&gt;

&lt;p&gt;O ciclo é previsível: você herda um projeto ou feature antiga, vê que está "meio bagunçado mas roda", adiciona sua feature com um &lt;code&gt;if&lt;/code&gt; a mais, e segue em frente. Seis meses depois, outra pessoa faz o mesmo. Um ano depois, aquele arquivo tem 800 linhas, cinco níveis de &lt;code&gt;if&lt;/code&gt; aninhados, e zero testes. Ninguém mais entende o fluxo completo, então cada mudança vira uma sessão de especulação: "se eu mexer aqui, quebra ali?"&lt;/p&gt;

&lt;h2&gt;
  
  
  O custo real de esperar
&lt;/h2&gt;

&lt;p&gt;Esse código "que funciona" tem um custo oculto que aparece em três formas:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Velocidade de desenvolvimento despenca.&lt;/strong&gt; Features que deveriam levar dois dias levam uma semana porque você passa mais tempo entendendo o contexto do que escrevendo código novo.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Bugs aumentam exponencialmente.&lt;/strong&gt; Código sem testes e com lógica embolada é um gerador de regressões. Você corrige um edge case e quebra outro que nem sabia que existava.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Onboarding vira tortura.&lt;/strong&gt; Novo dev no time? Boa sorte explicando por que aquele service tem três formas diferentes de fazer autenticação, ou por que a mesma validação está copiada em sete lugares.&lt;/p&gt;

&lt;h2&gt;
  
  
  Sinais de que você está sentado em cima de uma bomba
&lt;/h2&gt;

&lt;p&gt;Nem todo código antigo é legacy tóxico. Aqui estão os red flags que indicam que você precisa agir agora:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Red flag #1: comentários mentirosos ou inúteis&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;processPayment&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;order&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// Process the payment&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;user&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;order&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;  &lt;span class="c1"&gt;// TODO: fix this later&lt;/span&gt;

  &lt;span class="c1"&gt;// HACK: don't touch this, breaks prod&lt;/span&gt;
  &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;country&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;BR&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// ...&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// Red flag #2: lógica de negócio duplicada&lt;/span&gt;
&lt;span class="c1"&gt;// arquivo A&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;validCPF&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;cpf&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;cpf&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="mi"&gt;11&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="sr"&gt;/^&lt;/span&gt;&lt;span class="se"&gt;\d&lt;/span&gt;&lt;span class="sr"&gt;+$/&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;test&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;cpf&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// arquivo B (outro módulo)&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;isCPFValid&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;doc&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;doc&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;replace&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="se"&gt;\D&lt;/span&gt;&lt;span class="sr"&gt;/g&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;''&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="mi"&gt;11&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;// arquivo C (mais outro)&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;checkCPF&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;match&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="se"&gt;\d{11}&lt;/span&gt;&lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;!==&lt;/span&gt; &lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// Red flag #3: dependências circulares e acoplamento absurdo&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;UserService&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./user&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;OrderService&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./order&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="c1"&gt;// OrderService importa UserService&lt;/span&gt;
&lt;span class="c1"&gt;// UserService importa OrderService&lt;/span&gt;
&lt;span class="c1"&gt;// Ambos importam shared state global&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Se você leu esse código e pensou "isso parece familiar", você já está pagando juros.&lt;/p&gt;

&lt;h2&gt;
  
  
  Estratégia incremental: você não precisa reescrever tudo
&lt;/h2&gt;

&lt;p&gt;A boa notícia: você não precisa parar o mundo para arrumar legacy. Reescritas completas falham 80% das vezes porque você gasta seis meses reconstruindo funcionalidade existente enquanto o negócio continua pedindo features novas.&lt;/p&gt;

&lt;p&gt;A abordagem que funciona é &lt;strong&gt;refactoring incremental com testes de caracterização&lt;/strong&gt;. A ideia é:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Capture o comportamento atual (mesmo que estranho) em testes&lt;/li&gt;
&lt;li&gt;Refatore sem mudar comportamento&lt;/li&gt;
&lt;li&gt;Repita até o código ficar legível&lt;/li&gt;
&lt;li&gt;Só então mude comportamento, com testes reais&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Exemplo prático. Você tem esse monstro:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;calculateTotal&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;items&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;coupon&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;total&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;items&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;items&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nx"&gt;category&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;book&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;total&lt;/span&gt; &lt;span class="o"&gt;+=&lt;/span&gt; &lt;span class="nx"&gt;items&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nx"&gt;price&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mf"&gt;0.9&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;total&lt;/span&gt; &lt;span class="o"&gt;+=&lt;/span&gt; &lt;span class="nx"&gt;items&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nx"&gt;price&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;isPremium&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;total&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;total&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mf"&gt;0.95&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;coupon&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="nx"&gt;coupon&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;valid&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;total&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;total&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;coupon&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;total&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Primeiro, você &lt;strong&gt;captura o comportamento atual&lt;/strong&gt; com testes de caracterização:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nf"&gt;describe&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;calculateTotal (caracterização)&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;it&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;aplica 10% desconto em livros&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;items&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[{&lt;/span&gt; &lt;span class="na"&gt;category&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;book&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;price&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;100&lt;/span&gt; &lt;span class="p"&gt;}];&lt;/span&gt;
    &lt;span class="nf"&gt;expect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;calculateTotal&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;items&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{},&lt;/span&gt; &lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;)).&lt;/span&gt;&lt;span class="nf"&gt;toBe&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;90&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;

  &lt;span class="nf"&gt;it&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;aplica desconto premium antes de coupon&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;items&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[{&lt;/span&gt; &lt;span class="na"&gt;category&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;other&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;price&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;100&lt;/span&gt; &lt;span class="p"&gt;}];&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;user&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;isPremium&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;coupon&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;valid&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;value&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;
    &lt;span class="c1"&gt;// 100 * 0.95 - 10 = 85 (não 90 * 0.95)&lt;/span&gt;
    &lt;span class="nf"&gt;expect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;calculateTotal&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;items&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;coupon&lt;/span&gt;&lt;span class="p"&gt;)).&lt;/span&gt;&lt;span class="nf"&gt;toBe&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;85&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Esses testes documentam bugs e edge cases que você nem sabia que existiam (tipo a ordem de aplicação dos descontos). Agora você pode refatorar com segurança:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;applyBookDiscount&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;price&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;price&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mf"&gt;0.9&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;applyPremiumDiscount&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;total&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;total&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mf"&gt;0.95&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;applyCoupon&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;total&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;coupon&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; 
  &lt;span class="nx"&gt;coupon&lt;/span&gt;&lt;span class="p"&gt;?.&lt;/span&gt;&lt;span class="nx"&gt;valid&lt;/span&gt; &lt;span class="p"&gt;?&lt;/span&gt; &lt;span class="nx"&gt;total&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;coupon&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;total&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;calculateTotal&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;items&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;coupon&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;subtotal&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;items&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;reduce&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;sum&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;price&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;category&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;book&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; 
      &lt;span class="p"&gt;?&lt;/span&gt; &lt;span class="nf"&gt;applyBookDiscount&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;price&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
      &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;price&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;sum&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;price&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;total&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;isPremium&lt;/span&gt; 
    &lt;span class="p"&gt;?&lt;/span&gt; &lt;span class="nf"&gt;applyPremiumDiscount&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;subtotal&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;subtotal&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nf"&gt;applyCoupon&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;total&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;coupon&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Os testes continuam passando, mas agora o código é legível e as funções são reutilizáveis. Você pode até descobrir bugs (tipo aquela ordem de desconto esquisita) e decidir se corrige agora ou documenta como comportamento legado intencional.&lt;/p&gt;

&lt;h2&gt;
  
  
  Caveats: quando NÃO mexer
&lt;/h2&gt;

&lt;p&gt;Refatorar legacy tem armadilhas:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Não refatore sem testes.&lt;/strong&gt; Se você não consegue escrever testes de caracterização porque o código é intratável (muitos side effects, dependências globais), primeiro isole a lógica. Extraia funções puras antes de tentar refatorar a orquestração.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Cuidado com "melhorias" que mudam comportamento.&lt;/strong&gt; Aquele bug pode ser uma feature não documentada que algum cliente depende. Se não tem teste cobrindo, não mude.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Legacy que ninguém toca pode ficar quieto.&lt;/strong&gt; Se é um módulo que não mudou em três anos e não causa problemas, deixa lá. Foque em código que você precisa mexer frequentemente.&lt;/p&gt;

&lt;h2&gt;
  
  
  TL;DR
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Código legado piora exponencialmente: cada mudança sem refactor aumenta complexidade e risco&lt;/li&gt;
&lt;li&gt;Red flags: comentários inúteis, lógica duplicada, dependências circulares, zero testes&lt;/li&gt;
&lt;li&gt;Não reescreva tudo: use refactoring incremental com testes de caracterização&lt;/li&gt;
&lt;li&gt;Capture comportamento atual primeiro, refatore sem mudar semântica, depois melhore&lt;/li&gt;
&lt;li&gt;Não mexa em código que está quieto e não incomoda&lt;/li&gt;
&lt;li&gt;Quanto mais espera, mais caro fica — escolha suas batalhas, mas não ignore todas&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>tutorial</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Por que todo dev deveria participar de um writing challenge (e como vencer)</title>
      <dc:creator>Taina Costa</dc:creator>
      <pubDate>Tue, 16 Jun 2026 18:28:37 +0000</pubDate>
      <link>https://dev.to/taina_costa_f/por-que-todo-dev-deveria-participar-de-um-writing-challenge-e-como-vencer-459c</link>
      <guid>https://dev.to/taina_costa_f/por-que-todo-dev-deveria-participar-de-um-writing-challenge-e-como-vencer-459c</guid>
      <description>&lt;p&gt;Acabei de ver os vencedores do Google I/O 2026 Writing Challenge no dev.to. Enquanto scrollava os artigos premiados, percebi um padrão: os que ganharam não são necessariamente os devs mais seniors ou com mais seguidores — são os que sabem transformar conceitos complexos em narrativas que grudam na cabeça.&lt;/p&gt;

&lt;h2&gt;
  
  
  Por que writing challenges importam agora
&lt;/h2&gt;

&lt;p&gt;O mercado está saturado de tutoriais genéricos gerados por IA. Documentação oficial melhorou muito, mas ainda falta o "como eu uso isso &lt;em&gt;de verdade&lt;/em&gt;". Challenges de escrita forçam você a:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Provar que entende o que está usando (não dá pra enrolar)&lt;/li&gt;
&lt;li&gt;Construir portfólio público (recrutadores leem, sim)&lt;/li&gt;
&lt;li&gt;Solidificar conhecimento — você só entende de verdade quando consegue explicar&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Três devs da minha timeline conseguiram job offers depois de artigos viralizarem. Não é sobre viralizar, mas sobre demonstrar que você pensa, não só copia.&lt;/p&gt;

&lt;h2&gt;
  
  
  O que funciona (com exemplos reais)
&lt;/h2&gt;

&lt;p&gt;Analisei 15 artigos vencedores de challenges anteriores. O padrão:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Estrutura vencedora:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight markdown"&gt;&lt;code&gt;&lt;span class="gh"&gt;# Título: promessa específica, não vaga&lt;/span&gt;
"Como evitei 3 horas de debug com React DevTools"
vs
"Guia completo de React DevTools" ❌

&lt;span class="gu"&gt;## Problema real primeiro&lt;/span&gt;
Mostre o erro, o stack trace, a dor.

&lt;span class="gu"&gt;## Solução progressiva&lt;/span&gt;
Do jeito errado → melhor → ideal
Cada passo explica &lt;span class="ge"&gt;*por que*&lt;/span&gt;, não só &lt;span class="ge"&gt;*como*&lt;/span&gt;

&lt;span class="gu"&gt;## Code que roda&lt;/span&gt;
Sem &lt;span class="sb"&gt;`// ... resto do código`&lt;/span&gt;
Sem &lt;span class="sb"&gt;`import { magicFunction } from 'somewhere'`&lt;/span&gt;

&lt;span class="gu"&gt;## TL;DR brutal&lt;/span&gt;
3-5 bullets, zero fluff
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Exemplo prático — antes vs depois:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Antes (genérico):&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Use async/await para chamadas assíncronas&lt;/span&gt;
&lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;getData&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;fetch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/api/data&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Depois (mostra o problema real):&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// ❌ Isso quebra silenciosamente em prod quando a API retorna 404&lt;/span&gt;
&lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;getData&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;fetch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/api/data&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// TypeError se response.ok === false&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// ✅ Agora você sabe *quando* explode&lt;/span&gt;
&lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;getData&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;fetch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/api/data&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;ok&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;throw&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`API error: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;status&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Comentários em código ficam em inglês (padrão da indústria), mas a explicação ao redor é pt-BR.&lt;/p&gt;

&lt;h2&gt;
  
  
  Armadilhas que matam suas chances
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;1. Code sem contexto&lt;/strong&gt;&lt;br&gt;
Você colou um snippet de 50 linhas sem explicar o setup. Ninguém vai copiar pro projeto deles só pra testar se funciona.&lt;/p&gt;

&lt;p&gt;Solução: crie um repo mínimo ou use CodeSandbox/StackBlitz embeddable. Link no artigo.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. "Aqui está tudo sobre X"&lt;/strong&gt;&lt;br&gt;
Artigos que tentam cobrir tudo ficam superficiais. Melhor: pegue UM caso de uso, vá fundo.&lt;/p&gt;

&lt;p&gt;Exemplo:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;❌ "Guia completo de React Hooks"&lt;/li&gt;
&lt;li&gt;✅ "useCallback está te deixando mais lento — veja quando NÃO usar"&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;3. Escrever pra impressionar, não pra ensinar&lt;/strong&gt;&lt;br&gt;
Jargão técnico sem necessidade. Abstrações sem exemplo concreto. Se você precisa de 3 parágrafos pra chegar no código, corte 2.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;4. Ignorar o "por que agora"&lt;/strong&gt;&lt;br&gt;
Challenges normalmente pedem artigos sobre features recentes. Se você escrever sobre React Server Components, tem que mencionar:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Por que isso existe (Suspense, data fetching, bundle size)&lt;/li&gt;
&lt;li&gt;O que mudou da última versão&lt;/li&gt;
&lt;li&gt;Quando você &lt;em&gt;não&lt;/em&gt; deve usar&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Como eu abordo um writing challenge
&lt;/h2&gt;

&lt;p&gt;Meu processo quando decido participar:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Leio a documentação oficial da feature + issues no GitHub&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Issues revelam dores reais, edge cases, o que confunde as pessoas.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Reproduzo o problema antes da solução&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Crio um repo pequeno, quebro tudo, documento cada erro. Isso vira a primeira seção do artigo.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Escrevo o TL;DR primeiro&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Se não consigo resumir em 5 bullets, o artigo não tem foco suficiente.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Code funcional, sempre&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Testo cada snippet. Se não roda standalone, adiciono o setup mínimo. &lt;code&gt;npm create vite@latest&lt;/code&gt;, instala dependências, mostra onde colar o código.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Releio como se fosse um dev com pressa&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Você tem 2 minutos antes da daily. O artigo resolve seu problema ou você fecha a aba?&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Ferramentas que uso
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Grammarly&lt;/strong&gt; (tem versão pt-BR) pra pegar typos que passam no revisor&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Carbon&lt;/strong&gt; ou &lt;strong&gt;ray.so&lt;/strong&gt; pra screenshots de código bonitinhos&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Excalidraw&lt;/strong&gt; pra diagramas rápidos quando preciso explicar fluxo&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;StackBlitz&lt;/strong&gt; pra embeds interativos — leitor testa sem sair do artigo&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  TL;DR
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Challenges premiam clareza + código funcional, não firulas&lt;/li&gt;
&lt;li&gt;Estrutura vencedora: problema real → código progressivo → caveats&lt;/li&gt;
&lt;li&gt;Uma ideia funda &amp;gt; dez ideias rasas&lt;/li&gt;
&lt;li&gt;Code sem contexto de setup = artigo que ninguém usa&lt;/li&gt;
&lt;li&gt;TL;DR no final (estilo este) fecha bem e facilita skimming&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>tutorial</category>
      <category>beginners</category>
    </item>
    <item>
      <title>webMCP: você vai anotar HTML para agentes de IA</title>
      <dc:creator>Taina Costa</dc:creator>
      <pubDate>Tue, 09 Jun 2026 16:32:38 +0000</pubDate>
      <link>https://dev.to/taina_costa_f/webmcp-voce-vai-anotar-html-para-agentes-de-ia-257a</link>
      <guid>https://dev.to/taina_costa_f/webmcp-voce-vai-anotar-html-para-agentes-de-ia-257a</guid>
      <description>&lt;p&gt;Há alguns anos, você adaptou seu site para mobile. Depois, para acessibilidade. Agora o Google está sugerindo que você adapte para agentes de IA — e o webMCP (Web Model Context Protocol) é a proposta experimental que pode mudar como construímos interfaces para serem consumidas por LLMs.&lt;/p&gt;

&lt;h2&gt;
  
  
  O problema que resolve
&lt;/h2&gt;

&lt;p&gt;Quando um agente de IA tenta usar um site hoje, ele faz o mesmo que um usuário humano: inspeciona o DOM, tenta adivinhar o que cada botão faz, clica, analisa o resultado, repete. Essa dança custosa desperdiça tokens e é pouco confiável — um layout redesenhado pode quebrar toda a lógica do agente.&lt;/p&gt;

&lt;p&gt;O webMCP inverte essa lógica: em vez de forçar o agente a &lt;em&gt;deduzir&lt;/em&gt; o que é possível fazer, você &lt;em&gt;declara&lt;/em&gt; diretamente no HTML ou via JavaScript.&lt;/p&gt;

&lt;h2&gt;
  
  
  Como funciona (versão declarativa)
&lt;/h2&gt;

&lt;p&gt;Você anota seus elementos com metadados que descrevem a intenção, não só a aparência:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;button&lt;/span&gt; 
  &lt;span class="na"&gt;data-mcp-action=&lt;/span&gt;&lt;span class="s"&gt;"checkout"&lt;/span&gt; 
  &lt;span class="na"&gt;data-mcp-params=&lt;/span&gt;&lt;span class="s"&gt;'{"cartId": "abc123"}'&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
  Finalizar compra
&lt;span class="nt"&gt;&amp;lt;/button&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;O agente lê a anotação, entende que aquele botão dispara uma ação de checkout com o parâmetro &lt;code&gt;cartId&lt;/code&gt;, e interage diretamente — sem precisar interpretar CSS ou localização visual.&lt;/p&gt;

&lt;p&gt;Pense nisso como ARIA para agentes: você já adiciona &lt;code&gt;role="button"&lt;/code&gt; e &lt;code&gt;aria-label&lt;/code&gt; para screen readers; webMCP é o mesmo conceito estendido para LLMs.&lt;/p&gt;

&lt;h2&gt;
  
  
  Versão imperativa (JavaScript)
&lt;/h2&gt;

&lt;p&gt;Se você prefere controle programático, pode registrar ferramentas (tools) via MCP:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nb"&gt;window&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;mcp&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;registerTool&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;hireDevelopers&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;description&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Contrata desenvolvedores para o time&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;parameters&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;count&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;number&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;skills&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;string[]&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="na"&gt;handler&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;skills&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// lógica de contratação&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;hired&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;roles&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;skills&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;O agente descobre as tools disponíveis, lê os schemas, e chama as funções diretamente — sem clicar em nada.&lt;/p&gt;

&lt;h2&gt;
  
  
  O que muda na prática
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Antes:&lt;/strong&gt; você escreve testes E2E com Playwright que simulam cliques. O agente faz a mesma coisa, mas sem os testes salvos.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Depois:&lt;/strong&gt; você expõe um contrato explícito de ações possíveis. O agente consome esse contrato como consumiria uma REST API.&lt;/p&gt;

&lt;p&gt;A diferença é menos sobre &lt;em&gt;capacidade&lt;/em&gt; nova e mais sobre &lt;em&gt;confiabilidade&lt;/em&gt; e &lt;em&gt;custo&lt;/em&gt;. Um agente que lê anotações usa 10× menos tokens do que um que precisa fazer scraping visual.&lt;/p&gt;

&lt;h2&gt;
  
  
  Caveats
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Experimental&lt;/strong&gt;: só funciona no Chrome Canary/Beta com flags habilitadas. Não é standard da web (ainda).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Manutenção dupla&lt;/strong&gt;: você vai manter UI para humanos + anotações para agentes. Isso pode ficar fora de sincronia.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Segurança&lt;/strong&gt;: expor actions via MCP é expor superfície de ataque. Validação de entrada vira ainda mais crítica.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Adoção&lt;/strong&gt;: se só o Google empurrar isso, pode morrer na praia. Web standards exigem consenso.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Quando vale a pena
&lt;/h2&gt;

&lt;p&gt;Se você já tem uma aplicação que seria útil para agentes (dashboards, admin panels, ferramentas internas), adicionar webMCP pode torná-la consumível por LLMs sem construir uma API separada.&lt;/p&gt;

&lt;p&gt;Se você está começando um produto novo voltado para automação, considere desenhar com anotações MCP desde o início — especialmente se o use case inclui usuários técnicos que vão querer scripting.&lt;/p&gt;

&lt;h2&gt;
  
  
  TL;DR
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;webMCP&lt;/strong&gt; permite que sites declarem suas ações possíveis via HTML ou JS, em vez de forçar agentes a adivinhar clicando.&lt;/li&gt;
&lt;li&gt;Funciona como progressive enhancement: usuários humanos não veem diferença, agentes ganham um contrato explícito.&lt;/li&gt;
&lt;li&gt;Reduz custo de tokens e aumenta confiabilidade quando LLMs interagem com seu site.&lt;/li&gt;
&lt;li&gt;Ainda experimental (Chrome Canary), mas sinaliza um futuro onde "otimizar para IA" vira padrão, assim como mobile e acessibilidade.&lt;/li&gt;
&lt;li&gt;Vale considerar se seu produto já é target de automação ou scraping por agentes.&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>tutorial</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Game Jams no Browser: Você Não Precisa de Unity</title>
      <dc:creator>Taina Costa</dc:creator>
      <pubDate>Mon, 08 Jun 2026 12:32:18 +0000</pubDate>
      <link>https://dev.to/taina_costa_f/game-jams-no-browser-voce-nao-precisa-de-unity-2n0f</link>
      <guid>https://dev.to/taina_costa_f/game-jams-no-browser-voce-nao-precisa-de-unity-2n0f</guid>
      <description>&lt;p&gt;Se você já fez algum front-end interativo, já tem 80% do que precisa pra fazer um jogo simples. Game jams como a June Solstice são desculpa perfeita pra testar isso — três semanas, tema aberto, e você descobre que canvas + requestAnimationFrame levam longe.&lt;/p&gt;

&lt;h2&gt;
  
  
  Por Que Desenvolvedores Web Deviam Fazer Game Jams
&lt;/h2&gt;

&lt;p&gt;A maioria dos devs que conheço nunca tentou fazer um jogo porque acha que precisa aprender Unity ou Unreal. Mas se você já mexeu com animações CSS, state management ou physics simulators básicos pra UI, você já cruzou metade da ponte. Game jams forçam escopo pequeno — você não vai fazer Elden Ring em três semanas, vai fazer um Snake com twist. E isso cabe perfeitamente no que o browser oferece.&lt;/p&gt;

&lt;p&gt;Além disso, jogos web rodam em qualquer lugar. Sem instalador, sem App Store review, sem build pra cinco plataformas. Você manda um link e qualquer um joga. Pra um jam onde o pessoal precisa testar dezenas de jogos rápido, isso importa.&lt;/p&gt;

&lt;h2&gt;
  
  
  Canvas API: Seu Motor Gráfico Embutido
&lt;/h2&gt;

&lt;p&gt;O &lt;code&gt;&amp;lt;canvas&amp;gt;&lt;/code&gt; existe desde 2010 e faz exatamente o que você precisa: desenhar pixels, shapes e imagens num loop de 60fps. A estrutura básica de qualquer jogo 2D cabe em 30 linhas:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;canvas&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;querySelector&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;canvas&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;ctx&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;canvas&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getContext&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;2d&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;gameState&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;player&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;x&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;50&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;y&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;50&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;speed&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="na"&gt;enemies&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[]&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;update&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;deltaTime&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// Input handling&lt;/span&gt;
  &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;keys&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;ArrowRight&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt; &lt;span class="nx"&gt;gameState&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;player&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;x&lt;/span&gt; &lt;span class="o"&gt;+=&lt;/span&gt; &lt;span class="nx"&gt;gameState&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;player&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;speed&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;keys&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;ArrowLeft&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt; &lt;span class="nx"&gt;gameState&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;player&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;x&lt;/span&gt; &lt;span class="o"&gt;-=&lt;/span&gt; &lt;span class="nx"&gt;gameState&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;player&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;speed&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="c1"&gt;// Game logic&lt;/span&gt;
  &lt;span class="nx"&gt;gameState&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;enemies&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;forEach&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;enemy&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;enemy&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;x&lt;/span&gt; &lt;span class="o"&gt;+=&lt;/span&gt; &lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;sin&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nb"&gt;Date&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;now&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;/&lt;/span&gt; &lt;span class="mi"&gt;1000&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mf"&gt;0.5&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;render&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;ctx&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;clearRect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;canvas&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;width&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;canvas&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;height&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="c1"&gt;// Draw player&lt;/span&gt;
  &lt;span class="nx"&gt;ctx&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;fillStyle&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;#00ff00&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nx"&gt;ctx&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;fillRect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;gameState&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;player&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;x&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;gameState&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;player&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;y&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;20&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;20&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="c1"&gt;// Draw enemies&lt;/span&gt;
  &lt;span class="nx"&gt;gameState&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;enemies&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;forEach&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;enemy&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;ctx&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;fillStyle&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;#ff0000&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nx"&gt;ctx&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;fillRect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;enemy&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;x&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;enemy&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;y&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;15&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;15&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;lastTime&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;gameLoop&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;currentTime&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;deltaTime&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;currentTime&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;lastTime&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nx"&gt;lastTime&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;currentTime&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="nf"&gt;update&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;deltaTime&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="nf"&gt;render&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="nf"&gt;requestAnimationFrame&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;gameLoop&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nf"&gt;requestAnimationFrame&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;gameLoop&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Esse padrão — &lt;code&gt;update()&lt;/code&gt; pra lógica, &lt;code&gt;render()&lt;/code&gt; pra desenho, &lt;code&gt;gameLoop()&lt;/code&gt; amarrando tudo — é o mesmo de engines profissionais. A diferença é escala, não conceito.&lt;/p&gt;

&lt;h2&gt;
  
  
  Colisões e Física Sem Biblioteca
&lt;/h2&gt;

&lt;p&gt;A parte que pega mais gente é detecção de colisão. Mas pra um jogo simples tipo jam, AABB (Axis-Aligned Bounding Box) resolve 90% dos casos:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;checkCollision&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;rectA&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;rectB&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;rectA&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;x&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;rectB&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;x&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;rectB&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;width&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt;
         &lt;span class="nx"&gt;rectA&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;x&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;rectA&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;width&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;rectB&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;x&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt;
         &lt;span class="nx"&gt;rectA&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;y&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;rectB&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;y&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;rectB&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;height&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt;
         &lt;span class="nx"&gt;rectA&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;y&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;rectA&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;height&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;rectB&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;y&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// No update()&lt;/span&gt;
&lt;span class="nx"&gt;gameState&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;enemies&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;forEach&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;enemy&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;checkCollision&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;gameState&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;player&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;enemy&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;gameState&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;lives&lt;/span&gt; &lt;span class="o"&gt;-=&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nx"&gt;enemy&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;x&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// Remove offscreen&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Física básica também é só Newton. Quer gravidade? &lt;code&gt;player.velocityY += 0.5; player.y += player.velocityY;&lt;/code&gt;. Quer bounce? Inverte a velocidade quando bater no chão. Você não precisa de Box2D pra um platformer de jam.&lt;/p&gt;

&lt;h2&gt;
  
  
  Quando Usar um Framework
&lt;/h2&gt;

&lt;p&gt;Canvas puro é divertido pra aprender, mas se você quer algo mais sólido, Phaser 3 é o meio-termo perfeito. Ele abstrai o canvas mas te deixa no controle:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;Phaser&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;phaser&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;GameScene&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nc"&gt;Phaser&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;Scene&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;create&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;player&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;physics&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;add&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;sprite&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;player&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;cursors&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;input&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;keyboard&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;createCursorKeys&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="nf"&gt;update&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;cursors&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;left&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;isDown&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;player&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;setVelocityX&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;160&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;cursors&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;right&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;isDown&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;player&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;setVelocityX&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;160&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;player&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;setVelocityX&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;config&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Phaser&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;AUTO&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;width&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;800&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;height&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;600&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;physics&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;default&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;arcade&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="na"&gt;scene&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;GameScene&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;Phaser&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;Game&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;config&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Phaser dá física de graça, sprite sheets, tilemaps, tween animations. Você pula as 200 linhas de boilerplate e vai direto pro gameplay. Pra um jam de três semanas, isso é a diferença entre terminar e não terminar.&lt;/p&gt;

&lt;h2&gt;
  
  
  Caveats que Aprendi na Prática
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Performance:&lt;/strong&gt; Canvas 2D aguenta uns 1000 sprites antes de engasgar. Se você precisa de mais, WebGL direto ou PixiJS. Mas honestamente, se o seu jogo de jam tem mil objetos na tela, o problema não é técnico — é design.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Mobile:&lt;/strong&gt; Touch events não mapeiam direto pra teclado. Você vai precisar de botões virtuais ou gestures. E testa no celular cedo — Chrome DevTools não mostra quão lento o seu loop roda num Android médio.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Asset pipeline:&lt;/strong&gt; Não existe importador automático de sprites. Você carrega tudo na mão (&lt;code&gt;new Image()&lt;/code&gt;). Dá pra fazer um loader simples com Promises, mas se você tem muitos assets, Phaser ou uma build tool que processa imagens salva tempo.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Audio:&lt;/strong&gt; &lt;code&gt;&amp;lt;audio&amp;gt;&lt;/code&gt; funciona, mas latência mata jogos de ritmo. Web Audio API é mais complexa mas necessária se timing importa. Ou usa Howler.js e não pensa nisso.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Não reinvente tudo:&lt;/strong&gt; Se você nunca fez um jogo, copie a estrutura de um exemplo de Phaser e ajuste. Jams recompensam execução, não pureza arquitetural. Você pode refatorar depois se quiser continuar o projeto.&lt;/p&gt;

&lt;h2&gt;
  
  
  TL;DR
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Desenvolvedores web já sabem o suficiente pra fazer jogos 2D simples — Canvas + game loop é tudo.&lt;/li&gt;
&lt;li&gt;AABB collision detection resolve a maioria dos casos sem física engine.&lt;/li&gt;
&lt;li&gt;Canvas puro ensina os fundamentos; Phaser 3 acelera produção sem esconder a mecânica.&lt;/li&gt;
&lt;li&gt;Performance de Canvas 2D é boa até ~1000 sprites; depois disso, WebGL.&lt;/li&gt;
&lt;li&gt;Game jams são escopo perfeito pra testar: três semanas, um mechanic core, ship algo jogável.&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>tutorial</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Spoiler: escrever código é só 20% do trabalho</title>
      <dc:creator>Taina Costa</dc:creator>
      <pubDate>Wed, 03 Jun 2026 16:03:33 +0000</pubDate>
      <link>https://dev.to/taina_costa_f/spoiler-escrever-codigo-e-so-20-do-trabalho-3ak</link>
      <guid>https://dev.to/taina_costa_f/spoiler-escrever-codigo-e-so-20-do-trabalho-3ak</guid>
      <description>&lt;p&gt;Lembro da minha primeira semana como dev. Tinha acabado de ganhar meu primeiro freela, estava terminando a faculdade, me sentindo pronta. Pensei: "agora sim, vou passar o dia inteiro escrevendo código bonito". Duas semanas depois, percebi que tinha passado mais tempo no Slack, no Figma e no Google Docs do que no VS Code. E isso me deixou meio perdida — será que eu estava fazendo algo errado?&lt;/p&gt;

&lt;h2&gt;
  
  
  Por que ninguém te prepara pra isso
&lt;/h2&gt;

&lt;p&gt;Os bootcamps e a faculdade ensinam algoritmos, estruturas de dados, frameworks. Você sai achando que o trabalho é: pegar uma task, abrir o editor, codar, commitar, próxima task. Mas a realidade é outra. Você gasta tempo entendendo &lt;strong&gt;por que&lt;/strong&gt; aquele botão precisa existir, discutindo se a API deve retornar um array ou um objeto, explicando pra PM por que aquela feature vai levar 3 sprints e não 2 dias. O código é quase uma consequência — a parte final de um processo que começa muito antes de você abrir o arquivo.&lt;/p&gt;

&lt;p&gt;E não é que você esteja fazendo errado. É que o trabalho mudou, e ninguém atualiza a descrição da vaga.&lt;/p&gt;

&lt;h2&gt;
  
  
  A anatomia real de uma task
&lt;/h2&gt;

&lt;p&gt;Pega uma feature qualquer. Vou usar um exemplo que vivi: "adicionar filtro de data no dashboard de vendas". Parece simples, certo? Aqui está o que realmente aconteceu:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// O código final foi isso aqui:&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;dateRange&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;setDateRange&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useState&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;start&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;end&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;null&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;filteredSales&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;sales&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;filter&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;sale&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;dateRange&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;start&lt;/span&gt; &lt;span class="o"&gt;||&lt;/span&gt; &lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;dateRange&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;end&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;sale&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;date&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;=&lt;/span&gt; &lt;span class="nx"&gt;dateRange&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;start&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="nx"&gt;sale&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;date&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;=&lt;/span&gt; &lt;span class="nx"&gt;dateRange&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;end&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Quinze linhas. Levou 8 horas. Por quê?&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;1h alinhando com o time de produto: o filtro reseta quando muda de página? Salva no localStorage? Funciona com timezone do cliente ou do servidor?&lt;/li&gt;
&lt;li&gt;2h investigando por que o componente de datepicker da lib que a gente usa não funciona no Safari 15 (spoiler: &lt;code&gt;Intl.DateTimeFormat&lt;/code&gt; com timezone UTC quebra em alguns casos)&lt;/li&gt;
&lt;li&gt;1h escrevendo testes (sim, até pra isso tem teste)&lt;/li&gt;
&lt;li&gt;30min documentando no Notion o comportamento decidido&lt;/li&gt;
&lt;li&gt;1h no code review explicando por que não usei a lib X (porque ela adiciona 40kb no bundle)&lt;/li&gt;
&lt;li&gt;O resto: escrevendo o código&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;O código foi 20% do tempo. O resto foi comunicação, investigação, decisão, documentação.&lt;/p&gt;

&lt;h2&gt;
  
  
  As habilidades invisíveis
&lt;/h2&gt;

&lt;p&gt;Aqui está o que eu uso no dia a dia e que nenhum curso ensinou direito:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. Ler contexto em threads do Slack&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Você recebe uma task: "O botão de checkout não funciona". Aí você vai no canal, sobe 150 mensagens, descobre que na verdade funciona, mas só em produção, só pra usuários logados, só se o carrinho tem menos de 10 itens. Essa skill de garimpar contexto é essencial.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Traduzir tech pra não-tech (e vice-versa)&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// PM: "Precisa ser em tempo real"&lt;/span&gt;
&lt;span class="c1"&gt;// Dev brain: WebSocket? SSE? Long polling? Qual a latência aceitável?&lt;/span&gt;

&lt;span class="c1"&gt;// O que eu respondo:&lt;/span&gt;
&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Tempo real tipo chat (mensagem chega em 1s) ou tipo painel 
(atualiza a cada 30s)? Isso muda bastante a arquitetura.&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Saber fazer essa ponte economiza retrabalho.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Debugar o bug invisível&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;O código funciona na sua máquina. Quebra em staging. Você passa 2 horas descobrindo que é a versão do Node no Docker que trata &lt;code&gt;BigInt&lt;/code&gt; diferente. O código que você escreve pra resolver:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Antes&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;total&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;sales&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;reduce&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;sum&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;sale&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;sum&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;sale&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;amount&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// Depois (pra garantir que funciona em Node 16 e 18)&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;total&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;sales&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;reduce&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;sum&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;sale&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; 
  &lt;span class="nc"&gt;Number&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;sum&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nc"&gt;Number&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;sale&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;amount&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;
&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Três caracteres de diferença. Duas horas de investigação.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;4. Dizer não (com contexto)&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;"Dá pra adicionar essa feature até sexta?" &lt;/p&gt;

&lt;p&gt;Não é só falar "não". É explicar: "Dá, mas vamos ter que adiar os testes automatizados, e isso significa que a cada nova feature vamos gastar mais tempo testando manual. Prefere assim ou deixa pra sprint que vem com testes inclusos?"&lt;/p&gt;

&lt;h2&gt;
  
  
  Os trade-offs que ninguém te conta
&lt;/h2&gt;

&lt;p&gt;Agora a parte que dói: algumas dessas habilidades &lt;strong&gt;competem&lt;/strong&gt; com escrever código.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Quanto mais você participa de calls de alinhamento, menos tempo tem pra codar (mas menos retrabalho)&lt;/li&gt;
&lt;li&gt;Quanto mais você documenta decisões, menos features você entrega na sprint (mas menos gente te interrompe com dúvida)&lt;/li&gt;
&lt;li&gt;Quanto mais você revisa PR dos outros, menos avança no seu (mas o código da base melhora)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Não tem resposta certa. Depende do momento do projeto, do time, da senioridade. Mas é importante saber que &lt;strong&gt;esse trade-off existe&lt;/strong&gt;. Quando você vê um dev senior que "não escreve tanto código", muitas vezes é porque ele está resolvendo os problemas &lt;em&gt;antes&lt;/em&gt; de virarem código.&lt;/p&gt;

&lt;h2&gt;
  
  
  E quando você só quer codar?
&lt;/h2&gt;

&lt;p&gt;Olha, eu entendo. Tem dias que eu só queria pegar uma task bem definida, colocar fone, e passar 4 horas refatorando aquele componente gigante. E tá tudo bem querer isso.&lt;/p&gt;

&lt;p&gt;Algumas estratégias que funcionam pra mim:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Blocos de deep work&lt;/strong&gt;: combina com o time 2h de "não me chama" por dia&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Pegar tasks técnicas&lt;/strong&gt;: refatoração, performance, migração de versão — geralmente exigem menos alinhamento&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Projetos paralelos&lt;/strong&gt;: onde você controla 100% do escopo e só programa&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Mas se você está num time, numa empresa, trabalhando em produto real, vai ter que aceitar: escrever código é uma parte do trabalho, não o trabalho inteiro.&lt;/p&gt;

&lt;h2&gt;
  
  
  TL;DR
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Desenvolvimento de software é 20% código, 80% contexto, comunicação e decisão&lt;/li&gt;
&lt;li&gt;As habilidades mais usadas no dia a dia: ler contexto, traduzir tech↔︎não-tech, debugar o invisível, negociar escopo&lt;/li&gt;
&lt;li&gt;Há trade-offs reais entre codar e outras atividades — e tá tudo bem&lt;/li&gt;
&lt;li&gt;Devs seniors "escrevem menos código" porque resolvem problemas antes deles virarem código&lt;/li&gt;
&lt;li&gt;Se você quer focar em código puro: negocie blocos de deep work ou escolha projetos/empresas que permitam isso&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>tutorial</category>
      <category>beginners</category>
    </item>
    <item>
      <title>O que é uma API REST? Entenda em 5 minutos com exemplos do dia a dia</title>
      <dc:creator>Taina Costa</dc:creator>
      <pubDate>Thu, 21 May 2026 11:42:16 +0000</pubDate>
      <link>https://dev.to/taina_costa_f/o-que-e-uma-api-rest-entenda-em-5-minutos-com-exemplos-do-dia-a-dia-13pn</link>
      <guid>https://dev.to/taina_costa_f/o-que-e-uma-api-rest-entenda-em-5-minutos-com-exemplos-do-dia-a-dia-13pn</guid>
      <description>&lt;h2&gt;
  
  
  Um guia visual e sem complicação para quem está começando agora na programação
&lt;/h2&gt;

&lt;p&gt;Se você está começando a programar, já deve ter ouvido a palavra "API" umas mil vezes — em vídeos, vagas de emprego, documentações. E provavelmente pensou: "ok, mas o que isso significa, na prática?"&lt;/p&gt;

&lt;p&gt;Neste artigo vou te explicar o que é uma &lt;strong&gt;API REST&lt;/strong&gt; usando exemplos do mundo real, sem termos técnicos desnecessários. No final, você vai entender o conceito que está por trás de praticamente todo aplicativo que você usa todo dia.&lt;/p&gt;

&lt;h2&gt;
  
  
  A analogia do garçom
&lt;/h2&gt;

&lt;p&gt;Imagine que você está em um restaurante. Você não vai até a cozinha pegar sua comida, certo? Você fala com o &lt;strong&gt;garçom&lt;/strong&gt;, que leva seu pedido pra cozinha e traz a comida de volta pra mesa.&lt;/p&gt;

&lt;p&gt;Uma &lt;strong&gt;API&lt;/strong&gt; funciona exatamente assim. Ela é o garçom entre dois sistemas:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Você&lt;/strong&gt; (ou um aplicativo) faz um pedido&lt;/li&gt;
&lt;li&gt;A &lt;strong&gt;API&lt;/strong&gt; leva esse pedido pra um servidor (a "cozinha")&lt;/li&gt;
&lt;li&gt;O servidor processa o pedido e devolve uma resposta&lt;/li&gt;
&lt;li&gt;A API entrega a resposta de volta pra você&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Toda vez que o app do iFood mostra restaurantes perto de você, ele está fazendo isso através de uma API. Toda vez que o Instagram carrega o feed, é uma API que entrega os posts. Quando você paga com Pix, três ou quatro APIs conversam entre si nos bastidores.&lt;/p&gt;

&lt;h2&gt;
  
  
  O que significa "REST"?
&lt;/h2&gt;

&lt;p&gt;REST é um conjunto de &lt;strong&gt;regras&lt;/strong&gt; sobre como essa "conversa" entre sistemas deve acontecer. Pense nisso como o protocolo de etiqueta do garçom: ele sempre vai te perguntar de uma certa forma, anotar de um certo jeito, e trazer a resposta seguindo um padrão.&lt;/p&gt;

&lt;p&gt;As principais regras do REST são:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Tudo é um recurso.&lt;/strong&gt; Um usuário, um produto, uma foto — cada coisa tem um endereço próprio&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;A conversa é sem memória.&lt;/strong&gt; Cada pedido é independente, o servidor não "lembra" do pedido anterior&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Usa os métodos do HTTP.&lt;/strong&gt; Aqueles verbos: &lt;code&gt;GET&lt;/code&gt;, &lt;code&gt;POST&lt;/code&gt;, &lt;code&gt;PUT&lt;/code&gt;, &lt;code&gt;DELETE&lt;/code&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Os 4 verbos que você precisa conhecer
&lt;/h2&gt;

&lt;p&gt;Esses são os "tipos de pedido" que você pode fazer pra uma API REST:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Verbo&lt;/th&gt;
&lt;th&gt;O que faz&lt;/th&gt;
&lt;th&gt;Exemplo&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;GET&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Buscar informação&lt;/td&gt;
&lt;td&gt;"Me mostra os meus posts"&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;POST&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Criar algo novo&lt;/td&gt;
&lt;td&gt;"Cria um post novo"&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;PUT&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Atualizar algo existente&lt;/td&gt;
&lt;td&gt;"Muda o título desse post"&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;DELETE&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Apagar algo&lt;/td&gt;
&lt;td&gt;"Apaga esse post"&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h2&gt;
  
  
  Um exemplo prático
&lt;/h2&gt;

&lt;p&gt;Vamos supor que existe uma API de uma rede social fictícia. Pra buscar todos os posts de um usuário, você faria uma requisição assim:&lt;/p&gt;

&lt;p&gt;GET &lt;a href="https://api.redesocial.com/usuarios/123/posts" rel="noopener noreferrer"&gt;https://api.redesocial.com/usuarios/123/posts&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Lendo da esquerda pra direita:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;GET&lt;/code&gt; — quero &lt;strong&gt;buscar&lt;/strong&gt; informação&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;https://api.redesocial.com&lt;/code&gt; — endereço da API&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;/usuarios/123/posts&lt;/code&gt; — quero os posts do usuário de ID 123&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;A API responderia algo parecido com isso (em formato &lt;strong&gt;JSON&lt;/strong&gt;, que é o jeito mais comum de organizar dados na web):&lt;/p&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;
json
[
  {
    "id": 1,
    "titulo": "Meu primeiro post",
    "data": "2026-05-15"
  },
  {
    "id": 2,
    "titulo": "Aprendendo APIs",
    "data": "2026-05-20"
  }
]
Pronto. Isso é uma resposta de API REST. Seu aplicativo recebe esses dados e mostra na tela como uma lista de posts.

Como testar uma API de verdade (sem programar)
Você pode testar APIs públicas direto do navegador. Tente abrir esse link agora:


https://api.github.com/users/torvalds
Você vai ver os dados do perfil do Linus Torvalds (criador do Linux) no GitHub. Isso é uma resposta de API REST em formato JSON.

Outras APIs públicas que valem a pena explorar:

PokeAPI — dados de Pokémon (https://pokeapi.github.io/)
ViaCEP — consulta de CEP brasileiro (https://viacep.com.br/)
JSONPlaceholder — API fake pra testes (https://jsonplaceholder.typicode.com/)
Próximos passos
Agora que você entendeu o conceito, sugiro:

Testar a ViaCEP abrindo https://viacep.com.br/ws/01310100/json/ no navegador
Estudar JSON — é o formato em que as APIs respondem
Aprender sobre fetch (JavaScript) ou a biblioteca requests (Python) — são as ferramentas pra fazer chamadas de API em código
Conclusão
API REST não é um bicho de sete cabeças. É só uma forma padronizada de dois sistemas conversarem pela internet. Toda vez que você usa qualquer aplicativo moderno, dezenas de APIs estão trabalhando nos bastidores pra que ele funcione.

Se esse conteúdo te ajudou, deixa um ❤️ aí embaixo. E se quiser que eu escreva sobre algum outro conceito de programação explicado de forma simples, comenta o tema!
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

</description>
      <category>braziliandevs</category>
      <category>tutorial</category>
      <category>webdev</category>
      <category>api</category>
    </item>
  </channel>
</rss>
