Home-theater-designers
Memulai dengan pengembangan web JavaScript bisa menjadi proses yang membuat frustrasi, tetapi ada alat di luar sana yang membuatnya lebih mudah.
CodePen.io adalah lingkungan pengkodean dalam browser yang dirancang untuk pembelajaran kode dan untuk membuat prototipe ide dengan cepat dengan sedikit kerumitan.
Pada artikel ini, kami melihat beberapa fitur situs dan bagaimana fitur tersebut dapat membantu Anda menjadi programmer yang lebih baik.
Apa itu CodePen?
CodePen menyediakan sesuatu yang disebut a pena , yang terdiri dari tiga jendela berbeda untuk HTML, CSS, dan JavaScript, ditambah panel pratinjau yang diperbarui secara waktu nyata saat Anda mengetik.
Meskipun sering digunakan untuk pengembang web untuk menampilkan ide untuk situs web, ini juga merupakan tempat yang bagus untuk mempelajari dasar-dasar pengembangan web front-end. Berikut adalah fitur paling menonjol yang perlu Anda ketahui saat menggunakan CodePen.
1. Praprosesor
Preprocessors ditafsirkan atau dikompilasi bahasa yang dirancang untuk menyederhanakan pengkodean. Mereka dapat menambahkan fitur ke bahasa untuk kenyamanan, dan membuat kode lebih mudah dibaca. Dalam pengembangan web, kombinasi praprosesor untuk HTML, CSS, dan JavaScript digunakan untuk membuat kode bersih dengan cepat.
Jika Anda mempelajari pengembangan web dan ingin mencoba praprosesor yang berbeda, CodePen memungkinkan Anda untuk beralih praprosesor dengan cepat, dan melihat kode yang dikompilasi secara real time. Masing-masing dari tiga panel pada aplikasi CodePen memiliki menu tarik-turun di kanan atas. Pilih Lihat Kompilasi HTML/CSS/JS untuk melihat bagaimana kode akan ditafsirkan.
Di pena ini, kami telah membuat situs sederhana menggunakan Haml dan Kelancangan untuk menata beberapa teks header. Memilih Lihat Dikompilasi menunjukkan HTML dan CSS standar. Dalam contoh ini perbedaannya minimal. Namun, saat mempelajari bahasa baru, akan berguna untuk melihat bagaimana kode yang telah diproses sebelumnya terlihat setelah dikompilasi.
2. Sumber Daya Eksternal
Di samping dukungan asli untuk praprosesor, CodePen mendukung skrip eksternal. Ini menjadikannya tempat yang sempurna untuk mendapatkan pengalaman langsung dengan perpustakaan untuk proyek pribadi Anda, atau untuk memoles perpustakaan aplikasi web populer seperti React .
Untuk menambahkan perpustakaan eksternal, buka Pengaturan di pena Anda, dan buka tab JavaScript. Ada dua cara untuk menambahkan sumber daya, baik dengan menambahkan URL sumber daya secara manual, atau dengan mencari.
Kami menggunakan fitur ini di artikel kami yang meliputi animasi web dengan mo.js , bersama dengan prapemrosesan Babel.
Lihat Pena Contoh Mojs MUO oleh Ian ( @Bardoctorus ) di CodePen.
Ya, pena CodePen dapat disematkan! Silakan dan klik panel pratinjau di atas untuk melihat hasil tutorial Mo.js!
Pena lain dapat diimpor seperti perpustakaan eksternal. Ini berarti Anda dapat mengambil elemen dari pena yang ditulis sebelumnya untuk digunakan seperti modul di pena baru Anda. Pengguna CodePen Adam Polling Sederhana pena adalah contoh yang bagus untuk ini.
3. Template
Saat Anda mempelajari konsep baru atau menguji ide baru, Anda sering menggunakan komponen serupa dan mengulang langkah yang sama untuk memulai. CodePen memungkinkan pembuatan pena template yang dapat memotong pengulangan, dan membiarkan Anda langsung ke intinya.
Untuk membuat template, buka pena baru, buat perubahan, dan pilih Templat penggeser di menu pengaturan.
https://vimeo.com/221428690
Sampai saat ini, pengguna gratis hanya dapat membuat tiga template, tetapi sekarang semua pengguna dapat memiliki template dalam akun mereka sebanyak yang mereka inginkan. Sempurna untuk memulai ide baru dengan penundaan minimum!
4. Kolaborasi Mode
Kemampuan untuk berkolaborasi dan mengajar dengan CodePen mungkin merupakan aset terbesarnya. Sudah ada banyak alat kolaborasi hebat untuk programmer , tetapi pendekatan CodePen sederhana dan intuitif.
Pengguna Pro CodePen dapat membuat pena baru, dan membukanya untuk berkolaborasi di bawah Ubah Tampilan Tidak bisa. Ini mengubah tautan pena menjadi undangan yang dapat dibagikan yang menampung sejumlah orang tergantung pada paket CodePen Pro Anda.
film online gratis tanpa unduhan, tanpa keanggotaan, tanpa survei
Dalam contoh ini, saya menulis HTML sementara seorang teman memperbarui CSS secara real-time, dengan kursor berlabel mengidentifikasi tempat mereka bekerja.
Siapa pun yang memiliki tautan dapat bergabung dan menggunakan fungsi obrolan dalam browser, terlepas dari apakah mereka pengguna pro atau bahkan memiliki akun CodePen. Asalkan penyimpanan otomatis tidak aktif, hanya pemilik pena yang dapat menyimpan perubahan apa pun, menjadikannya cara yang aman untuk membuka kode Anda kepada orang lain tanpa risiko.
Sifat terbuka dari mode ini bermanfaat bagi pemula karena Anda dapat mengundang hampir semua orang ke pena Anda untuk memandu Anda melalui konsep yang sulit. Ini juga merupakan mode praktis untuk mengetahui jalan Anda karena sangat cocok untuk mewawancarai calon karyawan, dan sudah telah digunakan secara profesional dengan cara ini !
5. Mode Profesor
Mode Profesor memungkinkan satu pengguna Pro untuk meng-host ruangan di mana hanya mereka yang dapat mengedit kode. Antara 10-100 pengguna dapat menonton dan mengobrol tergantung pada paket Pro dari tuan rumah.
Mode Profesor memungkinkan fleksibilitas antara pembelajaran di kelas dan pembelajaran jarak jauh, atau kombinasi keduanya. Menggunakan mode Profesor akan memungkinkan orang-orang di belakang kelas untuk memiliki pengalaman yang sama dengan mereka yang berada di depan, dan bagi guru untuk menunjukkan perbaikan bug yang akan diperbarui secara real time.
6. Mode Presentasi
Mode presentasi dirancang, secara tidak mengejutkan, dengan mempertimbangkan kode penyajian. Aplikasi ditampilkan dalam tampilan yang disederhanakan, dirancang untuk bekerja dengan proyektor overhead. CodePen telah mengoptimalkan mode Presentasi untuk digunakan pada koneksi internet berkecepatan rendah dan perangkat keras yang lebih lemah.
Pembaca yang cerdik mungkin sudah menyadari bahwa versi gratis CodePen akan menyediakan fungsi ini dengan tepat, meskipun mode Pro memang memiliki beberapa fitur yang berguna. Tata letak, ukuran font, dan tema dapat dengan cepat diubah dengan cepat agar sesuai dengan hampir semua pengaturan, dan menunjukkan tautan ke pena akan menampilkan URL singkat berukuran jumbo yang membuat berbagi proyek lebih mudah.
Perubahan kecil ini, bersama dengan kemampuan untuk menskalakan jendela pratinjau agar sesuai dengan apa pun yang Anda pamerkan, menjadikan mode presentasi sempurna untuk guru, dan pengembang yang mempresentasikan ide kepada rekan kerja. Mode presentasi juga merupakan cara yang tampak bersih, dan sederhana untuk menyajikan kode jika Anda menemukan diri Anda diwawancarai untuk posisi pemrograman .
7. Pola
Mencari inspirasi menjadi lebih mudah dengan koleksi CodePen Pola desain .
Setiap kategori adalah kumpulan kode contoh yang disediakan oleh pengguna CodePen untuk tugas tertentu. Apakah Anda mencari cara untuk membuat tombol dinamis untuk situs Anda? Menu akordeon? Ada banyak kategori yang sesuai dengan hampir semua contoh.
Pola-pola ini juga merupakan cara yang bagus untuk mempelajari cara kerja tombol interaktif, dan berbagai cara antarmuka pengguna yang dinamis dapat berfungsi.
8. Emmet
Semut , sebelumnya dikenal sebagai Zen Coding, secara luas dianggap sebagai penghemat waktu terbaik untuk pengembangan HTML dan CSS. Plugin mengambil beberapa kode yang sering Anda tulis dan mengubahnya menjadi pintasan sederhana.
Melihatnya beraksi lebih baik daripada menjelaskannya, jadi lakukan pengaturan biasa untuk dokumen HTML:
Menambahkan ini ke setiap dokumen HTML telah dikurangi menjadi dua tindakan. Menggunakan Emmet, ketik ! dan tekan tab kunci. Sihir!
Emmet aktif sebagai standar pada CodePen dan sangat berguna jika Anda mencoba mempelajari konsep baru dalam JavaScript dan perlu membuat HTML dan CSS pendukung dengan cepat.
Kembangkan Dengan CodePen untuk Pengalaman yang Lebih Baik
CodePen adalah alat yang sangat baik untuk pengembang web, dan bidang ini terus berkembang. JavaScript adalah bahasa yang bagus untuk dipelajari untuk masa depan dalam pengembangan web.
aplikasi realitas virtual terbaik untuk android
Ada beberapa tutorial dan kursus hebat yang tersedia untuk orang yang ingin memulai JavaScript , dan CodePen adalah lingkungan yang bagus untuk menguji keterampilan baru Anda.
Membagikan Membagikan Menciak Surel 8 Situs Web Terbaik untuk Mengunduh Buku Audio GratisBuku audio adalah sumber hiburan yang hebat, dan lebih mudah dicerna. Berikut adalah delapan situs web terbaik tempat Anda dapat mengunduhnya secara gratis.
Baca Selanjutnya Topik-topik yang berkaitan- Pemrograman
- HTML
- Pengembangan web
- JavaScript
- CSS
Ian Buckley adalah jurnalis lepas, musisi, pemain, dan produser video yang tinggal di Berlin, Jerman. Ketika dia tidak menulis atau di atas panggung, dia mengutak-atik elektronik atau kode DIY dengan harapan menjadi ilmuwan gila.
More From Ian BuckleyBerlangganan newsletter kami
Bergabunglah dengan buletin kami untuk kiat teknologi, ulasan, ebook gratis, dan penawaran eksklusif!
Klik di sini untuk berlangganan