Hem öğrenmek isteyen yeni başlayanlar hem de deneyimli profesyoneller için, kod satırlarını denemenize ve sonucu önizlemede ve neredeyse gerçek zamanlı olarak görmenize izin veren bazı web siteleri vardır. Bunlar, ekranın ikiye bölünmüş gerçek uygulamalarıdır; bir yandan HTML, CSS, PHP, Javascript veya diğer olabilecek kodu yazarken, diğer yandan yürütmek için bir tuşa bastıktan sonra, aslında bu kod bir web sitesinin içindeyse nasıl göründüğünü görürsünüz.
Bunlar basit kod editörleri değil, hata yapma konusunda endişelenmeden programınızı test edebileceğiniz ve hataların nerede olduğunu hızlıca öğrenebileceğiniz yerlerdir. Codepen ve JSFiddle bu kategorideki en popüler iki sitedir, ancak birçok alternatif de vardır.
AYRICA OKUYUN: Uygulamalar ve web siteleri için kullanılan ana programlama dilleri
1) CodePen
CodePen, en popüler sitedir ve programcılar tarafından kullanılır, çünkü ücretsiz, sezgisel ve kullanımı kolaydır. Programcılar dünyasında bir standart haline geldikten sonra, Google'da Codepen tarafından derlenmiş sayfaları bulmak için arama yapın ve aradığınız şeyin bu olup olmadığını hemen görün. Esnek görüntüleme pencereleri ve yazılı kodun hemen yürütülmesi, javascript ve CSS animasyonlarını denemek için yeterince mükemmel olmasını sağlar, ayrıca harici komut dosyalarına (React, Vue ve CDN aracılığıyla mevcut olan herhangi bir şey) kolayca bağlanabilir.
CodePen bu kategoride birinciliği hak ediyor, ancak işbirliğine dayalı kodlama ve tam sayfa canlı görüntülemeler (kısmi canlı görüntülemeler ücretsiz) gibi bazı özellikler ücretli.
2) JSFiddle
İkinci olarak (kronolojik olarak en eski olanlardan biri olsa da) programlama kodunu yazmak ve denemek için siteler dünyasında JSFiddle, her şeyden önce JavaScript'in oluşturulması ve test edilmesine yöneliktir. HTML ve CSS için de kullanılabilir ve kod tamamlama ipuçlarını desteklediğinden ve daha az deneyimli olanlar için CodePen'e tercih edilebilir.
JSFiddle lehine büyük bir nokta, ücretsiz işbirliği modu (sesli ve yazılı sohbet dahil) sunmasıdır, böylece kod üzerinde başkalarıyla aynı anda çalışabilirsiniz.
3) Aksaklık
Birçok kod sitesi HTML / CSS / JS kodlamanıza ve statik Web sayfaları oluşturmanıza izin verirken Glitch, projeleri kaydetmek için küçük bir ücretsiz depolama alanı sunar ve Node.js'nin sunucu tarafı kodunu çalıştırmayı oldukça kolaylaştırır. Glitch'te işbirliği yaparak programlayabilirsiniz,
Ayrıca bir dizi başka harika özellik ile geliyor: işbirlikçi kodlama, sürüm kontrolü, birçok öğrenme kaynağı, GitHub ile iyi entegrasyon, kolay gömme, tavsiye istemek için bir topluluk, serbestçe değiştirebileceğiniz veya kullanabileceğiniz projeler ve Visual Studio entegrasyonu. Bir web uygulaması başlatmanın (veya nasıl yapılacağını öğrenmenin) harika, hızlı ve kolay bir yoludur.
4) CodeSandbox
CodeSandbox Glitch'e benzer, ancak biraz daha karmaşık ve eksiksizdir. CodeSandbox daha esnek ve özelleştirilebilir bir arayüze sahiptir, eksiksiz web uygulamalarını dağıtmanıza izin verir, dosyaları kaydetmek için bir alana sahiptir ve temel çalışmanın çoğunu yapar ve programcıya yalnızca yazma görevini bırakır.
5) Repl.it
Repl.it, ön uç ve arka uç kodu desteği ile Python gibi farklı programlama dillerini test etmek için bir geliştirme ortamıdır, siteleri ve uygulamaları dağıtmanıza izin verir, GitHub ve sezgisel bir arayüzle entegrasyona sahiptir. Sadece web sayfaları tasarlamaya çalışan herkes için biraz zor olabilir, ancak zaten deneyimli programcılar için dikkate alınması gereken bir kaynaktır. yalnızca ön uç planlıyorsanız veya kodda yeniyseniz, ancak her şeyi düzenli olarak planlıyorsanız, keşfetmeye değer.
6) Liveweave, canlı önizleme işlevselliği, HTML5, CSS3, JavaScript ve jQuery için kod ipuçları içeren ve projeyi bir dosya olarak indirmenize izin veren web sitelerinde kullanılacak kod yazıp test eden JSFiddle'a çok benzeyen bir web editörüdür. zip. JQuery, AndgularJS, Bootstrap gibi harici kütüphaneleri de kolayca ekleyebilirsiniz.
7) CodeSandbox, React, Vue, Angular ve çok daha fazlası gibi farklı çerçeveler kullanarak web uygulaması projelerine başlayabileceğiniz ücretsiz bir çevrimiçi alandır.
8) StackBlitz, Vue ve React gibi çeşitli çerçeveleri destekleyen mükemmel bir javascript uygulama editörüdür.
9) Flems, minimalist site, hızlı testler yapmak için mükemmel.
10) JSFin, JSFiddle'ın daha minimalist bir versiyonu, web sayfası kodu yazmak ve nasıl göründüğünü görmek için.
11) CSSDeck bazı temel HTML / CSS ve JS fikirlerini test etmek için basit bir sitedir.
12) Tarayıcıda çalışan ve çevrimdışı kullanılabilen bir programı indirmenizi gerektiren, kodu test etmek için başka bir çevrimiçi ortam olan ICECoder .
13) Plunker, kod, dosya ve web sayfaları yazmanıza ve bunları Github'a kaydetmenize olanak tanıyan bir ön uç aracıdır.
14) Scrimba, öğrenciler ve öğrenmek isteyenler için mükemmel bir öğrenme ortamı olan yenilikçi bir video ve kod editörü kombinasyonudur.
15) WebMaker, çevrimdışı işlevselliğe ve CodePen ile entegrasyona sahip bir web uygulaması yaratıcısıdır.
16) Dabblet, güzel grafikler ve CSS kodu için otomatik düzeltici ile HTML / CSS / JS kodu yazmaya çalışmak.
17) PlayCode ayrıca temel HTML / CSS / JS kodunun gerçek zamanlı test edilmesi için bir ortamdır.
19) JSItor, HTML, CSS ve Javascript'i birleştirerek kod yazabileceğiniz ve hemen sonucu görebileceğiniz Codepen ve JSFiddle'a başka bir alternatiftir.
AYRICA OKUYUN: Etkileşimli kurslar ve zorluklarla oynayarak programlamayı öğrenen siteler
Bunlar basit kod editörleri değil, hata yapma konusunda endişelenmeden programınızı test edebileceğiniz ve hataların nerede olduğunu hızlıca öğrenebileceğiniz yerlerdir. Codepen ve JSFiddle bu kategorideki en popüler iki sitedir, ancak birçok alternatif de vardır.
AYRICA OKUYUN: Uygulamalar ve web siteleri için kullanılan ana programlama dilleri
Çevrimiçi kodu test edecek siteler
1) CodePen
CodePen, en popüler sitedir ve programcılar tarafından kullanılır, çünkü ücretsiz, sezgisel ve kullanımı kolaydır. Programcılar dünyasında bir standart haline geldikten sonra, Google'da Codepen tarafından derlenmiş sayfaları bulmak için arama yapın ve aradığınız şeyin bu olup olmadığını hemen görün. Esnek görüntüleme pencereleri ve yazılı kodun hemen yürütülmesi, javascript ve CSS animasyonlarını denemek için yeterince mükemmel olmasını sağlar, ayrıca harici komut dosyalarına (React, Vue ve CDN aracılığıyla mevcut olan herhangi bir şey) kolayca bağlanabilir.
CodePen bu kategoride birinciliği hak ediyor, ancak işbirliğine dayalı kodlama ve tam sayfa canlı görüntülemeler (kısmi canlı görüntülemeler ücretsiz) gibi bazı özellikler ücretli.
2) JSFiddle
İkinci olarak (kronolojik olarak en eski olanlardan biri olsa da) programlama kodunu yazmak ve denemek için siteler dünyasında JSFiddle, her şeyden önce JavaScript'in oluşturulması ve test edilmesine yöneliktir. HTML ve CSS için de kullanılabilir ve kod tamamlama ipuçlarını desteklediğinden ve daha az deneyimli olanlar için CodePen'e tercih edilebilir.
JSFiddle lehine büyük bir nokta, ücretsiz işbirliği modu (sesli ve yazılı sohbet dahil) sunmasıdır, böylece kod üzerinde başkalarıyla aynı anda çalışabilirsiniz.
3) Aksaklık
Birçok kod sitesi HTML / CSS / JS kodlamanıza ve statik Web sayfaları oluşturmanıza izin verirken Glitch, projeleri kaydetmek için küçük bir ücretsiz depolama alanı sunar ve Node.js'nin sunucu tarafı kodunu çalıştırmayı oldukça kolaylaştırır. Glitch'te işbirliği yaparak programlayabilirsiniz,
Ayrıca bir dizi başka harika özellik ile geliyor: işbirlikçi kodlama, sürüm kontrolü, birçok öğrenme kaynağı, GitHub ile iyi entegrasyon, kolay gömme, tavsiye istemek için bir topluluk, serbestçe değiştirebileceğiniz veya kullanabileceğiniz projeler ve Visual Studio entegrasyonu. Bir web uygulaması başlatmanın (veya nasıl yapılacağını öğrenmenin) harika, hızlı ve kolay bir yoludur.
4) CodeSandbox
CodeSandbox Glitch'e benzer, ancak biraz daha karmaşık ve eksiksizdir. CodeSandbox daha esnek ve özelleştirilebilir bir arayüze sahiptir, eksiksiz web uygulamalarını dağıtmanıza izin verir, dosyaları kaydetmek için bir alana sahiptir ve temel çalışmanın çoğunu yapar ve programcıya yalnızca yazma görevini bırakır.
5) Repl.it
Repl.it, ön uç ve arka uç kodu desteği ile Python gibi farklı programlama dillerini test etmek için bir geliştirme ortamıdır, siteleri ve uygulamaları dağıtmanıza izin verir, GitHub ve sezgisel bir arayüzle entegrasyona sahiptir. Sadece web sayfaları tasarlamaya çalışan herkes için biraz zor olabilir, ancak zaten deneyimli programcılar için dikkate alınması gereken bir kaynaktır. yalnızca ön uç planlıyorsanız veya kodda yeniyseniz, ancak her şeyi düzenli olarak planlıyorsanız, keşfetmeye değer.
6) Liveweave, canlı önizleme işlevselliği, HTML5, CSS3, JavaScript ve jQuery için kod ipuçları içeren ve projeyi bir dosya olarak indirmenize izin veren web sitelerinde kullanılacak kod yazıp test eden JSFiddle'a çok benzeyen bir web editörüdür. zip. JQuery, AndgularJS, Bootstrap gibi harici kütüphaneleri de kolayca ekleyebilirsiniz.
7) CodeSandbox, React, Vue, Angular ve çok daha fazlası gibi farklı çerçeveler kullanarak web uygulaması projelerine başlayabileceğiniz ücretsiz bir çevrimiçi alandır.
8) StackBlitz, Vue ve React gibi çeşitli çerçeveleri destekleyen mükemmel bir javascript uygulama editörüdür.
9) Flems, minimalist site, hızlı testler yapmak için mükemmel.
10) JSFin, JSFiddle'ın daha minimalist bir versiyonu, web sayfası kodu yazmak ve nasıl göründüğünü görmek için.
11) CSSDeck bazı temel HTML / CSS ve JS fikirlerini test etmek için basit bir sitedir.
12) Tarayıcıda çalışan ve çevrimdışı kullanılabilen bir programı indirmenizi gerektiren, kodu test etmek için başka bir çevrimiçi ortam olan ICECoder .
13) Plunker, kod, dosya ve web sayfaları yazmanıza ve bunları Github'a kaydetmenize olanak tanıyan bir ön uç aracıdır.
14) Scrimba, öğrenciler ve öğrenmek isteyenler için mükemmel bir öğrenme ortamı olan yenilikçi bir video ve kod editörü kombinasyonudur.
15) WebMaker, çevrimdışı işlevselliğe ve CodePen ile entegrasyona sahip bir web uygulaması yaratıcısıdır.
16) Dabblet, güzel grafikler ve CSS kodu için otomatik düzeltici ile HTML / CSS / JS kodu yazmaya çalışmak.
17) PlayCode ayrıca temel HTML / CSS / JS kodunun gerçek zamanlı test edilmesi için bir ortamdır.
19) JSItor, HTML, CSS ve Javascript'i birleştirerek kod yazabileceğiniz ve hemen sonucu görebileceğiniz Codepen ve JSFiddle'a başka bir alternatiftir.
AYRICA OKUYUN: Etkileşimli kurslar ve zorluklarla oynayarak programlamayı öğrenen siteler
