DEV Community: Chayti

MERN Stack vs. Other Stacks: A Comparative Analysis

Chayti — Mon, 25 Dec 2023 07:33:55 +0000

Imagine you're a fearless warrior in the digital realm. Your weapon? Code, your armour? A robust tech stack. But with so many stacks out there, which one do you choose?

Today, we'll dive into the epic clash of MERN vs. other popular stacks. This adventure is a quest through the digital realms, where each stack represents a different kingdom with its unique strengths and weaknesses. In this realm, MERN, MEAN, MEVN, LAMP, Django, Ruby on Rails, Python Flask, Spring Boot are some of the mighty rulers. Our protagonist, a budding developer, must choose the right kingdom to embark on a successful quest. MERN, MEAN, LAMP, Django kingdoms will be the prime focus today which will be explored with our hero, our Hablu.

The MERN Kingdom:
Hablu, equipped with a map, starts the journey in the MERN Kingdom. MERN stands for MongoDB, Express.js, React, and Node.js. Picture MongoDB as a castle to store data, Express.js as the gatekeeper controlling access, React as the architect crafting the user interface, and Node.js as the messenger managing communication.

The MERN Kingdom is known for its flexibility and efficiency. Developers can use JavaScript throughout, making it a seamless experience. Hablu marvels at the quick development cycles and the ability to share code between the server and client.

The MEAN Kingdom:
In a neighbouring kingdom, MEAN reigns supreme. Comprising MongoDB, Express.js, Angular, and Node.js, MEAN offers an alternative adventure. Hablu discovers Angular, a powerful front-end framework, leading the charge alongside the other MEAN components.

While MEAN has a strong following, Hablu notices a steeper learning curve with Angular compared to React. The MEAN Kingdom is robust and powerful, but it may not be the best starting point for a novice.

The LAMP Empire:
Venturing further, Hablu arrives at the LAMP Empire, ruled by Linux, Apache, MySQL, and PHP/Python/Perl. In this kingdom, Linux is the foundation, Apache is the gatekeeper, MySQL is the data architect, and PHP/Python/Perl is the scribe crafting dynamic content.

The LAMP Empire has a rich history, but Hablu senses a bit of rigidity. Upgrading components may be challenging, and the separation of concerns isn't as clear as in the MERN Kingdom. However, the LAMP Empire remains a stalwart choice for certain quests.

The Django Dominion:
Our journey takes a turn towards the Django Dominion, a kingdom governed by Python, Django, and its loyal subjects. Python, the language of wizards, works seamlessly with Django, the framework orchestrating the realm.

Django offers a high level of abstraction, making it beginner-friendly. However, Hablu notes that the learning curve might be steeper for those new to Python. The Django Dominion shines in the land of content-centric applications, providing a solid foundation for our hero's exploration.

The Decision-Making Dilemma - Who Wins?
Each stack has its own strengths and weaknesses, the perfect fit depends on your project and your coding prowess.

As Hablu reflects on the adventures in each kingdom, a pivotal decision looms. The MERN Kingdom offers a JavaScript-centric experience, MEAN provides a powerful combination with Angular, LAMP stands as a stalwart in web development history, and Django boasts simplicity with Python.

In the end, Hablu chooses the MERN Kingdom for its beginner-friendly nature, rapid development cycles, and the ubiquity of JavaScript. The quest for knowledge and mastery begins as Hablu dives into the MERN stack, ready to conquer the challenges that lie ahead.

Ultimately, the best stack is the one that empowers you to build amazing things. Remember, it's not about the tools, it's about the craftsman. So, pick your weapon, hone your skills, and conquer the digital realm! This is just the beginning of your coding adventure! Keep exploring, keep learning, and keep building. The exciting world of tech awaits!

Bonus - The Ultimate Analogy:
Imagine you're building a house.

MERN is like a prefabricated kit, fast and efficient, but with less customization.
LAMP is like traditional brick-and-mortar, sturdy and reliable, but slower to build.
MEAN is like a modular design system, offering flexibility but requiring more planning.

Choose the tools that best suit your architectural vision!

How to Choose the Right Stack?
Before choosing your stack, consider these questions:

What are your project requirements?
Do you want agility?
Do you want to exceed project requirements to get a better audience?
Is your team/company knowledgeable and expert in this field?
Is your development team scalable and flexible?
What is the final cost of development?

In 2024 based on the answers to the above questions, the most probable options are Full-Stack vs MEAN Stack vs MERN Stack.

FAQs

Q-1: Are MERN stacks enough for a full-stack developer?
The MERN stack allows developers to put their skills in a full-stack web development setting. In a nutshell, users receive all they require to build fully scalable apps directly in the stack, which includes the most recent front-end web development technologies and tools.

Q-2: Is the MEAN stack better than MERN stack?
The ideal stack to use depends entirely on your project needs. MERN is more suited for single-page applications and CRUD operations. MEAN, on the other hand, works best for large applications.

Q-3: Which stack is in demand, MEAN or MERN?
Both stacks are in demand, but the MERN stack boasts more popularity than its counterpart since it’s easier to learn.

Q-4: What is the basic salary of a MERN/ MEAN/ others Stack developer?
Look, it varies upon country and company structure, culture. But the most important thing is also about your comfort. At first choose your preferred stack, Then when you are skilled in that stack, a handsome salary will choose you, not you have to run away after a handsome salary!

Resources to follow for getting detailed ideas:

Js array-introduction part-1

Chayti — Tue, 01 Aug 2023 10:35:44 +0000

আমরা প্রায়ই দেখতে পাই যে আমাদের একটি ordered collection এর প্রয়োজন, যেখানে আমাদের একটি ১ম, একটি 2য়, একটি 3য় উপাদান রয়েছে এবং আরও অনেক কিছু রয়েছে।

উদাহরণস্বরূপ, কোনো কিছুর একটি list তৈরি করার জন্য আমাদের এইধরণের ordered collection প্রয়োজন। যেমন: একটি সাইটের ইউজার কালেকশন, প্রোডাক্ট কালেকশন, এইচটিএমএল এলিমেন্টস ইত্যাদি।

এখানে কোনো অবজেক্ট (Anothother data structure in js are containers for named values called properties) ব্যবহার করা সুবিধাজনক নয়, কারণ এটি উপাদানের order মেইন্টেইন করার জন্য কোনো মেথড প্রদান করে না। আবার আমরা existing মানগুলোর “মাঝে” কোনো একটি পজিশনে একটি নতুন মান insert করতে পারি না। অবজেক্ট এই ধরনের পরিস্তিতিতে ব্যবহারের জন্য উপযোগী না।

তাই, যেকোনো ordered collection স্টোর করার জন্য Array নামে একটি নির্দিষ্ট ডেটা স্ট্র্যাকচার ব্যাবহার করা হয়।

সংজ্ঞাঃ

MDN এর সংজ্ঞা অনুযায়ী,
The Array object enables storing a collection of multiple items under a single variable name and has members for performing common array operations.

কেনো অ্যারে ব্যাবহার করবো?

আপনার যদি কিছু আইটেমের একটি তালিকা থাকে (উদাহরণস্বরূপ, গাড়ির নামের একটি তালিকা), এবং গাড়িগুলিকে ভেরিয়েবলে সংরক্ষণ করা হলে এইরকম দেখাতে পারে:

let car1 = “Toyota”;

let car2 = “Volvo”;

let car3 = “BMW”;

যাইহোক, যদি আপনি এখন এই গাড়ির নামগুলোর উপর একটি লুপ চালাতে চান এবং একটি নির্দিষ্ট গাড়ি খুঁজে পেতে চান? এবং যদি আপনার 3টি গাড়ির পরিবর্তে 300টি গাড়ি থাকে?

তাহলে কি আপনি ৩০০টি ভেরিয়েবল ডিক্লেয়ার করবেন?

অবশ্যই আপনার উত্তর হবে “না!!!!! মাথা খারাপ?😑😵‍💫”

তাহলে এর সমাধান কি🤔?

সমাধান হচ্ছে একটি অ্যারে!🥳

একটি অ্যারে শুধুমাত্র একটি ভেরিয়েবলের মধ্যেই অনেকগুলি মান স্টোর করে রাখতে পারে এবং আপনি একটি নির্দিষ্ট ইনডেক্স নম্বর দিয়ে একটি নির্দিষ্ট মান অ্যাক্সেস করতে পারেন।

অ্যারে ডিক্লারেশনঃ

অ্যারে লিটেরাল ব্যাবহার করে অ্যারে তৈরি করাটা খুবই সহজ একটা পদ্দতি। এবং এটিই সবচেয়ে বেশি ব্যাবহার করা হয়। এটির সিন্ট্যাক্সঃ-

const array_name = [item1, item2, …];

যেমনঃ

const cars = [“Saab”, “Volvo”, “BMW”];

এইখানে, স্পেইস এবং লাইন ব্রেক মেজর কোনো ইস্যু না। একটি অ্যারে ডিক্লারেশন একাধিক লাইন বিস্তৃত করতে পারে:

const cars = [
"Saab",
"Volvo",
"BMW"
];

জাভাস্ক্রিপ্টের new keyword ব্যাবহার করেও অ্যারে তৈরি করা যেতে পারে। এটির সিন্ট্যাক্সঃ-

const cars = new Array("Saab", "Volvo", "BMW");

এইদুইটি পদ্ধতি একদমই একই কাজ করে।

Simplicity, readability এবং execution speed এর জন্য, “অ্যারে লিটারেল” পদ্ধতি ব্যবহার করতে পারেন।😎

এছাড়া আরও একটি উপায়ে অ্যারে তৈরি করা যায়। সেটিকে বলে, “Empty array initialization” পদ্ধতি। যেমনঃ

const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";

এই পদ্ধতিতে প্রথমে একটি empty অ্যারে ইনিশিয়ালাইজ করা হয়। অর্থাৎ, এই অ্যারেতে প্রথমে কোনো উপাদান রাখা হয় না। পরে, প্রয়োজন অনুযায়ী insert করা হয়ে থাকে। এইটা একদমই উপরে দেখানো প্রথম পদ্ধতির মতোই।

cars[0]= “Saab”;

cars[1]= “Volvo”;

cars[2]= “BMW”;

এই বিষয়গুলো বুঝতে পারছেন না? টেনশনের কিছু নেই। নিচে অ্যারে ইনডেক্স সেকশনে বিস্তারিত দেওয়া হয়েছে।

অ্যারের উপাদান অ্যাকসেস করার উপায়ঃ

অ্যারের উপাদানগুলো index number এর মাধ্যমে access করতে হয়। এই ইনডেক্স নম্বরটি হচ্ছে কোনো একটি উপদান একটি অ্যারেতে কতো নম্বর পজিশনে আছে সেটি নির্দেশ করে। এবং এটির কাউন্ট শূন্য থেকে শুরু হয়। তাহলে অ্যারের প্রথম উপাদানের ইনডেক্স হচ্ছে ০ (শূন্য)। আর দ্বিতীয় উপাদানের ইনডেক্স হচ্ছে ১। এখন দেখেনি কিভাবে এই ইন্ডেক্স নম্বর ব্যাবহার করে কোনো উপাদান access করা হয়।

let fruits = ["Apple", "Orange", "Plum"];
alert( fruits[0] ); // Apple
alert( fruits[1] ); // Orange
alert( fruits[2] ); // Plum

প্রথমে অ্যারে ভেরিয়েবলটির নাম লিখতে হয়। তারপর কোনো স্পেইস না দিয়ে লিখতে হবে। এরপর এই ব্র্যাকেটের মধ্যে ইন্ডেক্স নম্বর লিখতে হয়। তাহলে সিনট্যাক্সটা হলোঃ-

arrayName[indexNumber]

তাহলে এখন দেখি বলেনতো, এই অ্যারে থেকে প্রথম উপাদান পেতে চাইলে কিভাবে পাওয়া যাবে ❓

const player = [“Artemis”, 35, “5’11”, “06:23:00”];

অ্যারের উপাদান পরিবর্তন করার উপায়ঃ

অ্যারের যেকোনো একটি উপদান আমরা চাইলে পরিবর্তন মানে রিপ্লেইস করতে পারি। উপররের উদাহরণ অনুযায়ী fruits অ্যারের দ্বিতীয় উপাদান হচ্ছে “Plum”. আর যদি আমরা এটি পরিবর্তন করে ফেলতে চাই সেক্ষেত্রে নিচের কোডটুকু লিখলেই হবেঃ

fruits[2] = ‘Pear’; // now [“Apple”, “Orange”, “Pear”]

আবার, আমরা চাইলে কোনো একটিতে যেকোনো একটি পজিশনে নতুন উপাদান insert করে ফেলতে পারি।

fruits[3] = ‘Lemon’; // [“Apple”, “Orange”, “Pear”, “Lemon”]

আচ্ছা, এখন যদি আপনি এই অ্যারের 6 নম্বর পজিশনে একটি নতুন উপাদান অ্যাড করেন তাহলে কি হবে ❓🤔

fruits[6] = “Mango”;

এক্ষেত্রে অ্যারেটির আউটপুট হবে,

[“Apple”, “Orange”, “Pear”, “Lemon”, undefined, undefined, “Mango”]

⚠️যেহেতু ৪ এবং ৫ নম্বর ইন্ডেক্সে আপনি কোনো মান assign করেননি সেহেতু এইগুলো undefined থেকে যাচ্ছে।

সম্পূর্ণ একটি অ্যারে access করতে হলে এইভাবে করতে পারি আমরাঃ

let fruits = ["Apple", "Orange", "Plum"];
console.log( fruits ); // Apple,Orange,Plum

অ্যারে হল একধরণের অবজেক্ট

জাভাস্ক্রিপ্টে অ্যারে হচ্ছে একটি বিশেষ ধরণের অবজেক্ট। জাভাস্ক্রিপ্টের “typeof” অপারেটর অ্যারের জন্য “object” রিটার্ন করে।

console.log(typeof [1,2,3]) // object

কিন্তু, অ্যারে এর “উপাদান” অ্যাক্সেস করতে “ইনডেক্স সংখ্যা” ব্যবহার করা হয়। অন্যদিকে অবজেক্ট তার কোনো একটি মেম্বার বা প্রোপার্টি অ্যাকসেস করার ক্ষেত্রে ঐ প্রোপার্টির নাম ব্যাবহার করে থাকে।

const person = ["John", "Doe", 46];
console.log(person[0]) // "John"
const person = {firstName:"John", lastName:"Doe", age:46};
console.log(person.firstName) // "John"

যেহেতু, অ্যারে একধরণের অবজেক্ট সেহেতু অ্যারেতে আমরা চাইলে বিভিন্ন ধরণের ডাটা রাখতে পারি। যেমনঃ string, boolean, number, object, array, এমনকি function ও রাখতে পারি। 😎

// mix of values
let arr = [ 'Apple', { name: 'John' }, true, function() { alert('hello'); } ];
// get the object at index 1 and then show its name
alert( arr[1].name ); // John

দ্য length প্রোপার্টিঃ

অ্যারের উপাদানগুলির total count(মোট গণনা) হল এর length।বা, একটি অ্যারেতে মোট যতগুলি উপাদান আছে সেটিই হলো ঐ অ্যারের length। একটা অ্যারেতে কয়টি উপাদান আছে সেটি আমরা length প্রোপার্টি ব্যাবহার করে জানতে পারি। সিন্টাক্সঃ

arrayName.length;

let fruits = ["Apple", "Orange", "Plum"];
let length = fruits.length;
console.log(length) // 3

💡 Tips: length এর মান সর্বদা অ্যারের শেষ ইনডেক্স এর চেয়ে এক বেশি।

যদি arrayName[0] আমাদেরকে একটি অ্যারের প্রথম উপাদান দেয়। তাহলে ঐ অ্যারেটির শেষ উপাদান আমরা কিভাবে অ্যাকসেস করতে পারবো? যদি শেষ ইন্ডেক্স জানা না থাকে বা অনেক উপাদানের অ্যারে হয়?😕 😰

সমাধানের উপায় হচ্ছেঃ আমরা প্রথমে অ্যারেটির length বের করে নিবো। যেহেতু, length এর মান সর্বদা অ্যারের শেষ ইনডেক্স এর চেয়ে এক বেশি। সেহেতু, আমরা এই length থেকে এক বিয়োগ করেই সবশেষ ইন্ডেক্স নম্বরটি পাবো। এরপর এই নম্বরটি array literal এ ব্যাবহার করেই আমরা শেষ উপাদানটি পেয়ে যাবো। একটি উদাহরণ দেখে নিনঃ-

let fruits = ["Apple", "Orange", "Plum"];
console.log( fruits[fruits.length-1] ); // Plum

কিভাবে একটি অ্যারে চিনতে হয়

একটি সাধারণ প্রশ্ন হল: জাভাস্ক্রিপ্টের “typeof” অপারেটর অ্যারের জন্য “object” রিটার্ন করে। তাহলে কোনো একটি ভেরিয়েবল একটি অ্যারে হলে আমি কিভাবে সেটি identify করবো?

সমাধানঃ এই সমস্যা সমাধানের জন্য ECMAScript 5 (JavaScript 2009) একটি নতুন পদ্ধতি সংজ্ঞায়িত করেছেঃ Array.isArray()

যদি কোনো একটি ভেরিয়েবল অ্যারে হয়ে থাকে সেক্ষেত্রে Array.isArray(variableName); রিটার্ন করবে true. অন্যথায়, false রিটার্ন করবে।

let fruits = ["Apple", "Orange", "Plum"];
console.log(Array.isArray(fruits)); // true
let fruits = {name:"Apple", type:"fruit"};
console.log(Array.isArray(fruits)); // false

পরবর্তী কোনো একটি ব্লগে অ্যারে মেথড গুলো সম্পর্কে শিখবো আমরা।

এই ব্লগটিতে বেশকিছু উদাহরণ সংগ্রহ করা হয়েছেঃ w3schools.com থেকে।

Increasing Firebase Project Limit

Chayti — Tue, 16 May 2023 10:42:21 +0000

Firebase এ নির্দিষ্ট সংখ্যক কিছু প্রোজেক্ট একটা gmail account থেকে create করার পর হয়ত firebase আপনাকে নতুন project create করার permission দিচ্ছে না। সেক্ষেত্রে আপনার কি কি করনীয় হতে পারে?

আগের create করা কোনও একটা প্রোজেক্ট এর configuration গুলো অন্য প্রোজেক্ট এ ব্যবহার করে আপনার practise এর কাজ চালাতে থাকুন।
চাইলে অন্য একটা gmail দিয়ে আবার নতুন firebase account করুন। তবে তখন ও কিন্তু ৯+- টা প্রোজেক্ট ই তৈরি করতে পারবেন। তারপর একই সমস্যা আবার হবে।

তাই আপনি তাদের কাছ থেকে চাইলে ৫০ তার মত প্রোজেক্ট তৈরি করার permission আপনি নিয়ে নিতে পারেন। [ নিচের ৪ টা ছবিতে step by step details দেখান হল। ]

তবে তাদের কাছে এই request করার পর আপনার ধৈর্য নিয়ে minimum 10 min থেকে maximum 2/3 days অপেক্ষা করতে হবে permission পাবার জন্য। এই সময়ের মধ্যে google cloud platform আপনাকে একটা email করে আপনি নতুন প্রোজেক্ট তৈরি করার permission পেয়েছেন কিনা সেটা confirm করে দিবে।

~ Happy Coding!

MERN stack project deployment steps to Netlify

Chayti — Fri, 05 May 2023 05:45:50 +0000

If you are still having a lot of issues to deploy in firebase you can also deploy to netlify. Netlify deploy for a react project is far easy for you. Right? Follow this link: Just 3 steps:

Step-1: Go the public folder in your project. create a file called _redirects . Copy & paste the following the code inside the _redirects file, then save.

/* /index.html 200

Step-2: Create dist folder in the root directory for your project. [Root directory is the path where your package.json locates] giving the following command.

npm run build

Step-3: Sign in to netlify. Go to sites. Scroll down, drag & drop your dist folder.

Step-4: The last but most important part for working firebase authentication system properly : (if you don't have any authentication system in your project, then you can skip it.)

Go to Firebase Console
Click Authentication Menu > Settings tab
Scroll Down to Authorized domains
Click "Add domain" button, add your netlify deployed url and click "Add"

Bingo!! That's all!!!

Deploy, re-deploy to surge and common errors

Chayti — Tue, 31 Jan 2023 07:39:43 +0000

Github pages এ ডেপলয় করা easier. কিন্তু একটা বড় limitation হলঃ private repository ডেপলয় করা অত ইজি না। কি easy? তাহলে private repository ডেপলয় করে দেখান… It’s your task 😀 Netlify তে deploy করাও খুব easy. কিন্তু মাঝেমধ্যেই কোনও reason ছাড়াই দেখা যায় netlify তে ডেপলয় হয় না। চলুন এদের একটা alternative খুঁজে বের করি।

You can try Surge

Let’s have a look it’s features of the free plan:

Provides 404.html page functionality
Unlimited websites and APIs
Custom domain feature
Easy to deploy via CLI
Unlimited websites
Time saving deployment

Let’s get started with Surge

Deploy to Surge:

আপনাকে just কয়েকটা easier steps follow করতে হবে। Then done.

Step - 1: সবার প্রথমে আপনার পিসি/ ল্যাপটপ / ডেক্সটপ এ Node.js এর recent version install করা থাকতে হবে।

Step - 2: এরপর আপনার command prompt নিচের command টি দিন

npm install --global surge

Step - 3: এখন just একটা command.

Surge

Points to be noted for this command:

এই command টি দেওয়ার পর শুধু প্রথম বার যখন আপনি ডেপলয় করছেন আপনার email and password সেট করতে হবে, যেন আপনার PC তে Surge signed in/ logged in হয়। নিচের মত করে email দিয়ে তারপর enter press করবেন ( যেই ইমেইল দিয়ে সাইন ইন করতে চাচ্ছেন )।
তারপর password দিবেন ( Password দেওয়ার পর আপনার মনে হতে পারে password লিখলাম কিন্তু স্ক্রীন এ কিছুই দেখাচ্ছেনা, black হয়ে আছে। তাহলে কি password ঠিকমত লিখা হয়নি? না, এরকম কিছুই না। একটু protected রাখার জন্য ওদের password enter এর সিস্টেম টা এরকম। ) আপনি just ঠিকঠাক একটা password লিখে enter press করুন।
এখন আপনার project path specify করে দিতে হবে। মানে আপনি কোন project টা ডেপলয় করছেন আপনার pc তে সেটার located path টা ঠিকমত enter করতে হবে।
তারপর একটা random ডোমেইন আপনাকে suggest করা হবে। কিছুটা এরকমঃ

something.surge.sh -> এই something লিখা part টুকু আপনার ইচ্ছেমত আপনি যেকোনো নামে customize করতে পারবেন। For example: phero.surge.sh আর যদি কোনও customization না চান তাহলে যেভাবে আছে, সেভাবেই রেখে দিন। *It will be your final website link. *

তারপর enter press করুন।

Bingo! That’s all!!. It will take a while if you have a stable net connection. 👍

Update your deployed site to Surge:

Enter just one command

Surge

Here follow points 3 & 4 of deploy to surge section above. ☝️ এখানে আপনি প্রথম বার সাইট এর জন্য যেই url তৈরি করেছিলেন, সেটাই লিখে দিতে পারেন। [ নোটঃ চাইলে অন্য কোনও নতুন url ও সেট করতে পারেন। তখন নতুন url এ থাকবে updated site টা। আগের url এ থাকবে আগের ste টা। বেশি উল্টাপাল্টা মনে হলে ignore this note part 😁 ]

*আপনি যদি এই বার বার project update করার সময় নতুন করে url সেট করার ঝামেলা থেকে মুক্তি পেতে চান, তাহলে just একটা লাইন লিখতে হবে আপনাকে এবং এটা একবার লিখলেই হবে। *

echo your_URL > CNAME

For my case:

echo mealdb.surge.sh > CNAME

এই লাইন টা লিখলে আপনার প্রোজেক্ট ফোল্ডার এ একটা ফাইল তৈরি হবে CNAME হিসেবে। যেটার মধ্যে শুধু URL name টা saved হয়ে থাকবে।

তারপর আপনি যতবার ডেপলয় করতে যাবেন URL আর আপনাকে টাইপ করতে হবেনা। Auto filled হয়ে যাবে।

Some common errors with Surge deployment:

Error - 1: আপনার unstable net connection এর জন্য ডেপলয় হতে অনেকটা টাইম নিতে পারে, আবার অনেকসময় কিছুটা টাইম নেওয়ার পর নিচের error গুলো throw করতে পারেঃ

Error - 2: আপনার html file এর নাম যদি index.html এর পরিবর্তে অন্য কিছু হয়, তাহলে নিচের মত একটা 404 খেয়ে যাবেন। 😛

তাই 404 থেকে বাঁচতে হয় html file এর নাম index.html রাখুন। অথবা site url এর শেষে একটা slash দিয়ে html file এর নাম টা বসিয়ে দিন।
For example:
My main url : chayti.surge.sh
My html file name : home.html
So, my actual site url will be : chayti.surge.sh/home.html

Error - 3: এখন আপনি ভাবতেই পারেন, এতক্ষন random site url , custom site url অনেক কিছু শুনলাম, তাহলে random হোক / custom হোক, সেই url টা already কারো না কারো published হতেই পারে। তাহলে আমি যখন url link ডেপলয় করব সেটা অন্য কারো সাথে cross connected/ error ঘটাতে পারে।
😃 .
এখানেই ত মজা। Surge জিনিসটা অনেক technically handle করেছে। এরকম যদি হয় already অন্য কারো published url এ আপনি আপনার site deploy করতে চাচ্ছেন, তখন সুন্দরমত এই error টা খেয়ে বসে থাকবেন 😅. So, the url name must be unique. Otherwise আপনি ডেপলয়ই করতে পারবেন না।

How to deploy your react project to surge:

এখানেও সব কিছু আগের মতই, হাল্কা একটু difference আছে, সেটা হলঃ আপনাকে একটা build folder তৈরি করতে হবে, তারপর, cd build করে সেই build directory তে যেতে হবে, তারপর শুধু সেই build folder ডেপলয় করলেই হবে surge এ।

npm run build
cd dist
surge

~Let’s_code_your_career!
~Happy_deployment!! 😀
~Happy_coding!!!

বুটস্ট্রাপ Accordion কম্পোনেন্ট এর ক্লাসগুলোর সহজ, সিম্পল বিশ্লেষণ

Chayti — Mon, 09 Jan 2023 15:41:19 +0000

Bootstrap তাদের accordion component এর code এ কোন কোন class কেন ব্যবহার করেছে সেটা আমরা আজকে এখানে কিছুটা আলোচনা করার চেষ্টা করব।

<div class="accordion" id="accordionExample">
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingOne">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
                    aria-expanded="true" aria-controls="collapseOne">
                    Accordion Item #1
                </button>
            </h2>
            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
                data-bs-parent="#accordionExample">
                <div class="accordion-body">
                    <strong>This is the first item's accordion body.</strong> It is shown.
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingTwo">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                    Accordion Item #2
                </button>
            </h2>
            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
                data-bs-parent="#accordionExample">
                <div class="accordion-body">
                    <strong>This is the second item's accordion body.</strong> It is hidden.
                </div>
            </div>
        </div>
    </div>

.accordion -> Accordion এর যেই style, এটা দেখতে সাধারণত যেরকম হয়, bootstrap এর এই class সেই styling করার একটা starting point. Accordion এর সব component এই class এর under এ রাখতে হয়।

.accordion-item -> accordion এর মধ্যে যত ধরনের item থাকবে সে সব কিছু এই class এর মধ্যে রাখা হয়। এই class ব্যবহার না করলে একটা item যে আরেকটা থেকে আলাদা সেটা identify করা যায়না দেখে। কারণ এই class আইটেম গুলোর মধ্যে horizontal line তৈরি করে করে partitioning করে।

.accordion-header -> accordion এর মধ্যে কোন item এর জন্য explaination দেওয়া আসে টা এই class এর under এ header হিসেবে লিখা হয়। এটা না লিখলেও styling এ তেমন কোনও পার্থক্য আসবে না। Just কিছুটা spacing এর পার্থক্য লক্ষ্য করতে পারেন।

.accordion-button -> accordion এর heading টা একটা বাটন এর মত কাজ করে বলা যায়, কারণ এটাতে click করলে expand হয়, আবার expanded থাকলে সেটা off হয়ে যায়। এই বাটন এর styling টা পুরো করা হয়েছে এই class এর আন্ডার এ।

data-bs-toggle="collapse" -> এটা ছাড়া accordion এর বাটন গুলো ঠিকঠাক মত expand on / off হবে না।

aria-expanded="true" -> এই property এর তেমন কোনও ব্যবহার চোখে পরবে না। এই property টা ব্যবহার না করলেও তেমন কোনও সমস্যা নেই।

data-bs-target="#collapseOne" id="collapseOne" -> data-bs-target="#collapseOne" এটা indicate করবে আপনি বাটন এ click করে কোন অংশটুকু expanded area হিসেবে দেখাতে চাচ্ছেন। যেই অংশটুকু দেখাতে চাচ্ছেন সেখানে id="collapseOne" ব্যবহার করা হয়।

.accordion-collapse .collapse -> expandable area র styling এর জন্য এই class গুলো use করা হয়েছে।

.show -> এটা ব্যাবহার করে আপনি default ভাবে কোনও একটা area expand করে রাখতে পারেন। এটা উঠিয়ে দিলে button click করার আগ পর্যন্ত কোনও area expandable দেখাবেনা।

id="accordionExample" data-bs-parent="#accordionExample" -> data-bs-parent="#accordionExample" এটা দ্বারা নির্দেশ করছে এই accordion item এর parent কোনটা। যেই accordion টা parent হিসেবে আছে সেখানে id="accordionExample" এভাবে id দেওয়া হয়েছে।

.accordion-body -> expandable area র styling specially spacing (margin, padding) দেওয়ার জন্য এই class use করা হয়েছে।

~let's_code_your_career
~happy_coding!!!

Hack the ways to center align any text / image / element in CSS

Chayti — Sun, 08 Jan 2023 20:16:31 +0000

CSS এ alignment set করাটা একটু tricky মনে হতে পারে। 🥲 🥲 For example: কোনও block level element কে (suppose, h1) center এ আনার জন্য text-align : center ব্যবহার করতে পারবেন, কিন্তু যদি সেই block element এর সাথে একটা fixed width add করে দেন তখন কি কাজ করবে এই text-align: center? না। ❌ ❌ Block level element কে width সহ center করতে ব্যবহার করতে হবে margin : 0 auto । আর যখন vertically and horizontally একসাথে center করতে যাবেন, তখন মনে হতে পারে সব যেন জগাখিচুড়ী লেগে গেল। 🤧😵😵‍

Am I telling the truth? Oh!
So, this blog is for you …

এখানে আজকে জানব ৩ টা জিনিসঃ [ এগুলো ছাড়াও আরো অনেক ভাবে করা যায় centering ]

Part -1: কোনও standalone text / image / element কে horizontally centering করা ( Horizontally centering a text / image / element )

Part -2: কোনও div / element এর ভেতরে কোনও text / image থাকলে সেটাকে vertically / horizontally & vertically + horizontally centering করা ( Centering text & image vertically / horizontally & vertically + horizontally inside a div )

Part -3: কোনও standalone text / image / element কে horizontally + vertically centering করা view height & view width এর সাপেক্ষে ( Centering any standalone text / image / element in horizontally + vertically centering relative to view height & view width )

=====================================

Part -1 : Horizontally centering a text / image / element:

======================================

1. Center align text:

    <div class="center">
        <p>This is Chayti</p>
    </div>

<style>
.center {
  text-align: center;
  border: 4px solid purple;
}
</style>

2. Center align element:

.center {
    margin: auto;
    width: 50%;
    border: 4px solid purple;
    padding: 10px;
  }

3. Center an image:

<img src="./images/Logo-PH.png" alt="PHero" style="width:40%">

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

======================================

Part -2: Centering text & image vertically / horizontally & vertically + horizontally inside a div:

======================================

CSS এ কোনও element কে কয়েকভাবে center align করতে পারেনঃ

Using CSS position property
Using Flexbox
Using Grid

1. Using CSS position property:

Css position properties are: relative, absolute, fixed, and static (the default), sticky. আর এগুলো সেট করার জন্য element এর মধ্যে এই ৪ টা Property ( top, right, bottom, and left ) দেওয়া যায়। সেক্ষেত্রে relative & absolute এর combination করে আপনি অনেক কিছুই করতে পারেন।

Centering text using CSS positioningঃ

 <div class="container">
        <div class="centered-element">
            <p>Hello, This is Chayti</p>
        </div>
 </div>

.container {
    position: relative;
    height: 350px;
    border: 3px solid #006100;
  }

  .centered-element {
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

এখানে text এর centering টা box ( relative ) এর সাপেক্ষে হয়েছে এবং top : 50% ব্যবহার করায় vertically center হয়েছে।

For both horizontal & vertical center:

 .centered-element {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

Centering an image using CSS positioning:

 <div class="container">
        <div class="centered-element">
            <img src="./images/Logo-PH.png" alt="PHero" style="width:40%">
        </div>
    </div>

.container {
    position: relative;
    height: 350px;
    border: 4px solid purple;
  }

  .centered-element {
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

Now do the image horizontally centering by yourself !!!

2. Centering Element with Flexbox:

Centering vertically text & image:

.container {
    display: flex;
    align-items: center;
    height: 350px;
    border: 4px solid purple; 
}

Center text both vertically & horizontally:

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 350px;
    border: 4px solid purple; 
}

Center image both vertically & horizontally:

 <div class="container">
  <img src="images/Logo-PH1.png" alt="PHero" style="width:10%">
    </div>

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 350px;
    border: 4px solid purple; 
}

======================================

Part -3: Centering any standalone text / image / element in horizontally + vertically centering relative to view height & view width:

======================================

1. Centering a text:

    <h1 class="content" style="color:tomato">Hello!!! This is me !! Chayti !</h1>

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

2. Centering an image:

 <div class="content">
        <img src="images/Logo-PH1.png" alt="PHero" style="width: 20%;">
    </div>

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
}

3. Centering an element:

   <div class="content">
        <div style="background-color:tomato; width: 200px; height: 200px;">

        </div>
    </div>

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
}

*Bass !!! অনেকটুক হল… একবারে না বুঝলে কয়েকবার পড়ে তারপর বুঝার চেষ্টা করুন। নিজে নিজে blog পড়ার সাথে সাথে code গুলোও করুন। তারপর আস্তে আস্তে concept clear হবে। *

~Let’s_code_your_career
~Happy_Coding!!!

বুটস্ট্রাপ Modal কম্পোনেন্ট এর ক্লাসগুলোর সহজ, সিম্পল বিশ্লেষণ

Chayti — Sat, 07 Jan 2023 15:56:04 +0000

Bootstrap তাদের modal component এর code এ কোন কোন class কেন ব্যবহার করেছে সেটা আমরা আজকে এখানে কিছুটা আলোচনা করার চেষ্টা করব।

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

modal -> Normally কোনও website এ modal যেরকম হয় সেরকম type একটা styling দেওয়ার জন্য এই class দেওয়া হয়েছে। চাইলে এই ক্লাস টা রিমুভ করে দেখুন অউটপুট কিরকম আসে।

modal-dialog -> কোনও button এ click করার পর যেই pop-up box টা modal hisebe open হওয়ার কথা সেটাই আসবেনা, full screen টা just blur হয়ে থাকবে।

modal-content -> modal এর whole content এই class এর under এ রাখা হয়।

modal-header -> modal এর content কে styling সুবিধার জন্য ৩ ভাগে ভাগ করা হয়েছে। header, body, footer. Header এর content গুলো এই class এর under এ রাখা হয়েছে।

modal-title -> header এর মধ্যে title দিতে এটা ব্যাবহার করা হয়েছে।

modal-body -> body র content গুলো এর মধ্যে রাখা হয়েছে।

modal-footer -> footer এর content গুলো এর মধ্যে রাখা হয়েছে।

~let's_code_your_career
~happy_coding!

বুটস্ট্রাপ Carousel কম্পোনেন্ট এর ক্লাসগুলোর সহজ, সিম্পল বিশ্লেষণ

Chayti — Sat, 07 Jan 2023 13:23:22 +0000

Bootstrap তাদের carousel component এর code এ কোন কোন class কেন ব্যবহার করেছে সেটা আমরা আজকে এখানে কিছুটা আলোচনা করার চেষ্টা করব।

<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

.carousel .slide -> .carousel class এর সাহায্যে bootstrap নির্দেশ করছে যে আপনি একটি carousel / slider বানাচ্ছেন। .slide এইটা একটা optional class. Bootstrap carousel দুই ধরনের sliding animation support করে। ১) cross wide ২) slide । .slide class ব্যবহার করার মানে হল animation styling টা দুই নম্বর অপশন এর মত হবে। আর default ভাবে এক নম্বর অপশন এর মত দেখাবে।

data-bs-ride="carousel" -> এটা ব্যবহার করার মানে হল কোনও left / right control button না দিলেও automatic কিছুক্ষন পর পর slide গুলো change হতে থাকবে।

.carousel-inner -> আপনি carousel এর মধ্যে যতগুলো slide, text, image etc. ব্যবহার করবেন সব কিছু এই class এর under এ দিতে হবে। তাছাড়া, styling specially position এ বেশ কিছুটা difference দেখতে পাবেন which is not good at all.

.carousel-item -> প্রতিটা image কে এই class এর under এ styling দেওয়া হয়।

.active -> এর মানে হল webpage টা যতবার নতুনভাবে open করা হবে / refresh করা হবে, সবসময়ই এই image টা first time দেখাবে carousel এ। এটা জরুরি নয় যে প্রথম image এর মধ্যেই দিতে হবে। আপনার ১০ টা image থাকলে, আপনি চাইলে ১০ নম্বর image এর মদ্ধেও এটা ব্যবহার করতে পারেন ।

.carousel-control-prev .carousel-control-next -> যথাক্রমে previous & next image এ যাওয়ার জন্য দুইটা নির্দিষ্ট space কে ( left & right side of image ) define করা হয় ও style করা হয়।

.carousel-control-prev-icon .carousel-control-next-icon -> যথাক্রমে previous & next image এ যাওয়ার জন্য icon গুলোকে এর সাহায্যে style করা হয়।

~let's_code_your_career
~happy_coding!

বুটস্ট্রাপ কার্ড কম্পোনেন্ট এর ক্লাসগুলোর সহজ, সিম্পল বিশ্লেষণ

Chayti — Sat, 07 Jan 2023 13:18:33 +0000

Bootstrap তাদের card component এর code এ কোন কোন class কেন ব্যবহার করেছে সেটা আমরা আজকে এখানে কিছুটা আলোচনা করার চেষ্টা করব।

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

.card -> Bootstrap এ card তৈরি করার জন্য একটা in-built component. এই class এর under এ যা লিখা হবে bootstrap সেতাকে একটা card এর মত design করার চেষ্টা করবে।

.card-img-top -> এর মানে হল card এর মধ্যে image টা vertically (column wise) সবার উপরে থাকবে। যদি আপনি image টা সবার নিচে দেখাতে চান, সেক্ষেত্রে .card-img-bottom এই class টা ব্যবহার করতে হবে। .card-img-top এটা ব্যবহার করলে image এর top দুইটা corner rounded হবে, bottom corder দুইটা sharp হবে। উপরের image এর মত। আর .card-img-bottom এটা ব্যবহার করলে top corder দুইটা sharp হবে, নিচের corner দুইটা হবে rounded।

.card-body -> image ছাড়া আর বাকি যত content আপনি card এর মধ্যে দিতে চান সব গুলোকে bootstrap card এর body হিসেবে বিবেচনা করেছে এবং সেই হিসেবেই design করেছে। তাই এই class টি ব্যবহার করা হয়।

.card-title -> card body content এর title এর styling দেওয়ার জন্য এই class ব্যবহার করা হয়েছে।

.card-text -> card body content এর text এর styling দেওয়ার জন্য এই class ব্যবহার করা হয়েছে। Normally এটা দেখে আপনার কাছে মনে হতে পারে এটা p এর কাজই করছে। আসলেও করছে অনেকটা তাইই। তবে এই ক্লাস এর under এ bootstrap নিজের মত করে কিছু assignment, spacing সেট করে দিয়েছে।

~let's_code_your_career
~happy_coding

বুটস্ট্রাপ নেভবার কম্পোনেন্ট এর ক্লাসগুলোর সহজ, সিম্পল বিশ্লেষণ

Chayti — Wed, 04 Jan 2023 12:10:40 +0000

Bootstrap তাদের navbar component এর code এ কোন কোন class কেন ব্যবহার করেছে সেটা আমরা আজকে এখানে কিছুটা আলোচনা করার চেষ্টা করব।

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

nav -> bootstrap এ ন্যাভিগেশন বানানোর জন্য একটা in-build component. এর main basis তৈরি করা হয়েছে flexbox এর উপর ভিত্তি করে এবং এটা সব ধরনের ন্যাভিগেশন এর জন্য একটা strong foundation হিসেবে কাজ করে।

nav-item -> ন্যাভিগেশন এ যতগুলো li ( list item ) ব্যবহার করা হয় সবগুলোকে একটা fixed styling দেওয়ার জন্য এই class ব্যবহার করা হয়।

nav-link -> ন্যাভিগেশন এর মধ্যে যতগুলো nav item থাকে সেগুলো বিভিন্ন ধরনের হতে পারে ( ওয়েবসাইট লোগো, ওয়েবসাইট নাম, বাটন, লিঙ্ক )। যত ধরনের লিঙ্ক আছে সেগুলোকে একই ধরনের একটা styling এর মধ্যে রাখার জন্য এই class ব্যবহার করা হয়।

active -> যখন আপনি একটা nav item এ click করে কোন page এ active আছেন সেটা বুঝাতে চাচ্ছেন তখন এই class ব্যবহার করা হয়। এই class কিন্তু কোন আলাদা styling আপনাকে nav item এর মধ্যে provide করবে না যেটা দেখে আপনি বুঝতে পারবেন যে কোন nav item টা এই মুহূর্তে click করা হয়েছে/ active অবস্থায় আছে। সেরকম কিছু করতে হলে এই class এর সাথে আপনার আলাদা করে custom css ব্যবহার করতে কবে। Basically কোন custom css ছাড়া bootstrap এর এই class এর importance/ activity আসলেই চোখে পড়ার মত নয়।
নিচের মত করে কোন custom css লিখতে পারেনঃ

.nav-link .active{
    color: #fff;
    background: skyblue;
}

aria-current="page" -> এখানে aria-current হল bootstrap এর তৈরি করা একটা attribute যা active class এর active state টা কে কার্যকরী করার জন্য ব্যবহার করা হয়। এই attribute এর value হিসেবে ব্যবহার করা হয় page / true যেটা বর্তমান page কে indicate করে।

disabled -> যেই nav item এর উপর আপনি এই class ব্যবহার করবেন সেটা disabled হয়ে যাবে। মানে হল আপনি সেই nav item এ আর click করতে পারবেন না। এবং automatic nav item এর color gray হয়ে যাবে।

navbar -> navbar এর যেই basic styling সেটা bootstrap আমাদেরকে provide করে এই class এর মাধ্যমে। এই class টা code থেকে remove করে দেখুন, তাহলেই clearly বুঝতে পারবেন। কিছুটা নিচের মত দেখতে পাবেনঃ

navbar-expand-lg-> এই class use না করলে larger screen device এও মেনু আইটেম গুলো expandable ভাবে automatic show না করে hamburger menu তে show করবে।

bg-body-tertiary -> এর সাহায্যে navbar এর একটা default background colour দেওয়া হয়েছে। আপনি আপনার ইচ্ছেমত যেকোনো color এখানে set করতে পারেন।

container-fluid -> এই class আপনার screen এর horizontal width অনুযায়ী সবগুলো nav item কে একটা নির্দিষ্ট space maintain করে set করে দিবে। এটা ছাড়া navbar টা দেখতে কিছুটা এরকম হবেঃ

role="button" / role="search" -> এই role এখানে একটা attribute. button & search হল এর value। anchor tag এর মধ্যে role=”button” ব্যবহার করে anchor tag টা একটা button এর মত কাজ করছে সেটা বুঝানো হয়েছে।

navbar-brand-> ওয়েবসাইট নাম/ company নাম একটু different styling করে এই class এর under এ রাখা হয়।

data-bs-toggle="collapse" -> এটা ছাড়া hamburger menu তে click করলেও navigation item গুলো expand হবে না।

navbar-nav -> এটা ব্যবহার করা হয়েছে full-height and lightweight navigation এর জন্য।

collapse navbar-collapse -> একটা parent breakpoint ব্যবহার করে navbar contents কে grouping এবং hiding করার জন্য এই class গুলো use করা হয়।

dropdown-> কোনও nav item এর মধ্যে আরও কিছু আইটেম drop down হিসেবে সেট করতে চাইলে এই class ব্যবহার করা হয়। এটা ছাড়া specific জায়গায় droption menu show করবে না। অনেকটা এরকম দেখাবে।

dropdown-menu -> dropdown item গুলোর যেই styling navbar কে সুন্দরভাবে represent করার জন্য ব্যবহার করা হয়েছে টা এটা ছাড়া সম্ভব নয়। এটা ছাড়া navbar টা এরকম দেখাবেঃ

dropdown-item -> dropdown menu এর প্রতিটা item এর styling করা হয় এর সাহায্যে।

dropdown-divider -> অনেকগুলো dropdown item এর মধ্যে একটা horizontal line সেট করে তাদের আলাদা করা যায়। সাধারণত এটা ব্যবহার করা হয় যদি বিভিন্ন category র আইটেম একসাথে থাকে তাদের category অনুযায়ী আলাদা করার জন।

navbar-toggler-icon -> hamburger menu এর যেই styling সেটা করা হয়েছে এর সাহায্যে।

navbar-toggler-> hamburger menu এর styling কে আরও একটু সুন্দর, smooth করতে এটা ব্যবহার করা হয়েছে।

navbar component এর default code এর styling কে আপনি আপনার প্রয়োজন অনুযায়ী custom css লিখে / bootstrap এর অন্যান্য যেকোনো class ব্যাবহার করে পরিবর্তন করতে পারেন। Suppose, এখানে nav item গুলো সব একই line এ আছে। এটাকে আপনি horizontal menu থেকে vertical menu তে convert করতে পারেন easily.

[hint: এটা করার জন্য আপনাকে মোটামুটি ৩টা জায়গায় flex-coumn এই class টা ব্যাবহার করতে হবে উপরের ডিফল্ট কোড এর মধ্যে।]

তাহলে একটু নিজে নিজে try করে দেখুন তো করতে পাছেন কিনা?

Basically এই যত ধরনের css framework আছে, সেগুলো ভালভাবে শিখতে -

আপনাকে তাদের class গুলো সব ভালমত analysis করে দেখতে হবে,
তারপর নিজের মত বিভিন্ন ভাবে সেগুলো implement করে দেখতে হবে,
ওদের default component code থেকে একটা একটা class রিমুভ করে করে দেখুন output কিরকম আসে

তাহলেই সব crystal clear হয়ে যাবে।

Because, Practice makes a man perfect !!!

~Let's_code_your_career
~Happy_coding

imgbb photo is not loading!!!

Chayti — Wed, 09 Nov 2022 08:38:12 +0000

You are about to create a json file/ data for your upcoming project. But you are worried about, "Where should I host images at free of cost?"
Well!! There may be some options. Like:

Imgbb
postimage

Believe me... it's very easy, just you have to be carefull when you are getting image urls after hosting. So, follow me for getting correct links:

Imgbb hosting:

Step-1: Go to imgbb
Step-2: Click to create account

Step-3: You can create account with email & password. Or using any social account. I am signing in with my gmail.

Step-4: After sign in you will get a page like this & then click create new album.

Step-5: Now you will have a modal asking some info. Fill these info according to your need & save it. So, you will have a new album to manage your images for the current project. [You can upload images & host without creating album. But creating album is more organized for your work. Right?]

Step-6: Click upload images & give the images you want to host.

Step-7: After uploading image quickly you will have this page.
Keep all the info as it is. Don't change change anything. Then click upload.

Step-8: In a short time, your upload will be completed. The imgbb will provide you the viewer links of images.

But if you add these links in your project as image source, then you will have error & images will not load. So, you have to choose direct links from the dropdown list.

Once you choose direct links, you will have image links like these (links with image extension .jpg/ .png etc. at the last)

Hurray!! Now use these links in your image source. It will surely work.

=============================
postimage hosting
Go to postimages. These process for hosting here almost similar like imgbb. But you can resize you images from here. You will have fun!! I am giving images of steps serially.

So... now? Start your project task.😊😊😊😊😊