Categoria
Web e HTTP
Todas as ferramentas e artigos desta categoria, reunidos em um só lugar.
Ferramentas
Calculadora de especificidade CSS
Cole um ou mais seletores CSS, ou uma folha de estilos inteira, e leia a especificidade de cada seletor como a tripla (A, B, C) do Selectors Level 4, cada seletor simples nomeado com a coluna a que soma, os seletores ordenados como a cascata os ordena com os empates apontados, e os casos especiais explicados: :where() não conta nada, :is(), :not() e :has() tomam o argumento mais específico, :nth-child(of) soma o seu argumento, o seletor universal não soma nada, uma classe repetida conta duas vezes, um pseudoelemento legado de dois-pontos simples conta como um. Com o lembrete das cinco coisas que a cascata verifica antes da especificidade.
Construtor de comandos curl
Escolha qualquer um dos 27 protocolos que o curl fala, preencha campos que se adaptam ao protocolo e receba o comando exato, com cada flag explicada e avisos de segurança. O inverso do tradutor de requisições HTTP: aquele lê um comando, este escreve um.
Contraste e formato de cor
Duas cores em qualquer notação CSS (nome, hex, rgb, hsl, hwb, lab, lch, oklab, oklch, color()) e saem a razão de contraste WCAG com aprovação ou reprovação em cada nível (AA e AAA, texto normal e grande, componentes de interface), uma prévia ao vivo, cada cor convertida a todas as notações com a sua luminância relativa, e o primeiro plano mais próximo que passaria em cada nível reprovado. Aritmética pura das fórmulas WCAG e do código de exemplo do CSS Color Level 4; nada sai do navegador.
Decodificador de mensagens HTTP
Cole uma requisição ou resposta HTTP/1.1 bruta e leia-a decodificada: a linha de requisição ou de status contra os registros da IANA, cada campo arquivado sob a parte da especificação que o define, a decisão de enquadramento que a RFC 9112 toma para o corpo (qual das oito regras se aplica, Content-Length contra os bytes presentes, Transfer-Encoding sobrepondo-o, os chunks decodificados um a um com os trailers), e as credenciais e cookies que a mensagem carrega, expostos e mascarados. A metade que só decodifica do inspetor de um proxy de interceptação: nunca envia, repete nem altera.
explicador de comando curl
Cole um comando curl e receba a explicação sinalizador por sinalizador, e depois a tradução para fetch, requisição HTTP crua, HTTPie e Python. Nada é enviado e nenhuma requisição é executada.
Explicador de estrutura HTML e DOM
Cole HTML e leia a árvore que o parser de HTML constrói a partir dele: cada elemento, nó de texto e comentário com a sua linha, os elementos que o parser criou sem tag (html, head, body, tbody), as tags de fechamento que ele supriu, os elementos de formatação que dividiu e o conteúdo que moveu para fora de uma tabela, com o modo do documento (quirks ou não) e cada erro de análise pelo código e posição da própria especificação. Depois, os achados: o DOCTYPE, o idioma, o título, a codificação, imagens sem texto alternativo, links e botões sem nome, saltos de título, ids duplicados, controles sem rótulo, elementos e atributos obsoletos, cada um ligado a uma frase do HTML Standard ou da WCAG 2.2. Só análise: nenhum script roda, nada é buscado, nada é renderizado.
Inspetor de meta, Open Graph e JSON-LD
Cole uma página, ou só o seu head, e leia tudo o que ela declara do modo como cada padrão lê: o title e a codificação de caracteres pelo HTML Standard, cada elemento meta classificado (os nomes do próprio padrão, o registro MetaExtensions do WHATWG, as diretivas pragma, as não conformes), cada elemento link com os seus tokens rel (canonical pela RFC 6596, alternates hreflang, ícones, manifest), o objeto Open Graph com os seus arrays e propriedades estruturadas pelo ogp.me, as propriedades de card twitter:* como registradas, as regras de robots e googlebot pela lista publicada do Google, o viewport, e cada bloco JSON-LD analisado e esboçado pelo JSON-LD 1.1. Quarenta e seis achados, cada um citando a frase em que se apoia. Analisado de modo inerte com o parse5; nada é buscado ou executado.
Inspetor de URL
Disseca qualquer URL em suas partes nomeadas: esquema, host, porta, caminho, parâmetros de query e fragmento. Decodifica escapes percent e hosts internacionalizados, e sinaliza credenciais e outros problemas. Roda inteiramente no seu navegador.
Kit de Regex
Teste, explique e depure expressões regulares com correspondências ao vivo e verificação de risco de backtracking.
Passo a Passo de Algoritmos de Ordenação
Cole uma lista pequena de números, escolha uma estratégia - bubble, selection, insertion, merge ou quick - e assista o algoritmo pensar: cada comparação, cada troca, uma linha de PORQUÊ por movimento, com contadores ao vivo de comparações e escritas que tornam o crescimento Big-O tangível.
Testador de seletores CSS
Cole HTML e um ou mais seletores (um por linha) e veja exatamente que elementos cada seletor casa: os elementos destacados na árvore analisada com o seu caminho e linha, a contagem por seletor e a sua especificidade contada pela seção 15 do Selectors Level 4. O HTML é analisado de modo inerte com o mesmo parser do explicador de estrutura HTML; os seletores são analisados e casados pelas próprias regras do Selectors Level 4 (composto por composto, da direita para a esquerda), incluindo :is(), :not(), :where(), :has(), :nth-child(An+B of S), operadores de atributo com as flags i e s, escapes CSS e as pseudoclasses de estado de formulário lidas dos atributos. Seletores inválidos são nomeados com a posição do erro; as pseudoclasses que um documento estático não responde são marcadas. Verificado contra o querySelectorAll do Chromium.
Tradutor de requisições HTTP
Cole uma requisição HTTP/1.1 crua e receba o equivalente em curl, fetch, HTTPie, Python e PowerShell. Nada é enviado e nenhuma requisição é executada.
Artigos
Requisição HTTP crua: como ler e transformar de volta em algo que roda
Uma captura, um log de proxy e um exemplo de RFC entregam a mesma coisa: uma linha de requisição, alguns headers e talvez um body. Transformar isso de volta num comando que roda parece mecânico, mas tem três armadilhas: a URL não está na mensagem, alguns headers não podem ser copiados e o que você colou costuma ser uma credencial válida.
LerComo funciona uma ferramenta em WebAssembly: o que roda, de onde vem e o que sai da página
A maioria das ferramentas deste site são pequenas funções puras escritas aqui e testadas com vetores de ouro. Um playground de Python não pode ser isso: o que você quer é um interpretador de verdade, e a forma honesta de oferecer um em um site estático é o CPython compilado para WebAssembly, baixado pelo seu navegador e executado na sandbox dele. Este artigo explica o que muda quando uma ferramenta roda código de terceiros: o download e por que ele espera a sua autorização, o Worker e por que Parar é um encerramento, a Content Security Policy e o que foi medido contra ela, os arquivos fixados e seus resumos, o relógio de parede, e quais verificações são do site e quais são do motor. Com a documentação do próprio motor citada em cada afirmação.
LerMensagens escondidas em headers HTTP: homenagens, piadas e vagas de emprego no overhead
O HTTP deixa o servidor acrescentar o header que quiser, e há vinte anos operadores usam essa liberdade para coisas que não são protocolo. Depois que Terry Pratchett morreu, em 2015, milhares de sites passaram a enviar X-Clacks-Overhead: GNU Terry Pratchett, uma homenagem criada a partir de um recurso da trama de um romance do próprio autor. O Slashdot respondia a cada requisição com uma citação de Futurama. A Automattic e o Airbnb esconderam ofertas de emprego onde só quem lê headers ia ver. Um cache de páginas se anuncia com o tema do Batman. Dois códigos de status levam piadas literárias para dentro do próprio padrão. Este artigo passa por cada caso, mostra a evidência e explica o que os bons exemplos têm em comum: não custam nada a quem lê, são verdadeiros e são feitos para quem olha. No fim, mostra como você mesmo pode lê-los e quais são os deste site.
LerContraste de cor: a aritmética do WCAG e as dez maneiras de o CSS escrever uma cor
Se um texto pode ser lido sobre o seu fundo é, no WCAG, um único número calculado a partir de duas cores, e o cálculo é curto o bastante para se fazer à mão uma vez. Aqui está a aritmética (luminância relativa, a razão, os limiares de 4.5:1 e 3:1 e de onde vêm), seguida das notações em que o CSS Color Level 4 permite escrever uma cor, de #hex a oklch(), e por que as mais novas tornam um par reprovado mais fácil de corrigir.
LerEspecificidade, contada pela especificação, e as cinco coisas que a cascata verifica antes
Toda guerra de folhas de estilo acaba no mesmo lugar: duas regras querem a mesma propriedade no mesmo elemento e uma vence. O CSS decide com um procedimento curto e exato, e a especificidade é só o quinto passo. Aqui está como o Selectors Level 4 conta um seletor em três números, o que :is(), :where(), :not() e :nth-child(of) fazem com a conta, os dez exemplos que a própria especificação dá, e os cinco critérios que a cascata resolve antes de olhar para a especificidade.
LerOnde uma mensagem HTTP/1.1 termina: Content-Length, chunked e as oito regras
Uma conexão HTTP/1.1 é um fluxo de bytes com mensagens postas uma após a outra, e nada marca onde uma para além das regras que as duas pontas combinam. A RFC 9112 dá oito delas, em ordem de precedência, e todo ataque de request smuggling dos últimos vinte anos são duas implementações aplicando regras diferentes aos mesmos bytes. Aqui estão as regras, a codificação chunked decodificada à mão, o que o Content-Length promete e o que dá errado quando a promessa e os bytes discordam.
LerComo o parser de HTML repara a sua marcação, e por que os reparos são iguais em todos os navegadores
Um navegador nunca rejeita HTML. Seja o que for que você cole, uma árvore sai, e o HTML Standard diz exatamente qual árvore: os elementos que o parser cria por você, as tags de fechamento que ele supre, os elementos de formatação que divide, o conteúdo que tira de dentro das tabelas, os comentários que faz dos seus erros de digitação, e o quirks mode em que cai sem um DOCTYPE. Os 52 erros de análise nomeados, os cinco reparos que vale conhecer pelo nome, em que view source e inspecionar elemento discordam, e por que a WCAG 2.2 pôde abandonar o seu critério de análise sem baixar a régua.
LerComo um seletor encontra os seus elementos: o Selectors Level 4 lido como um algoritmo de casamento
Um seletor CSS é uma pergunta feita a uma árvore, e a especificação diz exatamente como a pergunta é respondida: composto por composto, da direita para a esquerda, com a linguagem do documento decidindo o que conta como o mesmo nome. Onde a caixa importa e onde não importa, os sete operadores de atributo e a string vazia que não casa com nada, como os irmãos são contados, o que :is(), :not(), :where() e :has() fazem com a validade e a especificidade, que pseudoclasses um documento estático nunca pode responder, e o que os navegadores fazem com um seletor que termina dentro de um colchete.
LerO que o head de uma página declara, e quem lê cada linha
O head de uma página HTML é escrito para máquinas, e cada linha é lida por uma máquina diferente sob regras diferentes: o navegador lê o title, a codificação e as diretivas pragma pelo HTML Standard; um rastreador de busca lê description, robots e canonical pela sua própria documentação publicada e pela RFC 6596; uma plataforma social lê Open Graph pelo ogp.me e twitter:* por um registro de 2023; um consumidor de dados estruturados lê JSON-LD pela Recomendação do W3C. O que cada parte exige, o que apenas prefere, o que é ignorado em silêncio, e o punhado de regras (um title, uma description, UTF-8 uma vez e cedo, exatamente um atributo identificador por meta) que são erros e não conselhos.
Ler