HTML ফরম্যাটার ও মিনিফায়ার

HTML ফরম্যাটার কী?#

একটি HTML ফরম্যাটার এমন মার্কআপ নেয় যা তার আকৃতি হারিয়েছে — একটি টেমপ্লেট ইঞ্জিনের আউটপুট যা প্রতিটি ট্যাগকে এক সারিতে সংকুচিত করেছে, অন্য কারও ইনডেন্ট শৈলী সহ পেস্ট করা একটি স্নিপেট, বা একটি ইমেল টেমপ্লেটের অংশ যা মাসের পর মাস ধরে বেড়েছে — এবং তা পুনরায় ইনডেন্ট করে যাতে নেস্টিং এক নজরে স্পষ্ট হয়। উল্টো কাজটি, মিনিফাইং, একই মার্কআপকে এমন সবকিছু সরিয়ে ছোট করে যা একটি ব্রাউজারের প্রয়োজন নেই: মন্তব্য এবং ট্যাগগুলোর মধ্যে হোয়াইটস্পেস।

এই পৃষ্ঠাটি উভয়ই করে, এবং দুটি দিক ভিন্নভাবে তৈরি কারণ HTML তা দাবি করে। ফরম্যাট js-beautify-এর html_beautify ব্যবহার করে, যা এলিমেন্টগুলোকে ধারাবাহিকভাবে ইনডেন্ট করে এবং আপনি আসলে যে লাইন বিরতিগুলো চান সেগুলো সংরক্ষণ করে। মিনিফাই একটি রক্ষণশীল, হাতে লেখা স্ক্যানার। এটি যে সবচেয়ে গুরুত্বপূর্ণ নিয়মটি অনুসরণ করে তা হলো <pre>, <code>, <textarea>, <script> এবং <style> এলিমেন্টের কন্টেন্ট সম্পূর্ণভাবে অস্পর্শিত রাখা — একটি <pre> ব্লক বা একটি <script>-এর ভেতরে হোয়াইটস্পেস সংকুচিত করলে পৃষ্ঠাটি দূষিত হবে, কারণ সেই এলিমেন্টগুলোতে হোয়াইটস্পেস হলো ডেটার অংশ, সজ্জা নয়। একটি নিষ্ঠাহীন মিনিফায়ার যা এটি জানে না সেটিই ঠিক কীভাবে একটি কোড নমুনা হঠাৎ একটি লাইভ সাইটে তার ইনডেন্টেশন হারায়।

ব্যবহারবিধি#

1. বাঁদিকের HTML পেইনে আপনার মার্কআপ পেস্ট করুন, বা একটি ছোট উদাহরণ নথির জন্য নমুনা ক্লিক করুন।
2. টুলবারে একটি ইন্ডেন্ট বেছে নিন: ২, ৪ (HTML-এর জন্য ডিফল্ট), বা ট্যাব। চারটি স্পেস হলো মার্কআপের জন্য একটি সাধারণ হাউস স্টাইল কারণ নেস্টেড ট্যাগগুলো দ্রুত যোগ হয়।
3. একটি ক্রিয়া ক্লিক করুন:
   • ফরম্যাট — js-beautify-এর মাধ্যমে পুনরায় ইনডেন্ট, বিদ্যমান নিউলাইনগুলো সংরক্ষণ করে যাতে ম্যানুয়ালি ভাঙা লাইনগুলো একসাথে ম্যাশ না হয়।
   • মিনিফাই — HTML মন্তব্য বাদ দিন, ইন্টার-ট্যাগ হোয়াইটস্পেস কিছুতে সংকুচিত করুন, এবং সাধারণ টেক্সট নোডগুলোতে হোয়াইটস্পেস ছাঁটুন — যখন <pre>, <code>, <textarea>, <script> এবং <style>-এর ভেতরটি হুবহু লেখা অবস্থায় রাখা হয়।
4. আউটপুট পেইনে ফলাফল পড়ুন। এটি নিতে আউটপুট হেডারে কপি ব্যবহার করুন; মুছুন উভয় পেইন রিসেট করে।

মূল বৈশিষ্ট্য#

• যা গুরুত্বপূর্ণ তা সংরক্ষণ করে। <pre>, <code>, <textarea>, <script> এবং <style> কন্টেন্ট মিনিফিকেশনের সময় আক্ষরিকভাবে কপি করা হয়। সেই এলিমেন্টগুলোর ভেতরের হোয়াইটস্পেস অর্থপূর্ণ; তা সরালে ব্রাউজার যা রেন্ডার করে তা পরিবর্তন হবে।
• মিনিফাইতে মন্তব্য ছিনিয়ে নেওয়া হয়, ফরম্যাটে রাখা হয়। <!-- ... --> ব্লকগুলো শুধুমাত্র তখনই সরানো হয় যখন আপনি স্পষ্টভাবে মিনিফাই করতে বলেন। ফরম্যাটিং সেগুলোকে জায়গায় রাখে।
• HTML-বান্ধব ডিফল্ট ইনডেন্ট। চারটি স্পেস, কারণ গভীরভাবে নেস্ট করা মার্কআপ একটি বৃহত্তর ধাপ দিয়ে ভালো পড়া যায়। আপনার প্রোজেক্টের সাথে মিললে 2 বা ট্যাবে স্যুইচ করুন।
• দুই-পেইন, কপি-প্রস্তুত। এডিটযোগ্য ইনপুট, শুধু-পঠনযোগ্য আউটপুট, এক-ক্লিক কপি।
• শুধুমাত্র আপনার ব্রাউজারে চলে। js-beautify পৃষ্ঠার সাথে বান্ডল করা এবং চাহিদামোতাবেক লোড করা হয়; কোনো ব্যাকএন্ড নেই, কোনো আপলোড নেই, আপনার মার্কআপ আপনার ডিভাইসে থাকে।

ব্যবহারিক উদাহরণ#

একটি টেমপ্লেট থেকে টানা একটি প্রোডাক্ট কার্ডের খণ্ড, যার ভেতরে একটি মন্তব্য এবং একটি <pre> ব্লক আছে:

ইনপুট:

<div class="card">
<!-- price shown gross -->
<span class="price">£12.00</span>
<pre data-lang="bash">npm install
npm run build</pre>
</div>

৪ স্পেস সহ ফরম্যাট ক্লিক করুন:

<div class="card">
    <!-- price shown gross -->
    <span class="price">£12.00</span>
    <pre data-lang="bash">npm install
npm run build</pre>
</div>

এখন একই ইনপুটে মিনিফাই ক্লিক করুন:

<div class="card"><span class="price">£12.00</span><pre data-lang="bash">npm install
npm run build</pre></div>

তিনটি জিনিস খেয়াল করুন। মন্তব্যটি চলে গেছে। ট্যাগগুলোর মধ্যে হোয়াইটস্পেস চলে গেছে — </span> এবং <pre> এখন সরাসরি সংলগ্ন, যা নিরাপদ কারণ HTML-এ ইন্টার-ট্যাগ হোয়াইটস্পেস প্রসাধনমূলক। কিন্তু <pre>-এর ভেতরে নিউলাইনটি (npm install এবং npm run build-এর মধ্যে) এখনও সেখানে আছে, হুবহু যেমন লেখা হয়েছিল। সেই নিয়মটি তার কাজ করছে: সজ্জা সংকুচিত করুন, ডেটা সংরক্ষণ করুন।

প্রশ্নোত্তর#

মিনিফাইয়ের পরে কেন ট্যাগগুলোর মধ্যে কিছু একক স্পেস রাখা হয়?#

ব্লক-স্তরের ট্যাগগুলোর মধ্যে থাকা শুধু-হোয়াইটস্পেস টেক্সট নোডগুলো সম্পূর্ণভাবে বাদ দেওয়া হয়। কিন্তু টেক্সটের একটি লাইনের ভেতরে একটি একক স্পেস — Hello <em>world</em> — তাৎপর্যপূর্ণ, কারণ তা সরালে শব্দগুলো যুক্ত হয়ে যাবে। স্ক্যানারটি অর্থপূর্ণ টেক্সট-নোড স্পেসগুলো রাখে এবং শুধুমাত্র সম্পূর্ণভাবে প্রসাধনমূলক ইন্টার-ট্যাগ হোয়াইটস্পেস সরায়।

মিনিফাই কি অ্যাট্রিবিউট, উদ্ধৃতি বা ডিফল্ট মান সরায়?#

না। এটি অ্যাট্রিবিউট সিনট্যাক্স পুনরায় লেখে না, উদ্ধৃতি ছিনিয়ে নেয় না, বুলিয়ান অ্যাট্রিবিউট সংকুচিত করে না, বা type="text" সরায় না। সেই রূপান্তরগুলোর জন্য স্কিমা জ্ঞান সহ একটি সম্পূর্ণ HTML পার্সার প্রয়োজন এবং সেগুলো ভুল করা সহজ; এই টুলটি নিরাপদ পাশে থাকে এবং শুধুমাত্র মন্তব্য এবং প্রসাধনমূলক হোয়াইটস্পেস সরায়।

এটি কি আমার <script> ট্যাগের ভেতরের JavaScript মিনিফাই করবে?#

না। <script>-এর সম্পূর্ণ কন্টেন্ট অস্পর্শিতভাবে পাস করা হয় — উভয় কারণে এটি পরিবর্তন করলে ASI ভাঙতে পারে এবং কারণ একটি আলাদা JS মিনিফায়ার format/js পৃষ্ঠায় থাকে। আপনি স্ক্রিপ্ট মিনিফাই করতে চাইলে, তা টেনে আনুন, সেই টুল দিয়ে চালান, তারপর আবার পেস্ট করুন।

এটি কি {{ var }} বা {% if %}-এর মতো টেমপ্লেটিং সিনট্যাক্স বোঝে?#

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