Home-theater-designers
Memulakan pengembangan web JavaScript boleh menjadi proses yang mengecewakan, tetapi ada alat di luar sana yang menjadikannya lebih mudah.
CodePen.io adalah persekitaran pengekodan dalam penyemak imbas yang direka untuk kedua-dua pembelajaran membuat kod dan untuk memprototaip idea dengan cepat tanpa kerumitan.
Dalam artikel ini, kami melihat beberapa ciri laman web dan bagaimana ia dapat membantu anda menjadi pengaturcara yang lebih baik.
Apa itu CodePen?
CodePen menyediakan sesuatu yang dipanggil a pen , yang terdiri daripada tiga tetingkap yang berbeza untuk HTML, CSS, dan JavaScript, ditambah panel pratonton yang dikemas kini dalam masa nyata semasa anda menaip.
Walaupun sering digunakan untuk pembangun web untuk mempamerkan idea untuk laman web, ia juga merupakan tempat yang bagus untuk mempelajari asas-asas pengembangan web front-end. Berikut adalah ciri paling ketara yang perlu anda ketahui semasa menggunakan CodePen.
1. Pengawas
Preprocesser ditafsirkan atau disusun bahasa yang dirancang untuk memudahkan pengekodan. Mereka dapat menambahkan ciri ke bahasa untuk kemudahan, dan membuat kod lebih mudah dibaca. Dalam pengembangan web, kombinasi preprocessor untuk HTML, CSS, dan JavaScript digunakan untuk membuat kod bersih dengan cepat.
Sekiranya anda mempelajari pengembangan web dan ingin mencuba praprosesor yang berbeza, CodePen membolehkan anda menukar praprosesor dengan cepat, dan melihat kod yang disusunnya dalam masa nyata. Setiap tiga panel pada aplikasi CodePen mempunyai menu dropdown di kanan atas. Pilih Lihat HTML / CSS / JS yang Disusun untuk melihat bagaimana kod tersebut akan ditafsirkan.
Dalam pena ini, kami telah membuat laman web mudah menggunakan Haml dan Sass untuk menggayakan teks pengepala. Memilih Lihat Disusun menunjukkan HTML dan CSS standard. Dalam contoh ini perbezaannya minimum. Walaupun belajar bahasa baru, bagaimanapun, berguna untuk melihat bagaimana kod praprosesan kelihatan setelah disusun.
2. Sumber Luar
Di samping sokongan asli untuk praprosesor, CodePen menyokong skrip luaran. Ini menjadikannya tempat yang tepat untuk mendapatkan pengalaman langsung dengan perpustakaan untuk projek peribadi anda, atau memanfaatkan perpustakaan aplikasi web popular seperti React.
Untuk menambah perpustakaan luaran, buka Tetapan tetingkap pena anda, dan menuju ke tab JavaScript. Terdapat dua cara untuk menambahkan sumber, sama ada dengan menambahkan URL sumber secara manual, atau dengan mencari.
Kami menggunakan ciri ini dalam artikel kami animasi web dengan mo.js , bersama dengan proses awal Babel.
Lihat Pen Contoh Mojs MUO oleh Ian ( @Bardoctorus ) pada CodePen.
Ya, pen CodePen boleh dilekatkan! Teruskan dan klik pada panel pratonton di atas untuk melihat hasil tutorial Mo.js!
Pena lain boleh diimport seperti perpustakaan luaran. Ini bermaksud anda boleh mengambil elemen dari pena yang ditulis sebelumnya untuk menggunakan modul seperti di pen baru anda. Pengguna CodePen Adam Undian Mudah pen adalah contoh yang baik untuk ini.
3. Templat
Semasa anda mempelajari konsep baru atau menguji idea baru, anda sering menggunakan komponen yang serupa dan mengulangi langkah yang sama untuk memulakan. CodePen membolehkan penciptaan pena templat yang dapat mengurangkan pengulangan, dan membiarkan anda terus menerus.
Untuk membuat templat, buka pena baru, buat perubahan anda, dan pilih Templat slaid dalam menu tetapan.
https://vimeo.com/221428690
Sehingga baru-baru ini, pengguna percuma hanya dapat membuat tiga templat, tetapi sekarang semua pengguna dapat memiliki seberapa banyak templat dalam akaun mereka yang mereka inginkan. Sempurna untuk memulakan idea baru dengan kelewatan minimum!
4. Kerjasama Fesyen
Keupayaan untuk berkolaborasi dan mengajar dengan CodePen mungkin merupakan aset terbesarnya. Sudah ada banyak alat kolaborasi yang hebat untuk pengaturcara, tetapi pendekatan CodePen adalah sederhana dan intuitif.
Pengguna Pro CodePen dapat membuat pen baru, dan membukanya untuk bekerjasama di bawah Tukar Paparan menu. Ini mengubah pautan pen menjadi jemputan yang dapat dikongsi untuk menampung jumlah orang yang bergantung pada rancangan CodePen Pro anda.
bagaimana tangkapan skrin pada snapchat tanpa mereka tahu 2020
Dalam kejadian ini, saya menulis HTML sementara seorang rakan mengemas kini CSS dalam masa nyata, dengan kursor berlabel dikenal pasti tempat mereka bekerja.
Sesiapa sahaja yang mempunyai pautan boleh bergabung dan menggunakan fungsi sembang dalam penyemak imbas, tidak kira sama ada mereka pengguna pro atau mempunyai akaun CodePen. Dengan syarat simpanan automatik dimatikan, pemilik pen dapat menyimpan sebarang perubahan, menjadikannya kaedah selamat untuk membuka kod anda kepada orang lain tanpa risiko.
Sifat terbuka dalam mod ini bermanfaat bagi pemula kerana anda boleh menjemput hampir semua orang ke dalam pen anda untuk membimbing anda melalui konsep yang sukar. Ini juga merupakan kaedah yang berguna untuk mengetahui jalan anda kerana ia sangat sesuai untuk menemubual calon pekerja, dan sudah melakukannya telah digunakan secara profesional dengan cara ini !
5. Mod Profesor
Mod Profesor membolehkan satu pengguna Pro menghoskan ruangan di mana hanya mereka yang dapat mengedit kod. Antara 10-100 pengguna dapat menonton dan berbual bergantung pada rancangan Pro host.
Mod Profesor membenarkan fleksibiliti antara pembelajaran di kelas dan pembelajaran jarak jauh, atau gabungan keduanya. Menggunakan mod Profesor akan membolehkan orang di belakang kelas mempunyai pengalaman yang sama seperti orang di hadapan, dan untuk guru menunjukkan pembetulan pepijat yang akan dikemas kini dalam masa nyata.
6. Mod Persembahan
Mod persembahan dirancang, tidak menghairankan, dengan mengemukakan kod dalam fikiran. Aplikasi ini dipaparkan dalam paparan ringkas, yang dirancang untuk berfungsi dengan projektor overhead. CodePen telah mengoptimumkan mod Presentasi untuk digunakan pada sambungan internet berkelajuan rendah dan perkakasan yang lebih lemah.
Pembaca yang bijak mungkin telah menyedari bahawa versi CodePen percuma akan menyediakan fungsi ini dengan tepat, walaupun mod Pro memang mempunyai beberapa ciri berguna. Tata letak, ukuran font, dan tema dapat dengan cepat diubah dengan cepat agar sesuai dengan hampir semua pengaturan, dan menunjukkan pautan ke pena memunculkan URL pendek berukuran jumbo yang menjadikan perkongsian projek lebih mudah.
Perubahan kecil ini, bersamaan dengan skala jendela pratonton agar sesuai dengan apa sahaja yang anda pamerkan, menjadikan mod persembahan sesuai untuk kedua-dua guru, dan pembangun yang menyampaikan idea kepada rakan sekerja. Mod penyampaian juga merupakan cara yang bersih dan mudah untuk menunjukkan kod jika anda mendapati diri anda menemu ramah untuk kedudukan pengaturcaraan.
7. Corak
Mencari inspirasi menjadi lebih mudah dengan koleksi CodePen Corak Reka Bentuk .
Setiap kategori adalah kumpulan contoh kod yang disediakan oleh pengguna CodePen untuk tugas-tugas tertentu. Adakah anda mencari kaedah untuk membuat butang dinamik untuk laman web anda? Menu yang sesuai? Terdapat banyak kategori yang sesuai dengan hampir semua contoh.
Corak ini juga merupakan cara yang baik untuk belajar bagaimana butang interaktif berfungsi, dan cara yang berbeza antara muka pengguna dinamik dapat berfungsi.
8. Emmet
Emmet , sebelumnya dikenali sebagai Zen Coding, secara meluas dianggap sebagai penjimat masa terhebat untuk pengembangan HTML dan CSS. Plugin menggunakan beberapa kod yang anda sendiri banyak menulis dan mengubahnya menjadi jalan pintas mudah.
Melihatnya dalam tindakan lebih baik daripada menjelaskannya, jadi lakukan persediaan biasa untuk dokumen HTML:
Menambah ini ke setiap dokumen HTML telah dikurangkan menjadi dua tindakan. Menggunakan Emmet, taip ! dan tekan Tab kunci. Sihir!
Emmet aktif sebagai standard pada CodePen dan sangat berguna jika anda ingin mempelajari konsep baru dalam JavaScript dan perlu membuat HTML dan CSS yang menyokong dengan cepat.
Kembangkan Dengan CodePen untuk Pengalaman yang Lebih Baik
CodePen adalah alat yang sangat baik untuk pembangun web, dan bidangnya terus berkembang. JavaScript adalah bahasa yang bagus untuk belajar untuk masa depan dalam pembangunan web.
cara mematikan masa skrin
Terdapat beberapa tutorial dan kursus yang bagus untuk orang yang ingin memulakan dengan JavaScript, dan CodePen adalah persekitaran yang bagus untuk menguji kemahiran baru anda.
Berkongsi Berkongsi Tweet E-mel 8 laman web terbaik untuk memuat turun buku audio secara percumaBuku audio adalah sumber hiburan yang hebat, dan lebih mudah dicerna. Berikut adalah lapan laman web terbaik di mana anda boleh memuat turunnya secara percuma.
Baca Seterusnya Topik-topik yang berkaitan- Pengaturcaraan
- HTML
- Pembangunan Web
- JavaScript
- CSS
Ian Buckley adalah wartawan bebas, pemuzik, pemain dan penerbit video yang tinggal di Berlin, Jerman. Ketika dia tidak menulis atau di atas pentas, dia bermain-main dengan elektronik DIY atau kod dengan harapan menjadi saintis gila.
Lagi Dari Ian BuckleyLanggan buletin kami
Sertailah buletin kami untuk mendapatkan petua, ulasan, ebook percuma, dan tawaran eksklusif!
Klik di sini untuk melanggan