y7.hk'da Modern Mühendislik Yazısının Anatomisi

Bu yazı, makale render motorumuzun tüm görsel, tipografik ve medya yeteneklerini bir araya getiriyor.

1. Callout’lar ve Kenar Notları

Callout’lar sitenin genel monokrom stiline uyuyor — renkli trafik lambası çerçeveleri yerine temiz inset bloklar:

2. Görseller ve Medya

İki varyantın karşılaştırması (medya grid’i)

“Önce” ve “Sonra” arayüzlerini karşılaştırmak için iki görsellik grid:

Yazarın canlı video avatarı

Kart arayüzüne entegre yuvarlak video bileşeni:

Yakushev Hermann

Product Engineer · Southeast Asia

/me.mp4

3. Kod, Diff Patch’leri ve Terminal

Refactoring diff patch’i

Eklenen satırlar yumuşak zümrüt yeşiliyle, silinenler koyu kırmızıyla vurgulanır:

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

Terminal komutu (Bash)

$ prompt işareti user-select: none seçicisi sayesinde panoya kopyalanmaz:

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

4. Matematik ve KaTeX Formülleri

Blok formül (Display Math)

Karmaşık formüller mobil cihazlarda yatay kaydırma desteğiyle render edilir:

\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

Transformer Attention formülü¹:

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

Satır içi formüller

Metin içinde doğrudan matematiksel semboller ve denklemler: e^{i\pi} + 1 = 0, matris çarpımı A \times B \in \mathbb{R}^{m \times p} ve gradyan normu \|\nabla \theta\| \le \epsilon.

5. Kaydırma Destekli Tablolar

Tablolar otomatik olarak duyarlı kaydırma kapsayıcısına sarılır ve akıllı telefonlarda okunabilir kalır:

6. Katlanabilir Spoiler’lar (<details>)

Log’ları veya isteğe bağlı parçaları gizlemek için etkileşimli akordeonlar:

{
  "id": "chatcmpl-98a72b",
  "model": "deepseek-r1",
  "choices": [
    {
      "message": {
        "role": "assistant",
        "content": "Desen başarıyla doğrulandı."
      },
      "finish_reason": "stop"
    }
  ],
  "usage": {
    "prompt_tokens": 128,
    "completion_tokens": 42
  }
}

7. Checklist’ler ve Kısayol Tuşları

Markdown formatında görev listesi:

• Renkli callout desteği yapılandırıldı
• Diff kod vurgulama implement edildi
• KaTeX matematik formülleri eklendi
• Serif / Sans geçişi eklendi
• Medya dosyaları için <figcaption> stilleri düzenlendi
• İnteraktif 3D canvas sahneleri eklenecek

Kontrol kısayol tuşları:

• Global arama için ⌘ + K’ya basın.
• Konsolu açmak için ~’ye basın.
• Herhangi bir popup’ı kapatmak için Esc’ye basın.

8. Atıflı Alıntılar

Tasarım sadece nasıl göründüğü ve hissettirdiği değildir. Tasarım nasıl çalıştığıdır. Steve Jobs

9. Akademik Dipnotlar

Transformer’larla ilgili orijinal makaleye referans içeren metin². Dipnot numarasına tıklamak sizi anında sayfanın altındaki dipnot paneline götürür, ↩ ok simgesine basmak ise tam olarak okuduğunuz yere geri döndürür.