আমার পণ্য Front Prep-এর প্রশ্ন তালিকা পৃষ্ঠাগুলিতে, আমি ইন্টারভিউ প্রশ্নের পাশে কোম্পানির লোগো প্রদর্শন করি। আপনি যখন একটি লোগোর উপর হোভার করেন, তখন একটি টুলটিপ কোম্পানির নাম দেখায়। আমি টুলটিপ বিলম্ব 0-এ সেট করেছিলাম, তাই আমি কার্সরটি পৃষ্ঠায় সরানোর সাথে সাথে টুলটিপগুলি তাত্ক্ষণিকভাবে উপস্থিত হত। এটি ঠিক করতে, আমি 200ms ট্রানজিশন বিলম্ব যোগ করেছি, কিন্তু এটি একটি নতুন সমস্যা তৈরি করেছে: একাধিক লোগোর মধ্যে চলার সময় প্রতিবার একই 200ms বিলম্বের জন্য অপেক্ষা করতে হত, যা ধীর মনে হত। এই পোস্টটি ব্রাউজার টুলবার এবং ওয়েবসাইটগুলিতে পাওয়া একটি ছোট ইন্টারঅ্যাকশন প্যাটার্ন সম্পর্কে। আমার সমাধানটি তিনটি অংশে বিভক্ত: একটি লোগোর উপর হোভার করলে, টুলটিপ খোলার আগে 200ms অপেক্ষা করে। যখন একটি টুলটিপ বন্ধ হয়, তখন একটি 300ms টাইমার শুরু হয়, যাকে আমি উষ্ণ উইন্ডো বলি। এই টাইমার চলাকালীন আপনি অন্য লোগোর উপর হোভার করলে, টুলটিপটি তাত্ক্ষণিকভাবে খোলে, বিলম্ব এড়িয়ে। টাইমার শেষ হলে, পৃষ্ঠাটি ঠান্ডা হয়ে যায়, এবং 200ms অপেক্ষা ফিরে আসে। Front Prep-এ, আমার টুলটিপগুলি Radix এবং Motion দিয়ে তৈরি। কোডটি উপাদানগুলির মধ্যে isWarm অবস্থা ট্র্যাক করতে একটি useContext ভেরিয়েবল ব্যবহার করে। হোভারে, উপাদানটি পরীক্ষা করে পৃষ্ঠাটি উষ্ণ কিনা; যদি হয়, তবে টুলটিপটি তাত্ক্ষণিকভাবে খোলে; অন্যথায়, এটি একটি 200ms টাইমার শুরু করে। show ফাংশনটি উষ্ণ অবস্থাটি একটি ইনস্ট্যান্ট ফ্ল্যাগে অনুলিপি করে, যা CSS একটি ডেটা অ্যাট্রিবিউটের মাধ্যমে প্রবেশ অ্যানিমেশন এড়িয়ে যেতে ব্যবহার করে। এই প্যাটার্নটি তাত্ক্ষণিক পপআপ এবং ধীর বিলম্ব উভয়ই এড়িয়ে ব্যবহারকারীর অভিজ্ঞতা উন্নত করে। এটি একটি সহজ পদ্ধতি যা আপনি আপনার নিজের কোডবেসে প্রয়োগ করতে পারেন। মূল সত্তা: কোম্পানি: Front Prep।
উৎস: Hacker News · সারাংশ: HeadlinesBriefing