CodePen: Dibangun, Nguji, Nuduhake lan Temokake HTML, CSS, lan JavaScript

Codepen: Nggawe, Nguji, lan Temokake Code Front-End

Salah sawijining tantangan karo sistem manajemen konten yaiku nyoba lan ngasilake alat skrip. Sanajan iku dudu sarat kanggo umume penerbit, minangka publikasi teknologi, aku seneng nuduhake skrip sing bisa digunakake kanggo mbantu wong liya. Aku wis nuduhake cara nggunakake JavaScript kanggo mriksa kekuwatan tembung sandhi, carane priksa sintaks alamat email karo Ekspresi Biasa (Regex), lan paling anyar nambahake iki kalkulator kanggo prédhiksi pengaruh penjualan review online. Muga-muga bisa nambah puluhan alat ing situs iki, nanging WordPress ora kondusif kanggo nerbitake kaya iki… iku sistem konten, dudu sistem pangembangan.

Dadi, supaya skrip cilikku bisa digunakake, aku seneng nggunakake CodePen. CodePen minangka alat sing diatur kanthi rapi karo panel HTML, panel CSS, panel JavaScript, Console, lan kode kode sing diterbitake. Saben panel duwe informasi nalika sampeyan nggunakake elemen supaya sampeyan ngerti apa sing bisa ditindakake, uga kode warna HTML, CSS, lan JS kanggo mbantu sampeyan nyunting lan nulis kanthi luwih gampang.

CodePen minangka lingkungan pangembangan sosial. Intine, ngidini sampeyan nulis kode ing browser, lan ndeleng asil nalika sampeyan mbangun. Editor kode online sing migunani lan mbebayani kanggo para pangembang katrampilan apa wae, lan utamane menehi kekuwatan kanggo wong sing sinau kode. CodePen fokus utamane ing basa ngarep kayata HTML, CSS, JavaScript, lan sintaks praproses sing dadi prekara kasebut.

Babagan CodePen

Kanthi CodePen, aku bisa nindakake kabeh tugas sing dibutuhake nerbitake kalkulator Aku nempel ing situs iki. Umume kreasi ing CodePen umum lan sumber terbuka. Iki minangka makhluk urip sing bisa digandhengake karo wong liya lan komunitas, wiwit saka ati sing ringkih, nganti menehi komentar, nganti forking lan ngganti kabutuhan dhewe.

CodePen - kalkulator kanggo ngramal pengaruh penjualan kanggo ulasan online

Kanthi CodePen, sampeyan bisa ngganti tampilan yen pengin panel ana ing sisih kiwa, nengen, utawa ngisor nalika makarya… utawa ndeleng HTML ing tab anyar. Tampilan sisih langsung bisa digunakake kanggo nyoba setelan responsif amarga sampeyan bisa nyetel ukuran panel sing bisa dideleng.

Sampeyan bisa ngatur saben skrip sing digunakake dadi Pens, nggabungake dadi Proyek (editor multi-file), utawa malah nggawe koleksi. Sejatine minangka situs portofolio sing digunakake kanggo kode front-end sing bisa ngetutake penulis liyane, nggawe proyek liyane sing dituduhake publik menyang modifikasi dhewe, lan uga sinau cara nggawe sawetara perkara sing nyenengake liwat tantangan.

Sampeyan bisa nyimpen minangka GitHub Gist, ngekspor ing file zip, lan malah nampilake pena ing artikel kaya iki:

Delengen Pen
Pengaruh Sales Sales Prediksi Review Online
by Douglas Karr (@douglaskarr)
on CodePen.


Salah sawijining watesan editor Pen yaiku volume kode sing akeh. Sampeyan bisa uga ora nate nemoni masalah iki, amarga editor kudu apik kanthi atusan utawa uga ewonan baris kode. Nanging nalika miwiti ngetung 5,000 - 10,000 utawa luwih garis kode, sampeyan bakal weruh editor wiwit gagal. Nanging, sampeyan bisa nambah referensi eksternal menyang lembar gaya utawa JavaScript sing dadi host ing papan liya!

Aku ngajak sampeyan ndhaptar. Sampeyan bakal langganan email mingguan lan uga bisa nambah feed menyang feed RSS supaya bisa ndeleng pulpen sing mentas diterbitake. Lan, yen sampeyan miwiti nggoleki utawa nelusuri pena umum ing kana, sampeyan bakal nemokake sawetara proyek sing luar biasa… para pangguna cukup bakat!

Follow Douglas Karr ing Codepen

Versi mbayar, CodePen Pro, nawakake akeh fitur tambahan kanggo fungsionalitas utawa tim sing luwih apik - kalebu kolaborasi, proses, hosting aset, tampilan pribadi, lan uga tugasake proyek nganggo domain utawa subdomain sampeyan dhewe. Lan, mesthine, CodePen nyedhiyakake gudang sing apik karo integrasi Github sing bisa digunakake kabeh tim. Yen sampeyan mung pengin nyoba sawetara kode sederhana kaya aku, CodePen minangka alat sing paling larang regane.

Apa sampeyan mikir?

Situs iki nggunakake Akismet kanggo ngurangi spam. Sinau babagan proses data sampeyan.