Anatomía de un artículo de ingeniería moderno en y7.hk

Este artículo reúne todas las capacidades visuales, tipográficas y de media de nuestro motor de renderizado de artículos.

1. Callouts y notas al margen

Los callouts siguen el estilo monocromo general del sitio: bloques inset limpios, sin el semáforo de bordes multicolor:

2. Imágenes y media

Comparación de dos variantes (grid de media)

Una cuadrícula de dos imágenes para comparar interfaces “Antes” y “Después”:

Avatar de video en vivo del autor

Un componente de video circular integrado en la interfaz de tarjeta:

Yakushev Hermann

Product Engineer · Southeast Asia

/me.mp4

3. Código, parches Diff y Terminal

Parche diff de refactorización

Las líneas insertadas se resaltan en esmeralda suave, las eliminadas en rojo apagado:

  export async function handleRequest(req: Request): Promise<Response> {
-   const legacyToken = req.headers.get("x-legacy-token");
-   if (!legacyToken) return new Response("Unauthorized", { status: 401 });
+   const authSession = await verifyAgentSession(req);
+   if (!authSession.valid) {
+     return Response.json({ error: "Session expired" }, { status: 403 });
+   }

    return await processWorkflow({
-     mode: "sync",
+     mode: "streaming-duplex",
      timeout: 30000,
    });
  }

Comando de terminal (Bash)

El símbolo del prompt $ no se copia al portapapeles gracias al selector user-select: none:

git clone https://github.com/yakushev/Y.git && cd Y
npm install
npm run build

4. Matemáticas y fórmulas KaTeX

Fórmula en bloque (Display Math)

Las fórmulas complejas se renderizan con soporte de scroll horizontal en dispositivos móviles:

\mathcal{L}_{\text{total}} = \alpha \cdot \mathbb{E}_{x \sim p_{\text{data}}}\left[\log D(x)\right] + \beta \cdot \sum_{i=1}^{N} \left\| \nabla_x f(x_i) \right\|_2^2

La fórmula de atención de Transformer¹:

\text{Attention}(Q, K, V) = \text{softmax}\left(\frac{QK^T}{\sqrt{d_k}}\right)V

Fórmulas en línea

Símbolos matemáticos y ecuaciones directamente en el texto: e^{i\pi} + 1 = 0, multiplicación de matrices A \times B \in \mathbb{R}^{m \times p} y la norma del gradiente \|\nabla \theta\| \le \epsilon.

5. Tablas con soporte de scroll

Las tablas se envuelven automáticamente en un contenedor de scroll responsivo y mantienen legibilidad en smartphones:

6. Spoilers plegables (<details>)

Acordeones interactivos para ocultar logs o fragmentos opcionales:

{
  "id": "chatcmpl-98a72b",
  "model": "deepseek-r1",
  "choices": [
    {
      "message": {
        "role": "assistant",
        "content": "Patrón validado correctamente."
      },
      "finish_reason": "stop"
    }
  ],
  "usage": {
    "prompt_tokens": 128,
    "completion_tokens": 42
  }
}

7. Checklists y atajos de teclado

Una lista de tareas en formato Markdown:

• Soporte de callouts de color configurado
• Resaltado de código diff implementado
• Fórmulas matemáticas KaTeX integradas
• Selector Serif / Sans añadido
• Captions <figcaption> diseñadas para archivos multimedia
• Planeado añadir escenas 3D interactivas en canvas

Atajos de teclado para control:

• Presiona ⌘ + K para la búsqueda global.
• Presiona ~ para abrir la consola.
• Presiona Esc para cerrar cualquier popup.

8. Citas con atribución

El diseño no es solo cómo se ve y cómo se siente. El diseño es cómo funciona. Steve Jobs

9. Notas académicas al pie

Texto con una referencia al paper original sobre transformers². Al hacer clic en el número de la nota te lleva instantáneamente al panel de notas al final, y al pulsar el icono de flecha ↩ vuelves exactamente al punto de lectura.