Top 5 Useful Developer Extension Part – 1

Why Web Developer?

বর্তমান ফিল্যান্সিং জগতের বেশিরভাগ জায়গা Website Developer দখল করে রেখেছে। কারন যাদের বর্তমানে  একটি বিজনেস করেছে তাদের সার্ভিস গুলো অনলাইনে প্রচার করতে তারা তাদের নিজিস্ব Website থেকে প্রডাক্ট/সার্ভিস প্রচার করে। এবং দিন দিন নতুন নতুন ব্যাবসায়ী আসছে। এবং এই বাজার চাহিদার উপর ভিত্তি করে দেখা যায় বর্তমানে Website developer দের চাহিদা ও প্রচুর। চাহিদা প্রচুর হওয়ার কারনে নতুন প্রজম্ন Development নিয়ে Skills অর্জন করছে।

Why Developer Extension?

আপনি যখন একটি Website তৈরি করতে করতে বসবেন। তখন আপনাকে বিভিন্ন সাইডে যেতে হবে কোড কালেক্ট করার জন্য। আপনি দেখতে চান যে একটি Website এর মধ্যে কোন কোড ব্যবহার করা হয়েছে। বাটনে গুলোতে কোন Color এবং Font ব্যবহার হয়েছে। এবং একটি Website বানানো থেকে শুরু করে এলোমেলো কোড সাজানো এবং ঐ Site এর সকল তথ্য জানতে পারবেন Extension এর মাধ্যামে আপনি যদি Site তৈরি করে থাকেন তাহলে এই Extension গুলো ব্যবহার করতে পারেন প্রয়োজন অনুযায়ী।

Part- 1 এ যে ৫ টা Extension আমরা দেখবো তা হলো :

1. Css Viewer : Css এর মাধ্যমে Site এর বাটন, ব্যাকগ্রান্ড, কালার এবং ছবির সাইজ এগুলো ডিজাইনের সকল কাজ Css দিয়ে করা হয়। Css Viewer Extension দিয়ে আপনি অন্য সাইডের Css কোড গুলো দেখতে পারবেন এবং ঐ কোড আপনি কপি করে আপনার সাইডে বসাতে পারবেন।

2. Json View : API নিয়ে কাজ করতে গেলে দেখা যায় আমাদের JSON File এর কোড গুলো এলোমেলো থাকে। যার ফলে কোড গুলো পড়তে অথবা ইডিট করতে গেলে নিদিষ্ট কোড খুজে পাওয়া যায় না। এবং অগোছালো দেখায়। এর জন্য Json View Extension এটির মাধ্যমে আপনি API JSON File এর কোড গুলো রিড করতে পারবেন।

3. Color Zilla :কোডিং করতে গিয়ে আমাদের Site এর মধ্যে বাটন, হেডিং, ব্যাকগ্যাউন্ট এর কালার এগুলো দিতে হয়। তখন দেখা যায়, অন্য সাইডের কোনো বাটন বা কোনো অংশের কালার ভালো লাগলে। আমরা চাই ঐ Color কোড আমাদের Site এ বসাতে। তাই Color Zilla Extension এর মাধ্যমে আপনি অন্য  সাইড থেকে Color কোড গুলো Copy করে নিজের সাইডে বসাতে পারবেন।

4. Scan WP – WordPress Theme and Plugin Detector : পৃথিবীতে অনেক WebSite আছে এবং এই গুলো আবার অন্য Site এর অধিনে থাকে যেমন অধিকাংশ ই-কমার্স সাইট WordPress এর অধিনে থাকে। একটি WebSite দেখে বুঝা যায় না এটি কোন Site বা কম্পানির অধিনে আছে। এবং একটি সাইড এর মধ্যে কোন কম্পানির Theme ব্যবহার হয়েছে Theme এর ভার্সন কতো টাকা দিয়ে Theme ক্রয় করা হয়েছে। এবং Theme এ কোন কোন প্লাগিন ব্যবহার হয়েছে। বিস্তারিত ভাবে দেখতে পারবেন Scan Wp – WordPress Theme and Plugin Detector Extension দ্বারা।

5. Session Buddy : রিসার্চ করতে গিয়ে দেখা যায় আমাদের অনেক Tab Open করে অনেক Site এ যেতে হয়। এবং রিসার্চ করতে কিছু দিন সময় লাগে। তাই প্রতিদিন ঐ Tab গুলো হয়তো কাজে লাগে এবং আমাদের মনে থাকে না কোন কোন Site এ গিয়েছিলাম। তাই Session Buddy Extension এর মাধ্যমে আপনি যেই সাইড গুলো Tab এ রাখছেন ওইগুলো এই Extension এর মধ্যে Save করে রাখতে পারেন। এবং পরবর্তী সময়ে যখন রিসার্চ করবেন তখন ঐ Site গুলো খুজতে হবে না। Session Buddy Extension এ পেয়ে যাবেন।

এখন দেখে নেওয়া যাক এগুলো কীভাবে Chrome এ ইনষ্টল বা প্লাগিন করা যায়! Google Chrome Browser এ কিভাবে Extensions ইনস্টল করবো?

Google Chrome ব্রাউজার সব থেকে বেশি ব্যবহার হওয়ার কারনে এখানে আপনারা হাজার হাজার কাজের এবং মজাদার Browser Extensions বা Plugins পেয়ে যাবেন। তাই আমি আপনাদের Google Chrome এ Plugin ইনস্টল করার নিয়ম দেখিয়ে দিচ্ছি। মনে রাখবেন, Chrome Browser এ Extension ইনস্টল করার জন্য আপনাকে নিজের ক্রোম ব্রাউজারে Google Account আইডি  Login থাকতে হবে। তারপর আপনি নিচে দেয়া স্টেপ গুলি ফলো করে Extensions ইনস্টল করতে পারবেন। এবং সব গুলোর জন্য নিয়ম একই রকম।

Chrome Browser থেকে ”Css Viewer”Extensions কীভাবে প্লাগিন বা ইনষ্টল করবেন?

Number-1 ( Css Viewer )

Step -1. Link এ ক্লিক  করে Extension এর মধ্যে চলে যাবেন। তারপর Add To Chrome এ Click করবেন। 

Download Link : Css Viewer

Step-2. তারপর চেকিং হয়ে এমন একটি মেনু আসবে, আপনি Add Extension এ ক্লিক করবেন।

Step-3. উপরে বিস্কুট এর মতো একটি icon দেখবেন যেখানে Extansion থাকে সেটায় ক্লিক করবেন।তারপর Pin করবেন।

Step-4. এখন ওইটার Extansion এর Logo Add হয়ে যাবে। আমরা যেই Site থেকে  কোড নিতে চাচ্ছি সেই সাইডে চলে যাবো। আমি Damo হিসাবে আমাদের Site দিয়ে দেখাচ্ছি। 

এখন  Logo তে ক্লিক করে এই Extension Active করে। Site এর যেই অংশের কোড নিতে চাচ্ছি সেই অংশের উপরে রাখবো।

Step-5. এখান থেকে Code Copy করার জন্য Keyboard এর F চাপ দিলে Freeze হবে। এবং সহজেই Copy করে নিতে পারবেন। 

আবার Keyboard এর  F চাপ দিলে Freeze থেকে আগের অবস্থায় আসবে। এই অবস্হায় আপনি Mouse অন্য মেনু বার বা বাটন এর উপর নিলে ঐ জায়গার Code দেখতে  পারবেন।

Chrome Browser থেকে ”JSON View” Extensions কীভাবে প্লাগিন বা ইনষ্টল করবেন?

Number-2 ( JSON View )

Step -1. Link এ ক্লিক  করে Extension এর মধ্যে চলে যাবেন। তারপর Add To Chrome এ Click করবেন। 

Download Link : Json View

Step-2. তারপর চেকিং হয়ে এমন একটি মেনু আসবে, আপনি Add Extension এ ক্লিক করবেন।

Step-3. উপরে বিস্কুট এর মতো একটি icon দেখবেন যেখানে Extansion থাকে সেটায় ক্লিক করবেন।তারপর Pin করবেন।

Step-4. এখন ওইটার Extansion এর Logo Add হয়ে যাবে। সাধারণত কোড গুলো এমন ছড়িয়ে ছিটিয়ে থাকে। 

Step-5. এখন JSON file এ এসে Extension এ ক্লিক করার সাথে সাথে আপনি দেখতে পারবেন। Extension টি সব কোড সুন্দর মতো সাজিয়ে দিয়েছে। 

Chrome Browser থেকে ” Color Zilla ” Extensions কীভাবে প্লাগিন বা ইনষ্টল করবেন?

Number-3 ( Color Zilla )

Step -1. Link এ ক্লিক  করে Extension এর মধ্যে চলে যাবেন। তারপর Add To Chrome এ Click করবেন। 

Download Link : Color Zilla

Step-2. তারপর চেকিং হয়ে এমন একটি মেনু আসবে, আপনি Add Extension এ ক্লিক করবেন।

Step-3. উপরে বিস্কুট এর মতো একটি icon দেখবেন যেখানে Extansion থাকে সেটায় ক্লিক করবেন।তারপর Pin করবেন।

Step-4. এখন ওইটার Extansion এর Logo Add হয়ে যাবে। আপনি যেই Site থেকে কালার নিতে চান ঐ সাইটে চলে যাবেন। আমি Damo হিসাবে আমাদের Wabsite দিয়ে দেখাচ্ছি ।

Coler Zila Extension এ ক্লিক করলে এইরকম Page দেখবেন বহু ফিচার রয়েছে। আপনি সবার উপরের Page Color picker Active এ ক্লিক করবেন।

আমরা Website থেকে যেই অংশের কালার নিতে চাই। সেই অংশের উপর প্লাস (+) icon টা রাখলে দেখা যাবে, উপরে ঐ অংশের কালার Code। এখন প্লাস icon যেই অংশে রেখেছেন সেই অংশের উপর ক্লিক করবেন। Keyboard এ অটোমেটিক কালার কোড এড হয়ে যাবে। এখন এই Code যেই অংশে বসাতে চাচ্ছেন, সেখানে গিয়ে Paste করে দিন।

Chrome Browser থেকে ”Scan Wp – WordPress Theme and Plugin Detector” Extensions কীভাবে প্লাগিন বা ইনষ্টল করবেন?

Number-3 ( Scan Wp – WordPress Theme and Plugin Detector )

Step -1. Link এ ক্লিক  করে Extension এর মধ্যে চলে যাবেন। তারপর Add To Chrome এ Click করবেন। 

Download Link : Scan Wp

Step-2. তারপর চেকিং হয়ে এমন একটি মেনু আসবে, আপনি Add Extension এ ক্লিক করবেন।

Step-3. উপরে বিস্কুট এর মতো একটি icon দেখবেন যেখানে Extansion থাকে সেটায় ক্লিক করবেন। তারপর Pin করবেন।

Step-4. এখন ওইটার Extansion এর Logo Add হয়ে যাবে। আমরা যেই Site এর বিষয়ে জানতে চাচ্ছি সেই Site এ গিয়ে Scan Wp Extension এর Logo তে ক্লিক করলে এমন একটি Page আসবে যেকানো ঐ Site এর ডাটা কালেক্ট হবে। 

Step-5. এখন WordPress এর অধিনে ঐ Site থাকলে এমন একটি Page Open হবে।যেখানে Site এর Them এবং কোন Site এর অধিনে রয়েছে সব দেখতে পারবেন। 

Step-6. কোনো সাইড যদি WordPress এর অধিনে না থাকে তাহলে ঐ Site এর বিস্তারিত দেখা যাবে না। তখন এমন Page আসবে।

Chrome Browser থেকে ”Session Buddy” Extensions কীভাবে প্লাগিন বা ইনষ্টল করবেন?

Number-3 ( Session Buddy )

Step -1. Link এ ক্লিক  করে Extension এর মধ্যে চলে যাবেন। তারপর Add To Chrome এ Click করবেন। 

Download Link : Session Buddy

Step-2. তারপর চেকিং হয়ে এমন একটি মেনু আসবে আপনি Add Extension এ ক্লিক করবেন।

Step-3. উপরে বিস্কুট এর মতো একটি icon দেখবেন যেখানে Extansion থাকে সেটায় ক্লিক করবেন।তারপর Pin করবেন।

Step-4. এখন ওইটার Extansion এর Logo Add হয়ে যাবে। এখন আপনি আপনার রিসার্চ করা Window Tab গুলো রেখে New Tab এ গিয়ে Session Buddy Extension এ ক্লিক করলে এর ভিতরে নিয়ে যাবে। এখন দেখতে পারবেন এর মধ্যে আপনার Open করা Tab গুলো।

Step-5. Current Window এর উপর মাউস নিয়ে গিয়ে মাউস এর Right বাটনে ক্লিক করলে Save বাটন দেখতে পারবেন।

Step-6. এখানে আপনি আপনার ফোল্টার এর একটি নাম দিয়ে Ok তে ক্লিক করবেন। আপনার ফ্লোল্ডার তৈরি হয়ে যাবে।

আপনি এখন এই Window বা Tab কেটে দিলেও এখানে ফোল্ডার গুলো থেকে যাবে।

 Window এর উপরে মাউস রেখে ডাবল ক্লিক করলে সব Tab একসাথে খুলে যাবে। এভাবে আপনি বহু Tab  ফোল্ডার বানিয়ে রাখতে পারেন। 

এই Extension গুলোর মধ্যে কোথাও বুঝতে বা Install করতে Problem হলে YouTube থেকে ভিডিও দেখতে পারেন ।

Youtube Video Link: 5 Best Developers Chrome Extensions in 2022