Guia de referência: tags semânticas usadas aqui
· Estudo
Estudando a especificação de HTML da W3C de novo, decidi transformar as anotações num post que também serve de catálogo visual: cada elemento abaixo é estilizado apenas pela própria tag, sem nenhuma classe.
Citações e ênfase
Uma citação em bloco usa blockquote com cite:
Programs must be written for people to read, and only incidentally for machines to execute.
Harold Abelson
Também dá pra marcar um trecho como importante, riscar algo que deixou de ser verdade e inserir a correção, ou simplesmente desistir da frase.
Código e teclado
Para rodar o gerador de posts, digite node scripts/new-post.mjs e o terminal deve responder com algo como post criado em content/posts/…, onde slug é derivado do título.
function slugify(title: string) {
return title
.normalize("NFD")
.replace(/[\u0300-\u036f]/g, "")
.toLowerCase()
.replace(/[^a-z0-9]+/g, "-")
.replace(/(^-|-$)/g, "");
}Listas de definição e tabelas
| Tipo | Quando uso |
|---|---|
| Projeto | Algo que construí, do início ao fim ou em progresso. |
| Estudo | Anotações de algo que estou aprendendo. |
| Consideração | Opinião ou reflexão sem compromisso de estar certa. |
Detalhes recolhíveis
Por que não usar Markdown/MDX?
Markdown mapeia bem para um subconjunto pequeno de tags (p, h1–h6, ul, blockquote, code). Escrever o post diretamente em JSX permite usar dfn, abbr, details, table e outras tags sem precisar de componentes MDX customizados para cada uma.
Notas numéricas e unidades
A velocidade da luz é de aproximadamente 3×108 m/s, e a fórmula da água é H2O — nada de especial, só sup e sub fazendo o trabalho de sempre.
Este post é atualizado sempre que um novo elemento ganha estilo próprio na folha de estilos global.