DEV Community: Alisson F.

Design de vício: o que apps aprenderam com cassinos

Alisson F. — Tue, 20 May 2025 11:48:28 +0000

Você pode não perceber, mas vários dos apps que você mais usa no dia a dia foram projetados para ativar no seu cérebro os mesmos circuitos que um caça-níquel em Las Vegas.

Estamos falando do que muitos chamam hoje de UX viciadora — um design que não só entrega valor ao usuário, mas que torna o uso difícil de largar, mesmo quando a experiência já deixou de ser prazerosa.

🎰 Recompensas variáveis: o núcleo do vício

Nos cassinos, as máquinas de caça-níqueis operam com o princípio da recompensa variável:

Você puxa a alavanca
Às vezes ganha, às vezes não
A incerteza é o que te mantém jogando

Redes sociais funcionam do mesmo jeito:

Você atualiza o feed
Às vezes aparece algo legal, às vezes não
Mas você continua atualizando

Esse sistema ativa o sistema dopaminérgico do cérebro, responsável pela motivação e busca de prazer.

O cérebro ama a incerteza gratificante — e o design moderno sabe disso.

🔔 Notificações: os sinos do cassino digital

Notificações coloridas, sons sutis, animações suaves...

Cada alerta é um "puxão na alavanca".

Elas são projetadas para:

Capturar sua atenção
Criar urgência
Induzir uma reação impulsiva

Muitas notificações não entregam real valor, mas são gatilhos de retorno.

🎯 Gamificação e loops de engajamento

Likes, conquistas, streaks, badges...

Esses elementos simulam progressão, como fases em jogos.

Você sente que precisa "completar a missão" — mesmo que a missão seja só abrir o app todo dia.

🧠 A neurociência por trás

Segundo o psicólogo B.F. Skinner, comportamentos reforçados de forma intermitente são os mais resistentes à extinção.

Ou seja: se um comportamento (como abrir o Instagram) às vezes gera uma recompensa positiva, você vai continuar fazendo — mesmo que nem sempre valha a pena.

Isso tem nome: condicionamento operante. E os apps o dominam.

⚖️ O dilema ético

Nem todo design viciador é intencional — mas muitas vezes é.

Empresas medem retenção diária, tempo de uso e número de sessões.

Quanto mais tempo você passa dentro de um app, melhor ele "performou".

Mesmo que isso custe:

Ansiedade
Perda de foco
Sensação de esgotamento mental

✅ Como combater isso?

Use o modo “não perturbe” com frequência
Desative notificações não essenciais
Reorganize a tela inicial do celular para esconder apps que te distraem
Pratique atenção plena ao usar a tecnologia

💬 Conclusão

Se até os cassinos aprenderam a deixar você vidrado...

... não se espante ao saber que seus apps favoritos também.

O design que conquista a atenção pode facilmente se tornar o que aprisiona a mente.

Cabe a nós, como designers e desenvolvedores, refletir sobre como queremos construir o futuro digital.

E você? Já se sentiu preso em um app e depois percebeu que passou mais tempo do que gostaria?

Comenta aqui embaixo — vamos conversar sobre isso. 👇

A ilusão da escolha: como a interface guia decisões 🧠🎯

Alisson F. — Sat, 17 May 2025 09:00:00 +0000

Psicologia das decisões, arquitetura da informação e dark patterns.

Quando você clica em um botão, desliza um controle ou preenche um formulário…

Você realmente escolheu fazer aquilo?

Ou a interface já havia decidido por você, através de posicionamento, cor, linguagem ou contexto?

🧠 Cérebro humano e tomada de decisão

O modelo dos dois sistemas (Daniel Kahneman)

Sistema 1: Rápido, automático, inconsciente. Usa heurísticas, hábitos e emoções.
Sistema 2: Lento, consciente, deliberado. Usa lógica e análise.

Designs eficazes interagem majoritariamente com o Sistema 1, que é preguiçoso e busca atalhos.

Isso faz com que pequenas decisões visuais tenham enorme influência sobre nossas ações.

🎨 Como o design molda escolhas

O layout, cores, texto e ordem dos elementos não são neutros. Eles criam:

Foco visual: o que salta aos olhos é o que mais recebe cliques.
Hierarquia de opções: o que parece "importante" ou "preferido".
Pressão temporal ou emocional: contagens regressivas, frases de urgência ou culpa.

📌 Exemplo real: Cancelar uma assinatura

Imagine dois botões:

Continuar minha assinatura (grande, azul, central)
Cancelar agora (pequeno, cinza, no canto)

As duas ações existem, mas a interface não está pedindo uma escolha justa.

Ela está sugerindo fortemente qual é a “resposta certa”.

⚠️ Dark Patterns: influência mal-intencionada

Dark Patterns são padrões de design que enganam, manipulam ou forçam o usuário a fazer o que não quer.

Alguns tipos comuns:

Padrão	Descrição	Exemplo
Obfuscation	Esconder informações importantes	Custos adicionais só aparecem no checkout
Confirmshaming	Culpar ou envergonhar	"Não, prefiro continuar sendo ignorante"
Roach Motel	Fácil entrar, difícil sair	Assinar: 1 clique. Cancelar: 6 telas
Forced Continuity	Testes gratuitos que viram cobranças	"Grátis por 7 dias", mas cobram no 8º sem aviso
Hidden Subscription	Assinatura escondida em uma ação banal	Marcar checkbox significa assinar uma newsletter paga

📚 Fonte: Harry Brignull – deceptive.design (ex-darkpatterns.org)

🧠 Por que isso funciona?

Esses padrões exploram vieses cognitivos como:

Efeito de ancoragem: a primeira opção molda sua referência.
Efeito de escassez: “só restam 2!” aumenta o valor percebido.
Custo afundado: já investi tempo aqui, não vou desistir agora.
Evitação da perda: preferimos evitar perdas do que obter ganhos.

🧪 Estudo de caso: escolhas falsas no design

Um estudo de 2012 sobre formulários de doação online mostrou que mudar o texto de um botão de:

“Continuar”

para

“Continuar com doação de R$50”

Aumentou o número de doações em 17%.

A ação era a mesma — mas a linguagem guiou a decisão.

🧭 Interfaces éticas: como guiar sem manipular

Nem toda influência é ruim. Um design pode:

Orientar usuários leigos com clareza
Evitar erros comuns
Promover boas práticas (como segurança)

✅ O segredo está na transparência, reversibilidade e respeito.

Boas práticas:

Sempre mostrar todas as opções com destaque igual
Evitar urgências falsas ou contagens regressivas enganosas
Permitir desfazer ou revisar decisões
Usar linguagem neutra, sem juízo de valor

💡 Conclusão

“Design não é apenas o que parece e o que se sente. Design é como funciona.”

— Steve Jobs

Mas como funciona... também influencia como decidimos.

Toda interface ensina, guia ou manipula.

Cabe a nós — designers, desenvolvedores, criadores — escolher qual tipo de influência queremos exercer.

🧠 Este é o post 7 da série Neurointerfaces: como o design conversa com o cérebro humano.

Se você já foi influenciado por uma interface, ou se quer compartilhar um caso curioso, comenta aqui embaixo! 👇

O cérebro lembra com os olhos: UX e memória visual 🧠👁️

Alisson F. — Fri, 16 May 2025 12:34:07 +0000

Consistência de padrões, cores, e reforço da memória operacional.

Alguma vez você já soube onde clicar antes mesmo de ler o texto?

Isso não é sorte.

É o seu cérebro trabalhando com memória visual e reconhecimento de padrões.

🧠 A mente é visual por natureza

Mais da metade do cérebro é dedicada ao processamento visual.

Nós lembramos melhor de formas, cores e posições do que de palavras.

Na interface, isso significa:

Ícones familiares ajudam a entender ações
Padrões repetidos guiam o comportamento
Consistência visual reduz a curva de aprendizado

🧩 Memória operacional e consistência de padrões

A memória operacional (ou de trabalho) tem capacidade limitada.

É como um post-it mental que segura poucas informações por vez.

Toda vez que uma interface muda padrões visuais sem necessidade, ela exige mais esforço do cérebro.

É como se dissesse: “esqueça tudo que aprendeu até agora”.

📉 Resultado: mais lentidão, mais erros, mais frustração.

🎯 O poder das referências visuais

Quando o cérebro vê:

Um ícone de lixeira 🗑️ → espera deletar algo
Um botão azul com texto branco → entende como principal ação
Um menu hambúrguer ☰ → sabe que abrirá navegação

Esses padrões funcionam porque não exigem leitura nem interpretação.

Eles acionam a memória visual.

🔍 Cores, formas e posições são memórias

A cor de um botão, o local de um menu, o tamanho de um texto…

Tudo isso é armazenado no visual map do usuário.

Quando ele volta à interface, o cérebro tenta reconstruir o layout de memória — como um mapa mental.

🧭 Quanto mais consistente a estrutura, mais rápido o usuário navega.

🧪 O que dizem as pesquisas?

Estudos de usabilidade mostram que:

“Interfaces visuais consistentes aumentam a velocidade de navegação em até 25% e reduzem erros em tarefas comuns.”

— NNGroup, 2021

Além disso, a repetição visual ajuda a armazenar informações no que chamamos de memória implícita — aquela que funciona sem você perceber.

💡 Como aplicar na prática

Use o mesmo padrão visual em todo o sistema
Repita ícones, cores e posições para ações semelhantes
Evite mudanças visuais bruscas entre telas
Padronize títulos, botões e mensagens

Se seu sistema tiver múltiplos produtos, crie um design system para manter a consistência.

📌 Conclusão

O cérebro não lê primeiro — ele vê.

Quanto mais consistente e visualmente familiar for sua interface, mais fácil será para o usuário navegar, lembrar e confiar.

🧠 Este é o post 6 da série Neurointerfaces: como o design conversa com o cérebro humano.

Feedback imediato: por que o cérebro odeia incertezas 🧠⚡

Alisson F. — Thu, 15 May 2025 19:56:33 +0000

Loading, microanimações, estados vazios e validações visuais.

Cliquei no botão. Mas… ele funcionou?

Enviei o formulário? O carregamento começou?

A incerteza gera desconforto. E isso tem base biológica.

🧬 Nosso cérebro precisa de resposta

O cérebro humano é uma máquina de previsões.

A cada ação, ele espera uma reação.

Quando não há resposta visual (mesmo que sutil), o cérebro entra em estado de atenção incômoda, tentando entender se algo deu errado.

Isso aumenta:

Carga cognitiva
Estresse
Abandono de tarefas

🎯 O papel do feedback imediato nas interfaces

O bom design responde ao usuário instantaneamente:

Botões que mudam de estado ao clicar
Loadings que aparecem sem atrasos
Animações que confirmam uma ação
Erros que surgem com clareza

Esses pequenos detalhes dizem ao cérebro:

✅ “Está tudo certo, você pode seguir.”

🔍 Microinterações que aliviam a ansiedade

Microinterações são respostas visuais ou auditivas que comunicam ação e resultado.

Exemplos comuns:

Ícone girando ao carregar
“✔️” após salvar com sucesso
Campo com borda vermelha ao preencher errado
Skeletons (esqueletos de conteúdo) durante carregamento

Esses sinais evitam o “e agora?” e mantêm o usuário no fluxo.

🔬 Estudos que comprovam

Segundo pesquisas de UX, como as de Jakob Nielsen e Susan Weinschenk:

“Atrasos superiores a 1 segundo sem resposta aumentam significativamente o abandono de tarefas.”

Além disso, a falta de feedback aumenta o nível de cortisol (hormônio do estresse), afetando diretamente a experiência emocional com o sistema.

🧠 Interfaces responsivas = usuários relaxados

O feedback imediato atua como um atalho cognitivo:

Ele diz ao cérebro que a ação foi recebida, reduzindo a carga de pensamento e aumentando a confiança no sistema.

Não é sobre animações bonitas.

É sobre neurociência aplicada à experiência do usuário.

✅ Boas práticas para aplicar agora

Evite cliques mudos: todo botão deve dar uma resposta
Mostre progresso: use barras, círculos ou skeletons
Confirme ações: salvos, deletados, enviados… sempre deixe claro
Não atrase o feedback esperando o resultado final: inicie a resposta assim que possível

📌 Conclusão

Seu usuário não quer adivinhar se funcionou — ele quer sentir que funcionou.

Projetar boas interfaces é também respeitar o modo como o cérebro lida com a incerteza.

🧠 Este é o post 5 da série Neurointerfaces: como o design conversa com o cérebro humano.

Scroll infinito e dopamina: o UX que vicia 🧠📱

Alisson F. — Wed, 14 May 2025 11:11:00 +0000

Sistemas de recompensa, comportamento viciante e design ético

Você já se pegou rolando a timeline sem nem perceber?

Começou só “dando uma olhada” e, quando viu, se passaram 20 minutos?

Isso não é acaso.

É design — mais especificamente, design de recompensa neural.

🎯 O que é o scroll infinito?

O scroll infinito é um padrão de interface onde o conteúdo carrega continuamente à medida que o usuário rola a página.

Muito usado em redes sociais, feeds de notícia e marketplaces.

É conveniente.

Mas também é viciante. E tem explicação científica.

🧠 Dopamina: o combustível do vício

A dopamina é um neurotransmissor ligado ao prazer, motivação e recompensa.

Toda vez que você:

Vê algo interessante no feed
Recebe uma notificação
Encontra uma imagem impactante

Seu cérebro libera dopamina — e você quer mais.

Esse ciclo de recompensa intermitente é parecido com o que acontece em cassinos.

Você rola, rola, rola… e de vez em quando, BINGO! Algo legal aparece.

🧪 Estudos sobre isso

📚 O psicólogo B.F. Skinner estudou esse tipo de comportamento nos anos 1950.

Ele mostrou que recompensas imprevisíveis (como um bom post aleatório no feed) são muito mais eficazes para gerar repetição de comportamento do que recompensas constantes.

Designers de produtos modernos entenderam isso muito bem.

⚠️ O lado sombrio: vício por design

Essa mecânica, quando mal utilizada, pode levar a:

Redução da atenção
Aumento da ansiedade
Sentimento de exaustão
Comportamento compulsivo

É o que chamamos de "dark UX": usar a psicologia contra o usuário, e não a favor.

💡 Design ético: usar com responsabilidade

Scroll infinito pode ser útil, mas exige cuidado.

Se você está criando uma interface com essa técnica, pense em:

Limites visuais: indicar quando o conteúdo vai acabar
Sinais de progresso: mostrar quantos itens foram exibidos
Pausas naturais: botões de “carregar mais” ou blocos com separadores
Opção de marcar como lido ou “voltar depois”

O poder está nas suas mãos. Use bem.

🔚 Conclusão

Scroll infinito é um exemplo perfeito de como interfaces conversam com o cérebro — e moldam o comportamento.

Você está projetando para entreter, informar ou prender?

🧠 Este é o post 4 da série Neurointerfaces: como o design conversa com o cérebro humano.

Interfaces que cansam: atenção visual e burnout de tela

Alisson F. — Tue, 13 May 2025 11:11:00 +0000

Fadiga visual, hierarquia de informação e contraste ideal

Você já terminou o dia com a visão cansada e a mente estourando, mesmo sem sair da frente do computador?

Pois é. A culpa pode não ser do trabalho em si, mas do design da interface que você está usando (ou criando).

Neste post, vamos entender como a atenção visual funciona e por que interfaces mal pensadas cansam mais do que deveriam.

👀 O cérebro e a atenção visual

Nosso sistema visual não foi feito para ambientes digitais.

Ele evoluiu para detectar predadores, rostos e comida em ambientes naturais.

Mas hoje, estamos lidando com:

Telas com dezenas de elementos simultâneos
Notificações, banners, abas e sidebars
Pouco contraste entre elementos importantes

E nosso cérebro luta para filtrar o que é relevante.

🔻 A hierarquia visual reduz o esforço

Uma boa interface guia o olho.

Ela diz, sem palavras:

“Comece por aqui.”

“Isso é importante.”

“Ignore o resto por agora.”

Como criar uma boa hierarquia?

Destaque apenas UM ponto de foco por tela
Use tamanhos, cores e espaçamentos com intenção
Quebre o conteúdo em blocos visuais (respeitando o scanning natural em F ou Z)

💤 O burnout de tela é real

O chamado screen fatigue acontece quando:

Há informação demais ao mesmo tempo
Tudo compete por atenção (sem pesos visuais diferentes)
O contraste entre fundo e texto é mal equilibrado
Não há espaços de descanso (respiro visual)

Se a tela parece um PowerPoint com gritos, o cérebro se desliga.

E o usuário também.

🎯 Contraste é mais do que estética

O contraste ideal melhora a legibilidade e reduz o esforço cognitivo.

🧪 Um estudo de Hall & Hanna (2004) mostrou que interfaces com contraste equilibrado resultam em melhor retenção de informação e leitura mais rápida.

Dicas rápidas:

Texto escuro em fundo claro funciona melhor para longas leituras
Contraste alto entre botões e fundo melhora cliques
Cuidado com tons de cinza claro em telas com brilho variável

💡 Conclusão

Interface bonita não basta.

Ela precisa trabalhar junto com o cérebro, não contra ele.

Quando você alivia a carga visual, a mente agradece — e o engajamento aumenta.

🧠 Este é o post 3 da série Neurointerfaces: como o design conversa com o cérebro humano.

O cérebro odeia pensar: o poder da interface óbvia

Alisson F. — Mon, 12 May 2025 12:42:51 +0000

Dia 2 - Neurointerfaces — Como nosso cérebro enxerga o Frontend

“Don't make me think.”

— Steve Krug

Essa frase virou um clássico do design de interfaces. E ela tem base neurocientífica:

nosso cérebro evita ao máximo o esforço cognitivo desnecessário.

🧠 Por que o cérebro evita pensar?

Segundo a Teoria do Processamento Dual (Kahneman, 2011), o cérebro humano opera com dois sistemas:

Sistema 1: rápido, automático, intuitivo.
Sistema 2: lento, deliberado, requer esforço.

Sempre que possível, o cérebro usa o Sistema 1 — e só ativa o 2 se for realmente necessário.

Isso significa que interfaces que exigem leitura, análise ou adivinhação ativam o sistema mais lento — e geram frustração.

📱 Interfaces que cansam vs. interfaces que fluem

Cansam:

Ícones sem legenda (usuário precisa adivinhar)
Menus escondidos (hambúrguer, submenus profundos)
Mudanças de padrão (ex: botão de "enviar" que parece um ícone)

Fluem:

Elementos previsíveis e familiares
Legendas claras
Hierarquia visual forte
Espaço em branco bem utilizado

💡 Curiosidade:

Estudos de eye-tracking (rastreio ocular) mostram que usuários criam um padrão de leitura em F na tela. Isso significa que eles escaneiam de cima para baixo e da esquerda para a direita — e ignoram o resto.

🔬 Pesquisas que confirmam

Kahneman, D. (2011). Thinking, Fast and Slow.
Krug, S. (2014). Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability.
Nielsen Norman Group (2006). F-Shaped Pattern For Reading Web Content.

Essas obras explicam por que o design intuitivo funciona melhor: ele não força o cérebro a sair do “modo automático”.

✅ Como tornar sua interface mais óbvia

Reduza a necessidade de pensar.
- Use padrões comuns da web.
Priorize clareza sobre criatividade.
- Não reinvente botões sem motivo.
Dê pistas visuais.
- Ícones com texto, hierarquia, espaçamento.
Teste com usuários reais.
- Se alguém hesita antes de clicar, sua interface não está clara o suficiente.

✨ Conclusão

Criar uma interface clara é um ato de empatia: você está poupando energia mental do seu usuário.

Se ele entender o que fazer sem precisar pensar, você venceu.

💬 Agora me conta:

Qual interface você achou mais confusa recentemente?

Comenta aqui e vamos analisar no próximo post da série! 👇

Neurointerfaces - Por que botões devem parecer botões?

Alisson F. — Fri, 09 May 2025 19:48:53 +0000

Heurísticas visuais, affordances e como o cérebro reconhece padrões.

Imagine abrir um site, precisar realizar uma ação... e não saber onde clicar.

A culpa não é sua — é da interface.

O cérebro humano é uma máquina de padrões. Ele não "vê" do zero — ele reconhece.

🧠 Como nosso cérebro percebe interfaces?

Segundo estudos em psicologia cognitiva e neurociência visual, nossa mente:

Não analisa tudo com atenção plena. Ela depende de heurísticas visuais — atalhos mentais baseados em experiências anteriores.
Detecta padrões antes de detalhes. Isso significa que formas, sombras e cores familiares (como um botão azul com bordas arredondadas) são reconhecidos rapidamente como “clicáveis”.
Evita esforço cognitivo. A mente prefere elementos previsíveis e consistentes — por isso o botão deve parecer botão, o link deve parecer link.

📚 Referências científicas:

Norman, D. A. (2013). The Design of Everyday Things. Basic Books.
Nielsen, J. (1994). Usability Engineering.
Hassenzahl, M. (2004). The Interplay of Beauty, Goodness, and Usability in Interactive Products. Human–Computer Interaction, 19(4), 319–349.
Hoober, S., & Berkman, E. (2011). Designing Mobile Interfaces (O'Reilly).

🎨 Affordances e o "parecer clicável"

O termo affordance, cunhado por James Gibson e popularizado no design por Donald Norman, se refere à aparência funcional de um objeto.

Exemplo visual:

Um botão com sombra, relevo e cor destacada → sugere "pressione-me".
Um texto azul sublinhado → sugere "sou um link".

Se isso estiver ausente, seu usuário terá que pensar. E quando o cérebro precisa pensar demais... ele desiste.

🔎 Casos reais e consequências

Interfaces com “botões invisíveis” ou ações escondidas atrás de ícones sem legenda tendem a:

Reduzir taxas de conversão
Aumentar a frustração do usuário
Criar barreiras de acessibilidade

Um exemplo infame: o botão “hambúrguer” sem legenda em apps mobile. Segundo estudos da NNGroup, esse botão reduz a descoberta de conteúdo em até 20% se não for claramente identificado.

✅ Boas práticas para aplicar agora:

Use padrões visuais reconhecíveis.
- Cores, tamanhos e posicionamentos que já são familiares.
Dê feedback visual ao hover e clique.
- O cérebro busca confirmação.
Teste com usuários reais.
- Um botão que parece óbvio para o dev pode estar invisível para o usuário.

✨ Conclusão

O design de interface não é só sobre estética — é sobre psicologia aplicada.

Respeitar a forma como o cérebro humano percebe e interage com o mundo é criar uma experiência verdadeiramente intuitiva.

💬 E você?

Já clicou (ou deixou de clicar) em algo porque não parecia um botão?

Compartilha aí — quero trazer exemplos reais nos próximos posts!

setTimeout vs setInterval — Evite bugs comuns no JavaScript

Alisson F. — Thu, 08 May 2025 19:30:03 +0000

setTimeout e setInterval parecem simples, mas escondem pegadinhas comuns que já derrubaram muito código por aí.

Hoje, você vai entender de vez quando usar cada um — e evitar os bugs invisíveis que eles podem causar.

🧠 Diferença básica

setTimeout(fn, delay);
// Executa APENAS UMA VEZ após o delay

setInterval(fn, delay);
// Executa INFINITAMENTE a cada delay

⛔ Problemas comuns

❌ Usar `setInterval` sem controle

setInterval(() => {
  console.log('Executando...');
}, 1000);

Se você esquecer do clearInterval(), esse código nunca para. E se você chamar ele várias vezes? Vai ter múltiplas execuções simultâneas — e talvez nem perceba.

✅ Melhor com `setTimeout` + recursão

function loopControlado() {
  console.log('Executando...');
  setTimeout(loopControlado, 1000);
}

loopControlado();

Com isso, você controla melhor a execução e evita intervalos sobrepostos.

⚙️ Quando usar cada um

Caso de uso	Use
Executar uma vez após um tempo	`setTimeout`
Criar uma animação leve	`setTimeout` (recursivo)
Intervalos constantes e previsíveis	`setInterval` (com `clearInterval`)
Atualizar UI a cada segundo (temporariamente)	`setInterval` + `clearInterval`

💡 Alternativa moderna

requestAnimationFrame(() => {
  // executa antes do próximo repaint
});

Ótimo para animações mais suaves. Ele pausa quando a aba fica inativa, economizando performance.

💬 E você?

Já deixou um setInterval rodando sem perceber?

Ou já viu o navegador travar por conta disso? 😅

Conta aqui nos comentários 👇

null, undefined, NaN ou ''? Pare de errar e entenda de vez!

Alisson F. — Wed, 07 May 2025 20:28:06 +0000

Esses quatro valores vivem aparecendo no JavaScript — e confundem todo mundo, principalmente quando usados em comparações ou validações:

null
undefined
NaN
''

Eles são parecidos, mas têm diferenças importantes. Bora entender de vez? 👇

🤔 O que é o que

`undefined`

Valor padrão de uma variável não inicializada, ou retorno de uma função sem return.

let x;
console.log(x); // undefined

`null`

Valor que você define manualmente para indicar "nenhum valor".

let user = null;

`NaN` (Not a Number)

Resultado de uma operação matemática inválida.

console.log("abc" * 3); // NaN

`''` (string vazia)

Literalmente uma string sem caracteres. Ainda é um valor válido.

let nome = '';
console.log(nome.length); // 0

🔍 Comparando lado a lado

console.log(null == undefined); // true (valor)
console.log(null === undefined); // false (tipo)

console.log(NaN == NaN); // false
console.log(Number.isNaN(NaN)); // true

console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean('')); // false

Todos são considerados falsy, mas têm comportamentos distintos!

🧠 Dica rápida de validação

Cuidado com ==! Use === para evitar surpresas.

Se quiser saber se uma variável está "sem valor", essa abordagem é mais segura:

if (value === null || value === undefined || value === '') {
  // trate o caso aqui
}

💬 Qual desses já te deu dor de cabeça?

Conta aqui nos comentários 👇

Ou salva esse post pra não esquecer 🔖

Evite requisições desnecessárias com debounce em JavaScript

Alisson F. — Mon, 05 May 2025 20:46:24 +0000

Você já digitou algo em um campo de busca e, a cada letra digitada, uma nova requisição era feita para a API?

Isso é ineficiente.

A solução? debounce()

📌 O que é `debounce`?

É uma técnica usada para adiar a execução de uma função até que um tempo específico tenha passado sem novas chamadas.

É muito usado em:

buscas dinâmicas (auto-complete)
eventos de rolagem (scroll)
eventos de resize

⚙️ Exemplo prático:

Imagine um campo de busca que chama a API a cada tecla:

function search(term) {
  fetch(`https://api.exemplo.com/search?q=${term}`)
    .then(res => res.json())
    .then(console.log);
}

input.addEventListener("input", (e) => {
  search(e.target.value);
});

Isso gera chamadas demais.

Agora, com debounce:

function debounce(fn, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

const debouncedSearch = debounce(search, 500);

input.addEventListener("input", (e) => {
  debouncedSearch(e.target.value);
});

Agora só é chamada a API depois que o usuário parar de digitar por 500ms.

🛠️ Dica bônus: usando com React

No React, pode usar com useCallback ou bibliotecas como lodash.debounce:

import debounce from 'lodash.debounce';

const debounced = useCallback(
  debounce((value) => {
    // chamada de API aqui
  }, 300),
  []
);

💬 Já usou debounce em algum projeto?

Conta aqui nos comentários como implementou 👇
Ou salva esse post pra usar depois! 🔖

5 coisas que eu gostaria de saber quando comecei a programar

Alisson F. — Wed, 30 Apr 2025 19:28:40 +0000

Depois de alguns anos programando, percebi que o que mais atrasa a gente nem sempre é código.

É a forma como pensamos sobre ele.

Aqui vão 5 coisas que eu só aprendi errando, e que talvez ajudem você também:

1. Aprender rápido não é melhor do que aprender direito

Tentei absorver tudo de uma vez, fiz mil cursos ao mesmo tempo…

Resultado? Esqueci tudo.

Aprender devagar e com propósito vale mais do que correr atrás da stack da moda.

2. Copiar código não é problema. Copiar sem entender é.

Stack Overflow salvou vidas.

Mas por muito tempo, eu colava código que resolvia… sem saber o porquê.

Hoje, sempre leio, testo, experimento. O ganho real vem quando você entende o que está por trás.

3. Saber inglês me fez evoluir 10x mais rápido

Não é sobre fluência.

É sobre conseguir ler documentação, Stack Overflow, blogs, Reddit…

Se você quer viver de código, invista no básico do inglês técnico.

4. Todo programador trava. Todo.

A diferença entre quem progride e quem desiste é que uns continuam mesmo travados.

Debugar o próprio código, pedir ajuda, dar uma pausa — isso também é parte do trabalho.

5. A síndrome do impostor nunca some totalmente (e tá tudo bem)

Achar que você "não é bom o suficiente" não significa que seja verdade.

Significa que você se importa.

Programar é crescer no meio da incerteza. Só continua. Vai por mim.

💬 E você?

Qual foi a coisa mais valiosa que você aprendeu programando (e gostaria de ter sabido antes)?

Me conta aqui nos comentários 👇

DEV Community: Alisson F.

Design de vício: o que apps aprenderam com cassinos

🎰 Recompensas variáveis: o núcleo do vício

🔔 Notificações: os sinos do cassino digital

🎯 Gamificação e loops de engajamento

🧠 A neurociência por trás

⚖️ O dilema ético

✅ Como combater isso?

💬 Conclusão

A ilusão da escolha: como a interface guia decisões 🧠🎯

🧠 Cérebro humano e tomada de decisão

O modelo dos dois sistemas (Daniel Kahneman)

🎨 Como o design molda escolhas

📌 Exemplo real: Cancelar uma assinatura

⚠️ Dark Patterns: influência mal-intencionada

Alguns tipos comuns:

🧠 Por que isso funciona?

🧪 Estudo de caso: escolhas falsas no design

🧭 Interfaces éticas: como guiar sem manipular

Boas práticas:

💡 Conclusão

O cérebro lembra com os olhos: UX e memória visual 🧠👁️

🧠 A mente é visual por natureza

🧩 Memória operacional e consistência de padrões

🎯 O poder das referências visuais

🔍 Cores, formas e posições são memórias

🧪 O que dizem as pesquisas?

💡 Como aplicar na prática

📌 Conclusão

Feedback imediato: por que o cérebro odeia incertezas 🧠⚡

🧬 Nosso cérebro precisa de resposta

🎯 O papel do feedback imediato nas interfaces

🔍 Microinterações que aliviam a ansiedade

🔬 Estudos que comprovam

🧠 Interfaces responsivas = usuários relaxados

✅ Boas práticas para aplicar agora

📌 Conclusão

Scroll infinito e dopamina: o UX que vicia 🧠📱

🎯 O que é o scroll infinito?

🧠 Dopamina: o combustível do vício

🧪 Estudos sobre isso

⚠️ O lado sombrio: vício por design

💡 Design ético: usar com responsabilidade

🔚 Conclusão

Interfaces que cansam: atenção visual e burnout de tela

👀 O cérebro e a atenção visual

🔻 A hierarquia visual reduz o esforço

💤 O burnout de tela é real

🎯 Contraste é mais do que estética

💡 Conclusão

O cérebro odeia pensar: o poder da interface óbvia

Dia 2 - Neurointerfaces — Como nosso cérebro enxerga o Frontend

🧠 Por que o cérebro evita pensar?

📱 Interfaces que cansam vs. interfaces que fluem

Cansam:

Fluem:

💡 Curiosidade:

🔬 Pesquisas que confirmam

✅ Como tornar sua interface mais óbvia

✨ Conclusão

💬 Agora me conta:

Neurointerfaces - Por que botões devem parecer botões?

Heurísticas visuais, affordances e como o cérebro reconhece padrões.

🧠 Como nosso cérebro percebe interfaces?

📚 Referências científicas:

🎨 Affordances e o "parecer clicável"

🔎 Casos reais e consequências

✅ Boas práticas para aplicar agora:

✨ Conclusão

💬 E você?

setTimeout vs setInterval — Evite bugs comuns no JavaScript

🧠 Diferença básica

⛔ Problemas comuns

❌ Usar setInterval sem controle

✅ Melhor com setTimeout + recursão

⚙️ Quando usar cada um

💡 Alternativa moderna

💬 E você?

null, undefined, NaN ou ''? Pare de errar e entenda de vez!

🤔 O que é o que

❌ Usar `setInterval` sem controle

✅ Melhor com `setTimeout` + recursão

`undefined`

`null`

`NaN` (Not a Number)

`''` (string vazia)

📌 O que é `debounce`?