AI Neden Hâlâ 2019 Model JavaScript Yazıyor? 'Modern Web Guidance 1.0' Kurulum Rehberi

Claude Code, Cursor veya kullandığın diğer yapay zeka kodlama ajanları yeni çıkmış bir CSS ya da HTML özelliğini ismen bilse bile, kod yazarken %45 oranında hata yapıp 2019 model JavaScript yazmaya devam ediyor!

Bu istatistik bir tahmin değil: Google Chrome ekibinden Paul Irish ve Philip Walton, 9 aylık çalışmanın ürünü olan ve dün 1.0 kararlı sürümüyle Mozilla Firefox, MDN ve Microsoft Edge ekiplerinin de resmi destekçi (steward) olarak katıldığı GoogleChrome/modern-web-guidance paketini yayınlarken 200 gerçek dünya görevi ve 1.700'den fazla Playwright & AST doğrulama testi koştu:

• Rehbersiz (Unguided) AI Ajanlarının Başarı Oranı: %55 (neredeyse yazı-tura!)
• Modern Web Guidance 1.0 Bağlandığında Başarı Oranı: %92

Peki en gelişmiş dil modelleri neden hâlâ 2019 yılından kalma kırılgan JavaScript kodları üretiyor, bu aracı telemetrisiz (DISABLE_TELEMETRY=1) nasıl kurarsınız ve Hacker News topluluğunun yakaladığı tarayıcı uyumluluk tuzağından nasıl korunursunuz? Adım adım inceleyelim.

1. Eğitim Verisi Çekim Gücü: AI Neden 2019'da Takılı Kaldı?

Büyük dil modellerine "HTML <dialog> etiketi nedir?" veya "CSS field-sizing: content ne işe yarar?" diye doğrudan sorduğunda sana eksiksiz bir dokümantasyon özeti çıkarabilir.

Ancak aynı ajana "Bana açılır bir onay penceresi (modal) veya otomatik büyüyen bir yorum kutusu yap" dediğinde modelin davranışı tamamen değişir. Çünkü LLM'lerin eğitim verisinde 2016–2021 yılları arasında yazılmış milyonlarca eski GitHub reposu ve Stack Overflow cevabı vardır. İstatistiksel ağırlık (training-data gravity) modeli her seferinde eski alışkanlıklara çeker:

Örnek A: Modal Pencere (50 Satır JS vs. Yerleşik <dialog>)

❌ AI Ajanlarının Varsayılan Olarak Yazdığı 2019 Kodu:

// z-index çakışmaları, erişilebilirlik (aria) eksikleri ve kırılgan focus-trap:
const modal = document.getElementById('custom-modal');
const backdrop = document.getElementById('modal-backdrop');
 
function openModal() {
  modal.classList.remove('hidden');
  backdrop.classList.remove('hidden');
  document.body.style.overflow = 'hidden';
}
 
window.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') closeModal();
});

✅ Modern Web Guidance İle Yazdığı Yerleşik Web Standardı:

<dialog id="confirm-dialog">
  <form method="dialog">
    <p>Kaydı silmek istediğinize emin misiniz?</p>
    <button value="cancel">Vazgeç</button>
    <button value="confirm">Onayla</button>
  </form>
</dialog>
 
<script>
  // ESC tuşu, arka plan karartma (::backdrop), focus-trap ve top-layer tarayıcı motorunda hazır!
  document.getElementById('confirm-dialog').showModal();
</script>

Örnek B: Yazdıkça Büyüyen Textarea (JS Listener vs. Tek Satır CSS)

❌ 2019 Yöntemi (Her tuş vuruşunda Layout Thrashing):

textarea.addEventListener('input', () => {
  textarea.style.height = 'auto';
  textarea.style.height = `${textarea.scrollHeight}px`;
});

✅ Modern Web Standardı (Sıfır JavaScript):

textarea {
  field-sizing: content;
  min-block-size: 3lh;
  max-block-size: 12lh;
}

Örnek C: Arama Sonucu Vurgulama (<span> Enjeksiyonu vs. CSS.highlights)

Arama sonuçlarında eşleşen kelimeleri sarı renkle işaretlemek için DOM ağacını yüzlerce <span class="highlight"> etiketiyle bozmak (ve React/Vue sanal DOM'unu kırmak) yerine, tarayıcının yerleşik CSS Custom Highlights API'si DOM'a hiç dokunmadan metin aralıklarını boyar:

const range = new Range();
range.setStart(textNode, startOffset);
range.setEnd(textNode, endOffset);
 
CSS.highlights.set('search-results', new Highlight(range));

::highlight(search-results) {
  background-color: #f59e0b;
  color: #0b0d13;
}

2. Adım Adım Telemetrisiz Kurulum Rehberi (DISABLE_TELEMETRY=1)

⚠️ Kritik Gizlilik Uyarısı: Paketin varsayılan interaktif kurulum sihirbazı, hangi ajanların ve hangi işletim sistemlerinin kullanıldığını anonim olarak Google Analytics 4 (G-V94FFJ7DSC) uç noktasına raporlar. Kurulum yaparken mutlaka DISABLE_TELEMETRY=1 ortam değişkenini ekleyin!

Projenizin kök dizininde terminalinizi açın ve aşağıdaki komutu çalıştırın:

DISABLE_TELEMETRY=1 npx @google/modern-web-guidance

Eğer hiçbir soru sormadan doğrudan Claude Code, Cursor, Windsurf, Codex veya Antigravity kurallarını projenize eklemesini istiyorsanız -y bayrağını kullanabilirsiniz:

DISABLE_TELEMETRY=1 npx @google/modern-web-guidance -y

Bu Komut Arka Planda Ne Kuruyor?

Dışarıdaki bir bulut sunucusuna bağlanan yavaş bir MCP sunucusu kurmaz! Bunun yerine tamamen çevrimdışı (offline) çalışan 2 katmanlı bir yerel Agentic RAG paketi indirir:

1. ROUTER.md (Hafif Yönlendirici): Ajanın context penceresini şişirmemek için her konuşmada 200 rehberin tamamını yüklemez; sadece hangi görevde hangi kuralın çağrılacağını gösteren küçük bir tetikleyici tablo tutar.
2. mwg search (~10 ms Yerel BM25 Arama Motoru): Ajan bir modal, tooltip, form doğrulama veya animasyon yazacağı zaman yerel SQLite/BM25 indeksinden milisaniyeler içinde sadece ilgili modern API rehberini (217 özellik ve 203 gerçek kullanım senaryosu arasından) çeker.

3. Mevcut Projenizdeki Eski Kodları Tarama (legacy-scan)

Paketin en güçlü özelliklerinden biri, 30.000 açık kaynak GitHub reposu üzerinde eğitilmiş ve %92 kesinlik (precision) oranına sahip olan legacy-scan denetçisidir.

Mevcut projenizde 2019'dan kalma gereksiz JavaScript yamalarını bulmak için şu komutu çalıştırın:

npx @google/modern-web-guidance legacy-scan ./src

Bu komut kod tabanınızı AST/desen düzeyinde tarayarak:

• getBoundingClientRect() ile elle hesaplanan açılır menüleri (CSS Anchor Positioning + Popover API ile değiştirilebilir),
• scrollHeight ile büyütülen metin kutularını (field-sizing: content ile değiştirilebilir),
• Karmaşık modal ve akordeon state yönetimlerini (<dialog> ve <details name="..."> ile değiştirilebilir) dosya ve satır numarasıyla listeler.

4. Hacker News'in Yakaladığı Kritik Tuzak: Sadece Chrome'da Çalışan ~38 Özellik

Aracın resmi adı 1.0 sürümüyle birlikte "Chrome Modern Web Guidance" yerine "Modern Web Guidance" olarak değiştirildi ve yönetimine Firefox, MDN ve Edge mühendisleri de katıldı.

Ancak Hacker News topluluğunun kaynak kodlarda tespit ettiği çok önemli bir mühendislik detayı var: Paketteki 217 özelliğin yaklaşık 38 tanesi henüz W3C "Baseline" (tüm tarayıcılarda ortak) statüsünde değil; yalnızca Chromium tabanlı tarayıcılarda çalışıyor!

Safari ve Firefox kullanıcılarınızın ekranında kırık bileşenler oluşmaması için projenizin kök dizinine bir .mwgrc dosyası ekleyerek ajanı Progressive Enhancement (@supports) kullanmaya zorlayın:

{
  "telemetry": false,
  "baseline": "widely-available",
  "requireFallbackForLimitedAvailability": true,
  "browsers": ["chrome >= 120", "safari >= 17", "firefox >= 122"]
}

Ayrıca ajanınızın sistem kuralına (CLAUDE.md veya .cursorrules) şu güvenlik maddesini ekleyin:

- Modern Web Guidance içinde `status: volatile` veya `availability: limited` olarak işaretlenen bir CSS/HTML özelliği kullanırken mutlaka `@supports` veya `'showModal' in HTMLDialogElement.prototype` kontrolüyle Safari/Firefox fallback'i yaz.

Özet ve Faydalı Bağlantılar

En hızlı, en güvenli ve bakımı en kolay JavaScript kodu, tarayıcı zaten yerleşik olarak yaptığı için hiç yazmadığın JavaScript kodudur.

• 🎛️ İnteraktif Araç: Eski 2019 JS vs. Modern Web Primitifleri Seçici
• 📦 Resmi GitHub Deposu: GoogleChrome/modern-web-guidance
• 📊 1.700+ Testlik Canlı Karşılaştırma Tablosu: Modern Web Guidance Eval Dashboard
• 📄 Resmi Chrome Mühendislik Makalesi: Modern Web Guidance 1.0 Announcement