9 sebab anda mesti menggunakan codepen

Takeaways Key

codepen.io adalah platform serba boleh yang membolehkan pengguna membuat "pen" atau set HTML, CSS, dan JavaScript, yang boleh dipaparkan, diedit, dan menerima maklum balas pada bila -bila masa, menjadikannya alat yang ideal untuk ujian Bugs, berkolaborasi, dan mencari inspirasi.
Codepen menawarkan pelbagai ciri yang meningkatkan kecekapan pengekodan, seperti integrasi csslint, sokongan untuk rasa yang berbeza dari HTML, CSS, dan JavaScript, toolkit seperti Emmet untuk pembangunan yang lebih cepat, dan pandangan yang berbeza untuk pena, termasuk versi pro dengan tambahan Pandangan.
• Platform ini menonjol kerana aspek komuniti yang kuat, dengan keupayaan untuk berkongsi dan menerima kritikan yang membina, dan peranannya sebagai sumber inspirasi, memaparkan pen, artikel, dan koleksi yang mengagumkan di laman utama untuk membantu meningkatkan kerja pengguna dan pengetahuan tentang HTML, CSS, dan JavaScript.
Di codepen.io, mereka menggambarkan diri mereka sebagai "taman permainan untuk bahagian depan web." Codepen sangat baik untuk menguji pepijat, bekerjasama, dan mencari inspirasi baru. Ia berfungsi dengan membolehkan anda membuat "pen", yang merupakan set HTML, CSS, dan JavaScript. Anda kemudian boleh memaparkan pena pada profil anda, mengambil maklum balas, dan terus mengedit pen tersebut pada bila -bila masa.

Seperti banyak taman permainan kod langsung, Codepen membolehkan anda belajar dalam persekitaran sumber terbuka, memaparkan pratonton langsung perubahan kod, dan bahkan membiarkan anda membenamkan demo codepen anda di mana-mana laman web, seperti yang di bawah.

lihat pena penuh CSS NES oleh satu div (@onediv) pada codepen.

Dalam artikel ini, saya akan melampaui ciri -ciri yang baru saja disebut untuk menerangkan beberapa perkara yang saya fikir meletakkan Codepen di atas persaingannya, dan mengapa anda perlu menyemaknya jika anda belum melakukannya.

Semasa menerangkan ciri -ciri ini, saya juga akan membenamkan beberapa pen rawak tetapi sejuk di setiap bahagian untuk anda periksa.

1. Pilihan CSS

Codepen termasuk beberapa ciri hebat untuk menulis CSS lebih cepat. Anda boleh memilih untuk memasukkan normalisasi.css atau reset.css dalam CSS anda dengan hanya mengklik butang radio. Anda juga boleh memilih untuk menggunakan -Prefix -Free atau AutoPrefixer juga. Dengan cara ini tidak perlu meluangkan masa untuk dihubungkan ke fail luaran (yang juga mungkin, jika anda mahu).

Bagaimana jika anda tidak pasti tentang beberapa teknik CSS anda yang digunakan? Jangan risau; Codepen mempunyai integrasi CSSLINT untuk mencari kod CSS anda dan memberi amaran kepada anda jika terdapat kesilapan, amaran, sokongan pelayar yang lemah, dan lain -lain

2. Perisa HTML, CSS, dan JavaScript

Codepen menyokong tan perisa HTML, CSS, dan JavaScript. Untuk HTML, anda boleh menggunakan Haml, Markdown, Slim, atau Jade. Untuk CSS, mereka menyokong SASS dan SCSS (kedua-duanya dengan kompas pilihan atau tambahan bourbon), serta kurang dan stylus.

Di bawah menu JavaScript, anda boleh memilih Coffeescript atau Livescript. Terdapat juga menu drop-down di mana anda boleh mempunyai versi terkini seperti jQuery dan angularjs.

3. Emmet dan Vim mengikat

Codepen adalah semua tentang perkembangan yang lebih cepat dan lancar. Itulah sebabnya mereka menggunakan toolkit seperti Emmet untuk membantu memastikan projek bergerak. Editor CodePen membolehkan anda menggunakan pengikatan kunci VIM yang merupakan pintasan papan kekunci baris arahan. Kedua -dua alat ini bersama -sama dapat membantu membuat aliran kerja yang lebih cepat.

Untuk mengetahui lebih lanjut mengenai Emmet, anda boleh menyemak artikel aliran kerja yang lebih cepat: menguasai emmet.

4. Koleksi dan tag

Anda boleh menambah tag ke pen anda, yang kemudian menjadi dicari. Mencari tag seperti "loader" dan "bentuk" membawa banyak inspirasi yang berguna.

Jika anda mahu, anda juga boleh membuat koleksi pena yang berkaitan dengan topik tertentu. Chris Coyier, salah seorang pengasas bersama Codepen, telah mencipta koleksi seperti "lukisan jalan" dan "mengulangi corak".

5. Pandangan pen yang berbeza

Codepen mempunyai jumlah 8 pandangan yang berbeza untuk pen. Setiap pandangan mempunyai kelebihan sendiri.

Paparan Editor - Ini adalah paparan lalai untuk penyuntingan pen. Anda boleh menyesuaikan saiz pratonton kod dan pilih bahasa mana yang hendak dipaparkan.

Paparan Butiran - Pandangan ini membolehkan anda melihat tag pena, hati, komen, pena bercabang, dan lain -lain. Ini mengandungi kebanyakan ciri sosial untuk Codepen.

Paparan halaman penuh-Ini cukup jelas. Ia menjadikan skrin penuh pena anda dalam iframe, hanya meninggalkan footer codepen.

Debug View-Debug View adalah pandangan skrin penuh, walaupun dengan ciri-ciri tambahan. Ia menghilangkan kaki iframe dan codepen untuk akses konsol JavaScript yang lebih mudah. Ini bagus untuk menguji kod yang anda fikir Codepen mungkin mengganggu.

6. Codepen Pro Views

Jika anda adalah pengguna codepen pro, anda mempunyai akses kepada lebih banyak pandangan:

Mod persembahan - Mod ini dibuat terutamanya untuk projektor overhead. Ia menghilangkan tajuk untuk memberi anda lebih banyak ruang dan membolehkan anda dengan cepat menukar saiz fon dan warna editor kod. Anda juga boleh menukar saiz pratonton tanpa menukar kod.

Live View-Dengan Codepen Live View, anda mempunyai paparan skrin penuh pen anda. Semasa anda mengedit pen itu, ia akan mengemas kini secara automatik semasa anda menaip. Ini sering digunakan semasa ujian pada pelbagai peranti.

Mod Profesor-Mod ini membolehkan orang menonton kod anda secara real-time. Terdapat juga tetingkap sembang di mana profesor dan pelajar boleh berbual.

Mod Collab - Mod Collab membolehkan lebih daripada satu pengaturcara membuat pengeditan pada pen pada masa yang sama. Terdapat juga tetingkap sembang, sama seperti dalam mod Profesor.

7. Blogging

Blogging adalah ciri baru di Codepen, yang membolehkan anda dengan mudah menulis tentang kod seperti pada blog biasa. Anda boleh menulis dengan Markdown, dan menggunakan alat penyembuhan khas untuk membenamkan pen anda apabila anda perlu. Anda boleh menambah CSS tersuai ke jawatan anda, dan terdapat pratonton yang sangat mudah untuk menguji siaran anda.

8. Komuniti

Ini adalah apa yang menetapkan Codepen menjelang pertandingan dengan tembakan panjang. Komuniti telah menjadi sebahagian besar daripada Codepen sejak awal. Melalui komen dan perkongsian, orang boleh memberi dan menerima kritikan yang membina, dan belajar bersama. Kumpulan seperti 4AE9B8 dan bullgit telah bermula dari perbualan melalui Codepen. Pengasas telah bercakap tentang apa yang mereka fikirkan tentang komuniti Codepen di podcast Codepen.

9. Inspirasi

Pens yang mengagumkan sentiasa dipaparkan di laman utama, serta artikel dan koleksi yang hebat. Pens berpose sebagai inspirasi, dan cara yang menyeronokkan untuk belajar. Mencari melalui pen yang hebat dapat membantu meningkatkan kerja anda sendiri, dan membantu meningkatkan pengetahuan anda tentang HTML, CSS, dan JavaScript.

di bawah adalah beberapa demo yang luar biasa untuk diperiksa:

• Canvas Sparkle Light Trial oleh Jack Rugile
• Star Wars Membuka merangkak dari 1977 oleh Tim Pietrusky
• konsep dropdown 3D Makisu CSS oleh Justin Windle
• CSS 3D X-Wing oleh Julian Garnier
• butang sosial dengan hover oleh Marius Balaj
• Demo Webgl oleh Anand
• kain tearable oleh Suffick

Kesimpulan

Akhirnya, menggunakan Codepen dapat membantu anda belajar lebih cepat dan menjadi sebahagian daripada komuniti yang besar. Artikel di SitePoint sering menggunakan codepen untuk membenamkan kod untuk tutorial. Dan jika anda berminat dengan ciri -ciri Codepen yang lebih hebat, lihat ini:

• bookmarklets
• Plugin WordPress
• oembed
• Hire Me Button

Soalan Lazim (Soalan Lazim) Mengenai Menggunakan Codepen

Apakah ciri -ciri utama Codepen yang menjadikannya pilihan pilihan untuk pemaju? Ia memberikan pandangan langsung mengenai perubahan kod, yang bermaksud pemaju dapat melihat perubahan yang mereka buat dalam masa nyata. Ciri ini mempercepatkan proses pembangunan. Codepen juga menyokong pra-pemproses seperti SCSS, Less, dan Stylus, yang boleh membantu pemaju menulis kod yang lebih cekap. Ia juga menawarkan mod kerjasama, yang membolehkan beberapa pemaju bekerja pada projek yang sama secara serentak. Ciri ini amat berguna untuk projek pasukan dan pengaturcaraan pasangan.

Bagaimana saya boleh menggunakan Codepen untuk ujian dan debugging? Ia menyediakan persekitaran terpencil di mana anda boleh menulis, menguji, dan debug kod anda tanpa menjejaskan projek utama anda. Anda boleh dengan mudah berkongsi 'pen' anda dengan orang lain, menjadikannya alat yang hebat untuk mendapatkan maklum balas dan membantu dengan debugging. Codepen juga menyokong Console.log, yang boleh sangat membantu untuk menyahpepijat JavaScript. Codepen adalah alat yang hebat untuk pengajaran dan pengekodan pembelajaran. Guru boleh membuat 'pen' untuk menunjukkan konsep pengekodan, dan pelajar boleh mengikat 'pen' ini untuk bereksperimen dan belajar. Codepen juga mempunyai 'mod profesor' yang membolehkan guru menyediakan demonstrasi pengekodan langsung. Saiz peranti yang berbeza terus dalam editor. Ciri ini menjadikannya lebih mudah untuk membuat reka bentuk yang berfungsi dengan baik pada semua saiz peranti.

Bolehkah saya menggunakan codepen offline? Anda boleh menggunakan CodePen di luar talian untuk mengusahakan 'pen' anda, tetapi anda perlu pergi ke talian untuk menyimpan perubahan anda.

Bagaimana saya boleh berkongsi kerja saya di Codepen? Codepen mudah. Anda boleh berkongsi URL 'pen' anda, atau anda boleh membenamkan 'pen' anda di laman web lain. Codepen juga menawarkan 'mod persembahan' yang sesuai untuk demonstrasi atau persembahan secara langsung. Anda boleh berkongsi kerja anda, mendapatkan maklum balas, belajar dari orang lain, dan juga bekerjasama dengan projek. Masyarakat adalah tempat yang bagus untuk belajar dan berkembang sebagai pemaju.

Bolehkah saya menggunakan codepen untuk projek komersial?

Ya, anda boleh menggunakan CODEPEN untuk projek komersial. Walau bagaimanapun, penting untuk diperhatikan bahawa mana -mana 'pen' yang anda buat pada codepen secara terbuka secara lalai, jadi anda harus berhati -hati untuk tidak memasukkan sebarang maklumat sensitif atau proprietari dalam 'pen' anda. dan pra-pemproses JavaScript?

Codepen menyokong pelbagai pra-proses CSS dan JavaScript, termasuk SCSS, kurang, Stylus, Babel, dan TypeScript. Ini bermakna anda boleh menulis kod anda dalam bahasa pra-pemproses dan codepen akan menyusunnya ke CSS atau JavaScript untuk anda. , terdapat beberapa alternatif yang mungkin anda pertimbangkan. Ini termasuk jsfiddle, plunker, dan glitch. Setiap alat ini mempunyai kekuatan dan kelemahan tersendiri, jadi pilihan terbaik bergantung pada keperluan dan keutamaan khusus anda.

Atas ialah kandungan terperinci 9 sebab anda mesti menggunakan codepen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!