CodePen: Membuat, Menguji, Membagikan, dan Menemukan HTML, CSS, dan JavaScript

Codepen: Buat, Uji, dan Temukan Kode Front-End

Satu tantangan dengan sistem manajemen konten adalah menguji dan memproduksi alat dengan skrip. Meskipun itu bukan persyaratan bagi sebagian besar penerbit, sebagai publikasi teknologi, saya suka membagikan skrip kerja dari waktu ke waktu untuk membantu orang lain. Saya sudah berbagi cara menggunakan JavaScript untuk memeriksa kekuatan kata sandi, Bagaimana caranya periksa sintaks alamat email dengan Regular Expressions (Regex), dan baru-baru ini menambahkan ini kalkulator untuk memprediksi dampak penjualan ulasan online. Saya berharap dapat menambahkan lusinan alat di situs ini tetapi WordPress tidak terlalu kondusif untuk penerbitan seperti ini… ini adalah sistem konten, bukan sistem pengembangan.

Jadi, agar skrip kecil saya berfungsi, saya senang menggunakannya CodePen. CodePen adalah alat yang tertata rapi dengan panel HTML, panel CSS, panel JavaScript, Konsol, dan kode yang dihasilkan diterbitkan. Setiap panel memiliki informasi saat Anda mengarahkan mouse ke elemen sehingga Anda memahami apa yang mungkin, serta kode warna HTML, CSS, dan JS Anda untuk membantu Anda mengedit dan menulis dengan lebih mudah.

CodePen adalah lingkungan pengembangan sosial. Intinya, ini memungkinkan Anda untuk menulis kode di browser, dan melihat hasilnya saat Anda membuat. Editor kode online yang berguna dan membebaskan untuk pengembang segala keterampilan, dan khususnya memberdayakan orang yang belajar membuat kode. CodePen berfokus terutama pada bahasa front-end seperti HTML, CSS, JavaScript, dan sintaks pra-pemrosesan yang berubah menjadi hal-hal itu.

Tentang CodePen

Dengan CodePen, saya dapat melakukan semua pekerjaan yang diperlukan terbitkan kalkulator Saya menyematkan di situs. Sebagian besar kreasi di CodePen bersifat publik dan open source. Mereka adalah makhluk hidup yang dapat berinteraksi dengan orang lain dan komunitas, dari yang sederhana, meninggalkan komentar, bercabang dan berubah untuk kebutuhan mereka sendiri.

CodePen - kalkulator untuk memprediksi dampak penjualan ulasan online

Dengan CodePen, Anda dapat mengubah tampilan jika Anda ingin panel berada di kiri, kanan, atau bawah saat Anda bekerja… atau melihat HTML di tab baru. Tampilan berdampingan bekerja sangat baik untuk menguji pengaturan responsif Anda karena Anda dapat menyesuaikan ukuran panel yang dapat dilihat.

Anda dapat mengatur setiap skrip kerja Anda ke dalam Pena, menggabungkannya ke dalam Proyek (editor multi-file), atau bahkan membangun koleksi. Ini pada dasarnya adalah situs portofolio yang berfungsi untuk kode front-end di mana Anda dapat mengikuti penulis lain, membagi proyek lain yang dibagikan secara publik menjadi milik Anda sendiri untuk dimodifikasi, dan bahkan belajar bagaimana melakukan beberapa hal menyenangkan melalui tantangan.

Anda dapat menyimpan sebagai GitHub Gist, mengekspor dalam file zip, dan bahkan menanamkan pena dalam artikel seperti ini:

Lihat Pena
Prediksi Dampak Penjualan Ulasan Online
by Douglas Karr (@digeeembok)
on CodePen.


Salah satu batasan editor Pena adalah banyaknya kode. Anda mungkin tidak pernah mengalami masalah ini, karena editor seharusnya baik-baik saja dengan ratusan atau bahkan ribuan baris kode. Tetapi ketika mereka mulai mencapai 5,000 - 10,000 atau lebih baris kode, Anda akan melihat editor mulai gagal. Namun, Anda dapat menambahkan referensi eksternal ke stylesheet atau JavaScript yang dihosting di tempat lain!

Saya akan mendorong Anda untuk mendaftar. Anda akan berlangganan email mingguan mereka dan juga dapat menambahkan umpan ke umpan RSS Anda sehingga Anda dapat melihat pena yang baru diterbitkan. Dan, jika Anda mulai mencari atau menjelajahi pena umum di sana, Anda akan menemukan beberapa proyek luar biasa… penggunanya cukup berbakat!

Mengikuti Douglas Karr di Codepen

Versi berbayar, CodePen Pro, menawarkan banyak fitur tambahan untuk meningkatkan fungsionalitas atau tim - termasuk kolaborasi, proses, hosting aset, tampilan pribadi, dan bahkan proyek yang diterapkan dengan domain atau subdomain Anda sendiri. Dan, tentu saja, CodePen menyediakan repositori yang bagus dengan integrasi Github tempat seluruh tim Anda dapat bekerja. Jika Anda hanya ingin menguji beberapa kode sederhana seperti saya, CodePen adalah alat yang sangat berharga.

Bagaimana menurut Anda?

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.