popcode

Kode pop

PopCode adalah lingkungan pengeditan HTML/CSS/JavaScript sederhana untuk digunakan di kelas. Ini sangat mirip dengan JSBin, JSFiddle, atau Codepen, tetapi berfokus pada memberikan umpan balik yang spesifik, langsung, dan ramah manusia ketika kode tersebut berisi kesalahan.

Status proyek

PopCode adalah lingkungan pengeditan resmi untuk Kode Nation Intro to Web Development Program pada tahun ajaran 2019-2020.

Cobalah

Anda dapat mencoba popcode di https://popcode.org .

Daftar isi

• Fitur
  • Tentang validasi
  • Fitur peta jalan
• Detail teknis
  • Tinjauan Arsitektur
• Berkontribusi
  • Berjalan secara lokal
  • Mode debug
  • Referensi pengembang
• Lisensi
• Kontributor
• Berkat
• Kontak

Fitur

• Edit HTML, CSS, dan JavaScript di browser; Pembaruan pratinjau dalam browser saat Anda mengetik.
• Dapatkan umpan balik langsung, komprehensif, mudah dipahami tentang masalah dalam kode Anda.
• Kesalahan tidak bisa diabaikan. Jika ada kesalahan dalam kode, pratinjau langsung digantikan oleh daftar kesalahan.
• Kesalahan runtime JavaScript juga dilaporkan dalam bahasa yang ramah manusia, dengan anotasi dalam kode sumber menunjukkan sumber masalah.
• Login satu klik menggunakan akun GitHub; Semua pekerjaan disimpan dari jarak jauh ke Firebase saat masuk.
• Pratinjau halaman web di jendela sendiri.
• Ekspor ke Gist Github.
• Impor kode starter dari Gistub Gist.

Tentang validasi

Sistem validasi adalah poin utama dari proyek ini. Sebagian besar pemeriksa sintaks, linter, dan penegak gaya cenderung memberikan umpan balik menggunakan bahasa yang ditujukan untuk coders berpengalaman, bukan pemula. Dengan demikian, memberikan terjemahan pesan kesalahan ke dalam bahasa Inggris yang sederhana untuk siswa adalah perhatian utama dari proyek ini.

Popcode cenderung ke arah penegakan gaya serat dan kode yang ketat, bahkan ketika keputusan gaya yang ditegakkan adalah sewenang -wenang, di bawah filosofi bahwa memberi siswa satu cara yang benar untuk melakukannya menghilangkan ambiguitas dan membantu proses pembelajaran.

Detail teknis

PopCode menggunakan React to Render Views, Redux untuk mengelola status aplikasi, ACE sebagai editor kode, Webpack untuk mengemas aplikasi sisi klien, dan Babel untuk menyusun JavaScript modern untuk kompatibilitas dengan versi browser Legacy.

PopCode mendeteksi kesalahan dalam kode siswa menggunakan SlowParse, HTMLLINT, Inspektur HTML, pengerjaan ulang CSS, PrettyCSS, Stylelint, JShint, dan Esprima.

Berkontribusi

PopCode adalah proyek semua volunteer dan kontribusi dipersilakan. Saya mendorong kontributor pertama kali untuk memulai dengan Panduan Memulai , yang memberikan kerusakan yang ramah dan terperinci dari setiap langkah untuk menyumbangkan permintaan tarik pertama Anda.

Awal yang cepat

Jika Anda ingin terlibat tetapi tidak memiliki gagasan khusus tentang bagaimana, periksa masalah pertama yang baik dan membantu label yang diinginkan. Jika Anda sudah memiliki ide yang Anda sukai, lakukanlah.

Popcode hadir dengan lingkungan pengembangan yang termasuk baterai yang dibangun di atas nodeenv . Anda perlu menginstal python; Versi 2.7+ apa pun akan berfungsi. Untuk mengatur lingkungan, jalankan:

$ tools/setup.py

Ini akan menginstal node dan yarn di lingkungan yang terisolasi di direktori nodeenv dari root proyek. Ini tidak akan mengganggu pemasangan alat-alat di seluruh sistem.

Setelah pengaturan selesai, untuk menjalankan server pengembangan, jalankan:

$ tools/yarn.py start

Ini akan memulai server di http: // localhost: 3000

Untuk memulai tes dalam mode arloji, jalankan:

$ tools/yarn.py autotest

Periksa bagian "scripts" dari package.json untuk alat berguna lainnya.

Mengembangkan dalam VS Code

PopCode hadir dengan konfigurasi kode vs kustom yang kuat, yang secara otomatis diaktifkan oleh tools/setup.py . Jika Anda menggunakan VS Code, Anda dapat:

• Jalankan Perintah Show Recommended Extensions untuk dengan mudah menginstal ekstensi yang meningkatkan pengalaman pengembang kode popcode
• Mulailah server, jalankan tes, dan lebih banyak dengan mengetik task ke bilah terbuka cepat untuk secara otomatis melengkapi tugas yang akan dijalankan
• Debug lingkungan pengembangan Anda atau tes bercanda dengan mengetik debug ke bar terbuka cepat

Menggunakan editor lain

PopCode menggunakan alat seperti lebih cantik, eslint, dan stylelint untuk secara otomatis memformat kode. Kami merekomendasikan penyiapan plugin editor untuk format otomatis pada save; Atau, Anda dapat menjalankan tools/yarn.py lintfix sebelum berkomitmen untuk memformat dan Autofix Lint. Integrasi kode resmi VS PopCode (dengan ekstensi yang disarankan diinstal) melakukan ini di luar kotak.

Lingkungan Pengembangan Alternatif (Lanjutan)

Tidak ada persyaratan bahwa Anda menggunakan lingkungan pengembangan resmi untuk bekerja pada kode pop; Sebagian besar Anda hanya perlu versi yang tepat dari node dan benang yang diinstal pada mesin Anda (periksa bagian "engines" dari package.json untuk versi saat ini).

Referensi pengembang

PopCode berusaha menggunakan teknologi terkini dan konvensi kode untuk membuat pengembangan semenarik mungkin. Di bawah ini adalah tautan ke dokumentasi referensi tentang alat utama:

• Bereaksi untuk membangun antarmuka pengguna
• Redux untuk mengelola status aplikasi
• PostCSS-Preset-ENV memberi kami fitur CSS mutakhir
• Pengubah Elemen Blok Menyediakan Konvensi untuk Mengorganisir Kelas DOM
• Webrpack Membangun JavaScript
• Jest adalah kerangka kerja tes

Lisensi

PopCode didistribusikan di bawah lisensi MIT. Lihat file lisensi terlampir untuk semua detail kotor.

Kontributor

• Mat Brown (Pemelihara)
• Alejandro AR
• VriBhav Verma
• Alex Pelan
• Carol Chau
• Jesse Wang
• Eric Lewis
• Razzi Abuissa
• Jeremy Schrader
• Leo McLay
• Frederic Brodbeck
• Ben Yelsey
• Aaron Greenberg
• Peter Jablonski
• Ten-young Guh
• Ilona Brand
• Kaylee Knowles
• Felicia Wong
• Tim Miller
• Bruno Garcia
• Cory Etzkorn
• Nick Volpe
• Craig Iturbe
• Wylie Conlon
• Gary Pang
• Alessia Bellisario
• Roan Kattouw
• Harpreet Singh
• Limon Monte
• Matthew Armstrong
• Matt Garbis
• Ilya Gribov
• Chase Starr
• Alec Merdler
• Eric Snell
• Omar de Leo
• David Shen
• Maggie Walker
• Joshua Ling
• Taimur Samee
• Ronald Martin
• Ian Plunkett
• Adrian Falleiro
• Katie Conneally membuat nama popcode
• Desain Logo, Konsep "Pop", dan elemen branding oleh tim di Red Peak: Andrew Haug, Aya Kawabata, Jieun Lee, Achu Fones, Iwona Waluk, Stewart Devlin, dan Katie Conneallyly
• Antarmuka pengguna yang dirancang oleh Ariel Liu, Ian Jones, Meghan Knoll, dan Simon Lesser.

Berkat

Perusahaan -perusahaan ini dengan murah hati menawarkan akses kode pop ke tingkatan berbayar dari layanan mereka yang sangat baik, gratis:

Kontak

Jangan ragu untuk mengirim email kepada saya di [email protected] jika Anda memiliki pertanyaan.

Anda dapat menemukan tim Slack kami, termasuk saluran #DEV kami, di sini.