DEV Community: S. M. Faizul Islam Fair

🔍 MutationObserver: Sherlock Holmes of the Web

S. M. Faizul Islam Fair — Tue, 06 May 2025 09:10:54 +0000

🤔 Suppose you have an interactive website where elements are constantly changing, text updates and new content sneaks in. You need a detective to watch all of this. Use MutationObserver, JavaScript’s Sherlock Holmes, who never misses a detail. Once something changes, the detective detects the change and decides what action to take. 🚀

💡 Example: Sherlock Holmes Investigates Price Updates 💰

Let’s say you have a shopping cart on your website, and the price of the cart updates whenever an item is added or removed. You need Sherlock Holmes (MutationObserver) to catch these updates and notify you.

// Select the node that will be observed for mutations
const cartPrice = document.getElementById("cart-price");

// Options for the observer (which mutations to observe)
const config = { childList: true, subtree: true };

// Callback function to execute when mutations are observed
const callback = (mutationList, observer) => {
  for (const mutation of mutationList) {
    if (mutation.type === "childList") {
        console.log("🕵️ Sherlock noticed an item added or removed from the cart: Price updated!");
    } 
    else if (mutation.type === "attributes") {
        console.log(`The ${mutation.attributeName} attribute was modified!`);
    }
  }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(cartPrice, config);

🧐 What’s Happening Here?

Setup: The target node, the cart price, is being observed.
Detecting Changes: If an item is added or removed from the cart, Sherlock reports it.
Action: Sherlock detects and logs the changes, notifying you of any price updates.

⚙️ Use MutationObserver when you want to:

Track dynamic changes to your webpage.
Detect the addition or removal of DOM elements.
Listen for changes in attributes or content.
Dynamically update UI components in response to changes in other parts of the DOM

🎩 Wrapping It Up

Just like Sherlock Holmes always finds the hidden clues, MutationObserver keeps track of any sneaky changes on your webpage. Whether it’s an added element, a modified attribute, or some other mysterious shift, MutationObserver will catch it and report it back to you! 🥳

Placeholder Maintainer

S. M. Faizul Islam Fair — Tue, 31 Oct 2023 09:10:27 +0000

Intro

Project

Highs and Lows

Growth

Placeholder Contributor

S. M. Faizul Islam Fair — Tue, 31 Oct 2023 09:10:13 +0000

Intro

Highs and Lows

Growth

Recalling NPM Commands to Your Heart's Content

S. M. Faizul Islam Fair — Fri, 02 Dec 2022 06:30:40 +0000

Who doesn't love a decent package for development purposes? These packages come of so many usual and unusual variations just to match with your desired requirements. And to keep you running them we got just what you need! Enjoy the show fellow devs:

NPM Commands

npm version checking

npm -v

To find out usages of npm

npm help

To find out ways of installing individual npm files

npm install -h

To create package.json file

npm init

To create package.json file without typing out anything else

npm init --yes

or,

npm init -y

To set package.json defaults

npm config set init-author-name "name"

or,

npm set init-license "name"

To install a specific package

npm install "package_name"

or,

npm i "package_name"

To install a specific package just for development and not for production

npm install "package_name" --save-dev

or,

npm i "package_name" -D

To uninstall a package

npm uninstall "name"

To install a package globally

npm install "package_name" -g

To uninstall a package globally

npm uninstall "package_name" -g

To list down installed packages

npm list

To install a specific version of package

npm install "package_name@version"

For Example - 3.4.1, here 3 is major version, 4 is minor version and 1 is patch version number

To update a specific package

npm install "package_name@latest"

To remove any packages not listed in package.json

npm prune

Easy-Breezy Clarifications of Git Commands

S. M. Faizul Islam Fair — Thu, 01 Dec 2022 17:44:58 +0000

Yes, yes, that's right guys! This is it, this is the perfect place to get a grasp on some tight git commands. Pretty explanations in just 1 or 2 sentences. So, let's get started.....

Git Commands

To setup username globally

git config --global user.name "username"

To setup email globally

git config --global user.email "email"

To change username globally

git config --global user.name "username"

To change email globally

git config --global user.email "email"

To check if the setup is complete

git config --list

To exit the list

press 'q'(just q)

To see the username

git config user.name

To see the email

git config user.email

To delete branch locally

git branch -D branch_name

To delete branch remotely

git push origin --delete branch_name

To download latest changes from a remote repository to local machine,

git fetch

To remove a specific staged file (only added/staged, not committed) or unstage

git rm --cached file_name(with extension)

or,

git reset file_name(with extension)

To remove all unstaged changes and move head to specific point

git reset commit_id

To remove all staged and unstaged changes and move head to specific point

git reset --hard commit_id

To remove all staged files (only added/staged, not committed) or unstage

git reset HEAD

To remove all staged changes (even from files) and staged files(only added/staged, not committed) or unstage

git reset --hard HEAD

To exit from git log press 'q' (just q)

To view all commits with ids in a clean way

git log --pretty=oneline

To view all commits with ids in a clean way (shorter version)

git log --oneline

To display changes between a specific commit and current head

git diff commit_id

To abort merge after getting conflict message

git merge --abort

To not lose changes by not committing yet and moving to another branch to work on something

git stash <br>

or,

git stash -u

and then to apply changes after coming back later

git stash apply index_number(0)

To save stash with a custom message

git stash push -m "message_name"

To change name of most recent commit that hasn't been pushed to remote repo yet

git commit --amend -m "new commit message"

To change name of most recent commit that has been pushed to remote repo

git commit --amend -m "new commit message"

Plus

git push --force

To forcefully revert back to the state of the latest commit, discarding any local changes and disregarding any conflicts or warnings

git checkout HEAD~ --force

To move HEAD to a particular commit, push to repo and pull to master branch

git checkout commit_id
git add .
git commit -m "commit message"
git push origin HEAD:master --force

Plus

git checkout master
git pull

To bring in changes from a specific commit

To bring in changes from one commit and commit directly in my branch

git cherry-pick commit_id

or,

To bring in changes from more than one commit and commit directly in my branch

git cherry-pick commit_id_one commit_id_two

To bring in changes from one commit and without committing directly in my branch

git cherry-pick commit_id -n

then commit,

git commit -m "commit_name"

To undo changes introduced in a previous commit and commit

git revert commit_id

Plus

:q (to exit)

To replay all commits on our current branch on top of specified branch

git rebase branch_name

To edit commit history before rebasing

git rebase -i branch_name