S01E03 - Aquele com os links de março
Fala, devs! 👋
Todo mês, eu reúno uma seleção especial de links com ferramentas, artigos e novidades que ajudam a simplificar e turbinar a rotina de quem trabalha com desenvolvimento front-end. O feedback de vocês é fundamental para que eu possa continuar evoluindo este projeto!
Nesta edição, com base nas sugestões que recebi, trago um formato renovado para a newsletter. Espero que gostem das mudanças e continuem compartilhando suas impressões - elas são essenciais para que o conteúdo fique cada vez melhor!
Suas sugestões de links para a próxima edição são super bem-vindas! Envie suas indicações aqui: https://github.com/magnobiet/newsletter/issues/4.
Quer saber o que bombou no universo dev este mês? Confira os links abaixo e me conte o que achou! 👇
Pesquisa salarial 2025 do Código Fonte TV
O Código Fonte TV lançou a Pesquisa Salarial 2025 para coletar dados sobre o mercado de trabalho dos programadores brasileiros. Participe e ajude a comunidade com insights valiosos! https://pesquisa.codigofonte.com.br
Free for Developers
Uma lista completa de serviços SaaS, PaaS e IaaS com planos gratuitos para desenvolvedores. Um recurso indispensável para encontrar ferramentas úteis sem custo extra. https://free-for.dev
HTML
Elementos nativos do HTML que você deveria estar usando
Este artigo destaca elementos como <dialog>, <details>, <summary> e <progress>, mostrando como eles podem substituir soluções em JavaScript, deixando suas aplicações mais leves e eficientes. https://harrisonbroadbent.com/blog/cool-native-html-elements
Introdução aos atributos command e commandfor
O Chrome 135 trouxe os atributos command e commandfor para botões, permitindo comportamentos declarativos e acessíveis sem depender tanto de JavaScript. Saiba como usá-los para melhorar a usabilidade. https://developer.chrome.com/blog/command-and-commandfor
CSS
Funções em CSS
Agora o CSS suporta funções personalizadas, permitindo estilos dinâmicos e reutilizáveis com parâmetros e valores retornados. Já disponível no Chrome Canary, é uma revolução para layouts flexíveis! https://css-tricks.com/functions-in-css
Estilizando os elementos <details> e <summary> com CSS
Aprenda a customizar <details> e <summary> com CSS, desde o ícone padrão até substituições com ::before ou ::after, além de dicas sobre compatibilidade entre navegadores. https://fullystacked.net/styling-details-summary
Cores relativas em CSS: manipulando paletas com facilidade
Descubra como as cores relativas no CSS ajudam a criar paletas dinâmicas e consistentes de forma simples e eficiente. https://ishadeed.com/article/css-relative-colors
Suavize transições do border-radius em CSS
Saiba como usar View Transitions para criar animações suaves em elementos com border-radius, trazendo efeitos visuais incríveis. https://www.bram.us/2025/03/11/view-transitions-border-radius
O futuro do CSS: estilizando o <select> sem hacks
A propriedade experimental base-select permite estilizar o <select> diretamente com CSS, mantendo funcionalidade nativa e acessibilidade, sem JavaScript. https://dev.to/link2twenty/future-of-css-select-styling-without-the-hacks-38c2
Compreendendo as diferenças entre margin e padding no CSS
Um guia claro sobre quando usar margin ou padding para controlar espaçamentos internos e externos de forma eficaz. https://makemychance.com/css-margin-vs-padding
Mixins em CSS: prontos para experimentação
A funcionalidade experimental de mixins no CSS permite reutilizar blocos de estilos, trazendo organização e eficiência ao código, similar aos pré-processadores como SASS. https://nerdy.dev/css-mixins-ready-for-experimentation
JavaScript
Uma visão geral do Zod
Conheça o Zod, uma biblioteca poderosa para validação de esquemas em TypeScript, com destaque para suas principais funcionalidades. https://didoesdigital.com/blog/zod-overview
Tipagem de schemas de formulário com Zod
Dicas práticas para tipar esquemas de formulário com Zod, otimizando a validação em projetos TypeScript. https://pgjones.dev/blog/how-to-type-zod-form-schemas-2025
Lançamento do TanStack Form v1
A versão 1.0 chega com melhorias para gerenciamento de formulários em aplicações web. Confira as novidades! https://tanstack.com/blog/announcing-tanstack-form-v1
Relatório anual do JavaScript em 2024
Um panorama completo do ecossistema JavaScript em 2024, com tendências, estatísticas e insights. https://almanac.httparchive.org/en/2024/javascript
Ferramentas minimalistas de gerenciamento de estado
Conheça alternativas leves para gerenciar estado em aplicações front-end, sem a complexidade de soluções robustas. https://techhub.iodigital.com/articles/minimal-state-management-tools
Melhores práticas para upload de arquivos
Orientações para implementar uploads de arquivos de forma segura e eficiente, com foco em validação e UX. https://storagebowl.net/blogs/best-practices-of-file-upload
A grande aventura da migração para o ESLint 9
Um guia prático sobre a transição para o ESLint v9 em projetos TypeScript, com desafios e soluções. https://www.neoxs.me/blog/migration-to-eslint-v9
Web Components vs. frameworks de componentes: qual a diferença?
Uma comparação entre Web Components e frameworks, explorando vantagens, desvantagens e desempenho. https://www.smashingmagazine.com/2025/03/web-components-vs-framework-components
A API Document Picture-in-Picture
Saiba como a API Document Picture-in-Picture permite criar janelas flutuantes com conteúdo HTML sempre visíveis. https://developer.chrome.com/blog/document-pip-use-case
TypeScript
O que é TypeScript?
Este artigo oferece uma visão geral do TypeScript para programadores JavaScript, explicando como o TypeScript adiciona sintaxe de tipos ao JavaScript, os diferentes modos de execução do código TypeScript e como ele melhora a experiência de desenvolvimento em IDEs. https://2ality.com/2025/02/what-is-typescript.html
Anúnciada a versão 5.8 do TypeScript
A equipe do TypeScript anunciou o lançamento da versão 5.8, trazendo melhorias significativas, incluindo verificações mais granulares em expressões de retorno. https://devblogs.microsoft.com/typescript/announcing-typescript-5-8
TypeScript 10x mais rápido
A equipe do TypeScript está trabalhando em uma implementação nativa do compilador, visando melhorar drasticamente o desempenho, com promessas de reduzir os tempos de compilação em até 10 vezes e diminuir o uso de memória, beneficiando especialmente grandes bases de código. https://devblogs.microsoft.com/typescript/typescript-native-port
O operador satisfies no TypeScript
Este artigo explora o operador satisfies introduzido no TypeScript, que permite verificar se um valor corresponde a um tipo específico sem alterar sua inferência, auxiliando na validação de tipos de forma mais precisa e flexível. https://2ality.com/2025/02/satisfies-operator.html
React
Como o React funciona nos bastidores
Explora os mecanismos internos do React, detalhando como o Virtual DOM otimiza atualizações na interface e o papel do reconciliador na renderização eficiente de componentes. https://www.deepintodev.com/blog/how-react-works-behind-the-scenes
Tendências do React para 2025
Uma análise das principais tendências no ecossistema React, incluindo server components, concorrência e novas abordagens para gerenciamento de estado. https://www.robinwieruch.de/react-trends/
Um bootstrap moderno para aplicações em Electron com React
Projeto de código aberto desenvolvido por Dalton Menezes, demonstrando as capacidades do Electron para criar aplicações desktop utilizando tecnologias modenas como React, TypeScript, TailwindCSS, shadcn/ui, Vite, Biome dentre outras. https://github.com/daltonmenezes/electron-app
Programação funcional no React
Conceitos de programação funcional aplicados ao React, com exemplos práticos para melhorar a composição de componentes e evitar efeitos colaterais indesejados. https://www.56kode.com/posts/level-up-react-functional-programming-in-react
Migrando do Create React App (CRA) para Vite
Passo a passo detalhado para migrar do Create React App para Vite, destacando benefícios como desempenho aprimorado e tempos de build mais rápidos. https://adhithiravi.medium.com/migrating-from-create-react-app-to-vite-a-modern-approach-76148adb8983
Armazenando Estado na URL no React
A URL pode ser um excelente local para armazenar estados. Este artigo explora técnicas para sincronizar o estado da aplicação com a URL no React, melhorando a experiência do usuário. https://iamsahaj.xyz/blog/react-state-in-the-url/
Construindo APIs com Next.js
Guia oficial do Next.js para criar APIs eficientes e escaláveis, aproveitando o sistema de rotas para definir handlers de requisição. https://nextjs.org/blog/building-apis-with-nextjs
Performance de sites Next.js pré-renderizados
Testes e análises sobre a capacidade de um site Next.js pré-renderizado lidar com alto tráfego sem comprometer o desempenho. https://martijnhols.nl/blog/how-much-traffic-can-a-pre-rendered-nextjs-site-handle
Melhorando a performance do Next.js
Dicas e práticas recomendadas para otimizar a performance de aplicações Next.js, abordando técnicas como otimização de imagens e cache eficiente. https://www.debugbear.com/blog/nextjs-performance
Deploy de aplicações Next.js fora da Vercel
Um guia para implantar aplicações Next.js em produção sem utilizar a plataforma Vercel, explorando alternativas como servidores próprios e serviços de cloud computing. https://www.saybackend.com/blog/04-deploy-nextjs-to-production-without-vercel
Autorização no Next.js
Aborda técnicas de autenticação e autorização no Next.js, destacando boas práticas para proteger rotas e gerenciar acesso de usuários em aplicações modernas. https://www.robinwieruch.de/next-authorization/
Angular
Versão 19.2 já está disponível
A nova versão do Angular 19.2 traz melhorias de desempenho e correções de bugs, além de aprimoramentos na API de formulários e compatibilidade com as versões mais recentes do TypeScript. Confira as principais novidades e como atualizar seu projeto. https://blog.angular.dev/angular-19-2-is-now-available-673ec70aea12
Angular 19: O guia definitivo para desenvolvedores em 2025
Um guia completo sobre o Angular 19, cobrindo suas principais novidades, mudanças e melhores práticas. Descubra como essa versão impacta o desenvolvimento moderno e o que esperar para o futuro do framework. https://medium.com/@sparklewebhelp/angular-19-the-ultimate-guide-for-developers-in-2025-b5a3896452c9
Micro frontends com Angular e Native Federation
Saiba como implementar micro frontends no Angular utilizando Native Federation, um recurso que permite maior modularidade e escalabilidade em aplicações. Essa abordagem pode facilitar a integração de múltiplas equipes e projetos. https://blog.angular.dev/micro-frontends-with-angular-and-native-federation-7623cfc5f413
Conheça o AfterRenderEffect no Angular
O AfterRenderEffect é um novo recurso do Angular que possibilita a execução de efeitos colaterais após a renderização de um componente. Descubra sua utilidade e como aplicá-lo para otimizar o desempenho das aplicações. https://angular.love/get-to-know-the-afterrendereffect
Ports and Adapters vs. Arquitetura Hexagonal
Este artigo compara os padrões de arquitetura Ports and Adapters e Arquitetura Hexagonal, destacando suas diferenças e semelhanças. Entenda como essas abordagens melhoram a separação de responsabilidades e a testabilidade do código. https://angular.love/ports-and-adapters-vs-hexagonal-architecture-is-it-the-same-pattern
Angular sem build: um novo paradigma
Este artigo apresenta uma abordagem inovadora para desenvolver aplicações Angular sem a necessidade de processos de build. Veja as vantagens dessa estratégia e como aplicá-la para otimizar o fluxo de desenvolvimento. https://edbzn.dev/nobuild-angular/
Explorando a Resource API do Angular
A nova Resource API do Angular oferece uma forma declarativa e eficiente de lidar com chamadas HTTP. Descubra seu funcionamento e como utilizá-la para simplificar o consumo de APIs em aplicações Angular. https://dev.to/luishcastroc/exploring-angular-resource-api-2bl4
Vue
Relatório do estado do Vue.js 2025
O relatório anual sobre Vue.js traz insights sobre tendências, adoção e o futuro do framework. Com base em dados da comunidade, o estudo detalha padrões emergentes e novas funcionalidades que moldam o ecossistema Vue. https://www.monterail.com/stateofvue
Lançamento do Nuxt 3.16
A versão 3.16 do Nuxt traz melhorias significativas, como o suporte a SSR otimizado, aprimoramentos no gerenciamento de estado e novas ferramentas para desenvolvedores. Essa atualização visa simplificar ainda mais o desenvolvimento de aplicações escaláveis e de alto desempenho com o Nuxt. https://nuxt.com/blog/v3-16
Motion para Vue: Animações reativas e fluidas
Motion.dev agora oferece suporte ao Vue, trazendo uma API declarativa e otimizada para animações suaves. O framework permite criar transições eficientes com menos código, aproveitando a reatividade do Vue para uma experiência de usuário aprimorada. https://motion.dev/blog/introducing-motion-for-vue
Node.js
Web Scraping com Cheerio
Introdução ao uso do Cheerio para web scraping em Node.js, demonstrando como extrair e manipular dados de páginas HTML de forma eficiente. https://blog.apify.com/web-scraping-with-cheerio
Node.js agora oferece suporte nativo a TypeScript
A partir da versão 23.6, o Node.js oferece suporte direto para TypeScript, sem a necessidade de ferramentas externas. Essa mudança facilita a integração e utilização de TypeScript em projetos Node.js, proporcionando uma melhor experiência para os desenvolvedores. https://nodesource.com/blog/Node.js-Supports-TypeScript-Natively
Pacotes, ferramentas e repositórios
Plugin do ESLint para JSON
Uma extensão que adiciona suporte ao linting de arquivos JSON, garantindo consistência em projetos. https://github.com/eslint/json
Lançamento do Oxlint beta
A versão beta do Oxlint traz linting rápido e extensível para JavaScript e TypeScript. https://oxc.rs/blog/2025-03-15-oxlint-beta.html
Biome 2.0 beta
O Biome 2.0 beta chega com melhorias de desempenho e novas funcionalidades para linting e formatação. https://biomejs.dev/blog/biome-v2-0-beta
up-fetch
Uma alternativa ao fetch nativo com TypeScript e funcionalidade aprimorada. A biblioteca oferece uma API mais intuitiva e recursos adicionais para requisições HTTP em projetos TypeScript. https://github.com/L-Blondy/up-fetch
ls-lint
Ferramenta para garantir a consistência de nomes de arquivos e diretórios em projetos. Auxilia na manutenção de um código base organizado. https://ls-lint.org/
bknd
Um framework Node.js para construção rápida de backends com TypeScript. Facilita o desenvolvimento de APIs e aplicações backend com uma estrutura organizada e recursos integrados. https://github.com/bknd-io/bknd
stylelint
Um linter poderoso para folhas de estilo CSS. Ajuda a identificar e corrigir problemas de estilo, garantindo a consistência e a qualidade do CSS em projetos web. https://stylelint.io/
UX, UI e acessibilidade
Checklist de design acessível
Um checklist prático para design acessível. Aborda elementos como contraste de cores, tipografia, navegação por teclado e testes com leitores de tela, ajudando a criar interfaces inclusivas desde o início do projeto. https://penpot.app/blog/accessible-design-checklist/
Verdades e mentiras sobre as barras de progresso
O texto explora os desafios em representar o progresso real com barras de progresso. Discute como a percepção do usuário é afetada por barras indeterminadas ou estimadas e oferece considerações para um design mais honesto e útil. https://cloudfour.com/thinks/truth-lies-and-progress-bars/
Requisitos de contraste de cores para acessibilidade explicados
O artigo detalha os requisitos de contraste de cores definidos pelas diretrizes WCAG para acessibilidade. Explica os níveis de conformidade (AA, AAA) e como aplicá-los corretamente em textos e componentes de interface para garantir legibilidade. https://blog.pope.tech/2022/11/08/color-contrast-accessibility-requirements-explained/
Testes de usabilidade são críticos
O autor argumenta sobre a importância fundamental dos testes de usabilidade no desenvolvimento de produtos digitais. Enfatiza como a observação de usuários reais interagindo com a interface revela problemas críticos que outras análises podem não identificar. https://nicolas-steenhout.com/usability-testing-is-critical/
Espaços de cores em design systems
O texto borda a complexidade dos espaços de cores (sRGB, Display P3) e seu impacto na definição de paletas em design systems. Discute desafios de consistência entre plataformas e ferramentas, oferecendo insights técnicos para gerenciar cores de forma eficaz. https://bjango.com/articles/designsystemcolourspace/
Docker
Não use Docker Compose em produção
Erick Wendel alerta sobre os riscos de utilizar Docker Compose em ambientes de produção. Embora seja excelente para desenvolvimento local, carece de funcionalidades cruciais de orquestração presentes em ferramentas como Kubernetes, como escalabilidade automática, gerenciamento de falhas e atualizações sem interrupção, essenciais para aplicações robustas. https://www.youtube.com/watch/LN6HQ8FGHAA
Inteligência artificial
Qualidade de código na era da IA
O texto explora o impacto da IA na qualidade do código, abordando tanto os benefícios quanto os desafios. Discute estratégias para manter altos padrões de desenvolvimento em meio às novas ferramentas de inteligência artificial, enfatizando a adaptação necessária por parte dos desenvolvedores para garantir a excelência. https://refactoring.fm/p/code-quality-in-the-age-of-ai
Opera anuncia novo recurso 'agentic' para seu navegador
O navegador Opera apresenta uma nova funcionalidade baseada em IA, descrita como "agentic". Este recurso visa permitir que o navegador execute tarefas mais complexas de forma autônoma, potencialmente automatizando fluxos de trabalho e interações do usuário diretamente na interface do browser. https://techcrunch.com/2025/03/03/opera-announces-a-new-agentic-feature-for-its-browser/
Engenharia de prompt para desenvolvedores web
Um guia sobre como desenvolvedores web podem otimizar o uso de ferramentas de IA através da engenharia de prompt. Aborda técnicas para formular instruções eficazes que gerem resultados mais precisos em tarefas como criação de código, depuração e otimização. https://www.sitepoint.com/prompt-engineering-for-web-development/
Riscos do código gerado por IA e como gerenciá-los
Analisa os perigos associados ao uso de código gerado por inteligência artificial em ambientes corporativos. Detalha riscos como vulnerabilidades de segurança, problemas de licenciamento e qualidade inconsistente, oferecendo estratégias para empresas mitigarem esses problemas e adotarem a IA de forma segura. https://venturebeat.com/ai/the-risks-of-ai-generated-code-are-real-heres-how-enterprises-can-manage-the-risk/
Construindo um agente RAG personalizado
Ensina como criar um agente de IA com RAG usando Deno, focando em respostas contextuais e personalizadas. https://deno.com/blog/build-custom-rag-ai-agent
Cloudflare AI Labyrinth
A Cloudflare lançou o AI Labyrinth, uma ferramenta gratuita que direciona bots de web scraping para páginas falsas geradas por IA, consumindo seus recursos e dificultando a coleta não autorizada de dados para treinamento de IA. https://blog.cloudflare.com/ai-labyrinth/
Segurança
Uma análise profunda das violações de Trusted Types em JavaScript
Este artigo explora as violações de Trusted Types em JavaScript, abordando como identificá-las e preveni-las para melhorar a segurança das aplicações web. https://bughunters.google.com/blog/5850786553528320/a-deep-dive-into-js-trusted-types-violations
Boas práticas para proteção de branches no GitHub
O artigo explora como configurar regras de proteção de branches no GitHub para garantir segurança e colaboração eficiente em projetos. https://engineering.mercari.com/en/blog/entry/20241217-github-branch-protection/
Alerta falso no GitHub engana usuários
Um golpe que usa OAuth falso no GitHub para sequestrar contas, alertando sobre segurança online. https://www.tabnews.com.br/NewsletterOficial/falso-alerta-de-seguranca-no-github-utiliza-aplicativo-oauth-para-sequestrar-contas
Risco crítico de bypass no Next.js
Aborda falha de autenticação no Next.js que pode ser explorada, destacando a necessidade de configurações seguras em projetos. https://www.cisoadvisor.com.br/alto-risco-bypass-de-autenticacao-no-next-js/
Falha Crítica no Firefox para Windows
Alerta sobre vulnerabilidade no Firefox que permite escapar do sandbox no Windows, recomendando atualização imediata do navegador. https://www.bleepingcomputer.com/news/security/mozilla-warns-windows-users-of-critical-firefox-sandbox-escape-flaw/
Podcasts
Curtiu a seleção deste mês no novo formato? Não se esqueça de compartilhar com sua equipe e deixar seu feedback!
Quer contribuir para a próxima edição? Envie seu link aqui.
Até a próxima edição! ✨