প্রায় 15 বছর আগে, আমি একটি কোম্পানিতে কাজ করছিলাম যেখানে আমরা ট্রাভেল এজেন্ট, বিমানবন্দরের কর্মীদের এবং এয়ারলাইন কোম্পানিগুলির জন্য অ্যাপ তৈরি করেছি। আমরা UI উপাদান এবং একক-পৃষ্ঠা অ্যাপের ক্ষমতার জন্য আমাদের নিজস্ব ইন-হাউস ফ্রেমওয়ার্ক তৈরি করেছি। আমাদের কাছে সবকিছুর জন্য উপাদান ছিল: ক্ষেত্র, বোতাম, ট্যাব, রেঞ্জ, ডেটা টেবিল, মেনু, ডেটপিকার, নির্বাচন এবং মাল্টিসিলেক্ট। আমরা এমনকি একটি div উপাদান ছিল. আমাদের ডিভ উপাদানটি দুর্দান্ত ছিল, এটি আমাদের সমস্ত ব্রাউজারে বৃত্তাকার কোণগুলি করতে দেয়, যা বিশ্বাস করুন বা না করুন, সেই সময়ে করা সহজ জিনিস ছিল না।
আমাদের কাজটি আমাদের ইতিহাসের এমন একটি সময়ে ঘটেছিল যখন JS, Ajax এবং গতিশীল HTML একটি বিপ্লব হিসাবে দেখা হয়েছিল যা আমাদের ভবিষ্যতে নিয়ে এসেছিল। হঠাৎ করে, আমরা গতিশীলভাবে একটি পৃষ্ঠা আপডেট করতে পারি, একটি সার্ভার থেকে ডেটা পেতে পারি এবং অন্যান্য পৃষ্ঠাগুলিতে নেভিগেট করা এড়াতে পারি, যেটি ধীরগতিতে দেখা যায় এবং দুটি পৃষ্ঠার মধ্যে স্ক্রিনে একটি বড় সাদা আয়তক্ষেত্র দেখা যায়। জেফ অ্যাটউড (স্ট্যাকওভারফ্লো-এর প্রতিষ্ঠাতা) দ্বারা জনপ্রিয় একটি বাক্যাংশ ছিল, যা পড়ে: "যেকোন অ্যাপ্লিকেশন যা জাভাস্ক্রিপ্টে লেখা যেতে পারে অবশেষে জাভাস্ক্রিপ্টে লেখা হবে।"- জেফ অ্যাটউড
সেই সময়ে আমাদের কাছে, এটি আসলে গিয়ে সেই অ্যাপগুলি তৈরি করার সাহসের মতো মনে হয়েছিল। এটি JS এর সাথে সবকিছু করার জন্য একটি কম্বল অনুমোদনের মতো অনুভূত হয়েছিল। তাই আমরা JS-এর সাথে সবকিছুই করেছি এবং কাজ করার অন্যান্য উপায় নিয়ে গবেষণা করতে আমরা সত্যিই সময় নিইনি। HTML এবং CSS কী করতে পারে তা সঠিকভাবে শিখতে আমরা সত্যিই উদ্দীপনা অনুভব করিনি। আমরা ওয়েবকে সম্পূর্ণরূপে একটি বিকশিত অ্যাপ প্ল্যাটফর্ম হিসাবে উপলব্ধি করিনি। আমরা বেশিরভাগই এটিকে এমন কিছু হিসাবে দেখেছি যা আমাদের চারপাশে কাজ করার প্রয়োজন ছিল, বিশেষত যখন এটি ব্রাউজার সমর্থনের ক্ষেত্রে আসে। আমরা এটা আরো JS নিক্ষেপ করতে পারে জিনিস করা পেতে. ওয়েব কীভাবে কাজ করে এবং প্ল্যাটফর্মে কী উপলব্ধ ছিল সে সম্পর্কে আরও জানতে সময় নেওয়া কি আমাকে সাহায্য করেছে? অবশ্যই, আমি সম্ভবত একগুচ্ছ কোড শেভ করতে পারতাম যা সত্যিই প্রয়োজন ছিল না। কিন্তু, সেই সময়ে হয়তো তেমন একটা ছিল না। আপনি দেখুন, ব্রাউজার পার্থক্যগুলি তখন বেশ উল্লেখযোগ্য ছিল। এটি এমন একটি সময় ছিল যখন ইন্টারনেট এক্সপ্লোরার তখনও প্রভাবশালী ব্রাউজার ছিল, যেখানে ফায়ারফক্স দ্বিতীয় স্থানে ছিল, কিন্তু ক্রোম দ্রুত জনপ্রিয়তা অর্জনের কারণে বাজারের শেয়ার হারাতে শুরু করে। যদিও ক্রোম এবং ফায়ারফক্স ওয়েব স্ট্যান্ডার্ডগুলিতে একমত হওয়ার ক্ষেত্রে বেশ ভাল ছিল, আমাদের অ্যাপগুলি যে পরিবেশে চলছিল তার মানে হল যে আমাদের দীর্ঘ সময়ের জন্য IE6 সমর্থন করতে হয়েছিল। এমনকি যখন আমাদের IE8 সমর্থন করার অনুমতি দেওয়া হয়েছিল, তখনও আমাদের ব্রাউজারগুলির মধ্যে অনেক পার্থক্য মোকাবেলা করতে হয়েছিল। শুধু তাই নয়, সেই সময়ের ওয়েবে ঠিক প্ল্যাটফর্মে তৈরি করা অনেক ক্ষমতা ছিল না।
আজকে দ্রুত এগিয়ে যান। জিনিসগুলি ব্যাপকভাবে পরিবর্তিত হয়েছে। আমাদের কাছে আগের তুলনায় এই ক্ষমতাগুলির আরও বেশি নয়, যে হারে সেগুলি উপলব্ধ হয়েছে তাও বেড়েছে। আমাকে আবার প্রশ্ন জিজ্ঞাসা করতে দিন: ওয়েব কীভাবে কাজ করে এবং আজ প্ল্যাটফর্মে কী উপলব্ধ রয়েছে সে সম্পর্কে আরও জানতে সময় নেওয়া কি আপনাকে সাহায্য করবে? একেবারে হ্যাঁ। আজকে ওয়েব প্ল্যাটফর্ম বুঝতে এবং ব্যবহার করতে শেখা আপনাকে অন্যান্য বিকাশকারীদের তুলনায় একটি বিশাল সুবিধার দিকে নিয়ে যায়। আপনি পারফরম্যান্স, অ্যাক্সেসযোগ্যতা, প্রতিক্রিয়াশীলতা, সেগুলি একসাথে কাজ করুন বা শুধুমাত্র শিপিং UI বৈশিষ্ট্য নিয়ে কাজ করুন না কেন, আপনি যদি একজন দায়িত্বশীল প্রকৌশলী হিসাবে এটি করতে চান, আপনার কাছে উপলব্ধ সরঞ্জামগুলি জেনে আপনাকে আপনার লক্ষ্যে দ্রুত এবং আরও ভালভাবে পৌঁছাতে সহায়তা করে৷ কিছু জিনিস যা আপনার আর লাইব্রেরির প্রয়োজন নেই আজকে কোন ব্রাউজারগুলিকে সমর্থন করে তা জেনে, প্রশ্নটি হল: আমরা কী খাদ করতে পারি? 2025 সালে বৃত্তাকার কোণগুলি করতে আমাদের কি একটি ডিভ উপাদান দরকার? অবশ্যই, আমরা করি না। বর্ডার-ব্যাসার্ধ বৈশিষ্ট্যটি এই সময়ে 15 বছরেরও বেশি সময় ধরে ব্যবহৃত সমস্ত ব্রাউজার দ্বারা সমর্থিত হয়েছে। এবং কোণার-আকৃতি শীঘ্রই আসছে, এমনকি অভিনব কোণগুলির জন্য। আসুন তুলনামূলকভাবে সাম্প্রতিক বৈশিষ্ট্যগুলি দেখে নেওয়া যাক যা এখন সমস্ত প্রধান ব্রাউজারে উপলব্ধ, এবং যা আপনি আপনার কোডবেসে বিদ্যমান নির্ভরতা প্রতিস্থাপন করতে ব্যবহার করতে পারেন। বিন্দু অবিলম্বে আপনার সমস্ত প্রিয় লাইব্রেরি খাঁচা এবং আপনার কোডবেস পুনর্লিখন করা হয় না. অন্য সব কিছুর জন্য, আপনাকে প্রথমে ব্রাউজার সমর্থন বিবেচনা করতে হবে এবং আপনার প্রকল্পের জন্য নির্দিষ্ট অন্যান্য বিষয়গুলির উপর ভিত্তি করে সিদ্ধান্ত নিতে হবে। নিম্নলিখিত বৈশিষ্ট্যগুলি তিনটি প্রধান ব্রাউজার ইঞ্জিনে (Chromium, WebKit, এবং Gecko) প্রয়োগ করা হয়েছে, তবে আপনার বিভিন্ন ব্রাউজার সমর্থন প্রয়োজনীয়তা থাকতে পারে যা আপনাকে এখনই সেগুলি ব্যবহার করতে বাধা দেয়৷ এই বৈশিষ্ট্যগুলি সম্পর্কে জানার জন্য এখন এখনও একটি ভাল সময়, যদিও, এবং সম্ভবত কোনও সময়ে সেগুলি ব্যবহার করার পরিকল্পনা করুন৷ পপোভার এবং ডায়ালগ Popover API,
অবশ্যই, আপনার ইন্টারনেট সংযোগের গতি সম্ভবত বৃদ্ধি পেয়েছে, তবে এটি সবার ক্ষেত্রে নয়। এবং প্রত্যেকেরই একই ডিভাইসের ক্ষমতা নেই। প্ল্যাটফর্মের সাথে আপনি যে কাজগুলি করতে পারেন তার জন্য তৃতীয় পক্ষের কোড টানানোর পরিবর্তে, সম্ভবত এর অর্থ হল আপনি আরও কোড পাঠান এবং সেইজন্য আপনি সাধারণত যা করতে চান তার চেয়ে কম গ্রাহকদের কাছে পৌঁছান। ওয়েবে, খারাপ লোডিং কর্মক্ষমতা বড় পরিত্যাগের হারের দিকে নিয়ে যায় এবং ব্র্যান্ডের খ্যাতিকে আঘাত করে। ডিভাইসে কম কোড চলছে উপরন্তু, আপনি আপনার গ্রাহকদের ডিভাইসে যে কোডটি পাঠান সেটি সম্ভবত দ্রুত চলে যদি এটি প্ল্যাটফর্মের উপরে কম জাভাস্ক্রিপ্ট বিমূর্ততা ব্যবহার করে। এটি সম্ভবত আরও প্রতিক্রিয়াশীল এবং ডিফল্টরূপে আরও অ্যাক্সেসযোগ্য। এই সব আরো এবং সুখী গ্রাহকদের বাড়ে. আমার সহকর্মী অ্যালেক্স রাসেলের বার্ষিক কর্মক্ষমতা বৈষম্যের ব্যবধান ব্লগটি দেখুন, যা দেখায় যে প্রিমিয়াম ডিভাইসগুলি সম্পদের অসমতার কারণে কোটি কোটি ব্যবহারকারীর বাজার থেকে অনেকাংশে অনুপস্থিত। এবং এই ব্যবধান কেবল সময়ের সাথে বাড়ছে।
অন্তর্নির্মিত রাজমিস্ত্রি লেআউট একটি ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্য যা শীঘ্রই আসছে এবং যেটি সম্পর্কে আমি খুব উত্তেজিত তা হল CSS রাজমিস্ত্রি।
রাজমিস্ত্রি কি তা ব্যাখ্যা করে শুরু করি। রাজমিস্ত্রি কি রাজমিস্ত্রি হল এক ধরনের লেআউট যা কয়েক বছর আগে Pinterest দ্বারা জনপ্রিয় করা হয়েছিল। এটি সামগ্রীর স্বাধীন ট্র্যাক তৈরি করে যার মধ্যে আইটেমগুলি ট্র্যাকের শুরুর কাছাকাছি যতটা সম্ভব নিজেদেরকে প্যাক আপ করে।
অনেক লোক রাজমিস্ত্রীকে পোর্টফোলিও এবং ফটো গ্যালারির জন্য একটি দুর্দান্ত বিকল্প হিসাবে দেখে, যা এটি অবশ্যই করতে পারে। কিন্তু আপনি Pinterest এ যা দেখেন তার চেয়ে রাজমিস্ত্রি আরও নমনীয় এবং এটি শুধু জলপ্রপাতের মতো লেআউটের মধ্যে সীমাবদ্ধ নয়। একটি রাজমিস্ত্রির বিন্যাসে:
ট্র্যাকগুলি কলাম বা সারি হতে পারে:
বিষয়বস্তুর ট্র্যাক সব একই আকারের হতে হবে না:
আইটেম একাধিক ট্র্যাক বিস্তৃত করতে পারে:
আইটেম নির্দিষ্ট ট্র্যাক উপর স্থাপন করা যেতে পারে; তাদের সবসময় স্বয়ংক্রিয় বসানো অ্যালগরিদম অনুসরণ করতে হবে না:
ডেমো Chromium-এ CSS রাজমিস্ত্রির আসন্ন বাস্তবায়ন ব্যবহার করে আমি এখানে কয়েকটি সাধারণ ডেমো তৈরি করেছি। একটি ফটো গ্যালারী ডেমো, কিভাবে আইটেম (এই ক্ষেত্রে শিরোনাম) একাধিক ট্র্যাক স্প্যান করতে পারে তা দেখাচ্ছে:
অন্য একটি ফটো গ্যালারি বিভিন্ন আকারের ট্র্যাক দেখাচ্ছে:
একটি নিউজ সাইট লেআউট যার কিছু ট্র্যাক অন্যদের থেকে চওড়া, এবং কিছু আইটেম লেআউটের পুরো প্রস্থে বিস্তৃত:
একটি কানবান বোর্ড দেখায় যে আইটেমগুলি নির্দিষ্ট ট্র্যাকের উপর স্থাপন করা যেতে পারে:
দ্রষ্টব্য: Theপূর্ববর্তী ডেমোগুলি ক্রোমিয়ামের একটি সংস্করণ দিয়ে তৈরি করা হয়েছিল যা এখনও বেশিরভাগ ওয়েব ব্যবহারকারীদের কাছে উপলব্ধ নয়, কারণ CSS রাজমিস্ত্রি শুধুমাত্র ব্রাউজারগুলিতে প্রয়োগ করা শুরু হয়েছে৷ যাইহোক, ওয়েব ডেভেলপাররা ইতিমধ্যেই কয়েক বছর ধরে রাজমিস্ত্রির লেআউট তৈরি করতে লাইব্রেরি ব্যবহার করছে। আজ রাজমিস্ত্রি ব্যবহার করে সাইট প্রকৃতপক্ষে, রাজমিস্ত্রি আজ ওয়েবে বেশ সাধারণ। Pinterest ছাড়াও আমি এখানে কয়েকটি উদাহরণ পেয়েছি:
এবং আরও কয়েকটি, কম স্পষ্ট, উদাহরণ:
সুতরাং, কিভাবে এই লেআউট তৈরি করা হয়েছিল? ওয়ার্কঅ্যারাউন্ড একটি কৌশল যা আমি ব্যবহার করেছি তা হল পরিবর্তে একটি ফ্লেক্সবক্স লেআউট ব্যবহার করা, এর দিকটি কলামে পরিবর্তন করা এবং এটি মোড়ানোর জন্য সেট করা। এইভাবে, আপনি একাধিক, স্বাধীন কলামে বিভিন্ন উচ্চতার আইটেম রাখতে পারেন, একটি রাজমিস্ত্রির লেআউটের ছাপ দিতে পারেন:
যাইহোক, এই সমাধানের দুটি সীমাবদ্ধতা রয়েছে:
আইটেম ক্রম এটি একটি বাস্তব রাজমিস্ত্রি লেআউট সঙ্গে হবে কি থেকে ভিন্ন. ফ্লেক্সবক্সের সাথে, আইটেমগুলি প্রথমে প্রথম কলামটি পূরণ করে এবং যখন এটি পূর্ণ হয়, তারপর পরবর্তী কলামে যান। রাজমিস্ত্রির সাহায্যে, আইটেমগুলি যে ট্র্যাকে (অথবা এই ক্ষেত্রে কলামে) আরও বেশি জায়গা পাওয়া যায় সেখানে স্ট্যাক করবে। কিন্তু এছাড়াও, এবং সম্ভবত আরও গুরুত্বপূর্ণভাবে, এই সমাধানের জন্য আপনাকে ফ্লেক্সবক্স পাত্রে একটি নির্দিষ্ট উচ্চতা সেট করতে হবে; অন্যথায়, কোন মোড়ানো ঘটবে না।
তৃতীয় পক্ষের রাজমিস্ত্রি লাইব্রেরি আরও উন্নত ক্ষেত্রে, বিকাশকারীরা লাইব্রেরি ব্যবহার করে আসছে। এটির জন্য সবচেয়ে সুপরিচিত এবং জনপ্রিয় লাইব্রেরিটিকে কেবল রাজমিস্ত্রি বলা হয় এবং এটি এনপিএম অনুসারে প্রতি সপ্তাহে প্রায় 200,000 বার ডাউনলোড হয়। স্কোয়ারস্পেস একটি লেআউট উপাদানও প্রদান করে যা একটি নো-কোড বিকল্পের জন্য একটি রাজমিস্ত্রির লেআউট রেন্ডার করে এবং অনেক সাইট এটি ব্যবহার করে। এই দুটি বিকল্পই লেআউটে আইটেম রাখতে JavaScript কোড ব্যবহার করে। অন্তর্নির্মিত রাজমিস্ত্রি আমি সত্যিই উত্তেজিত যে রাজমিস্ত্রি এখন একটি অন্তর্নির্মিত CSS বৈশিষ্ট্য হিসাবে ব্রাউজারগুলিতে প্রদর্শিত হতে শুরু করেছে। সময়ের সাথে সাথে, আপনি গ্রিড বা ফ্লেক্সবক্সের মতোই রাজমিস্ত্রি ব্যবহার করতে সক্ষম হবেন, অর্থাৎ কোনো সমাধান বা তৃতীয় পক্ষের কোডের প্রয়োজন ছাড়াই। Microsoft-এ আমার দল ক্রোমিয়াম ওপেন সোর্স প্রজেক্টে বিল্ট-ইন রাজমিস্ত্রি সমর্থন বাস্তবায়ন করছে, যার উপর ভিত্তি করে এজ, ক্রোম এবং অন্যান্য অনেক ব্রাউজার রয়েছে। Mozilla প্রকৃতপক্ষে প্রথম ব্রাউজার বিক্রেতা যিনি 2020 সালে রাজমিস্ত্রির একটি পরীক্ষামূলক বাস্তবায়নের প্রস্তাব করেছিলেন। এবং অ্যাপলও এই নতুন ওয়েব লেআউটটিকে আদিম ঘটানোর জন্য খুব আগ্রহী ছিল। বৈশিষ্ট্যটিকে মানসম্মত করার কাজটিও এগিয়ে চলছে, সাধারণ দিকনির্দেশ এবং এমনকি একটি নতুন ডিসপ্লে টাইপ ডিসপ্লে: গ্রিড-লেন সম্পর্কে CSS ওয়ার্কিং গ্রুপের মধ্যে চুক্তির সাথে। আপনি যদি রাজমিস্ত্রি সম্পর্কে আরও জানতে এবং অগ্রগতি ট্র্যাক করতে চান, আমার CSS রাজমিস্ত্রি সংস্থান পৃষ্ঠাটি দেখুন। সময়ের সাথে সাথে, যখন রাজমিস্ত্রি একটি বেসলাইন বৈশিষ্ট্য হয়ে ওঠে, ঠিক গ্রিড বা ফ্লেক্সবক্সের মতো, আমরা সহজভাবে এটি ব্যবহার করতে এবং এর থেকে উপকৃত হতে পারব:
আরও ভালো কর্মক্ষমতা, উন্নত প্রতিক্রিয়াশীলতা, ব্যবহার সহজ এবং সহজ কোড.
আসুন এইগুলি ঘনিষ্ঠভাবে দেখে নেওয়া যাক। ভালো পারফরম্যান্স আপনার নিজের রাজমিস্ত্রির মতো লেআউট সিস্টেম তৈরি করা, বা পরিবর্তে একটি তৃতীয় পক্ষের লাইব্রেরি ব্যবহার করার অর্থ হল স্ক্রিনে আইটেমগুলি রাখার জন্য আপনাকে জাভাস্ক্রিপ্ট কোড চালাতে হবে। এর মানে এই যে এই কোডটি রেন্ডার ব্লকিং হবে। প্রকৃতপক্ষে, জাভাস্ক্রিপ্ট কোডটি চালু না হওয়া পর্যন্ত হয় কিছুই প্রদর্শিত হবে না, বা জিনিসগুলি সঠিক জায়গায় বা সঠিক আকারের হবে না। রাজমিস্ত্রির লেআউট প্রায়ই একটি ওয়েব পৃষ্ঠার প্রধান অংশের জন্য ব্যবহার করা হয়, যার অর্থ কোডটি আপনার প্রধান বিষয়বস্তুকে অন্যথায় যা থাকতে পারে তার চেয়ে পরে প্রদর্শিত হবে, যা আপনার LCP, বা সবচেয়ে বড় বিষয়বস্তুযুক্ত পেইন্ট মেট্রিককে অবনমিত করবে, যা অনুভূত কর্মক্ষমতা এবং সার্চ ইঞ্জিন অপ্টিমাইজেশানে একটি বড় ভূমিকা পালন করে। আমি একটি সাধারণ লেআউট সহ এবং DevTools-এ একটি ধীর 4G সংযোগ অনুকরণ করে রাজমিস্ত্রি JS লাইব্রেরি পরীক্ষা করেছি। লাইব্রেরিটি খুব বড় নয় (24KB, 7.8KB gzipped), কিন্তু আমার পরীক্ষার শর্তে লোড হতে 600ms লেগেছে। এখানে একটি পারফরম্যান্স রেকর্ডিং দেখানো হয়েছে যে ম্যাসনরি লাইব্রেরির জন্য দীর্ঘ 600ms লোড টাইম, এবং এটি ঘটানোর সময় অন্য কোনও রেন্ডারিং কার্যকলাপ ঘটেনি:
উপরন্তু, প্রাথমিক লোড সময়ের পরে, ডাউনলোড করা স্ক্রিপ্টটি পার্স করা, কম্পাইল করা এবং তারপর চালানোর প্রয়োজন ছিল। যা সব, আগে উল্লিখিত, পৃষ্ঠার রেন্ডারিং ব্লক করা হয়েছে. ব্রাউজারে একটি অন্তর্নির্মিত রাজমিস্ত্রি বাস্তবায়নের সাথে, আমাদের লোড এবং চালানোর জন্য একটি স্ক্রিপ্ট থাকবে না। প্রাথমিক পৃষ্ঠা রেন্ডারিং ধাপের সময় ব্রাউজার ইঞ্জিনটি তার কাজটি করবে। ভাল প্রতিক্রিয়াশীলতা যখন একটি পৃষ্ঠা প্রথম লোড হয়, তখন ব্রাউজার উইন্ডোর আকার পরিবর্তন করা হলে সেই পৃষ্ঠার লেআউটটি আবার রেন্ডার করা হয়। এই মুহুর্তে, যদিও, যদি পৃষ্ঠাটি রাজমিস্ত্রি JS লাইব্রেরি ব্যবহার করে, তাহলে স্ক্রিপ্টটি আবার লোড করার দরকার নেই, কারণ এটি ইতিমধ্যেইএখানে যাইহোক, সঠিক জায়গায় আইটেম সরানো কোড চালানো প্রয়োজন. এখন এই নির্দিষ্ট লাইব্রেরি পৃষ্ঠা লোড করার সময় এটি করতে বেশ দ্রুত বলে মনে হচ্ছে। যাইহোক, এটি আইটেমগুলিকে অ্যানিমেট করে যখন তাদের উইন্ডোর আকার পরিবর্তনের সময় অন্য জায়গায় যেতে হবে এবং এটি একটি বড় পার্থক্য করে। অবশ্যই, ব্যবহারকারীরা তাদের ব্রাউজার উইন্ডোর আকার পরিবর্তন করতে সময় ব্যয় করেন না যতটা আমরা ডেভেলপাররা করি। কিন্তু এই অ্যানিমেটেড রিসাইজিং অভিজ্ঞতা বেশ ঝাঁকুনিপূর্ণ হতে পারে এবং পৃষ্ঠাটিকে তার নতুন আকারের সাথে খাপ খাইয়ে নিতে অনুভূত সময় যোগ করে। ব্যবহার সহজ এবং সহজ কোড একটি ওয়েব বৈশিষ্ট্য ব্যবহার করা কতটা সহজ এবং কোডটি দেখতে কতটা সহজ তা হল গুরুত্বপূর্ণ বিষয় যা আপনার দলের জন্য একটি বড় পার্থক্য আনতে পারে৷ তারা অবশ্যই চূড়ান্ত ব্যবহারকারীর অভিজ্ঞতার মতো গুরুত্বপূর্ণ হতে পারে না, তবে বিকাশকারীর অভিজ্ঞতা রক্ষণাবেক্ষণকে প্রভাবিত করে। একটি অন্তর্নির্মিত ওয়েব বৈশিষ্ট্য ব্যবহার করা সেই ফ্রন্টে গুরুত্বপূর্ণ সুবিধাগুলির সাথে আসে:
বিকাশকারীরা যারা ইতিমধ্যেই HTML, CSS এবং JS জানেন তারা সম্ভবত সেই বৈশিষ্ট্যটি সহজেই ব্যবহার করতে সক্ষম হবেন কারণ এটি ভালভাবে সংহত করার জন্য এবং বাকি ওয়েব প্ল্যাটফর্মের সাথে সামঞ্জস্যপূর্ণ হওয়ার জন্য ডিজাইন করা হয়েছে। বৈশিষ্ট্যটি কীভাবে ব্যবহার করা হয় তাতে পরিবর্তনগুলি ভাঙার কোনও ঝুঁকি নেই। সেই বৈশিষ্ট্যটি অবমূল্যায়িত বা অপরিবর্তিত হওয়ার ঝুঁকি প্রায় শূন্য।
বিল্ট-ইন রাজমিস্ত্রির ক্ষেত্রে, যেহেতু এটি একটি লেআউট আদিম, আপনি এটিকে CSS থেকে ব্যবহার করেন, ঠিক গ্রিড বা ফ্লেক্সবক্সের মতো, কোনো JS জড়িত নেই। এছাড়াও, অন্যান্য লেআউট-সম্পর্কিত CSS বৈশিষ্ট্য, যেমন গ্যাপ, আপনি তাদের প্রত্যাশা অনুযায়ী কাজ করে। সম্পর্কে জানার জন্য কোন কৌশল বা সমাধান নেই, এবং আপনি যা শিখেন তা MDN-এ নথিভুক্ত করা হয়। রাজমিস্ত্রি JS lib-এর জন্য, আরম্ভ করা একটু জটিল: কলাম এবং ফাঁকের মাপ সেট করার জন্য লুকানো HTML উপাদানগুলির সাথে একটি নির্দিষ্ট সিনট্যাক্স সহ একটি ডেটা অ্যাট্রিবিউট প্রয়োজন। এছাড়াও, আপনি যদি কলামগুলি স্প্যান করতে চান তবে সমস্যাগুলি এড়াতে আপনাকে ফাঁকের আকারটি অন্তর্ভুক্ত করতে হবে:
<স্টাইল> .ট্র্যাক-সাইজার, আইটেম { প্রস্থ: 20%; } .gutter-sizer { প্রস্থ: 1rem; } আইটেম { উচ্চতা: 100px; মার্জিন-ব্লক-এন্ড: 1rem; } .item:nth-child(বিজোড়) { উচ্চতা: 200px; } .item--প্রস্থ2 { প্রস্থ: calc(40% + 1rem); }
একটি অন্তর্নির্মিত রাজমিস্ত্রি বাস্তবায়ন দেখতে কেমন হবে এর সাথে এর তুলনা করা যাক: <স্টাইল> .পাত্র { প্রদর্শন: গ্রিড-লেন; গ্রিড-লেন: পুনরাবৃত্তি (4, 20%); ফাঁক: 1rem; } আইটেম { উচ্চতা: 100px; } .item:nth-child(বিজোড়) { উচ্চতা: 200px; } .item--প্রস্থ2 { গ্রিড-কলাম: স্প্যান 2; }
সহজ, আরও কমপ্যাক্ট কোড যা শুধু ফাঁকের মতো জিনিস ব্যবহার করতে পারে এবং যেখানে স্প্যান 2 দিয়ে স্প্যানিং ট্র্যাকগুলি করা হয়, ঠিক গ্রিডের মতো, এবং আপনাকে ফাঁকের আকার সহ সঠিক প্রস্থ গণনা করতে হবে না। কী পাওয়া যায় এবং কখন পাওয়া যায় তা কীভাবে জানবেন? সামগ্রিকভাবে, প্রশ্নটি আসলেই নয় যে আপনার যদি জেএস লাইব্রেরিতে অন্তর্নির্মিত রাজমিস্ত্রি ব্যবহার করা উচিত, বরং কখন। ম্যাসনরি জেএস লাইব্রেরিটি আশ্চর্যজনক এবং বহু বছর ধরে ওয়েব প্ল্যাটফর্মে এবং অনেক খুশি ডেভেলপার এবং ব্যবহারকারীদের জন্য একটি ফাঁক পূরণ করছে। এটির কয়েকটি ত্রুটি রয়েছে যদি আপনি এটিকে একটি অন্তর্নির্মিত রাজমিস্ত্রির বাস্তবায়নের সাথে তুলনা করেন, অবশ্যই, তবে সেই বাস্তবায়ন প্রস্তুত না হলে সেগুলি গুরুত্বপূর্ণ নয়। এই দুর্দান্ত নতুন ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্যগুলি তালিকাভুক্ত করা আমার পক্ষে সহজ কারণ আমি একটি ব্রাউজার বিক্রেতার সাথে কাজ করি এবং তাই কী আসছে তা জানার প্রবণতা। কিন্তু ডেভেলপাররা প্রায়ই শেয়ার করে, জরিপের পর জরিপ করে, যে নতুন জিনিসের ট্র্যাক রাখা কঠিন। অবগত থাকা কঠিন, এবং কোম্পানিগুলি সর্বদা শেখার অগ্রাধিকার দেয় না। এটিতে সহায়তা করার জন্য, এখানে কয়েকটি সংস্থান রয়েছে যা সহজ এবং কমপ্যাক্ট উপায়ে আপডেটগুলি সরবরাহ করে যাতে আপনি আপনার প্রয়োজনীয় তথ্য দ্রুত পেতে পারেন:
ওয়েব প্ল্যাটফর্মে এক্সপ্লোরার সাইট রয়েছে: আপনি এর রিলিজ নোট পৃষ্ঠায় আগ্রহী হতে পারে. এবং, আপনি যদি RSS পছন্দ করেন, রিলিজ নোট ফিড, সেইসাথে বেসলাইন নতুনভাবে উপলব্ধ এবং ব্যাপকভাবে উপলব্ধ ফিডগুলি দেখুন৷
ওয়েবপ্ল্যাটফর্ম স্ট্যাটাস ড্যাশবোর্ড: আপনি এর বিভিন্ন বেসলাইন বছরের পৃষ্ঠাগুলি পছন্দ করতে পারেন।
Chrome প্ল্যাটফর্ম স্ট্যাটাসের রোডম্যাপ পৃষ্ঠা।
আপনার যদি একটু বেশি সময় থাকে, আপনি ব্রাউজার বিক্রেতাদের রিলিজ নোটগুলিতেও আগ্রহী হতে পারেন:
ক্রোম প্রান্ত ফায়ারফক্স সাফারি
আরও বেশি সম্পদের জন্য, আমার নেভিগেটিং দ্য ওয়েব প্ল্যাটফর্ম চিটশিট দেখুন। আমার জিনিস এখনও বাস্তবায়িত হয় না এটি সমস্যার অন্য দিক। এমনকি যদি আপনি সময়, শক্তি এবং ট্র্যাক রাখার উপায় খুঁজে পান, তবুও আপনার ভয়েস শোনা এবং আপনার প্রিয় বৈশিষ্ট্যগুলি বাস্তবায়িত করা নিয়ে হতাশা রয়েছে৷ হতে পারে আপনি একটি নির্দিষ্ট বাগ সমাধানের জন্য কয়েক বছর ধরে অপেক্ষা করছেন, বা একটি নির্দিষ্ট বৈশিষ্ট্য একটি ব্রাউজারে পাঠানোর জন্য যেখানে এটি এখনও অনুপস্থিত। আমি যা বলব তা হল ব্রাউজার বিক্রেতারা শোনেন। আমি বেশ কয়েকটি ক্রস-অর্গানাইজেশন টিমের অংশ যেখানে আমরা সব সময় বিকাশকারী সংকেত এবং প্রতিক্রিয়া নিয়ে আলোচনা করি। আমরা প্রতিটি ব্রাউজার বিক্রেতার অভ্যন্তরীণ এবং ফোরাম, ওপেন সোর্স প্রজেক্ট, ব্লগ এবং সমীক্ষায় বাহ্যিক/জনসাধারণ উভয়েই প্রতিক্রিয়ার বিভিন্ন উৎস দেখি। এবং, আমরা সবসময় ডেভেলপারদের জন্য তাদের নির্দিষ্ট চাহিদা শেয়ার করার এবং কেস ব্যবহারের জন্য আরও ভাল উপায় তৈরি করার চেষ্টা করি। সুতরাং, আপনি যদি পারেন, অনুগ্রহ করে ব্রাউজার বিক্রেতাদের কাছ থেকে আরও বেশি কিছু দাবি করুন এবং আপনার প্রয়োজনীয় বৈশিষ্ট্যগুলি বাস্তবায়নের জন্য আমাদের চাপ দিন। আমি বুঝতে পারি যে এটি সময় নেয়, এবং এটি ভীতিকরও হতে পারে (প্রবেশের জন্য একটি উচ্চ বাধা উল্লেখ না করা), কিন্তু এটি কাজ করে। আপনার (বা আপনার কোম্পানির) কণ্ঠস্বর শোনার জন্য এখানে কয়েকটি উপায় রয়েছে: বার্ষিক স্টেট অফ জেএস, স্টেট অফ সিএসএস এবং স্টেট অফ এইচটিএমএল সমীক্ষাগুলি নিন। ব্রাউজার বিক্রেতারা কীভাবে তাদের কাজকে অগ্রাধিকার দেয় তাতে তারা একটি বড় ভূমিকা পালন করে। আপনার যদি ব্রাউজার জুড়ে ধারাবাহিকভাবে প্রয়োগ করার জন্য একটি নির্দিষ্ট মান-ভিত্তিক API প্রয়োজন হয়, তাহলে পরবর্তী ইন্টারপ প্রকল্পের পুনরাবৃত্তিতে একটি প্রস্তাব জমা দেওয়ার কথা বিবেচনা করুন। এটির জন্য আরও সময় প্রয়োজন, কিন্তু বিবেচনা করুন কিভাবে Shopify এবং RUMvision Interop 2026-এর জন্য তাদের পছন্দের তালিকা ভাগ করেছে৷ ব্রাউজার বিক্রেতাদের অগ্রাধিকার দেওয়ার জন্য এই ধরনের বিশদ তথ্য খুবই উপযোগী হতে পারে৷ ব্রাউজার বিক্রেতাদের প্রভাবিত করার জন্য আরও দরকারী লিঙ্কগুলির জন্য, আমার নেভিগেটিং দ্য ওয়েব প্ল্যাটফর্ম চিটশিট দেখুন। উপসংহার বন্ধ করার জন্য, আমি আশা করি এই নিবন্ধটি আপনাকে চিন্তা করার জন্য কয়েকটি জিনিস রেখে গেছে:
রাজমিস্ত্রি এবং অন্যান্য আসন্ন ওয়েব বৈশিষ্ট্যগুলির জন্য উত্তেজনা। কয়েকটি ওয়েব বৈশিষ্ট্য আপনি ব্যবহার করা শুরু করতে চাইতে পারেন৷ কাস্টম বা 3য়-পার্টি কোডের কয়েকটি টুকরো আপনি অন্তর্নির্মিত বৈশিষ্ট্যগুলির পক্ষে সরাতে সক্ষম হতে পারেন। যা আসছে তার ট্র্যাক রাখার এবং ব্রাউজার বিক্রেতাদের প্রভাবিত করার কয়েকটি উপায়।
আরও গুরুত্বপূর্ণ, আমি আশা করি আমি আপনাকে ওয়েব প্ল্যাটফর্মটিকে এর সম্পূর্ণ সম্ভাবনার সাথে ব্যবহার করার সুবিধাগুলি সম্পর্কে বিশ্বাস করেছি।
