Gerado pelo All in One SEO v5.0.1.1, este é um arquivo llms.txt utilizado por LLMs para indexar o site.

# Luigi Moretti

Blog pessoal

## Sitemaps

- [XML Sitemap](https://moretti.dev/sitemap.xml): Contains all public & indexable URLs for this website.

## Posts

- [Blog](https://moretti.dev/blog/)
- [Como WebAssembly e ONNX permitem rodar IA dentro do navegador?](https://moretti.dev/como-webassembly-e-onnx-permitem-rodar-ia-dentro-do-navegador/) - WebAssembly não é uma versão turbinada do JavaScript. É um formato binário que desacopla execução de linguagem, e isso explica IA rodando no navegador.
- [Por que Promise sempre vence o setTimeout no event loop](https://moretti.dev/por-que-promise-sempre-vence-o-settimeout-no-event-loop/) - Promise não é "mais rápida" que setTimeout. O event loop drena a fila de microtasks por completo antes de seguir. Entenda o algoritmo real por trás disso.
- [animation-timeline: comparado com outras formas de animar no scroll](https://moretti.dev/animation-timeline-comparado-com-outras-formas-de-animar-no-scroll/) - Toda vez que preciso animar algo no scroll bate a mesma dúvida: GSAP, IntersectionObserver ou animation-timeline nativo? Fui comparar os três a fundo.
- [Por que participar de eventos de tecnologia vale a pena?](https://moretti.dev/por-que-participar-de-eventos-de-tecnologia-vale-a-pena/) - Estive reflexivo sobre o por quê vou a eventos de tecnologia até achar uma resposta melhor, apoiada em dados reais de networking e algumas lacunas que assumo. Faz uns meses estive refletindo sobre essa pergunta: por que eu vou a eventos de tecnologia? Não é retórica. É a pergunta que faço toda vez que acordo
- [Livros para Devs: 3 repositórios essenciais](https://moretti.dev/livros-para-devs-3-repositorios-essenciais/) - Para facilitar a busca por conhecimento de qualidade, estes três repositórios no GitHub que funcionam como minhas bibliotecas digitais essenciais.
- [Memoização no React: Guia breve (useMemo, useCallback, React.memo e além)](https://moretti.dev/memoizacao-no-react-guia-breve-usememo-usecallback-react-memo/) - Memoização é uma técnica de otimização que guarda resultados de cálculos ou renders anteriores e os reutiliza quando os mesmos inputs aparecem novamente.
- [Debounce em JavaScript: Otimize Inputs e Scrolls Fácil](https://moretti.dev/debounce-em-javascript-otimize-inputs-e-scrolls-facil/) - O Debounce, que é uma técnica simples, mas muito útil, para melhorar o desempenho da sua aplicação e reduzir chamadas desnecessárias.
- [Guia Rápido: trim(), trimStart(), trimEnd() em JavaScript](https://moretti.dev/guia-rapido-trim-trimstart-trimend-em-javascript/) - Os métodos trim(), trimStart() e trimEnd() removem espaços em branco de uma string no Javascript, muito útil para formulários.
- [Memoização no Vue.js: Estratégias e Comparação com React](https://moretti.dev/memoizacao-no-vue-js-estrategias-boas-praticas/) - Vamos explorar como memoização funciona no Vue.js, suas formas de implementação, vantagens e riscos, e algumas diferenças práticas em relação ao React.
- [Centralizar elementos em CSS com Flexbox, Grid e margin](https://moretti.dev/centralizar-elementos-em-css-com-flexbox-grid-e-margin/) - Esse artigo vai direto ao ponto e mostra três formas modernas e eficientes de centralizar elementos vertical e horizontalmente, todas responsivas e fáceis de manter.
- [Como usar String.prototype.padEnd() no JavaScript](https://moretti.dev/como-usar-string-prototype-padend-no-javascript/) - Se você precisa alinhar textos ou números para exibição. Em vez de concatenar manualmente espaços, padEnd() faz isso de forma nativa e elegante.
- [padStart() no JavaScript: Formatando strings com elegância](https://moretti.dev/padstart-no-javascript-formatando-strings-com-elegancia/) - O JavaScript oferece uma solução nativa e elegante: padStart(). Esse método permite que você preencha o início de uma string com caracteres até que ela atinja um determinado comprimento.
- [Defesa em profundidade: Como proteger suas aplicações Next.js e Remix contra ataques SSRF (Server-Side Request Forgery)](https://moretti.dev/ssrf-seguranca-nextjs-remix/) - SSRF (Server-Side Request Forgery) é uma vulnerabilidade em que um atacante consegue fazer com que o servidor da aplicação realize requisições HTTP arbitrárias.
- [env() Safe Area Insets no CSS: O que são e como usar](https://moretti.dev/env-safe-area-insets-no-css/) - Descubra como a função env() e as variáveis safe-area-inset-* resolvem problemas de responsividade em dispositivos com notch e cantos arredondados, tanto na vertical quanto na horizontal. Introdução Já aconteceu com você de abrir um site no iPhone ou em um celular com notch, e perceber que parte do conteúdo está cortado ou colado demais nas
- [O que é Remix.run e por que você deveria usar](https://moretti.dev/o-que-e-remix-run-e-por-que-voce-deveria-usar/) - Descubra como o Remix.run pode revolucionar a forma como você desenvolve aplicações web modernas, combinando performance extrema com simplicidade no fluxo de dados.
- [Como Dominar Loaders no Remix.run: Guia Prático](https://moretti.dev/como-dominar-loaders-no-remix-run-guia-pratico/) - Entenda como funcionam os Loaders no Remix.run e aprenda a usá-los com eficiência para criar aplicações mais rápidas, organizadas e escaláveis. Introdução Se você está começando com Remix.run ou mesmo se já tem experiência com React, provavelmente já se perguntou: "Como devo carregar os dados corretamente nesse framework?" O Remix traz um modelo novo, baseado
- [Unidades CSS: vh, dvh, lvh e svh - Entenda o que são e quando usar](https://moretti.dev/unidades-css-vh-dvh-lvh-svh/) - Conheça as novas unidades CSS baseadas na altura da viewport (como dvh, lvh e svh), entenda quando usá-las e por que elas resolvem problemas reais de layout em dispositivos modernos. Introdução Você provavelmente já usou vh para controlar a altura de um layout em CSS, certo? Mas e quando o layout "quebra" em um smartphone
- [Dominando os Tipos Utilitários do TypeScript: Partial, Pick, Omit, Record e mais](https://moretti.dev/dominando-os-tipos-do-typescript/) - Explore como Partial, Pick, Omit, Record, Readonly e outros tipos utilitários do TypeScript podem te ajudar a escrever código mais limpo, reutilizável e seguro. Incluímos exemplos reais para cada caso. Introdução Você já se pegou duplicando tipos ou criando variações manuais de interfaces no TypeScript? Exemplo clássico: você tem um tipo User, mas quer criar
- [O que é React.js (para não técnicos)?](https://moretti.dev/o-que-e-react-js-para-nao-tecnicos/) - React.js é uma biblioteca JavaScript criada pelo Facebook (agora Meta) para construir interfaces de usuário (UIs). Mas o que isso significa na prática?
- [Como Funciona o Server-Side Rendering no Remix.run (e por que ele é diferente)](https://moretti.dev/como-funciona-o-server-side-rendering-no-remix-run-e-por-que-ele-e-diferente/) - O Remix.run chega com uma proposta diferente: tornar o Server-Side Rendering o padrão natural e não a exceção. Mas como isso funciona na prática?
- [Entendendo o Prop Drilling no React.js (e como evitar esse problema)](https://moretti.dev/entendendo-o-prop-drilling-no-react-js/) - Se você já trabalhou com React, provavelmente se deparou com o famoso prop drilling, aquele momento em que uma prop precisa atravessar uma cadeia componentes apenas para chegar onde realmente será usada.

## Páginas

- [Home](https://moretti.dev/)

## Story

- [3 Soluções Definitivas para Limpar Seu Código React (Prop Drilling).](https://moretti.dev/web-stories/3-solucoes-definitivas-para-limpar-seu-codigo-react-prop-drilling/) - 3 Soluções Definitivas para Limpar Seu Código React (Prop Drilling).Cansado do Prop Drilling?Cansado do Prop Drilling?Chegou a hora de modernizar seu fluxo de dados no React!SOLUÇÃO #1: Context APISOLUÇÃO #1: Context APIO "teletransporte" nativo do React: Passe valores diretamente para quem precisa.SOLUÇÃO #2: Gerenciamento Global.SOLUÇÃO #2: Gerenciamento Global.Para apps gigantes, use stores robustas (Zustand, Redux).SOLUÇÃO
- [Seu Código React está um CAOS? Entenda o Prop Drilling.](https://moretti.dev/web-stories/seu-codigo-react-esta-um-caos-entenda-o-prop-drilling/) - Seu Código React está um CAOS? Entenda o Prop Drilling.Pare de Repassar PROPS que NINGUÉM USA!O calcanhar de Aquiles do seu código React tem nome.O que é Prop Drilling?É a dor de passar dados por 3, 5, 10 componentes intermediários.A Analogia PerfeitaImagine que você precisa fazer uma entrega, mas a encomenda tem que passar através
- [O que é React.js (para sua mãe)?](https://moretti.dev/web-stories/o-que-e-react-js-para-sua-mae/) - Para quem não trabalha com código, o React.js é um nome que parece pertencer a outra dimensão. Ele é, na verdade, uma biblioteca JavaScript criada pelo Facebook (agora Meta) para construir interfaces
- [O que é React.js (para não técnicos)?](https://moretti.dev/web-stories/o-que-e-react-js-para-nao-tecnicos/) - Para quem não trabalha com código, o React.js é um nome que parece pertencer a outra dimensão. Ele é, na verdade, uma biblioteca JavaScript criada pelo Facebook (agora Meta) para construir interfaces
- [env() com os safe-area insets, uma solução moderna no CSS](https://moretti.dev/web-stories/env-safe-area-insets-no-css-o-que-sao-e-como-usar-2/) - Já aconteceu com você de abrir um site no iPhone ou em um celular com notch, e perceber que parte do conteúdo está cortado ou colado demais nas bordas?
- [Conheça o lvh (Large Viewport Height)](https://moretti.dev/web-stories/conheca-o-lvh-large-viewport-height/) - Conheça as novas unidades CSS baseadas na altura da viewport (como dvh, lvh e svh), entenda quando usá-las e por que elas resolvem problemas reais de layout em dispositivos modernos.
- [env() Safe Area Insets no CSS: O que são e como usar](https://moretti.dev/web-stories/env-safe-area-insets-no-css-o-que-sao-e-como-usar/) - Já aconteceu com você de abrir um site no iPhone ou em um celular com notch, e perceber que parte do conteúdo está cortado ou colado demais nas bordas?
- [Conheça o svh (Small Viewport Height)](https://moretti.dev/web-stories/conheca-o-svh-small-viewport-height/) - Conheça as novas unidades CSS baseadas na altura da viewport (como dvh, lvh e svh), entenda quando usá-las e por que elas resolvem problemas reais de layout em dispositivos modernos.
- [Conheça o dvh (Dynamic Viewport Height)](https://moretti.dev/web-stories/conheca-o-dvh-dynamic-viewport-height/) - Conheça as novas unidades CSS baseadas na altura da viewport (como dvh, lvh e svh), entenda quando usá-las e por que elas resolvem problemas reais de layout em dispositivos modernos.

## Categorias

- [Resenha](https://moretti.dev/category/resenha/)
- [Frameworks](https://moretti.dev/category/frameworks/)
- [Bibliotecas](https://moretti.dev/category/libs/)
- [CSS](https://moretti.dev/category/css/)
- [TypeScript](https://moretti.dev/category/typescript/)
- [Remix.run](https://moretti.dev/category/frameworks/remix-run/)
- [React](https://moretti.dev/category/libs/react/)
- [Segurança](https://moretti.dev/category/seguranca/)
- [JavaScript](https://moretti.dev/category/javascript/)
- [Documentação](https://moretti.dev/category/documentacao/)
- [Vue.js](https://moretti.dev/category/frameworks/vue-js/)
- [Performance & Tooling](https://moretti.dev/category/performance-tooling/)
- [Fundamentos Web](https://moretti.dev/category/fundamentos-web/)
- [Reflexão](https://moretti.dev/category/reflexao/)
- [IA](https://moretti.dev/category/ia/)

## Tags

- [React](https://moretti.dev/tag/react/)
- [Vue](https://moretti.dev/tag/vue/)
- [Zustand](https://moretti.dev/tag/zustand/)
- [SSR](https://moretti.dev/tag/ssr/)
- [TypeScript](https://moretti.dev/tag/typescript/)
- [IA](https://moretti.dev/tag/ia/)
- [JavaScript](https://moretti.dev/tag/javascript/)
- [CSS](https://moretti.dev/tag/css/)
- [HTML](https://moretti.dev/tag/html/)
- [Remix.run](https://moretti.dev/tag/remix-run/)
- [Flexbox](https://moretti.dev/tag/flexbox/)
- [Grid](https://moretti.dev/tag/grid/)
- [Responsividade](https://moretti.dev/tag/responsividade/)
- [Navegador](https://moretti.dev/tag/navegador/)

## Categorias

- [CSS](https://moretti.dev/web_story_category/css/)
- [Tecnologias web](https://moretti.dev/web_story_category/tecnologias-web/)

## Tags

- [CSS](https://moretti.dev/web_story_tag/css/)
- [React](https://moretti.dev/web_story_tag/react/)
- [Javascript](https://moretti.dev/web_story_tag/javascript/)