HTML/CSS/JS Canlı Editör
Küçük bir tarayıcı-içi oyun alanı — HTML, CSS ve JS yazın, sonucu korumalı bir önizlemede canlı görün, hesap veya derleme adımı yok.
1.215 görüntülenme
Nasıl Çalışır
HTML, CSS ve JS sekmelerine yazın, önizleme paneli siz yazarken güncellenir ve birleşik sonucu korumalı (sandboxed) bir iframe içinde render eder. Sandbox özniteliği allow-same-origin OLMADAN allow-scripts olarak ayarlanır — asıl güvenliği sağlayan da budur: önizleme içinde çalışan scriptler ayrı, opak bir origin'de çalışır, bu yüzden bu sayfanın çerezlerini, yerel depolamasını veya DOM'unu okuyamazlar; bu sayfa da iframe'in içine erişemez. Bu izolasyon yalnızca görsel bir çerçeve değil, tarayıcı tarafından uygulanan bir güvenlik sınırıdır — sitelerin güvenilmeyen üçüncü taraf içeriği (reklamlar, widget'lar, kullanıcı tarafından gönderilen kod parçaları) içindeki koda güvenmeden güvenle gömmek için kullandığı mekanizmanın aynısıdır.
Düzenleme kısmı ise bilerek sadedir: üç textarea, sözdizimi vurgulama yok, otomatik tamamlama yok. Bu eksik bir özellik değil, bilinçli bir değiş tokuştur — gerçek bir kod düzenleme deneyimi (anahtar kelimeleri belirteçleme, parantez eşleştirme, etiket otomatik tamamlama) önemli boyutta bir üçüncü taraf editör kütüphanesi yüklemek demektir; bu da ağırlık ve tek bir karakter yazmadan önce bir yükleme gecikmesi ekler. Bu araç tam tersini hedefler: sayfayı açın, sıfır bağımlılıkla ve hiçbir derleme adımı olmadan anında yazmaya başlayın.
Üç sekmeden herhangi birindeki her tuş vuruşu bir yeniden oluşturmayı tetikler: mevcut HTML, bir <style> etiketine sarılmış mevcut CSS ve bir <script> etiketine sarılmış mevcut JS tek bir belgede birleştirilir ve iframe'e yazılır. Herhangi bir diff'leme veya kademeli yama uygulama yoktur — tüm önizleme belgesi basitçe değiştirilir; bu, bu ölçekte uygulamayı basit tutarken anında hissettirecek kadar hızlıdır.
Bilinmesi Gerekenler
Düzenleme ve render etme dahil her şey tarayıcınızda gerçekleştiği için sunucuya gidiş-dönüş yoktur ve hesap gerekmez. Bir CSS numarasını hızlıca test etmek, daha büyük bir kod tabanından bir JavaScript hatasını rapor etmeden önce izole etmek veya çalışan sonucu gerçek bir projeye kopyalamadan önce küçük bir bileşeni prototiplemek için uygundur. Yazdığınız hiçbir şey otomatik olarak hiçbir yere kaydedilmez, bu yüzden bunu bir müsvedde defteri gibi düşünün: sekmeyi kapatmadan önce saklamak istediğiniz her şeyi kopyalayın.
Sıkça Sorulan Sorular
Kodum bir yere gönderiliyor mu?
Hayır — her şey tamamen tarayıcınızda yerel olarak çalışır. Önizleme bu sayfadaki korumalı bir iframe'de render edilir; hiçbir şey bir sunucuya yüklenmez veya kaydedilmez.
Neden sözdizimi vurgulama yok?
Gerçek bir kod editörü (sözdizimi vurgulama, otomatik tamamlama) eklemek, ağır bir üçüncü taraf editör kütüphanesi yüklemek anlamına gelir. Bu araç bilerek hafif tutulur — düz textarea'lar, anında yükleme, sıfır bağımlılık, yazmaya başlamadan önce indirilecek hiçbir şey yok.
Önizlemede güvenilmeyen kod çalıştırmak güvenli mi?
Önizleme iframe'i allow-same-origin OLMADAN sandbox="allow-scripts" kullanır, bu yüzden içindeki scriptler bu sayfanın çerezlerini, yerel depolamasını veya başka hiçbir şeyini okuyamaz — güvenilmeyen bir gömme gibi izole edilmiştir. Bu kozmetik değil, tarayıcı tarafından uygulanan gerçek bir sınırdır.
Önizlemedeki JavaScript'im bu sitenin geri kalanını etkileyebilir mi?
Hayır — korumalı iframe tarayıcı tarafından ayrı, opak bir origin olarak ele alınır. İçindeki scriptler yalnızca o iframe'in kendi belgesiyle sınırlıdır; script ne denerse denesin, bu sayfanın değişkenlerine, ağ isteklerine, çerezlerine veya depolamasına hiçbir yolu yoktur.
Önizleme her tuş vuruşunda güncelleniyor mu?
Evet — iframe içeriği, siz yazarken mevcut HTML, CSS ve JS sekmelerinden canlı olarak yeniden oluşturulur, böylece bir değişikliğin (yeni bir CSS kuralı, değiştirilmiş bir fonksiyon) etkisini ayrı bir "çalıştır" düğmesine tıklamadan veya bir derleme adımı beklemeden hemen görürsünüz.
Benzer Araçlar
Sorun Bildir
HTML/CSS/JS Canlı Editör
Yorumlar
Henüz yorum yok — ilk yorumu siz yazın!