Petunjuk dan konteks
Produk menginginkan pratinjau ringan saat pengguna menunjukkan minat pada nama pengguna, tautan dokumen, atau istilah, tetapi konten harus tetap dapat digunakan saat hover menghilang, pengguna bernavigasi menggunakan keyboard, atau perangkat hanya berbasis sentuhan. Gunakan interest invokers HTML dan Popover API, serta jelaskan jeda (delays), fokus, penutupan (dismissal), peramban yang tidak didukung, dan kegagalan pemuatan data.
MDN menjelaskan interestfor sebagai cara deklaratif untuk mengaitkan tombol atau tautan dengan elemen target; ketika target berupa popover, peramban dapat menampilkannya secara otomatis selama minat (interest) ada. Penjelas Open UI mendokumentasikan motivasi untuk hovercard. Artikel ini menyintesis materi publik dan tidak mengklaim sebagai pertanyaan wawancara khusus perusahaan tertentu.
Apa yang sedang diuji oleh pewawancara
Pewawancara ingin melihat apakah Anda memperlakukan "hover" sebagai satu status minat (interest state) yang mencakup penunjuk, fokus, sentuhan, dan teknologi asistif. Jawaban yang kuat menyebutkan interest/loseinterest, interest-delay-*, popover top layer, manajemen fokus, jalur inti tanpa JavaScript, dan peningkatan progresif (progressive enhancement); jawaban yang lemah hanya mengaitkan mouseenter/mouseleave.
Pertanyaan untuk diklarifikasi terlebih dahulu
- Apakah pratinjau tersebut merupakan informasi tambahan atau diperlukan untuk menyelesaikan tugas?
- Apakah konten target berasal dari origin yang sama (same-origin), dapat di-cache, dan boleh dimuat secara lazy?
- Bagaimana perangkat sentuh harus membuka dan menutupnya, dan apakah ketukan harus menavigasi ke halaman detail?
- Bagaimana tautan inti tetap dapat digunakan ketika peramban tidak memiliki interest invokers?
Jawaban 30 detik
"Saya akan mempertahankan tautan normal yang mengarah ke halaman detail dan menggunakan interestfor untuk mengaitkannya dengan pratinjau popover. Jeda minat mengurangi aktivasi yang tidak disengaja; jika didukung, perilaku deklaratif mencakup penunjuk dan fokus. Peramban yang tidak didukung tidak kehilangan tautan, dan polyfill JavaScript minimal dapat menambahkan pratinjau. Data pratinjau dapat dimuat secara asinkron tetapi tidak boleh memblokir navigasi. Penutupan menghormati semantik fokus dan Escape, serta reduced motion meniadakan animasi."
Solusi langkah demi langkah
Secara struktural, tautan atau tombol adalah interest invoker, sedangkan target memiliki id dan popover yang stabil. Nilai interestfor milik invoker mereferensikan id tersebut. Jika target berupa popover, platform menempatkannya di top layer dan menerapkan perilaku siklus hidup popover; target juga dapat berupa elemen biasa yang ditampilkan aplikasi setelah mendengarkan event minat.
Jeda mencegah pergerakan penunjuk yang cepat melintasi tautan memulai banyak permintaan. Gunakan interest-delay-start dan interest-delay-end, atau throttling aplikasi yang setara, tampilkan skeleton terlebih dahulu, dan ambil data berdasarkan kunci cache. Ketika minat meninggalkan invoker, memasuki popover target, atau berpindah ke tautan lain, batalkan pekerjaan yang belum selesai dan biarkan niat terbaru yang diproses.
Keyboard dan sentuhan tidak boleh bergantung pada hover. Memfokuskan tautan harus menampilkan pratinjau yang sama, Escape harus menutupnya, dan urutan Tab harus tetap dapat mencapai halaman detail. Pada perangkat sentuh, produk dapat menampilkan pratinjau pada ketukan pertama dan menavigasi pada ketukan kedua, atau langsung bernavigasi sambil menawarkan kontrol pratinjau terpisah; pilih satu aturan eksplisit untuk menghindari konflik gestur.
Aksesibilitas memerlukan nama target yang dapat dibaca, hubungan yang benar, dan umpan balik status. Ketika pratinjau bersifat tambahan, jangan paksa fokus masuk ke dalam popover; jika berisi kontrol interaktif, tentukan jalur masuk dan kembali fokus yang jelas. Pengguna pembaca layar harus dapat mencapai halaman detail secara langsung, bahkan ketika pemuatan pratinjau gagal.
Deteksi kemampuan dan fallback melindungi jalur inti. Tanpa interestfor atau Popover API, tautan bernavigasi secara normal, sementara pratinjau dapat diturunkan mutunya menjadi klik-untuk-membuka atau dihilangkan. Polyfill hanya boleh menambahkan perilaku tampilan, bukan mengimplementasikan ulang setiap batasan top-layer, fokus, dan keamanan; ukur tingkat dukungan, tingkat pembukaan pratinjau, kegagalan pemuatan, dan konversi navigasi.
Contoh jawaban yang kuat
Saya akan menjadikan tautan sebagai navigasi inti dan interest invoker sebagai lapisan pratinjau opsional. interestfor mereferensikan id yang stabil dan target menggunakan popover; platform menangani minat penunjuk/fokus sementara jeda dan caching mengontrol permintaan. Fokus keyboard berfungsi, Escape menutup pratinjau, dan sentuhan mengikuti aturan ketukan yang eksplisit. Peramban yang tidak didukung mempertahankan tautan normal, dan kegagalan pratinjau hanya memengaruhi lapisan tambahan, bukan akses ke halaman detail.
Kesalahan umum
- Gejala → Hanya mendengarkan mouseenter; alasan gagal → Keyboard, sentuhan, dan teknologi asistif tidak dapat memicunya; solusi → Pusatkan pada minat dan fokus, sambil tetap mempertahankan navigasi.
- Gejala → Memindahkan fokus ke pratinjau segera setelah muncul; alasan gagal → Ini mengganggu seseorang yang sedang membaca tautan; solusi → Pindahkan fokus hanya jika kontrol interaktif dan aturan eksplisit mengharuskannya.
- Gejala → Mengambil data pada setiap hover; alasan gagal → Gerakan cepat memicu badai permintaan; solusi → Gunakan jeda, pembatalan, caching, dan penanganan pemenang-niat-terbaru (latest-intent-wins).
- Gejala → Memblokir tautan saat tidak didukung; alasan gagal → API eksperimental menjadi dependensi untuk konten inti; solusi → Pertahankan tautan biasa sebagai fallback tanpa syarat.
Pertanyaan lanjutan dan jawaban
Mengapa target pratinjau tidak selalu memerlukan popover?
interestfor dapat mengaitkan invoker dengan target biasa, setelah itu kode aplikasi mendengarkan event minat dan mengontrol tampilan. Popover memberi platform semantik top-layer dan penutupan. Pilih berdasarkan apakah perilaku siklus hidup bawaan dan kontrol deklaratif ringan berguna.
Bagaimana Anda mencegah pratinjau menutupi tautan lain?
Beri target posisi yang stabil dan aturan tabrakan, gunakan jeda akhir saat keluar, dan perlakukan tindakan memasuki popover sebagai minat yang berkelanjutan. Selama perpindahan cepat, batalkan permintaan lama, tutup target lama, dan hanya terapkan hasil invoker terbaru.
Apa yang harus terjadi jika pemuatan pratinjau gagal?
Tampilkan status singkat yang dapat dicoba lagi di dalam pratinjau dan sediakan tautan detail langsung; jauhkan kesalahan dari konten utama halaman. Catat alasan kegagalan dan latensi, dan lewati animasi pratinjau atau navigasikan langsung ketika anggaran waktu terlampaui.