Todos os 20 tipos de demo

01Um ou muitos — não há limite

O erro mais comum é tratar estes vinte tipos como um cardápio onde você pede exatamente um prato. Não são. São uma paleta de tintas. Uma lição é uma pintura, e você pega quantas cores a tela pedir — às vezes uma pincelada forte, às vezes uma dúzia combinadas. Uma ideia magra pode precisar de um único diagrama. Uma lição rica, de muitos momentos, pode empilhar um slide-deck para montar a cena, um SVG anotado para mostrar a anatomia, um simulador para o leitor controlar, um painel de estado para ler a situação, e um quiz para conferir se fixou. Tudo isso, em uma só lição, não é demais — é exatamente o ponto.

• Um está ótimo. Um único flowchart bem escolhido pode carregar uma lição inteira sobre um processo com ramificações.
• Muitos está ótimo — e é incentivado. Encadeie vários na ordem das seções; cada um ganha sua própria introdução em linguagem simples.
• Combinar está ótimo. Funda dois exemplares em um só widget — um flowchart cujos nós controlam um painel de estado, por exemplo.
• Reutilizar entre lições está ótimo. O mesmo tipo, enquadrado para um trabalho de ensino diferente, ensina melhor do que forçar um novo.
• Não há máximo. Adequação antes de quantidade — nunca encha linguiça num momento magro, nunca deixe um rico passando fome. Use quantos o ensino genuinamente pedir: um, ou quarenta.

Monte o conjunto de demos de uma lição

Abaixo está o formato de feature-flags (tipo 19) religado à ideia desta página. Cada switch liga um tipo de demo para uma lição imaginada. Alguns tipos dependem de outro estar presente primeiro — um quiz para "conferir se fixou" só faz sentido depois que algo foi mostrado; um exemplo resolvido precisa do conceito explicado. Ligue um sem o seu suporte e um aviso aparece. O resumo te diz quantos demos sua lição usa agora — e repare que ele nunca te impede de usar demais. Não há limite.

const requires = {
  g19_explain:    [],                 // momento base
  g19_show:       ['g19_explain'],     // mostrar precisa do conceito primeiro
  g19_try:        ['g19_show'],        // conduzir o que foi mostrado
  g19_check:      ['g19_try'],         // conferir o que tentaram
  g19_summarise:  []                  // independente — adicione a qualquer hora
};
// nenhuma regra limita o tamanho do conjunto — só a consistência é exigida.

02A escolha é um debate por momento

Então, se não é "sempre abas" e não é "sempre um", como escolher? Você quebra a lição em seus momentos e debate cada momento isoladamente. Um momento é uma jogada de ensino: explicar como funciona, depois mostrar, depois deixar tentar, depois conferir se fixou. Cada momento tem exatamente um trabalho de ensino, e cada trabalho tem uma pequena short-list de tipos que o fazem bem. O debate é curto e explícito, e você registra o veredito para que a próxima pessoa veja o raciocínio, não só o resultado.

O debate tem quatro jogadas. Rode-o uma vez por momento:

• Nomeie o trabalho em uma frase — explicar como algo funciona, comparar opções, mostrar um processo ao longo do tempo, ler o estado atual, ensinar através de uma falha, deixar o leitor conduzir, resumir, narrar uma mudança, ou ajustar parâmetros.
• Liste dois ou três candidatos a partir do mapa trabalho→tipo para aquela frase.
• Escolha o melhor encaixe com uma razão de uma linha — e nomeie o vice que você rejeitou e por quê. A razão é o debate.
• Decida quantos. Um momento é um demo; uma lição de muitos momentos encadeia vários; dois trabalhos fortemente acoplados podem se fundir em um widget.

Percorra a escolha, uma pergunta de cada vez

Aqui está o formato de flowchart (tipo 13) religado como o próprio seletor. Escolha um trabalho de ensino no topo, depois pressione Próximo para ver a decisão descer pelos gates até o tipo de demo de melhor encaixe. Cada "sim" compromete uma família; uma execução limpa cai em um tipo específico. Esta é a jogada 3 "escolher" do debate, tornada mecânica.

O mapa trabalho → tipo-candidato

O flowchart compromete rápido; a short-list real é mais rica. Este é o mapa completo de onde toda jogada "listar candidatos" puxa — o vice que você nomear normalmente será a segunda linha do mesmo trabalho.

Nomeie o trabalho, chegue ao tipo

Mais uma religação da mesma ideia, desta vez como o formato de máquina de estados (tipo 08). Cada botão é um trabalho de ensino; pressioná-lo move o nó destacado para a família que faz aquele trabalho, e a leitura nomeia o tipo exato mais o seu vice. É uma maquininha: (start, job) → type. Chegue a um tipo, depois reset para tentar outro trabalho.

03Qual demo em qual momento do loop

Este é um curso sobre o loop LEARN → ANALYZE → EXECUTE → VERIFY, então a maneira mais útil de ler a paleta é por onde no loop cada tipo faz o seu trabalho. Um demo não é decoração; ele torna um momento específico do loop visto e sentido. As legendas em cada card abaixo nomeiam esse momento com precisão. Eis o formato disso:

Leia como uma atribuição aproximada, não uma lei: tipos de exploração e pesquisa tendem a alimentar LEARN e ANALYZE (enxergar o estado real, pesar opções); tipos de design, protótipo e código alimentam EXECUTE (construir a única unidade delimitada); tipos de relatório e editor alimentam VERIFY e os gates (provar, ler estado, ajustar). Muitos tipos servem mais de um momento — e é por isso que o debate por momento, não uma tabela de consulta, dá a palavra final.

Cubra a paleta — um rastreador de cobertura

Um curso completo exercita a maioria ou todos os vinte tipos; reduzir a um ou dois é um mau cheiro — o leitor para de se engajar. Aqui está o formato de status-report (tipo 11) religado para rastrear a cobertura da paleta neste próprio curso. Pressione Construir próxima lição para incorporar o conjunto de demos de uma lição e ver os blocos subirem, ou ative o Auto-construir para ver as oito lições se montarem. A tabela mostra, por tipo, quantas lições recorreram a ele.

04A ideia inteira em sete slides

Antes do catálogo em si, aqui está o argumento desta página comprimido em um deck — uma ideia por slide. Clique para avançar, ou use as setas do teclado.

05O catálogo, agrupado por família

Os vinte tipos se dividem em sete famílias pelo tipo de trabalho que fazem. Dentro de cada card: o número e o nome, uma nota de uma ou duas linhas sobre quando e como usá-lo no loop, uma miniatura segura no modo escuro do seu formato, e um link Abrir para o demo standalone completo. Uma estrela (★) marca os tipos de maior valor.

06Verificação rápida

Cinco perguntas sobre a regra única e o debate. Escolha uma resposta para corrigi-la na hora; a certa fica verde-oliva e uma nota curta explica por quê.