DEV Community: Habibullah Bahar Piash

How to add custom scrollbar in CSS?

Habibullah Bahar Piash — Mon, 21 Feb 2022 16:57:28 +0000

I have used custom scroll bar on my web applications. I learned a few things when I was trying to use a custom scroll bar using CSS. Here, I will share those things with you.
Let’s start designing the scroll bar…

For Chrome/Safari and other modern browsers:

1. ::-webkit-scrollbar , this pseudo-element is like a container of a scroll bar which is covered by other elements:

::-webkit-scrollbar {
   width: 9px;
}

2. ::-webkit-scrollbar-button , this pseudo-element are used for controlling the directional buttons of the scroll bar:

::-webkit-scrollbar-button {
    width: 9px;
    height: 5px;
    ...
}

3. ::-webkit-scrollbar-track , we can style the empty space of a scroll bar using this pseudo-element:

::-webkit-scrollbar-track {
    background: #ddd;
    ...
}

4. ::-webkit-scrollbar-thumb , by using this pseudo-element we can style the thumb of the scroll bar:

::-webkit-scrollbar-thumb {
    background: #f1f1f1;
    width: 8px;
    ...
}

For Firefox:

In firebox we can style scroll bar using CSS property scrollbar-color and scrollbar-width:

:root {
    overflow-y: scroll;
    scrollbar-color: #3182fc #ddd; // scroll-thumb  and scroll-track
    scrollbar-width: thin; // thin, auto or custom width
}

For learning more you can read:

My Portfolio Website: https://habibullahftl.web.app/

Few things about ‘Fat Arrow Function’ and Regular Function in JavaScript

Habibullah Bahar Piash — Mon, 21 Feb 2022 16:52:46 +0000

Arrow Function also called as “fat arrow function”, is the way of writing a function by reducing code.

Regular function:

const getSum = function(a, b){
    return a + b;
}

Arrow function:

const getSum = (a, b) => a + b;

In the above two examples, we can see ‘Arrow Function’ allows us to use the fat arrow operator(=>) to define a function. Also, we do not need to use curly braces if there is only one line code inside the function & it will return the value.
Also, no need to use the ‘return’ keyword to return value. If we write the ‘return’ keyword in one line arrow function, it will show an error.

N.B.: If we want to write multiple line code in an arrow function then we have to use curly braces and inside have to write the ‘return’ keyword to return a value.

In one line:
const greeting = () => "Hello, there!";
In multi-line:

const greeting = (name,gender) => {
  let msg;
  if(gender === "male"){
     msg = "Hello, sir!";
  }else if(gender === "female"){
     msg = "Hello, madam!";
  }
  return msg;
}

Omitting parentheses:

We can just omit parentheses if there is only one parameter in the arrow function. But, it is not applicable if there is 2 parameter.

For one parameter in arrow function:

const greeting = name =>Hello, ${name}!;

Or, can write
const greeting = (name) =>Hello, ${name}!;

For two or more parameters:
const greeting = (fname,lname) =>Hello, ${fname} ${lname}!;

‘this’ keyword in regular function & arrow function:

‘this’ keyword defines the outer object. But, the difference between regular function and arrow function.

In the regular function, see the example first:

businessStudies = {
    name: "Business Studies",
    subjects: ["Accounting","Finance","Marketing"],
    printMessage: function(){
        this.subjects.forEach(function(subName){
        console.log(`${subName} is a subject of ${this.name}`);
        })
    }
}

In this example, printMessage method is inside businessStudies object. So, ‘this’ keyword of printMessage method will define the whole businessStudies object. Because printMessage method is a custom method of businessStudies.
But, the ‘this’ keyword inside the callback function of forEach loop will not be defined by the businessStudies object. Because it is not a custom method inside our object. It is a built-in method. So, the ‘this’ keyword inside the regular callback function of the forEach loop will define the whole document(window or global).

In the arrow function, see the example:

businessStudies = {
    name: "Business Studies",
    subjects: ["Accounting","Finance","Marketing"],
    printMessage: function(){
        this.subjects.forEach((subName) => console.log(`${subName} is a subject of ${this.name} student`))
    }
}

Above example, ‘this’ keyword of inside arrow callback function of forEach loop will define the businessStudies object. Because the arrow function deals with the direct outer object. It doesn’t matter that we are using a build-in method or a custom method.

My Portfolio Website: https://habibullahftl.web.app/

10 Important JavaScript Interview Questions

Habibullah Bahar Piash — Mon, 21 Feb 2022 16:37:14 +0000

I am writing here about 10 important JavaScript interview questions.

01. Do you know About truthy and falsy value?

As a beginner, it will confuse you which things are truthy and which things are falsy.

Truthy: All defined values are truthy value(except forfalse, 0, -0, 0n, "", null, undefined, and NaN )

if (true){ ... }
if ({}){ ... }
if ([]){ ... }
if (42){ ... }
if ("0"){ ... }
if ("false"){ ... }
if (new Date()){ ... }
if (-42){ ... }
if (12n){ ... }
if (3.14){ ... }
if (-3.14){ ... }
if (Infinity){ ... }
if (-Infinity){ ... }

Here will be executed the ‘if’ block.

Falsy Values: A falsy value is a value that is considered false when encountered in a Boolean context.

if (false){ ... } else { ... }
if (null){ ... } else { ... }
if (undefined){ ... } else { ... }
if (0){ ... } else { ... }
if (-0){ ... } else { ... }
if (0n){ ... } else { ... }
if (NaN){ ... } else { ... }
if (""){ ... } else { ... }

Here will be executed the ‘else’ block.

02. Tell me the difference between double equal (==) vs triple equal (===).

Double equal check only value not type. But, triple equal always check value as well as check type.

var first = 100;
var second = '100';
if (first == second) { 
    console.log("first value & second value is eqqual")
} esle { 
    console.log("first value & second value is not eqqual")
}
// Output will be "first value & second value is eqqual"
if (first === second) { 
    console.log("first value & second value is eqqual")
} esle { 
    console.log("first value & second value is not eqqual")
}
// Output will be "first value & second value is not eqqual"

03. Could you tell me the differences between null and undefined?

Here is few differences between null and undefined.

When we create a variable without assigning any value, it will return ‘undefined’.

const name; // no value assigned to the variable
console.log(name);

If we write a function without returning anything, it will return ‘undefined’. if we write return but we did not mention what we have returned the result would be ‘undefined’.

if(5 > 2) { 
    console.log("Hello, world!");
}
// Output will be ‘undefined’
if(5 > 2) { 
    console.log("Hello, world!");
    return
}
// Output will be ‘undefined’

The value null represents the intentional absence of any object value.It is one of JavaScript’s primitive values and is treated as falsy for boolean operations. null means the variable has no value and that is known by the programmer and also value is assigned as null by the programmer.

04. Tell me something about ‘let’ vs ‘const’ vs ‘var’.

We use these keywords to create variables in JavaScript.
‘var’ : We declear variables by using ‘var’ keyword. It can be re-assign & it is a global scope variable.

var name = "Habibullah Bahar";
console.log(name); // Output: "Habibullah Bahar"
name = "Piash";
console.log(name); // Output:"Piash"

‘let’ : It is same as ‘var’. But, it is not global scope variable. It is a block scope variable. It’s value can be re-assgin. It’s a feature of ES6.

let profession = "Web Designer";
console.log(profession); // Output: "Web Designer"
profession = "Web Developer";
console.log(profession); // Output:"Web Developer"

‘const’ : We can also declear variables using ‘const’ keyword. But, there is restriction. It is not re-assignable & it’s scope is block scope.

const age = 20;
console.log(age); // Output: 20;

05. ‘this’ keyword.

‘this’ keyword refers to an object, that object which is executing the current bit of javascript code. In other words, every javascript function while executing has a reference to its current execution context, called ‘this’. Execution context means here is how the function is called.

By default, this refers to the global object
In an object method, this refers to the object the method was called on
In a function, when JavaScript is not in strict mode, this refers to the global object
In a function, when in strict mode, this will be undefined
In an event handler, this is bound to the HTML element on which the listener is placed.

06. What is global scope in JavaScript?

Scope determines the accessibility (visibility) of variables.
When we declear a variable outside functions, it is a global scope variable. We can access the variable in any function or globally.

var name = "Piash";
function person(){
    return "My name is " + name;
}
person(); // Output: "My name is Piash"
console.log(name + " is a full stack web developer");
// Output: "Piash is a full stack web developer"

07. What is local scope in JavaScript?

If we declared a variable inside of a function then it’s called local variable. We can access the variable inside the function. Outside the function, we can’t access the local variables.

function person(){
    var name = "Piash";
    return "My name is " + name;
}
person(); // Output: "My name is Piash";
console.log(name + " is a full stack web developer");
// Output: "Undefined is a full stack web developer"

08. What is closure in JavaScript?

The closure is by default behavior in Javascript. If we declare a function parentFunc() and inside this function we declare another function childFunc(). When we return the parentFunc() and then from childFunc() we can also access the parent function’s variable and object also. It’s happening for Closure in Javascript.

function parentFunction(){
    var a = 8;
    function childFunction(){
        var b = 2;
        console.log(a + b); // Output: 10
   }
}

09.How JavaScript code executed?

JavaScript program is run an execution context is created. In this phase, JavaScript allocates the memory to all the variables and functions present in the program. The variables are stored with the value undefined and the function is stored with all the code present in that particular function.

10. Could you tell me about Private variable in Javascript?

Private variable in javascript is an OOP(Object-oriented programming concepts). Which means which variable we declare as a private variable it can’t be accessible in other classes. It is only accessible in its parent class.

My Portfolio Website: https://habibullahftl.web.app/

What is ReactJS? Simple introduction with ReactJS

Habibullah Bahar Piash — Mon, 21 Feb 2022 16:23:54 +0000

What is React JS?

React is basically an open-source, javascript library for building user interfaces especially for Single Page Applications.

React is a library, not a framework

React is not exactly a “framework”. It is not a complete solution and you will often need to use more libraries with React to form any solution. React does not assume anything about the other parts in any solution.

React uses JSX

JSX stands for JavaScript XML. React uses JSX instead of using regular JavaScript. JSX allows us to write HTML in React.
You are not required to use JSX, but JSX makes it easier to write React applications.

Virtual DOM

React creates an in-memory data structure cache(a reserved storage location that collects temporary data to help websites, browsers, and apps load faster) which computes the changes made and then updates the browser. This allows a special feature that enables the programmer to code as if the whole page is rendered on each change whereas React library only renders components that actually change.

React is all about components

In React, we describe UIs using components that are reusable, composable, and stateful.
We define small components and then put them together to form bigger ones. All components small or big are reusable, even across different projects.
You can think of components as simple functions (in any programming language). We call functions with some input and they give us some output. We can reuse functions as needed and compose bigger functions from smaller ones.

My Portfolio Website: https://habibullahftl.web.app/

Some important things should know a JavaScript developer

Habibullah Bahar Piash — Mon, 21 Feb 2022 14:51:12 +0000

As I’m a JavaScript learner. I realize that these things will help you understand JavaScript very well. Also, these things will help you to play with JS codes comfortably.

Error Handling(try….catch)

When we are writing codes in JavaScript, sometimes our scripts occur error because of our mistake or unexpected user input, or something else.

There is a nice way to handling errors in JavaScript, this is ‘try…catch’. It allows us to catch errors so that the script can do something instead of dying.

Syntex of try…catch:

try { 
     // code… 
} catch (err) { 
     // error handling 
}

Coding Style

We should write and make our code as clean and easy to read as much as possible. This is the art of programming. Let’s talk about some suggested rules of coding style.

I. Curly Braces
Bad Practice:

if (5 < 7) { alert(“Hello, Piash”); }

Good Practice:

if (5 < 7) { 
    alert(“Hello, Piash”); 
}

II. Indents
There are two types of indents:

Horizontal indents: 2 or 4 spaces.
Vertical indents: empty lines for splitting code into logical blocks

Example:

function pow(x, n) { 
    let result = 1; 
    // ← 
    for (let i = 0; i < n; i++) { 
        result *= x; 
    } 
    // ← 
    return result; 
}

III. Semicolons
A semicolon should be present after each statement, even if it could possibly be skipped.
Some programming languages are required to give semicolons after a statement. But, there is no restriction in JavaScript. But, It is good practice to use semicolons after a statement.
You should learn more coding styles. So, you can visit https://javascript.info/coding-style for learning more.

Comment in code
Comment can make your code more readable to other developers.
There is two way of commenting in JavaScript. One is a single-line comment.

// Your comment

You also can write a multi-line comment:

/* 
  your comment 
  write someting
*/

You can learn more of the good and bad practices of writing comments in JavaScript code from https://javascript.info/comments .

Features of ES6

1. Template Literals in ES6
Template Literals is a way to create dynamic strings. You can use variables inside template literals.

var name = "Habibullah";
var age = 20;
var details = `My name is ${name} and my age is ${age}.`; 
// It will give you the output 
// My name is Habibullah and my age is 20.

2. Destructuring
Destructuring is a way to make code clean. Destructuring assignment helps to uncrate the object and arrays into a collection of variables that are easier to handle and work with. It also can be used in functions to reduce the complexity of the functions. Repetition of code is very much decreased by this feature.

var person =  {   
   name : "piash",
   age : 20,
   profession: "Web Developer"
} 
let {name,age,profession} = person;
console.log(name); // "Piash"
console.log(age); // 20
console.log(profession); // "Web Developer"

3. Classes in ES6
Previously there was no keyword class to create a class in ES5 for that it was a complex procedure to construct a class and use it. But in ES6 it is easier to work with the class. It uses prototypes, not the function factory method.

class baseModel {  
    constructor(options = {}, data = []) { // class constructor 
    this.name = 'Base'
    this.url = 'http://azat.co/api'
    this.data = data 
    this.options = options  
    } 
    getName() { // class method 
       console.log(`Class name: ${this.name}`)    
    }
}

My Portfolio Website: https://habibullahftl.web.app/

10 Simple But Important Things Of JavaScript

Habibullah Bahar Piash — Mon, 21 Feb 2022 14:27:04 +0000

If you are a beginner, you should learn these 10 things which is very much. Let's start discussing.

1. Variables

JavaScript variables are containers for storing data values. There is 3 keyword to declaring variables in JS.

We can create variables using the ‘let’ and ‘const’ keywords. There are some restrictions. Because they are block scope variable.

let name = “Habibullah Bahar”;
const name = “Piash”;

Another way to create variable using the ‘var’ keyword. There is no such restriction.

var age = 20;

‘var’ and ‘let’ are reassignable. But, ‘const’ is not reassignable.

2. Operators

There are four types of operators in JavaScript.

Arithmetic Operators: +, -, *, /, %, ++, —
Assignment operators: =, +=, -=, *=, /=, %=
Comparison Operators: ==, ===, !=, !== >, <, >=, <=
Logical Operators: &&, ||, !

3. Data Types

Primitive Data Types: The Primitive Data types in JavaScript include Number, String, Boolean, Undefined, Null, and Symbol. JavaScript primitive data types are data types that refer to a single value.

E.g. var a =5;

Here the variable ‘a’ is an integer data type and has a single integer value. The variable ‘a’ refers to a single value in memory. If we want to change the value of a, we would have to assign a new value to a. Primitive data types are not mutable.

Here are Primitive Data Types:

Number
BigInt
String
Boolean
Symbol (new in ES2015)
null
Undefined

Non-Primitive Data Types: The Non-Primitive data type has only one member, Object. Function, Array, Date, RegExp, etc. are objects.

Here are Non-Primitive Data Types:

Object
Function
Array
Date
RegExp

4. Function

A JavaScript function is a block of code designed to perform a particular task and the code will be executed when it called. Function is re-useable. For calling a function, need to use parentheses(). Ex- function_name().

For creating a function, you need to use the ‘function’ keyword before function name.

function_name(){
....
}

You can also create arrow function:

const function_name = () => {
....
}

5. Events

Events are things that happen to HTML elements. JavaScripts can interact with those events when we use JavaScript in HTML.

Here are some common events:

onclick
onchange
onload
onkeyup

6. DOM (Document Object Model)

Javascript can add, remove & change all the elements, attributes & CSS styling. JS can create & react to all HTML events. (click,hover,keyup,keydown etc.) In the DOM, all HTML elements are defined as objects.

07. Error Handling

You have to know error handling when you write JS codes. In the new version of JavaScript, there are few ways to handle errors. Like, console.log, console. error, try…catch, etc.

08. Debugging

It is also important for a JavaScript developer. You have to learn how to identify & fix errors and bugs in your application. Most web browsers notify developer about errors but different browser shows errors in different ways.

09. Conditions

In JavaScript, there are few conditional statements. Use if to specify a block of code to be executed, if a specified condition is true.

if(Condition){….}: Use if to specify a block of code to be executed, if a specified condition is true.

while(condition){….}: If the condition is true then the code block will be executed and it will be executed until the condition is not false.

There are more conditional statements to write codes conditionally.

10. Form Validation

We can validate forms using JavaScript before sending data to the server. We can set a mandatory field or optional in JS.

Also, we can check that the data is in the right format, structure, or not.

We will discuss more in the other articles.

My Portfolio Website: https://habibullahftl.web.app/