Anatomi Artikel Engineering Modern di y7.hk

Artikel ini mengumpulkan semua kemampuan visual, tipografis, dan media dari mesin render artikel kami.

1. Callout dan Catatan

Callout mengikuti gaya monokrom situs — blok inset bersih tanpa warna-warni lampu lalu lintas:

2. Gambar dan Media

Perbandingan dua varian (grid media)

Grid dua gambar untuk membandingkan antarmuka “Sebelum” dan “Sesudah”:

Avatar video langsung penulis

Komponen video melingkar yang terintegrasi dalam antarmuka kartu:

Yakushev Hermann

Product Engineer · Southeast Asia

/me.mp4

3. Kode, Diff Patch, dan Terminal

Diff patch refactoring

Baris yang ditambahkan di-highlight dengan hijau zamrud lembut, baris yang dihapus dengan merah kalem:

  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,
    });
  }

Perintah terminal (Bash)

Simbol prompt $ tidak ikut tersalin ke clipboard berkat selector user-select: none:

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

4. Matematika dan Formula KaTeX

Formula display

Formula kompleks di-render dengan dukungan scroll horizontal di perangkat mobile:

\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

Formula Transformer Attention¹:

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

Formula inline

Simbol matematika dan persamaan langsung di dalam teks: e^{i\pi} + 1 = 0, perkalian matriks A \times B \in \mathbb{R}^{m \times p}, dan norma gradien \|\nabla \theta\| \le \epsilon.

5. Tabel dengan Dukungan Scroll

Tabel secara otomatis dibungkus dalam container scroll responsif dan tetap terbaca di smartphone:

6. Spoiler yang Bisa Dilipat (<details>)

Accordion interaktif untuk menyembunyikan log atau fragmen opsional:

{
  "id": "chatcmpl-98a72b",
  "model": "deepseek-r1",
  "choices": [
    {
      "message": {
        "role": "assistant",
        "content": "Pola berhasil divalidasi."
      },
      "finish_reason": "stop"
    }
  ],
  "usage": {
    "prompt_tokens": 128,
    "completion_tokens": 42
  }
}

7. Checklist dan Hotkey

Daftar tugas dalam format Markdown:

• Dukungan callout berwarna sudah dikonfigurasi
• Highlight kode diff sudah diimplementasi
• Formula matematika KaTeX sudah terintegrasi
• Pemindah Serif / Sans sudah ditambahkan
• Caption <figcaption> untuk file media sudah didesain
• Rencana menambahkan scene 3D canvas interaktif

Hotkey untuk kontrol:

• Tekan ⌘ + K untuk pencarian global.
• Tekan ~ untuk membuka konsol.
• Tekan Esc untuk menutup popup apa pun.

8. Kutipan dengan Kredit

Desain bukan hanya tentang bagaimana sesuatu terlihat dan terasa. Desain adalah tentang bagaimana ia bekerja. Steve Jobs

9. Catatan Kaki Akademik

Teks dengan referensi ke paper asli tentang transformer². Klik nomor catatan kaki akan langsung membawa Anda ke panel catatan di bagian bawah, dan menekan ikon panah ↩ mengembalikan Anda tepat ke posisi bacaan.