Online kod yazıp, test edip ve paylaşılabilen uygulamaları paylaşacağım, en çok kullanılan ve bilinenleri Codepen ve Jsfiddle ancak daha yetenekli ve farklı özellikleri olan alternatiflerini de listeme dahil edeceğim, umarım işinize yarar.
Bir web geliştiricisi iseniz kahvenizin yanında, masanız ve koltuğunuzda olduğu gibi kod editörünüzün de konforlu olmasını istersiniz. Hele ki bunun tarayıcıdan online olarak yapabilmek ve yaptığınızı paylaşabilmek de güzel olur. İşte bu online kod editörleri bu işe yarıyor ve aslında masaüstünde kendi IDE’niz ile yazıp, test edip vs. yerine geçerek daha hızlı, gerçek zamanlı ve konforlu bir çalışma deneyimi sunuyor.
İşte benim seçtiğim en kaliteli editörler
- Codepen – En popüler online kod editörü, HTML, CSS ve JavaScript üzerine, çeşitli kütüphaneleri destekliyor, profilinizde uygulamalarınızı paylaşabiliyorsunuz.
- Jsfiddle – Yine popüler olan ve HTML, CSS ve JavaScript üzerine, Codepen ile benzer ancak JavaScript konusunda bira daha güçlü.
- JS Bin – Pro özelliklerin de abonelik ile satın alınabildiği oldukça gelişmiş HTML, CSS ve JS editörü.
- Glitch – Kaliteli ve depolama izni veren online uygulamalar da geliştirebileceğiniz kapsamlı bir web editörü. Kesinlikle en beğendiğim.
- Codesandbox – Diğerlerinden farklı olarak birçok özelliği mevcut, birlikte çalışma, GitHub, Netlify entegrasyonu vs. Dopdolu bir uygulama.
- Repl.it – Tarayıcıda linters ve hata ayıklayıcılardan üçüncü taraf paketlerine, barındırma ve konuşlandırmaya kadar her şeyi içeren eksiksiz, işbirlikçi bir bulut geliştirme ortamıdır. Ücretli kullanım seçeneklerine sahip.
- Outpan – Basit ve kullanışlı, yapılan sayfaların paylaşılabildiği oldukça güzel bir uygulama.
- Plunker – Açık kaynak olan bu online web editörü Frontend namına tüm imkanları sağlıyor.
- AWS Cloud9 – Bir masaüstü IDE’nin gücü ile çalışan kod düzenleyici ve geliştirme ortamıdır. Oldukça geniş kullanım alanı(özellikleri vardır ve çok kalitelidir.
- Flems – Basit ve kullanımı kolay, bir oyun alanı gibi. Tavsiye ederim.
- LocalPen – Açık kaynak, güncel ve geliştirilmeye devam eden bu online web editörü diğerlerinden daha farklı ilginç özelliklere sahip ve denemenizi öneririm.
JSbin, JSfiddle ve Codepen özellik karşılaştırma tablosu
* | JSbin | JSfiddle | Codepen |
Live Output | Evet | Hayır (In Pipeline) | Evet |
HTML pre-processor | Markdown, Jade | Hayır | Markdown, Jade, Haml, Slim |
CSS pre-processor | LESS | SCSS | SCSS, SASS, LESS, Stylus |
JS pre-processor | CoffeeScript, TypeScript, Traceur, JSX | CoffeeScript | CoffeeScript, LiveScript |
CSS libraries | Hayır | Normalize | Normalize, Reset |
JS libraries | 40+ | 30+ | 8 |
External file add | Manual | Kolay | Çok kolay |
Keyboard Shortcuts | Evet | Evet | Evet |
Account | Ücretsiz | Ücretsiz | Ücretsiz + Ücretli |
Like, Comment, Follow | Hayır | Hayır | Evet |
Fork | Hayır | Evet | Evet |
Private works | Ücretli | Ücretsiz | Ücretli |
Tags | Hayır | Hayır | Evet |
Panel Hide | Evet | Hayır | Evet (minimizable) |
Error & Warnings | Only JS (Real time) | Only JS (Not real time) | HTML, CSS, JS (Not real time) |
Collaboration | Hayır | Çok iyi ve ücretsiz | İyi ancak ücretli |
Theme | Evet | Hayır | Evet |
Dummy Ajax | Hayır | Evet | Evet |
Bracket Highlight | Evet (özelleştirilebilir) | Evet | Evet |
Auto end bracket | Evet | Hayır | Hayır |
Line Numbers | Evet (özelleştirilebilir) | Evet | Evet |
Speed | Çok hızlı | Yavaş | Hızlı |
Embedding | Evet | Evet | Evet |
SEO friendly | Evet | Evet | Evet |
Download | Evet | Hayır | Evet |
Locally Installable | Evet | Hayır | Hayır |
Yukarıdaki listede olmayan birçok uygulama daha vardır ancak bunlar en güvenilir ve iyi olanlar.
Glitch About Video
Ben şahsen ufak tefek blogda kod uygulaması paylaşmak için Codepen ve Jsfiddle kullanıyordum ancak son zamanlarda Glitch ile Codesandbox daha bir kullanışlı geldi bana ve onları kullanmaya başladım.
Bunların yansıra online PHP, Python, C#, Go, Java gibi yazılımları yazıp derleyebileceğiniz online uygulamalar da vardır, örnek: ide.geeksforgeeks.org, onlinegdb.com, jdoodle.com, bunları listeye dahil etmedim ve ayrı tuttum.
İyi çalışmalar dilerim, kolay gelsin.