कैसे करें: वेब पर क्लिपबोर्ड पर कॉपी करें
जैसा कि मैं इस प्रगतिशील वेब ऐप पर कोड स्निपेट वाले कई कोड गाइड और लेख लिखूंगा, यह आवश्यक है कि निम्नलिखित कार्यों को कवर किया जाए जो उपयोगकर्ता की आवश्यकता होगी:
- कोड की महान पठनीयता
- इनकैप्सुलेटेड कोड को कॉपी करने के लिए सरल और स्पष्ट कार्रवाई
उपयोगी कोड उदाहरणों के लिए यह नीचे की रेखा है। लेकिन क्या मैं इसमें सुधार कर सकता हूं?
जुड़ाव में सुधार
अपने ऐप की कॉपी-टू-क्लिपबोर्ड कार्यक्षमता को समतल करने के लिए, मैंने सोचा कि कॉपी-बटन पर क्लिक को और अधिक मज़ेदार कैसे बनाया जाए, क्योंकि एक रमणीय उपयोगकर्ता अनुभव (यूएक्स) का जुड़ाव बढ़ाने का अच्छा दुष्प्रभाव है।
मैं निम्नलिखित के साथ आया: क्या होगा यदि ऐप चैट-जैसे तरीके से "उत्तर" देता है जब भी उपयोगकर्ता क्लिपबोर्ड पर कॉपी करता है? अनुभव तुरन्त और अधिक व्यक्तिगत होगा। एक अभिमानी और कर्कश भाषा का प्रयोग करते हुए, प्रदान किए गए संदेशों में उनके लिए एक अद्वितीय चरित्र भी होता है।
आइए अंतिम परिणाम पर एक नज़र डालें:
I'm a code example, sort of.
Click on the button in the bottom right corner to copy.
जैसा कि आप देख सकते हैं, पदानुक्रम ऊपर से नीचे तक इस प्रकार है:
- विंडो नियंत्रणों के साथ नेटिव विंडो की नकल करना
- सामग्री
- क्रियाएँ (लिखने के रूप में, केवल कॉपी-टू-क्लिपबोर्ड)
कार्यान्वयन
जब भी उपयोगकर्ता कोड को क्लिपबोर्ड पर कॉपी करता है, तो टेक्स्ट स्निपेट्स की एक पूर्वनिर्धारित सरणी से एक यादृच्छिक चयन थोड़े समय के लिए प्रदर्शित होता है। प्रत्येक कोड उदाहरण के लिए यादृच्छिक चयन उत्पन्न होता है। जटिलता को कम करने के लिए, लेख के दायरे में पाठ के अद्वितीय होने की गारंटी नहीं है। फिर भी b/c चुनने के लिए बहुत सारे तार हैं, टकराव की संभावना कम है।
और वह इसके बारे में है! मुझे आशा है कि आपको कॉपी-टू-क्लिपबोर्ड कार्यों के लिए यह छोटा यूएक्स एन्हांसमेंट पसंद आएगा, हो सकता है कि इसने आपको अपने ऐप में भी यूएक्स परिवर्तनों के लिए प्रेरित किया हो!
- Tom
