स्टोरीज़ वाला कॉम्पोनेंट बनाना

वेब पर Instagram Stories जैसी सुविधा बनाने के तरीके के बारे में खास जानकारी.

Adam Argyle

इस पोस्ट में, मुझे वेब के लिए एक ऐसा स्टोरी कॉम्पोनेंट बनाने के बारे में अपनी राय शेयर करनी है जो रिस्पॉन्सिव हो, कीबोर्ड नेविगेशन के साथ काम करता हो, और सभी ब्राउज़र पर काम करता हो.

अगर आपको खुद से स्टोरीज़ कॉम्पोनेंट बनाने का तरीका जानना है, तो स्टोरीज़ कॉम्पोनेंट कोडलैब देखें.

अगर आपको वीडियो देखना ज़्यादा पसंद है, तो इस पोस्ट का YouTube वर्शन यहां दिया गया है:

खास जानकारी

स्टोरी के UX के दो लोकप्रिय उदाहरण हैं: Snapchat Stories और Instagram Stories. इसके अलावा, फ़्लीट भी इसका एक उदाहरण है. यूज़र एक्सपीरियंस (यूएक्स) के हिसाब से, स्टोरीज़ आम तौर पर सिर्फ़ मोबाइल पर उपलब्ध होती हैं. साथ ही, ये टैप करने पर काम करती हैं. इनकी मदद से, कई सदस्यताओं को नेविगेट किया जा सकता है. उदाहरण के लिए, Instagram पर उपयोगकर्ता किसी दोस्त की स्टोरी खोलते हैं और उसमें मौजूद फ़ोटो देखते हैं. आम तौर पर, वे एक साथ कई दोस्तों को ऐसा करते हैं. डिवाइस की दाईं ओर टैप करने पर, उपयोगकर्ता को उस दोस्त की अगली कहानी पर ले जाया जाता है. दाईं ओर स्वाइप करके, उपयोगकर्ता किसी दूसरे दोस्त की प्रोफ़ाइल पर जा सकता है. स्टोरी कॉम्पोनेंट, कैरसेल से मिलता-जुलता है. हालांकि, यह एक डाइमेंशन वाले ऐरे के बजाय, कई डाइमेंशन वाले ऐरे पर नेविगेट करने की अनुमति देता है. ऐसा लगता है कि हर कैरसेल के अंदर एक कैरसेल है. 🤯

काम के हिसाब से सही टूल चुनना

कुल मिलाकर, मुझे इस कॉम्पोनेंट को बनाने में काफ़ी आसानी हुई. इसके लिए, वेब प्लैटफ़ॉर्म की कुछ अहम सुविधाओं का धन्यवाद. आइए, इनके बारे में जानें!

सीएसएस ग्रिड

CSS ग्रिड के लिए हमारा लेआउट कोई मुश्किल काम नहीं था, क्योंकि इसमें कॉन्टेंट को मैनेज करने के कुछ बेहतरीन तरीके मौजूद हैं.

Friends लेआउट

हमारा मुख्य .stories कॉम्पोनेंट रैपर, मोबाइल वर्शन के हिसाब से तैयार किया गया हॉरिज़ॉन्टल स्क्रोलव्यू है:

.stories {
  inline-size: 100vw;
  block-size: 100vh;

  display: grid;
  grid: 1fr / auto-flow 100%;
  gap: 1ch;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  touch-action: pan-x;
}

/* desktop constraint */
@media (hover: hover) and (min-width: 480px) {
  max-inline-size: 480px;
  max-block-size: 848px;
}

आइए, grid लेआउट के बारे में जानते हैं:

• हम मोबाइल पर व्यूपोर्ट को 100vh और 100vw से भरते हैं. साथ ही, डेस्कटॉप पर इसके साइज़ को सीमित करते हैं
• / हमारे कॉलम और लाइन के टेंप्लेट को अलग करता है
• auto-flow का मतलब grid-auto-flow: column है
• ऑटोफ़्लो टेंप्लेट 100% है. इस मामले में, यह स्क्रोल विंडो की चौड़ाई के बराबर है

मोबाइल फ़ोन पर, इसे ऐसे समझें कि लाइन का साइज़, व्यूपोर्ट की ऊंचाई के बराबर होता है. साथ ही, हर कॉलम, व्यूपोर्ट की चौड़ाई के बराबर होता है. Snapchat Stories और Instagram Stories के उदाहरण को जारी रखते हुए, हर कॉलम किसी दोस्त की स्टोरी होगा. हम चाहते हैं कि दोस्तों की कहानियां व्यूपोर्ट के बाहर भी दिखती रहें, ताकि हम स्क्रोल कर सकें. ग्रिड, हर दोस्त की स्टोरी के लिए एचटीएमएल को लेआउट करने के लिए जितने कॉलम की ज़रूरत होगी उतने कॉलम बनाएगा. इससे हमारे लिए एक डाइनैमिक और रिस्पॉन्सिव स्क्रोलिंग कंटेनर बनेगा. ग्रिड की मदद से, हमने पूरे इफ़ेक्ट को एक जगह पर रखा.

स्टैकिंग

हमें हर दोस्त के लिए, ऐसी स्टोरी चाहिए जो पेज पर दिखने के लिए तैयार हो. ऐनिमेशन और अन्य मज़ेदार पैटर्न के लिए, मैंने एक स्टैक चुना है. स्टैक का मतलब है कि आपको सैंडविच को ऊपर से देखना है, न कि साइड से.

सीएसएस ग्रिड की मदद से, हम एक सेल वाली ग्रिड (यानी कि एक स्क्वेयर) तय कर सकते हैं.इसमें लाइनों और कॉलम का एक ही एलियास ([story]) होता है. इसके बाद, हर चाइल्ड को उस एलियास वाली एक सेल वाली जगह पर असाइन किया जाता है:

.user {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.story {
  grid-area: story;
  background-size: cover;
  …
}

इससे, स्टैकिंग ऑर्डर को कंट्रोल करने का अधिकार हमारे एचटीएमएल को मिल जाता है. साथ ही, सभी एलिमेंट को फ़्लो में रखा जाता है. ध्यान दें कि हमें absolute की पोज़िशन या z-index में कोई बदलाव नहीं करना पड़ा. साथ ही, हमें height: 100% या width: 100% का इस्तेमाल करके सही जवाब को बॉक्स में नहीं रखना पड़ा. पैरंट ग्रिड ने पहले ही स्टोरी पिक्चर के व्यूपोर्ट का साइज़ तय कर दिया था. इसलिए, इनमें से किसी भी स्टोरी कॉम्पोनेंट को इसे भरने के लिए नहीं कहा गया!

सीएसएस स्क्रोल स्नैप पॉइंट

सीएसएस स्क्रोल स्नैप पॉइंट स्पेसिफ़िकेशन की मदद से, स्क्रोल करने पर एलिमेंट को व्यूपोर्ट में लॉक करना आसान हो जाता है. इन सीएसएस प्रॉपर्टी के मौजूद न होने पर, आपको JavaScript का इस्तेमाल करना पड़ता था. यह काफ़ी मुश्किल काम था. इन्हें इस्तेमाल करने के तरीके के बारे में ज़्यादा जानने के लिए, Sarah Drasner का लेख Introducing CSS Scroll Snap Points पढ़ें.

.stories {
  display: grid;
  grid: 1fr / auto-flow 100%;
  gap: 1ch;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  touch-action: pan-x;
}

.user {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

मैंने स्क्रोल स्नैप पॉइंट को इन वजहों से चुना है:

• सुलभता से जुड़ी सुविधाएं बिना किसी शुल्क के उपलब्ध हैं. स्क्रोल स्नैप पॉइंट की खास बातों के मुताबिक, लेफ़्ट ऐरो और राइट ऐरो बटन दबाने पर, स्नैप पॉइंट के बीच डिफ़ॉल्ट रूप से स्क्रोल होना चाहिए.
• बढ़ती हुई खास जानकारी. Scroll Snap Points की खास जानकारी में, हर समय नई सुविधाएं और सुधार किए जा रहे हैं. इसका मतलब है कि मेरा Stories कॉम्पोनेंट, अब से सिर्फ़ बेहतर होगा.
• लागू करने में आसानी. स्क्रोल स्नैप पॉइंट, टच-सेंट्रिक हॉरिज़ॉन्टल-पेजिनेशन के इस्तेमाल के उदाहरण के लिए बनाए गए हैं.
• मुफ़्त में प्लैटफ़ॉर्म-स्टाइल इनर्शिया. हर प्लैटफ़ॉर्म, अपनी स्टाइल में स्क्रोल करेगा और रुकेगा. ऐसा सामान्य इनर्शिया के उलट होगा, जिसमें स्क्रोल करने और रुकने की अजीब स्टाइल हो सकती है.

अलग-अलग ब्राउज़र के साथ काम करने की सुविधा

हमने Opera, Firefox, Safari, और Chrome के साथ-साथ Android और iOS पर भी इसकी जांच की है. यहां उन वेब सुविधाओं के बारे में खास जानकारी दी गई है जिनमें हमें क्षमताओं और सहायता में अंतर मिला है.

हालांकि, कुछ सीएसएस लागू नहीं हुई हैं. इसलिए, कुछ प्लैटफ़ॉर्म पर फ़िलहाल यूज़र एक्सपीरियंस को बेहतर बनाने की सुविधा उपलब्ध नहीं है. मुझे इन सुविधाओं को मैनेज करने की ज़रूरत नहीं पड़ी. साथ ही, मुझे पूरा भरोसा है कि ये सुविधाएँ आने वाले समय में अन्य ब्राउज़र और प्लैटफ़ॉर्म पर भी उपलब्ध होंगी.

scroll-snap-stop

कैरसेल, यूज़र एक्सपीरियंस (यूएक्स) के सबसे ज़्यादा इस्तेमाल किए जाने वाले मामलों में से एक है. इसी वजह से, सीएसएस स्क्रोल स्नैप पॉइंट स्पेसिफ़िकेशन बनाया गया था. स्टोरी के उलट, कैरसेल में यह ज़रूरी नहीं होता कि उपयोगकर्ता के इंटरैक्ट करने के बाद, हर इमेज पर रुकना पड़े. कैरोसेल को तेज़ी से स्वाइप करने से कोई समस्या नहीं होती. दूसरी ओर, कहानियों को एक-एक करके देखना सबसे अच्छा होता है. scroll-snap-stop ठीक यही सुविधा देता है.

.user {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

इस पोस्ट को लिखते समय, scroll-snap-stop डायरेक्टिव सिर्फ़ Chromium कोड वाले ब्राउज़र में काम करता है. अपडेट के लिए, अलग-अलग ब्राउज़र पर साइट की जांच करना लेख पढ़ें. हालांकि, यह कोई ब्लॉकर नहीं है. इसका मतलब सिर्फ़ यह है कि जिन ब्राउज़र पर यह सुविधा काम नहीं करती उन पर उपयोगकर्ता गलती से किसी दोस्त को स्किप कर सकते हैं. इसलिए, उपयोगकर्ताओं को ज़्यादा सावधानी बरतनी होगी या हमें यह पक्का करने के लिए JavaScript लिखनी होगी कि छोड़े गए दोस्त को'देखा गया' के तौर पर मार्क न किया जाए.

अगर आपको इस बारे में ज़्यादा जानना है, तो स्पेसिफ़िकेशन पढ़ें.

overscroll-behavior

क्या आपने कभी किसी मोडल को स्क्रोल करते समय, अचानक मोडल के पीछे मौजूद कॉन्टेंट को स्क्रोल करना शुरू कर दिया है? overscroll-behavior डेवलपर को उस स्क्रोल को ट्रैप करने की अनुमति देता है और उसे कभी भी जाने नहीं देता. यह हर तरह के मौकों के लिए अच्छा है. My Stories कॉम्पोनेंट इसका इस्तेमाल करता है, ताकि स्वाइप और स्क्रोल करने के अतिरिक्त जेस्चर से कॉम्पोनेंट बंद न हो.

.stories {
  overflow-x: auto;
  overscroll-behavior: contain;
}

Safari और Opera, ऐसे दो ब्राउज़र थे जिनमें यह सुविधा काम नहीं करती थी. हालांकि, इससे कोई फ़र्क़ नहीं पड़ता. उन उपयोगकर्ताओं को स्क्रोल करने का वही अनुभव मिलेगा जो उन्हें पहले मिलता था. उन्हें इस सुविधा के बारे में पता भी नहीं चलेगा. मैं खुद इसका बहुत बड़ा प्रशंसक हूं और इसे लागू की जाने वाली लगभग हर ओवरस्क्रोल सुविधा में शामिल करना पसंद करता हूं. यह एक हानिरहित सुविधा है, जिससे सिर्फ़ यूज़र एक्सपीरियंस बेहतर होता है.

scrollIntoView({behavior: 'smooth'})

जब कोई व्यक्ति किसी दोस्त की सभी स्टोरी देख लेता है, तो उसे स्क्रोल स्नैप पॉइंट सेट में मौजूद अगले दोस्त की स्टोरी पर ले जाया जाता है. JavaScript की मदद से, हम अगले दोस्त को रेफ़रंस कर सके और उसे स्क्रोल करके दिखाने का अनुरोध कर सके. इसकी बुनियादी सुविधाओं के लिए, सहायता बहुत अच्छी है. हर ब्राउज़र ने इसे स्क्रोल करके दिखाया. हालांकि, हर ब्राउज़र ने ऐसा नहीं किया 'smooth'. इसका मतलब सिर्फ़ यह है कि इसे स्नैप करने के बजाय, स्क्रोल करके व्यू में लाया गया है.

element.scrollIntoView({
  behavior: 'smooth'
})

Safari ऐसा ब्राउज़र है जिसमें behavior: 'smooth' काम नहीं करता. अपडेट के लिए, अलग-अलग ब्राउज़र पर साइट की जांच करना लेख पढ़ें.

खुद करके सीखना

अब आपको पता चल गया है कि मैंने यह कैसे किया. अब आप इसे कैसे करेंगे?! आइए, हम अपने तरीकों में विविधता लाएं और वेब पर कॉन्टेंट बनाने के सभी तरीके जानें. Glitch बनाएँ, अपने वर्शन को ट्वीट करें. इसके बाद, हम इसे यहाँ नीचे कम्यूनिटी रीमिक्स सेक्शन में जोड़ देंगे.

कम्यूनिटी रीमिक्स

• @geoffrich_ with Svelte: demo & code
• @GauteMeekOlsen with Vue: demo + code
• @AnaestheticsApp with Lit: demo & code