FrontEnd Geliştirme: CodePen veya Sublime Text?

CodePen mi yoksa yüce metin mi?

CodePen veya Sublime Text? Web programlamadan bahsedecek olursak HTML, CSS ve JavaScript adı hemen karşımıza çıkıyor. Oraya gitmenin birkaç yolu var. Hatta, Bir not defteri açarsak, "html" yazmaya başlayabiliriz. Bir pedden programladığınız şeyin sonucunu görmek için, ilerlemeyi fark etmek için zahmetli bir prosedüre ihtiyacınız olacağı doğrudur.

Bu siteler, günün kullanıcıları için uygulama geliştiricileri için ana oyun alanlarıdır.. Bu programların avantajları ve dezavantajları hakkında daha fazla bilgi edinmek için, bunları bu makalede derinlemesine analiz edeceğiz (en azından bildiğimiz her şeyi). Her zaman söylediğim gibi, kesinlikle buradaki bazılarınız konuyu daha çok biliyorsunuz. Öyleyse, bizden kaçan her şeyi burada yorumlayın. Tartışmaktan mutluluk duyarız!

Bugün CodePen, JSBin, Plunkr, sublime'ı analiz edeceğiz, CSSDeck, Dabblet ve LiveWeave. Bu ortamda en çok bilinen ve en çok kullanılan araçlar hangileridir. Elbette dahası var.

Ancak FrontEnd veya BackEnd'in ne hakkında olduğunu bilmeyenler için biraz açıklayalım. Ön Uç veya arayüz, gezinen kullanıcının web'de görebileceği görsel kısımdır.. BackEnd, site yöneticisinin kontrol ettiği kısım olacaktır. Programlamada, sonucu aynı anda görüntüleyen bir araç aracılığıyla kod girerseniz, buna ön uç adı verilecektir..

CodePen

Çoğu için en eksiksiz araç konuştuğumuz her şeyden. Çalışmanızı göstermek için bir topluluğa en yakın şey olan bir web aracı olarak kullanılır. Bir tür Youtube programcıdan. Bunda, web'e bağlı programcıların çalışmalarını görebilir ve herhangi bir ilginiz varsa onlarla iletişime geçebilir, profillerini görebilir, ağlarda takip edebilir ve hatta gelecekteki tüm projelerini görüntülemek için kanallarına abone olabilirsiniz.

İçerik sunumu, destek ve klavye kısayolları

CodePen sunumu en ilginç olanıÇünkü sadece birkaç tıklama ile işlem üzerinde hemen çalışabilirsiniz. Çok iyi ayrılmış html, css ve javascript satırlarıyla. İlerlemenizi net bir şekilde görmek için yukarı ve aşağı serpiştirebileceğiniz görsel kısma ek olarak. Böylece her dili iyi ayırt etmeye yardımcı olur. Yeni programcılar için kullanışlı olan bir şey.

Web desteğiniz, gerçekten çok iyi bilmediğimiz bir şeyi kullanmaya başlamak istediğinizde daha katlanılabilir hale getirir. Bu, bir kişi için daha iyi olduğu anlamına gelmez, sahip olduğumuz ihtiyaçlara bağlıdır. Ama evet, "bilinmeyen" kökenli bilgisayara herhangi bir şey yüklemeden önce ortamı biraz daha iyi tanımak.

Kullanmaya alışkın olanlardan biriyseniz casi Çalışırken tamamen klavye, CodePen sizin için harika olacak. Diğer araçların ihtiyacı eklentileri ortamı doldurmak için klavye kısayollarını kullanabilme. Bu, işi biraz daha rahatsız eder (her ne kadar kurulduktan sonra etkili olsa da). CP. standart olarak, bir listede olabileceği gibi tekrarlanan aynı kod satırlarını doldurmanızı sağlayacak bir sistemi entegre eder. Listenin nasıl görünmesini istediğinizi yazın ve Tab'a tıklayın.

Pro sürümü ayrıca, temel paket için 9,00 € 'dan "Süper" paket için 29,25 €' ya kadar olan bir fiyat için çok daha fazla seçenek sunar. Tek cihazda yaptığımız şeyi aynı anda birkaç cihazda güncelleyebilmek. Ayrıca işbirliğine dayalı bir mod, bir "öğretmen modu" vb. Burada isterseniz yararlanın.

JSBin

JSBin, doğrudan olarak niteleyebileceğimiz bir araçtır. Web etki alanınıza gittiğinizden beri, bir sonraki projenizi gecikmeden çizmeye başlamaya hazır olacaktır. Ve ilk sahnelemesi çok çekici olmasa da rahattır.

JSBin basittir, html'de oluşturulmuş temel yapısı ile zaman kaybetmemek için, işi tamamlamak için farklı diller arasında serpiştireceksiniz. Önce HTML, sonra CSS, Javascript ve son olarak da görsel olarak çalışmanız var. Ve daha zor görünse de, hiçbir şey yüklemeden aynı tür kısayollara sahip olacaksınız. Doğrudan tarayıcıdan.

Ancak, sonraki sütunlar nedeniyle gizlendikten sonra kodu doğru şekilde görüntülemeyi daha rahatsız edici buldum. Dizüstü bilgisayarla, trackpad ve çok akıcı değil.

Sadece iki taksitlidir, bedava veya ücretli. Bu, CodePen'den biraz daha pahalıdır, ancak yıllık olarak öderseniz, 120 € ödeyebilirseniz daha karlı olur.

CSSGüvertesi

CSSGüvertesi

Çalışma ortamı CSSGüvertesi yukarıda görülenden farklı. Yalnızca görsel kod olmak üzere iki sütuna bölünmüş olan CSSDeck, farklı dil türlerini böldüğü 3 satırla çalışır. Açık renkli, sosyal ağ şeklinde bir sunum ve daha temiz bir çalışma ortamı ile. Basit bir araç gibi görünüyor. Bazen bu olumsuz olduğu anlamına gelmez.

Altmış binden fazla kayıtlı kullanıcı ve oluşturulan iki yüz elli binden fazla proje ile, istediğinizi aramak ve bulmak zor olmayacak. Dil her zaman olduğu gibi, İngilizce bilmeyenler için rahatsızlık yaratabilirse, ancak bu sosyal ağ Görüntü çok önemli, bu yüzden büyük bir zorluk olduğunu düşünmüyorum.

plunkr

plunkr şimdiye kadar karşılaştığım en az çekici araç. Sunum, mesajlarda ve görüntü eksikliğinde birleşiyor. İçeriğin yüklenmesi yavaş ve ilk bakışta pek kullanışlı değil. Ek olarak, tarihe göre sıralama, herhangi bir programlamayı, ne kadar basit olursa olsun, ilk konumda yapabilir. Daha ilginç bir şey görmek için şu sekmeye gitmelisiniz: «En Çok Görüntülenen«. Yani, daha önce Google ile çevirmediyseniz.

Ayrıca web'e göre 1.0.0 sürümünde olduklarını söyleyin. Bu biraz tasarımı, sunumu ve web'e göz atarken bulduğunuz olası hataları açıklıyor.

Avantaj olarak, fikirleriniz tükenirse, Plunkr'da başka bir sekmeden çıkmanız veya başka bir sekmeyi açmanız gerekmeyecek, çünkü doğrudan sağ kenar çubuğundan diğer projelerle yürüyebilir ve bunları anında görüntüleyebilirsiniz. Bu, hızlı fikirler toplamanızı ve aynı zamanda bunları projenize uygulamanızı kolaylaştıracaktır.

dabblet

dabblet bu basit bir araçtır, içeri girin ve yaratın. GitHub üzerinden kayıt olup kullanıcı adınızı alabilmenize rağmen, bu web'de pek öne çıkan bir şey değildir. Görsel kısımda sarıdan kırmızıya gradyan bir arka plan ve kod kısmında beyaz bir arka plan ile (normal olduğu gibi), Dabblet projesi sunulur, ancak bunu CSS sekmesinden değiştirebilirsiniz. Benim için boş olması daha iyidir, çünkü bu gradyan veren tek şey biraz hayat a

Düzenleme yaparken gördüğünüz sekmeleri yapılandırabilirsiniz kolayca. Düzenleyen kişiye bağlı olarak rahat görüntüleme için sütunlara veya satırlara geçmek isteseniz bile. Yazı tipi boyutunu değiştirmek, HTML kodunu kaydetmeden veya doğrulamadan anonim olarak kaydetmek, Dabblet'in ilk bakışta sunduğu daha fazla olasılıktır. Seçeceğim ilk seçenek olmasa da, eğer güncellenmişlerse gelecekteki sürümlerde hesaba katılabilir.

En az sevdiğim şeylerden biri, ancak harika programcıların hoşuna gidebilecek bir etiketi tablo haline getirme ve kendi kendine yazmasını sağlama seçeneğiniz yok. Yani, HTML koyun ve sekmeyi tıklayın ve otomatik olarak "html" ve "/ html" yazın. Diğer uygulamalarda yapılırsa bir şey.

Canlı Örgü

Yaşamak

Canlı Örgü Diğerlerine çok benziyor, diğerlerinin fayda açısından sunamayacağı hiçbir şeyi yok. Bu proje hakkında vurguladığımız şey, tasarımı, CodePen'e benzer, ancak kare dağılımlı koyu bir renk. Boyutu değiştirebilmek tatmak. Ayrıca net mod ve «yakışıksız« burada düzenlediğiniz kod, siz etkinleştirene kadar görselde yansıtılmayacaktır. Çok kullanışlı bulduğunuz bir özellik değil, bir tasarımcı olarak, düzenlediğiniz şeyi her zaman gerçek zamanlı olarak görmek önemlidir, ancak birileri onu kesinlikle yararlı bulacaktır. Ve her zaman olduğu gibi kayıt olabilirsiniz, ancak kullanıcının bir lider rolü yoktur. Kayıt yaptırmasanız bile projenizi kaydedebilirsiniz..

Sublime Text

Bu araç Analizde şimdiye kadar gördüklerinizden tamamen farklı. Sublime Text bir web kaynağı değil, bir uygulama olarak. Bir yandan, masaüstünde olması kesinlikle daha kullanışlıdır. Özellikle olası internet çökmeleri veya fazlalık ve olası iş kaybı nedeniyle donmalar nedeniyle. Öte yandan, öncekiler kadar görsel bir araç değil. Ayrıca bir topluluğun projeleri paylaşma olanağına sahip olmamanın yanı sıra.

Burada her şey sıfırdan. Kod satırlarını yerleştirmek için sekmeler oluşturmalı ve hangisinin olduğunu bilmek için onları yeniden adlandırmalısınız. İlki HTML ise, ikinci CSS ... veya tam tersi. Ayrıca ne olacağı konusunda hiçbir kısayolu yoktur alıntılar hariç tamamen manuel.

Sonuç

Tüm programlar, her şirketin kendi içinde artıları ve eksileri olmasına yol açan belirli kişisel dokunuşlarla benzer. Her biri kendisine en uygun olanı seçecek, benim tavsiyem, işlediği çevre ve sosyal ağ için CodePen veya CSSDeck kullanmaktır. Ancak, başka birini daha beğendiyseniz, bir yorum bırakın ve nedenlerinizi açıklayın, kesinlikle faydalı olacaktır.


Yorumunuzu bırakın

E-posta hesabınız yayınlanmayacak. Gerekli alanlar ile işaretlenmiştir *

*

*

  1. Verilerden sorumlu: Miguel Ángel Gatón
  2. Verilerin amacı: Kontrol SPAM, yorum yönetimi.
  3. Meşruiyet: Onayınız
  4. Verilerin iletilmesi: Veriler, yasal zorunluluk dışında üçüncü kişilere iletilmeyecektir.
  5. Veri depolama: Occentus Networks (AB) tarafından barındırılan veritabanı
  6. Haklar: Bilgilerinizi istediğiniz zaman sınırlayabilir, kurtarabilir ve silebilirsiniz.