10 Tips Codepen Untuk Pemula

Codepen adalah tapak yang sangat mudah dan popular pen turun kombo kod depan kerja yang berfungsi segera. Sekiranya anda tidak tahu apa yang dikatakan oleh Codepen sebelum ini, ia pada asasnya taman permainan kod sumber dalam talian (mari kita panggilnya OSCP untuk bunyi nerdier) untuk tiga musketeers pengekalan front-end; HTML, CSS dan JavaScript.

Terdapat OSCP yang serupa di luar sana seperti JSFiddle, JS Bin, CSSDeck & Dabblet. Codepen pastinya salah satu yang paling terkenal di kalangan pemaju front-end. Tanpa berlengah-lengah lagi, mari melompat terus ke beberapa orang tip asas dan berguna untuk menggunakan Codepen.

1. Main Button

Jika anda bukan peminat cara output kod anda di Codepen terus menyegarkan sementara anda sedang menaip, anda boleh memilih keluar dari “Preview Pembaruan Automatik” pilihan, dan dapatkan butang Jalankan sebaliknya. Apabila anda mengklik, anda akan dapat melihat dan mengemas kini output kod anda bila-bila masa anda mahu.

Ini juga merupakan pilihan yang hebat jika anda bekerja dengan kod output yang mana Melalui banyak perubahan susun atur, dan mengecat semula setiap kali ia dikemas kini, mengakibatkan kelambatan.

2. Bilangan Peningkatan / Penurunan

Meningkatkan atau kurangkan nombor dalam kod anda di Codepen tanpa menaip nombor baru. Apa yang anda perlu lakukan ialah menggunakan gabungan kekunci Ctrl / Cmd dan Anak panah atas dan ke bawah.

3. Kursor Pelbagai

Anda boleh meletakkan kursor pada pelbagai mata dalam kod sumber, kemudian taipkan atau edit pada semua mata tersebut pada masa yang sama. Ini hanya berfungsi jika anda memasukkan maklumat yang sama, dan mengurangkan keperluan untuk menyalin salinan. Hanya tahan kekunci Ctrl / Cmd sambil mengklik pada pelbagai mata.

4. Mesej Console Berwarna yang berbeza

The Konsol Objek JavaScript ada beberapa kaedah lagi selain itu log () untuk membolehkan anda cetak perkara di konsol web.

Anda boleh menggunakannya info (), amaran () dan ralat () kaedah untuk maklumat, amaran dan kesilapan. Biasanya, konsol web mewarnakan mesej-mesej ini jenis-bijak, atau akan memaparkan ikon yang sesuai di sebelahnya (seperti tanda amaran untuk mesej amaran) untuk pengiktirafan yang lebih mudah.

Codepen mempunyai konsol sendiri yang boleh anda buka dengan mengklik pada butang Konsol di sudut kiri bawah. Ia sesuai untuk pemeriksaan cepat mesej konsol tanpa perlu membuka konsol penyemak imbas. Konsol ini membezakan pelbagai jenis mesej konsol dengan warna latar belakang yang berbeza.

5. Eksport

Setelah disimpan, a pen (satu entiti Codepen tunggal) boleh dieksport sebagai fail ZIP dengan semua kod HTML, CSS dan JS dalam fail. Terdapat juga pilihan untuk menyimpan pen itu sebagai intipati Github (repositori Git). Anda boleh mencari butang Eksport di sudut bawah kanan setiap pen.

6. Cari & Ganti

Cari & Ganti - operasi penting untuk orang yang cenderung menamakan semula nama pemboleh ubah mereka setiap sekarang dan kemudian. Ctrl / Cmd + Shift + F adalah kombo utama untuk buka “Cari & Ganti” dialog.

7. Trim Tab Emmet

Adakah anda tahu mengenai pencetus tab untuk pengekodan Emmet? Emmet adalah alat produktiviti untuk pemaju front-end yang membolehkan anda jenis kod rangka yang kemudiannya diperpanjang. Untuk melakukan ini di Codepen, cuma ketik taipkan singkatan yang sesuai ke dalam editor, tekan kekunci Tab, dan kod lengkap muncul sekaligus. Hanya tersedia untuk HTML di Codepen.

8. Dapatkan Fail Kod Individu

Jika anda menggunakan pilihan Eksport seperti yang dinyatakan sebelum ini, anda akan mendapat semua tiga fail (HTML, CSS dan JS) pen anda. Tetapi jika anda berminat hanya satu atau dua daripada fail tersebut, dan ingin memuat turunnya secara individu, ada pilihan untuk itu juga di Codepen.

Sebaik sahaja masuk ke Codepen, pergi ke pen anda, dan klik pada butang Tukar View di sudut kanan atas. Di bahagian bawah senarai lungsur turun, anda akan melihat pautan muat turun terus untuk fail individu.

9. Periksa Pembolehubah JavaScript

Apabila konsol JavaScript Codepen menyambung ke JavaScript yang disimpan di dalam pen anda, anda juga boleh menggunakannya untuk menguji JavaScript anda dengan cepat. Ciri ini sangat berguna memeriksa pembolehubah JS, dengan cara ini anda tidak perlu memasukkan konsol tambahan atau mesej amaran ke dalam kod asal semata-mata untuk tujuan ujian.

10. Balik Pen kepada Templat

Jika anda cenderung untuk memulakan kebanyakan pen anda dengan set yang sama kod, anda boleh menggunakan templat untuk simpan kod pengulangan tersebut. Untuk menghidupkan pen ke templat, semak pilihan Template di bawah menu Tetapan. Apabila anda kemudian membuat pen baru, anda boleh mulakan dengan templat anda yang disimpan dengan mengklik anak panah bawah di sebelah kanan butang Pena Baru. Ia akan membuka senarai jatuh turun dengan semua templat tersimpan anda untuk dipilih.