25 Useful tools for Frontend Developers

🚀🚀 Frontend ডেভেলপার দের জন্য ২৫ টি ইউজফুল টুলস:

✅ UX challenges:
==========
কথায় আছে, practice makes a man perfect। আসলেই তাই।যত বেশি প্র্যাকটিস করা যায় ততই আমরা কোন বিষয় ভালো মতন জানি। ওয়েবসাইটের UX ডিজাইনের বিভিন্ন এক্সারসাইজ দেওয়া আছে এখানে যা আপনি অনুশীন করতে পারেন। চ্যালেঞ্জ গুলোর মাধ্যমে নিজের দক্ষতা যাচাই করে নিতে পারেন। বেশ ইউজফুল মনে হয়েছে।
লিংক: https://uxtools.co/challenges/

✅ Collect UI:
=======
বিভিন্ন চলেঞ্জের মাধ্যমে ডিজাইনার র তাদের ডিজাইন গুলো এখানে শেয়ার করেন। সবসময় ই আপডেট হয়ে নতুন নতুন ডিজাইন আসে। এখান থেকে ভালো ভালো ডিজাইন গুলো দেখে নিজের মতন একটা ভালো ডিজাইন দাড় করিয়ে ফেলতে পারবেন।
লিংকঃ https://collectui.com/

✅ PixelSnap:
=======
কথায় আছে না পাই পাই হিসেব? কিন্ত এখানকার হিসেব টা পিক্সেলে। এটি পুরো স্ক্রিন জুড়ে কাজ করে সব ধরনের এপ্লিকেশন এ। যেকোনো কিছু মেপে নিতে পারবেন। যাদের সব পিক্সেল পারফেক্ট দরকার তাদের বেশ কাজে আসবে।
লিংক: https://getpixelsnap.com/

✅ Landing Page Checklist:
===============
কি নেই এতে? Landing page এর প্রায় ১০০ টির বেশি টুলস রয়েছে এতে। হোক সেটা ডোমেইন নেইম থেকে শুরু করে, লোগো মেকার, ইলাস্ট্রেশন কিংবা ডিজাইন সফটওয়্যার। ভিজিট করে দেখতে পারেন।
লিংক: https://landingpage.fyi/landing-page-checklist.html

✅ Checklist Design:
==========
ওয়েবসাইট ডিজাইনের অনেক খুঁটিনাটি বিষয় গুলোর অব্দি বর্ণনা দেওয়া আছে। ওয়েব ডিজাইন এলিমেন্ট গুলোর নলেজ increase করতে সহায়তা করবে। অবশ্যই ভিজিট করবেন।
লিংক: https://www.checklist.design/

✅ Museum of Websites:
====================
জনপ্রিয় ওয়েবসাইট গুলোর UI এর বিভিন্ন ডেভেলপমেন্ট স্টেজ গুলোর বিবরণ সমন্বয় করা হয়েছে এখানে। কিভাবে একটি ওয়েবসাইটের ইন্টারফেস ডিজাইন ও ডেভেলপ করা যায় এ সম্পর্কে একটি ভালো ওভারভিউ পাওয়া যায়।
লিংকঃ https://www.kapwing.com/museum-of-websites

✅ UI Play Book:
=========
এই ওয়েবসাইট টি আমার কাছে খুব বেশি ইউজফুল মনে হয়েছে। এখানে UI এর বিভিন্ন পার্ট গুলোর বর্ণনা খুবই গুছানো ও বিস্তারিত ভাবে দেওয়া আছে।
লিংকঃ https://uiplaybook.dev/

✅ Standard Resume:
============
খুব সিমপ্লি অল্প সময়ে যদি একটি রেজুমি বানিয়ে নিতে চান তাহলে অবশ্যই এই ওয়েবসাইট টি ঘুরে আস্তে পারেন। এখানে আছে বিভিন্ন টেম্পলেট ও এক্সাম্পল যেখান থেকে আপনি নিজেও একটি ধারনা নিয়ে ইউনিক কিছু বানিয়ে ফেলতে পারবেন।
লিংকঃ https://standardresume.co/

✅ humaaans:
=======
ওয়েবসাইটে মানুষের শেপ প্রয়োজন হয় অনেক সময়। humaaans এর মাধ্যমে বিভিন্ন ধরনের হিউম্যান বডি আপনি নিজেই রিমিক্স করে বানিয়ে নিতে পারবেন। এছাড়া এতে আছে বিভিন্ন ধরনের টেম্পলেটস। খুব সহজে নিজের একটা কাস্টম ডিজাইন বানিয়ে ফেলা সম্ভব।
লিংক: https://www.humaaans.com

✅ Get Waves:
=======
ওয়েবসাইটের জন্য নিজ ইচ্ছামতো কাস্টম wave এনিমেশন ইফেক্ট খুব সহজেই পাওয়া সম্ভব এখানে।
লিংক: https://getwaves.io/

✅ Animista:
======
এই ওয়েবসাইট টি আপনাকে হেল্প করবে ওয়েবসাইট এর এনিমেশন ইফেক্ট গুলো প্র্যাকটিস করতে। আমরা অনেকেই প্রপারলি সব ইফেক্ট গুলোর নাম জানিনা। ট্রাই করে দেখা যায়। মোটামুটি ভালোই।
লিংকঃ https://animista.net/

✅ Blobmaker
=======
ওয়েবসাইটে ব্যবহৃত blob shape গুলো এখন থেকে নিজের ইচ্ছামত কালার এবং শেপ দিয়ে বানিয়ে নিতে পারবেন। ডাউনলোড ও করতে পারবেন এবং svg কোড টাও পেয়ে যাবেন। ট্রাই করে দেখতে পারেন।
লিংক: https://www.blobmaker.app/

✅ Code to Go:
========
ওয়েবসাইট ডেভেলপমেন্টের সাধারণ সমস্যা সমাধানে সাহায্য করার জন্য snippet গুলো সমন্বয় করে। JavaScript ও react এর ব্যবহৃত সবচাইতে আপডেটেট snipppet গুলো এখানে পেয়ে যাবেন। বেশ ভালো রিসোর্স আছে একবার দেখলেই বুঝবেন।
লিংক: https://codetogo.io/

✅ UX Project checklist:
=============
এটি UX ডিজাইনের ফিচার গুলো মানসম্মত কিনা তা পরীক্ষা করতে আপনাকে সাহায্য করবে।
লিংক: https://uxchecklist.github.io/

✅ UX Flow:
======
এর মাধ্যমে sketch, Adobe ও figma তে খুব সহজে সুন্দর ওয়েবসাইট লে-আউট তৈরি করা যায়। অনেকগুলো টুলস আছে। ওয়েবসাইট ভিজিট করে দেখতে পারেন।
লিংক: https://products.ls.graphics/uxflow/

✅ Drawkit:
======
ওয়েবসাইটের বিভিন্ন হাতে আঁকা ভেক্টর ইলাস্ট্রেশন ভালো একটি রিসোর্স।
লিংক: https://drawkit.com/

✅ 3Dicons:
======
ওয়েবসাইট ডিজাইন ও ডেভেলমেন্ট এর ক্ষেত্রে ব্যবহৃত বিভিন্ন 3D আইকন গুলোর ভালো একটি ওপেন সোর্স রিসোর্স। উপকৃত হবেন।
লিংক: https://3dicons.co/

✅ Web Gradients:
==========
ওয়েবসাইটের জন্য বিভিন্ন গ্র্যাডিয়েন্ট ব্যাকগ্রাউন্ড কালার এর ভালো একটা রিসোর্স। অনেকগুলো ডিজাইন দেওয়া আছে ।
লিংক: https://webgradients.com/

✅ Google Fonts:
=========
আমাদের সবারই অতি পরিচিত একটি ওয়েবসাইট। বিভিন্ন ফ্রি ফন্টস গুলো এখানে পাওয়া যায়।
লিংকঃ https://fonts.google.com/

✅ Lorem Ipsum:
=========
আমাদের প্রায় সবারই একটি পরিচিত মুখ এটি। ওয়েবসাইটে ডামি টেক্সট জেনারেট করার জন্য সবার ফার্স্ট চয়েজ।
লিংক: https://loremipsum.io/

✅ Responsively:
=========
বিভিন্ন ডিভাইসের জন্য ওয়েবসাইট চেক করার খুবই ইউজফুল একটা এপ্লিকেশন। আমার কাছে পার্সোনালি খুব ভালো লাগে। একটু বিভিন্ন ধরনের ফাংশনালিটি আছে একটু এক্সপ্লোর করে দেখতে পারেন।
লিংক: https://responsively.app/

✅ UnusedCSS:
========
অব্যবহৃত CSS প্রপার্টি গুলো রিমুভ করে একটি ক্লিন CSS ফাইল প্রোভাইড করে।
লিংক: https://unused-css.com/

✅ Spline:
=====
খুবই ইউজফুল একটা এপ্লিকেশন। এর মাধ্যমে ওয়েবসাইটের জন্য 3D ইফেক্ট তৈরী করা সম্ভব। বিভিন্ন 3D সিন বানানো, বিভিন্ন ম্যাটেরিয়ালস এডিট করা থেকে শুরু করে অনেক কাজ করা যায় এটা দিয়ে। খুবই ভালো অবশ্যই ভিজিট করে দেখতে পারেন।
লিংক: https://spline.design/

✅ Sketch2Code:
=========
আর্টিফিসয়াল ইন্টেলিজেন্স ব্যাবহার করে হাতে আঁকা ডিজাইনকে সহজেই html এ রূপান্তরিত করা যায়।
লিংক: https://sketch2code.azurewebsites.net/

✅ Custom Shape Devider:
==============
ওয়েবসাইটের বিভিন্ন জায়গায়, সেকশনের শুরু কিংবা শেষে একটা শেপ ডিভাইডার ডিজাইনের সৌন্দর্য বহুগুন বৃদ্ধি করে।
লিংক: https://www.shapedivider.app