Yeni Başlayanlar İçin 10 Codepen İpuçları

Codepen için süper kolay ve popüler bir site dolma kalem çalışan bir ön uç kod aşağı açılır derhal. Codepen'in ne olduğunu bilmiyorsanız veya daha önce duymadıysanız, çevrimiçi kaynak kodu oyun alanı (haydi arayalım OSCP ön uç kodlamanın üç silahşörüne) HTML, CSS ve JavaScript.

JSFiddle, JS Bin, CSSDeck ve Dabblet gibi başka benzer OSCP'ler de var. Codepen kesinlikle ön uç geliştiriciler arasında en bilinenlerinden biridir. Daha fazla uzatmadan, hadi hemen bazılarına atlayalım temel ve faydalı ipuçları Codepen kullanmak için.

1. Çalıştır Düğmesi

Codepen'deki kodunuzun çıktısının bir hayranı değilseniz, canlandırıcı süre sen yazıyorsun vazgeçmek “Otomatik Güncelleştirme Önizlemesi” seçenek, ve bunun yerine bir Çalıştır düğmesi olsun. Tıkladığınızda, kodunuzun çıktısını görebilecek ve güncelleyebileceksiniz Ne zaman istersen.

Bu, çıktısı olan bir kodla çalışıyorsanız, aynı zamanda harika bir seçenektir. birçok düzen değişikliği geçiriyor, ve her güncellenişinde boyar, yavaşlama ile sonuçlanır..

2. Sayı Artırma / Azaltma

Codepen'deki kodunuzdaki sayıları artırın veya azaltın yeni numaraları yazmadan. Tek yapmanız gereken Ctrl / Cmd tuş kombinasyonunu kullanmak. ve Yukarı ve Aşağı oklar.

3. Çoklu İmleçler

İmleçler koyabilirsiniz kaynak kodunda birden fazla nokta, sonra tüm bu noktalara yazın veya düzenleyin aynı zamanda. Bu, yalnızca aynı bilgileri giriyorsanız çalışır ve kopya yapıştırma gereksinimini azaltır. Bu çoklu noktalara tıklarken sadece Ctrl / Cmd tuşunu basılı tutun.

4. Farklı Renkli Konsol Mesajları

konsol JavaScript nesnesinde birkaç yöntem daha dışında ) (Log izin vermek için Web konsolunda bir şeyleri yazdırmak.

Kullanabilirsiniz bilgi(), () Uyarmak ve hata() yöntemleri bilgi, uyarı ve hata. Genel olarak, web konsolları bu mesajları tip olarak renklendirir veya yanlarında uygun bir simge görüntüler (uyarı mesajı için bir uyarı işareti gibi) kolay tanınması için.

Codepen'in kendi konsolu var sol alt köşedeki Konsol düğmesine tıklayarak açabilirsiniz. Konsol mesajlarının hızlıca kontrol edilmesi için idealdir tarayıcının konsolunu açmak zorunda kalmadan. Bu konsol, farklı konsol mesaj türlerini ayırt eder. farklı arka plan renkleri ile.

5. İhracat

Bir kere kaydedildiğinde, bir dolma kalem (tek bir Codepen varlığı) ihraç edilebilir ZIP dosyası olarak hepsinde HTML, CSS ve JS kodları var. Kalemi kurtarmak için bir seçenek de var Github özü olarak (Git deposu). Dışa Aktar düğmesini her kalemin sağ alt köşesinde bulabilirsiniz..

6. Bul ve Değiştir

Bul ve Değiştir - Değişken isimlerini her seferinde ve sonra yeniden adlandırmaya meyilli insanlar için önemli bir işlem. Ctrl / Cmd + ÜstKrkt + F açılan anahtardır aç “Bul ve Değiştir” diyalog.

7. Emmet Tab Tetikleyicisi

Emmet kodlaması için sekme tetikleyicileri hakkında bilginiz var mı? Emmet, önde gelen geliştiriciler için size olanak sağlayan bir verimlilik aracıdır. daha sonra genişleyen iskelet kodunu yazın. Bunu Codepen'de yapmak için, editöre uygun kısaltmayı hızlıca yazın, Sekme tuşuna basın, kodun tamamı aynı anda görünür.. Yalnızca HTML için kullanılabilir Codepen konumunda.

8. Bireysel Kod Dosyalarını Alın

Daha önce belirtildiği gibi Dışa Aktar seçeneğini kullanırsanız, kaleminizin üç dosyasını da (HTML, CSS ve JS) alırsınız. Ama ilgileniyorsanız bu dosyalardan yalnızca bir veya ikisi, ve onları ayrı ayrı indirmek istiyorum, bunun için Codepen'de de bir seçenek var..

Codepen'e giriş yaptıktan sonra, kaleme gidin ve sağ üst köşedeki View Change düğmesine tıklayın. Açılır listenin en altında bireysel dosyalar için doğrudan indirme linkleri.

9. JavaScript Değişkenlerini İnceleyin

Codepen'in JavaScript konsolu, kaleminize kaydedilen JavaScript'e bağlandığından, JavaScript'inizi hızlı bir şekilde test etmek için de kullanabilirsiniz. Bu özellik, özellikle kullanışlı geliyor JS değişkenlerini incelemek, bu şekilde sen fazladan konsol veya uyarı mesajı eklemek zorunda değilsiniz sadece test amaçlı olarak orijinal koda.

10. Kalemi Şablona Çevirin

Kalemlerinizin çoğunu aynı kod kümesi, Bir şablonu kullanabilirsiniz. yinelenen kodu kaydet. Kalemi şablona dönüştürmek için, Şablon seçeneğini işaretleyin Ayarlar menüsü altında. Daha sonra yeni bir kalem oluşturduğunuzda, kaydedilmiş şablonunuzla başlayın Yeni Kalem düğmesinin sağ tarafındaki aşağı okunu tıklatarak. Tüm kaydedilmiş şablonlarınız arasından seçim yapabileceğiniz bir açılır liste açacaktır..