Forem: Shuvro_baset

Docker Engine ও Container Runtime: ভেতরকার রহস্য ও কার্যপদ্ধতি

Shuvro_baset — Thu, 22 Jan 2026 14:28:22 +0000

Docker- Part-3

আমরা যারা কন্টেইনারাইজেশন নিয়ে কাজ করি, তারা প্রতিদিন docker run কমান্ডটি ব্যবহার করছি। কিন্তু এই একটি কমান্ড দেওয়ার পর পর্দার আড়ালে ঠিক কী কী ঘটে? কিভাবে Docker Daemon আমাদের রিকোয়েস্টটি প্রসেস করে এবং Linux Kernel-এর সাথে কথা বলে একটি আইসোলেটেড এনভায়রনমেন্ট তৈরি করে?

আজকের আর্টিকেলে আমি Docker Engine-এর আর্কিটেকচার এবং এর অভ্যন্তরীণ বিভিন্ন কম্পোনেন্ট যেমন— dockerd, containerd, runc, Namespaces এবং Cgroups নিয়ে সহজ ভাষায় আলোচনা করেছি।

Docker Engine

Docker Engine হলো Docker-এর মূল অংশ। এটি একটি client-server application যা দিয়ে আমরা container create, stop, delete, start, clean ইত্যাদি করি। এর প্রধান তিনটি অংশ রয়েছে:

Docker CLI
Docker Daemon (dockerd)
Container Runtime

Docker CLI (Docker Client)

এটি হলো interface যেখানে আমরা docker-এর বিভিন্ন কমান্ড লিখি। যেমন: docker run, docker build ইত্যাদি। সোজা কথা user input নেয়ার interface বা user এর সাথে interact করার মাধ্যমে।

Docker Daemon (dockerd)

এটি হচ্ছে docker-এর মস্তিষ্ক। সব কাজের আসল দায়িত্ব পালন করে এটি।
ক্লায়েন্টের কাছ থেকে রিকোয়েস্ট গ্রহণ করে ইমেজ, কন্টেইনার ও নেটওয়ার্ক ম্যানেজ করে।
এটি একটি ব্যাকগ্রাউন্ড প্রসেস। এটি সবসময় listen করে যে কোনো নতুন কমান্ড আসছে কি না। এটি অনেকটা 'বিগ ব্রাদার' বা প্যারেন্ট প্রসেসের মতো যা পুরো সিস্টেমের দেখাশুনা করে।
Docker Daemon সবসময় অন থাকে। PC start করার সাথে সাথে এটি start হয়ে যায়। Request-এর জন্য wait করে।

Container Runtime

Container Runtime হলো docker-এর সেই উপাদান যা actual container চালায়। এই Runtime আবার দুই ধরণের:

containerd (High level Runtime)
runc (low level Runtime)

*containerd (High level Runtime): *

এটি docker image ম্যানেজ করে,
container life cycle manage করে
এবং network, storage handle করে।

runc (low level Runtime):

এটি Kernel এর সাহায্য নিয়ে কন্টেইনার তৈরি করার কাজ করে।
এটি Namespace ও Cgroup ব্যবহার করে।

Execution Flow (কিভাবে কাজ করে)

যখন আমরা লিখি docker run hello-world, তখন:

Step 1 (Request): User docker CLI এর মাধ্যমে dockerd (daemon) কে request পাঠায়। dockerd সেটা রিসিভ করে।
Step 2 (Delegation): dockerd নিজে container তৈরি না করে সেই দায়িত্ব পাঠিয়ে দেয় containerd-এর কাছে।
Step 3 (Execution): containerd আবার runc কে কল করে। runc সরাসরি OS এর Kernel-এর সাথে কথা বলে।
Step 4 (Isolation): Kernel তখন Namespace এবং Cgroup ব্যবহার করে একটি isolated (আলাদা) পরিবেশ তৈরি করে। আর এভাবেই একটি container তৈরি হয়।

Docker #DockerEngine #Containers #BackendDevelopment #SoftwareEngineering #TechBlog

খেলার মাঠ থেকে ডকার: ভার্চুয়াল মেশিন এবং কন্টেইনার

Shuvro_baset — Mon, 19 Jan 2026 18:21:25 +0000

Part-2

সফটওয়্যার ইঞ্জিনিয়ারিংয়ের দুনিয়ায় পা রাখলে দুটি শব্দ বারবার কানে আসে— Virtual Machine (VM) এবং Container। এই দুটির পার্থক্য বুঝতে গিয়ে অনেকে খেই হারিয়ে ফেলেন। চলুন, আমাদের এলাকার খেলার মাঠের একটি কাল্পনিক গল্প দিয়ে বিষয়টি পরিষ্কার করা যাক।

১. ভার্চুয়াল মেশিন (VM) যখন মাঠ ভাগ হয়ে যায়:

আমাদের এলাকায় একটি বিশাল খেলার মাঠ আছে। এলাকার একদল মানুষ ক্রিকেট পাগল, আর অন্যদল ফুটবল ভক্ত। সবাই একসাথে মাঠে খেলতে চায় । মুরুব্বিরা (যাদের আমরা টেকনিক্যালি বলব Hypervisor) একটি সিদ্ধান্ত নিলেন। তারা মাঠের মাঝখানে দেয়াল তুলে মাঠটিকে দুই ভাগ করে দিলেন।

পুরো মাঠ: আমাদের মূল কম্পিউটার বা হার্ডওয়্যার।
জমি: স্টোরেজ বা HDD
ম্যানেজমেন্ট রুম: CPU
ড্রেসিং রুম: মেমোরি বা RAM

মাঠ ভাগ করার সাথে সাথেই প্রতিটি ভাগের জন্য আলাদা ম্যানেজমেন্ট রুম, আলাদা ড্রেসিং রুম এবং আলাদা এন্ট্রি গেট তৈরি করতে হলো। অর্থাৎ, প্রতিটি ভার্চুয়াল মেশিন তার নিজের জন্য আলাদা অপারেটিং সিস্টেম (Guest OS) এবং রিসোর্স দখল করে নিলো। এখানে একটির প্লেয়ার অন্যটির রুমে ঢুকতে পারে না। এটি নিরাপদ, কিন্তু অনেক জায়গা এবং সম্পদ অপচয় করে ।

সহজ ভাষায় Virtual Machine মানে- একটা কম্পিউটারের ভেতরে আরেকটা পুরো কম্পিউটার।

ভিতরে কী থাকে?

একটা VM এর ভেতরে থাকে:

নিজস্ব Operating System (Linux/Windows)
নিজস্ব Kernel
CPU, RAM, Disk (share করা, কিন্তু আলাদা করে দেয়া)
Application

Hypervisor কী?

Hypervisor হলো manager

কে কত RAM পাবে
কে কত CPU পাবে
কে কখন চলবে

VM কেন Heavy?

প্রতিটা VM এ পুরো OS
প্রতিটা OS আলাদা Kernel চালায়

👉 তাই VM:

Slow start
বেশি RAM/Disk লাগে

VM কখন ব্যবহার করা ভালো?

Different OS দরকার (Windows + Linux)
Strong security isolation দরকার
Legacy system

২. ডকার কন্টেইনার (Docker): যখন মাঠ শেয়ার করা হয়

এবার একটু ভিন্নভাবে চিন্তা করি। মাঠ একটাই, কোনো দেয়াল নেই। কিন্তু মাঠের এক কোণে ৪-৫টি পিচে ক্রিকেট খেলা চলছে, অন্যপাশে ব্যাডমিন্টন আর এক পাশে ফুটবল। সবাই একই মাঠ, একই ড্রেসিং রুম আর একই গেট ব্যবহার করছে।

কিন্তু মজার ব্যাপার হলো, ক্রিকেটের প্লেয়াররা এমনভাবে খেলছে যেন তাদের কাছে ওই পিচটুকুই তাদের জগত। তারা অন্য খেলায় বাধা দিচ্ছে না। এই যে একই মাঠ (Host OS) ব্যবহার করে ছোট ছোট সীমানায় (Isolated environment) নিজেদের খেলা চালানো—এটিই হলো Container।

কন্টেইনার প্রযুক্তিতে ডকার মূলত Namespace এবং Cgroups ব্যবহার করে এই অদৃশ্য সীমানা তৈরি করে।

Namespace:

এটি প্রতিটি খেলার জন্য একটি আলাদা "ভিউ" তৈরি করে, যাতে একজন অন্যজনের প্রসেস দেখতে না পায়।
Namespace Container কে বোঝায় তুমি একা
বাস্তবে সব Host OS এর ভেতরে।
PID (process)
NET (network)
MNT (filesystem)

Cgroups — resource control

Cgroups: এটি নিশ্চিত করে যে ফুটবল প্লেয়াররা যেন পুরো মাঠ দখল না করে ফেলে, ক্রিকেটের জন্য যেন নির্দিষ্ট জায়গা থাকে।
এই Container max কত CPU
max কত RAM

👉 এক Container অন্যটার resource খেতে পারবে না।

সহজ ভাষায় Container হলো OS-এর ভেতরে আলাদা আলাদা lightweight environment

এগুলো নিজেদের OS চালায় না, Host OS এর Kernel ব্যবহার করে।

কীভাবে কাজ করে?

Host OS (Linux)
Docker / Container Runtime
একাধিক Container

👉 প্রতিটা Container এর আছে:

App
App dependencies
নিজস্ব OS নেই
Host Kernel শেয়ার করে

ভার্চুয়াল মেশিন হলো আলাদা আলাদা বাড়ি তৈরির মতো নিরাপদ কিন্তু ব্যয়বহুল। আর ডকার কন্টেইনার হলো একই মাঠের ভেতর সুশৃঙ্খলভাবে আলাদা আলাদা খেলা চালানোর মতো দক্ষ এবং সাশ্রয়ী।

Part-1

"It Works on My Machine" — এই ভূতের ওঝা যখন ডকার (Docker)

Shuvro_baset — Tue, 06 Jan 2026 16:24:20 +0000

Part-1

ডেভেলপারদের জীবনে একটি চিরচেনা এবং বিরক্তিকর সমস্যা হলো - আমার local-এ তো ঠিকঠাক কাজ করছে, কিন্তু server-এ বা খুব কাছের বন্ধুর কম্পিউটারে কাজ করছে না। কী বিপদ! আজ কাছের বন্ধুটাও আমার পাশে নেই… ☹️

সমস্যার মূলে কী?

আমরা যখন কোনো অ্যাপ্লিকেশন তৈরি করি, তখন সেটি একা চলে না। এর সাথে জড়িয়ে থাকে বিভিন্ন Programming Language, Tools, এবং Dependency Packages। এগুলোর প্রত্যেকটির আবার আলাদা আলাদা ভার্সন (Version) থাকে। সবার কম্পিউটারে সবকিছুর ভার্সন হুবহু এক থাকবে—এমনটা আশা করা কঠিন। আর এই ভার্সনের সামান্য অমিল হলেই উদয় হয় সেই অনাকাঙ্ক্ষিত ভূতের, যা আমাদের বলতে বাধ্য করে— "It works on my machine!" ☹️

এই 'ভার্সন সমস্যার ভূত' তাড়ানোর জন্য আমাদের একজন 'ওঝা' দরকার। আর আধুনিক সফটওয়্যার ইঞ্জিনিয়ারিংয়ের সেই ওঝা বা মুশকিল আসান হলো Docker (ডকার)।

Docker আসলে কী?

'ডকার' (Docker) একটি ব্রিটিশ শব্দ, যার বাংলা অর্থ হলো 'ডকশ্রমিক'। আমেরিকান ইংরেজিতে একে বলা হয় 'Longshoreman'। তাদের কাজ হলো মূলত জাহাজের মালামাল লোড-আনলোড (Load/Unload) করা।

আগে জাহাজে আলগা মালামাল তোলা-নামানো ছিল বেশ সময়সাপেক্ষ ও ঝামেলার কাজ। ১৯৫০ সালে Malcolm McLean নামক একজন আমেরিকান ব্যক্তি 'Container' আবিষ্কার করেন। এই কন্টেইনার আসার পর মালামাল পরিবহন যেমন নিরাপদ হয়েছে, তেমনি লোড-আনলোড করাও অনেক সহজ হয়ে গেছে।

টেকনিক্যাল দিক থেকে Docker-এর ভূমিকা

সফটওয়্যার জগতের ডকারও ঠিক একই কাজ করে। এটি মূলত একটি ইকোসিস্টেম বা প্ল্যাটফর্ম, যা আমাদের অ্যাপ্লিকেশনের জন্য 'কন্টেইনার' ম্যানেজ করে। জাহাজের কন্টেইনারে যেমন পণ্য থাকে, তেমনি ডকার কন্টেইনারে থাকে আমাদের অ্যাপ্লিকেশনের:

সোর্স কোড (Code)
ডিপেন্ডেন্সি প্যাকেজ (Dependency Packages)
অপারেটিং সিস্টেমের প্রয়োজনীয় অংশ (OS)
এবং অন্যান্য কনফিগারেশন। এই সবকিছু একসাথে একটি প্যাকেজ হিসেবে থাকে, যাকে আমরা Docker Image বলি।

একটি সহজ উদাহরণ
ধরা যাক—

একটি application-এ ব্যবহার করা হচ্ছে Python 3.7
আরেকটি application-এ দরকার Python 3.12

Docker ব্যবহার করলে—

দুটি application দুইটি আলাদা container-এ
একদম কোনো ঝামেলা ছাড়াই
একই machine-এ একসাথে run করা যায়

পরবর্তীতে এই container-কে Docker image (snapshot) হিসেবে তৈরি করে অন্য যেকোনো PC বা server-এ খুব সহজেই run করা সম্ভব।

সংক্ষেপে Docker কী কী করে?

Docker মূলত container load এবং unload করার কাজ করে
Container-এর ভেতরে আমার application বা service-এর সবকিছু isolated অবস্থায় থাকে
প্রতিটি container আলাদা আলাদা software বা project-এর জন্য হতে পারে
Docker খুবই efficient এবং lightweight
আগে এই সমস্যা সমাধানে Virtual Machine (VM) ব্যবহার করা হতো, যা ছিল ভারী ও ধীরগতির
Docker-এ প্রতিটি container আলাদাভাবে (isolated) কাজ করতে পারে
Docker image ব্যবহার করে deployment হয় খুব সহজ ও দ্রুত

শেষ কথা

সহজ কথায় বলতে গেলে, ডকার আমাদের অ্যাপ্লিকেশনকে একটি নির্দিষ্ট ফ্রেমওয়ার্ক বা বক্সের মধ্যে আটকে দেয়, যাতে বাইরের পরিবেশ পরিবর্তনের কোনো প্রভাব ওই অ্যাপ্লিকেশনের ওপর না পড়ে। ফলে "It Works on My Machine" — এই অজুহাত দেওয়ার দিন এখন শেষ!

Part-2

How does the Python Program work in your computer

Shuvro_baset — Sat, 13 Jan 2024 17:42:34 +0000

পাইথন খুব সহজ এবং ডিমান্ডিং প্রোগ্রামিং ল্যাঙ্গুয়েজ হওয়ার কারণে আমাদের অনেকেরই পছন্দের প্রোগ্রামিং ল্যাংগুয়েজ এটি। আমরা পাইথন দিয়ে প্রোগ্রামিং করলেও অনেকেই ঠিকমতো জানিনা পাইথন আসলে কিভাবে কাজ করে। এই আর্টিকেল এর মাধ্যমে আজকে আমরা সেটাই জানার চেষ্টা করবো।

Python

পাইথন একটি হাই লেভেল ইন্টারপ্রেটেড প্রোগ্রামিং ল্যাঙ্গুয়েজ। C বা C++ এর মতো প্রোগ্রাম রান করতে কম্পাইলার এর প্রয়োজন হয় না। পাইথন লাইন বাই লাইন এক্সেকিউট করে।

Compiler & Interpreter

কম্পাইলার মূলত সম্পূর্ণ কোডকে একসাথে মেশিন কোড এ ট্রান্সলেট করে। অপরদিকে ইন্টারপ্রেটার লাইন বাই লাইন ট্রান্সলেট করে।

চলুন মূল আলোচনায় যাওয়া যাক।

একটি প্রোগ্রাম রান করার আগে প্রথমে আমরা প্রোগ্রাম টি কোনো একটা ফাইল এ লিখি। তারপর সেটি নির্দিষ্ট ল্যাঙ্গুয়েজে অনুসারে এক্সটেনশন দিয়ে ফাইল টি সেভ করি। পাইথন এর ক্ষেত্রে আমরা .py দিয়ে লিখি।

ধরুন আমরা একটা Hello World প্রোগ্রাম লিখবো। শুরুতে আমরা একটি ফাইল নিলাম যার নাম দিলাম hello.py

এরপর ফাইলটি যেকোনো এডিটর এ ওপেন করে সেখানে আমরা আমাদের কোড টি লিখব।

যখন আমরা ফাইল টি রান করবো তখন আসলে কি হয় সেটাই আমাদের আজকের মূল আলোচনা।

পাইথন প্রোগ্রাম রান করার পূর্বে অবশ্যই আপনার কম্পিউটার এ পাইথন ইন্টারপ্রেটার ইনস্টল থাকা চাই।

কোড টি রান দেয়ার পর প্রথমে পাইথন ইন্টারপ্রেটার কোড টি লাইন বাই লাইন রিড করে byte code / machine code এ ট্রান্সলেট করবে। কম্পিউটার মূলত মেশিন কোড বুঝে।

byte code হলো ডেভেলপার বা প্রোগ্রামার এর লেখা কোড এর set of instruction. এবং এটি .pyc ফাইল এ সেভ হয়। PVM বা পাইথন ভার্চুয়াল মেশিন এর মাধ্যমে byte code/ machine code এ ট্রান্সলেট হয়ে এক্সেকিউট হয়। এবং এক্সপেকটেড আউটপুট দেখায়।

পাইথন ইন্টারপ্রেটার যখন প্রতিটা লাইন কে রিড করে byte code এ ট্রান্সলেট করে তখন যদি কোনো এরর বা অন্য কোনো সমস্যা পায় তখনই প্রোগ্রাম টি এক্সেকিউট বন্ধ করে দেয়। এবং সেই এরর মেসেজ টি শো করে দেয়।

এভাবেই মূলত পাইথন প্রোগ্রাম একটি কম্পিউটার এ রান হয়।

List of some Python interpreter

Cpython (official Python interpreter and it is standard)
Jpython/Jython
PyPy
RubyPython

CRUD with NodeJs & ReactJs

Shuvro_baset — Thu, 06 Jan 2022 18:29:32 +0000

CRUD:
Most important thing in backend development.
CRUD means C for Create/POST, R for Read/GET, U for Update/Patch and D for Delete

I will try to describe these operations with some examples. How do we make this using ReactJs and NodeJs very simply.

POST/CREATE:
In a very simple way CREATE means client will give some input data then it will take to the backend side or server side then it will save into the database.

User will give input form data and submit it with a url called.

fetch('http://localhost:5000/add-users', { 
        method: 'POST', 
        headers: { 
            'content-type': 'application/json' 
        }, 
        body: JSON.stringify(newUser) 
    })

From the client side data will pass into the backend and it will save into database in a specific collection.

app.post('/add-users', async (req, res) => {
    const newUser = req.body // receive data from frontend 
    const result = await usersCollection.insertOne(newUser); // save data to the database

/>
res.send(result); // send response to the frontend.
});
After that a successful response will go from the backend side to the client side.
User will see a success message
.then(res => res.json())
.then(data => {
if (data.insertedId) {
alert('Successfully added the user.')
e.target.reset();
}})

READ/GET:

Get the data from the database and show it to the client side.
When we want to show some data to the client side and the page is loaded then it will call the API url for getting the data.

 fetch(`http://localhost:5000/users`)  
 app.get('/users', async (req, res) => { 
    const cursor = usersCollection.find({}); 
    const users = await cursor.toArray();         
});

Server side receive the data from the database and send it to the client side.

res.send(users);
From client side data will show to the UI
- .then(res => res.json())
.then(data => {
setUsers(data.users)

});
user.map(.............)

UPDATE/PUT:
Updating and existing data from the database. Sometimes we need to edit our existing data. In that we make a method for updating data.
It’s one kind of POST method. User will give some data from the client side and hit a url then it will come to the backend side and from the backend side they will check in to the database if the condition matches then data will update into the database and after that it will send a successful response to the client side.

const url = `http://localhost:5000/update-user/${userId}`; 
    fetch(url, { 
        method: 'PUT', 
        headers: {
            'content-type': 'application/json'
        }, 
        body: JSON.stringify(user)
    })

We need to pass the unique data to sure that which object data we want to change.

app.put('/update-user/:id', async (req, res) => {
const id = req.params.id;
console.log('updating', id)
const updatedUser = req.body;
const filter = { _id: ObjectId(id) }; // filtering user's object
const options = { upsert: true }; // update and insert
const updateDoc = { // set data
$set: {
fname: updatedUser.fname,
lname: updatedUser.lname,
address: updatedUser.address,
email: updatedUser.email
},
};
const result = await usersCollection.updateOne(filter, updateDoc, options) // updating res.json(result) // send response to frontend

Updated data from database
Response send from backend to the client side.

res.json(result) // send response to frontend
.then(res => res.json())
.then(data => {
if (data.modifiedCount > 0) {
alert('Update Successful');
setUser({});
e.target.reset();
}
})

DELETE:
Delete existing data
I click a specific button to delete the data. After that the delete API url hit and the backend received the unique value to identify which data we want to delete.

<button onClick={() => handleDeleteUser(user._id)} className="btn btn-danger" >delete</button>

- const handleDeleteUser = id => { 
    const proceed = window.confirm('Are you sure, you want to delete?'); 
    if (proceed) { 
        const url = `http://localhost:5000/users/${id}`;
        fetch(url, { 
            method: 'DELETE' 
        })

Backend receives the unique value(id) and makes a query to find out the specific data for delete.
app.delete('/users/:id', async (req, res) => {
const id = req.params.id;
const query = { _id: ObjectId(id) };
const result = await usersCollection.deleteOne(query);
}
Data will be deleted from the database.

- res.json(result);

Send a success message to the client.
- .then(res => res.json())
.then(data => {
if (data.deletedCount > 0) {
alert('deleted successfully');
}

Virtual DOM, diffing- algorithm, Context API

Shuvro_baset — Thu, 06 Jan 2022 17:40:57 +0000

DOM:
DOM stands for Document Object Model. It is the hierarchical representation of your web page(UI). It’s a programming interface of XML or HTML documents. It represents our webpage as we can easily modify it using the programming language.
Each time something in the DOM changes. Since DOM is represented as a tree structure, It contains a node for each UI element present in the web document. It is very useful as it allows web developers to modify content through JavaScript, also it being in structured format helps a lot as we can choose specific targets and all the code becomes much easier to work with

Virtual DOM:
Virtual DOM is the copy of real DOM that kept the original DOM in the memory and synced with the real DOM by libraries such as ReactDOM. This process is called Reconciliation. Changing virtual DOMs is easier than real DOM.

Diffing-Algorithm:
A diff algorithm outputs the set of differences between two inputs. These algorithms are the basis of a number of commonly used developer tools. Yet understanding the inner workings of diff algorithms is rarely necessary to use said tools.
React Two virtual trees need to be maintained at the same time DOM Trees ： A tree representing the present DOM structure , The other one is React Generated when the state change is about to be re rendered .React By comparing the differences between the two trees , Decide if it needs to be changed DOM structure , And how to modify . This algorithm is called the Diff Algorithm .

Context API:
In React props passing into the component is a little bit difficult because In a typical React application, data is passed top-down (parent to child) via props.
In that situation we need something to handle this problem. Sometimes we need to pass data into many more components. In that case React gives us a Context API to solve this problem. By using Context API we can share props to any components as we want without any difficulties.

Javascript- call(), apply(), bind()

Shuvro_baset — Thu, 06 Jan 2022 06:26:34 +0000

This:
In javascript one of the most important and confusing topics is ‘this’. It's a reserved keyword, we do not use it as variable or function name.
This means that “this” can only be used in a function, or globally. When used in either of these cases, “this” refers to the window object. When the function is a method of an object, then “this” refers to the object that the method is a member of. When the function is a constructor, then “this” refers to the instance object. There is much more to talk about with regards to what “this” means in varying scenarios, but these are the most common situations.

Call, Bind, Apply:
We use call, bind and apply methods to set ‘this’ keyword independent of how the function is called. This is especially useful for the callbacks.

These Three methods take the value of this or centext of this as a first argument. But call() and bind() can take unlimited arguments. On the other hand apply() can take only two arguments. First one is the value or context and the second one is an array.

In which function we use call() and apply() method that function will be called instant. On the other hand, the bind() method did not call it instant, it returned a function definition so that we can call it later as we want.

Examples:
const normalPerson = {
firstName: 'shuvro',
lastName: 'baset',
salary: 15000,
getFullName: function() {
console.log(this.firstName, this.lastName);
},
chargeBill: function(amount, tips, tax) {
console.log(this)
this.salary = this.salary - amount -tips - tax;
return this.salary;
}
}

normalPerson.chargeBill(100);
console.log(normalPerson.salary)

const zeroPerson = {
firstName: 'zero',
lastName: 'person',
salary: 5000,
}

const heroPerson = {
firstName: 'hero',
lastName: 'person',
salary: 25000,
}

// i will bind chargeBill function to heroPerson
const heroChargeBill = normalPerson.chargeBill.bind(heroPerson);
heroChargeBill(2000);
heroChargeBill(1000);
console.log(heroPerson.salary)
console.log(normalPerson.salary)

// call function
normalPerson.chargeBill.call(heroPerson, 900,100,10);
console.log(heroPerson.salary)
normalPerson.chargeBill.call(zeroPerson, 2000, 200, 20);
console.log(zeroPerson.salary)

// apply
normalPerson.chargeBill.apply(heroPerson, [1000, 200, 20]);
console.log(heroPerson.salary);
normalPerson.chargeBill.apply(zeroPerson, [500, 501, 501]);
console.log(zeroPerson.salary);

Javascript - Scope, Closure

Shuvro_baset — Wed, 05 Jan 2022 19:53:10 +0000

*Scope: *
It’s a very important topic in javascript. It mainly defines where we can use our variables and functions in javascript. When we declare a variable and function and after that we use them. But we did not use them all over the script. There are some restrictions and that is known as scope.

There are two types of scops
Local scope
Global scope

It defines where we can access the variables and functions
Every new functions creates a scope
A variable that is declared in a function and that function can not be used in other functions.

1. Local Scope:
We declare variables in a function called local variables. These variables are local scope. It means we can use these variables only under that function. We did not use any outer function. In that case you will get an error.

*2. Global Scope: *
Global scope means that access is everywhere. We declare variables not in any function that are known as global variables. These variables are global scope. We can use these variables anywhere in the script.

Lexical Scoping:
Every child function can access their parent functions. We declare a function and under that function we declare a variable x and another function y(). So now we can access x in the y() function though we did not declare x under the y(). So here child y() can access the parent variable this is called Lexical Scoping.

*Closure: *
Closure just like Lexical Scoping. We did not need to do anything for closure. It’s a default behavior of javascript. When we write a function inside a function then there is a parent child relationship occurring. If we return a parent function we can also access a variable from the parent function into the child function. This is called closure.

The CSS Position Property

Shuvro_baset — Tue, 04 Jan 2022 19:20:57 +0000

In css the most confusing part is position property. But we should have clear concept about these. Now I will try to clear these concepts below.

The types of positioning in CSS are static, sticky, fixed, relative, absolute
Static: Static positioning is the default for every HTML element. In fact, there’s not much that you can do to change it. It won’t be affected by certain properties that can make an impact on other CSS position types. No matter what value you associate with top, right, bottom, and left properties, they will not change, and neither will the z-index property.

Sticky: It's not relative or not a fix position. It's depends on user scrolled on the web page. it behaves like a relative value element until the viewport meets a specified position — then it gets "fixed" in a spot.
Fixed: If we use fix position of any div it will not change. It will be set in that position where we set if the webpage scrolled but that will not change the position.
Relative: Normally it set into a normal position. But we can change the position according to the body. And we can also use relative position when we want to change another property position according to this div. More will discuss in the absolute position part.
Absolute: Absolute position depends on others elements. It changes by respect to it's parent element. If there is no parent element then it will consider the body as it's parent and change the position according to parent.