HTML Code Runner Nasıl Çalışır?

Aracın arkasındaki teknik mimariye, güvenlik modeline ve tasarım kararlarına derinlemesine bir bakış.

Mimariye Genel Bakış

HTML Code Runner tamamen istemci taraflı bir uygulamadır. Arka uç sunucu işleme kodu, veritabanı depolama parçacıkları ve harici hizmetlere API çağrısı yoktur. Aracın tamamı, standart web teknolojilerini kullanarak kullanıcının tarayıcısında çalışır: HTML, CSS ve JavaScript.

Kod Yürütme İşlem Hattı

Çalıştır düğmesine tıkladığınızda aşağıdaki sıra gerçekleşir:

  1. Kod Yakalama — Textarea düzenleyicisindeki HTML içeriği bir dize olarak okunur
  2. Blob Oluşturma — Kod dizesi, text/html MIME türüne sahip bir Blob nesnesine sarılır
  3. URL Oluşturma — URL.createObjectURL() kullanılarak geçici bir Blob URL'si oluşturulur.
  4. Iframe Yükleme — Blob URL'si, korumalı alana alınmış iframe'in src özelliğine atanır
  5. Oluşturma — Tarayıcı, gömülü CSS ve JavaScript'i çalıştırarak HTML belgesini iframe içinde oluşturur
  6. Konsol Yakalama — iframe'in console.log, console.error ve console.warn yöntemleri, çıkışı Konsol Çıkışı paneline yönlendirmek için geçersiz kılınır
  7. Temizleme — Boş belleğe yüklendikten sonra Blob URL'si iptal edilir

Güvenlik Modeli

Güvenlik temel bir tasarım unsurudur. Birden fazla izolasyon katmanı kullanıyoruz:

Korumalı Alana Sahip Iframe

Önizleme iframe'i, aşağıdaki izinlerle HTML5 sandbox özelliğini kullanır:

  • allow-scripts — iframe içinde JavaScript yürütülmesini etkinleştirir (JS önizlemeleri için gereklidir)
  • allow-modals — alert(), confirm() ve prompt() iletişim kutularına izin verir
  • allow-same-origin — Blob URL'sinin yüklenmesi için gereklidir (içerik, Blob URL'si ile kaynağı paylaşmalıdır)

Korumalı alan açıkça aşağıdakileri içermez:

  • allow-top-navigation — iframe ana sayfada gezinemez
  • allow-forms — Form gönderimleri engellenir (yanlışlıkla veri sızmasını önler)
  • allow-popups — Açılır pencereler engellenir

Blob URL Yalıtımı

document.write() veya srcdoc yoluyla kod enjekte etmek yerine Blob URL'lerini kullanırız. Bu, tarayıcının Blob URL'sini kendi yürütme bağlamına sahip ayrı bir belge olarak ele alması nedeniyle daha iyi izolasyon sağlar.

Sunucu Tarafında İşleme Yok

Kodunuz hiçbir zaman ağ üzerinden aktarılmaz. Yazdığınız andan sekmeyi kapatana kadar tarayıcınızın belleğinde kalır. Tehlikeye atılacak bir sunucu, ihlal edilecek bir veritabanı ve yararlanılacak bir API uç noktası yoktur.

Editör Tasarımı

Kod düzenleyici, aşağıdaki özelliklere sahip, stillendirilmiş bir

  • Satır numaraları — Satır numaralarını görüntüleyen ve düzenleyiciyle birlikte kaydırılan senkronize, salt okunur bir panel
  • Sekme desteği — Sekme tuşu, odağı taşımak yerine iki boşluk ekler (standart kod düzenleyici davranışı)
  • Tek aralıklı yazı tipi — En iyi kod okunabilirliği için JetBrains Mono'yu kullanır
  • Yazım denetimi devre dışı — Tarayıcının kodun "yanlış yazımlarının" altını çizmesini engeller

Performansla İlgili Hususlar

  • Aracın tamamı, iki küçük JS dosyası ve bir CSS dosyasından oluşan tek bir HTML dosyasına yüklenir
  • Hiçbir JavaScript çerçevesi veya kitaplığı kullanılmaz; tüm kodlar vanilya JS'dir
  • Yazı tipleri font-display: swap ile eşzamansız olarak yüklenir
  • Araç, sayfa yüklendikten sonra milisaniyeler içinde etkileşime girer
  • Bellek sızıntılarını önlemek için Blob URL'leri kullanımdan sonra iptal edilir

Erişilebilirlik

Araç, erişilebilirlik göz önünde bulundurularak tasarlanmıştır:

  • Tüm etkileşimli öğelerin ARIA etiketleri vardır
  • SSS akordeonu uygun aria-expanded durumlarını kullanır
  • Odaklanma tüm etkileşimli öğelerde açıkça görülebilir
  • Renk kontrastı WCAG AA kurallarına uygundur
  • Araç tamamen klavyeyle gezinilebilir
  • Toast bildirimlerinde role="status" ve aria-live="polite" kullanılır

Duyarlı Tasarım

Arayüz tüm ekran boyutlarına uyum sağlar:

  • Masaüstü (1024px+) — Yan yana düzenleyici ve önizleme panelleri
  • Tablet (768px–1024px) — Tam genişlikte düzene sahip yığılmış paneller
  • Mobil (<768px) — Yığılmış paneller, daraltılmış gezinme, optimize edilmiş dokunma hedefleri

SEO Uygulaması

Bu sitedeki her sayfa şunları içerir:

  • Benzersiz başlık etiketleri ve meta açıklamalar
  • Anlamsal HTML5 öğeleri (üstbilgi, ana, altbilgi, gezinme, bölüm, makale)
  • Yinelenen içerik sorunlarını önlemek için kurallı URL'ler
  • WebPage, SoftwareApplication, FAQPage ve BreadcrumbList şemaları için yapılandırılmış veriler (JSON-LD)
  • Çok dilli destek için Hreflang etiketleri
  • Uygun başlık hiyerarşisine sahip sayfa başına tek bir H1

HTML Code Runner'ı deneyin →