ফ্রন্ট-এন্ড ডেভলপারদের জন্য কিছু মজার ওয়েবসাইট – (পর্ব ১)

এই সিরিজে আমরা এমন কিছু ওয়েবসাইট নিয়ে আলোচনা করবো, যেগুলো আমার খুবই প্রিয় এবং কাজের ওয়েবসাইট। আর অন্যান্য ফ্রন্ট-এন্ড ডেভলপারদেরও কাজে লাগবে বলে আশা করি।

CSS ICON

প্রথমেই css icon দিয়ে শুরু করি। এটি একটি আইকনের ওয়েবসাইট। আমরা এ পর্যন্ত অনেক আইকন প্যাকেজ ব্যবহার করেছি। সব আইকন প্যাকেজের সিস্টেম অনেকটা একই রকম। কমন কিছু ফরম্যাটের ফন্ট একটি ফোল্ডারে রাখতে হবে, তারপর আইকনের জন্য যে css ফাইলটি আছে, সেটাকে এটাচ করে নিতে হবে। আর এই আইকনগুলো কাজ করে css pseudo element :before অথবা :after এর content এর মাধ্যমে। মোটামুটি সব আইকন প্যাকেজের এ-ই নিয়ম।

তবে ….

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

এই আইকনটি সম্পূর্ণ html/css দিয়ে তৈরি করা। এখনও এটির কাজ চলছে, তবে ব্যবহার করার জন্য যথেষ্ট। এই আইকন প্যাকেজের আরও অনেক মজার ফিচার আছে এবং আসছে, ভিজিট করুন, ব্রাউজ করুন, নিজেই বুঝতে পারবেন।

 

codrops

তারপর আমরা যে সাইটটি নিয়ে আলোচনা করবো, সেটির নাম হলো codrops, তবে এটির ওয়েব এড্রেসটি একটু ভিন্ন।

https://tympanus.net/codrops/

এই সাইটটিতে বিভিন্ন মজার মজার snippet পাওয়া যায়। css, js, icon আরও অনেক কিছু। মজার বিষয় হলো- প্রতিটা snippet এর সাথে তার বিস্তারিত ডকুমেন্টেশন এবং সোর্স কোডসহ ডেমো দেয়া থাকে। সাইটটি ভিজিট করুন, ব্রাউজ করুন, অনেক কাজের জিনিস পাওয়া যাবে আশা করি।

 

onlinefontconverter

আমরা সাধারণত google font ব্যবহার করি। কিন্তু যারা কাস্টম ফন্ট ব্যবহার করি, তারা সাধারণত একটি সমস্যার সম্মুখিন হয়। সমস্যাটি হলো- একটি ফন্টকে তার প্রয়োজনীয় সবগুলো ফর্মেটে কনভার্ট করা। গুগলে ফন্ট ফর্মেটের কনভার্টার খুঁজলে অনেক পাওয়া যাবে। তবে আমি এটি ব্যবহার করি। এতে অনেকগুলো ফর্মেটে কনভার্ট করার অপশন থাকে।

 

HEX2RGBA

আমরা সাধারণত hex কালার কোড ব্যবহার করি। অনেক সময় আমাদের rgb কালারের প্রয়োজন হয়। তো … একটি hex কালার কোড থেকে তার rgb কালার বের করার অনেক পদ্ধতি রয়েছে। এখানে যে সাইটটির কথা বলতে যাচ্ছি, সেটি একটি অনলাইন কনভার্টার। এটি hex কালার কোডকে rgb-তে কনভার্ট করে। পাশাপাশি ব্যাকগ্রাউন্ডে সেই কালারের প্রিভিউ থাকে। এই সাইটটির মাধ্যমে আমি সাধারণত hex থেকে rgb-তে কনভার্ট করি। এই কাজটি করার জন্য আমি আরেকটি সাইট মাঝে মাঝে ব্যবহার করি, কারণ এটিতে শুধু rgb থাকে না, rgb -এর পাশাপাশি rgba-ও দেয়া থাকে। যাক… নিচে সাইট দু’টির লিঙ্ক দিয়ে দিলাম। ভিজিট করুন, ব্যবহার করুন।

 

 

 

এই পর্বটি এখানে শেষ করতে হচ্ছে। পরবর্তী পর্ব দ্রুত দেয়ার চেষ্টা করবো। ভাল থুকন সবাই।

 

মন্তব্য

মন্তব্য