İçine bir bakış
Bu güvenli önizleme, hesaba bağlı eylemler çalıştırmadan aracın ne işe yaradığını gösterir.
Code-Werkstatt neler yapar
Hızlı bir deneme için proje oluşturman gerekmez. npm install yok, ayar karmaşası yok, bekleme yok. Code-Werkstatt tamamen tarayıcında çalışır: üç editör sekmesine - HTML, CSS ve JavaScript - yazarsın, önizleme her değişiklikte canlı olarak yenilenir. Bir fikri sadece denemek istediğin an için ideal.
Editörlerde sözdizimi vurgulama ve düzenli bir tek aralıklı (monospace) görünüm var; böylece kod biraz uzayınca da okunaklı kalır. Yerleşim modlarıyla nerede ne kadar yere ihtiyacın olduğuna sen karar verirsin: editör ve önizleme yan yana (yatay), alt alta (dikey) ya da bir tarafı tamamen gizleyip pencerenin tamamını sadece yazmak veya sadece izlemek için kullanırsın.
Yerleşik konsol console.log çıktılarını yakalar ve doğrudan önizlemenin yanında gösterir - JavaScript’in takıldığı yerde hata mesajlarıyla birlikte. Böylece tarayıcının geliştirici araçlarına uğramadan hata ayıklarsın ve bir şeyin tam olarak nerede aksadığını hemen görürsün.
Asıl zaman kazandıran şey şablon kitaplığı. 20’den fazla hazır örnek tipik web yapı taşlarını kapsıyor ve bilerek Werkzeu.ge ruhunda hazırlandı: canlı KDV hesaplayıcı, Alman adres ve posta kodu doğrulama, IBAN biçimlendirici, iş mektupları için antet üretici, CSS gradyan üretici, parola üretici, ELSTER-XML görüntüleyici ve daha fazlası. Bir şablon yüklersin, çalışan kodu hemen görürsün ve oradan devam edersin.
Her şey istemci tarafında çalıştığı için tek bir karakter bile bilgisayarından çıkmaz. Kodun bir sunucuya gönderilmez, kaydedilmez, sen kendin başlatmadıkça saklanmaz. Bu, atölyeyi hızlı ve veri tasarruflu yapar - hassas prototip kodlarını da gönül rahatlığıyla deneyebilirsin.
Code-Werkstatt büyük bir proje için tam teşekküllü bir IDE’nin yerini tutmaz ve tutmak da istemez. Web kodu için dijital not kâğıdıdır: hızlı açılır, hızlı yazılır, hızlı atılır ya da geliştirilir. Kod parçacıkları, öğrenme alıştırmaları, küçük demolar ve belli bir CSS ya da JS konusunun aslında nasıl çalıştığına hızlıca bakmak için tam doğru yer.
Fonksiyonlar
Canlı önizlemeli üç editör
HTML, CSS ve JavaScript ayrı sekmelerde. Önizleme her değişiklikte hemen yenilenir.
Yerleşik konsol
console.log çıktıları ve JavaScript hataları doğrudan önizlemenin yanında görünür - geliştirici araçlarına uğramana gerek yok.
Dört yerleşim modu
Yan yana, alt alta, sadece editör ya da sadece önizleme. Nerede yere ihtiyacın olduğuna sen karar verirsin.
20’den fazla şablon
KDV hesaplayıcı, IBAN biçimlendirici, adres doğrulama, gradyan üretici, ELSTER görüntüleyici ve daha fazlası - üzerine inşa etmeye hazır.
Sözdizimi vurgulama
Tek aralıklı yazı tipiyle net vurgulanan kod; daha uzun parçacıklar bile okunaklı kalır.
Tarayıcıda çalışır, hesap gerekmez
Kurulum yok, derleme aracı yok, kayıt yok. Kodun cihazında kalır.
Nasıl çalışır
- 1
Şablon yükle ya da boş başla
20’den fazla şablondan birini başlangıç noktası olarak seç ya da doğrudan boş editörlere yaz.
- 2
HTML, CSS ve JS düzenle
Üç sekme arasında geçiş yap ve kodunu yaz. Önizleme kendiliğinden güncellenir.
- 3
Sonucu kontrol et
Canlı önizlemeye bak ve çıktıları ile hataları izlemek için konsola göz at.
- 4
Yerleşimi ayarla
Editör ve önizlemeyi yan yana ya da alt alta diz, ya da odaklanmak için bir tarafı gizle.
Kimin işine yarar
Sık sorulan sorular
Harici kütüphaneleri ekleyebilir miyim?
Önizlemede düz HTML, CSS ve JavaScript ile çalışırsın. Harici betikler, erişilebilir oldukları sürece olağan HTML etiketleriyle eklenebilir - ama atölyenin özü bilerek hafif tutuldu ve paket yöneticisi gerektirmez.
Kodum kaydediliyor mu, yükleniyor mu?
Hayır. Code-Werkstatt tamamen tarayıcında çalışır. Kodun bir sunucuya gönderilmez ve sen bir şey yapmadan kaydedilmez.
JavaScript hatalarını görür müyüm?
Evet. Yerleşik konsol hem console.log çıktılarını hem de çalışma zamanı hatalarını doğrudan önizlemenin yanında gösterir; böylece nerede aksadığını hemen anlarsın.
Şablonlar ne işe yarar?
20’den fazla şablon çalışan örneklerdir - KDV hesaplayıcıdan IBAN biçimlendirmeye ve CSS gradyan üreticiye kadar. Onları başlangıç noktası olarak yüklersin, yapıyı anlarsın ve sıfırdan başlamak yerine oradan devam edersin.
Code-Werkstatt gerçek bir IDE’nin yerini tutar mı?
Hayır, zaten amacı da bu değil. Web kodu için hızlı not kâğıdıdır - kod parçacıkları, öğrenme alıştırmaları ve küçük demolar için. Derleme süreci olan büyük bir projede kendi IDE’nle devam edersin.
Atölye çevrimdışı çalışır mı?
Her şey istemci tarafında çalıştığı için düzenleme ve önizleme sunucuyla bağlantı olmadan çalışır. Yalnızca dışarıdan eklenen kaynaklar bağlantı ister.
Benzer araçlar
JSON biçimlendirici
JSON’u sözdizimi vurgulama ve hata algılamayla biçimlendir, doğrula ve küçült. Ücretsiz, doğr…
Regex test aracı
Düzenli ifadeleri canlı vurgulama ve Almanca kalıp şablonlarıyla test et.
CSS-Kontrast-Checker
Renk kontrastlarını WCAG 2.1 AA/AAA ve APCA’ya göre kontrol et. Renk körlüğü simülasyonu, öne…
Code-Diff
İki metni satır satır, farkları renkli vurgulayarak karşılaştır.
Markdown önizlemesi
Markdown’ı canlı önizleme, bölünmüş görünüm, araç çubuğu, sözdizimi vurgulama, şablonlar, sek…
Farbwerkzeug
HEX, RGB, HSL ve CMYK arasında dönüştür. Uyumlu renk paletleri oluştur.
Code-Werkstatt için hazır mısın?
Kurulum yok. Plus planından itibaren dahil. Doğrudan tarayıcıda aç.
Şimdi aç