DEV Community: Abu Jaid

Basic git commands every web developer should know

Abu Jaid — Thu, 06 Oct 2022 14:28:43 +0000

git init

The git init command is used to initialize a new git repository. this command is used to set up a new repository.

git status

This command can be used to see which files have been modified, which files are new and which files are not tracked by git.

git add

The git add command is used to add files to the staging area.

git commit -m "commit message"

The git commit -m "message" command is used to commit changes to a git repository.

git push

The git push command is used to push commits from a local repository to a remote repository.

git pull

This git pull command is used to fetch and download content from a remote repository and update the local repository to match the remote.

git branch

The git branch command is used to create, list, rename and delete the branches.

git checkout branch

The git branch <branch name> command is used to switch one branch to another branch in a git repository.

git merge

The git merge command is used to join two or more development branches.

deleting a remote branch

The git push origin --delete <branch> is used to delete the remote branch.

deleting a local branch

The git branch --delete <branch> is used to delete the local branch.

squash all git commits into one

to squash all the git commits into one commit.

git rebase -i HEAD~4 (4 is the number of commits to a particular branch)
git push origin <branch_name> --force

git log by the amount

git log -2 (the following command will display only the 3 most recent commits.)

exit git log

The q or z is used to quit from logs.

exit from git vim editor

The :wq is used to save the change. and :wq! is used for no changes to save.

What is this keyword in javascript?

Abu Jaid — Fri, 19 Aug 2022 13:56:44 +0000

The this keyword is probably one of the odder ducks you’ll encounter while trying to learn JavaScript. What it does, in essence, is standing in for the current object that has focus relative to the handler. Here’s an example like the one discussed in the previous section.

    <form name="myForm">
     <input type="text" name="phoneNumber" onchange="checkPhone 
     (this.value)"  />
    </form>

this is used to suggest “this input element,” and value is a property that stores the value associated with this form element. You could also access that same value as the following in order to pass along the value.

<form name="myForm">
<input type="text" name="phoneNumber" onchange="checkPhone (document.myForm.phoneNumber
The this Keyword.value)" />
</form>

Note that the name of the form and the name of the element are both vital in getting at the correct value. That’s one reason for the this keyword; another is simple convenience

How to update nested state in react component without using redux

Abu Jaid — Mon, 06 Sep 2021 13:26:46 +0000

In this article, I'm going to create a simple registration form using bootstrap where we will make a functional component, in this component we will use react useState() hooks,where will make a nested state in a single object and try to update the nested object.it is very difficult to update nested state in real life project.
I'm hoping you are familiar with basic of reactjs,we are not going the basic settings of reactjs,we are going to jump on registration form creation.

let's start to create registration form using Bootstraps.
in App.js file we will create registration form
just copy the snippet of html code.

 <div>
      <form onSubmit={submit}>
        <div className="form-group">
          <input
            type="text"
            className="form-control"
            placeholder="Username"
            name="username"
          />
        </div>
        <div className="form-group">
          <input
            type="text"
            className="form-control"
            placeholder="Email"
            name="email"
          />
        </div>
        <div className="form-group">
          <input
            type="text"
            className="form-control"
            placeholder="State"
            name="state"
          />
        </div>
        <div className="form-group">
          <input
            type="text"
            className="form-control"
            placeholder="City"
            name="city"
          />
        </div>
        <div className="form-group">
          <input
            type="text"
            className="form-control"
            placeholder="Latitude"
            name="lat"
          />
        </div>
        <div className="form-group">
          <input
            type="text"
            className="form-control"
            placeholder="Longitude"
            name="long"
          />
        </div>
        <div className="form-group">
          <button type="submit" className="btn btn-primary">
            Submit
          </button>
        </div>
      </form>
    </div>

now let's start to create a state where the user data will be available in our component.
App.js

export default function App() {
  const [user, setUser] = React.useState({
    username: '',
    email: '',
    address: {
      state: '',
      city: '',
      geolocation: {
        lat: '',
        long: ''
      }
    }
  });

  }

Here we have created a state with nestes state.now lets add name and value attributes in our html code and also add a form submit method submit and onChange event onChange into html inputs field.

 <div>
      <form onSubmit={submit}>
        <div className="form-group">
          <input
            type="text"
            className="form-control"
            placeholder="Username"
            name="username"
            value={user.username}
            onChange={onChange}
          />
        </div>
        <div className="form-group">
          <input
            type="text"
            className="form-control"
            placeholder="Email"
            name="email"
            onChange={onChange}
          />
        </div>
        <div className="form-group">
          <input
            type="text"
            className="form-control"
            placeholder="State"
            name="state"
            value={user.address.state}
            onChange={onChange}
          />
        </div>
        <div className="form-group">
          <input
            type="text"
            className="form-control"
            placeholder="City"
            name="city"
            value={user.address.city}
            onChange={onChange}
          />
        </div>
        <div className="form-group">
          <input
            type="text"
            className="form-control"
            placeholder="Latitude"
            name="lat"
            value={user.address.geolocation.lat}
            onChange={onChange}
          />
        </div>
        <div className="form-group">
          <input
            type="text"
            className="form-control"
            placeholder="Longitude"
            name="long"
            value={user.address.geolocation.long}
            onChange={onChange}
          />
        </div>
        <div className="form-group">
          <button type="submit" className="btn btn-primary">
            Submit
          </button>
        </div>
      </form>
    </div>

onChange events

const onChange = e => {
    let data = { ...user };
    let name = e.target.name;
    let val = e.target.value;
    if (name == 'username' || name == 'email') {
      data = { ...data, [name]: val };
    } else if (name == 'state' || name == 'city') {
      data = {
        ...data,
        address: {
          ...data.address,
          [name]: val
        }
      };
    } else if (name == 'lat' || name == 'long') {
      data = {
        ...data,
        address: {
          ...data.address,
          geolocation: {
            ...data.address.geolocation,
            [name]: val
          }
        }
      };
    }
    setUser(data);
  };

and onSubmit event submit

const submit = e => {
    e.preventDefault();
    console.log(user);
  };

let's see the whole code together.
App.js

import React from 'react';
export default function App() {
  const [user, setUser] = React.useState({
    username: '',
    email: '',
    address: {
      state: '',
      city: '',
      geolocation: {
        lat: '',
        long: ''
      }
    }
  });
  const onChange = e => {
    let data = { ...user };
    let name = e.target.name;
    let val = e.target.value;
    if (name == 'username' || name == 'email') {
      data = { ...data, [name]: val };
    } else if (name == 'state' || name == 'city') {
      data = {
        ...data,
        address: {
          ...data.address,
          [name]: val
        }
      };
    } else if (name == 'lat' || name == 'long') {
      data = {
        ...data,
        address: {
          ...data.address,
          geolocation: {
            ...data.address.geolocation,
            [name]: val
          }
        }
      };
    }
    setUser(data);
  };
  const submit = e => {
    e.preventDefault();
    console.log(JSON.stringify(user));
  };
  return (
    <div>
      <form action="">
        <div className="form-group">
          <input
            type="text"
            className="form-control"
            placeholder="Username"
            name="username"
            value={user.username}
            onChange={onChange}
          />
        </div>
        <div className="form-group">
          <input
            type="text"
            className="form-control"
            placeholder="Email"
            value={user.email}
            name="email"
            onChange={onChange}
          />
        </div>
        <div className="form-group">
          <input
            type="text"
            className="form-control"
            placeholder="State"
            name="state"
            value={user.address.state}
            onChange={onChange}
          />
        </div>
        <div className="form-group">
          <input
            type="text"
            className="form-control"
            placeholder="City"
            name="city"
            value={user.address.city}
            onChange={onChange}
          />
        </div>
        <div className="form-group">
          <input
            type="text"
            className="form-control"
            placeholder="Latitude"
            value={user.address.geolocation.lat}
            name="lat"
            onChange={onChange}
          />
        </div>
        <div className="form-group">
          <input
            type="text"
            className="form-control"
            placeholder="Longitude"
            value={user.address.geolocation.long}
            name="long"
            onChange={onChange}
          />
        </div>
        <div className="form-group">
          <button className="btn btn-primary" onClick={submit}>
            Submit
          </button>
        </div>
      </form>
    </div>
  );
}

Find the maximum element from the array in javascript

Abu Jaid — Sun, 11 Jul 2021 06:18:32 +0000

In this article i am going to find the maximum value from the array,i will use multiple approach to find the maximum value from the array.

Mehod 1: using math method

let max_value = [4,10,3,20];
Math.max.apply(0,max_value)// 20

Method 2: sort array in descending order

let max_value = [4,10,3,20];
let sortedArray = max_value.sort((a,b)=>b-a);
sortedArray[0]; // 20

Method 3: using spread operator(ES6)

let max_value = [4,10,3,20];
Math.max(...max_value); // 20

Method 4: using loop

let max_value = [4,10,3,20];
let max = max_value[0];
let i;
let len = max_value.length;
for(i=0;imax){
 max = max_value[i]; // 20
 }
}

Method 5: using reduce

let max_value = [4,10,3,20];
max_value.reduce((a,b)=>Math.max(a,b)); // 20

Please visit for more information codewithabu

How to remove falsy values from array

Abu Jaid — Sun, 20 Jun 2021 16:02:04 +0000

In this article we will remove falsy values from array.there are only six falsy values in javascript:

[x] undefined
[x] null
[x] NaN
[x] 0
[x] "" (empty string)
[x] and false

Passing Boolean in filter will remove all falsy values.

let users = ['Abu jaid', 0, 'Tarun', null, 'Amit', false, undefined, '', NaN];
let filtered = users.filter(Boolean);
console.log(filtered); // ["Abu jaid", "Tarun", "Amit"]

How to remove duplicates element from array

Abu Jaid — Sun, 13 Jun 2021 14:32:40 +0000

In this post i'm going to remove duplicates element from array,i will try with multiple approaches to remove duplicates element from array.

Method 1
Using Set

const array = ["a","b","c","d","a","c","e","f"];
const m1 = [...new Set(array)];
console.log(m1);
// ["a", "b", "c", "d", "e", "f"]

Method 2
Using object

const array = ["a","b","c","d","a","c","e","f"];
let obj = {};
for (let arr of array){
obj[arr]=true;
}
console.log(Object.keys(obj));
// ["a", "b", "c", "d", "e", "f"]

Method 3
Using Loop

const array = ["a","b","c","d","a","c","e","f"];
const m3 = [];
for(var i = 0;i<array.length;i++){
const arr = array[i];
m3.indexOf(arr) === -1 && m3.push(arr);
}
console.log(m3)
// ["a", "b", "c", "d", "e", "f"]

Method 4
Using Filter

const array = ["a","b","c","d","a","c","e","f"];
const m4 = array.filter((el,index)=>array.indexOf(el) == index);
console.log(m4);
// ["a", "b", "c", "d", "e", "f"]

5 vscode extension should know every web developer

Abu Jaid — Tue, 27 Apr 2021 09:22:22 +0000

I have been using vscode for 3 years now and I like it so much I am sure that you like it too. Extensions are a core part of vscode that add extra functionality to the editor and increase the efficiency of your work. here is my top 5 list.

1. Auto Rename Tag

When you rename one HTML/XML tag, automatically rename the paired HTML/XML tag.

2. Thunder Client

Thunder Client is a GUI-based Rest API Client Extension for Visual Studio Code.

3. ES7 React/Redux/GraphQL/React-Native snippets

This extension provides speedup in your workflow. some builtin snippets are available:
React Components-

rcc

rce

React

imr→ import React from 'react'
imrd→ import ReactDOM from 'react-dom'
imrc→ import React, { Component } from 'react'

GraphQL

graphql→import { compose, graphql } from react-apollo'

4. SonarLint

SonarLint lets you fix coding issues before they exist! Like a spell checker, SonarLint highlights Bugs and Security Vulnerabilities as you write code, with clear remediation guidance so you can fix them before the code is even committed. SonarLint in VS Code supports analysis of JavaScript, TypeScript, Python, Java, HTML & PHP code.

5. GitLens

It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.