রেগুলার এক্সপ্রেশনের বাইরে: Chrome DevTools-এ CSS ভ্যালু পার্সিং উন্নত করা

Philip Pfaffe
GitHub
Ergün Erdogmus
Ergün Erdogmus
X

আপনি কি লক্ষ্য করেছেন যে Chrome DevTools-এর স্টাইল ট্যাবে CSS প্রপার্টিগুলি ইদানীং একটু বেশি পালিশ করা দেখাচ্ছে? Chrome 121 থেকে 128-এর মধ্যে রিলিজ করা এইসব আপডেট, CSS ভ্যালু পার্স ও দেখানোর পদ্ধতিতে উল্লেখযোগ্য উন্নতির ফল। এই নিবন্ধে, আমরা আপনাকে এই রূপান্তরের প্রযুক্তিগত বিবরণ সম্পর্কে জানাব—রেগুলার এক্সপ্রেশন ম্যাচিং সিস্টেম থেকে আরও শক্তিশালী পার্সারে পরিবর্তন।

আসুন, আগের ভার্সনের সাথে বর্তমান DevTools-এর তুলনা করি:

উপরে: এটি লেটেস্ট Chrome, নিচে: Chrome 121.

পার্থক্যটি যথেষ্টই বড়, তাই না? এখানে মূল উন্নতির একটি ব্রেকডাউন দেওয়া হল:

  • color-mix. color-mix ফাংশনের মধ্যে দুটি কালার আর্গুমেন্টকে ভিজ্যুয়ালি উপস্থাপন করে এমন একটি সুবিধাজনক প্রিভিউ।
  • pink। pink নামের রঙের জন্য ক্লিক করা যায় এমন কালার প্রিভিউ। সহজে অ্যাডজাস্ট করার জন্য কালার পিকার খুলতে এটিতে ক্লিক করুন।
  • var(--undefined, [fallback value]). অনির্ধারিত ভেরিয়েবল গ্রে-আউট করে এবং অ্যাক্টিভ ফলব্যাক ভ্যালু (এই ক্ষেত্রে, একটি HSL রঙ) ক্লিকযোগ্য রঙের প্রিভিউ সহ দেখানোর মাধ্যমে অনির্ধারিত ভেরিয়েবল ম্যানেজ করার সুবিধা উন্নত করা হয়েছে।
  • hsl(…): hsl কালার ফাংশনের জন্য আরেকটি ক্লিক করা যায় এমন কালার প্রিভিউ, যা কালার পিকারের দ্রুত অ্যাক্সেস প্রদান করে।
  • 177deg: একটি ক্লিক করা যায় এমন অ্যাঙ্গেল ক্লক যা আপনাকে ইন্টার‍্যাক্টিভভাবে অ্যাঙ্গেল ভ্যালু টেনে আনতে এবং পরিবর্তন করতে দেয়।
  • var(--saturation, …): কাস্টম প্রপার্টি ডেফিনিশনের ক্লিক করা যায় এমন লিঙ্ক, যা প্রাসঙ্গিক ঘোষণায় সহজেই নিয়ে যায়।

পার্থক্যটা চোখে পড়ার মতো। এটি করার জন্য, DevTools-কে CSS প্রপার্টি ভ্যালু আগের থেকে অনেক ভালোভাবে বুঝতে শেখাতে হয়েছে।

এইসব প্রিভিউ কি আগে থেকেই উপলভ্য ছিল না?

এই প্রিভিউ আইকনগুলি পরিচিত মনে হলেও, সেগুলি সবসময় একইভাবে দেখানো হয় না, বিশেষ করে উপরের উদাহরণের মতো জটিল CSS সিনট্যাক্সে। এমনকি, যেখানে তারা কাজ করেছে, সেখানেও তাদের সঠিকভাবে কাজ করানোর জন্য প্রায়শই উল্লেখযোগ্য প্রচেষ্টার প্রয়োজন হয়েছে।

এর কারণ হল, DevTools-এর প্রথম দিন থেকেই ভ্যালু বিশ্লেষণ করার সিস্টেমটি অর্গানিকভাবে বৃদ্ধি পাচ্ছে। তবে, CSS থেকে আমরা যে সাম্প্রতিক অসাধারণ নতুন ফিচার পাচ্ছি এবং এর সাথে সাথে ভাষার জটিলতা যে হারে বাড়ছে, তার সাথে এটি তাল মিলিয়ে চলতে পারছে না। সময়ের সাথে তাল মিলিয়ে চলতে সিস্টেমটি সম্পূর্ণ নতুন করে ডিজাইন করার প্রয়োজন ছিল এবং আমরা ঠিক সেটাই করেছি!

CSS প্রপার্টি ভ্যালু কীভাবে প্রসেস করা হয়

DevTools-এ, স্টাইল ট্যাবে প্রপার্টি ডিক্লারেশন রেন্ডার ও সাজানোর প্রসেস দুটি আলাদা ধাপে বিভক্ত:

  1. স্ট্রাকচারাল বিশ্লেষণ। এই প্রাথমিক পর্যায়ে প্রপার্টি ঘোষণার বিশ্লেষণ করে তার অন্তর্নিহিত কম্পোনেন্ট ও তাদের মধ্যে সম্পর্ক শনাক্ত করা হয়। যেমন, border: 1px solid red ডিক্লারেশনে, এটি 1px-কে দৈর্ঘ্য, solid-কে স্ট্রিং এবং red-কে রঙ হিসেবে শনাক্ত করবে।
  2. রেন্ডার করা হচ্ছে। স্ট্রাকচারাল বিশ্লেষণের উপর ভিত্তি করে, রেন্ডারিং ফেজ এইসব কম্পোনেন্টকে HTML রিপ্রেজেন্টেশনে রূপান্তরিত করে। এটি ইন্টার‍্যাক্টিভ এলিমেন্ট ও ভিজ্যুয়াল কিউয়ের মাধ্যমে দেখানো প্রপার্টি টেক্সটকে আরও সমৃদ্ধ করে। যেমন, রঙের ভ্যালু red ক্লিক করা যায় এমন রঙের আইকন হিসেবে দেখানো হয়, যাতে ক্লিক করলে সহজে পরিবর্তন করার জন্য রঙ চয়নকারী দেখা যায়।

রেগুলার এক্সপ্রেশন

আগে, স্ট্রাকচারাল বিশ্লেষণের জন্য প্রপার্টি ভ্যালু আলাদা করতে আমরা রেগুলার এক্সপ্রেশনের (regexes) উপর নির্ভর করতাম। আমরা রেজেক্সের একটি তালিকা বজায় রেখেছি যাতে প্রপার্টি ভ্যালুর যে অংশগুলি আমরা সাজানোর জন্য বিবেচনা করেছি সেগুলির সাথে মিল খুঁজে পাওয়া যায়। যেমন, CSS রঙ, দৈর্ঘ্য, কোণ, আরও জটিল সাব-এক্সপ্রেশন যেমন var ফাংশন কল ইত্যাদির সাথে মিলে যায় এমন এক্সপ্রেশন ছিল। ভ্যালু বিশ্লেষণ করার জন্য আমরা বাঁদিক থেকে ডানদিকে টেক্সট স্ক্যান করেছি, টেক্সটের পরবর্তী অংশের সাথে ম্যাচ করে এমন তালিকার প্রথম এক্সপ্রেশন ক্রমাগত খুঁজছি।

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

color-mix()-এর সাথে মিলছে

color-mix() ফাংশনের জন্য আমরা যে রেজেক্স ব্যবহার করেছি তা নিচে দেওয়া হল:

/color-mix\(.*,\s*(?<firstColor>.+)\s*,\s*(?<secondColor>.+)\s*\)/g

যা এর সিনট্যাক্সের সাথে মেলে:

color-mix(<color-interpolation-method>, [<color> && <percentage [0,100]>?]#{2})

ম্যাচগুলি ভিজ্যুয়ালাইজ করতে নিম্নলিখিত উদাহরণটি চালানোর চেষ্টা করুন।

const re = /color-mix\(.*,\s*(?<firstColor>.+)\s*,\s*(?<secondColor>.+)\s*\)/g;

// it works - simpler example
const simpler = re.exec('color-mix(in srgb, pink, hsl(127deg 100% 50%))');
console.table(simpler.groups);

re.exec('');

// it doesn't work - complex example
const complex = re.exec('color-mix(in srgb, pink, var(--undefined, hsl(127deg var(--saturation, 100%) 50%)))');
console.table(complex.groups);

কালার-মিক্স ফাংশনের জন্য ম্যাচ করা ফলাফল।

সহজ উদাহরণটি ঠিকঠাক কাজ করে। তবে, আরও জটিল উদাহরণে, <firstColor>-এর সাথে hsl(177deg var(--saturation এবং <secondColor>-এর সাথে 100%) 50%)) মিলে যায়, যার কোনও অর্থ হয় না।

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

tan()-এর সাথে মিলছে

রিপোর্ট করা আরও হাস্যকর বাগগুলির মধ্যে একটি ছিল ত্রিকোণমিতিক tan() ফাংশন সম্পর্কে। রঙ ম্যাচ করার জন্য আমরা যে রেজেক্স ব্যবহার করছিলাম তাতে red কীওয়ার্ডের মতো নামযুক্ত রঙ ম্যাচ করার জন্য একটি সাব-এক্সপ্রেশন \b[a-zA-Z]+\b(?!-) অন্তর্ভুক্ত ছিল। তারপর আমরা চেক করে দেখেছি যে মিলে যাওয়া অংশটি আসলে কোনও রঙের নাম কিনা এবং দেখুন, tan-ও একটি রঙের নাম! তাই, আমরা ভুল করে tan() এক্সপ্রেশনকে রঙ হিসেবে ব্যাখ্যা করেছি।

var()-এর সাথে মিলছে

আসুন আরেকটি উদাহরণ দেখা যাক, var() ফাংশন যাতে অন্য var() রেফারেন্স সহ ফলব্যাক আছে: var(--non-existent, var(--margin-vertical))।

var()-এর জন্য আমাদের রেজেক্স এই ভ্যালুর সাথে ম্যাচ করবে। তবে, প্রথম বন্ধনী শেষ হওয়ার সাথে সাথে এটি ম্যাচ করা বন্ধ করে দেবে। তাই উপরের টেক্সট var(--non-existent, var(--margin-vertical) হিসেবে ম্যাচ করা হয়েছে। এটি রেগুলার এক্সপ্রেশন ম্যাচিংয়ের টেক্সটবুক সীমাবদ্ধতা। যেসব ভাষায় ম্যাচিং বন্ধনী প্রয়োজন হয় সেগুলি মূলত রেগুলার নয়।

CSS পার্সারে ট্রানজিশন

রেগুলার এক্সপ্রেশন ব্যবহার করে টেক্সট বিশ্লেষণ করা বন্ধ হয়ে গেলে (কারণ বিশ্লেষণ করা ভাষা রেগুলার নয়) পরবর্তী ক্যানোনিকাল ধাপ হল: উচ্চ-ধরনের ব্যাকরণের জন্য পার্সার ব্যবহার করা। CSS-এর ক্ষেত্রে, এর অর্থ হল প্রসঙ্গ-মুক্ত ভাষার জন্য পার্সার। আসলে, DevTools কোডবেসে এই ধরনের পার্সার সিস্টেম আগে থেকেই ছিল: CodeMirror-এর Lezer, যা, উদাহরণস্বরূপ, CodeMirror-এ সিনট্যাক্স হাইলাইট করার ভিত্তি, সোর্স প্যানেলে আপনি যে এডিটরটি খুঁজে পান। Lezer-এর CSS পার্সার আমাদের CSS নিয়মের জন্য (নন-অ্যাবস্ট্রাক্ট) সিনট্যাক্স ট্রি তৈরি করতে দেয় এবং আমাদের ব্যবহারের জন্য প্রস্তুত ছিল। জয়জয়কার।

প্রপার্টি ভ্যালু `hsl(177deg var(--saturation, 100%) 50%)`-এর জন্য সিনট্যাক্স ট্রি। এটি Lezer পার্সার দ্বারা তৈরি করা ফলাফলের একটি সরলীকৃত ভার্সন, কমা এবং বন্ধনীর জন্য বিশুদ্ধ সিনট্যাক্টিক নোড বাদ দিয়ে।

তবে, আমরা দেখেছি যে রেজেক্স-ভিত্তিক ম্যাচিং থেকে সরাসরি পার্সার-ভিত্তিক ম্যাচিংয়ে মাইগ্রেট করা সম্ভব নয়: দুটি পদ্ধতি বিপরীত দিক থেকে কাজ করে। রেগুলার এক্সপ্রেশনের সাথে ভ্যালুর অংশ ম্যাচ করার সময়, DevTools ইনপুট বাঁদিক থেকে ডানদিকে স্ক্যান করবে, প্যাটার্নের ক্রমানুসারে সাজানো তালিকা থেকে সবচেয়ে আগে ম্যাচ করা ভ্যালু বারবার খোঁজার চেষ্টা করবে। সিনট্যাক্স ট্রি-এর মাধ্যমে, ম্যাচিং নিচ থেকে শুরু হবে, যেমন, ফাংশন কল ম্যাচ করার চেষ্টা করার আগে, প্রথমে কলের আর্গুমেন্ট বিশ্লেষণ করা। এটি পাটিগণিতের এক্সপ্রেশন মূল্যায়ন করার মতো, যেখানে আপনি প্রথমে বন্ধনীতে থাকা এক্সপ্রেশন, তারপর গুণক অপারেটর এবং তারপর যোগ করার অপারেটর বিবেচনা করবেন। এই ফ্রেমিংয়ে, regex-ভিত্তিক ম্যাচিং বাঁদিক থেকে ডানদিকে পাটিগণিত এক্সপ্রেশন মূল্যায়ন করার সাথে সম্পর্কিত। আমরা সত্যিই পুরো ম্যাচিং সিস্টেমটি স্ক্র্যাচ থেকে আবার লিখতে চাইনি: সেখানে ১৫টি বিভিন্ন ম্যাচিং এবং রেন্ডারার পেয়ার ছিল, যার জন্য হাজার হাজার লাইনের কোড ছিল, যার ফলে এটি অসম্ভাব্য ছিল যে আমরা এটিকে একটি মাইলস্টোনে শিপ করতে পারব।

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

ফেজ ১: বটম-আপ ম্যাচিং

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

উপরের সিনট্যাক্স ট্রি-এর উদাহরণটি বিবেচনা করুন:

ফেজ ১: সিনট্যাক্স ট্রিতে বটম-আপ ম্যাচিং।

এই ট্রিয়ের জন্য, আমাদের ম্যাচিং টুল নিম্নলিখিত ক্রমে প্রয়োগ করা হবে:

  1. hsl(177degvar(--saturation, 100%) 50%): প্রথমে, আমরা hsl ফাংশন কলের প্রথম আর্গুমেন্ট, হিউ অ্যাঙ্গেল খুঁজে পাই। আমরা এটি একটি অ্যাঙ্গেল ম্যাচারের সাথে ম্যাচ করি, যাতে আমরা অ্যাঙ্গেল আইকন দিয়ে অ্যাঙ্গেল ভ্যালু সাজাতে পারি।
  2. hsl(177degvar(--saturation, 100%)50%): দ্বিতীয়ত, আমরা var ম্যাচারের মাধ্যমে var ফাংশন কল খুঁজে পাই। এই ধরনের কলের ক্ষেত্রে আমরা মূলত দুটি কাজ করতে চাই:
    • ভেরিয়েবলের ডিক্লারেশন দেখুন এবং এর ভ্যালু গণনা করুন এবং ভেরিয়েবলের নামের সাথে লিঙ্ক ও পপওভার যোগ করে যথাক্রমে সেগুলির সাথে কানেক্ট করুন।
    • গণনা করা মানটি একটি রঙ হলে, একটি রঙের আইকন দিয়ে কলটি সাজান। আসলে, তৃতীয় আরেকটি জিনিস আছে, তবে আমরা পরে সেই বিষয়ে কথা বলব।
  3. hsl(177deg var(--saturation, 100%) 50%): সবশেষে, আমরা hsl ফাংশনের জন্য কল এক্সপ্রেশন ম্যাচ করি, যাতে আমরা এটিকে কালার আইকন দিয়ে সাজাতে পারি।

আমরা সাজাতে চাই এমন সাব-এক্সপ্রেশন খোঁজার পাশাপাশি, আসলে একটি দ্বিতীয় ফিচার রয়েছে যা আমরা ম্যাচিং প্রসেসের অংশ হিসেবে চালাচ্ছি। মনে রাখবেন, #২ নম্বর ধাপে আমরা বলেছি যে ভেরিয়েবলের নামের জন্য আমরা গণনা করা ভ্যালু খুঁজি। আসলে, আমরা আরও এক ধাপ এগিয়ে গিয়ে ট্রি-এর উপরের দিকে ফলাফল প্রচার করি। এবং শুধু ভেরিয়েবেলের জন্য নয়, ফলব্যাক ভ্যালুর জন্যও! এটি নিশ্চিত যে var ফাংশন নোড ভিজিট করার সময়, এর চিলড্রেন আগে থেকেই ভিজিট করা হয়েছে, তাই আমরা আগে থেকেই জানি যে ফলব্যাক ভ্যালুতে দেখানো হতে পারে এমন যেকোনও var ফাংশনের ফলাফল কী হবে। তাই আমরা সহজেই এবং কম খরচে var ফাংশনগুলিকে তাদের ফলাফলের সাথে প্রতিস্থাপন করতে পারি, যা আমাদের "এই var কলের ফলাফল কি একটি রঙ?" এর মতো প্রশ্নের উত্তর দিতে দেয়, যেমনটি আমরা ধাপ #২-এ করেছি।

পর্যায় ২: টপ-ডাউন রেন্ডারিং

দ্বিতীয় পর্যায়ে, আমরা উল্টো দিকে যাই। ফেজ ১ থেকে ম্যাচের ফলাফল নিয়ে, আমরা উপর থেকে নিচে পর্যন্ত ক্রমানুসারে ট্রাভার্স করে HTML-এ ট্রি রেন্ডার করি। প্রতিটি ভিজিট করা নোডের জন্য, আমরা চেক করি যে এটি মিলেছে কিনা এবং যদি তাই হয়, তাহলে ম্যাচারের সংশ্লিষ্ট রেন্ডারারকে কল করি। টেক্সট নোডের জন্য ডিফল্ট ম্যাচ ও রেন্ডারার অন্তর্ভুক্ত করার মাধ্যমে আমরা এমন নোডের জন্য বিশেষ হ্যান্ডলিংয়ের প্রয়োজনীয়তা এড়িয়ে যাই যেগুলিতে শুধু টেক্সট থাকে (যেমন NumberLiteral "৫০%")। রেন্ডারার শুধু HTML নোড আউটপুট করে, যা একসাথে রাখলে, প্রপার্টি ভ্যালুর উপস্থাপনা তৈরি করে, যার মধ্যে এর ডেকোরেশনও অন্তর্ভুক্ত থাকে।

ফেজ ২: সিনট্যাক্স ট্রিতে টপ-ডাউন রেন্ডারিং।

উদাহরণ হিসেবে দেখানো ট্রিয়ের ক্ষেত্রে, প্রপার্টি ভ্যালু যে ক্রমে রেন্ডার করা হয় তা এখানে দেওয়া হল:

  1. hsl ফাংশন কল দেখুন। এটি মিলে গেছে, তাই কালার ফাংশন রেন্ডারারকে কল করুন। এটি দুটি কাজ করে:
    • যেকোনও var আর্গুমেন্টের জন্য অন-দ্য-ফ্লাই সাবস্টিটিউশন মেকানিজম ব্যবহার করে আসল কালার ভ্যালু গণনা করে, তারপর একটি কালার আইকন আঁকে।
    • CallExpression-এর চিলড্রেনকে রিকার্সিভলি রেন্ডার করে। এটি অটোমেটিক ফাংশনের নাম, বন্ধনী এবং কমা রেন্ডার করে, যা আসলে টেক্সট।
  2. hsl কলের প্রথম আর্গুমেন্ট দেখুন। এটি মিলে গেছে, তাই অ্যাঙ্গেল রেন্ডারারকে কল করুন, যা অ্যাঙ্গেল আইকন এবং অ্যাঙ্গেলের টেক্সট আঁকে।
  3. দ্বিতীয় আর্গুমেন্ট দেখুন, যেটি হল var কল। এটি মিলে গেছে, তাই var রেন্ডারার কল করুন, যা নিম্নলিখিত আউটপুট দেয়:
    • শুরুতে var( টেক্সট।
    • ভেরিয়েবেলের নাম এবং এটি ভেরিয়েবেলের সংজ্ঞার লিঙ্ক সহ বা ধূসর টেক্সটের রঙ সহ সাজায় যাতে বোঝা যায় যে এটি সংজ্ঞায়িত করা হয়নি। এটি ভেরিয়েবেলে একটি পপওভার যোগ করে যাতে এর ভ্যালু সম্পর্কে তথ্য দেখানো যায়।
    • কমা এবং তারপরে রিকার্সিভভাবে ফলব্যাক ভ্যালু রেন্ডার করে।
    • একটি ক্লোজিং প্যারেন্থেসিস।
  4. hsl কলের শেষ আর্গুমেন্ট দেখুন। এটি ম্যাচ করেনি, তাই শুধু এর টেক্সট কন্টেন্ট আউটপুট হিসেবে দেখাও।

আপনি কি লক্ষ্য করেছেন যে এই অ্যালগরিদমে, একটি রেন্ডার সম্পূর্ণরূপে নিয়ন্ত্রণ করে যে কীভাবে একটি মিলে যাওয়া নোডের চিলড্রেন রেন্ডার করা হয়? Recursively rendering the children is proactive. এই ট্রিকের সাহায্যে রেজেক্স-ভিত্তিক রেন্ডারিং থেকে সিনট্যাক্স ট্রি-ভিত্তিক রেন্ডারিংয়ে ধাপে ধাপে মাইগ্রেশন করা সম্ভব হয়েছে। পুরনো রেজেক্স-ম্যাচারের সাথে মিলে যাওয়া নোডের ক্ষেত্রে, সংশ্লিষ্ট রেন্ডারারকে তার আসল ফর্মে ব্যবহার করা যেতে পারে। সিনট্যাক্স ট্রি-এর ক্ষেত্রে, এটি সম্পূর্ণ সাবট্রি রেন্ডার করার দায়িত্ব নেবে এবং এর ফলাফল (একটি HTML নোড) আশেপাশের রেন্ডারিং প্রসেসে পরিষ্কারভাবে প্লাগ-ইন করা যেতে পারে। এর ফলে আমরা ম্যাচ ও রেন্ডারারকে জোড়ায় পোর্ট করতে এবং একটির বদলে অন্যটি ব্যবহার করতে পেরেছি।

রেন্ডারার তার ম্যাচ করা নোডের চাইল্ডের রেন্ডারিং কন্ট্রোল করার আরেকটি সুবিধা হল, আমরা যে আইকন যোগ করছি সেগুলির মধ্যে ডিপেন্ডেন্সি সম্পর্কে যুক্তি দেওয়ার ক্ষমতা এটি আমাদের দেয়। উপরের উদাহরণে, hsl ফাংশন দ্বারা তৈরি রঙ স্পষ্টতই এর হিউ ভ্যালুর উপর নির্ভর করে। এর অর্থ হল, কালার আইকন দ্বারা দেখানো রঙ, অ্যাঙ্গেল আইকন দ্বারা দেখানো অ্যাঙ্গেলের উপর নির্ভর করে। ব্যবহারকারী যদি সেই আইকনের মাধ্যমে অ্যাঙ্গেল এডিটর খোলেন এবং অ্যাঙ্গেল পরিবর্তন করেন, তাহলে আমরা এখন রিয়েল টাইমে কালার আইকনের রঙ আপডেট করতে পারব:

উপরের উদাহরণে যেমন দেখতে পাচ্ছেন, আমরা অন্যান্য আইকন পেয়ারিংয়ের জন্যও এই মেকানিজম ব্যবহার করি, যেমন color-mix() এবং এর দুটি কালার চ্যানেল বা var ফাংশন যা এর ফলব্যাক থেকে একটি রঙ ফিরিয়ে আনে।

পারফর্ম্যান্সের উপর প্রভাব

নির্ভরযোগ্যতা উন্নত করতে এবং দীর্ঘস্থায়ী সমস্যাগুলি সমাধান করার জন্য এই সমস্যাটি নিয়ে কাজ করার সময়, আমরা কিছু পারফর্ম্যান্স রিগ্রেশন আশা করছিলাম কারণ আমরা একটি সম্পূর্ণ পার্সার চালানো শুরু করেছি। এটি পরীক্ষা করার জন্য, আমরা একটি বেঞ্চমার্ক তৈরি করেছি যা প্রায় ৩.৫ হাজার প্রপার্টি ডিক্লারেশন রেন্ডার করে এবং M1 মেশিনে ৬ গুণ থ্রটলিং সহ রেজেক্স-ভিত্তিক এবং পার্সার-ভিত্তিক উভয় ভার্সন প্রোফাইল করে।

আমরা যেমনটি আশা করেছিলাম, সেই ক্ষেত্রে পার্সিং-ভিত্তিক পদ্ধতিটি রেজেক্স-ভিত্তিক পদ্ধতির চেয়ে ২৭% ধীরগতির বলে প্রমাণিত হয়েছে। রেজেক্স-ভিত্তিক অ্যাপ্রোচ রেন্ডার করতে ১১ সেকেন্ড এবং পার্সার-ভিত্তিক অ্যাপ্রোচ রেন্ডার করতে ১৫ সেকেন্ড সময় লেগেছে।

নতুন পদ্ধতিতে আমরা যে সাফল্য পেয়েছি তা বিবেচনা করে, আমরা এটি নিয়ে এগিয়ে যাওয়ার সিদ্ধান্ত নিয়েছি।

স্বীকৃতি

এই পোস্টটি এডিট করার জন্য Sofia Emelianova এবং Jecelyn Yeen-এর অমূল্য সাহায্যের জন্য আমরা তাদের প্রতি গভীর কৃতজ্ঞতা প্রকাশ করছি!

প্রিভিউ চ্যানেল ডাউনলোড করুন

আপনার ডিফল্ট ডেভেলপমেন্ট ব্রাউজার হিসেবে Chrome Canary, Dev বা Beta ব্যবহার করার কথা বিবেচনা করুন। এইসব প্রিভিউ চ্যানেল আপনাকে লেটেস্ট DevTools ফিচার অ্যাক্সেস করতে দেয়, অত্যাধুনিক ওয়েব প্ল্যাটফর্ম API টেস্ট করতে দেয় এবং আপনার ব্যবহারকারীরা খুঁজে পাওয়ার আগেই আপনার সাইটে সমস্যা খুঁজে পেতে সাহায্য করে!

Chrome DevTools টিমের সাথে যোগাযোগ করুন

DevTools সম্পর্কিত নতুন ফিচার, আপডেট বা অন্য যেকোনও বিষয়ে আলোচনা করতে নিম্নলিখিত বিকল্পগুলি ব্যবহার করুন।