CodePen | Tempat Bermain Frontend Developer – CodePen adalah situs web yang memungkinkan kita untuk menulis kode frontend. Maksudnya adalah, kita dapat menulis HTML, CSS, dan Javascript langsung di browser.
Situs yang memiliki alamat di codepen.io ini juga bisa dibilang komunitas. Sebagian besar ciptaan di CodePen bersifat publik dan open source. Kita bisa berinteraksi dengan orang lain, dari yang sederhana sampai meninggalkan komentar dan mengubah untuk kebutuhan kita sendiri.
Seperti live code playgrounds lainnya, situs ini memungkinkan kita belajar di lingkungan open source, menampilkan preview langsung dari perubahan kode, dan bahkan membiarkan kita menanamkan demo kita di halaman web mana pun.
Fitur Fitur CodePen
Dalam artikel ini saya akan membahas fitur-fitur untuk menjelaskan beberapa hal yang menurut saya menempatkan situs ini berada paling atas untuk situs web dalam kategorinya.
CSS Options
Situs ini menyertakan beberapa fitur luar biasa agar kita bisa menulis CSS lebih cepat. Kita dapat memilih untuk menyertakan Normalize.css atau Reset.css di CSS kita dengan hanya mengklik tombol radio. Kita juga dapat memilih untuk menggunakan -prefix-free atau Autoprefixer juga. Dengan cara ini tidak perlu meluangkan waktu untuk menghubungkan ke file eksternal (yang juga mungkin, jika kalian mau).
Tampilan Pen yang Berbeda
Situs ini memiliki total 8 tampilan berbeda untuk pen. Setiap tampilan memiliki kelebihan tersendiri.
- Editor View.
- Details View.
- Full Page View.
- Debug View.
Sisanya adalah untuk pengguna PRO. Jika kalian mempunyai akun PRO, kalian akan mendapat pilihan tampilan lebih banyak, diataranya;
- Presentation Mode.
- Live View.
- Proffessor Mode.
- Collab Mode.
Blogging
Blogging adalah salah satu fitur baru di situs ini, kita bisa menulis kode dengan mudah seperti di blog biasa. Kita dapat menulis dengan Markdown, dan menggunakan alat embedding khusus untuk menanamkan pen. Kita juga bisa menambahkan CSS kustom ke postingan, dan ada pratinjau super sederhana untuk menguji postingan kita.
Dukungan Komunitas yang Luas
Komunitas telah menjadi bagian besar dari CodePen sejak awal. Melalui komentar dan berbagi, orang dapat memberi dan menerima kritik konstruktif, dan belajar bersama. Grup seperti 4ae9b8 dan Bullgit telah memulai dari percakapan melalui CodePen. Para pendiri juga telah berbicara tentang apa yang mereka pikirkan tentang komunitas CodePen di Podcast.
Bisa Menjadi Sumber Inspirasi
Pen yang mengesankan selalu ditampilkan di beranda, serta artikel dan koleksi hebat. Pen berperan sebagai inspirasi sekaligus cara yang menyenangkan untuk belajar. Mencari melalui pen yang mengagumkan dapat membantu meningkatkan pekerjaan kita sendiri, dan membantu meningkatkan pengetahuan kita tentang HTML, CSS, dan JavaScript.
Keunggulan Akun Premium
Meskipun versi reguler CodePen gratis, situs ini juga menawarkan jenis akun Pro yang penuh dengan fitur keren dan bernilai saat ini:
- TAMPILAN LANGSUNG – Perbarui otomatis pratinjau.
- ASET HOSTING – Mudah mengunggah file untuk bekerja.
- MODE COLLAB – Pasangan pemrograman di seluruh dunia.
- UNLIMITED Themes – Berbagai tema unik untuk embedding pada situs atau blog kalian.
- PENS PRIBADI – Jaga rahasia kerja kalian.
- TANPA IKLAN – Semua iklan akan dihapus untuk kalian dan orang lain yang melihat profil kalian.
Biaya untuk menggunakan fitur PRO ini adalah $9/bulan atau $75/tahun.
Ikuti Saya di CodePen!
Jangan ragu untuk mengikuti kami: codepen.io/abaykan di CodePen dan kami akan mengikuti kalian😆 Semoga bermanfaat dan sampai jumpa pada artikel selanjutnya!
Udah cukup lama sih maen2 di codepen, tapi baru kali ini tau ada beberapa fitur yg boleh juga, hehe