Apa yang saya pelajari dengan menetapkan satu baris CSS dalam projek sumber terbuka

Semasa melayari dokumentasi Svelte di iPhone, saya dapati ralat UI yang jelas. Tidak ada yang salah dengan tombol repl. Saya selalu mahu menyumbang kepada projek sumber terbuka dan saya fikir ia adalah pembetulan yang cepat dan mudah. Ternyata ia lebih daripada sekadar menukar garis kod CSS.

Menyalin, menyahpepijat, dan menubuhkan persekitaran tempatan adalah menyeronokkan, sukar dan sangat penting.

soalan

Saya membuka alat pemaju penyemak imbas dan fikir saya akan melihat masalah yang sama dalam paparan telefon. Walau bagaimanapun, kesilapan itu hilang. Sekarang ini adalah masalah CSS yang sangat rumit.

? Menuai

Jika anda menggunakan Chrome sebagai penyemak imbas anda pada iOS, anda masih menggunakan enjin rendering Safari. Dikatakan dari Wikipedia:

Chrome menggunakan IOS WebKit -yang merupakan enjin rendering mudah alih Apple dan komponen untuk penyemak imbas Safari -jadi ia tidak boleh menggunakan enjin JavaScript Google sendiri.

Caniuse juga menyokong ini, yang memberikan arahan berikut mengenai safari IPS:

Sudah jelas sekarang mengapa masalah itu tidak muncul di mesin saya, tetapi ia muncul di telefon saya. Enjin rendering yang berbeza!

Menghasilkan semula masalah secara tempatan

Saya memuat turun projek itu dan berlari secara tempatan. Saya mengesahkan bahawa ia masih menjadi masalah dengan menjalankan kod tempatan pada emulator serta iPhone sebenar saya. Safari di MacOS menyediakan cara mudah untuk membuka alat pemaju untuk setiap contoh.

Ini menyediakan akses konsol yang sama seperti dalam penyemak imbas, tetapi berfungsi dengan safari iOS. Saya tidak berbohong, pengalaman pemaju Apple hebat (lihat apa yang saya buat ??).

Saya sekarang dapat menghasilkan semula masalah ini secara tempatan.

? Menuai

Selepas memuat turun repositori Svelte dan melihat beberapa kod, saya perhatikan bahawa UI dan SVG diperkenalkan melalui pakej yang dipanggil @sveltejs/site-kit. OK, sekarang saya memerlukan versi Local Kit Site saya untuk ditarik ke Svelte/Site supaya saya dapat melihat perubahan dan debug masalah.

Saya perlu menunjuk node_modules dalam pakej svelte.json ke salinan tempatan saya-kit. Ini kelihatan seperti pautan simbolik. Selepas melihat dokumentasi tanpa banyak hasil, saya mencari di Google dan tersandung pada NPM-Link. Ini menunjukkan kepada saya apa yang saya buat!

Saya kini boleh membuat perubahan tempatan ke tapak-Kit dan melihat bahawa mereka tercermin dalam projek Svelte.

Menyelesaikan masalah

Serius, hanya ubah satu baris kod:

 <code>border: transparent;</code>

Tetapi mencari lokasi di mana baris kod ini harus diletakkan tidak semudah yang anda fikirkan. Terdapat beberapa tempat yang kasar untuk peta sumber projek, yang menunjukkan bahawa CSS ini berasal dari komponen nav.svelte, dan sebenarnya ia datang dari fail lain. Ini akan menjadi satu lagi cara terbaik untuk menyumbang kepada projek ini!

Kemudian anda mencari dan mengetahui bahawa ini sedang diproses dan anda juga akan mengetahui lebih lanjut mengenai bagaimana ia dilakukan. Semuanya kelihatan hebat di telefon bimbit dan desktop sekarang.

Kajian

Ia pada mulanya hanya perubahan kod satu baris yang mudah, tetapi ia berubah menjadi perjalanan. Saya terpaksa:

• Menjalankan projek dan gudang komponen
• Memahami pautan sistem
• Sumbangan dokumentasi untuk pautan tapak-kit
• Ketahui mengenai enjin penyemak imbas yang berbeza
• Ketahui Cara Meniru Pelayar Safari IOS
• Ketahui cara mengakses debuggernya
• Mencari masalah ketika peta sumber tidak berfungsi dengan baik
• (Akhir) Betulkan masalah

Apabila anda melakukannya sendiri, anda biasanya tidak menghadapi masalah seperti itu, atau anda perlu membina sistem yang besar dan kompleks yang memerlukan membina model mental dan pembelajaran. Anda tidak boleh belajar dari penyelenggara. Paling penting, anda tidak akan melihat semua usaha untuk membina produk teknologi yang popular.

Apabila saya mengemukakan idea ini kepada CSS-Tricks, Chris berkata dia mempunyai situasi yang sama baru-baru ini. Pembelajaran keras adalah pembelajaran yang berkekalan. Pelukan dan perjuangan.

Jangan berhenti

Saya mempunyai satu lagi soalan dari projek Svelte dan sekarang saya belajar cssstylesheet kerana ada soalan lain (saya fikir) tentang bagaimana safari mengendalikan animasi kerangka utama dalam stylemanager.ts. Dengan cara ini, kajian saya terus bergerak ke hadapan sepanjang jalan yang saya tidak pernah ambil dalam kerja harian saya.

Apabila sesuatu terhempas, nikmati proses pembelajaran sistem. Anda akan mendapat pandangan yang berharga tentang mengapa perkara itu runtuh dan apa yang boleh dilakukan untuk memperbaikinya. Ini adalah salah satu manfaat yang besar untuk menyumbang kepada projek sumber terbuka dan mengapa saya menggalakkan anda berbuat demikian.

Atas ialah kandungan terperinci Apa yang saya pelajari dengan menetapkan satu baris CSS dalam projek sumber terbuka. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!