ফ্রন্টেন্ড ডেভেলপ এর জন্য বহুল ব্যবহৃত ৬ টি টুলস

ফ্রন্টেন্ড ডেভেলপ এর জন্য বহুল ব্যবহৃত ৬ টি টুলস

ইন্টারনেট জগতে এমন অনেক টুলস রয়েছে যেগুলো আমাদের ফ্রন্টেন্ড ডেভেলপমেন্ট লাইফ কে সহজ করে তুলেছে। আমি আজকের আর্টিকেল এ এমন কিছু ৬ টি টুলস এর কথা বলব যেগুলোর মাধ্যমে সহজেই আমাদের ফ্রন্টেন্ড লাইফ সহজ হয়ে যাবে।

ফ্রন্টেন্ড ডেভেলপ এর জন্য বহুল ব্যবহৃত ৬ টি টুলস

ফ্রন্টেন্ড ডেভেলপ এর জন্য বহুল ব্যবহৃত ৬ টি টুলস
ফ্রন্টেন্ড ডেভেলপ এর জন্য বহুল ব্যবহৃত ৬ টি টুলস

 ১। EnjoyCSS

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

আর এই EnjoyCSS হচ্ছে আমার কঠিন সময়ের সবচেয়ে বড় বন্ধু। আপনি ড্রাগ এন্ড ড্রপ এবং সিম্পল এলিমেন্টের এডিট এর মাধ্যমে আপনার প্রয়োজনীয় কাঙ্ক্ষিত সিএসএস কোড পেতে পারেন।

২। Prettier Playground

Prettier মূলত একটি কোড ফরম্যাটার যেখানে জাভাস্ক্রিপ্ট, ES2017, JSX, এঙ্গুলার, ভিউ, ফলো এবং টাইপস্ক্রিপ্ট এর মতো কোড স্নিপেট গুলোকে সহজেই ফরম্যাট বা সাজানো যায়। আপনার নিজস্ব কোডিং স্টাইল কে পরিবর্তন করে Prettier এর মাধ্যমে আপনি সহজেই স্ট্যান্ডার্ড কোডিং ফরম্যাট এবং স্টাইল এ রিপ্লেস করতে পারবেন।

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

তবে শুধু এক্সটেনশন ই নয় বরং অনলাইনে আপনি আলাদা IDE এর মাধ্যমেই কোড ফরম্যাট করতে পারবেন।

৩। Postman

Postman ই এমন একটা টুলস যেটা আমি আমার ডেভেলপমেন্ট ক্যারিয়ারের শুরু থেকেই ব্যবহার করে আসছি বহুল ভাবে। আমার ডেভেলপমেন্ট ক্যারিয়ার এ কোড এডিটর এর পাশাপাশি যে টুলস টা সবথেকে বেশি ব্যবহার করেছি সেটা হচ্ছে Postman. যখন ফ্রন্টেন্ড কে আমরা ব্যাকেন্ড এর সঙ্গে কানেক্ট করি সেসময় সবথেকে বেশি যে টুলস ব্যবহার হয় সেটি হচ্ছে Postman.

আমরা ব্যাকেন্ড এ ‘এপিআই’ কে ফ্রন্টেন্ড এর সাথে কানেক্ট করে এর সব ধরনের স্ট্যাটাস বুঝতে পারি এই টুলস এর মাধ্যমে। এর অনেক ধরনের অল্টারনেটিভ থাকা সত্ত্বেও এটি বহুল ব্যবহৃত এবং সবচেয়ে জনপ্রিয়। এন্ড পয়েন্ট যেমন GET, POST, DELETE, PUT সহ সবধরনের রিকুয়েস্ট ই আমরা প্রয়োজনে Postman এর সাহায্যে কমপ্লিট করতে পারি। আমার মনে হয় আপনার ও ব্যবহার করা উচিত।

৪। StackBlitz

StackBlitz হচ্ছে অনলাইন ভিজুয়াল স্টুডিও কোড। বুঝলেন না? আচ্ছা ভেঙ্গে বলি, মূলত এটি হচ্ছে একটা ইন্টিগ্রেটেড ডেভেলপমেন্ট এনভাইরোমেন্ট বা সংক্ষেপে IDE । যেমন VS Code, Sublime Text, Atom ইত্যাদি ইত্যাদি। এগুলোতে আপনি লার্জ স্কেলের প্রোজেক্ট যেমন করতে পারবেন তেমনি পারবেন ছোট স্কেল এর কোডিং ও।

আর সেই একই কাজ করা যাবে StackBlitz এ। তবে পার্থক্য কোথায়? আসলে পার্থক্য হচ্ছে এর সিম্পল প্রজেক্ট ক্রিয়েট ওয়ার্কস্পেস এ। আপনি যদি অফলাইন কোড এডিটর এ কোন প্রোজেক্ট ওপেন করতে চান তাহলে মোটামুটি ৫/৬ মিনিট ধরে এনভাইরোমেন্ট রেডি করতে হবে এবং তারপরে আপনাকে প্রোজেক্ট শুরু করতে হবে।

বড় কোন প্রোজেক্ট হলে বলা যায় ঠিক আছে কিন্তু যদি ছোট কোন প্যাকেজ টেস্ট করা লাগে কিংবা ছোট কোন কাজের জন্য একটা এনভাইরোমেন্ট প্রয়োজন হয় তবে এই ৫/৬ মিনিট ই বেশ বড় সময় হয়ে যায়। তাছাড়া এত সিম্পল কাজের জন্য কেউ অত ঝামেলা কেন পোহাবে? আর ঠিক এই সমস্যার সমাধানেই চলে এসেছে StackBlitz।

এর মুল ফিচার হচ্ছে সিম্পল ওয়ার্কস্পেস। আপনি জাস্ট এক ক্লিকেই Angular, React, Ionic, TypeScript, RxJS, Svelte সহ বিভিন্ন জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক ইনশিয়ালাইজ করতে পারবেন এবং কাজ করতে পারবেন।

তাছাড়া যেকোন সম্পুর্ন IDE তে যা যা ফিচার থাকা প্রয়োজন তার সবটাই আপনি পাবেন এখানে। আর দেরী কেন? শুরু করুন ব্যবহার করা।

৫। Bit.dev

সফটওয়ার ডেভেলপমেন্ট এর অনেক বড় এবং ব্যাসিক একটা নিয়ম হচ্ছে “পুনরায় ব্যবহার যোগ্যতা” অর্থাৎ একটা ডেভেলপমেন্ট প্রসেস আপনাকে যেন বারবার স্ক্র্যাচ থেকে না শুরু করতে হয় সেটাই নিশ্চিত করবে এই নিয়ম।

অর্থাৎ আপনি একটা কম্পোনেন্ট এর জন্য কোড লিখলে সেটা যেন আর বার বার না লিখতে হয় বরং একই কোড বার বার ব্যবহার করা যায় সেটাই এই প্রিনিস্পালের মূলত উদ্দেশ্য।

আর ঠিক এই কাজটাই করে Bit.dev তারা যেকোন কম্পোনেন্ট এর জন্য কোড শেয়ার করতে দেয় যেগুলো চাইলেই যে কেউ নিয়ে ব্যবহার করতে পারবে। এর মাধ্যমে কোড লেখার প্রসেস সহজ করে ডেভেলপমেন্ট এর স্পিড বাড়ানো যায়।

তাছাড়া কোন নির্দিষ্ট টিমের মধ্যেও স্পেশালি কম্পোনেন্ট শেয়ার করার মাধ্যমে টিম ম্যানেজমেন্ট এখানে অনেক সহজ হয়ে যায়।

এখন React, Vue, Angular, Node সহ অনেক ধরনের জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কের কম্পোনেন্ট ই এখানে সহজেই পাওয়া যায়।

৬। CanIUse

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

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

আপনার ওয়েবসাইট সব ব্রাউজারে সাপোর্ট করবে কিনা জানতে এখনি ভিজিট করুন।

পরিশেষে

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

You Might Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *