Thimble by Mozilla

Thimble, tarayıcının içinde çalışan, yetenekli bir kod editörü. HTML, CSS ve JavaScript’e yeni başlayanların kendi sitelerini ve web tabanlı projelerini oluşturmalarına yardımcı oluyor. İhtiyacın olan her şeyi parmaklarının ucunda. Thimble ile projeni çabucak oluşturup hayata geçirebilirsin.

Kod editörü, web sunucusu, web tarayıcısı ve geliştirici araçları bir arada. Üstelik bedava!

Thimble Özellikleri

Değişikliklerini anında gör

  • Canlı ön izleme sayesinde istediğin kadar deneme yanılma yapabilirsin. Kodda yaptığın değişiklikler anında görünür.

İstediğin Thimble projesini düzenle

  • Beğendiğin bir Thimble projesi mi var? Onu remiksleyerek üzerinde değişiklik yapabilirsin. Ayrıca projeni arkadaşlarına veya öğrencilerine göndererek onların da değişikli yapmalarını isteyebilirsin.

Hazır kod parçacıkları

  • Koduna ekleyebileceğin HTML, CSS ve JavaScript kod parçalarının listesini oluşturarak daha hızlı çalışabilirsin.

Bütünleşik JavaScript konsolu

  • JavaScript üzerinde mi çalışıyorsun? Thimble’ın bütünleşik konsolu sayesinde kodlarını test etmek ve hata ayıklamak daha kolay.

Dosyaları ekle ve yönet

  • Thimble gerçek bir web projesi gibi çalışır. Kendi dosyalarını oluşturabilir, adlarını değiştirebilir, silebilir ve bilgisayarından dosya yükleyebilirsin.
  • Projeni .zip dosyası olarak indirip kendi bilgisayarında görüntüleyebilirsin.
  • Bilgisayarındaki dosyaları sürükleyip Thimble’a bırakabilirsin.

Işıkları açıp kapat

  • Thimble hem koyu hem de açık renkli bir tema ile gelir, böylelikle sana en uygun olanı seçebilirsin. Ayrıca metin boyutu gibi diğer özellikleri de değiştirebilirsin.

Takip et ve gömülü öğreticiler oluştur

  • Projeler öğrencilerine veya sana yardımcı olabilecek öğretici videolar içerebilir. Böylelikle herhangi bir değişiklik olduğunda kolayca takip edebilirsin.

Yazarken kod ipuçları al

  • Tüm kuralları ve kod dizimini hatırlamaya çalışarak kendinizi bıktırmayın. Thimble, HTML, CSS ve hatta JavaScript dosyalarında ipuçları vererek kod yazımınızı kolaylaştırır.

HTML sayfalarında CSS’yi doğrudan düzenle

  • Elementleriniz için stil oluştururken doğrudan HTML sayfası üzerinden düzenleme yapın.
  • İmleci herhangi bir element etiketinin üzerine getirin ve Cmd/Ctrl + E komuduyla CSS stilleri yazmaya başlayın.

Projeni mobil cihazda test et

  • Mobil önizleme modu yazdığınız kodun mobil cihazda görüntülenmesini sağlar.

HTML öğelerini çabucak bul

  • DOM denetleyicisini açın ve önizlemedeki farklı elementler üzerinde biraz bekleyin. Thimble HTML editöründe size ilişkili kodu gösterecektir.

Resim filtreleri

  • Resimlerinize filtreler ekleyerek projenize biraz eğlence katabilirsin.

Selfie çek

  • Thimble selfie aracını kullanarak üzerinde çalıştığın sayfaya bir fotoğraf ekle. <img src= HTML sayfanızın etiketini yazın ve selfinizi sayfanızda görüntüleyin.
Thimble editörü için Luke Pacholski tarafından hazırlanmış tanıtım videosudur.