Case Study: Tabirly Ekosisteminde "Canlı Düzenleme" Mimarisi ve Verimlilik Optimizasyonu

1. Giriş: Statik Yapıların Dinamikleşmesi

Tabirly, içerik yoğunluğu yüksek ve sık güncellenen bir platformdur. Geleneksel CMS (Blogger) yapılarında içerik üretimi; yönetim paneli ile önizleme sayfası arasında mekik dokuyan, bağlam kopukluğuna ve operasyonel darboğaza neden olan hantal bir döngüye sıkışmıştır.

Daha da önemlisi, Tabirly hazır şablonlar yerine tamamen özel kodlama (hard-coded) üzerine kurulu bir mimariye sahiptir. Sitenin bu teknik yapısı, yazılımcı olmayan editörlerin sistemi bozmadan (HTML yapısını kırmadan) içerik girmesini veya düzenleme yapmasını neredeyse imkânsız ve yüksek riskli bir hale getirmiştir.

Bu case study, Tabirly'nin bu kördüğümü çözmek için geliştirdiği; sunucu yükünü artırmadan tamamen tarayıcı tarafında çalışan, kullanıcının çalışma alanına göre şekil alabilen ve "Inline Editor (IE)" adı verilen modülün teknik analizini içerir.

2. Mimari Yaklaşım: "On-Top" Enjeksiyon Modeli

İncelediğimiz kod (v2025-09-06), Tabirly'nin mevcut tema dosyalarına kalıcı olarak gömülü değildir; ihtiyaç anında çağrılan "On-Top" (Üst Katman) bir mimariye sahiptir.

(function(){
  var q=new URLSearchParams(location.search), host=location.hostname;
  // Sadece admin parametresi veya önizleme linklerinde çalış
  if(!(q.get('ie')==='1'||preview)) return;
  // ...
})();

if(preview && !document.getElementById('tb-clicktrap-bypass')){
  var st=document.createElement('style'); st.id='tb-clicktrap-bypass';
  // Tıklama tuzağını etkisiz hale getir
  st.textContent='.blogger-clickTrap,[class*="clickTrap"]{pointer-events:none!important;}';
  document.head.appendChild(st);
}

3. Kodun Çözdüğü Kritik Problemler ve Teknik Derinlik

Bu script sadece metin düzenlemez; aynı zamanda ergonomik ve akışkan bir çalışma alanı sunan bir mikro-uygulamadır.

function move(e){
  if(!drag) return;
  // Delta hesaplama ile pürüzsüz kaydırma
  var dx=e.clientX-drag.x, dy=e.clientY-drag.y;
  bar.style.left=(drag.l+dx)+'px';
  bar.style.top=(drag.t+dy)+'px';
}

function handleKey(e){
  if(e.key !== 'Enter') return;
  if(e.shiftKey){
    // Shift+Enter: Satır sonu (
)
    document.execCommand('insertLineBreak');
  } else {
    // Enter: Yeni Paragraf (
)
    document.execCommand('insertParagraph');
  }
  e.preventDefault();
}

var mo=new MutationObserver(function(){
  var newT=document.querySelector(targetSel);
  // Hedef element değişirse yeniden bağlan
  if(newT && newT!==target){
    target=newT;
    attachKeyHandler();
  }
});
mo.observe(document.body,{childList:true,subtree:true});

function downloadHTML(){
  var clone=target.cloneNode(true);
  // Düzenleme artıklarını temizle
  clone.removeAttribute('contenteditable'); 
  var html=clone.innerHTML;
  // Blob oluştur ve indir
  var blob=new Blob(['...'+html+'...'],{type:'text/html;charset=utf-8'});
  // ...
}

5. Kullanılan Teknolojiler ve Nedenleri

Bu modülde React veya Vue yerine Vanilla JavaScript (Saf JS) tercih edilmesinin stratejik nedenleri vardır:

• Hız ve Performans: Kod boyutu çok küçüktür, harici kütüphane yüklenmesini beklemez, milisaniyeler içinde çalışır. Araç çubuğu fontları için system-ui kullanılarak 0-latency (sıfır gecikme) hedeflenmiştir.
• Sıfır Bağımlılık (No-Dependency): Platformdan bağımsız (agnostik) mimarisi sayesinde, Tabirly'nin altyapısı değişse bile bu "bağımsız katman" çalışmaya devam eder. Herhangi bir framework'e bağlı olmadığı için teknolojik borç (technical debt) yaratmaz.
• Tarayıcı Yerel Gücü: Sürükle-bırak ve dosya işlemleri için tarayıcının native yetenekleri kullanılarak maksimum uyumluluk sağlanmıştır.

6. İş Akışı (Workflow) İyileştirmesi

Tabirly editörleri için süreç şu hale gelmiştir:

1. Taslak Oluştur & Önizle: Ham metni gir ve önizlemeyi aç.
2. Konumlandır: Araç çubuğunu metnin üzerinden alıp, o an çalışmadığın boş bir alana sürükle.
3. Yerinde Düzenle (WYSIWYG): Yazıyı okurken hata mı gördün? Panele dönme. Tıkla, düzelt, link ver.
4. Çıktı Al: Toolbar'dan tek tıkla temiz HTML'i indir ve yayınla.

7. Sonuç

Bu kod parçası, Tabirly'nin teknolojiye yaklaşımını özetler: "Kısıtlayıcı arayüzlere değil, kullanıcıya uyum sağlayan esnek çözümler."

Devasa editör yazılımları entegre etmek yerine; sürüklenebilen, kullanıcının çalışma alışkanlığına göre yer değiştiren ve şekil alan bu hafif yapı, Tabirly'nin operasyonel çevikliğinin temel taşlarından biridir.

"Tabirly Inline Editor, kısıtlı bir CMS altyapısını, tarayıcı tabanlı zekice manipülasyonlarla modern, hızlı ve hatasız bir yayıncılık stüdyosuna dönüştüren minimalist bir mühendislik örneğidir."