DEV Community: Abdullah al Mubin

Dictionary C#. Easier than we think.

Abdullah al Mubin — Sat, 05 Aug 2023 14:25:49 +0000

What is Dictionary:

The Dictionary is a generic collection of key-value pair of data. It contains a unique key, we can easily get our specific data using that unique key. The dictionary is the most useful and popular data structure whenever we need to find value based on key..

Syntax:

Dictionary<TKey, TValue> dictionaryObj = new Dictionary<TKey, TValue>();

in the above line, dictionaryObj is name of the dictionary, Tkey is The type of key we pass in the dictionaryObj and TValue is The type of value we pass in the dictionaryObj.

TKey and TValue can be any data type.

Characteristics

Comes under System.Collections.Generic namespace.
Dictionary stores key-value pairs.
Implements IDictionary interface.
Keys must be unique and cannot be null.
Values can be null or duplicate.
Values can be accessed by passing associated key in the indexer e.g. myDictionary[key]
Elements are stored as KeyValuePair objects.
It is faster than a Hashtable because there is no boxing and unboxing.

Create a Dictionary

We have already seen the syntax, let's try to create a dictionary,

Dictionary<int, string> myDictionary = new Dictionary<int, string>();

In the above code, key will be int and value will be string.

let's add some value on it, here, 1 is key and value is myName

myDictionary.Add(1, "myName");

put below code in our compiler and run the code.

Dictionary<int, string> myDictionary = new Dictionary<int, string>();
myDictionary.Add(1, "mubin");

foreach (var item in myDictionary)
{
Console.WriteLine(item.Key + ": and value is: " + item.Value);
}

Then the output will be,
1: and value is: mubin

let's put an object in a dictionary,

Declare a class UserDetails

class UserDetails
    {
        public string Name { get; set; }
        public int Age { get; set; }
        public string Address { get; set; }
    }

Now declare a dictionary using that class

Dictionary<int, UserDetails> userDetails = new Dictionary<int, UserDetails>();
userDetails.Add(1, new UserDetails { Name = "Galib", Age = 123, Address = "Naogaon" });

foreach (var item in userDetails)
{
Console.WriteLine("Key is: "+item.Key + " Name " + item.Value.Name + " Age: " + item.Value.Age + " Address: " + item.Value.Address);
}

if we run above code then the result will be

Get Data from Dictionary:

To get data from dictionary we can use the square bracket notation to access an item data in the dictionary.

Dictionary<int, string> myDictionary = new Dictionary<int, string>();
myDictionary.Add(1, "mubin");

string userName = myDictionary[1]; 
// Here 1 is a key, using 1 we can get value

Update Data in a Dictionary

To update data, We can use square bracket and notation then assign new value.

Dictionary<int, string> myDictionary = new Dictionary<int, string>();
myDictionary.Add(1, "mubin");
myDictionary[1] = "Update Username";

Delete Data in a Dictionary

We can use remove method to delete data in a dictionary.

myDictionary.Remove(1);

Properties of Dictionary:

Count
Count used to get the total length/number of key-value pairs in the Dictionary.

int count = myDictionary.Count;

Values
Values used to get a collection of all the values in the Dictionary.

var values = myDictionary.Values;

Keys
Get a collection of all the keys in the Dictionary.

var keys = myDictionary.Keys;

C# Dictionary Methods

Add()
Add(TKey key, TValue value): Add a new key-value pair item to the Dictionary.

Dictionary<string, int> bookPrice = new Dictionary<string, int>();
bookPrice.Add("Physics", 2.20);
bookPrice.Add("Chemistry", 1.80);

ContainsKey()
ContainsKey(TKey key): Returns a boolean indicating whether the Dictionary contains the specified key.

bool containsPhysics = bookPrice.ContainsKey("Physics"); // returns  true;
bool containsHistory = bookPrice.ContainsKey("History"); // returns false;

Note: If the key is null, an ArgumentNullException will be thrown, and if the requested key is not in the dictionary, a KeyNotFoundException will be thrown.

ContainsValue()
Returns a boolean indicating whether the Dictionary contains the specified value.

bool value = bookPrice.ContainsValue(1.80); // returns true;

Remove()
Remove() method deletes the value with the specified key from the Dictionary.
If the key is found and the item is successfully removed, it returns true; otherwise false.

// Use the Remove method to remove a key / value pair.
Console.WriteLine("\nRemove(\"107\")\n");
bookPrice.Remove("Physics");

// Check if item is removed from the dictionary object.
if (!bookPrice.ContainsKey("Physics"))
{
  Console.WriteLine("Key \"107\" is not found.");
}

TryGetValue()
This method is used to get the value for a specific key, which allows you to handle the case where the key does not exist. It will not throw an error if the key doesn’t exist in the collection.

int physicsPrice;
if (bookPrice.TryGetValue("Physics", out physicsPrice))
{
    Console.WriteLine($"The price of a Physics book is {physicsPrice}.");
}
else
{
    Console.WriteLine("The Physics book is not available.");
}

Clear()
Removes all key-value pairs from the Dictionary.

bookPrice.Clear();

That's all for today.. seee ya.

react useContext. Easier than we think.

Abdullah al Mubin — Sun, 23 Jul 2023 17:48:10 +0000

Here, we will learn about useContext in details with examples. we also learn about When and how we need to use useContext.

I have added github demo click here.

useContext Hook

Sometimes we use props to pass data from parent to child. It's a complex process and it is also inconvenient if we need to pass them through many components. The React Context API provides a way to share data inside the React component tree.

Usage:

Passing data deeply into the tree.
Overriding context for a part of the tree.
Optimizing re-renders when passing objects and functions.
Updating data passed via context.
Specifying a fallback default value.
useContext can pass data to our entire application and also it can use at any part of the application.

Syntax:

const value = useContext(SomeContext)

let's try useContext with simple application. let's change some font sizes and try to understand its data flow.

Final Result

At first, we need to create a context using React.createContext and this context will pass to the hook. I have created a folder called Context and put a file index.js inside the folder.

import { createContext } from "react";

//initial fontSize as 16.
const fontSizeContext = createContext(16);
export default fontSizeContext;

in the above code, we used createContext and set the initial value 16. It assign to fontSizeContext constant and export as a default.

What is createContext
It creates a context object and used to make sure that every component at different levels (inside tree) can use the same context to fetch data.

let's make some changes in app.js file.

import FontSizeContext from "./Context/context";
import { useState } from "react";
import UseContextExample from "./UseContextExample";

const App = () => {
  const [size, setSize] = useState(16);
  return (
    <FontSizeContext.Provider value={size}>
      <div style={{ width: '500px', margin: 'auto' }}>
        <UseContextExample />

        <button onClick={() => setSize(size + 5)}>Increase font size</button>
        <button
          onClick={() =>
            setSize((prevSize) => Math.min(prevSize - 5))
          }
        >
          Decrease font size
        </button>
      </div>
    </FontSizeContext.Provider>
  );
};
export default App;

In the above code, we use Font Size Context.Provider value={size} here, we wrapped our component with FontSize Context.Provider and make our size/value available to every component inside the tree.

we also added two buttons, one to increase the size and the other used to decrease the size. Whenever someone clicks on a button it updates its state and change the value of font size and then it passes to the entire component tree. So any component can easily access the value of font size.

Now, create a folder called UseContextExample inside the directory create a file called index.js and put the below code inside index.js file.

import { useContext } from "react";
import fontSizeContext from "../Context/context";
const UseContextExample = () => {
    const size = useContext(fontSizeContext);
    return <p style={{ fontSize: `${size}px` }}>font size now {size}px</p>;
};
export default UseContextExample;

in the above code, we use
const size = useContext(fontSizeContext); to get the value of font size. This component can easily access the data/value of font size because it stays inside the component tree.

I have added github demo click here.

That's it for today. See yaaa.

react useMemo, useCallback. Easier than we think.

Abdullah al Mubin — Sat, 22 Jul 2023 19:54:27 +0000

As front-end developers, we always try to make our application performance better and better. Sometimes we need to execute large and critical calculation in our system. Those function/calculation take time to complete, so our application will be slow.

Meanwhile, we try to improve performance using the Memoization technique.

In this lesson, we will learn about Memoization technique using useMemo and useCallback.

Memoization:

Memoization or memoisation is an optimization technique used primarily to speed up computer programs by storing the results of expensive function calls to pure functions and returning the cached result when the same inputs occur again.

useMemo Hook

The useMemo hook is designed to memoize expensive computations. Memoization simply means caching. It caches the computation result with respect to the dependency values so that when the same values are passed, useMemo will just spit out the already computed value without recomputing it again. This can significantly improve performance when done correctly.

Syntax:

useMemo hook can be used as follows,

const memoizedResult = useMemo(() => { return criticalComputeFn(parameter1, parameter2); }, [parameter1, parameter2]);

Here, criticalComputeFn represents the calculation function and dependencies represent the dependency array. ([parameter1, parameter2]).

UseCallBack

useCallback does the same thing as useMemo but it returns a memoized callback instead of memoized value.

Syntax:

This hook can be used as follows,

const memoizedResult = useCallback(() => { return criticalComputeFn(parameter1, parameter2); }, [parameter1, parameter2]);

Remember one thing, useMemo and useCallback are both used for same purpose, but useMemo return memoized value but useCallback return memoized callback.

What is callback?
It is a function that is passed as an argument to another function.

Rules:

During the first rendering or initial rendering useMemo and useCallback both invoke criticalComputeFn, then useMemo returns the result/value but useCallback returns the callback.
If dependencies change then useMemo and useCallback both invoke criticalComputeFn, then useMemo return the result/value but useCallback return the callback.
If dependencies don't change, then both don't invoke criticalComputeFn but useMemo return memoize result/value and useCallback return memoize callback.

Simple Example:

import React, { useCallback, useMemo, useEffect } from 'react'

export default function App() {
  const a = 5
  const b = 7

  const memoResult = useMemo(() => a + b, [a, b])

  const callbackResultFn = useCallback(() => a + b, [a, b])

  useEffect(() => {

  }, [])

  const callback = callbackResultFn()

  console.log(callbackResultFn) // Return function
  console.log(callback) // return value
  console.log(memoResult) // return value using useMemo



  return (
    <div>
      <><h2>Test test</h2></>
    </div>
  )
}

in the above code we can see that useMemo and useCallback show the same result/value. useMemo directly return the calculation result/value but useCallback return callback function then we need to process the result to show it.

Careful about:

useMemo/useCallback should be used only when it is necessary to optimize the computation. In other words, when recomputation is expensive.
It is advisable to first write the calculation without memoization and only memoize it if it is causing performance issues.
Unnecessary and irrelevant use of the useMemo/useCallback hook may even compound the performance issues.
Sometimes, too much memoization can also cause performance issues.

RealTime example of useMemo:

import axios from "axios";
import { useEffect, useMemo, useState } from "react";

export default function App() {
  const [employee, setEmployee] = useState({});
  const [employees, setEmployees] = useState([]);
  const [num, setNum] = useState(1);

  const endPoint =
    "https://my-json-server.typicode.com/ifeanyidike/jsondata/employees";

  useEffect(() => {
    const getEmployee = async () => {
      const { data } = await axios.get(`${endPoint}/${num}`);
      setEmployee(data);
    };
    getEmployee();

    return () => {};
  }, [num]);

  useEffect(() => {
    axios.get(endPoint).then(({ data }) => setEmployees(data));
  }, [num]);

  const taxVariablesCompute = useMemo(() => {
    const { income, noOfChildren, noOfDependentRelatives } = employee;

    const reliefAllowance1 = 0.01 * income >= 200000 ? 0.01 * income : 200000;
    const reliefAllowance2 = 0.2 * income;

    const numChildren = +noOfChildren <= 4 ? +noOfChildren : 4;
    const numRelatives =
      +noOfDependentRelatives <= 2 ? +noOfDependentRelatives : 2;

    const childrenRelief = numChildren * 2500;
    const relativesRelief = numRelatives * 2000;
    const pensionRelief = 0.075 * income;

    const reliefs =
      reliefAllowance1 +
      reliefAllowance2 +
      childrenRelief +
      relativesRelief +
      pensionRelief;

    return reliefs;
  }, [employee]);

  const taxCalculation = useMemo(() => {
    const { income } = employee;
    let taxableIncome = income - taxVariablesCompute;
    let PAYE = 0;

    const taxEndPoints = [300000, 300000, 500000, 500000, 1600000, 3200000];

    for (let i = 0; i < taxEndPoints.length; i++) {
      if (i === 0) {
        if (taxableIncome >= 300000) {
          PAYE += 0.07 * taxEndPoints[i];
          taxableIncome -= taxEndPoints[i];
        } else {
          PAYE += 0.07 * taxableIncome;
          break;
        }
      } else if (i === 1) {
        if (taxableIncome >= 300000) {
          PAYE += 0.11 * taxEndPoints[i];
          taxableIncome -= taxEndPoints[i];
        } else {
          PAYE += 0.11 * taxableIncome;
          break;
        }
      } else if (i === 2 && taxableIncome >= 500000) {
        if (taxableIncome >= 500000) {
          PAYE += 0.15 * taxEndPoints[i];
          taxableIncome -= taxEndPoints[i];
        } else {
          PAYE += 0.15 * taxableIncome;
          break;
        }
      } else if (i === 3) {
        if (taxableIncome >= 500000) {
          PAYE += 0.19 * taxEndPoints[i];
          taxableIncome -= taxEndPoints[i];
        } else {
          PAYE += 0.19 * taxableIncome;
          break;
        }
      } else if (i === 4) {
        if (taxableIncome >= 1600000) {
          PAYE += 0.21 * taxEndPoints[i];
          taxableIncome -= taxEndPoints[i];
        } else {
          PAYE += 0.21 * taxableIncome;
          break;
        }
      } else if (i === 5) {
        if (taxableIncome >= 3200000) {
          PAYE += 0.24 * taxEndPoints[i];
          taxableIncome -= taxEndPoints[i];
        } else {
          PAYE += 0.24 * taxableIncome;
          break;
        }
      }
    }

    const netIncome = income - PAYE;
    return { PAYE, netIncome };
  }, [employee, taxVariablesCompute]);

  return (
    <div className="App">
      <div>
        <p></p>
        <p>Name: {`${employee.firstName} ${employee.lastName}`}</p>
        <p>Job: {employee.job}</p>
        <p>Sex: {employee.sex}</p>
        <p>Income: {employee.income}</p>
        <p>No. of children: {employee.noOfChildren}</p>
        <p>No. of dependents: {employee.noOfDependentRelatives}</p>
        <p>PAYE: ₦{taxCalculation.PAYE}</p>
        <p>Income after PAYE: ₦{taxCalculation.netIncome}</p>
      </div>
      <div>
        <button
          disabled={num === 1}
          onClick={() =>
            setNum((prevNum) => (prevNum >= 1 ? prevNum - 1 : prevNum))
          }
        >
          &laquo;
        </button>
        <button
          disabled={num === employees.length}
          onClick={() =>
            setNum((prevNum) =>
              prevNum < employees.length ? prevNum + 1 : prevNum
            )
          }
        >
          &raquo;
        </button>
      </div>
    </div>
  );
}

In the above code, I have tried to calculate tax information. I think it's an expensive calculation. So I do it with useMemo.

That's it for today. See yaa.

React useReducer. Easier than we think.

Abdullah al Mubin — Tue, 18 Jul 2023 10:02:30 +0000

useReducer:

useReducer is one of the most popular react hooks. useReducer hook returns the current stage and a dispatch method. It is similar to the useState hook. If we want to make complex logic then useReducer may be very useful.

If you want to download the full demo project then click here Demo git.

Syntax:

useReducer(<reducer>, <initialState>)
useReducer(<reducer>, <initialState>, <init>)

Here, reducer function contains custom state logic and the initialState can be a sample default state value.

init is a function and it is used whenever we want to create the initial state lazily.

reducer:

A reducer is a function that is able to process user instruction/action. A reducer processes the existing state with user action and returns the new state.

below we will try to make a simple application for better understanding.

Todo Application:

The below image shows the UI of our application.

We can see that it contains a submit button, if we save it then it will show on the list, we can complete and remove that todo item.

We will make our code as simple as we can.

let try to make action type

Here, we will make 3 types of action,

Add Todo
Remove Todo
Complete Todo

I have created a new folder inside the src directory and the folder name is action. inside that folder, I have created an index.js file and put the below code.

// src/action/index.js

export const ADD_TODO = "ADD_TODO";
export const REMOVE_TODO = "REMOVE_TODO";
export const COMPLETE_TODO = "COMPLETE_TODO";

We have created three constants for user action types.

let try to make reducer

We already know that a reducer basically is a function that contain complex logic. We need to pass value and instruction/action then it will change previous state to new state. Just like Redux but we don't need to initialize our reducer here.

I have created a new folder and named it reducer, inside that folder I have created an index.js file and put the below code,

import { ADD_TODO, REMOVE_TODO, COMPLETE_TODO } from './../action'

const reducer = (state, action) => {
    switch (action.type) {
        case ADD_TODO:
            const newTodo = {
                id: action.id,
                text: action.text,
                completed: false
            };
            return [...state, newTodo];
        case REMOVE_TODO:
            return state.filter((todo) => todo.id !== action.id);
        case COMPLETE_TODO:
            const completeTodo = state.map((todo) => {
                if (todo.id === action.id) {
                    return {
                        ...todo,
                        completed: !todo.completed
                    };
                } else {
                    return todo;
                }
            });
            return completeTodo;
        default:
            return state;
    }
};
export default reducer;

Inside the reducer function, we used a switch statement to check user action. If the user want to add new todo, then the action type will be ADD_TODO and based on switch statement, it will perform ADD_TODO logic in that block. Finally it will return new state.

case ADD_TODO: const newTodo = { id: action.id, text: action.text, completed: false }; return [...state, newTodo];

To Remove a todo task, the action type will be REMOVE_TODO, and based on the switch _ statement, it will perform _REMOVE_TODO logic in that block. Finally, it will return to the new state.

case REMOVE_TODO: return state.filter((todo) => todo.id !== action.id);

To complete a todo, the action will be COMPLETE_TODO and it will perform his logic and return new state.

case COMPLETE_TODO: const completeTodo = state.map((todo) => { if (todo.id === action.id) { return { ...todo, completed: !todo.completed }; } else { return todo; } }); return completeTodo;

it's a simple example so I haven't divided UI into separate containers. I put everything inside app.js file.

let put useReducer in app.js

import { useReducer, useState } from "react";
import "./index.css";
import reducer from "./reducer";
import { ADD_TODO, REMOVE_TODO, COMPLETE_TODO } from './action'
export default function App() {
  const [id, setId] = useState(0);
  const [text, setText] = useState("");
  const initialState = [
    {
      id: id,
      text: "First todo Item",
      completed: false
    }
  ];

  //We could also pass an empty array as the initial state
  //const initialState = []

  const [state, dispatch] = useReducer(reducer, initialState);
  const addTodoItem = (e) => {
    e.preventDefault();
    const newId = id + 1;
    setId(newId);
    dispatch({
      type: ADD_TODO,
      id: newId,
      text: text
    });
    setText("");
  };
  const removeTodo = (id) => {
    dispatch({ type: REMOVE_TODO, id });
  };
  const completeTodo = (id) => {
    dispatch({ type: COMPLETE_TODO, id });
  };
  return (
    <div className="App">
      <h2>Todo Example</h2>
      <form className="input" onSubmit={addTodoItem}>
        <input value={text} onChange={(e) => setText(e.target.value)} />
        <button disabled={text.length === 0} type="submit">+</button>
      </form>
      <div className="todos">
        {state.map((todo) => (
          <div key={todo.id} className="todoItem">
            <p className="">{todo.completed ? <del>{todo.text}</del> : todo.text}</p>
            <div className="actionType">
              <span onClick={() => removeTodo(todo.id)}>✕</span>
              <span onClick={() => completeTodo(todo.id)}>✓</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

In the above code, we can see that useReducer takes the reducer function and initialState as a parameter then it returns state and dispatch.

When someone types some text and clicks on + sign, then inside the addTodoItem function dispatch function will be called and it contains 3 parameters those are type (ADD_TODO), id and text. dispatch will trigger reducer function and based on type reducer function will add a new todo item and return new state.

dispatch({ type: ADD_TODO, id: newId, text: text });

When someone clicks on ✕ the sign, then another dispatch function will be called, this time type will be REMOVE_TODO, and based on type and id, the reducer function removes the specific item and will return new state.

dispatch({ type: REMOVE_TODO, id });

When someone clicks on ✓ then dispatch function will trigger reducer with action type COMPLETE_TODO, then reducer will update that object based on id and return new state.

dispatch({ type: COMPLETE_TODO, id });

Let's put some CSS in index.css file,

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

.App {
  width: 205px;
  margin: auto;
}

.todoItem {
  width: 100%;
  float: left;
  border-bottom: 1px solid;
}

.todoItem p {
  float: left;
}

.actionType {
  float: right;
  margin-top: 15px;
}

If you want to download the full demo project then click here Demo git.

That's all for today, next, we will learn about react useContext hook and how to use with useReducer.

See ya.

Linked List Javascript. Easier than you think.

Abdullah al Mubin — Sun, 09 Jul 2023 04:56:11 +0000

Thinking about data structure, let's take a closer look at Linked List.

Linked list is one of the most popular and efficient data structures. Basically, Linked List is a collection of "nodes", each node contain data, next and previous, basically next refers to next node and previous refers to the previous node.

We can say that, array and linked list is similar. but in array, elements are stored in a specific location or index.

On the other hand, in Linked List everything works as a separate object. Each element (node) contain few things, data, link to the next node, link to the previous node.

Types of Linked List:
There are three types of linked list,

1. Singly Linked List: Each node contains data and a pointer to the next node. Basically its unidirectional.

Analyzing the above image, it start with Head, so Head is the entry point. If a Linked list is empty then the Head will be null. So Head reference to the first node and Last node points to the null.

const linkedList = {
    head: {
        value: 5
        next: {
            value: 7                                             
            next: {
                value: 2
                next: {
                    value: 15
                    next: null  
                    }
                }
            }
        }
    }
};

Basic example,

// class of node
class ListNode {
    constructor(data) {
        this.data = data
        this.next = null                
    }
}

/* LindedList class. remember, if the head node is not passed then head will be null */
class LinkedList {
    constructor(head = null) {
        this.head = head
    }
}

/* lets create some nodes */

let node1 = new ListNode(5) // data will be 5
let node2 = new ListNode(7) // data will be 7
let node3 = new ListNode(2) //  data will be 2
let node4 = new ListNode(15) // data will be 15

node1.next = node2 // points to the node2
node2.next = node3 // points to the node2
node3.next = node4

let list = new LinkedList(node1) // Linked List completed

Advantage and Uses of Singly Linked List

- Dynamic data structure: Memory is dynamically allocated to the linked List. easily we can add or remove an element. We don't need to think about initial size.
- Implementation: Other data structure can be easily implemented here such as Queues and Stacks.
- Versatility: Lined list can be used to implement a wide range of data structures, such as stacks, queues, graphs, truees and has tables.

Disadvantage of Singly Linked List

- Memoray usage: We need to store address of the next data, so it takes more memory.
- Accessing an element: Its impossible to access any element directly. If we need to find nth value, then we need to traverse until nth element found.
- Reverse traversal: It impossible for the Singly linked List. Because we don't have the memory address of the previous pointer.
- More complex implementation: Similar to Array, Its implementation is very complex. We need to understand dynamic memory location and pointer manipulation.
- Lack of cache locality: It may not take advantage of the caching mechanisms in modern processors. Its slower in performance.

2. Doubly Linked List: Each node contains two pointers one for next node and one for previous node.

in the above image, we understand that,

prev: refers to the previous node
data: data item
next: address to the next node

below image shows us representation of doubly Linked list, Here each node contain next _and _prev to point next node and prev node

Basic example

class ListNode  {
    constructor(value) {
        this.value = value;
        this.next = null;
        this.previous = null;
    }
}

class DoublyLinkedList {
    constructor(value) {
        this.head = {
            value: value,
            next: null,
            previous: null
        };
        this.length = 0;
        this.tail = this.head;
    }

    // Insert node at end of the list
    add(newNode) {
        this.tail.next = newNode;
        newNode.previous = this.tail;
        this.tail = newNode;
        this.length++;
    }

    printList() {
        let current = this.head;
        let result = [];
        while (current !== null) {
            result.push(current.value);
            current = current.next;
        }
        console.log(result.join(' '));
        return this;
    }
}

let numList = new DoublyLinkedList();
numList.add(new ListNode (12));
numList.add(new ListNode (13));
numList.add(new ListNode (14));
numList.add(new ListNode (15));
numList.add(new ListNode (16));
numList.add(new ListNode (17));
numList.printList();
console.log(numList)
console.log(numList.head)

Advantage of Doubly Linked List:

- Reversing: Reversing the doubly linked list is very easy.
-Traversal: The traversal of this doubly linked list is bidirectional which is not possible in a singly linked list.
-Deletion: Deletion of nodes is easy as compared to a Singly Linked List.

Disadvantage of Doubly Linked List:

It uses extra memory when compared to the array and singly linked list.
Traversing a doubly linked list can be slower than traversing a singly linked list
Implementing and maintaining doubly linked lists can be more complex than singly linked lists.

Uses of Doubly Linked List:

- Navigation Systems: It is used in the navigation systems where front and back navigation is required.
- Undo and Redo: It is also used by various applications to implement undo and redo functionality.
- MRU/LRU: Doubly Linked List is also used in constructing MRU/LRU (Most/least recently used) cache.
- Thread Scheduler: Also in many operating systems, the thread scheduler(the thing that chooses what process needs to run at which time) maintains a doubly-linked list of all processes running at that time.
- Browser: next and previous page.
- Image viewer: next and previous image

Implementing **Graph **algorithms

3. Circular Linked Lists: Its different than others, its last node points to the first nor or any other node before it.
It has two types,

Circular Singly Linked List
Circular Doubly Linked List

We will learn Circular Linked List in the next. that's it for today. See yaaa.

CSS animation, Easier than we think.

Abdullah al Mubin — Sun, 18 Jun 2023 16:47:23 +0000

Sometimes we want to make animation for a better user experience. There are a lot of tools, packages used to make animation. sometimes we need to understand JavaScript or Flash or other third-party packages to make animation.

meanwhile, CSS provides us an easy way to make awesome animation. Here we will try to learn about it.

So basically, we will animate HTML elements without using JavaScript or other third-party library.

Using CSS animation, we can animate an element gradually changing from one style to another, we can change CSS property as many times as we want.

Properties:

@keyframes
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode

@keyframes
By putting CSS style inside @keyframes, we can define our animation, and that will gradually change from present style to a new style at a certain times.

<!DOCTYPE html>
<html>
<head>
<style> 
@keyframes example {
  from {background-color: green;}
  to {background-color: red;}
}

.circle {
  width: 50px;
  height: 50px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  margin-bottom: 10px;
  border-radius: 50%
}


</style>
</head>
<body>

<div class="circle"></div>
<div class="circle"></div>

</body>
</html>

The above code shows us, how @keyframes works with our styles. put the above code in your editor or online editor such as Jsfiddle and see the changes.

at first, the "circle" class will be "green" color, then it will change to "red" color.

inside @keyframes, we already provided "from" and "to" property. We can replace them with percent. Such as, "0%", "25%", "50%", "75", and "100%".

try below code to see the changes, I'm using Jsfiddle

<!DOCTYPE html>
<html>
<head>
<style> 
@keyframes example {
  0%   {background-color: green;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: red;}
}

.circle {
  width: 50px;
  height: 50px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  margin-bottom: 10px;
  border-radius: 50%
}


</style>
</head>
<body>

<div class="circle"></div>
<div class="circle"></div>

</body>
</html>

In the above code, we can see that color of the circle will be changed to green, yellow, blue, and red. Duration will be 4s.

animation-name:
This property used to indicates the @keyframe name.

@keyframes example { /* name "example" */
}

.circle {
  animation-name: example; /* indicates @keyframes name */
}

animation-duration:
It is a mandatory property. It defines how long it takes to complete the animation. Its default value is 0s so without defines, no animation will occur.

animation-delay:
This property will make sure, that your animation will be delayed to start.

update the "circle" class with below code to see the changes,

.circle {
  width: 50px;
  height: 50px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s; /* animation will be deloayed for 2 seconds */
  margin-bottom: 10px;
  border-radius: 50%
}

Negative values are also allowed, if we use "-2" then it will start as if it had been playing for 2 seconds.

.circle {
  width: 50px;
  height: 50px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
  margin-bottom: 10px;
  border-radius: 50%
}

we can add multiple style property for each period of time inside of a @keyframes. below code will change color alongside of position of each circle.

<!DOCTYPE html>
<html>
<head>
<style> 
.circle{
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
  border-radius: 50%
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<div class="circle"></div>

</body>
</html>

animation-iteration-count:
It will define the number of times an animation should run.
below code shows us it will run the animation 3 times before it stops.

<!DOCTYPE html>
<html>
<head>
<style> 
.circle{
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
  border-radius: 50%
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<div class="circle"></div>

</body>
</html>

if we want that animation will stay forever then we need to use "infinite".

.circle {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  border-radius: 50%
}

animation-direction:
it will define that animation would play backward or forwards. below are the values of animation-direction

- normal - played as normal (forwards). This is default.
- reverse - played in reverse direction (backwards)
- alternate - played forwards first, then backwards
- alternate-reverse - played backwards first, then forwards

.circle {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse; 
  border-radius: 50%;
}

animation-timing-function
It specifies the speed curve of animation.

ease - Specifies an animation with a slow start, then fast, then end slowly (this is default)
linear - Specifies an animation with the same speed from start to end
ease-in - Specifies an animation with a slow start
ease-out - Specifies an animation with a slow end
ease-in-out - Specifies an animation with a slow start and end

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 50px;
  background-color: red;
  font-weight: bold;
  position: relative;
  animation: mymove 5s infinite;
}

.circle-1 {animation-timing-function: linear;}
.circle-2 {animation-timing-function: ease;}
.circle-3 {animation-timing-function: ease-in;}
.circle-4 {animation-timing-function: ease-out;}
.circle-5 {animation-timing-function: ease-in-out;}

@keyframes mymove {
  from {left: 0px;}
  to {left: 300px;}
}
</style>
</head>
<body>

<div class="circle-1">linear</div>
<div class="circle-2">ease</div>
<div class="circle-3">ease-in</div>
<div class="circle-4">ease-out</div>
<div class="circle-5">ease-in-out</div>

</body>
</html>

animation-fill-mode:
It specifies a style for the target element when the animation is not playing. Values of animation-fill-mode are

none - Default value. Animation will not apply any styles to the element before or after it is executing
forwards - The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count)
backwards - The element will get the style values that is set by the first keyframe (depends on animation-direction), and retain this during the animation-delay period
both - The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;  
  animation-fill-mode: forwards;
  border-radius: 50%
}

@keyframes example {
  from {top: 0px;}
  to {top: 200px; background-color: blue;}
}
</style>
</head>
<body>

<div class="circle-1"></div>


</body>
</html>

That's it. Seee ya.

Node js file system, Easier than we think(1).

Abdullah al Mubin — Sun, 11 Jun 2023 14:52:57 +0000

What is Node js?
If we want to run javascript without a browser, we must use an environment to execute js code. Using Node js we can create that runtime environment to execute js code.

It's built upon Chrome's v8 engine using C++.

We need to install Node js Node js in our system. We also need the editor to write codes. I'm going to use Visual studio to write and execute javascript code.

What is File system?
The file system module allows us to work with files in our system. Using the file system we can perform various tasks just like,

Create file
Read file
Update file
Delete file
Rename file

Need to know
The basic idea is to run a node js file.

Create File
There are three different methods to create new files,

fs.writeFile()
fs.open()
fs.appendFile()

here 'fs' represent var fs =require('fs')

fs.writeFile()
fs.writeFile method helps us to create and write something on a file if that file does not exist. If that file already exists then it will replace with new content.

fs.writeFile( file, data, options, callback )

In the above line,

file: represent, string, buffer, url or file path
data: represent specific content.
options: encoding, mode, flag
callback: we can set a function that will be called after that (fs.writeFile) function executed.

Example
write the below code to create a file with its content. Now execute node index.js(file name) command.

var fs = require('fs');

//create a file named firstFile.txt:
fs.writeFile('firstFile.txt', 'Hello world!', function (err) {
    if (err) throw err;
    console.log('Saved!');
});

above code will create a text file named 'firstFile.txt' and its content will be 'Hello world!'

if you change its content 'Hello world!' to something else, then the will be replaced with the new content.

Example with encoding, mode and flag,

fs.writeFile('firstFile.txt', 'Hello world!',
  {
    encoding: "utf8",
    flag: "w",
    mode: 0o666
  },
  function (err) {
    if (err) throw err;
    console.log('Saved!');
});

fs.open()
This method works differently than others, it takes the second parameter as a "flag", and if the second parameter is "w" for "writing", then the file is opened for writing. if the file does not exist then it will create an empty file.

var fs = require('fs');

fs.open('firstFile.txt', 'w', function (err, file) {
  if (err) throw err;
  console.log('Saved!');
});

execute node index.js(filename) to see the changes.

types of flags are described below,

- w: Open file for writing. A file is created if it doesn’t exist.
- w+: Open the file to read and write. A file is created if it doesn’t exist.
- wx: It is the same as ‘w’ but fails if the path exists.
- wx+: Open the file to read and write. A file is created if it doesn’t exist.
- r: To open the file to read and throws an exception if the file doesn’t exist.
- r+: Open the file to read and write. Throws an exception if the file doesn’t exist.
- rs+: Open files in synchronous mode to read and write.
- a: Open the file to append. A file is created if it doesn’t exist.
- ax: It is the same as a but fails if the path exists.
- a+: Open the file for reading and appending. A file is created if it doesn’t exist.
- ax+: It is the same as ‘a+’ but fails if the path exists.

fs.appendFile()
It is used to asynchronously append the given data to a file. If the file does not exist, the file will be created

fs.appendFile( path, data[, options], callback )

In the above line,

path: It can be string, buffer, url
data: It can be string, buffer.
options: encoding, mode, flag
callback: we can set a function that will be called after that (fs.appendFile) function executed.

below code helps us to understand more clearly, here, 'utf8' is refers to "encoding"

var fs = require('fs');

var data = "appendFileTest";

// Append data to file
fs.appendFile('appendFile.txt', data, 'utf8',
    // Callback function
    function () {
        console.log("Nicely done.")
    });

Now, run the code with
node index.js // index.js is file name.

below image shows we created a file and its name "appendFile.txt"

that's for today, see yaa.