DEV Community: Anuj Srivastav

Git Commands Every Developer Should Know

Anuj Srivastav — Wed, 19 Jul 2023 19:59:02 +0000

Git is a powerful version control system that has become an integral part of modern software development. Whether you are a beginner or an experienced developer, understanding and mastering essential Git commands is crucial for efficient collaboration, code management, and tracking changes. In this blog, we will explore some of the most commonly used Git commands and how they can streamline your development workflow.

Essential Git Commands

1. Initializing a Repository:
To start using Git, you first need to create a new repository or clone an existing one. The following commands help you set up a new repository:

git init: Initializes a new Git repository in the current directory.
git clone <repository-url>: Clones an existing repository from a remote server to your local machine.

2. Basic Configuration:
Before you start committing code, it's essential to set your identity in Git:

git config --global user.name "Your Name": Set your name for all commits.
git config --global user.email "youremail@example.com": Set your email for all commits. **
Adding and Committing Changes:**
The heart of Git is its ability to track and manage changes to your code. To save changes to the repository, use the following commands:
git status: Shows the status of your repository, including changed files and untracked files.
git add <file-name>: Adds a specific file to the staging area to be included in the next commit.
git add .: Adds all changes in the working directory to the staging area.
git commit -m "Commit message": Commits the changes in the staging area with a descriptive message.

4. Branching and Merging:
Git allows you to work on separate branches to develop new features or fix bugs without affecting the main codebase. Use the following commands to manage branches:

git branch: Lists all branches in the repository, highlighting the current branch.
git branch <branch-name>: Creates a new branch with the given name.
git checkout <branch-name>: Switches to the specified branch.
git merge <branch-name>: Merges the changes from the specified branch into the current branch.

5. Updating and Synchronizing:
To keep your local repository up to date with the remote repository and vice versa, use these commands:

git pull: Fetches and merges changes from the remote repository to your local branch.
git push: Pushes your local commits to the remote repository.

6. Viewing History and Differences:
Git provides tools to review changes and commit history:

git log: Shows a detailed commit history, including author, date, and commit message.
git diff: Displays the differences between the working directory and the staging area.
git diff <commit-id-1> <commit-id-2>: Shows the differences between two specific commits.

Advanced Git Commands for Efficient Version Control

1. Git Rebase:
Git rebase is a powerful command used to integrate changes from one branch to another by moving or combining commits. It allows you to maintain a linear commit history and avoid the complexities of merge commits. Use the following commands:

git rebase <branch-name>: Rebases the current branch onto the specified branch.
git rebase -i <commit-id>: Interactive rebase that lets you squash, reword, or reorder commits.

2. Git Cherry-Pick:
Cherry-picking allows you to apply a specific commit from one branch to another. It is useful when you need to add a single commit from a different branch without merging the entire branch. Use the following command:

git cherry-pick <commit-id>: Applies the specified commit to the current branch.

3. Git Stash:
When you need to switch to a different branch but have uncommitted changes in your current branch, you can use Git stash to save your changes temporarily. Use the following commands:

git stash: Stashes your changes, saving them for later use.
git stash apply: Applies the most recent stash to the current branch.
git stash pop: Applies the most recent stash and removes it from the stash list.

4. Git Reflog:
The Git reflog keeps a record of all changes made to the repository, including commits, checkouts, and resets. It is a safety net that helps you recover lost or deleted commits. Use the following command:

git reflog: Displays the history of all Git actions in the repository.

5. Git Bisect:
Git bisect is a powerful command used to perform a binary search through the commit history to find the exact commit that introduced a bug. It is an effective way to identify the root cause of issues. Use the following commands:

git bisect start: Initiates the binary search process.
git bisect bad: Marks the current commit as a bad (buggy) commit.
git bisect good <commit-id>: Marks the specified commit as a good (working) commit.
git bisect reset: Exits the bisect session.

6. Git Submodules:
Git submodules allow you to include one Git repository as a subdirectory of another repository. This is useful for managing dependencies and integrating external projects. Use the following commands:

git submodule add <repository-url> <destination-path>: Adds a new submodule to the parent repository.
git submodule update: Initializes and updates submodules after cloning the parent repository.

Note : Remember to use these commands judiciously and always create backups or use Git branches when experimenting with code changes. Happy coding and version controlling!

Why SVG over Other Image formats?

Anuj Srivastav — Wed, 01 Mar 2023 14:29:30 +0000

SVG (Scalable Vector Graphics) is a popular image format that offers several advantages over other image formats like PNG, JPEG, and GIF. Here are some reasons why SVG is preferred over other image formats:

Scalability: SVG images are vector graphics, which means they can be scaled up or down without losing quality. This is because SVG images are created using mathematical equations, rather than a fixed grid of pixels like raster images. This makes SVG ideal for logos, icons, and other graphics that need to be displayed at various sizes.

Small file size: SVG files are typically smaller in size compared to raster image formats like PNG and JPEG. This is because SVG files are written in XML code, which is much more compact than pixel-based image data.

Retina display support: SVG images are resolution-independent, which means they look crisp and clear on high-resolution screens like Retina displays. This is because SVG images can be scaled up to match the screen's resolution without losing quality.

Accessibility: SVG images can be easily customized and manipulated using CSS, making them more accessible for users with disabilities. For example, SVG images can be easily inverted or made to change color on hover, which can be helpful for users with low vision.

Animation: SVG images can also be animated using CSS or JavaScript, which can add interactivity and visual interest to web pages. This can be especially useful for creating interactive infographics, charts, or diagrams.

Overall, SVG is a versatile and flexible image format that offers several advantages over other image formats, making it a popular choice for web designers and developers.

What CHAT GPT Resume Tips for Frontend Developers

Anuj Srivastav — Wed, 01 Mar 2023 14:16:41 +0000

As a frontend developer, you want to make sure that your resume highlights your skills and experience in a way that catches the attention of potential employers. Recently asked to chat GPT for Tips about Frontend Development here what Chat GPT says :

Start with a strong summary: Begin your resume with a brief summary that highlights your key skills and experience. This will help to grab the attention of potential employers and encourage them to keep reading.
Focus on your technical skills: As a frontend developer, your technical skills are what set you apart. Make sure to highlight your experience with programming languages such as HTML, CSS, and JavaScript, as well as any frameworks or libraries you are proficient in (e.g., React, Angular, Vue).
Showcase your projects: One of the best ways to demonstrate your skills as a frontend developer is to showcase your projects. Include a section in your resume that lists some of your most impressive projects, along with details on the technologies you used and your role in the project.
Highlight your design skills: As a frontend developer, you are also responsible for creating visually appealing designs. Make sure to highlight any experience you have with design tools such as Sketch or Adobe Creative Suite, and include examples of designs you have created.
Emphasize your teamwork and collaboration skills: Frontend development often involves working closely with designers, backend developers, and other team members. Highlight your experience working on collaborative projects and your ability to work effectively in a team environment.
Use action verbs: When describing your experience and accomplishments, use action verbs to make your statements more dynamic and engaging. For example, instead of saying "worked on a project," say "led the development of a project."
Keep it concise: Employers are often inundated with resumes, so make sure yours is easy to read and to the point. Use bullet points to break up large blocks of text, and keep your resume to no more than two pages.

By following these tips, you can create a strong resume that highlights your skills and experience as a frontend developer and makes you stand out to potential employers.

Here Adding Some Side Projects Repo to improve your FrontEnd Knowledge -

RSS (React Server Side Rendering) demo
Github: https://github.com/Absolutestunna/React-Server-Side
Blog-Backend (Server/DB integration, ongoing) – RESTful API endpoints and database storage solution.

Github: https://github.com/Absolutestunna/blog-backend
WriterSpace (web app, on-going) – blogging web app for writers.

Github: https://github.com/Absolutestunna/writerSpace
Coffee Uncrowned (website) – Curated list of coffee shops in major cities.

Github: https://github.com/Absolutestunna/responsive-website
Live code: http://absolutestunna.github.io/responsive-website/
Sk8 Shop (website) – Responsive Web Design for a skate shop

Github: https://github.com/Absolutestunna/IY-2.8-SK8
Live Code: http://absolutestunna.github.io/IY-2.8-SK8/

Github Recreate (website) - Responsive websites

Github: https://github.com/Absolutestunna/github

Live Code: http://absolutestunna.github.io/github
Clima (mobile, on-going)

Github: https://github.com/Absolutestunna/Clima
Restaurant (website)

Github: https://github.com/Absolutestunna/IY-7.4-Resturant

Javascript Rest vs Spread Operator - What's the difference?

Anuj Srivastav — Wed, 01 Mar 2023 13:59:28 +0000

In JavaScript, the rest and spread operators are both denoted by the same three dots (...) syntax, but they are used in different contexts and have different effects.

The rest operator is used in a function's parameter list to represent an indefinite number of arguments passed to the function. It allows you to pass a variable number of arguments to a function and handle them as an array inside the function. Here's an example:

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3)); // output: 6

In this example, the ...numbers parameter in the sum function's parameter list represents an indefinite number of arguments that can be passed to the function. The rest operator collects all the arguments into an array called numbers.

On the other hand, the spread operator is used to spread the elements of an iterable (such as an array) into another iterable (such as an array or an object). Here's an example:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, ...arr1];

console.log(arr2); // output: [4, 5, 1, 2, 3]

In this example, the spread operator (...arr1) is used to spread the elements of arr1 into arr2. This results in a new array (arr2) that contains all the elements of arr1 followed by 4 and 5.

In summary, the rest operator is used to collect a variable number of arguments into an array in a function's parameter list, while the spread operator is used to spread the elements of an iterable into another iterable.

The main difference between two is -

The rest operator is used to fill a JavaScript array
with the remaining data from a user.
The JavaScript spread operator allows an array or an
object to be spread or flattened into its elements.

In common terms We can say -

Rest we use for pack elements.
Spread we use for unpack elements.

Leet Code - Longest Common Prefix

Anuj Srivastav — Tue, 26 Jul 2022 20:23:00 +0000

Problem Statement

Write a function to find the longest common prefix string amongst an array of strings.
If there is no common prefix, return an empty string "".

Algorithm

if array is empty, return a prefix of empty string Or if
array has 1 word, return the whole word.
Iterate through letter of first word of Array , and compare
those letters to same Indexed letter to other world.

Example

   let strs = ["flower","flow","flight"]
   So What above line meaning is -
   str[0][0] === str[1][0],
   str[0][1] === str[1][1] and so on....

if the letters match continue to next set of letters
otherwise return the prefix
If the letter is no longer matching then the first word
will mark where the longest common prefix is, so
we add to our empty string.

First Try to Solve Problem using Algorithm

Javascript Function for Longest Common Prefix

/**
 * @param {string[]} strs
 * @return {string}
 */
var longestCommonPrefix = function(strs) {
let result = "";
//array is empty, return a prefix of empty string
if (strs.length === 0) {return ""}

//array has 1 word, return the whole word
if (strs.length === 1) {return strs[0]}

//Iterate through letter of first word of Array
for(let i=0 ; i<strs[0].length ; i++){
//compare those letters to same Indexed letter to other world.
 for(let j=1 ; j< strs.length ; j++){
 if(strs[0][i] == strs[j][i]){
     continue;
 }else{
     return result
 }
 }

/*If the letter is no longer matching then the first word 
  will mark where the longest common prefix is, so 
  we add to our empty string*/
result += strs[0][i];
}
return result;    
};

Test Cases

Input: strs = ["flower","flow","flight"] Output: "fl"

Input: strs = ["dog","racecar","car"] Output: ""

Input: strs = ["",""] Output: ""

Leet Code - Integer to Roman Numeral Function in JavaScript

Anuj Srivastav — Sat, 23 Jul 2022 12:12:00 +0000

Algorithm

for decimal number X

Create a Object for each symbol as key and it's respective value

  const roman = {
    M: 1000,
    CM: 900,
    D: 500,
    CD: 400,
    C: 100,
    XC: 90,
    L: 50,
    XL: 40,
    X: 10,
    IX: 9,
    V: 5,
    IV: 4,
    I: 1
  };

find the highest decimal value V that is less than or
equal to the decimal number X.
Store the Roman numeral that you found after Subtracting
it's value V from X
X = X - V
Repeat above Process until you get zero of X

Example

X = 36

Javascript Function to Covert Integer to Roman Numeral



/**
 * @param {number} num
 * @return {string}
 */
const roman = {
    M: 1000,
    CM: 900,
    D: 500,
    CD: 400,
    C: 100,
    XC: 90,
    L: 50,
    XL: 40,
    X: 10,
    IX: 9,
    V: 5,
    IV: 4,
    I: 1
  };
var intToRoman = function(num,result=[]) { 
if(num == 0){
  return ''
}
for(const props in roman){
 if(roman[props]<=num){
  result.push(props);
  num = num - roman[props];
  intToRoman(num,result);
  return result.join("");
} 

}

};
console.log(intToRoman(36));

Test Cases :

Input: num = 3 Output: "III" Explanation: 3 is represented as 3 ones.

Input: num = 58 Output: "LVIII" Explanation: L = 50, V = 5, III = 3.

Input: num = 1994 Output: "MCMXCIV" Explanation: M = 1000, CM = 900, XC = 90 and IV = 4.

Leet Code - Roman Numeral to Integer Function in JavaScript

Anuj Srivastav — Fri, 15 Jul 2022 21:41:00 +0000

Algorithm

Create a Object for each symbol as key and it's respective
value
const romanobj = { I : 1, V : 5, X : 10, L : 50, C : 100, D : 500, M : 1000 }
Split the Roman Numeral string into Roman Symbols or in different word split string into Characters.
Take a Symbol from Starting from 0 index
1). If current value of symbol is greater than or equal to
the value of next symbol, then add this value to the
total.
2). else subtract this value by adding the value of next
symbol to the total.

Javascript Function to Covert Roman Numeral to Integer

/**
 * @param {string} s
 * @return {number}
 */
const obj = {
I      :     1,
V      :     5,
X      :     10,
L      :     50,
C      :     100,
D      :     500,
M      :     1000
}
var romanToInt = function(s) {
let result = 0;
for(let i=0;i<s.length;i++){
if(i+1<s.length){
if(obj[s[i]]>=obj[s[i+1]]){
 result = result + obj[s[i]];

}else{
 result = result + obj[s[i+1]]-obj[s[i]];
i++;
 } 
}else{
result = result + obj[s[i]];
}
}
return result;

};

Test Cases

Input: s = "III" Output: 3 Explanation: III = 3.

Input: s = "MCMXCIV" Output: 1994 Explanation: M = 1000, CM = 900, XC = 90 and IV = 4.

LeetCode — Valid Parentheses

Anuj Srivastav — Wed, 13 Jul 2022 20:49:00 +0000

Given a string s containing just the characters '(', ')', '{', '}', '[' and ']', determine if the input string is valid.

Solution

var isValid = function(s) {
let arr = [];
const bracketObj = {
"{":"}",
"(":")",
"[":"]"
}
for(let i=0;i<s.length;i++){
   if(s[i] =="{"|| s[i] == "(" || s[i] == "["){
       arr.push(s[i]);
   }else if(bracketObj[arr.pop()] !== s[i]){
   return false;
   }
}
return arr.length === 0 ;
};

Test Cases Example

Input: s = "()" Output: true

Input: s = "()[]{}" Output: true

Input: s = "(]" Output: false

Input: s = "([)]" Output: false
Input: s = "(("
Output: false`
**
CodeSandBox Link **

https://codesandbox.io/s/valid-parentheses-1gs732?file=/src/index.js