পেছনের কারিগরি কৌশল: ড্র্যাগ, টাচ এবং CSS ক্যাসকেড

একটি রিসাইজযোগ্য UI প্যানেল তৈরি করা যতটা সহজ মনে হয়, আসলে তার চেয়ে অনেক বেশি কঠিন। আপনাকে লেআউট, টাচ ইভেন্ট এবং CSS রুলস—সবকিছু একসাথে সামলাতে হয়।

আমার সাম্প্রতিক একটি visual-diff UI রিডিজাইন করার অভিজ্ঞতা থেকে তিনটি কারিগরি শিক্ষা নিচে দেওয়া হলো।

১. লেআউটের জন্য window width ব্যবহার করা বন্ধ করুন

আপনার লেআউটটি ভার্টিক্যাল (vertical) নাকি হরিজন্টাল (horizontal), তা নির্ধারণ করতে window.innerWidth ব্যবহার করবেন না। ব্যবহারকারী যদি উইন্ডোটি রিসাইজ করেন, তবে আপনার লজিক কাজ করা বন্ধ করে দেবে।

এর পরিবর্তে, প্রকৃত CSS স্টেট ব্যবহার করুন। flex-direction পরীক্ষা করতে getComputedStyle ব্যবহার করুন। এটি সব media queries প্রয়োগ হওয়ার পর প্রকৃত মানটি পড়ে নেয়। এটি নিশ্চিত করে যে আপনার ড্র্যাগ লজিকটি ব্যবহারকারী যা দেখছেন তার সাথে সামঞ্জস্যপূর্ণ।

২. টাচ এবং মাউস ইভেন্ট একসাথে হ্যান্ডেল করুন

ডেস্কটপ এবং মোবাইল উভয় ক্ষেত্রেই ড্র্যাগিং কাজ করানোর জন্য আপনার একটি সমন্বিত (unified) পদ্ধতির প্রয়োজন।

  • কোঅর্ডিনেট (coordinates) বের করার জন্য optional chaining ব্যবহার করুন। এটি একটি ফাংশন দিয়েই মাউস এবং টাচ উভয় ইভেন্ট হ্যান্ডেল করতে সাহায্য করে।
  • touchmove-এর জন্য { passive: false } ব্যবহার করুন। স্ক্রলিং সহজ করার জন্য ব্রাউজারগুলো ডিফল্টভাবে টাচ ইভেন্টগুলোকে passive হিসেবে সেট করে রাখে। আপনি যদি এটি false না করেন, তবে আপনি e.preventDefault() কল করতে পারবেন না। এই কলটি ছাড়া, ড্র্যাগ করার চেষ্টা করার সময় পেজটি স্ক্রল হতে থাকবে।
  • document-এ move এবং end লিসেনার (listeners) যুক্ত করুন। ব্যবহারকারী যদি খুব দ্রুত আঙুল নাড়ান, তবে তিনি ডিভাইডারটির বাইরে চলে যেতে পারেন। document-এ যুক্ত করার ফলে পয়েন্টার সরে গেলেও ড্র্যাগিং প্রক্রিয়াটি চলতে থাকে।

৩. আপনার ভিজিবিলিটি সিস্টেমের (visibility system) সাথে লড়াই করা এড়িয়ে চলুন

আমি একটি CSS specificity বাগ বা ত্রুটির সম্মুখীন হয়েছিলাম। প্যানেল হাইড করার জন্য আমার একটি ক্লাস ছিল এবং লেআউট ডিরেকশন সেট করার জন্য অন্য একটি ক্লাস ছিল।

সমস্যা:

  • .view-panel { display: none; }
  • .diff-layout { display: flex; }

যেহেতু এগুলোর specificity সমান ছিল, তাই ফাইলের শেষেরটি কার্যকর হয়েছিল। এর মানে হলো, প্যানেলগুলো হাইড হওয়ার কথা থাকা সত্ত্বেও সেগুলো দৃশ্যমান ছিল।

সমাধান: লেআউট হেল্পার ক্লাসকে কখনোই display প্রপার্টি সেট করতে দেবেন না। ভিজিবিলিটি ক্লাসটিকে সেই দায়িত্ব নিতে দিন।

পরিবর্তে: .diff-layout { display: flex; flex-direction: column; }

ব্যবহার করুন: .view-panel.diff-layout { flex-direction: column; }

এটি specificity বাড়িয়ে দেয় এবং নিশ্চিত করে যে লেআউট ক্লাসটি শুধুমাত্র ডিরেকশন পরিবর্তন করবে, ভিজিবিলিটি নয়।

উৎস: https://dev.to/bonzai2carn/under-the-hood-drag-touch-and-css-cascade-in-a-real-diff-ui-1b66