DEV Community: Farhana Binte Hasan

Auto Refresh Windows Using tree.Bat

Farhana Binte Hasan — Sat, 05 Apr 2025 17:24:32 +0000

How to make a tree.Bat file for auto refresh Windows

1st open notepad
Copy this command-

echo off
cd/
tree
c:
tree
d:
tree
e:
tree
f:
tree
g:
tree
h:

Save the file in Desktop using this name "tree.Bat" and save the file.

Customizing Theme in VS Code || VS Code Best Dark Theme🦄💫🦄

Farhana Binte Hasan — Sat, 20 May 2023 19:47:40 +0000

Most of the time we install many extensions which we don't need all of the time. And So many extensions at that time, we don't notice our software running much less smoothly. So we should minimize the extension as much as possible😓.

All those who are regular coders use some comfort-type theme extension for eye comfort. But if you want, you can easily change the theme of your VS Code according to your mind without any extension😉.

So let's see👀, how easily you can change the VS Code theme to your liking🕵️‍♀️.

Step one ➣ Open VS Code👍.
Step two ➣ go to the setting and select Themes and Color Theme.

Step three ➣ Select Monokoi Theme.

Step four ➣ Now go to the settings and select the User and also select Workbench or Appearance and also click Edit in settings.json
Step five ➣ When clicking Edit in settings.json you will get the format like this picture ➜↓

Step six ➣ And now enter this format also you can change whatever you want.

{
    "terminal.integrated.fontSize": 18,
    "editor.fontSize": 18,
    "editor.wordWrap": "on",
    "workbench.iconTheme": "material-icon-theme",
    "workbench.colorTheme": "Monokai",
    "workbench.colorCustomizations": {

        "[Monokai]": {
            "editor.background": "#000",
            "editorGutter.background": "#111",
            "sideBar.background": "#000",
            "activityBar.background": "#111",
            "statusBar.background": "#111",
            "editor.selectionBackground": "#222",
            "editor.lineHighlightBackground": "#333",
            "tab.activeBackground": "#111",
            "tab.inactiveBackground": "#222",
            "terminal.foreground": "#ff0080",
            "terminalCursor.foreground": "#51ff00"
        }
    },
}

【Here I also added a terminal color format if need then use otherwise delete it.】

Now Enjoy 🥳🎉......

Introducing 🔥ChatGPT🔥 Browser Extension for Chrome🚀

Farhana Binte Hasan — Thu, 23 Feb 2023 15:18:57 +0000

🔹 Step one ➔ open chrome browser.
🔸 step two ➔ press customize and control google chrome.

🔹 step three ➔ select more tools and also select Extensions.

🔸 step four ➔ here you can see all extensions which you using.

🔹 step five ➔ open chrome web store.

🔸 last one is ➔ search extension name👉🏾👉🏾 ChatGPT for Search Engines and another ChatGPT for Google.

ChatGPT Extension's direct link ⟹ ChatGPT for Search Engines

Or 2nd extension link ⟹ ChatGPT for Google

❄️🌞❄️Both are amazing❄️🌞❄️

Enable Emmet support for JSX in VS Code-✨React✨

Farhana Binte Hasan — Tue, 07 Feb 2023 14:51:32 +0000

First, open any source folder on VS Code and go to Settings.

Select Extensions.

Search Emmet section.

Press the Add Item.

fill up the input.

Press the ok button.

Emmet should be enabled in js files now! 🎉🎉🎉🎉

console.log() Shortcut in VS Code🚀🚀

Farhana Binte Hasan — Thu, 26 Jan 2023 13:12:13 +0000

👉 First of all

Open VS Code
Press ctrl + shift + p
Choose Snippets: Configure Snippets
Then choose your programming language
Then apply this code 👇✌️✌️

{
    "Console.log": {
        "prefix": "clg",
        "body": "console.log('$1');",
        "description": "Console Log"
    }
}

JavaScript map vs. forEach

Farhana Binte Hasan — Fri, 13 Jan 2023 15:42:05 +0000

.forEach()

What is it?

This method is the most similar to the forloop. Example -

// forloop
const numbers = [2,6,8,10,12];

for (let i = 0; i < numbers.length; i++) {
    console.log(numbers[i]);
}

// forEach
const numbers = [2,6,8,10,12];

numbers.forEach(number => {
    console.log(number);
});

forEach() is simply executed "for each" element of the array.

.map()

What is it?

map is almost similar to the forEach method. This method loops through each element.

// map
const numbers = [2,6,8,10,12];

numbers.map(number =>console.log(number))

// map
const numbers = [2,6,8,10,12];

numbers.map(number =>console.log(number * 2))

map vs. forEach:

forEach:

It calls a function for each element of an array but doesn't return anything. That means no result fount means undefined

const numbers = [2,6,8,10,12];

let result = numbers.forEach((number) =>{
    return number*10
})
console.log(result); //undefined

map:

This method returns a new array by applying the callback function on each element of an array.

// map
const numbers = [2,6,8,10,12];

let result = numbers.map((number) =>{
    return number*10
})
console.log(result); //[20,60,80,100,120]

Media Query Breakpoint

Farhana Binte Hasan — Sun, 01 Jan 2023 12:05:01 +0000

Share The most important media query breakpoint number which makes the website responsive. Here are the four breakpoints to make responsive -

576px
768px
992px
1200px

add a spinner in API js

Farhana Binte Hasan — Mon, 26 Dec 2022 17:30:12 +0000

Html code from bootstrap

<!-- added spinners -->
    <div id="spinners" class="spinner-grow text-secondary" style="margin:10rem 40rem;" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>

javascript code

const spinner = document.getElementById("spinners");
const loadData = () =>{
  spinner.removeAttribute('hidden');
    fetch('https://www.thesportsdb.com/api/v1/json/2/all_sports.php')
    .then((res) => res.json())
    .then((data) =>{
      spinner.setAttribute('hidden', '');
      displayData(data.sports)
    });
}
loadData()

Explanation of API

Farhana Binte Hasan — Wed, 21 Dec 2022 20:10:34 +0000

API

API's full meaning is Application Programming Interface.

API is one kind of messenger. That tells the system what the user wants to do and returns a response from the system to the user. It just looks like a waiter.

Nowadays, we regularly use apps like Uber, Pathao, and FoodPanda and in all these apps we see maps. When we place an order inside the Foodpanda app, we know where our delivery man is. But FoodPanda does not have any satellite. So how do they give maps in their app?

Foodpanda app brings maps from the Google Maps system. Which we all have on our phones. But foodpanda does not directly access Google Maps.

A layer of security has been created for this layer called Google Maps API. Hence if foodpanda needs data access then it requests directly API, not Google Maps.

So now simply say, API is a messenger which is transfer data from one to another system.

Hero Site Parallax Scroll

Farhana Binte Hasan — Wed, 14 Dec 2022 16:39:23 +0000

Zoom out parallax background:

.bg-image{
    height: 100vh;
    width: 100%;
    background-image: url(./bg1.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 160%;
    background-attachment:fixed;
}

const bgImg = document.getElementById('bg-image');

window.addEventListener('scroll',()=>{
    updateImage();
})

function updateImage(){
    bgImg.style.opacity = 1 - window.pageYOffset/900;
    console.log(1 - window.pageYOffset/900);
    bgImg.style.backgroundSize = 160 - window.pageYOffset / 12 + ('%');
}

live site :zoomout-perallax-background-scroll

Fade-type parallax background:

background: url(./bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

const bgImg = document.getElementById('bg-image');

window.addEventListener('scroll',()=>{
    updateImage();
})

function updateImage(){
    bgImg.style.opacity = 1 - +window.pageYOffset/550+'';
    //  console.log(1 - +window.pageYOffset/550+'');
    bgImg.style.top = +window.pageYOffset + 'px';
    bgImg.style.backgroundPositionY = -+window.pageYOffset/2 + 'px';
}

live site :Fade-type-parallax-background-scroll

Difference between box-shadow vs drop-shadow

Farhana Binte Hasan — Wed, 07 Dec 2022 13:14:47 +0000

Web Developer Template Resources

Farhana Binte Hasan — Sat, 26 Nov 2022 16:53:52 +0000

A must-explore template resource for web developers.