Terangkan 10 baris pertama kod sumber Twitter ' s kepada saya

Sejak beberapa minggu yang lalu, saya telah menyewa seorang jurutera JavaScript penuh stack senior di syarikat perabot sewa saya, Pabio. Oleh kerana kami adalah pasukan terpencil, kami mengadakan wawancara kami di Zoom, dan saya telah melihat bahawa sesetengah pemaju tidak hebat dalam wawancara pengekodan atau papan putih, walaupun mereka baik dalam pekerjaan. Oleh itu, sebaliknya, kami mempunyai perbincangan teknikal selama satu jam di mana saya bertanya kepada mereka tentang vitals web, kebolehcapaian, perang pelayar, dan topik lain yang serupa mengenai web. Salah satu soalan yang selalu saya tanya ialah: "Terangkan sepuluh atau lebih baris kod sumber Twitter kepada saya."

Saya fikir ia adalah satu ujian mudah yang memberitahu saya banyak tentang kedalaman pengetahuan front-end asas yang mereka miliki, dan artikel ini menyenaraikan jawapan yang terbaik.

Untuk konteks, saya berkongsi skrin saya, buka Twitter.com dan klik Sumber Lihat . Kemudian saya meminta mereka pergi ke barisan untuk membantu saya memahami HTML, dan mereka boleh mengatakan sebanyak atau sedikit yang mereka suka. Saya juga zum masuk untuk membuat teks lebih mudah dibaca, jadi anda tidak melihat garis penuh tetapi anda mendapat idea. Inilah yang kelihatan seperti:

Perhatikan bahawa sejak perbincangan teknikal kami adalah perbualan. Saya tidak mengharapkan jawapan yang sempurna dari sesiapa. Jika saya mendengar beberapa kata kunci yang betul, saya tahu bahawa calon itu tahu konsep itu, dan saya cuba menolaknya ke arah yang betul.

Baris 1:

Barisan pertama kod sumber setiap dokumen adalah sempurna untuk wawancara ini kerana berapa banyak calon yang mengetahui tentang perisytiharan Doctype menyerupai berapa tahun pengalaman mereka. Saya masih ingat hari -hari Dreamweaver saya dengan garis Doctype XHTML yang panjang, seperti Chris yang disenaraikan dalam artikelnya "The Common Doctypes" dari tahun 2009.

Jawapan yang sempurna: Ini adalah pengisytiharan jenis dokumen (Doc-type) yang kami selalu letakkan sebagai baris pertama dalam fail HTML. Anda mungkin berfikir bahawa maklumat ini berlebihan kerana penyemak imbas sudah tahu bahawa jenis mime respons adalah teks/html; Tetapi dalam hari -hari Netscape/Internet Explorer, pelayar mempunyai tugas yang sukar untuk mengetahui standard HTML yang digunakan untuk menjadikan halaman dari pelbagai versi bersaing.

Ini amat menjengkelkan kerana setiap standard menjana susun atur yang berbeza jadi tag ini digunakan untuk memudahkan penyemak imbas. Sebelum ini, tag Doctype telah lama dan juga termasuk pautan spesifikasi (agak seperti SVGs hari ini), tetapi bernasib baik telah diseragamkan dalam HTML5 dan masih hidup.

Juga diterima: Ini adalah tag Doctype untuk membiarkan penyemak imbas tahu bahawa ini adalah halaman HTML5 dan harus diberikan seperti itu.

Baris 2:

Barisan ini dalam kod sumber memberitahu saya jika calon mengetahui tentang kebolehcapaian dan penyetempatan. Anehnya, hanya beberapa orang yang tahu tentang atribut Dir dalam wawancara saya, tetapi ia adalah satu perkara yang hebat dalam perbincangan mengenai pembaca skrin. Hampir semua orang dapat memikirkan atribut Lang = "en", walaupun mereka tidak menggunakannya sebelum ini.

Jawapan yang sempurna: Ini adalah elemen akar dokumen HTML dan semua elemen lain berada di dalam yang satu ini. Di sini, ia mempunyai dua atribut, arah dan bahasa. Atribut Arah mempunyai nilai kiri-ke-kanan untuk memberitahu ejen pengguna yang arahan kandungannya berada; Nilai-nilai lain adalah tepat untuk bahasa seperti bahasa Arab, atau hanya auto yang meninggalkannya ke pelayar untuk memikirkannya.

Atribut bahasa memberitahu kita bahawa semua kandungan di dalam tag ini adalah dalam bahasa Inggeris; Anda boleh menetapkan nilai ini kepada mana-mana tag bahasa, walaupun untuk membezakan en-us dan en-gb, sebagai contoh. Ini juga berguna untuk pembaca skrin untuk mengetahui bahasa mana yang hendak diumumkan.

Baris 3:

Jawapan yang sempurna: Tag meta dalam kod sumber adalah untuk membekalkan metadata mengenai dokumen ini. Atribut set aksara (char-set) memberitahu penyemak imbas yang pengekodan aksara digunakan, dan Twitter menggunakan pengekodan UTF-8 standard. UTF-8 sangat bagus kerana ia mempunyai banyak titik watak supaya anda boleh menggunakan pelbagai simbol dan emoji dalam kod sumber anda. Adalah penting untuk meletakkan tag ini berhampiran permulaan kod anda supaya penyemak imbas belum lagi menghuraikan terlalu banyak teks ketika menyeberangi garisan ini; Saya fikir peraturannya adalah untuk meletakkannya dalam kilobyte pertama dokumen, tetapi saya akan mengatakan amalan terbaik adalah meletakkannya tepat di bahagian atas

.

Sebagai nota sampingan, ia kelihatan seperti Twitter menghilangkan tag

untuk sebab -sebab prestasi (kurang kod untuk memuatkan), tetapi saya masih suka membuatnya jelas kerana ia adalah rumah yang jelas untuk semua metadata, gaya, dll.

Baris 4:

Kebanyakan calon tidak tahu tentang perkara ini, tetapi pemaju berpengalaman boleh bercakap tentang bagaimana untuk mengoptimumkan laman web untuk peranti Apple, seperti Apple-Touch-icon dan Safari menyandarkan tab SVGs.

Jawapan yang sempurna: Anda boleh memasukkan laman web di skrin utama iPhone untuk membuatnya berasa seperti aplikasi asli. Safari tidak menyokong aplikasi web progresif dan anda tidak boleh menggunakan enjin pelayar lain pada iOS, jadi anda tidak mempunyai pilihan lain jika anda mahu pengalaman seperti asli, yang Twitter, tentu saja, suka. Jadi mereka menambah ini untuk memberitahu Safari bahawa tajuk aplikasi ini adalah Twitter. Baris seterusnya adalah sama dan mengawal bagaimana bar status sepatutnya kelihatan seperti ketika aplikasi telah dilancarkan.

Baris 8:

Jawapan yang sempurna: Ini adalah persamaan standard web yang sesuai dengan tag meta warna bar status bar status epal. Ia memberitahu penyemak imbas untuk tema UI sekitarnya. Chrome di Android dan berani di desktop kedua -duanya melakukan pekerjaan yang cukup baik dengan itu. Anda boleh meletakkan warna CSS dalam kandungan, dan juga boleh menggunakan atribut media untuk hanya menunjukkan warna ini untuk pertanyaan media tertentu seperti, sebagai contoh, untuk menyokong tema gelap. Anda juga boleh menentukan sifat ini dan tambahan dalam aplikasi web yang nyata.

Baris 9: <link rel="carian" type="Application/OpenSearchDescription xml" href="/opensearch.xml" title="twitter"> </h3> <p> ... memberitahu pelayar bahawa pengguna boleh menambah Twitter sebagai enjin carian.</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre rel="HTML" data-line=""> <link rel="preload" as="script" crossorigin="anonymous" href="https://abs.twimg.com/responsive-web/client-web/polyfills.cad508b5.js">

Salin selepas log masuk

... mempunyai banyak atribut yang menarik yang boleh dibincangkan, terutamanya nonce.

 <link rel="alternate" hreflang="x-default" href="https://twitter.com/">

... untuk halaman pendaratan antarabangsa.

 : fokus: tidak ([data-focusvisible-polyfill]) {outline: none;}

... untuk mengeluarkan garis besar fokus apabila tidak menggunakan navigasi papan kekunci (CSS: pemilih fokus-kelihatan polyfilled di sini).

Atas ialah kandungan terperinci Terangkan 10 baris pertama kod sumber Twitter ' s kepada saya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!