HTML dan CSS sulit diwawancarai karena beberapa alasan:
Mereka terlalu mendasar, dibandingkan, misalnya, dengan bahasa pemrograman,
Mereka sangat bergantung pada konteks pekerjaan. Contoh:
Jika Anda membuat skala Google, situs web yang sangat cepat dan optimal, orang-orang yang Anda wawancarai untuk pekerjaan itu tidak dapat mengabaikan apa itu CSS sprite.
Jika Anda membuat situs web yang valid XHTML W3C, Anda harus memastikan bahwa para kandidat mengetahui perbedaan antara XHTML 1.0 dan XHTML 1.1, atau apa atribut wajib untuk <img/>, dll.
Jika Anda membuat situs web yang mengerikan penuh dengan peretasan, Anda harus bertanya kepada orang-orang yang Anda wawancarai tentang bagaimana mereka akan melakukan peretasan ini atau itu, bagaimana mereka menyajikan berbagai CSS untuk peramban yang berbeda, dll.
dll.
Jika itu murni pekerjaan HTML dan CSS, orang tersebut harus bekerja dengan desainer di satu sisi, dan pengembang di sisi lain. Mereka harus tahu HTML dan CSS, tetapi yang jauh lebih berharga adalah kemampuan mereka untuk berinteraksi dengan orang-orang itu , dan untuk memahami kebutuhan perancang, persyaratan pengembang, dan kendala HTML dan CSS.
Misalnya, mereka harus tahu cara menyusun HTML mereka sedemikian rupa sehingga akan mudah bagi pengembang JavaScript untuk menambahkan interaktivitas nanti.
Anda mungkin ingin memulai dengan beberapa pertanyaan dasar:
Apa browser favorit kamu?
Jika orang itu menjawab "Internet Explorer", segera hentikan wawancara: Anda tidak memerlukan orang seperti itu.
Tidak, saya bercanda. Jawabannya tidak relevan. Sebagai gantinya, Anda dapat menanyakan hal berikut:
Ceritakan tentang alat debug yang Anda gunakan di browser favorit Anda.
Primer menggunakan Chrome, saya bekerja setiap hari dengan Alat Pengembang. Alat-alat itu memungkinkan saya untuk:
Lihat permintaan yang dibuat dari halaman,
Pelajari waktu yang diperlukan untuk memuat halaman dan sumber daya terkait, terutama pencarian DNS, waktu tunggu dan penerimaan,
Pelajari header dari elemen yang dikirim, serta indikator cache,
Lihat DOM dan pelajari bagaimana penyeleksi CSS diterapkan,
Saya juga menggunakan YSlow yang berfungsi sebagai daftar periksa untuk pengoptimalan situs web yang membutuhkan skalabilitas tinggi. YSlow juga merupakan alat yang baik untuk menentukan apakah server dikonfigurasi dengan benar (mengirimkan tajuk yang benar, dll.).
Di Firefox, saya menggunakan Firebug, alat yang sangat mirip dengan Alat Pengembang dari Chrome. Alat pengembang juga tersedia dalam versi baru Internet Explorer, dan juga memungkinkan saya untuk beralih ke tampilan kompatibilitas IE7 ke IE10. Fitur terakhir ini sangat membantu, karena tanpa itu, saya akan dipaksa untuk menginstal beberapa mesin virtual hanya untuk pengujian warisan, atau untuk menggunakan lebih sering layanan berbayar seperti Litmus .
Tolong, jelaskan tentang apa itu <dl/>tag? Apa tujuan penggunaan tag ini? Bagaimana ini digunakan dalam praktek? Apa pendapat Anda tentang penggunaan yang diperluas ini?
Di sini, Anda ingin orang tersebut dapat menjelaskannya <dl/>untuk kamus, mengaitkan satu kunci <dt/>,, dengan satu atau beberapa nilai <dd/>,. Walaupun penggunaan utama tag ini murni terkait dengan semantik, pada praktiknya tag ini digunakan secara luas untuk mengganti tabel, contoh yang bagus adalah PHPBB3. Ini adalah hal yang baik ketika tabel memperlambat rendering halaman, tetapi harus digunakan dengan hati-hati: tidak hanya tabel yang masih sesuai dalam banyak kasus untuk menggambarkan data dengan lebih baik, tetapi juga mungkin ada cara lain, seperti biasa daftar, untuk menggambarkan konten tanpa menggunakan <dl/>.
Apa perbedaan antara tata letak tetap dan cairan? Apa pro dan kontra dari masing-masing?
Tata letak tetap memiliki lebar elemen yang telah ditentukan sebelumnya. Unsur-unsur tata letak cairan tergantung pada lebar halaman.
Tata letak yang diperbaiki membuatnya lebih mudah untuk mendesain halaman, terutama ketika ada banyak gambar lebar penuh. Bahkan tanpa grafis, itu masih lebih mudah, karena Anda hanya peduli untuk kasus yang tepat. Sebagai contoh, Programmers.SE menjadi situs web tata letak tetap, kolom yang menampilkan pertanyaan dan jawabannya selalu berukuran sama. Jika tata letak cairan akan digunakan untuk kolom ini, ini akan menimbulkan masalah: pada layar kecil, teks tidak dapat dibaca, karena garis akan terlalu pendek, sedangkan pada layar besar, garis akan sangat besar, sehingga teks akan terbaca juga.
Masalah dengan tata letak tetap adalah bahwa ia bekerja dengan baik untuk beberapa, resolusi paling banyak digunakan, tetapi gagal lebih atau kurang untuk yang lainnya. Ini menjadi sangat penting karena adopsi monitor yang sangat besar, lebar, dan meningkatnya penggunaan internet pada perangkat seluler yang kecil.
Tata letak cairan membantu dengan itu, tetapi desain lebih sulit dilakukan untuk situs web tersebut. Dalam beberapa skenario pada proyek yang dikelola dengan buruk, ini dapat menyebabkan peretasan HTML dan CSS, halaman besar, pemeliharaan yang rendah dan, selama pengembangan, dengan biaya yang lebih tinggi dan tenggat waktu yang terlewat.
Pada halaman dengan tata letak yang lancar, bagaimana Anda bisa menghindari situasi di mana kolom teks menjadi terlalu besar untuk bisa dibaca?
Anda dapat membatasi lebar zona teks dengan menggunakan max-widthproperti.
Apa pendapat Anda tentang potongan kode ini: <p color="Red" align="Center">Text here</p>?
Sepotong kode memiliki cacat untuk mencampur logika presentasi di dalam HTML. Logika presentasi harus dimasukkan ke dalam CSS karena beberapa alasan:
- Ini membantu pemisahan masalah dan kode bersih, yang berarti pemeliharaan lebih murah nanti,
- Itu membuat gaya dapat digunakan kembali dari halaman ke halaman, yang (di luar masalah rawatan) membantu memastikan bahwa Anda menggunakan gaya yang sama di seluruh situs web,
- Ini membantu mengurangi bandwidth, karena file CSS akan di-cache.
Setelah beberapa pertanyaan dasar seperti itu, Anda dapat mengajukan beberapa pertanyaan yang lebih rumit:
Bagaimana Anda menghindari duplikasi warna atau font di CSS, ketika warna atau font tersebut diterapkan ke beberapa elemen yang tidak dapat ditargetkan oleh pemilih tunggal? Apakah ada kekurangannya?
Anda melakukannya dengan menggunakan preprosesor CSS, seperti Sass atau KURANG. Mereka memungkinkan untuk menentukan warna, font dan bagian lain dari style di dalam variabel yang dapat Anda gunakan nanti dalam gaya Anda.
Kelemahan dari preprosesor CSS adalah:
Mereka kadang-kadang perlu mengubah alur kerja pengembangan dan penyebaran, untuk memiliki kode CSS terbaru di browser,
Mereka hanya diketahui oleh beberapa pengembang, yang mempersulit orang baru untuk bergabung atau memelihara proyek nanti,
Tidak ada IDE baik dan cepat untuk Sass atau KURANG, dan integrasi di dalam IDE paling populer agak mengecewakan.
Berikan saya contoh hrefnilai gambar yang ada di CDN, mengingat gambar ini ditampilkan di situs web yang dapat diakses baik melalui HTTP dan HTTPS.
Karena HTTPS membutuhkan setiap sumber daya yang dipanggil juga berada di HTTPS (jika tidak, peringatan keamanan akan ditampilkan kepada pengguna dalam banyak kasus), tidak mungkin untuk menentukan tautan sebagai http://cdn.example.com/image.png. Untuk menautkan gambar dengan benar, //cdn.example.com/image.pngharus digunakan; browser kemudian akan menambahkan http:atau https:tergantung pada konteksnya.
Mengingat bahwa ukuran halaman dan jumlah permintaan pada situs web tidak dapat dioptimalkan dan konten tidak dapat diubah atau AJAX ditambahkan, bagaimana Anda memberi kesan kepada pengguna bahwa situs web lebih cepat? Apa yang terlibat dari perspektif HTML?
Jika HTTP 1.1 digunakan, halaman dapat dipotong . Ini berarti bahwa bagian pertama akan muncul lebih cepat, memberi kesan bahwa situs web lebih cepat daripada kenyataannya. Pengkodean transfer terpotong tidak mungkin di HTTP 1.0, yang berarti tidak ada yang bisa dilakukan dalam kasus ini.
Agar dapat menyajikan konten yang dipotong diperlukan dari perspektif HTML untuk menyusun ulang elemen, menempatkan yang paling kritis di bagian atas file (yang tidak berarti bahwa mereka harus muncul di bagian atas halaman). Misalnya, di situs web e-commerce, ketika pengguna ingin melihat detail produk, bongkahan pertama mungkin berisi <head/>dan detail produk. Potongan berikutnya mungkin berisi elemen utama seperti logo situs web, menu utama, hak cipta, dll. Akhirnya, potongan terakhir dapat berisi bagian "Orang yang membeli ini juga membeli", komentar dan peringkat produk, "Bagikan di Facebook", dll.
Akhirnya, Anda dapat meminta kandidat untuk bekerja pada skenario dunia nyata. Mungkin apa saja, seperti yang paling mudah di bawah ini, untuk skenario kompleks di mana orang tersebut harus berurusan dengan sprite CSS atau teknik pengoptimalan lanjutan lainnya, dengan inkonsistensi peramban, dll.
Tolong, bisakah Anda membuat halaman XHTML dengan dua zona: yang kiri, dengan daftar, dan yang kanan, dengan teks. Dua zona dipisahkan oleh garis vertikal, yang memanjang dari paling atas ke paling bawah halaman. Daftar dan teks dalam ukuran yang bervariasi, Anda tidak dapat memprediksi mana yang akan memiliki ketinggian terbesar. Anda tidak dapat menggunakan <table/>s.
Sebenarnya, ini cukup sederhana tetapi menunjukkan jika orang tersebut memiliki refleks untuk memikirkan ketinggian. Kandidat yang tidak berpengalaman akan membuat float:leftzona dan border-left:solid 1px #ccc;zona, tetapi lupa menambahkan perbatasan ke zona kiri dan memperluasnya sehingga dua perbatasan akan berada di tempat yang sama.
