পপওভার কেস স্টাডি

Swetha Gopalakrishnan

Saurabh Rajpal

পপোভারগুলি ওয়েবে সর্বত্র রয়েছে৷ আপনি সেগুলিকে মেনু, টগলটিপস এবং ডায়ালগে দেখতে পারেন, যা অ্যাকাউন্ট সেটিংস, ডিসক্লোজার উইজেট এবং পণ্য কার্ডের পূর্বরূপের মতো বৈশিষ্ট্যগুলির জন্য ব্যবহৃত হয়। এই উপাদানগুলি কতটা প্রচলিত থাকা সত্ত্বেও, ব্রাউজারগুলিতে সেগুলি তৈরি করা এখনও আশ্চর্যজনকভাবে কষ্টকর। এটি সমাধান করার জন্য, পপওভার তৈরির জন্য ঘোষণামূলক এইচটিএমএল এপিআইগুলির একটি নতুন সেট ব্রাউজারে আসছে, এর মধ্যে প্রথমটি হল পপওভার API ।

পপওভার নতুনভাবে উপলব্ধ বেসলাইনের অংশ।

একটি পপওভার সাধারণত একটি ডায়ালগের সাথে বিভ্রান্ত হয়। তবে তাদের আচরণে কিছু মূল পার্থক্য রয়েছে। dialog.showModal (একটি মোডাল ডায়ালগ) দিয়ে খোলা একটি dialog উপাদান হল এমন একটি অভিজ্ঞতা যার জন্য মোডালটি বন্ধ করার জন্য ব্যবহারকারীর স্পষ্ট মিথস্ক্রিয়া প্রয়োজন। একটি popover হালকা-খারিজ সমর্থন করে। একটি মডেল dialog না. একটি মডেল ডায়ালগ পৃষ্ঠার বাকি অংশকে জড় করে তোলে। একটি popover না. পার্থক্য সম্পর্কে আরও পড়ুন ।

এই নিবন্ধটি একটি সিরিজের অংশ যা আলোচনা করে যে কীভাবে ইকমার্স কোম্পানিগুলি নতুন CSS এবং UI বৈশিষ্ট্যগুলি ব্যবহার করে তাদের ওয়েবসাইট উন্নত করেছে৷ এই নিবন্ধে, আবিষ্কার করুন কিভাবে Tokopedia বাস্তবায়ন করেছে এবং Popover API থেকে উপকৃত হয়েছে।

টোকোপিডিয়া

পপওভার অ্যাট্রিবিউট ব্যবহার করে রিঅ্যাক্টে কোডের ৭০% লাইন পর্যন্ত কমে গেছে। জাভাস্ক্রিপ্টে ইভেন্ট পরিচালনার প্রয়োজন না করে এবং মোডাল DOM-কে document.body এর শেষে সরানোর জন্য React.createPortal ব্যবহার করার পরিবর্তে মোডালটি HTML দ্বারা নিয়ন্ত্রিত হতে পারে। আমরা পপওভারের উদ্বোধন ও সমাপ্তি অ্যানিমেট করতে @starting-style ব্যবহার করতেও সক্ষম।— অ্যান্ডি উইহালিম , সিনিয়র সফটওয়্যার ইঞ্জিনিয়ার, টোকোপিডিয়া ।

টোকোপিডিয়ার প্রোডাক্ট ডিটেইল পেজ (পিডিপি) প্রতিটি পণ্যের জন্য একাধিক পণ্যের ছবি ধারণ করে। যখন পণ্যের থাম্বনেইলে ক্লিক করা হয়, তখন বর্ধিত চিত্রটি দেখানোর জন্য একটি মডেল খোলা হয়। এটি ইকমার্স ওয়েবসাইটগুলিতে ব্যবহৃত একটি সাধারণ প্যাটার্ন।

কোড

টোকোপিডিয়া তাদের ফ্রন্টএন্ড বিকাশের জন্য প্রতিক্রিয়া ব্যবহার করে। এই মডেলের জন্য পপওভার API প্রয়োগ করার আগে, তারা একটি DOM মডেল এবং একটি বোতাম ব্যবহার করেছিল। বোতামটি মোডাল খুলতে প্রতিক্রিয়ার অবস্থা পরিবর্তন করেছে। পপওভার API এর সাথে, তারা উপাদানটিতে একটি popovertarget বৈশিষ্ট্য নির্দিষ্ট করে যা পপওভারটিকে একটি মান দিয়ে খোলে যা পপওভার উপাদানের আইডির মতো।

এই মৌলিক বাস্তবায়নের সাথে, পপওভার কাজ করে কিন্তু কোনো অ্যানিমেশন ছাড়াই প্রদর্শিত এবং অদৃশ্য হয়ে যায়। পপওভারের জন্য একটি মসৃণ এন্ট্রি এবং এক্সিট অ্যানিমেশন তৈরি করতে, :popover-open এবং @starting-style ব্যবহার করুন এবং বিচ্ছিন্ন বৈশিষ্ট্যগুলির অ্যানিমেশনের অনুমতি দিন। নিম্নলিখিত কোড উদাহরণে, transform: 'scale()' প্রপার্টি।

এই কোড উদাহরণটি দেখায় কিভাবে পপওভার API-এর জন্য এন্ট্রি এবং এক্সিট অ্যানিমেশন প্রয়োগ করতে হয়।

<Thumbnail popovertarget="medialightbox" />
<MediaLightbox popover id="medialightbox" />

export const cssModalWrapper = css({
  background: NN0,
  border: 'none',
  borderRadius: '.625rem',
  width: 1024,
  padding: 24,

  '&::backdrop': {
    opacity: 0,
    transitionProperty: 'opacity, display',
    transition: '.25s ease-out',
    transitionBehavior: 'allow-discrete',
  },

  transitionProperty: 'transform, opacity, display',
  transition: '.25s ease-out',
  transitionBehavior: 'allow-discrete',

  transform: 'scale(0.8)',
  opacity: 0,
  '@starting-style': {
    transform: 'scale(1)',
    opacity: 1,
  },

  '&:popover-open': {
    transform: 'scale(1)',
    opacity: 1,
    '@starting-style': {
      transform: 'scale(0.8)',
      opacity: 0,
    },
  },
});

পপওভার API সমর্থন করে না এমন ব্রাউজারগুলিকে পূরণ করতে, Tokopedia oddbird দ্বারা পপওভার-পলিফিল প্রয়োগ করেছে, যা gzip কম্প্রেশন সহ মাত্র 3.2 KB। তারা পলিফিলের সাথে সন্তুষ্ট ছিল কারণ এটি ভাল কাজ করেছে এবং কর্মক্ষমতা রিগ্রেশনের কারণ হয়নি। সামগ্রিকভাবে, তারা পপওভার API এর সাথে প্রতিক্রিয়াতে কোডের 70% লাইন পর্যন্ত কমাতে সক্ষম হয়েছিল।

Popover API ব্যবহার করার সময় যে বিষয়গুলো বিবেচনা করতে হবে

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

সিএসএস অ্যাঙ্কর পজিশনিং ( শীঘ্রই Chrome-এ আসছে ) অন্যান্য উপাদানের সাথে তুলনা করার জন্য পপোভারগুলিকে একত্রিত করার কথা বিবেচনা করুন৷ এটি উদাহরণস্বরূপ মেনু এবং টুলটিপের জন্য সহায়ক।

সম্পদ

• পপওভার API প্রবর্তন করা হচ্ছে
• একটি পপওভার এবং একটি ডায়ালগের মধ্যে পার্থক্য৷
• আপনি একটি বাগ রিপোর্ট বা একটি নতুন বৈশিষ্ট্য অনুরোধ করতে চান? আমরা আপনার কাছ থেকে শুনতে চাই .

এই সিরিজের অন্যান্য নিবন্ধগুলি অন্বেষণ করুন যেগুলি ইকমার্স কোম্পানিগুলি নতুন CSS এবং UI বৈশিষ্ট্যগুলি যেমন স্ক্রোল-চালিত অ্যানিমেশন, পপওভার, কন্টেইনার কোয়েরি এবং has() নির্বাচক ব্যবহার করে কীভাবে উপকৃত হয়েছে সে সম্পর্কে কথা বলে।

• কেন ওয়েব UI ক্ষমতা আপনার ইকমার্স সাইটের জন্য গুরুত্বপূর্ণ?
• স্ক্রোল-চালিত অ্যানিমেশন কেস স্টাডি
• ট্রানজিশন কেস স্টাডি দেখুন
• কন্টেইনার কোয়েরি কেস স্টাডি
• :has() নির্বাচক কেস স্টাডি

Swetha Gopalakrishnan

Saurabh Rajpal

পপোভারগুলি ওয়েবে সর্বত্র রয়েছে৷ আপনি সেগুলিকে মেনু, টগলটিপস এবং ডায়ালগে দেখতে পারেন, যা অ্যাকাউন্ট সেটিংস, ডিসক্লোজার উইজেট এবং পণ্য কার্ডের পূর্বরূপের মতো বৈশিষ্ট্যগুলির জন্য ব্যবহৃত হয়। এই উপাদানগুলি কতটা প্রচলিত থাকা সত্ত্বেও, ব্রাউজারগুলিতে সেগুলি তৈরি করা এখনও আশ্চর্যজনকভাবে কষ্টকর। এটি সমাধান করার জন্য, পপওভার তৈরির জন্য ঘোষণামূলক এইচটিএমএল এপিআইগুলির একটি নতুন সেট ব্রাউজারে আসছে, এর মধ্যে প্রথমটি হল পপওভার API ।

পপওভার নতুনভাবে উপলব্ধ বেসলাইনের অংশ।

একটি পপওভার সাধারণত একটি ডায়ালগের সাথে বিভ্রান্ত হয়। তবে তাদের আচরণে কিছু মূল পার্থক্য রয়েছে। dialog.showModal (একটি মোডাল ডায়ালগ) দিয়ে খোলা একটি dialog উপাদান হল এমন একটি অভিজ্ঞতা যার জন্য মোডালটি বন্ধ করার জন্য ব্যবহারকারীর স্পষ্ট মিথস্ক্রিয়া প্রয়োজন। একটি popover হালকা-খারিজ সমর্থন করে। একটি মডেল dialog না. একটি মডেল ডায়ালগ পৃষ্ঠার বাকি অংশকে জড় করে তোলে। একটি popover না. পার্থক্য সম্পর্কে আরও পড়ুন ।

এই নিবন্ধটি একটি সিরিজের অংশ যা আলোচনা করে যে কীভাবে ইকমার্স কোম্পানিগুলি নতুন CSS এবং UI বৈশিষ্ট্যগুলি ব্যবহার করে তাদের ওয়েবসাইট উন্নত করেছে৷ এই নিবন্ধে, আবিষ্কার করুন কিভাবে Tokopedia বাস্তবায়ন করেছে এবং Popover API থেকে উপকৃত হয়েছে।

টোকোপিডিয়া

পপওভার অ্যাট্রিবিউট ব্যবহার করে রিঅ্যাক্টে কোডের ৭০% লাইন পর্যন্ত কমে গেছে। জাভাস্ক্রিপ্টে ইভেন্ট পরিচালনার প্রয়োজন না করে এবং মোডাল DOM-কে document.body এর শেষে সরানোর জন্য React.createPortal ব্যবহার করার পরিবর্তে মোডালটি HTML দ্বারা নিয়ন্ত্রিত হতে পারে। আমরা পপওভারের উদ্বোধন ও সমাপ্তি অ্যানিমেট করতে @starting-style ব্যবহার করতেও সক্ষম।— অ্যান্ডি উইহালিম , সিনিয়র সফটওয়্যার ইঞ্জিনিয়ার, টোকোপিডিয়া ।

টোকোপিডিয়ার প্রোডাক্ট ডিটেইল পেজ (পিডিপি) প্রতিটি পণ্যের জন্য একাধিক পণ্যের ছবি ধারণ করে। যখন পণ্যের থাম্বনেইলে ক্লিক করা হয়, তখন বর্ধিত চিত্রটি দেখানোর জন্য একটি মডেল খোলা হয়। এটি ইকমার্স ওয়েবসাইটগুলিতে ব্যবহৃত একটি সাধারণ প্যাটার্ন।

কোড

টোকোপিডিয়া তাদের ফ্রন্টএন্ড বিকাশের জন্য প্রতিক্রিয়া ব্যবহার করে। এই মডেলের জন্য পপওভার API প্রয়োগ করার আগে, তারা একটি DOM মডেল এবং একটি বোতাম ব্যবহার করেছিল। বোতামটি মোডাল খুলতে প্রতিক্রিয়ার অবস্থা পরিবর্তন করেছে। পপওভার API এর সাথে, তারা উপাদানটিতে একটি popovertarget বৈশিষ্ট্য নির্দিষ্ট করে যা পপওভারটিকে একটি মান দিয়ে খোলে যা পপওভার উপাদানের আইডির মতো।

এই মৌলিক বাস্তবায়নের সাথে, পপওভার কাজ করে কিন্তু কোনো অ্যানিমেশন ছাড়াই প্রদর্শিত এবং অদৃশ্য হয়ে যায়। পপওভারের জন্য একটি মসৃণ এন্ট্রি এবং এক্সিট অ্যানিমেশন তৈরি করতে, :popover-open এবং @starting-style ব্যবহার করুন এবং বিচ্ছিন্ন বৈশিষ্ট্যগুলির অ্যানিমেশনের অনুমতি দিন। নিম্নলিখিত কোড উদাহরণে, transform: 'scale()' প্রপার্টি।

এই কোড উদাহরণটি দেখায় কিভাবে পপওভার API-এর জন্য এন্ট্রি এবং এক্সিট অ্যানিমেশন প্রয়োগ করতে হয়।

<Thumbnail popovertarget="medialightbox" />
<MediaLightbox popover id="medialightbox" />

export const cssModalWrapper = css({
  background: NN0,
  border: 'none',
  borderRadius: '.625rem',
  width: 1024,
  padding: 24,

  '&::backdrop': {
    opacity: 0,
    transitionProperty: 'opacity, display',
    transition: '.25s ease-out',
    transitionBehavior: 'allow-discrete',
  },

  transitionProperty: 'transform, opacity, display',
  transition: '.25s ease-out',
  transitionBehavior: 'allow-discrete',

  transform: 'scale(0.8)',
  opacity: 0,
  '@starting-style': {
    transform: 'scale(1)',
    opacity: 1,
  },

  '&:popover-open': {
    transform: 'scale(1)',
    opacity: 1,
    '@starting-style': {
      transform: 'scale(0.8)',
      opacity: 0,
    },
  },
});

পপওভার API সমর্থন করে না এমন ব্রাউজারগুলিকে পূরণ করতে, Tokopedia oddbird দ্বারা পপওভার-পলিফিল প্রয়োগ করেছে, যা gzip কম্প্রেশন সহ মাত্র 3.2 KB। তারা পলিফিলের সাথে সন্তুষ্ট ছিল কারণ এটি ভাল কাজ করেছে এবং কর্মক্ষমতা রিগ্রেশনের কারণ হয়নি। সামগ্রিকভাবে, তারা পপওভার API এর সাথে প্রতিক্রিয়াতে কোডের 70% লাইন পর্যন্ত কমাতে সক্ষম হয়েছিল।

Popover API ব্যবহার করার সময় যে বিষয়গুলো বিবেচনা করতে হবে

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

সিএসএস অ্যাঙ্কর পজিশনিং ( শীঘ্রই Chrome-এ আসছে ) অন্যান্য উপাদানের সাথে তুলনা করার জন্য পপোভারগুলিকে একত্রিত করার কথা বিবেচনা করুন৷ এটি উদাহরণস্বরূপ মেনু এবং টুলটিপের জন্য সহায়ক।

সম্পদ

• পপওভার API প্রবর্তন করা হচ্ছে
• একটি পপওভার এবং একটি ডায়ালগের মধ্যে পার্থক্য৷
• আপনি একটি বাগ রিপোর্ট বা একটি নতুন বৈশিষ্ট্য অনুরোধ করতে চান? আমরা আপনার কাছ থেকে শুনতে চাই .

এই সিরিজের অন্যান্য নিবন্ধগুলি অন্বেষণ করুন যেগুলি ইকমার্স কোম্পানিগুলি নতুন CSS এবং UI বৈশিষ্ট্যগুলি যেমন স্ক্রোল-চালিত অ্যানিমেশন, পপওভার, কন্টেইনার কোয়েরি এবং has() নির্বাচক ব্যবহার করে কীভাবে উপকৃত হয়েছে সে সম্পর্কে কথা বলে।

• কেন ওয়েব UI ক্ষমতা আপনার ইকমার্স সাইটের জন্য গুরুত্বপূর্ণ?
• স্ক্রোল-চালিত অ্যানিমেশন কেস স্টাডি
• ট্রানজিশন কেস স্টাডি দেখুন
• কন্টেইনার কোয়েরি কেস স্টাডি
• :has() নির্বাচক কেস স্টাডি