Ruler for Browser

ওয়েব UI ডেভেলপমেন্ট এবং ডিজাইন কিউএ (QA) অডিটের সময় বিভিন্ন উপাদানের মার্জিন, প্যাডিং কিংবা অ্যালাইনমেন্ট নিখুঁত আছে কি না তা যাচাই করা বেশ কঠিন। সাধারণত এজন্য ফুল-পেজ স্ক্রিনশট নিয়ে ফিগমা বা ফটোশপে নিয়ে মাপতে হয়, যা কাজের গতি নষ্ট করে।

ব্রাউজারের ভেতর সরাসরি রুলার ও গাইডলাইন যুক্ত করার ক্ষেত্রে প্রধান চ্যালেঞ্জ ছিল: মূল ওয়েবসাইটের নিজস্ব সিএসএস স্টাইল বা স্ক্রিপ্ট যাতে এক্সটেনশনের রুলারকে বিকৃত করতে না পারে, পেজ স্ক্রল করার সময় গাইডলাইনগুলো যাতে তাদের আসল ডম এলিমেন্টের সাথে নির্ভুলভাবে পিন্ড থাকে, এলিমেন্টগুলোর এজ (ধার) ও সেন্টারে ৬ পিক্সেলের ম্যাগনেটিক স্ন্যাপিং নিশ্চিত করা, এবং ব্রাউজার রিলোড করলেও ডোমেনভেদে গাইডগুলো স্বয়ংক্রিয়ভাবে রিকল করা।

১. শ্যাডো ডম (Shadow DOM) আইসোলেশন: হোস্ট পেজের সিএসএস বা স্ক্রিপ্ট যাতে কোনোভাবেই এক্সটেনশনের স্টাইলকে প্রভাবিত করতে না পারে, সেজন্য সম্পূর্ণ রুলার ইন্টারফেস Shadow Root-এর ভেতরে সম্পূর্ণ বিচ্ছিন্নভাবে রেন্ডার করা হয়েছে।

২. ফটোশপ স্টাইল ড্র্যাগ-অ্যান্ড-ড্রপ গাইড: ওপরের বা বামের রুলার থেকে মাউস ড্র্যাগ করে টানলেই তাত্ক্ষণিক অনুভূমিক বা উল্লম্ব গাইড তৈরি হয়। ড্র্যাগ করে সরানো, ডাবল ক্লিকে বা রুলারে ফেরত নিয়ে ডিলিট করা এবং হটকি (Alt+R, Ctrl+;, Ctrl+Alt+;) দিয়ে সহজে পরিচালনা করা যায়।

৩. ম্যাগনেটিক স্ন্যাপিং ইঞ্জিন (Snap Engine): মাউস ড্র্যাগ করার সময় নিকটবর্তী ডম উপাদানের বাম, ডান, কেন্দ্র কিংবা শীর্ষ, তলদেশ ও মধ্যবিন্দুর ৬ পিক্সেলের মধ্যে ম্যাগনেটিক স্ন্যাপ করে (Shift কি চেপে স্ন্যাপ সাময়িক অফও রাখা যায়)।

৪. Alt-কি ডাইমেনশন ও ডিস্ট্যান্স মেজারমেন্ট: Alt চেপে মাউস হোভার করলেই উপাদানের সাইজ ব্যাজ দেখা যায় এবং ড্র্যাগ করলে উপাদানগুলোর মধ্যকার রিয়েল-টাইম পিক্সেল দূরত্ব নিঁখুতভাবে ডিসপ্লে হয়।

৫. ৩টি অ্যাডাপ্টিভ ডিসপ্লে মোড: ফ্লোটিং Overlay মোড ছাড়াও Push মোডে পেজ কনটেন্ট ২২ পিক্সেল নিচে নেমে আসে যাতে কোনো হেডার ঢাকা না পড়ে। আর Auto-hide মোডে মাউস স্ক্রিনের প্রান্তে গেলে রুলার মসৃণভাবে ভেসে ওঠে।

৬. স্ক্রল-রেসিলিয়েন্ট পার-অরিজিন লোকাল স্টোরেজ: গাইডগুলো ডকুমেন্ট কোঅর্ডিনেটে কাজ করায় পেজ স্ক্রল করলেও উপাদানগুলোর সাথে আটকে থাকে। এছাড়া প্রতিটি ওয়েবসাইটের গাইড লোকাল মেমরিতে সংরক্ষিত থাকে, ফলে পেজ রিলোড করলেও গাইড অক্ষত থাকে।