প্ৰায় ১৫ বছৰ আগতে মই এটা কোম্পানীত কাম কৰি আছিলো য’ত আমি ট্ৰেভেল এজেণ্ট, বিমানবন্দৰৰ কৰ্মী, আৰু বিমান কোম্পানীৰ বাবে এপ নিৰ্মাণ কৰিছিলো। আমি ইউআই উপাদান আৰু একক-পৃষ্ঠা এপ ক্ষমতাৰ বাবে আমাৰ নিজা ইন-হাউছ ফ্ৰেমৱৰ্কও নিৰ্মাণ কৰিলোঁ। আমাৰ সকলো বস্তুৰ বাবে উপাদান আছিল: ক্ষেত্ৰ, বুটাম, টেব, পৰিসীমা, ডাটাটেবুল, মেনু, ডেটপিকাৰ, নিৰ্বাচন, আৰু মাল্টিচিলেক্ট। আনকি আমাৰ এটা div কম্পোনেণ্টো আছিল। আমাৰ div উপাদানটো বাইদেউ বৰ ভাল আছিল, ই আমাক সকলো ব্ৰাউজাৰতে ঘূৰণীয়া কোণ কৰিবলৈ অনুমতি দিছিল, যিটো বিশ্বাস কৰক বা নকৰক, সেই সময়ত কৰাটো সহজ কাম নাছিল।
আমাৰ কাম আমাৰ ইতিহাসৰ এনে এটা সময়ত হৈছিল যেতিয়া জে এছ, এজাক্স, আৰু ডাইনামিক এইচ টি এম এলক আমাক ভৱিষ্যতলৈ লৈ যোৱা এক বিপ্লৱ হিচাপে দেখা গৈছিল। হঠাতে আমি এটা পৃষ্ঠা গতিশীলভাৱে আপডেট কৰিব পাৰিলোঁ, চাৰ্ভাৰৰ পৰা ডাটা ল’ব পাৰিলোঁ, আৰু আন পৃষ্ঠালৈ নেভিগেট কৰিবলগীয়া হোৱাৰ পৰা হাত সাৰিব পাৰিলোঁ, যিটো লেহেমীয়া বুলি দেখা গৈছিল আৰু দুয়োটা পৃষ্ঠাৰ মাজত পৰ্দাত এটা ডাঙৰ বগা আয়তক্ষেত্ৰ ফিচফিচাইছিল। জেফ এটউডে (ষ্টেকঅভাৰফ্ল’ৰ প্ৰতিষ্ঠাপক) জনপ্ৰিয় কৰি তোলা এটা বাক্যাংশ আছিল, য’ত লিখা আছিল: “জাভাস্ক্রিপ্টত লিখিব পৰা যিকোনো এপ্লিকেচন অৱশেষত জাভাস্ক্রিপ্টত লিখা হ’ব।”— জেফ এটউড
সেই সময়ত আমাৰ বাবে এইটো আচলতে গৈ সেই এপবোৰ তৈয়াৰ কৰাৰ সাহস যেন লাগিছিল। জে এছৰ লগত সকলো কাম কৰিবলৈ কম্বল অনুমোদন যেন লাগিল। গতিকে আমি জে এছৰ সৈতে সকলো কৰিলোঁ, আৰু আমি সঁচাকৈয়ে কাম কৰাৰ আন উপায়ৰ ওপৰত গৱেষণা কৰিবলৈ সময় উলিয়াব পৰা নাছিলো। আমি সঁচাকৈয়ে HTML আৰু CSS-এ কি কৰিব পাৰে সেই বিষয়ে সঠিকভাৱে শিকিবলৈ প্ৰৰোচনা অনুভৱ কৰা নাছিলো। আমি ৱেবক সম্পূৰ্ণৰূপে এটা বিকশিত এপ প্লেটফৰ্ম হিচাপে গ্ৰহণ কৰা নাছিলো। আমি বেছিভাগেই ইয়াক আমি কাম কৰিবলগীয়া কাম হিচাপে দেখিছিলো, বিশেষকৈ ব্ৰাউজাৰ সমৰ্থনৰ ক্ষেত্ৰত। আমি মাত্ৰ কামবোৰ সম্পূৰ্ণ কৰিবলৈ ইয়াত আৰু জে এছ নিক্ষেপ কৰিব পাৰিলোঁহেঁতেন। ৱেব কেনেকৈ কাম কৰে আৰু প্লেটফৰ্মত কি উপলব্ধ সেই বিষয়ে অধিক জানিবলৈ সময় উলিয়ালে মোক সহায় কৰিলেহেঁতেননে? নিশ্চিতভাৱে, মই হয়তো এনেকুৱা এটা গোট ক’ড শ্বেভ কৰিব পাৰিলোহেঁতেন যিবোৰৰ সঁচাকৈয়ে প্ৰয়োজন নাছিল। কিন্তু, সেই সময়ত হয়তো ইমান নহয়। আপুনি দেখিছে, তেতিয়া ব্ৰাউজাৰৰ পাৰ্থক্য যথেষ্ট উল্লেখযোগ্য আছিল। এইটো এটা সময় আছিল যেতিয়া ইণ্টাৰনেট এক্সপ্ল’ৰাৰ এতিয়াও প্ৰধান ব্ৰাউজাৰ আছিল, ফায়াৰফক্স আছিল নিকট দ্বিতীয়, কিন্তু ক্ৰ’মে দ্ৰুতগতিত জনপ্ৰিয়তা লাভ কৰাৰ বাবে বজাৰৰ অংশীদাৰিত্ব হেৰুৱাবলৈ আৰম্ভ কৰিছিল। যদিও Chrome আৰু Firefox ৱেব মানদণ্ডৰ ওপৰত একমত হোৱাত যথেষ্ট ভাল আছিল, আমাৰ এপসমূহ যিবোৰ পৰিৱেশত চলি আছিল, তাৰ অৰ্থ আছিল যে আমি IE6 দীৰ্ঘ সময়ৰ বাবে সমৰ্থন কৰিবলগীয়া হৈছিল। আনকি যেতিয়া আমাক IE8 সমৰ্থন কৰিবলৈ অনুমতি দিয়া হৈছিল, তেতিয়াও আমি ব্ৰাউজাৰৰ মাজত বহু পাৰ্থক্যৰ সৈতে মোকাবিলা কৰিবলগীয়া হৈছিল। কেৱল সেয়াই নহয়, সেই সময়ৰ ৱেবত ইমানবোৰ ক্ষমতা প্লেটফৰ্মটোৰ ভিতৰতে নিৰ্মাণ কৰা নাছিল।
আজিলৈ দ্ৰুতগতিত আগবাঢ়ি যাওক। কথাবোৰ প্ৰচণ্ড পৰিৱৰ্তন হৈছে। কেৱল আমাৰ হাতত এই ক্ষমতাসমূহ পূৰ্বতকৈ অধিক হোৱাই নহয়, ইয়াৰ উপলব্ধ হোৱাৰ হাৰও বৃদ্ধি পাইছে। তেন্তে মই আকৌ এবাৰ প্ৰশ্নটো সুধিম: ৱেব কেনেকৈ কাম কৰে আৰু প্লেটফৰ্মত কি উপলব্ধ সেই বিষয়ে অধিক জানিবলৈ সময় উলিয়ালে আজি আপোনাক সহায় কৰিবনে? একেবাৰে হয়। আজি ৱেব প্লেটফৰ্ম বুজিবলৈ আৰু ব্যৱহাৰ কৰিবলৈ শিকাটোৱে আপোনাক অন্য ডেভেলপাৰৰ তুলনাত এক বৃহৎ সুবিধাত পেলায়। আপুনি পৰিৱেশন, অভিগম্যতা, প্ৰতিক্ৰিয়াশীলতা, সকলো একেলগে কাম কৰক, বা কেৱল UI বৈশিষ্ট্যসমূহ প্ৰেৰণ কৰক, যদি আপুনি ইয়াক এজন দায়িত্বশীল অভিযন্তা হিচাপে কৰিব বিচাৰে, আপোনাৰ বাবে উপলব্ধ সঁজুলিসমূহ জনাটোৱে আপোনাক আপোনাৰ লক্ষ্যসমূহ দ্ৰুত আৰু ভালদৰে পোৱাত সহায় কৰে। কিছুমান কথাৰ বাবে আপুনি হয়তো আৰু লাইব্ৰেৰীৰ প্ৰয়োজন নহ'বও পাৰে আজি ব্ৰাউজাৰে কি সমৰ্থন কৰে সেই কথা জানিলে, তেন্তে প্ৰশ্নটো হ’ল: আমি কি খান্দি পেলাব পাৰো? ২০২৫ চনত গোল কোণ কৰিবলৈ আমাক div কম্পোনেণ্টৰ প্ৰয়োজন নেকি? অৱশ্যে আমি নকৰোঁ৷ সীমা-ব্যাসাৰ্ধ বৈশিষ্ট্য এই সময়ত ১৫ বছৰতকৈ অধিক সময় ধৰি বৰ্তমান ব্যৱহৃত সকলো ব্ৰাউজাৰে সমৰ্থিত। আৰু চুক-আকৃতিও অতি সোনকালে আহি আছে, আৰু অধিক আড়ম্বৰপূৰ্ণ চুকবোৰৰ বাবে। তুলনামূলকভাৱে শেহতীয়া বৈশিষ্ট্যসমূহ চাওঁ আহক যিবোৰ এতিয়া সকলো প্ৰধান ব্ৰাউজাৰত উপলব্ধ, আৰু যিবোৰ আপুনি আপোনাৰ ক’ডবেছত বৰ্তমানৰ নিৰ্ভৰশীলতাসমূহ সলনি কৰিবলে ব্যৱহাৰ কৰিব পাৰে। কথাটো হ'ল আপোনাৰ সকলো প্ৰিয় লাইব্ৰেৰী তৎক্ষণাত ত্যাগ কৰি আপোনাৰ ক'ডবেছ পুনৰ লিখা নহয়। বাকী সকলোবোৰৰ কথা ক’বলৈ গ’লে, আপুনি প্ৰথমে ব্ৰাউজাৰ সমৰ্থনৰ কথা লক্ষ্য কৰিব লাগিব আৰু আপোনাৰ প্ৰকল্পৰ বাবে নিৰ্দিষ্ট অন্য কাৰকৰ ওপৰত ভিত্তি কৰি সিদ্ধান্ত ল’ব লাগিব৷ নিম্নলিখিত বৈশিষ্ট্যসমূহ তিনিটা মূল ব্ৰাউজাৰ ইঞ্জিনত (Chromium, WebKit, আৰু Gecko) প্ৰণয়ন কৰা হৈছে, কিন্তু আপোনাৰ বিভিন্ন ব্ৰাউজাৰ সমৰ্থনৰ প্ৰয়োজনীয়তা থাকিব পাৰে যি আপোনাক সিহতক লগে লগে ব্যৱহাৰ কৰাত বাধা দিয়ে। এতিয়া এই বৈশিষ্ট্যসমূহৰ বিষয়ে জানিবলৈ এতিয়াও এটা ভাল সময়, যদিও, আৰু হয়তো এটা সময়ত এইবোৰ ব্যৱহাৰ কৰাৰ পৰিকল্পনা কৰক। Popovers আৰু সংলাপসমূহ Popover API,
নিশ্চিতভাৱে, আপোনাৰ ইণ্টাৰনেট সংযোগৰ গতিও হয়তো বৃদ্ধি পাইছে, কিন্তু সকলোৰে বাবে সেয়া নহয়৷ আৰু সকলোৰে ডিভাইচৰ ক্ষমতাও একে নহয়। আপুনি প্লেটফৰ্মৰ সৈতে কৰিব পৰা কামবোৰৰ বাবে তৃতীয়-পক্ষৰ ক'ড টানি অনাৰ অৰ্থ হ'ল আপুনি অধিক ক'ড প্ৰেৰণ কৰে, আৰু সেয়েহে আপুনি সাধাৰণতে কৰাতকৈ কম গ্ৰাহকৰ ওচৰলৈ যায়। ৱেবত বেয়া লোডিং পৰিৱেশনে বৃহৎ পৰিত্যাগ হাৰলৈ লৈ যায় আৰু ব্ৰেণ্ডৰ সুনামত আঘাত কৰে। ডিভাইচসমূহত কম ক'ড চলোৱা ইয়াৰ উপৰিও, আপুনি আপোনাৰ গ্ৰাহকৰ ডিভাইচসমূহত প্ৰেৰণ কৰা ক'ড সম্ভৱতঃ দ্ৰুতভাৱে চলিব যদি ই প্লেটফৰ্মৰ ওপৰত কম জাভাস্ক্রিপ্ট বিমূৰ্তকৰণ ব্যৱহাৰ কৰে। ইয়াৰ উপৰিও ই সম্ভৱতঃ অধিক সঁহাৰিজনক আৰু অবিকল্পিতভাৱে অধিক অভিগমযোগ্য৷ এই সকলোবোৰৰ ফলত গ্ৰাহক অধিক আৰু সুখী হয়। মোৰ সহকৰ্মী এলেক্স ৰাছেলৰ বছৰেকীয়া পৰিৱেশন বৈষম্যৰ ব্যৱধান ব্লগটো চাওক, যিয়ে দেখুৱাইছে যে সম্পদৰ বৈষম্যৰ বাবে কোটি কোটি ব্যৱহাৰকাৰী থকা বজাৰত প্ৰিমিয়াম ডিভাইচসমূহ বহুলাংশে অনুপস্থিত। আৰু এই ব্যৱধান সময়ৰ লগে লগে বাঢ়িছেহে।
বিল্ট-ইন মেছনৰী লেআউট অতি সোনকালে আহিবলগীয়া এটা ৱেব প্লেটফৰ্ম বৈশিষ্ট্য আৰু যাৰ বাবে মই অতিশয় উৎসাহিত হৈছো সেয়া হৈছে CSS Masonry৷
আৰম্ভণিতে মেছনৰী কি সেই বিষয়ে বুজাই দিওঁ। শিলৰ কাম কি ৰাজমিস্ত্ৰী হৈছে এক প্ৰকাৰৰ বিন্যাস যিটো বছৰ বছৰ আগতে Pinterest য়ে জনপ্ৰিয় কৰি তুলিছিল। ই বিষয়বস্তুৰ স্বতন্ত্ৰ ট্ৰেক সৃষ্টি কৰে যাৰ ভিতৰত বস্তুবোৰে নিজকে ট্ৰেকৰ আৰম্ভণিৰ যিমান পাৰে ওচৰত পেক কৰে।
বহুতে মেছনৰীক পৰ্টফলিঅ’ আৰু ফটো গেলেৰীৰ বাবে এক উত্তম বিকল্প হিচাপে লয়, যিটো ই নিশ্চিতভাৱে কৰিব পাৰে। কিন্তু আপুনি Pinterest ত দেখাতকৈ মেছনৰী অধিক নমনীয়, আৰু ই কেৱল জলপ্ৰপাতৰ দৰে বিন্যাসত সীমাবদ্ধ নহয়। এটা মেছনৰী বিন্যাসত:
ট্ৰেকসমূহ স্তম্ভ বা শাৰী হ'ব পাৰে:
বিষয়বস্তুৰ ট্ৰেকসমূহ সকলো একে আকাৰৰ হ’ব নালাগে:
বস্তুসমূহে একাধিক ট্ৰেকত বিস্তৃত হ'ব পাৰে:
বস্তুবোৰ নিৰ্দিষ্ট ট্ৰেকত ৰাখিব পাৰি; তেওঁলোকে সদায় স্বয়ংক্ৰিয় প্লেচমেণ্ট এলগৰিদম অনুসৰণ কৰিব নালাগে:
ডেমো ইয়াত মই Chromium ত CSS Masonry ৰ আগন্তুক প্ৰণয়ন ব্যৱহাৰ কৰি কৰা কেইটামান সহজ ডেমো দিয়া হ'ল। এটা ফটো গেলেৰী ডেমো, বস্তুসমূহে (এই ক্ষেত্ৰত শিৰোনাম) কেনেকৈ একাধিক ট্ৰেক বিস্তৃত কৰিব পাৰে দেখুৱাই:
বিভিন্ন আকাৰৰ ট্ৰেক দেখুওৱা আন এখন ফটো গেলেৰী:
এটা বাতৰি চাইট পৰিকল্পনা কিছুমান ট্ৰেক আনতকৈ বহল, আৰু কিছুমান বস্তু পৰিকল্পনাৰ সমগ্ৰ প্ৰস্থত বিস্তৃত:
বস্তুবোৰ নিৰ্দিষ্ট ট্ৰেকত স্থাপন কৰিব পাৰি বুলি দেখুওৱা এটা কানবান বৰ্ড:
বি:দ্ৰ: দ্য...পূৰ্বৰ ডেমোসমূহ Chromium ৰ এটা সংস্কৰণৰ সৈতে কৰা হৈছিল যিটো এতিয়াও বেছিভাগ ৱেব ব্যৱহাৰকাৰীৰ বাবে উপলব্ধ নহয়, কাৰণ CSS Masonry ব্ৰাউজাৰসমূহত প্ৰণয়ন কৰিবলৈ আৰম্ভ কৰা হৈছে। কিন্তু ৱেব ডেভেলপাৰসকলে ইতিমধ্যে বছৰ বছৰ ধৰি মেছনৰী বিন্যাস তৈয়াৰ কৰিবলৈ লাইব্ৰেৰীসমূহ আনন্দৰে ব্যৱহাৰ কৰি আহিছে। আজি শিলৰ কাম ব্যৱহাৰ কৰা চাইট সঁচাকৈয়ে আজি ৱেবত মেছনৰী যথেষ্ট সাধাৰণ। Pinterest ৰ বাহিৰেও মই পোৱা কেইটামান উদাহৰণ দিলোঁ:
আৰু আৰু কেইটামান, কম স্পষ্ট, উদাহৰণ:
গতিকে, এই বিন্যাসসমূহ কেনেকৈ সৃষ্টি কৰা হৈছিল? ৱৰ্কআৰউণ্ডসমূহ মই ব্যৱহাৰ কৰা এটা কৌশল হ’ল ইয়াৰ পৰিৱৰ্তে এটা Flexbox বিন্যাস ব্যৱহাৰ কৰা, ইয়াৰ দিশ স্তম্ভলৈ সলনি কৰা, আৰু ইয়াক ৰেপ কৰিবলৈ সংহতি কৰা। এইদৰে, আপুনি বিভিন্ন উচ্চতাৰ বস্তুসমূহক একাধিক, স্বতন্ত্ৰ স্তম্ভত ৰাখিব পাৰে, এটা মেছনৰী বিন্যাসৰ আভাস দি:
এই সমাধানৰ সৈতে, কিন্তু, দুটা সীমাবদ্ধতা আছে:
বস্তুৰ ক্ৰমটো প্ৰকৃত মেছনৰী বিন্যাসৰ সৈতে যিটো হ’ব তাৰ পৰা পৃথক। Flexbox ৰ সৈতে, বস্তুসমূহে প্ৰথমে প্ৰথম স্তম্ভটো পূৰণ কৰে আৰু, যেতিয়া ই ভৰি পৰে, তাৰ পিছত পৰৱৰ্তী স্তম্ভলৈ যায়। মেছনৰীৰ সৈতে, বস্তুবোৰ যিটো ট্ৰেকত (বা এই ক্ষেত্ৰত স্তম্ভত) অধিক স্থান উপলব্ধ তাত ষ্টেক হ'ব। কিন্তু, আৰু হয়তো অধিক গুৰুত্বপূৰ্ণভাৱে, এই সমাধানৰ বাবে আপুনি Flexbox ধাৰকলৈ এটা নিৰ্দিষ্ট উচ্চতা সংহতি কৰাৰ প্ৰয়োজন; অন্যথা কোনো ধৰণৰ ৰেপিং নহ'ব।
তৃতীয় পক্ষৰ ৰাজমিস্ত্ৰীৰ পুথিভঁৰাল অধিক উন্নত ক্ষেত্ৰসমূহৰ বাবে, ডেভেলপাৰসকলে লাইব্ৰেৰীসমূহ ব্যৱহাৰ কৰি আহিছে। ইয়াৰ বাবে আটাইতকৈ পৰিচিত আৰু জনপ্ৰিয় লাইব্ৰেৰীটোৰ নাম কেৱল মেছনৰী, আৰু এনপিএম অনুসৰি ইয়াক প্ৰতি সপ্তাহত প্ৰায় ২ লাখ বাৰ ডাউনলোড কৰা হয়। স্কোৱাৰস্পেছে এটা বিন্যাস উপাদানও প্ৰদান কৰে যি এটা মেছনৰী পৰিকল্পনা ৰেণ্ডাৰ কৰে, এটা ন'-ক'ড বিকল্পৰ বাবে, আৰু বহুতো চাইটে ইয়াক ব্যৱহাৰ কৰে। এই দুয়োটা বিকল্পই বিন্যাসত বস্তু স্থাপন কৰিবলৈ জাভাস্ক্রিপ্ট ক'ড ব্যৱহাৰ কৰে। বিল্ট-ইন মেছনৰী মই সঁচাকৈয়ে উৎসাহিত যে মেছনৰী এতিয়া ব্ৰাউজাৰত এটা বিল্ট-ইন চি এছ এছ বৈশিষ্ট্য হিচাপে দেখা দিবলৈ আৰম্ভ কৰিছে৷ সময়ৰ লগে লগে, আপুনি গ্ৰীড বা ফ্লেক্সবক্সৰ দৰেই মেছনৰী ব্যৱহাৰ কৰিব পাৰিব, অৰ্থাৎ কোনো ধৰণৰ ৱৰ্কআৰউণ্ড বা তৃতীয়-পক্ষৰ ক'ডৰ প্ৰয়োজন নোহোৱাকৈ। মাইক্ৰ'ছফ্টৰ মোৰ দলটোৱে ক্ৰ'মিয়াম মুক্ত উৎস প্ৰকল্পত বিল্ট-ইন মেছনৰী সমৰ্থন প্ৰণয়ন কৰি আহিছে, যাৰ ওপৰত এজ, ক্ৰ'ম, আৰু আন বহুতো ব্ৰাউজাৰ ভিত্তি কৰি তৈয়াৰ কৰা হৈছে। মজিলা আচলতে ২০২০ চনত মেছনৰীৰ পৰীক্ষামূলক ৰূপায়ণৰ প্ৰস্তাৱ দিয়া প্ৰথম ব্ৰাউজাৰ বিক্ৰেতা আছিল। আৰু এপলে এই নতুন ৱেব বিন্যাসক আদিম কৰি তোলাৰ বাবেও অতি আগ্ৰহী। বৈশিষ্ট্যটোক প্ৰামাণিক কৰাৰ কামো আগবাঢ়িছে, সাধাৰণ দিশ আৰু আনকি এটা নতুন প্ৰদৰ্শন ধৰণ প্ৰদৰ্শনৰ বিষয়ে CSS কাৰ্য্যগোষ্ঠীৰ ভিতৰত সহমতৰ সৈতে: গ্ৰীড-লেন। যদি আপুনি মেছনৰীৰ বিষয়ে অধিক জানিব বিচাৰে আৰু অগ্ৰগতি অনুসৰণ কৰিব বিচাৰে, মোৰ CSS মেছনৰ সম্পদ পৃষ্ঠা চাওক। সময়ৰ লগে লগে, যেতিয়া মেছনৰী এটা বেচলাইন বৈশিষ্ট্য হৈ পৰিব, ঠিক গ্ৰীড বা ফ্লেক্সবক্সৰ দৰে, আমি ইয়াক কেৱল ব্যৱহাৰ কৰিব পাৰিম আৰু ইয়াৰ পৰা লাভৱান হ’ম:
উন্নত প্ৰদৰ্শন, উন্নত সঁহাৰি, ব্যৱহাৰৰ সহজ আৰু সহজ ক'ড।
এইবোৰ ভালদৰে চাওঁ আহক। উন্নত প্ৰদৰ্শন আপোনাৰ নিজৰ মেছনৰী-সদৃশ বিন্যাস ব্যৱস্থাপ্ৰণালী নিৰ্মাণ কৰা, বা ইয়াৰ পৰিবৰ্তে এটা তৃতীয়-পক্ষ লাইব্ৰেৰী ব্যৱহাৰ কৰাৰ অৰ্থ হ’ল আপুনি পৰ্দাত বস্তু স্থাপন কৰিবলৈ জাভাস্ক্রিপ্ট ক’ড চলাব লাগিব৷ ইয়াৰ অৰ্থ এইটোও যে এই ক'ডটো ৰেণ্ডাৰ ব্লক কৰা হ'ব। সঁচাকৈয়ে, হয় একো দেখা নাযায়, নহয় বস্তুবোৰ সঠিক ঠাইত বা সঠিক আকাৰৰ নহ’ব, যেতিয়ালৈকে সেই জাভাস্ক্রিপ্ট ক’ডটো চলি নাথাকে৷ মেছনৰী বিন্যাস প্ৰায়ে এটা ৱেব পৃষ্ঠাৰ মূল অংশৰ বাবে ব্যৱহাৰ কৰা হয়, যাৰ অৰ্থ হৈছে ক'ডে আপোনাৰ মূল বিষয়বস্তু অন্যথা হ'ব পৰাতকৈ পিছত দেখা দিব, আপোনাৰ LCP, বা সৰ্ববৃহৎ বিষয়বস্তুপূৰ্ণ পেইন্ট মেট্ৰিক অৱনমিত কৰিব, যিয়ে অনুভূত পৰিৱেশন আৰু সন্ধান ইঞ্জিন অনুকূলনত ডাঙৰ ভূমিকা পালন কৰে। মই এটা সহজ বিন্যাসৰ সৈতে আৰু DevTools ত এটা লেহেমীয়া 4G সংযোগ অনুকৰণ কৰি Masonry JS লাইব্ৰেৰী পৰীক্ষা কৰিলোঁ। লাইব্ৰেৰীটো বৰ ডাঙৰ নহয় (24KB, 7.8KB gzipped), কিন্তু মোৰ পৰীক্ষাৰ অৱস্থাত লোড হ'বলৈ 600ms লাগিছিল। ইয়াত এটা পৰিৱেশন ৰেকৰ্ডিং আছে যিয়ে দেখুৱাইছে যে মেছনৰী লাইব্ৰেৰীৰ বাবে দীঘলীয়া 600ms লোড সময়, আৰু সেইটো হৈ থকাৰ সময়ত অন্য কোনো ৰেণ্ডাৰ কাৰ্য্যকলাপ হোৱা নাছিল:
ইয়াৰ উপৰিও, প্ৰাৰম্ভিক লোড সময়ৰ পিছত, ডাউনল'ড কৰা স্ক্ৰিপ্টক তাৰ পিছত বিশ্লেষণ, কম্পাইল, আৰু তাৰ পিছত চলাব লাগিছিল। যিবোৰ সকলোৱে আগতে কোৱাৰ দৰে পৃষ্ঠাটোৰ ৰেণ্ডাৰ ব্লক কৰি আছিল। ব্ৰাউজাৰত এটা বিল্ট-ইন মেছনৰী প্ৰণয়নৰ সৈতে, আমাৰ হাতত লোড আৰু চলাবলৈ কোনো স্ক্ৰিপ্ট নাথাকিব৷ ব্ৰাউজাৰ ইঞ্জিনে মাত্ৰ প্ৰাৰম্ভিক পৃষ্ঠা ৰেণ্ডাৰ পদক্ষেপৰ সময়ত নিজৰ কাম কৰিব। উন্নত সঁহাৰি যেতিয়া এটা পৃষ্ঠা প্ৰথম লোড হয়, ব্ৰাউজাৰ উইণ্ড'ৰ আকাৰ সলনি কৰিলে সেই পৃষ্ঠাত পৰিকল্পনা পুনৰ ৰেণ্ডাৰ হয়। এইখিনিতে, যদিও, যদি পৃষ্ঠাটোৱে Masonry JS লাইব্ৰেৰী ব্যৱহাৰ কৰিছে, তেন্তে স্ক্ৰিপ্টটো পুনৰ লোড কৰাৰ প্ৰয়োজন নাই, কাৰণ ইতিমধ্যে আছেইয়াত। কিন্তু বস্তুবোৰ সঠিক ঠাইত স্থানান্তৰ কৰা ক’ডটো চলাব লাগিব। এতিয়া এই বিশেষ লাইব্ৰেৰীয়ে এইটো কৰাত যথেষ্ট দ্ৰুত যেন লাগে যেতিয়া পৃষ্ঠাটো লোড হয়। কিন্তু, ই বস্তুবোৰক এনিমেট কৰে যেতিয়া সিহঁতক উইণ্ড'ৰ আকাৰ সলনি কৰাৰ সময়ত বেলেগ ঠাইলৈ যাব লাগে, আৰু ই এটা ডাঙৰ পাৰ্থক্য আনে। অৱশ্যেই, ব্যৱহাৰকাৰীসকলে তেওঁলোকৰ ব্ৰাউজাৰ উইণ্ড’ৰ আকাৰ সলনি কৰিবলৈ আমি ডেভেলপাৰসকলৰ দৰে সময় খৰচ নকৰে৷ কিন্তু এই এনিমেটেড ৰিচাইজিং অভিজ্ঞতা যথেষ্ট জোকাৰণিৰ সৃষ্টি কৰিব পাৰে আৰু পৃষ্ঠাটোৱে ইয়াৰ নতুন আকাৰৰ সৈতে খাপ খুৱাবলৈ লোৱা অনুভূত সময়খিনি যোগ কৰে। ব্যৱহাৰৰ সহজতা আৰু সৰল ক'ড ৱেব বৈশিষ্ট্য ব্যৱহাৰ কৰাটো কিমান সহজ আৰু ক'ডটো কিমান সহজ দেখা যায় সেয়া গুৰুত্বপূৰ্ণ কাৰক যিয়ে আপোনাৰ দলৰ বাবে ডাঙৰ পাৰ্থক্য আনিব পাৰে। সেইবোৰ কেতিয়াও চূড়ান্ত ব্যৱহাৰকাৰী অভিজ্ঞতাৰ দৰে গুৰুত্বপূৰ্ণ হ’ব নোৱাৰে, অৱশ্যেই, কিন্তু ডেভেলপাৰৰ অভিজ্ঞতাই ৰক্ষণাবেক্ষণযোগ্যতাক প্ৰভাৱিত কৰে৷ এটা বিল্ট-ইন ৱেব বৈশিষ্ট্য ব্যৱহাৰ কৰিলে সেই ফ্ৰণ্টত গুৰুত্বপূৰ্ণ সুবিধাসমূহ আহে:
ইতিমধ্যে HTML, CSS, আৰু JS জনা ডেভেলপাৰসকলে সেই বৈশিষ্ট্য সহজে ব্যৱহাৰ কৰিব পাৰিব কাৰণ ইয়াক ভালদৰে সংহত কৰিবলৈ আৰু বাকী ৱেব প্লেটফৰ্মৰ সৈতে সামঞ্জস্যপূৰ্ণ হ’বলৈ ডিজাইন কৰা হৈছে। বৈশিষ্ট্যটো কেনেকৈ ব্যৱহাৰ কৰা হয় তাৰ ক্ষেত্ৰত পৰিৱৰ্তন ভাঙি যোৱাৰ কোনো আশংকা নাই৷ সেই বৈশিষ্ট্য অব্যাহত বা ৰক্ষণাবেক্ষণ নকৰাৰ আশংকা প্ৰায় শূন্য৷
বিল্ট-ইন মেছনৰীৰ ক্ষেত্ৰত, কাৰণ ই এটা লেআউট প্ৰিমিটিভ, আপুনি ইয়াক CSS ৰ পৰা ব্যৱহাৰ কৰে, ঠিক গ্ৰীড বা ফ্লেক্সবক্সৰ দৰে, কোনো JS জড়িত নহয়। লগতে, অন্য পৰিকল্পনা-সম্পৰ্কীয় CSS বৈশিষ্ট্যসমূহ, যেনে ফাঁক, আপুনি আশা কৰা ধৰণে কাম কৰে। জানিবলৈ কোনো কৌশল বা সমাধান নাই, আৰু আপুনি শিকিব পৰা বস্তুসমূহ MDN ত নথিভুক্ত কৰা হৈছে। Masonry JS lib ৰ বাবে, আৰম্ভণি অলপ জটিল: ইয়াৰ বাবে এটা নিৰ্দিষ্ট বাক্যবিন্যাসৰ সৈতে এটা তথ্য বৈশিষ্ট্যৰ প্ৰয়োজন, স্তম্ভ আৰু ফাঁক আকাৰ সংহতি কৰিবলে লুকাই থকা HTML উপাদানসমূহৰ সৈতে। ইয়াৰ উপৰিও, যদি আপুনি স্তম্ভসমূহ স্পেন কৰিব বিচাৰে, সমস্যাৰ পৰা হাত সাৰিবলৈ আপুনি নিজেই ফাঁকৰ আকাৰ অন্তৰ্ভুক্ত কৰিব লাগিব:
<শৈলী> .ট্ৰেক-চাইজাৰ, .বস্তু { প্ৰস্থ: ২০%; } .নালা-আকাৰ { প্ৰস্থ: ১ৰেম; } .বস্তু { উচ্চতা: ১০০px; মাৰ্জিন-ব্লক-এণ্ড: 1rem; } .বস্তু:nth-শিশু(অদ্ভুত) { উচ্চতা: ২০০px; } .বস্তু--প্ৰস্থ২ { প্ৰস্থ: calc(40% + 1rem); }
ইয়াক এটা বিল্ট-ইন মেছনৰী প্ৰণয়ন কেনেকুৱা হ’ব তাৰ সৈতে তুলনা কৰোঁ আহক: <শৈলী> .পাত্ৰ { প্ৰদৰ্শন: গ্ৰীড-লেন; গ্ৰীড-লেন: পুনৰাবৃত্তি(৪, ২০%); ফাঁক: ১ৰেম; } .বস্তু { উচ্চতা: ১০০px; } .বস্তু:nth-শিশু(অদ্ভুত) { উচ্চতা: ২০০px; } .বস্তু--প্ৰস্থ২ { গ্ৰীড-স্তম্ভ: স্পেন ২; }
সৰল, অধিক কমপেক্ট ক’ড যিয়ে কেৱল ফাঁক আৰু য’ত স্পেনিং ট্ৰেকসমূহ স্পেন ২ ৰ সৈতে কৰা হয়, ঠিক গ্ৰীডৰ দৰে বস্তু ব্যৱহাৰ কৰিব পাৰে, আৰু আপুনি ফাঁকৰ আকাৰ অন্তৰ্ভুক্ত কৰা সঠিক প্ৰস্থ গণনা কৰাৰ প্ৰয়োজন নাই। কি উপলব্ধ আৰু কেতিয়া উপলব্ধ সেই বিষয়ে কেনেকৈ জানিব? সামগ্ৰিকভাৱে, প্ৰশ্নটো আচলতে আপুনি JS লাইব্ৰেৰীৰ ওপৰত বিল্ট-ইন মেছনৰী ব্যৱহাৰ কৰিব লাগে নেকি সেইটো নহয়, বৰঞ্চ কেতিয়া ব্যৱহাৰ কৰিব লাগে। মেছনৰী জে এছ লাইব্ৰেৰী আচৰিত আৰু বহু বছৰ ধৰি ৱেব প্লেটফৰ্মৰ এটা ব্যৱধান পূৰণ কৰি আহিছে, আৰু বহু সুখী ডেভেলপাৰ আৰু ব্যৱহাৰকাৰীৰ বাবে। ইয়াৰ কেইটামান অসুবিধা আছে যদি আপুনি ইয়াক এটা বিল্ট-ইন মেছনৰী প্ৰণয়নৰ সৈতে তুলনা কৰে, অৱশ্যেই, কিন্তু সেইবোৰ গুৰুত্বপূৰ্ণ নহয় যদি সেই প্ৰণয়ন সাজু নহয়। এই শীতল নতুন ৱেব প্লেটফৰ্ম বৈশিষ্ট্যসমূহ তালিকাভুক্ত কৰাটো মোৰ বাবে সহজ কাৰণ মই এটা ব্ৰাউজাৰ বিক্ৰেতাত কাম কৰো, আৰু সেয়েহে মই কি আহিব সেইটো জানিবলৈ প্ৰৱণতা ৰাখোঁ৷ কিন্তু ডেভেলপাৰসকলে প্ৰায়ে শ্বেয়াৰ কৰে, জৰীপৰ পিছত জৰীপ, যে নতুন বস্তুৰ খবৰ ৰখাটো কঠিন। অৱগত থকাটো কঠিন, আৰু কোম্পানীসমূহে যিকোনো প্ৰকাৰে সদায় শিক্ষণক অগ্ৰাধিকাৰ নিদিয়ে। ইয়াৰ সৈতে সহায় কৰিবলে, ইয়াত কেইটামান সম্পদ আছে যি সহজ আৰু কমপেক্ট ধৰণে আপডেইটসমূহ প্ৰদান কৰে যাতে আপুনি প্ৰয়োজনীয় তথ্য দ্ৰুতভাৱে পাব পাৰে:
ৱেব প্লেটফৰ্মত এক্সপ্ল'ৰাৰ চাইটৰ বৈশিষ্ট্য আছে: আপুনি ইয়াৰ মুক্তিৰ টোকা পৃষ্ঠাৰ প্ৰতি আগ্ৰহী হ'ব পাৰে। আৰু, যদি আপুনি RSS ভাল পায়, উন্মোচন টোকাসমূহ ফিড চাওক, লগতে ভিত্তিৰেখা নতুনকৈ উপলব্ধ আৰু ব্যাপকভাৱে উপলব্ধ ফিডসমূহ।
ৱেবপ্লেটফৰ্মৰ অৱস্থা ডেচব'ৰ্ড: আপুনি হয়তো ইয়াৰ বিভিন্ন বেচলাইন বছৰৰ পৃষ্ঠাবোৰ ভাল পাব।
Chrome Platform Status’ ৰোডমেপ পৃষ্ঠা।
যদি আপোনাৰ হাতত অলপ বেছি সময় আছে, আপুনি ব্ৰাউজাৰ বিক্ৰেতাসকলৰ মুক্তিৰ টোকাসমূহৰ প্ৰতিও আগ্ৰহী হ’ব পাৰে:
ক্ৰ'ম এজ ফায়াৰফক্স ছাফাৰী
আৰু অধিক সম্পদৰ বাবে, মোৰ ৱেব প্লেটফৰ্ম চীটশ্বীট নেভিগেট কৰা চাওক। মোৰ কথাটো এতিয়াও কাৰ্যকৰী হোৱা নাই সেইটোৱেই সমস্যাৰ আনটো দিশ৷ যদিও আপুনি সময়, শক্তি আৰু ট্ৰেক ৰখাৰ উপায় বিচাৰি পায়, তথাপিও আপোনাৰ কণ্ঠ শুনাবলৈ আৰু আপোনাৰ প্ৰিয় বৈশিষ্ট্যসমূহ প্ৰণয়ন কৰাত হতাশা আছে৷ হয়তো আপুনি বছৰ বছৰ ধৰি এটা নিৰ্দিষ্ট বাগ সমাধানৰ বাবে অপেক্ষা কৰি আছে, বা এটা নিৰ্দিষ্ট বৈশিষ্ট্য এটা ব্ৰাউজাৰত প্ৰেৰণ কৰিবলৈ য’ত ই এতিয়াও অনুপস্থিত৷ মই যি ক’ম সেয়া হ’ল ব্ৰাউজাৰ বিক্ৰেতাসকলে শুনিছেই৷ মই কেইবাটাও ক্ৰছ-অৰ্গেনাইজেচন দলৰ অংশ য’ত আমি সকলো সময়তে ডেভেলপাৰৰ সংকেত আৰু মতামতৰ বিষয়ে আলোচনা কৰোঁ৷ আমি বহুতো ভিন্ন মতামতৰ উৎস চাওঁ, প্ৰতিটো ব্ৰাউজাৰ বিক্ৰেতাৰ আভ্যন্তৰীণ আৰু ফ'ৰাম, মুক্ত উৎস প্ৰকল্প, ব্লগ, আৰু জৰীপত বাহ্যিক/ৰাজহুৱা দুয়োটা। আৰু, আমি সদায় ডেভেলপাৰসকলৰ বাবে তেওঁলোকৰ নিৰ্দিষ্ট প্ৰয়োজনীয়তা আৰু ব্যৱহাৰৰ ক্ষেত্ৰসমূহ ভাগ-বতৰা কৰাৰ বাবে উন্নত উপায় সৃষ্টি কৰিবলৈ চেষ্টা কৰি আছো৷ গতিকে, যদি পাৰে, অনুগ্ৰহ কৰি ব্ৰাউজাৰ বিক্ৰেতাসকলৰ পৰা অধিক দাবী কৰক আৰু আপুনি প্ৰয়োজনীয় বৈশিষ্ট্যসমূহ কাৰ্যকৰী কৰিবলৈ আমাক হেঁচা দিয়ক। মই পাওঁ যে ইয়াৰ বাবে সময় লাগে, আৰু ভয়ংকৰ হ’ব পাৰে (প্ৰৱেশৰ ক্ষেত্ৰত উচ্চ বাধাৰ কথা নকওঁৱেই), কিন্তু ই কামো কৰে। আপুনি আপোনাৰ (বা আপোনাৰ কোম্পানীৰ) কণ্ঠস্বৰ শুনাব পৰা কেইটামান উপায় ইয়াত দিয়া হ’ল: বাৰ্ষিক জেএছৰ অৱস্থা, চিএছএছৰ অৱস্থা, আৰু এইচটিএমএলৰ অৱস্থা জৰীপ লওক৷ ব্ৰাউজাৰ বিক্ৰেতাসকলে তেওঁলোকৰ কামক কেনেকৈ অগ্ৰাধিকাৰ দিয়ে তাত তেওঁলোকৰ ডাঙৰ ভূমিকা আছে। যদি আপুনি এটা নিৰ্দিষ্ট প্ৰামাণিক-ভিত্তিয় API ৰ প্ৰয়োজন হয় ব্ৰাউজাৰসমূহত ধাৰাবাহিকভাৱে প্ৰণয়ন কৰিবলে, পৰৱৰ্তী Interop প্ৰকল্প পুনৰাবৃত্তিত এটা প্ৰস্তাৱ জমা দিয়াৰ কথা চিন্তা কৰক। ইয়াৰ বাবে অধিক সময়ৰ প্ৰয়োজন, কিন্তু বিবেচনা কৰক যে Shopify আৰু RUMvision এ Interop 2026 ৰ বাবে তেওঁলোকৰ ইচ্ছা তালিকাসমূহ কেনেকৈ অংশীদাৰী কৰিছিল। এই ধৰণৰ বিশদ তথ্য ব্ৰাউজাৰ বিক্ৰেতাসকলৰ বাবে অগ্ৰাধিকাৰ দিবলৈ অতি উপযোগী হ'ব পাৰে। ব্ৰাউজাৰ বিক্ৰেতাসকলক প্ৰভাৱিত কৰিবলৈ অধিক উপযোগী লিংকসমূহৰ বাবে, মোৰ ৱেব প্লেটফৰ্ম চীটশ্বীট নেভিগেট কৰা চাওক। উপসংহাৰ বন্ধ কৰিবলৈ আশাকৰোঁ এই লেখাটোৱে আপোনালোকক চিন্তা কৰিবলগীয়া কেইটামান কথা এৰি থৈ গৈছে:
মেছনৰী আৰু অন্যান্য আগন্তুক ৱেব বৈশিষ্ট্যৰ বাবে উত্তেজনা। আপুনি ব্যৱহাৰ আৰম্ভ কৰিব বিচাৰিব পাৰে কেইটামান ৱেব বৈশিষ্ট্য। কাষ্টম বা তৃতীয়-পক্ষৰ ক'ডৰ কেইটামান টুকুৰা আপুনি বিল্ট-ইন বৈশিষ্ট্যসমূহৰ সপক্ষে আঁতৰাব পাৰিব। কি আহি আছে তাৰ খবৰ ৰাখিবলৈ আৰু ব্ৰাউজাৰ বিক্ৰেতাক প্ৰভাৱিত কৰাৰ কেইটামান উপায়৷
তাতোকৈ গুৰুত্বপূৰ্ণ কথাটো হ’ল, মই আশা কৰিছো যে মই আপোনালোকক ৱেব প্লেটফৰ্মটোক ইয়াৰ সম্পূৰ্ণ সম্ভাৱনাৰে ব্যৱহাৰ কৰাৰ সুবিধাসমূহৰ বিষয়ে পতিয়ন নিয়াইছো।
