Coditor - Online Kod Görüntüleyici

Merhabalar sizlere yeni ufak projemden bahsetmek istiyorum. HTML + CSS + JavaScript kodlarını Online olarak çalıştıran bir web uygulamasıdır. Hatalar, eksikler, zaafiyetler olabilir. Eğer denk gelirse bana bildirirseniz çok sevinirim görüşlerinizi bekliyorum

Yorum yapabilecek birisi değilim ancak gerçekten güzel gözüküyor bence.

MCV dedi:

Merhabalar sizlere yeni ufak projemden bahsetmek istiyorum. HTML + CSS + JavaScript kodlarını Online olarak çalıştıran bir web uygulamasıdır. Hatalar, eksikler, zaafiyetler olabilir. Eğer denk gelirse bana bildirirseniz çok sevinirim görüşlerinizi bekliyorum

Coditor - Online Code Editor

Genişletmek için tıkla...

Elinize sağlık artık geçici projelerim için JSfiddle kullanmayacağım

Teşekkür ederim arkadaşlar güzel yorumlarınız için .

Bu tarz web uygulamalarda container yapısı kullanmak mantıksız, kullanabileceğiniz çokça alanı nedensiz yere boş bırakmışsınız. Editörlerin daha geniş olması işlevsellik açısından daha yararlı olacaktır.

Navbar hiçbir yönlendirme işlevi gerçekleştirmiyor, teknik açıdan hatalı. Gece / Gündüz yerine dark/light ya da koyu/açık, varsayılan tanımlarını tercih etmeniz daha iyi olacaktır. Ek olarak gece modunda önizleme kısmı beyaz olarak kalıyor.

Editör olarak Ace.js kütüphanesinden yararlanmışsınız, bu bağlamda ace.js sadece html5 ve css3 temelli bir kütüphane olmadığından content icon seçimleri hatalı. Kodu sıfırla butonu ve iconu da görsel bütünlüğü bozan etmenler olmuş.

Bazı font kalınlıkları yüzünden genel bütünlükte yazılar uyumsuz gözüküyor.

Son olarak bu tarz editörlerde içerik tamamen paylaşılabiliyor, yani kullanıcı yazdığını içeriği bir başkasına aktarabiliyor. Kendinizi ve projenezi geliştirmek adına bir sonraki adım olarak bu özelliği ekleyebilirsiniz.

Netluckie dedi:

Ek olarak gece modunda önizleme kısmı beyaz olarak kalıyor.

Genişletmek için tıkla...

Bunun olması normal çünkü iframe üzerinde html dökümanı oluşturuyor ve bunun stillendirmesini yapmak kod editöründe fonksiyonel hata oluşturur.

Netluckie dedi:

Bu tarz web uygulamalarda container yapısı kullanmak mantıksız, kullanabileceğiniz çokça alanı nedensiz yere boş bırakmışsınız. Editörlerin daha geniş olması işlevsellik açısından daha yararlı olacaktır.

Genişletmek için tıkla...

Dikkate alacağım.

Netluckie dedi:

Editör olarak Ace.js kütüphanesinden yararlanmışsınız, bu bağlamda ace.js html5 ve css3 temelli bir kütüphane olmadığından content icon seçimleri hatalı.

Genişletmek için tıkla...

Bu dediğinizi anlamadım resimle örnekler misiniz?

Netluckie dedi:

Son olarak bu tarz editörlerde içerik tamamen paylaşılabiliyor, yani kullanıcı yazdığını içeriği bir başkasına aktarabiliyor. Kendinizi ve projenezi geliştirmek adına bir sonraki adım olarak bu özelliği ekleyebilirsiniz.

Genişletmek için tıkla...

Bunu da anlamadım geniş olarak açıklamaya ihtiyacım var örnekler ile.

HTML ve CSS kısımları için HTML5 ve CSS3 iconlarını kullanmışsınız, fakat ace.js daha önceki versiyonları da destekleyen bir kütüphane. Yani spesifik bir versiyonu belirtmiş gibi olmuşsunuz fakat kullandığınız kütüphane önceki versiyonları da destekliyor.

Bahsettiğim özellik şu; codepen, jsfiddle gibi bilindik platformları örnek alırsak, platformda yazdığınız kodları prod olarak paylaşabiliyorsunuz. Yani kullanıcı yazdığını içeriğin önizleme kısmını ya da tamamen kod kısmını paylaşabiliyor.

Teknik açıdan iframe üzerinde gerçekleşenin olması normal kabul edilebilir, fakat kullanıcıya dark mod üzerinde tamamen beyaz bir alan sunmak dark mod mantığına ters düşüyor. Bence çözebileceğiniz bir sorun.

Netluckie dedi:

HTML ve CSS kısımları için HTML5 ve CSS3 iconlarını kullanmışsınız, fakat ace.js daha önceki versiyonları da destekleyen bir kütüphane. Yani spesifik bir versiyonu belirtmiş gibi olmuşsunuz fakat kullandığınız kütüphane önceki versiyonları da destekliyor.

Bahsettiğim özellik şu; codepen, jsfiddle gibi bilindik platformları örnek alırsak, platformda yazdığınız kodları prod olarak paylaşabiliyorsunuz. Yani kullanıcı yazdığını içeriğin önizleme kısmını ya da tamamen kod kısmını paylaşabiliyor.

Teknik açıdan iframe üzerinde gerçekleşenin olması normal kabul edilebilir, fakat kullanıcıya dark mod üzerinde tamamen beyaz bir alan sunmak dark mod mantığına ters düşüyor. Bence çözebileceğiniz bir sorun.

Genişletmek için tıkla...

Hocam güzel fikirleriniz ve önerileriniz için çok teşekkür ederim dediklerinizi dikkate alarak ReactJS ile 0 dan hazırlıyorum.

Auto-complete suggestionlar cok verimli calismiyor. Ayrica yazdigim kodun onizlemesini calistir butonuna basmadan belli bir timeout sonunda gorebilmeliyim. Console yok. Bunlar da benim gorebildiklerim.

nullptr dedi:

Eki Görüntüle 933005
Auto-Complete suggestionlar cok verimli calismiyor. Ayrica yazdigim kodun onizlemesini calistir butonuna basmadan belli bir timeout sonunda gorebilmeliyim. Console yok. Bunlar da benim gorebildiklerim.

Genişletmek için tıkla...

Zaten timeout a göre sonra görebiliyorsun otomatik çalışıyor. Ace editor deki suggesitonlar sanırım eksik kaldı Monaco editor deneyeceğim.

Güzel düşüncelerin için teşekkür ederim.

//Eklendi
Size bir sonraki sürümde eklemeyi düşündüğüm özelliklerden bahsetmek istiyorum.

Frontend olarak ReactJS'e geçeceğim.
Editörler Tab mantığına göre gösterim yapılacak. Sadece 1 editör gözükecek ve tam genişlikte.
Ace editorden Monaco editöre geçiş yapılacak.

Daha ileri sürümde de bir Codepen gibi yazılan kodları kullanıcı public olarak kaydedilebilecek ve iframe ile başka sitede gösterim yaparken özel bir görünüm yapmayı düşünüyorum ama şu an için bilgimi aştığı için bahsettiğim olay zaman alabilir.

Fikir belirten herkese teşekkür ederim umarım gün geçtikçe çok daha güzel bir proje olacak
Projeyi güncelledim. Güncelleme ile birlikte;

Mobil'de Tab ile editör geçişi eklendi.
Seçim kutusu ile editör arasında geçiş eklendi.
ReactJS'e geçildi.

Alpha aşamasında ve şu anda bazı eksikler var test amaçlı güncelledim fikirlerinizi belirtebilirsiniz.