ওয়েব ডেভেলপিং এর জন্য Adobe এর তৈরি ব্রাকেটস (Brackets) নিয়ে আলোচনা করা হয়েছে এ নথিতে।

Brackets হল Adobe এর একটি ওপেনসোর্স এবং বিনামূল্য Web Development পণ্য। এটির বিশেষ বৈশিষ্ট্য হল এটি তৈরি করা হয়েছে শুধু মাত্র HTML, CSS এবং JavaScript দিয়ে!

বৈশিষ্ট্য

• কোডিং করার সময় সরাসরি প্রিভিউ দেখার সুবিধা।
• HTML ফাইল সম্পাদন করার সময় কোড থেকেই CSS ফাইল এডিট করার সুবিধা।
• অতিরিক্ত সুবিধার জন্য রয়েছে extension।
• অফলাইনে বিভিন্ন ট্যাগ সম্পর্কে তথ্য জানার সুবিধা।
• Windows, Linux এবং Mac OS সমর্থন।

ইত্যাদি।

ডাউনলোড

brackets.io

সংস্থাপন

উপরের লিঙ্ক থেকে ডাউনলোড করে সাধারন সফটওয়্যারের মতই এটিকে সংস্থাপন করা যাবে।

উইন্ডো পরিচিতি

চিত্রের সাথে মিলিয়ে পড়ুনঃ

1. কোড লিখতে হবে এখানে।
2. আপনার ডকুমেন্টটি কি ডকুমেন্ট তা এখান থেকে নির্বাচন করে দিতে পারবেন। এমনিতে HTML নির্বাচন করা থাকে।
3. আপনি যে ডকুমেন্ট নিয়ে কাজ করছেন সে ডকুমেন্ট বা ডকুমেন্ট সমূহ এ অংশে পাবেন।
4. আপনি যদি কোনো প্রোজেক্ট নিয়ে কাজ করেন তাহলে এখানে ক্লিক করে প্রোজেক্ট ফোল্ডারেক্ট নির্বাচন করে দিন। তাহলে এ অংশে প্রোজেক্ট ফোল্ডারের সব ফাইল দেখা এবং সম্পাদন করা যাবে।
5. লাইভ প্রিভিউ চালু করার জন্য এতে ক্লিক করুন। এ বৈশিষ্ট্যটি ব্যবহার করতে আপনার কম্পিউটারে অবশ্যই গুগল ক্রোম স্থাপন করা থাকতে হবে। কারণ এ বৈশিষ্ট্যটি শুধু গুগল ক্রোমেই চালু হয়।
6. ব্রাউজারে অ্যাড-অন চালানোর অভিজ্ঞতা আছে আশা করি, অ্যাড-অন এর আরেক নাম এক্সটেনশন। Brackets এ এক্সটেনশন যুক্ত করার সুবিধা আছে। চিহ্নিত বাটনে ক্লিক করলে Brackets এ এক্সটেনশন ম্যানেজার চালু হবে, সেখান থেকে ইচছা মত এক্সটেনশন যুক্ত করতে পারবেন।

Live Preview (Ctrl + Alt + P)

HTML এবং CSS কোডিং করার সময় লাইভ প্রিভিউ থাকা অবস্থায় কোনো কোডে ক্লিক করলে প্রিভিউ এ ঐ অংশটি চিহ্নিত হয়ে যায় এবং কোড পরিবর্তন করার সাথে সাথে প্রিভিউ ব্রাউজার স্বয়ংক্রিয় রিফ্রেশ হয় এবং কোডের পরিবর্তিত রূপ দেখা যায়। দারুন না!

Quick Edit (Ctrl + E)

HTML ডকুমেন্টের যে ট্যাগ, ক্লাস বা আইডি-র CSS দেখতে হলে প্রথমে কার্সর ঐ সিলেক্টরের উপর নিয়ে গিয়ে Ctrl + E চাপুন অথবা Navigate মেনু থেকে Quick Edit এ ক্লিক করলেই শুধু ঐ সিলেক্টের CSS দেখতে পাবেন। ঐ সিলেক্টরের জন্য একাধিক CSS রুল থাকে তাহলে তার তালিকাও পাবেন। চাইলে সেখান থেকে New Rule এ ক্লিক করে নতুন CSS রুল ও লিখতে পারবেন।

Quick Preview

কোড অংশে কোনো রং এর মান লিখুন। এবার কোডটির উপর মাউস নিয়ে যান, দেখবেন রংটির প্রিভিউ দেখা যাচ্ছে! প্রিভিউ দেয়া সম্ভব এরকম সব মানের উপর মাউস পয়েন্টার নিয়ে গেলে তার প্রিভিউ দেখা যাবে।

CSS ডকুমেন্টে কোনো রং এর মান-এ কার্সর রেখে Ctrl + E চাপুন। রং এর সব উপকরণ চলে আসবে সামনে!

Quick Docs (Ctrl + K)

ধরুন কোনো একটি CSS এর প্রোপার্টির কি কি মান হবে তা মনে পড়ছেনা, বা কি কি মান হতে পারে তাও সম্পূর্ণ জানা নেই, এও হতে পারে কারো বানানো কোড নিয়ে ঘাটছেন; হঠাৎ অচেনা একটি প্রোপার্টি পেলেন! তো কি করবেন? গুগলিং? এর চেয়ে কোডটির উপর মাউস পয়েন্টার রেখে Ctrl + K চাপুন অথবা Navigate মেনু থেকে Quick Docs এ ক্লিক করুন। ঐ প্রোপার্টি সম্পর্কে বিস্তারিত তথ্য আপনার সামনে হাজির হবে! কোনো ইন্টারনেট কানেকশন প্রয়োজন নেই এর জন্য!

Brackets এর প্রয়োজনীয় এক্সটেনশন

• Beautify: কোড লিখার সময় তা সাজানো প্রয়োজন হয়। এ সাজানোর কাজটি করে দেবে Beautify. এটি স্থাপিত থাকা অবস্থায় কোডের উপর বাম বাটন ক্লিক করে Beautify এ ক্লিক করলেই কোড সজ্জিত হয়ে যাবে।
• Minify: কোড ফাইলকে ছোট করতে ব্যবহার করা হয় মিনিফাই জাতীয় টুল। Minify এক্সটেনশন দিয়ে সরাসরি কোডব্লকস থেকেই মিনিফাই করতে পারবেন CSS এবং JS ফাইলকে।
• Autoprefixer: ওয়েবসাইটে সব সংস্করণের ব্রাউজার সাপোর্ট দেয়ার জন্য CSS এ প্রিফিক্স যুক্ত করতে হয়। এ বিরক্তিকর কাজটি স্বয়ংক্রিয় করে দেবে autoprefixer এক্সটেনশনটি।