Home-theater-designers
JavaScript web geliştirmeye başlamak sinir bozucu bir süreç olabilir, ancak bunu kolaylaştıran araçlar var.
CodePen.io hem kodlamayı öğrenmek hem de fikirleri minimum güçlükle hızlı bir şekilde prototiplemek için tasarlanmış bir tarayıcı içi kodlama ortamıdır.
Bu yazıda, sitenin bazı özelliklerine ve daha iyi bir programcı olmanıza nasıl yardımcı olabileceklerine bakıyoruz.
CodePen Nedir?
CodePen adı verilen bir şey sağlar dolma kalem HTML, CSS ve JavaScript için üç farklı pencerenin yanı sıra siz yazarken gerçek zamanlı olarak güncellenen bir önizleme bölmesi içeren .
Web geliştiricileri için web siteleri için fikirleri sergilemek için sıklıkla kullanılsa da, ön uç web geliştirmenin temellerini öğrenmek için de harika bir yerdir. İşte CodePen'i kullanırken bilmeniz gereken en önemli özellikler.
1. Önişlemciler
Önişlemciler, kodlamayı basitleştirmek için tasarlanmış yorumlanmış veya derlenmiş dillerdir. Kolaylık sağlamak için bir dile özellikler ekleyebilir ve kodun okunmasını kolaylaştırabilirler. Web geliştirmede, hızlı bir şekilde temiz kod oluşturmak için HTML, CSS ve JavaScript için ön işlemcilerin bir kombinasyonu kullanılır.
Web geliştirme öğreniyorsanız ve farklı önişlemciler denemek istiyorsanız, CodePen önişlemcileri anında değiştirmenize ve derlediği kodu gerçek zamanlı olarak görmenize olanak tanır. CodePen uygulamasındaki üç bölmenin her birinde sağ üstte bir açılır menü bulunur. Seçme Derlenmiş HTML/CSS/JS'yi Görüntüle kodun nasıl yorumlanacağını görmek için.
Bu kalemde, kullanarak basit bir site oluşturduk. haml ve küstah bazı başlık metinlerini biçimlendirmek için. seçme Derlenmiş Görüntüle standart HTML ve CSS'yi gösterir. Bu örnekte fark minimumdur. Ancak yeni bir dil öğrenirken, önceden işlenmiş kodun derlendikten sonra nasıl göründüğünü görmek faydalı olabilir.
2. Dış Kaynaklar
CodePen, ön işlemciler için yerel desteğin yanı sıra harici komut dosyalarını da destekler. Bu, onu kişisel projeleriniz için kitaplıklarla uygulamalı deneyim elde etmek veya React gibi popüler web uygulaması kitaplıklarını yenilemek için mükemmel bir yer yapar.
Harici bir kitaplık eklemek için, Ayarlar kaleminizdeki bölmeyi açın ve JavaScript sekmesine gidin. Kaynak URL'sini manuel olarak ekleyerek veya arayarak kaynak eklemenin iki yolu vardır.
Bu özelliği makalemizde kullandık. mo.js ile web animasyonu , Babel ön işleme ile birlikte.
Kalemi Gör Mojs MUO örneği Ian tarafından ( @Bardoctorus ) CodePen'de.
Evet, CodePen kalemleri gömülebilir! Mo.js öğreticisinin sonuçlarını görmek için devam edin ve yukarıdaki önizleme bölmesine tıklayın!
Diğer kalemler, harici kütüphaneler gibi içe aktarılabilir. Bu, yeni kalemlerinizde benzer modüller kullanmak için önceden yazılmış kalemlerden öğeler alabileceğiniz anlamına gelir. CodePen kullanıcısı Adam's Basit Anket kalem buna güzel bir örnektir.
3. Şablonlar
Yeni kavramlar öğrenirken veya yeni fikirleri test ederken, benzer bileşenleri sık sık kullanır ve başlarken aynı adımları tekrar okursunuz. CodePen, tekrarı kesebilen ve doğrudan konuya girmenizi sağlayan şablon kalemlerin oluşturulmasına izin verir.
Bir şablon oluşturmak için yeni bir kalem açın, değişikliklerinizi yapın ve Şablon ayarlar menüsündeki kaydırıcı.
https://vimeo.com/221428690
Yakın zamana kadar, ücretsiz kullanıcılar yalnızca üç şablon oluşturabilirdi, ancak şimdi tüm kullanıcılar hesaplarında istedikleri kadar şablona sahip olabilir. Minimum gecikmeyle yeni bir fikre başlamak için mükemmel!
4. Moda İşbirliği
CodePen ile işbirliği yapma ve öğretme yeteneği, onun en büyük varlığı olabilir. Programcılar için zaten çok sayıda harika işbirliği aracı var, ancak CodePen'in yaklaşımı basit ve sezgisel.
CodePen'in profesyonel kullanıcıları, yeni bir kalem oluşturabilir ve altında işbirliğine açabilir. Görünümü değiştir Menü. Bu, kalemin bağlantısını CodePen Pro planınıza bağlı olarak ölçeklenebilir sayıda insanı barındıran paylaşılabilir bir davete dönüştürür.
uygulama ar bölgesi nedir
Bu örnekte, bir arkadaşım CSS'yi gerçek zamanlı olarak güncellerken HTML yazdım, etiketli bir imleç nerede çalıştıklarını belirledi.
Bağlantıya sahip olan herkes, profesyonel kullanıcı veya CodePen hesabı olup olmadığına bakılmaksızın tarayıcı içi sohbet işlevine katılabilir ve kullanabilir. Otomatik kaydetmenin kapalı olması koşuluyla, yalnızca kalemin sahibi değişiklikleri kaydedebilir, bu da kodunuzu risk almadan başkalarına açmanın güvenli bir yoludur.
Bu modun açık uçlu doğası, yeni başlayanlar için faydalıdır, çünkü zor bir konseptte size rehberlik etmesi için neredeyse herkesi kaleminize davet edebilirsiniz. Ayrıca, potansiyel çalışanlarla röportaj yapmak için mükemmel olduğu için yolunuzu bilmek için kullanışlı bir moddur ve zaten profesyonelce bu şekilde kullanıldı !
5. Profesör Modu
Profesör modu, bir Pro kullanıcısının yalnızca kodu düzenleyebileceği bir odaya ev sahipliği yapmasına izin verir. Ev sahibinin Pro planına bağlı olarak 10-100 arası kullanıcı izleyebilir ve sohbet edebilir.
Profesör modu, sınıf içi öğrenme ile uzaktan öğrenme veya ikisinin birleşimi arasında esnekliğe izin verir. Profesör modunun kullanılması, sınıfın arkasındaki kişilerin öndekilerle aynı deneyime sahip olmasını ve öğretmenin gerçek zamanlı olarak güncellenecek olan hata düzeltmelerini göstermesini sağlayacaktır.
6. Sunum Modu
Sunum modu, şaşırtıcı olmayan bir şekilde, sunum kodu göz önünde bulundurularak tasarlanmıştır. Uygulama, tepegözlerle çalışmak üzere tasarlanmış basitleştirilmiş bir görünümde görüntülenir. CodePen, daha düşük hızlı internet bağlantılarında ve daha zayıf donanımlarda kullanım için Sunum modunu optimize etti.
Kurnaz okuyucular, CodePen'in ücretsiz sürümünün tam olarak bu işlevi sağlayacağını fark etmiş olabilir, ancak Pro modunun birkaç kullanışlı özelliği vardır. Düzen, yazı tipi boyutu ve temalar hemen hemen her ayara uyacak şekilde anında değiştirilebilir ve kalem bağlantısının gösterilmesi jumbo boyutlu kısaltılmış bir URL getirir ve projeyi paylaşmayı kolaylaştırır.
Bu küçük değişiklikler, önizleme penceresini gösterdiğiniz şeye uyacak şekilde ölçeklendirebilmenin yanı sıra, sunum modunu hem öğretmenler hem de meslektaşlarına fikir sunan geliştiriciler için mükemmel hale getirir. Sunum modu ayrıca, kendinizi bir programlama pozisyonu için görüşme yaparken bulursanız, kodu sunmanın temiz görünümlü ve basit bir yoludur.
7. Desenler
CodePen'in koleksiyonlarıyla ilham aramak çok daha kolay. Tasarım desenleri .
Her kategori, belirli görevler için CodePen kullanıcıları tarafından sağlanan bir örnek kod koleksiyonudur. Siteniz için dinamik düğmeler oluşturmanın bir yolunu mu arıyorsunuz? Akordeon menüler? Hemen hemen her örneğe uyacak çok sayıda kategori var.
Bu modeller aynı zamanda etkileşimli düğmelerin nasıl çalıştığını ve dinamik kullanıcı arabirimlerinin nasıl çalışabileceğini öğrenmenin harika bir yoludur.
8. Emmet
Emmet Daha önce Zen Kodlama olarak bilinen , yaygın olarak HTML ve CSS geliştirme için en büyük zaman tasarrufu olarak kabul edilir. Eklenti, kendinizi çok yazarken bulduğunuz kodun bir kısmını alır ve bunları basit kısayollara dönüştürür.
Eylem halinde görmek, açıklamaktan daha iyidir, bu nedenle bir HTML belgesi için olağan kurulumu yapın:
Bunu her HTML belgesine eklemek, iki eyleme indirgenmiştir. Emmet'i kullanarak yazın ! ve vur Sekme anahtar. Büyü!
Emmet, CodePen'de standart olarak etkindir ve özellikle JavaScript'te yeni bir kavram öğrenmeye çalışıyorsanız ve destekleyici HTML ve CSS'yi hızlı bir şekilde oluşturmanız gerekiyorsa kullanışlıdır.
Daha İyi Bir Deneyim için CodePen ile Geliştirin
CodePen, web geliştiricileri için mükemmel bir araçtır ve alan sürekli olarak büyümektedir. JavaScript, web geliştirmede bir gelecek için öğrenmek için harika bir dildir.
telefonda internet nasıl hızlandırılır
JavaScript'i kullanmaya başlamak isteyenler için harika öğreticiler ve kurslar var ve CodePen yeni becerilerinizi test etmek için harika bir ortam.
Paylaş Paylaş Cıvıldamak E-posta Ücretsiz Sesli Kitap İndirmek için En İyi 8 Web SitesiSesli kitaplar harika bir eğlence kaynağıdır ve sindirimi çok daha kolaydır. İşte onları ücretsiz olarak indirebileceğiniz en iyi sekiz web sitesi.
Sonrakini Oku İlgili konular- Programlama
- HTML
- Web Geliştirme
- JavaScript
- CSS
Ian Buckley, Berlin, Almanya'da yaşayan serbest gazeteci, müzisyen, sanatçı ve video yapımcısıdır. Yazmadığı veya sahnede olmadığı zamanlarda, çılgın bir bilim insanı olma umuduyla kendin yap elektroniği veya koduyla uğraşıyor.
Ian Buckley'dan Daha FazlaHaber bültenimize abone ol
Teknik ipuçları, incelemeler, ücretsiz e-kitaplar ve özel fırsatlar için bültenimize katılın!
Abone olmak için buraya tıklayın