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

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

One challenge with a content management system is testing and producing scripted tools. While that’s not a requirement for most publishers, as a technology publication, I do like sharing working scripts from time to time to help other folks. I’ve shared how to use 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. I hope to add dozens of tools on the site but WordPress isn’t exactly conducive to publishing like this… it’s a content system, not a development system.

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

With CodePen, you can change your view if you’d like the panes to be on the left, right, or bottom as you work… or view the HTML in a new tab. The side-by-side view works incredibly well to test your responsive settings since you can adjust the size of the viewable pane.

You can organize each of your working scripts into Pens, combine them into Projects (multi-file editor), or even build out collections. It’s basically a working portfolio site for front-end code where you can follow other authors, fork other publicly shared projects into your own to modify, and even learn how to do some fun stuff through challenges.

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

The paid version, CodePen Pro, offers a ton of additional features for improved functionality or teams – including collaboration, processes, asset hosting, private views, and even deployed projects with your own domain or subdomain. And, of course, CodePen provides a great repository with Github integration where your entire team can work. If you’re just wanting to test out some simple code as I am, CodePen is an invaluable tool.

Bagaimana menurut Anda?

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