DEV Community: Akash Yadav

Types of Scope in JavaScript

Akash Yadav — Mon, 12 Aug 2024 05:29:25 +0000

1. Global Scope:
-> Variables or functions declared outside of any function or block have global scope.
-> They can be accessed from anywhere in the code, including inside -> functions or blocks.
-> Global variables can create issues, especially in large programs, as they are accessible everywhere and can be overwritten.

var globalVar = "I'm a global variable";

function displayGlobalVar() {
  console.log(globalVar); // Accessible here
}

displayGlobalVar(); // Output: I'm a global variable

2. Function Scope:
-> Variables declared within a function are scoped to that function.
They are not accessible outside the function in which they are defined

function myFunction() {
  var functionVar = "I'm a function variable";
  console.log(functionVar); // Accessible here
}

myFunction();
console.log(functionVar); // Error: functionVar is not defined

-> In the example above, functionVar is not accessible outside of myFunction().

3. Block Scope (introduced in ES6):
-> Variables declared using let and const are block-scoped.
They are only accessible within the block (e.g., { }) in which they are defined.

if (true) {
  let blockVar = "I'm a block variable";
  console.log(blockVar); // Accessible here
}

console.log(blockVar); // Error: blockVar is not defined

-> Variables declared with var, however, are not block-scoped; they are function-scoped.

if (true) {
  var notBlockVar = "I'm not block-scoped";
}

console.log(notBlockVar); // Output: I'm not block-scoped

4. Lexical Scope:
-> Lexical scope (also known as static scope) refers to the fact that a function's scope is determined by where it is defined in the code, not where it is called.
-> Inner functions have access to variables of outer functions.

function outerFunction() {
  var outerVar = "I'm an outer variable";

  function innerFunction() {
    console.log(outerVar); // Accessible here
  }

  innerFunction(); // Output: I'm an outer variable
}

outerFunction();

5. Closures:
-> A closure is a function that retains access to its lexical scope, even when the function is executed outside that scope.
-> Closures allow a function to access variables from an outer function even after the outer function has returned.

function outerFunction() {
  var outerVar = "I'm an outer variable";

  return function innerFunction() {
    console.log(outerVar); // Still accessible here
  };
}

var closureFunction = outerFunction();
closureFunction(); // Output: I'm an outer variable

-> In the example above, innerFunction forms a closure that allows it to access outerVar even after outerFunction has finished executing.

Summary:

Global Scope: Accessible from anywhere in the code.
**Function Scope: **Accessible only within the function where defined.
Block Scope: Accessible only within the block where defined (let, const).
Lexical Scope: Functions have access to variables in the scope where they were defined.
Closures: Functions that "remember" their lexical scope even after the outer function has finished.

-> Understanding scope is crucial for managing variable lifetimes and ensuring that your code behaves as expected.

Setting Up Toast Custom Notifications in React with Specific Types and Context API

Akash Yadav — Tue, 23 Jul 2024 07:47:50 +0000

Context Setup

src/context/ToastContext.js

import { createContext, useCallback, useContext, useEffect, useState } from "react";

const CreateAlertBox = createContext();

export const useCreateAlert = () => useContext(CreateAlertBox);

const AlertType = ['error', 'success', 'info', 'warning'];

export const CreateAlertBoxProvider = ({ children }) => {
    const [alert, setAlert] = useState([]);

    const createAlert = useCallback((message, type = 'warning') => {
        if (!AlertType.includes(type)) return;

        setAlert((prevAlert) => [
            ...prevAlert,
            { id: Date.now(), message, type }
        ])
    }, [])

    const removeAlert = useCallback((id) => {
        setAlert((prevAlert) => prevAlert.filter((alert) => alert.id !== id));
    }, [])
    return (
        <CreateAlertBox.Provider value={{ createAlert, removeAlert }}>
            {children}
            <div className="toast-container">
                {
                    alert.map((alert) => (
                        <div key={alert.id} className={`toast toast-${alert.type}`}>
                            {alert.message}
                            <button onClick={() => removeAlert(alert.id)}>X</button>
                        </div>
                    ))
                }
            </div>
        </CreateAlertBox.Provider>
    )
}

CSS for Toast Notifications

/* src/styles/toast.css */

.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
}

.toast {
    background-color: #333;
    color: #fff;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.toast-info {
    background-color: #007bff;
}

.toast-success {
    background-color: #28a745;
}

.toast-warning {
    background-color: #ffc107;
}

.toast-error {
    background-color: #dc3545;
}

.toast button {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    margin-left: 1rem;
}

Providing the Toast Context

// src/main.js

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { RouterProvider } from 'react-router-dom'
import { router } from './router.jsx'
import { CreateAlertBoxProvider } from './context/toastcontext.jsx'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <CreateAlertBoxProvider>
        <RouterProvider router={router}>
          <App />
        </RouterProvider>
    </CreateAlertBoxProvider>
  </React.StrictMode>,
)

Using the Toast Context in Components

import React, { useContext, useEffect } from 'react'
import { UserContext } from '../context/usercontext'
import { useCreateAlert } from '../context/toastcontext'

const Profile = () => {
    const { user } = useContext(UserContext)

    const { createAlert } = useCreateAlert();

    const showToast = () => {
        try {
            createAlert("Deal created successfully", 'success')

        } catch (error) {
            createAlert('This is an info toast!', 'error');
        }
    };


    return (
        <div className="App">
            <p>Hello Profile</p>
            <button onClick={showToast}>Show Toast</button>
        </div>
    )
}

export default Profile

ExpandableText Components

Akash Yadav — Thu, 18 Jul 2024 07:53:19 +0000

import { Typography } from "@mui/material";
import { useEffect, useRef, useState } from "react";

interface ExpandableTextProps {
    text: string;
    extendedText: string;
    numberOfLine: number;
}

const ExpandableText: React.FC<ExpandableTextProps> = ({ text, extendedText = "Description", numberOfLine = 3 }) => {
    const [expanded, setExpanded] = useState(false);
    const [maxHeight, setMaxHeight] = useState<string | number>('none');
    const contentRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        if (contentRef.current) {
            setMaxHeight(expanded ? contentRef.current.scrollHeight : `${numberOfLine * 1.5}em`);
        }
    }, [expanded, numberOfLine])

    const toggleExpand = () => {
        setExpanded((prev) => !prev);
    };

    return (
        <>
            <div
                ref={contentRef}
                style={{
                    overflow: 'hidden',
                    maxHeight: maxHeight,
                    transition: 'max-height 0.3s ease-in-out',
                }}
            >
                <Typography
                    component="p"
                    sx={{
                        fontSize: 12,
                        fontWeight: 700,
                        letterSpacing: 0.5,
                        display: '-webkit-box',
                        WebkitBoxOrient: 'vertical',
                        WebkitLineClamp: expanded ? 'unset' : numberOfLine,
                        textOverflow: 'ellipsis',
                        mt: 1,
                    }}
                >
                    {text}
                </Typography>
            </div>
            <span style={{ color: "blue", cursor: "pointer" }} onClick={toggleExpand}>
                {expanded ? `Collapse ${extendedText}` : `Expand ${extendedText}`}
            </span>
        </>
    );
};


export default ExpandableText;

Basic Linux Command used in Pentesting and Other Cyber Security Domains

Akash Yadav — Sun, 16 Jun 2024 10:40:07 +0000

File Commands

cd - change directory
pwd - print working directory
ls - list files and directory
mkdir - make n directories
rm - remove (delete) a file or directory
rmdir - remove (delete) an empty directory
cp - copy a file
mv - move or rename a file
touch - create a new empty file
echo - write to a file

SSH Commands

ssh - connect to a remote host
ssh-keygen - generate a new SSH key pair
ssh-copy-id - copy SSH keys to a remote host
ssh-config - configure SSH client settings
ssh-agent - manage SSH keys for authentication

React Native Skeleton Loader Componen

Akash Yadav — Thu, 09 May 2024 08:05:22 +0000

This is a reusable React Native component for rendering skeleton loaders with customizable dimensions and animations. Skeleton loaders are placeholders used to provide a better user experience while loading content in an application. The component supports both animated and static skeletons, and it can measure the dimensions of a child component to render skeletons with the same dimensions. This component can be useful for improving the perceived performance of your React Native application.



import { useState } from "react";
import { Dimensions, View, Text, Platform } from "react-native"
import LinearGradient from "react-native-linear-gradient";
import colors from "../utils/constant/colors";
import Animated, { useAnimatedProps, useFrameCallback, useSharedValue, withTiming } from "react-native-reanimated";

interface SkeltonContainerProps {
    child: any;
    childcount?: any;
    width?: any;
    height?: any;
}

interface SkeletonProps {
    width: number;
    height: number;
    marginTop?: number;
}

const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);

const SkeletonAnimated = ({ width, height, marginTop }: SkeletonProps) => {
    const locationY = useSharedValue(0);

    useFrameCallback(() => {
        if (locationY.value == 1) locationY.value = withTiming(0, { duration: 1000 });
        if (locationY.value == 0) locationY.value = withTiming(1, { duration: 1000 });
    });

    const animatedProps = useAnimatedProps(() => {
        return { locations: [0, locationY.value] }
    })

    return (
        <AnimatedLinearGradient colors={[colors.LightGray, colors.White]} animatedProps={animatedProps} style={{ width: width, height: height, marginTop: marginTop }} />
    )
}

const SkeletonStatic = ({ width, height, marginTop }: SkeletonProps) => {
    return (
        <LinearGradient colors={[colors.LightGray, colors.White]} style={{ width: width, height: height, marginTop: marginTop }} />
    )
}

const Skeleton = ({ width = Dimensions.get('window').width, height = 200, marginTop = 0 }: SkeletonProps) => {
    return (
        Platform.OS == 'ios' ?
            <SkeletonAnimated width={width} height={height} marginTop={marginTop} /> :
            <SkeletonStatic width={width} height={height} marginTop={marginTop} />
    )
}


const SkeletonContainer = ({ child, childcount = 1, width = Dimensions.get('window').width, height = 64 }: SkeltonContainerProps) => {
    const [dimensions, setDimensions] = useState({ width: 0, height: 0 })
    return (
        child ?
            <View>
                <View style={{ opacity: 0 }} onLayout={(event) => setDimensions({ width: event.nativeEvent.layout.width, height: event.nativeEvent.layout.height })}>{child}</View>
                <Skeleton width={dimensions.width} height={dimensions.height} marginTop={-dimensions.height} />
                {[...Array(childcount - 1).keys()].map((index) => <Skeleton key={index} width={dimensions.width} height={dimensions.height} />)}
            </View> :
            [...Array(childcount).keys()].map((index) => <Skeleton key={index} width={width} height={height} />)
    )
}

export default SkeletonContainer;

Clean code Tips

Akash Yadav — Fri, 03 May 2024 05:08:17 +0000

This approach helps in writing cleaner and more readable code for conditional rendering without using curly braces directly.

In this code, the Choice object provides two components: When and Then. The When component renders its children if the provided condition is true. On the other hand, the Then component renders its children if the condition is false. This approach helps in writing cleaner and more readable code for conditional rendering without using curly braces directly.

Vim Navigation

Akash Yadav — Sat, 30 Mar 2024 12:35:11 +0000

Navigation:
h: Move cursor left.
j: Move cursor down.
k: Move cursor up.
l: Move cursor right.
gg: Move to the first line of the file.
G: Move to the last line of the file.
Ctrl + b: Move one page up.
Ctrl + f: Move one page down.
0: Move to the beginning of the line.
$: Move to the end of the line.
w: Move forward one word.
b: Move backward one word.
Editing:
i: Enter insert mode before the cursor.
I: Enter insert mode at the beginning of the line.
a: Enter insert mode after the cursor.
A: Enter insert mode at the end of the line.
o: Open a new line below the current line.
O: Open a new line above the current line.
x: Delete the character under the cursor.
dd: Delete the current line.
yy: Yank (copy) the current line.
p: Paste the yanked or deleted text after the cursor.
u: Undo the last change.
Ctrl + r: Redo the last undone change.
.: Repeat the last change.
Saving and Exiting:
:w: Write (save) the file.
:q: Quit Vim.
:q!: Quit Vim without saving changes.
:wq: Write the file and quit Vim.
:wq!: Write the file and quit Vim, overriding read-only mode if necessary.
Searching and Replacing:
/pattern: Search for a pattern.
n: Move to the next occurrence of the search pattern.
N: Move to the previous occurrence of the search pattern.
:%s/old/new/g: Replace all occurrences of "old" with "new" in the entire file.
Miscellaneous:
:help: Open the help documentation.
:set number: Display line numbers.
:set nonumber: Hide line numbers.
:syntax on: Enable syntax highlighting.
:syntax off: Disable syntax highlighting.

JS Trick Questtions

Akash Yadav — Mon, 04 Mar 2024 17:54:28 +0000

const obj = {a: 1, b: 2}
const val1 = obj.c;
const val2 = obj.c || "default"; // fallback
console.log(val1)
console.log(val2)

Git Commands

Akash Yadav — Sat, 02 Mar 2024 13:56:13 +0000

Git Commands: Set Remote and Related Operations

Setting Up a Remote Repository:
- git remote add origin <remote_repository_url>: Sets up a remote repository with the specified URL as the origin.
Listing Remote Repositories:
- git remote -v: Lists all remote repositories along with their URLs.
Renaming a Remote Repository:
- git remote rename <old_name> <new_name>: Renames a remote repository.
Changing the URL of a Remote Repository:
- git remote set-url origin <new_repository_url>: Changes the URL of the remote repository named 'origin'.
Removing a Remote Repository:
- git remote remove <remote_name>: Removes the remote repository specified by the name.
Pushing Changes to a Remote Repository:
- git push <remote_name> <branch_name>: Pushes changes from the local branch to the remote repository.
Pushing Changes to a New Remote Repository:
- git push -u origin <branch_name>: Pushes changes to a new remote repository and sets it as the default upstream.
Fetching Changes from a Remote Repository:
- git fetch <remote_name>: Fetches changes from the remote repository without merging them into the local branch.
Pulling Changes from a Remote Repository:
- git pull <remote_name> <branch_name>: Fetches changes from the remote repository and merges them into the current branch.
Cloning a Remote Repository:
- git clone <remote_repository_url>: Clones a remote repository to the local machine.
Viewing Remote Details:
- git remote show <remote_name>: Displays detailed information about the specified remote repository.
Verifying Remote Connectivity:
- git remote -v: Verifies the connectivity with the remote repository.
Creating a New Branch on the Remote Repository:
- git push <remote_name> <local_branch_name>:<remote_branch_name>: Creates a new branch on the remote repository.
Deleting a Branch on the Remote Repository:
- git push <remote_name> --delete <branch_name>: Deletes the specified branch from the remote repository.
Pushing Tags to the Remote Repository:
- git push <remote_name> --tags: Pushes tags to the remote repository.
Pushing Changes with Force to Remote Repository:
- git push --force <remote_name> <branch_name>: Forces the push of local changes to the remote repository, potentially overwriting changes.

These commands allow you to manage remote repositories in Git, including setting up, renaming, removing, and interacting with remote repositories for collaboration and version control. Use them to effectively work with remote repositories in your Git projects.

Nano commands for mac and other

Akash Yadav — Sat, 02 Mar 2024 05:49:51 +0000

Here are some common Nano commands used in the Nano text editor:

Open/Create a File: nano filename
- Opens an existing file or creates a new file with the specified filename.
Save File: Ctrl + O (WriteOut)
- Saves the changes made to the current file.
Exit Nano: Ctrl + X
- Exits the Nano editor. If there are unsaved changes, Nano will prompt to save before exiting.
Cursor Movement:
- Arrow keys: Move the cursor up, down, left, or right.
- Ctrl + F: Move cursor forward one character.
- Ctrl + B: Move cursor backward one character.
- Ctrl + P: Move cursor to the previous line.
- Ctrl + N: Move cursor to the next line.
- Ctrl + A: Move cursor to the beginning of the current line.
- Ctrl + E: Move cursor to the end of the current line.
- Ctrl + \: Move cursor to a specific line number.
Search and Replace:
- Ctrl + W: Search for text.
- Alt + W: Repeat search in the opposite direction.
- Ctrl + \: Replace text.
Cut, Copy, and Paste:
- Ctrl + K: Cut the current line.
- Ctrl + U: Paste the cut text.
- Ctrl + Shift + 6: Copy the selected text.
- Ctrl + Shift + U: Paste the copied text.
Undo and Redo:
- Ctrl + _ or Ctrl + Shift + 6: Undo the last change.
- Alt + _: Redo the last undone change.
Mark Text:
- Ctrl + ^: Start marking text.
- Arrow keys: Move the cursor to select text.
- Alt + ^: End marking text.
Other Commands:
- Ctrl + G: Display Nano's help menu.
- Ctrl + C: Display current line and column number.
- Ctrl + R: Read another file into the current one.
- Ctrl + T: Invoke spell checker.

These are some of the basic Nano commands. Nano also provides many other features and functionalities, which you can explore further in its documentation or help menu (Ctrl + G).

React Native Assignment

Akash Yadav — Sat, 02 Mar 2024 05:46:37 +0000

React Native Project: Recipe App Objective: Develop a recipe application using React Native, allowing users to browse, search, and save recipes. Task: Build a mobile application that fetches recipes from a mock API and displays them to users. Users should be able to search for recipes by name or category, view recipe details, and save their favorite recipes for later reference. Technology Stack:
React Native for building the mobile application.
Mock API or or data source for fetching recipe data.
TheMealDb Api: https://www.themealdb.com/api.php Requirements:
User Interface:
Design an attractive and user-friendly interface for browsing recipes.
Include screens for displaying recipe categories, search results, and individual recipe details.
Implement navigation between different screens using React Navigation. 2. Recipe Features:
Fetch recipe data from a mock API or data source.
Allow users to search for recipes by name or category.
Display recipe details including ingredients, instructions, and images.
Save Favorites:
Enable users to save their favorite recipes for quick access. - Implement a feature to view and manage saved recipes.
Documentation:
Provide comprehensive documentation in the README file, explaining how to set up and run the application, and any additional information about the project structure or dependencies. Submission: Submit your code repository on GitHub, along with the README file containing setup instructions and project details.

Axios Request Package

Akash Yadav — Sat, 02 Mar 2024 03:08:00 +0000

import AsyncStorage from '@react-native-async-storage/async-storage';
import NetInfo from "@react-native-community/netinfo";
import axios from "axios";
import { DeviceEventEmitter } from 'react-native';

const BASE_URL = {
    DEV: 'https://api.worldref.dev/dealx/rest/api/v1/',
    PROD: 'https://wr19dlx8r7nkmq1p6x.worldref.dev/dealx/rest/api/v1/'
}

const instance = axios.create({
    baseURL: BASE_URL.DEV,
    timeout: 60 * 1000,
});

instance.interceptors.response.use(async (response) => {
    return response;
}, async (error) => {
    if (error.status === 401 || error.response && error.response.status === 401) {
        DeviceEventEmitter.emit('logout');
        return;
    }

    return Promise.reject(error.response ? error.response.data : error);
});

const SetHeader = (key, value) => {
    instance.defaults.headers.common[key] = value;
}

const RemoveHeader = (key) => {
    delete instance.defaults.headers.common[key];
}

const StoreCache = async (key, value) => {
    try {
        await AsyncStorage.setItem(key, JSON.stringify(value));
    }
    catch (error) {
        return error;
    }
};

const GetCache = async key => {
    try {
        const value = await AsyncStorage.getItem(key);
        const item = JSON.parse(value);

        if (!item) return null;

        return item;
    }
    catch (error) {
        return error;
    }
};

const ResponseEncodings = {
    JSON: 'json',
    Stream: 'blob',
}

const RequestContentType = {
    JSON: 'application/json',
    FormData: 'multipart/form-data',
}

const Request = async (method, url, body, nocache = false, responseType = ResponseEncodings.JSON, requestContentType = RequestContentType.JSON) => {
    const requestOptions = {
        method: method,
        url: url,
        data: body,
        responseType: responseType,
        headers: { 'Content-Type': requestContentType }
    };

    try {
        const connected = await NetInfo.fetch();

        if (!connected.isConnected) {
            if (method === 'GET' && !nocache) {
                const cached = await GetCache(url);
                if (cached) return cached;
            }

            throw new Error("Please check your internet connection");
        }

        const response = await instance.request(requestOptions);
        if (method === 'GET' && !nocache) StoreCache(url, response);

        return response;
    }
    catch (error) {
        throw error;
    }
}

export { Request, ResponseEncodings, RequestContentType, SetHeader, RemoveHeader };

import AsyncStorage from '@react-native-async-storage/async-storage';
import NetInfo from "@react-native-community/netinfo";
import axios from "axios";
import { DeviceEventEmitter } from 'react-native';
import { RefreshToken } from './models/auth';

const BASE_URL = {
    DEV: 'https://api.worldref.dev/dealx/rest/api/v1/',
    PROD: 'https://wr19dlx8r7nkmq1p6x.worldref.dev/dealx/rest/api/v1/'
}

const instance = axios.create({
    baseURL: BASE_URL.DEV,
    timeout: 60 * 1000,
});

const shouldRefreshToken = (error) => {
    return (error.status === 401 || error.response.status === 401)
        && !error.config.url.includes('login');
}

const getErrorTextFromErrorObject = (error) => {
    if (error.response) {
        if (typeof error.response.data === 'string') return error.response.data;
        if (typeof error.response.data.error === 'string') return error.response.data.error;
    }

    if (error.data) {
        if (typeof error.data === 'string') return error.data;
        if (typeof error.data.error === 'string') return error.data.error;
    }

    if (typeof error === 'string') return error;
    return 'Something went wrong';
}

instance.interceptors.response.use(async (response) => {
    return response;
}, async (error) => {
    if (shouldRefreshToken(error)) {
        try {
            if (error.config.url.includes('refreshtoken')) throw error;

            await RefreshToken();
            return instance.request(error.config);
        }
        catch (error) {
            DeviceEventEmitter.emit('logout');
            return;
        }
    }

    return Promise.reject(getErrorTextFromErrorObject(error));
});

const SetHeader = (key, value) => {
    instance.defaults.headers.common[key] = value;
}

const RemoveHeader = (key) => {
    delete instance.defaults.headers.common[key];
}

const StoreCache = async (key, value) => {
    try {
        await AsyncStorage.setItem(key, JSON.stringify(value));
    }
    catch (error) {
        return error;
    }
};

const GetCache = async (key) => {
    try {
        const value = await AsyncStorage.getItem(key);
        const item = JSON.parse(value);

        if (!item) return null;

        return item;
    }
    catch (error) {
        return error;
    }
};

const ResponseEncodings = {
    JSON: 'json',
    Stream: 'blob',
}

const RequestContentType = {
    JSON: 'application/json',
    FormData: 'multipart/form-data',
}

const Request = async (method, url, body, nocache = false, responseType = ResponseEncodings.JSON, requestContentType = RequestContentType.JSON) => {
    const requestOptions = {
        method: method,
        url: url,
        data: body,
        responseType: responseType,
        headers: { 'Content-Type': requestContentType }
    };

    try {
        const connected = await NetInfo.fetch();

        if (!connected.isConnected) {
            if (method === 'GET' && !nocache) {
                const cached = await GetCache(url);
                if (cached) return cached;
            }

            throw new Error("Please check your internet connection");
        }

        const response = await instance.request(requestOptions);
        if (method === 'GET' && !nocache) StoreCache(url, response);

        return response;
    }
    catch (error) {
        throw error;
    }
}

export { Request, ResponseEncodings, RequestContentType, SetHeader, RemoveHeader };