DEV Community: Utkarsh Yadav

Undefined or not defined?

Utkarsh Yadav — Wed, 27 Oct 2021 10:28:05 +0000

Table of Content

What is Undefined in JavaScript?
What is 'defined` in JavaScript ?
Difference between the both.

Undefined

Undefined is simply a Placeholder that is initialise to every variable at the time of memory execution in Global Execution Context.

Example:

console.log(a); // undefined var a = 7; // Assign value 7 to a console.log(a); // Log --> 7 on Screen

Not Defined

This is like an error, occurs when the code is trying to access the variable that is never been there in memory.

is var b = 7; // Assign value 7 to b console.log(a); // not defined

Difference Between Undefined and Not Defined

In JavaScript, they both are related to memory space and there is a very simple difference between them. If the variable name which is being accessed doesn’t exist in memory space then it would be not defined, and if exists in memory space but hasn’t been assigned any value till now, then it would be undefined.

So, Hope you got to know the simple difference between the two Jargons.

Don't stop learning, Keep exploring and learning.

Window and this keyword ?

Utkarsh Yadav — Thu, 17 Jun 2021 15:04:42 +0000

Table of content

Shortest program in JavaScript
window keyword
This keyword
Working behind the scenes

What is the shortest program in JavaScript ?

Running an empty file in JavaScript is the shortest program in JavaScript.

Create a JavaScript file with .js extension and compile the file using Dev Tools in the browser and the magic you would see that even though you have not written a piece of code but your JavaScript engine in the browser will create a complete new Global Execution context with all the methods and API available to you by your browser.

Isn't it interesting?.

Window Keyword

This is a functionality provided by JavaScript engine. basically window is the class in which various functions and methods are encapsulated.

These functions and methods can be used anywhere inside our JavaScript program.

This Keyword

This is an another functionality provided by JavaScript engine. At the Global level this points to window keyword and their functionality.

This is how JavaScript runs --> A global Context is created --> window object is created on initialised by the browser --> the this variable points to the window is created and the complete shortest program of JavaScript runs.

Working behind the scenes.

Steps are:

Global Space creation: Anything not inside and block scope or a function scope is said to be in or bounded with Global Space.

Window keyword is Global Space.

So, everything outside the function will be under window keyword object or Global State Object.

Let's see an example to understand it better.

var a = 10;  // Global space
function b() {  // Global space
  var x = 10;  // Not in Global space
}
console.log(window.a);  // Global space
console.log(a); // Global space
console.log(x); // Global space

Points to be noted:

Everything that is inside Global Space are accessed inside window object.
Everything that is outside Global Space are not accessed inside window object.

Conclusion: This vs window points to the same global space.

This concludes the blog if you like the content please support me:

How functions work in java Script?

Utkarsh Yadav — Sat, 29 May 2021 17:23:42 +0000

Table of Content

What are functions?
Types of function declaration in JavaScript?
BTS Functions working?
Call stack with functions.

What are functions?

Functions in JavaScript are same as in any other language. These contains some set of statements inside its scope and executes the statement when invoked or called when required,they also takes input as parameter and return the output.

Syntax:

function Name(){
  // ... statements..
// ...statements..
}

There are many jargon for functions that should be understood by every developer like : Function declaration | function invocation | function statement | function call | Function expression.

Type of Function expressions in JavaScript

Functions as anonymous

const square = function(num) {
  num*=num;
  return num;
}

console.log(square(5)) // 25
var ans = square(5);
console.log(ans); // 25 will be stored in `ans` variable.

In above example, an anonymous function is declared using variable in JavaScript.
Here function acts as a variable, and now it can be hoisted by JavaScript.

Functions using function name

function square(num){
   return num*num;
}

console.log(square(5)); // 25 will be returned as output.

In above example, function is expressed using function name, here function is not acting as a variable, hence hoisting is not possible.

BTS Functions working?

Let's understand the functioning of the functions in JavaScript with the help of example.

var x=1;
a();
b();
console.log(x);

function a(){
   var x=10;
   console.log(x);
}

function b(){
   var x=100;
   console.log(x);
}

Now it's time to analyse how everything works behind the scenes in the browsers engine.

First: Global Execution context

Remember, Inside java Script everything runs inside Global Execution Context.
To learn more about GEC visit: Behind The scenes in JavaScript

The variable x is assigned undefined at the first skims.
And all the other function will be referenced with the actual code inside it.
When the code execution of first statement begins the variable x is assigned with the value of 1
After that a(); function is called and this function calls make another Local Execution context inside the global execution context and executes as it is executes in GEC.
Same with the fucntion b();.

Call stack with functions.

Now let's look to the call stack, observe how the call stack will look behind the scenes in JavaScript Engine.

This is how the call stack looks, I have put a debugger to have a look to my call stack. but it executes in fraction of milliseconds.

I hope this content provided you with some deep knowledge on JavaScript functions.

Please Like and Comment What you think?

Happy Coding.

Follow me on:

LinkedIn: https://linkedin.com/in/yadavutkarsh
Website: https://utkarshwhocodes.netlify.app
Blogs-Dev: https://dev.to/uyadav207
Blogs-Personal: https://utkarshwhocodesblogs.netlify.app

Hoisting in JavaScript?

Utkarsh Yadav — Sat, 22 May 2021 08:42:53 +0000

Table of content

What is hoisting?
Undefined or not-defined?
Only declarations are hoisted!
Examples
Thanks for reading. support!

what is hoisting?

Hoisting in JavaScript is a must known concept for beginners. Well, It is a phenomenon where we can access the functions and variable in JavaScript even-before initialising it.

Sounds Amazing! But it's true we can do this is JavaScript. Unlike other languages like C, C++, python etc. where we need to initialise or define the variable prior to make a call or access it.

Conceptually, for example, a strict definition of hoisting suggests that variable and function declarations are physically moved to the top of your code, but this is not in fact what happens. Instead, the variable and function declarations are put into memory during the compile phase, but stay exactly where you typed them in your code.

This is know as Hoisting. The hoisting is can be little confusing while understanding it in first go. So i would recommend you to understand Behind the scenes working of JavaScript from my previous post. To know about jargon like: GEC(Global Execution Context), LEC(Local Execution Context), Call Stack etc.

Undefined or not-defined?

Just remember, when JavaScript skims the code in first go, all the variables are placed with a Undefined Placeholder.

In other words, when the variable is defined in memory stack initially by JavaScript. The default value is set to be Undefined.

Examples

Code:

getName();
console.log(x);
console.log(getName);
var x = 10;
function getName(){
   console.log("I'mma  Hoisted");
}

Console LOG[]

I'mma Hoisted
undefined
ƒ getName(){
   console.log("I'mma  Hoisted");
}

Exaplanation

getName(); - The function is called here, and the function outputs the console statement inside it. As functions can be declared and accessed from anywhere.
Console.log(x); - This is a variable and if a variable is declared prior to initialisation, IT IS HOISTED BY JavaScript.
console.log(getName); - This is the name of function being logged out. This means the reference to the function is invoked/logged from the memory component of global variable.

Only declarations are Hoisted!

JavaScript only hoists declarations, not initialisation. If a variable is declared and initialised after using it, the value will be undefined. For example:

console.log(num); // Returns undefined, as only declaration was hoisted, no initialisation has happened at this stage
var num; // Declaration
num = 10; // Initialisation

Conclusions:

Accessing variable prior to initialisation is hoisting.
Hoisting are done mostly in variables.
Only declarations are Hoisted.
Also, if functions are declared with variable that will also be hoisted.

For Example:

Code:

var getName = () => {
   console.log("Not Hoisted");
}

Console

undefined
// because we are using variable names for the function declaration. and we know it will hoisted if tried to access prior to initialisation.

Thanks for reading.
Happy Coding.

Follow me on:

LinkedIn: https://linkedin.com/in/yadavutkarsh
Website: https://utkarshwhocodes.netlify.app
Blogs-Dev: https://dev.to/uyadav207
Blogs-Personal: https://utkarshwhocodesblogs.netlify.app

Behind the scenes: JavaScript 🤯

Utkarsh Yadav — Sun, 16 May 2021 09:47:34 +0000

Table of Content

What is javascript?
Let Breakdown jargons from the definition.
Why it is called Synchronous single-threaded language?
How javascript works behind the scenes?

What is JavaScript?

It is lightweight, interpreted, just in time compiled programming language with first-class functions. JavaScript is a synchronous single-threaded language. And for many, it is the most confusing language in the world accompanied by the title of most loved language and used language in the world of development.

The definition of javascript is itself the most confusing unless you know the Js Jargons, But don't worry that is why I am here to explain these jargons which will make you fall in love with javascript.

Please Do follow the Series and share as much as you can.

Breaking down some jargon in the definition of javascript.

Light-Weight, Interpreted, Just in time compiler Language

Javascript is Lightweight represent that javascript is faster than several languages. It also uses interpreter and JIT compilation both for its code to be compiled behind the scenes i.e inside the browser that involves compilation during the execution of a program at run-time rather than before execution.

Why it is called Synchronous single-threaded language?

Because javascript continuously executes the code not waiting for any microtasks to be complete it just goes on execution after the execution completes then the leftover microtask executes which is why it is synchronous language.

But what about single-threaded? It is because it executes one line (single thread) at a time as it has an interpreter executing code one line at a time.

I hope that makes sense to you?

How javascript works behind the scenes?

This is the most crucial part of understanding javascript. Read it carefully. If you know this you are ahead of 70% of developers sitting In MNC's.

Everything inside javascript happens inside an "Execution Context".

Whenever the .js script runs it creates an Execution Context, the execution context itself consists of two different Components.

The Two different Components of the execution context are:

Memory/Variable Component
Code Execution Components

Variable/Memory Component Whenever the control starts from the top of the script in the .js file, it skims over each variable defined in the script and treats them as a Key-value pair with the initial values as:

if Variables : undefined or if Functions : Reference to function that is complete Function code in text.

Example:


var num = 10;
function justPrint() {
   console.log(num);
}
justPrint();

Working

Explanation

The whole code runs in two execution phases:

Phase 1: A global execution context is created in the call stack.
- Javascript skims the code line by line (single-threaded language)
- Allocates memory to each variable and function as show above pictorially.
- Phase 1 ends. Simple!

Remember: Variable are marked with placeholder undefined and functions are as-it-is referenced inside memory component

Phase 2: In this phase, Javascript executed the Code in the Code component of the global Context execution

Now let see how? using code and explaining each line.

LINE: 1

var num = 10;

Now javascript assign 10 to num variable replacing undefined;

LINE: last

justPrint(); // function call

When javascript sees this line: It created another Execution Context for the Function as same as Global execution context but this time inside a Global Execution Context which is known as Local Execution Context

This is kind of weird about javascript right?
But it is!

The same work that we did above is repeated.

Pushing the Local Execution in Call stack above the Global Execution Context.
Two-phase creation
Memory allocation
Code execution

After the code is executed the local execution context popped out of the call stack.

After the popping out of LEC, the Global execution context is popped out.

This is how javascript works behind the scenes, sounds amazing right?

If you liked the blog please follow me and my content.

Share and comment for any doubts.

Thanks for Reading.
Happy Coding!

New Series: Do You know javascript?

Utkarsh Yadav — Sun, 09 May 2021 18:56:21 +0000

Hey Folks! I want to make a new series for the ultimate basics of javascript like never before.

In this series, we will be talking about:

How javascript works?
How javascript code is executed?
What is hoisting in javascript?
How functions work in javascript?
Window and this keyword, what the heck it is?
Undefined vs not defined.
The scope chain.
Let vs const vs var.. let's debate?
BLock scope and shadowing.
Closures in javascript.
First-class functions.
Second Class Functions.
Callbacks.
Event Loops.
js engine by Google V8 architecture.
SetTimeOut().
Function Currying in javascript.
Functional Programming in javascript.

Many More...

Thanks For your support.
Keep supporting and I will be bringing this content for you guys.

Happy Coding!

Read my blogs on my personal Gatsby blog website: https://utkarshwhocodesblogs.netlify.app

Client-Side-Rendering : Server-Side-Rendering

Utkarsh Yadav — Fri, 30 Apr 2021 14:07:08 +0000

Table of content

Introduction
What is SSR?
What is CSR?
Pros-Cons?
When to use CSR?
When to use SSR?

Introduction

Earlier, the website was used for content and text-based information generally. Most websites showed only static content, like companies' products, tools, jobs, and sales leads. The Server Side rendering was the only way to get the HTML page rendered on the browser. The servers were to make these HTML Documented pages available to the user whenever the user wants and thus need to load complete information again and again for each new request.

Nowadays, Web Development is gone to another level and consumed maximum Tech market as many application and web-based and as per the requirement and availability is converted into a mobile application using the same tech isn't it amazing? Sever application builds over the web for shopping, social media, banking solutions, online streaming platforms.

What is Server-Side-Rendering?

In SSR, when a user makes a request for the webpage, the server prepares an HTML page by fetching user request-specific data and sends it to the user's browser over the internet. the Browser then Render the HTML page and compile the javascript for the web page.

This entire work by the server and the browser can take up to several milliseconds. But there is a problem in the whole process as it makes slow user Interactions with the website, as a user when requesting for another page within the same website server repeats the whole and it sucks.

This results in increased load on the server and bandwidth consumption over the internet.

What is Client-Side Rendering?

Client-Side-Rendering is a New Approach to rendering the web pages of the website by the use of javascript and is faster than SSR in some aspects. May javascript Frameworks like React, Angular have out-of-the-box CSR facility.

In CSR, the javascript file is responsible for rendering the DOM elements of the website and the fun and the most amazing part is that without re-rendering the entire DOM Tree the CSR re-renders or update only updated Dom Elements inside the DOM Tree.

They use Virtual DOM, where the only state updated DOM elements are only re-rendered not the complete webpages' DOM Tree.

Today, Angular and React.js are some of the best examples of libraries used in client-side rendering.

Pros-Cons?

SSR PROS and CONS:

PROS
- Better SEO
- Faster initial Page Load
- Great for static sites.
CONS
- Slow rendering
- Complete Re-rendering
- Not God User Interactions

CSR PROS and CONS:

PROS
- Rich User Interaction
- Fast Rendering
- No Repeted Re-rendering ( Virtual DOM )
CONS
- Not Good SEO
- Time to load initially.
- Lot of dependency on other libraries.

When to use CSR?

This is an important aspect of any tech stack that when to use what?

SSR can be used where the need for the User-Interface is low or demands static pages.
Less Dynamic Content.
Need for Rich SEO usually for blogs and information.
Documentation instead of complex user interaction and information transfering.

When to use SSR?

An application has a very complex UI with many features and functionalities.
An application has large and dynamic data.
Write preference of the site is more than reading.
The focus is on rich sites and a huge number of users.

Make your decision wisely.

Thanks for Reading the Blog.
Hope you Like it.
Happy Coding!

React: Conway's Game of Life.

Utkarsh Yadav — Sun, 11 Apr 2021 15:35:58 +0000

Table of Content

What is Conway's Game of Life
Rules of the Game.
Coding out the simulation using React
CodeSandBox Playground

What is Conway's Game of Life

The Game of Life, also known simply as Life, is a cellular automaton devised by the British mathematician John Horton Conway in 1970. It is a zero-player game, meaning that its evolution is determined by its initial state, requiring no further input. One interacts with the Game of Life by creating an initial configuration and observing how it evolves.

View full details for the Game here

Rule of the Game

Any live cell with fewer than two live neighbors dies, as if by underpopulation.
Any live cell with two or three live neighbors lives on to the next generation.
Any live cell with more than three live neighbors dies, as if by overpopulation.
Any dead cell with exactly three live neighbors becomes a live cell, as if by reproduction.

Coding out simulator using React

Generating Empty Grid (our first task)

The total number of Row and columns for the grid is to be set initially.

Note: Totally depends as per the requirement. The best is to use 30/30.

const numRows = 30;
const numCols = 30;

const generateEmptyGrid = () => {
    const rows = [];
    for (let i = 0; i < numRows; i++) {
      rows.push(Array.from(Array(numCols), () => 0));
    }
    return rows;
  };

Explanation:

we used Array rows [] length of numRows: 30
For every row index we are pushing numCols: 30 columns.
This function will be later used as a clear function to clear, to set the grid to empty.

[   {1, 2, 3, ...., 30},
    {1, 2, 3, ...., 30},
    .
    .
    30th row    ]

Putting Random stuff on the grid

Requirement: Button and funtion

Creating Function generateRandomStuff()

 const generateRandomStuff = () => {
    const rows = [];
    for (let i = 0; i < numRows; i++) {
      rows.push(
        Array.from(Array(numCols), 
       () => (Math.random() > 0.5 ? 1 : 0))
      );
    }
    return rows;
  };

In this function, we are actually randomizing the column's number and choosing random columns in each row and if the Math.Random() value for the columns is greater than 0.5 we put that 1: black else 0:cleared;

State management for `setting Random Stuff` and `clearing the stuff` from the grid

const [grid, setGrid] = useState(() => {
    return generateEmptyGrid();
  });

using use State: we can do the state management for the grid.
Initially: The grid is set to empty.

Generate Random stuff: TO do this we will call for the function

const generateRandomStuff = () =>

and set it in grid : setGrid(generateRandomStuff())

 <button
    onClick={() => {
       setGrid(generateRandomStuff());
      }}>
      Random Stuff
</button>

Generate Empty Grid: To do this we will call for the function

const generateEmptyGrid = () =>

and set it in Empty the grid : setGrid(generateEmptyGrid())

 <button
    onClick={() => {
      setGrid(generateEmptyGrid());
       }}>
    Clear
</button>

Running Simulation (Logic) :)

For the simulation we need some preprocessing.

const redundant = [
  [0.1],
  [0, -1],
  [1, -1],
  [-1, 1],
  [1, 1],
  [-1, -1],
  [1, 0],
  [-1, 0]
];

an array is taken with all steps, where we can move

We can move in all eight directions in the grid.

 const [Simulation, setSimulation] = useState(false);

  const runningRef = useRef(Simulation);
  runningRef.current = Simulation;

  const runSimulation = useCallback(() => {
    if (!runningRef.current) {
      return;
    }
    setGrid((g) => {
      return produce(g, (gridCopy) => {
        for (let i = 0; i < numRows; i++) {
          for (let k = 0; k < numCols; k++) {
            let neighbors = 0;
            redundant.forEach(([x, y]) => {
              const newI = i + x;
              const newK = k + y;
              if (newI >= 0 && newK >= 0 && newI < numRows && newK < numCols) {
                neighbors += g[newI][newK];
              }
            });
            if (neighbors < 2 || neighbors > 3) {
              gridCopy[i][k] = 0;
            } else if (g[i][k] === 0 && neighbors === 3) {
              gridCopy[i][k] = 1;
            }
          }
        }
      });
    });
    setTimeout(runSimulation, 100);
  }, []);

we will make a state simulation and setStimulation which will be initially false. and will be triggered to true using the button.
const runSimulation = useCallback(() =>{}: here we will be using callback function.
Logic:
- we will traverse the grid from index {0,0} to {numRows,numCols}
- Take a counter for the neigbours.

What we exactly want is:

if there is a cell in the grid which is set with exactly 2 or 3 neighbors in any of the direction.
if there is a cell in the grid that is not set and has three set or live neighbors become set or live.
All other cells that are set or live are now set to dead or unset, whereas all unset will remain unset.

 redundant.forEach(([x, y]) => {
              const newI = i + x;
              const newK = k + y;
              if (newI >= 0 && newK >= 0 && newI < numRows && newK < numCols) {
                neighbors += g[newI][newK];
              }
            });

we will move in 8 directions from redundant array
following the above rule we have written, three cases.

After completion of the simulation, we run the function once after the interval of time.

For this we use setTimeout(runSimulation, 100);

Button for the simulation.

<button onClick={() => {
     setSimulation(!Simulation);
       if (!Simulation) {
           runningRef.current = true;
           runSimulation();
         }
       }} >
{Simulation ? "Stop" : "start"} Simulation
</button>

Note: Using immer for mutating the state.

If you like the content. kindly let me know.

Happy Coding.

Context API + Hooks : Building minimalist Dark Mode

Utkarsh Yadav — Fri, 05 Mar 2021 15:25:09 +0000

Why this hook ?

The react application (Complex), data is passed in top-down approach (Parent-to-children components) and this made the manual passing of props more complicated. The props for (Example: UI Theme, Local Preferences) become "cumbersome". So Facebook engineers made some efforts to save us. (Developed another Hook).

What is `useContext()` hooks ?

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

import React, { useContext } from 'react';

When to use ?

Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language.

One of the use Case: (Making UI Theme) 🌗

we will be learning Context in different steps below:

Setting up Children.js (passing props to child component).
Setting up App.js (creating Context).
Setting up Colorify.js (tweaking UI themes from child).

Setting up `Children.js`.

Make a Colorify.js file, which will later contain buttons and some logic to toggle from dark Mode and Light Mode.
Now make a new component file named Children.js, which will act as a parent for his Child Component Colorify.js

see the below diagram to understand the flow of data.

The main gotcha is that... The props will be passed to children.js component and will be accessed down the REACT DOM component i.e to its child components.

Note: more the children, all of them can have access to the props passed to children.js.

import React from "react";
import Colorify from "./Colorify";

export default function Children() {
  return (
    <div>
      <Colorify /> // passing children Component
    </div>
  );
}

Setting up `App.js` (Creating Context).

Import children component Children.js.
Making themes Object.

const themes = {
  light: {
    foreground: "#000",
    background: "#fff"
  },
  dark: {
    foreground: "#fff",
    background: "#000"
  }
};

Now it's time to creating context: (Moment of truth).

export const ThemeContext = React.createContext(themes);

This line of code means, we are exporting the initialized Context created as ThemeContext and passing the themes props(value) as an argument.

Inside functional Component, passer a wrapper component <ThemeContext.Provider> which has a value prop pass the theme object as the value prop.
And inside the wrapper component pass the children Component where the props need to pass.
This complete piece of code means that ... You are passing object themes as the default value to prop, that is passed to child component in React DOM Hierarchy.

export default function App() {
  return (
    <ThemeContext.Provider value={themes}> // wrapper Component
      <Children />  // children Component (Props will be passed and accessed to it.)
    </ThemeContext.Provider>
  );
}

The Complete Code for App.js is below:

// Complete app.js code

import "./styles.css";
import React from "react";
import Children from "./Children";

const themes = {
  light: {
    foreground: "#000",
    background: "#fff"
  },
  dark: {
    foreground: "#fff",
    background: "#000"
  }
};

export const ThemeContext = React.createContext(themes);

export default function App() {
  return (
    <ThemeContext.Provider value={themes}> // wrapper Component
      <Children />  // children Component (Props will be passed and accessed to it.)
    </ThemeContext.Provider>
  );
}

Setting up `Colorify.js` Component (Final Logic)

The final logic for changing UI Theme from dark to light and forth.
Start by importing useContext and useState.

import React, { useContext, useState } from 'react';

Importing the Context that was created in app.js

import { ThemeContext } from "./App";

Writing Logic for Dark Mode:

export default function Colorify() {
  const theme = useContext(ThemeContext);
  const [state, setState] = useState(theme.light);
  const darkMode = () => {
    setState(theme.dark);
  };
  const lightMode = () => {
    setState(theme.light);
  };
  return (
    <>
      <div
        style={{
          backgroundColor: state.background,
          color: state.foreground,
          height: 100,
          width: 200,
          margin: 100,
          border: `1px solid ${state.foreground}`
        }}
      ></div>
      <button onClick={darkMode}>Dark Mode!</button>
      <button onClick={lightMode}>Light Mode!</button>
    </>
  );
}

Dark Mode Functions:

 const darkMode = () => {
    setState(theme.dark);
  };

Light Mode Functions:

 const lightMode = () => {
    setState(theme.light);
  };

we are just changing state from theme.dark to theme.light
and setting the background color of the Component as state.foreground for text color and state.background for background color.

The Complete Code for Colorify.js is:

// Complete Code for Colorify.js

import React, { useContext, useState } from "react";
import { ThemeContext } from "./App";

export default function Colorify() {
  const theme = useContext(ThemeContext);
  const [state, setState] = useState(theme.light);
  const darkMode = () => {
    setState(theme.dark);
  };
  const lightMode = () => {
    setState(theme.light);
  };
  return (
    <>
      <div
        style={{
          backgroundColor: state.background,
          color: state.foreground,
          height: 100,
          width: 200,
          margin: 100,
          border: `1px solid ${state.foreground}`
        }}
      ></div>
      <button onClick={darkMode}>Dark Mode!</button>
      <button onClick={lightMode}>Light Mode!</button>
    </>
  );
}

Check out the preview on codesandbox and play along

Hope you enjoyed the use case for the useContext Hooks.
Please Do comment!
Happy Coding!

NPM vs Yarn

Utkarsh Yadav — Tue, 02 Mar 2021 11:16:32 +0000

What is NPM (Node Package Manager) ?

npm commonly known as node package manager, initially released in 2010, is a tremendously popular package manager among JavaScript developers. It is the default package that is automatically installed whenever you install Node.js on your system.

It consists of three components: the website to manage various aspects of your npm experience, Command Line Interface (CLI) to interact with npm via the terminal, and registry to access an extensive public database of JavaScript software.

What is Yarn ?

yarn was released by facebook in 2016, an another package manager for the JS programing language. The main motive of facebook to build a package manager with optimized performance and security, that were the shortcomings of NPM.

Making a Comparison

Installation
- NPM: Installing Node will give you the access to run and utilize npm. Download Node from the given link Download Node.
- Yarn: To install yarn package manager paste the following code in your command line.

npm install yarn

Popularity

As a developer alway prefer to choose the utility or library that has a huge open source community support. I am saying this for two reasons: Firstly, you will get regular updates and bug fixes, that will protect your application and optimise application scalability. Secondly, This could save your lot of time by assisting you directly for any implementations.

Google Trends

Dependencies

The yarn core team do not recommend installing it using npm package, so you can visit these installation options to do as recommended.

Both have similar ways to maintaining their dependencies. hey both provide the package.json file that exists at the root of the project’s working directory. This file keeps all the relevant metadata associated with the project. It assists in managing the project’s dependencies version, scripts, and more.

Yarn introduced new feature to make a smooth transition from npm to yarn by importing package-lock.json

Performance

Yarn wins, yarn is a clear winner in terms of performance, but npm is v5 to v6 showed a bridging gap between performance issues. but still yarn is at the top.

Benchmark test NPM vs Yarn

Security

While Yarn was initially regarded to be more secure, the npm team has made commendable comebacks with the introduction of significant security improvements.

With npm v6, security is built-in. If you try installing code with a known security vulnerability, npm will automatically issue a warning. Also, a new command, npm audit, has been introduced to assist you in recursively assessing your dependency tree to identify anomalies.

Procedure to follow if npm returns error in package

npm audit fix

npm audit fix --force

Updating packages

To upgrade an Existing packages to latest version of packges inside the appliation. Do the Following steps:

How to update Yarn dependency packages

yarn upgrade

particular package updation

yarn upgrade [package-name]

The script will read the package meta data from package-lock.json or yarn.lock file.

CLI (Commands)
- Type npm to see npm list of commands.
- type yarn to see yarn list of commands.

Conclusion

Please choose wisely, by reading the above comparisons. Ultimately, your choice between npm vs. Yarn will depend on your requirements, tastes, and preferences.

Happy Coding!

React Hooks with examples( useState, useEffect, useContext ).

Utkarsh Yadav — Sun, 14 Feb 2021 09:18:27 +0000

Hey! Programmers. Have you ever thought about how React helps us in making a complicated site or an application ?. To develop a large scale application we need to handle a bunch of states and data throughout our application and this in result requires a complicated and well maintained but yet a fragile codebase. This Fragility of the codebase is kind of obvious due to many states and use cases remained UN-handled. To solve this problem React was made available and provided us with many advantages.

One of the main advantages of React framework after the component lifecycle methods is REACT HOOKS, think of it, as an abstract to reduce the code written while using class-based components and lifecycle methods.

Reduces Code.
Improves scalability.
Provide a clear meaning to the data flow.

This post consists only useState, useEffect, useContext Hooks. So without wasting anyone time let's just jump right into understanding each of them together.

useState Hook

syntax:

const [state, setState] = useState(initialState);

terminology:

state: the data that is inside the state and ready to be used.
setState:: this helps in changing the state that is initially set to some value and ready to be manipulated via some functions or an event.
initialState: The initial state that is set by default as a component renders which got change afterwards.

The complexity that can be increased to use useState

const [state, setState] = useState({
  array[], // array of string, object, number etc.
  object,  // object
  string,
  number
});

Examplar CODE :

import React, { useState } from "react";

function App() {
  const [like, setLike] = useState(0);

  return (
    <div>
      <h3>💜 : {like}</h3>
      <button onClick={() => setLike((liked) => liked + 1)}>
        Like 👍
      </button>
      <button onClick={() => setLike((liked) => liked - 1)}>
        unLike 👎
      </button>
      <button onClick={() => setLike(0)}>Reset</button>
    </div>
  );
}

export default App;

Explanation:

The first statement is for importing the hook from react library.
The 3 Rules to remember while using useState.

const [like, setLike] = useState(0);
//Rule 1: This statement means that initially like value is: 0
//Rule 2: After any event, we need to manipulate like using setLike.
//Rule 3: And log `like` to see the state change.

The Code to increment likes. In this code, when onClick Event is trigerred we call setLike and increment the value by passing an iterator liked and incrementing liked state whenever user clicks to like button.

<h3>💜 : {like}</h3>
<button onClick={() => setLike((liked) => liked + 1)}>
  Like 👍
</button>

The Code to decrement likes. In this code, when onClick Event is trigerred we call setLike and decrement the value by passing an iterator liked and decrementing liked state whenever user clicks to like button.

 </button>
 <button onClick={() => setLike((liked) => liked - 1)}>
  unLike 👎
</button>

To RESET the state, i have just reset the state to 0 by calling setLike and explicitly returning 0.

<button onClick={() => setLike(0)}>Reset</button>

Screencasts:

This blogPost is short to help you digest what you have learned. Need to wait for useEffect and useContext. will link it soon.

Thanks for Reading.
Happy Coding.

Please Do Comment!

Dont's Stop Learning Next BlogPost.

Article No Longer Available

ARCTIC CODE VAULT BY GITHUB ORGANIZATION

Utkarsh Yadav — Thu, 16 Jul 2020 20:54:23 +0000

Let Explore it Together

STEP 1 : Open your github repository.

and at the left hand panel have a look at this...

This mean that you are the Arctic Vault Contributor..

What's Arctic Vault?

Arctic Vault is a vault where world's all types of seeds are preserved. Deep in the bowels of an icy mountain on an island above the Arctic Circle between Norway and the North Pole lies a resource of vital importance for the future of humankind. It’s not coal, oil or precious minerals, but seeds.

Millions of these tiny brown specks, from more than 930,000 varieties of food crops, are stored in the Global Seed Vault on Spitsbergen, part of Norway’s Svalbard archipelago. It is essentially a huge safety deposit box, holding the world’s largest collection of agricultural biodiversity.

Supported Article from : https://time.com/doomsday-vault/

Now this methodology is used by GitHub to store our Code.

We are also a part of such big change. are the one those codes are gonna be stored their.

The codes are store within the Silver Halide Films.

What's the github's Role

The GitHub Arctic Code Vault is a data repository preserved in the Arctic World Archive (AWA), a very-long-term archival facility 250 meters deep in the permafrost of an Arctic mountain. The archive is located in a decommissioned coal mine in the Svalbard archipelago, closer to the North Pole than the Arctic Circle. GitHub will capture a snapshot of every active public repository on 02/02/2020 and preserve that data in the Arctic Code Vault.

See the support video from GitHub Explained completely well. Let's deep dive

DEV Community: Utkarsh Yadav

Undefined or not defined?

Table of Content

Undefined

Not Defined

Difference Between Undefined and Not Defined

Window and this keyword ?

What is the shortest program in JavaScript ?

Window Keyword

This Keyword

Working behind the scenes.

How functions work in java Script?

What are functions?

Type of Function expressions in JavaScript

BTS Functions working?

First: Global Execution context

Call stack with functions.

Hoisting in JavaScript?

Table of content

what is hoisting?

Undefined or not-defined?

Examples

Exaplanation

Only declarations are Hoisted!

Behind the scenes: JavaScript 🤯

What is JavaScript?

Breaking down some jargon in the definition of javascript.

Why it is called Synchronous single-threaded language?

How javascript works behind the scenes?

New Series: Do You know javascript?

Client-Side-Rendering : Server-Side-Rendering

Introduction

What is Server-Side-Rendering?

What is Client-Side Rendering?

Pros-Cons?

SSR PROS and CONS:

CSR PROS and CONS:

When to use CSR?

When to use SSR?

React: Conway's Game of Life.

What is Conway's Game of Life

Rule of the Game

Coding out simulator using React

Generating Empty Grid (our first task)

Putting Random stuff on the grid

State management for setting Random Stuff and clearing the stuff from the grid

Running Simulation (Logic) :)

Context API + Hooks : Building minimalist Dark Mode

Why this hook ?

What is useContext() hooks ?

When to use ?

One of the use Case: (Making UI Theme) 🌗

Setting up Children.js.

Setting up App.js (Creating Context).

Setting up Colorify.js Component (Final Logic)

Check out the preview on codesandbox and play along

NPM vs Yarn

What is NPM (Node Package Manager) ?

What is Yarn ?

Making a Comparison

Conclusion

React Hooks with examples( useState, useEffect, useContext ).

useState Hook

Article No Longer Available

ARCTIC CODE VAULT BY GITHUB ORGANIZATION

Let Explore it Together

What's Arctic Vault?

Now this methodology is used by GitHub to store our Code.

We are also a part of such big change. are the one those codes are gonna be stored their.

The codes are store within the Silver Halide Films.

What's the github's Role

See the support video from GitHub Explained completely well. Let's deep dive

State management for `setting Random Stuff` and `clearing the stuff` from the grid

What is `useContext()` hooks ?

Setting up `Children.js`.

Setting up `App.js` (Creating Context).

Setting up `Colorify.js` Component (Final Logic)