স্টোরি কম্পোনেন্ট তৈরি করা

ওয়েবে Instagram স্টোরির মতো অভিজ্ঞতা কীভাবে তৈরি করবেন তার একটি প্রাথমিক ওভারভিউ।

Adam Argyle

সতর্কতা: এই পৃষ্ঠার এক বা একাধিক ডেমো আর কাজ করে না, কারণ Glitch হোস্টিং বন্ধ করে দিয়েছে।

এই পোস্টে আমি ওয়েবের জন্য একটি স্টোরি কম্পোনেন্ট তৈরি করার বিষয়ে চিন্তাভাবনা শেয়ার করতে চাই যা রেসপন্সিভ, কীবোর্ড নেভিগেশন সাপোর্ট করে এবং বিভিন্ন ব্রাউজার জুড়ে কাজ করে।

ডেমো

আপনি যদি এই Stories কম্পোনেন্ট নিজে তৈরি করার জন্য হাতে-কলমে ডেমো দেখতে চান, তাহলে Stories কম্পোনেন্ট কোডল্যাব দেখুন।

আপনি ভিডিও দেখতে চাইলে, এই পোস্টের YouTube ভার্সন এখানে দেওয়া হল:

এক নজরে

Stories UX-এর দুটি জনপ্রিয় উদাহরণ হল Snapchat Stories এবং Instagram Stories (ফ্লিট উল্লেখ না করেই)। সাধারণ UX-এর ক্ষেত্রে, স্টোরি সাধারণত মোবাইল-কেন্দ্রিক, একাধিক সাবস্ক্রিপশন নেভিগেট করার জন্য ট্যাপ-কেন্দ্রিক প্যাটার্ন। যেমন, Instagram-এ ব্যবহারকারীরা কোনও বন্ধুর স্টোরি খোলেন এবং তার মধ্যে থাকা ছবিগুলি দেখেন। তারা সাধারণত একসাথে অনেক বন্ধুকে এই কাজ করতে বলে। ডিভাইসের ডানদিকে ট্যাপ করে, ব্যবহারকারী সেই বন্ধুর পরবর্তী স্টোরিতে স্কিপ করে চলে যান। ডানদিকে সোয়াইপ করে, ব্যবহারকারী অন্য বন্ধুর কাছে চলে যান। স্টোরি কম্পোনেন্ট ক্যারোজেলের মতোই, তবে এটি সিঙ্গেল-ডাইমেনশনাল অ্যারের পরিবর্তে মাল্টি-ডাইমেনশনাল অ্যারে নেভিগেট করার সুবিধা দেয়। মনে হচ্ছে যেন প্রতিটি ক্যারোজেলের ভিতরে একটি করে ক্যারোজেল আছে। 🤯

বন্ধুদের ১ম ক্যারোজেল
স্টোরির ২য় "স্ট্যাক করা" ক্যারোজেল
👍 তালিকার মধ্যে তালিকা, অর্থাৎ: মাল্টি-ডাইমেনশনাল অ্যারে

কাজের জন্য সঠিক টুল বেছে নেওয়া

সব মিলিয়ে, আমি এই কম্পোনেন্টটি তৈরি করা বেশ সহজ বলে মনে করেছি, কিছু গুরুত্বপূর্ণ ওয়েব প্ল্যাটফর্ম ফিচারের জন্য ধন্যবাদ। চলো ওগুলোকে ঢেকে দিই!

CSS গ্রিড

আমাদের লেআউট CSS Grid-এর জন্য কোনও কঠিন কাজ ছিল না কারণ এটি কন্টেন্ট ম্যানেজ করার জন্য কিছু শক্তিশালী উপায়ে সজ্জিত।

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;
}

গ্রিডের মাধ্যমে তৈরি করা কলাম হাইলাইট করতে Chrome DevTools' ডিভাইস মোড ব্যবহার করা

আসুন, grid লেআউটটি ভেঙে দেখা যাক:

• আমরা স্পষ্টভাবে মোবাইলে 100vh এবং 100vw দিয়ে ভিউপোর্ট পূরণ করি এবং ডেস্কটপে সাইজ সীমাবদ্ধ করি
• / আমাদের সারি ও কলাম টেমপ্লেট আলাদা করে
• auto-flow-এর অনুবাদ হল grid-auto-flow: column
• অটোফ্লো টেমপ্লেট হল 100%, যা এই ক্ষেত্রে স্ক্রল উইন্ডোর প্রস্থ যাই হোক না কেন তাই হবে

মনে রাখবেন: মনে রাখবেন যে auto-flow-এর সাপেক্ষে / বিভাজকের অবস্থান গুরুত্বপূর্ণ। auto-flow যদি /-এর আগে আসে, তাহলে এটি grid-auto-flow: row-এর শর্টহ্যান্ড হবে।

মোবাইল ফোনে, সারির সাইজকে ভিউপোর্ট উচ্চতা এবং প্রতিটি কলামকে ভিউপোর্ট প্রস্থ হিসেবে ভাবুন। Snapchat Stories এবং Instagram Stories-এর উদাহরণ অনুযায়ী, প্রতিটি কলামে একজন বন্ধুর স্টোরি থাকবে। আমরা চাই বন্ধুদের স্টোরি ভিউপোর্টের বাইরেও চলতে থাকুক যাতে আমাদের স্ক্রল করার জায়গা থাকে। গ্রিড প্রতিটি বন্ধুর স্টোরির জন্য আপনার HTML লেআউট করতে যতগুলি কলাম প্রয়োজন ততগুলি তৈরি করবে, আমাদের জন্য একটি ডাইনামিক এবং রেসপন্সিভ স্ক্রোলিং কন্টেনার তৈরি করবে। গ্রিড আমাদের পুরো এফেক্টকে কেন্দ্রীভূত করতে সাহায্য করেছে।

স্ট্যাকিং

প্রতিটি বন্ধুর জন্য আমাদের তাদের গল্পগুলি একটি পৃষ্ঠা-প্রস্তুত অবস্থায় প্রয়োজন। অ্যানিমেশন ও অন্যান্য মজার প্যাটার্ন তৈরি করার জন্য আমি একটি স্ট্যাক বেছে নিয়েছি। স্ট্যাক বলতে আমি বোঝাতে চাইছি যে আপনি স্যান্ডউইচকে উপর থেকে দেখছেন, পাশ থেকে নয়।

CSS গ্রিডের মাধ্যমে, আমরা একটি সিঙ্গল-সেল গ্রিড (যেমন, একটি বর্গক্ষেত্র) সংজ্ঞায়িত করতে পারি, যেখানে সারি এবং কলাম একটি উপনাম ([story]) শেয়ার করে এবং তারপরে প্রতিটি চাইল্ডকে সেই উপনামযুক্ত সিঙ্গল-সেল স্পেসে অ্যাসাইন করা হয়:

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

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

এটি আমাদের HTML-কে স্ট্যাকিং অর্ডারের কন্ট্রোল দেয় এবং সব এলিমেন্টকে ফ্লোতে রাখে। লক্ষ্য করুন যে absolute পজিশনিং বা z-index-এর সাথে আমাদের কিছু করতে হয়নি এবং height: 100% বা width: 100%-এর সাথে আমাদের বক্স ঠিক করতে হয়নি। মূল গ্রিড ইতিমধ্যেই স্টোরি ছবির ভিউপোর্টের সাইজ নির্ধারণ করেছে, তাই এই স্টোরি কম্পোনেন্টগুলির কোনওটিকেই এটি পূরণ করতে বলা হয়নি!

CSS স্ক্রল স্ন্যাপ পয়েন্ট

CSS স্ক্রল স্ন্যাপ পয়েন্ট স্পেসিফিকেশন-এর মাধ্যমে স্ক্রল করার সময় ভিউপোর্টে এলিমেন্ট লক করা খুব সহজ হয়ে যায়। এই CSS প্রপার্টিগুলি আসার আগে, আপনাকে জাভাস্ক্রিপ্ট ব্যবহার করতে হত এবং এটি ছিল… জটিল, অন্তত বলতে গেলে। কীভাবে এগুলি ব্যবহার করতে হয় তার একটি দুর্দান্ত ব্রেকডাউনের জন্য 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;
}

বাচ্চারা স্ন্যাপ টার্গেট হওয়ার বিকল্প বেছে নেয়।

আমি কয়েকটি কারণে স্ক্রল স্ন্যাপ পয়েন্ট বেছে নিয়েছি:

• ফ্রি অ্যাক্সেসিবিলিটি। স্ক্রল স্ন্যাপ পয়েন্ট স্পেসিফিকেশন অনুযায়ী, ডিফল্ট হিসেবে বাঁদিকের তীরচিহ্ন এবং ডানদিকের তীরচিহ্ন প্রেস করলে স্ন্যাপ পয়েন্টের মধ্যে নেভিগেট করা যায়।
• ক্রমবর্ধমান স্পেক। স্ক্রল স্ন্যাপ পয়েন্ট স্পেক সব সময় নতুন ফিচার ও উন্নতি পাচ্ছে, যার অর্থ হল আমার Stories কম্পোনেন্ট সম্ভবত এখান থেকে আরও ভালো হবে।
• প্রয়োগ করার সুবিধা। স্ক্রল স্ন্যাপ পয়েন্ট মূলত টাচ-কেন্দ্রিক হরাইজন্টাল-প্যাজিনেশন ব্যবহারের জন্য তৈরি করা হয়েছে।
• ফ্রি প্ল্যাটফর্ম-স্টাইল ইনার্শিয়া। প্রতিটি প্ল্যাটফর্ম তার নিজস্ব স্টাইলে স্ক্রল করবে এবং থামবে, নর্মালাইজড ইনার্শিয়াতে স্ক্রল করা এবং থামার স্টাইল অদ্ভুত হতে পারে।

ক্রস-ব্রাউজার কম্প্যাটিবিলিটি

আমরা Opera, Firefox, Safari ও Chrome এবং Android ও iOS-এ পরীক্ষা করেছি। এখানে ওয়েব ফিচারের একটি সংক্ষিপ্ত বিবরণ দেওয়া হল যেখানে আমরা ক্ষমতা এবং সহায়তার ক্ষেত্রে পার্থক্য খুঁজে পেয়েছি।

সফল: বেছে নেওয়া সব ফিচার কাজ করেছে এবং কোনওটিতেই সমস্যা ছিল না।

তবে, কিছু CSS প্রয়োগ করা হয়নি, তাই কিছু প্ল্যাটফর্ম বর্তমানে UX অপ্টিমাইজেশন মিস করছে। এইসব ফিচার ম্যানেজ করার প্রয়োজন না হওয়ায় আমি খুশি এবং আমি নিশ্চিত যে এগুলি অন্যান্য ব্রাউজার ও প্ল্যাটফর্মেও শীঘ্রই উপলভ্য হবে।

scroll-snap-stop

ক্যারোজেল হল অন্যতম প্রধান UX ব্যবহারের কেস যা CSS স্ক্রল স্ন্যাপ পয়েন্ট স্পেক তৈরি করতে প্রম্পট করে। স্টোরির মতো, ক্যারোজেলকে সবসময় প্রতিটি ছবিতে থামতে হয় না, ব্যবহারকারী এটির সাথে ইন্টার‍্যাক্ট করার পরে। ক্যারোজেল দ্রুত সাইকেল করা ঠিক হতে পারে বা উৎসাহিত করা হতে পারে। অন্যদিকে, স্টোরি এক এক করে নেভিগেট করলে সবচেয়ে ভালো হয়, আর scroll-snap-stop ঠিক সেটাই করে।

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

এই পোস্ট লেখার সময়, scroll-snap-stop শুধুমাত্র Chromium-ভিত্তিক ব্রাউজারে কাজ করে। আপডেটের জন্য ব্রাউজার কম্প্যাটিবিলিটি চেক করুন। তবে, এটি কোনও ব্লকার নয়। এর অর্থ হল, কাজ করে না এমন ব্রাউজারে ব্যবহারকারী ভুল করে কোনও বন্ধুকে এড়িয়ে যেতে পারেন। তাই ব্যবহারকারীদের আরও সতর্ক হতে হবে, অথবা আমাদের জাভাস্ক্রিপ্ট লিখতে হবে যাতে এড়িয়ে যাওয়া বন্ধুকে'দেখা হয়েছে' হিসেবে চিহ্নিত না করা হয়।

আপনি আগ্রহী হলে স্পেসিফিকেশন থেকে আরও পড়ুন।

overscroll-behavior

আপনি কি কখনও কোনও মোডাল স্ক্রল করার সময় হঠাৎ করে মোডালের পিছনে থাকা কন্টেন্ট স্ক্রল করতে শুরু করেছেন? overscroll-behavior ডেভেলপারকে সেই স্ক্রল ট্র্যাপ করতে দেয় এবং কখনই তা ছাড়তে দেয় না। সব ধরনের অনুষ্ঠানের জন্য এটি ভালো। My Stories কম্পোনেন্ট এটি ব্যবহার করে যাতে অতিরিক্ত সোয়াইপ এবং স্ক্রল করার জেসচার কম্পোনেন্ট থেকে বেরিয়ে না যায়।

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

Safari ও Opera হল এমন ২টি ব্রাউজার যেখানে এটি কাজ করে না এবং এতে কোনও সমস্যা নেই। সেইসব ব্যবহারকারী ওভারস্ক্রল করার অভিজ্ঞতা পাবেন, যেমনটা তারা অভ্যস্ত এবং এই উন্নতি হয়ত কখনও লক্ষ্য করবেন না। আমি ব্যক্তিগতভাবে এর একজন বড় অনুরাগী এবং আমি যে ওভারস্ক্রল ফিচার প্রয়োগ করি তার প্রায় সবকটিতেই এটি অন্তর্ভুক্ত করতে পছন্দ করি। এটি একটি নিরাপদ সংযোজন যা শুধুমাত্র উন্নত UX-এর দিকে পরিচালিত করতে পারে।

scrollIntoView({behavior: 'smooth'})

কোনও ব্যবহারকারী ট্যাপ বা ক্লিক করে কোনও বন্ধুর স্টোরি সেটের শেষ পর্যন্ত পৌঁছে গেলে, স্ক্রল স্ন্যাপ পয়েন্ট সেটে পরবর্তী বন্ধুর স্টোরি দেখানোর সময় হয়ে যায়। JavaScript-এর সাহায্যে আমরা পরবর্তী বন্ধুকে রেফারেন্স করতে এবং এটি স্ক্রল করে ভিউতে নিয়ে আসার জন্য অনুরোধ করতে পেরেছি। The support for the basics of this are great; every browser scrolled it into view. কিন্তু, সব ব্রাউজার তা করেনি 'smooth'। এর অর্থ হল এটি স্ন্যাপ করার পরিবর্তে স্ক্রল করে ভিউতে আনা হয়েছে।

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

Safari-ই একমাত্র ব্রাউজার যেখানে behavior: 'smooth' কাজ করে না। আপডেটের জন্য ব্রাউজার কম্প্যাটিবিলিটি চেক করুন।

হ্যান্ডস-অন

আমি কীভাবে করেছি তা তো জানলে, তুমি কীভাবে করবে?! আসুন, আমাদের দৃষ্টিভঙ্গিকে আরও বৈচিত্র্যময় করে তুলি এবং ওয়েবে তৈরি করার সব উপায় সম্পর্কে জানি। একটি ডেমো তৈরি করুন, আপনার ভার্সনটি আমাকে টুইট করুন এবং আমি এটি নিচের কমিউনিটি রিমিক্স বিভাগে যোগ করব।

কমিউনিটি রিমিক্স

• Svelte-এর সাথে @geoffrich_: কোড
• Vue-এর সাথে @GauteMeekOlsen: ডেমো + কোড
• Lit সহ @AnaestheticsApp: কোড