10 Tips Codepen Untuk Pemula

Codepen adalah situs yang sangat mudah dan populer pena bawah kombo kode front-end yang berfungsi segera. Jika Anda tidak tahu apa itu Codepen atau belum pernah mendengarnya, ini pada dasarnya adalah taman bermain kode sumber online (sebut saja itu OSCP ke sound nerdier) untuk tiga musketeer dari front-end coding; HTML, CSS dan JavaScript.

Ada OSCP serupa lainnya di luar sana seperti JSFiddle, JS Bin, CSSDeck & Dabblet. Codepen jelas merupakan salah satu yang paling terkenal di kalangan pengembang front-end. Tanpa basa-basi lagi, mari kita langsung ke beberapa tips dasar dan berguna untuk menggunakan Codepen.

1. Jalankan Tombol

Jika Anda bukan penggemar cara output kode Anda di Codepen terus menyegarkan sementara Anda mengetik, Anda bisa memilih keluar dari “Pratinjau Pembaruan Otomatis” pilihan, dan dapatkan tombol Run sebagai gantinya. Ketika Anda mengkliknya, Anda akan dapat melihat dan memperbarui output kode Anda kapanpun kamu mau.

Ini juga merupakan pilihan bagus jika Anda bekerja dengan kode yang hasilnya melewati banyak perubahan tata letak, dan mengecat ulang setiap kali diperbarui, menghasilkan kelambatan.

2. Penambahan / Pengurangan Angka

Menambah atau mengurangi angka dalam kode Anda di Codepen tanpa mengetikkan nomor baru. Yang harus Anda lakukan adalah menggunakan kombinasi tombol Ctrl / Cmd dan Panah Atas dan Bawah.

3. Banyak Kursor

Anda bisa meletakkan kursor di beberapa titik dalam kode sumber, lalu ketik atau edit di semua titik itu pada waktu bersamaan. Ini hanya berfungsi jika Anda memasukkan informasi yang sama, dan mengurangi kebutuhan untuk menyalin-paste. Cukup tahan tombol Ctrl / Cmd sambil mengklik pada beberapa titik tersebut.

4. Pesan Konsol Berwarna Yang Berbeda

Itu Menghibur Objek JavaScript memiliki beberapa metode lagi selain log () untuk memungkinkan Anda mencetak hal-hal di konsol web.

Anda dapat menggunakan info (), memperingatkan() dan kesalahan() metode untuk informasi, peringatan dan kesalahan. Biasanya, konsol web mewarnai pesan ini dengan bijaksana, atau akan menampilkan ikon yang sesuai di sebelahnya (seperti tanda peringatan untuk pesan peringatan) untuk pengakuan yang lebih mudah.

Codepen memiliki konsolnya sendiri yang dapat Anda buka dengan mengklik tombol Konsol di sudut kiri bawah. Ini sangat ideal untuk memeriksa pesan konsol dengan cepat tanpa harus membuka konsol browser. Konsol ini membedakan berbagai jenis pesan konsol dengan warna latar belakang yang berbeda.

5. Ekspor

Setelah disimpan, a pena (entitas Codepen tunggal) dapat diekspor sebagai file ZIP dengan semua itu dalam HTML, CSS dan kode JS dalam file. Ada juga opsi untuk menyimpan pena sebagai intisari Github (repositori Git). Anda dapat menemukan tombol Ekspor di sudut kanan bawah setiap pena.

6. Temukan & Ganti

Temukan & Ganti - operasi penting untuk orang-orang yang cenderung mengubah nama variabel mereka setiap sekarang dan kemudian. Ctrl / Cmd + Shift + F adalah kombinasi tombol untuk Buka “Temukan & Ganti” dialog.

7. Emmet Tab Trigger

Apakah Anda tahu tentang pemicu tab untuk pengkodean Emmet? Emmet adalah alat produktivitas untuk pengembang front-end yang memungkinkan Anda melakukannya ketik kode kerangka yang nantinya akan diperluas. Untuk melakukan ini di Codepen, cukup cepat ketik singkatan yang sesuai ke editor, tekan tombol Tab, dan kode lengkap muncul sekaligus. Hanya tersedia untuk HTML dalam Codepen.

8. Dapatkan File Kode Individual

Jika Anda menggunakan opsi Ekspor seperti yang disebutkan sebelumnya, Anda akan mendapatkan ketiga file (HTML, CSS dan JS) dari pena Anda. Tetapi jika Anda tertarik hanya satu atau dua file itu, dan ingin mengunduhnya secara terpisah, ada opsi untuk itu juga di Codepen.

Setelah masuk ke Codepen, buka pena Anda, dan klik tombol Ubah Tampilan di sudut kanan atas. Di bagian bawah daftar dropdown, Anda akan melihat tautan unduhan langsung untuk masing-masing file.

9. Periksa Variabel JavaScript

Karena konsol JavaScript Codepen terhubung ke JavaScript yang disimpan dalam pena Anda, Anda juga dapat menggunakannya untuk menguji JavaScript Anda dengan cepat. Fitur ini sangat berguna di memeriksa variabel JS, karena dengan cara ini Anda tidak harus memasukkan konsol tambahan atau pesan peringatan ke dalam kode asli semata-mata untuk tujuan pengujian.

10. Putar Pena ke Templat

Jika Anda cenderung memulai sebagian besar pena Anda dengan set kode yang sama, Anda dapat menggunakan templat untuk simpan kode tersebut berulang. Untuk mengubah pena menjadi templat, centang opsi Templat di bawah menu Pengaturan. Ketika nanti Anda membuat pena baru, Anda bisa mulai dengan templat tersimpan Anda dengan mengklik panah bawah di sebelah kanan tombol Pena Baru. Ini akan membuka daftar dropdown dengan semua templat tersimpan Anda untuk dipilih.