Forem: KAWSAR KABIR

What is React and How it works ?

KAWSAR KABIR — Thu, 12 Dec 2024 02:18:57 +0000

React is a Javascript Library for building user interfaces. এখন দুটি জিনিস গুরুত্বপূর্ণ, একটি হলো Javascript Library, আরেকটি হলো user interfaces। Library হলো কিছু collection of code, যেটা reused করে আমরা আমাদের application বানাতে পারি। React ও কিছু collection of code যেটা use করে আমরা আমাদের web application থেকে শুরু করে mobile, desktop application আর user interface বানাতে পারি।

যখনই আমরা একটি অ্যাপ্লিকেশন নিয়ে কথা বলি, তখন মূলত এর দুটি অংশ থাকে। একটি হলো ফ্রন্টএন্ড (মানে ইউজার ইন্টারফেস), আরেকটি হলো ব্যাকএন্ড, যেখানে সমস্ত লজিক থাকে।
ফ্রন্টএন্ড হলো সেই অংশ যেখানে ইউজার ইন্টারঅ্যাকশন করে, যেমন ব্রাউজ করে, বাটন ক্লিক করে, ফর্ম সাবমিট করে ইত্যাদি। তখন আমাদের ফ্রন্টএন্ড সেটাকে রেসপন্স করে ব্যাকএন্ড-এর সাহায্যে।
আর ব্যাকএন্ড-এ থাকে প্রচুর জটিল লজিক এবং ডাটা, যেমন অথেনটিকেশন, অথরাইজেশন, ডাটা ম্যানিপুলেশন ইত্যাদি।
কিন্তু React ব্যাকএন্ড নিয়ে একদমই concern না । React শুধুমাত্র ইউজার ইন্টারফেস নিয়েই কাজ করে।

এখন যদি ওয়েব নিয়ে কথা বলি, আমরা জানি Javascript হলো ব্রাউজারের ডিফল্ট প্রোগ্রামিং ল্যাঙ্গুয়েজ। কিন্তু React কোনো প্রোগ্রামিং ল্যাঙ্গুয়েজ নয়, এটা শুধু একটি Javascript Library।
তার মানে, আমরা React-এ যা কিছুই করি না কেন, শেষ পর্যন্ত সেটা pure vanilla Javascript ছাড়া আর কিছুই না।

আচ্ছা, এবার একটা প্রশ্ন করি। React তো ভাইয়া ২০১৩ সালে এসেছে, তাহলে কি আমরা এর আগে user interface বানাতাম না?
হ্যাঁ, আমরা এর আগেও বানাতাম pure Javascript আর jQuery দিয়ে।
এখন প্রশ্ন হলো, তাহলে আবার React এলো কেন? Javascript দিয়ে কী সমস্যা হতো?
আসলে React কোন সমস্যার সমাধান করতে এসেছে তা বুঝতে হলে আমাদের একটু গভীরে ঢুকতে হবে। চলুন, একটা deep dive দেই...!

আমরা একটা ছোট অ্যাপ্লিকেশন দিয়ে দেখব। আমরা একটা ছোট counter application বানিয়ে ফেলব, নিচে দেখছেন, সিম্পল একটা HTML কোড যেখানে counterNumber ও button নামে দুটি id দেওয়া হয়েছে।

আপনি এখন JavaScript কোডের ছবিটি একটু খেয়াল করুন, সেখানে একটি সহজ কোড রয়েছে। এই কোডটি আপনাকে বুঝানো আমার উদ্দেশ্য নয়। আমি যা বুঝাতে চাচ্ছি, সেটা একটু খেয়াল করুন।

counterNumber এবং button কে DOM Elements করে সিলেক্ট করা হয়েছে, তারপর addEventListener দিয়ে কাউন্টের মান ১ করে ইনক্রিমেন্ট করা হয়েছে। তারপরে counterNumberEl কে ধরে সেখানে তার মান আপডেট করা হয়েছে। এখানে আসলে কী হচ্ছে? ভালো করে খেয়াল করলে বুঝতে পারবেন যে, এখানে মূলত দুটি কাজ হচ্ছে:

১. Elements গুলোকে ধরে তাদের সাথে কাজ করা, যা আমরা করতে চাই।
২. UI (User Interface) কে ধরে সেটি আপডেট করা।

তাহলে, এখানে সমস্যা কী? কোড তো কাজ করছে! তবে, ধরুন আপনার দুইটা counter application লাগবে। তখন কী করবেন?

আপনাকে আবার সেই HTML-এ গিয়ে নতুন একটি div নিতে হবে, নতুন id গুলো দিয়ে আলাদাভাবে ধরতে হবে। এরপর পরবর্তীতে UI আপডেট করতে হবে।

এখন, আমি শুধু দুইটা counter application এর কথা বলছি, কিন্তু যখন অনেক বেশি ইন্টারঅ্যাকশন ও কমপ্লেক্স উআই থাকবে তখন তো ডেভেলপারদের ফেটে যাবে। এইটাই হচ্ছে মূল সমস্যা! আপনি একদিকে functionality তৈরি করছেন, আর অন্যদিকে UI আপডেট করতে হচ্ছে, যেটা অনেক painful হয়ে যায়।

এই বিশাল সমস্যাটি ফেইসবুকের মতো একটা কোম্পানি যখন ফেস করলো, তখন ফেইসবুকের একজন সফটওয়্যার ইঞ্জিনিয়ার Jordan Walke 2011 সালে PHP এর একটা Component Based Framework XHP-js থেকে ইন্সপায়ার হয়ে React.js তৈরি করেন। 2011 সালে এটা প্রথম ফেসবুকের নিউজফিডে ইম্পিলিমেন্ট করা হয় এবং ২০১২ সালে এটা ইন্সটাগ্রামে ব্যবহার করা হয়। ২০১৩ সালে React.js কে ওপেন সোর্স করে দেয়.

আমরা তো এখন জানি কেন আমরা রিঅ্যাক্ট ব্যবহার করি। তো চলুন, এখন আমরা যে কাউন্টার অ্যাপ্লিকেশনটা ভ্যানিলা জেএস দিয়ে করেছিলাম, সেটা এখন রিঅ্যাক্ট ব্যবহার করে করি। তাহলে আপনাদের কনফিডেন্স আরো বেড়ে যাবে যে রিঅ্যাক্ট আসার পর ডেভেলপারদের জীবন কতটা সহজ হয়ে গেছে। চলুন কোডে যাওয়া যাক…

প্রথমেই বলে নেই, এখন আমি যেভাবে রিঅ্যাক্ট ইনস্টল করে উদাহরণটা দেখাবো, সেটা আপনাদের সুবিধার জন্য, কিন্তু রিঅ্যাক্ট আমরা প্রজেক্টে এভাবে কেউ ব্যবহার করে না। আমি শুধু বুঝানোর সুবিধার জন্য একদম কোর লেভেল থেকে যাতে আপনারা বুঝতে পারেন, তার জন্যই এমনভাবে দেখানো।

এখানে আমি শুধু react.org সাইট থেকে তারা যেভাবে বলছে সেভাবে এই লিঙ্ক দিয়ে রিঅ্যাক্ট কনেক্ট করেছি। এখন যদি আমি react.js ফাইলে গিয়ে console.log(React) এবং console.log(ReactDOM) লিখি, তাহলে কনসোলে দেখতে পাবো ২টা অবজেক্ট চলে এসেছে, তার মানে আমাদের রিঅ্যাক্ট কানেক্ট হয়ে গেছে। খেয়াল করুন, এখানে body ট্যাগের মধ্যে একটি এম্পটি div ছাড়া আর কিছুই নেই, শুধু একটি id রয়েছে যার নাম root।

JavaScript এ DOM দিয়ে আমরা যেভাবে প্রথমে সিলেক্টর দিয়ে ধরে কাজ করেছিলাম, আমরা চাইলে DOM এ এলিমেন্টও ক্রিয়েট করতে পারি। ঠিক একইভাবে আমরা রিঅ্যাক্টে ও সেইভাবে এলিমেন্ট ক্রিয়েট করতে পারি। এখানে একটা div ক্রিয়েট করা হয়েছে, তার মধ্যে p ট্যাগ নিয়ে Hello World প্রিন্ট করা হয়েছে। এটা আপাতত কোন সমস্যা না দেখালেও, যখন আপনি অনেকগুলো এলিমেন্ট ক্রিয়েট করবেন, তখন তো জীবন শেষ! সেই একই কাজ বার বার তো এটা একটা সমস্যা। এজন্য রিঅ্যাক্ট তার নিজস্ব একটা মার্কআপ বানিয়েছে, যার নাম JSX (JavaScript XML)। এটা HTML এর মতো দেখালেও, এটা আসলে JSX।

এই যে উপরের চিত্রে দেখতে পাচ্ছেন কীভাবে লেখা হয়েছে। কিন্তু কথা হলো, ব্রাউজার তো ভাই এই JSX বুঝবে না। তাই এই সমস্যাটা সমাধান করতে আমাদের ট্রান্সপাইলার Babel এসেছে, যা আমাদের এই JSX কে ট্রান্সপাইল করে ভ্যানিলা জেএস করে দেবে, যা ব্রাউজার বুঝবে।

Babel কনেক্ট করার জন্য আমাদের তার ওয়েবসাইট > সেটআপ > <script src=”https://unpkg.com/@babel/standalone/babel.min.js"></script> এই লিঙ্কটি কপি করে আমার HTML এর body ট্যাগের নিচে বসিয়ে দিলাম এবং আমাদের যে জেএস ফাইল আছে সেখানে type=”text/babel” করে দিলাম।

এখন এটা যেহেতু JSX, তাই আমরা এখানে জাভাস্ক্রিপ্টও লিখতে পারবো যা ইচ্ছে হবে। তো চলুন আমরা এই সিনট্যাক্সটাকে আরো সহজ করে ফেলি। প্রথমে এটাকে একটা জেএস ফাংশনের মধ্যে নিয়ে আসি।

এখানে খেয়াল করুন, myElement tare আমি শুধু Increment নামক একটা ফাংশনের মধ্যে নিয়ে এসেছি এবং Increment ফাংশনকে এভাবে করে দিয়ে React-এ আরো সহজ করে লেখা যায়। এখন আমরা এখানে জেএসও লিখতে পারবো, আমরা যদি আগের জেএস কোডটি দিয়ে এখানে কাজ করতাম, তাহলে কাজ করতো। কিন্তু React বলছে যে, তুমি যদি আমার উপায়ে স্টেট ম্যানেজমেন্ট করতে চাও, তাহলে তোমাকে UI আপডেট নিয়ে ভাবতে হবে না। তাই React-এ useState নামে তারা একটা ফাংশন দেয়, সেটা ব্যবহার করে কীভাবে করা যায় সেটাই দেখাচ্ছি।

এই useState আমাদের increment বাটনের স্টেটের কাজ করবে। useState এ ডিফল্ট একটা ভ্যালু দিয়ে দিতে হয়, যা আমাদের স্টেটে ডিফল্ট শো করবে, এই ক্ষেত্রে আমাদের দিতে হবে 0। useState এই ফাংশন মূলত আমাদের একটা অ্যারে রিটার্ন করে, যেখানে ২টা জিনিস থাকে — একটা হলো আমরা যে ভ্যালুটি দিচ্ছি, আরেকটা হলো একটা ফাংশন যা স্টেটের মান আপডেট করার কাজটি করে থাকে। এখন তাই আমরা অ্যারে ডেস্ট্রাকচার করে আলাদা করে নিয়ে নিয়েছি।

এখন আমরা চাইলে counter যেহেতু আমাদের ইনিশিয়াল ভ্যালু তাই, এখন রিটার্নের পর 0 এর জায়গায় চাইলে {counter} এভাবে দিতে পারি। এটাকে বলা হয় ইন্টারপোলেশন। এখন counter এর মান ডায়নামিকালি চেঞ্জ হয়ে যাবে। আর বাটনে onClick (এটা যেহেতু JSX, তাই এখানে ক্যামেলকেস ফলো করে লিখতে হবে যেমন onClick) একটি ফাংশনালিটি বলে দিতে হবে।

এভাবে যদি দেই, তাহলে হয়ে গেলো, কিন্তু এখানে একটা সমস্যা আছে। আমি যদি setCounter এই ফাংশনটা এভাবে কল করে দিই, তাহলে এটা আগেই থেকে কল হয়ে থাকবে, যা আমরা চাই না। আমরা চাই যে, যখন কেউ বাটনে ক্লিক করবে তখনই এর মান বাড়বে। সেজন্য আমাদের একটা অ্যানোনিমাস অ্যারো ফাংশন করে দিতে হবে, তাহলে সমস্যা সমাধান হয়ে যাবে।

এখন আপনি যদি খেয়াল করেন যে এখানে আমরা কিন্তু ডোমের কোনো এলিমেন্টকে ধরে ম্যানুয়ালি UI আপডেট করি নি, এখানে শুধু React-কে বলেছি আমরা কী চাই, বাকি React নিজেই UI আপডেট করে দিয়েছে।

এখন যখন আমরা JS-এর উদাহরণ দিয়েছিলাম, তখন JS-এ আমাদের মেজর যে সমস্যা ছিল, তা হলো — ম্যানুয়ালি UI আপডেট করতে হয়। আমরা যদি অ্যাপ্লিকেশনটি আরেকবার ব্যবহার করতে চাই, তাহলে আমাদের আবার একই কাজ বারবার করতে হতো।

কিন্তু React-এ এই দুটি সমস্যাই সমাধান করে দেওয়া হয়েছে। আমরা দেখলাম কীভাবে ম্যানুয়ালি UI আপডেট না করে React কীভাবে কাজ করে, এখন আমরা দেখব যে যদি এই অ্যাপ্লিকেশনটি আমাদের ২-৩ জায়গায় ব্যবহার করতে হয়, তখন React কীভাবে সাহায্য করে।

এখানে দেখেন, আমি শুধু <></> এর মধ্যে increment function টাকে 2 বার কল করে দিচ্ছি, কাজ শেষ। এখন সবচেয়ে ইন্টারেস্টিং ব্যাপার হলো আপনি ২টি অ্যাপ্লিকেশন আলাদা আলাদা ভাবে কাজ করতে পারবেন, মানে আলাদা আলাদা ভাবে state manage হবে। মানে আপনি বুঝতে পারছেন, আপনি চাইলে পুরো ওয়েবসাইটের যেকোনো জায়গায় ব্যবহার করতে পারবেন, তাও আবার ডিফারেন্ট ডিফারেন্ট জায়গা আলাদা আলাদা হবে, মানে একটা আরেকটার সঙ্গে সম্পর্কিত নয়। This is the power of Reactjs.

মূল কথা হলো React-এ আপনার functionality কী হবে সেটা আপনি বলবেন এবং React সেটা অনুসরণ করে নিজেই UI আপডেট করে নেবে। This is the beauty of ReactJS।

তাহলে আমরা এতক্ষণে React কী? কেন আমরা React ব্যবহার করি? কোন সমস্যা সমাধান করতে React এসেছে, সেটা এখন পুরোপুরি বুঝতে পারছি। ইন্টারভিউ বোর্ডে আর আপনাকে এমন প্রশ্ন করে আটকে রাখতে পারবে না। এতটুকু ধৈর্য ধরে সম্পূর্ণ পড়া সহজ কাজ না, ভাইয়া। আপনি এটা করে ফেলেছেন, আপনার জন্য শুভকামনা।

Happy Coding!

Delete Documents, Drop Collection in MongoDB

KAWSAR KABIR — Sat, 22 Jun 2024 04:30:28 +0000

To delete documents in MongoDB, you can use the deleteOne() or deleteMany() methods. These methods allow you to remove one or multiple documents, respectively.

Here’s an example of using the deleteOne() method to remove a single document:

db.collection.deleteOne({ _id: ObjectId("your_document_id_here") });

If you want to delete all documents, you can use the deleteMany() method:

db.collection.deleteMany({});

Additionally, you can delete all documents that match a specific condition:

db.collection.deleteMany({ your_query_here });

To delete an entire collection, use the drop() method:

db.collection.drop();

This method removes the collection entirely, so it should be used with caution, as all data will be permanently deleted. Make sure to back up your data before performing this operation.

$Unset, $Pop, $Pull, $PullAll in MongoDB

KAWSAR KABIR — Mon, 17 Jun 2024 16:12:29 +0000

$unset

If we want to remove a field from a document in a MongoDB collection, we can use the $unset operator. First, let's add some data to the database, then we'll remove a field from that data.

db.persons.insertMany([
  { name: "Kawsar", age: 19, profession: "Frontend Developer" },
  { name: "Emanul", age: 19, profession: "Frontend Developer" },
]);

db.persons.updateOne({ name: "Kawsar" }, { $unset: { age: "" } });

In the code above, the age field is removed from the document where name is Kawsar.

$pop

To remove the first or last element of an array in a document, we use the $pop operator. First, let's insert a document into the database:

db.products.insertOne({
  _id: 100,
  quantity: 250,
  instock: true,
  details: { model: "14QQ", make: "Clothes Corp" },
  ratings: [{ by: "Customer007", rating: 4 }],
  tags: ["apparel", "clothing"],
});

Here, we have added a document to the products collection.

For example, if we want to remove the first or last item from the ratings array, we can use $pop:

db.products.updateOne(
  { _id: 100 },
  { $pop: { ratings: 1 } } // Use 1 to remove the last element
);

db.products.updateOne(
  { _id: 100 },
  { $pop: { ratings: -1 } } // Use -1 to remove the first element
);

$pull

The $pull operator is used to remove all instances of a specific value from an array in a document.

For example, if we want to remove the clothing tag from the tags array, we can use $pull:

db.products.updateOne({ _id: 100 }, { $pull: { tags: "clothing" } });

$pullAll

The $pullAll operator is used to remove multiple specific values from an array in a document.

For example, if we want to remove multiple tags from the tags array, we can use $pullAll:

db.products.updateOne(
  { _id: 100 },
  { $pullAll: { tags: ["clothing", "apparel"] } }
);

In the code above, the tags "clothing" and "apparel" are removed from the tags array in the document with _id: 100.

$Set, $AddToSet, $Push in MongoDB

KAWSAR KABIR — Sun, 16 Jun 2024 17:09:20 +0000

$Set, $AddToSet, $Push

$set

$set মানে হচ্ছে কোন কিছুর মান সেট করা। আমাদের ডাটাবেজে যদি কোন কিছুর আপডেট করতে হয় তাহলে আমরা এই অপারেটর ব্যাবহার করি। কিভাবে আমরা আমাদের ডাটাকে আপডেট করতে পারি সেটার উদাহরণ দেওয়া যাক:

db.products.insertOne({
  _id: 100,
  quantity: 250,
  instock: true,
  details: { model: "14QQ", make: "Clothes Corp" },
  ratings: [{ by: "Customer007", rating: 4 }],
  tags: ["apparel", "clothing"],
});

products কালেকশনে আমরা একটা ডাটা আমাদের ডাটাবেজে এড করে নিলাম।

কিভাবে আমরা আপডেট করতে পারি

db.products.updateOne(
  { _id: 100 },
  {
    $set: {
      quantity: 500,
      details: { model: "2600", make: "Fashionaires" },
    },
  }
);

$AddToSet

$set অপারেটর এর একটা অসুবিধা আছে, যেমন আপনাকে যদি বলা হয় যে tags প্রপার্টি টা আপডেট করতে তাহলেই বিপত্তি বেজে যাবে। চলুন দেখা যাক:

db.products.updateOne(
  { _id: 100 },
  {
    $set: {
      tags: "accessories",
    },
  }
);

আপনি যদি এভাবে ব্যাবহার করেন তাহলে আগের tags অ্যারের মান পুরোটাই রেপ্লেস হয়ে শুধু tags: "clothing" হয়ে যাবে। কিন্তু আমরা চাচ্ছি যে আগের আইটেমগুলোও থাকবে। তাহলে আমরা এই সমস্যা সমাধানের জন্য আরেকটা অপারেটর ব্যাবহার করতে পারি, সেটা হলো $addToSet:

db.products.updateOne(
  { _id: 100 },
  {
    $addToSet: {
      tags: "accessories",
    },
  }
);

আপনি যদি এভাবে এড করেন তাহলে সুন্দরভাবে নতুন করে এড হয়ে যাবে। আর যদি এই ভ্যালুটা অলরেডি থেকে থাকে তাহলে আর মডিফাই হবে না। আর আপনি যদি চান আপনার ডুপ্লিকেট এলিমেন্ট লাগবে, সেক্ষেত্রে $push ব্যাবহার করতে পারেন।

$push

$push অপারেটর ব্যাবহার করে আমরা কোনো অ্যারের মধ্যে নতুন আইটেম যোগ করতে পারি। এই অপারেটরটি অ্যারের শেষে নতুন আইটেম যোগ করে এবং ডুপ্লিকেট ভ্যালু রাখার ক্ষেত্রেও কার্যকর। উদাহরণস্বরূপ, আমরা যদি ratings অ্যারের মধ্যে নতুন রেটিং যোগ করতে চাই, তাহলে আমরা $push ব্যাবহার করতে পারি:

db.products.updateOne(
  { _id: 100 },
  {
    $push: {
      ratings: { by: "Customer008", rating: 5 },
    },
  }
);

উপরের কোডটিতে, _id: 100 ডকুমেন্টের ratings অ্যারের মধ্যে { by: "Customer008", rating: 5 } নতুন একটি রেটিং যোগ করা হয়েছে।

এইভাবে $push অপারেটর ব্যবহার করে অ্যারে আপডেট করতে পারি।

$All and $ElemMatch in MongoDB

KAWSAR KABIR — Fri, 14 Jun 2024 14:41:52 +0000

Using $All and $ElemMatch in MongoDB

$all

The $all operator is used with arrays. Let's say you have an array field called interests. If you want to find documents where the interests include "Travelling", you can easily do that:

// array field
"interests" : [ "Travelling", "Gaming", "Reading" ]

db.students.find({ interests: "Travelling" })  // 'students' is the name of the collection.

However, if you are asked to find documents where the interests include both "Travelling" and "Reading", how would you do that?

db.students.find({ interests: ["Travelling", "Reading"] });

If you run this query, it will throw an error because this query looks for an exact match of the array ["Travelling", "Reading"]. To find documents that include both "Travelling" and "Reading" regardless of their positions in the array, you need the $all operator:

db.students.find({ interests: { $all: ["Travelling", "Reading"] } });

With $all, the positions of the elements in the array do not matter. As long as the specified elements are present in the array, the document will be retrieved.

$elemMatch

The $elemMatch operator is used for matching elements in an array of objects.

Example:

Suppose your students collection has documents with a grades array field, where each element is an object representing a subject and a score:

{
  "name": "Alice",
  "grades": [
    { "subject": "Math", "score": 90 },
    { "subject": "English", "score": 85 }
  ]
},
{
  "name": "Bob",
  "grades": [
    { "subject": "Math", "score": 75 },
    { "subject": "English", "score": 95 }
  ]
},
{
  "name": "Charlie",
  "grades": [
    { "subject": "Math", "score": 90 },
    { "subject": "English", "score": 90 }
  ]
}

If you want to find students who scored more than 80 in Math, you can use the $elemMatch operator:

db.students.find({
  grades: { $elemMatch: { subject: "Math", score: { $gt: 80 } } }
});

This query will return the documents for Alice and Charlie, but not for Bob because his Math score is not greater than 80.

Conclusion:

$all is used to match elements in an array.
$elemMatch is used to match elements in an array of objects, where each element needs to satisfy multiple conditions.

🎯 Cracking the Frontend Developer Interview: What You Need to Know

KAWSAR KABIR — Thu, 13 Jun 2024 18:08:08 +0000

Hello dev.to community!

As a frontend developer, preparing for job interviews can be both exciting and challenging. Whether you're a seasoned professional or just starting out, it's crucial to be ready for the kinds of questions you might face. In this post, I'll share some common frontend developer interview questions, tips on how to answer them, and strategies for effective preparation.

Common Frontend Developer Interview Questions

1. Can you explain the box model in CSS?

Answer: The box model is a fundamental concept in CSS that describes the rectangular boxes generated for elements in the document tree. It consists of margins, borders, padding, and the content itself. Understanding how to manipulate these properties allows you to control the layout and appearance of web elements.

2. What are some differences between `==` and `===` in JavaScript?

Answer: The == operator compares two values for equality after converting both values to a common type (type coercion), while the === operator compares both value and type without converting the values. For example, 5 == '5' returns true, but 5 === '5' returns false.

3. How does Flexbox work, and what are some of its common properties?

Answer: Flexbox is a layout model that allows you to design complex layouts with ease. It provides a more efficient way to lay out, align, and distribute space among items in a container. Common properties include display: flex, flex-direction, justify-content, align-items, and flex-wrap.

4. Can you describe the concept of event delegation in JavaScript?

Answer: Event delegation is a technique where a single event listener is added to a parent element to manage events for multiple child elements. This is efficient because it reduces the number of event listeners needed and can dynamically handle new elements added to the DOM.

5. What are Single Page Applications (SPAs), and what are their advantages?

Answer: SPAs are web applications that load a single HTML page and dynamically update content as the user interacts with the app. Advantages include faster page loads, reduced server load, and a more seamless user experience since the entire page doesn't need to reload.

Tips for Effective Interview Preparation

Understand the Fundamentals

Make sure you have a strong grasp of HTML, CSS, and JavaScript. Understanding the basics will help you tackle more complex questions with confidence.

Practice Coding Challenges

Websites like LeetCode, HackerRank, and CodeSignal offer a variety of coding challenges that can help you practice problem-solving and algorithmic thinking. Regular practice will improve your coding skills and speed.

Build and Showcase Projects

Having a portfolio of projects demonstrates your skills and experience. Build a variety of projects, from simple static sites to complex web applications. Make sure your code is clean and well-documented.

Review Popular Frameworks and Libraries

Familiarize yourself with popular frontend frameworks and libraries like React, Vue, and Angular. Understand their core concepts, use cases, and how to implement them in real-world scenarios.

Mock Interviews

Participate in mock interviews with friends, mentors, or through platforms like Pramp and Interviewing.io. This will help you get comfortable with the interview format and receive constructive feedback.

Stay Updated

The tech world is constantly evolving. Follow blogs, attend webinars, and join developer communities to stay updated on the latest trends, tools, and best practices in frontend development.

Conclusion

Preparing for a frontend developer interview requires a mix of technical knowledge, practical experience, and interview practice. By focusing on these key areas, you'll be well-equipped to tackle any interview question with confidence. What strategies have you found helpful in preparing for frontend developer interviews? Share your tips and experiences in the comments!

Good luck with your interview preparation!

MongoDB Query Operators: $and, $or, $exists, $type, $size

KAWSAR KABIR — Wed, 12 Jun 2024 17:22:54 +0000

When working with MongoDB, understanding various query operators is crucial for efficient data retrieval. This article will dive into the usage of some fundamental operators like $and, $or, $exists, $type, and $size.

$and Operator

Let's say we have a database named school with a students collection. We want to retrieve students whose age is not 5 and less than 10. This can be done in two ways:

db.students
  .find({ age: { $ne: 5, $lt: 10 } })
  .project({ age: 1 })
  .sort({ age: 1 });

db.students
  .find({ $and: [{ age: { $ne: 5, $lt: 10 } }] })
  .project({ age: 1 })
  .sort({ age: 1 });

In the first example, we implicitly combine conditions within a single field. In the second, we explicitly use the $and operator. Both queries search for documents where the age is not 5 and is less than 10, then project only the age field and sort the results in ascending order.

$or Operator

The $or operator works oppositely to $and, meaning it returns documents that satisfy at least one of the conditions. While no new example is provided, it operates similarly to $and, combining conditions but returning results if any condition is true.

$exists Operator

The $exists operator checks the presence or absence of a field. For instance, to find students who do not have an age property or an email property:

db.students.find({ age: { $exists: true } });
db.students.find({ age: { $exists: false } });

$exists: true returns documents with the age field present.
$exists: false returns documents without the age field.

Note that $exists only checks for the presence of the field, not its value.

$type Operator

The $type operator allows us to query documents based on the data type of a field's value. For example, to find students where the age field is stored as a string:

db.students.find({ age: { $type: "string" } });

$size Operator

The $size operator is used to query arrays by their size. For example, to find documents where the friends array is empty:

db.test.find({ friends: { $size: 0 } });

Note: The $size operator only works with array fields.

Conclusion

These operators—$and, $or, $exists, $type, and $size—are essential tools for querying MongoDB collections. Understanding their usage can significantly enhance your ability to retrieve and manipulate data efficiently. Whether you're filtering documents based on multiple conditions, checking for the presence of fields, or querying specific data types and array sizes, these operators provide powerful capabilities for precise data management.

$in, $nin, $implicit in MongoDB: Examples and Usage🔥

KAWSAR KABIR — Tue, 11 Jun 2024 20:20:16 +0000

Understanding `$implicit`

Let's first understand how $implicit works. Suppose you're asked to fetch data for individuals aged more than 18 and less than 30. How would you do that? Let's explore through an example:

Imagine we have a database named school with a collection called students.

db.students.find({ age: { $gte: 18, $lte: 30 } });

db.students indicates that we are working with the students collection.
The find method is used to search for all the matching data.
{ age: { $gte: 18, $lte: 30 } } is the search criteria, which specifies that we are looking for documents where the age is greater than or equal to 18 and less than or equal to 30.

Using `$in`

Now, suppose you are asked to fetch data for individuals aged 18, 20, 10, and 4. You can easily achieve this using $in. Let's understand through an example:

db.students.find({ age: { $in: [18, 20, 10, 4] } }, { age: 1 });

db.students indicates that we are working with the students collection.
The find method is used to search for all the matching data.
{ age: { $in: [18, 20, 10, 4] } } is the search criteria, specifying that we are looking for documents where the age matches any of the values in the array [18, 20, 10, 4].
{ age: 1 } specifies that only the age property will be shown in the results.

Using `$nin`

$nin is the opposite of $in. In this case, you will get all data except for the values you provide. For example:

db.students.find({ age: { $nin: [18, 20, 10, 4] } }, { age: 1 });

{ age: { $nin: [18, 20, 10, 4] } } is the search criteria, specifying that we are looking for documents where the age does not match any of the values in the array [18, 20, 10, 4].
{ age: 1 } specifies that only the age property will be shown in the results.

Feel free to check out my GitHub Kawsar Kabir and connect with me on LinkedIn.

Essential MongoDB Operators: A Guide to Effective Data Management

KAWSAR KABIR — Tue, 11 Jun 2024 06:56:14 +0000

MongoDB এর কিছু অপারেটর:

$eq

$eq দ্বারা বুঝাই যে কোন কিছু সমান কিনা ? মানে ধরুন, আমাদের একটি ডাটাবেস আছে যার নাম school, এবং এতে একটি students নামের কালেকশন রয়েছে। এখন আপনাকে বলা হলো যে যেসব স্টুডেন্টসদের বয়স ১৮ তাদের ডাটা লাগবে তখন কি করবেন ? হ্যাঁ তখন আপনি এই অপারেটর দিয়ে কাজ টা করতে পারবেন আসুন উদাহারণ দিয়ে দেখি :

db.students.find({ age: { $eq: 18 } });

এখানে, db.students নির্দেশ করছে যে আমরা students কালেকশনে কাজ করছি।
find মেথডটি সব গুলো ডাটা খুঁজে বের করার জন্য ব্যবহৃত হচ্ছে।
{age: {$eq: 18}} হলো সার্চ ক্রাইটেরিয়া যা নির্দেশ করছে যে আমরা সেই ডকুমেন্টটি খুঁজছি যাদের বয়স ১৮ এর সমান।

$ne

$ne দ্বারা বুঝাই যে সমান না। মানে ধরুন, এখন আপনাকে বলা হলো যে যেসব স্টুডেন্টসদের বয়স ১৮ এর সমান না তাদের ডাটা লাগবে তখন কি করবেন ? হ্যাঁ তখন আপনি এই অপারেটর দিয়ে কাজ টা করতে পারবেন আসুন উদাহারণ দিয়ে দেখি :

db.students.find({ age: { $ne: 18 } });

এখানে, db.students নির্দেশ করছে যে আমরা students কালেকশনে কাজ করছি।
find মেথডটি সব গুলো ডাটা খুঁজে বের করার জন্য ব্যবহৃত হচ্ছে।
{age: {$ne: 18}} হলো সার্চ ক্রাইটেরিয়া যা নির্দেশ করছে যে আমরা সেই ডকুমেন্টটি খুঁজছি যাদের বয়স ১৮ এর সমান না ।

$gt

$gt দ্বারা বুঝাই greater than > মানে ধরুন, এখন আপনাকে বলা হলো যে যেসব স্টুডেন্টসদের বয়স ১৮ এর বেশি তাদের ডাটা লাগবে তখন কি করবেন ? হ্যাঁ তখন আপনি এই অপারেটর দিয়ে কাজ টা করতে পারবেন আসুন উদাহারণ দিয়ে দেখি :

db.students.find({ age: { $gt: 18 } });

এখানে, db.students নির্দেশ করছে যে আমরা students কালেকশনে কাজ করছি।
find মেথডটি সব গুলো ডাটা খুঁজে বের করার জন্য ব্যবহৃত হচ্ছে।
{age: {$ge: 18}} হলো সার্চ ক্রাইটেরিয়া যা নির্দেশ করছে যে আমরা সেই ডকুমেন্টটি খুঁজছি যাদের বয়স ১৮ এর বেশি ।

$gte

আবার যদি বলে ১৮ এর বেশি বা সমান । অর্থাৎ greater than >= এই ক্ষেত্রে আমাদের আরেকটা অপারেটর আছে সেটা হলো $gte

db.students.find({ age: { $gte: 18 } });

এখানে, db.students নির্দেশ করছে যে আমরা students কালেকশনে কাজ করছি।
find মেথডটি সব গুলো ডাটা খুঁজে বের করার জন্য ব্যবহৃত হচ্ছে।
{age: {$gte: 18}} হলো সার্চ ক্রাইটেরিয়া যা নির্দেশ করছে যে আমরা সেই ডকুমেন্টটি খুঁজছি যাদের বয়স ১৮ এর বেশি বা সমান।

$lt

যদি বলে ১৮ এর কম লাগবে । অর্থাৎ less than < এই ক্ষেত্রে আমাদের আরেকটা অপারেটর আছে সেটা হলো $lt

db.students.find({ age: { $lt: 18 } });

এখানে, db.students নির্দেশ করছে যে আমরা students কালেকশনে কাজ করছি।
find মেথডটি সব গুলো ডাটা খুঁজে বের করার জন্য ব্যবহৃত হচ্ছে।
{age: {$lt: 18}} হলো সার্চ ক্রাইটেরিয়া যা নির্দেশ করছে যে আমরা সেই ডকুমেন্টটি খুঁজছি যাদের বয়স ১৮ এর কম।

$lte

আবার যদি বলে ১৮ এর কম বা সমান লাগবে । অর্থাৎ less than <= এই ক্ষেত্রে আমাদের আরেকটা অপারেটর আছে সেটা হলো $lte

db.students.find({ age: { $lte: 18 } });

এখানে, db.students নির্দেশ করছে যে আমরা students কালেকশনে কাজ করছি।
find মেথডটি সব গুলো ডাটা খুঁজে বের করার জন্য ব্যবহৃত হচ্ছে।
{age: {$lte: 18}} হলো সার্চ ক্রাইটেরিয়া যা নির্দেশ করছে যে আমরা সেই ডকুমেন্টটি খুঁজছি যাদের বয়স ১৮ এর কম বা সমান।

insertOne, insertMany and find, findOne in MongoDB

KAWSAR KABIR — Thu, 30 May 2024 10:31:07 +0000

In databases, the insertOne and insertMany methods are used to add new data. insertOne is used to insert a single document, while insertMany can be used to insert multiple documents at once. Let’s understand this with examples:

Adding a single document (insertOne):

db.students.insertOne({
    id: 1,
    name: 'Rahim',
    age: 20,
    email: 'abc@gmail.com',
    gender: "Male",
});

Adding multiple documents at once (insertMany):

db.students.insertMany([
    { id: 2, name: 'Karim', age: 22, email: 'abc@gmail.com', gender: 'Male' },
    { id: 3, name: 'Ayesha', age: 19, email: 'abc@gmail.com', gender: 'Female' },
    { id: 4, name: 'Fatima', age: 21, email: 'abc@gmail.com', gender: 'Female' }
]);

Here, db.students indicates that we are working in the students collection.
The {} represents a JSON object being inserted.

Find & FindOne

Find means to search. Suppose we want to view the data that has been added to the database. The find() and findOne() methods help us with this task. The find() method retrieves all the data, while the findOne() method is used to retrieve specific data. Let's look at examples:

To find all data:

db.students.find();

The find() method is used to find all the data.

To find specific data:

db.students.findOne({ id: 1 });

The findOne() method is used to find a specific document.
{ id: 1 } is the search criterion indicating that we are looking for the document with id: 1.

Field Filtering

Suppose someone asks for data of only female students. In this case, we can access data for a specific field using Field Filtering:

To find data for a specific field:

db.students.find({ gender: 'Female' });

{ gender: 'Female' } is the search criterion indicating that we are looking for documents where the gender field is Female.

Project

The previous task can also be done using the Project() method, but the difference is that you cannot use findOne() with Project(), only find() can be used.

To find data for a specific field using the `Project()` method:

db.students.find({ gender: 'Female' }).project({ name: 1, email: 1 });

{ gender: 'Female' } is the search criterion indicating that we are looking for documents where the gender field is Female.
{ name: 1, email: 1 } means we want to get the name and email fields of the female students.

This is how we can insert and find data in MongoDB!

🚀 Exciting React Project Showcase for Beginners! 🌟

KAWSAR KABIR — Wed, 15 Nov 2023 20:10:35 +0000

Hey React enthusiasts! 👋 I've been working on a collection of beginner-friendly React projects, and I'm thrilled to share them with you. Whether you're just starting your React journey or looking for inspiration, these projects are designed to help you learn and have fun along the way.

Explore the Showcase: React Design Showcase

🚀 Why Explore These Projects?

Beginner-Friendly: Perfect for those new to React.
Clear Documentation: Each project comes with comprehensive documentation to guide you.
Interactive Demos: See the projects in action with live demos.
Open Source: Feel free to contribute, ask questions, or provide feedback.

🛠 How to Get Started?

Clone the Repository:

   git clone https://github.com/kawsarkabir/react-design-showcase.git

Navigate to the Project Folder:

   cd react-design-showcase/project-name

Install Dependencies:

   npm install

Run the Project:

   npm start

🤝 Get Involved!

Found a bug? Have a suggestion? Want to contribute? Your feedback is highly appreciated! Feel free to open an issue, submit a pull request, or drop your thoughts in the comments.

Let's learn and grow together! 🌱 Explore the projects here and don't forget to star the repository if you find it useful.

Happy coding! 🚀✨

Forem: KAWSAR KABIR

What is React and How it works ?

Delete Documents, Drop Collection in MongoDB

$Unset, $Pop, $Pull, $PullAll in MongoDB

$unset

$pop

$pull

$pullAll

$Set, $AddToSet, $Push in MongoDB

$Set, $AddToSet, $Push

$set

কিভাবে আমরা আপডেট করতে পারি

$AddToSet

$push

$All and $ElemMatch in MongoDB

Using $All and $ElemMatch in MongoDB

$all

$elemMatch

Example:

Conclusion:

🎯 Cracking the Frontend Developer Interview: What You Need to Know

Common Frontend Developer Interview Questions

1. Can you explain the box model in CSS?

2. What are some differences between == and === in JavaScript?

3. How does Flexbox work, and what are some of its common properties?

4. Can you describe the concept of event delegation in JavaScript?

5. What are Single Page Applications (SPAs), and what are their advantages?

Tips for Effective Interview Preparation

Understand the Fundamentals

Practice Coding Challenges

Build and Showcase Projects

Review Popular Frameworks and Libraries

Mock Interviews

Stay Updated

Conclusion

MongoDB Query Operators: $and, $or, $exists, $type, $size

$and Operator

$or Operator

$exists Operator

$type Operator

$size Operator

Conclusion

$in, $nin, $implicit in MongoDB: Examples and Usage🔥

Understanding $implicit

Using $in

Using $nin

Essential MongoDB Operators: A Guide to Effective Data Management

MongoDB এর কিছু অপারেটর:

$eq

$ne

$gt

$gte

$lt

$lte

insertOne, insertMany and find, findOne in MongoDB

Adding a single document (insertOne):

Adding multiple documents at once (insertMany):

Find & FindOne

To find all data:

To find specific data:

Field Filtering

To find data for a specific field:

Project

To find data for a specific field using the Project() method:

🚀 Exciting React Project Showcase for Beginners! 🌟

Explore the Showcase: React Design Showcase

🚀 Why Explore These Projects?

🛠 How to Get Started?

🤝 Get Involved!

2. What are some differences between `==` and `===` in JavaScript?

Understanding `$implicit`

Using `$in`

Using `$nin`

To find data for a specific field using the `Project()` method: