CodePen: HTML, CSS ve JavaScript Oluşturun, Test Edin, Paylaşın ve Keşfedin

Codepen: Ön Uç Kodu Oluşturun, Test Edin ve Keşfedin

Bir içerik yönetim sistemindeki zorluklardan biri, komut dosyalı araçları test etmek ve üretmektir. Çoğu yayıncı için bu bir gereklilik olmasa da, bir teknoloji yayını olarak, diğer insanlara yardımcı olmak için zaman zaman çalışan senaryoları paylaşmayı seviyorum. Nasıl kullanılacağını paylaştım Parola gücünü kontrol etmek için JavaScript, Nasıl Normal İfadeler ile e-posta adresi sözdizimini kontrol edin (regex) ve en son bunu ekledi çevrimiçi incelemelerin satış etkisini tahmin etmek için hesap makinesi. Siteye düzinelerce araç eklemeyi umuyorum ama WordPress tam olarak bu şekilde yayın yapmaya elverişli değil… bu bir içerik sistemi, bir geliştirme sistemi değil.

Bu nedenle, küçük komut dosyalarımı çalıştırmak için kullanmaktan zevk alıyorum CodePen. CodePen, bir HTML paneli, bir CSS paneli, bir JavaScript paneli, Konsolu ve ortaya çıkan kodun yayınlandığı, özenle düzenlenmiş bir araçtır. Her panelde, öğelerin üzerine fareyi getirdiğinizde, nelerin mümkün olduğunu anlamanız için bilgiler bulunur; ayrıca HTML, CSS ve JS'nizin renk kodlaması daha kolay düzenlemenize ve yazmanıza yardımcı olur.

CodePen bir sosyal gelişim ortamıdır. Özünde, tarayıcıda kod yazmanıza ve oluştururken sonuçlarını görmenize olanak tanır. Herhangi bir beceriye sahip geliştiriciler için yararlı ve özgürleştirici bir çevrimiçi kod editörü ve özellikle kodlamayı öğrenen kişiler için güç sağlar. CodePen, öncelikle HTML, CSS, JavaScript gibi ön uç dillere ve bunlara dönüşen ön işleme sözdizimlerine odaklanır.

CodePen hakkında

CodePen ile gerekli tüm işleri yapabildim. hesaplayıcıyı yayınla Siteye yerleştirdim. CodePen'deki çoğu kreasyon herkese açık ve açık kaynaklıdır. Basit bir kalpten yorum bırakmaya, kendi ihtiyaçları için çatallanmaya ve değiştirmeye kadar diğer insanların ve topluluğun etkileşime girebileceği canlı şeylerdir.

CodePen - çevrimiçi incelemelerin satış etkisini tahmin etmek için hesap makinesi

CodePen ile, siz çalışırken bölmelerin solda, sağda veya altta olmasını istiyorsanız görünümünüzü değiştirebilirsiniz… veya HTML'yi yeni bir sekmede görüntüleyebilirsiniz. Yan yana görünüm, görüntülenebilir bölmenin boyutunu ayarlayabildiğiniz için duyarlı ayarlarınızı test etmek için inanılmaz derecede iyi çalışıyor.

Çalışan komut dosyalarınızın her birini Kalemler halinde düzenleyebilir, bunları Projelerde birleştirebilir (çoklu dosya düzenleyici) veya hatta koleksiyonlar oluşturabilirsiniz. Temelde, diğer yazarları takip edebileceğiniz, herkese açık olarak paylaşılan diğer projeleri kendi başınıza kopyalayabileceğiniz ve hatta zorluklarla eğlenceli şeyler yapmayı öğrenebileceğiniz bir ön uç kod için çalışan bir portföy sitesidir.

GitHub Gist olarak kaydedebilir, zip dosyası olarak dışa aktarabilir ve hatta gömmek şöyle bir makaledeki kalem:

Kaleme bakın
Çevrimiçi İncelemelerin Tahmini Satış Etkisi
by Douglas Karr (@yagmurece)
on CodePen.


Kalem düzenleyicinin sınırlamalarından biri, kodun muazzam hacmidir. Düzenleyicinin yüzlerce hatta binlerce satırlık kodla ilgilenmesi gerektiğinden, bu sorunla asla karşılaşmayabilirsiniz. Ancak 5,000 - 10,000 veya daha fazla satır koda ulaşmaya başladıklarında, düzenleyicinin başarısız olmaya başladığını göreceksiniz. Bununla birlikte, başka bir yerde barındırılan stil sayfalarına veya JavaScript'e harici referanslar ekleyebilirsiniz!

Kaydolmanızı öneririm. Haftalık e-postalarına abone olacaksınız ve beslemeyi RSS beslemenize ekleyebileceksiniz, böylece yeni yayınlanan kalemleri görebilirsiniz. Ve, oradaki halka açık kalemleri aramaya veya göz atmaya başlarsanız, bazı inanılmaz projeler bulacaksınız… kullanıcılar oldukça yetenekli!

Twitter'da takip edin : Douglas Karr Codepen'de

Ücretli sürüm olan CodePen Pro, gelişmiş işlevsellik veya ekipler için bir ton ek özellik sunar - işbirliği, süreçler, varlık barındırma, özel görünümler ve hatta kendi etki alanınız veya alt etki alanınızla dağıtılan projeler dahil. Ve elbette, CodePen, Github entegrasyonu ile tüm ekibinizin çalışabileceği harika bir havuz sağlar. Benim gibi basit bir kodu test etmek istiyorsanız, CodePen paha biçilmez bir araçtır.

Ne düşünüyorsunuz?

Bu site spam'i azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl işlendiğini öğrenin.