प्रॉम्प्ट और संदर्भ
प्रोडक्ट को तब एक लाइटवेट प्रिव्यू चाहिए जब कोई यूज़र किसी यूज़रनेम, डॉक्यूमेंट लिंक या टर्म में रुचि (interest) दिखाता है, लेकिन जब होवर हट जाए, यूज़र कीबोर्ड द्वारा नेविगेट करे, या डिवाइस केवल टच वाला हो, तब भी सामग्री उपयोग योग्य रहनी चाहिए। HTML interest invokers और Popover API का उपयोग करें, और डिले, फ़ोकस, डिसमिसल, असमर्थित ब्राउज़र और विफल डेटा लोड के बारे में बताएं।
MDN interestfor को किसी बटन या लिंक को टारगेट एलिमेंट से जोड़ने के एक डिक्लेरेटिव तरीके के रूप में वर्णित करता है; जब टारगेट एक popover होता है, तो ब्राउज़र interest मौजूद होने पर इसे स्वचालित रूप से दिखा सकता है। Open UI एक्सप्लेनर होवरकार्ड के उद्देश्य का दस्तावेज़ीकरण करता है। यह लेख सार्वजनिक सामग्री को संश्लेषित करता है और किसी कंपनी-विशिष्ट इंटरव्यू प्रश्न होने का दावा नहीं करता है।
इंटरव्यूअर क्या जांच रहा है
इंटरव्यूअर यह देखना चाहता है कि क्या आप "hover" को एक ऐसे interest स्टेट के रूप में मानते हैं जो पॉइंटर, फ़ोकस, टच और असिस्टिव तकनीक को कवर करता है। एक मजबूत उत्तर में interest/loseinterest, interest-delay-*, popover टॉप लेयर, फ़ोकस मैनेजमेंट, एक नो-जावास्क्रिप्ट कोर पाथ और प्रोग्रेसिव एन्हांसमेंट का उल्लेख होता है; एक कमजोर उत्तर केवल mouseenter/mouseleave को बाइंड करता है।
पहले स्पष्ट करने योग्य प्रश्न
- क्या प्रिव्यू पूरक (supplemental) जानकारी है या कार्य पूरा करने के लिए आवश्यक है?
- क्या टारगेट सामग्री सेम-ओरिजिन और कैशे योग्य है, और क्या इसे लेज़ी-लोड किया जा सकता है?
- टच डिवाइसों को इसे कैसे खोलना और बंद करना चाहिए, और क्या एक टैप से डिटेल पेज पर नेविगेट होना चाहिए?
- जब ब्राउज़र में interest invokers का अभाव हो, तब कोर लिंक कैसे उपयोग योग्य बना रहता है?
30-सेकंड का उत्तर
"मैं सामान्य लिंक को डिटेल पेज पर पॉइंट करते हुए रखूंगा और इसे popover प्रिव्यू से जोड़ने के लिए interestfor का उपयोग करूंगा। Interest डिले अनपेक्षित सक्रियण को कम करते हैं; जहां समर्थित हो, डिक्लेरेटिव व्यवहार पॉइंटर और फ़ोकस को कवर करता है। असमर्थित ब्राउज़र लिंक नहीं खोते हैं, और एक न्यूनतम जावास्क्रिप्ट पॉलीफिल प्रिव्यू जोड़ सकता है। प्रिव्यू डेटा एसिंक्रोनस रूप से लोड हो सकता है लेकिन इसे नेविगेशन को ब्लॉक नहीं करना चाहिए। डिसमिसल फ़ोकस और Escape सिमेंटिक्स का सम्मान करता है, और रिड्यूस्ड मोशन एनिमेशन को हटा देता है।"
चरण-दर-चरण समाधान
संरचनात्मक रूप से, लिंक या बटन interest invoker है, जबकि टारगेट के पास एक स्थिर id और popover होता है। इन्वोकर का interestfor मान उस id को संदर्भित करता है। यदि टारगेट एक popover है, तो प्लेटफ़ॉर्म इसे टॉप लेयर में रखता है और popover लाइफ़साइकिल व्यवहार लागू करता है; टारगेट एक सामान्य एलिमेंट भी हो सकता है जिसे एप्लिकेशन interest इवेंट्स को सुनने के बाद दिखाता है।
डिले लिंक्स पर पॉइंटर के तेजी से घूमने (sweep) के कारण कई अनुरोध शुरू होने से रोकते हैं। interest-delay-start और interest-delay-end, या समकक्ष एप्लिकेशन थ्रॉटलिंग का उपयोग करें, पहले एक स्केलेटन दिखाएं, और कैशे की (cache key) द्वारा फ़ेच करें। जब interest इन्वोकर से हटता है, टारगेट popover में प्रवेश करता है, या किसी अन्य लिंक पर जाता है, तो अधूरे काम को रद्द करें और नवीनतम इंटेंट को प्राथमिकता दें।
कीबोर्ड और टच होवर पर निर्भर नहीं हो सकते। लिंक पर फ़ोकस करने से वही प्रिव्यू दिखना चाहिए, Escape से यह बंद होना चाहिए, और Tab क्रम से अभी भी डिटेल पेज तक पहुंचा जा सकना चाहिए। टच पर, प्रोडक्ट पहले टैप पर प्रिव्यू दिखा सकता है और दूसरे पर नेविगेट कर सकता है, या एक अलग प्रिव्यू कंट्रोल प्रदान करते हुए सीधे नेविगेट कर सकता है; जेस्चर के टकराव से बचने के लिए एक स्पष्ट नियम चुनें।
एक्सेसिबिलिटी के लिए एक पठनीय टारगेट नाम, सही संबंध और स्टेट फ़ीडबैक की आवश्यकता होती है। जब प्रिव्यू पूरक हो, तो फ़ोकस को जबरन popover के अंदर न ले जाएं; यदि इसमें इंटरैक्टिव कंट्रोल्स हैं, तो एक स्पष्ट फ़ोकस-एंट्री और रिटर्न पाथ परिभाषित करें। स्क्रीन-रीडर यूज़र्स को सीधे डिटेल पेज तक पहुंचने में सक्षम होना चाहिए, भले ही प्रिव्यू लोडिंग विफल हो जाए।
क्षमता का पता लगाना (Capability detection) और फ़ॉलबैक कोर पाथ की सुरक्षा करते हैं। interestfor या Popover API के बिना, लिंक सामान्य रूप से नेविगेट करता है, जबकि प्रिव्यू क्लिक-टू-ओपन में बदल सकता है या इसे छोड़ा जा सकता है। एक पॉलीफिल को प्रत्येक टॉप-लेयर, फ़ोकस और सुरक्षा सीमा को फिर से लागू करने के बजाय केवल डिस्प्ले व्यवहार जोड़ना चाहिए; सपोर्ट रेट, प्रिव्यू-ओपन रेट, लोड विफलता और नेविगेशन रूपांतरण को मापें।
एक मजबूत उत्तर का उदाहरण
मैं लिंक को मुख्य नेविगेशन और interest invoker को एक वैकल्पिक प्रिव्यू लेयर बनाऊंगा। interestfor एक स्थिर id को संदर्भित करता है और टारगेट popover का उपयोग करता है; प्लेटफ़ॉर्म पॉइंटर/फ़ोकस interest को संभालता है जबकि डिले और कैशिंग अनुरोधों को नियंत्रित करते हैं। कीबोर्ड फ़ोकस काम करता है, Escape डिसमिस करता है, और टच एक स्पष्ट टैप नियम का पालन करता है। असमर्थित ब्राउज़र सामान्य लिंक को बनाए रखते हैं, और प्रिव्यू की विफलता केवल पूरक लेयर को प्रभावित करती है, डिटेल पेज तक पहुंच को नहीं।
सामान्य गलतियां
- लक्षण → केवल mouseenter को सुनना; यह क्यों विफल होता है → कीबोर्ड, टच और असिस्टिव तकनीक इसे ट्रिगर नहीं कर सकते; समाधान → नेविगेशन को बनाए रखते हुए interest और फ़ोकस को केंद्र में रखें।
- लक्षण → प्रिव्यू दिखते ही फ़ोकस को उसके अंदर ले जाना; यह क्यों विफल होता है → यह लिंक पढ़ रहे व्यक्ति को बाधित करता है; समाधान → फ़ोकस को केवल तभी ले जाएं जब इंटरैक्टिव कंट्रोल्स और एक स्पष्ट नियम की आवश्यकता हो।
- लक्षण → हर होवर पर फ़ेच करना; यह क्यों विफल होता है → तेज़ स्वीप अनुरोधों की बाढ़ ला देते हैं; समाधान → डिले, कैंसिलेशन, कैशिंग और नवीनतम-इंटेंट-की-जीत वाली हैंडलिंग का उपयोग करें।
- लक्षण → असमर्थित होने पर लिंक को ब्लॉक करना; यह क्यों विफल होता है → एक प्रयोगात्मक API कोर सामग्री के लिए एक निर्भरता बन जाती है; समाधान → सामान्य लिंक को बिना शर्त फ़ॉलबैक के रूप में रखें।
फॉलो-अप प्रश्न और उत्तर
प्रिव्यू टारगेट को हमेशा popover की आवश्यकता क्यों नहीं होती है?
interestfor किसी इन्वोकर को एक सामान्य टारगेट से जोड़ सकता है, जिसके बाद एप्लिकेशन कोड interest इवेंट्स को सुनता है और डिस्प्ले को नियंत्रित करता है। एक popover प्लेटफ़ॉर्म को टॉप-लेयर और डिसमिसल सिमेंटिक्स देता है। इस आधार पर चुनें कि क्या नेटिव लाइफ़साइकिल व्यवहार और लाइटवेट डिक्लेरेटिव कंट्रोल उपयोगी हैं।
आप प्रिव्यू को किसी अन्य लिंक को ढकने से कैसे रोकते हैं?
टारगेट को स्थिर पोज़िशनिंग और कोलिजन नियम दें, बाहर निकलते समय एंड डिले का उपयोग करें, और popover में प्रवेश करने को निरंतर interest मानें। तेज़ स्विच के दौरान, पुराने अनुरोध को रद्द करें, पुराने टारगेट को बंद करें, और केवल नवीनतम इन्वोकर के परिणाम को ही कमिट करें।
जब प्रिव्यू लोड होना विफल हो जाए तो क्या होना चाहिए?
प्रिव्यू के अंदर एक संक्षिप्त पुनः प्रयास करने योग्य (retryable) स्थिति दिखाएं और एक सीधा डिटेल लिंक प्रदान करें; त्रुटि को पेज की प्राथमिक सामग्री से बाहर रखें। विफलता के कारण और विलंबता (latency) को रिकॉर्ड करें, और बजट समाप्त होने पर प्रिव्यू एनिमेशन को छोड़ दें या सीधे नेविगेट करें।