ওয়েব ডেভেলপমেন্টের মূলত দুটি পদ্ধতি রয়েছে: টেক্সট এডিটর পদ্ধতি এবং GUI এডিটর পদ্ধতি। প্রথম পদ্ধতিটি প্রধানত উন্নত ডেভেলপারদের জন্য, যারা কোড বুঝেন, তারা কী চান তা জানেন এবং তাদের ওয়েব পৃষ্ঠা তৈরি করার জন্য দৃশ্যমান সহায়তার প্রয়োজন হয় না। তারা Vim, Emacs, Notepad++, Kate বা অন্যান্য টেক্সট এডিটর নিয়ে কাজ করেন এবং ব্রাউজারে ওয়েবপেজ লোড করে তাদের কাজের ফলাফল দেখেন। এই পদ্ধতি নূন্যতম, দক্ষ — কিন্তু কঠিন।
দ্বিতীয় পদ্ধতিটি হল যা অধিকাংশ মানুষ অনুসরণ করে: এমন একটি প্রোগ্রাম ব্যবহার করা যা কোড ব্যবহারকারীদের থেকে লুকিয়ে রাখে এবং তাদের কনটেন্টের ওপর ফোকাস করতে দেয়। এই উদ্দেশ্যে ব্যবহৃত প্রোগ্রামগুলোকে ওয়েব এডিটর বলা হয়। এছাড়া, এগুলো What You See Is What You Get (WYSIWYG) ক্যাটাগরির अंतর্ভুক্ত, অর্থাৎ এডিটরের GUI-তে প্রদর্শিত পৃষ্ঠা চূড়ান্ত ফলাফলের সাথে মিলে যায়। অধিক জনপ্রিয় কিছু টাইটেল হল KompoZer, Dreamweaver, Quanta, Bluefish এবং অন্যান্য বান্ধব ওয়েব ডেভেলপমেন্ট সফ্টওয়্যার যা মানুষকে লেগো বিল্ডিং-এর মনোভাব নিয়ে এই বিষয়ে প্রবেশ করতে দেয়। WYSIWYG এডিটরগুলো টেক্সট এডিটরের চেয়ে অনেক সহজে কাজ করা যায়, কিন্তু সেসব সাধারণত কম দক্ষ।
এবং সেসব পিছনে অনেক অপ্রয়োজনীয় কোড ছেড়ে যায়।
টেক্সট এডিটর দিয়ে কাজ করলে, ওয়েব ফাইলগুলোর প্রতিটি বাইট কোড আপনার দ্বারা স্থাপিত হয়। অন্যদিকে, ওয়েব এডিটরগুলো সাধারণত অটো-জেনারেটেড মেটা ফিল্ড, স্ব-প্রচারমূলক কমেন্ট এবং অপ্রয়োজনীয় ব্রেক ও হোয়াইটস্পেস প্রচুর পরিমাণে কোডে যোগ করে দেয়, ফলে কোড আপনার অভিপ্রেতের চেয়ে অনেক বড় হয়ে যায়।
অধিকাংশ মানুষ এই الإضافية 것에 লক্ষ্য দেবে না বা চিন্তা করবে না, কিন্তু আপনি যদি আপনার ওয়েব ডেভেলপমেন্টকে পরিষ্কার, সুবিন্যস্ত, সরল উপায়ে চালাতে চান, তবে GUI এডিটর ব্যবহার করার কথা মনে করলেও, কিছু টুল আছে যা আপনাকে দुबলা এবং সুন্দর কোড বজায় রাখতে সাহায্য করতে পারে।
এই টুলগুলোকে লিন্ট/টিডি ইউটিলিটি বলা হয় এবং এগুলো HTML এবং সাথে যাওয়া ফাইলগুলোর আউটপুটকে ছোট, পরিষ্কার এবং ভালোভাবে সাজানো করতে ব্যবহৃত হয়। এই টিউটোরিয়ালে, আমি এই ইউটিলিটিগুলোর একটি সংগ্রহ উপস্থাপন করব, যestar অধিকাংশ আমি নিজে ব্যবহার করি, যাতে আপনিও আরও সুরূচিপূর্ণ এবং কোলেস্টেরল-মুক্ত ওয়েব ডেভেলপমেন্টর আনন্দ নিতে পারেন। চলুন শুরু করা যাক।
HTML Tidy
HTML Tidy সম্ভবত সবচেয়ে জনপ্রিয় HTML টিডি ইউটিলিটি। এই ছোট প্রোগ্রাম আপনার কোডের সাথে চমৎকার কাজ করতে পারে, অবৈধ HTML ঠিক করতে সাহায্য করে, অতিরিক্ত হোয়াইটস্পেস ক্যারেক্টার অপসারণ করে, চূড়ান্ত মার্কআপের লেআউট এবং ইন্ডেন্টেশন উন্নত করে।
এটি সকল প্রধান অপারেটিং সিস্টেমে ব্যবহার করা যায়।олее'armée, অধিকাংশ ওয়েব এডিটর তাদের নিজস্ব GUI-র ভিতর থেকে Tidy চালাতে সক্ষম, যা কাজ করা এবং পরিষ্কার কোড বজায় রাখা উভয়কেই সহজ করে দেয়।
লিনাক্স মিন্ট ৬ ফেলিসিয়া-এ Bluefish-এ একটি উদাহরণ এখানে দেওয়া হলো:
উইন্ডোজ এক্সপিতে KompoZer-এ Tidy কনফিগারেশনের একটি উদাহরণ:
এই দুটি চমৎকার ওয়েব এডিটর সম্পর্কে আরও জানতে এই আর্টিকেলটি দেখুন। জনপ্রিয় উইন্ডোজ টেক্সট এডিটর Notepad++-তে Tidy প্লাগইন পূর্বে ইনস্টল থাকে, তাই আপনি এডিটর ছাড়া না কোড এডিট করতে পারেন।
Tidy কীভাবে কাজ করে তার একটি উদাহরণ এখানে দেওয়া হলো। আমি একটি খালি টেক্সট ডকুমেন্টে কিছু শব্দ লিখব এবং তারপর তার বিরুদ্ধে Tidy চালাব। Tidy শুধু আউটপুট সুন্দর করবে না, এটি অনুপস্থিত, প্রয়োজনীয় HTML (XHTML) ট্যাগ যোগ করবে এবং সঠিক ইন্ডেন্টেশন তৈরি করবে:
আগে:
<p>Hello World</p>
পরে:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p>Hello World</p>
</body>
</html>
বা এটিও হতে পারে:
আপনি HTML কে XHTML-এ রূপান্তর করতে পারেন, XML-এ রূপান্তর বা রি-ইন্ডেন্ট করতে পারেন, র্যাপ ব্যবহার করতে পারেন, এবং এমনকি মাইক্রোসফট ওয়ার্ড ডকুমেন্টও পরিষ্কার করতে পারেন!
সাধারণত Tidy একটি কমান্ড লাইন ইউটিলিটি। এটি চালানোর জন্য কেবল চাইতে হয় কাঙ্ক্ষিত HTML ফাইলের বিপরীতে এটি আহ্বান করা: tidy filename.html। HTML ফাইলের নামে প্রস্তাবিত এক্সটেনশন ছাড়া অন্য কোনো ডট বা হোয়াইটস্পেস থাকা উচিত নয়, কারণ এগুলো ইউটিলিটির কার্যকারিতা ভাঙতে পারে। যা সাধারণ "ভালো" কোডিং গাইডলাইনের সাথে মিলে যায়।
Tidy 입수
Tidy অনেক আকার-প্রকারে পাওয়া যায়। তথ্যের সেরা উৎস হল অফিশিয়াল পেজ। আপনি ডেভ রাগেটের পেজও দেখতে পারেন, মূল ডেভেলপার, যদিও প্রকল্পে ডেভেলপমেন্ট, ফিক্স এবং উন্নতি এখন সব সোর্সফোর্জ সাইটে সমेकিত।
লিনাক্স
Tidy অধিকাংশ জনপ্রিয় ডিস্ট্রোর রিপোজিটরিতে অন্তর্ভুক্ত থাকে, তাই এটি পাওয়া কোন সমস্যা নয়।
উইন্ডোজ
উইন্ডোজ ব্যবহারকারীদের একাধিক বিকল্প রয়েছে: তারা Notepad++ ব্যবহার করতে পারেন, বা একটি উইন্ডোজ এক্সিকিউটেবল নিতে পারেন, যা কমান্ড লাইন থেকে HTML ফাইলের বিপরীতে আহ্বান করা যাবে বা KompoZer-এর মতো একটি ওয়েব এডিটর ব্যবহার করে প্লাগইনের মাধ্যমে ডাকা যাবে।
আপনি যদি কমান্ড লাইন পছন্দ না করেন, তবে ডার্ক পেইল একটি GUI সংস্করণও তৈরি করেছেন, যা অন্যান্য অপারেটিং সিস্টেমেও উপলব্ধ।
অনলাইন সার্ভিস
Tidy সরাসরি অনলাইনে ব্যবহার করা যায়, ইনস্টলেশন প্রয়োজন নেই। অনেক ওয়েবসাইট এই সেবা অফার করে, যার মধ্যে W3C আন্তর্জাতিক WWW стандар্ড সংগঠনটিও রয়েছে। আপনার HTML ফাইলগুলোর URL লিঙ্ক দিয়ে Tidy-র মাধ্যমে চালাতে হবে।
ফায়ারফক্স এক্সটেনশন
একটি ফায়ারফক্স এক্সটেনশনও উপলব্ধ, যদিও শুধু উইন্ডোজের জন্য। এক্সটেনশনটি অনেক বড়, ২.৬ MB ডাউনলোড, কিন্তু এটি আপনার ব্রাউজারের ভিতরেই প্রসারিত যাচাইক্ষমতা প্রদান করে। আরও বিস্তারিত জানতে অফিশিয়াল সাইট দেখুন।
তারপর Java, Python, PHP, এবং Ruby সংস্করণের Tidy ও রয়েছে। তালিকা প্রায় অনন্ত।
CSSTidy
CSSTidy একটি ওপেন-সোর্স CSS পার্সার এবং অপটিমাইজার। HTML Tidy-এর মতো, এটি CSS ফাইলগুলোর কোড পরিষ্কার করতে, প্রপার্টি স্ট্রিংকে হেক্স কোডে রূপান্তর করতে, হোয়াইটস্পেস ক্যারেক্টার অপসারণ করতে, ডুপ্লিকেট প্রপার্টি অপসারণ এবং মার্জ করতে ব্যবহৃত হয়। এইভাবে, CSSTidy CSS ফাইলগুলোর মোট আকার দশক শতাংশে কমাতে পারে।
CSSTidy একটি ক্রস-প্ল্যাটফর্ম সমাধান, লিনাক্স, উইন্ডোজ এবং ম্যাক-এ উপলব্ধ। C++ এবং PHP সংস্করণও উপলব্ধ। HTML Tidy-এর মতো পাঁচটি ভাষায় একটি অনলাইন ফরম্যাটার এবং অপটিমাইজারও রয়েছে।
HTML Tidy-এর মতো, CSSTidy একটি কমান্ড লাইন ইউটিলিটি এবং ব্যবহার করা অত্যন্ত সহজ।
CSSTidy একটি CSS ফাইল অপটিমাইজ করছে তার একটি উদাহরণ:
Weblint
এটি আরেকটি HTML অপটিমাইজেশন ইউটিলিটি যা আপনি বিবেচনা করতে পারেন, যদিও এটি HTML Tidy-এর চেয়ে কম শক্তিশালী এবং কম পোর্টেবল, কারণ এটি শুধু HTML 4.0 ডকুমেন্টের সাথে কাজ করে। এটি Bluefish-এ অন্তর্ভুক্ত থাকে। সাধারণত Weblint শুধু লিনাক্সে (রিপোজিটরিতে) উপলব্ধ।
উপসংহার
HTML এবং CSS টিডি ইউটিলিটি খুব উপকারী, আপনি चाहে 아마চুর হন বা পেশাদার ডেভেলপার। আপনি যদি উচ্চ মানের কনটেন্ট তৈরি করতে চান যা আন্তর্জাতিক মানদণ্ডের সাথে সামঞ্জস্যপূর্ণ, তবে আপনাকে এগুলো ব্যবহার করার কথা বিবেচনা করা উচিত।
এগুলো শুধু আউটপুটকে ভালোভাবে সাজাতে এবং ফাইলগুলাকে আরও কম্প্যাক্ট बनाने में সাহায্য করে না, বরং আপনাকে চিন্তা এবং কাজ করার পদ্ধতি পরিবর্তন করতে বাধ্য করে, ওয়েব стандар্ড মেনে চলতে। আপনি আপনার ওয়েব ডকুমেন্টের সামগ্রিক গুণগত মান এবং সামঞ্জস্যতা উন্নত করবেন। এবং আপনার পাঠকগণ এই ব্রাউজার বা সেটি রেজোলিউশনে আউটপুট কীভাবে দেখাবে সে চিন্তা ছাড়া প্রథম শ্রেণির কনটেন্টের উপভোগ করতে পারবেন।
আপনি যদি ওয়েব ডেভেলপমেন্টের জগতে প্রবেশ করতে চান বা এখনো প্রথম ধাপগুলো এগিয়ে যাচ্ছেন, তবে HTML Tidy এবং CSSTidy ব্যবহার করার কথা বিবেচনা করার এখন সেরা সময়। আপনার নিজের কাজকে আরও সুখদ बनाने পাশাপাশি আপনি কোডের বিশাল জগতকে একটু উন্নত করবেন। হে, প্রতিটি বিনয়ী অবদান মায়নে রাখে।
চিয়ার্স।
