Manual técnico · séries de tutoriais com demo executável

ENGENHARIA
PARA DEVS

Cada tutorial desta planta é uma prancha de desenho técnico: especificação à esquerda, teste de bancada executável à direita. Edite o código, aperte RUN e veja o comportamento ao vivo — sem sair da página.

pranchas

100%

demorodando no post

JS/CSS

vanilla puro

REVB

desenho técnico

Eng. spec · tutorial 01

ORDENAÇÃO VISUAL — bubble sort em tempo real

Prancha

P1/4

Revisão

Escala

1:1

Status

EM BANCADA

Ordenar não é mágica: é trocar vizinhos até sobrar nada. O bubble sort compara pares, troca quando estão fora de ordem e "flutua" o maior para o fim a cada passada. Edite o código e veja cada comparação e cada troca acontecer na bancada.

complexidade O(n²)in-placeestávelensino

especificação · main.jsEDITÁVEL

const A = [54,21,88,13,97,35,62,8,74,29,45,82,18,90,41,66];
const n = A.length;
ctx.log("Iniciando bubble sort…");
for (let i = 0; i < n - 1; i++) {
  for (let j = 0; j < n - 1 - i; j++) {
    await ctx.step(A, { cmp: [j, j + 1] });   // compara par
    if (A[j] > A[j + 1]) {
      const t = A[j]; A[j] = A[j + 1]; A[j + 1] = t;
      await ctx.step(A, { cmp: [j, j + 1] }); // marca a troca
    }
  }
  ctx.tail(i + 1);                            // flutuou p/ o fim
}
ctx.done();

vel pronto

teste de bancada · visualizaçãoLIVE

nota de projeto

O ctx é a interface da bancada: step(A, cfg) desenha um quadro (cmp = índices comparados em âmbar), tail(k) fixa as k últimas posições em verde, done() valida e aprova o teste. Tente: troque os números do array, ou troque o < por > e veja a ordem inverter.

◉ teste aprovado

Eng. spec · tutorial 02

ASYNC/AWAIT — fila de promessas na bancada

Prancha

P2/4

Revisão

Escala

1:1

Status

EM BANCADA

JavaScript não espera ninguém — a menos que você peça. async/await serializa assíncronos: cada await pausa a função até a promessa resolver, sem travar a thread. A fila abaixo roda tarefas em sequência; troque por Promise.all e veja virarem paralelas.

event looppromessasnão-bloqueantesequência vs paralelo

especificação · fila.jsEDITÁVEL

const tarefas = [
  { nome: "buscar usuário", ms: 600 },
  { nome: "buscar posts",    ms: 900 },
  { nome: "buscar avatar",   ms: 350 },
  { nome: "montar página",   ms: 500 },
];
ctx.log("Fila iniciada — aguardando em sequência…");
for (const t of tarefas) {
  ctx.add(t.nome, t.ms);        // enfileira e mostra a barra
  await ctx.wait(t.ms);         // trava até resolver
  ctx.ok(t.nome);               // marca como resolvida
}
ctx.log("Todas resolvidas em sequência ✓");
ctx.log("Agora em paralelo com Promise.all…");
ctx.parallel(tarefas);          // bônus: roda tudo junto
ctx.log("Paralelo concluído ✓ tempo total = maior tarefa");

pronto

teste de bancada · fila de promessasLIVE

nota de projeto

A interface expõe add(nome, ms) (cria a barra), wait(ms) (simula latência com animação de progresso), ok(nome) e parallel(lista). Tente: mude os milissegundos, adicione uma tarefa, ou remova o laço e chame as funções uma a uma.

◉ teste aprovado

Eng. spec · tutorial 03

DEBOUNCE & THROTTLE — domando a rajada de eventos

Prancha

P3/4

Revisão

Escala

1:1

Status

EM BANCADA

Cada tecla dispara um evento — e chamar a API a cada tecla afunda o servidor. Debounce espera a pausa e dispara uma vez no fim; throttle limita a no máximo 1 por intervalo. Digite na bancada e veja a diferença nos contadores ao vivo.

performanceinputbusca autocompletescroll/resize

especificação · config.jsEDITÁVEL

// Ajuste os tempos e clique APLICAR
const DEBOUNCE_MS = 400;   // espera silenciosa antes de disparar
const THROTTLE_MS = 600;   // intervalo mínimo entre disparos

// as implementações usadas pela bancada:
function debounce(fn, ms) {
  let t;
  return function (...args) {
    clearTimeout(t);
    t = setTimeout(() => fn.apply(this, args), ms);
  };
}
function throttle(fn, ms) {
  let last = 0;
  return function (...args) {
    const now = Date.now();
    if (now - last >= ms) { last = now; fn.apply(this, args); }
  };
}

pronto

teste de bancada · digitação ao vivoLIVE

eventos brutos

debounce (fim)

throttle (1/intervalo)

disparos aparecem aqui — ● evento · ● debounce · ● throttle

nota de projeto

Debounce é para "quando parar de digitar" (busca, autosave). Throttle é para "no máximo a cada X" (scroll, resize, cliques). Na prática, autocomplete usa debounce; contador de scroll usa throttle. Tente: aplique 100ms e 2000ms e compare.

◉ teste aprovado

Eng. spec · tutorial 04

ANIMAÇÃO CSS — laboratório de timing & easing

Prancha

P4/4

Revisão

Escala

1:1

Status

EM BANCADA

Animação boa não é velocidade — é ritmo. A curva cubic-bezier decide se o movimento acelera, desacelera, ou dá aquele "estilingue" que o olho adora. Gire os controles, dispare o bloco e copie o CSS gerado.

cubic-beziertransition60fpstransform

especificação · gerado ao vivoCONTROLES

duração 900ms atraso 0ms curva

▣

teste de bancada · o que você levaCOPY

A regra CSS exata do movimento que você configurou — pronta para colar no seu projeto. O bloco percorre a pista e volta ao ponto inicial a cada disparo (a volta usa a mesma curva).

pronto

regra de ouro

Anime transform e opacity (GPU), nunca left/top/width — evita reflow e mantém 60fps. Foi o que fizemos: só translateX.

◉ teste aprovado

ENGENHARIAPARA DEVS

ENGENHARIA
PARA DEVS