Tasarım Kodlama

Programlamaya Yeni Başlayanlar için Ücretsiz Online Kod Editörleri

Çevrimiçi kod düzenleyici nedir?

Çevrimiçi kod düzenleyici, uzak bir sunucuda bulunan ve tarayıcılar aracılığıyla erişilebilen bir araçtır. Bazı çevrimiçi kod editörleri, metin editörlerine daha çok benzeyen temel özelliklere sahipken, diğerleri tam IDE’ler gibidir. Bu yazıda her iki türü de inceleyeceğiz.

Bazı çevrimiçi kod editörleri bir dile veya hatta bir çerçeveye odaklanır. Örneğin, kendilerini javascript çevrimiçi kod editörleri veya tepki veren çevrimiçi düzenleyici olarak adlandıran ürünler var.

Çevrimiçi kod düzenleyicilerin temel kullanım durumları

Kod editörlerinin kullanıma uygun olduğu tüm durumları düşünelim. Bunları kullanmanın birçok yolu var, ancak çevrimiçi kod editörlerine olan ihtiyacı kanıtlayan birkaç temel yolu vurguladık.

İşbirliği

İşbirliği sürecini masaüstü IDE’lerle kurmak zor olabilir. Çevrimiçi kod düzenleyicilerle bu görev, Google Dokümanlar’da bir belge oluşturmak kadar kolay hale gelir.

Paylaşım ve geliştirici ilişkileri

Çevrimiçi kod düzenleyiciyi kullanarak kodunuzu meslektaşlarınızla, arkadaşlarınızla veya dünyayla paylaşabilirsiniz. Blog gönderilerinizde, nasıl yapılır öğreticilerinizde, belgelerde korumalı alanlara yerleştirmeleri veya bağlantıları kullanabilirsiniz.

Yeni uygulamaları hızla barındırma

Popüler barındırmalarla entegrasyona sahip bazı çevrimiçi kod düzenleyicileri vardır, böylece basit bir uygulama geliştirebilir ve test etmek için dakikalar içinde barındırabilirsiniz.

Çevrimiçi görüşmeler ve işe alım için

Çevrimiçi kod editörleri ile bir dakika içinde röportaj yapabilirsiniz. Adayların yaklaşım çözümlerini görmeye ve kodla çalışmaya yardımcı olur.

Prototipleme

Fikirlerinizi erken ve sık sık test edin. Fikirlerinizi doğrulayabilir ve kullanıcılardan anında geri bildirim alabilirsiniz. Kurulum yapmaya gerek yok. Paylaşım ve işbirliği seçenekleri bu konuda size yardımcı olacaktır.

Öğrenme

Modern web geliştirmede, en son haberleri takip etmeye ve daha da iyisi onları gerçek koşullarda denemeye değer. En iyi çevrimiçi kod editörleri, gereksiz kurulumlar olmadan bunu hızlı bir şekilde yapmanızı sağlar.

Çevrimiçi bir kod düzenleyici nasıl seçilir?

En ünlü çevrimiçi kod editörleri birçok harika özelliği paylaşır. Bunlar arasında otomatik tamamlama, git entegrasyonu, eklenti desteği, CI / CD ardışık düzenleri ve diğerleri bulunur. Ancak, belirli bir editörü sizin için diğerlerinden daha uygun hale getirebilecek küçük şeylerdir.

İlginizi çekebilir: Android Telefon Kullanıcıları için 7 Ücretsiz Kod Editörü

Çevrimiçi bir IDE/kod düzenleyici seçerken aklınızda bulundurmanız gereken bazı yönleri inceleyelim:

  • Bir uygulama ne kadar hızlı çalışır;
  • Ücretsiz editörler için: Ne kadar reklam gösterir;
  • Depo yöneticileriyle entegrasyonlar;
  • Kurulum kolaylığı;
  • Diller desteği;
  • NPM desteği;
  • Terminal desteği;
  • Bir dizi metin ve düzen ayarı.

Bu listeyi tercih ederken ücretsiz özelliklerin daha yoğun olduğu kod yazma sitelerini tercih ettim. Online kodlama programları yada kodlama öğrenme siteleri olarak da tercih edebileceğiniz bir liste olarak oluşturuldu.

İşte Çevrimiçi Kod Düzenleyiciler

1. Repl.it

Repl.it, geliştirme için en güçlü çevrimiçi araçlardan biridir. Ürün, modern popüler Haskell, Kotlin ve tanınmış Javascript, C++, Ruby ve çok daha fazlası dahil olmak üzere çok çeşitli dilleri ve çerçeveleri destekler.

Ana sayfa dil aramasıyla başlar, ardından şu kategorilerden birini seçmeyi önerir: web geliştirici, oyun geliştirici ve diğerleri. O zaman dili seçmeniz ve repl oluşturmanız gerekir.

Ücretsiz sürümde bile dosya yapısını oluşturabilir, sürümü kontrol edebilir ve paketleri kurabilirsiniz.

Ayarlarda düzeni, temayı, yazı tipi boyutunu ve girinti boyutunu düzenleyebilirsiniz.

Paylaşım seçenekleri arasında bağlantı yerleştirme, normal bağlantı, dev.to topluluğu ile entegrasyon yer alır. Ayrıca geliştiricilerin geri bildirim alabileceği ve kodu paylaşabileceği “konuşma” adlı bir sosyal medya özelliği de vardır.

Ayrıca, sınıflar oluşturabileceğiniz, öğrencileri davet edebileceğiniz ve ilerlemeyi izleyebileceğiniz Classrooms adında başka bir büyük özellik daha var.

Repl, Facebook, MIT, Google ve diğerleri gibi şirketler ve kuruluşlar tarafından kullanılmaktadır.

Ücret, özel yanıtlar, sınırsız depolama ve daha iyi hız için aylık ücretsiz ila 7 ABD Doları arasında değişir.

2. Codesandbox

Her popüler ön uç çerçevesi için şablon kullanmaya başlayabilirsiniz. React, Vue, Angular ve Gatsby, Next ve diğerleri gibi pop.

Codesandbox, kendisini bir geliştirme platformu olarak konumlandırıyor. Topluluk tarafından yapılmış birçok şablon var. Ek olarak, IDE’de olduğu gibi dosya yapısı ve bağımlılıkları ile özel kullanım durumunuz için kendi şablonlarınızı oluşturabilirsiniz.

Araç Github ile entegredir, kolayca taahhütler oluşturabilir ve PR’leri açabilirsiniz. Uygulamanızı kutunun dışında ZEIT veya Netlify’ye dağıtabilirsiniz.

Ve evet, ön uç ninjalar için çevrimiçi kod düzenleyicide (sic!) NPM desteği var. Ek olarak, bir sıcak modül yeniden yükleme var. Ve elbette, her korumalı alanda, paylaşım ve geri bildirim için HTTPS destekli güvenli bir URL bulunur.

Kod korumalı alanıyla işbirliğine gelince, iş arkadaşlarınızla canlı olarak çalışabilir, onlarla sohbet edebilir ve düzenlemeleri kimin yapabileceğini veya kodu izleyebileceğini kontrol edebilirsiniz.

Aşağıdakiler gibi birçok güzel özellik de vardır:

  • Konsol;
  • Test görünümü;
  • Yerleşik terminal;
  • Jest testlerinin otomatik çalıştırılması;
  • Sıcak modül yeniden yükleniyor;
  • Projenin organizasyonu;
  • Kodu zip olarak dışa aktarma;
  • Yerleşik linter (ESlint).

Fiyatlandırmaya gelince, Codesandbox, özel GitHub depolarını ve sınırsız özel korumalı alanları içeren Pro sürümü için 9$ ücret alıyor.

3. Codeanywhere

Codeanywhere, web tarayıcınızda ve mobil cihazınızda tam IDE gibi görünüyor.

Projeniz için kendi özelleştirilmiş geliştirme ortamınızı Javascript, PHP, HTML ve diğer 72 dilde kolayca kurabilirsiniz.

En basit özelliği, Codeanywhere’in herhangi bir şeyle, evet, kelimenin tam anlamıyla herhangi bir şeyle bağlantı kurmasıdır. Kodunuz FTP sunucusunda veya diğer Github kaynaklarında bulunabilir, ancak Codeanywhere ile bağlayabilir ve düzenlemeye ve geliştirmeye başlayabilirsiniz.

Editör modunda aşağıdaki özellikleri kullanabilirsiniz:

  • Kod tamamlama;
  • Linting (js, CSS);
  • Birden çok imleç;
  • Kod güzelleştirin.
  • Ek olarak, düzenleyicinin düzen ve renk modlarıyla oynayabilirsiniz.

Aracın kendi yerleşik terminali vardır.

Ayrıca tüm projeleri, dosyaları veya klasörleri herhangi bir geliştiriciyle paylaşabilirsiniz. Her paylaşımın kendine özgü izinleri olabilir.

Codeanywhere, revizyonlar arasındaki farkları görmenize ve hatta önceki kod durumlarına dönmenize izin veren pratik bir diferansiyel özellik içerir.

Ayrıca, geliştirme işlemlerinin sürecini kolaylaştıran git depoları ve araçlarıyla derin bir entegrasyon vardır.

Ürün, buluta geçmek ve sonsuza kadar orada kalmak isteyen geliştiriciler için uygundur.

4.Codepen

Codepen, çevrimiçi kod düzenleyici pazarındaki muhtemelen en popüler araçtır. Platform bir şekilde Pinterest’e benzer şekilde sosyal ağlara dönüşmeye başlıyor. Mühendisler en iyi uygulamalarını ve pinlerini platformda paylaşabilir ve topluluktan onay alabilir.

Aracın içinde iyi geliştirilmiş bir arama var. İlgilendiğiniz şablonları, projeleri, kod parçalarını ve konuları keşfedebilirsiniz.

Codepen’in en büyük özelliği, yeni teknolojileri ve en iyi uygulamaları öğrenmek ve keşfetmektir. Pens ile gezinmek, çalışmak ve oynamak, nasıl oluşturulduklarını ve kodun nasıl çalıştığını anlamanın harika bir yoludur.

Başka bir ilginç ayrıntı – kodun sunum modu. Konferanslarda, buluşmalarda ve stand-up’larda çok yardımcı oldu.

Önemli özellikler:

  • Dosya sistemi;
  • Otomatik tamamlama;
  • Özel sanal alanlar;
  • Web sitesi dağıtımı;
  • İşbirliği modu.

Fiyatlar ayda 8 ila 26 dolar arasında değişiyor. Ürünün ücretsiz sınırlı bir sürümü de vardır.

5. Playcode

Playcode, hızlı prototip oluşturmak ve kodlamanın sonucunu görüntülemek için sadece basit bir araçtır. Aracın klasik bir üç pencere düzeni vardır: kod düzenleyici, konsol ve sonuç görünümü. Ürün, temel bir dosya yapısına sahiptir ancak sürüm kontrolü ve diğer IDE özelliklerine sahip değildir.

Yalnızca javascript, HTML ve CSS’yi destekler. Ayrıca, düzenleyici stili, yazı tipi boyutu ve diğer metin düzenleme özelliklerini seçme seçeneği de vardır.

6. Stackblitz

Stackblitz tam IDE’ye çok benzer, özellikle de VS koduna veda edemiyorsanız, araç VS kodu üzerine inşa edildiğinden. Ürün, eksiksiz bir tam yığın uygulama geliştirmeye başlamak ve devam ettirmek için geniş bir özellik yelpazesine sahiptir. Araç, birçok geliştiricinin aşina olduğu Visual Studio tarafından desteklenmektedir.

Siz yazarken bağımlılıkları yükleme, derleme, gruplama ve yeniden yükleme işlemlerini otomatik olarak halleder.

Kitaplıkları içe aktarmak web geliştirme için çok önemlidir, bu nedenle StackBlitz, bir seferde birden fazla paket ve belirli sürümler yüklemeyi destekleyen bir tarayıcı içi npm istemcisi içerir

Bu projenin katil özelliği çevrimdışı düzenlemedir. Stackblitz çalışanları, bunun gerçekleşmesine izin vermek için bir tarayıcı içi web sunucusu geliştirdiler.

Stackblitz ile ayrı bir pencerede önizleyebilir ve düzenleyebilirsiniz; bu, diğer projelerdeki iframe’ler veya küçük pencerelerle karşılaştırıldığında harikadır.

Diğer önemli özellikler, projeleri içe / dışa aktarmak için Github’a bağlanmak, tam yığın projeler oluşturmak için Google Firebase ile entegrasyon ve projeyi bir ZIP dosyası gibi indirmektir.

7. JSfiddle

JSfiddle, basit ancak son derece popüler, hızlı ve verimli bir çevrimiçi kod düzenleyicidir. Araç, kodu hızlı bir şekilde paylaşmanıza ve bir görünüm için sonucu görselleştirmenize olanak tanır. Bu araç o kadar popüler ve basittir ki, StackOverflow onunla entegre edilmiştir.

Görsel olarak, çoğu rakip gibi arayüz 4 bloğa bölünmüştür: kod yazmak için bir blok, CSS, SCSS veya sass düzenlemek için bir kod, HTML düzeni için bir blok ve çalışmanızın görünür sonuçlarını içeren bir blok.

Kod düzenleme bloğu aşağıdaki dilleri destekler:

  • Saf Javascript;
  • Tepki;
  • Preact;
  • Babel + JSX;
  • Kahve yazısı;
  • Vue;
  • Komut dosyası yazın.
  • Ayrıca bu blokta, yükleme türü, çerçeve türü ve çerçeve özelliği gibi çeşitli ayarları değiştirebilirsiniz.

Araç aynı zamanda çok iyi ve eksiksiz belgelere ve ayrıca geliştirme için önce kabul edilecek özelliklere oy verebilecek gelişmiş bir topluluğa sahiptir.

Geliştirme aynı zamanda Vue, Jquery, React + JSX ve diğerlerinde yazılmış birkaç popüler kazan plakasını kullanma becerisiyle de kolaylaştırılmıştır.

Eksilere gelince, JSfiddle yalnızca ön uç çalışması içindir. Dosya ve klasör kavramını desteklemez ve CI / CD ardışık düzenleri oluşturmanın bir yolu yoktur.

Genel olarak bu, yeni çerçeveleri test etmek için en mantıklı ve havalı seçimlerden biridir ve yeni ürünlerin makalelerinde ve demolarında kodu gösterir.

8. Online SQL Editor

SQL OnLine – (Test DB): SQLite, MariaDB / MySQL, PostgreSQL, MS SQL Sunucusu. Veri bilimi için kullanıcı dostu arayüz. Başlatma için kayıt yok, Yükleme Yok, Yükleme Yok. Çevrimiçi test SQL komut dosyası. SQLite dosyasını Çevrimiçi Aç / Kaydet. Tüm tablo DB’sini çevrimiçi görüntüleyin. Keman bağlantısı SQL metni ve DB dosyası. SQL Testi, Tarayıcıda SQLite, Dünya için Veri, çevrimiçi sql derleyicisi, ücretsiz db, ücretsiz veritabanı, db ücretsiz, veritabanı içermez

9. Jsoneditoronline

Jsoneditoronline, JSON’u görüntülemek, düzenlemek ve biçimlendirmek için web tabanlı bir araçtır. Verilerinizi net, düzenlenebilir bir ağaç görünümünde veya bir kod düzenleyicide yan yana gösterir. Belgeleri yerel olarak veya bulutta depolayabilirsiniz.

Belgeyi bir bağlantıyla da paylaşabilir, JSON dosyasını düz kod veya ağaç olarak görüntüleyebilir, sorgular yapabilir ve tabii ki dosyayı yerel olarak kaydedebilirsiniz.

Bu, herhangi bir cihazda kurulum ve metin düzenleyicileri olmadan bir JSON dosyasını düzenlemek için iyi bir seçimdir.

10. Codeply

Codeply: javascript ve çerçevelerini hızlı bir şekilde düzenlemek için piyasadaki başka bir araç. Ürün ilk olarak 2014’te piyasaya sürüldü ve 2019’da sürüm 2 yayınlandı.

Codeply, açısal, tepki verme, Vue, HTML önyükleme ve düz Javascript’i düzenlemenize olanak tanır. Şirketin arkasındaki ekip, ürünün hızlı prototip oluşturma, maket oluşturma, yeni popüler kitaplıkları, API’leri, eklentileri ve çerçeveleri öğrenmeye ve keşfetmeye uygun olduğunu söylüyor.

Standart özellik seti, düzen ayarlarını, sonucun bir önizlemesini, hazır şablonları ve bir sosyal ağın öğelerini içerir. Hız, diğer araçlara kıyasla oldukça belirgindir.

11. Gitpod

Gitpod, kodunuzu her zaman test edilmiş ve güncel tutmayı amaçlar. Github ile derinlemesine entegredir: Kodu her güncellediğinizde testleri çalıştırır.

Ürün bir VScode arayüzüne sahiptir ve tüm önemli arka uç / ön uç dillerini ve çerçevelerini (Django, Rails, Revel, siz adlandırın) destekler.

12 .Plnkr

Plunker, web geliştirme fikirlerinizi oluşturmak, üzerinde işbirliği yapmak ve paylaşmak için çevrimiçi bir topluluktur.

Plunker’in temel özelliği hızdır. Karmaşıklığına rağmen, Plunker editörü 2 saniyenin altında yüklenecek şekilde tasarlanmıştır.

Önemli Özellikler:

  • Gerçek zamanlı kod işbirliği;
  • Tam özellikli, özelleştirilebilir sözdizimi düzenleyici;
  • Kod değişikliklerinin canlı önizlemesi;
  • Yazarken kod listesi;
  • Plunks’un çatallanması, yorumlanması ve paylaşılması;
  • MIT lisansı altında GitHub’da tamamen açık kaynak.

Sonuç

Bunlar, çevrimiçi çalışan en uygun çevrimiçi kod editörleri ve IDE’lerdir. Bazı durumlarda çevrimiçi IDE’leri / kod düzenleyicileri kullanmak zahmetsizdir, ancak dikkatli olun – çevrimiçi kod düzenleyicilerle ilgili büyük bir proje başlatmayın.

Tamamen röportajlara odaklanan veya eksiksiz bir ürün olarak adlandırılacak yeterli özelliğe sahip olmayan çevrimiçi kod editörlerini dahil etmedik.

Bir şeyin burada olmayı hak ettiğini düşünüyorsanız, bize bildirin – minnettar olacağız.

1 yorum