আসালামুয়ালাইকুম বন্ধুরা

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

তখন অনেকেই খুঁজে ফিরে সিএসএস, JS মিনিফায়ার টুলস। তাই আমি আপনাদের জন্য নিয়ে আসলাম CSS, JS Minifier টুলস যেটি আপনি খুবই সহজে আপনার ব্লগার বা ওয়ার্ডপ্রেস সাইটে সেটাপ করে নিতে পারবেন।

মিনিফাই আসলে কী?

প্রথমে আপনারা বুঝে নিন, মিনিফাই মানে কী। মিনিফাই করার সময় কোড থেকে সব অপ্রয়োজনীয় জিনিস কেটে ফেলা হয় — যেমন বাড়তি স্পেস, লাইন ব্রেক, কমেন্ট ইত্যাদি। এতে কোড ছোট হয়, সাইজ কমে যায়, আর ওয়েবসাইট দ্রুত লোড হয়।

উদাহরণ:

/* Before */
body {
    background-color: white;
    color: black;
}

/* After Minify */
body{background-color:white;color:black;}

দেখলেন তো? মিনিফাই করার পর কোড ছোট হয়ে গেল, কিন্তু কাজ একদম একই।

এই টুল দিয়ে আপনারা কী করতে পারবেন?

এখন আসি মূল টুলটার কথায়। এই টুল দিয়ে আপনারা যেসব কাজ করতে পারবেন:

  • কোড মিনিফাই করা: CSS, JS আর HTML কোড এক ক্লিকেই ছোট করা যায়।
  • কোড বিউটিফাই বা ফরম্যাট করা: যদি আপনারা চান কোড সুন্দরভাবে সাজানো থাকুক, তাহলে বিউটিফাই অপশন ব্যবহার করতে পারবেন।
  • অটো ডিটেকশন: আপনারা যেটাই পেস্ট করুন, টুল নিজেই বুঝে নেবে এটা CSS, JS নাকি HTML।
  • ফাইল আপলোড: একসাথে একাধিক ফাইল আপলোড করতে পারবেন। সব ফাইল কনক্যাট হয়ে ইনপুটে চলে আসবে।
  • লোকাল সেভ/লোড: আপনারা কোড সেভ করতে পারবেন, আবার পরে লোড করেও নিতে পারবেন।
  • থিম টগল: Light আর Dark মোড আছে। চোখের আরামের জন্য আপনারা যেটা চান সেটা বেছে নিতে পারবেন।
  • কপি ও ডাউনলোড: আউটপুট থেকে সরাসরি কপি বা ডাউনলোড করতে পারবেন।
  • নোটিফিকেশন: প্রতিবার কাজ হলে ছোট্ট টোস্ট মেসেজ আসবে, যাতে বুঝতে পারেন কাজ শেষ হয়েছে।
  • PWA সাপোর্ট: ব্রাউজার সাপোর্ট থাকলে অফলাইনে কাজ করার সুবিধাও পাবেন।

কিভাবে ব্যবহার করবেন?

ব্যবহার একদম সহজ।

  1. টুলটা ওপেন করুন।
  2. বাম পাশে আপনারা কোড লিখুন বা কপি করে পেস্ট করুন।
  3. “Minify” বাটনে ক্লিক করুন।
  4. ডান পাশে আউটপুট চলে আসবে।
  5. চাইলে এখান থেকে কপি করুন বা ফাইল আকারে ডাউনলোড করুন।

Blogger-এ কিভাবে বসাবেন?

অনেকেই ব্লগার ব্যবহার করেন। যদি আপনারা চান এই টুলটা ব্লগে রাখতে, তাহলে—

  1. Blogger Dashboard → Pages → New Page → HTML view-তে যান।
  2. টুলের কোড নিচের লিংক থেকে কপি করে পেস্ট করুন।
    Copy code from here
  3. পেজ Publish করুন।

না বুঝলে নিচের ছবিটি দেখুন।

CSS JS minifier tools

WordPress-এ কিভাবে বসাবেন?

WordPress ব্যবহারকারীর জন্য আমি এটিকে প্লাগইন হিসেবে বানিয়েছি। শুধু প্লাগইন ও পেইজ সেটাপ করলেই ওকে, আর কিছু করতে হবে না।

  1. প্রথমে নিচের লিঙ্কে গিয়ে প্লাগইনটি ডাওনলোড করুন।
    Download Now
  2. Wp Dashboard menu > Plugin > Add plugin > Upload প্লাগইন থেকে ডাউনলোড করা প্লাগইন ফাইল আপলোড করে একটিভ করুন।
  3. তারপর নিচের ছবির মতো একটা পেইজ বানিয়ে সেখান [minifier] shortcode টি বসিয়ে পেইজ পাবলিশ করুন।

WordPress setup

বন্ধুরা, এভাবে করলে WordPress-এর সাইটেও আপনারা টুল ব্যবহার করতে পারবেন।

Facebook Banglafeel
AnsBd WhatsApp

শেষ কথা

তো বন্ধুরা, আজকের মতো এখানেই বিদায় নিচ্ছি। দেখা হবে নতুন কোনো পোস্টে। এই পোস্টের কোথাও বুঝতে সমস্যা হলে কমেন্ট করুন। ভালো থাকুন, সুস্থ থাকুন, ট্রিকবিডির সাথেই থাকুন।