CodePen: Built, Test, Share dan Discover HTML, CSS, dan JavaScript

Codepen: Bangun, Uji, dan Cari Kod Bahagian Depan

Satu cabaran dengan sistem pengurusan kandungan adalah menguji dan menghasilkan alat skrip. Walaupun itu bukan syarat bagi kebanyakan penerbit, sebagai penerbitan teknologi, saya suka berkongsi skrip kerja dari semasa ke semasa untuk membantu orang lain. Saya telah berkongsi cara penggunaan JavaScript untuk memeriksa kekuatan kata laluan, bagaimana untuk periksa sintaks alamat e-mel dengan Ungkapan Biasa (Regex), dan baru-baru ini menambahkan ini kalkulator untuk meramalkan kesan penjualan ulasan dalam talian. Saya berharap dapat menambahkan puluhan alat di laman web ini tetapi WordPress tidak begitu kondusif untuk penerbitan seperti ini ... ini adalah sistem kandungan, bukan sistem pembangunan.

Oleh itu, untuk mendapatkan skrip kecil saya, saya senang menggunakannya CodePen. CodePen adalah alat yang tersusun rapi dengan panel HTML, panel CSS, panel JavaScript, Konsol, dan penerbitan kod yang dihasilkan. Setiap panel mempunyai maklumat ketika anda mengarahkan elemen sehingga anda memahami apa yang mungkin, serta pengekodan warna HTML, CSS, dan JS anda untuk membantu anda menyunting dan menulis dengan lebih mudah.

CodePen adalah persekitaran pembangunan sosial. Pada dasarnya, ia membolehkan anda menulis kod di penyemak imbas, dan melihat hasilnya semasa anda membina. Penyunting kod dalam talian yang berguna dan membebaskan untuk pemaju apa pun kemahiran, dan terutama memberi kuasa kepada orang yang belajar membuat kod. CodePen memberi tumpuan terutamanya pada bahasa front-end seperti HTML, CSS, JavaScript, dan sintaks praprosesan yang berubah menjadi perkara-perkara tersebut.

Mengenai CodePen

Dengan CodePen, saya dapat melakukan semua kerja yang diperlukan terbitkan kalkulator Saya tertanam di laman web ini. Sebilangan besar ciptaan di CodePen adalah awam dan sumber terbuka. Mereka adalah makhluk hidup yang dapat berinteraksi dengan orang lain dan masyarakat, dari hati yang sederhana, hingga memberikan komen, hingga mencari dan mengubah untuk keperluan mereka sendiri.

CodePen - kalkulator untuk meramalkan kesan penjualan ulasan dalam talian

Dengan CodePen, anda boleh mengubah pandangan anda jika anda mahu panel berada di kiri, kanan atau bawah semasa anda bekerja ... atau melihat HTML di tab baru. Paparan sebelah-sisi berfungsi dengan sangat baik untuk menguji tetapan responsif anda kerana anda dapat menyesuaikan ukuran panel yang dapat dilihat.

Anda boleh mengatur setiap skrip kerja anda ke dalam Pena, menggabungkannya ke dalam Projek (penyunting berbilang fail), atau bahkan mengumpulkan koleksi. Ini pada dasarnya adalah laman web portfolio berfungsi untuk kod front-end di mana anda boleh mengikuti pengarang lain, melengkapkan projek lain yang dikongsi secara terbuka untuk anda ubahsuai, dan bahkan belajar bagaimana melakukan beberapa perkara yang menyeronokkan melalui cabaran.

Anda boleh menyimpan sebagai GitHub Gist, eksport dalam fail zip, dan genap menerapkan pen dalam artikel seperti ini:

Lihat Pen
Kesan Penjualan Ramalan Dalam Talian
by Douglas Karr (@douglaskarr)
on CodePen.


Salah satu batasan editor Pen adalah jumlah kod yang banyak. Anda mungkin tidak akan pernah menghadapi masalah ini, kerana editor semestinya baik dengan beratus-ratus bahkan ribuan baris kod. Tetapi apabila mereka mula mencecah 5,000 - 10,000 atau lebih baris kod, anda akan melihat penyunting mula gagal. Walau bagaimanapun, anda boleh menambahkan rujukan luaran ke helaian gaya atau JavaScript yang dihoskan di tempat lain!

Saya mendorong anda untuk mendaftar. Anda akan melanggan e-mel mingguan mereka dan juga dapat menambahkan suapan ke RSS feed anda sehingga anda dapat melihat pena yang baru diterbitkan. Dan, jika anda mula mencari atau melayari khalayak umum di sana, anda akan menemui beberapa projek yang luar biasa ... para pengguna cukup berbakat!

Ikut Douglas Karr di Codepen

Versi berbayar, CodePen Pro, menawarkan banyak fitur tambahan untuk peningkatan fungsi atau pasukan - termasuk kolaborasi, proses, hosting aset, pandangan peribadi, dan bahkan projek yang disebarkan dengan domain atau subdomain anda sendiri. Dan, tentu saja, CodePen menyediakan repositori hebat dengan integrasi Github di mana seluruh pasukan anda dapat bekerja. Sekiranya anda hanya ingin menguji beberapa kod mudah seperti saya, CodePen adalah alat yang tidak ternilai.

Apa yang anda fikir?

Laman web ini menggunakan Akismet untuk mengurangkan spam. Ketahui bagaimana data komen anda diproses.