DEV Community: Suprabha

Github Tips

Suprabha — Sat, 28 Jan 2023 20:49:48 +0000

This article is for beginners as well as for the experts 😉, as this is going to help you to avoid all the pitfalls that could lead to failure state.

Here, you will learn efficient way to start the projects and push it into Github/Gitlab.

Let’s see what we are going to learn in this article:

Synchronize Local with Remote
Working on Branch
Status of your work
Land your work

Setup Git

Make sure to configure the user information which will be used across all repositories.

Set the user name:
$ git config --global user.username

Set the Email Address:
$ git config --global user.email

Once you have done the setup, will be able to push the changes into github.

1. Synchronize Local with Remote

It is important to always ensure that you have the repository on your local machine. There are two things can happen:

A. You can create your own repository

Go to the repository directory
```
$ cd project-name
```
Initialize the git
```
$ git init
```

B. If you are working from others repository

To clone the repository locally.

$ git clone [git@github.com](mailto:git@github.com):suprabhasupi/suprabha.me.git

Yuppy! Now have cloned the repository local.

2. Branch

Git branches are effectively a pointer to a snapshot of your changes.
You can create a new branch anytime when you have to work on any feature, fix, or any chore issues.

Why do you need to create a branch?

You create a branch to ensure that main branch should always a production ready code.
You can create a new branch by following command:

$ git branch branch_name

The above command will create a new branch. So to confirm the branch names you can enter following command:

$ git branch

main
branch_name

To switch from main to branch_name, or any other branch:

$ git checkout branch_name

If you want to create a new branch and switch into it, you can use following command:

$ git checkout -b branch_name

The above command will create a new branch and switch to branch_name branch.

3. Status

When you want to track the work you've done, such as which files you've updated
Here is the command to check the status of your work:

$ git status

4. Land your work

Let’s add, commit and push your work into the remote repository.

add a single file:
$ git add file_name

add all files:
$ git add .

commit your code with valid message:
$ git commit -m “initial commit“

push your work:
$ git push origin branch_name

to check your commit log:
$ git log

merge local_branch to another_branch:
$ git merge branch_name

Here are a few tips that can help you save time when working with Git:

Let’s say you deleted a file a month back, but one day you needed it. How can you get the latest state of the file which has been already deleted?

Ans: This is the command which helps you to find the commit log of that particular file:
```
$ git log --full-history -- ${file_path}
```
The above command finds the commit ID that deleted the file.
After checking the commits, and backed up one more by entering the below command:
```
$ git checkout HEAD~1
```
This loads the file right before it was deleted 🙌
Resolve Conflict

Let’s say, you took a pull from main branch and you had a conflict.
There are few command which will help you in terms of fixing or aborting the conflict.

This command will help to see a list of commits that caused conflict
```
$ git log --merge
```
Once you fix the conflict, make sure to commit and push.

The below command helps to exit from the merge process and back to original state.
```
$ git merge --abort
```
How to check staged changes of any tracked files. Let’s say you have added the file and now you wanted to checkout the changes. This is the following command you can use:
```
$ git add file1.jsx
$ git diff --cached file1.jsx
```
Do you know you can store temporary commits as well in local?

Yes, you can stash your changes and when you want those changes back you can get them back.

Check out these important commands:

To save temporary the updated changes:
$ git stash

To check the list of stash stack:
$ git stash list

Get the last stash changes from stash stack:
$ git stash pop

Delete the last stash changes from the stash stack:
$ git stash drop

Thanks for reading the article!

🌟 Twitter

📚 Ebooks

🌟 Instagram

Cheatsheet for Web Developers

Suprabha — Sun, 19 Jun 2022 12:06:04 +0000

If you are searching for cheatsheet, here I am sharing all the cheatsheet which will definitely going to make you life easy 😉

Checkout the amazing Cheatsheet here 👇

1️⃣ HTML Cheatsheet

Online interactive HTML Cheat Sheet contains useful code examples and web developer tools, markup generators, and more.

2️⃣ CSS Reference

Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, Python, PHP, Bootstrap, Java, etc.

3️⃣ Git Sheet

This cheat sheet features the most important and commonly used Git commands for easy reference. INSTALLATION & GUIS.

4️⃣ OverAPI

OverAPI.com is a site collecting all the cheatsheets, all!

5️⃣ Dev Hints

This is a modest collection of cheat sheets for ES6, SASS, etc.

6️⃣ Cheatography

Cheatography is a collection of 5047 cheat sheets and quick references in 25 languages for everything from programming to travel!

🌟 Twitter

📚 Ebooks

🌟 Instagram

Pure vs Impure Functions

Suprabha — Tue, 17 May 2022 05:34:59 +0000

These are the two terms that you always hear in a programming language called Pure and Impure functions.

You know Pure Function is always dependent on arguments and there should not be any side effects.

What hack is Side Effects? ☠️

When you try to use external code in the function or if you are mutating a variable then it creates a Side Effect.

Example:

let num = 10
function mul(val) {
    return num += val  
}

As you can see in the above snippet, mul the function has a dependency on an outer variable called num. Also, mutating num value, which makes its impure function.

Let’s checkout one more quick example:

function hello() {
  console.log("Hello Folks!");
}

So, what do you think about the above snippet? 🤔

Yeah! this is also an impure function 😵‍💫

As you all know that JavaScript is synchronous, using `console` or any `callback` or `promise/fetch` will make the function asynchronous.

Here using the console, which is a Web API makes it an impure function.

Let's checkout other side effects with examples:

DOM Manipulation, any callback or reading/writing files

function mul(a,b) {
    document.write("Started Multiplication")
    return a * b
}
console.log(mul(2,5))

Updating or Modifying a global variable in pure function

let x = 10

function mul(a,b) {
    document.write("Started Multiplication")
    return a * b * x
}
console.log(mul(2,5))

Here also, mutating outer variable which is depending on an external variable.

let x

function mul(a,b) {
    x = 10
    return a * b * x
}
console.log(mul(2,5))

Let's Understand the Pure and Impure function, as now you have an idea of the side effects

Pure Function

It always returns the same result if the same arguments are passed
It never depends on any state/data/change during the execution of a program
It always returns something
Here, writing test cases will be straightforward

Impure Function

Changing the internal state of any argument which has been passed
It may take effect without returning anything
Writing test cases will be a bit complicated as there may be side effects

Pure and Impure Methods

These are pure methods:

Array.map()
Array.reduce()
Array.filter()
Array.concat()
... (spread syntax, which is mostly used to create copies)

These are impure methods:

Array.splice()
Array.sort()
Date.now()
Math.random()

Bonus Point 🔖

You can clone an external state into a pure function

Cloning an external state into a pure function does not make the function impure.

Example:

let name = ["suprabha", "supi"]

function fullName(newName, name) {
  let clonedName = [...name]
  clonedName[clonedName.length] = newName
  return clonedName
}

console.log(fullName("sumi", name)) // ['suprabha', 'supi', 'sumi']

In the above snippet, you are using ... spread operator in fullName the function. It will create a clone of it and then update it. So, it doesn't depend on name variable.

Thanks for reading the post!

Hope you found this article useful. If you have any questions, feel free to drop them into the comment section or reach out to me here 👇

🌟 Twitter

📚 Ebooks

🌟 Instagram

7 Productive website for web developers

Suprabha — Sun, 08 May 2022 08:17:19 +0000

Hello devs 🙋🏻‍♀️

Here, I found pretty amazing websites.
These sites will definitely increase your productivity by 100% 🚀

1️⃣ Embeddable Widget Apps for Notion

Add 3rd party apps embed or create a custom embed for your Notion Document.

2️⃣ Carbon

Carbon is the easiest way to create and share beautiful images of your source code.

3️⃣ Small Dev tools

FREE tools for developers like encoder/decoder, HTML/CSS/Javascript formatters, minifiers, fake or test data generators & much more.

4️⃣ Remove Background from Image

Remove backgrounds 100% automatically in 5 seconds with zero clicks.

5️⃣ Metatags

Meta tags are specific snippets of text and image content that provide a summary for a webpage.

6️⃣ ReadMe

The easiest way to create a README file in minutes visually.

7️⃣ Storytale

It provides illustrations from the best creators worldwide to designers with limits in time and asset skills. Boost your projects.

Thanks for reading this post!
Hope you found few sites useful here ☺️

🌟 Twitter

📚 Ebooks

🌟 Instagram

Understand HTTP CORS Request

Suprabha — Tue, 26 Apr 2022 15:21:50 +0000

You always used HTTP methods like GET/POST/PUT/DELETE, there is one more methods called OPTIONS which used to execute prior to GET/POST/PUT/DELETE methods.

What is CORS 🤔

Cross-Origin Resource Sharing (CORS) is an HTTP-header-based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources.

What is a Preflight request in CORS? 🤨

According to MDN Docs, A CORS preflight request is a CORS request that checks to see if the CORS protocol is understood and a server is aware using specific methods and headers.

It is an OPTIONS request, using three HTTP request headers: Access-Control-Request-Method, Access-Control-Request-Headers" , and the Origin header.

The preflight request is automatically issued by the browser and frontend devs don’t do the options call.

OPTIONS call appears when the request is qualified as "to be preflighted".

How does the Preflight request work?

Before sending a POST request to the server, you will ask the server for a POST request.

OPTIONS /resource/foo
Access-Control-Request-Method: POST
Access-Control-Request-Headers: origin, x-requested-with
Origin: https://foo.bar.org

If the server allows it, then it will respond to the preflight request with an OPTIONS response header, which lists POST:

HTTP/1.1 204 No Content
Connection: keep-alive
Access-Control-Allow-Origin: https://foo.bar.org
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE
Access-Control-Max-Age: 86400

Lets take an example, you are working on a blog website blog.suprabha.me and your API is on api.blog.suprabha.me. It’s really nice and easy to understand to see the prefix of the blog website is “API”.

As you can see the the API(api.blog.suprabha.me) and the origin( blog.suprabha.me) are different, also the hostname is different.

Port and Protocol also follow the same logic as hostname. So if there is any differences in hostname, port, protocol request executed on the page will require a CORS request.

If you notice the header sec-fetch-site is attached to any XHR request in the firefox/chrome browser it will indicate whether this was a same-origin request or not.

A quick example of cross-origin request headers:

Sec-Fetch-Site: cross-site

cross-site tells the request initiator and the server hosting the resource have a different site.

If you try to write a proxy using node or use any services like Cloudflare to proxy your application, which creates an alias to the API which routes api.blog.suprabha.me to blog.suprabha.me/api and moving over the JavaScript clients using the API. subdomain will cut your network traffic in half.

Reference 🧐

Sec-Fetch-Site

🌟 Twitter

📚 Ebooks

🌟 Instagram

11 Productive Websites for Web Developers

Suprabha — Sat, 23 Apr 2022 11:12:12 +0000

Found amazing resources which will save you tons of time as a web developer and increase your productivity👇

1. Unminify

This tool will unminify, reformat, and reindent ugly JavaScript, CSS, HTML, XML, and JSON code, making it readable again.

2. Favicon.io

It quickly generates your favicon from text, image, or choose from hundreds of emojis.

3. Box-shadow

Box Shadows. Show code. Customize Shadows. Add a shadow

4. Metatags.io

Meta tags are specific snippets of text and image content that provide a summary for a webpage. Often meta-tag data shows up whenever someone shares a link on Facebook, Twitter, or other social media.

5. Remove.bg

Remove image backgrounds automatically in 5 seconds with just one click.

6. Poet.so

Capture and share Twitter posts as beautiful images.

7. Carbon

Carbon is the easiest way to create and share beautiful images of your source code.

8. Neumorphism

CSS code generator that will help with colors, gradients, and shadows to adopt this new design trend or discover its possibilities.

9. Lorem Picsum

The Lorem Ipsum for photos.

10. Compressor.io

Achieve huge compressions while keeping the quality of the picture intact

11. PFPmaker

Create professional profile pics from any photo.

I hope, you will find the article useful and boost your productivity with these resources.

🌟 Twitter

📚 Ebooks

🌟 Instagram

Getting started with Web 3.0 for Frontend Engineer

Suprabha — Sat, 02 Apr 2022 08:11:43 +0000

Every new advent of the web is at first baffling(impossible to understand). Web 3.0 is the third generation of internet services for websites and applications that will focus on using a machine-based understanding of data to provide a data-driven and Semantic Web.

Web 1️⃣.0️⃣

Web 1.0 is a read-only web 📖
In period: 1989 to 2005

Web 2️⃣.0️⃣

Web 2.0 is a read-write web 📝
~2005 - Present

Example: Airbnb, Facebook, Twitter, Instagram, Youtube, WhatsApp

📝 Websites were like user-created content uploaded to social-networking services *

Web 3️⃣.0️⃣

Web 3.0 is a read-write-interact web (powered by artificial intelligence) 🌏
Decentralized apps that run on the blockchain
Apps which doesn’t use user personal information to earn money
📝 Web 3.0 is not new, Jeffrey Zeldman, one of the early developers of Web 1.0 and 2.0 applications, had written a blog post putting his support behind Web 3.0 back in 2006 *

Let's checkout in movie terms 😉

Capability of Web 2.0 and Web 3.0 🔥

Web 2.0

Any Social post can be deleted by the platform
Server can go down for any service
Payments service may decide to not allow payment for some work
Computers use the HTTP protocol in the form of unique web addresses to find information, which is stored at a fixed location generally on a single server.

Web 3.0

It's not possible for the platform to delete your post
Server can’t go down
Can’t prevent the payment
As information would be found based on its content, it could be stored in multiple locations simultaneously and hence be decentralized

Features of Web 3.0 🎖️

Open: It’s open in the sense that it’s made with open-source software
Trustless: The network will allow participants to interact directly without going through a trusted intermediary
Permissionless: Including users and providers, can engage without the need for permission from a controlling organization.
Self-governing
Distributed and robust
Native built-in payments

Payment 💰

Let's talk about 2 payments modules:

a. Web Payment

b. Native Payment

a. Web Payment

Companies like Stripe and Paypal have created billions of dollars of value by enabling electronic payments.

b. Native Payment

It has been built upon the root level.
Features:

Secure
Easy
Anonymous

The best Crypto wallets for native payments are MetaMask and Torus

Decentralization is a core tenet of Web 3.0

Examples of Web 3.0 Applications 🌐

Siri

With Siri, we have Samsung Bixby, amazon’s Alexa, which is able to understand my question like where is the nearest park and gives the correct answer.
Wolfram Alpha

It’s a computational intelligence platform that now uses web3.)is a “computational knowledge engine” that answers your questions directly by computation.
Steemit

A great example of web 3.0 social network websites.
Sola

Steemit is a great example of a web 3.0 social network website. It is a decentralized reward platform that runs entirely on the Steem Blockchain social media model. It rewards content creators or bloggers with cryptocurrencies for contributing content on the site.
IDEX

As IDEX is an Ethereum-based exchange, the user would need an Ethereum wallet to trade on the platform.
e-Chat

e-Chat is a web 3.0 app that is powered by a decentralized blockchain. it is widely used to send cryptocurrency. App Store and Play Market have an e-Chat app for their users.
LBRY

LBRY is a web 3.0 video and music website with a library of different forms of content, such as books, music, and videos.
Ethlance

Ethlance is a web 3.0 remote job platform. The decentralized app works on top of the Ethereum blockchain, where anyone can hire and start working in exchange for Ether cryptocurrency, which was never possible with older technology.

Semantic Web 🌐

The goal is to make internet data machine-readable.

Web 3.0 ❗= Semantic Web.
Web 3.0 uses technologies based on Semantic web concepts and natural language processing to make user interaction more intuitive, it also has other features such as widespread use of AI and machine learning.
In the evolution of the Semantic Web computers will be able to understand internet data directly. The idea behind using the semantic web is that it understands and interprets the context and concept of the data. Therefore, when a user searches for an answer, web 3.0 delivers the most accurate and relevant result to the end user.
The goal of the Semantic Web is to make internet data machine-readable.

How Identity Works in Web 3.0 🤔

Identities will be tied to the wallet address of the user interacting with the application.
Wallet addresses are completely anonymous unless the user decides to tie their own identity to it publicly.
User can choose the same wallet across multiple Dapps(Decentralized Applications).

Pros 👍

Efficiency in search results
Big companies also will no longer have control over data, services, or sites.
Sharing information will be easier.
Restrictionless Platform: it is easier for users to transfer their assets or wealth anywhere across the world in no time.
Single Profile Creation: With web 3.0, users do not need to create individual personal profiles for different platforms. A single profile will work on any platform, and the user will have complete ownership of any given information.

👉 Without users’ permission, no corporation can access their data or verify its accuracy. However, users have the choice to share their profiles and sell their data to advertisers or brands.
Connectivity: Web 3.0 will provide the same content across multiple applications and services will be available on different devices accessible from anywhere.

Cons 👎

Transactions are slower on web3 because they're decentralized.
Web 3.0 will be complicated for newcomers to grasp the concept.
Only advanced devices will be able to handle Web 3.0 locking out the population that can’t afford such devices.
UX- interacting with web3 applications can require extra steps, software, and education.
most successful Dapps put very small portions of their code on the blockchain as it's expensive.
People will spend too much time on the internet.

Roadmap of Web 3.0 🛣

If you are really interested in learning Web 3.0, then here is a quick roadmap

Reference 🧐

Summary ⅀

Web 3.0 represents the next iteration or phase of the evolution of the web/Internet and potentially could be as disruptive and represent as big a paradigm shift as Web 2.0 did. Web 3.0 is built upon the core concepts of decentralization, openness, and greater user utility.

Understood the web 3 applications and their features.

Next Section, we will look into MetaVerse and NFT 😍

🌟 Twitter

📚 Ebooks

🌟 Instagram

Centralization vs Decentralization

Suprabha — Thu, 24 Mar 2022 16:19:28 +0000

You have heard about decentralization a lot in Web 3.0 topic. Let's understand centralization and decentralization in deep 👇

Decentralization is a core tenet of Web 3.0

Centralization

Centralization is a form of organizational structure where the decision making capability rests with the top management

Useful:

Higher performance and easier to implement
Single point of failure: malicious actors may be able to take down the network by targeting the central authority.
Participation in the network is controlled by the central authority.

Decentralization

Decentralization is another form of organizational structure that functions by delegating decision-making capabilities to multiple teams across geographies.

Useful:

Lower performance and more complex to implement
No single point of failure: network can still function even if a large proportion of participants are attacked/taken out.
Anyone can participate in the network; there are no “gatekeepers.” Ideally, the cost of participation is very low.

🌟 Twitter

📚 Ebooks

🌟 Instagram

Amazing Resources for Web Developers

Suprabha — Fri, 18 Mar 2022 14:41:38 +0000

Found amazing resources which will save you tons of time as a web developer👇

1. 10015 Tools

It includes text tools, image tools, CSS tools, coding tools (e.g. minifiers), color tools, social media tools, and a few others under a miscellaneous category.

2. Color palettes

This tool displays color palettes sourced from images of nature

3. Unicode Arrows

Unicode Arrows a one-stop location to copy and paste

4. Iconduck

This has 100,000 icons that are searchable by keyword.

5. Glassmorphism CSS Generator

This is an online generator that lets you build a “glassmorphism” effect on a page element.

6. Skuawk

It's an alternative to Unsplash, for stock images 😉

7. Doodad Pattern Generator

This interactive tool allows you to build your own patterned backgrounds that you can export in a variety of formats.

8. Buttons Generator

This is a gallery of buttons built with HTML and CSS.

9. Neumorphism Generator

Generate your own neumorphism

10. SVG Repo

It’s a repository of more than 300,000 free, optimized, SVG-based graphics and icons

11. MapLibre

Mapping library which includes JavaScript library as well as an SDK for displaying maps inside of iOS and Android apps.

12. Baseline Background Remover

AI-based background remover tools have been a dime-a-dozen recently.
Yeah, It's free as of now!

Most of the above sites are free to make your life easier by using the above tools 😉

🌟 Twitter

📚 Ebooks

🌟 Instagram

JavaScript Proxy

Suprabha — Wed, 16 Mar 2022 09:48:55 +0000

A JavaScript Proxy is an object that wraps another object and intercepts the fundamental operations of the target object.

syntax:

let proxy = new Proxy(target, handler);

target – is an object to wrap, can be anything, including functions.
handler – proxy configuration: an object with “traps”, methods that intercept operations. – e.g. get trap for reading a property of target, set trap for writing a property into target, and so on.

Let's look a quick example by defining an object called user:

const user = {
    firstName: 'suprabha',
    lastName: 'supi',
}

// defining a handler function
const handler = {}

// now, create a proxy
const userProxy = new Proxy(user, handler);

userProxy object uses the user object to store data. The userProxy can access all properties of the user object.

Let’s see the output:

console.log(userProxy.firstName); // suprabha
console.log(userProxy.lastName); // supi

If you modify the original object user, the change is reflected in the userProxy

user.firstName = 'sam';
console.log(userProxy.firstName); // sam

Similarly, a change in the userProxy object will be reflected in the original object user:

proxyUser.lastName = 's';
console.log(user.lastName); // s

There are methods in proxy, here we will cover most important methods:

get
set
apply

1️⃣ get:

The handler.get() method is a trap for getting a property value.

Also you can make the changes using get :

const user = {
    firstName: 'suprabha',
    lastName: 'supi',
}

// defining a handler function
const handler = {
    get(target, prop, receiver) {
    return "sumi";
  }
}

// now, create a proxy
const userProxy = new Proxy(user, handler);

console.log(userProxy.firstName) // sumi
console.log(userProxy.lastName)  // sumi

As of now we don’t have fullUserName in user object, so let’s create it in proxy using get trap:

const user = {
    firstName: 'suprabha',
    lastName: 'supi',
}

const handler = {
    get(target, property) {
        return property === 'fullUserName' ?
            `${target.firstName} ${target.lastName}` :
            target[property]
    }
};

const userProxy = new Proxy(user, handler)

console.log(userProxy.fullUserName) // suprabha supi

2️⃣ set:

set trap controls behaviour when a property of the target object is set.

So, let’s say you have to add some condition, so you can do it in set trap.

const user = {
    firstName: 'suprabha',
    lastName: 'supi',
        age: 15
}

const handler = {
    set(target, property, value) {
        if (property === 'age') {
            if (typeof value !== 'number') {
                throw new Error('Age should be in number!');
            }
            if (value < 18) {
                throw new Error('The user must be 18 or older!')
            }
        }
        target[property] = value;
    }
};

const userProxy = new Proxy(user, handler);

// if you try to set age to bool, you will get error
userProxy.age = true;
// Error: Age must be a number.

userProxy.age = '16';
// The user must be 18 or older.

userProxy.age = '20'
// no errors would be found

3️⃣ apply

The handler.apply() method is a trap for a function call. Here is the syntax:

let proxy = new Proxy(target, {
    apply: function(target, thisArg, args) {
        //...
    }
});

Now, lets follow the above example by captialzing the first and last name.

const user = {
    firstName: 'suprabha',
    lastName: 'supi'
}

const getFullName = function (user) {
    return `${user.firstName} ${user.lastName}`;
}

const getFullNameProxy = new Proxy(getFullName, {
    apply(target, thisArg, args) {
        return target(...args).toUpperCase();
    }
});

console.log(getFullNameProxy(user)); // SUPRABHA SUPI

Reference 🧐

Proxy MDN

🌟 Twitter

📚 Ebooks

🌟 Instagram

Git Reflog

Suprabha — Sat, 05 Mar 2022 11:51:02 +0000

By the name git reflog - Manages reflog information. It keeps tracks of everything which you do locally.

Let’s understand the git reflog and git log 👀

git reflog keep tracks of everything you have done locally.

example:

keep track of commit history,
if you have done hard reset,
it keeps track of git commit --amend as well

For git log, it never track the above commits(like reset and --amend).

The git reflog shows all your trials and errors. The git log just shows a clean and polished version of your work history.

So let’s say you have amend the commit, hence there will be new commit. If you do a reset and skip back a few commits in your history, those commits you skipped over won't show up in the log.

There is more to talk, let’s discuss it 😅

While working on repo, and habits of pushing code into main branch 😅

I started working on one feature without taking pull from main branch, after making changes when I tried to push changes to the main branch. I got following errors:

$ git push origin main
// I got to know I had to take pull from main (which some how I missed)
// and without taking pull I pushed forcefully

And then I did the unthinkable 😂

$ git push origin main -f
// successfully pushed to main branch

Later one of my colleague took pull from the main branch, and she was 😳😳🤯🤯.

Then I got to know that by force pushing my changes, I have removed her commit form the remote branch and the icing on the cake was that she has pulled the changes and now her work vanished from her local machine too! 🙈

We were not able to see those commits using git log(almost 5-6 commit ID’s were missing) 😥

To revert back my commit, I had to find the last commit ID which has been removed from commit history. If I would have not closed my terminal tab, then there was a chance to get the last commit ID.

How would not closing terminal tab have been helpful 🤔

So, while doing forcefully push, you get the message:

+ aauuii1...789011 HEAD -> branchname (forced update)

Here, aauuii1 is previous HEAD, and 789011 is new which just pushed forcefully.
So you can easily revert to that commit ID 🙌🏻

But seems, I am not that lucky, as I already closed my terminal tabs 🤦‍♀️

After 🔍 , I got to know the context about git log and git reflog.

git reflog tells you the chronological history of what you did.

Their I found this 👇 command,

$ git reflog show remotes/origin/branchname

It shows the forced update (789011) and previous commit (aauuii1).

After getting the last commit ID, I created new branch and reset to the commit ID

$ git checkout -b branch_name
$ git reset --soft aauuii1

// yayy! Its done 😍

git reflog allows you to go back and find those commits as it'll give you the commit ids. It is really a life saver 🥁

Moral of the story 🥇

Never give up, with little patience and some googling skill you might end up saving hours of work 💛

🌟 Twitter

📚 Ebooks

🌟 Instagram

Stop using Array.map() everywhere 🥵

Suprabha — Wed, 29 Dec 2021 06:38:59 +0000

Most of the time I used to see the snippet like this 👇



const fruits = ["apple", "orange", "cherry"];
let text = "";
document.getElementById("main").innerHTML = text;
fruits.map(i => text += i );

In the above snippet, we are adding fruits text to the DOM in main ID.
It seems there is no issue in the above snippet, Though there is one major issue, which we will be going see today.

Let's understand the issue by definition of map, map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

example:



let n = [1, 2, 3, 4];
let add = n.map(i => i + 2);
console.log(add); // [3, 4, 5, 6]

NOTE: Using map() method means returning a new collection of an array.

As discussed, map() method always returns a new array, so if you don’t have any use of a new array then never use map() method.
When you just need to iterate through an array, I will always recommend using other array methods like forEach or for..of.

example:



const fruits = ["apple", "orange", "cherry"];

let text = "";

fruits.forEach(myFunction);

document.getElementById("main").innerHTML = text;

function myFunction(item, index) {

  text += index + ": " + item + "<br>"; 

}

Why do we care about it? 🙄

As we know, map() method always returns an array. If you just need to update DOM then storing those elements into memory form doesn't add any point.
Of course, for a small chunk of numbers nothing is going to happen, however, if we take a larger number here then it affects the performance side as it will store the value in memory which will be redundant.

Summary ⅀

Stop using map() method, if you just need to iterate through an array.
Start using forEach or for...of method, if you want to iterate through an array.

Thanks for reading the article ❤️
Hope this post will be useful!

🌟 Twitter

📚 Ebooks

🌟 Instagram